Fast Site Engine
Высокопроизводительный движок для сайтов
Заказать сайт на основе движка
О движкеПроизводительностьБезопасностьТехнические требованияSEO 
Лицензионное соглашение
Демо
Установка
Панель управления
Модули
Документация
Шаблоны
Тесты производительности php
Планы на будущее
Список изменений
Отзывы и пожелания
Переходим на Линукс
Всякое разное
Модули  »  Выбор часового пояса

Выбор часового пояса

Модуль выбора часового пояса, дополнительно имеет JavaScript модуль Combobox для вывода выпадающего списка с возможностью ручного ввода (поиска) с адаптацией для слабовидящих WCAG 2.0, ГОСТ Р 52872-2012.
Живой пример данного модуля и js выпадающих списков combobox смотрите здесь.

Пример подключения

Берём переменные из куков (cookie).

require D.'deny/mods/zones/index.php';
//Задаём значения по умолчанию
$uzd='Europe/Moscow';
if(!$uzs=c('myregion'))$uzs=128;//Europe
$region=zoneregion($uzs);
if(!$uz=c('mycity'))$uz=$uzd;
$uz=htmlspecialchars($uz,ENT_QUOTES);
$city=zonecity($region['value'],$uz);
if(''==$city['value']){$city['value']=$uzd;$city['text']=ll('zones',$uzd);}
date_default_timezone_set($city['value']);

Используем JS Combobox

Первый выпадающий список будет без ручного ввода симулирующий HTML элемент select.
Второй с возможностью ввода. (описание смотрите ниже)

echo 
'<label id="myregion-label" onclick="ff.g(\'myregion\').focus()" title="',ll('zone','belt'),'">',ll('zone','region'),':</label><br>',
'<div class="combo" style="z-index:2">',
  '<div id="myregion" role="combobox" tabindex="0" aria-labelledby="myregion-label" aria-controls="region" aria-haspopup="listbox" aria-autocomplete="list" aria-expanded="false" onchange="setmyzone(this)" data-v="',$region['value'],'">',$region['text'],'</div>',
  '<div role="listbox" id="region" tabindex="-1" aria-label="',ll('zone','region'),'">',$region['options'],'</div>',
'</div>',

'<label for="mycity" title="',ll('zone','belt'),'">',ll('zone','city'),':</label><br>',
'<div class="combo" style="z-index:1">',
  '<input type="text" id="mycity" role="combobox" aria-controls="city" aria-autocomplete="both" aria-haspopup="listbox" aria-expanded="false" onchange="setmyzone(this)" data-v="',$city['value'],'" value="',$city['text'],'">',
  '<button aria-label="',ll('zone','city'),'" aria-controls="city" aria-expanded="false" tabindex="-1"></button>',
  '<div role="listbox" id="city" tabindex="-1" aria-label="',ll('zone','city'),'">',$city['options'],'</div>',
'</div>';

Подключаем обработку нашего класса в конце /inc/_.js
ff.onload(function() {
  ff.init({
    combobox:'combo',
    ...
  }
);
По умолчанию combobox:1, будет искать класс combobox..

Добавляем оформление Combobox в CSS

Я собрал в одну "упаковку" сразу оба элемента. !important перебивают заданные стили у меня на сайте, смотрите по месту, часть из них не нужна..

.combo{height:32px;background-color:#f0f0f0;border:1px solid #cecece;border-radius:5px;position:relative;z-index:2}
.combo [role='combobox']{box-sizing:border-box;position:absolute;z-index:2;width:100%;height:32px;margin:0;padding:0 0 0 6px !important;border-radius:5px;font:bold 15px/30px Verdana;color:#fff;text-shadow:0 1px 1px #735206;background:linear-gradient(#ff9000,#ed480c);box-shadow:0 6px 6px -4px rgba(0,0,0,.2);border:1px solid transparent;overflow:hidden;cursor:pointer}
.combo [role='combobox']:after{content:'';width:0;height:0;font-size:0;position:absolute;top:13px;left:auto;right:11px;border:6px solid transparent;border-top:5px solid #fff;border-bottom:0;background:none;opacity:1;transition:none}
.combo.open [role='combobox']:after{top:12px;border-bottom:5px solid #fff;border-top:0}
.combo [role='combobox']::-moz-selection{background-color:#aeaeae}
.combo [role='combobox']::selection{background-color:rgba(174,174,174,.99)}
.combo button{display:block;position:absolute;z-index:3;width:32px;height:32px;right:0;padding:0;border:0;border-radius:5px;background:none;box-shadow:none;cursor:pointer}
.combo button:after{display:block;content:'';width:0;height:0;font-size:0;position:absolute;top:14px;left:auto;right:11px;border:6px solid transparent;border-top:5px solid #fff;border-bottom:0;background:none;opacity:1;transition:none}
.combo.open button:after{top:13px;border-bottom:5px solid #fff;border-top:0}
.combo [role='listbox']{box-sizing:border-box;display:none;padding-bottom:9px;width:100%;position:absolute;top:32px;max-height:420px;overflow-y:auto;border-radius:3px;border:1px solid #cecece;background-color:#f0f0f0}
.combo span{display:block;padding:5px 0 5px 9px;font:13px/20px Verdana;cursor:pointer}
.combo span:hover{background-color:#f8f8f8}
.combo .selected{color:#aeaeae;background-color:#f8f8f8 !important;cursor:default !important}
.combo [aria-selected='true']{color:#000;background-color:#dadada !important}
/*Дополнительная информация справа*/
.combo #city span{padding-right:40px}
.combo span small{position:absolute;right:4px}

CSS стили по отдельности

.drop{height:32px;background-color:#f0f0f0;border:1px solid #cecece;border-radius:5px;position:relative;z-index:2}
.drop [role='combobox']{box-sizing:border-box;position:absolute;z-index:2;width:100%;height:32px;margin:0;padding:0 0 0 6px !important;border-radius:5px;font:bold 15px/30px Verdana;color:#fff;text-shadow:0 1px 1px #735206;background:linear-gradient(#ff9000,#ed480c);box-shadow:0 6px 6px -4px rgba(0,0,0,.2);border:1px solid transparent;overflow:hidden;cursor:pointer}
.drop [role='combobox']:after{content:'';width:0;height:0;font-size:0;position:absolute;top:13px;left:auto;right:11px;border:6px solid transparent;border-top:5px solid #fff;border-bottom:0;background:none;opacity:1;transition:none}
.drop.open [role='combobox']:after{top:12px;border-bottom:5px solid #fff;border-top:0}
.drop [role='listbox']{box-sizing:border-box;display:none;padding-bottom:9px;width:100%;position:absolute;top:32px;max-height:420px;overflow-y:auto;border-radius:3px;border:1px solid #cecece;background-color:#f0f0f0}
.drop span{display:block;padding:5px 0 5px 9px;font:13px/20px Verdana;cursor:pointer}
.drop span:hover{background-color:#f8f8f8}
.drop .selected{color:#aeaeae;background-color:#f8f8f8 !important;cursor:default !important}
.drop [aria-selected='true']{color:#000;background-color:#dadada !important}

.drop2{height:32px;background-color:#f0f0f0;border:1px solid #cecece;border-radius:5px;position:relative;z-index:2}
.drop2 input{box-sizing:border-box;position:absolute;z-index:2;width:100%;height:32px;margin:0 !important;padding:0 0 0 6px !important;border-radius:5px;font:bold 15px/30px Verdana;color:#fff;text-shadow:0 1px 1px #735206;background:linear-gradient(#ff9000,#ed480c);box-shadow:0 6px 6px -4px rgba(0,0,0,.2);border:1px solid transparent}
.drop2 input::-moz-selection{background-color:#aeaeae}
.drop2 input::selection{background-color:rgba(174,174,174,.99)}
.drop2 button{display:block;position:absolute;z-index:3;width:32px;height:32px;right:0;padding:0;border:0;border-radius:5px;background:none;box-shadow:none;cursor:pointer}
.drop2 button:after{display:block;content:'';width:0;height:0;font-size:0;position:absolute;top:14px;left:auto;right:11px;border:6px solid transparent;border-top:5px solid #fff;border-bottom:0;background:none;opacity:1;transition:none}
.drop2.open button:after{top:13px;border-bottom:5px solid #fff;border-top:0}
.drop2 div{box-sizing:border-box;display:none;padding-bottom:9px;width:100%;position:absolute;top:32px;max-height:420px;overflow-y:auto;border-radius:3px;border:1px solid #cecece;background-color:#f0f0f0}
.drop2 span{display:block;padding:5px 40px 5px 9px;font:13px/20px Verdana;cursor:pointer}
.drop2 span:hover{background-color:#f8f8f8}
.drop2 .selected{color:#aeaeae;background-color:#f8f8f8 !important;cursor:default !important}
.drop2 [aria-selected='true']{color:#000;background-color:#dadada !important}
.drop2 span small{position:absolute;right:4px}

Получаем значения JS

Решаем как именно сохранять данные и что делать дальше.

function setmyzone(e){
  var n,v=ff.atr(e,'data-v');//,t=ff.nn(e,'input')?ff.v(e):e.innerHTML;
  n=ff.isi(v)?'myregion':'mycity';
  ff.sc(n,v,'t');//сохраняем куку и обновляем страницу, 
    в моём скрипте идут манипуляции с адресом - удаляю значение t из $_GET (не обязательно, для примера).
}

Если будет необходимо вызвать повторную инициализацию combobox при AJAX запросе - в конце вывода добавьте:

echo '<input type="hidden" id="fseval" value="fo.init(`combo`)">';
или
echo '<input type="hidden" id="fseval" value="fo.init()">';

Горячие клавиши и функционирование Combobox

Для начала стоит отметить, что теги из пунктов вырезаются, т.е. дополнительная информация +3:00 часа итп.
aria-autocomplete="list" - при вводе значений будет произведён поиск и показаны подходящие пункты. Если поля ввода нет, то по нажатию буквы будет выделять по кругу по подходящие пункты списка начинающиеся с такой же с 1-й буквы.
aria-autocomplete="both" - тоже, плюс идёт подстановка "хвоста" значения в поле ввода..
Можно дописать class="combo open focused" : open - откроет(выпадет) список пунктов, focused установит фокус в Combobox.

  • Enter (или клик на пункте) - Берёт значения из выделенного пункта и подставляет в поле ввода или div role="combobox". Закрывает выпадающий список. Если изменения есть, пытается вызвать onchange функцию.
  • Escape - Закрывает список пунктов, если есть текстовое поле: убирает текст, повторное нажатие возвращает значение по умолчанию.
  • Home - Если есть текстовое поле: и открыт список - выделяет первый пункт, если список закрыт стандартно ставит каретку в начало поля ввода. Если поля ввода нет: открывает список и выделяет первый пункт.
  • End - Если есть текстовое поле: и открыт список - выделяет последний пункт, если список закрыт стандартно ставит каретку в конец поля ввода. Если поля ввода нет: открывает список и выделяет последний пункт.
  • Стрелка влево (ArrowLeft) - Если есть текстовое поле: открывает список(если закрыт) и перемещает каретку на 1 символ влево.
  • Стрелка вправо (ArrowRight) - Если есть тектовое поле: открывает список(если закрыт) и перемещает каретку на 1 символ вправо.
  • Стрелка вверх (ArrowUp) - Открывает список(если закрыт) и выделяет предыдущий пункт, если его нет - выделяет последний.
  • Стрелка вниз (ArrowDown) - Открывает список(если закрыт) и выделяет следующий пункт, если его нет - выделяет первый.
  • Alt+Стрелка вверх (Alt+ArrowUp) - Закрыть список пунктов, без выделения пункта.
  • Alt+Стрелка вниз (Alt+ArrowDown) - Открыть список пунктов, без выделения пункта.
  • Ctrl+~ - Вернуться к предыдущему элементу фокуса (имеется ввиду прыгнуть на предыдущий выделенный элемент страницы).

Описание php функций

zoneregion($z=128, $c='', $j=L, $o=0) - отдаёт регионы часовых поясов.

  • $z=128 - Номер или название зоны часового пояса на английском (регистр не важен).
    AFRICA=1, AMERICA=2, ANTARCTICA=4, ARCTIC=8, ASIA=16, ATLANTIC=32, AUSTRALIA=64, EUROPE=128, INDIAN=256, PACIFIC=512, UTC=1024, ALL=2047, ALL_WITH_BC=4095, PER_COUNTRY=4096(не используется)
  • $c='' - Оставлен под события клика на пункт(option) и подобные 'onclick="myfunc(this)"'
  • $j=L - Язык вывода (L константа языка по умолчанию).
  • $o - Вывести пункты(option) в виде:
         0: <span role="option" data-v=""></span>
         1: <li role="option" data-v=""></li>
         2: <option value=""></option>

Возвращает массив ['value'=>'Номер зоны','text'=>'Название исходя из выбранного языка вывода','options'=>'Список пунктов часовых поясов']. Если значение(value) или текст(text) пустые, значит не найдено.

zonecity($r=128, $z='Europe/Moscow', $c='', $j=L, $o=0, $w=1, $d='<small>+%02d:%02d</small>', $d0=0){ - отдаёт города для выбранного региона часового пояса.

  • $z=128 - Номер зоны часового пояса.
  • $z='Europe/Moscow' - Выбранный часовой пояс.
  • $c='' - Оставлен под события клика на пункт(option) и подобные 'onclick="myfunc(this)"'
  • $j=L - Язык вывода (L константа языка по умолчанию).
  • $o - Вывести пункты(option) в виде:
         0: <span role="option" data-v=""></span>
         1: <li role="option" data-v=""></li>
         2: <option value=""></option>
  • $w=1 - Удалять из названия зону, напимер Европа/Москва станет Москва (при выводе всех(ALL=2047, ALL_WITH_BC=4095) часовых поясов, данный флаг игнорируется и выводится всё полностью).
  • $d='<small>+%02d:%02d</small>' - Формат вывода смещения времени часового пояса (Европа/Москва +3:00).
  • $d0=0 - Вывод дополнительной информации о смещении времени, если совпадает с Всемирным координированным временем (UCT оно же GMT, Greenwich и ещё некоторые - 0:00). Отключено по умолчанию (повторите по аналогии с предыдущим пунктом для включения).

Возвращает массив ['value'=>'Значение часового пояса на английском (Europe/Moscow)','text'=>'Название исходя из выбранного языка вывода','options'=>'Список пунктов городов']. Если значение(value) или текст(text) пустые, значит не найдено.

Страница сгенерирована за 0.441337 секунды
На один процесс веб-сервера: 2 стр/сек.
Всего Apache может отдать: 512 стр/сек.
Выделено php памяти: 434.74 KB, real_usage: 2 MB

© Все права защищены 2004 - 2020
Карта сайта
Отслеживать изменения в Твиттере
Политика конфиденциальности

Браузер построил за сек.
Полное время сек.

С момента выгрузки предыдущей страницы из памяти браузера: сек.