JavaScript

’рубрика’

Зацикливаем галерею на Lightbox 2

Август 26, 2012

Встала задача зациклить галерею на Lightbox 2. Задача откладывалась, поэтому над собственным решением не думаю. Выдалась минутка, нашел решение:

Когда же время дошло до практики, данный метод сразу откинул.

Алгоритм зацикливания элементарный:

  • когда галерея доходит до краев – перематываем ее;
  • всегда отображаем кнопки прокрутки, если более 1-го изображения.
Открываем на редактирование файл lightbox.js. Находим следующий код:
$lightbox.find('.lb-prev').on('click', function(e) {
  _this.changeImage(_this.currentImageIndex - 1);
  return false;
});
$lightbox.find('.lb-next').on('click', function(e) {
  _this.changeImage(_this.currentImageIndex + 1);
  return false;
});

Заменяем его на:

$lightbox.find('.lb-prev').on('click', function(e) {
	// cay
	if(_this.currentImageIndex == 0)
		_this.changeImage(_this.album.length - 1);
	else
		_this.changeImage(_this.currentImageIndex - 1);
	return false;
});
$lightbox.find('.lb-next').on('click', function(e) {
	// cay
	if (_this.currentImageIndex == _this.album.length - 1)
		_this.changeImage(0);
	else
		_this.changeImage(_this.currentImageIndex + 1);
	return false;
});

Эта замена позволит по достижении пользователем краев галереи двигаться далее.

В завершение находим следующий код:

Lightbox.prototype.updateNav = function() {
  var $lightbox;
  $lightbox = $('#lightbox');
  $lightbox.find('.lb-nav').show();
  if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show();
  if (this.currentImageIndex < this.album.length - 1) {
    $lightbox.find('.lb-next').show();
  }
};

Заменяем его:

Lightbox.prototype.updateNav = function() {
	var $lightbox;
	$lightbox = $('#lightbox');
	// cay -block-
	if ( this.album.length > 1 )
	{
		$lightbox.find('.lb-nav').show();
		$lightbox.find('.lb-prev').show();
		$lightbox.find('.lb-next').show();
	}
	//~ if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show();
	//~ if (this.currentImageIndex < this.album.length - 1) {
	//~ $lightbox.find('.lb-next').show();
	//~ }
	// cay -block- #
};

Эта модификация позволит отображать кнопки навигации только если в галерее более 1-го изображения.

Tags: ,
Записано в JavaScript, Программирование    |    Постоянная ссылка

Если array.length в JavaScript возвращает undefined

Август 26, 2012

Уже не в 1-й раз в своей практике программирования в стиле PHP + JavaScript сталкиваюсь с проблемой, что когда посредством AJAX PHP возвращает массив в формате JSON, узнать его длину в JavaScript невозможно. Речь идет об неассоциативном массиве. Например:

<?php
$array = array( 1, 2, 3 ); // неассоциативный массив
?>

Данный массив без заданных ключей (индексов). Доступ к элементу получается через порядковый номер $array[ 0 ].

Интересный факт заключается в том, что если пересортировать массив, а точнее собрать на основе 1-го – 2-й и сделать замену, то функция JavaScript "length" работать не будет. Выглядит это примерно так:

<?php
$array_1 = array( 1, 2 );
$array_2 = array();

$array_2[ 1 ] = $array_1[ 0 ];
$array_2[ 0 ] = $array_1[ 1 ];

$array_1 = $array_2;
?>

После возвращения массива $array_1 функция JavaScript "length" вернет "undefined".

Для избежания проблемы, сначала массив нужно пересортировать, а затем составить новый:

<?php
asort( $array_1 );

foreach ( $array_1 as $value ) {
	$array_2[] = $value;
}

$array_1 = $array_2;

Итог

Все сводится к тому, что элементы в массиве должны идти от 0 элемента без разрыва и числовые ключи не должны задаваться явно.

Записано в JavaScript, Программирование    |    Постоянная ссылка

Что делать, если json_decode возвращает пустую строку

Июль 19, 2012

Недавно столкнулся с проблемой. Решил продолжить разработку вне работы, дома, чтобы успеть сдать проект в срок. Однако, скопированный проект не стал работать на локальном сервере. Причина заключалась в том, что определенная команда вместе с параметрами отправляется на сервер с помощью POST запроса из JavaScript jQuery. Параметры передаются в отдельной переменной в формате JSON:

config.params = '{"products":"454,103,505","category":"7"}';

На стороне сервера происходит прием параметров:

$params = $_POST[ 'params' ];

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

$params = json_decode( $params );

На данном этапе и возникла проблема. После обработки переменной $params с помощью json_decode() она становилась пустой.

В процессе отладки я обратил внимание, что к отправляемой строке с параметрами в формате JSON к кавычкам добавлены обратные слэши.

Оказалось, что на локальном сервере параметр magic_quotes_gpc установлен в true, поэтому функция json_decode() не могла обработать строку.

Решение проблемы:

public function decode_params( & $params ) {
	if ( ! empty( $params ) ) {
		if ( get_magic_quotes_gpc() ) {
			$params = stripslashes( $params );
		}
		$params = json_decode( $params );
	}
}

Tags: ,
Записано в JavaScript, Программирование    |    Постоянная ссылка

Исправляем работу кнопки "Сегодня" в календаре JQuery UI Datepicker

Июнь 18, 2012

Недавно нужно было доработать календарь JQuery UI Datepicker. В настройках Datepicker можно задать показ кнопки "Сегодня" в левой нижней части календаря. Однако, при нажатии на кнопку происходит обычный возврат к сегодняшней дате, но не ее выбор. Если пользователь перемещается между месяцами, то кнопка быстро возвращает его к текущей дате.

Как и пользователи я понимаю кнопку "Сегодня", как выбор даты текущего дня с одновременным закрытием календаря.

В ходе очередных поисков по Интернету я пришел к следующему решению. После включения файла JQuery UI:

<script language="javascript" type="text/javascript" src="js/jquery.ui.datepicker-ru.js"></script>

необходимо добавить следующий код, чтобы переопределить функцию _gotoToday:

<script type="text/javascript">
$(function () {
	var _gotoToday = $.datepicker._gotoToday;
	$.datepicker._gotoToday = function( id ) {
		var target = $( id ),
			inst = this._getInst( target[0] );
		if ( this._get( inst, 'gotoCurrent' ) && inst.currentDay ) {
			inst.selectedDay = inst.currentDay;
			inst.drawMonth = inst.selectedMonth = inst.currentMonth;
			inst.drawYear = inst.selectedYear = inst.currentYear;
		}
		else {
			var date = new Date();
			inst.selectedDay = date.getDate();
			inst.drawMonth = inst.selectedMonth = date.getMonth();
			inst.drawYear = inst.selectedYear = date.getFullYear();
		}
		this._selectDate( id, this._formatDate( inst, inst.selectedDay, inst.drawMonth, inst.drawYear ) );
	}
});
</script>

Решения, которые я видел в Интернете работают, но в самом лучшем варианте после закрытия календаря курсор остается в поле для ввода, что меня не устраивало. В моем варианте я это исправил.

Tags: , , , , ,
Записано в JavaScript    |    Постоянная ссылка

Книги по программированию для Joomla, которых нет

Май 30, 2012

Сегодня в очередной раз прошелся по Интернету в поисках книг по программированию для CMS Joomla.

В частности меня интересует книга "Joomla! Programming (Joomla! Press)", которая написана специально под Joomla 2.5 и выпущена только 5 Апреля 2012. Купить ее на английском языке можно на Amazon.com:

Купить можно как в твердом переплете, так и в PDF формате (цена ниже). Со своей стороны я понимаю, что в иной раз и на русском языке прочитать книгу и понять то, о чем говорит автор, не так просто. Покупать же книгу на английском довольно рискованно. Хотя, зависит от метода изложения материала в конце концов, но тонкости все равно могут быть упущены.

Официальный сайт книги и там же можно скачать исходные коды примеров:

Могу только порадоваться, что данную книгу собираются перевести на русский и выпустить в издательском доме "Вильямс":

К сожалению, планируемая дата выхода: 4 квартал 2012. Значит ждать выхода можно не раньше Сентября.

В любом случае, это прогресс. Говорю так, потому что мой поиск в сторону других книг по программированию для Joomla, даже более ранней версии, хотя бы 1.5 закончился неудачно. Неудачно, потому что на русском языке книг нет. Переводят только об использовании самой CMS Joomla и всевозможных тонкостях настройки и оформления.

На английском меня заинтересовали следующие книги:

Сейчас вплотную сел за изучение Joomla, как версии 1.7, так и 2.5, поэтому интерес к книге "Joomla! Programming (Joomla! Press)" может к 4 кварталу 2012 ослабеть. Однако, прочитать уверен все равно захочется.

Tags: , , , , ,
Записано в JavaScript, Программирование    |    Постоянная ссылка

Отличие MVC Закрытой части сайта от Открытой в Joomla 1.7

Май 29, 2012

Выделю для себя два главных отличия Model View Controller Back End части от Front End:

  1. безопасность в формах осуществляется посредством токенов;
  2. контроллер отвечает за перенаправление.

Tags: , , , ,
Записано в JavaScript, Программирование    |    Постоянная ссылка

Добавление горячих клавиш к плагину WYSIWYG Inline Code Command

Май 29, 2012

Речь пойдет об изменении плагина WYSIWYG Inline Code Command, который я добавил ранее, чтобы иметь возможность выделять отдельные части текста с помощью тега <code>.

В прошлой записи я писал, как добавить горячие клавиши к кнопке плагина NoFollow.

В отличие от плагина NoFollow, плагин WYSIWYG Inline Code Command по-умолчанию уже имеет комбинацию клавиш:

ed.addShortcut ('alt+shift+c', 'Inline Code', 'mceWICC');

Как я и говорил в предыдущей записи, если используется комбинация с вхождением клавиши Shift, то следующий за ним символ, если это буква, должен быть большим. В связи с этим комбинация alt+shift+c не работает, т.к. символ "c" маленький.

Вносим изменения в следующий файл:
/wp-content/plugins/wysiwyg-inline-code-command/wicc-mce-plugin.php

Находим указанную выше строку и заменяем на:

ed.addShortcut ('alt+shift+C', 'Inline Code', 'mceWICC');

Сохраняем файл.

Заключение

В данном случае для изменения исходного файла плагина достаточно из Закрытой части WordPress перейти в раздел Плагины, а затем Редактор. После выбрать интересующий файл из списка и внести изменения.

Если горячие клавиши вдруг не работают, то стоит очистить кэш браузера.

Tags: , , , , , ,
Записано в JavaScript, WordPress, Программирование    |    Постоянная ссылка

Доработка плагина NoFollow: удаление rel и горячие клавиши

Май 29, 2012

У плагина NoFollow, который я ранее добавил к Визуальному редактору, есть два недостатка:

  1. он позволяет добавить атрибут rel="nofollow", но не удалить при повторном нажатии;
  2. кнопку нужно постоянно нажимать мышью.

Для меня это неудобство, которое я решил по-быстрому исправить.

Все изменения вносятся в следующий файл (на хостинге):
/wp-content/plugins/nofollow-link/mce/nofollow/editor_plugin.js

Удаление rel=nofollow

Заменяю следующий код:

if(ed.selection.getNode().nodeName=="A"){
	ed.selection.getNode().setAttribute("rel", "nofollow");
}

на:

if(ed.selection.getNode().nodeName=="A"){
	/* cay 1 */
	if (ed.selection.getNode().getAttribute("rel") == null) {
		// cay: was only this line
		ed.selection.getNode().setAttribute("rel", "nofollow");
	} else {
		ed.selection.getNode().removeAttribute("rel");
	}
	/* cay 1 # */
}

Комментарий с добавлением "cay" определяет в каком месте я вносил изменения. Потом можно будет с помощью поиска и использования команды Терминала "grep" отследить мои поправки в исходных кодах. Также справа от своей метки я добавляю номер изменения (не всегда).

Теперь, если атрибут rel установлен в nofollow, то при повторном нажатии атрибут будет удален.

Добавление горячих клавиш

В качестве горячих клавиш я решил использовать следующую комбинацию:
ctrl+shift+X

После следующего кода:

// Register buttons
ed.addButton('nofollow', {
	title : 'No Follow',
	cmd : 'mceNoFollow',
	image: url + '/nofollow-tag.png'
	});

добавляем:

// cay 2
ed.addShortcut ('ctrl+shift+X', 'Add NoFollow', 'mceNoFollow');

Чтобы не забыть комбинацию клавиш, добавим всплывающую подсказку. Вносим поправку в следующую строку:

title : 'No Follow',

Заменяем на:

title : 'No Follow (ctrl+shift+X)',

Сохраняем файл.

Заключение

Стоит отметить, что при использовании функции ed.addShortcut и комбинации, включающей кнопку Shift, символ клавиши должна писаться с большой буквы, иначе ничего не будет работать.

В функции ed.addShortcut последним параметром передается зарегистрированная под кнопку команда mceNoFollow. Ее название можно найти чуть выше по коду:

ed.addCommand('mceNoFollow', function() {

Если в Визуальном редакторе комбинация горячих клавиш не работает, то необходимо очистить кэш браузера.

Tags: , , , , , ,
Записано в JavaScript, WordPress, Программирование    |    Постоянная ссылка