Как я писал было ранее, 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
