вторник, 8 июля 2014 г.

Определение Edit Mode страницы с помощью JavaScript

В SharePoint 2013 есть такая штука как Publishing Pages. С точки зрения рядового пользователя, это веб-страницы, которые он может создавать прямо в браузере, в стиле WYSIWYG. Достаточно создать новую страницу публикации (Publishing Page), затем открыть её в режиме редактирования и можно сразу набивать контент, при этом особо не запариваясь относительно стилей и получаемой разметки. Вещь удобная и пользуются ей, как говорится, направо и налево.

Впрочем увлёкшись WISIWIG вы всё ещё можете остановиться и взглянуть на полученную HTML-разметку. И даже отредактировать её, дабы наполнить не передаваемым шармом в духе HTML5. Для чего на панели инструментов предусмотрена кнопка "Изменить источник".



А что если мы решим зайти дальше в нашем стремлении сделать контент страницы более интерактивным и насыщенным, и добавим на страницу публикации веб-часть "Редактор сценариев". А в этот редактор сценариев поместим JavaScript, который, используя jQuery и добавленную нами на страницу HTML-разметку, создаёт интерактивный и кувыркающийся Коллаж из фотографий и лозунгов, рождённый воспалённой фантазией вашего дизайнера и PR-менеджера, слившихся в творческом экстазе.

Скажу сразу, что после сохранения страницы с результатами редактирования, Коллаж не просто заработает, но будет прекрасен. Он поразит всех, начиная от бухгалтерши и заканчивая генеральным и исполнительным директорами. А финансовый директор сразу выпишет вам премию.

Вот только когда вас попросят добавить в коллаж новый лозунг, и вы вновь откроете страницу в режиме редактирования, то увидите что вся ваша HTML-разметка "пляшет" и "кувыркается" по воле JavaScript'a из веб-части "Редактор сценариев". А стоит вам сохранить страницу, как вся эта чехорда "впечатается" в контент страницы на мертво и JavaScript уже будет не в состоянии её оживить.

Дело в том, что когда вы открыли страницу на редактирования, то JavaScript в веб-части
"Редактор сценариев" начнёт выполняться, как ни в чём не бывало. При этом он будет, искать в содержимом страницы определённую HTML-структур (например, див внутри которого находится список, каждый элемент которого является сложным описанием одной из страниц слайда). Найдя её, он оживит её самым чудесным образом, динамически внося изменения в этот кусок HTML кода. Однако SharePoint понятия не имеет кто вносит изменения в разметку, Вы или ваш JavaScript. По этому когда вы сохраните страницу, он с чистой совестью сохранит всю необходимую HTML разметку, включая исковерканную вашим же JavaScript'ом. После чего она будет разительно отличаться от той, что нужна JavaScript'у для оживления коллажа.

Выход есть! Необходимо, чтобы перед тем как пытаться оживлять коллаж, JavaScript проверил в каком режиме находится страница публикации. И если страницы открыта в режиме редактирования контента, то JavaScript прекращает работу ни как не влияя на разметку.

<script type="text/javascript">
        (function ($) {

            $(document).ready(function () {
                // Проверям режим страницы
                var InEditMode = false;
                try{
                InEditMode = SP.Ribbon.PageState.Handlers.isInEditMode();
                } catch(e){}
               
                if (InEditMode) {return;}
                // Каруселить список клиентов
                // btnNext и btnPrev - указывают на кнопки вперёд/назад
                // visible - скорлько элементов карусели будет показано единовременно
                // circular - зациклить карусель по кругу
                $(".clients-list").jCarouselLite({
                    btnNext: "#gon",
                    btnPrev: "#pon",
                    visible: 5,
                    circular: true
                });

            });

        })(jQuery);

    </script>

четверг, 3 июля 2014 г.

Многострочные строки в JavaScript или аналог @ в C#.

В языке C# есть так называемые буквальные строковые литералы.

Пример буквальных строковых литералов:
// Буквальные строковые литералы воспринимают всё написанное буквально, кроме кавычек. Что бы задать кавычки необходимо воспользоваться специальной управляющей последовательностью - двойные кавычки, т.е. вот так: ""
string s = @"C:\Windows";

s = @"Роман ""Война и мир"""// Роман "Война и Мир"

Кроме того, буквальный строковый литерал позволяет отказаться от использования управляющей последовательности \n новая строка.
Т.е. вместо того чтобы писать так:

string s = "Переход на новую строку.. \n.. новая строка";

Можно записать так:

string s  = @"Переход на новую строку..
.. новая строка";

А результат будет одним и тем же.

В JavaScript нет своего буквального строкового литерала, но есть возможность задавать многозначные строки, хотя это и считается недостатком текущей реализации интерпритатора, а не возможностью языка JavaScript:

var multiLine = '\
Первая строка \
Вторая строка \
Третья строка \
';
alert(multiLine);