diff options
Diffstat (limited to 'tpl/default')
-rw-r--r-- | tpl/default/changetag.html | 4 | ||||
-rw-r--r-- | tpl/default/configure.html | 30 | ||||
-rw-r--r-- | tpl/default/css/shaarli.css | 73 | ||||
-rw-r--r-- | tpl/default/daily.html | 2 | ||||
-rw-r--r-- | tpl/default/import.html | 1 | ||||
-rw-r--r-- | tpl/default/includes.html | 2 | ||||
-rw-r--r-- | tpl/default/install.html | 42 | ||||
-rw-r--r-- | tpl/default/js/shaarli.js | 309 | ||||
-rw-r--r-- | tpl/default/linklist.html | 5 | ||||
-rw-r--r-- | tpl/default/page.footer.html | 3 | ||||
-rw-r--r-- | tpl/default/page.header.html | 7 | ||||
-rw-r--r-- | tpl/default/tag.cloud.html (renamed from tpl/default/tagcloud.html) | 24 | ||||
-rw-r--r-- | tpl/default/tag.list.html | 86 | ||||
-rw-r--r-- | tpl/default/tag.sort.html | 8 | ||||
-rw-r--r-- | tpl/default/tools.html | 13 |
15 files changed, 558 insertions, 51 deletions
diff --git a/tpl/default/changetag.html b/tpl/default/changetag.html index 8d263a16..49dd20d9 100644 --- a/tpl/default/changetag.html +++ b/tpl/default/changetag.html | |||
@@ -11,7 +11,7 @@ | |||
11 | <h2 class="window-title">{"Manage tags"|t}</h2> | 11 | <h2 class="window-title">{"Manage tags"|t}</h2> |
12 | <form method="POST" action="#" name="changetag" id="changetag"> | 12 | <form method="POST" action="#" name="changetag" id="changetag"> |
13 | <div> | 13 | <div> |
14 | <input type="text" name="fromtag" placeholder="{'Tag'|t}" | 14 | <input type="text" name="fromtag" placeholder="{'Tag'|t}" value="{$fromtag}" |
15 | list="tagsList" autocomplete="off" class="awesomplete autofocus" data-minChars="1"> | 15 | list="tagsList" autocomplete="off" class="awesomplete autofocus" data-minChars="1"> |
16 | <datalist id="tagsList"> | 16 | <datalist id="tagsList"> |
17 | {loop="$tags"}<option>{$key}</option>{/loop} | 17 | {loop="$tags"}<option>{$key}</option>{/loop} |
@@ -31,6 +31,8 @@ | |||
31 | <input type="submit" value="{'Delete'|t}" name="deletetag" class="button button-red confirm-delete"> | 31 | <input type="submit" value="{'Delete'|t}" name="deletetag" class="button button-red confirm-delete"> |
32 | </div> | 32 | </div> |
33 | </form> | 33 | </form> |
34 | |||
35 | <p>You can also edit tags in the <a href="?do=taglist&sort=usage">tag list</a>.</p> | ||
34 | </div> | 36 | </div> |
35 | </div> | 37 | </div> |
36 | {include="page.footer"} | 38 | {include="page.footer"} |
diff --git a/tpl/default/configure.html b/tpl/default/configure.html index 12261487..76a1b9fd 100644 --- a/tpl/default/configure.html +++ b/tpl/default/configure.html | |||
@@ -34,7 +34,7 @@ | |||
34 | <div class="pure-u-lg-{$ratioLabel} pure-u-1"> | 34 | <div class="pure-u-lg-{$ratioLabel} pure-u-1"> |
35 | <div class="form-label"> | 35 | <div class="form-label"> |
36 | <label for="titleLink"> | 36 | <label for="titleLink"> |
37 | <span class="label-name">{'Title link'|t}</span><br> | 37 | <span class="label-name">{'Home link'|t}</span><br> |
38 | <span class="label-desc">{'Default value'|t}: ?</span> | 38 | <span class="label-desc">{'Default value'|t}: ?</span> |
39 | </label> | 39 | </label> |
40 | </div> | 40 | </div> |
@@ -73,15 +73,35 @@ | |||
73 | <div class="pure-u-lg-{$ratioLabel} pure-u-1 "> | 73 | <div class="pure-u-lg-{$ratioLabel} pure-u-1 "> |
74 | <div class="form-label"> | 74 | <div class="form-label"> |
75 | <label> | 75 | <label> |
76 | <span class="label-name">{'Timezone'|t}</span> | 76 | <span class="label-name">{'Timezone'|t}</span><br> |
77 | <span class="label-desc">{'Continent'|t} · {'City'|t}</span> | ||
77 | </label> | 78 | </label> |
78 | </div> | 79 | </div> |
79 | </div> | 80 | </div> |
80 | <div class="pure-u-lg-{$ratioInput} pure-u-1 "> | 81 | <div class="pure-u-lg-{$ratioInput} pure-u-1 "> |
81 | <div class="form-input"> | 82 | <div class="form-input"> |
82 | {ignore}FIXME! too hackish, needs to be fixed upstream{/ignore} | 83 | <div class="timezone"> |
83 | <div class="timezone" id="timezone-remove">{$timezone_form}</div> | 84 | <select id="continent" name="continent"> |
84 | <div class="timezone" id="timezone-add"></div> | 85 | {loop="$continents"} |
86 | {if="$key !== 'selected'"} | ||
87 | <option value="{$value}" {if="$continents.selected === $value"}selected{/if}> | ||
88 | {$value} | ||
89 | </option> | ||
90 | {/if} | ||
91 | {/loop} | ||
92 | </select> | ||
93 | <select id="city" name="city"> | ||
94 | {loop="$cities"} | ||
95 | {if="$key !== 'selected'"} | ||
96 | <option value="{$value.city}" | ||
97 | {if="$cities.selected === $value.city"}selected{/if} | ||
98 | data-continent="{$value.continent}"> | ||
99 | {$value.city} | ||
100 | </option> | ||
101 | {/if} | ||
102 | {/loop} | ||
103 | </select> | ||
104 | </div> | ||
85 | </div> | 105 | </div> |
86 | </div> | 106 | </div> |
87 | </div> | 107 | </div> |
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css index 73fade5f..28920648 100644 --- a/tpl/default/css/shaarli.css +++ b/tpl/default/css/shaarli.css | |||
@@ -211,7 +211,7 @@ body, .pure-g [class*="pure-u"] { | |||
211 | } | 211 | } |
212 | } | 212 | } |
213 | 213 | ||
214 | #search, #search-linklist { | 214 | #search, #search-linklist, #search-tagcloud { |
215 | text-align: center; | 215 | text-align: center; |
216 | width: 100%; | 216 | width: 100%; |
217 | } | 217 | } |
@@ -234,6 +234,7 @@ body, .pure-g [class*="pure-u"] { | |||
234 | } | 234 | } |
235 | 235 | ||
236 | #search button, | 236 | #search button, |
237 | #search-tagcloud button, | ||
237 | #search-linklist button { | 238 | #search-linklist button { |
238 | background: transparent; | 239 | background: transparent; |
239 | border: none; | 240 | border: none; |
@@ -251,6 +252,9 @@ body, .pure-g [class*="pure-u"] { | |||
251 | #search-linklist button:hover { | 252 | #search-linklist button:hover { |
252 | color: #fff; | 253 | color: #fff; |
253 | } | 254 | } |
255 | #search-tagcloud button:hover { | ||
256 | color: #d0d0d0; | ||
257 | } | ||
254 | 258 | ||
255 | #search-linklist { | 259 | #search-linklist { |
256 | padding: 5px 0; | 260 | padding: 5px 0; |
@@ -275,6 +279,19 @@ body, .pure-g [class*="pure-u"] { | |||
275 | } | 279 | } |
276 | } | 280 | } |
277 | 281 | ||
282 | .subheader-form a.button { | ||
283 | color: #f5f5f5; | ||
284 | font-weight: bold; | ||
285 | text-decoration: none; | ||
286 | border: 2px solid #f5f5f5; | ||
287 | border-radius: 5px; | ||
288 | padding: 3px 10px; | ||
289 | } | ||
290 | |||
291 | .linklist-item-editbuttons .delete-checkbox { | ||
292 | display: none; | ||
293 | } | ||
294 | |||
278 | #header-login-form input[type="text"], #header-login-form input[type="password"] { | 295 | #header-login-form input[type="text"], #header-login-form input[type="password"] { |
279 | width: 200px; | 296 | width: 200px; |
280 | } | 297 | } |
@@ -734,10 +751,11 @@ body, .pure-g [class*="pure-u"] { | |||
734 | .page-form a { | 751 | .page-form a { |
735 | color: #1b926c; | 752 | color: #1b926c; |
736 | font-weight: bold; | 753 | font-weight: bold; |
754 | text-decoration: none; | ||
737 | } | 755 | } |
738 | 756 | ||
739 | .page-form p { | 757 | .page-form p { |
740 | padding: 0 10px; | 758 | padding: 5px 10px; |
741 | margin: 0; | 759 | margin: 0; |
742 | } | 760 | } |
743 | 761 | ||
@@ -1053,7 +1071,7 @@ form[name="linkform"].page-form { | |||
1053 | } | 1071 | } |
1054 | 1072 | ||
1055 | #cloudtag, #cloudtag a { | 1073 | #cloudtag, #cloudtag a { |
1056 | color: #000; | 1074 | color: #252525; |
1057 | text-decoration: none; | 1075 | text-decoration: none; |
1058 | } | 1076 | } |
1059 | 1077 | ||
@@ -1062,6 +1080,42 @@ form[name="linkform"].page-form { | |||
1062 | } | 1080 | } |
1063 | 1081 | ||
1064 | /** | 1082 | /** |
1083 | * TAG LIST | ||
1084 | */ | ||
1085 | #taglist { | ||
1086 | padding: 0 10px; | ||
1087 | } | ||
1088 | |||
1089 | #taglist a { | ||
1090 | color: #252525; | ||
1091 | text-decoration: none; | ||
1092 | } | ||
1093 | |||
1094 | #taglist .count { | ||
1095 | display: inline-block; | ||
1096 | width: 35px; | ||
1097 | text-align: right; | ||
1098 | color: #7f7f7f; | ||
1099 | } | ||
1100 | |||
1101 | #taglist .rename-tag-form { | ||
1102 | display: none; | ||
1103 | } | ||
1104 | |||
1105 | #taglist .delete-tag { | ||
1106 | color: #ac2925; | ||
1107 | display: none; | ||
1108 | } | ||
1109 | |||
1110 | #taglist .rename-tag { | ||
1111 | color: #0b5ea6; | ||
1112 | } | ||
1113 | |||
1114 | #taglist .validate-rename-tag { | ||
1115 | color: #1b926c; | ||
1116 | } | ||
1117 | |||
1118 | /** | ||
1065 | * Picture wall CSS | 1119 | * Picture wall CSS |
1066 | */ | 1120 | */ |
1067 | #picwall_container { | 1121 | #picwall_container { |
@@ -1210,3 +1264,16 @@ form[name="linkform"].page-form { | |||
1210 | .pure-button { | 1264 | .pure-button { |
1211 | -moz-user-select: auto; | 1265 | -moz-user-select: auto; |
1212 | } | 1266 | } |
1267 | |||
1268 | .tag-sort { | ||
1269 | margin-top: 30px; | ||
1270 | text-align: center; | ||
1271 | } | ||
1272 | |||
1273 | .tag-sort a { | ||
1274 | display: inline-block; | ||
1275 | margin: 0 15px; | ||
1276 | color: white; | ||
1277 | text-decoration: none; | ||
1278 | font-weight: bold; | ||
1279 | } | ||
diff --git a/tpl/default/daily.html b/tpl/default/daily.html index d8c91078..29d845d5 100644 --- a/tpl/default/daily.html +++ b/tpl/default/daily.html | |||
@@ -44,7 +44,7 @@ | |||
44 | </div> | 44 | </div> |
45 | </div> | 45 | </div> |
46 | <div> | 46 | <div> |
47 | <h3 class="window-subtitle">{function="strftime('%A %d, %B %Y', $day)"}</h3> | 47 | <h3 class="window-subtitle">{function="format_date($dayDate, false)"}</h3> |
48 | 48 | ||
49 | <div id="plugin_zone_about_daily" class="plugin_zone"> | 49 | <div id="plugin_zone_about_daily" class="plugin_zone"> |
50 | {loop="$daily_about_plugin"} | 50 | {loop="$daily_about_plugin"} |
diff --git a/tpl/default/import.html b/tpl/default/import.html index e6e521e8..1f040685 100644 --- a/tpl/default/import.html +++ b/tpl/default/import.html | |||
@@ -18,6 +18,7 @@ | |||
18 | <div class="center" id="import-field"> | 18 | <div class="center" id="import-field"> |
19 | <input type="hidden" name="MAX_FILE_SIZE" value="{$maxfilesize}"> | 19 | <input type="hidden" name="MAX_FILE_SIZE" value="{$maxfilesize}"> |
20 | <input type="file" name="filetoupload"> | 20 | <input type="file" name="filetoupload"> |
21 | <p><br>Maximum size allowed: <strong>{$maxfilesizeHuman}</strong></p> | ||
21 | </div> | 22 | </div> |
22 | 23 | ||
23 | <div class="pure-g"> | 24 | <div class="pure-g"> |
diff --git a/tpl/default/includes.html b/tpl/default/includes.html index 91c6ca3b..0350ef66 100644 --- a/tpl/default/includes.html +++ b/tpl/default/includes.html | |||
@@ -11,7 +11,7 @@ | |||
11 | <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" /> | 11 | <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" /> |
12 | <link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" /> | 12 | <link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" /> |
13 | <link type="text/css" rel="stylesheet" href="css/shaarli.css" /> | 13 | <link type="text/css" rel="stylesheet" href="css/shaarli.css" /> |
14 | {if="is_file('inc/user.css')"} | 14 | {if="is_file('data/user.css')"} |
15 | <link type="text/css" rel="stylesheet" href="data/user.css#" /> | 15 | <link type="text/css" rel="stylesheet" href="data/user.css#" /> |
16 | {/if} | 16 | {/if} |
17 | {loop="$plugins_includes.css_files"} | 17 | {loop="$plugins_includes.css_files"} |
diff --git a/tpl/default/install.html b/tpl/default/install.html index 663397ac..164d453b 100644 --- a/tpl/default/install.html +++ b/tpl/default/install.html | |||
@@ -45,24 +45,22 @@ | |||
45 | </div> | 45 | </div> |
46 | <div class="pure-u-lg-{$ratioInput} pure-u-1"> | 46 | <div class="pure-u-lg-{$ratioInput} pure-u-1"> |
47 | <div class="form-input"> | 47 | <div class="form-input"> |
48 | <input type="text" name="setpassword" id="password"> | 48 | <input type="password" name="setpassword" id="password"> |
49 | </div> | 49 | </div> |
50 | </div> | 50 | </div> |
51 | </div> | 51 | </div> |
52 | 52 | ||
53 | <div class="pure-g"> | 53 | <div class="pure-g"> |
54 | <div class="pure-u-lg-{$ratioLabel} pure-u-1 "> | 54 | <div class="pure-u-lg-{$ratioLabel} pure-u-1"> |
55 | <div class="form-label"> | 55 | <div class="form-label"> |
56 | <label> | 56 | <label for="title"> |
57 | <span class="label-name">{'Timezone'|t}</span> | 57 | <span class="label-name">{'Shaarli title'|t}</span> |
58 | </label> | 58 | </label> |
59 | </div> | 59 | </div> |
60 | </div> | 60 | </div> |
61 | <div class="pure-u-lg-{$ratioInput} pure-u-1 "> | 61 | <div class="pure-u-lg-{$ratioInput} pure-u-1"> |
62 | <div class="form-input"> | 62 | <div class="form-input"> |
63 | {ignore}FIXME! too hackish, needs to be fixed upstream{/ignore} | 63 | <input type="text" name="title" id="title" placeholder="{'My links'|t}"> |
64 | <div class="timezone" id="timezone-remove">{$timezone_html}</div> | ||
65 | <div class="timezone" id="timezone-add"></div> | ||
66 | </div> | 64 | </div> |
67 | </div> | 65 | </div> |
68 | </div> | 66 | </div> |
@@ -70,14 +68,36 @@ | |||
70 | <div class="pure-g"> | 68 | <div class="pure-g"> |
71 | <div class="pure-u-lg-{$ratioLabel} pure-u-1"> | 69 | <div class="pure-u-lg-{$ratioLabel} pure-u-1"> |
72 | <div class="form-label"> | 70 | <div class="form-label"> |
73 | <label for="title"> | 71 | <label> |
74 | <span class="label-name">{'Shaarli title'|t}</span> | 72 | <span class="label-name">{'Timezone'|t}</span><br> |
73 | <span class="label-desc">{'Continent'|t} · {'City'|t}</span> | ||
75 | </label> | 74 | </label> |
76 | </div> | 75 | </div> |
77 | </div> | 76 | </div> |
78 | <div class="pure-u-lg-{$ratioInput} pure-u-1"> | 77 | <div class="pure-u-lg-{$ratioInput} pure-u-1"> |
79 | <div class="form-input"> | 78 | <div class="form-input"> |
80 | <input type="text" name="title" id="title" placeholder="{'My links'|t}"> | 79 | <div class="timezone"> |
80 | <select id="continent" name="continent"> | ||
81 | {loop="$continents"} | ||
82 | {if="$key !== 'selected'"} | ||
83 | <option value="{$value}" {if="$continents.selected === $value"}selected{/if}> | ||
84 | {$value} | ||
85 | </option> | ||
86 | {/if} | ||
87 | {/loop} | ||
88 | </select> | ||
89 | <select id="city" name="city"> | ||
90 | {loop="$cities"} | ||
91 | {if="$key !== 'selected'"} | ||
92 | <option value="{$value.city}" | ||
93 | {if="$cities.selected === $value.city"}selected{/if} | ||
94 | data-continent="{$value.continent}"> | ||
95 | {$value.city} | ||
96 | </option> | ||
97 | {/if} | ||
98 | {/loop} | ||
99 | </select> | ||
100 | </div> | ||
81 | </div> | 101 | </div> |
82 | </div> | 102 | </div> |
83 | </div> | 103 | </div> |
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js index edcf2809..4ebb7815 100644 --- a/tpl/default/js/shaarli.js +++ b/tpl/default/js/shaarli.js | |||
@@ -76,9 +76,12 @@ window.onload = function () { | |||
76 | } | 76 | } |
77 | } | 77 | } |
78 | 78 | ||
79 | document.getElementById('menu-toggle').addEventListener('click', function (e) { | 79 | var menuToggle = document.getElementById('menu-toggle'); |
80 | toggleMenu(); | 80 | if (menuToggle != null) { |
81 | }); | 81 | menuToggle.addEventListener('click', function (e) { |
82 | toggleMenu(); | ||
83 | }); | ||
84 | } | ||
82 | 85 | ||
83 | window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu); | 86 | window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu); |
84 | })(this, this.document); | 87 | })(this, this.document); |
@@ -213,14 +216,14 @@ window.onload = function () { | |||
213 | /** | 216 | /** |
214 | * Autofocus text fields | 217 | * Autofocus text fields |
215 | */ | 218 | */ |
216 | // ES6 syntax | 219 | var autofocusElements = document.querySelectorAll('.autofocus'); |
217 | let autofocusElements = document.querySelectorAll('.autofocus'); | 220 | var breakLoop = false; |
218 | for (let autofocusElement of autofocusElements) { | 221 | [].forEach.call(autofocusElements, function(autofocusElement) { |
219 | if (autofocusElement.value == '') { | 222 | if (autofocusElement.value == '' && ! breakLoop) { |
220 | autofocusElement.focus(); | 223 | autofocusElement.focus(); |
221 | break; | 224 | breakLoop = true; |
222 | } | 225 | } |
223 | } | 226 | }); |
224 | 227 | ||
225 | /** | 228 | /** |
226 | * Handle sub menus/forms | 229 | * Handle sub menus/forms |
@@ -299,21 +302,6 @@ window.onload = function () { | |||
299 | } | 302 | } |
300 | 303 | ||
301 | /** | 304 | /** |
302 | * TimeZome select | ||
303 | * FIXME! way too hackish | ||
304 | */ | ||
305 | var toRemove = document.getElementById('timezone-remove'); | ||
306 | if (toRemove != null) { | ||
307 | var firstSelect = toRemove.getElementsByTagName('select')[0]; | ||
308 | var secondSelect = toRemove.getElementsByTagName('select')[1]; | ||
309 | toRemove.parentNode.removeChild(toRemove); | ||
310 | var toAdd = document.getElementById('timezone-add'); | ||
311 | var newTimezone = '<span class="timezone-continent">Continent ' + firstSelect.outerHTML + '</span>'; | ||
312 | newTimezone += ' <span class="timezone-country">Country ' + secondSelect.outerHTML + '</span>'; | ||
313 | toAdd.innerHTML = newTimezone; | ||
314 | } | ||
315 | |||
316 | /** | ||
317 | * Awesomplete trigger. | 305 | * Awesomplete trigger. |
318 | */ | 306 | */ |
319 | var tags = document.getElementById('lf_tags'); | 307 | var tags = document.getElementById('lf_tags'); |
@@ -365,8 +353,256 @@ window.onload = function () { | |||
365 | } | 353 | } |
366 | }); | 354 | }); |
367 | }); | 355 | }); |
356 | |||
357 | var continent = document.getElementById('continent'); | ||
358 | var city = document.getElementById('city'); | ||
359 | if (continent != null && city != null) { | ||
360 | continent.addEventListener('change', function (event) { | ||
361 | hideTimezoneCities(city, continent.options[continent.selectedIndex].value, true); | ||
362 | }); | ||
363 | hideTimezoneCities(city, continent.options[continent.selectedIndex].value, false); | ||
364 | } | ||
365 | |||
366 | /** | ||
367 | * Bulk actions | ||
368 | */ | ||
369 | var linkCheckboxes = document.querySelectorAll('.delete-checkbox'); | ||
370 | var bar = document.getElementById('actions'); | ||
371 | [].forEach.call(linkCheckboxes, function(checkbox) { | ||
372 | checkbox.style.display = 'block'; | ||
373 | checkbox.addEventListener('click', function(event) { | ||
374 | var count = 0; | ||
375 | var linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked'); | ||
376 | [].forEach.call(linkCheckedCheckboxes, function(checkbox) { | ||
377 | count++; | ||
378 | }); | ||
379 | if (count == 0 && bar.classList.contains('open')) { | ||
380 | bar.classList.toggle('open'); | ||
381 | } else if (count > 0 && ! bar.classList.contains('open')) { | ||
382 | bar.classList.toggle('open'); | ||
383 | } | ||
384 | }); | ||
385 | }); | ||
386 | |||
387 | var deleteButton = document.getElementById('actions-delete'); | ||
388 | var token = document.querySelector('input[type="hidden"][name="token"]'); | ||
389 | if (deleteButton != null && token != null) { | ||
390 | deleteButton.addEventListener('click', function(event) { | ||
391 | event.preventDefault(); | ||
392 | |||
393 | var links = []; | ||
394 | var linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked'); | ||
395 | [].forEach.call(linkCheckedCheckboxes, function(checkbox) { | ||
396 | links.push({ | ||
397 | 'id': checkbox.value, | ||
398 | 'title': document.querySelector('.linklist-item[data-id="'+ checkbox.value +'"] .linklist-link').innerHTML | ||
399 | }); | ||
400 | }); | ||
401 | |||
402 | var message = 'Are you sure you want to delete '+ links.length +' links?\n'; | ||
403 | message += 'This action is IRREVERSIBLE!\n\nTitles:\n'; | ||
404 | var ids = ''; | ||
405 | links.forEach(function(item) { | ||
406 | message += ' - '+ item['title'] +'\n'; | ||
407 | ids += item['id'] +'+'; | ||
408 | }); | ||
409 | |||
410 | if (window.confirm(message)) { | ||
411 | window.location = '?delete_link&lf_linkdate='+ ids +'&token='+ token.value; | ||
412 | } | ||
413 | }); | ||
414 | } | ||
415 | |||
416 | /** | ||
417 | * Tag list operations | ||
418 | * | ||
419 | * TODO: support error code in the backend for AJAX requests | ||
420 | */ | ||
421 | var existingTags = document.querySelector('input[name="taglist"]').value.split(' '); | ||
422 | var awesomepletes = []; | ||
423 | |||
424 | // Display/Hide rename form | ||
425 | var renameTagButtons = document.querySelectorAll('.rename-tag'); | ||
426 | [].forEach.call(renameTagButtons, function(rename) { | ||
427 | rename.addEventListener('click', function(event) { | ||
428 | event.preventDefault(); | ||
429 | var block = findParent(event.target, 'div', {'class': 'tag-list-item'}); | ||
430 | var form = block.querySelector('.rename-tag-form'); | ||
431 | if (form.style.display == 'none' || form.style.display == '') { | ||
432 | form.style.display = 'block'; | ||
433 | } else { | ||
434 | form.style.display = 'none'; | ||
435 | } | ||
436 | block.querySelector('input').focus(); | ||
437 | }); | ||
438 | }); | ||
439 | |||
440 | // Rename a tag with an AJAX request | ||
441 | var renameTagSubmits = document.querySelectorAll('.validate-rename-tag'); | ||
442 | [].forEach.call(renameTagSubmits, function(rename) { | ||
443 | rename.addEventListener('click', function(event) { | ||
444 | event.preventDefault(); | ||
445 | var block = findParent(event.target, 'div', {'class': 'tag-list-item'}); | ||
446 | var input = block.querySelector('.rename-tag-input'); | ||
447 | var totag = input.value.replace('/"/g', '\\"'); | ||
448 | if (totag.trim() == '') { | ||
449 | return; | ||
450 | } | ||
451 | var fromtag = block.getAttribute('data-tag'); | ||
452 | var token = document.getElementById('token').value; | ||
453 | |||
454 | xhr = new XMLHttpRequest(); | ||
455 | xhr.open('POST', '?do=changetag'); | ||
456 | xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); | ||
457 | xhr.onload = function() { | ||
458 | if (xhr.status !== 200) { | ||
459 | alert('An error occurred. Return code: '+ xhr.status); | ||
460 | location.reload(); | ||
461 | } else { | ||
462 | block.setAttribute('data-tag', totag); | ||
463 | input.setAttribute('name', totag); | ||
464 | input.setAttribute('value', totag); | ||
465 | findParent(input, 'div', {'class': 'rename-tag-form'}).style.display = 'none'; | ||
466 | block.querySelector('a.tag-link').innerHTML = htmlEntities(totag); | ||
467 | block.querySelector('a.tag-link').setAttribute('href', '?searchtags='+ encodeURIComponent(totag)); | ||
468 | block.querySelector('a.rename-tag').setAttribute('href', '?do=changetag&fromtag='+ encodeURIComponent(totag)); | ||
469 | |||
470 | // Refresh awesomplete values | ||
471 | for (var key in existingTags) { | ||
472 | if (existingTags[key] == fromtag) { | ||
473 | existingTags[key] = totag; | ||
474 | } | ||
475 | } | ||
476 | awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes); | ||
477 | } | ||
478 | }; | ||
479 | xhr.send('renametag=1&fromtag='+ encodeURIComponent(fromtag) +'&totag='+ encodeURIComponent(totag) +'&token='+ token); | ||
480 | refreshToken(); | ||
481 | }); | ||
482 | }); | ||
483 | |||
484 | // Validate input with enter key | ||
485 | var renameTagInputs = document.querySelectorAll('.rename-tag-input'); | ||
486 | [].forEach.call(renameTagInputs, function(rename) { | ||
487 | |||
488 | rename.addEventListener('keypress', function(event) { | ||
489 | if (event.keyCode === 13) { // enter | ||
490 | findParent(event.target, 'div', {'class': 'tag-list-item'}).querySelector('.validate-rename-tag').click(); | ||
491 | } | ||
492 | }); | ||
493 | }); | ||
494 | |||
495 | // Delete a tag with an AJAX query (alert popup confirmation) | ||
496 | var deleteTagButtons = document.querySelectorAll('.delete-tag'); | ||
497 | [].forEach.call(deleteTagButtons, function(rename) { | ||
498 | rename.style.display = 'inline'; | ||
499 | rename.addEventListener('click', function(event) { | ||
500 | event.preventDefault(); | ||
501 | var block = findParent(event.target, 'div', {'class': 'tag-list-item'}); | ||
502 | var tag = block.getAttribute('data-tag'); | ||
503 | var token = document.getElementById('token').value; | ||
504 | |||
505 | if (confirm('Are you sure you want to delete the tag "'+ tag +'"?')) { | ||
506 | xhr = new XMLHttpRequest(); | ||
507 | xhr.open('POST', '?do=changetag'); | ||
508 | xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); | ||
509 | xhr.onload = function() { | ||
510 | block.remove(); | ||
511 | }; | ||
512 | xhr.send(encodeURI('deletetag=1&fromtag='+ tag +'&token='+ token)); | ||
513 | refreshToken(); | ||
514 | } | ||
515 | }); | ||
516 | }); | ||
517 | |||
518 | updateAwesompleteList('.rename-tag-input', document.querySelector('input[name="taglist"]').value.split(' '), awesomepletes); | ||
368 | }; | 519 | }; |
369 | 520 | ||
521 | /** | ||
522 | * Find a parent element according to its tag and its attributes | ||
523 | * | ||
524 | * @param element Element where to start the search | ||
525 | * @param tagName Expected parent tag name | ||
526 | * @param attributes Associative array of expected attributes (name=>value). | ||
527 | * | ||
528 | * @returns Found element or null. | ||
529 | */ | ||
530 | function findParent(element, tagName, attributes) | ||
531 | { | ||
532 | while (element) { | ||
533 | if (element.tagName.toLowerCase() == tagName) { | ||
534 | var match = true; | ||
535 | for (var key in attributes) { | ||
536 | if (! element.hasAttribute(key) | ||
537 | || (attributes[key] != '' && element.getAttribute(key).indexOf(attributes[key]) == -1) | ||
538 | ) { | ||
539 | match = false; | ||
540 | break; | ||
541 | } | ||
542 | } | ||
543 | |||
544 | if (match) { | ||
545 | return element; | ||
546 | } | ||
547 | } | ||
548 | element = element.parentElement; | ||
549 | } | ||
550 | return null; | ||
551 | } | ||
552 | |||
553 | /** | ||
554 | * Ajax request to refresh the CSRF token. | ||
555 | */ | ||
556 | function refreshToken() | ||
557 | { | ||
558 | var xhr = new XMLHttpRequest(); | ||
559 | xhr.open('GET', '?do=token'); | ||
560 | xhr.onload = function() { | ||
561 | var token = document.getElementById('token'); | ||
562 | token.setAttribute('value', xhr.responseText); | ||
563 | }; | ||
564 | xhr.send(); | ||
565 | } | ||
566 | |||
567 | /** | ||
568 | * Update awesomplete list of tag for all elements matching the given selector | ||
569 | * | ||
570 | * @param selector CSS selector | ||
571 | * @param tags Array of tags | ||
572 | * @param instances List of existing awesomplete instances | ||
573 | */ | ||
574 | function updateAwesompleteList(selector, tags, instances) | ||
575 | { | ||
576 | // First load: create Awesomplete instances | ||
577 | if (instances.length == 0) { | ||
578 | var elements = document.querySelectorAll(selector); | ||
579 | [].forEach.call(elements, function (element) { | ||
580 | instances.push(new Awesomplete( | ||
581 | element, | ||
582 | {'list': tags} | ||
583 | )); | ||
584 | }); | ||
585 | } else { | ||
586 | // Update awesomplete tag list | ||
587 | for (var key in instances) { | ||
588 | instances[key].list = tags; | ||
589 | } | ||
590 | } | ||
591 | return instances; | ||
592 | } | ||
593 | |||
594 | /** | ||
595 | * html_entities in JS | ||
596 | * | ||
597 | * @see http://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript | ||
598 | */ | ||
599 | function htmlEntities(str) | ||
600 | { | ||
601 | return str.replace(/[\u00A0-\u9999<>\&]/gim, function(i) { | ||
602 | return '&#'+i.charCodeAt(0)+';'; | ||
603 | }); | ||
604 | } | ||
605 | |||
370 | function activateFirefoxSocial(node) { | 606 | function activateFirefoxSocial(node) { |
371 | var loc = location.href; | 607 | var loc = location.href; |
372 | var baseURL = loc.substring(0, loc.lastIndexOf("/")); | 608 | var baseURL = loc.substring(0, loc.lastIndexOf("/")); |
@@ -390,3 +626,28 @@ function activateFirefoxSocial(node) { | |||
390 | var activate = new CustomEvent("ActivateSocialFeature"); | 626 | var activate = new CustomEvent("ActivateSocialFeature"); |
391 | node.dispatchEvent(activate); | 627 | node.dispatchEvent(activate); |
392 | } | 628 | } |
629 | |||
630 | /** | ||
631 | * Add the class 'hidden' to city options not attached to the current selected continent. | ||
632 | * | ||
633 | * @param cities List of <option> elements | ||
634 | * @param currentContinent Current selected continent | ||
635 | * @param reset Set to true to reset the selected value | ||
636 | */ | ||
637 | function hideTimezoneCities(cities, currentContinent) { | ||
638 | var first = true; | ||
639 | if (reset == null) { | ||
640 | reset = false; | ||
641 | } | ||
642 | [].forEach.call(cities, function (option) { | ||
643 | if (option.getAttribute('data-continent') != currentContinent) { | ||
644 | option.className = 'hidden'; | ||
645 | } else { | ||
646 | option.className = ''; | ||
647 | if (reset === true && first === true) { | ||
648 | option.setAttribute('selected', 'selected'); | ||
649 | first = false; | ||
650 | } | ||
651 | } | ||
652 | }); | ||
653 | } | ||
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html index 3d6be529..2568a5d6 100644 --- a/tpl/default/linklist.html +++ b/tpl/default/linklist.html | |||
@@ -15,6 +15,8 @@ | |||
15 | {/if} | 15 | {/if} |
16 | </div> | 16 | </div> |
17 | 17 | ||
18 | <input type="hidden" name="token" value="{$token}"> | ||
19 | |||
18 | <div id="search-linklist"> | 20 | <div id="search-linklist"> |
19 | 21 | ||
20 | <div class="pure-g"> | 22 | <div class="pure-g"> |
@@ -125,7 +127,7 @@ | |||
125 | <div class="pure-u-lg-20-24 pure-u-22-24"> | 127 | <div class="pure-u-lg-20-24 pure-u-22-24"> |
126 | {loop="links"} | 128 | {loop="links"} |
127 | <div class="anchor" id="{$value.shorturl}"></div> | 129 | <div class="anchor" id="{$value.shorturl}"></div> |
128 | <div class="linklist-item{if="$value.class"} {$value.class}{/if}"> | 130 | <div class="linklist-item linklist-item{if="$value.class"} {$value.class}{/if}" data-id="{$value.id}"> |
129 | 131 | ||
130 | <div class="linklist-item-title"> | 132 | <div class="linklist-item-title"> |
131 | {if="isLoggedIn()"} | 133 | {if="isLoggedIn()"} |
@@ -133,6 +135,7 @@ | |||
133 | {if="$value.private"} | 135 | {if="$value.private"} |
134 | <span class="label label-private">{'Private'|t}</span> | 136 | <span class="label label-private">{'Private'|t}</span> |
135 | {/if} | 137 | {/if} |
138 | <input type="checkbox" class="delete-checkbox" value="{$value.id}"> | ||
136 | <!-- FIXME! JS translation --> | 139 | <!-- FIXME! JS translation --> |
137 | <a href="?edit_link={$value.id}" title="{'Edit'|t}"><i class="fa fa-pencil-square-o edit-link"></i></a> | 140 | <a href="?edit_link={$value.id}" title="{'Edit'|t}"><i class="fa fa-pencil-square-o edit-link"></i></a> |
138 | <a href="#" title="{'Fold'|t}" class="fold-button"><i class="fa fa-chevron-up"></i></a> | 141 | <a href="#" title="{'Fold'|t}" class="fold-button"><i class="fa fa-chevron-up"></i></a> |
diff --git a/tpl/default/page.footer.html b/tpl/default/page.footer.html index 77fc65dd..02fc7642 100644 --- a/tpl/default/page.footer.html +++ b/tpl/default/page.footer.html | |||
@@ -16,6 +16,9 @@ | |||
16 | </div> | 16 | </div> |
17 | <div class="pure-u-2-24"></div> | 17 | <div class="pure-u-2-24"></div> |
18 | </div> | 18 | </div> |
19 | |||
20 | <input type="hidden" name="token" value="{$token}" id="token" /> | ||
21 | |||
19 | {loop="$plugins_footer.endofpage"} | 22 | {loop="$plugins_footer.endofpage"} |
20 | {$value} | 23 | {$value} |
21 | {/loop} | 24 | {/loop} |
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html index 9388ef79..6c71a718 100644 --- a/tpl/default/page.header.html +++ b/tpl/default/page.header.html | |||
@@ -122,6 +122,13 @@ | |||
122 | </div> | 122 | </div> |
123 | </div> | 123 | </div> |
124 | </div> | 124 | </div> |
125 | <div id="actions" class="subheader-form"> | ||
126 | <div class="pure-g"> | ||
127 | <div class="pure-u-1"> | ||
128 | <a href="" id="actions-delete" class="button">Delete</a> | ||
129 | </div> | ||
130 | </div> | ||
131 | </div> | ||
125 | {if="!isLoggedIn()"} | 132 | {if="!isLoggedIn()"} |
126 | <form method="post" name="loginform"> | 133 | <form method="post" name="loginform"> |
127 | <div class="subheader-form" id="header-login-form"> | 134 | <div class="subheader-form" id="header-login-form"> |
diff --git a/tpl/default/tagcloud.html b/tpl/default/tag.cloud.html index 53c31748..59aa2ee0 100644 --- a/tpl/default/tagcloud.html +++ b/tpl/default/tag.cloud.html | |||
@@ -6,12 +6,32 @@ | |||
6 | <body> | 6 | <body> |
7 | {include="page.header"} | 7 | {include="page.header"} |
8 | 8 | ||
9 | {include="tag.sort"} | ||
10 | |||
9 | <div class="pure-g"> | 11 | <div class="pure-g"> |
10 | <div class="pure-u-lg-1-6 pure-u-1-24"></div> | 12 | <div class="pure-u-lg-1-6 pure-u-1-24"></div> |
11 | <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor"> | 13 | <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor"> |
12 | {$countTags=count($tags)} | 14 | {$countTags=count($tags)} |
13 | <h2 class="window-title">{'Tag cloud'|t} - {$countTags} {'tags'|t}</h2> | 15 | <h2 class="window-title">{'Tag cloud'|t} - {$countTags} {'tags'|t}</h2> |
14 | 16 | ||
17 | <div id="search-tagcloud" class="pure-g"> | ||
18 | <div class="pure-u-lg-1-4"></div> | ||
19 | <div class="pure-u-1 pure-u-lg-1-2"> | ||
20 | <form method="GET"> | ||
21 | <input type="hidden" name="do" value="tagcloud"> | ||
22 | <input type="text" name="searchtags" placeholder="{'Filter by tag'|t}" | ||
23 | {if="!empty($search_tags)"} | ||
24 | value="{$search_tags}" | ||
25 | {/if} | ||
26 | autocomplete="off" data-multiple data-autofirst data-minChars="1" | ||
27 | data-list="{loop="$tags"}{$key}, {/loop}" | ||
28 | > | ||
29 | <button type="submit" class="search-button"><i class="fa fa-search"></i></button> | ||
30 | </form> | ||
31 | </div> | ||
32 | <div class="pure-u-lg-1-4"></div> | ||
33 | </div> | ||
34 | |||
15 | <div id="plugin_zone_start_tagcloud" class="plugin_zone"> | 35 | <div id="plugin_zone_start_tagcloud" class="plugin_zone"> |
16 | {loop="$plugin_start_zone"} | 36 | {loop="$plugin_start_zone"} |
17 | {$value} | 37 | {$value} |
@@ -21,7 +41,7 @@ | |||
21 | <div id="cloudtag"> | 41 | <div id="cloudtag"> |
22 | {loop="tags"} | 42 | {loop="tags"} |
23 | <a href="?searchtags={$key|urlencode}" style="font-size:{$value.size}em;">{$key}</a | 43 | <a href="?searchtags={$key|urlencode}" style="font-size:{$value.size}em;">{$key}</a |
24 | ><span class="count">{$value.count}</span> | 44 | ><a href="?addtag={$key|urlencode}" title="{'Filter by tag'|t}" class="count">{$value.count}</a> |
25 | {loop="$value.tag_plugin"} | 45 | {loop="$value.tag_plugin"} |
26 | {$value} | 46 | {$value} |
27 | {/loop} | 47 | {/loop} |
@@ -36,6 +56,8 @@ | |||
36 | </div> | 56 | </div> |
37 | </div> | 57 | </div> |
38 | 58 | ||
59 | {include="tag.sort"} | ||
60 | |||
39 | {include="page.footer"} | 61 | {include="page.footer"} |
40 | </body> | 62 | </body> |
41 | </html> | 63 | </html> |
diff --git a/tpl/default/tag.list.html b/tpl/default/tag.list.html new file mode 100644 index 00000000..62e2e7c6 --- /dev/null +++ b/tpl/default/tag.list.html | |||
@@ -0,0 +1,86 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <html> | ||
3 | <head> | ||
4 | {include="includes"} | ||
5 | </head> | ||
6 | <body> | ||
7 | {include="page.header"} | ||
8 | |||
9 | {include="tag.sort"} | ||
10 | |||
11 | <div class="pure-g"> | ||
12 | <div class="pure-u-lg-1-6 pure-u-1-24"></div> | ||
13 | <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor"> | ||
14 | {$countTags=count($tags)} | ||
15 | <h2 class="window-title">{'Tag list'|t} - {$countTags} {'tags'|t}</h2> | ||
16 | |||
17 | <div id="search-tagcloud" class="pure-g"> | ||
18 | <div class="pure-u-lg-1-4"></div> | ||
19 | <div class="pure-u-1 pure-u-lg-1-2"> | ||
20 | <form method="GET"> | ||
21 | <input type="hidden" name="do" value="taglist"> | ||
22 | <input type="text" name="searchtags" placeholder="{'Filter by tag'|t}" | ||
23 | {if="!empty($search_tags)"} | ||
24 | value="{$search_tags}" | ||
25 | {/if} | ||
26 | autocomplete="off" data-multiple data-autofirst data-minChars="1" | ||
27 | data-list="{loop="$tags"}{$key}, {/loop}" | ||
28 | > | ||
29 | <button type="submit" class="search-button"><i class="fa fa-search"></i></button> | ||
30 | </form> | ||
31 | </div> | ||
32 | <div class="pure-u-lg-1-4"></div> | ||
33 | </div> | ||
34 | |||
35 | <div id="plugin_zone_start_tagcloud" class="plugin_zone"> | ||
36 | {loop="$plugin_start_zone"} | ||
37 | {$value} | ||
38 | {/loop} | ||
39 | </div> | ||
40 | |||
41 | <div id="taglist"> | ||
42 | {loop="tags"} | ||
43 | <div class="tag-list-item pure-g" data-tag="{$key}"> | ||
44 | <div class="pure-u-1"> | ||
45 | {if="isLoggedIn()===true"} | ||
46 | <a href="#" class="delete-tag"><i class="fa fa-trash"></i></a> | ||
47 | <a href="?do=changetag&fromtag={$key|urlencode}" class="rename-tag"> | ||
48 | <i class="fa fa-pencil-square-o {$key}"></i> | ||
49 | </a> | ||
50 | {/if} | ||
51 | |||
52 | <a href="?addtag={$key|urlencode}" title="{'Filter by tag'|t}" class="count">{$value}</a> | ||
53 | <a href="?searchtags={$key|urlencode}" class="tag-link">{$key}</a> | ||
54 | |||
55 | {loop="$value.tag_plugin"} | ||
56 | {$value} | ||
57 | {/loop} | ||
58 | </div> | ||
59 | {if="isLoggedIn()===true"} | ||
60 | <div class="rename-tag-form pure-u-1"> | ||
61 | <input type="text" name="{$key}" value="{$key}" class="rename-tag-input" /> | ||
62 | <a href="#" class="validate-rename-tag"><i class="fa fa-check"></i></a> | ||
63 | </div> | ||
64 | {/if} | ||
65 | </div> | ||
66 | {/loop} | ||
67 | </div> | ||
68 | |||
69 | <div id="plugin_zone_end_tagcloud" class="plugin_zone"> | ||
70 | {loop="$plugin_end_zone"} | ||
71 | {$value} | ||
72 | {/loop} | ||
73 | </div> | ||
74 | </div> | ||
75 | </div> | ||
76 | |||
77 | {if="isLoggedIn()===true"} | ||
78 | <input type="hidden" name="taglist" value="{loop="$tags"}{$key} {/loop}" | ||
79 | {/if} | ||
80 | |||
81 | {include="tag.sort"} | ||
82 | |||
83 | {include="page.footer"} | ||
84 | </body> | ||
85 | </html> | ||
86 | |||
diff --git a/tpl/default/tag.sort.html b/tpl/default/tag.sort.html new file mode 100644 index 00000000..89acda0d --- /dev/null +++ b/tpl/default/tag.sort.html | |||
@@ -0,0 +1,8 @@ | |||
1 | <div class="pure-g"> | ||
2 | <div class="pure-u-1 pure-alert pure-alert-success tag-sort"> | ||
3 | {'Sort by:'|t} | ||
4 | <a href="?do=tagcloud" title="cloud">{'Cloud'|t}</a> · | ||
5 | <a href="?do=taglist&sort=usage" title="cloud">{'Most used'|t}</a> · | ||
6 | <a href="?do=taglist&sort=alpha" title="cloud">{'Alphabetical'|t}</a> | ||
7 | </div> | ||
8 | </div> \ No newline at end of file | ||
diff --git a/tpl/default/tools.html b/tpl/default/tools.html index baa033af..6951ad28 100644 --- a/tpl/default/tools.html +++ b/tpl/default/tools.html | |||
@@ -86,8 +86,16 @@ | |||
86 | <div class="tools-item"> | 86 | <div class="tools-item"> |
87 | <a title="{'Drag this link to your bookmarks toolbar or right-click it and Bookmark This Link'|t}, | 87 | <a title="{'Drag this link to your bookmarks toolbar or right-click it and Bookmark This Link'|t}, |
88 | {'Then click ✚Add Note button anytime to start composing a private Note (text post) to your Shaarli'|t}" | 88 | {'Then click ✚Add Note button anytime to start composing a private Note (text post) to your Shaarli'|t}" |
89 | href="?private=1&post=" | 89 | class="bookmarklet-link" |
90 | class="bookmarklet-link"> | 90 | href="javascript:( |
91 | function(){ | ||
92 | window.open( | ||
93 | '{$pageabsaddr}?private=1&post='+ | ||
94 | '&description='%20+%20encodeURIComponent(document.getSelection())+ | ||
95 | '&source=bookmarklet','_blank','menubar=no,height=800,width=600,toolbar=no,scrollbars=yes,status=no,dialog=1' | ||
96 | ); | ||
97 | } | ||
98 | )();"> | ||
91 | <span class="pure-button pure-u-lg-2-3 pure-u-3-4">✚ {'Add Note'|t}</span> | 99 | <span class="pure-button pure-u-lg-2-3 pure-u-3-4">✚ {'Add Note'|t}</span> |
92 | </a> | 100 | </a> |
93 | </div> | 101 | </div> |
@@ -146,4 +154,3 @@ | |||
146 | value="{'Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link'|t}"> | 154 | value="{'Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link'|t}"> |
147 | </body> | 155 | </body> |
148 | </html> | 156 | </html> |
149 | |||