Front-End JavaScript library Revolver -- is a simple, powerfull and lightweight(only 18.5Kb of compressed code) solution with no dependencies for work with DOM elements and their properties including a lot of complited modules for make tabs, slider, modal windows, ajax requests and other things.
Engine includes auto initialization modules. To run library under the document you will need to connect bootstrap and place a code in #Revolver script tag. Example:
<script src="./app/revolver.js?prod=1.5.3" id="Revolver"> // use namespace $ for RR library let $ = RR; $.dom('.someclass:first-child'); </script>
You can use any namespace index for better code style.
Revolver automatically connect a bootstrap css from library and listen window size changes to switch grid schema to switch it into mobile mode.
- mobile.css: schema for screens less then 320px to 1920px and mobile browser UA;
library keeps some variables in self namespace:
$.isM() - if mobile browser this code returns true.
$.sizes[] - static window sizes contains [width,height].
$.currentSizes[] - actual document sizes automatically refreshed in time contains [width,height].
$.curxy - actual mouse position with x and y statements.
$.curOffset - actual scroll position in offsets x and y.
$.startIndex - first opened page title(used only for correct work of location module)
Revolver provides a correct work with browsers history API using location module. For example:
$.location('Page Title','http://somedomain.com/index.html', function(){console.log(this)})
You can write you own ajax router using this module for correct switching of page title and url. This module not mean that document will be reloaded it's only cosmetic changes.
There are few methods for do something with DOM elements.
$.dom('selector') returns a stack of suitable HTML elements. Avalible simple selectors like #obj .class tag and prefixes for finding last and first elements in document - '$.dom('#tabs .tabactive code:first-child') or $.dom('body p:last-child, ul li:first-child'); DOM engine supports a multiple selectors.
For creating new DOM element you can use 'new' instruction with syntax in example:
$.dom('dfn',"new|before|footer:first-child", { html: '<a style="color:#b06400" href="#">version 0.5 alpha</a>', attr: { style: "color:#b06400; text-align:center; display:block" }
For deleting an element you can use 'del' instruction:
$.dom('.prost, div', "del");
To instert html or text data into element you can use:
$.insert($.dom('h1'),'<b>test</b>');
Revolver can set attributes of html elements or manipulate with style atribute. In example to setting, getting or deleting attributes you will need to use next syntax:
$.attr('h1', {'data-test': 'some value'}); - set attribute or attributes.
$.attr('h1', {'data-test': null}); - delete the attribute.
$.attr('h1', 'data-test, style, etc'); - get attributes values.
For styling a CSS you can use:
$.dom("html","style",['background:rgba(233,246,255,.8)','color:#111']);
There are some methods for manipulate with attribute Class:
$.addClass('#some','class-test');
$.removeClass('#some', 'class-test');
$.hasClass('#some', 'class1 class2 class3'); //returns true if all classes defined for element #some
and
$.toggleClass('#some', 'class-test');
Animation engine allows to animate some of CSS properties like width, height, colors, margins, padding, font-sizes and CSS3 transforms like rotate, skewX, skewY, translateX, translateY and scale:
$.dom("#mainContents","animate",['border-radius:25px 0px:100:pulse']);
$.dom("a:first-child", "animate", ['transform:rotate(360deg) scale(0.7):2000']);
$.dom("h1:first-child", "animate", ['color:brown:3000:pulse'])
Every propertie have a different duration time and different easings.
Availible effects: easeIn, easeOut, easeOutQuad, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, elastic, easeInElastic, easeOutElastic, easeInOutElastic, easeInSin, easeOutSin, easeInOutSin, easeInCirc, easeOutCirc, easeInOutCirc, easeInQuad, easeInExpo, easeOutExpo, easeInOutExpo, easeOutBounce, bouncePast, bounce, radical, harmony, back, expo, easeOutStrong, easeInBack, easeOutBack, swingTo, swingFrom, spring, blink, pulse, wobble, sinusoidal, flicker, mirror.
For showing and hiding elements with height animation there is functions $.hide() and $.show():
$.show('#elem', 800);
$.hide('#elem', 1300);
For styling contents like tabs:
$.tabs('#tabs li', '#tabs div', function() { });
Rotate module is a simple slider.
$.rotate('#presentation p', function(){}, 1500);
For creation a modal windows you can use GrayBox API.
$.modal('Get FE Revolver Micro','<a target="_blank" style="color:#b06400" href="./app/Revolver.js">version 1.5</a>',[500,200]);
Where first argument is title, second argument is content and third argument contain array of sizes [width,height].
Intended to showing a hints thats contains text from setted attribute. Example:
$.hint('a', 'data-title');
Module AJAX allows you to receive content asynchronously with different methods and types of сontent.
$.ajax('http://test:88/ajax.html','GET',['test:test-yeah','data-test:true'],'dom', function(){$.log(this)});
Avalible methodth POST and GET. Avalible content types dom, text, json.
Third argument contains POST or GET query variables.
Storage module provides a simple API for using local storage.
$.storage(['Revolver={"js library": "1.5.3"}'],'set'); - set a values.
$.storage('data-test', 'get'); - get value.
$.storage(['data','testing'], 'del');- delete values.
To connecting external JS file in async mode you can use next API:
$.externalJS('http://domain.com');
You can use smooth scroll animation to a targen element using api
$.scroll() // sets position to top of page with smooth and opacity animation
$.scroll('#target_element') // sets screen position to target element and animate opacity of target
Events API support all registered events for add event listener. An example of click event adding:
$.click('aside h3', 'click', function(e){ e.preventDefault(); }); - click event;
Events API gives you to simulate events like click or submit using API:
$.fireEvent('aside h3', 'click')
Revolver core contains a lot of helpers to improve and simplify a development of your own modules and API. You can see it in plain code.