From 49bc541d7973bd86776441eb072e66d01b368e68 Mon Sep 17 00:00:00 2001
From: ArthurHoaro <arthur@hoa.ro>
Date: Mon, 3 Apr 2017 19:23:30 +0200
Subject: [PATCH] Apply the new timezone template variables to the vintage
 theme

---
 tpl/vintage/configure.html   | 24 ++++++++++++++++++++++--
 tpl/vintage/css/shaarli.css  |  4 ++++
 tpl/vintage/install.html     | 28 ++++++++++++++++++++++++++--
 tpl/vintage/js/shaarli.js    | 32 ++++++++++++++++++++++++++++++++
 tpl/vintage/page.footer.html |  1 +
 5 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 tpl/vintage/js/shaarli.js
diff --git a/tpl/vintage/configure.html b/tpl/vintage/configure.html
index 5820e6e..61907dd 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 7ca567e..9c72d99 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 42874dc..aca890d 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 0000000..9bcc96f
--- /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 006d1d6..4ce0803 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}

Login:
Password:
Timezone:	+ + +
Page title:
Update:	Notify me when a new release is ready