aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2017-04-25 19:09:13 +0200
committerGitHub <noreply@github.com>2017-04-25 19:09:13 +0200
commit4c7045229c94973c1cb83193e69463f426ddc35b (patch)
tree3f61c22429513f4e70987eb200dc772be8aa70ab
parent504c9df4e7ed126678f146d4c349c798b8338407 (diff)
parent49bc541d7973bd86776441eb072e66d01b368e68 (diff)
downloadShaarli-4c7045229c94973c1cb83193e69463f426ddc35b.tar.gz
Shaarli-4c7045229c94973c1cb83193e69463f426ddc35b.tar.zst
Shaarli-4c7045229c94973c1cb83193e69463f426ddc35b.zip
Merge pull request #830 from ArthurHoaro/theme/timezone
Change timezone data structure send to the templates
-rw-r--r--application/PageBuilder.php2
-rw-r--r--application/TimeZone.php101
-rw-r--r--index.php21
-rw-r--r--tests/TimeZoneTest.php83
-rw-r--r--tpl/default/configure.html28
-rw-r--r--tpl/default/install.html40
-rw-r--r--tpl/default/js/shaarli.js55
-rw-r--r--tpl/vintage/configure.html24
-rw-r--r--tpl/vintage/css/shaarli.css4
-rw-r--r--tpl/vintage/install.html28
-rw-r--r--tpl/vintage/js/shaarli.js32
-rw-r--r--tpl/vintage/page.footer.html1
12 files changed, 282 insertions, 137 deletions
diff --git a/application/PageBuilder.php b/application/PageBuilder.php
index b133dee8..8e39455b 100644
--- a/application/PageBuilder.php
+++ b/application/PageBuilder.php
@@ -1,5 +1,7 @@
1<?php 1<?php
2 2
3use Shaarli\Config\ConfigManager;
4
3/** 5/**
4 * This class is in charge of building the final page. 6 * This class is in charge of building the final page.
5 * (This is basically a wrapper around RainTPL which pre-fills some fields.) 7 * (This is basically a wrapper around RainTPL which pre-fills some fields.)
diff --git a/application/TimeZone.php b/application/TimeZone.php
index 36a8fb12..c1869ef8 100644
--- a/application/TimeZone.php
+++ b/application/TimeZone.php
@@ -1,23 +1,42 @@
1<?php 1<?php
2/** 2/**
3 * Generates the timezone selection form and JavaScript. 3 * Generates a list of available timezone continents and cities.
4 * 4 *
5 * Note: 'UTC/UTC' is mapped to 'UTC' to form a valid option 5 * Two distinct array based on available timezones
6 * and the one selected in the settings:
7 * - (0) continents:
8 * + list of available continents
9 * + special key 'selected' containing the value of the selected timezone's continent
10 * - (1) cities:
11 * + list of available cities associated with their continent
12 * + special key 'selected' containing the value of the selected timezone's city (without the continent)
6 * 13 *
7 * Example: preselect Europe/Paris 14 * Example:
8 * list($htmlform, $js) = generateTimeZoneForm('Europe/Paris'); 15 * [
16 * [
17 * 'America',
18 * 'Europe',
19 * 'selected' => 'Europe',
20 * ],
21 * [
22 * ['continent' => 'America', 'city' => 'Toronto'],
23 * ['continent' => 'Europe', 'city' => 'Paris'],
24 * 'selected' => 'Paris',
25 * ],
26 * ];
9 * 27 *
28 * Notes:
29 * - 'UTC/UTC' is mapped to 'UTC' to form a valid option
30 * - a few timezone cities includes the country/state, such as Argentina/Buenos_Aires
31 * - these arrays are designed to build timezone selects in template files with any HTML structure
32 *
33 * @param array $installedTimeZones List of installed timezones as string
10 * @param string $preselectedTimezone preselected timezone (optional) 34 * @param string $preselectedTimezone preselected timezone (optional)
11 * 35 *
12 * @return array containing the generated HTML form and Javascript code 36 * @return array[] continents and cities
13 **/ 37 **/
14function generateTimeZoneForm($preselectedTimezone='') 38function generateTimeZoneData($installedTimeZones, $preselectedTimezone = '')
15{ 39{
16 // Select the server timezone
17 if ($preselectedTimezone == '') {
18 $preselectedTimezone = date_default_timezone_get();
19 }
20
21 if ($preselectedTimezone == 'UTC') { 40 if ($preselectedTimezone == 'UTC') {
22 $pcity = $pcontinent = 'UTC'; 41 $pcity = $pcontinent = 'UTC';
23 } else { 42 } else {
@@ -27,62 +46,30 @@ function generateTimeZoneForm($preselectedTimezone='')
27 $pcity = substr($preselectedTimezone, $spos+1); 46 $pcity = substr($preselectedTimezone, $spos+1);
28 } 47 }
29 48
30 // The list is in the form 'Europe/Paris', 'America/Argentina/Buenos_Aires' 49 $continents = [];
31 // We split the list in continents/cities. 50 $cities = [];
32 $continents = array(); 51 foreach ($installedTimeZones as $tz) {
33 $cities = array();
34
35 // TODO: use a template to generate the HTML/Javascript form
36
37 foreach (timezone_identifiers_list() as $tz) {
38 if ($tz == 'UTC') { 52 if ($tz == 'UTC') {
39 $tz = 'UTC/UTC'; 53 $tz = 'UTC/UTC';
40 } 54 }
41 $spos = strpos($tz, '/'); 55 $spos = strpos($tz, '/');
42 56
43 if ($spos !== false) { 57 // Ignore invalid timezones
44 $continent = substr($tz, 0, $spos); 58 if ($spos === false) {
45 $city = substr($tz, $spos+1); 59 continue;
46 $continents[$continent] = 1;
47
48 if (!isset($cities[$continent])) {
49 $cities[$continent] = '';
50 }
51 $cities[$continent] .= '<option value="'.$city.'"';
52 if ($pcity == $city) {
53 $cities[$continent] .= ' selected="selected"';
54 }
55 $cities[$continent] .= '>'.$city.'</option>';
56 } 60 }
57 }
58
59 $continentsHtml = '';
60 $continents = array_keys($continents);
61 61
62 foreach ($continents as $continent) { 62 $continent = substr($tz, 0, $spos);
63 $continentsHtml .= '<option value="'.$continent.'"'; 63 $city = substr($tz, $spos+1);
64 if ($pcontinent == $continent) { 64 $cities[] = ['continent' => $continent, 'city' => $city];
65 $continentsHtml .= ' selected="selected"'; 65 $continents[$continent] = true;
66 }
67 $continentsHtml .= '>'.$continent.'</option>';
68 } 66 }
69 67
70 // Timezone selection form 68 $continents = array_keys($continents);
71 $timezoneForm = 'Continent:'; 69 $continents['selected'] = $pcontinent;
72 $timezoneForm .= '<select name="continent" id="continent" onChange="onChangecontinent();">'; 70 $cities['selected'] = $pcity;
73 $timezoneForm .= $continentsHtml.'</select>';
74 $timezoneForm .= '&nbsp;&nbsp;&nbsp;&nbsp;City:';
75 $timezoneForm .= '<select name="city" id="city">'.$cities[$pcontinent].'</select><br />';
76
77 // Javascript handler - updates the city list when the user selects a continent
78 $timezoneJs = '<script>';
79 $timezoneJs .= 'function onChangecontinent() {';
80 $timezoneJs .= 'document.getElementById("city").innerHTML =';
81 $timezoneJs .= ' citiescontinent[document.getElementById("continent").value]; }';
82 $timezoneJs .= 'var citiescontinent = '.json_encode($cities).';';
83 $timezoneJs .= '</script>';
84 71
85 return array($timezoneForm, $timezoneJs); 72 return [$continents, $cities];
86} 73}
87 74
88/** 75/**
diff --git a/index.php b/index.php
index 1e255583..e392e501 100644
--- a/index.php
+++ b/index.php
@@ -1146,9 +1146,12 @@ function renderPage($conf, $pluginManager, $LINKSDB)
1146 $PAGE->assign('theme', $conf->get('resource.theme')); 1146 $PAGE->assign('theme', $conf->get('resource.theme'));
1147 $PAGE->assign('theme_available', ThemeUtils::getThemes($conf->get('resource.raintpl_tpl'))); 1147 $PAGE->assign('theme_available', ThemeUtils::getThemes($conf->get('resource.raintpl_tpl')));
1148 $PAGE->assign('redirector', $conf->get('redirector.url')); 1148 $PAGE->assign('redirector', $conf->get('redirector.url'));
1149 list($timezone_form, $timezone_js) = generateTimeZoneForm($conf->get('general.timezone')); 1149 list($continents, $cities) = generateTimeZoneData(
1150 $PAGE->assign('timezone_form', $timezone_form); 1150 timezone_identifiers_list(),
1151 $PAGE->assign('timezone_js',$timezone_js); 1151 $conf->get('general.timezone')
1152 );
1153 $PAGE->assign('continents', $continents);
1154 $PAGE->assign('cities', $cities);
1152 $PAGE->assign('private_links_default', $conf->get('privacy.default_private_links', false)); 1155 $PAGE->assign('private_links_default', $conf->get('privacy.default_private_links', false));
1153 $PAGE->assign('session_protection_disabled', $conf->get('security.session_protection_disabled', false)); 1156 $PAGE->assign('session_protection_disabled', $conf->get('security.session_protection_disabled', false));
1154 $PAGE->assign('enable_rss_permalinks', $conf->get('feed.rss_permalinks', false)); 1157 $PAGE->assign('enable_rss_permalinks', $conf->get('feed.rss_permalinks', false));
@@ -1969,16 +1972,10 @@ function install($conf)
1969 exit; 1972 exit;
1970 } 1973 }
1971 1974
1972 // Display config form:
1973 list($timezone_form, $timezone_js) = generateTimeZoneForm();
1974 $timezone_html = '';
1975 if ($timezone_form != '') {
1976 $timezone_html = '<tr><td><b>Timezone:</b></td><td>'.$timezone_form.'</td></tr>';
1977 }
1978
1979 $PAGE = new PageBuilder($conf); 1975 $PAGE = new PageBuilder($conf);
1980 $PAGE->assign('timezone_html',$timezone_html); 1976 list($continents, $cities) = generateTimeZoneData(timezone_identifiers_list(), date_default_timezone_get());
1981 $PAGE->assign('timezone_js',$timezone_js); 1977 $PAGE->assign('continents', $continents);
1978 $PAGE->assign('cities', $cities);
1982 $PAGE->renderPage('install'); 1979 $PAGE->renderPage('install');
1983 exit; 1980 exit;
1984} 1981}
diff --git a/tests/TimeZoneTest.php b/tests/TimeZoneTest.php
index 2976d116..127fdc19 100644
--- a/tests/TimeZoneTest.php
+++ b/tests/TimeZoneTest.php
@@ -11,24 +11,45 @@ require_once 'application/TimeZone.php';
11class TimeZoneTest extends PHPUnit_Framework_TestCase 11class TimeZoneTest extends PHPUnit_Framework_TestCase
12{ 12{
13 /** 13 /**
14 * @var array of timezones
15 */
16 protected $installedTimezones;
17
18 public function setUp()
19 {
20 $this->installedTimezones = [
21 'Antarctica/Syowa',
22 'Europe/London',
23 'Europe/Paris',
24 'UTC'
25 ];
26 }
27
28 /**
14 * Generate a timezone selection form 29 * Generate a timezone selection form
15 */ 30 */
16 public function testGenerateTimeZoneForm() 31 public function testGenerateTimeZoneForm()
17 { 32 {
18 $generated = generateTimeZoneForm(); 33 $expected = [
34 'continents' => [
35 'Antarctica',
36 'Europe',
37 'UTC',
38 'selected' => '',
39 ],
40 'cities' => [
41 ['continent' => 'Antarctica', 'city' => 'Syowa'],
42 ['continent' => 'Europe', 'city' => 'London'],
43 ['continent' => 'Europe', 'city' => 'Paris'],
44 ['continent' => 'UTC', 'city' => 'UTC'],
45 'selected' => '',
46 ]
47 ];
19 48
20 // HTML form 49 list($continents, $cities) = generateTimeZoneData($this->installedTimezones);
21 $this->assertStringStartsWith('Continent:<select', $generated[0]);
22 $this->assertContains('selected="selected"', $generated[0]);
23 $this->assertStringEndsWith('</select><br />', $generated[0]);
24 50
25 // Javascript handler 51 $this->assertEquals($expected['continents'], $continents);
26 $this->assertStringStartsWith('<script>', $generated[1]); 52 $this->assertEquals($expected['cities'], $cities);
27 $this->assertContains(
28 '<option value=\"Bermuda\">Bermuda<\/option>',
29 $generated[1]
30 );
31 $this->assertStringEndsWith('</script>', $generated[1]);
32 } 53 }
33 54
34 /** 55 /**
@@ -36,28 +57,26 @@ class TimeZoneTest extends PHPUnit_Framework_TestCase
36 */ 57 */
37 public function testGenerateTimeZoneFormPreselected() 58 public function testGenerateTimeZoneFormPreselected()
38 { 59 {
39 $generated = generateTimeZoneForm('Antarctica/Syowa'); 60 $expected = [
40 61 'continents' => [
41 // HTML form 62 'Antarctica',
42 $this->assertStringStartsWith('Continent:<select', $generated[0]); 63 'Europe',
43 $this->assertContains( 64 'UTC',
44 'value="Antarctica" selected="selected"', 65 'selected' => 'Antarctica',
45 $generated[0] 66 ],
46 ); 67 'cities' => [
47 $this->assertContains( 68 ['continent' => 'Antarctica', 'city' => 'Syowa'],
48 'value="Syowa" selected="selected"', 69 ['continent' => 'Europe', 'city' => 'London'],
49 $generated[0] 70 ['continent' => 'Europe', 'city' => 'Paris'],
50 ); 71 ['continent' => 'UTC', 'city' => 'UTC'],
51 $this->assertStringEndsWith('</select><br />', $generated[0]); 72 'selected' => 'Syowa',
73 ]
74 ];
52 75
76 list($continents, $cities) = generateTimeZoneData($this->installedTimezones, 'Antarctica/Syowa');
53 77
54 // Javascript handler 78 $this->assertEquals($expected['continents'], $continents);
55 $this->assertStringStartsWith('<script>', $generated[1]); 79 $this->assertEquals($expected['cities'], $cities);
56 $this->assertContains(
57 '<option value=\"Bermuda\">Bermuda<\/option>',
58 $generated[1]
59 );
60 $this->assertStringEndsWith('</script>', $generated[1]);
61 } 80 }
62 81
63 /** 82 /**
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 663397ac..99aca193 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}
diff --git a/tpl/vintage/configure.html b/tpl/vintage/configure.html
index 704389c5..7adc7545 100644
--- a/tpl/vintage/configure.html
+++ b/tpl/vintage/configure.html
@@ -4,7 +4,6 @@
4<body onload="document.configform.title.focus();"> 4<body onload="document.configform.title.focus();">
5<div id="pageheader"> 5<div id="pageheader">
6 {include="page.header"} 6 {include="page.header"}
7 {$timezone_js}
8 <form method="POST" action="#" name="configform" id="configform"> 7 <form method="POST" action="#" name="configform" id="configform">
9 <input type="hidden" name="token" value="{$token}"> 8 <input type="hidden" name="token" value="{$token}">
10 <table id="configuration_table"> 9 <table id="configuration_table">
@@ -35,7 +34,28 @@
35 34
36 <tr> 35 <tr>
37 <td><b>Timezone:</b></td> 36 <td><b>Timezone:</b></td>
38 <td>{$timezone_form}</td> 37 <td>
38 <select id="continent" name="continent">
39 {loop="$continents"}
40 {if="$key !== 'selected'"}
41 <option value="{$value}" {if="$continents.selected === $value"}selected{/if}>
42 {$value}
43 </option>
44 {/if}
45 {/loop}
46 </select>
47 <select id="city" name="city">
48 {loop="$cities"}
49 {if="$key !== 'selected'"}
50 <option value="{$value.city}"
51 {if="$cities.selected === $value.city"}selected{/if}
52 data-continent="{$value.continent}">
53 {$value.city}
54 </option>
55 {/if}
56 {/loop}
57 </select>
58 </td>
39 </tr> 59 </tr>
40 60
41 <tr> 61 <tr>
diff --git a/tpl/vintage/css/shaarli.css b/tpl/vintage/css/shaarli.css
index 7ca567e7..9c72d993 100644
--- a/tpl/vintage/css/shaarli.css
+++ b/tpl/vintage/css/shaarli.css
@@ -41,6 +41,10 @@ strong {
41 font-weight: bold; 41 font-weight: bold;
42} 42}
43 43
44.hidden {
45 display: none;
46}
47
44/* Buttons */ 48/* Buttons */
45.bigbutton, #pageheader a.bigbutton { 49.bigbutton, #pageheader a.bigbutton {
46 background-color: #c0c0c0; 50 background-color: #c0c0c0;
diff --git a/tpl/vintage/install.html b/tpl/vintage/install.html
index 42874dcd..aca890d6 100644
--- a/tpl/vintage/install.html
+++ b/tpl/vintage/install.html
@@ -1,6 +1,6 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<html> 2<html>
3<head>{include="includes"}{$timezone_js}</head> 3<head>{include="includes"}</head>
4<body onload="document.installform.setlogin.focus();"> 4<body onload="document.installform.setlogin.focus();">
5<div id="install"> 5<div id="install">
6 <h1>Shaarli</h1> 6 <h1>Shaarli</h1>
@@ -9,7 +9,31 @@
9 <table> 9 <table>
10 <tr><td><b>Login:</b></td><td><input type="text" name="setlogin" size="30"></td></tr> 10 <tr><td><b>Login:</b></td><td><input type="text" name="setlogin" size="30"></td></tr>
11 <tr><td><b>Password:</b></td><td><input type="password" name="setpassword" size="30"></td></tr> 11 <tr><td><b>Password:</b></td><td><input type="password" name="setpassword" size="30"></td></tr>
12 {$timezone_html} 12 <tr>
13 <td><b>Timezone:</b></td>
14 <td>
15 <select id="continent" name="continent">
16 {loop="$continents"}
17 {if="$key !== 'selected'"}
18 <option value="{$value}" {if="$continents.selected === $value"}selected{/if}>
19 {$value}
20 </option>
21 {/if}
22 {/loop}
23 </select>
24 <select id="city" name="city">
25 {loop="$cities"}
26 {if="$key !== 'selected'"}
27 <option value="{$value.city}"
28 {if="$cities.selected === $value.city"}selected{/if}
29 data-continent="{$value.continent}">
30 {$value.city}
31 </option>
32 {/if}
33 {/loop}
34 </select>
35 </td>
36 </tr>
13 <tr><td><b>Page title:</b></td><td><input type="text" name="title" size="30"></td></tr> 37 <tr><td><b>Page title:</b></td><td><input type="text" name="title" size="30"></td></tr>
14 <tr><td valign="top"><b>Update:</b></td><td> 38 <tr><td valign="top"><b>Update:</b></td><td>
15 <input type="checkbox" name="updateCheck" id="updateCheck" checked="checked"><label for="updateCheck">&nbsp;Notify me when a new release is ready</label></td> 39 <input type="checkbox" name="updateCheck" id="updateCheck" checked="checked"><label for="updateCheck">&nbsp;Notify me when a new release is ready</label></td>
diff --git a/tpl/vintage/js/shaarli.js b/tpl/vintage/js/shaarli.js
new file mode 100644
index 00000000..9bcc96fb
--- /dev/null
+++ b/tpl/vintage/js/shaarli.js
@@ -0,0 +1,32 @@
1window.onload = function () {
2 var continent = document.getElementById('continent');
3 var city = document.getElementById('city');
4 if (continent != null && city != null) {
5 continent.addEventListener('change', function(event) {
6 hideTimezoneCities(city, continent.options[continent.selectedIndex].value, true);
7 });
8 hideTimezoneCities(city, continent.options[continent.selectedIndex].value, false);
9 }
10};
11
12/**
13 * Add the class 'hidden' to city options not attached to the current selected continent.
14 *
15 * @param cities List of <option> elements
16 * @param currentContinent Current selected continent
17 * @param reset Set to true to reset the selected value
18 */
19function hideTimezoneCities(cities, currentContinent, reset = false) {
20 var first = true;
21 [].forEach.call(cities, function(option) {
22 if (option.getAttribute('data-continent') != currentContinent) {
23 option.className = 'hidden';
24 } else {
25 option.className = '';
26 if (reset === true && first === true) {
27 option.setAttribute('selected', 'selected');
28 first = false;
29 }
30 }
31 });
32}
diff --git a/tpl/vintage/page.footer.html b/tpl/vintage/page.footer.html
index 006d1d68..4ce0803a 100644
--- a/tpl/vintage/page.footer.html
+++ b/tpl/vintage/page.footer.html
@@ -26,6 +26,7 @@
26<script>function confirmDeleteLink() { var agree=confirm("Are you sure you want to delete this link ?"); if (agree) return true ; else return false ; }</script> 26<script>function confirmDeleteLink() { var agree=confirm("Are you sure you want to delete this link ?"); if (agree) return true ; else return false ; }</script>
27{/if} 27{/if}
28 28
29<script src="js/shaarli.js"></script>
29{loop="$plugins_footer.js_files"} 30{loop="$plugins_footer.js_files"}
30 <script src="{$value}#"></script> 31 <script src="{$value}#"></script>
31{/loop} 32{/loop}