Green Light

A lightweight library for javascript


DOM manipulation

Green Light makes the dom manipulation easier to use and with less code.


On DOM loaded event

To run code after the dom loaded all you have to do is to pass a function as a parameter inside the GL function

                        GL(() => console.log('DOM loaded'));
                    

NEW! Variables

GL offers support for variables inside HTML.

                        <h1><% title %><‌/h1>
                    
                        GL.variables({title: 'Green-Light'});
                    

Output:

                        <h1>Green-Light<‌/h1>
                    

Selectors

With GL you can edit all elements that match the selector.

                        GL(() => GL('.sample_code').css('color', 'red'));
                    

The code shown above takes all the elements with the 'sample_code' class and applies the css that has been specified in the .css method

.css method also allows you to pass multiple styles by using an object.

                        GL('.sample_code').css({color: 'red', backgroundColor: 'black'});
                    

If you only want to edit the first element that matches the query, put a ! before the selector, like it's shown below. GL will only select the first element from the node list and pass the methods to it.

                        GL('!.sample_code').css({color: 'red', backgroundColor: 'black'});
                    

Selector methods

For each selector there are 14 methods to use.

Note: you can use multiple methods on a selector.

                            GL('.sample_code').css('color', 'red').secureHTML('Wow! This is awesome');
                        

.css method

You can pass css styles in 2 ways: pass 2 parameters that represents the style and the value or pass an object.

Note: you can only pass multiple styles if the first parameter is an object

                        GL('.sample_code').css('color', 'red');
                    
                        GL('.sample_code').css({color: 'red'});
                    

Multiple parameters on .css method

                        GL('.sample_code').css({color: 'white', backgroundColor: 'red', textDecoration: 'underline'});
                    

.on method

Allows you to add listeners to all the items from the selection.

Note: if you pass an invalid or not supported listener, you will get an error in the console.

                        GL('img').on('load', () => console.log('image loaded'));
                    

.each method

Iterates over all the elements that matches the selector.

Note: You can use the this keyword only if you use a normal function. Arrow function is not supported

                        GL('.multiple_elements').each(function() {console.log(this)});
                    

.remove method

Removes the elements.

Note: this action is irreversible

                        GL('.multiple_elements').remove();
                    

This is not supported and will not show the element like the normal function:

                        GL('.multiple_elements').each(() => console.log(this));
                    

.toggle method

Toggles a class from the elements that match the selector

                        GL('.multiple_elements').toggle('special_element');
                    

.class method

Adds one or more classes.

                        GL('.multiple_elements').class('special_element');
                    

To add more elements at a time, you can pass an array of strings.

Note: only the strings from the array will be recognized as classes.

                        GL('.multiple_elements').class(['special_element', 'custom_element', 'new_element']);
                    

.create method

Creates a new element and appends it to the elements in the collection.

                        GL('.multiple_elements').create('h3');
                    

This method only creates a element without setting an inner html. You will need to use one of the 2 methods from below.

.secureHTML method

Sanatizes the html before setting the content of the element.

Note: you can't make other html tags using secureHTML and you can't run code from script tags

                        GL('.multiple_elements h3').secureHTML('<script>alert('test')<‌/script>');
                    

.dangerousHTML method

Sets the content of the elements exactly how you put it in the string.

Note: you can't make other html tags using secureHTML

                        GL('.multiple_elements h3').dangerousHTML('<script>alert('test')<‌/script>');
                    

The script tag inside the dangerousHTML will run.

.data method

Returns the data atrribute if any from the first element.

                        GL('.multiple_elements').data('title');
                    

This will get the title attribute from a html tag. ( in our example is 'New element' )

                        <h3 data-title='New element'><‌/h3>
                    

.val method

Returns the value of the first match

                        GL('.multiple_elements').val();
                    

.html method

Returns the inner html of the first match

                        GL('.multiple_elements').html();
                    

.len method

Returns the number of elements that match the selector

                        GL('.multiple_elements').len();
                    

Forms

GL offers support for form validation.

.validate method

Validates a form and then calls a function.

Note: This method only accepts an object as a parameter

                        GL('#my_form').validate({rules: {inputName: {required: true, errorName: 'username', minLength: 4}}, success: () => console.log('validated'), error: () => console.error('an error occured.')});
                    

rules: is an object that contains the input name with all the requirements.

required: make an input required or not. If required and empty, the error callback it's getting called.

errorName: if you don't want to see the input name value in the error message, you use this parameter.

minLength: sets the input min length. Only applies for passwords and texts.

maxLength: sets the input max length. Only applies for passwords and texts.

success: callback called if the form is valid.

error: callback called if the form isn't valid.

What's new in <% gl_version %>?

Here is a list with all the new stuff from green-light.


Variables

GL offers support for variables inside HTML.

                        <h1><% title %><‌/h1>
                    
                        GL.variables({title: 'Green-Light'});
                    

Output:

                        <h1>Green-Light<‌/h1>
                    

Forms

GL offers support for form validation.

.validate method

Validates a form and then calls a function.

Note: This method only accepts an object as a parameter

                        GL('#my_form').validate({rules: {inputName: {required: true, errorName: 'username', minLength: 4}}, success: () => console.log('validated'), error: () => console.error('an error occured.')});
                    

rules: is an object that contains the input name with all the requirements.

required: make an input required or not. If required and empty, the error callback it's getting called.

errorName: if you don't want to see the input name value in the error message, you use this parameter.

minLength: sets the input min length. Only applies for passwords and texts.

maxLength: sets the input max length. Only applies for passwords and texts.

success: callback called if the form is valid.

error: callback called if the form isn't valid.


Useful methods

<% gl_version %> offers new methods to make work easier.

.http method

Creates an xml http request.

Note: if you don't pass the success parameter the request data won't be used. Error parameter reacts the same.

                        GL.http({method: 'GET', url: 'api.example.com', requestData: {someData: 'yes'}, success: () => console.log('success'), error: () => console.log('error :(')});
                    

Arguments you can pass: method, url, requestData, success -> function, error -> function

.len method

Returns the object length

                        GL.len('123456789'); // 9;
                    
                        GL.len([1, 2, 3, 4]); // 4;
                    
                        GL.len({prop1: '1', prop2: '2'}); // 2;
                    
                        GL.len(true); // error;
                    

Useful methods and functions

Green Light offers methods, functions and properties to make developers work faster


Methods

.isArray method

Checks if the object passed it's an Array or not.

                        GL.isArray([1, 2, 3]); // true;
                    

.isIterable method

Checks if the object passed can be iterated.

                        GL.isIterable('123456789'); // true;
                    
                        GL.isIterable({name: 'Alex', username: 'AlexS'}); // false;
                    

.calcPercent method

Calculates the percent between a value and the max.

                        GL.calcPercent(2, 10); // 20%;
                    

.onKeyPress method

Listents to key press

                        GL.onKeyPress('e', () => console.log('e has been pressed'));
                    

If you want to to listen to all the keys, the first parameter should be *

                        GL.onKeyPress('*', (key) => console.log(`${key} has been pressed.`));
                    

Note: you can also add key listeners on elements

                        GL('#nice_element').onKeyPress('e', () => console.log('e has been pressed on the element with id "nice_element" '));
                    

.http method

Creates an xml http request.

Note: if you don't pass the success parameter the request data won't be used. Error parameter reacts the same.

                        GL.http({method: 'GET', url: 'api.example.com', requestData: {someData: 'yes'}, success: () => console.log('success'), error: () => console.log('error :(')});
                    

Arguments you can pass: method, url, requestData, success -> function, error -> function

.len method

Returns the object length

                        GL.len('123456789'); // 9;
                    
                        GL.len([1, 2, 3, 4]); // 4;
                    
                        GL.len({prop1: '1', prop2: '2'}); // 2;
                    
                        GL.len(true); // error;