css-cjs

Небольшой js фреймворк для работы с CSS классами DOM элементов

---

Для начала работы вы можете:

1.Воспользоваться NPM, чтобы добавить фреймворк в свой проект. Для этого: npm i --save-dev css-cjs После чего мы можете импортировать Cjs в свой проект: import Cjs from './node_modules/css-cjs/production/bundle'; 2.Если вы не хотите использовать NPM, вы можете скачать фреймворк с Github и подключить файл сборки (лежит в "production/bundle.js") через тег script.

Если вы воспользовались NPM и импортировали Cjs в свой проект, теперь вы можете просто начинать работать.

Небольшой нюанс о котором вам нужно знать, если вы подключаете фреймворк через тег script описан в самом низу.

Мини-документация

import Cjs from './node_modules/css-cjs/production/bundle';

Cjs('.class1');
// Вернет объект, у которого свойство 'items'
// будет содержать 1-й найденный DOM элемент с класом 'class1';

Если передать вторым аргументом 'true', то вернется объект у которого свойство items будет содержать массив из всех элементов с классом 'class1':

Cjs('.class1', true);

Вы можете проверить наличие определенного класса у полученного DOM элемента с помощью метода has().

<div class='class1 class2'></div>
<div class='class1 class3'></div>

const item = Cjs('.class1'); // первый найденный элемент
const arr = Cjs('.class1); // массив из элементов с классом 'class1'

console.log(item.has('class2')) // Вернет true. 
console.log(arr.has('class2')) // [true, false]

Вы можете добавить или удалить определенный класс у полученного DOM элемента с помощью методов add() и remove().

<div class='class1 class2'></div>
<div class='class1 class3'></div>

const item = Cjs('.class1'); // первый найденный элемент
const arr = Cjs('.class1); // массив из элементов с классом 'class1'

item.add('class3') // получиться <div class='class1 class2 class3'></div>
arr.add('class4').remove('class1') 
/* 
    Получим:
        <div class='class2 class4'></div>
        <div class='class3 class4'></div>
*/

Вы можете добавлять/удалять ("туглить") определенный класс с помощью метода toggle();

    <div class="class1"></div>
    <div class="class1"></div>
    <div class="class1"></div>
    <div class="class1"></div>
    <div class="class2"></div>

    const arr = Cjs('.class1', true);

    document.addEventListener('click', e => {
            a.toggle('class4');
    });

Ко всему прочему вы можете работать с css свойствами DOM элементов:

const item = Cjs('.class1');
const arr = Cjs('.class1', true);

console.log(item.css('width')) // вернет значение width DOM элемента
console.log(arr.css('width')) // вернет массив значений width DOM элементов
item.css('width', '100px'); // установить для элемента значение width = 100px
arr.css('width', '100px'); // установить для массива элементо значение width = 100px
item.css({
    width: '100px',
    height: '100px',
    background: '#ccc'
}); // установить для эемента значения width & height = 100px, а также background #ccc
arr.css({
    width: '100px',
    height: '100px',
    background: '#ccc'
}); // установить для массива эементов значения width & height = 100px, а также background #ccc

Нюанс при подключении через тег script

Если вы подключаете фреймоворк через тег script, то, чтобы работать вам нужно делать следующее:

<script src="./production/bundle.js"></script>

const f = Cjs.default;

Используйте f также как я использовал Cjs в примерах выше (когда подключал исопльзуя import).

То есть:

const item = f('.class1');

console.log(item.has('class1'));

item.add('some1');
item.remove('some1');
...

Почему этот ужас присутствует описано тут:

https://github.com/webpack/webpack/issues/3929