логин: 
Другие записи за это число:
2010/01/13 - Фарш невозможно провернуть назад?
<< предыдущая заметкаследующая заметка >>
13 января 2010
планы движка и размышления о дивных возможностях всплывающих окон

Движок движется к релизу. Осталось уже немного:

1) Перевести на систему шаблона. Это сделать несложно, но необходимо. Если вкратце: сейчас есть движок, у которого есть свой набор процедур. Например: взять и обработать текст заметки, вставить блок комментариев, сформировать календарик, приветствие посетителю, ссылки "предыдущая-следующая", блок "другие записи за это число" и т.п. Он их все отрабатывает, чтобы в итоге получившиеся результаты распихать в указанные места шаблона страницы. Это неверная стратегия для движка. Нужно идеологически обратное: чтобы шаблон диктовал движку, что именно надо сделать (какие процедуры запустить). Образно говоря, если в шаблоне посреди html-верстки есть что-то типа {module:calendar}, значит, движку следует разыскать в своих модулях модуль calendar, запустить его, чтобы получился календарик, и полученный результат вставить на это место в шаблоне страницы. Или обновляющийся блок новостей. Или чат. Да что угодно - был бы модуль с указанным названием в папке модулей. Вот это будет идеальная стратегия. Да и проблемы с дизайном у разных пользователей навсегда исчезнут, потому что сам движок обновляться не будет (по большому счету, движка как такового вообще не будет - короткая функция, запускающая модули, которые продиктует шаблон дизайна). Будут добавляться только модули в папке. Сделано.

2) Соорудить систему обновления кода движка (кнопочку "обновить движок" в админке). Ну потому что у меня уже этих движков штук пять стоит на разных сайтах - и моем lleo.aha.ru уже штуки три, у заказчика одного, на hultura.ru/blog с копией ЖЖ Шестакова, и так далее. И доступ всюду обычно только по ftp (и никаких CVS нету, разумеется), а перезаливать всюду каждый раз новую версию - забодаешься, потому что или лить все заново или морщить лоб, какие файлы менял. А есть еще и вовсе проблемный хостинг у Наташки на naber.ru, куда я не могу по ftp залить движок, потому что mc при коннекте периодически виснет. Поэтому нужна в админке кнопка "обновить движок" (и "откатить обратно", разумеется), которая свяжется с базовым сервером (моим), передаст ему даты всех системных файлов имеющегося движка, а сервер сообщит, какие надо обновить, после чего старые переименуются в .old, а новые скачаются. А по кнопке "откатиться" найдет все .old и переменует обратно. Кроме того, надо подумать, как добавлять новые дефолтные переменные в config.php, если того требуют новые части кода.

3) Ну и последнее - полностью отказаться от модуля редактирования editor.php, а все делать всплывающими окнами без перезагрузки страницы. Захотел отредактировать текст заметки? Нажал что-то (ссылку или клавиатурное сокращение) - всплыло большое окно с редактором. Понадобились панели инструментов - нажал ссылку и панель кнопочек подгрузилась. Захотел выбрать для вставки фотографию - распахнулось новое окно с фотоальбомом, полазил, выбрал.

Самое забавное, что последний пункт как раз проще всего реализуется - в нынешнем движке любое новое всплывающее окно (со своей кнопкой закрытия) порождается одной JS командой: helps('имя окна','html-тест содержимого'). Причем, эту команду может (и должен в большинстве случаев!) прислать по аяксу сам сервер (файл.php) в ответ на запрос majax('файл.php',{переменная1: значение, переменная2:значение ...}). Поясню на пример, что именно меня так умиляет в открывшихся возможностях.

Допустим, нам надо получить с сервера окно с чем-нибудь - статистика, редактор страницы, альбом фотографий, форма ввода пароля - не суть важно. Давайте, к примеру, получим от сервера случайное число. Для этого достаточно вызвать в скрипте страницы простую команду (например, ссылкой с onclick=...):

majax('rand.php',{min: '0', max: '100'})

Обратите внимание, я передаю серверу любые параметры: в данном случае min и max. Это на странице клиента. На сервере же размещаем в папке /ajax файлик rand.php:


<?php
include "../config.php"; // конфиг движка
include $include_sys."_autorize.php"; // авторизация посетителя, ну и библиотека аякс:
require_once $include_sys."JsHttpRequest.php"; $JsHttpRequest =& new JsHttpRequest("windows-1251");

otprav("helps('random','Случайное число: <b>".rand($_REQUEST["min"],$_REQUEST["max"])."</b>, вот!');");
?>

Все готово. Пример: прислать случайное число

Что в этом сложного?! Какие нахуй jQuery? Это три строчки кода плюс микроскопический код в теле страницы, без всякого лишнего говна! В каком браузере это не сработает, кроме IE6? Ну ладно я - я-то чайник. Окошко мне нарисовал мудрый Миша Валенцев, дивную команду eval() сообщили неделю назад мудрецы в комментах, а библиотекой аякса научил пользоваться Созидатель года три назад. Но блять, профессиональные программисты сидят на жопах в офисах и пишут сайты! Почему же все сайты (за редким исключением) такие убогие, и любое действие пользователя требует многократных перезагрузок страницы?! Это же часы ожидания и тонны мегабайт говна! Не пойму. Отныне у меня всё на сайтах (кроме навигации по ссылкам, разумеется) будет работать исключительно с выпадающими окнами.

Это реально проще даже по трудозатратам, чем городить обмен с сервером традиционными способами! Простой пример: пользователь заполняет некую форму, но не указал емайл. Ты на сервере видишь, что пришло пустое поле емайла - так ты не закрываешь ему всплывающее окно, а просто высылаешь команду вывести в этом же окошке предупреждение "а еще введите емайл!". И пусть продолжает вводить. А традиционным способом? Ты обнаружил, что пользователь не заполнил одну графу, и у тебя новая головная боль: тебе надо снова сформировать ему ту же страницу со всеми графами для ввода, да еще желательно расставить в графах уже введенные значения, чтоб не вводить заново (многие сайты и этого не делают!).

В общем, я пару лет назад испытал невероятное облегчение, когда перевел админскую обработку комментариев на аякс и из редактора страницы выкинулся огромный кусок говна. Теперь же - сама форма написания комментариев стала на аяксе, и из кода движка выкинулся гигантский кусок говна (я конечно сделаю форму комментариев для тех, у кого не включен JS, но уж очень спартанскую). Следующим шагом выкину сам редактор заметок - и еще сократится код. Все, что не требует перехода на другой url, должно делаться без перезагрузки страницы! Кто этого не понимает - тех надо убивать.

PS: Единственное, чего я пока не научился делать - это их перетаскивать по экрану. Мне посоветовали код, но он почему-то работает только в тестовой модельке. Когда доходит до дела, начинается беда:

<< предыдущая заметка следующая заметка >>
пожаловаться на эту публикацию администрации портала
архив понравившихся мне ссылок
Оставить комментарий
+100 за валидацию формы аяксом. Сам пропагандирую такой подход. Он достаточно новый, во фреймворках только начинает появляться его поддержка. Wicket, например, примерно так работает. Вот только проверять каждое отдельное поле на обязательность на сервере, по-моему, чересчур. Если можно проверить на клиенте, лучше проверить на клиенте, без ajax-запроса. А на сервер лезть в сложных случаях, ну или всю форму перед сабмитом проверять на сервере целиком.

В свете редактирования заметки рекомендую обратить внимание на html-атрибут editable="true". С его помощью можно сделать непосредственное редактирование прямо текста страницы а-ля google docs. Удивительно также, что ИЕ6 поддерживает его без всяких вопросов. Пример использования: http://css-tricks.com/examples/EditableInvoice/

Про перетаскивание флеймить не буду, скажу только, что задача нетривиальна именно из-за особенностей браузеров , как они вычисляют смещения. И, да, в пресловутом jQuery (UI) это делается одной функцией http://jqueryui.com/demos/draggable/. Рекомендую у них реализацию подсмотреть.
0
0
LLeo Nokia (#3043)
Собственно, простые проверки я тоже иногда делаю на клиенте - хотя бы потому, что гораздо проще запретить ввод, скажем, букв в поле числа. Но вообще надо понимать, что:

а) Проверка на сервере обязательна в любом случае хотя бы потому, что клиент может засунуть вместо данных хоть черта лысого.

б) Проверка на сервере работает всегда, а у клиента "разные браузеры". И ты никогда не можешь быть уверен, что завтра не выйдет новый Хром или Сафари, где твоя проверка не сработает.

в) Событие, когда клиент заполняет форму, - это очень редкое событие в жизни сайта, оно составляет ничтожную долю нагрузки сервера. Меньше 5% по-любому даже в блогах с активными каментами. А на прочих сайтах - меньше 1%.Если эти три пункта понимать, то становится ясно, что проверка на сервере - наилучшее решение.
0
0
LLeo Nokia (#3043)
Что же касается jQuery - то это как в том анекдоте про трехногую свинью "буду я из-за одного холодца всю свинью резать".

Я тут всерьез подумываю отключить 25кб скрипта аякса при загрузке страницы (и подкачивать его только если пользователь делает действия, для которых необходим аякс), а тут мне предлагают jQuery на 200кб (или сколько последняя версия весит?) с кучей функций, которыми я никогда не воспользуюсь.
Да понятна ваша позиция, я вам предлагаю только реализацию draggable подсмотреть.
jquery весит 23 кБ. :E
Можно, кстати, подключать его с яндекса, тогда оно у многих будет уже в кеше.
0
1
Leonid Kaganov
Не видел. Видел от 60кб. Но мне все равно не нравится эта идея. Это значит, что мне придется а) учить язык jQuery, б) препарировать его, чтобы разобраться, как он работает и что там внутри. Потому что котов в мешке использовать мне не позволяет религия. А зачем мне этот гемор?
0
0
Leonid Kaganov
ААААААААААААААААААА!!!! ЭТО ПИЗДЕЦ!!!! Разобрался с вашим примером.

Я про http://css-tricks.com/examples/EditableInvoice/ Вы его сами хоть видели? Какое в жопу editable="true"? Это клинический быдлокодинг! Во-первых, jQuery. Нахуя оно там - убей бог. Наверно, теперь чтобы просуммировать два числа в столбцах и вывести результат, без jQuery уже никак, мозг остановился. А само редактирование сделано знаете как? Загляните просто в код - там никакого редактирование и нет, там просто расставлены по всей странице поля textarea без рамочек. Вот тот же самый пример, но короче:

<style>
textarea { border: 0; overflow: hidden; resize: none; width: 600px; height: 50px; }
textarea:hover, textarea:focus { background-color:#EEFF88; }
</style>

<textarea>Пример идиотский, да еще jQuery. В лучших традициях быдлокодинга!</textarea>

Просто плакал, честное слово! :)))
Действительно, пример не тот привел — первое, что выдал гугл, результат-то примерно похож. Вот правильная статья: http://www.hyperwrite.com/Articles/contenteditable.aspx
0
0
LLeo Nokia (#3043)
На моей Нокии ссылка не работает. А это редкость - браузер коммуникатора более чем полноценен.
у меня на обычном SM тоже не работает - только IE.
http://mozile.mozdev.org/
вот попробуй - внутри оранжевой рамки. Для мозилы надо дополнительно нажать F7 чтобы получить курсор.

И вот на тему:
https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozill[...]
0
0
Andrey aka Mem0 (loki-gh0st)
Эгм... Окно 1 раз открылось, а потом стало не открываться. Закрылось по нажатию на него.
0
0
Leonid Kaganov
Интересно. Какой браузер? Повторялось ли?
0
0
Monstradamus (sing1eton)
Лео, а можно посмотреть код перетаскивания окна по экрану? Может, пойму что...
0
0
Leonid Kaganov
if(id=='proverka_okna'){ var e=idd(id);
addEvent(e,'mousedown', function(e){ this.style.cursor='move'; hmov[this.id]={'x': e.offsetX ? e.offsetX : e.layerX, 'y': e.offsetY ? e.offsetY : e.layerY }; } );
addEvent(e,'mouseup', function(){ hmov[this.id]=0; } );
addEvent(e,'mouseout', function(){ hmov[this.id]=0; } );
addEvent(e,'mousemove', function(e){ if(!e) e=window.event; var i=this.id; if(hmov[i] && hmov[i]!=0) { this.style.left = e.clientX-hmov[i]['x']+'px'; this.style.top = e.clientY-hmov[i]['y']+'px'; } } );
}
0
0
Leonid Kaganov
Оно в коде страницы, работает только для окна "proverka_okna"
Убери mouseout!
0
0
zencd (propir)
Леонид, форму комментария хорошо бы привести в соответствие со стандартами - редактирование текста затруднено: не работает ни выделение слов, ни установка курсора мышкой, фокус теряется при shift+left...
0
0
Leonid Kaganov
Может, это потому стало, что я для перетаскивания окон добавил в стили "cursor:auto; user-select:auto; -moz-user-select:auto; -khtml-user-select:auto;"?
Про перетаскивание. Не просто ларчик открывался, но все-же... Проверено в Опере 10 и Фоксе 3 - работает. В ИЕ6 - нет, ругается на mkdiv.

<pre>
if(id=='proverka_okna'){
var e=idd(id);
addEvent(e,'mousedown', function(e){
if(!e) e=window.event;
this.style.cursor='move';
hmov[this.id]={x: e.clientX ? e.clientX : e.layerX, y: e.clientY ? e.clientY : e.layerY };
e.preventDefault();
}
);
addEvent(e,'mouseup', function(e){
if(!e) e=window.event;
hmov[this.id]=0;
} );
addEvent(e,'mouseout', function(){
if(hmov[this.id]){
hmov[this.id]=0;
}
} );
addEvent(e,'mousemove', function(e){
if(!e) e=window.event;
var i=this.id;
if(hmov[i]) {
this.style.left = parseFloat(this.style.left)+e.clientX-hmov[i].x+'px';
this.style.top = parseFloat(this.style.top)+e.clientY-hmov[i].y+'px';
hmov[i].x=e.clientX;
hmov[i].y=e.clientY;
e.preventDefault();
}
} );
}
</pre>
0
0
Leonid Kaganov
Почему? Прекрасно виден комментарий. А что это за код вы прислали? Это мой? Или какое-то исправление предложено - не соображу.
0
0
Leonid Kaganov
Спасибо, поставил ваш код. Но все равно почему-то очень с трудом... ;(
Заработали комментарии. Красота, однако
mouseout - убрать!..
Строили, строили, построили. Получилось в Фоксе3, Opera10, Сафари3. В ИЕ6 и ИЕ8 - как всегда никак.
Код получился такой:

function removeEvent(e,evType,fn){
if(e.removeEventListener) { e.removeEventListener(evType,fn,false); return true; }
else alert('can`t remove event');
}

В фнукции helps измененный кусок:
if(id=='proverka_okna'){
var e=idd(id);

var pnt=e;
var hmov=false;
while(pnt.parentNode)pnt=pnt.parentNode;
var mmFunc=function(ev){
if(hmov) {
e.style.left = parseFloat(e.style.left)+ev.clientX-hmov.x+'px';
e.style.top = parseFloat(e.style.top)+ev.clientY-hmov.y+'px';
hmov={x:ev.clientX, y:ev.clientY};
ev.preventDefault();
}
};
var muFunc=function(ev){
if(hmov){
hmov=false;
removeEvent(pnt,'mousemove',mmFunc);
removeEvent(pnt,'mouseup',muFunc);
}
};
addEvent(e,'mousedown', function(ev){
if(0!==ev.button)return;
e.style.cursor='move';
hmov={x: ev.clientX ? ev.clientX : ev.layerX, y: ev.clientY ? ev.clientY : ev.layerY };
ev.preventDefault();
addEvent(pnt,'mousemove',mmFunc);
addEvent(pnt,'mouseup',muFunc);
}
);
}
0
0
Andrey Pozdnyakov
а еще надо, чтоб окошки закрывались по клику на само окошко, а не только на крестик (статистика, например). как в {cut-мождуле}
0
0
Leonid Kaganov
Нет. Как правило, окошко подразумевает какое-то действие, закрываться ему незачем. К тому же процедура окошка - едина для всех, в момент открытия окошко, разумеется, не знает, что в него разместят. Переделывать это - дико сложно и не нужно.
Кстати, окно у меня перетаскивается, но как-то странно: иногда его тащишь, а оно остановилось посреди страницы, пробуешь снова - едет дальше до следующей "мертвой точки"
0
0
Leonid Kaganov
Вот в том-то все и дело ;(
дело в событии mouseout. step to reproduce: 1. mousedown на окошке. 2. тяни окошко 3. если курсор выскочил за пределы окна - хуяк! - отрабатывает событие mouseout и всё, весь драг заканчивается. лень писАть и тестить скрипт, но попробуй при наступлении mouseout проверять mouseup - было или не было. если не было и mouseout - продолжать тянуть за курсором, если был mouseup - прекратить драг.
Двигать получается, но только мееедленно ведя мышкой, чтобы курсор не успел выскочить за границу открытого окошка :)

Вероятно потому что события move перестают попадать в то окошко, в котором прописан обработчик их.

Если сделаешь окошко большое и тянуть будешь за центр - будет лучше ездить :)))
В Хроме тестовое окошко двигается, но плохо - если быстро тянуть отваливается. Окошко с комментом не двигается и кроме того не вижу других комментов. Может их просто нет и мой коммент первый - сейчас проверим.
случайное число генерирует окно перемещается нормально если резких движений не делать (при быстрых перемещениях курсор мыши уходит за придел перемещаемого окна и окно останавливается ) - это мелочи. Mozilla 3.5.7 (build 02842)
0
0
Monstradamus (sing1eton)
Потестил новую версию - при попытке передвинуть окно за правую границу его ширина уменьшается и внизу скроллбар вылезает. Странно, вроде же нормализуются координаты...
0
0
Monstradamus (sing1eton)
О, пришло в ум: то, что окно резко не перетаскивается - это ж поди из-за того, что по mouseout перетаскивание заканчивается. А вот если его не писать попробовать? Или так рухнет все из-за того, что под курсором не окно?
после mouseout перестает посылаться mousemove. Возможное решение - ловить мыша не в самом "всплытом" окне, а у его родителей. Body, например.
0
0
Monstradamus (sing1eton)
после mouseout перестает посылаться mousemove - это точно так? Сколько писал перетаскивание - никогда mouseout не ловил и багов не заметил. Но на JavaScript не писал, есть такое...
Скрипт в браузере - это совершенно отдельная, по-своему прекрасная, история :-)
По поводу перетаскивания: не посмотрел код, но очевидно, что обработчик mousemove стоит для данного DIV-а - если мышка выскочит (не отпуская кнопку), движение прекращается.

Я для похожей цели смотрел код на http://www.gibdd.ru/, в разделе онлайн-экзамена у них в двигающихся окошках всплывают объяснения в случае неправильного ответа. Посмотри!
P.S. Спасибо за исправленную Ctrl-навигацию! :)
Ха-ха, разобрался с твоим перетаскиванием! Просто убери mousout, и всё начнёт работать :-)
0
0
lleo.me/[email protected]Артем Павлов
Хм, странно, я пробовал маусаут убивать, становилось чуть планее, но не сильно лучше.

Мне вообще показалось, что глюки вылезают только при вертикальном перетаскивании окошка.
Просто при вертикальном гораздо проще за окно выскочить. В общем заработало с перехватом событий у родителя. Код см. выше.
А так пробовал: 1)Нажимаем мышь на окне 2)Резко убираем курсор с окна 3)Отпускаем кнопку мыши 4)Возвращаем курсор в окно. И тут действительно ХаХа. По крайней мере в Опере10 и Фоксе3.
нашел ошибку не в тему. у меня на хостинге поддомены лежат в подпапках папки основного домена, если на основной домен залить htaccess от вашего блога, форум на поддомене начинает падать в 500 ошибку :)
1
0
Leonid Kaganov
Это не ошибка, а закон интернет-хостинга. Движок блога считает собственностью папку, в которой он лежит, и все подпапки в ней.

Вы должны выделить ему отдельную папку, в которой будет только он.

Другой вариант (возможно, более разумный). Если же вы желаете размещать в папке движка еще какие-то папки, вам следует перечислить их в htaccess перед строкой с Rewrite на index.php, вот так:

RewriteCond %{REQUEST_FILENAME} !/moya_papka
RewriteCond %{REQUEST_FILENAME} !/drugaya_papka
RewriteCond %{REQUEST_FILENAME} !/forum
RewriteRule ^(.*)$ index.php
ага, вот оно как, спасибо.
хотя, наверное, стоило бы "научить" движок автоматом не трогать вложенные папки, про которые он точно знает, что это не его. Т.к.некоторые панели для управления хостингом (к примеру cpanel) по умолчанию размещают поддомены в папке основного домена.
0
0
Leonid Kaganov
Да движок-то при чем? Это апач сервера обрабатывает переадресацию в htaccess, его и учите не трогать папки.
Не баги, а так замечания:
при клике в имя сначала подгружается карточка на пол экрана, потом она дико дергается и становится нормальной - видно стили грузятся потом :)

Если не закрыть одну карточку человека и кликнуть на второе имя, то карточка останется на том же месте и поменяет содержимое. А если закрыть и кликнуть - то откроется в месте клика. Не понятно баг это или так задумано.

всего комментариев: 49

<< предыдущая заметка следующая заметка >>