Форум dkLab и Denwer
Здесь общаются Web-разработчики.
Генеральный спонсор:
Хостинг «Джино»

JavaScript-отладчик шаблонов. (Дмитрий Котеров)
Author Message
Дмитрий Котеров
Администратор



Joined: 10 Mar 2003
Posts: 13665
Карма: 413
   поощрить/наказать


PostPosted: Thu Mar 24, 2005 7:20 pm (написано за 3 минуты 11 секунд)
   Post subject: JavaScript-отладчик шаблонов.
Reply with quote

Вспомнилась вот тут одна идея, изначально принадлежавшая Игорю Светликову.

Когда скриптуется какой-то шаблон, очень часто приходися искать, какая часть HTML-кода в каком файле шаблона выводится. Это довольно утомительно. В то же время, можно данный процесс автоматизировать — при наводе мышки автоматом показывать, в каком шаблоне был выведен блок под курсором.

Прототип этого дела реализован прямо тут, на форуме. Например: forum.dklab.ru/?sourcemapper
(нажмите Shift и поезольте мышью, одновременно наблюдая за статус-строкой; выводятся положения начала и конца элемента).

Вообще, можно к любой странице добавить ?sourcemapper, и тогда возникает возможность просмотра, какой кусок где сгенерирован.
Back to top
View user's profile Send private message Send e-mail
Дмитрий Котеров
Администратор



Joined: 10 Mar 2003
Posts: 13665
Карма: 413
   поощрить/наказать


PostPosted: Thu Mar 24, 2005 7:22 pm (спустя 2 минуты; написано за 57 секунд)
   Post subject:
Reply with quote

Да, чтобы сразу же отмести глупые вопросы, которые уже зреют в кое-чьих головах :-) — эта штука включается только при добавлении ?sourcemapper, без нее форум работает по старой схеме, никаких накладных расходов.
Back to top
View user's profile Send private message Send e-mail
Константин Жинько [tIT]
Сотрудник «Лаборатории»



Joined: 12 Jun 2004
Posts: 2264
Карма: 106
   поощрить/наказать

Location: Москва

PostPosted: Thu Mar 24, 2005 8:29 pm (спустя 1 час 6 минут; написано за 49 секунд)
   Post subject:
Reply with quote

эээ.
Клево, только все елозит из-за красной рамки..
Back to top
View user's profile Send private message
Юрий Насретдинов
Модератор



Joined: 13 Mar 2003
Posts: 8642
Карма: 198
   поощрить/наказать

Location: 007 495

PostPosted: Thu Mar 24, 2005 8:37 pm (спустя 8 минут; написано за 48 секунд)
   Post subject:
Reply with quote

Да, прикольная штука... Правда в Firefox есть что-то похожее - просмотр исходного кода выделенного фрагмента - тоже очень удобная штука
Back to top
View user's profile Send private message Send e-mail
Дмитрий Котеров
Администратор



Joined: 10 Mar 2003
Posts: 13665
Карма: 413
   поощрить/наказать


PostPosted: Thu Mar 24, 2005 9:23 pm (спустя 46 минут; написано за 1 минуту 53 секунды)
   Post subject:
Reply with quote

Просмотр исходного кода — это совсем-совсем не то. Хотя, конечно, тоже может быть полезно.
С рамкой непонятно, что делать. Если в IE еще можно попробовать помудрить с фильтрами (скажем, есть там фильтр "очернобеливания" или "затемнения"), то в FF с этим все плохо.

Потом еще планирую к этому делу прикрутить ActiveX, который будет по Shift+DoubleClick открывать текстовый редактор на нужном файле и по Ctrl+G устанавливать курсор на требуемую строку и столбец. Конечно, это IE-only, но в отладке должно просто сказочно помогать...
Back to top
View user's profile Send private message Send e-mail
Rumata
Профессионал



Joined: 17 Aug 2003
Posts: 1850
Карма: 185
   поощрить/наказать


PostPosted: Thu Mar 24, 2005 9:29 pm (спустя 6 минут; написано за 3 минуты 5 секунд)
   Post subject:
Reply with quote

<!--3359767692:2:86,99--><!--3359767692:2:86,108-->
эта строчка автоматом всталяется с включенным режимом
Дмитрий Котеров wrote:
FF с этим все плохо
в статусной строке ничего не видно. пока ИЕ не открыл вначале ничего не понял
Дмитрий Котеров wrote:
помудрить с фильтрами
а если помудрить с DIV-ами?
над кем мышка, у того спросить размер и нарисовать непрозрачный дивный блок с данными (чтобы в статусную строку не пихать - все равно не видно)
Back to top
View user's profile Send private message
Константин Жинько [tIT]
Сотрудник «Лаборатории»



Joined: 12 Jun 2004
Posts: 2264
Карма: 106
   поощрить/наказать

Location: Москва

PostPosted: Thu Mar 24, 2005 9:32 pm (спустя 2 минуты; написано за 13 секунд)
   Post subject:
Reply with quote

На мозилле работает
Back to top
View user's profile Send private message
Дмитрий Котеров
Администратор



Joined: 10 Mar 2003
Posts: 13665
Карма: 413
   поощрить/наказать


PostPosted: Thu Mar 24, 2005 9:35 pm (спустя 3 минуты; написано за 3 секунды)
   Post subject:
Reply with quote

Rumata wrote:
<!--3359767692:2:86,99--><!--3359767692:2:86,108-->
эта строчка автоматом всталяется с включенным режимом
Куда?
Rumata wrote:
в статусной строке ничего не видно
Тогда почему у меня все видно?
Rumata wrote:
а если помудрить с DIV-ами?
над кем мышка, у того спросить размер и нарисовать непрозрачный дивный блок
Забываешь про inline-элементы (span-ы, например). Их тоже надо обязательно выделять. И у них-то координаты получить нельзя вообще (за исключением IE) — с этим баг и в Опере, и в FF.
Back to top
View user's profile Send private message Send e-mail
Юрий Насретдинов
Модератор



Joined: 13 Mar 2003
Posts: 8642
Карма: 198
   поощрить/наказать

Location: 007 495

PostPosted: Thu Mar 24, 2005 9:37 pm (спустя 2 минуты; написано за 28 секунд)
   Post subject:
Reply with quote

Дмитрий Котеров
А если, скажем, фон менять (допустим на кислотно-желтый), и на всякий случай еще и цвет текста на черный?
Back to top
View user's profile Send private message Send e-mail
Rumata
Профессионал



Joined: 17 Aug 2003
Posts: 1850
Карма: 185
   поощрить/наказать


PostPosted: Thu Mar 24, 2005 9:50 pm (спустя 12 минут; написано за 2 минуты 31 секунду)
   Post subject:
Reply with quote

<!--1848872117:2:86,99--><!--1848872117:2:86,108--> в textarea вставляется. попробуй эту страницу в режиме с sourcemapper

действительно про спаны забыл. ну для них можно было бы какой-нибудь стандартный для всех прямоугольник
yUAC wrote:
ислотно-желтый
бррр
Дмитрий Котеров wrote:
у меня все видно
кроме ссылок
Back to top
View user's profile Send private message
Дмитрий Котеров
Администратор



Joined: 10 Mar 2003
Posts: 13665
Карма: 413
   поощрить/наказать


PostPosted: Thu Mar 24, 2005 10:13 pm (спустя 23 минуты; написано за 2 минуты 48 секунд)
   Post subject:
Reply with quote

Rumata wrote:
в textarea вставляется
ОК, исправил. Я только не понимаю, неужели так сложно было сразу сказать, что речь идет о textarea. Хоть я и увлекаюсь психологией, но с телепатией пока еще плоховато получается... :-)
Rumata wrote:
кроме ссылок
Естественно. Потому что это прототип. В основной версии, которую я, бог даст, допишу, это все будет либо в виде title, либо отдельным слоем.
yUAC wrote:
А если, скажем, фон менять
У картинок, например, фона нет. Как быть с ними?
В принципе, можно, конечно, их отдельно обрабатывать, заменяя на пустую картинку...
Back to top
View user's profile Send private message Send e-mail
Rumata
Профессионал



Joined: 17 Aug 2003
Posts: 1850
Карма: 185
   поощрить/наказать


PostPosted: Thu Mar 24, 2005 10:17 pm (спустя 4 минуты; написано за 53 секунды)
   Post subject:
Reply with quote

tIT
Дмитрий Котеров
Quote:
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru-RU; rv:1.7.5) Gecko/20041108 Firefox/1.0
в FF в статусе ничего не видно!!!
МСИЕ показывает!!!
Back to top
View user's profile Send private message
Константин Жинько [tIT]
Сотрудник «Лаборатории»



Joined: 12 Jun 2004
Posts: 2264
Карма: 106
   поощрить/наказать

Location: Москва

PostPosted: Thu Mar 24, 2005 10:21 pm (спустя 3 минуты; написано за 15 секунд)
   Post subject:
Reply with quote

Mozilla/5.0 (Windows; U; Windows NT 5.1; ru-RU; rv:1.7.5) Gecko/20041217
У меня не FF
Back to top
View user's profile Send private message
Дмитрий Котеров
Администратор



Joined: 10 Mar 2003
Posts: 13665
Карма: 413
   поощрить/наказать


PostPosted: Thu Mar 24, 2005 10:55 pm (спустя 33 минуты; написано за 13 секунд)
   Post subject:
Reply with quote

Mozilla/5.0 (Windows; U; Windows NT 5.1; ru-RU; rv:1.7.6) Gecko/20050318 Firefox/1.0.2
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru-RU; rv:1.7.6) Gecko/20050318 Firefox/1.0.1

Все видно. Даже в Опере видно.
Back to top
View user's profile Send private message Send e-mail
Юрий Насретдинов
Модератор



Joined: 13 Mar 2003
Posts: 8642
Карма: 198
   поощрить/наказать

Location: 007 495

PostPosted: Thu Mar 24, 2005 11:34 pm (спустя 39 минут; написано за 29 секунд)
   Post subject:
Reply with quote

Rumata wrote:
в FF в статусе ничего не видно
В настройках яваскрипте разрешите ему изменять статусную строку.. Почему я должен это Вам говорить ;)?
Back to top
View user's profile Send private message Send e-mail
Rumata
Профессионал



Joined: 17 Aug 2003
Posts: 1850
Карма: 185
   поощрить/наказать


PostPosted: Fri Mar 25, 2005 8:20 am (спустя 8 часов 45 минут; написано за 41 секунду)
   Post subject:
Reply with quote

yUAC... мда... не смешно. старею-тупею
Back to top
View user's profile Send private message
Дмитрий Котеров
Администратор



Joined: 10 Mar 2003
Posts: 13665
Карма: 413
   поощрить/наказать


PostPosted: Sat Mar 26, 2005 6:37 pm (спустя 1 день 10 часов 17 минут; написано за 2 минуты 26 секунд)
   Post subject:
Reply with quote

Улучшил немножко: forum.dklab.ru/?sourcemapper.
Теперь рамок нет, переливается background. Рисунки же заменяются на "about:blank" - они тогда в виде крестика отображаются. В итоге ничего не разъезжается.

Вот только вопрос, как быть в IE с цветами, заданными в CSS букванно (типа "white", "black" и т.д.). Их надо перевести в RGB-представление каким-то образом (чтобы обеспечить переливание фона), но уж больно не хочется тащить всю таблицу цветов в виде JavaScript-хэшей (кстати, у кого-нибудь она вообще есть?)...
Back to top
View user's profile Send private message Send e-mail
Константин Жинько [tIT]
Сотрудник «Лаборатории»



Joined: 12 Jun 2004
Posts: 2264
Карма: 106
   поощрить/наказать

Location: Москва

PostPosted: Sat Mar 26, 2005 7:28 pm (спустя 51 минуту; написано за 11 секунд)
   Post subject:
Reply with quote

Клево (-;
Back to top
View user's profile Send private message
Дмитрий Котеров
Администратор



Joined: 10 Mar 2003
Posts: 13665
Карма: 413
   поощрить/наказать


PostPosted: Sat Mar 26, 2005 8:08 pm (спустя 40 минут; написано за 10 секунд)
   Post subject:
Reply with quote

Все-таки протащил таблицу цветов.
Back to top
View user's profile Send private message Send e-mail
Дмитрий Котеров
Администратор



Joined: 10 Mar 2003
Posts: 13665
Карма: 413
   поощрить/наказать


PostPosted: Sun Mar 27, 2005 3:06 am (спустя 6 часов 57 минут; написано за 12 минут 52 секунды)
   Post subject:
Reply with quote

Ну вот, вроде сделал запуск редактора. Запуск программы выполняется следующим JS-кодом:
Code (JavaScript): скопировать код в буфер обмена
var WshShell = new ActiveXObject("WScript.Shell");
var out = WshShell.Exec(exe);
...
WshShell.AppActivate(out.ProcessID);
WshShell.SendKeys(...);
Если кому интересно, для тестирования надо проделать следующее:

1. В настройках безопасности IE (и только IE! ActiveX не работают в FF, MZ и Опере) добавить "dklab.ru" (именно так! НЕ forum.dklab.ru!) в список доверенных сайтов (trusted).
2. Разрешить ActiveX в настройках браузера для зоны Интернет (по умолчанию вроде и так разрешены).
3. Зайти на forum.dklab.ru/?sourcemapper.
4. Нажать Shift+RightClick. Ввести путь к редактору (там есть кнопка Browse для удобства; полностью скрыть файловое поле не удается; глупыми замечаниями на эту тему просьба данный топик не засорять).
5. Если выбран EditPlus, автоматом появится макрос нажатий на клавиши (для установки курсора на файл и выделения фрагмента). Убедиться, что в EditPlus выключены режимы "word wrap" и "cursor through tabs": табы не должны заменяться на пробелы.
6. Настроить маппинг путей: /home/dklab/dklab.ru/forum/templates/subSilver -> C:. Нажать OK. Все это запомнится в куках для данного сайта.
7. Положить в корень диска C: приложенный шаблон (это чтобы редактор как раз на нем выскакивал, для теста). (У меня лично маппинг другой, /home/dklab/dklab.ru -> z:/home/dklab, но т.к. исходники форума только у меня, лучше используйте тест с C: и одним-единственным приложенным файлом.)

Все. Теперь можно нажать на forum.dklab.ru/?sourcemapper Shift, выбрать какой-нибудь элемент внутри шаблона index_body.tpl (см. в статус-строку) и, удерживая Shift, щелкнуть на нем левой кнопкой. Затем отпустить Shift. (К сожалению, без отпускания Shift ничего не получится - так уж Windows устроен, если Shift нажат, то сигнал об этом будет посылаться во все активные приложения, а нам это ни к чему.) После отпускания должен запуститься EditPlus, в нем откроется файл C:\index_body.tpl (убедитесь, что так и произойдет, предварительно посмотрев в статус-строку после настройки маппинга: если там пути начинаются с C:, значит, все ОК). Затем в файле выделится кусок шаблона, который вывел указанный участок HTML.

Еще, конечно, все сыровато, тем не менее, даже сейчас использовать вполне удобно.


index_body.zip
 Description:

Download
 Filename:  index_body.zip
 Filesize:  3.01 KB
 Downloaded:  195 Time(s)



Last edited by Дмитрий Котеров on Sun Mar 27, 2005 3:12 am; edited 1 time in total
Back to top
View user's profile Send private message Send e-mail
Дмитрий Котеров
Администратор



Joined: 10 Mar 2003
Posts: 13665
Карма: 413
   поощрить/наказать


PostPosted: Sun Mar 27, 2005 3:09 am (спустя 3 минуты; написано за 9 секунд)
   Post subject:
Reply with quote

Вот скриншот настроек, которые у меня.


pic04.gif
 Description:
 Filesize:  13.53 KB
 Viewed:  450 Time(s)

pic04.gif
Щелкните, чтобы посмотреть полноразмерное изображение.



Back to top
View user's profile Send private message Send e-mail
Display posts from previous:   
Post new topic   Reply to topic All times are GMT + 3 Hours
Page 1 of 1    Email to a Friend.
You cannot post new topics in this forum. You cannot reply to topics in this forum. You cannot edit your posts in this forum. You cannot delete your posts in this forum. You cannot vote in polls in this forum. You cannot attach files in this forum. You can download files in this forum.
XML