Chooles
Collection of everyday tools that are too small to belong to a dedicated lib
Usage
Here is the simplest way to init and use the tools.
You can find more examples in the examples/
directory of this repo.
import Chooles from 'chooles';
Chooles.ready(() => { console.log('ready'); });
Table of Contents
Installation
npm install chooles
yarn add chooles
Methods
dom
Ready
This methods allows to execute a function after a specific ready state, or execute it right away if the state is already passed. Params:
- function: the function to execute the page has loaded
- readyState(string)(default 'loading'): the ready state after which the method must be executed
const meth = () => alert('ready');
Chooles.ready(meth);
Chooles.dom.ready(meth);
Chooles.ready(meth, Chooles.dom.readyStates.complete);
injectScript
Injects a script at the end of the head of the page. Chech first if a script with provided exist already. Params:
- src(string): Script source url
- id(string): script id
Chooles.injectScript('https://cdnjs.cloudflare.com/ajax/libs/impress.js/0.5.3/impress.js', 'id');
Chooles.dom.injectScript('https://cdnjs.cloudflare.com/ajax/libs/impress.js/0.5.3/impress.js', 'id');
closest
Gets the closest parent of an element identified by a selector Params:
- $el(string|domNode): either a domNode or a querySelector
- selector(string): querySelector of the element parent
Chooles.closest('.foo', '.bar');
Chooles.dom.closest(document.querySelector('.foo'), '.bar');
forms
Methods to manipulate forms
serializeFormToJson
Gets a domNode, find all form controls in it then transform their values to a js object. Params:
- $form(domNode): a domNode containing form controls
const json = Chooles.form.serializeFormToJson(document.querySelector('.foo'));
jsonToFormData
Gets a json representation of a form and serialize it to FormData. Params:
- json(object): object from serializeFormToJson()
const formData = Chooles.form.jsonToFormData({
foo: 'bar',
});
serializeForm
Receives a domNode and generate FormData from its form controls (serializeFormToJson + serializeForm). Params:
- $form(domNode): a domNode containing form controls
const formData = Chooles.form.serializeForm(document.querySelector('.foo'));
Abstract Component
Abstract class for JS components
import { AbstractComponent } from 'chooles';
export default class MyComponent extends AbstractComponent {
constructor(globals) {
super(globals, { selector: '.js-header' });
}
if (this.exists) {
...
}
}
Contribute
File structure
chooles/
├──src/ * our source files that will be compiled to javascript
| ├──app/ * Lib sources
│ │
| └──examples/ * examples sources
│ ├──index.pug * our index.html
│ │
│ ├──html/ * where you keep your pug templates
│ │ └──layout.pug * the main pug layout
│ │
│ └──app/ * JavaScript/ES2015 files
│
├──test/ * Jest test definitions
│
├──webpack/ * Webpack configuration files
│ ├──webpack.config.base.js * Base config
│ ├──webpack.config.js * Development overrides
│ └──webpack.config.prod.js * Production overrides
│
└──package.json * package.json
Getting Started
Dependencies
You need to install the following on you system
-
node
andnpm
- Ensure you running Node version >= 8.0.0
Installing
-
fork
the github repo https://github.com/gairal/chooles -
clone
your fork -
npm install
to install all dependencies -
make start
ornpm start
to start the dev server
Running the app
After all dependencies are installed, just run make start
to start a local server using webpack-dev-server
which will watch your files and build them.
webpack-dev-server will display the address and port of your server (by default, http://0.0.0.0:3000
).
Build commands
Server
# build files then launch the server and watch files
make start
Build files
# build files in ./build/ (Webpack, Sass, Pug) and validate them
make build
# "compile" files in ./dist/
# minify and concatenate assets
make release
Validate files
# runs the validations eslint and jest tests
make test