-
Notifications
You must be signed in to change notification settings - Fork 3
/
notlar.html
153 lines (148 loc) · 4.35 KB
/
notlar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!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>  
<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>  ${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>