dooli v1.9.6

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()

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

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

Таймер

Чтобы установить таймер на 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!

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 может быть любым другим элементом