Главная » Функционал » PHP и API » Интеграция «Типографа» в редактор материалов. Часть 2

Интеграция «Типографа» в редактор материалов. Часть 2

03.02.2012 в 01:02
Автор: Heritor

Это вторая часть руководства по интеграции «Типографа» в редактор материалов. Здесь продолжается описание "клиентской" стороны вопроса, которое было начато в первой части.

Следующий листинг будет описывать мелкие функции, которые проверяют или задают состояние кнопки, а в листинге №8 будет представлено описание функции, которая и делает основную работу - считывает выделенный текст, отправляет запрос PHP-скрипту из листинга №1 и вставляет результат работы вместо выделенного текста.

Листинг №7. Поведение кнопки
  1. function TypoState (typoBusy, typoHover) {
  2.     this.isBusy = typoBusy;
  3.     this.isHover = typoHover;
  4. }
  5.  
  6. function typoSetState (oEditClassName, stateType, stateValue) {
  7.     switch (oEditClassName) {
  8.         case 'oEditbrief': myoEditor = oEditbrief; break;
  9.         case 'oEditmessage': myoEditor = oEditmessage; break;
  10.     }
  11.    
  12.     switch (stateType) {
  13.         case 'busy': myoEditor.typoButtonState.isBusy = stateValue; break;
  14.         case 'hover': myoEditor.typoButtonState.isHover = stateValue; break;
  15.     }
  16. }
  17.  
  18. function typoGetState (oEditClassName, stateType) {
  19.     switch (oEditClassName) {
  20.         case 'oEditbrief': myoEditor = oEditbrief; break;
  21.         case 'oEditmessage': myoEditor = oEditmessage; break;
  22.     }
  23.    
  24.     switch (stateType) {
  25.         case 'busy': return myoEditor.typoButtonState.isBusy;
  26.         case 'hover': return myoEditor.typoButtonState.isHover;
  27.     }
  28. }
  29.  
  30. function buttonRealtime (oEditClassName, topPosition) {
  31.     $('#btnTypograf' + oEditClassName + ' img').css('top', topPosition + 'px');
  32. }
  33.  
  34. function typoMouse (oEditClassName, mouseDoingType) {
  35.     switch (mouseDoingType) {
  36.         case 'onmouseup':
  37.             buttonRealtime(oEditClassName,-75);
  38.             doTypograf (oEditClassName);
  39.             break;
  40.         case 'onmousedown':
  41.             buttonRealtime(oEditClassName,-50);
  42.             break;
  43.         case 'onmouseout':
  44.             if (typoGetState(oEditClassName, 'busy') != 1) buttonRealtime(oEditClassName,0);
  45.             typoSetState(oEditClassName, 'hover', 0);
  46.             break;
  47.         case 'onmouseover':
  48.             if (typoGetState(oEditClassName, 'busy') != 1) buttonRealtime(oEditClassName,-75);
  49.             typoSetState(oEditClassName, 'hover', 1);
  50.             break;
  51.     }
  52. }

Функция TypoState создаёт два свойства для той переменной, которой будет присваиваться. Вообще, это понадобилось для того, чтобы кнопка могла корректно отображать процесс работы. Например, если в данный момент выполняется запрос к PHP-скрипту, она не будет менять свой внешний вид, даже если пару десятков раз провести над ней курсором мыши. А если к моменту завершения запроса над кнопкой будет находиться мышь, то внешний вид кнопки сменится не на обычный вид а на ситуацию, когда на кнопку наведён курсор.

Функции typoSetState и typoGetState отвечают за то, чтобы изменить или просто сообщить информацию о значениях свойств, заданных функцией TypoState, а функция buttonRealtime отвечает за то, чтобы сменить внешний вид кнопки согласно заданному параметру.

typoMouse — своеобразный обработчик событий. Весь её смысл состоит в том, чтобы в определённой ситуации вызвать ту или иную функцию и задать свойство-индикатор, сигнализирующий о том, что курсор мыши находится над кнопкой. Можно было бы здесь же задавать свойство-индикатор, связанное с информацией о том, что производится типографика выделенного текста, но из-за асинхронности выполнения в JavaScript этот индикатор сработает некорректно.

Почти во всех из этих функций в качестве одного из параметров выступает переменная oEditClassName. Она требуется для привязки к конкретному экземпляру редактора. Без этого может получиться так, что курсор будет наводиться на кнопку в редакторе краткого описания, а меняться будет внешний вид кнопки в редакторе полного текста материала.

Вообще, на самом деле, вполне можно обойтись без всех функций, представленных в листинге №7. Они предназначены только для того, чтобы обеспечить обратную связь. На главное событие «onMouseUp» можно было бы просто повесить вызов функции doTypograf из листинга № 8 и не загоняться такими мелочами.

Именно так я бы и поступил лет 12 назад, когда у меня только просыпался интерес к программированию и я, временами, засыпал с каким-нибудь томом «Искусства программирования» Д.Кнута под подушкой. Однако, со временем, начинаешь понимать, что хорошая программа — это не только механизм, но и дизайн. Она должна не только работать правильно. Она должна нравиться — хотя бы самому себе. Именно поэтому, когда я только начал разрабатывать эту кнопку, она сначала научилась давать обратную связь и только потом начала типографить текст.

Листинг №8. Механика
  1. function doTypograf (oEditClassName) {
  2.     buttonRealtime(oEditClassName, -100);
  3.     typoSetState(oEditClassName, 'busy', 1);
  4.     var oEditorContent=document.getElementById("idContent"+oEditClassName).contentWindow;
  5.     var htmlContent, range, myoEditor, isGranny = 0;
  6.  
  7.     switch (oEditClassName) {
  8.         case 'oEditbrief':
  9.             myoEditor = oEditbrief;
  10.             break;
  11.         case 'oEditmessage':
  12.             myoEditor = oEditmessage;
  13.             break;
  14.     }
  15.    
  16.     if (oEditorContent.document.selection) {
  17.         range = oEditorContent.document.selection.createRange()
  18.         isGranny = 1;
  19.     }
  20.     else if (oEditorContent.getSelection()) {
  21.         range = oEditorContent.getSelection().getRangeAt(0);
  22.     }
  23.    
  24.     if (range.htmlText) {
  25.         htmlContent = range.htmlText;
  26.     }
  27.     else {
  28.         var temporarySpan = document.createElement('SPAN');
  29.         var temporarySelection = range.cloneContents();
  30.         temporarySpan.appendChild(temporarySelection);
  31.         htmlContent = temporarySpan.innerHTML;
  32.     }
  33.  
  34.     $.post(
  35.         "/php/typograf/typograf.php",
  36.         { text: escape(htmlContent) },
  37.         function(data){
  38.             myoEditor.saveForUndo();
  39.             if (isGranny == 1) {
  40.                 range.pasteHTML(data.SCRIPTDATA);
  41.             }
  42.             else {
  43.                 range.deleteContents();
  44.                 var node, child;
  45.                
  46.                 if (range.createContextualFragment) {
  47.                     node = range.createContextualFragment(data.SCRIPTDATA);
  48.                 } else {
  49.                     node = document.createDocumentFragment();
  50.                     temporarySpan.innerHTML = data.SCRIPTDATA;
  51.                     while ( (child = temporarySpan.firstChild) ) {
  52.                         node.appendChild(child);
  53.                     }
  54.                 }
  55.                 range.insertNode(node);
  56.             }
  57.            
  58.             if (typoGetState(oEditClassName, 'hover') == 1) buttonRealtime(oEditClassName, -75);
  59.             else buttonRealtime(oEditClassName, 0);
  60.             typoSetState(oEditClassName, 'busy', 0);
  61.         },
  62.         "json"
  63.     );
  64. }

При выполнении работы данная функция задаёт свойство «занят работой» для экземпляра класса редактора, а «освобождение» кнопки происходит только тогда, когда получен результат POST-запроса. «Освобождение» указано в кавычках из-за того, что кнопка и не блокируется, а просто не меняет внешнего вида (но позволяет по ней кликать и отправляет после каждого клика запросы). Для того, чтобы её по-настоящему заблокировать, можно немного поиграть с кодом в функции typoMouse() из листинга № 7 — что-то вроде «домашнего задания».

В строках 16-32 происходит кросс-браузерное получение HTML-содержимого выделения, а в строках 38-60 (которые выполняются только в случае получения результатов из POST-запроса) выделенный текст заменяется на текст, полученный от веб-сервиса «Типографа». При этом история изменений записывается в историю редактора, и старый текст можно вернуть, нажав соответствующую кнопку.

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

Стой-подожди! А в каких браузерах это будет работать?

Я проверял работоспособность кнопки в следующих браузерах:

  • Mozilla Firefox 9 (и 10)
  • Safari 5.1.2 для Windows
  • Internet Explorer 9
  • Safari для iPad (iOS версии 5.0.1)

Заключение

«Типографика — графическое оформление печатного текста посредством набора и вёрстки с использованием норм и правил, специфических для данного языка», — поясняет Википедия. Огромное число русских сайтов в Интернете не обращают внимания на оформление текста, либо предпочитают не заниматься этим — из-за сложностей, связанных с набором правильных кавычек, тире (а не дефиса), специальных символов и прочего, что делает текст правильным с позиции русского языка.

Действительно, если приходится набирать много текста, и делать это быстро, не остаётся времени на то, чтобы обращать внимание на такие мелочи. Тем более, на клавиатуре с русской раскладкой большинства таких символов нет и в помине. Кто-то бы и рад оформлять текст правильно, но дополнительные заморочки удерживают от этого.

Однако, теперь у пользователей Ucoz может появиться возможность преодолеть данное ограничение. Более того, введённый «по-быстрому» текст может одним кликом мыши превратиться в текст, оформленный в соответствие с правилами типографики. Данное руководство описывает то, каким образом эту кнопку можно создать и внедрить в код шаблона. Для тех же, кто не очень хорошо разбирается в технологиях PHP и JavaScript, к тексту прикреплён архив с готовым кодом и небольшой инструкцией по его внедрению на свой сайт.

Содержимое архива:

  • readme.txt — инструкция по внедрению;
  • typograf.php — серверная часть, написанная на языке PHP;
  • code.txt — код для внедрения в шаблон
  • btnTypograf.gif — картинка, отвечающая за внешний вид кнопки

материалы, Типограф

Прикреплённый файл: 295_typograf.zip (5.8 Kb)
Рейтинг: 10  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 7623          Комментариев:

Похожие инструкции