Miscellaneous components are loaded on demand, so you'll have to import specific CSS and JavaScript files to use each one.

Importing files

Using miscellaneous components with Studio

If you want to create forms using miscellaneous components, first you'll need to import the basic Style Guide files:

	<!DOCTYPE html>
	<html>
		<head>
		<link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide.min.css">
		<script src="/portal/resources/js/jquery/jquery.js"></script>
		<script src="/portal/resources/js/jquery/jquery-ui.min.js"></script>
		<script src="/portal/resources/js/mustache/mustache-min.js"></script>
		<script src="/style-guide/js/fluig-style-guide.min.js"></script>
		</head>
		<body>
			<div class="fluig-style-guide">
				<!--Some code here-->
			</div>
		</body>
	</html>

After doing this, you'll just need to import the corresponding CSS and JavaScript files of each component in your form. You can find some examples in the documentation of each component below.

Enjoy!

AddToCalendar is a component to Calendar button and Event Management.

Basic configuration

        FLUIGC.addToCalendar(target, settings);

Creating addtocalendar with Developer Studio using the Style Guide

If you want to create forms and use the addtocalendar component, you'll need to import the minified CSS and JavaScript files.

    	<link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide-addtocalendar.min.css">
        <script src="/style-guide/js/fluig-style-guide-addtocalendar.min.js"></script>

Using addtocalendar in widgets

To use the addtocalendar component in widgets, you must inform the following line in the application.info file of your widget:

	application.resource.component.1=fluigaddtocalendar

Live demo

HTML

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

Javascript

Below is the basic configuration to use Add to Calendar.

	FLUIGC.addToCalendar('#target', {
	    start: '01/02/2015 09:00 AM',
	    end: '01/02/2015 11:00 AM',
	    title: 'Title of the event',
	}, function(err, data) {
	    // DO SOMETHING (error or success)
	});

Live demo

HTML

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

Can be used a template

<script type="text/template" class="add-to-calendar-image-template">
	<img src="images/upload_image.png">
</script>

Below is the complete configuration to use Add to Calendar.

	var template = $('.add-to-calendar-image-template').html(),
	var data = {pathToImage: 'images/upload_image.png'};
	var htmlTemplate = Mustache.render(template, data);
	FLUIGC.addToCalendar('#target', {
	    start: '01/02/2015 09:00 AM',
	    end: '01/02/2015 11:00 AM',
	    title: 'Title of the event',
	    html: htmlTemplate,
        timezone: 'America/Sao_Paulo',
        description: 'Description of the event',
        location: 'Eiffel Tower, Paris',
        organizer: 'John Johnson',
        organizer_email: 'your@email.com',
        facebook_event: 'https://www.facebook.com/events/000000000000000',
        all_day_event: 'false',
        advanced: {
            mouse      : false,
            outlook    : false,
            google     : false,
            yahoo      : true,
            outlookcom : false,
            appleical  : false,
            facebook   : false,
            dropdown   : {order:"yahoo, facebook, appleical"}
        }
	}, function(err, data) {
	    // DO SOMETHING (error or success)
	});

Settings to Object

The settings object has the following attributes:

Option	Type	Default	Description
html	`String`	`null`	This attribute accepts a html value. Thus, a picture replaced the default button.
start	`String`	`MM/DD/YYYY`	Event start date. Mandatory. Format: "MM/DD/YYYY" or "DD/MM/YYYY".
end	`String`	`MM/DD/YYYY`	Event end date. Mandatory. Format: "MM/DD/YYYY" or "DD/MM/YYYY".
timezone	`String`	`null`	Timezone of the event, eg. "Europe/Paris".
title	`String`	`null`	Title of the event. Mandatory.
description	`HTML`	`''`	Description of the event. Maximum 500 characters recommended.
location	`String`	`''`	Event location
organizer	`String`	`''`	Event organizer
organizer_email	`String`	`''`	Event organizer e-mail
facebook_event	`String`	`''`	Link to event on Facebook, eg. https://www.facebook.com/events/703782616363133
all_day_event	`Boolean`	`false`	All day event, eg "true" or "false".
date_format	`String`	`null`	Format of the date in "start" and "end", eg "MM/DD/YYYY". Values can be "MM/DD/YYYY" or "DD/MM/YYYY". If "date_format" is not specified, the default format "MM/DD/YYYY" will be applied. Mandatory.
advanced	object	''	Are the options passed to the extra script after the included script in “The Button”. Please see the "Settings to Object advanced" table.

The advanced settings are set for all component instances on the same screen.

Settings to Object advanced

The advanced object has the following attributes:

Name	type	default	description
mouse	`Boolean`	`false`	Show options dropdown on mouseover.
outlook	`Boolean`	`true`	Show option in dropdown.
google	`Boolean`	`true`	Show option in dropdown.
yahoo	`Boolean`	`true`	Show option in dropdown.
outlookcom	`Boolean`	`true`	Show option in dropdown.
appleical	`Boolean`	`true`	Show option in dropdown.
facebook	`Boolean`	`true`	Show option in dropdown. To use this feature, previously should be be created an event on facebook page. After creation, you must copy the url of the event and set it in the 'facebook_event' attribute. eg. https://www.facebook.com/events/703782616363133
dropdown	`Object`	`''`	Sort order of the items in the dropdown. eg. `{order:"yahoo, facebook, appleical"}`. The items of this object must be defined in 'advanced' attribute with the value `true`.

A slideshow component for cycling through elements, like a carousel. Nested carousels are not supported.

Basic configuration

	FLUIGC.carousel(target, settings);

Live demo

Creating carousel with Developer Studio using the Style Guide

If you want to create forms using the style guide and add the carousel component, you'll need to import the minified CSS and JavaScript files.

	<link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide-carousel.min.css">
	<script src="/style-guide/js/fluig-style-guide-carousel.min.js"></script>

Using carousel in widgets

To use carousel in widgets, you must inform the following line in the application.info file of your widget:

	application.resource.component.1=fluigcarousel

Usage

	<div id="carousel-example-generic"></div>

	var images = [
		{
			src: './images/bnr-carousel-img-01.jpg',
			alt: 'First image',
			title: 'First image',
			description: 'First image description',
			linktarget: '_blank',
			linkhref: 'http://www.fluig.com',
			linktext: 'fluig'
		},
		{
			src: './images/bnr-carousel-img-02.jpg',
			alt: 'Second image',
			title: 'Second image',
			description: 'Second image description',
			linktarget: '_blank',
			linkhref: 'http://style.fluig.com',
			linktext: 'Style Guide'
		}
	];
	
	var settings = {
		id: 'myFluigCarouselExample',
		images: images,
		indicators: true,
		startIndex: 0,
		interval: 5000
	};
	
	var carousel = FLUIGC.carousel('#carousel-example-generic', settings);

Carousel options

Option	Type	Default value	Description
id	string	'fluigCarousel_' + a random integer	The id of the carousel.
images	array of objects	[]	The array of images.
indicators	boolean	true	The `ol` circle indicators for each image, placed near the bottom of the carousel.
startIndex	integer	0	The array index of the first image to be loaded.
interval	integer/boolean	5000	The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
template	string	null	The Mustache template, in HTML format, to be rendered on each node.
maxHeight	string	400px	The height of the gallery and the max-height of the images.
resize	boolean	false	Resize the gallery according to the current image.
autoSize	boolean	false	Resize the image to fill all available space.

Image object options

Option	Type	Description
src	string	The image URL.
alt	string	The image alternate text.
title	string	The image title
description	string	The image description
linktarget	string	If filled, defines which window will open page configured in linkhref.
linkhref	string	If filled, will be placed in the href="" attribute of an `a` tag, that behaves like a button.
linktext	string	The text of the `a` tag

Methods

.pause()

Stops the carousel from cycling through items.

.play()

Cycles through the carousel items from left to right.

.next()

Cycles to the next item.

.prev()

Cycles to the previous item.

.goTo(index)

Cycles the carousel to a particular frame (0 based, similar to an array).

Events

fluig.carousel.slide

This event fires when the slide instance method is invoked.

	carousel.on('fluig.carousel.slide', function(){
		// Do something
	});

Using caption templates

In carousel, you can set a Mustache template to render inside the div class="caption" of each image.

	<script type="text/template" class="my_template_img_caption">
		<h3>{{title}}</h3>
		<p>{{description}}</p>
		<a class="btn btn-info btn-lg" href="{{linkhref}}">{{linktext}}</a>
	</script>

Caption template demo

	<script type="text/template" class="my_caption_template_carousel">
		<h1>{{templateTitle}}</h1>
	</script>

	var images2 = [
		{
			src: './images/bnr-carousel-img-01.jpg',
			alt: 'First image',
			templateTitle: 'Caption template first image'
		},
		{
			src: './images/bnr-carousel-img-02.jpg',
			alt: 'Second image',
			templateTitle: 'Caption template second image'
		}
	];
	
	var settings = {
		id: 'myFluigCarouselExample2',
		images: images2,
		indicators: true,
		startIndex: 0,
		interval: 5000,
		template: '.my_caption_template_carousel'
	};
	
	var carousel = FLUIGC.carousel('#carousel-example-caption-template', settings);

The Code Editor component allows you to edit code directly over the web. It matches some features and performance of native editors such as Sublime, Vim and TextMate.

Basic configuration

	var editor = FLUIGC.codeeditor(target, settings);

Live demo

var x = 100; var text = "hello, world"; console.log(x); alert(text);

		<div id="editor" style="position:relative; width:width:100%; height:300px">
			var x = 100;
			var text = "hello, world";
			
			console.log(x);
			alert(text);
		</div>

	var editor = FLUIGC.codeeditor("editor");

Using Code Editor component with Developer Studio

If you want to add the Code Editor component in forms, you'll need to import the minified JavaScript file.

	<script src="/style-guide/js/fluig-style-guide-codeeditor.min.js"></script>

Using Code Editor in widgets

To use Code Editor in widgets, you must inform the following line in the application.info file of your widget:

	application.resource.component.1=fluigcodeeditor

Settings

	var settings = {
		theme: 'monokai',
		mode: 'javascript'
	};

Option	Type	Default	Description
theme	`String`	`'textmate'`	Allows to choose the theme of the editor. Themes available: `textmate` and `monokai`.
mode	`String`	`'javascript'`	Allows to choose the programming language that will be used in the editor. Programming languages available: `javascript`, `html` and `css`.

Methods

.setValue()

Sets the editor content

	editor.setValue();

.getValue()

Get the editor content

	editor.getValue();

.getTextRange()

Get selected text

	editor.session.getTextRange(editor.getSelectionRange());

.insert()

Insert at cursor

	editor.insert("Something cool");

.getCursor()

Get the current cursor line and column

	editor.selection.getCursor();

.gotoLine()

Go to a line

	editor.gotoLine(lineNumber);

.getLength()

Get total number of lines

	editor.session.getLength();

.setTabSize()

Set the default tab size

	editor.getSession().setTabSize(4);

.setUseWrapMode()

Toggle word wrapping

	editor.getSession().setUseWrapMode(true);

.setHighlightActiveLine()

Set line highlighting

	editor.setHighlightActiveLine(false);

.setShowPrintMargin()

Set the print margin visibility

	editor.setShowPrintMargin(false);

.setReadOnly()

Set the editor to read-only

	editor.setReadOnly(true)

Create color pickers directly from inputs.

Basic configuration

	FLUIGC.colorpicker(target, settings);

Live demo

Creating color pickers with Developer Studio using the Style Guide

If you want to create forms using the style guide and add the Color Picker component, you'll need to import the minified CSS and JavaScript files.

	<link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide-colorpicker.min.css">
	<script src="/style-guide/js/fluig-style-guide-colorpicker.min.js"></script>

Using Color Picker in widgets

To use Color Picker in widgets, you must inform the following line in the application.info file of your widget:

	application.resource.component.1=fluigcolorpicker

Usage

	<input class="form-control" id="colorpicker-example-generic" type="text" name="colorpicker-example-generic" value="#58595B" />

	var settings = {
		changeDelay: 200,
		control: 'wheel',
		defaultValue: '#58595b',
		inline: false,
		letterCase: 'lowercase',
		opacity: true,
		position: 'bottom left',
		customColorNames: {
			'mycustomcolor': '#123456'
		}
	} 
	var myColorPicker = FLUIGC.colorpicker('#colorpicker-example-generic', settings);

Settings

Name	Type	Default value	Description
changeDelay	int	10	The time, in milliseconds, to defer the change event from firing while the user makes a selection. This is useful for preventing the change event from firing frequently as the user drags the color picker around. The default value is 0 (no delay). If your change callback features something resource-intensive (such as an AJAX request), you’ll probably want to set this to at least 200.
control	string	'hue'	Determines the type of control. Valid options are `hue`, `brightness`, `saturation`, and `wheel`.
defaultValue	string	''	To force a default color, set this to a valid hex string. When the user clears the control, it will revert to this color.
inline	boolean	false	Set to `true` to force the color picker to appear inline.
letterCase	string	'lowercase'	Determines the letter case of the hex code value. Valid options are `uppercase` or `lowercase`.
opacity	boolean	false	Set to `true` to enable the opacity slider (Use the input element's `data-opacity` attribute to set a preset value).
position	string	'bottom left'	Sets the position of the dropdown. Valid options are `bottom left`, `bottom right`, `top left`, and `top right`.
customColorNames	object	''	CSS has some defined color names, like `red`, `blue` and `yellow`. This options lets you give an object with some custom color names and their matching hex. For example: `'mycustomcolor': '#123456'`. After you type 'mycustomcolor', it will change the input value to '#123456'.

Methods

.rgbObject

Returns an object containing red, green, blue, and alpha properties that correspond to the control's current value.

	var rgbObject = myColorPicker.rgbObject();

.rgbString & .rgbaString

Returns an RGB or RGBA string suitable for use in your CSS.

	var rgbString = myColorPicker.rgbString();
	var rgbaString = myColorPicker.rgbaString();

.settings

Gets or sets a control's settings. If new settings are passed in, the control will destroy and re-initialize itself with any new settings overriding the old ones.

	var colorPickerSettings = myColorPicker.settings();

.value

Gets or sets a control's color value. To use this method as a setter, pass data in as a hex value. (You can also obtain this value by checking the input element's value attribute.)

	var colorPickerValue = myColorPicker.value();

.destroy

Returns the input element to its original, uninitialized state.

	myColorPicker.destroy();

Events

fluig.colorpicker.change

Fires when the value of the color picker changes.

	myColorPicker.on('fluig.colorpicker.change', function(data){
		console.log(data.element); //reference the original input element.
		console.log(data.hex); 
		console.log(data.opacity);
	});

fluig.colorpicker.show

Fires when the color picker is shown.

	myColorPicker.on('fluig.colorpicker.show', function(data){
		console.log(data.element); //reference the original input element.
	});

fluig.colorpicker.hide

Fires when the color picker is hidden.

	myColorPicker.on('fluig.colorpicker.hide', function(data){
		console.log(data.element); //reference the original input element.
	});

A simply image cropping component.

Basic configuration

	FLUIGC.cropper(target, settings);

Live demo

	<img id="cropper-generic-example" src="./images/bnr-carousel-img-01.jpg">

	var myCropper = FLUIGC.cropper('#cropper-generic-example');

Using cropper with Developer Studio

If you want to create forms and use the Cropper component, you'll need to import the minified CSS and JavaScript files.

	<link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide-cropper.min.css">
	<script src="/style-guide/js/fluig-style-guide-cropper.min.js"></script>

Using Cropper in widgets

To use the Cropper component in widgets, you must inform the following line in the application.info file of your widget:

	application.resource.component.1=fluigcropper

Settings

	settings = {
	    aspectRatio: NaN,
	    data: null,
	    preview: '',
	    strict: true,
	    responsive: true,
	    checkImageOrigin: true,
	    modal: true,
	    guides: true,
	    center: true,
	    highlight: true,
	    background: true,
	    autoCrop: true,
	    autoCropArea: 0.8,
	    dragCrop: true,
	    movable: true,
	    rotatable: true,
	    scalable: true,
	    zoomable: true,
	    mouseWheelZoom: true,
	    wheelZoomRatio: 0.1,
		touchDragZoom: true,
	    cropBoxMovable: true,
	    cropBoxResizable: true,
	    doubleClickToggle: true,
	    minCanvasWidth: 0,
	    minCanvasHeight: 0,
	    minCropBoxWidth: 0,
	    minCropBoxHeight: 0,
	    minContainerWidth: 200,
	    minContainerHeight: 100,
	    build: null,
	    built: null,
	    cropstart: null,
	    cropmove: null,
	    cropend: null,
	    crop: null,
	    zoom: null
	}

Option	Type	Default	Description
aspectRatio	`Number`	`NaN`	Set the aspect ratio of the crop box. By default, the crop box is free ratio.
data	`Object`	`null`	The previous cropped data if you had stored, will be passed to setData method automatically.
preview	`String`	`''`	jQuery selector. Add extra elements (containers) for previewing. The maximum width is the initial width of preview container. The maximum height is the initial height of preview container. If you set an aspectRatio option, be sure to set the preview container with the same aspect ratio.
strict	`Boolean`	`true`	In strict mode, the canvas (image wrapper) cannot be smaller than the container, and the crop box cannot be outside of the canvas (image wrapper).
responsive	`Boolean`	`true`	Rebuild the cropper when resize the window.
modal	`Boolean`	`true`	Show the black modal above the image and under the crop box.
guides	`Boolean`	`true`	Show the dashed lines above the crop box.
center	`Boolean`	`true`	Show the center indicator above the crop box.
highlight	`Boolean`	`true`	Show the white modal above the crop box (highlight the crop box).
background	`Boolean`	`true`	Show the grid background of the container.
autoCrop	`Boolean`	`true`	Enable to crop the image automatically when initialize.
autoCropArea	`Number`	`0.8` (80% of the image)	A number between 0 and 1. Define the automatic cropping area size (percentage).
dragCrop	`Boolean`	`true`	Enable to remove the current crop box and create a new one by dragging over the image.
movable	`Boolean`	`true`	Enable to move the image.
rotatable	`Boolean`	`true`	Enable to rotate the image.
scalable	`Boolean`	`true`	Enable to scale the image.
zoomable	`Boolean`	`true`	Enable to zoom the image.
mouseWheelZoom	`Boolean`	`true`	Enable to zoom the image by wheeling mouse.
wheelZoomRatio	`Number`	`0.1`	Define zoom ratio when zoom the image by wheeling mouse.
touchDragZoom	`Boolean`	`true`	Enable to zoom the image by dragging touch.
cropBoxMovable	`Boolean`	`true`	Enable to move the crop box.
cropBoxResizable	`Boolean`	`true`	Enable to resize the crop box.
doubleClickToggle	`Boolean`	`true`	Enable to toggle drag mode between "crop" and "move" when double click on the cropper.
minContainerWidth	`Number`	`200`	The minimum width of the container.
minContainerHeight	`Number`	`100`	The minimum height of the container.
minCanvasWidth	`Number`	`0`	The minimum width of the canvas (image wrapper).
minCanvasHeight	`Number`	`0`	The minimum height of the canvas (image wrapper).
minCropBoxWidth	`Number`	`0`	The minimum width of the crop box.
minCropBoxHeight	`Number`	`0`	The minimum height of the crop box.
build	`Function`	`null`	A shortcut of the "build.cropper" event.
built	`Function`	`null`	A shortcut of the "built.cropper" event.
cropstart	`Function`	`null`	A shortcut of the "cropstart.cropper" event.
cropmove	`Function`	`null`	A shortcut of the "cropmove.cropper" event.
cropend	`Function`	`null`	A shortcut of the "cropend.cropper" event.
crop	`Function`	`null`	A shortcut of the "crop.cropper" event.
zoom	`Function`	`null`	A shortcut of the "zoom.cropper" event.

Methods

Methods in the cropper component are used in a particular way, as shown in the example code below:

	var myCropperMethods = myCropper.initMethods();
	myCropperMethods.cropper('rotate', 45);

Saving the `initMethods` method

You'll need to save the initMethods() function into a variable (as shown above), and then use this variable plus the .cropper method to run the methods listed below.

enable

Enable (unfreeze) the cropper.

	myCropperMethods.cropper('enable');

disable

Disable (freeze) the cropper.

	myCropperMethods.cropper('disable');

destroy

Destroy the cropper and remove the instance from the image.

	myCropperMethods.cropper('destroy');

reset

Reset the image and crop box to their initial states.

	myCropperMethods.cropper('reset');

clear

Clear the crop box.

	myCropperMethods.cropper('clear');

replace

Argument type: string. Replace the image's src and rebuild the cropper.

	myCropperMethods.cropper('replace', '/img/new-img.jpg');

rotate

Argument type: number. Receives a positive number to rotate clockwise, or a negative number to rotate counterclockwise.

	myCropperMethods.cropper('rotate', 45);

zoom

Argument type: number. Zoom in: requires a positive number (ratio > 0). Zoom out: requires a negative number (ratio < 0).

	myCropperMethods.cropper('zoom', 0.1);

move

Arguments type: number. The first argument moves the canvas in the horizontal direction. The second argument moves the canvas in vertical direction.

	myCropperMethods.cropper('move', 1, -1);

scale

Arguments type: number. The first argument makes the scaling factor to apply on the abscissa of the image. The second argument makes the scaling factor to apply on the ordinate of the image.

	myCropperMethods.cropper('scale', 1, -1);

getData

Output the cropped area position and size data (base on the original image). Pass a boolean argument as true to get rounded values.

Properties of the returned object:

x: the offset left of the cropped area
y: the offset top of the cropped area
width: the width of the cropped area
height: the height of the cropped area
rotate: the rotated degrees of the image
scaleX: the scaling factor to apply on the abscissa of the image
scaleY: the scaling factor to apply on the ordinate of the image

	myCropperMethods.cropper('getData'); //returns an object with rectangled values
	myCropperMethods.cropper('getData', true); //returns an object with rounded values

setData

Argument type: Object. Change the cropped area position and size with new data (base on the original image). To construct the data, see the properties of the getData method.

Note

Only available in strict mode.

	myCropperMethods.cropper('setData', data);

getContainerData

Returns the container size data (width and height).

	myCropperMethods.cropper('getContainerData');

getImageData

Returns the image position, size and other related data.

	myCropperMethods.cropper('getImageData');

getCanvasData

Returns the canvas (image wrapper) position and size data (left, top, width and height).

	myCropperMethods.cropper('getCanvasData');

setCanvasData

Argument type: Object. Change the canvas (image wrapper) position and size with new data (left, top, width and height).

	myCropperMethods.cropper('setCanvasData', {left: 0, top: 0, width: 200, height: 100});

getCropBoxData

Returns the crop box position and size data (left, top, width and height).

	myCropperMethods.cropper('getCropBoxData');

setCropBoxData

Argument type: Object. Change the crop box position and size with new data (left, top, width and height).

	myCropperMethods.cropper('setCropBoxData', {left: 0, top: 0, width: 200, height: 100});

Events

Functions (to run when events are triggered) should be passed as options within the construction of the Cropper component, as follows:

Option	Type	Default	Description
build	`Function`	`null`	A shortcut of the "build.cropper" event.
built	`Function`	`null`	A shortcut of the "built.cropper" event.
cropstart	`Function`	`null`	A shortcut of the "cropstart.cropper" event.
cropmove	`Function`	`null`	A shortcut of the "cropmove.cropper" event.
cropend	`Function`	`null`	A shortcut of the "cropend.cropper" event.
crop	`Function`	`null`	A shortcut of the "crop.cropper" event.
zoom	`Function`	`null`	A shortcut of the "zoom.cropper" event.

Below you can find the events description of the Cropper component.

build

This event fires when a cropper instance starts to load an image.

	build: function(){
		//Your code
	}

built

This event fires when a cropper instance has built completely.

	built: function(){
		//Your code
	}

cropstart

This event fires when the canvas (image wrapper) or the crop box starts to change.

	cropstart: function(e){
		console.log(e.type); // cropstart
		console.log(e.namespace); // cropper
		console.log(e.action); // ...
		console.log(e.originalEvent.pageX);

		// Prevent to start cropping, moving, etc if necessary
 		if (e.action === 'crop') {
			e.preventDefault();
		}
	}

cropmove

This event fires when the canvas (image wrapper) or the crop box is changing.

	cropmove: function(e){
		//See cropstart event
	}

cropend

This event fires when the canvas (image wrapper) or the crop box stops to change.

	cropend: function(e){
		//See cropstart event
	}

crop

This event fires when the canvas (image wrapper) or the crop box changed.

	crop: function(e){
		// About these properties, see the getData method.
		console.log(e.x);
		console.log(e.y);
		console.log(e.width);
		console.log(e.height);
		console.log(e.rotate);
		console.log(e.scaleX);
		console.log(e.scaleY);
	}

zoom

This event fires when a cropper instance starts to zoom in or zoom out its canvas (image wrapper). e.ratio: the current zoom ratio (ratio > 0 means zoom in, ratio < 0 means zoom out).

	zoom: function(e){
		var maxRatio = 10;
		var imageData = $(this).cropper('getImageData');
		var currentRatio = imageData.width / imageData.naturalWidth;

		// Zoom in
		if (e.ratio > 0 && currentRatio > maxRatio) {

			// Prevent zoom in
			e.preventDefault();
	
			// Fit the max zoom ratio
			$(this).cropper('setCanvasData', {
				width: imageData.naturalWidth * maxRatio
			});
		}
		
		// Zoom out
		// ...
	}

It is a joint of two JavaScript components: Autocomplete and Datatable. They were combined to provide a solution where the user can compare between a set of results using the Datatable, then select the ones to fill in the autocomplete input.

Basic configuration

	FLUIGC.filter(target, settings);

Live demo with REST

Creating filter with Developer Studio using the Style Guide

If you want to create forms using the style guide and add the filter component, you'll need to import the minified CSS and JavaScript files.

	<link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide-filter.min.css">
	<script src="/style-guide/js/fluig-style-guide-filter.min.js"></script>

Using filter in widgets

To use filter in widgets, you must inform the following line in the application.info file of your widget:

	application.resource.component.1=fluigfilter

Usage

In HTML

	<!--The input text element, to be transformed in a filter.-->
	<input id="filter-example-generic" type="text" name="filter-example-generic"/>

In JavaScript with REST

	var settings = {
		source: {
			url: '/example/rest',
			contentType: 'application/json',
			root: 'content',
			pattern: '',
			limit: 10,
			offset: 0,
			patternKey: 'pattern',
			limitkey: 'limit',
			offsetKey: 'offset'
		},
		displayKey: 'name',
		multiSelect: true,
		style: {
			autocompleteTagClass: 'tag-gray',
			tableSelectedLineClass: 'info'
		},
		table: {
			header: [
				{
					'title': 'ID',
					'size': 'col-xs-3'
				},
				{
					'title': 'Name',
					'size': 'col-xs-9',
					'dataorder': 'name',
					'standard': true
				}
			],
			renderContent: ['id', 'name']
		}
	};

	var filter = FLUIGC.filter('#filter-example-generic', settings);

Live demo with source array

In HTML

	<input id="filter-example-array" type="text" name="filter-example-array"/>

In JavaScript with source array


	var source = [{
		company: 'Wonka Industries',
		id: 1
	}, {
		company: 'Acme Corp',
		id: 2
	}, {
		company: 'Stark Industries',
		id: 3
	}, {
		company: 'Ollivander\'s Wand Shop',
		id: 4
	}, {
		company: 'Wayne Enterprises',
		id: 5
	}, {
		company: 'Cheers',
		id: 6
	}, {
		company: 'Gekko & Co',
		id: 7
	}];

	var settingsExampleArray = {
		source: source,
		displayKey: 'company',
		multiSelect: true,
		style: {
			autocompleteTagClass: 'tag-gray',
			tableSelectedLineClass: 'info'
		},
		table: {
			header: [{
				'title': 'company',
				'size': 'col-xs-9',
				'dataorder': 'company',
				'standard': true
			}],
			renderContent: ['company']
		}
	};

	var filter = FLUIGC.filter('#filter-example-array', settingsExampleArray);

Using with Datasets


	...

	initFilter: function() {

		var users = this.getDatasetUsers();

		var settingsExampleDataset = {
			source: users,
			displayKey: 'colleagueName',
			multiSelect: true,
			style: {
				autocompleteTagClass: 'tag-gray',
				tableSelectedLineClass: 'info'
			},
			table: {
				header: [{
					'title': 'colleagueName',
					'size': 'col-xs-9',
					'dataorder': 'colleagueName',
					'standard': true
				}],
				renderContent: ['colleagueName']
			}
		};
	
		var filter = FLUIGC.filter('#filter-example-dataset', settingsExampleDataset);
	},

	getDatasetUsers: function() {

		try {
				// Busca o dataset de usuários
				var dataset = DatasetFactory.getDataset('colleague');
				var users = dataset.values;
				return users;
		} catch(error) {
				console.error(error);
				return [];
		}
	}

	...

Options

Name	Required	Type	Default value	Description
displayKey	Required	string	'value'	For a given suggestion object, determines the string representation of it. This will be used when setting the value of the input control after a suggestion is selected. Can be either a key string or a function that transforms a suggestion object into a string. When a local array is used, this key is used to make the filter pattern.
style	Optional	object	undefined	Receives an object containing the style options of the component. More information at the following section "Style options".
table	Required	object	undefined	Receives an object containing the settings for the rendered datatable. More information at the following section "Table options".
tableHeight	Optional	string	'260px'	The height of the container of the table.
source	Required	object	undefined	Receives an object with the settings for the listing service or a local array. More info.
multiSelect	Optional	boolean	false	Allows multiple items.
searchTimeout	Optional	number	200	Receives the waiting time to make the request. This is important not to open a request for each character typed.
minLength	Optional	number	1	The minimum character length needed before suggestions start getting rendered.
tagMaxWidth	Optional	string or number	200	Maximum size of the tag (without regard to remove).

Table options

Name	Type	Default value	Description
header	object	''	Explained better at the following section "Settings to array of objects header".
formatData	function	''	Function to process the data before they are rendered, thus being able to format them if necessary;
renderContent	array or string	''	This attribute is required, can be an array with the keys of the object or CSS class of a mustache template.

Settings to array of objects header

The settings object has the following attributes:

Name	type	default	description
title	string	''	Title for the table header.
dataorder	string	''	Value that will be sent to the server for ordering. This value is concatenated with ASC or DESC.
standard	boolean	''	Default value ordering.
size	string	''	Define a CSS class to apply to the column width. Ex .: 'col-md-2'.
display	boolean	true	If this attribute is set to "false", this column will be hidden.

Source option

The source option can receive an object with the REST settings or a local array with the objects that will be listed.

Note

When using a local array, the component does not enable pagination.

Name	Type	Description
url	string	Used to indicate the URL of the API access.
contentType	string	Used to indicate the resource file type. Example: `application/json`
root	string	Used to indicate the primary property of the API return where the values to be listed are located. Example: `content`.
pattern	string	Used to indicate the value that the filter will be made in the API.
limit	number	Used to indicate the threshold value of items returned in the search. Example: `10`.
offset	number	Used to indicate the search start value. Example: `0`.
patternKey	string	Used to indicate the name of the key that will be made the filter in the API. Example: `pattern`.
limitkey	string	Used to indicate the name of the key that will be made the limit of items returned in the search. Example: `limit`.
offsetKey	string	Used to indicate the name of the key that will be the beginning of the search. Example: `offset`.

Style options

Name	Type	Default value	Description
templateTag	string	''	The selector for the autocomplete tag template.
templateSuggestion	string	''	The selector for the autocomplete suggestion template.
templateTipMessage	string	''	The selector for the autocomplete tip message template.
autocompleteTagClass	string	'tag-gray'	Classname for the tags.
tableSelectedLineClass	string	''	CSS class used to table selected lines.
tableStyle	string	''	Receives the waiting time to make the request. This is important not to open a request for each character typed.
filterIconClass	string	'fluigicon-zoom-in'	Defines a CSS class to apply to the table. Ex .: 'table-hover table-bordered table-striped'.

Methods

.add(item)

Adds a tag.

	var item = {name: 'Brazil'};
	filter.add(item);

.removeAll()

Removes all tags.

	filter.removeAll();

.getSelectedItems()

Return tags items in input.

	filter.getSelectedItems();

.reload(settings)

Reload the filter component with new settings.

	var settings = {
		/* New settings component filter */
	};
	filter.reload(settings);

.focus()

Applies the focus event to the component by opening the list of suggestions for searching.

	filter.focus();

.disable(disable)

Disables the filter component, not allowing the tags to be edited.

	// Enabling
	filter.disable(false);

	//Disabling
	filter.disable(true);

.open()

Open the list of suggestions for searching.

	filter.open();

.close()

Close the list of suggestions for searching.

	filter.close();

	<div class="row">
		<div class="col-md-12">
			<input id="filter-example-methods" type="text" name="filter-example-methods"/>
		</div>
	</div>
	<br>
	<div class="row">
		<div class="col-md-12">
			<button type="button" class="btn btn-default" data-filter-add-item>Add item</button>
			<button type="button" class="btn btn-default" data-filter-remove-all>Remove all</button>
			<button type="button" class="btn btn-default" data-filter-get-selected-items>Get selected items</button>
			<button type="button" class="btn btn-default" data-filter-reload>Reload</button>
			<button type="button" class="btn btn-default" data-filter-focus>Focus</button>
			<button type="button" class="btn btn-default" data-filter-disable>Disable</button>
			<button type="button" class="btn btn-default" data-filter-enable>Enable</button>
			<button type="button" class="btn btn-default" data-filter-open>Open</button>
			<button type="button" class="btn btn-default" data-filter-close>Close</button>
		</div>
	</div>

	var filterExampleMethods = FLUIGC.filter('#filter-example-methods', settings);
	
	/* method: add(item) */
	$(document).on('click', '[data-filter-add-item]', function(ev) {
		var item = {
			name: 'Brazil'
		};
		filterExampleMethods.add(item);
	});
	
	/* method: removeAll() */
	$(document).on('click', '[data-filter-remove-all]', function(ev) {
		filterExampleMethods.removeAll();
	});

	/* method: getSelectedItems() */
	$(document).on('click', '[data-filter-get-selected-items]', function(ev) {
		var items = filterExampleMethods.getSelectedItems();

		FLUIGC.toast({
			title: 'Item selected: ',
			message: JSON.stringify(items),
			type: 'success'
		});
	});

	/* method: reload(settings) */
	$(document).on('click', '[data-filter-reload]', function(ev) {
		filterExampleMethods.reload(settings);
	});

	/* method: focus() */
	$(document).on('click', '[data-filter-focus]', function(ev) {
		filterExampleMethods.focus();
	});

	/* method: disable(true) */
	$(document).on('click', '[data-filter-disable]', function(ev) {
		filterExampleMethods.disable(true);
	});

	/* method: disable(false) */
	$(document).on('click', '[data-filter-enable]', function(ev) {
		filterExampleMethods.disable(false);
	});

	/* method: open() */
	$(document).on('click', '[data-filter-open]', function(ev) {
		filterExampleMethods.open();
	});

	/* method: close() */
	$(document).on('click', '[data-filter-close]', function(ev) {
		filterExampleMethods.close();
	});

Events

Avoid two filters in the same parent

The events listener of each filter is the first parent HTML element of it. If you have two filters in the same parent, you must put each one inside a particular span. Otherwise, the event will trigger to both.

fluig.filter.item.added

Triggered just after an item got added.

	filter.on('fluig.filter.item.added', function(data) {
		//Do something
	});

fluig.filter.load.complete

Triggered just after the filter component is ready.

	filter.on('fluig.filter.load.complete', function() {
		//Do something
	});

	<input id="filter-example-generic2" type="text" name="filter-example-generic"/>

	var filter2 = FLUIGC.filter('#filter-example-generic2', settings);

	filter2.on('fluig.filter.load.complete', function () {
		var item = { name: 'Argentina' };
		filter2.add(item);
	});

	filter2.on('fluig.filter.item.added', function (data) {
		FLUIGC.toast({
			title: 'Item selected: ',
			message: data.item.name,
			type: 'success'
		});
	});

Organizational Chart

Organizational Chart forks the jQuery Org Chart plugin, providing a Style Guide user interface to show companies' organizational charts.

Basic configuration

	FLUIGC.orgChart(target, settings);

Live demo

Creating organizational charts with Developer Studio using the Style Guide

If you want to create forms using the style guide and add the organizational chart component, you'll need to import the minified CSS and JavaScript files.

	<link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide-orgchart.min.css">
	<script src="/style-guide/js/fluig-style-guide-orgchart.min.js"></script>

Using organizational charts in widgets

To use organizational charts in widgets, you must inform the following line in the application.info file of your widget:

	application.resource.component.1=fluigorgchart

Usage

In HTML

	<div id="orgChart"> </div> <!--The target, where the organizational chart will be placed.-->

In JavaScript

ID parameter

The ID parameter must be declared to each of the objects, otherwise, the organizational chart will not work.

	var testData = [
	    {id: 1, img: './images/logo-demo-map.png', name: 'My Organization', parent: 0},
	    {id: 2, img: './images/user_picture.png', name: 'Person 1', description: "CEO", parent: 1},
	    {id: 3, img: './images/user_picture.png', name: 'Person 2', description: "Division 1 VP", parent: 2},
	    {id: 4, img: './images/user_picture.png', name: 'Person 3', description: "Division 2 VP", parent: 2},
	    {id: 6, img: './images/user_picture.png', name: 'Person 4', description: "Division 1 Director", parent: 3},
	    {id: 7, img: './images/user_picture.png', name: 'Person 5', description: "Division 1 Director", parent: 3},
	    {id: 8, img: './images/user_picture.png', name: 'Person 6', description: "Division 2 Director", parent: 4}
	];
	var settings = {
	    data: testData
	}
	var testOrgChart = FLUIGC.orgChart('#orgChart', settings);
	testOrgChart.on('fluig.orgchart.node.click', function(node){
		FLUIGC.toast({
	        title: 'Node clicked: ',
	        message: node.data.name,
	        type: 'success'
	    });
	});

Options

Name	Type	Description
data	Array of objects	The nodes of the organizational chart.
template	string	Optional, the Mustache template, in HTML format, to be rendered on each node.

Methods

.addNodes(data)

Add elements to the organizational chart.

Example: Adding 3 child elements to the "Division 1 Director" node:

	var dataChildren = [
	    {id: 7, img: './images/user_picture.png', name: 'Person 7', description: "Division 1 Manager", parent: 6},
	    {id: 8, img: './images/user_picture.png', name: 'Person 8', description: "Division 1 Manager", parent: 6},
	    {id: 9, img: './images/user_picture.png', name: 'Person 9', description: "Division 1 Manager", parent: 6}
	];
	testOrgChart.addNodes(dataChildren);

.deleteNodes(id)

Remove child elements from the specified node.

Example: Removing childs from the "Division 1 Director" node:

	testOrgChart.deleteNodes(6);

Methods demo

	var testOrgChart2 = FLUIGC.orgChart('#orgChart2', settings);
	testOrgChart2.on('fluig.orgchart.node.click', function(node){
		if(node.children.length == 0){
			var dataChilds = [
			    {id: Math.ceil(Math.random()*1000), img: './images/user_picture.png', name: 'Person', description: "Analyst", parent: node.data.id},
			    {id: Math.ceil(Math.random()*1000), img: './images/user_picture.png', name: 'Person', description: "Analyst", parent: node.data.id},
			    {id: Math.ceil(Math.random()*1000), img: './images/user_picture.png', name: 'Person', description: "Analyst", parent: node.data.id}
			];
			testOrgChart2.addNodes(dataChilds);
		}else{
			testOrgChart2.deleteNodes(node.data.id);
		}
	});

Events

fluig.orgchart.node.click

This event is fired when a node is clicked, and returns the clicked node object.

	testOrgChart2.on('fluig.orgchart.node.click', function(node){
		console.log(node);
		// Do something
	});

Using templates

In organizational charts, you can set a template to render inside of each node, instead of using the default template.

	<script type="text/template" class="my_template_orgchart">
		<div class="media">
			{{#img}}<a class="pull-left" href="#"><img class="img-rounded media-object" src="{{img}}"></a>{{/img}}
			<div class="media-body">
				{{#name}}<h4 class="media-heading">{{name}}</h4>{{/name}}
				{{#description}}<p>{{description}}</p>{{/description}}
				{{#email}}<p>{{email}}</p>{{/email}}
			</div>
		</div>
	</script>

	var testDataTemplate = [
	    {id: 1, img: './images/logo-demo-map.png', name: 'My Organization', parent: 0},
	    {id: 2, img: './images/user_picture.png', name: 'Person 1', description: "CEO", email: 'person1@fluig.com', parent: 1},
	    {id: 3, img: './images/user_picture.png', name: 'Person 2', description: "Division 1 VP", email: 'person2@fluig.com', parent: 2},
	    {id: 4, img: './images/user_picture.png', name: 'Person 3', description: "Division 2 VP", email: 'person3@fluig.com', parent: 2},
	    {id: 6, img: './images/user_picture.png', name: 'Person 4', description: "Division 1 Director", email: 'person4@fluig.com', parent: 3},
	    {id: 7, img: './images/user_picture.png', name: 'Person 5', description: "Division 1 Director", email: 'person5@fluig.com', parent: 3},
	    {id: 8, img: './images/user_picture.png', name: 'Person 6', description: "Division 2 Director", email: 'person6@fluig.com', parent: 4}
	];
	var settingsTemplate = {
	    data: testDataTemplate,
	    template: '.my_template_orgchart'
	}
	var testOrgChartTemplate = FLUIGC.orgChart('#orgChartTemplate', settingsTemplate);
	testOrgChartTemplate.on('fluig.orgchart.node.click', function(node){
		FLUIGC.toast({
	        title: 'Node clicked: ',
	        message: node.data.name,
	        type: 'success'
	    });
	});

Component for playing some videos in the system.

Basic configuration

	FLUIGC.player(target, urlVideo);

Live demo

Using videos with Developer Studio using the Style Guide

If you want to create forms using the style guide and add the player component, you'll need to import the minified CSS and JavaScript files.

	<link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide-player.min.css">
	<script src="/style-guide/js/fluig-style-guide-player.min.js"></script>

Video formats

Browser	ogg	mp4	webm	m3u8	flv	avi	wmv
Internet Explorer	-	9.0	-	-	9.0	9.0	9.0
Firefox	3.5	35.0	4.0	-	35.0	-	-
Chrome	3.0	3.0	6.0	-	3.0	-	-

Windows Media Player plugin.

The .avi and .wmv video formats are supported only in Internet Explorer, which uses a plugin windows media player to run. The width and height settings are specific to the native plugin.

Using player in widgets

To use player in widgets, you must inform the following line in the application.info file of your widget:

	application.resource.component.1=fluigplayer

Usage

	// usage with SuperWidget
	
	...
	
	// variable local of the widget which will be stored the component instance
	myPlayer: null,
	
	init: function() {
	
		// storing the component instance
		this.myPlayer = FLUIGC.player('#player-example', './videos/player-example.mp4', {
			fullscreen: false,
			volume: 0.5
		});
		
		...
	},
	
	...
	
	functionResume: function() {
	
		// Resume the video
		this.myPlayer.resume();
		
		...
	},
	
	functionPause: function() {
	
		// Pause the video
		this.myPlayer.pause(function(){
			// action on pause video
		});
		
		...
	},
	
	...
	
	...

There is another way to use the player, but you may not use the options and methods with it. Check out the example:

	<div class="flowplayer">
	   <video>
	      <source src="./videos/player-example.mp4">
	   </video>
	</div>

Keyboard options

Key	Action
space	play/pause
esc	stop
shift + left/right arrow	slower/faster
up/down arrow	volume
m	mute
left/right arrow	seek

Player options

Option	Type	Default value	Description
muted	boolean	false	Whether player should start in muted state. Use this option instead of the muted.
volume	decimal (Range 0 - 1)	1	The initial volume level.
debug	boolean	false	Show debug messages on the console. Causes errors if window.console is not present.
fullscreen	boolean	true	Whether fullscreen is enabled.
ratio	decimal	1/2	A decimal number representing the height of the player in proportion to its width. You usually want to change this setting for videos with a different aspect ratio than 1/2. You can override this by explicitly setting the height CSS property for the container in which case the player height stays the same on all devices and screen sizes.
bufferTime	int	3	Specifies how long to buffer messages before starting to display the stream. Affects the Flash engine only.
autoplay	boolean	false	Will start the playback automatically.
width	int	350	Sets the width of the player, only when using the windows media player plugin (.avi and .wmv formats in internet explorer).
height	int	300	Sets the height of the player, only when using the windows media player plugin (.avi and .wmv formats in internet explorer)

Methods

.fullscreen()

Toggles between native fullscreen mode and initial screen size. When native fullscreen support is not present the player expands to the full size of the browser window. Note: Many browsers allow this method to work only from events which are triggered by user interaction, like "click", and not for example from player events like "ready" which happen at moments undetermined by the user.

	myPlayer.fullscreen();

.mute(flag)

mute() without argument toggles between muted and normal state. mute(true) mutes and mute(false) unmutes.

	myPlayer.mute();
	myPlayer.mute(true);

.play(index)

Plays the clip of a playlist specified in the zero based index argument. For example: play(0) plays the first clip.

	myPlayer.play(0);

.resume()

Resumes playback.

	myPlayer.resume();

.stop()

Pauses playback and seeks to the beginning of the video.

	myPlayer.stop();

.volume()

Set the volume level to a decimal value between 0 (no volume) - 1 (full volume).

	myPlayer.volume(0.7);

.pause(callback)

Pauses playback.

	myPlayer.pause(function(){});

.speed(rate, callback)

Sets the speed level to the given rate. 1 = normal speed less than 1 = slow motion greater than 1 = fast forward The callback is executed once after the speed has changed.

	myPlayer.speed(1, function(){});

Ratings stars displays icons to user select the best option with the related issue.

Basic configuration

        FLUIGC.stars(target, settings);

Live demo

Creating rating stars with Developer Studio using the Style Guide

If you want to create forms using the style guide and add the rating component, you'll need to import the minified JavaScript file.

        <link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide-ratingstars.min.css">
        <script src="/style-guide/js/fluig-style-guide-ratingstars.min.js"></script>

Using rating stars in widgets

To use rating stars in widgets, you must inform the following line in the application.info file of your widget:

        application.resource.component.1=fluigratingstars

Usage

In HTML

        <div class="my-rating"></div> <!--The element to be transformed.-->

In JavaScript

        FLUIGC.stars(".my-rating", {
            stars: 5,
            // Other options
        });

Options

Name	Required	Type	Default value	Description
stars	Optional	number	5	Max number of stars to be selected
value	Optional	number	0	Number of stars to initialize as selected
text	Optional	array of strings	undefined	Each string is the description for each star
color	Optional	string	Fluig color	Icon font color
sizeClass	Optional	string	icon-sm	Icon size class
emptyIcon	Optional	string	fluigicon fluigicon-star-empty	Icon font class when not selected
filledIcon	Optional	string	fluigicon fluigicon-star	Icon font class when selected

Stars numbers

        FLUIGC.stars(".rating-numbers", {
            stars: 8,
            value: 3,
            text: ['Star 1', 'Star 2', 'Star 3', 'Star 4', 'Star 5', 'Star 6', 'Star 7', 'Star 8']
        });

Using other icons

        FLUIGC.stars(".other-rating-icons", {
            emptyIcon: 'fluigicon fluigicon-exclamation-sign',
            filledIcon: 'fluigicon fluigicon-exclamation-sign-on',
        });

Methods

.on(event, callback)

Attach an event handler function for events.

        var starsCallback = FLUIGC.stars(".rating-callback");
        starsCallback.on("click", function(obj) {
            FLUIGC.toast({
                title: 'Node clicked!',
                message: "Callback from star!",
                type: 'success'
            });
        });

Component for playing some sounds in the system.

Basic configuration

	FLUIGC.sounds(soundName);

Available sounds

Play
fluigsounds-drop
Play
fluigsounds-bell

Using sounds with Developer Studio using the Style Guide

If you want to create forms using the style guide and add the sounds component, you'll need to import the minified CSS and JavaScript files.

	<script src="/style-guide/js/fluig-style-guide-sounds.min.js"></script>

Using sounds in widgets

To use sounds in widgets, you must inform the following line in the application.info file of your widget:

	application.resource.component.1=fluigsounds

Usage

	// usage with SuperWidget
	
	...
	
	// variable local of the widget which will be stored the component instance
	mySound: null,
	
	init: function() {
	
		// storing the component instance
		this.mySound = FLUIGC.sounds('fluigsounds-drop');
		
		...
	},
	
	...
	
	someFuncNotify: function() {
	
		// playing the sound
		this.mySound.play();
		
		...
	},
	
	...

Methods

.play()

Play sound.

	mySound.play();

.pause()

Pause sound.

	mySound.pause();

.stop()

Stop sound.

	mySound.stop();

.increaseVolume()

Increase volume sound.

	mySound.increaseVolume();

.decreaseVolume()

Decrease volume sound.

	mySound.decreaseVolume();

.mute()

Mute sound.

	mySound.mute();

The Tags Cloud is a plugin that builds word clouds.

Basic configuration

        FLUIGC.tagscloud(target, words, settings);

Creating tagscloud with Developer Studio using the Style Guide

If you want to create forms and use the tagscloud component, you'll need to import the minified CSS and JavaScript files.

    	<link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide-tagscloud.min.css">
        <script src="/style-guide/js/fluig-style-guide-tagscloud.min.js"></script>

Using tagscloud in widgets

To use the tagscloud component in widgets, you must inform the following line in the application.info file of your widget:

	application.resource.component.1=fluigtagscloud

Live demo

No conf

Default configuration, no special parameters for words.

HTML

The minimum height is 300px. This property is default if the value of the height is smaller or not informed.

 	<div id="cloud"></div>

Javascript

	var words = [
						{text: "Lorem", weight: 13},
						{text: "Ipsum", weight: 10.5},
						{text: "Dolor", weight: 9.4},
						{text: "Sit", weight: 8},
						{text: "Amet", weight: 6.2},
						{text: "Consectetur", weight: 5},
						{text: "Adipiscing", weight: 4.5},
						{text: "elit", weight: 3},
						{text: "sed", weight: 3.5},
						{text: "eiusmod", weight: 2.4},
						{text: "tempor", weight: 8},
						{text: "labore", weight: 5},
						{text: "dolore", weight: 8},
						{text: "magna", weight: 7}
					];
		
		FLUIGC.tagscloud('#cloud',words);

Live demo

Links

The three biggest words have links.

HTML

 	<div id="cloud"></div>

Javascript

Below is the basic configuration to use Tags Cloud.

	var words = [
						{{text: "Lorem", weight: 13, link: '#'},
						{text: "Ipsum", weight: 10.5, link: '#'},
						{text: "Dolor", weight: 9.4, link: '#'},
						/* ... */
					];
		
		FLUIGC.tagscloud('#cloud',words);

Live demo

Shape

This cloud is rectangular!

		
		FLUIGC.tagscloud('#cloud',words, {
			shape: 'rectangular'
		});

Live demo

Custom colors & size via JS

A custom array of colors is given to the plugin in addition to min and max font size.

Javascript

	FLUIGC.tagscloud('#cloud',words, {
  classPattern: null,
  colors: ["#800026", "#bd0026", "#e31a1c", "#fc4e2a", "#fd8d3c", "#feb24c", "#fed976", "#ffeda0", "#ffffcc"],
  fontSize: {
    from: 0.1,
    to: 0.02
  }
});

Live demo

Event handlers

A click event is attached to the first word.

Javascript

	var words = [
  {text: "Lorem", weight: 13, handlers: {
    click: function() {
      alert('You clicked the word !');
    }
  }},
  {text: "Ipsum", weight: 10.5},
  {text: "Dolor", weight: 9.4},
  /* ... */
];

FLUIGC.tagscloud('#cloud',words);

Live demo

Update

Click the "Update" button to remove some words from the list, with non null delay.

Javascript

	var words = [
						{{text: "Lorem", weight: 13, link: '#'},
						{text: "Ipsum", weight: 10.5, link: '#'},
						{text: "Dolor", weight: 9.4, link: '#'},
						/* ... */
					];
	
	var intanceTagsCloug = FLUIGC.tagscloud('#cloud',words);
		
		$('#update-demo').on('click', function() {
			words.splice(-5);
			intanceTagsCloug.update(words);
		});

Settings

Cloud options

You can provide an object of options has second parameter.

		FLUIGC.tagscloud('#cloud', words, {
  			width: 500,
  			height: 350
		});

Name	Type	Default value	Description
width	integer		Fixed width of the container, will default to container current width
height	integer		Fixed height of the container, will default to container current height
center	object	{x: 0.5, y:0.5}	Position of the center of the cloud relatively to the container
autoResize	boolean	false	If the container has dynamic dimensions, set this option to true to update the cloud when the window is resized
steps	integer	10	Number of "steps" to map the words on, depending on their weight (see Colors & sizes section)
classPattern	string	'w{n}'	Pattern used to generate the CSS class added to each word. `{n}` is replaced by the weight of the word (from 1 to `steps`)
afterCloudRender	function	null	Function called after the whole cloud is fully rendered. `this` is the container jQuery object
delay	integer	0 or 10	Number of milliseconds to wait between each word draw. Defaults to `10` if there are 50 words or more to avoid browser freezing during rendering. Can also be used for neat display animation!
shape	string	'elliptic'	Cloud shape, `'elliptic'` or `'rectangular'`
removeOverflowing	boolean	true	Don't render words which would overflow the container
encodeURI	boolean	true	Encode special characters in words link
colors	array \| function	[]	Colors used instead of CSS declaration (see Colors & sizes section), can be: An array of colors from most to less important A function taking a step number as only parameter and returning a valid CSS color
fontSize	array \| function	[]	Text sizes used instead of CSS declaration (see Colors & sizes section), can be: An array of sizes (px, em or %) from most to less important An object with `from` and `to` values, expressed in fraction of container width (eg: `0.1`, `0.04`) A function taking the container width, the container height and a step number as parameters and returning a valid CSS font size

Colors & sizes

There are two ways to customize the cloud look and feel: pure CSS or JS configuration.

CSS customization

The plugin will add to each word of the cloud a CSS class based on classPattern. There will be steps classes. With the default configuration these classes are w10, w9, w8, w7, w6, w5, w4, w3, w2, w1.

The included CSS file jqcloud.css is intended as an example and a base on which you can develop your own style.

JS customization

colors and fontSize parameters to directly inform the plugin which style to apply to the words./p>

Methods

update

Use the update method to dynamically change the list of words in the cloud.

	var myInstance = FLUIGC.tagscloud('#cloud',words);
	myInstance.update(new_words);

destroy

Completely destroy the cloud and it's data.

	var myInstance = FLUIGC.tagscloud('#cloud',words);
	myInstance.destroy();

Basic configuration

	FLUIGC.treeview(target, settings);

Live demo

	<div id="myTreeview">
		<ul id="treeData" style="display: none;">
      <li id="id1" title="Look, a tool tip!">item1 with key and tooltip
      <li id="id2">item2
      <li id="id3" class="folder">Folder <em>with some</em> children
        <ul>
          <li id="id3.1">Sub-item 3.1
            <ul>
              <li id="id3.1.1">Sub-item 3.1.1
              <li id="id3.1.2">Sub-item 3.1.2
            </ul>
          <li id="id3.2">Sub-item 3.2
            <ul>
              <li id="id3.2.1">Sub-item 3.2.1
              <li id="id3.2.2">Sub-item 3.2.2
            </ul>
        </ul>
      <li id="id4" class="expanded">Document with some children (expanded on init)
        <ul>
          <li id="id4.1"  class="active focused">Sub-item 4.1 (active and focus on init)
            <ul>
              <li id="id4.1.1">Sub-item 4.1.1
              <li id="id4.1.2">Sub-item 4.1.2
            </ul>
          <li id="id4.2">Sub-item 4.2
            <ul>
              <li id="id4.2.1">Sub-item 4.2.1
              <li id="id4.2.2">Sub-item 4.2.2
            </ul>
        </ul>
    </ul>
	</div>

	var myTreeview = FLUIGC.treeview('#myTreeview');

Creating treeviews with Developer Studio using the Style Guide

If you want to create forms using the style guide and add the treeview component, you'll need to import the minified CSS and JavaScript files.

	<link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide-treeview.min.css">
	<script src="/style-guide/js/fluig-style-guide-treeview.min.js"></script>

Using treeviews in widgets

To use treeviews in widgets, you must inform the following line in the application.info file of your widget:

	application.resource.component.1=fluigtreeview

REST example

Expected data

The ajax service is expected to return valid JSON data:

	[{"title": "Node 1", "key": "1"},
	 {"title": "Folder 2", "key": "2", "folder": true, "children": [
	    {"title": "Node 2.1", "key": "3"},
	    {"title": "Node 2.2", "key": "4"}
	  ]}
	]

Passing Tree Meta Data

It is possible to pass additional tree meta-data along with the list of children:

		{
		  foo: "bar",
		  baz: 17,
		  children: [
		    {title: "Node 1", key: "1"},
		    {title: "Folder 2", key: "2", folder: true, children: [
		      {title: "Node 2.1", key: "3"},
		      {title: "Node 2.2", key: "4"}
		      ]
		    }
		  ]
		}

The additional properties will be added to the trees data object:

		alert(tree.data.foo); // "bar"

Handle custom data formats

To handle custom data formats (like the given example), the formatData callback allows to modify node data before it is added to the tree. data contains a reference to original data as returned by the ajax request. It may be modified in-place.

	var formatData = function(ev, data) {
		for (var i = 0; i < data.length; i++) {
			data.content[i].title = data.content[i].name;
			data.content[i].key = data.content[i].code;
		}
		return data.content;
	};

	var settings2 = {
		showCheckbox : false,
		source : {
			url : './sample-list',
			contentType : 'application/json',
			pattern : '',
			limit : 10,
			offset : 0
		},
		formatData : formatData
	};
	var myTreeview2 = FLUIGC.treeview('#myTreeview2', settings2);

Example with array of objects, lazy load and drag n' drop

	<div id="myTreeview3"></div>

	var settings3 = {
		source : [{
			title : "Planets",
			key : "1",
			folder : true,
			children : [{
				title : "Mercury",
				key : "3",
				iconclass : "fluigicon fluigicon-globe"
			}, {
				title : "Venus",
				key : "4",
				iconclass : "fluigicon fluigicon-globe"
			}, {
				title : "Earth",
				key : "5",
				iconclass : "fluigicon fluigicon-globe"
			}, {
				title : "Mars",
				key : "6",
				iconclass : "fluigicon fluigicon-globe"
			}, {
				title : "Jupiter",
				key : "7",
				iconclass : "fluigicon fluigicon-globe"
			}, {
				title : "Saturn",
				key : "8",
				iconclass : "fluigicon fluigicon-globe"
			}, {
				title : "Uranus",
				key : "9",
				iconclass : "fluigicon fluigicon-globe"
			}, {
				title : "Neptune",
				key : "10",
				iconclass : "fluigicon fluigicon-globe"
			}]
		}, {
			title : "Countries",
			key : "2",
			folder : true,
			lazy : true
		}],
		formatData : formatData,
		lazyLoad : function(event, data) {
			console.log(data.node);
			data.result = {
				url : "./sample-list",
				contentType : 'application/json',
				data : {
					//Your options to the rest service
				}
			};
		},
		draggable: {
			enabled: true,
			onDrop : function(node, data) {
				console.log(node);
				console.log(data);
				return true;
			}
		}
	};
	var myTreeview3 = FLUIGC.treeview('#myTreeview3', settings3);

Applying style to the dragging element

	<div id="myTreeview4"></div>

	var settings4 = {
		showCheckbox: false,
		source: {
			url: './sample-list',
			contentType: 'application/json',
			pattern: '',
			limit: 10,
			offset: 0
		},
		formatData: formatData,
		draggable: {
			enabled: true,
			onDragStart: function (node, data) {
				// Apply the bg-success class to the dragging element
				node.span.children[2].classList.add('bg-success');
			}
		}
	};
	var myTreeview4 = FLUIGC.treeview('#myTreeview4', settings4);

Treeview options

Name	Type	Default value	Description
icons	Object	As shown in the example code above	Allows to modify the default treeview icons.
draggagle	Object	`{enabled : false, onDrop : null, onDragStart : null, onDragEnter : null }`	Receives an object to manage or drag and drop elements. Read the detailed documentation (Treeview draggagle option) below.
source	Array or Object	null	The array of objects or the Ajax settings object.
showIcons	Boolean	true	Show or hide icons.
keyboard	Boolean	true	Allows navigation with the keyboard.
multiSelect	Boolean	false	Allows multiple selection.
formatData	Object	null	Allows to modify node data before it is added to the tree. `data` contains a reference to original data as returned by the ajax request.
lazyLoad	function	null	Single nodes may be marked 'lazy'. These nodes will generate ajax request when expanded for the first time. Lazy loading allows to present hierarchical structures of infinite size in an efficient way.

Treeview draggagle option

Name	Type	Default value	Description
enabled	Boolean	false	Allows drag and drop.
onDragStart	function	null	Method called when starting drag and drop.
onDragEnter	function	null	Method called when passing the dragged element over another element.
onDrop	function	null	Method called when dropping the dragged element onto another element.

	var settings = {
		icons : {
			doc : "fluigicon fluigicon-file",
			docOpen : "fluigicon fluigicon-file",
			checkbox : "fluigicon fluigicon-unchecked",
			checkboxSelected : "fluigicon fluigicon-checked",
			checkboxUnknown : "fluigicon fluigicon-share",
			dragHelper : "fluigicon fluigicon-play",
			dropMarker : "fluigicon fluigicon-arrow-right",
			error : "fluigicon fluigicon-warning-sign",
			expanderClosed : "fluigicon fluigicon-plus-sign",
			expanderLazy : "fluigicon fluigicon-plus-sign", // fluigicon-expand
			expanderOpen : "fluigicon fluigicon-minus-sign", // fluigicon-collapse-down
			folder : "fluigicon fluigicon-folder-close",
			folderOpen : "fluigicon fluigicon-folder-open",
			loading : "fluigicon fluigicon-time"
		},
		draggable : {
			enabled : false,
			onDrop : null
		}
		source : null,
		showIcons : true,
		showCheckbox : false,
		keyboard : true,
		multiSelect : true,
		formatData : null,
		lazyLoad : null
	}

Node options

Name	Type	Description
children	Array	Optional array of child nodes.
data	Object	All unknown properties from constructor will be copied to 'node.data'.
expanded	Boolean	Initial expansion state.
focus	Boolean	(Initialization only, but will not be stored with the node).
folder	Boolean	Folders have different default icons.
hideCheckbox	Boolean	Remove checkbox for this node.
icon	Boolean \| String	Boolean value overrides the tree option of the same name. A string value is used as 'src' attribute for a `img` tag.
iconclass	String	Class names added to the node icon markup to allow custom icons or glyphs (separate with space, e.g. "fluigicon fluigicon-user").
key	String	Unique key for this node (auto-generated if omitted)
lazy	Boolean	Lazy folders call the 'lazyLoad' on first expand to load their children.
selected	Boolean	Initial selection state.
title	String	Node text (may contain HTML tags).
tooltip	String	Will be added as 'title' attribute, thus enabling a tooltip.
unselectable	Boolean	Prevent selection using mouse or keyboard.

Events

fluig.treeview.activate

'data.content.node' was activated.

	myTreeview.on('fluig.treeview.activate', function(data){
		console.log(data.content);
	});

fluig.treeview.beforeActivate

'data.content.node' is about to be (de)activated. Return false to prevent default processing.

	myTreeview.on('fluig.treeview.beforeActivate', function(data){
		console.log(data.content);
	});

fluig.treeview.beforeExpand

'data.content.node' is about to tbe collapsed/expanded. Return false to prevent default processing.

	myTreeview.on('fluig.treeview.beforeExpand', function(data){
		console.log(data.content);
	});

fluig.treeview.beforeSelect

'data.content.node' is about to tbe (de)selected. Return false to prevent default processing.

	myTreeview.on('fluig.treeview.beforeSelect', function(data){
		console.log(data.content);
	});

fluig.treeview.blur

'data.content.node' lost keyboard focus.

	myTreeview.on('fluig.treeview.blur', function(data){
		console.log(data.content);
	});

fluig.treeview.blurTree

'data.content.tree' lost keyboard focus.

	myTreeview.on('fluig.treeview.blurTree', function(data){
		console.log(data.content);
	});

fluig.treeview.click

'data.content.node' was clicked. Return false to prevent default processing, i.e. activating, expanding, selecting, etc.

	myTreeview.on('fluig.treeview.click', function(data){
		console.log(data.content);
	});

fluig.treeview.collapse

'data.content.node' was collapsed.

	myTreeview.on('fluig.treeview.collapse', function(data){
		console.log(data.content);
	});

fluig.treeview.dblclick

'data.content.node' was double-clicked. Return false to prevent default processing, i.e. expanding, etc.

	myTreeview.on('fluig.treeview.dblclick', function(data){
		console.log(data.content);
	});

fluig.treeview.deactivate

'data.content.node' was deactivated.

	myTreeview.on('fluig.treeview.deactivate', function(data){
		console.log(data.content);
	});

fluig.treeview.expand

'data.content.node' was expanded.

	myTreeview.on('fluig.treeview.expand', function(data){
		console.log(data.content);
	});

fluig.treeview.focus

'data.content.node' received keyboard focus.

	myTreeview.on('fluig.treeview.focus', function(data){
		console.log(data.content);
	});

fluig.treeview.focusTree

'data.content.tree' received keyboard focus.

	myTreeview.on('fluig.treeview.focusTree', function(data){
		console.log(data.content);
	});

fluig.treeview.loadChildren

Node data was loaded.

	myTreeview.on('fluig.treeview.loadChildren', function(data){
		console.log(data.content);
	});

fluig.treeview.loadError

A load error occurred. Return false to prevent default processing.

	myTreeview.on('fluig.treeview.loadError', function(data){
		console.log(data.content);
	});

fluig.treeview.select

'data.content.node' was selected.

	myTreeview.on('fluig.treeview.select', function(data){
		console.log(data.content);
	});

About

Importing files

Using miscellaneous components with Studio

Add to calendar

Basic configuration

Creating addtocalendar with Developer Studio using the Style Guide

Using addtocalendar in widgets

Live demo

HTML

Javascript

Live demo

HTML

Can be used a template

Description of the event

Settings to Object

The advanced settings are set for all component instances on the same screen.

Settings to Object advanced

Carousel

Basic configuration

Live demo

Creating carousel with Developer Studio using the Style Guide

Using carousel in widgets

Usage

Carousel options

Image object options

Methods

.pause()

.play()

.next()

.prev()

.goTo(index)

Events

fluig.carousel.slide

Using caption templates

Caption template demo

Code Editor

Basic configuration

Live demo

Using Code Editor component with Developer Studio

Using Code Editor in widgets

Settings

Methods

.setValue()

.getValue()

.getTextRange()

.insert()

.getCursor()

.gotoLine()

.getLength()

.setTabSize()

.setUseWrapMode()

.setHighlightActiveLine()

.setShowPrintMargin()

.setReadOnly()

Color Picker

Basic configuration

Live demo

Creating color pickers with Developer Studio using the Style Guide

Using Color Picker in widgets

Usage

Settings

Methods

.rgbObject

.rgbString & .rgbaString

.settings

.value

.destroy

Events

fluig.colorpicker.change

fluig.colorpicker.show

fluig.colorpicker.hide

Cropper

Basic configuration

Live demo

Using cropper with Developer Studio

Using Cropper in widgets

Settings

Methods

Saving the initMethods method

enable

Saving the `initMethods` method