<?php
+use Shaarli\Config\ConfigManager;
+
/**
* This class is in charge of building the final page.
* (This is basically a wrapper around RainTPL which pre-fills some fields.)
<?php
/**
- * Generates the timezone selection form and JavaScript.
+ * Generates a list of available timezone continents and cities.
*
- * Note: 'UTC/UTC' is mapped to 'UTC' to form a valid option
+ * Two distinct array based on available timezones
+ * and the one selected in the settings:
+ * - (0) continents:
+ * + list of available continents
+ * + special key 'selected' containing the value of the selected timezone's continent
+ * - (1) cities:
+ * + list of available cities associated with their continent
+ * + special key 'selected' containing the value of the selected timezone's city (without the continent)
*
- * Example: preselect Europe/Paris
- * list($htmlform, $js) = generateTimeZoneForm('Europe/Paris');
+ * Example:
+ * [
+ * [
+ * 'America',
+ * 'Europe',
+ * 'selected' => 'Europe',
+ * ],
+ * [
+ * ['continent' => 'America', 'city' => 'Toronto'],
+ * ['continent' => 'Europe', 'city' => 'Paris'],
+ * 'selected' => 'Paris',
+ * ],
+ * ];
*
+ * Notes:
+ * - 'UTC/UTC' is mapped to 'UTC' to form a valid option
+ * - a few timezone cities includes the country/state, such as Argentina/Buenos_Aires
+ * - these arrays are designed to build timezone selects in template files with any HTML structure
+ *
+ * @param array $installedTimeZones List of installed timezones as string
* @param string $preselectedTimezone preselected timezone (optional)
*
- * @return array containing the generated HTML form and Javascript code
+ * @return array[] continents and cities
**/
-function generateTimeZoneForm($preselectedTimezone='')
+function generateTimeZoneData($installedTimeZones, $preselectedTimezone = '')
{
- // Select the server timezone
- if ($preselectedTimezone == '') {
- $preselectedTimezone = date_default_timezone_get();
- }
-
if ($preselectedTimezone == 'UTC') {
$pcity = $pcontinent = 'UTC';
} else {
$pcity = substr($preselectedTimezone, $spos+1);
}
- // The list is in the form 'Europe/Paris', 'America/Argentina/Buenos_Aires'
- // We split the list in continents/cities.
- $continents = array();
- $cities = array();
-
- // TODO: use a template to generate the HTML/Javascript form
-
- foreach (timezone_identifiers_list() as $tz) {
+ $continents = [];
+ $cities = [];
+ foreach ($installedTimeZones as $tz) {
if ($tz == 'UTC') {
$tz = 'UTC/UTC';
}
$spos = strpos($tz, '/');
- if ($spos !== false) {
- $continent = substr($tz, 0, $spos);
- $city = substr($tz, $spos+1);
- $continents[$continent] = 1;
-
- if (!isset($cities[$continent])) {
- $cities[$continent] = '';
- }
- $cities[$continent] .= '<option value="'.$city.'"';
- if ($pcity == $city) {
- $cities[$continent] .= ' selected="selected"';
- }
- $cities[$continent] .= '>'.$city.'</option>';
+ // Ignore invalid timezones
+ if ($spos === false) {
+ continue;
}
- }
-
- $continentsHtml = '';
- $continents = array_keys($continents);
- foreach ($continents as $continent) {
- $continentsHtml .= '<option value="'.$continent.'"';
- if ($pcontinent == $continent) {
- $continentsHtml .= ' selected="selected"';
- }
- $continentsHtml .= '>'.$continent.'</option>';
+ $continent = substr($tz, 0, $spos);
+ $city = substr($tz, $spos+1);
+ $cities[] = ['continent' => $continent, 'city' => $city];
+ $continents[$continent] = true;
}
- // Timezone selection form
- $timezoneForm = 'Continent:';
- $timezoneForm .= '<select name="continent" id="continent" onChange="onChangecontinent();">';
- $timezoneForm .= $continentsHtml.'</select>';
- $timezoneForm .= ' City:';
- $timezoneForm .= '<select name="city" id="city">'.$cities[$pcontinent].'</select><br />';
-
- // Javascript handler - updates the city list when the user selects a continent
- $timezoneJs = '<script>';
- $timezoneJs .= 'function onChangecontinent() {';
- $timezoneJs .= 'document.getElementById("city").innerHTML =';
- $timezoneJs .= ' citiescontinent[document.getElementById("continent").value]; }';
- $timezoneJs .= 'var citiescontinent = '.json_encode($cities).';';
- $timezoneJs .= '</script>';
+ $continents = array_keys($continents);
+ $continents['selected'] = $pcontinent;
+ $cities['selected'] = $pcity;
- return array($timezoneForm, $timezoneJs);
+ return [$continents, $cities];
}
/**
$PAGE->assign('theme', $conf->get('resource.theme'));
$PAGE->assign('theme_available', ThemeUtils::getThemes($conf->get('resource.raintpl_tpl')));
$PAGE->assign('redirector', $conf->get('redirector.url'));
- list($timezone_form, $timezone_js) = generateTimeZoneForm($conf->get('general.timezone'));
- $PAGE->assign('timezone_form', $timezone_form);
- $PAGE->assign('timezone_js',$timezone_js);
+ list($continents, $cities) = generateTimeZoneData(
+ timezone_identifiers_list(),
+ $conf->get('general.timezone')
+ );
+ $PAGE->assign('continents', $continents);
+ $PAGE->assign('cities', $cities);
$PAGE->assign('private_links_default', $conf->get('privacy.default_private_links', false));
$PAGE->assign('session_protection_disabled', $conf->get('security.session_protection_disabled', false));
$PAGE->assign('enable_rss_permalinks', $conf->get('feed.rss_permalinks', false));
exit;
}
- // Display config form:
- list($timezone_form, $timezone_js) = generateTimeZoneForm();
- $timezone_html = '';
- if ($timezone_form != '') {
- $timezone_html = '<tr><td><b>Timezone:</b></td><td>'.$timezone_form.'</td></tr>';
- }
-
$PAGE = new PageBuilder($conf);
- $PAGE->assign('timezone_html',$timezone_html);
- $PAGE->assign('timezone_js',$timezone_js);
+ list($continents, $cities) = generateTimeZoneData(timezone_identifiers_list(), date_default_timezone_get());
+ $PAGE->assign('continents', $continents);
+ $PAGE->assign('cities', $cities);
$PAGE->renderPage('install');
exit;
}
*/
class TimeZoneTest extends PHPUnit_Framework_TestCase
{
+ /**
+ * @var array of timezones
+ */
+ protected $installedTimezones;
+
+ public function setUp()
+ {
+ $this->installedTimezones = [
+ 'Antarctica/Syowa',
+ 'Europe/London',
+ 'Europe/Paris',
+ 'UTC'
+ ];
+ }
+
/**
* Generate a timezone selection form
*/
public function testGenerateTimeZoneForm()
{
- $generated = generateTimeZoneForm();
+ $expected = [
+ 'continents' => [
+ 'Antarctica',
+ 'Europe',
+ 'UTC',
+ 'selected' => '',
+ ],
+ 'cities' => [
+ ['continent' => 'Antarctica', 'city' => 'Syowa'],
+ ['continent' => 'Europe', 'city' => 'London'],
+ ['continent' => 'Europe', 'city' => 'Paris'],
+ ['continent' => 'UTC', 'city' => 'UTC'],
+ 'selected' => '',
+ ]
+ ];
- // HTML form
- $this->assertStringStartsWith('Continent:<select', $generated[0]);
- $this->assertContains('selected="selected"', $generated[0]);
- $this->assertStringEndsWith('</select><br />', $generated[0]);
+ list($continents, $cities) = generateTimeZoneData($this->installedTimezones);
- // Javascript handler
- $this->assertStringStartsWith('<script>', $generated[1]);
- $this->assertContains(
- '<option value=\"Bermuda\">Bermuda<\/option>',
- $generated[1]
- );
- $this->assertStringEndsWith('</script>', $generated[1]);
+ $this->assertEquals($expected['continents'], $continents);
+ $this->assertEquals($expected['cities'], $cities);
}
/**
*/
public function testGenerateTimeZoneFormPreselected()
{
- $generated = generateTimeZoneForm('Antarctica/Syowa');
-
- // HTML form
- $this->assertStringStartsWith('Continent:<select', $generated[0]);
- $this->assertContains(
- 'value="Antarctica" selected="selected"',
- $generated[0]
- );
- $this->assertContains(
- 'value="Syowa" selected="selected"',
- $generated[0]
- );
- $this->assertStringEndsWith('</select><br />', $generated[0]);
+ $expected = [
+ 'continents' => [
+ 'Antarctica',
+ 'Europe',
+ 'UTC',
+ 'selected' => 'Antarctica',
+ ],
+ 'cities' => [
+ ['continent' => 'Antarctica', 'city' => 'Syowa'],
+ ['continent' => 'Europe', 'city' => 'London'],
+ ['continent' => 'Europe', 'city' => 'Paris'],
+ ['continent' => 'UTC', 'city' => 'UTC'],
+ 'selected' => 'Syowa',
+ ]
+ ];
+ list($continents, $cities) = generateTimeZoneData($this->installedTimezones, 'Antarctica/Syowa');
- // Javascript handler
- $this->assertStringStartsWith('<script>', $generated[1]);
- $this->assertContains(
- '<option value=\"Bermuda\">Bermuda<\/option>',
- $generated[1]
- );
- $this->assertStringEndsWith('</script>', $generated[1]);
+ $this->assertEquals($expected['continents'], $continents);
+ $this->assertEquals($expected['cities'], $cities);
}
/**
<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;
+ }
+ }
+ });
+}
<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">
<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>
font-weight: bold;
}
+.hidden {
+ display: none;
+}
+
/* Buttons */
.bigbutton, #pageheader a.bigbutton {
background-color: #c0c0c0;
<!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>
<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"> Notify me when a new release is ready</label></td>
--- /dev/null
+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;
+ }
+ }
+ });
+}
<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}
projects / github / shaarli / Shaarli.git / commitdiff
