aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-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 d6536d47..fd8ee9c2 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 33f8a453..c5052a26 100644
--- a/tpl/default/install.html
+++ b/tpl/default/install.html
@@ -49,18 +49,16 @@
49 </div> 49 </div>
50 50
51 <div class="pure-g"> 51 <div class="pure-g">
52 <div class="pure-u-lg-{$ratioLabel} pure-u-1 "> 52 <div class="pure-u-lg-{$ratioLabel} pure-u-1">
53 <div class="form-label"> 53 <div class="form-label">
54 <label> 54 <label for="title">
55 <span class="label-name">{'Timezone'|t}</span> 55 <span class="label-name">{'Shaarli title'|t}</span>
56 </label> 56 </label>
57 </div> 57 </div>
58 </div> 58 </div>
59 <div class="pure-u-lg-{$ratioInput} pure-u-1 "> 59 <div class="pure-u-lg-{$ratioInput} pure-u-1">
60 <div class="form-input"> 60 <div class="form-input">
61 {ignore}FIXME! too hackish, needs to be fixed upstream{/ignore} 61 <input type="text" name="title" id="title" placeholder="{'My links'|t}">
62 <div class="timezone" id="timezone-remove">{$timezone_html}</div>
63 <div class="timezone" id="timezone-add"></div>
64 </div> 62 </div>
65 </div> 63 </div>
66 </div> 64 </div>
@@ -68,14 +66,36 @@
68 <div class="pure-g"> 66 <div class="pure-g">
69 <div class="pure-u-lg-{$ratioLabel} pure-u-1"> 67 <div class="pure-u-lg-{$ratioLabel} pure-u-1">
70 <div class="form-label"> 68 <div class="form-label">
71 <label for="title"> 69 <label>
72 <span class="label-name">{'Shaarli title'|t}</span> 70 <span class="label-name">{'Timezone'|t}</span><br>
71 <span class="label-desc">{'Continent'|t} &middot; {'City'|t}</span>
73 </label> 72 </label>
74 </div> 73 </div>
75 </div> 74 </div>
76 <div class="pure-u-lg-{$ratioInput} pure-u-1"> 75 <div class="pure-u-lg-{$ratioInput} pure-u-1">
77 <div class="form-input"> 76 <div class="form-input">
78 <input type="text" name="title" id="title" placeholder="{'My links'|t}"> 77 <div class="timezone">
78 <select id="continent" name="continent">
79 {loop="$continents"}
80 {if="$key !== 'selected'"}
81 <option value="{$value}" {if="$continents.selected === $value"}selected{/if}>
82 {$value}
83 </option>
84 {/if}
85 {/loop}
86 </select>
87 <select id="city" name="city">
88 {loop="$cities"}
89 {if="$key !== 'selected'"}
90 <option value="{$value.city}"
91 {if="$cities.selected === $value.city"}selected{/if}
92 data-continent="{$value.continent}">
93 {$value.city}
94 </option>
95 {/if}
96 {/loop}
97 </select>
98 </div>
79 </div> 99 </div>
80 </div> 100 </div>
81 </div> 101 </div>
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index 30d8ed6f..714420b7 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);
@@ -300,21 +303,6 @@ window.onload = function () {
300 } 303 }
301 304
302 /** 305 /**
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. 306 * Awesomplete trigger.
319 */ 307 */
320 var tags = document.getElementById('lf_tags'); 308 var tags = document.getElementById('lf_tags');
@@ -366,6 +354,15 @@ window.onload = function () {
366 } 354 }
367 }); 355 });
368 }); 356 });
357
358 var continent = document.getElementById('continent');
359 var city = document.getElementById('city');
360 if (continent != null && city != null) {
361 continent.addEventListener('change', function(event) {
362 hideTimezoneCities(city, continent.options[continent.selectedIndex].value, true);
363 });
364 hideTimezoneCities(city, continent.options[continent.selectedIndex].value, false);
365 }
369}; 366};
370 367
371function activateFirefoxSocial(node) { 368function activateFirefoxSocial(node) {
@@ -391,3 +388,25 @@ function activateFirefoxSocial(node) {
391 var activate = new CustomEvent("ActivateSocialFeature"); 388 var activate = new CustomEvent("ActivateSocialFeature");
392 node.dispatchEvent(activate); 389 node.dispatchEvent(activate);
393} 390}
391
392/**
393 * Add the class 'hidden' to city options not attached to the current selected continent.
394 *
395 * @param cities List of <option> elements
396 * @param currentContinent Current selected continent
397 * @param reset Set to true to reset the selected value
398 */
399function hideTimezoneCities(cities, currentContinent, reset = false) {
400 var first = true;
401 [].forEach.call(cities, function(option) {
402 if (option.getAttribute('data-continent') != currentContinent) {
403 option.className = 'hidden';
404 } else {
405 option.className = '';
406 if (reset === true && first === true) {
407 option.setAttribute('selected', 'selected');
408 first = false;
409 }
410 }
411 });
412}