frontpack/lucy.js

Helpers for vanilla JavaScript.

v0.1.6 2022-02-05 13:13 UTC

Conflicts

• inteve/assets-manager: <0.4.3

BSD-3-Clause

• Jan Pecha

README

Helpers for vanilla JavaScript.

Installation

Download a latest package or use Composer:

composer require frontpack/lucy.js

DOM & events

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
});

BEM

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');
});

Modal

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/