Димон
/.s/a/38/496767602.png
Статус:
Online
Регистрация:
07.10.2012
Сообщения:
754
|
Это вторая часть руководства по интеграции «Типографа» в редактор материалов. Здесь продолжается описание "клиентской" стороны вопроса, которое было начато в первой части.
Следующий листинг будет описывать мелкие функции, которые проверяют или задают состояние кнопки, а в листинге №8 будет представлено описание функции, которая и делает основную работу - считывает выделенный текст, отправляет запрос PHP-скрипту из листинга №1 и вставляет результат работы вместо выделенного текста. Листинг №7. Поведение кнопки - function TypoState (typoBusy, typoHover) {
- this.isBusy = typoBusy;
- this.isHover = typoHover;
- }
-
- function typoSetState (oEditClassName, stateType, stateValue) {
- switch (oEditClassName) {
- case 'oEditbrief': myoEditor = oEditbrief; break;
- case 'oEditmessage': myoEditor = oEditmessage; break;
- }
-
- switch (stateType) {
- case 'busy': myoEditor.typoButtonState.isBusy = stateValue; break;
- case 'hover': myoEditor.typoButtonState.isHover = stateValue; break;
- }
- }
-
- function typoGetState (oEditClassName, stateType) {
- switch (oEditClassName) {
- case 'oEditbrief': myoEditor = oEditbrief; break;
- case 'oEditmessage': myoEditor = oEditmessage; break;
- }
-
- switch (stateType) {
- case 'busy': return myoEditor.typoButtonState.isBusy;
- case 'hover': return myoEditor.typoButtonState.isHover;
- }
- }
-
- function buttonRealtime (oEditClassName, topPosition) {
- $('#btnTypograf' + oEditClassName + ' img').css('top', topPosition + 'px');
- }
-
- function typoMouse (oEditClassName, mouseDoingType) {
- switch (mouseDoingType) {
- case 'onmouseup':
- buttonRealtime(oEditClassName,-75);
- doTypograf (oEditClassName);
- break;
- case 'onmousedown':
- buttonRealtime(oEditClassName,-50);
- break;
- case 'onmouseout':
- if (typoGetState(oEditClassName, 'busy') != 1) buttonRealtime(oEditClassName,0);
- typoSetState(oEditClassName, 'hover', 0);
- break;
- case 'onmouseover':
- if (typoGetState(oEditClassName, 'busy') != 1) buttonRealtime(oEditClassName,-75);
- typoSetState(oEditClassName, 'hover', 1);
- break;
- }
- }
Функция TypoState создаёт два свойства для той переменной, которой будет присваиваться. Вообще, это понадобилось для того, чтобы кнопка могла корректно отображать процесс работы. Например, если в данный момент выполняется запрос к PHP-скрипту, она не будет менять свой внешний вид, даже если пару десятков раз провести над ней курсором мыши. А если к моменту завершения запроса над кнопкой будет находиться мышь, то внешний вид кнопки сменится не на обычный вид а на ситуацию, когда на кнопку наведён курсор.
Функции typoSetState и typoGetState отвечают за то, чтобы изменить или просто сообщить информацию о значениях свойств, заданных функцией TypoState, а функция buttonRealtime отвечает за то, чтобы сменить внешний вид кнопки согласно заданному параметру.
typoMouse — своеобразный обработчик событий. Весь её смысл состоит в том, чтобы в определённой ситуации вызвать ту или иную функцию и задать свойство-индикатор, сигнализирующий о том, что курсор мыши находится над кнопкой. Можно было бы здесь же задавать свойство-индикатор, связанное с информацией о том, что производится типографика выделенного текста, но из-за асинхронности выполнения в JavaScript этот индикатор сработает некорректно.
Почти во всех из этих функций в качестве одного из параметров выступает переменная oEditClassName. Она требуется для привязки к конкретному экземпляру редактора. Без этого может получиться так, что курсор будет наводиться на кнопку в редакторе краткого описания, а меняться будет внешний вид кнопки в редакторе полного текста материала.
Вообще, на самом деле, вполне можно обойтись без всех функций, представленных в листинге №7. Они предназначены только для того, чтобы обеспечить обратную связь. На главное событие «onMouseUp» можно было бы просто повесить вызов функции doTypograf из листинга № 8 и не загоняться такими мелочами.
Именно так я бы и поступил лет 12 назад, когда у меня только просыпался интерес к программированию и я, временами, засыпал с каким-нибудь томом «Искусства программирования» Д.Кнута под подушкой. Однако, со временем, начинаешь понимать, что хорошая программа — это не только механизм, но и дизайн. Она должна не только работать правильно. Она должна нравиться — хотя бы самому себе. Именно поэтому, когда я только начал разрабатывать эту кнопку, она сначала научилась давать обратную связь и только потом начала типографить текст. Листинг №8. Механика - function doTypograf (oEditClassName) {
- buttonRealtime(oEditClassName, -100);
- typoSetState(oEditClassName, 'busy', 1);
- var oEditorContent=document.getElementById("idContent"+oEditClassName).contentWindow;
- var htmlContent, range, myoEditor, isGranny = 0;
-
- switch (oEditClassName) {
- case 'oEditbrief':
- myoEditor = oEditbrief;
- break;
- case 'oEditmessage':
- myoEditor = oEditmessage;
- break;
- }
-
- if (oEditorContent.document.selection) {
- range = oEditorContent.document.selection.createRange()
- isGranny = 1;
- }
- else if (oEditorContent.getSelection()) {
- range = oEditorContent.getSelection().getRangeAt(0);
- }
-
- if (range.htmlText) {
- htmlContent = range.htmlText;
- }
- else {
- var temporarySpan = document.createElement('SPAN');
- var temporarySelection = range.cloneContents();
- temporarySpan.appendChild(temporarySelection);
- htmlContent = temporarySpan.innerHTML;
- }
-
- $.post(
- "/php/typograf/typograf.php",
- { text: escape(htmlContent) },
- function(data){
- myoEditor.saveForUndo();
- if (isGranny == 1) {
- range.pasteHTML(data.SCRIPTDATA);
- }
- else {
- range.deleteContents();
- var node, child;
-
- if (range.createContextualFragment) {
- node = range.createContextualFragment(data.SCRIPTDATA);
- } else {
- node = document.createDocumentFragment();
- temporarySpan.innerHTML = data.SCRIPTDATA;
- while ( (child = temporarySpan.firstChild) ) {
- node.appendChild(child);
- }
- }
- range.insertNode(node);
- }
-
- if (typoGetState(oEditClassName, 'hover') == 1) buttonRealtime(oEditClassName, -75);
- else buttonRealtime(oEditClassName, 0);
- typoSetState(oEditClassName, 'busy', 0);
- },
- "json"
- );
- }
При выполнении работы данная функция задаёт свойство «занят работой» для экземпляра класса редактора, а «освобождение» кнопки происходит только тогда, когда получен результат 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 — картинка, отвечающая за внешний вид кнопки
|
|