Apply the new timezone template variables to the vintage theme

author: ArthurHoaro <arthur@hoa.ro> 2017-04-03 19:23:30 +0200
committer: ArthurHoaro <arthur@hoa.ro> 2017-04-04 18:44:24 +0200
commit: 49bc541d7973bd86776441eb072e66d01b368e68 (patch)
tree: 5b126e82881ff7d88291bac32b96e0bc3e3340ec /tpl
parent: a07373135e08d182314847bb7dfc5a0246610d06 (diff)
download: Shaarli-49bc541d7973bd86776441eb072e66d01b368e68.tar.gz
Shaarli-49bc541d7973bd86776441eb072e66d01b368e68.tar.zst
Shaarli-49bc541d7973bd86776441eb072e66d01b368e68.zip
5 files changed, 85 insertions, 4 deletions
diff --git a/tpl/vintage/configure.html b/tpl/vintage/configure.html
index 5820e6e4..61907ddf 100644
--- a/tpl/vintage/configure.html
+++ b/tpl/vintage/configure.html
@@ -4,7 +4,6 @@
 <body onload="document.configform.title.focus();">
 <div id="pageheader">
  {include="page.header"}
-  {$timezone_js}
  <form method="POST" action="#" name="configform" id="configform">
    <input type="hidden" name="token" value="{$token}">
    <table id="configuration_table">
@@ -35,7 +34,28 @@
      <tr>
        <td><b>Timezone:</b></td>
-        <td>{$timezone_form}</td>
+        <td>
+          <select id="continent" name="continent">
+            {loop="$continents"}
+              {if="$key !== 'selected'"}
+                <option value="{$value}" {if="$continents.selected === $value"}selected{/if}>
+                  {$value}
+                </option>
+              {/if}
+            {/loop}
+          </select>
+          <select id="city" name="city">
+            {loop="$cities"}
+              {if="$key !== 'selected'"}
+                <option value="{$value.city}"
+                        {if="$cities.selected === $value.city"}selected{/if}
+                        data-continent="{$value.continent}">
+                  {$value.city}
+                </option>
+              {/if}
+            {/loop}
+          </select>
+        </td>
      </tr>
      <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 {
    font-weight: bold;
 }
+.hidden {
+    display: none;
+}
 /* Buttons */
 .bigbutton, #pageheader a.bigbutton  {
    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 @@
 <!DOCTYPE html>
 <html>
-<head>{include="includes"}{$timezone_js}</head>
+<head>{include="includes"}</head>
 <body onload="document.installform.setlogin.focus();">
 <div id="install">
    <h1>Shaarli</h1>
@@ -9,7 +9,31 @@
        <table>
            <tr><td><b>Login:</b></td><td><input type="text" name="setlogin" size="30"></td></tr>
            <tr><td><b>Password:</b></td><td><input type="password" name="setpassword" size="30"></td></tr>
-            {$timezone_html}
+            <tr>
+                <td><b>Timezone:</b></td>
+                <td>
+                    <select id="continent" name="continent">
+                        {loop="$continents"}
+                        {if="$key !== 'selected'"}
+                        <option value="{$value}" {if="$continents.selected === $value"}selected{/if}>
+                        {$value}
+                        </option>
+                        {/if}
+                        {/loop}
+                    </select>
+                    <select id="city" name="city">
+                        {loop="$cities"}
+                        {if="$key !== 'selected'"}
+                        <option value="{$value.city}"
+                                {if="$cities.selected === $value.city"}selected{/if}
+                        data-continent="{$value.continent}">
+                        {$value.city}
+                        </option>
+                        {/if}
+                        {/loop}
+                    </select>
+                </td>
+            </tr>
            <tr><td><b>Page title:</b></td><td><input type="text" name="title" size="30"></td></tr>
            <tr><td valign="top"><b>Update:</b></td><td>
                <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 @@
+window.onload = function () {
+    var continent = document.getElementById('continent');
+    var city = document.getElementById('city');
+    if (continent != null && city != null) {
+        continent.addEventListener('change', function(event) {
+            hideTimezoneCities(city, continent.options[continent.selectedIndex].value, true);
+        });
+        hideTimezoneCities(city, continent.options[continent.selectedIndex].value, false);
+    }
+};
+/**
+ * Add the class 'hidden' to city options not attached to the current selected continent.
+ *
+ * @param cities           List of <option> elements
+ * @param currentContinent Current selected continent
+ * @param reset            Set to true to reset the selected value
+ */
+function hideTimezoneCities(cities, currentContinent, reset = false) {
+    var first = true;
+    [].forEach.call(cities, function(option) {
+        if (option.getAttribute('data-continent') != currentContinent) {
+            option.className = 'hidden';
+        } else {
+            option.className = '';
+            if (reset === true && first === true) {
+                option.setAttribute('selected', 'selected');
+                first = false;
+            }
+        }
+    });
+}
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 @@
 <script>function confirmDeleteLink() { var agree=confirm("Are you sure you want to delete this link ?"); if (agree) return true ; else return false ; }</script>
 {/if}
+<script src="js/shaarli.js"></script>
 {loop="$plugins_footer.js_files"}
        <script src="{$value}#"></script>
 {/loop}
author	ArthurHoaro <arthur@hoa.ro>	2017-04-03 19:23:30 +0200
committer	ArthurHoaro <arthur@hoa.ro>	2017-04-04 18:44:24 +0200
commit	49bc541d7973bd86776441eb072e66d01b368e68 (patch)
tree	5b126e82881ff7d88291bac32b96e0bc3e3340ec /tpl
parent	a07373135e08d182314847bb7dfc5a0246610d06 (diff)
download	Shaarli-49bc541d7973bd86776441eb072e66d01b368e68.tar.gz Shaarli-49bc541d7973bd86776441eb072e66d01b368e68.tar.zst Shaarli-49bc541d7973bd86776441eb072e66d01b368e68.zip

diff --git a/tpl/vintage/configure.html b/tpl/vintage/configure.html index 5820e6e4..61907ddf 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}