Как я писал было ранее, 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-платформе, предлагаю делится в личку или в комментариях, я бы дооформил это в статью.
ссылка на оригинал статьи http://habrahabr.ru/post/226293/
Добавить комментарий