aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/default
diff options
context:
space:
mode:
Diffstat (limited to 'tpl/default')
-rw-r--r--tpl/default/changetag.html4
-rw-r--r--tpl/default/configure.html30
-rw-r--r--tpl/default/css/shaarli.css104
-rw-r--r--tpl/default/daily.html2
-rw-r--r--tpl/default/fonts/Fira-Sans-regular.woffbin17100 -> 0 bytes
-rw-r--r--tpl/default/fonts/Fira-Sans-regular.woff2bin13836 -> 0 bytes
-rw-r--r--tpl/default/fonts/Roboto-Bold.woffbin0 -> 89584 bytes
-rw-r--r--tpl/default/fonts/Roboto-Bold.woff2bin0 -> 63320 bytes
-rw-r--r--tpl/default/fonts/Roboto-Regular.woffbin0 -> 89732 bytes
-rw-r--r--tpl/default/fonts/Roboto-Regular.woff2bin0 -> 63412 bytes
-rw-r--r--tpl/default/import.html1
-rw-r--r--tpl/default/includes.html2
-rw-r--r--tpl/default/install.html42
-rw-r--r--tpl/default/js/shaarli.js312
-rw-r--r--tpl/default/linklist.html5
-rw-r--r--tpl/default/page.footer.html3
-rw-r--r--tpl/default/page.header.html7
-rw-r--r--tpl/default/tag.cloud.html (renamed from tpl/default/tagcloud.html)24
-rw-r--r--tpl/default/tag.list.html86
-rw-r--r--tpl/default/tag.sort.html8
20 files changed, 569 insertions, 61 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} &middot; {'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 8fcd13af..28920648 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -35,14 +35,29 @@ pre {
35} 35}
36 36
37@font-face { 37@font-face {
38 font-family: 'Roboto Slab'; 38 font-family: 'Roboto';
39 font-weight: 400; 39 font-weight: 400;
40 font-style: normal; 40 font-style: normal;
41 src: 41 src:
42 local('Fira Sans'), 42 local('Roboto'),
43 local('Fira-Sans-regular'), 43 local('Roboto-Regular'),
44 url('../fonts/Fira-Sans-regular.woff2') format('woff2'), 44 url('../fonts/Roboto-Regular.woff2') format('woff2'),
45 url('../fonts/Fira-Sans-regular.woff') format('woff'); 45 url('../fonts/Roboto-Regular.woff') format('woff');
46}
47
48@font-face {
49 font-family: 'Roboto';
50 font-weight: 700;
51 font-style: normal;
52 src:
53 local('Roboto'),
54 local('Roboto-Bold'),
55 url('../fonts/Roboto-Bold.woff2') format('woff2'),
56 url('../fonts/Roboto-Bold.woff') format('woff');
57}
58
59body, .pure-g [class*="pure-u"] {
60 font-family: Roboto, Arial, sans-serif;
46} 61}
47 62
48/** 63/**
@@ -68,10 +83,6 @@ pre {
68 .pure-u-xl-visible { display: inline-block !important; } 83 .pure-u-xl-visible { display: inline-block !important; }
69} 84}
70 85
71.pure-g [class*="pure-u"]{
72 font-family: Roboto Slab, Arial, sans-serif;
73}
74
75/** 86/**
76 * Make pure-extras alert closable. 87 * Make pure-extras alert closable.
77 */ 88 */
@@ -200,7 +211,7 @@ pre {
200 } 211 }
201} 212}
202 213
203#search, #search-linklist { 214#search, #search-linklist, #search-tagcloud {
204 text-align: center; 215 text-align: center;
205 width: 100%; 216 width: 100%;
206} 217}
@@ -223,6 +234,7 @@ pre {
223} 234}
224 235
225#search button, 236#search button,
237#search-tagcloud button,
226#search-linklist button { 238#search-linklist button {
227 background: transparent; 239 background: transparent;
228 border: none; 240 border: none;
@@ -240,6 +252,9 @@ pre {
240#search-linklist button:hover { 252#search-linklist button:hover {
241 color: #fff; 253 color: #fff;
242} 254}
255#search-tagcloud button:hover {
256 color: #d0d0d0;
257}
243 258
244#search-linklist { 259#search-linklist {
245 padding: 5px 0; 260 padding: 5px 0;
@@ -264,6 +279,19 @@ pre {
264 } 279 }
265} 280}
266 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
267#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"] {
268 width: 200px; 296 width: 200px;
269} 297}
@@ -504,7 +532,6 @@ pre {
504 color: #252525; 532 color: #252525;
505 text-decoration: none; 533 text-decoration: none;
506 vertical-align: middle; 534 vertical-align: middle;
507 font-family: Roboto Slab, Arial, sans-serif;
508} 535}
509 536
510.linklist-item-title .linklist-link { 537.linklist-item-title .linklist-link {
@@ -560,7 +587,6 @@ pre {
560.linklist-item-description { 587.linklist-item-description {
561 position: relative; 588 position: relative;
562 padding: 10px; 589 padding: 10px;
563 font-family: Roboto Slab, Arial, sans-serif;
564 word-wrap: break-word; 590 word-wrap: break-word;
565 color: #252525; 591 color: #252525;
566 line-height: 1.3em; 592 line-height: 1.3em;
@@ -725,10 +751,11 @@ pre {
725.page-form a { 751.page-form a {
726 color: #1b926c; 752 color: #1b926c;
727 font-weight: bold; 753 font-weight: bold;
754 text-decoration: none;
728} 755}
729 756
730.page-form p { 757.page-form p {
731 padding: 0 10px; 758 padding: 5px 10px;
732 margin: 0; 759 margin: 0;
733} 760}
734 761
@@ -1044,7 +1071,7 @@ form[name="linkform"].page-form {
1044} 1071}
1045 1072
1046#cloudtag, #cloudtag a { 1073#cloudtag, #cloudtag a {
1047 color: #000; 1074 color: #252525;
1048 text-decoration: none; 1075 text-decoration: none;
1049} 1076}
1050 1077
@@ -1053,6 +1080,42 @@ form[name="linkform"].page-form {
1053} 1080}
1054 1081
1055/** 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/**
1056 * Picture wall CSS 1119 * Picture wall CSS
1057 */ 1120 */
1058#picwall_container { 1121#picwall_container {
@@ -1201,3 +1264,16 @@ form[name="linkform"].page-form {
1201.pure-button { 1264.pure-button {
1202 -moz-user-select: auto; 1265 -moz-user-select: auto;
1203} 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/fonts/Fira-Sans-regular.woff b/tpl/default/fonts/Fira-Sans-regular.woff
deleted file mode 100644
index 014ac317..00000000
--- a/tpl/default/fonts/Fira-Sans-regular.woff
+++ /dev/null
Binary files differ
diff --git a/tpl/default/fonts/Fira-Sans-regular.woff2 b/tpl/default/fonts/Fira-Sans-regular.woff2
deleted file mode 100644
index bf3ad9a4..00000000
--- a/tpl/default/fonts/Fira-Sans-regular.woff2
+++ /dev/null
Binary files differ
diff --git a/tpl/default/fonts/Roboto-Bold.woff b/tpl/default/fonts/Roboto-Bold.woff
new file mode 100644
index 00000000..3d86753b
--- /dev/null
+++ b/tpl/default/fonts/Roboto-Bold.woff
Binary files differ
diff --git a/tpl/default/fonts/Roboto-Bold.woff2 b/tpl/default/fonts/Roboto-Bold.woff2
new file mode 100644
index 00000000..bd05e2ea
--- /dev/null
+++ b/tpl/default/fonts/Roboto-Bold.woff2
Binary files differ
diff --git a/tpl/default/fonts/Roboto-Regular.woff b/tpl/default/fonts/Roboto-Regular.woff
new file mode 100644
index 00000000..464d2062
--- /dev/null
+++ b/tpl/default/fonts/Roboto-Regular.woff
Binary files differ
diff --git a/tpl/default/fonts/Roboto-Regular.woff2 b/tpl/default/fonts/Roboto-Regular.woff2
new file mode 100644
index 00000000..f9661967
--- /dev/null
+++ b/tpl/default/fonts/Roboto-Regular.woff2
Binary files differ
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} &middot; {'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 30d8ed6f..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
@@ -255,10 +258,9 @@ window.onload = function () {
255 * Remove CSS target padding (for fixed bar) 258 * Remove CSS target padding (for fixed bar)
256 */ 259 */
257 if (location.hash != '') { 260 if (location.hash != '') {
258 var anchor = document.querySelector(location.hash); 261 var anchor = document.getElementById(location.hash.substr(1));
259 if (anchor != null) { 262 if (anchor != null) {
260 var padsize = anchor.clientHeight; 263 var padsize = anchor.clientHeight;
261 console.log(document.querySelector(location.hash).clientHeight);
262 this.window.scroll(0, this.window.scrollY - padsize); 264 this.window.scroll(0, this.window.scrollY - padsize);
263 anchor.style.paddingTop = 0; 265 anchor.style.paddingTop = 0;
264 } 266 }
@@ -300,21 +302,6 @@ window.onload = function () {
300 } 302 }
301 303
302 /** 304 /**
303 * TimeZome select
304 * FIXME! way too hackish
305 */
306 var toRemove = document.getElementById('timezone-remove');
307 if (toRemove != null) {
308 var firstSelect = toRemove.getElementsByTagName('select')[0];
309 var secondSelect = toRemove.getElementsByTagName('select')[1];
310 toRemove.parentNode.removeChild(toRemove);
311 var toAdd = document.getElementById('timezone-add');
312 var newTimezone = '<span class="timezone-continent">Continent ' + firstSelect.outerHTML + '</span>';
313 newTimezone += ' <span class="timezone-country">Country ' + secondSelect.outerHTML + '</span>';
314 toAdd.innerHTML = newTimezone;
315 }
316
317 /**
318 * Awesomplete trigger. 305 * Awesomplete trigger.
319 */ 306 */
320 var tags = document.getElementById('lf_tags'); 307 var tags = document.getElementById('lf_tags');
@@ -366,8 +353,256 @@ window.onload = function () {
366 } 353 }
367 }); 354 });
368 }); 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);
369}; 519};
370 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 */
530function 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 */
556function 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 */
574function 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 */
599function htmlEntities(str)
600{
601 return str.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
602 return '&#'+i.charCodeAt(0)+';';
603 });
604}
605
371function activateFirefoxSocial(node) { 606function activateFirefoxSocial(node) {
372 var loc = location.href; 607 var loc = location.href;
373 var baseURL = loc.substring(0, loc.lastIndexOf("/")); 608 var baseURL = loc.substring(0, loc.lastIndexOf("/"));
@@ -391,3 +626,28 @@ function activateFirefoxSocial(node) {
391 var activate = new CustomEvent("ActivateSocialFeature"); 626 var activate = new CustomEvent("ActivateSocialFeature");
392 node.dispatchEvent(activate); 627 node.dispatchEvent(activate);
393} 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 */
637function 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 57ef4567..6a4e14a6 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">
@@ -121,7 +123,7 @@
121 <div class="pure-u-lg-20-24 pure-u-22-24"> 123 <div class="pure-u-lg-20-24 pure-u-22-24">
122 {loop="links"} 124 {loop="links"}
123 <div class="anchor" id="{$value.shorturl}"></div> 125 <div class="anchor" id="{$value.shorturl}"></div>
124 <div class="linklist-item{if="$value.class"} {$value.class}{/if}"> 126 <div class="linklist-item linklist-item{if="$value.class"} {$value.class}{/if}" data-id="{$value.id}">
125 127
126 <div class="linklist-item-title"> 128 <div class="linklist-item-title">
127 {if="isLoggedIn()"} 129 {if="isLoggedIn()"}
@@ -129,6 +131,7 @@
129 {if="$value.private"} 131 {if="$value.private"}
130 <span class="label label-private">{'Private'|t}</span> 132 <span class="label label-private">{'Private'|t}</span>
131 {/if} 133 {/if}
134 <input type="checkbox" class="delete-checkbox" value="{$value.id}">
132 <!-- FIXME! JS translation --> 135 <!-- FIXME! JS translation -->
133 <a href="?edit_link={$value.id}" title="{'Edit'|t}"><i class="fa fa-pencil-square-o edit-link"></i></a> 136 <a href="?edit_link={$value.id}" title="{'Edit'|t}"><i class="fa fa-pencil-square-o edit-link"></i></a>
134 <a href="#" title="{'Fold'|t}" class="fold-button"><i class="fa fa-chevron-up"></i></a> 137 <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>&nbsp;&nbsp;
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> &middot;
5 <a href="?do=taglist&sort=usage" title="cloud">{'Most used'|t}</a> &middot;
6 <a href="?do=taglist&sort=alpha" title="cloud">{'Alphabetical'|t}</a>
7 </div>
8</div> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-01 09:59:46 +0000