<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} · {'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>
</div>
<div class="pure-g">
- <div class="pure-u-lg-{$ratioLabel} pure-u-1 ">
+ <div class="pure-u-lg-{$ratioLabel} pure-u-1">
<div class="form-label">
- <label>
- <span class="label-name">{'Timezone'|t}</span>
+ <label for="title">
+ <span class="label-name">{'Shaarli title'|t}</span>
</label>
</div>
</div>
- <div class="pure-u-lg-{$ratioInput} pure-u-1 ">
+ <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>
+ <input type="text" name="title" id="title" placeholder="{'My links'|t}">
</div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-lg-{$ratioLabel} pure-u-1">
<div class="form-label">
- <label for="title">
- <span class="label-name">{'Shaarli title'|t}</span>
+ <label>
+ <span class="label-name">{'Timezone'|t}</span><br>
+ <span class="label-desc">{'Continent'|t} · {'City'|t}</span>
</label>
</div>
</div>
<div class="pure-u-lg-{$ratioInput} pure-u-1">
<div class="form-input">
- <input type="text" name="title" id="title" placeholder="{'My links'|t}">
+ <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>
}
}
- document.getElementById('menu-toggle').addEventListener('click', function (e) {
- toggleMenu();
- });
+ var menuToggle = document.getElementById('menu-toggle');
+ if (menuToggle != null) {
+ menuToggle.addEventListener('click', function (e) {
+ toggleMenu();
+ });
+ }
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);
});
}
- /**
- * 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.
*/
}
});
});
+
+ 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) {
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;
+ }
+ }
+ });
+}