Кілька корисних функцій для розробника під Squarespace

    
Як я писав було раніше , Squarespace багато чого пропонує нам з «коробки», даючи можливість швидко «розвернутися» і створити блог, галерею, магазин (правда тільки використовуючи Stripe ). Також Ви цілком можете швидко створити мобільний додаток, оскільки до кожної сторінки (блогу, галереї, якийсь кастомной колекції) можна звернеться і отримати відповідь в JSON-e. Цим можна користуватися і при побудові більш серйозних додатків з динамічною підвантаженням контенту. Але безліч функцій в Squarespace (завантаження і ресайз зображень, ініціалізація і робота вбудованих блоків розмітки, галерей, форм, віджетів соц. Мереж і т.д.) працюють на клієнті, взаємодіючи з серверної частиною, а оскільки девелоперська частина все ще в беті, то немає ні документації до їх API, ні опису роботи вбудованих функцій — доводиться доходити самому, копаючись в їх коді.
 
Отже, якщо Ви на сторінках робите AJAX-запити і отримуєте потрібний контент, але нічого з кастомних блоків не працює, а зображення не вантажаться — прошу під хабракат.
 
 
Весь фронтенд Squarespace крутиться на YUI , бібліотека добре документована, але Squarespace використовує безліч своїх модулів, тому навіть для тих хто пише з YUI , доведеться витратити час, щоб зрозуміти що до чого. Ну а я вже своє витратив в одному проекті і охоче поділюся тут, може комусь це допоможе, та й сам не забуду (бложіках все не заведу ніяк).
 
Всі вбудовані блоки Squarespace з яких Ви або клієнт будує сторінку, инициализируются після завантаження сторінки. Тобто якщо запитати будь-яку сторінку AJAX-запитом з адресою виду "/ yoursite / mainpage? Format = json", то у відповіді в data.mainContent отримаємо html-вміст сторінки. При додаванні цього вмісту у DOM кастомниє блоки не зароблять, та й зображення не завантажаться.
 
 

1. Вантажимо зображення

Відразу і в лоб вирішується проблема із завантаженням зображень, оскільки в документації про це йдеться — потрібно просто після завантаження контенту «прогнати» їх завантажувач через всі зображення з атрибутом data-image:
 
 
new Y.Squarespace.Loader({
    img: Y.all('img[data-image]')
});

 
Далі без зайвих коментарів привожу функції, які допоможуть ініціалізувати деякі кастомниє блоки. Ці функції вже довелося виловлювати з коду, так як нічого про них ні в документації, ні на answers.squarespace.com , ні на stackoverflow.com .
 
 

2.Ініціалізіруем форми

Отже, якщо на сторінці використовуються форми з лайтбокси (відкриваються по кліку на кнопці), то щоб усе працювало після AJAX-а, викличте таку функцію:
 
 
function initFormLightBox() {
        Y.all('.form-block').each(function () {
            var h = this;
            if (h.one(".form-wrapper")) {
                var b = h.one(".form-wrapper").remove().removeClass("hidden");
                h = h.one(".lightbox-handle");
                if (!h.getData("lightbox")) {
                    var g = b.cloneNode(!0),
                            d = new Y.Squarespace.Widgets.FormLightbox({
                                content: g,
                                render: Y.one("body")
                            });
                    Y.Squarespace.FormRenderingUtils.checkPreSubmit(g);
                    d.on("close", function () {
                        var c = b.cloneNode(!0);
                        d.set("content",
                                c);
                        Y.Squarespace.FormRenderingUtils.checkPreSubmit©
                    }, this);
                    h.setData("lightbox", d)
                }
                h.detach("click");
                h.on("click", function (a) {
                    a.halt();
                    d.open()
                }, this)
            }
        });
    }
});

 
 

3. Зображення в лайтбоксах

Для ініціалізації зображень, які розкриваються в лайтбоксах, використовуємо таке:
 
 
function initImageLightBox() {
        Y.all('.image-block-wrapper.lightbox').each(function () {
            var e = this;
            if (b = e.one("img[data-image]"))
                if (b = b.loader) {
                    e.get("parentNode");
                    b = {
                        content: b.getBareElement()
                    };
                    if (c = e.getAttribute("data-description")) b.meta = c;
                    e.plug(Y.Squarespace.Lightbox2Plug, {
                        lightboxOptions: b
                    })
                }
        });
    }

 
 

4. Галереї, відео

Для ініціалізації галерей, блоків Instagram, Flickr, 500px і блоків з відео:
 
 
function initGallery() {
        Y.all(".sqs-block.gallery-block, .sqs-block.flickr-block, .sqs-block.instagram-block, .sqs-block.fivehundredpix-block, .sqs-block.video-block").each(function (b) {
             Y.Squarespace.GalleryManager.initializeBlock(b)
        })
    }

 
 

5. Карти

Для сторінок з картами використовуємо таку функцію:
 
 
function initMap() {
        Y.all(".sqs-block.map-block[data-block-json]").each(function (b) {
            Y.Squarespace.Rendering.renderMap(b.one(".sqs-block-content"), Y.JSON.parse(b.getAttribute("data-block-json")))
        });
    }

 
Чомусь в Squarespace вирішили, що grayscale-фільтр в картах Google — це стильно, і «встромили» це в конструктор без параметрів, так що або вставляти картки через блок Code, або переписати стандартну renderMap () без створення фільтра або з використанням власного.
 
 

6. Інтернаціоналізація та форматування дат на сайті

Цей пункт не сильно відноситься до тематики попередніх, але все ж річ потрібна, оскільки Squarespace російської не підтримує. Можна Кончно використовувати Moment.js або подібні бібліотеки для переформатування і локалізації, але навіщо тягнути зайве або писати велосипед, якщо YUI сам по собі відмінно підтримує локалізацію? Тому в основному використовую таке просте рішення, де вказуємо потрібні для переформатування класи елементів:
 
 
function formatTime() {
        Y.Intl.add("datatype-date-format", "ru-RU", {
            "a": ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
            "A": ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"],
            "b": ["янв.", "февр.", "марта", "апр.", "мая", "июня", "июля", "авг.", "сент.", "окт.", "нояб.", "дек."],
            "B": ["января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря"],
            "c": "%a, %d %b %Y %k:%M:%S %Z",
            "p": ["AM", "PM"],
            "P": ["am", "pm"],
            "x": "%d.%m.%y",
            "X": "%k:%M:%S"
        });

        Y.Intl.setLang("datatype-date-format", "ru-RU");

        Y.all('time.published').each(function () {
                    var time = new Date(this.getAttribute('datetime'));
                    var format = Y.Date.format(time, {format: "%d %b, %Y"});
                    this.setHTML(format);
                }
        );

        Y.all('time.summary-metadata-item--date').each(function () {
                    var time = new Date(this.getAttribute('datetime'));
                    var format = Y.Date.format(time, {format: "%d %b, %Y"});
                    this.setHTML(format);
                }
        );
    }

 
 

P.S.

Якщо у когось накопичилися подібні рішення по Squarespace-платформі, пропоную ділиться в личку або в коментарях, я б дооформити це в статтю.
    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.