aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/default
diff options
context:
space:
mode:
Diffstat (limited to 'tpl/default')
-rw-r--r--tpl/default/configure.html28
-rw-r--r--tpl/default/install.html40
-rw-r--r--tpl/default/js/shaarli.js55
3 files changed, 91 insertions, 32 deletions
diff --git a/tpl/default/configure.html b/tpl/default/configure.html
index 12261487..7469ab59 100644
--- a/tpl/default/configure.html
+++ b/tpl/default/configure.html
@@ -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/install.html b/tpl/default/install.html
index 772c1392..164d453b 100644
--- a/tpl/default/install.html
+++ b/tpl/default/install.html
@@ -51,18 +51,16 @@
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 edcf2809..4d47fcd0 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);
@@ -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,6 +353,15 @@ 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 }
368}; 365};
369 366
370function activateFirefoxSocial(node) { 367function activateFirefoxSocial(node) {
@@ -390,3 +387,25 @@ function activateFirefoxSocial(node) {
390 var activate = new CustomEvent("ActivateSocialFeature"); 387 var activate = new CustomEvent("ActivateSocialFeature");
391 node.dispatchEvent(activate); 388 node.dispatchEvent(activate);
392} 389}
390
391/**
392 * Add the class 'hidden' to city options not attached to the current selected continent.
393 *
394 * @param cities List of <option> elements
395 * @param currentContinent Current selected continent
396 * @param reset Set to true to reset the selected value
397 */
398function hideTimezoneCities(cities, currentContinent, reset = false) {
399 var first = true;
400 [].forEach.call(cities, function(option) {
401 if (option.getAttribute('data-continent') != currentContinent) {
402 option.className = 'hidden';
403 } else {
404 option.className = '';
405 if (reset === true && first === true) {
406 option.setAttribute('selected', 'selected');
407 first = false;
408 }
409 }
410 });
411}