Конвертер валют

В комментариях к прошлой статье «Создаём валютный информер с помощь PHP и JavaScript» читатель с ником php-user предложил хороший вариант усовершенствования скрипта.

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

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

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

Определим план работ.

1) Изменить разметку элементов списка.

В исходном варианте информера каждая запись выводится в виде

<li>100 USD = 791.9900 грн.</li>

Чтобы сделать значения редактируемыми их нужно как-то выделить, например, с помощью тега span. Например, так:

<li><span class="editable">100</span> USD = <span class="editable">791.9900</span> грн.</li>

2) Сделать поля редактируемыми.

Эту задачу решим с помощью плагина Jeditable.

3) Написать функцию пересчета.

Эта функция будет вызываться после того, как посетитель завершит ввод нового значения. Мы используем событие, которое инициирует плагин Jeditable.

Переходим к реализации.

Разметка

Чтобы немного упростить себе жизнь, и не формировать HTML разметку напрямую с помощью JS кода, используем шаблонизатор — плагин Templates.

Работать с ним несложно.

Прежде всего, на страницу (index.html) добавим шаблон для элементов списка.

<script id="rateTemplate" type="text/x-jquery-tmpl">
	<li><span class="editable ${curCode}">${nominal}</span> ${curCode} = <span class="editable UAH">${value}</span> грн.</li>
</script>

Здесь обратите внимание на несколько моментов.

1) Для скрипта нужно установить атрибут id, чтобы мы потом могли к нему обратиться.

2) Атрибут type должен быть равен text/x-jquery-tmpl.

3) Переменные, которые будет заменять шаблонизатор, указываем в фигурных скобках со знаком $ перед открывающей скобкой.
В данном случае переменных три:
${curCode} – код валюты;
${nominal} – номинал;
${value} – значение в гривнах.

Для того, чтобы сформировать список используем следующий код (в файле script.js).

var rates = [];
$(data).find('Valute').each(function(key, value) {
	var curCode = $(value).find('CharCode').html();
	if (-1 != $.inArray(curCode, curCodes)) {
		var n = $(value).find('Nominal').html();
		var v = $(value).find('Value').html();
		var r = parseFloat(v) / parseFloat(n);
		var data = {
			curCode: curCode,
			nominal: n,
			value: v,
			rate: r
		};
		rates.push(data);
	}
});
//убираем сообщение о загрузке
$('#rates').html('');
//вставляем данные
$('#rateTemplate').tmpl(rates).appendTo('#rates');

Этот скрипт находит записи с данными о валютах (подробно этот алгоритм мы рассматривали в прошлой статье) и для каждой валюты формирует хеш data (строки 8-13). Обратите внимание, что имена элементов хеша совпадают с именами переменных в шаблоне. После этого, добавляем хеши в массив rates (строка 14).

Заметьте, что в хеше мы сохраняем не только данные для шаблона, но и курс каждой валюты — rate (строка 12).

Шаблонизатор запускается с помощью метода tmpl (строка 20), которому мы передаем массив rates. В результате, будет сформирована разметка тегов li, которую мы и вставляем в список (с помощью метода appendTo).

После выполнения этой операции разметка элементов списка будет выглядеть следующим образом

<li><span class="editable USD">100</span> USD = <span class="editable UAH">791.9900</span> грн.</li>

Как видите, мы добавили код валюты в атрибут span для каждого тега span. Таким образом, нам будет проще определить направление конвертации.

Делаем значения редактируемыми.

Подключаем плагин Jeditable.

<script src="js/jquery.jeditable.mini.js"></script>

И вызываем его метод editable для всех элеменов с классом editable. В первом параметре этого метода передаём функцию-обработчик, которая будет вызвана после завершения редактирования, во втором – хеш с настройками плагина.

$('.editable').editable(function(value, settings) {
	var curField = $(this);
	//определяем направление перевода
	if (curField.hasClass('UAH')) {
		//гривны -> выбранная валюта
		//определяем span в который нужно вставить результат и код валюты
		var target = curField.parent().children('span').eq(0);
		var currency = target.attr('class').split(' ')[1];
		//конвертируем
		target.html(convert('UAH', currency, value, rates));
	}
	else {
		//выбранная валюта -> гривны
		//определяем span в который нужно вставить результат и код валюты
		var target = curField.parent().children('span').eq(1);
		var currency = curField.attr('class').split(' ')[1];
		//конвертируем
		target.html(convert(currency, 'UAH', value, rates));
	}
	return value;
}, {
	tooltip   : 'Click to edit...',
	style   : 'display: inline'
});

Настроек немного. tooltip – подсказка, которая появляется при наведении курсора на редактируемое поле, style – стиль, используемый для формы редактирования.

Обработчик в параметре value получает введённое посетителем значение. Для того, чтобы выполнить конвертацию, кроме этого значения нам необходимо знать направление перевода и код валюты.

Код валюты можно получить из атрибута class, а направлений обмена всего два: из выбранной валюты в гривны и наоборот.

Сначала мы определяем, редактируется ли значение в гривнах (строка 4). Если да, находим первый тег span в данном элементе списка, и определяем код валюты (строки 7 и 8). Затем вызываем функцию convert, которая и выполняет преобразование.

Если посетитель редактирует значение валюты и хочет получить результат в гривнах, то алгоритм работы практически тот же. За исключением того, что нужно найти второй тег span и изменить направление перевода при вызове функции convert (строки 12-19).

Незабудьте, что для правильной работы платина Jeditable, обработчик должен вернуть введённое пользователем значение (строка 20).

Функция convert

Выполняет конвертацию одной валюты в другую. Коды валют необходимо указать в параметрах from и to. value – количество денег в валюте с кодом, указанным в параметре from. rates – массив с данными валют.

function convert(from, to, value, rates) {
	var v = parseFloat(value);
	if (isNaN(v)) {
		return '0';
	}
	var curRate, result;
	$(rates).each(function(i, currency) {
		var breakIt = false;
		if ('UAH' == from) {
			if (to == currency.curCode) {
				result = (v/parseFloat(currency.rate)).toFixed(2).toString();
				breakIt = true;
			}
		}
		else {
			if (from == currency.curCode) {
				result = (v*parseFloat(currency.rate)).toFixed(2).toString();
				breakIt = true;
			}
		}
		return !breakIt;
	});
	return result;
}

Прежде всего, проверяем допустимость введённого пользователем значения (строки 2-5).

Затем ищем указанную валюту в массиве rates (строка 7). При этом учитываем направление перевода (строка 9). Если указанная валюта найдена – конвертируем значение и прекращаем дальнейший поиск.

Обратите внимание, что для того чтобы прервать выполнение метода each необходимо вернуть false (переменная breakIt).

Заключение

Как видите, немного кода, и обычный информер стал гораздо полезнее 🙂

Если кто-то хочет предложить ещё варианты усовершенствования, пишите, обсудим!

Интересно почитать

Четыре этапа поиска клиентов для компаний на б2б-рынке

Увеличение продаж в ресторане — креативное решение сложной задачи