diff options
author | ArthurHoaro <arthur@hoa.ro> | 2017-04-25 19:09:13 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-04-25 19:09:13 +0200 |
commit | 4c7045229c94973c1cb83193e69463f426ddc35b (patch) | |
tree | 3f61c22429513f4e70987eb200dc772be8aa70ab | |
parent | 504c9df4e7ed126678f146d4c349c798b8338407 (diff) | |
parent | 49bc541d7973bd86776441eb072e66d01b368e68 (diff) | |
download | Shaarli-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.php | 2 | ||||
-rw-r--r-- | application/TimeZone.php | 101 | ||||
-rw-r--r-- | index.php | 21 | ||||
-rw-r--r-- | tests/TimeZoneTest.php | 83 | ||||
-rw-r--r-- | tpl/default/configure.html | 28 | ||||
-rw-r--r-- | tpl/default/install.html | 40 | ||||
-rw-r--r-- | tpl/default/js/shaarli.js | 55 | ||||
-rw-r--r-- | tpl/vintage/configure.html | 24 | ||||
-rw-r--r-- | tpl/vintage/css/shaarli.css | 4 | ||||
-rw-r--r-- | tpl/vintage/install.html | 28 | ||||
-rw-r--r-- | tpl/vintage/js/shaarli.js | 32 | ||||
-rw-r--r-- | tpl/vintage/page.footer.html | 1 |
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 | ||
3 | use 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 | **/ |
14 | function generateTimeZoneForm($preselectedTimezone='') | 38 | function 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 .= ' 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 | /** |
@@ -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'; | |||
11 | class TimeZoneTest extends PHPUnit_Framework_TestCase | 11 | class 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} · {'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} · {'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 | ||
370 | function activateFirefoxSocial(node) { | 367 | function 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 | */ | ||
398 | function 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"> Notify me when a new release is ready</label></td> | 39 | <input type="checkbox" name="updateCheck" id="updateCheck" checked="checked"><label for="updateCheck"> 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 @@ | |||
1 | window.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 | */ | ||
19 | function 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} |