RevolveR front-end Core with UI\UX components

RevolveR Code style

RevolveR front-end Core is a powerfull library with modern API includes UI\UX components and powerfull API intended to work with HTML DOM elements, events, timers, CSS animations.

Read first code style.


Core contains a lot of UI\UX modules with base CSS design.

Menu module

Create floating responsive menu.

			if( !R.isM ) {




Hint API

Apply hints for HTML elements with title or alt attributes

			if( !R.isM ) {




Tabs API

Bind responsive tabs with floating handlers to associated HTML markup.

			if( R.sel('#tabs') ) {

				R.tabs('#tabs li.revolver__tabs-tab', '#tabs div');



HTML forms beautifier API

Wrap and stylise all standart HTML form elements to associated markup.



Fetch API

Modern fetch API intended to perform dynamic requests.

			R.fetch('/secure/?route=/terminal/', 'get', 'json', null, function() {

				R.useCaptcha( this.key );



Fetch submit

Fetch submit automatically compare form data and send it to the server.

			// Fetch Submit

			R.fetchSubmit('form', 'text', function() {

				// Some code after fetch performed



Markup editor

Apply HTML markup editor to textarea elements.

			if( R.sel('textarea') ) {




Collapsible API

Apply animated collapse for associated HTML markup.



Toggle API

Toggle visibility of HTML elements.

			R.toggle('.example', () => {

				// some code



Show and hide API

Show and hide futures for HTML elements.

			// Hide element

			R.hide('.example', 1000);

			// Show element'.example', 1000);


Slider API

Apply slider for associated markup.

			if( R.sel('.revolver__slider') ) {

				R.slide('.revolver__slider', 'img', 3000);



Modal box API

Create movable modal box with parameters.

			R.modal('Smiles', 'Some <b>contents</b>', () => {

				console.log( 'callback performed' );



CSS animations API

Perform CSS animations with queque and easings.

			R.animate('.animated', ['color:#945f11e8:2500:elastic', 'opacity:1:1500:harmony', 'transform:rotate(360deg) scale(2):3000:wobble', 'font-size:4vw:800:swingFrom'], () => {

				// some callback after queque is over




Apply CSS styles into HTML elements inline.

			R.styleApply('.animated', ['transform: scale(1) rotate(0deg)'], () => {

				// callback



Get CSS style.

			R.styleGet('.example', 'font-size');


Events API

Associate events to defined HTML elements.

			// Attach event

			let event = R.event('#mBoxContent .smiles-row b', 'click', (e) => {


				if( e.isTrusted ) {

					insertText( i, );



			// Detach event



Locked events allow to prevent events detach after Fetch API request.

			// Zoom prevention

			R.event('html', 'keydown:lock', (e) => {

				if( e.ctrlKey ) {

					switch( e.which - 0 ) {

						case 61:
						case 107: 
						case 173:
						case 109:
						case 187:
						case 189:

							console.log('... keyboard zoom prevented when View Port Units interface active');







Timers API

Perform modern intervals or timeouts with parameters.

Modern SetTimeout future.

			// Timeout analog future

			let hide = RR.interval(() => {

				let hint = RR.sel('.hint');

				if( hint ) {

					RR.rem( hint );


			}, 4000, true);

			// Stop timeout

			if( hide ) {




Modern SetInterval future.

			// Interval analog future

			let hide = RR.interval(() => {

				let hint = RR.sel('.hint');

				if( hint ) {

					RR.rem( hint );


			}, 4000);

			// Stop interval

			if( hide ) {




Lazy load API

Lazy API allow to use observer for postponed images loading

			// Lazy load

Location API

Modern history API.

			R.location('title', '/some_url', () => {

				// callback



Scroll API

Smooth scroll document position to defined element.



Modern CSS selectors API

A lot of API intended to work with DOM elements via CSS selectors.

			// Get element



New element with parameters'progress', 'body', 'before', {

				attr: {

					id: 'screen-position',
					style: 'position: fixed; bottom: 0; height: .4vw; width: 100vw; z-index: 10000;'




Insert API.

			R.insert('body', document.createElement('span'), '<b>example</b>');


Remove DOM element



Wrap HTML elements.

			RR.wrap('input', 'label');


Unwrap delete shell of HTML element.



Replace HTML element to another HTML element.

			R.replace('.example', '<div>example</div>');


HTML elements attributes API

Attribute API.

			// Set attributes with values

			R.attr('#screen-position', {

				'max': maximum,
				'value': current,
				'class': style


			// Get attributes

			R.attr('.example', 'method');


Has class API

			R.hasClass('#header', '.example');


Add class API.

			R.addClass('#header', '.example');


Remove class API.

			R.removeClass('#header', '.example');


Toggle class API.

			R.toggleClass('#header', '.example');


MD5 future

Calculate checksumms simple with MD5 future.

			R.md5( 'test some hashing' );


Once execution example

Fire function once.

			// Once

			let canOnlyFireOnce = R.once(() => {




Typing helpers

Small and usefull typing helpers.

			// Is callback

			R.isC(() => {

				// some code


			// Is object


			// Is array


			// Is string


			// Is function

			R.isF(() => {

				// some code


			// Is undefined

			R.isU( undefined );

			// Is number


			// Is numeric



Unicode base64 futures

Base64 future with unicode support.

			// UTF-8 btoa


			// UTF-8 atou



URL helpers

Get absolute URL API.



Isset future

Isset array key.

			R.isset([ i ][ 3 ] );


HTML helpers

Some API to simple works with HTML.

			// Encode HTML


			// Clean HTML


			// Strip HTML Tags


			// Convert string to HTML

			R.convertSTRToHTML(/* string with HTML */);

			// Filter HTML

			R.filterHTML(/* stack of elements */);

			// Equality

			let a = R.sel('#header');
			let a = R.sel('#footer');

			R.equality(a, b);

			// Fined HTML element in string

			R.findElementFromHTMLString('.example', '<div>example <b class="example">wow</b></div>');


External JavaScript

Connect and eval JavaScript.



Cookie API

			// Set Cookie

			R.cookie('cookie_name=cookie_value', 'set');

			// Get Cookie 

			R.cookie('cookie_name', 'get');

			// Remove Cookie

			R.cookie('cookie_name', 'rem');			


Storage API

Local storage API.

			// Set key and value in Local Storage'key_name=key_value', 'set');

			// Get Local Storage'key_name', 'get');

			// Remove Local Storage'key_name', 'rem');