Oficjalna wtyczka dla tinypng i tinyjpg dla WordPressa

Dosłownie tydzień temu na WordUpie w Warszawie mówiłem podczas swojej prezentacji, że wtyczka WP Smush.it zgrabnie wyręcza nas z optymalizowania rozmiaru grafik, ale niestety daleko jej jeżeli chodzi o wyniki kompresji do serwisów tinyjpg i tinypng. Dzisiaj odkryłem, że wczoraj pojawiła się oficjalna wtyczka dla tych serwisów.

Oczywiście nie ma róży bez kolców – miesięczny limit to 500 obrazków – po jego przekroczeniu zapłacimy 90 centów za każde kolejne 100 skompresowanych grafik.

Sama konfiguracja jest prosta – musimy zdobyć klucz API poprzez rejestrację na stronie API, a następnie wprowadzamy go w ustawieniach mediów WordPressa. Warto też określić, które obrazki powinny być kompresowane – dzięki temu oszczędzimy trochę darmowego limitu obrazków 🙂

tinypng-plugin-configuraton

Jeżeli chcemy szybko przetworzyć stare grafiki warto skorzystać z wtyczki Regenerate Thumbnails.

P.S. Tak wiem, że istniały inne wtyczki korzystające z tego API, ale osobiście najbardziej ufam oficjalnym rozwiązaniom 🙂

TinyMCE – dodawanie walidacji w popupie

Gdy tworzymy popup z ustawieniami dla naszego przycisku w TinyMCE, prawdopodobnie szybko odkryjemy, że przydałaby się jakaś walidacja danych wprowadzanych w polach popupa, aby użytkownik nie mógł wprowadzić błędnych danych. Prosta walidacja danych jest możliwa w łatwy sposób. Podświetlenie błędnie wypełnionych pól także da się zrobić, choć wymaga ono już trochę pracy i paru mniej eleganckich chwytów.

Zacznijmy od kodu bazowego – przyjmijmy, że nasz popup z dwoma polami: width i height, ma zdefiniowaną akcję onsubmit w następujący sposób:

onsubmit: function(e) {
    editor.insertContent('Lorem ipsum: ' + e.data.width + ' x ' + e.data.height + '.');
}

Zaimplementowanie podstawowej walidacji jest w tym wypadku bardzo proste – sprawdzamy wartości pól i w zależności od spełnienia kryteriów wysyłamy dane z popupa lub nie korzystając z return false do blokowania wysyłania popupa:

onsubmit: function(e) {
    if(e.data.width === '' || e.data.height === '') {
        return false;
    }
    editor.insertContent('Lorem ipsum: ' + e.data.width + ' x ' + e.data.height + '.');
}

Niestety taki sposób walidacji ma poważną wadę – użytkownik nie wie tak naprawdę co się stało i dlaczego formularz nie został wysłany. Dlatego powinniśmy wyświetlić mu odpowiedni komunikat – możemy skorzystać z funkcji alert ale dużo zgrabniej będzie skorzystać z wbudowanego w TinyMCE okna komunikatu:

onsubmit: function(e) {
    if(e.data.width === '' || e.data.height === '') {
        editor.windowManager.alert('Proszę wypełnić wszystkie pola w popupie.');
        return false;
    }
    editor.insertContent('Lorem ipsum: ' + e.data.width + ' x ' + e.data.height + '.');
}

Użytkownik po takiej informacji powinien już być uświadomiony, że coś jest nie tak z wprowadzonymi przez niego danymi, ale warto na wszelki wypadek jeszcze pokazać mu, które pola są wypełnione nieprawidłowo. W tym celu będziemy musieli już stworzyć trochę bardziej wyszukany kod, który pozwoli nam dodać obramowanie wokół źle wypełnionych elementów.

Szukałem możliwie najbardziej eleganckiej metody, niestety nie obyło się bez odwoływania do właściwości obiektów, które patrząc po nazwach powinny być prywatne, ale niestety nie doszukałem się w kodzie TinyMCE innej równie wygodnej metody.

Zacznijmy od tego, że musimy zdobyć uchwyt do pól formularza wyświetlanego w popupie – w tym celu musimy się odwołać do właściwości zwracającej ID wyświetlanego popupa:

var window_id = this._id;

Dzięki temu ID możemy pobrać pola formularza:

var inputs = jQuery('#' + window_id + '-body').find('.mce-formitem input');

Mając uchwyty do pól formularza możemy nadać im kolor obramowania:

if(e.data.width === '') {
    $(inputs.get(0)).css('border-color', 'red');
}

W powyższym wypadku nadamy czerwone obramowanie pierwszemu polu tekstowemu w formularzu.

Żeby wszystko zachowywało się sensownie musimy też sprawić by to obramowanie zniknęło w momencie kliknięcia pola. Zamieniamy zatem:

{
    type: 'textbox',
    name: 'height',
    label: 'Height'
},

na:

{
    type: 'textbox',
    name: 'height',
    label: 'Height',
    onclick: function(e) {
        jQuery(e.target).css('border-color', '');
    }
},

Niestety z moich obserwacji wynika, że onclick to chyba jedyne sensowne zdarzenie, które działa – zatem nie możemy się posłużyć tutaj bezpośrednio zdarzeniami onblur czy onfocus.

Finalnie nasz kod w onsubmit wyglądać może następująco:

onsubmit: function(e) {
    if(e.data.width === '' || e.data.height === '') {
        var window_id = this._id;
        var inputs = jQuery('#' + window_id + '-body').find('.mce-formitem input');

        editor.windowManager.alert('Proszę wypełnić wszystkie pola w popupie.');

        if(e.data.width === '') {
            $(inputs.get(0)).css('border-color', 'red');
        }

        if(e.data.height === '') {
            $(inputs.get(1)).css('border-color', 'red');
        }

        return false;
    }
    editor.insertContent('Lorem ipsum: ' + e.data.width + ' x ' + e.data.height + '.');
}

A co jeśli potrzebujemy więcej zdarzeń dla elementów formularza?

Nie ma co ukrywać, że domyślnie dostępne zdarzenia w TinyMCE nie pozwalają nam tworzyć zbyt rozbudowanych popupów z bardziej złożoną logiką. Na szczęście da się ten problem rozwiązać – jeżeli potrzebujemy dodać obsługę np. zdarzeń onblur czy onfocus do naszych pól możemy skorzystać z małego tricku.

Popup tworzony w TinyMCE wywołuje co najmniej dwa razy zdarzenie repaint – umiejętnie podpinając się pod to zdarzenie możemy uzupełnić braki funkcjonalne naszego popupu.

Przykładowa implementacja, dodająca obsługę zdarzeń onfocus i onblur do pierwszego pola w formularzu:

onrepaint: function(e) {
    var window_id = this._id;

    if(!jQuery('#' + window_id).hasClass('form-initialized')) {
        jQuery('#' + window_id).addClass('form-initialized');

        var inputs = jQuery('#' + window_id + '-body').find('.mce-formitem input');

        jQuery(inputs.get(0)).blur(function() {
            console.log('blur');
        });

        jQuery(inputs.get(0)).focus(function() {
            console.log('focus');
        });
    }
},

Chciałbym w tym miejscu uczulić na fakt wywoływania się zdarzenia repaint kilkukrotnie – dlatego stworzyłem w powyższym kodzie prosty mechanizm sprawdzania czy wywołał się on tylko raz – po pierwszym wywołaniu tej funkcji dodawana jest do popupu klasa form-initialized, która powoduje, że już więcej nasz kod nie zostanie wywołany. Dzięki temu unikniemy między innymi problemów z podwójnie dodanymi zdarzeniami.

Korzystając z powyższej metody możemy w zasadzie stworzyć dowolną logikę dla naszego formularza w popupie. Główną uciążliwością jest tutaj dostęp do pól formularza – różne typy pól mają różne klasy i musimy wszystko odpowiednio wyselekcjonować a potem poprawnie się w tym wszystkim poruszać.

Nie zmienia to faktu, że stworzenie walidacji zawartości popupu w TinyMCE jest możliwe, choć w wypadku bardziej skomplikowanych formularzy wymaga dość skomplikowanego kodu, ze wzgledu na pewne braki w API TinyMCE, które trzeba samodzielnie obejść.

Wykorzystanie menadżera mediów we własnych wtyczkach

Dzięki wykorzystaniu menadżera mediów we własnych wtyczkach możemy znacząco ułatwić życie użytkownikowi – nie musi on z pamięci wprowadzać adresów do wybranych grafik. W tym wpisie chciałbym pokazać jak łatwo dodać obsługę menadżera mediów do własnej wtyczki/motywu.

Uproszczony schemat działania jakie chcemy osiągnąć prezentuje się następująco:

  1. Dodajemy do określonych przycisków akcję otwierania menadżera mediów po ich kliknięciu
  2. Definiujemy właściwości okna menadżera mediów wykorzystywanego przez nasz skrypt
  3. Dodajemy obsługę operacji wyboru obrazka
  4. Dodajemy obsługę operacji zamknięcia menadżera

Jak widać sama idea nie wygląda zbyt skomplikowanie – na szczęście większość operacji wykonywania jest po stronie skryptów menadżera mediów – musimy obsłużyć tylko kluczowe operacje takie jak wybór zdjęcia i zakończenie korzystania z menadżera. Czytaj dalej Wykorzystanie menadżera mediów we własnych wtyczkach

TinyMCE – zarządzanie stanami przycisków

W poprzednich wpisach pokazałem jak dodawać własne przyciski do edytora TinyMCE oraz wstawić własny kod do edytora. Pora na zagadnienie bardziej złożone – dodawanie własnego formatowania i sprawienie by zachowywało się ono tak jak podstawowe przyciski formatowania dostępne w TinyMCE.
Czytaj dalej TinyMCE – zarządzanie stanami przycisków

TinyMCE – dodawanie przycisków w trybie fullscreen

WordPress od dłuższego czasu posiada pełnoekranowy tryb tworzenia wpisów, pozwalający skupić się na pisaniu (w niektórych edytorach taki tryb nazywa się „Zen mode” lub po prostu „Distraction Free”). Warto zatem nauczyć się dodawać własne przyciski do edytora w tym trybie – warto od razu podkreślić, że dodawanie przycisków do edytora w wersji pełnoekranowej rządzi się trochę innymi prawami niż w wypadku zwykłego edytora TinyMCE.

Czytaj dalej TinyMCE – dodawanie przycisków w trybie fullscreen

Kontrolka styleselect w TinyMCE

Kontrolka styleselect to domyślnie ukryty element edytora TinyMCE, który pozwala na wygodne formatowanie zaznaczonego tekstu. Domyślnie jest ona ukryta ze względu na fakt iż duplikuje funkcjonalność pozostałych przycisków, jednak po pewnych modyfikacjach można ją wykorzystać do własnych celów.

Czytaj dalej Kontrolka styleselect w TinyMCE

Dodawanie własnych przycisków w edytorze TinyMCE 4.*

WordPress 3.9 zawiera aktualizację edytora wpisów TinyMCE do wersji 4.*. Oznacza to spore zmiany w API edytora – dlatego postanowiłem opisać dodawanie własnych przycisków do edytora z użyciem nowego API.

Spis treści

Kod z poniższych przykładów można znaleźć też na Githubie.

  1. Deklarowanie nowego przycisku TinyMCE
  2. Przycisk z etykietą tekstową
  3. Przycisk ze standardową ikonką
  4. Przycisk z niestandardową ikonką pochodzącą z Dashicons
  5. Własna grafika jako ikonka przycisku
  6. Dodajemy przyciskowi submenu
  7. Dodajemy też sub-submenu 😉
  8. Dodajemy popup po kliknięciu
  9. Rozbudowywujemy popup

Czytaj dalej Dodawanie własnych przycisków w edytorze TinyMCE 4.*

Frazy językowe w skryptach JavaScript

WordPress oferuje wiele przydatnych mechanizmów, które znacząco ułatwiają życie developerów. Jednym z takich mechanizmów jest możliwość tworzenia fraz językowych, które da się przetłumaczyć poprzez pliki językowe w skryptach JavaScript.

JavaScript sam w sobie nie umożliwia łatwej podmiany pewnych fragmentów kodu na inne pochodzące z wyników działania po stronie serwera. Na szczęście znaleziono na ten problem łatwe rozwiązanie – wykorzystano następujacy wzorzec:

Frazy językowe zostają zgrupowane w tablicy asocjacyjnej, która jest dostępna w innych skryptach dając dostęp poprzez zapis tablica.nazwa_frazy. Tablica asocjacyjna generowana jest przez skrypt PHP i umieszczana w znaczniku script w sekcji head dokumentu przed wywołaniem skryptu którego dotyczy. Czytaj dalej Frazy językowe w skryptach JavaScript