блокирование кнопок и полей ввода, карринг

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

в идеальном мире задача решается очень просто: element.disabled = true. Это сделает поле неактивным, а также применит к нему css-правила из селектора [disabled]. В реальности всенародный браузер не понимает таких селекторов, поэтому на элемент приходится навешивать дополнительный класс, например, disabled. Впрочем, это имя не всегда устраивает верстальщиков, поэтому хорошо бы иметь возможность задать другой класс.

в посте «стандарты для расширения Element.Methods» был описан шаблон функции для расширения:

function (element) {
    element = $(element);
    // …
    return element;
}

в этот шаблон мы добавляем параметр (опциональное имя класса) и пару строк, выполняющих нужные нам действия:

Element.Methods.disable = function(element, className) {
    element = $(element);
    element.disabled = true;
    element.addClassName(className || 'disabled');
    return element;
}

решение почти готово, осталась только одна деталь: в пару к функции блокирования неплохо бы иметь и ее зеркальную противоположность. Она будет отличаться только значением для свойства disabled, и работающим с именем класса методом. А для того, чтобы избежать копипаста, мы применим технику карринга (currying):

function toggle(state, method, element, className) {
    element = $(element);
    element.disabled = state;
    element[method](className || 'disabled');
    return element;
};
Element.Methods.disable = toggle.curry(true, 'addClassName');
Element.Methods.enable  = toggle.curry(false, 'removeClassName');

здесь используется шаблонная функция четырех параметров, первые два из которых мы фиксируем разными значениями для того, чтобы получить два зеркальных метода. Того же эффекта можно было добиться конструкцией типа disable = function(a, b){ toggle(1, 2, a, b) }, но метод .curry() на мой взгляд элегантнее и проще читается

Артемий Трегубенко,
, ,

comments powered by Disqus