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.

Modules

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

Menu module

Create floating responsive menu.



			if( !R.isM ) {

				R.Menu('.revolver__main-menu');

			}

		

Hint API

Apply hints for HTML elements with title or alt attributes



			if( !R.isM ) {

				R.hint();

			}

		

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.



			R.formBeautifier();

		

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') ) {

				R.markupEditor();

			}

		

Collapsible API

Apply animated collapse for associated HTML markup.



			R.expand('.revolver__collapse-form-legend');

		

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

			R.show('.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

			});

		

CSS API

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) => {

				e.preventDefault();

				if( e.isTrusted ) {

					insertText( i, e.target.innerText );

				}

			});

			// Detach event

			R.detachEvent(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');

							e.preventDefault();

							break;

					}

				}

			});			

		

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 ) {

				hide.stop();

			}

		

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 ) {

				hide.stop();

			}

		

Lazy load API

Lazy API allow to use observer for postponed images loading


			
			// Lazy load
			
			R.lazyLoad();
		
		

Location API

Modern history API.



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

				// callback

			});

		

Scroll API

Smooth scroll document position to defined element.



			R.scroll('#header');

		

Modern CSS selectors API

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



			// Get element

			R.sel('.example');

		

New element with parameters



			RR.new('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



			R.rem('.example');

		

Wrap HTML elements.



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

		

Unwrap delete shell of HTML element.



			R.unwrap('input');

		

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(() => {

				console.log('Fired!');

			});

		

Typing helpers

Small and usefull typing helpers.



			// Is callback

			R.isC(() => {

				// some code

			});

			// Is object

			R.isO({});

			// Is array

			R.isA([]);

			// Is string

			R.isS('string');

			// Is function

			R.isF(() => {

				// some code

			});

			// Is undefined

			R.isU( undefined );

			// Is number

			R.isN(9);

			// Is numeric

			R.isNum(123);

		

Unicode base64 futures

Base64 future with unicode support.



			// UTF-8 btoa

			R.utoa('test');

			// UTF-8 atou

			R.atou('dGVzdA==');

		

URL helpers

Get absolute URL API.



			R.getAbsUrl('/example/');

		

Isset future

Isset array key.



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

		

HTML helpers

Some API to simple works with HTML.



			// Encode HTML

			R.encodeHTML('<div>example</div>');

			// Clean HTML

			R.cleanHTML('<div>example</div>');

			// Strip HTML Tags

			R.stripTags('<div>example</div>');

			// 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.



			R.externalJS('/url_to_script.js');

		

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

			R.storage('key_name=key_value', 'set');

			// Get Local Storage 

			R.storage('key_name', 'get');

			// Remove Local Storage

			R.storage('key_name', 'rem');