Tag Archives: Уеб

Достъпен превключвател за нощен режим в сайта

от Гонзо
лиценз CC BY-NC-SA

В какво се състои проблемът в решението на Атанас? За превключване към нощен режим той използва div със закачена JavaScript функция, която да обслужва събитието click, т.е. единствено интеракция с мишка или натискане с пръст. Но тъй като div не е интерактивен елемент в HTML той не може да приема фокус от клавиатурата и няма да реагира на никакви взаимодействия с нея. Това го прави неизползваем за онези потребители, които поради някаква причина не могат да използват мишка.

Проблемът може лесно да се реши ако използваме елемента button. Той по подразбиране приема фокус, реагира както ва взаимодействия с мишката, така и на клавишите за нов ред и интервал. Може да бъде стилизиран със CSS по същия начин както всеки друг елемент. Да видим как ще изглежда кодът тогава (ще подчертая промените с получер шрифт):

<button type="button" class="wpnm-button">
    <div class="wpnm-button-inner-left"></div>
    <div class="wpnm-button-inner"></div>
</button>
.wpnm-button {
    padding: 0;
    border: none;
    background: none;
    font-size: 1rem;
}

След като променихме елемента, се налага да направим и някои промени в стиловете – тъй като бутоните има подразбиращи се стилове, които да ги накарат да изглеждат като бутони, ние ще трябва да ги пренапишем.

Тъй като вече използваме интерактивен елемент, можем да добавим стилове, които да го отличават когато фокусът е върху него, когато е посочен с мишката или натиснат. Но това ще го оставим за домашно…

Вече имаме хубав бутон, достъпен за потребителите, използващи клавиатура, но на бутонът му липсва текстов етикет. Той е важен за потребителите, използващи екранен четец – когато курсорът на четеца или фокуса попадне на този бутон, той няма да може да даде подходящо описание на потребителя и потребителя няма да може да разбере какво прави този бутон. Най-добре би било текстовия етикет да е видим непосредствено до заобления превключвател, но за да не разваляме изчистения дизайн ще добавим скрит етикет чрез атрибута aria-label. Освен това ще е добре потребителя да може да разбере дали в момента нощния режим е включен или изключен. Състоянието на бутона можем да укажем с атрибута aria-pressed. Този атрибут служи за указване на състоянието на бутони с две състояние (включено – изключено, натиснат – ненатиснат), точно като нашия превключвател към нощен режим.

<button type="button" class="wpnm-button" aria-label="<?php esc_attr_e( 'Dark mode switch', 'textdomain' ); ?>" aria-pressed="false">
    <div class="wpnm-button-inner-left"></div>
    <div class="wpnm-button-inner"></div>
</button>
jQuery(function($) {
    /*Click on dark mode icon. Add dark mode classes and wrappers. 
    Store user preference through sessions*/
    var $button = $('.wpnm-button'),
        $body = $('body');
    $button.click(function() {
        // Show either moon or sun.
        $button.toggleClass('active');
        // If dark mode is selected.
        if ($button.hasClass('active')) {
            //Add dark mode class to the body
            $body.addClass('dark-mode');
            //Save user preference to Storage
            localStorage.setItem('darkMode', true);
            // Reflect the state on the button itself.
            $button.attr('aria-pressed', true);
        } else {
            $body.removeClass('dark-mode');
            localStorage.removeItem('darkMode');
            // Reflect the state on the button itself.
            $button.attr('aria-pressed', false);
        }
    })
    //Check Storage. Display user preference 
    if (localStorage.getItem("darkMode")) {
        $body.addClass('dark-mode');
        $button.addClass('active');
        // Reflect the state on the button itself.
        $button.attr('aria-pressed', true);
    }
})

Както виждате, за етикета на бутона използвах PHP код, който да позволи етикетът да бъде част от преводите на темата или разширението. По този начин с малко помощ от общността на WordPress темата или разширението ни може да достигне до повече потребители.

Освен, че добавих промяна на атрибута aria-pressed, в JavaScript добавих и една оптимизация – можем да запазим в променливи jQuery референциите към бутона и елемента body, за да си спестим търсенето в DOM при всяко изпълняване на части от кода. Макар в случая да не е чак толкова критично, ако страницата има твърде много елементи или имаме много скриптове, подобен подход може да има съществен ефект върху производителността.

Това е минимума от промени, с които да направим превключвателя достъпен. Можем да подобрим още нещата, като например направим етикета видим когато фокуса е върху бутона. Това може да стане с техниката, описана от Adrian Rosseli за добавяне на достъпен етикет на емотикони, и която използвам за бутоните за споделяне в разширението ми Minimal Share Buttons (има ги и под тази статия). Можем да използваме чист JavaScript вместо jQuery, с което да намалим обема на изтегляните скриптове (освен ако така или иначе не използваме и други скриптове, зависещи от jQuery). И можем вместо допълнителен клас active върху бутона да използваме атрибута aria-pressed и в CSS за промяна на изгледа когато е включен нощния режим. За целта ще ни помогне CSS селектор по атрибут: .wpnm-button[aria-pressed="true"].

Как да накараме един блок да се разпъва според два елемента на куп

от Гонзо
лиценз CC BY-NC-SA

За пример ще използвам блок „Обложка“ от новия редактор на WordPress (известен като Гутенберг), който представлява картинка, върху която има текст и/или друго съдържание. Такъв блок може да играе ролята на рекламен банер или заглавие на секция.

Това е обложка

И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.

В момента Гутенберг поставя изображението като фон на блока и му дава минимална височина. Обаче така пропорциите на блока нямат връзка с пропорциите на изображението и е трудно да го направите винаги да е да кажем квадратен или в пропорция 4 към 3. Освен това поставяйки изображението като фон в атрибут style, губим възможността да се се възползваме от отзивчивите изображения и ще караме потребителя да зарежда едно и също (голямо) изображение независимо от размера на екрана му.

<div class="wp-block-cover has-very-dark-gray-background-color has-background-dim" style="background-image:url(https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart.jpg)">
  <div class="wp-block-cover__inner-container">
    <p style="text-align:center" class="has-huge-font-size">Това е обложка</p>
    <p style="text-align:center">И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.
    <div class="wp-block-button aligncenter">
      <a class="wp-block-button__link" href="#">Цъкнете тук!</a>
    </div>
  </div>
</div>

За да постигнем желания ефект, ще поставим изображението като елемент img и ще разположим съдържанието върху него. Сигурно първото, което ви хрумва е да използвате абсолютно позициониране, но това не е добър вариант, защото тогава съдържанието няма да разпъва блока. Как иначе да сложим два елемента един връз друг? Със CSS Grid естествено. CSS Grid ни позволява да поставим повече от един елемент в дадена клетка на решетката и ние ще се възползваме от тази възможност:

<div class="wp-block-cover has-very-dark-gray-background-color has-background-dim uses-css-grid">
  <img src="https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-1024x684.jpg" aria-hidden="true" class="wp-image-2499" srcset="https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-1024x684.jpg 1024w, https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-300x200.jpg 300w, https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-768x513.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px">
  <div class="wp-block-cover__inner-container">
    <p style="text-align:center" class="has-huge-font-size">Това е обложка</p>
    <p style="text-align:center">И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.
    <div class="wp-block-button aligncenter">
      <a class="wp-block-button__link" href="#">Цъкнете тук!</a>
    </div>
  </div>
</div>
.wp-block-cover.uses-css-grid > * {
   grid-column: 1;
   grid-row: 1;
   min-width: 100%;
   min-height: 100%;
 }
 
.wp-block-cover.uses-css-grid > img {
   border: none !important;
   object-fit: cover;
 }
 
.wp-block-cover.uses-css-grid .wp-block-cover__inner-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 3em;
   box-sizing: border-box;
 }

Горният CSS освен, че поставя картинката и текстовото съдържание в единствената клетка от решетката, дефинирана върху блока, се грижи текстовото съдържание да е центрирано вертикално в блока, и картинката винаги да го запълва. Ето и крайния резултат:

Това е обложка

И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.

Ето го още веднъж, но този път с увеличен шрифт, за да демонстрирам как съдържанието също разпъва блока:

Това е обложка

И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.

Как да използваме Autoptimize с HTTP/2

от Гонзо
лиценз CC BY-NC-SA

В по-новите версии на Autoptimize има възможност чрез филтър да съставите списък с разрешени за обединяване скриптове. Това позволява да обедините скриптовете, които са задължителни за всички страници в сайта и да оставите скриптовете, които се зареждат само на определени страници извън пакета. Това решава и един друг проблем с Autoptimize – когато различни скриптове се зареждат на различни страници, пакетите, които се генерират са различни. Това води до безконтролно увеличаване на кеша на Autoptimize и до забавяне на зареждането за потребителите, защото вместо да заредят кеширан файл, всеки път теглят различен.

И така, да започнем с обединяването на задължителните скриптове:

/**
 * Whitelist scripts to autoptimize
 *
 * @return: whitelist
 */
function gonzo_js_whitelist() {
  $whitelist = array(
    'jquery.js',
    'jquery-migrate.min.js',
    'wp-embed.min.js'
  );
  return join( ',', $whitelist );
}
add_filter( 'autoptimize_filter_js_whitelist', 'gonzo_js_whitelist' );

След като вече имаме пакет с най-важните скриптове, нужни за сайта, трябва да се погрижим за две неща:

  • Да зареждаме обединените скриптове преди останалите, защото пакетът съдържа jQuery, а някои от останалите скриптове най-вероятно разчитат на него.
  • Да зареждаме скриптовете асинхронно, за да не блокират изобразяването на страницата.

Генерираният от Autoptimize скрипт елемент може да поставим веднага след елемента title така:

/**
 * Where in the HTML optimized JS is injected.
 *
 * @param array $replacetag, containing the html-tag and the method (inject "before", "after" or "replace")
 * @return array with updated values
 */
function gonzo_override_js_replacetag( $replacetag ) {
    return array( '</title>', "after" );
}
add_filter( 'autoptimize_filter_js_replacetag', 'gonzo_override_js_replacetag', 10, 1 );

За да зареждаме всички скриптове асинхронно, и в същото време последователно, ще добавим атрибут defer към тях. Така скриптовете не само се зареждат асинхронно, но и не блокират изобразяването на страницата когато се изтеглят. Освен това атрибута defer кара скриптовете да се изпълнят по реда в документа.

/*
 * Defer all javascripts
 */
function gonzo_defer_js($tag, $handle) {
  if( ! is_admin() ){
    $tag = str_replace( ' src', ' defer="defer" src', $tag );
  }
  return $tag;
}
add_filter( 'script_loader_tag', 'gonzo_defer_js', 10, 2 );

/**
 * Change flag added to Javascript.
 *
 * @param $defer: default value, "" when forced in head, "defer " when not forced in head
 * @return: new value
 */
function gonzo_override_defer( $defer ) {
  return "defer ";
}
add_filter( 'autoptimize_filter_js_defer', 'gonzo_override_defer', 10, 1 );

И на края, за да гарантираме, че скриптовете ще се кешират правилно от браузърите и прокситата, ще премахнем GET променливата с версията, която WordPress добавя към адресите на всички ресурси:

/*
 * Remove query string from static assets
 */
function gonzo_remove_script_version( $src ){
  return remove_query_arg( 'ver', $src );
}
add_filter( 'script_loader_src', 'gonzo_remove_script_version' );

Естествено, подобен подход можем да приложим и към CSS файловете, които сайта зарежда. На края ще имаме бърз сайт за удоволствие на потребителите и печалба на клиента.

Експортиране на заглавия, съдържащи HTML, от WordPress

от Гонзо
лиценз CC BY-NC-SA

WordPress позволява да се въвежда HTML на много места, на които не бихте си помислили да го направите. Например заглавията на публикациите – например за да откроите някои думи, да маркирате правилно абревиатура или по друга причина. Например повечето статии в „Как се пише“ съдържат HTML, за да откроят думите, за които се отнася статията. Обаче ако ви се наложи да експортирате това съдържание, ще откриете, че заглавията са изчистени от всякакъв HTML и форматирането е загубено. Така стандартният експорт на WordPress става безполезен за пазене на архив на съдържанието или за прехвърлянето му на друга инсталация. Обаче има лесно решение.

Ако поровите в кода на функцията export_wp(), ще видите две интересни неща:

  1. Там е дефинирана функцията wxr_cdata(), която затваря подадения стринг в CDATA блок.
  2. Заглавията на публикацитиите се филтрита през филтъра the_title_rss.

Значи за да можем да експортираме заглавията заедно с HTML-а, трябва да махнем от този филтър функцията, която чисти HTML-а (strip_tags естествено, както и esc_html()) и да добавим wxr_cdata(). Всъщност това второ няма да стане, защото функцията е дефинирана само в контекста на export_wp(), така че ще трябва просто да я клонирате.

function htr_cdata_post_title ( $title ) {
	$title = '<![CDATA[' . $title . ']]>';
  return $title;
}
add_filter( 'the_title_rss', 'htr_cdata_post_title' );

remove_filter( 'the_title_rss', 'strip_tags' );
remove_filter( 'the_title_rss', 'esc_html' );

Това е всичко, при… опа, това беше от друго шоу.

Установяване на правилен локал на формите, създадени с Contact Form 7

от Гонзо
лиценз CC BY-NC-SA

Наскоро ми се наложи да правя сайт с WordPress на Иврит. За незапознатите с особеностите на близкоизточните езици ще напомня, че се пишат от дясно на ляво и нямат главни букви. Освен това чуждите думи, изписани на латиница (или друга писменост, която се пише от ляво на дясно), както и числа, изписани с арабски цифри, се пишат както си трябва – от ляво на дясно. WordPress поддържа достатъчно добре всякакви писмености и езици, правилната локализация също е важно условие за одобряване на темите в wordpress.org. Аз обаче се сблъсках с един проблем на разширението Contact Form 7, който не е очевиден, когато сайтът е на език, изписван от ляво на дясно. В случая с Иврит обаче, въпреки че всичко останало по сайт сменяше посоката на подравняване на текста и елементите, полетата във формата оставаха подравнени вляво. Бърз преглед на генерирания HTML показа наличието на атрибути lang и dir на елемента, който съдържа формата, за манипулиране на които атрибути няма настройка. Проблемът е, че в моя случай тези атрибути имаха стойности като за английски локал, което не само, че обръщаше подравняването на текста, но би имало неприятни последици и за потребителите на екранни четци – ако екранният четец превключи на друг език, това би било най-малкото доста объркващо.

След кратко търсене в сайта на разширението и в Гугъл намерих въпрос, зададен от потребител, използващ Contact Form 7 в многоезичен сайт на английски и арабски. Неговият проблем беше подобен на моя – формите на арабски си оставаха подравнени вляво. Отговорът за мен изглежда доста нелепо: локала на формата се установява на базата на локала на администрацията по време на създаване на формата и се наследява при клониране на формата. При условие, че често в многоезичните (а и не само) сайтове администраторите на сайта използват локал, различен от този на публичния сайт, и като имаме предвид, че новите версии на WordPress дават възможност в администрацията потребителите да избират локал, различен от основния локал на сайта, това поведение на Contact Form 7 има сериозни последствия върху достъпността на сайта. Проблемът може да се отрази не само на потребителите, използващи екранни четци, но и на всички останали – въпреки, че разширението блокира валидирането на формите в браузъра, това може да бъде отменено от други разширения, и тогава съобщенията на браузъра ще са на езика, установен от локала на формата, а не на езика на сайта.

Понеже не намерих конкретно решение на проблема, освен да си сменям езика в администрацията – това не беше решение в случая – се зарових в кода на разширението. И намерих точно каквото ми трябваше – кука за действие, чрез което могат да се манипулират свойствата на обекта, отговарящ за генерирането на формата, точно преди превръщането ѝ в HTML. Ето и кодът, който написах:

function gonzo_fix_cf7_locale( $cf7 ) {
  $cf7->set_locale( get_locale() );
}
add_action( 'wpcf7_contact_form', 'gonzo_fix_cf7_locale' );

Това, което правя е просто – пренаписвам локала на формата с основния локал на сайта. Решението е универсално и ще работи винаги, когато формата е на същия език като сайта.

Флекс в неделя сутрин: заглавие с линии от ляво и дясно

от Гонзо
лиценз CC BY-NC-SA

Не знам дали ще има и други публикации, че да се превърне това в рубрика, но ми хареса идеята да си поиграя с флекса в неделя сутрин. И така, искаме на направим заглавка, която има от ляво и от дясно линии до края на блока със съдържание и искаме да го направим с минимален брой елементи. С флексбокс става с точно един елемент. С помощта на двата псевдоелемента ще нарисуваме линиите, а флексбокс ни е нужен, за да подравним нещата. Тайната е в това, че ако флекс контейнера съдържа текст, около него се създава анонимен елемент, който да служи като флекс елемент, и така не ни е необходим допълнителен елемент около текста. Най-добре да ви покажа кода:

HTML:

<h1>Флекс в неделя сутрин</h1>

CSS:

h1 {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

h1:before, h1:after {
  content: '';
  flex: 1;
  height: 0;
  border-top: 1px solid currentColor;
}

h1:before {
  margin-right: .5em;
}

h1:after {
  margin-left: .5em;
}

Резултата:

Флекс

Ако има нещо неясно, питайте!

Невидимо вграждане на външно съдържание с iframe

от Гонзо
лиценз CC BY-NC-SA

Поради различни съображения понякога се налага да използваме външни услуги за част от съдържанието в сайта. В един точно такъв случай ми се наложи да вградя външното съдържание в сайта с iframe и решението трябваше да отговаря на следните изисквания:

  • Височината на iframe-а винаги да отговаря на височината на вградената страница, за да няма втори скролбар.
  • При навигация във вградената страница да се променя и адреса в основната, като промененият адрес да зарежда съответната страница от външната услуга.
  • Заглавието на документа да се променя заедно със навигацията във вграденото съдържание.

Особеното е, че при зареждане на съдържание от друг домейн в iframe JavaScript от едната страница няма достъп до другата. Поради тази причина оразмеряването на iframe според съдържанието изглежда на пръв поглед проблемно. След малко търсене на най-доброто решение се оказа, че то лесно ще ми помогне за изпълнението и на другите две изисквания. Добре де, за втората точка пипнах малко и бекенда на основния сайт, но няма да навлизам в подробности, защото там не съм в свои води.

И така, най-разумното решение за изравняване на височината на iframe с неговото съдържание, когато то се зарежда от друг домейн, е чрез postMessage. Всеки път, когато се зареди страница в рамката, тя праща съобщение към родителската страница с височината на съдържанието. Родителската страница съответно като получи такова съобщение оразмерява рамката.

Вътре в рамката имаме това:

window.addEventListener('load', function(e){
  if(window.parent && window.parent.postMessage){
    var height = document.body.scrollHeight;
    window.parent.postMessage(height, '*');
  }
}, false);

А в основния сайт имаме това:

window.addEventListener('message', function(e) {
  var data = e.originalEvent.data;
  if (!data) return;
  document.getElementById('theframe').style.height = data + 'px';
}, false);

И след като можем да си изпратим някакви данни от единия прозорец към другия, тогава защо не си изпратим всички данни, от които имаме нужда? Какво ни трябва още? Адреса на страницата в рамката и заглавието на страницата. Всъщност няма да ни трябва целия адрес на страницата, а само пътя. Решението ми за синхронизиране на адресите на двете страници беше да добавя пътя от рамката като параметър към адреса на основната страница, и да го използвам за формиране на атрибута src на рамката при зареждане на страницата. Естествено, включих параметър като част от пътя в адреса на основната страница чрез URL Rewrite.

Това, което пропуснах е как точно ще променим адреса на основната страница като получим съобщението от рамката? В първия момент опитах да използвам history.pushState() – имаме навигация и искаме да дадем възможност потребителя да се върне назад и после напред и… имаше обслужване на събитието popstate и се увъртех като пиле в кълчища. Стана така, защото не взех предвид факта, че навигацията вътре в рамката прави записи в историята на браузъра и чрез pushState аз ги дублирам. Много по-лесно се оказа да използвам history.replaceState() – бутоните на браузъра за навигиране в историята управляват рамката, а чрез събитието popstate и postMessage данните за това се пращат към основната страница. Крайният код придоби следния вид:

iframe.js

function sendParent(e){
  if(window.parent && window.parent.postMessage){
    var height = document.body.scrollHeight,
        path = document.location.pathname,
        title = document.title;
    window.parent.postMessage({height: height, path: path, title: title}, '*');
  }
}
window.addEventListener('load', function(e){
  sendParent();
}, false);
window.addEventListener('message', function(e){
  var data = e.data || e.originalEvent.data;
  if(data == 'get') {
    sendParent();
  }
}, false);
window.addEventListener('popstate', function(e){
  setTimeout(sendParent, 0);
}, false);
document.addEventListener("page:load", function() {
  sendParent();
}, false);

parent.js

var theframe = document.getElementById('theframe');
window.addEventListener('message', function(e) {
  var data = e.originalEvent.data;
  if (!data) return;
  theframe.style.height = data.height + 'px';
  window.history.replaceState(null, '', '/help' + data.path);
  window.scroll(0, 0);
  document.title = data.title;
}, false);
window.addEventListener('resize', function(e) {
  theframe.contentWindow.postMessage('get', '*');
}, false);

На края на кода на рамката сигурно сте забелязали събитието page:load – оказа се, че услугата, която вграждаме използва turbolinks и това е събитието, което се случва когато turbolinks зареди съдържанието на нова страница. А на края на кода на основната старница трябва да ви е направило впечатление обработката на resize на прозореца – ако се промени размерът му е много вероятно да се промени и височината на съдържанието в рамката и тогава питаме рамката за размера на съдържанието. Сигурно първото нещо, което си мислите е „А що не го закачим направо на resize на рамката?“ – ами щото resize на рамката се случва и когато ѝ зададем нов размер, което ще изпрати още веднъж съобщение към прозореца, той пак ще сложи нов размер на рамката… Е, на втория – третия път спира тоя пинг-понг, ама кому е нужно…

Та те така, получи се съвсем невидимо за потребителя – зарежда се съдържание, линковете в рамката сменят като че ли цялата страница, бутоните „напред“ и „назад“ на браузъра работят както се очаква… Идилия! Бих ви го показал, но още не сме готови с някои други неща, ще сложа линка когато му дойде времето. Вервайте ми!

SVG filters and CSS animations don’t play together well in WebKit

от Гонзо
лиценз CC BY-NC-SA

There is one particular day in my life that went into reading everything I could find about applying SVG filters on HTML content in Webkit/Blink and pulling my hair why didn’t my code work. See, I had an element with a SVG filter applied as a URI reference and the filter didn’t appear in Chrome and Opera. I tryed embedding the filter definition into the HTML – didn’t work, I tryed recreating the filter with the filter functions available in CSS – could’t create the same effect, but filters did work. Thet I noticed that the filters shows up while the JavaScript is loading, and after disabling JS throu DevTools the filter was there. And after toggling every single piece of JavaScript on the website on and off I managet to pinpoint the cause of my trobbles – a function that applied a class to the body that triggered an animation on a element that is siblink to the one with the SVG filter applied. Then I remembered reading about Chrome not using the GPU for SVG filters applied with URI, but using it for the shortcut functions in CSS. And then I knew – when applying the animation, Chrome rendered the whole container with the GPU and the SVG filter disappeard. And I did try to use 2d functions for the animation, but Chrome still used the GPU and broke the filter. So, if you ever try to use complex SVG filters together with CSS animation, be prepared for trouble!

I know what you did onbeforeunload

от Гонзо
лиценз CC BY-NC-SA

There are a couple of questions on StackOverflow about distinguishing download links in onbeforeunload event handler, the usual use case being skipping loading animation. The simple solution is to use the download attribute on the link itself, but this can’t be applied for forms. I had the same problem and fortunately I found a solution.

What I did was the obvious thing of checking the properties of the event object, passed to the handler. In Firefox there is explicitOriginalTarget property and when the event is triggered by a form submission, the property is a reference to the submit button (if the form is submitted by pressing the button). In Chrome there is no such property, but there is another one that does the job – srcDocument.activeElement. This also points to the submit button of the form. Internet Explorer on the other hand does not have any of these shortcuts, so I had to use the long reference event.currentTarget.document.activeElement.

So what I did was add a data-download attribute to the form and check for it in the onbeforeunload handler like this:

window.onbeforeunload = function (e) {
  var target = e.currentTarget.document.activeElement;
  if ( target.form ) {
    target = target.form;
  }
  if ( ('getAttribute' in target) && 
       (target.getAttribute('download') != undefined || 
        target.getAttribute('data-download') != undefined) ) {
    return;
  }
  // Show loading spinner or do whatever you need to.
};

The above code does two things – polyfill browsers that don’t support the download attribute and apply similar logic to forms. It works in IE 9, 10, 11 and Edge, latest Firefox and Chrome.

Responsive header images with WordPress

от Гонзо
лиценз CC BY-NC-SA

Големите картинки, заемащи почти целия екран от доста време са на мода, но освен да впечатляват потребителя, те могат и доста да го изнервят докато чака да се заредят. Проблемът става съвсем явен когато потребителя разглежда сайта на екрана на телефона си, особено ако на мястото на което се намира няма 3G покритие. За решаването на този проблем на помощ идват отзивчивите картинки.

Годината е вече 2016та, най-популярните браузъри от доста време поддържат srcset, sizes и picture, така че няма причина да не ги използваме. А с новата версия 4.4 на WordPres това е още по-лесно. Не че с предишните беше трудно, просто трябваше да се инсталира разширението RIGC Responsive Images.

И така, постановката е проста, в горната част на сайта, под главата или като част от нея, искаме да поставим голяма картинка, която да заема цялата ширина на екрана. Освен това сайтът ще е с отзивчив дизайн, все пак е 2016 година вече. До тук нищо сложно, но като погледнем картинката с пропорции 16:9 на екрана на телефона в портретен режим и виждаме, че нещо е е така. Тогава сигурно бихме искали картинката също да е в портретен режим или поне да отива към квадрат, може би да увеличим основния елемент в нея. За да решат този проблем, хората от Responsive Images Comunity Group измислиха елемента picture.

Веднага ви давам пример:

<picture>
   <source media="(min-width: 45em)" srcset="large.jpg">
   <source media="(min-width: 32em)" srcset="med.jpg">
   <img src="small.jpg" alt="">
 </picture>

Браузърите, които поддържат picture, ще заредят първия елемент source, в чийто атрибут media е посочена медийна заявка, отговаряща на устройството на потребителя. Браузърите, които не поддържат picture просто ще покажат елемента img.

За да направим заглавната картинка в WordPress да използва елемента picture първо трябва да накараме WordPres да създава варианти на картинката с необходимите ни размери:

function image_sizes() {
   add_image_size( 'image-big', 1920, 1080, true );
   add_image_size( 'image-medium', 1024, 768, true );
   add_image_size( 'image-small', 480, 480, true );
 }
 add_action( 'after_setup_theme', 'image_sizes' );

След това идва интересната част. Тук предполагам, че темата вече поддържа custom-header. В предишните версии на WordPress заглавната картинка се показва обикновено с функцията header_image(). Но в най-добрия случай с тази функция ще получите img елемент с атрибути srcset и sizes, което не е това, което искаме. За да можем да използваме дефинираните от нас размери на картинки първо трябва да вземем ID на картинката и след това да използваме wp_get_attachment_image_src() за искания размер. Ако търсите начин да вземете ID на заглавната картинка в codex-а, няма да намерите (поне аз не успях), но един преглед на кода на WordPress веднага ще ви посочи get_custom_header() като решение на проблема. Накрая получаваме това:

<?php
 $header = get_custom_header();
 ?>
 <picture>
 <?php
 $src = wp_get_attachment_image_src()( $header->ID, 'image-big' )[0];
 ?>
 <source media="(min-width: 1024px)" src="<?php echo esc_attr($srcset); ?> />
 <?php
 $src = wp_get_attachment_image_src()( $header->ID, 'image-medium' )[0];
 ?>
 <source media="(min-width: 480px)" src="<?php echo esc_attr($srcset); ?> />
 <?php
 $src = wp_get_attachment_image_src()( $header->ID, 'image-small' )[0];
 ?>
 <img src="<?php echo esc_attr($src); ?>" />
 </picture>

Това е добре, но има един недостатък – една и съща картинка се сервира при доста голям диапазон от размери на екрана и съответно в доста случаи ще натовари клиента с излишен трафик и браузъра с по-тежко преоразмеряване на голяма картинка. Решението е на всеки source елемент вместо една картинка със src да подадем набор от размери чрез srcset. Тук на помощ идва функцията wp_get_attachment_image_srcset, която е нова в WordPress 4.4, в по-ранни версии може да се използва чрез разширението RICG Responsive Images. Тя връща srcset атрибут със всички дефинирани размери картинки със същата пропорция като подадения като втори параметър размер.

<?php
 $header = get_custom_header();
 ?>
 <picture>
 <?php
 $srcset_value = wp_get_attachment_image_srcset( $attachment_id, 'header-image-small' );
 $srcset = $srcset_value ? ' srcset="' . esc_attr( $srcset_value ) . '"' : '';
 ?>
 <source media="(min-width: 1024px)" <?php echo $srcset; ?> />
 <?php
 $srcset_value = wp_get_attachment_image_srcset( $attachment_id, 'wide-big' );
 $srcset = $srcset_value ? ' srcset="' . esc_attr( $srcset_value ) . '"' : '';
 ?>
 <source media="(min-width: 600px)" <?php echo $srcset; ?> />
 <?php
 $srcset_value = wp_get_attachment_image_srcset( $attachment_id, 'square-medium' );
 $srcset = $srcset_value ? ' srcset="' . esc_attr( $srcset_value ) . '"' : '';
 ?>
 <source <?php echo $srcset; ?> />
 <img src="<?php echo esc_attr(wp_get_attachment_image_src($attachment_id, 'header-image-base', false)[0]); ?>" />
 </picture>

И така получаваме картинка в главата, която наистина реагира на размера на екрана, с още малко усилия може да подавате различни картинки за различна ориентация при една и съща ширина на екрана. И при това без да изразходвате безплатните мегабайти от плана на потребителя.

Малко полезни разширения

Вече споменах RIGC Responsive Images, официалното разширение добавящо поддръжка за отзивчиви картинки в WordPress. От версия 4.4 вече е част от самия WordPress, но можете да го използвате, за да активирате лесно picturefill или заради добавянето на подобрена компресия на картинките.

Докато работите върху сайта и се опитвате да прецените какви точно пропорции на картинките ще подхождат на различните екрани и какви размери картинки да генерирате, неизбежно ще ви се наложи да променяте набора от размери, които искате WordPress да генерира. Тогава на помощ идват разни разширения, които регенерират различните размери картинки. След няколко проби аз се спрях на Image Regenerate & Select Crop.

Когато започнете да качвате картинки бързо ще забележите, че автоматичното оразмеряване не винаги работи добре и често ще имате нужда ръчно да отрежете картинка така, че да се вижда най-добре дадена част от нея. Тук на помощ идва Manual Image Crop – това разширение ви позволява ръчно да изберете как да се отреже всеки регистриран размер на картинката.