Super Widget

The Super Widget wraps many common behaviors at the client side development of widgets, which proposes a standard development for both client side and server side developers.

Introduction

Super Widget works as a JavaScript super class, most like the class inheritance of Java or any other Object Oriented Language.

To create widgets, in one of the steps the developer might create one or more JavaScript files to communicate with the server side and ensure that the loaded widget have an unique instance.

Super Widget has been created to prevent repeated code and ensure good practices of JavaScript development (avoiding that each developer codes the JS file in his own way).

Basic Structure

var MyWidget = SuperWidget.extend({

	//method triggered when the widget loads
	init: function() {
	},
 
	//widget variables
	instanceId: null,
	DOM: null,
 
	//standard function of the widget
	someFunc: function() {
	}
});

Once the widget MyWidget is created, you'll have just to instance it. The example below shows a widget created in a .ftl file, inside a slot of a layout.ftl file:

<div id="myWidget_${instanceId}" class="fluig-style-guide wcm-widget-class super-widget" data-params="MyWidget.instance({param1: ${p1}})">
    <!--widget body -->
</div>

Understanding each attribute

The id

id="myWidget_${instanceId}"

The data-params

data-params="MyWidget.instance({param1: ${p1}})"

The widget name must be indicated just following the instance method.

The method param instance is optional. If filled, it needs to be an object {} and each of it's attributes will be attributes of the instance of the widget.

For example, if you instantiate your widget like this:

Widget instance example:

<div id="socialPoster_${instanceId}" class="fluig-style-guide wcm-widget-class super-widget" data-params="SocialPoster.instance({alias: 'Willian'})">
    <!--widget body -->
</div>

The instance socialPoster_233 will be crated. So, the "alias" attribute can be reached like this:

Widget instance result example:

var alias = socialPoster_233.alias;

Bindings

The Super Widget proposes an unique and transparent way of binding events to HTML elements. The advantages of this technique is that, if a better binding way comes up, the developer might not need to change it's code, that will be changed in the Super Widget core.

The example below associates the function saveUser() to the element <button data-save-user> once it's clicked:

Binding example

var MyWidget = SuperWidget.extend({
	bindings: {
		local: {
			'save-user': ['click_saveUser']
		},
		global: {}
	},

	...

	/*
	el: Object of the HTML element
	ev: Object of the event triggered
	*/
	saveUser: function(el, ev) {
		//your code here
	}
});

The Super widget has two objects inside the bindings object, called local and global.

Inside these objects we can have bindings with the key/value format, writing the element data attribute as the key, and an array of strings as the value.

Each element in the set of the array must have an event (like, click, keyup, etc.) followed by an underline (_) and the name of the function that will be triggered. In our example: click_saveUser.

Each function specified in this array must be declared inside the widget function, as showed in the example above. The bindings functions of the Super Widget always have two objects: el e ev. The first one is the pure element object (no jQuery here), and the second one is the object of the event.

Inside this context, the reference this refers to the instance of the widget. So, if you call the function validateData() inside your bindings function, for example, you can use this.validateData().

Local object

For performance reasons, when binding inside the local object, the Super Widget searchs for elements inside the <div> element of the widget, which is faster than searching the whole HTML document.

Local bindings are the most common use in widgets.

Global object

Bindings inside the global objects tells the Super Widget to search for the element in the whole HTML document.

There are basically two situations for global bindings:

• In case the developer needs to reach an element outside the scope of the widget;
• Components or plugins limitations. For example, reaching an element inside a modal.

Working with REST

Most of the REST services have a JavaScript map created by the WCM. The Super Widget has an alias for these functions.

But keep in mind that REST services that don't have maps created by the WCM must be called explicity as AJAX.

The Super Widget creates two functions to work with REST services:

• this.rest (recommended): Makes an asynchronous call to the server;
• this.restSync (not recommended): Makes a synchronous call to the server.

Example: this.rest

saveUser: function(el, ev) {
	var username = $('#username').val(),
		email = $('#email').val(),
		service = SocialAPI.UserService.SAVE,
		options = [username, email];

	this.rest(service, options, function(data) {
		//success!
	}, function(err, txt, status) {
		//error saving data
	});
}

Note that the rest function has 4 arguments:

• service: The service object mapped by WCM;
• options: The data expected to be returned by REST service in the format of an array of elements;
• successCallback: Function triggered when the operation performs successfully;
• errorCallback: Function triggered to handle fails (optional).

Example: this.restSync

saveUser: function(el, ev) {
	var username = $('#username').val(),
		email = $('#email').val(),
		service = SocialAPI.UserService.SAVE,
		options = [username, email],
		response;

	try {
		response = this.restSync(service, options);
		//do anything with the response
	} catch(err) {
		//error handling
	}
}

The restSync function has only two arguments:

• service: The service object mapped by WCM;
• options: The data expected to be returned by REST service in the format of an array of elements;

As it is synchronous, an error callback function is not necessary. You might use try/catch.

Autocomplete

Autocomplete and Tags Input are jQuery plugins providing a Style Guide user interface to manage autocomplete and tags.

Basic configuration

	FLUIGC.autocomplete(target, options, callback);

Live demo with Tag and Autocomplete

Usage

In HTML

	<input type="text" class="form-control" id="exampleTagAutocomplete">

In JavaScript

	var myTagAutocomplete = FLUIGC.autocomplete('#exampleTagAutocomplete', {
		source: {
			url: 'myrest/list',
			limit: 10,
			offset: 0,
			root: 'content'
		},
		displayKey: 'description',
		tagClass: 'tag-gray',
		type: 'tagAutocomplete'
	});

Live demo without rest call

Usage

In HTML

    <input type="text" class="form-control" id="exampleAutocomplete">

In JavaScript

	$(document).ready(function () {

		/* Local data */
		var states = [
			'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida',
			'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine',
			'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska',
			'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio',
			'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
			'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
		];

		/* Instantiated new autocomplete */
		var myAutocomplete = FLUIGC.autocomplete('#exampleAutocomplete', {
			source: substringMatcher(states),
			name: 'cities',
			displayKey: 'description',
			tagClass: 'tag-gray',
			type: 'tagAutocomplete'
		});
	});

	/* Function used to filter the data */
	function substringMatcher(strs) {
		return function findMatches(q, cb) {
			var matches, substrRegex;

			matches = [];

			substrRegex = new RegExp(q, 'i');

			$.each(strs, function (i, str) {
				if (substrRegex.test(str)) {
					matches.push({
						description: str
					});
				}
			});
			cb(matches);
		};
	}

Live full demo

Usage

In HTML

	<input type="text" class="form-control" id="exampleFullTagAutocomplete">
	
	<!-- Templates -->
	<script type="text/template" class="tag-example-template">
		<img width="14" height="14" src="{{owner.avatar_url}}"> {{full_name}} - <i>Forks: {{forks_count}}</i>
	</script>
	
	<script type="text/template" class="suggestion-example-template">
		<img width="14" height="14" src="{{owner.avatar_url}}"> {{full_name}} - <i>Forks: {{forks_count}}</i>
	</script>

In JavaScript

	var fullTagAutocomplete = FLUIGC.autocomplete('#exampleFullTagAutocomplete', {
		highlight: true,
		minLength: 1,
		hint: true,
		searchTimeout: 100,
		type: 'tagAutocomplete',
		name: 'cities',
		tagClass: 'tag-warning',
		maxTags: 3,
		allowDuplicates: false,
		onTagExists: function (item, tag) {
			FLUIGC.toast({
				message: 'This tag already exists',
				type: 'danger'
			});
			$(tag).hide().fadeIn();
		},
		onMaxTags: function (item, tag) {
			FLUIGC.toast({
				message: 'You have reached the maximum number of tags.',
				type: 'danger'
			});
		},
		displayKey: 'name',
		templates: {
			tag: '.tag-example-template',
			suggestion: '.suggestion-example-template'
		},
		source: {
			url: 'https://api.github.com/search/repositories',
			limit: 10,
			offset: 0,
			limitKey: 'limit',
			patternKey: 'q',
			root: 'items'
		},
		tagRemoveCss: {
			'margin': '5px 0 0 8px'
		},
		tagMaxWidth: 400
	}, function (err, data) {
		// something with err or data.
		if (err) {
			try {
				errMessage = JSON.parse(err.responseText.message);
				errMessage = errMessage.message ? err.responseText.message : err.responseText;
			} catch (e) {
				errMessage = 'Could not list the repositories.';
			}
			FLUIGC.toast({
				message: errMessage,
				type: 'danger'
			});
		}
	});

Live demo only Autocomplete

Usage

In HTML

	<input type="text" class="form-control" id="exampleAutocomplete1">

In JavaScript

	var myAutocomplete = FLUIGC.autocomplete('#exampleAutocomplete1', {
		source: {
			url: 'https://api.github.com/search/repositories',
			limit: 10,
			offset: 0,
			limitKey: 'limit',
			patternKey: 'q',
			root: 'items'
		},
		highlight: true,
		displayKey: 'description',
		tagClass: 'tag-gray',
		type: 'autocomplete'
	});

Live demo only Tags

Basic usage

In HTML

	<input type="text" class="form-control" id="exampleTag">

In JavaScript

	var myTag = FLUIGC.autocomplete('#exampleTag');

Options

Methods for tagAutocomplete and tag type

.add(data)

Adds a tag.

	var tagData = {
		description: 'Arizona'
	};
	myTagAutocomplete.add(tagData);

.update(data)

Updates a tag.

	var tagData = {
		description: 'Arizona'
	};
	myTagAutocomplete.update(tagData);

.remove(data)

Removes a tag.

	var tagData = {
		description: 'Arizona'
	};
	myTagAutocomplete.remove(tagData);

.removeAll()

Removes all tags.

	myTagAutocomplete.removeAll();

.focus()

Sets focus in the Autocomplete.

	myTagAutocomplete.focus();

.input()

Returns the Autocomplete's internal <input />, which is used for adding tags. You could use this to add your own Autocomplete behaviour for example.

	myTagAutocomplete.input();

.refresh()

Refreshes the tags input UI. This might be usefull when you're adding objects as tags. When an object's text changes, you'll have to refresh to update the matching tag's text.

	myTagAutocomplete.refresh();

.destroy()

Removes Autocomplete behaviour.

	myTagAutocomplete.destroy();

.items()

Return tags items in input.

	myTagAutocomplete.items();

Methods for Autocomplete type

.destroy()

Removes Autocomplete functionality and reverts the input element back to its original state.

	myAutocomplete.destroy();

.open()

Opens the dropdown menu of Autocomplete. Note that being open does not mean that the menu is visible. The menu is only visible when it is open and has content.

	myAutocomplete.open();

.close()

Closes the dropdown menu of Autocomplete.

	myAutocomplete.close();

.val()

Returns the current value of the Autocomplete. The value is the text the user has entered into the input element.

	myAutocomplete.val();

.val(val)

Sets the value of the Autocomplete. This should be used in place of .val().

	var myValue = 'Alabama';
	myAutocomplete.val(myValue);

Events

Getting item object and tagClass to make any changes using SuperWidget

	var widgetExample = SuperWidget.extend({
		myAutocomplete: null,
		bindings: {
			local: {
				'my-tag-autocomplete': ['fluig.autocomplete.itemAdded_someFunc']
			}
		},
		init: function () {
			this.myTagAutocomplete = FLUIGC.autocomplete('#my-tag-autocomplete', {
				...
				// comp config
				...
			});
		},
		someFunc: function (el, ev) {
			var that = this,
				item = ev.item
				;

			// method can access that returns a boolean
			this.serviceCanAccess(function (canAccess) {
				if (canAccess) {
					item.tagClass = 'tag tag-success';
				} else {
					item.tagClass = 'tag tag-danger';
				}

				// updates the tag with the new tag class
				that.myTagAutocomplete.update(item);
			});
		}
	});

Back To Top

Scroll Back to Top is a plugin to add a button that appears only when users scroll down the page allowing them to scroll to the top of the page.

Javascript

	var myVar = FLUIGC.backToTop(options);

Examples

Basic configuration

By default, the component does not require any initial setup, simply initializes it as in the example below.

	var myComp = FLUIGC.backToTop();

Advanced configuration

	var myComp = FLUIGC.backToTop({
		offset: 250,
		width: '200px',
		height: '50px',
		style: 'danger',
		opacity: .8,
		horizontalAlign: 'center',
		verticalAlign: 'bottom',
		horizontalDistance: '15px',
		verticalDistance: '15px',
		iconType: 'fluigicon-arrow-up',
		labelType: '',
		buttonSize: 'md',
		iconSize: 'sm',
		scrollDuration: 500,
		fadeDuration: 500,
		zIndex: 1050,
		scrollTo: 'body',
		scrollToOffset: 0
	});

Basic configuration listening events

	var myComp = FLUIGC.backToTop({
		horizontalAlign: 'left',
		offset: 400
	});
	
	myComp.on('fsshow.backtotop', function(ev) {
		// code
	});

Basic configuration invoking methods

	var myComp = FLUIGC.backToTop({
		horizontalAlign: 'left',
		offset: 400
	});
	
	// toogle component
	myComp.toogle();

Settings object

The settings object has the following attributes:

Methods

.on(event, callback)

Attach an event handler function for events to the component.

	myComp.on('fsshow.backtotop', function(ev) {
		// DO SOMETHING
	});

.show()

Shows the button.

	myComp.show();

.hide()

Hide the button.

	myComp.hide();

.toggle()

Toogle the button.

	myComp.toggle();

.destroy()

Destroy the button instance.

	myComp.destroy();

Events

Example

Example of use.

		myComp.on('fsshown.backtotop', function(ev) {
			// DO SOMETHING
		});

Back To Bottom

Scroll Back to bottom is a plugin that creates a button inside the target element, when it's clicked, scroll this element vertically down.

Javascript

	var myVar = FLUIGC.backToBottom(options);

Examples

Basic configuration

By default, the component does not require any initial setup, simply initializes it as in the example below.

	var myComp = FLUIGC.backToBottom();

Advanced configuration

	var myComp = FLUIGC.backToBottom({
		width: 'auto',
		height: 'auto',
		style: 'primary',
		opacity: 1,
		horizontalAlign: 'right',
		verticalAlign: 'top',
		horizontalDistance: '25px',
		verticalDistance: '20px',
		iconType: 'fluigicon-arrow-down',
		labelType: '',
		buttonSize: 'md',
		iconSize: 'sm',
		scrollDuration: 800,
		fadeDuration: 500,
		target: 'body'
	});

Basic configuration listening events

	var myComp = FLUIGC.backToBottom({
		horizontalAlign: 'left',
	});
	
	myComp.on('fsshow.backtobottom', function(ev) {
		// code
	});

Basic configuration invoking methods

	var myComp = FLUIGC.backToBottom({
		horizontalAlign: 'left',
	});
	
	// toogle component
	myComp.toogle();

Settings object

The settings object has the following attributes:

Methods

.on(event, callback)

Attach an event handler function for events to the component.

	myComp.on('fsshow.backtobottom', function(ev) {
		// DO SOMETHING
	});

.show()

Shows the button.

	myComp.show();

.hide()

Hide the button.

	myComp.hide();

.toggle()

Toogle the button.

	myComp.toggle();

.destroy()

Destroy the button instance.

	myComp.destroy();

Events

Example

Example of use.

		myComp.on('fsshown.backtobottom', function(ev) {
			// DO SOMETHING
		});

Buttons

Example uses

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Stateful

Add data-loading-text="Loading..." to use a loading state on a button.

<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
Loading state
</button>
<script type="text/javascript">
	$('#loading-example-btn').click(function() {
		var btn = $(this);
		btn.button('loading');
		$.ajax(...).always(function () {
			btn.button('reset');
		});
	});
</script>

Single toggle

Add data-toggle="button" to activate toggling on a single button.

<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>

Checkbox

Add data-toggle="buttons" to a group of checkboxes for checkbox style toggling on btn-group.

<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-primary active">
	<input type="checkbox" checked> Option 1 (pre-checked)
	</label>
	<label class="btn btn-primary">
	<input type="checkbox"> Option 2
	</label>
	<label class="btn btn-primary">
	<input type="checkbox"> Option 3
	</label>
</div>

Radio

Add data-toggle="buttons" to a group of radio inputs for radio style toggling on btn-group.

<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-primary active">
		<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="options" id="option2"> Option 2
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="options" id="option3"> Option 3
	</label>
</div>

Usage

Enable buttons via JavaScript:

$('.btn').button();

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

Options

None

Methods

$().button('toggle')

Toggles push state. Gives the button the appearance that it has been activated.

<button type="button" class="btn btn-primary" data-toggle="button">...</button>

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.

<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
<script type="text/javascript">
	$('#loading-example-btn').click(function () {
		var btn = $(this);
		btn.button('loading');
		$.ajax(...).always(function() {
			btn.button('reset');
		});
	});
</script>

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

Resets button state - swaps text to any data defined text state.

<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
<script type="text/javascript">
	$('.btn').button('complete');
</script>

Calendar

Examples

Calendar helps in creating date and time fields. With some settings you can use this component for fields that need this kind of data.

Live demo

Below are some examples of component usage with different settings.

HTML

	<input type="text" id="MY_SELECTOR" />

Javascript

	var mySimpleCalendar = FLUIGC.calendar('#MY_SELECTOR');

HTML

	<input type="text" id="MY_SELECTOR" />

Javascript

	var mySpanishCalendar = FLUIGC.calendar('#MY_SELECTOR', {
		language: 'es'
	});
	$('#button-setMinDate').on('click', function() {
		mySpanishCalendar.setMinDate(new Date("june 12, 2014"));
	});
	
	$('#button-setMaxDate').on('click', function() {
		mySpanishCalendar.setMaxDate(new Date("july 12, 2014"));
	});
	
	$('#button-show').on('click', function() {
		mySpanishCalendar.show();
	});
	
	$('#button-disable').on('click', function() {
		mySpanishCalendar.disable();
	});
	
	$('#button-enable').on('click', function() {
		mySpanishCalendar.enable();
	});
	
	$('#button-setDate').on('click', function() {
		mySpanishCalendar.setDate("10/23/2014");
	});
	
	$('#button-getDate').on('click', function() {
		console.log(mySpanishCalendar.getDate());
	});
	
	$('#button-getTimestampDate').on('click', function() {
		console.log(mySpanishCalendar.getTimestampDate());
	});

HTML

	<form role="form">
	    <div class="form-group">
	        <label for="name">Name</label>
	        <input type="text" class="form-control" id="name" placeholder="Enter name">
	    </div>
	    <div class="form-group">
	        <label for="email">Email address</label>
	        <input type="email" class="form-control" id="email" placeholder="Enter email">
	    </div>
	    <div class="form-group">
	        <label for="MY_SELECTOR">Birthday</label>
	        <input type="text" id="MY_SELECTOR" placeholder="Enter birthday">
	    </div>
	</form>

Javascript

		var birthday = FLUIGC.calendar('#MY_SELECTOR');

HTML

	<div class="form-group">
	    <label for="only-date">Only Date</label>
	    <div class="input-group date" id="MY_SELECTOR1">
	        <input type="text" class="form-control" placeholder="Only Date">
	        <span class="input-group-addon">
	        	<span class="fluigicon fluigicon-calendar"></span>
	        </span>
	    </div>
	</div>
	<div class="form-group">
	    <label for="only-time">Only Time</label>
	    <div class="input-group date" id="MY_SELECTOR2">
	        <input type="text" class="form-control" placeholder="Only Time">
	        <span class="input-group-addon">
	        	<span class="fluigicon fluigicon-time"></span>
	        </span>
	    </div>
	</div>
	<div class="form-group">
	    <label for="date-time">Date and Time</label>
	    <input type="text" class="form-control" id="MY_SELECTOR3" placeholder="Date and Time">
	</div>

Javascript

	var onlyDate = FLUIGC.calendar('#MY_SELECTOR1', {
	    pickDate: true,
	    pickTime: false
	});
	var onlyTime = FLUIGC.calendar('#MY_SELECTOR2', {
	    pickDate: false,
	    pickTime: true
	});
	var dateTime = FLUIGC.calendar('#MY_SELECTOR3', {
	    pickDate: true,
	    pickTime: true,
	    sideBySide: true
	});

Settings object

The settings object has the following attributes:

Below an example with possible configurations.

Javascript

		var myCalendar = FLUIGC.calendar('#MY_SELECTOR', {
			pickDate: true, 
			pickTime: false, 
			useMinutes: true, 
			useSeconds: true, 
			useCurrent: true,
			minuteStepping: 1,
			minDate: '1/1/2014',
			maxDate: '1/1/2015',
			showToday: true,
			language: 'pt-br',
			defaultDate: "",
			disabledDates: [],
			enabledDates: [],
			useStrict: false,
			sideBySide: false,
			daysOfWeekDisabled: [],
            setDisabledDates: ['01/09/2022', '01/10/2022']
		});

Methods

.formatDate(date, [pattern], [locale])

Formats a Date object into a date/time string

		FLUIGC.calendar.formatDate(new Date(), 'L LTS', 'pt');
		FLUIGC.calendar.formatDate(new Date(), 'L');
		FLUIGC.calendar.formatDate(new Date(), undefined, 'en');
		FLUIGC.calendar.formatDate(new Date());

Date and time formats are specified by date and time pattern strings. Within date and time pattern strings, letters from 'A' to 'Z' and from 'a' to 'z' are interpreted as pattern tokens representing the components of a date or time string. All other characters are not interpreted, they're simply copied into the output string during formatting. The following pattern tokens are defined:

Because preferred formatting differs based on locale, there are a few tokens that can be used to format a moment based on its locale:

Collapse

About

Get base styles and flexible support for collapsible components like accordions and navigation.

Example accordion

Using the collapse plugin, we built a simple accordion by extending the panel component.

• Default Collapse
• Custom Collapse

<div class="panel-group" id="accordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a class="collapse-icon up" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
				Collapsible Group Item #1
				</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse collapse in">
			<div class="panel-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh arial, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a class="collapse-icon" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
				Collapsible Group Item #2
				</a>
			</h4>
		</div>
		<div id="collapseTwo" class="panel-collapse collapse">
			<div class="panel-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh arial, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a class="collapse-icon" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
				Collapsible Group Item #3
				</a>
			</h4>
		</div>
		<div id="collapseThree" class="panel-collapse collapse">
			<div class="panel-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh arial, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
			</div>
		</div>
	</div>
</div>

<div class="panel-group collapse-orange" id="accordion-variant-colors">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a class="collapse-icon up" data-toggle="collapse" data-parent="#accordion-variant-colors" href="#collapseOne-variant">
				Collapsible Group Item #1
				</a>
			</h4>
		</div>
		<div id="collapseOne-variant" class="panel-collapse collapse in">
			<div class="panel-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh arial, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a class="collapse-icon" data-toggle="collapse" data-parent="#accordion-variant-colors" href="#collapseTwo-variant">
				Collapsible Group Item #2
				</a>
			</h4>
		</div>
		<div id="collapseTwo-variant" class="panel-collapse collapse">
			<div class="panel-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh arial, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a class="collapse-icon" data-toggle="collapse" data-parent="#accordion-variant-colors" href="#collapseThree-variant">
				Collapsible Group Item #3
				</a>
			</h4>
		</div>
		<div id="collapseThree-variant" class="panel-collapse collapse">
			<div class="panel-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh arial, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
			</div>
		</div>
	</div>
</div>

You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in">...</div>

Usage

The collapse plugin uses a few classes to handle the heavy lifting:

• .collapse hides the content
• .collapse.in shows the content
• .collapsing is added when the transition starts, and removed when it finishes

These classes can be found in component-animations.less.

Add icon arrows:

• .collapse-icon arrow down
• .collapse-icon .up changes direction arrow to up when the content is visible

These classes can be found in fluig-collapse.less.

Via data attributes

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

$('.collapse').collapse();

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

$('#myCollapsible').collapse({
	toggle: false
});

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

Style Guide's collapse class exposes a few events for hooking into collapse functionality.

$('#myCollapsible').on('hidden.bs.collapse', function() {
	// do something…
})

Continuous Scroll

"Continuous scroll" allows trigger an event when a scroll is completed.

Examples

Example continuous scroll

Continuous scroll applied to a list

Usage

The plugin continuous scroll can be applied on a div element that has fixed height and scroll enabled. Should apply the plugin to the element that has the scroll and write the desired action in the callback function.

A mustache template:

	<div data-your-scroll-content>
		<script type="text/template" class="tpl-continuous-scroll">
			{{#items}}
				<a href="#" class="list-group-item">{{item}}</a>
		    {{/items}}
		</script>
	</div>

Make a selector in the element .tpl-continuous-scroll that returns the template. The variable 'view' should receive the data to be rendered and then invoke the 'render' function Mustache. The return of this function is to be added to an element on the page.

		var tpl = $('.tpl-continuous-scroll').html(),
			html,
			view = data;
		html = Mustache.render(tpl, view);
		$('[data-your-scroll-content]').html(html);

Make a selector in the element data-your-scroll-content and invoke onScrollEnd(callback) function.

		$('[data-your-scroll-content]').onScrollEnd(function() {
			// do something…
		});

Enable for a window object:

		$(window).onScrollEnd(function() {
			// do something…
		});

Copy

Examples

Copy allows you to copy some content to the clipboard.

Live demo

Below are some examples of component usage.

HTML

	<button type="button" id="MY_ID" data-clipboard-text="Text to be copied" class="btn btn-link">Copy</button>

Javascript

	FLUIGC.copy('#MY_ID', {
   	    copyMessage: 'Content copied to the clipboard!',
   	    destroy: false,
   	}, function(err, data) {
   	    // DO SOMETHING (error or success)
   	});

Settings object

The settings object has the following attributes:

Confirm, Alert and Error messages

Example confirms

Usage

The component FLUIGC.message.confirm component extends FLUIGC.modal, ie has the same component settings.

FLUIGC.message.confirm({
	message: 'Want to delete this gallery?',
	title: 'Remove gallery',
	labelYes: 'Remove',
	labelNo: 'Cancel'
}, function(result, el, ev) {
	//Callback action executed by the user...
	
	//result: Result chosen by the user...
	//el: Element (button) clicked...
	//ev: Event triggered...
	
	this.someFunc();
});

Unique configurations to confirm the component.

Example alerts

Usage

The component FLUIGC.message.confirm component extends FLUIGC.modal, ie has the same component settings.

FLUIGC.message.alert({
	message: 'Gallery removed successfully.',
	title: 'Message',
	label: 'OK'
}, function(el, ev) {
	//Callback action executed by the user...
	
	//el: Element (button) clicked...
	//ev: Event triggered...
	
	this.someFunc();
});

Unique configurations of the alert component.

Example error messages

Usage

The component FLUIGC.message.error extends FLUIGC.modal, ie has the same component settings. It can show advanced details from the specified error.

FLUIGC.message.error({
	title: 'Error Title',
	message: 'Oops, something went wrong!',
	details: 'An error occurred in your request. Status: 500.'
}, function(el, ev) {
	//Callback action executed by the user...

	//el: Element (button) clicked...
	//ev: Event triggered...

	this.someFunc();
});

Unique configurations of the error message component.

Datatable

Examples

Datatables helps in creating tables with pagination and search capabilities. With some settings you can create data grids by setting an array of objects or a URL REST service.

Live demo with continuous scroll and add data button

By clicking on the buttons below, you can add, remove or edit records. You can also fill in the search field and press the "ENTER" button to view results and also use the scroll bar for paging.

Javascript

Below is the configuration to add records

	addRow: function(el, ev) {
		var row = {
			id: "11",
			name: "Santa Catarina",
			uf: "SC"
		};

		this.myTable.addRow(0, row);
	}

Below is the configuration to remove records

	delRow: function(el, ev) {
		var itemsToRemove = this.myTable.selectedRows();

		if (itemsToRemove.length > 0) {
			for (var i = 0; i <= itemsToRemove.length; i++) {
				this.myTable.removeRow(this.myTable.selectedRows()[0]);
			}
		}

		FLUIGC.toast({
			title: '',
			message: "Removed element",
			type: 'success'
		});

	}

Below is the configuration to edit and update records

	editRow: function(el, ev) {
		var row = this.myTable.getRow(this.myTable.selectedRows()[0]);
		this.myTable.updateRow(this.myTable.selectedRows()[0], row, '.template_datatable_edit');
		$('#datatable-input-id').val(row.id);
		$('#datatable-input-name').val(row.name);
		$('#datatable-input-uf').val(row.uf);

		$('[data-datatable-edit-row]').prop("disabled", true);

	},

	updaterow: function(el, ev) {
		var editedRow = {
			id: $('#datatable-input-id').val(),
			name: $('#datatable-input-name').val(),
			uf: $('#datatable-input-uf').val()
		};
		this.myTable.updateRow(this.myTable.selectedRows()[0], editedRow);

		$('[data-datatable-edit-row]').prop("disabled", false);

		FLUIGC.toast({
			title: '',
			message: "Edited!",
			type: 'success'
		});
	},

Below is the configuration to hide one column

	hideColumn: function(el, ev) {
		var index = 1;
		this.myTable.hideColumn(index);
	}

Below is the configuration to show one column hidden

	showColumn: function(el, ev) {
		var index = 1;
		this.myTable.showColumn(index);
	}

Below is the configuration to reload table

	reload: function(el, ev) {
		this.myTable.reload();
	}

Below is the configuration to show information a line

	selected: function(el, ev) {
		var index = this.myTable.selectedRows()[0];
		var selected = this.myTable.getRow(index);
		FLUIGC.toast({
			title: '',
			message: "{\"id\" :" + selected.id + ", \"name\" :" + selected.name + " , \"uf\" :" + selected.uf + "}",
			type: 'success'
		});

	}

Below is an link example to code above.

Live demo with navigation buttons

Below is an example of a datatable with paging with navigation buttons.

Usage

To use the Datatable component, you must create a DIV element. Then enter the ID of this element to the constructor of the component. In the settings you can inform the way that the data is received, the titles of headers, lines will be set up with multi selection, enable or disable features of paging and search.

HTML

Just create a div element.

	<div id="target"></div>

Javascript

Below is the basic configuration to use Datatable.

var myTable = FLUIGC.datatable('#target', {
    dataRequest: mydata,
    renderContent: ['id', 'name', 'uf'],
    header: [
        {'title': 'Código'},
        {'title': 'Nome'},
        {'title': 'UF'}
    ]
}, function(err, data) {
    // DO SOMETHING (error or success)
});

Below is a complete example of how to build a datatable with dataset implementing search and reload.

var testDatatable = SuperWidget.extend({
	myTable: null,
	tableData: null,
	dataInit: null,

	init: function() {
		this.loadTable();
	},

	loadTable: function() {
		var that = this;
		that.myTable = FLUIGC.datatable('#idtable' + "_" + that.instanceId, {
		    dataRequest: DatasetFactory.getDataset('colleague', null,null,null).values,
    	    renderContent: ['colleagueName', 'login', 'mail', 'defaultLanguage'],
    	    header: [
    	        {'title': 'colleagueName'},
    	        {'title': 'login'},
    	        {'title': 'mail'},
    	        {'title': 'defaultLanguage'}
    	    ],
    	    search: {
				enabled: true,
				onlyEnterkey: true,
				onSearch: function(res) {
					if (!res) {
						that.myTable.reload(dataInit);
					}
					var dataAll = that.myTable.getData();
					var search = dataAll.filter(function(el) {
						return el.colleagueName.toUpperCase().indexOf(res.toUpperCase()) >= 0
							|| el.login.toUpperCase().indexOf(res.toUpperCase()) >= 0
							|| el.mail.toUpperCase().indexOf(res.toUpperCase()) >= 0;
					});
					if (search && search.length) {
						that.myTable.reload(search);
					} else {
						FLUIGC.toast({
							title: 'Searching: ',
							message: 'No results',
							type: 'success'
						});
					}
				}
			},
			navButtons: {
				enabled: false,
			},
		}, function(err, data) {
			if(data) {
				dataInit = data;
			}
			else if (err) {
				FLUIGC.toast({
					message: err,
					type: 'danger'
				});
			}
		});
	}
});

REST example

Below is the complete configuration to use Datatable with a REST service.

var myTable = FLUIGC.datatable('#target', {
    dataRequest: {
        url: 'http://THE_URL_FOR_REST_SERVICE',
        options: {
            contentType:'application/json',
            dataType: 'json',
            crossDomain: true,
            cache: false
        },
        root: 'myRoot',
        limit: 5,
        offset: 0,
        patternKey: 'text',
        limitkey: 'per_page',
        offsetKey: 'page',
        formatData: function(data) {
        	// Process
        	return data;
        }
    },
    renderContent: '.my_template',
    header: [
        {
        	'title': 'Código',
            'dataorder': 'CODIGO',
            'size': 'col-md-2',
            'display': false
        },
        {
        	'title': 'Nome',
        	'dataorder': 'NOME',
        	'standard': true,
        	'size': 'col-md-7',
        },
        {
        	'title': 'UF',
        	'dataorder': 'UF',
        	'size': 'col-md-5',
        }
    ],
    multiSelect: true,
    classSelected: 'danger',
    search: {
        enabled: true,
        onSearch: function(response) {
            // DO SOMETHING
        },
        onlyEnterkey: true,
        searchAreaStyle: 'col-md-3'
    },
    scroll: {
        target: '#target',
        enabled: true,
        onScroll: function() {
            // DO SOMETHING
        }
    },
    actions: {
        enabled: true,
        template: '.my_template_area_actions',
        actionAreaStyle: 'col-md-9'
    },
    navButtons: {
        enabled: false,
        forwardstyle: 'btn-warning',
        backwardstyle: 'btn-warning',
    },
    emptyMessage: '
No data to display.
',
    tableStyle: 'table-striped',
    draggable: {
	    enabled: true,
	    onDrag: function(dragInfo) {
	        // Do something
	        return false; // If it returns false, will cancel the draggable
	    }
	}
}, function(err, data) {
    // DO SOMETHING (error or success)
});

Below is the complete configuration to use Datatable with a REST service and with data parameter.

var myTable = FLUIGC.datatable('#target', {
    dataRequest: {
        url: 'http://THE_URL_FOR_REST_SERVICE',
        options: {
            contentType:'application/json',
            dataType: 'json',
            crossDomain: true,
            cache: false,
            data: JSON.stringify({'datasetId' : 'dataset', 'filter' : {'Parameter': 'value'}}),
        },
        root: 'myRoot',
        limit: 5,
        offset: 0,
        patternKey: 'text',
        limitkey: 'per_page',
        offsetKey: 'page',
        formatData: function(data) {
         // Process
         return data;
        }
    },
    renderContent: '.my_template',
    header: [
        {
         'title': 'Código',
            'dataorder': 'CODIGO',
            'size': 'col-md-2',
            'display': false
        },
        {
         'title': 'Nome',
         'dataorder': 'NOME',
         'standard': true,
         'size': 'col-md-7',
        },
        {
         'title': 'UF',
         'dataorder': 'UF',
         'size': 'col-md-5',
        }
    ],
    multiSelect: true,
    classSelected: 'danger',
    search: {
        enabled: true,
        onSearch: function(response) {
            // DO SOMETHING
        },
        onlyEnterkey: true,
        searchAreaStyle: 'col-md-3'
    },
    scroll: {
        target: '#target',
        enabled: true,
        onScroll: function() {
            // DO SOMETHING
        }
    },
    actions: {
        enabled: true,
        template: '.my_template_area_actions',
        actionAreaStyle: 'col-md-9'
    },
    navButtons: {
        enabled: false,
        forwardstyle: 'btn-warning',
        backwardstyle: 'btn-warning',
    },
    emptyMessage: '
No data to display.
',
    tableStyle: 'table-striped',
    draggable: {
     enabled: true,
     onDrag: function(dragInfo) {
         // Do something
         return false; // If it returns false, will cancel the draggable
     }
 }
}, function(err, data) {
    // DO SOMETHING (error or success)
});

Mustache Template

Below is the basic template to use Datatable.

<script type="text/template" class="template_datatable">
	<tr>
		<td>{{id}}</td>
		<td>{{name}}</td>
		<td>{{uf}}</td>
		<td></td>
	</tr>
</script>

Below is the basic template to buttons area

<script type="text/template" class="template_area_buttons">
	<button class="btn btn-primary" data-your-action-1>Action 1</button>
	<button class="btn btn-primary" data-your-action-2>Action 2</button>
</script>

Below is the basic template to edit a row.

<script type="text/template" class="template_datatable_edit">
    <tr>
        <td>
			<input type="text" value="{{id}}">
		</td>
        <td>
			<input type="text" value="{{name}}">
		</td>
        <td>
			<select class="form-control" value="{{uf}}">
				...
			</select>
		</td>
		<td>
			<button class="btn btn-default" data-your-action-3>update</button>
		</td>
    </tr>
</script>

Below are some examples of datatable actions

	$('YOUR_SELECTOR').on('click', '[data-your-add-button]', function(ev) {
		var row = {id: "30", name: "Alabama", uf: "AL"};
		myTable.addRow(0, row);
	});

	$('YOUR_SELECTOR').on('click', '[data-your-edit-button]', function(ev) {
		var row = myTable.getRow(myTable.selectedRows()[0]);
		myTable.updateRow(myTable.selectedRows()[0], row, '.template_datatable_edit');
		$('YOUR-SELECTOR-TO-ID').val(row.id);
		$('YOUR-SELECTOR-TO-NAME').val(row.name);
		$('YOUR-SELECTOR-TO-UF').val(row.uf);
		$('[data-your-action-3]').click(function(e) {
	    	var editedRow = {
				id: $('YOUR-SELECTOR-TO-ID').val(),
		        name: $('YOUR-SELECTOR-TO-NAME').val(),
		        uf: $('YOUR-SELECTOR-TO-UF').val()
		    };
			myTable.updateRow(myTable.selectedRows()[0], editedRow);
	    });
	});

	$('YOUR_SELECTOR').on('click', '[data-your-del-button]', function(ev) {
		var itemsToRemove = myTable.selectedRows();
        if(itemsToRemove.length > 0) {
            for(var i = 0; i <= items.length; i++) {
                myTable.removeRow(myTable.selectedRows()[0]);
            }
        }
	});

	$('YOUR_SELECTOR').on('click', '[data-your-reload-button]', function(ev) {
		myTable.reload();
	});

	$('YOUR_SELECTOR').on('click', '[data-your-show-column-button]', function(ev) {
		myTable.showColumn(index);
	});

	$('YOUR_SELECTOR').on('click', '[data-your-hide-column-button]', function(ev) {
		myTable.hideColumn(index);
	});

	$('YOUR_SELECTOR').on('click', '[data-your-selected-row-button]', function(ev) {
		var index = myTable.selectedRows()[0];
        var selected = myTable.getRow(index);
	});

Settings Object

The settings object has the following attributes:

Settings to Object dataRequest

The settings object has the following attributes:

Settings to Object options

The settings object has the following attributes:

Settings to array of objects header

The settings object has the following attributes:

Settings to object search

The settings object has the following attributes:

Settings to object scroll

The settings object has the following attributes:

Settings to object actions

The settings object has the following attributes:

Settings to object navButtons

The settings object has the following attributes:

Settings to object draggable

The settings object has the following attributes:

Methods

.addPage(newData, template, isSearch)

Adds a new page. Must pass the new data. Can be informed a CSS class of a mustache template. If isAppend parameter is specified, the page will be added to the end, otherwise the content will be replaced.

	myTable.addPage(data);
	myTable.addPage(data, '.my_template');

.addRow(index, newData, template)

Adds a new row. Must pass the index and the object to be added. Can be informed a CSS class of a mustache template.

	myTable.addRow(0, data); // Insert at index 0 of the table
	myTable.addRow(3, data); // Insert the index 3 of the table
	myTable.addRow(null, data); // Insert at end of table
	myTable.addRow(0, data, '.my_template'); // Insert with mustache template
	myTable.addRow(3, data, '.my_template');
	myTable.addRow(null, data, '.my_template');

.reload(newData, template)

Reloads the table. The newDat and template parameters are optional. If newData is passed, it will be reloaded with the new data. Can be informed a CSS class of a mustache template.

	myTable.reload(); // Reloads table keeping state
	myTable.reload(data); // Reloads the table passing new data
	myTable.reload(data, '.my_template'); // Reloads the table passing new data and a template

.removeRow(index)

Remove line passing the index

	myTable.removeRow(0);

.removeRows(arrayIndex)

Remove the table items that are passed through an array;

	myTable.removeRows(arrayIndex);

.updateRow(index, newData, template)

Updates the row with a optional CSS class of a mustache template

	myTable.updateRow(n, data); // Updates the row passing the index
	myTable.updateRow(n, data, '.my_template'); // Updates the row with a template

.getRow(index, isHtml)

Returns a row as an object. If the isHtml parameter is passed, returns as HTML.

	myTable.getRow(1);
	myTable.getRow(2, true);

.selectedRows()

Returns an array of index of the selected rows.

	myTable.selectedRows();

.nextPage(limit, offset)

Returns the next page from the limit and offset informed.

	myTable.nextPage(5, 5);

.getClassSelected()

Returns CSS class used in the selection of rows.

	myTable.getClassSelected();

.getData()

Returns Array of objects loaded.

	myTable.getData();

.showColumns()

Shows all columns are hidden.

	myTable.showColumns();

.showColumn(index)

Show column passing the index.

	myTable.showColumn(0);

.hideColumn(index)

Hide the column passing the index.

	myTable.hideColumn(index);

.showLoading(target)

Shows an image while some content is loaded.

	myTable.showLoading();
	myTable.showLoading(target);

.hideLoading(index)

Hides the image displayed after some content is loaded.

	myTable.hideLoading();

.on(event, callback)

Attach an event handler function for events to the datatable.

var myTable = FLUIGC.datatable('#target', {
    dataRequest: mydata,
    renderContent: ['id', 'name', 'uf'],
    header: [
        {'title': 'Código'},
        {'title': 'Nome'},
        {'title': 'UF'}
    ]
}, function(err, data) {
    // DO SOMETHING (error or success)
});

	myTable.on('fluig.datatable.loadcomplete', function() {});
	myTable.on('fluig.datatable.onselectrow', function(data) { /* use the data.selectedIndex */});
	myTable.on('fluig.datatable.drag.start', function(ev, data) {});
	myTable.on('fluig.datatable.drag.end', function(ev, data) {});
	myTable.on('fluig.datatable.scroll', function() {});
	myTable.on('fluig.datatable.search', function(ev, data) {});
	myTable.on('fluig.datatable.forward', function() {});
	myTable.on('fluig.datatable.backward', function() {});

.destroy()

Removes Datatable functionality and reverts the input element back to its original state.

	myTable.destroy();

Events

Events triggered by element selector

fluig.datatable.loadcomplete

This event is fired when the table was fully loaded.

var myTable = FLUIGC.datatable('#target', {
    dataRequest: mydata,
    renderContent: ['id', 'name', 'uf'],
    header: [
        {'title': 'Código'},
        {'title': 'Nome'},
        {'title': 'UF'}
    ]
}, function(err, data) {
    // DO SOMETHING (error or success)
});

	myTable.on('fluig.datatable.loadcomplete', function() {
		// Do something
	});

fluig.datatable.onselect

This event is fired when a row is selected.

	myTable.on('fluig.datatable.onselectrow', function(data) {
		// the data.selectedIndex returns an array with the selected rows
	});

Main callback

This callback will treat error return and also success.

	var myTable = FLUIGC.datatable('#target', {
	    dataRequest: mydata,
	    renderContent: ['id', 'name', 'uf'],
	    header: [
	        {'title': 'Código'},
	        {'title': 'Nome'},
	        {'title': 'UF'}
	    ]
	}, function(err, data) {
		// DO SOMETHING (Treat the error or success)
    });

Dropdowns

Examples

Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.

Within a navbar

Within pills

Usage

Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item. When opened, the plugin also adds .dropdown-backdrop as a click area for closing dropdown menus when clicking outside the menu. Note: The data-toggle=dropdown attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.

Via data attributes

Add data-toggle="dropdown" to a link or button to toggle a dropdown.

<div class="dropdown">
	<a data-toggle="dropdown" href="#">Dropdown trigger</a>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
		...
	</ul>
</div>

To keep URLs intact, use the data-target attribute instead of href="#".

<div class="dropdown">
	<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#">
	Dropdown <span class="caret"></span>
	</a>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
		...
	</ul>
</div>

Via JavaScript

Call the dropdowns via JavaScript:

$('.dropdown-toggle').dropdown();

Options

None

Methods

$().dropdown('toggle')

Toggles the dropdown menu of a given navbar or tabbed navigation.

Events

All dropdown events are fired at the .dropdown-menu's parent element.

$('#myDropdown').on('show.bs.dropdown', function () {
	// do something…
});

Desktop Notification

Desktop Notification allows you the ability to launch desktop notifications directly from your web applications.

Javascript

	var myVar = FLUIGC.notification(options);

Examples

Live demo

The example below shows the notification when you click in the button.

	var notification = FLUIGC.notification({
		title: "Desktop Notification",
		body: "Now is " + FLUIGC.calendar.formatDate(new Date()),
		tag: new Date().getTime(),
		icon: 'images/user_picture.png'
	});
	notification.show();

Settings object

The settings object has the following attributes:

Methods

.on(event, callback)

Attach an event handler function for events to the desktop notification.

	notification.on('click', function(ev) {
		// DO SOMETHING
	});

.show()

Shows the desktop notification.

	notification.show();

.requestPermission()

Requests permission to show desktop notifications from fluig.

	notification.requestPermission();

Events

Example

Example of use.

		notification.on('click', function(ev) {
			window.open(pageUrl, pageName);
		});

Editable

This component allows you to create editable elements on your page.

Javascript

	var editable = FLUIGC.editable(target, options);

Examples

Basic usage

In HTML:

	<label id="user-name">John Lennon</label>

In JavaScript:

	var editable = FLUIGC.editable('#user-name');

Result:

Advanced usage

In HTML:

	<p id="user-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

In JavaScript:

	var editable = FLUIGC.editable('#user-description', {
		type: 'textarea',
		name: 'user-description',
		title: 'Enter your description'
	});

Result:

Settings object

The settings object has the following attributes:

Methods

.on(event, callback)

Attach an event handler function for events to the component.

	editable.on('fsshown.editable', function(ev) {
		// DO SOMETHING
	});

.activate()

Activates input of visible container (e.g. set focus).

	editable.activate();

.destroy()

Removes editable feature from element.

	editable.destroy();

.disable()

Disables editable.

	editable.disable();

.enable()

Enables editable.

	editable.enable();

.getValue(isSingle)

Returns current values of editable elements.
Note that it returns an object with name-value pairs, not a value itself. It allows to get data from several elements.
If value of some editable is null or undefined it is excluded from result object. When param isSingle is set to true - it is supposed you have single element and will return value of editable instead of object.
isSingle Bool whether to return just value of single element

	editable.getValue(isSingle);

.hide()

Hides container with form.

	editable.hide();

.setValue(value, convertStr)

Hides container with form.
value Mixed new value.
convertStr Boolean whether to convert value from string to internal format.

	editable.setValue(value, convertStr);

.show(closeAll)

Shows container with form.
closeAll Boolean Whether to close all other editable containers when showing this one. Default true.

	editable.show(closeAll);

.toggle(closeAll)

Toggles container visibility (show / hide).
closeAll Boolean Whether to close all other editable containers when showing this one. Default true.

	editable.toggle(closeAll);

.toggleDisabled()

Toggles enabled / disabled state of editable element.

	editable.toggleDisabled();

Events

Example

Example of use.

		editable.on('fshidden.editable', function(ev) {
			var reason = ev.reason;
			
			if(reason) {
				// DO SOMETHING
			}
		});

Loading

Examples

Loading helps in displaying a message for the user while waiting for the loading of some resource. You can display a text or an image to the user, telling you which area will be blocked.

Live demo

HTML

<div id="YOUR-SELECTOR">
	<p>Any content here.</p>
</div>

Below is an example applied to a DIV element.

Javascript

// Component construction by setting one div.
var myLoading1 = FLUIGC.loading('#YOUR-SELECTOR');
// We can show the message of loading
myLoading1.show();
// We can hide the message of loading
myLoading1.hide();

Below is an example applied to the window object.

Javascript

// Component construction by setting the window.
var myLoading2 = FLUIGC.loading(window);
// We can show the message of loading
myLoading2.show();
// We can hide the message of loading
myLoading2.hide();

Settings object

The settings object has the following attributes:

Below an example with possible configurations.

Javascript

	var myLoading = FLUIGC.loading('#YOUR-SELECTOR', {
		textMessage:  '
Please wait...
', 
		title: null,
		css: {
		    padding:        0,
		    margin:         0,
		    width:          '30%',
		    top:            '40%',
		    left:           '35%',
		    textAlign:      'center',
		    color:          '#000',
		    border:         '3px solid #aaa',
		    backgroundColor:'#fff',
		    cursor:         'wait'
		},
		overlayCSS:  { 
		    backgroundColor: '#000', 
		    opacity:         0.6, 
		    cursor:          'wait' 
		}, 
		cursorReset: 'default',
		baseZ: 1000,
		centerX: true,
		centerY: true,
		bindEvents: true,
		fadeIn:  200,
		fadeOut:  400,
		timeout: 0,
		showOverlay: true, 
		onBlock: null,
		onUnblock: null,
		ignoreIfBlocked: false
	});

Modals

Basic configuration

	FLUIGC.modal(options, callback);

Examples

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Static example

A rendered modal with header, body, and set of actions in the footer.

Live demo

By clicking the button below, you invoked the modal component:

Usage

To use the modal component, you must create an HTML element and add a 'data' attribute. Then do a bind on the attribute and invoke the function FLUIGC.modal.

HTML

Create an HTML element that will trigger the event to invoke the modal and add a 'data' attribute.

	<button class="btn btn-primary btn-lg" data-your-modal>
		Launch modal
	</button>

JavaScript

Bind the element from the 'selector' the 'data' attribute and then just invoke the modal component FLUIGC.modal(settings);

var myModal = FLUIGC.modal({
	title: 'Title',
	content: '
Modal Content
',
	id: 'fluig-modal',
	actions: [{
		'label': 'Save',
		'bind': 'data-open-modal',
	},{
		'label': 'Close',
		'autoClose': true
	}]
}, function(err, data) {
	if(err) {
		// do error handling
	} else {
		// do something with data
	}
});

Optional sizes

Modals have three optional sizes, available via size parameter.

var myModal = FLUIGC.modal({
	title: 'Title',
	content: '
Modal Content
',
	id: 'fluig-modal',
	size: 'full | large | small'
	actions: [{
		'label': 'Save',
		'bind': 'data-open-modal',
	},{
		'label': 'Close',
		'autoClose': true
	}]
}, function(err, data) {
	if(err) {
		// do error handling
	} else {
		// do something with data
	}
});

Settings Object

The settings object has the following attributes:

Settings to Object content

The settings object has the following attributes:

JavaScript

Configuration using the feature convertFtlAsync

var myModal = FLUIGC.modal({
	title: 'title',
	content: {
		widgetCode: 'myWidget', 
		ftl: 'view.ftl',
		data: {
			sociableId: 0001,
			listType: 'SOCIABLE',
			customInstance: WCMAPI.generateId()
		}
	},
	id: 'fluig-modal',
	actions: [{
		'label': 'Save',
		'bind': 'data-open-modal',
	},{
		'label': 'Cancel',
		'bind': 'data-open-modal',
		'close': true
	}]
}, function(err, data) {
	if(err) {
		// do error handling
	} else {
		// do something with data
	}
});

Action parameter

Settings available in the action parameter.

Methods

.remove()

Manually removes a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).

	myModal.remove();

.isOpen()

Checks whether the modal is open or not on the page. Returns a boolean.

	myModal.isOpen();

Events

Message Page

Message Pages are feedback screens for the user, which, unlike common modes, allow for dynamic and presentable multiple action options. They may be about the type of success, error, warning or information. The operation of the component is simple. When the Message Page screen is displayed, the element configured as target will be hidden until the Message Page is closed (except when the user is redirected to another page through a Message Page link).

Usage

HTML Declaration

A div ('message-page') is declared, which will serve as a container for the contents of the Message Page, and another div that will be hidden when the Message Page is activated ('target-message-page').

		<div id="message-page"></div>
		<div id="target-message-page">
				<span>Content to be manipulated...</span>
		</div>

Statement in JS

See below an example of how the component must be started based on the ids of the components from the previous example. In this scenario, nothing occurs because only the Message Page component was created.

		var settings = {
				element: '#message-page', 
				target: '#target-message-page', 
				title: 'title',
				description: 'description',
				header: 'header',
				transitionEffect: true,
				messageType: 'default',
				links: [{
					description: 'link 1',
					bind: 'data-bind-to-my-method'
				}, {
					description: 'link 2.',
					href: "http://www.fluig.com"
				}],
				actionClose: {
					label: "back",
					bind: 'data-bind-method-to-close',
					href: '#'
				}
			};
			messagePage = FLUIGC.messagePage(settings);

After the component is created, the manipulation can be done with the following methods:

Displays the Message Page and hides the target:

		messagePage.show();

Hides the Message Page and displays the target:

		messagePage.hide();

Parameters of the Component

The component accepts the following parameters:

Example:

HTML Code

		<div id="message-page"></div>
		<div id="target-message-page">
			<h3>Product Registration</h3>
			<div>
			    <div class="form-group">
			      <label for="name">Name:</label>
			      <input type="text" class="form-control" id="target-mp-name" name="target-mp-name">
			    </div>
			    <div class="form-group">
			      <label for="Description">Description:</label>
			      <input type="text" class="form-control" id="target-mp-description"  name="target-mp-description">
			    </div>
			    <button class="btn btn-primary" data-show-message-page>Save</button>
		   </div>
		</div>		

Javascript Code

		var settings = {
			title: "Produto cadastrado com sucesso.",
			description: "Para visualizar os detalhes acesse a página do produto.",
			header: 'O que você deseja fazer?',
			transitionEffect: true,
			messageType: 'success',
			links: [{
				description: 'Executar meu método',
				bind: 'data-run-my-method'
			}, {
				description: 'Ir ao Fluig',
				href: "http://www.fluig.com"
			}],
			actionClose: {
				label: "Voltar",
				bind: 'data-close-message-page'
			}
		};

		messagePage = FLUIGC.messagePage(settings);
		
		$(document).on('click', '[data-show-message-page]', function(ev) {
			messagePage.show();
		});
		
		$(document).on('click', '[data-close-message-page]', function(ev) {
			messagePage.hide();
		});
		
		$(document).on('click', '[data-run-my-method]', function(ev) {
			alert("Started from Message Page")
		});

Live Demo

Password

This component allows you to hide values.

Javascript

    var password = FLUIGC.password(target, options);

Examples

Basic usage

In HTML:

    <input type="password" id="value" value="123" class="form-control"/>

In JavaScript:

    var password = FLUIGC.password('#value');

Result:

Advanced usage

In HTML:

    <input type="password" id="data" value="abc" class="form-control"/>

In JavaScript:

    var password = FLUIGC.password('#data', {
        eyeClass: 'fluigicon',
        eyeOpenClass: 'fluigicon-eye-open',
        eyeCloseClass: 'fluigicon-key'
    });

Result:

Settings object

The settings object has the following attributes:

Methods

.on(event, callback)

Attach an event handler function for events to the component.

	password.on('fshide.password', function(ev) {
		// DO SOMETHING
	});

.show()

Manually show the password.

	password.show();

.hide()

Manually hide the password.

    password.hide();

.toggle()

Manually toggle the password.

    password.toggle();

.val()

Get the current value of the password or set the value of password.

    password.val('val'); // set value
    password.val(); //get value

Events

Example

Example of use.

        pass.on('fshide.password', function(ev){
        // DO SOMETHING
        });

Periodical Executor

Periodical Executer allows you to perform actions defined by the user at any given time interval.

Javascript

	var myVar = FLUIGC.periodicalExecutor(callback, frequency);

Examples

Live demo

The example below shows the value of an element being incremented every 1 second.

Javascript

	var periodicalExecutor = FLUIGC.periodicalExecutor(function() {
		// for this example increment the value here
	}, 1);

Methods

.start()

starts the count to trigger the execution.

	periodicalExecutor.start();

.stop()

Stops execution.

	periodicalExecutor.stop();

.restart()

Resets the count to trigger the execution again.

	periodicalExecutor.restart();

Popover

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

Popovers whose both title and content are zero-length are never displayed.

Examples

Static popover

Four options are available: top, right, bottom, and left aligned.

Usage

Enable popovers via JavaScript:

		<button type="button" class="btn btn-lg btn-danger bs-docs-popover-click" data-toggle="popover" title="" data-content="And here's some amazing content. It's very simple. Click?" data-original-title="Popover title">Click to toggle popover</button>
	    <button type="button" class="btn btn-lg btn-danger bs-docs-popover-hover" data-toggle="popover" title="" data-content="And here's some amazing content. It's very simple. Hover?" data-original-title="Popover title">Hover to toggle popover</button>

		FLUIGC.popover('.bs-docs-popover-hover',{trigger: 'hover', placement: 'auto'});
		FLUIGC.popover('.bs-docs-popover-click',{ trigger: 'click', placement: 'auto'});

A rendered popover with scroll applied on the container.

		<button type="button" class="btn btn-lg btn-danger bs-docs-popover-scroll" data-toggle="popover" title="" data-content="And here's some amazing content. It's very simple. Click?" data-original-title="Popover title">Click to toggle popover scroll</button>

		FLUIGC.popover('.bs-docs-popover-scroll',{ trigger: 'click', placement: 'right', maxheight: '200px'});

Allowed Tags and Attributes in content

For security reasons, only the HTML tags and attributes described in the table below are permitted. Any html content other than this will be removed on popover initialization.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

Right Bar

About

Display a vertical right bar rendering a static content or a widget using a freemarker template.

Usage

	FLUIGC.rightbar(options);

	FLUIGC.rightbar({content: 'My content'});

	FLUIGC.rightbar({appendTo: 'div#myCustomDiv', content: 'My content'});

Settings Object

The settings object has the following attributes:

Sliders

Examples

Sliders are input tags without "type", transformed into the Slider component.

Basic example

Click on the "Init" button, to transform the input into a Slider.

	<input id="MySliderInput">
	<button class="btn btn-primary" onclick="FLUIGC.slider.init('#MySliderInput');">Init</button>

Options

Options can be passed either as a data (data-slider-foo) attribute, or as part of an object in the slider call. The only exception here is the formatter argument - that can not be passed as a data- attribute.

Hour-range example

Click on the "Init" button to start the hour-range slider.

	<input id="MySliderInput">
	<button class="btn btn-primary" onclick="FLUIGC.slider.init('#MySliderInput');">Init</button>

Methods

NOTE:Optional parameters are italicized.

Each button below triggers a single function of the Slider component. The "init" and the "destroy" buttons respectively starts and ends the slider.

	<input id="MySliderInput3" data-slider-min="0" data-slider-max="10" data-slider-value="5">
	<button class="btn btn-primary" onclick="FLUIGC.slider.init('#MySliderInput3');">init</button>
	<button class="btn btn-default" onclick="FLUIGC.toast({message: FLUIGC.slider.getValue('#MySliderInput3')});"">get value</button>
	<button class="btn btn-default" onclick="FLUIGC.slider.setValue('#MySliderInput3', 7);">set value "7"</button>
	<button class="btn btn-danger" onclick="FLUIGC.slider.destroy('#MySliderInput3');">destroy</button>

The Formatter option

The formatter option must be passed as key/value of an object (JSON), in which the value is a callback. Either way, all of the other options can be passed as key/values of an object (JSON), instead of using the data attribute.

Below you'll find an example of an executed JavaScript code, starting a slider with JSON options.

	var options = {
		min: 0,
		max: 24,
		range: true,
		value: [8,17],
		step: 0.5,
		formatter: function(value) {
			return 'From ' + value[0] + ' to ' + value[1];
		}
	};
	
	FLUIGC.slider.init('#MySliderInput4', options);

Events

FLUIGC.slider.onSlideStop(selector, function(slideEvent){
  console.log(this); // DOM element
  console.log(slideEvent); // Slide stop event
});

FLUIGC.slider.onSlideStopSendScope(selector, scope, function(selector, slideEvent, scope){
  console.log(selector); // DOM element
  console.log(slideEvent); // Slide stop event
  console.log(scope); // the original JavaScript scope. For example: The SuperWidget instance where the switch button has been triggered
});

Storage

The Storage provides mechanisms by which browsers can securely store key/value pairs, in a much more intuitive fashion than using cookies.

Storage concepts and usage

The two mechanisms within Storage are as follows:

• sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores).
• localStorage does the same thing, but persists even when the browser is closed and reopened.

These mechanisms are available via the FLUIGC.sessionStorage and FLUIGC.localStorage properties (to be more precise, in supporting browsers the Window object implements the WindowLocalStorage and WindowSessionStorage objects, which the localStorage and sessionStorage properties hang off) — invoking one of these will create an instance of the Storage object, through which data items can be set, retrieved and removed. A different Storage object is used for the sessionStorage and localStorage for each origin — they function and are controlled separately.

Examples

Example of use with sessionStorage.

	var storage = 'my data';
	
	// storing the value
	FLUIGC.sessionStorage.setItem('myStorage', storage);
	
	// retrieving the value
	FLUIGC.sessionStorage.getItem('myStorage');

Example of use with localStorage.

	var storage = 'my data';
	
	// storing the value
	FLUIGC.localStorage.setItem('myStorage', storage);
	
	// retrieving the value
	FLUIGC.localStorage.getItem('myStorage');

Methods

.setItem()

Stores an item.

	FLUIGC.localStorage.setItem();
	FLUIGC.sessionStorage.setItem();

.removeItem()

Remove any items.

	FLUIGC.localStorage.removeItem();
	FLUIGC.sessionStorage.removeItem();

.getItem()

Returns an item.

	FLUIGC.localStorage.getItem();
	FLUIGC.sessionStorage.getItem();

.clear()

Clears all stored data.

	FLUIGC.localStorage.clear();
	FLUIGC.sessionStorage.clear();

Switch button

Examples

Switch buttons are checkbox or radio transformed into the Switcher component.

Basic example

Click on the "Init" button, to transform the checkbox into a switch button.

	<input id="MySwitchButtonCheckbox" type="checkbox">
	<button class="btn btn-primary" onclick="FLUIGC.switcher.init('#MySwitchButtonCheckbox');">Init</button>

Methods

Each button below triggers a single function of the Switcher component. The "init" and the "destroy" buttons respectively starts and ends the switch button.

	<input id="MySwitchButtonCheckbox2" type="checkbox" data-on-color="success" data-off-color="danger">
	<button class="btn btn-primary" onclick="FLUIGC.switcher.init('#MySwitchButtonCheckbox2');">init</button>
	<button class="btn btn-default" onclick="FLUIGC.toast({message: FLUIGC.switcher.getState('#MySwitchButtonCheckbox2')});">get state</button>
	<button class="btn btn-default" onclick="FLUIGC.switcher.setTrue('#MySwitchButtonCheckbox2');">set true</button>
	<button class="btn btn-default" onclick="FLUIGC.switcher.setFalse('#MySwitchButtonCheckbox2');">set false</button>
	<button class="btn btn-default" onclick="FLUIGC.switcher.toggleState('#MySwitchButtonCheckbox2');">toggle state</button>
	<button class="btn btn-default" onclick="FLUIGC.switcher.enable('#MySwitchButtonCheckbox2');">enable</button>
	<button class="btn btn-default" onclick="FLUIGC.switcher.disable('#MySwitchButtonCheckbox2');">disable</button>
	<button class="btn btn-default" onclick="FLUIGC.switcher.isReadOnly('#MySwitchButtonCheckbox2', true);">readonly</button>
	<button class="btn btn-default" onclick="FLUIGC.switcher.isReadOnly('#MySwitchButtonCheckbox2', false);">not readonly</button>
	<button class="btn btn-danger" onclick="FLUIGC.switcher.destroy('#MySwitchButtonCheckbox2');">destroy</button>

In Lot

Click on the "InitAll" button, to transform all checkboxes into a switch button.

	<div  id="switchInLot" class="bs-example" style="padding-bottom: 24px;">
		<input id="MySwitchButtonCheckbox3" type="checkbox"><br><br>
		<input id="MySwitchButtonCheckbox4" type="checkbox"><br><br>
		<input id="MySwitchButtonCheckbox5" type="checkbox"><br><br>
		<button class="btn btn-primary" onclick="FLUIGC.switcher.initAll('#switchInLot');">InitAll</button>
	</div>

Sizes

Click on the "init size" button, to transform checkboxe in a switch button.

<input id="MySwitchButtonCheckbox6" type="checkbox" data-size="mini"><br><br>
<input id="MySwitchButtonCheckbox7" type="checkbox" data-size="small"><br><br>
<input id="MySwitchButtonCheckbox8" type="checkbox" data-size="normal"><br><br>
<input id="MySwitchButtonCheckbox9" type="checkbox" data-size="large"><br><br>
<button class="btn btn-primary" onclick="FLUIGC.switcher.init('#MySwitchButtonCheckbox6');">Init Mini</button>
<button class="btn btn-primary" onclick="FLUIGC.switcher.init('#MySwitchButtonCheckbox7');">Init Small</button>
<button class="btn btn-primary" onclick="FLUIGC.switcher.init('#MySwitchButtonCheckbox8');">Init Normal</button>
<button class="btn btn-primary" onclick="FLUIGC.switcher.init('#MySwitchButtonCheckbox9');">Init Large</button>

Events

FLUIGC.switcher.onInit(element, function(event){
  console.log(this); // DOM element
  console.log(event); // jQuery event
});

FLUIGC.switcher.onChange(element, function(event, state){
  console.log(this); // DOM element
  console.log(event); // jQuery event
  console.log(state); // true | false
});

FLUIGC.switcher.onInitSendScope(element, scope, function(element, event, scope){
  console.log(element); // DOM element
  console.log(event); // jQuery event
  console.log(scope); // the original JavaScript scope. For example: The SuperWidget instance where the switch button has been triggered
});

FLUIGC.switcher.onChangeSendScope(element, scope, function(element, event, state, scope){
  console.log(element); // DOM element
  console.log(event); // jQuery event
  console.log(state); // true | false
  console.log(scope); // the original JavaScript scope. For example: The SuperWidget instance where the switch button has been triggered
});

Options

Include attributes and its possible values in your checkbox or radio element.

Time Interaction

Receives a basic setup to format the date and add the same element in the instantiated.

Example

Usage

		FLUIGC.timeInteraction.init({
			period: 10000, 
			parent: 'body',
			attrName: 'creation-date',
			selector: '[data-creation-date]'
		});

		<div data-creation-date="1414430458409">there is 17 hours ago</div>

Options

Toast

Examples

Toasts are quick messages that can be triggered to the user. These messages usually give feedback of success, danger, warning and info.

Static example

A rendered toast with header.

Live demo

By clicking the button below, you invoked the toast component:

Usage

To use the toast component, you must create an HTML element and add a 'data' attribute. Then do a bind on the attribute and invoke the function FLUIGC.toast.

HTML

Create an HTML element that will trigger the event to invoke the toast and add a 'data' attribute.

		<button class="btn btn-primary btn-lg" data-your-toast>
			Launch Toast
		</button>

JavaScript

Bind the element from the 'selector' the 'data' attribute and then just invoke the toast component FLUIGC.toast(settings);

		$(document).on('click', '[data-your-toast]', function(ev) {
		FLUIGC.toast({
		title: 'Toast title: ',
		message: 'My message',
		type: 'success'
		});
		});

Settings Object

The settings object has the following attributes:

Togglable tabs

Example tabs

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.

Usage

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

$('#myTab a').click(function(e) {
	e.preventDefault();
	$(this).tab('show');
});

You can activate individual tabs in several ways:

$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)

Markup

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Style Guide tab styling, while adding the nav and nav-pills classes will apply pill styling.

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
	<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
	<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
	<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
	<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane active" id="home">...</div>
	<div class="tab-pane" id="profile">...</div>
	<div class="tab-pane" id="messages">...</div>
	<div class="tab-pane" id="settings">...</div>
</div>

Fade effect

To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .in to properly fade in initial content.

<div class="tab-content">
	<div class="tab-pane fade in active" id="home">...</div>
	<div class="tab-pane fade" id="profile">...</div>
	<div class="tab-pane fade" id="messages">...</div>
	<div class="tab-pane fade" id="settings">...</div>
</div>

Methods

$().tab

Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

<ul class="nav nav-tabs" role="tablist" id="myTab">
	<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
	<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
	<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
	<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="home">...</div>
	<div class="tab-pane" id="profile">...</div>
	<div class="tab-pane" id="messages">...</div>
	<div class="tab-pane" id="settings">...</div>
</div>
<script type="text/javascript">
	$(function() {
		$('#myTab a:last').tab('show');
	})
</script>

Events

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
	e.target; // activated tab
	e.relatedTarget; // previous tab
});

Collapse tabs

Put the tabs inside a div with the class "collapse-tabs". This will set tab panes to start hidden and show over the content, with the absolute CSS property.

<div class="collapse-tabs">
	<ul id="myTab" class="nav nav-tabs nav-justified" role="tablist">
		<li class="collapse-tab"><a href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li>
		<li class="collapse-tab"><a href="#tab2" role="tab" data-toggle="tab">Tab 2</a></li>
		<li class="collapse-tab"><a href="#tab3" role="tab" data-toggle="tab">Tab 3</a></li>
	</ul>
	<div id="myTabContent" class="tab-content">
		<div class="tab-pane col-xs-6" id="tab1">
			<h4>Tab 1</h4>
			<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan arial. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
		</div>
		<div class="tab-pane col-xs-6 col-xs-offset-3" id="tab2">
			<h4>Tab 2</h4>
			<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan arial. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
		</div>
		<div class="tab-pane col-xs-6 col-xs-offset-6" id="tab3">
			<h4>Tab 3</h4>
			<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan arial. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
		</div>
	</div>
</div>

Tooltip

When you need to explain about a element or text, you can use a tooltip. Tooltips are small text hints for help your user to better understand a word or action.

Basic example

Four directions

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Utilities

About

Utilities module provide a set of utilities methods.

Usage

Call a method from utilities module:

Icons

Methods

FLUIGC.icons()

Get to know if an icon class is created or not. Example:

		var icons = FLUIGC.icons();
		icons.getIcons(); // returns a list with all of the icon classes already created.

.parseBoolean(value)

Parses the string argument as a boolean. The boolean returned represents the value true if the string argument is not null and is equal, ignoring case, to the string "true".

		FLUIGC.utilities.parseBoolean('true');

.ctrlIsPressed(ev)

Receives the mouse click event, and returns true if the keyboard's Ctrl (or command, in Mac OS) key is pressed, false if it's not. Useful to open links in modals when the key is not pressed, and in new browser tabs when it is pressed.

		FLUIGC.utilities.ctrlIsPressed(ev);

.preventXSS(value)

Parses the string argument for prevent XXS. This method parse tags for html code

		FLUIGC.utilities.preventXSS('<script> alert("My Message"); </script>');

.randomUUID()

Generate a RFC4122 version 4 (pseudo randomly generated) compliant UUID.

		FLUIGC.utilities.randomUUID();

.normalizeLink(value)

Returns a normalized lower-case string of the given value, changing spaces and special characters for "-".

		FLUIGC.utilities.normalizeLink(value);

.parseVersion(value)

Formats a number 4 or more characters to the standard version/revision of Fluig.

		FLUIGC.utilities.parseVersion(1000);

.checkBrowser()

Returns the browser name and browser version. You can check Ie, Ie9 and Ie10 versions

		FLUIGC.utilities.checkBrowser().name;
		FLUIGC.utilities.checkBrowser().version;
		FLUIGC.utilities.checkBrowser().isIe();
		FLUIGC.utilities.checkBrowser().isIe9();
		FLUIGC.utilities.checkBrowser().isIe10();

.parseInputFile(selector)

Formats a File input to the standard style of Fluig.

		<form method="post" action="" enctype="multipart/form-data">
			<input type="file" class="btn btn-primary btn-sm" id="myInputFile" name="myInputFile" title="Upload Your File" accept=".jpg,.jpeg,.png" >
		</form>

		FLUIGC.utilities.parseInputFile("#myInputFile");

.uploadFileForIE(selector, settings)

Fix to ajax upload file in IE.

		<form method="post" action="" enctype="multipart/form-data">
			<input type="file" class="btn btn-primary btn-sm" id="myIEInputFile" name="myIEInputFile" title="Upload Your File" accept=".jpg, .jpeg, .png" >
		</form>

		var moreData,
			settings = {
				action: 'URL',
				onComplete: function(filename, response) {				
					//do something
				},
				onSubmit:function(filename){
					var moreData = {
						attribute1: 'atribute1',
						attribute1: 'attribute2'
					};
					return formData; 
				}
			}
		;
		FLUIGC.utilities.uploadFileForIE('#myIEInputFile', settings);

.isolatedScroll(target)

Receives a selector HTML the container you want to apply scroll isolated.

		//Use with attributes / data attributes (recommended):
		FLUIGC.utilities.isolatedScroll('[data-isolated-container]');
	
		//Use with class:
		FLUIGC.utilities.isolatedScroll('.isolated-container');
		
		//Use with id:
		FLUIGC.utilities.isolatedScroll('#isolated-container');
		
		//Use with tags (not recommended):
		FLUIGC.utilities.isolatedScroll('ul');

		<ul id="isolated-container" class="isolated-container" data-isolated-container>
			<li>Cras mattis consectetur purus sit amet fermentum.</li>
			<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
			<li>Sed posuere consectetur est at lobortis.</li>
			<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
			<li>Vestibulum id ligula porta felis euismod semper.</li>
			<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
			<li>Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</li>
			<!-- more list... -->
			<li>Vestibulum id ligula porta felis euismod semper.</li>
		</ul>

.scrollTo(target, duration)

Performs the scroll the page to a specific target. The duration parameter is optional, if not passed, the default is 0.

		FLUIGC.utilities.scrollTo('#myTarget', 300);