An experiment

For my small CMS RevolveR I was need a frontend library thats can do Fetch requests and animate 3D CSS with modules for HTML markup editor and HTML form beautifer.

So. I took the mountain of my old snippets and rewrote everything in the same style on ES7.

What is Revolver

Front-End JavaScript library Revolver micro -- is a simple, powerfull and lightweight(only 95Kb of uncompressed code) solution with no dependencies to work with DOM elements and their properties including a lot of modules to make posible using tabs, slider, modal windows, fetch requests and other things.

Connecting a script

Revolver core includes an auto initialization modules. To run library under the document you'll need to connect bootstrap and place a code in #revolver script tag. Example:

<script src="./app/revolver.js?prod=1.0.8" async id="revolver">
// charging weapons with namespace
const revolver = new Revolver('$');
// now you cant shout with $
let element = $.dom('.someclass:first-child');
</script>

You can use any namespace for better code style.

CSS mobile schema

Revolver automatically connect a bootstrap css from library and listen window size changes to switch it into mobile mode.

1. mobile.css: schema for screens less then 320px to 1920px and mobile browser UA;

Variables

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)

Location API

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 fetch router using this module to correct switching of page title and url. This module not mean that document will be reloaded it's only provide interface changes.

Form styler

This module decorates the all defined in core form elements such as selects or labels.

$.formStyler();

Markup editor for textareas

This is a simple HTML markup editor thats should be atomaticaly switched to all textareas in forms uncluding basic markup buttons.

$.markupEditor();

DOM engine

There are few methods to do something with DOM elements.

$.dom('selector') returns a stack of suitable HTML elements. Avalible simple selectors like #obj .class tag and prefixes to 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.

To 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" }

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

To wrap elements:
$.dom('span', 'wrap', 'section')

To unwrap elements:
$.dom('section', 'unwrap',)

To replace:
$.dom('span','replace','<div>hey</div>')

DOM Styles and attributes

Revolver can set attributes of html elements or manipulate with style atribute. In example to setting, getting or deleting attributes you'll 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.

To styling a CSS you can use:

$.dom("html","style",['background:rgba(233,246,255,.8)','color:#111']);

There are some methods for manipulate with Class attribute:

$.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');

Animations

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.

Show and Hide modules

Ещ showing and hiding elements with height animation Revolver contains functions $.hide() and $.show():

$.show('#elem', 800);

$.hide('#elem', 1300);

Tabs module

To styling contents like tabs:

$.tabs('#tabs li', '#tabs div', function() { });

Rotate module

Rotate module is a simple slider.

$.rotate('#presentation p', function(){}, 1500);

Modal box API

TO 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].

Hint API

Intended to showing a hints thats contains text from setted attribute. Example:

$.hint('a', 'data-title');

FETCH module

Fetch module allow you application to receive content asynchronously with different methods and types of сontent.

$.event('input[type="submit"]', 'click', function(e) {
e.preventDefault();
let data = new FormData();
let form = $.dom('#test input[type="text"]');
for(var j in form) {
data.append( form[j].name, form[j].value );
}
$.fetch('http://test:88/post.php','POST','text', data, function(){
$.log(this)
});
});

Fetch submit module

This module alows you to submit form data automaticaly using fetch

$.fetchSubmit('form', 'text', function(){
$.modal('Form API test :: sended variables', $.findHTMLByTag('pre', this)[0].outerHTML, [800, 300]);
});

Avalible methods POST and GET.
Avalible content types text, json.

Third argument contains POST or GET query variables.

findHTMLByTag module

This module allow you to find some HTML content inside some HTML content by using tag or CSS selector.

$.findHTMLByTag('#root', rootHTMLElement)

Storage module

Storage module provides a simple API to use local storage.

$.storage(['Revolver={"js library": "1.0.8"}'],'set'); - set a values.

$.storage('data-test', 'get'); - get value.

$.storage(['data','testing'], 'del');- delete values.

Cookie module

Storage module provides a simple API to use cookies.

$.cookie(['Revolver={"js library": "1.0.8"}'],'set'); - set a values.

$.cookie('data-test', 'get'); - get value.

$.cookie(['data','testing'], 'del');- delete values.

ExternalJS

To connecting external JS file in async mode you can use next API:

$.externalJS('http://domain.com');

Scroll

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') // set screen position to target element and animate opacity of target

Events API

Events API supports all registered events for add event listener. An example of click event adding:

$.click('aside h3', 'click', function(e){ e.preventDefault(); }); - click event;

FireEvents

Events API gives you to simulate events like click or submit using API:

$.fireEvent('aside h3', 'click', function(e){ e.preventDefault() })

Helpers

Revolver core contains a lot of helpers to improve and simplify development of your own modules and API. You can see it in plain code.

Conclusion and source

So. As an experiment, I was able to tamp everything down with 95kB of code and even a bit more from jQuery and get rid of the UI dependency on the bootstrap.

Sources: RevolveR on GitHub.
Project site: CyberX.