Несколько полезных функций для разработчика под Squarespace

в 17:35, , рубрики: cms, javascript, squarespace.com, Веб-разработка, метки: , ,

Несколько полезных функций для разработчика под 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(c)
                    }, 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-платформе, предлагаю делится в личку или в комментариях, я бы дооформил это в статью.

Автор: michaelmashay

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js