V6NET.RU

Работа с текстом

Существует ряд AMP HTML компонентов, предназначенных для работы с текстом.

amp-date-countdown, amp-timeago, amp-fit-text, amp-font, amp-dynamic-css-classes, amp-lightbox, amp-list, amp-live-list, amp-next-page, amp-user-notification, amp-accordion


amp-date-countdown

Показывает время, оставшееся до заданного события. Требует включения двух компонент в раздел <HEAD> : <script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"></script> и <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>. Вторая компонента - это несложный шаблонизатор. Количество дней, часов, минут и секунд, оставшихся до заданного события, содержится в переменных {{d}}, {{h}}, {{m}} и {{s}}.

Пример:

<amp-date-countdown end-date="2018-12-31T23:59:59+03:00" layout="fixed-height" height="100"> <template type="amp-mustache"> <p> До Нового 2019 Года осталось {{d}} дней {{h}} часов {{m}} минут. </p> </template> </amp-date-countdown>

На экране это будет выглядеть так:

Дата и время задаются в ISO-формате. Обязательно нужно указать один из параметров end-date, timeleft-ms, timestamp-ms, timestamp-seconds.


amp-timeago

Показывает время, прошедшее от заданного события. Требует включения в раздел <HEAD> компоненты <script async custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"></script>.

У компоненты есть дополнительный параметр locale, аналогичный amp-date-countdown. Как показал опыт, его нужно устанавливать, иначе текст отображается на английском языке. В данном случае locale="ru"

Пример: <amp-timeago width="160" height="20" datetime="2018-11-01T00:00:00+03:00" locale="ru"></amp-timeago>

На экране вы увидите: Ваше время истекло!

В "нормальном" режиме текст между открывающимся и закрывающимся тэгами не отображается. Можно добавить внутри тэга вспомогательный параметр cutoff со значением секунд, он используется для определения момента, когда вместо прошедшего времени станет показываться текст между тэгами. Пример: cutoff="86400" - и через сутки при использовании вышеприведенного примера на экране появится текст "Ваше время истекло!".


amp-fit-text

Меняет размер шрифта так, что он всегда полностью "вписывается" в область заданного размера. Требует включения в раздел <HEAD> компоненты <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>.

В случае, если задать layout="fixed" - то размер блока будет такой, какой он задан width/height на любом устройстве с любыми параметрами экрана. В случае, если задать layout="responsive" - то размер блока будет меняться с сохранением пропорций, заданных в width/height на любом устройстве с любыми параметрами экрана, а также будет меняться размер шрифта.

Вот пример адаптивного блока текста, layout="responsive", пропорции 3:2 сохраняются на любом экране, размер шрифта меняется:

FIT TEXT: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Вот пример фиксированного блока текста, layout="fixed", 250x250 пикселей, размер блока на экране любого устройства сохраняется, размер шрифта меняется.

FIT TEXT Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


amp-font

Отслеживает загрузку (или невозможность загрузки) для выбранного шрифта. Требуется компонента <script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>.

Все примеры ниже написаны для данной страницы, мы используем шрифт PT Sans из бесплатного набора Гугла.

<amp-font layout="nodisplay" font-family="PT Sans" timeout="5000" on-error-remove-class="myfont-loading" on-error-add-class="myfont-missing" on-load-remove-class="myfont-loading" on-load-add-class="myfont-loaded"> </amp-font>

В CSS нужно добавить как минимум:

@font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; src: url("https://fonts.googleapis.com/css?family=PT+Sans&subset=cyrillic") format('woff2'); }

и создать описания для всех упомянутых классов. В принципе достаточно только двух: один для неудачной загрузки, плюс один для удачной.

.myfont-missing {font-family: serif;} .myfont-loading {font-family: serif;} .myfont-demo {font-family: 'PT Sans'}

Вот пример как это работает:

И гордость распирает грудь за всё, что сделали мы сами. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Однажды в студеную зимнюю пору.

Примечание : если нужно работать только со шрифтами из кэша, то следует установить timeout="0".

Примечание 2: для аналогичных манипуляций с изображением предназначена компонента amp-image-lightbox.

Примечание 3: для закрытия окна amp-image-lightbox также можно нажать клавишу ESC (разумеется, если она есть :-) )


amp-lightbox

Требует включения в раздел <HEAD> компоненты <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>. Основное назначение - показать по нажатию (прикосновению) текстовый блок на экране, или наоборот - закрыть его.

Типичное применение:

<amp-lightbox id="my-lightbox" layout="nodisplay"> <div class="lightbox" on="tap:my-lightbox.close" role="button" tabindex="0"> <h1>Дотронься - и я исчезну с экрана, будто меня и не было.</h1> </div> </amp-lightbox>

Дополнительные параметры:

Выглядит это так:

Аналогично кнопке для открытия можно добавить кнопку для закрытия окна.

Для отображения на экране желательно создать (в данном примере) стиль lightbox, поскольку по умолчанию раскрывающийся текст просто накладывается на экран.

Примечание 1: для аналогичных манипуляций с изображением предназначена компонента amp-image-lightbox.

Примечание 2: для закрытия окна amp-lightbox также можно нажать клавишу ESC (разумеется, если она есть :-) )


amp-list

Применяется для показа списка на экране, список берется из локального json-файла. Также может применяться для навигации, для построения меню. В блок HEAD нужно добавить <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script> и уже упоминавшийся шаблонизатор <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>.

Для приведенных ниже тестов используется микросервис, который возвращает: - какой протокол вы используете (IPv4 или IPv6) - температуру у нас за окном (по Цельсию) - дату и время формирования запроса (время - московское)

{ "items":[{ "proto":"IPv4", "temp":"-1", "date":"27.11.2018 13:12" }] }

Данные выводятся на экран так:

<amp-list width="auto" height="80" layout="fixed-height" src="https://btel.bestcom.ru/pp/demo.php"> <template type="amp-mustache" id="amp-template-id"> <div> Сейчас {{date}}, вы используете {{proto}}, у нас за окном {{temp}} </div> </template> </amp-list>

Вот результат:

Данные сразу выводятся в цикле, то есть если внутри JSON-файла находится список, то он будет выведен построчно. Предусмотрена возможность проверки листа на "пустоту", а также вывод вспомогательного текста или изображения до завершения загрузки листа. Можно поместить на экран кнопку, по нажатию на которую проверяется, изменился ли лист. В случае обнаружения изменений экран будет обновлен.

Внимание! Сервис, возвращающий список, должен работать по https, а также выдавать соответствующие XHR-заголовки, то есть должен быть настроен для работы с CORS.


amp-user-notification

Предназначается для показа уведомления для пользователя. Уведомление показывается внизу экрана и может быть отключено (убрано) пользователем. Требуется подключить модуль <script async custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script> а также модуль аналитики (если он еще не добавлен): <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>.

Также желательно добавить стиль для отображения уведомления, иначе текст виден плохо: amp-user-notification { }

Можно использовать как с локальным хранением (запоминанием) действия, так и с клиент-серверной конфигурацией.

Локально:

<amp-user-notification id="my-notification" layout="nodisplay"> Сайт только тестируется, информация постоянно обновляется и дополняется. <button on="tap:my-notification.dismiss" class="ampstart-btn caps ml1">Ясно</button> </amp-user-notification>

Пример по использованию с локальным хранением результатов: при заходе на эту страницу в нижней части экрана должно появиться уведомление.

Сайт только тестируется. Работает далеко не всё и не везде. Просьба проявлять терпение.

На экране должно появиться уведомление, которое пропадет при нажатии на кнопку и больше не появится, оно одноразовое! Можно сгенерировать несколько уведомлений, у каждого должен быть свой ID.


amp-live-list

Основное назначение - автоматическое обновление страницы после того, как она изменилась на сервере. Элементы страницы с уже существовавшими ID внутри раздела <div items> будут обновлены, а в случае появления элементов с новыми ID на экране появится кнопка для запуска обновления. Требуется компонента <script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>. Минимальный интервал между обновлениями - 15 секунд, каких-либо особых требований к веб-серверу не предьявляется.

Структура обновляемой части страницы должна быть такой:

<amp-live-list layout="container" data-poll-interval="15000" data-max-items-per-page="5" id="amp-live-list-main-id"> <button update on="tap:amp-live-list-insert-blog.update">Есть обновления!</button> <div items> <div id="ID-1"> Здесь должно быть первый блок с контентом </div> <div id="ID-2"> Здесь должно быть первый блок с контентом </div> <div id="ID-3"> Здесь должно быть первый блок с контентом </div> </div> </amp-live-list>


amp-accordion

Служит для разворачивания блока текста на экран, то есть что-то вроде того же amp-lightbox, но содержимое отображается на основном экране, а не в новом окне, как в amp-lightbox. Требуется добавить в раздел <HEAD> компоненту <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>.

Аккордеон (amp-accordion) состоит из секций, каждая секция состоит только из двух пунктов:

<amp-accordion> <section expanded> <h4>Заголовок секции</h4> <div> <h5>Здесь может быть любой контент: текст, изображения и проч.</div>h5> Однажды в студеную зимнюю пору я из лесу вышел. <ol> <li> Также внутри может быть <li> перечисление <li> иллюстрация <li> и вообще все, что пожелаете и все, что допустимо </ol> </div> </section> </amp-accordion>

Это будет выглядеть так:

Раскрыть/закрыть текст

Здесь может быть любой контент: текст, изображения и проч.
Однажды в студеную зимнюю пору я из лесу вышел.
  1. также внутри может быть
  2. перечисление
  3. иллюстрация
  4. и вообще все, что пожелаете и все, что допустимо
... и другие html-элементы

(продолжение следует)

amp-dynamic-css-classes