notlar.html

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"    content="width=device-width">
    <meta name="author"      content="M A Eyler, Istanbul, 2020" />
    <meta name="description" content="Reader for the Quran" />
    <link rel="icon" href="image/icon.png">
    <title>Notlar</title>

  <style>
    body {
        max-width: 540px;
        background: #dfd;
    }
    button {
        cursor: pointer;
        background: yellow;
        margin: 6px;
        padding: 6px;
    }
    #notlar div {
        overflow: hidden;
        white-space: nowrap;
    }
    #notlar a {
        font: 15px arial, sans-serif;
        text-decoration: none;
        display: inline-block;
        width: 3em;
        color: black;
        cursor: pointer;
        background: hsl(240, 100%, 95%);
        margin: 6px;
        border: 1px solid;
        padding: 6px;
    }
    #notlar a:hover { 
        background: hsl(240, 100%, 85%);
    }
    #notlar i {
        color: black;
        margin: 6px;
        text-overflow: ellipsis;
    }
    #notlar button {
        background: darkorange;
        margin: 6px;
        padding: 2px 5px;
        user-select: none;
    }
  </style>
</head>

<body>

<h2 title='Her sayfaya notlar eklenebilir'>Sayfa Notları</h2>
<div id=liste>
  <p>Mushafın her sayfasına o sayfa ile ilgili bir not eklenebilir. Sayfanın sağ alt köşesindeki + (artı) simgesine dokunun. Notları kapatmak için tekrar dokunun. Aşağıdaki renkli X butonları ile notları tek tek silebilirsiniz.
  </p>
  <button id=save onclick="doSave()">
    <a id=saveA title="Notları dosyaya kaydet">Kaydet</a>
  </button> &ensp;
  <input type=file onChange='fileSelect(this.files[0])' 
    title="Kaydedilmiş dosyadan notları oku" /><br>
Notları başka bir cihaza aktarmak için önce yerel bir dosyaya kaydedin,
sonra bu dosyayı diğer cihaza taşıyıp oradan seçin.
  <p id=notlar></p>
  <button onclick="doPlain(true)">Düz metin</button><br>
Notları başka bir yazılıma aktarmak için önce butona basın, ilgili kısmını seçip kopyalayın.
</div>
<div id=metin hidden>
  <p id=text></p>
  <button onclick="doPlain(false)">Liste</button>
</div>

<script src="code/common.js"></script>
<script>
"use strict";
function doPlain(plain) {
    liste.hidden = plain; metin.hidden = !plain
    if (!plain || !notes) return
    text.innerHTML = Object.keys(notes)
      .map(k => `<b>${k}</b>&ensp; ${notes[k]}`)
      .join('<br>\n')
}
function doSave() {
    let data = localStorage[KEY]
    if (!data) return
    if (saveA.href) URL.revokeObjectURL(saveA.href)
    let blob = new Blob([data], {type: 'text/plain'})
    saveA.href= URL.createObjectURL(blob)
    let [time] = new Date().toTimeString().split(' ')
    saveA.download = PREF + time.replace(/:/g, '.') + EXT
    console.log('doSave', saveA.download)
}
function confirmRead(n2) {
    if (!notes) return true
    let n1 = Object.keys(notes).length
    let msg = 
`Listedeki ${n1} adet notunuz silinecek.
Dosyadan okunan ${n2} adet not eklenecek.
Bu işlem geri alınamaz. Devam?`
    return confirm(msg)
}
async function fileSelect(f) {
    try {
      if (!f.name.startsWith(PREF) || !f.name.endsWith(EXT)) 
        throw 'İsim yanlış'
      let t = await f.text()
      let a = Object.keys(JSON.parse(t))
      if (!confirmRead(a.length)) return
      localStorage[KEY] = t; display()
      console.log('fileSelect', f.name)
    } catch (e) { //may fail for various reasons
      alert(`Bu dosya olmaz: ${f.name}\n${e}`)
    }
}
function remove(c) {
    let d = getStorage(KEY)
    if (!d || !d[c]) return
    delete d[c]
    setStorage(KEY, d); display()
    console.log('remove', c)
}
function display(key=KEY) {
  function anchor(p) {
    let a =  //use page p and notes[p]
     '<a href="reader.html#p='+p+'"'
    +' target=iqra>s.'+p+'</a> '
    let x = 
     '<button id='+p+' title="Bu notu sil"'
    +' onclick="remove(this.id)">x</button>'
    let n = '<i>'+notes[p]+'</i>'
    return '<div>'+a+x+n+'</div>'
  }
    notes = getStorage(key) //global
    if (!notes) return
    notlar.innerHTML = Object.keys(notes)
      .map(anchor).join('\n')
}
function listener(e) {
    // console.log(e.key, e.newValue)
    if (e.key === KEY) display()
}
const PREF = 'Notlar ', EXT = '.json', KEY = 'notesQ';
var notes
display(); addEventListener('storage', listener)
document.querySelector('input').accept = EXT
</script>

</body>
</html>