Knah-Tsaeb/MyShaarli
Knah-Tsaeb/MyShaarli
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Apply the new timezone template variables to the default theme

Browse source
This commit is contained in:
ArthurHoaro 2017-03-22 19:29:02 +01:00
parent ae3aa96898
commit a07373135e
3 changed files with 98 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
tpl/default/configure.html
View file

@ -73,15 +73,35 @@ <h2 class="window-title">{'Configure'|t}</h2>
<div class="pure-u-lg-{$ratioLabel} pure-u-1 ">
<div class="form-label">
<label>
<span class="label-name">{'Timezone'|t}</span>
<span class="label-name">{'Timezone'|t}</span><br>
<span class="label-desc">{'Continent'|t} &middot; {'City'|t}</span>
</label>
</div>
</div>
<div class="pure-u-lg-{$ratioInput} pure-u-1 ">
<div class="form-input">
{ignore}FIXME! too hackish, needs to be fixed upstream{/ignore}
<div class="timezone" id="timezone-remove">{$timezone_form}</div>
<div class="timezone" id="timezone-add"></div>
<div class="timezone">
<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>
</div>
</div>
</div>
</div>

54
tpl/default/install.html
View file

@ -48,23 +48,6 @@ <h2 class="window-title">{'Install Shaarli'|t}</h2>
</div>
</div>
<div class="pure-g">
<div class="pure-u-lg-{$ratioLabel} pure-u-1 ">
<div class="form-label">
<label>
<span class="label-name">{'Timezone'|t}</span>
</label>
</div>
</div>
<div class="pure-u-lg-{$ratioInput} pure-u-1 ">
<div class="form-input">
{ignore}FIXME! too hackish, needs to be fixed upstream{/ignore}
<div class="timezone" id="timezone-remove">{$timezone_html}</div>
<div class="timezone" id="timezone-add"></div>
</div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-lg-{$ratioLabel} pure-u-1">
<div class="form-label">
@ -80,6 +63,43 @@ <h2 class="window-title">{'Install Shaarli'|t}</h2>
</div>
</div>
<div class="pure-g">
<div class="pure-u-lg-{$ratioLabel} pure-u-1">
<div class="form-label">
<label>
<span class="label-name">{'Timezone'|t}</span><br>
<span class="label-desc">{'Continent'|t} &middot; {'City'|t}</span>
</label>
</div>
</div>
<div class="pure-u-lg-{$ratioInput} pure-u-1">
<div class="form-input">
<div class="timezone">
<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>
</div>
</div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-lg-{$ratioLabel} pure-u-7-8">
<div class="form-label">

51
tpl/default/js/shaarli.js
View file

@ -76,9 +76,12 @@ window.onload = function () {
}
}
document.getElementById('menu-toggle').addEventListener('click', function (e) {
var menuToggle = document.getElementById('menu-toggle');
if (menuToggle != null) {
menuToggle.addEventListener('click', function (e) {
toggleMenu();
});
}
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);
@ -299,21 +302,6 @@ window.onload = function () {
});
}
/**
* TimeZome select
* FIXME! way too hackish
*/
var toRemove = document.getElementById('timezone-remove');
if (toRemove != null) {
var firstSelect = toRemove.getElementsByTagName('select')[0];
var secondSelect = toRemove.getElementsByTagName('select')[1];
toRemove.parentNode.removeChild(toRemove);
var toAdd = document.getElementById('timezone-add');
var newTimezone = '<span class="timezone-continent">Continent ' + firstSelect.outerHTML + '</span>';
newTimezone += ' <span class="timezone-country">Country ' + secondSelect.outerHTML + '</span>';
toAdd.innerHTML = newTimezone;
}
/**
* Awesomplete trigger.
*/
@ -366,6 +354,15 @@ 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);
}
};
function activateFirefoxSocial(node) {
@ -391,3 +388,25 @@ function activateFirefoxSocial(node) {
var activate = new CustomEvent("ActivateSocialFeature");
node.dispatchEvent(activate);
}
/**
* 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;
}
}
});
}