README

JavaScript libraly - Dooli

v1.9.6

install

npm i dooli

Мини библиотека, реализованная на ES6. Пример:

Dooli("dooli")
    .css("color: #F00", "font-size: 23px")
    .addClass("test", "test-new-dooli")
    .removeClass("dooli", "test")
    .attr("data-type=0", "data-start=hi!")
    .html()

Методы библиотеки:

Метод	Описание	Параметры
Dooli	Устанавливет DOM элемент	`selector` - id или querySelectorAll `options` - объект, содержащий `isTag` если необходим `getElementsByTagName`
obj	возвращает установленный DOM элемент	не требуется
first	возвращает первый элемент	не требуется
getNodesByAttr	возвращает коллекцию по аттрибутам либо контекст	`attr` - (string), например, `[data-type="1"]`, `flag` - (boolean), если флаг, то вовращает коллекцию по поиску, иначе контекст `Dooli`
num	возвращает элемент по его позиции	`index` - позиция элемента
css	применяет CSS-стили к указанному элементу	параметры через запятую
html	Применяет или возвращает содержимое контейнера	Если указан `value`, то применит его, иначе вернет содержимое
addClass	добавляет CSS-классы для елемента	параметры через запятую
removeClass	удаляет CSS-классы для элемента	параметры через запятую
focus	задает фокус элементу	не требует
attr	задает 1 или несколько новых аттрибутов элементу	параметры через запятую
get	возвращает 1 или несколько аттрибутов элемента (массив)	параметры через запятую
show	показывает элемент	не требует
hide	скрывает элемент	не требует
width	возвращает ширину элемента	не требует
height	возвращает высоту элемента	не требует
prepend	добавляет 1 или несколько элементов в начало блока	параметры через запятую
append	добавляет 1 или несколько элементов в конец блока	параметры через запятую
click	устанавливает или вызывает обработчик элемента	`type` - тип события `callback` - коллбек `context` - контекст коллбека, если не указан, то принимает внутренний контекст
clone	клонирует элемент	не требует
addEvent	добавляем событие к элементу	`el (or null)` - куда вешаем событие `event` - название события (click, mousemove), `callback` - обработчик клика, `context` - контекст для обработчкика
removeEvent	удаляем событие у элемента	`el (or null)` - элемент `event` - название события (click, mousemove), `callback` - обработчик клика, `context` - контекст для обработчкика
bindEvent	применяет `removeEvent` и `addEvent` с таким же числом параметров
bindMultiple	применяет несколько обработчиков на элемент	`el (or null)`, `object` - объект событий с ключем названия ивента и его обработчиком

Методы, которые не возвращают результата можно чейнить.

Таймер

Чтобы установить таймер на 10 секунд, достаточно сделать так:

const time = require('dooli/modules/time.dooli');
time.timer(10, () => {
    alert('10 секунд прошло');
});

Можно также триггерить коллбек каждые n секунд, пока таймер не завершил свою работу

const time = require('dooli/modules/time.dooli');
time.timer(86400, () => {
    console.log('день прошел');
}, 1, (options) => {
    console.log(`до конца дня осталось: ${options.hours}:${options.minutes}:${options.seconds}`);
});

options - объект, который содержит в себе ключи days, hours, minutes, seconds, timeEnd до конца работы таймера

События

Навешивать события можно несколькими способами:

Dooli('button').click(callback);
Dooli('button').addEvent('click', callback /*, context */);
Dooli('button').bindEvent('click', callback /*, context */);
Dooli('button').bindMultiple({
    click: () => {},
    mousemove: () => {},
});

Ивенты

Все довольно понятно:

require('dooli/modules/events.dooli');
D.events.on('event', () => {
    // делаем что то при каждом триггере ивента event
});
D.events.once('event', () => {
    // делаем что то один раз при триггере ивента event
});
// Создаем кастомный ивент с именем event
D.events.trigger('event'/*, param1, param2, param3 */);

Стороннее расширение библиотеки

Вы также можете расширить стандарный функционал библиотеки, например:

// наследуемся
class MyDooli extends DooliAbstract {
  html() {
    console.log("Ваша реализация метода HTML");
  }
}

//и используем
(new MyDooli("element_id")).html();

Расширение модулей:

// Создаем новый модуль
D.myModule = {};
D.myModule.sayHi = () => alert('Привет!');

// Расширяем существующий
D.touch.SENSITIVITY_X = 200; // меняем чувствительность тача
D.touch.callbacks.callbackTouchBottom = () => {
    // создаем свой обработчик свайпа снизу вверх
};

Шаблонизатор

Пример, есть такая разметка:

<div id="dooli_tpl">
  <div>{text}</div>
</div>

И нам надо продублировать содержимое контейнера dooli_object и заменить все {text} на что-то полезное, то это можно сделать так:

const Template = require('dooli/modules/template.dooli');
let tpl = new Template();
tpl.init("dooli_tpl");
tpl.each(2) //дублируем 2 раза
   .parse("text", "Hello!"); //заменяем {text} на Hello!

Результат будет таким:

Hello!

Условия

<dooli:if var="first">Первое условие</dooli:if>
<div dooli-if-var="second">div will be hidden</div>

Управлять условиями и переменными можно так:

tpl.setIfBlock('first', false);
tpl.setIfBlock('second', false);

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

Итерация

<dooli:iterate id="iterateWrap">
    <div>я в цикле {count} раз. My name is {name}. I'm {age}.</div>
</dooli:iterate>

tpl.setIteration('iterateWrap', {
    data: [
        {
            name: 'Artem',
            age: 20,
        },
        {
            name: 'Anya',
            age: 24,
        },
    ],
});

setIteration принимает два аргумента: irerateWrap - id контейнера, data - массив объектов, которыми будет заполнена строка. В данном примере результат HTML будет таким:

<div>я в цикле 2 раз. My name is Artem. I'm 20.</div>
<div>я в цикле 2 раз. My name is Anya. I'm 24.</div>

dooli:iterate может быть любым другим элементом

Usage no npm install needed!