Helpers for vanilla JavaScript.
Download a latest package or use Composer:
composer require frontpack/lucy.js
Include src/dom.js
.
LucyDom.getById(document, 'element-id');
LucyDom.findAll(document, 'selector'); // returns elements collection
LucyDom.find(document, 'selector'); // returns one element
LucyDom.getClosest(element, 'selector');
LucyDom.each(document, 'selector', function (element, info) {
console.log(info.index);
console.log(info.isFirst);
console.log(info.isLast);
});
LucyDom.hasClass(element, 'class-name');
LucyDom.addClass(element, 'class-name');
LucyDom.removeClass(element, 'class-name');
LucyDom.toggleClass(element, 'class-name');
Element events
LucyDom.onEvent(eventTarget, 'eventName', handler);
// for example
LucyDom.onEvent(myElement, 'click', function (event) {
console.log('Clicked!');
console.log(this); // this === myElement
});
Delegated events
LucyDom.onChildEvent(eventTarget, 'child selector', 'eventName', handler);
// for example
LucyDom.onChildEvent(myElement, 'a.ajax', 'click', function (event) {
console.log('AJAX click');
console.log(this); // this === child
});
Include src/bem.js
.
var bem = new LucyBem(document);
// blocks
bem.eachBlock('block', function (block, info) {
block.hasModifier('xyz');
block.addModifier('xyz');
block.removeModifier('xyz');
block.toggleModifier('xyz');
console.log(info.index);
console.log(info.isFirst);
console.log(info.isLast);
});
// events
bem.onElementEvent('block', 'element', 'click', function (element, event) {
element.hasModifier('xyz');
element.addModifier('xyz');
element.removeModifier('xyz');
element.toggleModifier('xyz');
});
Include src/modal.js
.
var myModal = new LucyModal('My Title', function (modal) {
console.log('Modal opened!');
modal.title.textContent = 'Hello Title!';
modal.body.innerHTML = '<p>Modal content</p>';
modal.closeButton.setAttribute('title', 'Close this');
}, function (modal) {
console.log('Modal closed!');
});
License: New BSD License
Author: Jan Pecha, https://www.janpecha.cz/