Tuesday, September 23, 2014

Ratchet спешит на помощь или затачиваем Framework7 под Windows Phone 8 и Android 4.0-4.3

Итак, следующая часть "марлезонского балета" заключается в адаптации отображения ListView к ОС перечисленным в заголовке, а именно "отображение стрелочек навигации", которые обведены желтым на скриншоте ниже

Почему эти стрелочки важны? Они отображают ситуацию, что при клике по элементу будет произведено некоторое действие, обычно переход на другую страницу. Т.е. это активный элемент управления.

Так вот, по какому то умыслу эти стрелочки не отображаются в ИЕ под ВинФоном (но прекрасно показываются в ИЕ на десктопе, см скриншот выше) и в браузере Андроида версий 4.0-4.3 ("старый" Webkit, кстати, такой же старый Webkit использует Safari 5.x под Windows, который я использовал в целях тестинга). 

Владимир (автор F7) подсказывает "о причинах" в комментарии к предыдущему посту:
Проблема у Android'a в том, что он не поддерживает background-size если в качестве картинки стоит SVG, точнее поддерживает но неверно. Плюс тут в background-position используется функция calc(), тоже не работает на Android до версии 4.4
 Но я все равно проверил на собственных тестах, что ничего не работает :)

Однако, в памяти отложилось, то что в Ratchet (и в Intel App Framework) эти стрелочки отображаются как надо во всех браузерах. А это значит, что там используется другой способ показа иконок. И я полез в сорцы Ratchet и обнаруживаю там, что класс .navigate-right имеет псевдоэлемент .navigate-right:after (см скриншот ниже).


Который показывает элемент (сущность \e826) из svg файла с иконками (интересное решение, не правда ли?), а именно "стрелочку вправо" всегда после самого элемента (если "элементом" можно назвать "класс"). Я не совсем понял, почему инспектор показывает эти свойства зачеркнутыми, они видны на экране.

Попробует подобное реализовать и в F7, для этого открываем для редактирования framework7.css, находим в нём описание класса  .list-block .item-link .item-inner, убираем в нём всё что связано с background и добавляем псевдокласс .item-inner:after вот такого содержания
.item-inner:after{
content: ""; 
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2060%20120%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27m60%2061.5-38.25%2038.25-9.75-9.75%2029.25-28.5-29.25-28.5%209.75-9.75z%27%20fill%3D%27%23c7c7cc%27/%3E%3C/svg%3E");
background-size: 10px 20px;
    d1isplay: block;
    float: right;  
    position: relative;  
    right: -15px;
width: 10px;
height: 20px;
}
Проверяю в эмуляторе XDK, все работает правильно. Проверяю, в эмуляторе (и на устройстве) с Android 4.0


В эмуляторе правильно работает (не обращайте внимание на внешнее оформление, рендерится всё равно на Chrome).

В эмуляторе устройства и на самом устройстве, в том числе на WP, тоже.

Цель достигнута. Есть и недочёты в текущей реализации - если текст длинный и будет на нескольких строках, то стрелочка будет только на последней строке, но не по середине текста/элемента. Пока не нашел решения. И не проверял, как себя поведёт на системах с написанием текста справа-налево.




No comments: