Ars Longa, Vita Brevis » JavaScript

Автоматическое добавление ссылки на источник при копировании текста с сайта

Vladimir — Sat, 14 Jan 2012 03:42:35 +0000

Навязчивое добавление ссылки на оригинал при копировании текста с сайта

Идея: когда пользователь выделяет часть текста и копирует её в буфер обмена (например, чтобы выложить на своём сайте), автоматически добавлять к выделению ссылку на источник.

Реализация:

var source_link = '

Подробнее: + location.href + '">' + location.href + '

';
jQuery(
function($)
{
if (window.getSelection) $('#content div.post').bind(
'copy',
function()
{
var selection = window.getSelection();
var range = selection.getRangeAt(0);

var magic_div = $('

').css({ overflow : 'hidden', width: '1px', height : '1px', position : 'absolute', top: '-10000px', left : '-10000px' });
magic_div.append(range.cloneContents(), source_link);
$('body').append(magic_div);

var cloned_range = range.cloneRange();
selection.removeAllRanges();

var new_range = document.createRange();
new_range.selectNode(magic_div.get(0));
selection.addRange(new_range);

window.setTimeout(
function()
{
selection.removeAllRanges();
selection.addRange(cloned_range);
magic_div.remove();
}, 0
);
}
);
}
);

Настраиваемые параметры:

source_link — текст, который будет добавляться к копируемому фрагменту. В данном примере задаётся статически, но при желании генерацию ссылки можно усложнить (например, при копировании с текста с домашней страницы можно возвращать ссылку на статью, из которой взята данная цитата). Для этого в строке magic_div.append(range.cloneContents(), source_link); вместо source_link нужно использовать свою функцию, возвращающую HTML для вставки в копируемый фрагмент.
'#content div.post' — выражение, задающее один или более контейнер с текстом, при копировании которого нужно добавлять ссылку на оригинал. Идея в том, что добавлять ссылку на статью при копировании, скажем, части текста одного из комментариев к статье было бы нелогично. С помощью данного выражения можно задать требуемые защищаемые объекты.

Возможные улучшения: проверка длины копируемого текста. Например, если пользователь копирует меньше 20 слов, не добавлять ссылку. Получить выделенный текст можно через range.cloneContents().textContent.

При использовании материалов блога наличие активной не закрытой от индексирования ссылки на источник обязательно.

Обход плагина WP Hashcash

Vladimir — Mon, 26 Dec 2011 05:43:11 +0000

Не так страшен JavaScript, как его малюют…

WP Hashcash — очередной плагин WordPress для борьбы со спамом. Принцип работы основывается на том, что спам-боты не умеют исполнять JavaScript. Идея в том, что если пользователь открыл сайт из браузера, браузер выполнит некоторый хитрый код JavaScript, и реузльтат работы этого скрипта будет передан назад на сервер в качестве доказательства «человечности» комментатора.

Недостаток этого подхода заключается в том, что используемый JavaScript является довольно-таки простым; как следствие, его можно «понять» даже из PHP-скрипта.

Пример кода JavaScript, генерируемого плагином:

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

Итак:

В PHP нет ключевого слова var (строго говоря, оно там есть, только имеет другое назначение).
В PHP несколько другой синтаксис объявления массива
Идентификаторы в PHP начинаются с доллара
Операция сдвига выглядит как >>, а не >>>.
В PHP нет классов Array, String, но никто не мешает их написать

Наша задача состоит в преобразовании кода, приведённого выше, в нечто подобное:

Это достигается таким набором правил str_replace():

$x = array(
'wphc_data' => '$wphc_data',
'var $' => '$',
'var ' => '$',
'];' => ');',
'= [' => '= array(',
'new Array($wphc_data.length)' => 'array()',
'$wphc_data.length' => 'count($wphc_data)',
' i<' => ' $i<',
'[i]' => '[$i]',
'i++' => '$i++',
'>>>' => '>>',
'a[$i] =' => '$a[$i] =',
'String.' => '',
'eval' => '',
"a.join('')" => 'join("", $a)',
);

$s = str_replace(
array_keys($x),
array_values($x),
$s
);

При желании правила можно попытаться оптимизировать, но мне было лень — скрипт ломался на коленке за 10 минут.

Реализация функции fromCharCode:

function fromCharCode($a, $b, $c, $d)
{
return chr($a) . chr($b) . chr($c) . chr($d);
}

После замены результат нужно вычислить при помощи eval(). После чего получим такой результат:

function wphc_compute(){return 43448 * 43448 + 75878; } wphc_compute();

Как можно заметить, этот код является одновременно и PHP-кодом, и JavaScript-кодом.

Следующий шаг —

$s = str_replace('wphc_compute();', '', $s);
eval($s);
echo wphc_compute(), "\n";

Результатом выполнения будет число 1887804582.

Как видим, для обхода такой простой защиты не нужен даже интерпретатор JavaScript

Заголовки HTTP для обеспечения безопасности сайта

Wandering Soul — Mon, 03 Jan 2011 12:28:06 +0000

Активация средств защиты, встроенных в современные бразуеры, для обеспечения дополнительной безопасности пользователей

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

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

В данной статье будет показан один из вариантов защиты — основанный на использовании заголовков HTTP.

Современные браузеры сами предоставляют довольно мощную защиту для своих пользователей… Единственное «но» — сайт должен попросить браузер включить эту защиту. К счастью, это довольно просто.

Для Apache:

# Запретить всем сайтам загружать страницу через /
Header set X-Frame-Options DENY

# Разрешить выполнение JavaScript, загруженного только с нашего домена.
# Не выполнять встроенный (inline) JavaScript
Header set X-Content-Security-Policy "allow 'self';"

# Включение предотвращения XSS-атак в IE 8
Header set X-XSS-Protection "1; mode=block"

Для nginx:

add_header X-Frame-Options DENY;
add_header X-Content-Security-Policy "allow 'self';";
add_header X-XSS-Protection "1; mode=block";

X-Frame-Options

Данный заголовок указывает браузеру, можно ли загружать страницы сайта через <frame>/<iframe>.

Значение DENY запретит загрузку через фреймы, значение SAMEORIGIN разрешит загрузку через фреймы, но только если и фрейм, и страница, его загружающая, находятся на одном домене (Same Origin Policy).

основная функция данной защиты — предотвращение кликджекинга; в качестве дополнительного бонуса это позволит предотвратить атаку, описанную Ben Schmidt.

Заголовок воспринимается Internet Explorer 8.0+, Firefox 3.6.9+ (Gecko 1.9.2.9+), Opera 10.50+, Safari 4.0+, Chrome 4.1.249.1042+.

Подробное описание приведено здесь.

X-Content-Security-Policy

Данный заголовок указывает, как контент на сайте взаимодействует с самим сайтом. При помощи данного заголовка можно указывать, откуда можно загружать картинки, JavaScript, фреймы, шрифты, объекты, таблицы стилей, медиаконтент и многое другое.

Приведённый в примере выше заголовок разрешает загрузку контента только с того же домена, на котором располагается загружаемая страница. При этом браузеру запрещается выполнение встроенного JavaScript (скрипты внутри блоков <script>…</script>, обработчики событий и т.п.), создание кода из строк (например, через функцию eval(), а также передача строк в функции setTimeout(), setInterval() и т.п.), использование протокола data:.

Данный заголовок можно использовать на HTTPS-страницах для запрета загрузки небезопасного контента:

X-Content-Security-Policy: allow https://*:443

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

X-XSS-Protection

Данный заголовок работает исключительно в Internet Explorer: он включает встроенную в браузер защиту от XSS-атак (по умолчанию она отключена, так как может некорректно работать с некоторыми сайтами). Подробная информация о принципах работы защиты от XSS-атак в IE приведена в The Windows Internet Explorer Weblog.

В заключение стоит отметить, что хоть данный способ и хорош, он должен использоваться вкупе с другими средствами защиты и быть частью комплексной системы безопасности. Безопасность лишней не бывает!

Оригинал статьи.

Создание отражения рисунка с помощью JavaScript

Vladimir — Sun, 16 Nov 2008 22:12:36 +0000

HTML 5 приходит на помощь

Постановка задачи: из исходного изображения

получить отраженное изображение:

Дополнительное условие: генерировать изображение на стороне клиента (то есть без использования GD, ImageMagick и иже с ними).

В черновике стандарта HTML 5 пристутствует такой замечательный элемент как . Если вкратце, то данный элемент предназначен для создания изображений при помощи JavaScript.

Впервые элемент был представлен компанией Apple и использовался как компонент WebKit для Mac OS X в таких приложениях как Dashboard и Safari.

Поддержка в Gecko появилась в версии 1.5, в Presto с версии 9.0 веб-браузера Opera. Текущие версии Internet Explorer (включая восьмую бету) не поддерживают . Несмотря на это, для поставленной задачи существует кросс-браузерное решение.

В Microsoft Internet Explorer отражения с прозрачностью можно достичь путём использования комбинации фильтров. В частности, для вертикального отражения используется фильтр flipv, для горизонтального — fliph. Про реализацию прозрачности в Internet Explorer, наверное, знает каждый: progid:DXImageTransform.Microsoft.Alpha. Тем не менее, не все знают, что можно задавать градиентную прозрачность.

Перейдём к решению. Пусть у нас имеется такая разметка:

Будем полагать, что ширина и высота контейнера заданы (если мы делаем отражение по вертикали, то ширина контейнера совпадает с шириной рисунка, а высота контейнера в два раза больше высоты рисунка; аналогично для горизонтального отражения).

Начнём с классики (MSIE).

/**
* @param container

В случае с IE всё просто и сводится к заданию соответствующих фильтров. С браузерами, поддерживающими HTML 5, всё гораздо сложнее (ad deliberandum: сколько строк занимает программа на C++, если она использует COM-технологию?)

/**
* @param container

* @param image
* @param ratio Коэффициент сжатия/растягивания отражения
* @param opacity_start Начальная (ближняя к отражаемому изображению) непрозрачность
* @param opacity_end Конечная непрозрачность
* @param horizontal 0 = вертикальное отражение, 1 = горизонтальное отражение
*/
function reflect_image(container, image, ratio, opacity_start, opacity_end, horizontal)
{
var reflection = document.createElement('canvas');
var context = reflection.getContext('2d');
reflection.style.height = image.height + 'px';
reflection.style.width = image.width + 'px';
reflection.height = image.height;
reflection.width = image.width;

//Подводный камень: на canvas нельзя рисовать, если она не в DOM-дереве документа
container.appendChild(reflection);

context.save();
var gradient;

if (0 == horizontal) {
// Задаём точку отсчёта, отражаем ось y и создаём вертикальный градиент
context.translate(0, image.height);
context.scale(1, -1);
gradient = context.createLinearGradient(0, 0, 0, image.height);
}
else {
// Задаём точку отсчёта, отражаем ось x и создаём горизонтальный градиент
context.translate(image.width, 0);
context.scale(-1, 1);
gradient = context.createLinearGradient(0, 0, image.width, 0);
}

// Рисуем исходное изображение (оно будет отражено по одной из осей)
context.drawImage(image, 0, 0, image.width, image.height);
context.restore();

// Задаём режим операции
context.globalCompositeOperation = "destination-out";

// Параметры градинтной заливки (в параметрах передаётся НЕпрозрачность, нам нужна прозрачность)
gradient.addColorStop(1, "rgba(255, 255, 255, " + (1 - opacity_end) + ")");
gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity_start) + ")");
context.fillStyle = gradient;

// Заливаем
if (-1 != navigator.appVersion.indexOf('WebKit')) {
context.fill();
}
else {
context.fillRect(0, 0, image.width, image.height);
}
}

Тестовый пример.

Canvas Tutorial в Mozilla Developer Center

Основные источники неправильной разметки в WordPress

Vladimir — Mon, 07 Jul 2008 02:50:08 +0000

Исправляем неправильную разметку в WordPress

В статье "Избавляемся о ошибок xHTML-валидации при использовании JavaScript, Flash, , CSS" рассказывается о четырёх основных источниках неправильной разметки в WordPress:

JavaScript;

Глобальные CSS, размещаемые в заголовке документа;

Flash;

Несуществующий по стандартам тег <noindex>, придуманный Яндексом

Естественно, после прочтения статьи я решил проверить свой, как я полагал, валидный, блог. В том-то и дело, что только плагал: нашёлся пятый источник неправильной разметки. Где бы Вы думали? В самом WordPress, в функции wpautop().

Сначала всё же пройдусь по первым четырём источникам. А точнее, трём — проблему с Яндексом я для себя давно уже решил, а именно: несуществующими тэгами я не балуюсь. И не могу не удержаться от камня в огород Яндекс: ну зачем нужно было придумывать абсолютно левый тэг, когда можно было использовать, например, комментарий:

Content not to be indexed

Во-первых, это решает проблему невалидного (X)HTML. Во-вторых, не надо было бы заботиться о том, где можно и где нельзя размещать тэг — вырезал регэкспом такой вот комментарий от начала и до конца и получил контент, который можно индексировать. Эх… Ладно, забыли.

Теперь по списку.
JavaScript. Решение простое: весь JavaScript заключаем в секцию CDATA. Например, так:

И не забываем, что атрибут type — обязательный. Решение выше, что называется, для любителей поизвращаться: помимо всего прочего, оно прячет JavaScript от антикварных браузеров, которые вообще не понимают тэг script. Если поддержка таких браузеров не нужна, то код можно значительно упростить:

А вот такое решение я не рекомендую:

Причина простая: если мы планируем отдавать XHTML так, как это требует W3C (с MIME-типом application/xhtml+xml), то любой нормальный браузер воспримет HTML-комментарий как элемент, вложенный в script, и, как следствие, проигнорирует скрипт полностью (в XHTML парсер не знает о том, что существуют скрипты, таблицы стилей и прочие вещи).

С CSS всё аналогично. Метод для любителей поизвращаться:

И более простой метод:

Да, у тэга style атрибут type тоже является обязательным.
Все браузеры, появившиеся после 2000 года понимают форму "без извращений", поэтому, наверное, имеет смысл использовать именно её. И еще небольшое замечание по поводу CDATA. По большому счету, секция CDATA нужна только тогда, когда контент содержит символы, которые могут быть интерпретированы как разметка XML, а именно: < и &. То есть в большинстве случаев, стили внутри тэга style помещать в CDATA особо не нужно.

Третий пункт — Flash. Здесь поможет Flash Satay. На нём подробно останавливаться не буду, лишь замечу, что правильный способ записи такого монстра:

выглядит так:

Достоинства и недостатки метода подробно описаны в оригинале, нет смысла на них останавливаться здесь.

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

Переходим к пятому пункту, ради которого, собственно говоря, данная статья и писалась Как я уже сказал, во многих случаях в неправильной разметке виноват WordPress. Конкретно — функция wpautop(). Я всегда считал, что глобально менять разметку HTML, использую регулярные выражения — глупо, ибо в общем случае это работать не будет.

Допустим, Вы привыкли использовать хорошо структурированый код. Тогда вполне вероятно, что Вы можете написать нечто подобное (в целях упрощения восприятия я сократил код):

<div>
<strong>Test</strong>
<div>Lorem ipsum dolor sit amet, иными словами, вложенный div.</div>
</div>

Дальнейшие рассуждения исходят из предположения, что Вы не пользуетесь WYSIWYG-редактором. Например, из-за того, что приходится вставлять разметку, которую TinyMCE никак не переваривает (исправляет её под себя), я им вообще не пользуюсь, предпочитая обыкновенный HTML-редактор без наворотов.

В этом случае функция wpautop() преобразует его следующим образом:

Добавление символов перевода строки:

<div><strong>Test</strong>

<div>Lorem ipsum dolor sit amet, иными словами, вложенный div.</div>

</div>
Добавление параграфов куда можно и куда нельзя:

<p><div><strong>Test</strong></p>
<p><div>Lorem ipsum dolor sit amet, иными словами, вложенный div.</div></p>
<p></div></p>
Финальная очистка:

<div><strong>Test</strong></p>
<div>Lorem ipsum dolor sit amet, иными словами, вложенный div.</div>
</div>

Как видим, остается лишний закрывающий тэг p. Кстати, если написать так (строчный и блочный элементы на одной строке):

<div>
<strong>Test</strong><div>Lorem ipsum dolor sit amet, иными словами, вложенный div.</div>
</div>

то разметка будет нормальной.

В общем случае, ошибка вылезает при такой разметке:

>
>>
>>
>

Править все статьи — абсолютно не метод русского программиста Проще автоматизировать.
Открываем файл wp-includes/formatting.php:

function wpautop($pee, $br = 1) {
$pee = $pee . "\n"; // just to make things a little easier, pad the end
$pee = preg_replace('|
\s*
|', "\n\n", $pee);
// Space things out a little
$allblocks = '(?:table|thead|tfoot|caption|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select|form|map|area|blockquote|address|math|style|input|p|h[1-6]|hr)';
$pee = preg_replace('!(<' . $allblocks . '[^>]*>)!', "\n$1", $pee);
$pee = preg_replace('!( . $allblocks . '>)!', "$1\n\n", $pee);
$pee = str_replace(array("\r\n", "\r"), "\n", $pee); // cross-platform newlines
if ( strpos($pee, ') !== false ) {
$pee = preg_replace('|\s*]*)>\s*|', "$1>", $pee); // no pee inside object/embed
$pee = preg_replace('|\s*\s*|', '', $pee);
}
$pee = preg_replace("/\n\n+/", "\n\n", $pee); // take care of duplicates
$pee = preg_replace('/\n?(.+?)(?:\n\s*\n|\z)/s', "
$1
\n", $pee); // make paragraphs, including one at the end
$pee = preg_replace('|
\s*?
|', '', $pee); // under certain strange conditions it could create a P of entirely whitespace
$pee = preg_replace('!
([^<]+)\s*?(]*>)!', "
$1
$2", $pee);
$pee = preg_replace( '|
|', "$1
", $pee );
$pee = preg_replace('!
\s*( . $allblocks . '[^>]*>)\s*
!', "$1", $pee); // don't pee all over a tag
$pee = preg_replace("|
(|", "$1", $pee); // problem with nested lists
$pee = preg_replace('|
]*)>|i', "$1>
", $pee);
$pee = str_replace('
', '
', $pee);
$pee = preg_replace('!
\s*( . $allblocks . '[^>]*>)!', "$1", $pee);
$pee = preg_replace('!( . $allblocks . '[^>]*>)\s*
!', "$1", $pee);
if ($br) {
$pee = preg_replace_callback('/<(script|style).*?<\/\\1>/s', create_function('$matches', 'return str_replace("\n", "", $matches[0]);'), $pee);
$pee = preg_replace('|(?)\s*\n|', "
\n", $pee); // optionally make line breaks
$pee = str_replace('', "\n", $pee);
}
$pee = preg_replace('!( . $allblocks . '[^>]*>)\s*
!', "$1", $pee);
$pee = preg_replace('!
(\s*]*>)!', '$1', $pee);
if (strpos($pee, ') !== false)
$pee = preg_replace_callback('!()(.*?)<\/pre>!is', 'clean_pre', $pee );
$pee = preg_replace( "|\n
$|", '
', $pee );
$pee = preg_replace('/
\s*?(' . get_shortcode_regex() . ')\s*<\/p>/s', '$1', $pee); // don't auto-p wrap shortcodes that stand alone
return $pee;
}

После строки 77 вставляем:

$pee = preg_replace("/
\\s*(<{$allblocks}.*?)<\\/p>/ism", '$1', $pee);

Эта строка кода убирает параграф вокруг открывающего тэга блочного элемента. Такой простой вот трюк (я на него убил минут 30 отладки) решает проблему с форматированием.

Но, как оказалось, это еще не всё. Второй случай более редкий:

Что характерно, перед открывающим

должен стоять по крайней мере пробел (редактор WordPress его добавляет, так что условие вполне выполнимое).
Так выглядит результат работы неизменённого wpautop():

А так — исправленного:

В исправленном варианте на одну ошибку меньше Но всё равно нужно исправлять.

Здесь лечение более сложное: во-первых, нужно добавить одну функцию:

function wpautop_replace_callback($matches)
{
if ('

' == $matches[2]) {
return '

' . $matches[1] . $matches[2];
}

return $matches[1] . $matches[2];
}

и в функцию wpautop() под строку

$pee = str_replace('

', '

', $pee);

добавить

$pee = preg_replace_callback("/

(.*?)(<\\/{$allblocks}>)/s", 'wpautop_replace_callback', $pee);

После этого вроде всё хорошо. За исключением элементов и . Так как они могут иметь как блочный, так и строчный контекст, решение я пока не придумал. Единственное, что я могу посоветовать: если нужен или в блочном котексте, его нудно поместить в

<div><ins>
whatever
</ins></div>

По традиции, патч в формате unified diff, который исправляет проблему:

--- formatting.php.original 2008-04-25 03:46:17.000000000 +0300
+++ formatting.php 2008-07-07 05:44:52.000000000 +0300
@@ -59,6 +59,15 @@
return $text;
}

+function wpautop_replace_callback($matches)
+{
+ if ('

' == $matches[2]) {
+ return '

' . $matches[1] . $matches[2];
+ }
+
+ return $matches[1] . $matches[2];
+}
+
function wpautop($pee, $br = 1) {
$pee = $pee . "\n"; // just to make things a little easier, pad the end
$pee = preg_replace('|
\s*
|', "\n\n", $pee);
@@ -75,11 +84,13 @@
$pee = preg_replace('/\n?(.+?)(?:\n\s*\n|\z)/s', "

\n", $pee); // make paragraphs, including one at the end
$pee = preg_replace('|

\s*?

|', '', $pee); // under certain strange conditions it could create a P of entirely whitespace
$pee = preg_replace('!

([^<]+)\s*?((?:div|address|form)[^>]*>)!', "

$2", $pee);
+ $pee = preg_replace("/

\\s*(<{$allblocks}.*?)<\\/p>/ism", '$1', $pee);
$pee = preg_replace( '|

|', "$1

", $pee );
$pee = preg_replace('!

\s*([^>]*>)\s*

!', "$1", $pee); // don't pee all over a tag
$pee = preg_replace("|

()

|", "$1", $pee); // problem with nested lists
$pee = preg_replace('|

([^>]*)>|i', "

", $pee);
$pee = str_replace('

', '

', $pee);
+ $pee = preg_replace_callback("/

(.*?)(<\\/{$allblocks}>)/s", 'wpautop_replace_callback', $pee);
$pee = preg_replace('!

\s*([^>]*>)!', "$1", $pee);
$pee = preg_replace('!([^>]*>)\s*

!', "$1", $pee);
if ($br) {

Убиваем рекламу на bash.org.ru, или, Greasemonkey в действии

Vladimir — Thu, 03 Jul 2008 00:41:00 +0000

Убираем тупую рекламу с bash.org.ru при помощи GreaseMonkey

Многие (если не все) знакомы с ресурсом bash.org.ru. И, хотя юмор там в последнее время очень тупой, старые шутки почитать временами можно. Помимо тупого юмора лично меня на bash.org.ru больше всего раздражает не менее тупая реклама И если со всякими iframe и иже с ним AdBlock может бороться, то со вставками вида

Дэвид Блэйн раскукожил Firefox! Теперь в нём Яндекс!

он уже не справляется (так как они вставляются в вывод на сервере). Достал меня Дэвид Блейн. И Яндекс меня достал. И еще много что меня достало. Наверное, надо отдохнуть. Но речь не об этом. В общем, если меня что-то раздражает, я от этого избавляюсь (если читать, то с комфортом). Задачка как раз для Greasemonkey.

Ранее я уже приводил пример пользовательского скрипта для извлечения ASIN с amazon.com. Здесь используется нечто похожее.

Идея состоит в том, что для нормальных цитат после <hr class="iq"> сразу идет <script type="text/javascript" language="JavaScript"> и только потом <div class="q">, а в случае с рекламой <script> отсутствует; всё показано на рисунке:

Переходим к коду.

// ==UserScript==
// @name Bash.org.ru Ads Remover
// @namespace http://sjinks.org.ua/
// @include http://bash.org.ru/*
// @exclude http://bash.org.ru/abysstop
// @exclude http://bash.org.ru/abyssbest
// ==/UserScript==

var x = document.evaluate(
'//div[@id="quotes"]/hr[@class="iq"]/following-sibling::*[position()=1][@class="q"]',
document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null
);

for (var i=0; i<x.snapshotLength; ++i) {
var a = x.snapshotItem(i);
while (1) {
var b = a.nextSibling;
a = a.parentNode.removeChild(a);
if (b.tagName && 'div' == b.tagName.toLowerCase()) {
a = b;
}
else {
break;
}
}
}

x = document.evaluate('//iframe', document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
for (i=0; i<x.snapshotLength; ++i) {
a = x.snapshotItem(i);
a.parentNode.removeChild(a);
}

Устанавливаем, активируем и не смотрим на рекламу. Всё-таки XPath — это вещь!

Clicky 0.3b для WordPress и проблемы с JavaScript

Vladimir — Mon, 30 Jun 2008 22:58:52 +0000

Исправляем ошибки JavaScript в Clicky 0.3b для WordPress

В Австралии и США большой популярностью пользуется плагин Clicky — Web Analytics 2.0. Как следует из названия, Clicky является еще одним сервисом для анализа статистики веб-сайта. Судя по приведённой на сайте таблице, Clicky, образно говоря, «затыкает за пояс» даже такого конкурента, как Google Analytics.

Себе на сайты я ставить Clicky не пытался, но наблюдал его в действии в проекте, над которым работаю. Могу сказать, что сервис действительно мощный и удобный, а плагин Clicky для WordPress относится к разряду «сконфигурировал и забыл».

Всё хорошо, но по традиции есть одно «но»: если на странице используется, например, Prototype, то плагин начинает кидаться ошибками JavaScript.

А ошибка там банальная: при поиске cookies автор использовал конструкцию for ... in и предполагал, что все перебираемые свойства окажутся строковыми. Для «голого» браузера это справедливо. Но как только какой-либо скрипт (например, Prototype) расширит прототип Array своими методами, начинаются ошибки. А всё дело в том, что при добавлении новых свойств или методов в прототип объекта у нас нет возможности пометить их как неперечисляемые (non-enumerable), то есть такими, чтобы for ... in их пропускал.

Решение простое: использовать обычный for вместо for ... in. Что, собственно говоря, нижеприведённый патч и делает. А также добавляет секцию внутрь скрипта, чтобы не было проблем с XHTML-контентом.

diff -uwd -r clicky-original/clicky.php clicky/clicky.php
--- clicky-original/clicky.php 2007-06-14 12:33:40.000000000 +0300
+++ clicky/clicky.php 2008-06-25 17:40:07.000000000 +0300
@@ -27,15 +27,17 @@

if( get_option('wpgc_visitornames')) {
echo "
- \n";
}

Парочка аккордеонов

Vladimir — Sun, 13 Apr 2008 18:19:53 +0000

Несколько вариантов реализации меню-аккордеона с использованием библиотеки Prototype

Недавно в одном из проектов появилась необходимость использовать аккордеон (подобный используемому на Desert Ridge Marketplace). Любят заказчики дешевые эффекты, ничего здесь не поделаешь

Чем мне не понравился аккордеон на Desert Ridge — это полной зависимостью от JavaScript: если JavaScript выключен, навигация по сайту переставала работать. Это мне не понравилось, и я решил написать свой.

Представляю два решения:

Подменю сворачивается/разворачивается по щелчку, элементы меню не зависят друг от друга;
Подменю сворачивается/разворачивается по щелчку, при этом не может быть более одного развёрнутого подменю.

При выключенном JavaScript оба аккордеона трансформируются в двухуровневый список.

Поехали. Будем использовать следующую разметку:

<ul id="accordion">
<li>
<a href="#">Item 1</a>
<ul>
<li><a href="#">SubItem 1.1</a></li>
<li><a href="#">SubItem 1.2</a></li>
<li><a href="#">SubItem 1.3</a></li>
<li><a href="#">SubItem 1.4</a></li>
</ul>
</li>

<li class="active">
<a href="#">Item 2</a>
<ul>
<li><a href="#">SubItem 2.1</a></li>
<li><a href="#">SubItem 2.2</a></li>
<li><a href="#">SubItem 2.3</a></li>
<li><a href="#">SubItem 2.4</a></li>
</ul>
</li>

<li>
<a href="#">Item 3</a>
<ul>
<li><a href="#">SubItem 3.1</a></li>
<li><a href="#">SubItem 3.2</a></li>
</ul>
</li>

<li>
<a href="#">Item 4</a>
<ul>
<li><a href="#">SubItem 4.1</a></li>
<li><a href="#">SubItem 4.2</a></li>
</ul>
</li>
</ul>

С разметкой всё просто: обычный двухуровневый список; предполагается, что меню Item2 активно (то есть должно быть развёрнуто).

Оформим аккордеон при помощи CSS:

a { text-decoration: none; color: #00F; }
a:hover { text-decoration: underline; }
#accordion a { outline: 0; }

#accordion, #accordion ul, #accordion li {
list-style: none;
margin: 0;
padding: 0;
display: block;
}

#accordion {
border: 1px solid #CCC;
width: 150px;
}

#accordion ul {
margin-left: 40px;
}

#accordion > li {
border-bottom: 1px solid #CCC;
padding: 2px 5px;
}

#accordion > li:last-child {
border-bottom: 0;
}

#accordion li.active > a {
color: red;
}

Покажем уродство IE6, не понимающего CSS 2.1:

* html #accordion li {
border-bottom: 1px solid #CCC;
padding: 2px 5px;
}

* html #accordion li li {
border-bottom: 0;
padding: 0;
}

* html #accordion {
border-bottom: 0;
}

* html #accordion li.active a {
color: red;
}

* html #accordion li.active ul a {
color: blue;
}

За использование пяти лишних правил я и не люблю IE6 (и это мы еще используем простую разметку).

Переходим к JavaScript. В данных примерах я использую библиотеки Prototype и Scriptaculous Effects (всё очень легко переводится на jQuery).
Вариант 1: независимые элементы меню

$$('#accordion > li:not([class="active"]) ul').invoke('setStyle', { display : 'none' }).invoke('addClassName', 'collapsed');
$$('#accordion > li[class="active"] ul').invoke('addClassName', 'expanded');
$$('#accordion > li > a').invoke('observe', 'click',
function(e)
{
e.stop();
var ul = e.findElement('a').up('li').down('ul');
if (ul) {
new Effect.toggle(ul.toggleClassName('collapsed').toggleClassName('expanded'), 'blind');
}
}
);

Рабочий пример для первого варианта.

Вариант 2: развёрнуто не более одного меню

$$('#accordion > li:not([class="active"]) ul').invoke('setStyle', { display : 'none' }).invoke('addClassName', 'collapsed');
$$('#accordion > li[class="active"] ul').invoke('addClassName', 'expanded');
$$('#accordion > li > a').invoke('observe', 'click',
function(e)
{
e.stop();
var ul = e.findElement('a').up('li').down('ul');
if (ul) {
if (ul.hasClassName('collapsed')) {
var c = $$('#accordion ul:not([class="collapsed"])')[0];
if (c) {
new Effect.BlindUp(c.toggleClassName('collapsed').toggleClassName('expanded'));
}
}
new Effect.BlindDown(ul.toggleClassName('collapsed').toggleClassName('expanded'));
}
}
);

Рабочий пример для второго варианта.

Всё очень просто!

Скрипт для Greasemonkey для извлечения ASIN с amazon.com

Vladimir — Mon, 07 Apr 2008 21:57:26 +0000

Работу можно получить, даже если часовая ставка в 4 раза превышает ту, что хочет заказчик

Сегодня (вернее, уже вчера) мне попался заказчик, которому нужен был скрипт для Greasemonkey, который бы мог вытаскивать ASIN из URL'ов на amazon.com и отображать их.

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

// ==UserScript==
// @name Amazon ASIN Extractor
// @namespace http://sjinks.org.ua/
// @include http://www.amazon.com/*
// @include http://amazon.com/*
// ==/UserScript==

var links = document.evaluate(
'(//div[contains(@id, "title_")]/a[contains(@href, "/dp/")])|(//strong[@class="sans"]/a[contains(@href, "/dp/")])|(//td[@class="dataColumn"]//td/a[contains(@href, "/dp/")])',
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null
);

for (var i=0; i<links.snapshotLength; ++i) {
var a = links.snapshotItem(i);
var href = a.getAttribute('href');
var t = href.match(/\/dp\/([A-Z0-9]{10})\//);
if ('undefined' != typeof t[1] && 10 == t[1].length) {
var div = document.createElement('div');
var strong = document.createElement('strong');
strong.appendChild(document.createTextNode('ASIN: '));
div.appendChild(strong);
div.appendChild(document.createTextNode(t[1]));
a.parentNode.insertBefore(div, a.nextSibling);
}
}

Для модификации для другого сайта просто меняется XPath внутри document.evaluate(), @include, регулярное выражение в href.match() и проверка в if.

Verbum sapienti sat est…

WP CodeBox и Prototype

Vladimir — Sat, 15 Mar 2008 16:11:10 +0000

Решение, позволяющее совместно использовать на одном сайте плагин WP Codebox и известную библиотеку Prototype

Намедни пришлось заставлять работать скрипт, использующий библиотеку Prototype, на сайте с WordPress, где стоял плагин WP CodeBox (ранее я уже писал о нём). Сразу обратил внимание, что всё работало как-то криво, выскакивала куча непонятных ошибок. Лишь позже, просмотрев весь JavaScript, я понял, в чём была проблема.

В файле /wp-content/plugins/wp-codebox/js/codebox.js есть три магические строчки:

function $(id) {
return document.getElementById(id);
}

Эта функция конфликтует с одноимённой функцией из Prototype (причём последняя имеет гораздо больше возможностей). Решается всё просто:

if ('undefined' == typeof $) {
function $(id) {
return document.getElementById(id);
}
}

Жаль только, что на поиски бага ушло много времени…