Fluig Style Guide

https://style.fluig.com/
Admin
Fluig Style Guide is a frontend framework providing CSS, JavaScript components, and design standards...
Tokens:132,208
Snippets:1,076
Trust Score:8.1
Update:7 months ago
Show doc for...
Tokens:
Raw
### Initialize and Configure Back To Top Component

Source: https://style.fluig.com/javascript.html

Provides examples for initializing the Back To Top component with default settings, advanced customization options, event listening, and method invocation.

```javascript
// Basic initialization
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
});

// Listening to events
myComp.on('fsshow.backtotop', function(ev) {
	// code
});

// Invoking methods
myComp.toogle();
```

--------------------------------

### Dropdown Events

Source: https://style.fluig.com/javascript.html

Documentation for dropdown events, including their descriptions and usage examples.

```APIDOC
## Dropdown Events

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

### Event Types

- **show.bs.dropdown**: Fires immediately when the `show` instance method is called. The toggling anchor element is available as the `relatedTarget` property of the event.
- **shown.bs.dropdown**: Fires when the dropdown has been made visible to the user (waits for CSS transitions to complete). The toggling anchor element is available as the `relatedTarget` property of the event.
- **hide.bs.dropdown**: Fires immediately when the `hide` instance method is called. The toggling anchor element is available as the `relatedTarget` property of the event.
- **hidden.bs.dropdown**: Fires when the dropdown has finished being hidden from the user (waits for CSS transitions to complete). The toggling anchor element is available as the `relatedTarget` property of the event.

### Example Usage

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

--------------------------------

### Implement Code Editor for Web Languages

Source: https://style.fluig.com/miscellaneous.html

Examples of setting up the Code Editor for JavaScript, HTML, and CSS content within a web page.

```javascript
var editor = FLUIGC.codeeditor("editor-javascript");
var editor = FLUIGC.codeeditor("editor-html");
var editor = FLUIGC.codeeditor("editor-css");
```

--------------------------------

### Color Picker Usage Example

Source: https://style.fluig.com/miscellaneous.html

Demonstrates how to set up an input field for the Color Picker and provides an example of advanced settings for customization, including delay, control type, default value, and opacity.

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

```javascript
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);
```

--------------------------------

### Manage component lifecycle with methods

Source: https://style.fluig.com/javascript.html

Provides examples of controlling the visibility and state of the component instance using built-in methods like show, hide, toggle, and destroy.

```javascript
myComp.show();
myComp.hide();
myComp.toggle();
myComp.destroy();
```

--------------------------------

### GET /application

Source: https://style.fluig.com/javascript.html

Retrieves a paginated and sorted list of records from the server for display in the datatable.

```APIDOC
## GET /application

### Description
Retrieves data from the server. The service supports paging, searching, and sorting via query parameters.

### Method
GET

### Endpoint
/application

### Parameters
#### Query Parameters
- **offset** (int) - Optional - Records to skip before returning results (default: 0).
- **limit** (int) - Optional - Maximum number of records to return per page (default: 30).
- **orderby** (string) - Optional - Field name to order by, suffixed with _ASC or _DESC.
- **pattern** (string) - Optional - Search text pattern to filter results.

### Request Example
GET /application?offset=0&limit=20&orderby=NAME_ASC&pattern=searchterm

### Response
#### Success Response (200)
- **data** (array) - The list of records returned from the server.

#### Response Example
{
  "data": [
    { "id": 1, "name": "Example Item" }
  ]
}
```

--------------------------------

### Button Loading State Example (jQuery)

Source: https://style.fluig.com/javascript.html

Demonstrates how to implement a loading state for a button using jQuery and Bootstrap's button plugin. It shows how to trigger the loading state and reset it after an asynchronous operation completes.

```javascript
$('#loading-example-btn').click(function() {
    var btn = $(this);
    btn.button('loading');
    $.ajax(...).always(function () {
        btn.button('reset');
    });
});
```

--------------------------------

### Popover Examples (HTML/JavaScript)

Source: https://style.fluig.com/javascript.html

Demonstrates how to implement popovers with different alignment options (top, right, bottom, left). Popovers can be triggered by click or hover and require specific container settings for elements within button or input groups.

```html
<button type="button" data-toggle="popover" title="Popover title" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">Popover top</button>
<button type="button" data-toggle="popover" title="Popover title" data-placement="right" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">Popover right</button>
<button type="button" data-toggle="popover" title="Popover title" data-placement="bottom" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">Popover bottom</button>
<button type="button" data-toggle="popover" title="Popover title" data-placement="left" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">Popover left</button>

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-placement="top" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Click to toggle popover</button>
<button type="button" class="btn btn-lg btn-success" data-toggle="popover" data-trigger="hover" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Hover to toggle popover</button>
```

--------------------------------

### POST .wizardModal(options, callback)

Source: https://style.fluig.com/javascript.html

Initializes a step-by-step wizard interface within a modal window.

```APIDOC
## POST .wizardModal(options, callback)

### Description
Displays a wizard (step-by-step guide) inside a modal. It is designed for guided navigation flows, allowing users to input data or perform processes across multiple phases.

### Method
POST

### Parameters
#### Request Body
- **options** (object) - Required - Configuration object for the wizard steps and modal behavior.
- **callback** (function) - Optional - Function to execute upon wizard completion or step change.

### Request Example
FLUIGC.wizardModal(options, callback);

### Response
#### Success Response (200)
- **status** (string) - Success message indicating the wizard modal has been initialized.
```

--------------------------------

### Initialize and Configure Cropper

Source: https://style.fluig.com/miscellaneous.html

Provides instructions for initializing the Cropper component on an image element. Includes setup requirements for Developer Studio and widget application.info files.

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

```html
<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>
```

```text
application.resource.component.1=fluigcropper
```

--------------------------------

### Create and Animate a Bar Chart with Fluig

Source: https://style.fluig.com/chart.html

This JavaScript example shows how to initialize a bar chart using the `FLUIGC.chart` component and configure its animation. It specifically demonstrates using the `onProgress` callback to update a progress bar during the animation, providing visual feedback to the user.

```javascript
var chart = FLUIGC.chart('#MY_SELECTOR', {
    id: 'set_an_id_for_my_chart',
    width: '700',
    height: '200',
});
// call the bar function
var barChart = chart.bar(data, {
    animation: {
        onProgress: function(animation) {
            progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
        }
    }
});
```

--------------------------------

### Basic Style Guide Import

Source: https://style.fluig.com/miscellaneous.html

Import the basic Style Guide files for using miscellaneous components in forms.

```APIDOC
## Basic Style Guide Import

### Description
Import the basic Style Guide files for using miscellaneous components in forms.

### Method
N/A (HTML/JavaScript inclusion)

### Endpoint
N/A

### Parameters
None

### Request Example
```html
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide-flat.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>
```

### Response
N/A
```

--------------------------------

### Import Fluig Style Guide Dependencies

Source: https://style.fluig.com/index.html

Demonstrates the required CSS and JavaScript imports for creating forms in Developer Studio. Includes jQuery, jQuery UI, Mustache, and the minified Fluig Style Guide assets.

```html
<head>
    <link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide-flat.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>
```

--------------------------------

### Import Player CSS and JavaScript

Source: https://style.fluig.com/miscellaneous.html

To use the style guide's player component, you need to import the minified CSS and JavaScript files. These files provide the necessary styling and functionality for the video player.

```html
<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>
```

--------------------------------

### Initialize Fluig Style Guide Container

Source: https://style.fluig.com/index.html

Defines the mandatory HTML container class required for the Style Guide to apply styles to elements. All application or widget content must be wrapped within this div.

```html
<div class="fluig-style-guide">
    <!--Some code here-->
</div>
```

--------------------------------

### Importing Fluig Style Guide Base Assets

Source: https://style.fluig.com/miscellaneous.html

The foundational HTML structure required to initialize the Fluig Style Guide, including CSS and necessary JavaScript dependencies like jQuery and Mustache.

```html
<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide-flat.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>
```

--------------------------------

### Modal Component Configuration

Source: https://style.fluig.com/javascript.html

Configuration parameters for modal buttons and header actions.

```APIDOC
## Modal Configuration Parameters

### Action Parameters
- **label** (String) - Optional - The label of the button.
- **bind** (String) - Optional - Data attribute for SuperWidget binding.
- **classType** (String) - Optional - CSS class for button styling (default: btn-primary/btn-default).
- **buttonType** (String) - Optional - Type of button (button/submit).
- **autoClose** (Boolean) - Optional - If true, closes modal on click.
- **actionClose** (Boolean) - Optional - If true, binds close event to modal header (x).

### Header Action Parameters
- **icon** (String) - Required - Flaticon class name.
- **bind** (String) - Optional - Data attribute for SuperWidget binding.
- **childActions** (Array) - Optional - Array of objects { label, bind } for dropdown actions.
```

--------------------------------

### Cropper Event Handlers (build, built, cropstart, cropmove, cropend, crop, zoom)

Source: https://style.fluig.com/miscellaneous.html

These are callback functions that can be registered during cropper initialization to react to specific user interactions or lifecycle events. Examples include 'build' when an image starts loading, 'built' when the cropper is ready, and various 'crop' and 'zoom' events.

```javascript
build: function(){
    // Your code
}
built: function(){
    // Your code
}
cropstart: function(){
    // Your code
}
cropmove: function(){
    // Your code
}
cropend: function(){
    // Your code
}
crop: function(){
    // Your code
}
zoom: function(){
    // Your code
}
```

--------------------------------

### Create Basic and Structured Panels

Source: https://style.fluig.com/components.html

Provides examples for building panels, including basic containers, panels with headings (including titles), and panels with footers for secondary content.

```HTML
<!-- Basic Panel -->
<div class="panel panel-default">
    <div class="panel-body">
        Basic panel example
    </div>
</div>

<!-- Panel with Heading and Footer -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Panel content
    </div>
    <div class="panel-footer">Panel footer</div>
</div>
```

--------------------------------

### Single Toggle Button Example (HTML)

Source: https://style.fluig.com/javascript.html

An example of a single button that can be toggled on and off using Bootstrap's button plugin. Clicking the button will add or remove the 'active' class, visually indicating its state.

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

--------------------------------

### Implement Stacked-to-Horizontal Grid Layout

Source: https://style.fluig.com/css.html

Demonstrates how to use medium device grid classes to create a layout that stacks on mobile devices and becomes horizontal on desktop screens.

```html
<div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
</div>
```

--------------------------------

### Configure FLUIGC Filter Component

Source: https://style.fluig.com/miscellaneous.html

Implementation guide for the FLUIGC Filter component. Includes setup for HTML elements, widget configuration, and JavaScript initialization using REST data sources.

```html
<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>

<!-- Input element -->
<input id="filter-example-generic" type="text" name="filter-example-generic"/>
```

```properties
application.resource.component.1=fluigfilter
```

```javascript
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: {
        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);
```

--------------------------------

### Combine Mobile and Desktop Grid Classes

Source: https://style.fluig.com/css.html

Illustrates how to use both extra small (.col-xs-*) and medium (.col-md-*) classes to control column behavior across different screen sizes.

```html
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
    <div class="col-xs-6">.col-xs-6</div>
    <div class="col-xs-6">.col-xs-6</div>
</div>
```

--------------------------------

### Create Fluid Container Layout

Source: https://style.fluig.com/css.html

Shows how to implement a full-width layout by replacing the standard container class with the container-fluid class.

```html
<div class="container-fluid">
    <div class="row">
        ...
    </div>
</div>
```

--------------------------------

### Get Autocomplete Value

Source: https://style.fluig.com/javascript.html

Demonstrates how to retrieve the current text value entered by the user in the Autocomplete input field.

```javascript
myAutocomplete.val();
```

--------------------------------

### Periodical Executor API

Source: https://style.fluig.com/javascript.html

Utility for executing functions at specific time intervals with start, stop, and restart capabilities.

```APIDOC
## Periodical Executor

### Description
Allows performing actions at defined time intervals.

### Initialization
`var executor = FLUIGC.periodicalExecutor(callback, frequency);`

### Methods
- **.start()**: Starts the execution timer.
- **.stop()**: Stops the execution timer.
- **.restart()**: Resets the timer.
```

--------------------------------

### Configure and Render Tags Cloud

Source: https://style.fluig.com/miscellaneous.html

Explains how to set up the Tags Cloud component, including importing assets, widget registration, and initializing the cloud with custom word weights, links, shapes, and color schemes.

```html
<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>
<div id="cloud"></div>
```

```properties
application.resource.component.1=fluigtagscloud
```

```javascript
var words = [{text: "Lorem", weight: 13}, {text: "Ipsum", weight: 10.5}];
FLUIGC.tagscloud('#cloud', words);
FLUIGC.tagscloud('#cloud', words, {shape: 'rectangular'});
FLUIGC.tagscloud('#cloud', words, {
  classPattern: null,
  colors: ["#800026", "#bd0026", "#e31a1c"],
  fontSize: { from: 0.1, to: 0.02 }
});
```

--------------------------------

### Open Autocomplete Dropdown

Source: https://style.fluig.com/javascript.html

Provides an example of how to programmatically open the dropdown menu for the Autocomplete component. Note that the menu is only visible if it contains content.

```javascript
myAutocomplete.open();
```

--------------------------------

### Initialize Editor with Custom Toolbars

Source: https://style.fluig.com/miscellaneous.html

Demonstrates how to initialize the editor with grouped tools, separators, and custom HTML button templates.

```javascript
var editor = FLUIGC.richeditor('rich-editor-example-1', {
	tools: [
		["bold", "italic", "underline", "strikethrough"],
		["justifyLeft", "justifyCenter", "justifyRight", "justifyFull"],
		["insertUnorderedList", "insertOrderedList", "indent", "outdent"]
	]
});

var editor = FLUIGC.richeditor('rich-editor-example-1', {
	tools: [
		"bold", "italic", "underline", "strikethrough",
		{ name: "separator1", type: "separator" },
		"justifyLeft", "justifyCenter", "justifyRight", "justifyFull",
		{ name: "separator2", type: "separator" },
		"insertUnorderedList", "insertOrderedList", "indent", "outdent"
	]
});

var editor = FLUIGC.richeditor('rich-editor-example-live-demo', {
	tools: [
		"bold", "italic", "underline",
		{
			name: "custom",
			template: '<button id="custom">Custom</button>'
		}
	]
});
```

--------------------------------

### Line Chart Data Structure Example

Source: https://style.fluig.com/chart.html

Provides an example of the data structure required for a line chart. It includes an array of labels for the x-axis and datasets, where each dataset defines its label, data points, and various color properties for backgrounds and borders. This structure is essential for populating the chart.

```javascript
var data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
        {
            label: 'My First dataset',
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: 'rgba(170, 194, 77, 0.5)',
            hoverBackgroundColor: 'rgba(170, 194, 77, 0.5)',
            borderColor: '#b0cc49',
            hoverBorderColor: '#b0cc49'
        },
        {
            label: 'My Second dataset',
            data: [28, 48, 40, 19, 86, 27, 90],
            backgroundColor: 'rgba(190, 49, 88, 0.5)',
            hoverBackgroundColor: 'rgba(190, 49, 88, 0.5)',
            borderColor: '#ed145b',
            hoverBorderColor: '#ed145b'
        }
    ]
};
```

--------------------------------

### Manage Slider State and Methods

Source: https://style.fluig.com/javascript.html

Provides examples of using various API methods such as getValue, setValue, and destroy to manipulate the slider instance programmatically.

```html
<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>
```

--------------------------------

### Editor Event Handling

Source: https://style.fluig.com/miscellaneous.html

Examples of attaching event listeners to the editor for lifecycle events such as change, paste, key interactions, and selection.

```javascript
var editor = FLUIGC.richeditor('rich-editor-example-1', {
	change: function() {
		console.log(this.value());
	},
	paste: function(e) {
		console.log(e.html);
	},
	keyup: function(e) {
		console.log("keyup : keyCode=", e.keyCode);
	},
	keydown: function(e) {
		console.log("keydown : keyCode=", e.keyCode);
	},
	select: function(e) { }
});
```

--------------------------------

### Initialize Popovers with FLUIGC

Source: https://style.fluig.com/javascript.html

Demonstrates how to initialize popovers using the FLUIGC.popover method. It shows configuration options for different trigger types such as hover and click, as well as layout adjustments like placement and max-height.

```html
<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>
```

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

--------------------------------

### Get All Tag Items

Source: https://style.fluig.com/javascript.html

Demonstrates how to retrieve all the currently added tag items from the Tag Autocomplete input. This returns an array of the tag data objects.

```javascript
myTagAutocomplete.items();
```

--------------------------------

### Create Basic Form with Controls

Source: https://style.fluig.com/css.html

Demonstrates a standard form layout using .form-group for spacing and .form-control for input styling. Includes email, password, file upload, and checkbox elements.

```html
<form role="form">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
        <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
```

--------------------------------

### Remove All Tags using Tag Autocomplete

Source: https://style.fluig.com/javascript.html

Provides an example of how to remove all tags currently present in the Tag Autocomplete component. This is a straightforward method call with no arguments.

```javascript
myTagAutocomplete.removeAll();
```

--------------------------------

### Bootstrap Grid: Offsetting Columns (HTML)

Source: https://style.fluig.com/css.html

Explains and shows how to use `.col-md-offset-*` classes to move columns to the right by increasing their left margin, effectively creating space between columns.

```html
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
```

--------------------------------

### Get and Set Editor Content

Source: https://style.fluig.com/miscellaneous.html

Methods to retrieve the current HTML source code or replace the editor content with new HTML strings.

```javascript
editor.getValue();

var editor = FLUIGC.richeditor('rich-editor-example-1');
editor.setValue("<p>Rich Editor example: set data.</p>");
console.log(editor.getValue());
```

--------------------------------

### Initialize Back to Top and Back to Bottom components

Source: https://style.fluig.com/javascript.html

Demonstrates how to initialize the scroll plugins with default or custom configuration objects. The configuration allows for styling, positioning, and animation timing adjustments.

```javascript
var myComp = FLUIGC.backToBottom();

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'
});
```

--------------------------------

### Configure Slider with JSON Options

Source: https://style.fluig.com/javascript.html

Shows how to initialize a slider using a configuration object, including the use of a custom formatter function for tooltip display.

```javascript
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);
```

--------------------------------

### HTML Structure for Isolated Scroll Target

Source: https://style.fluig.com/javascript.html

Example HTML structure for an element that can be targeted by the isolatedScroll function. This demonstrates the use of an ID, class, and data attribute for selection.

```html
<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>
```

--------------------------------

### HTML: Apply Margins with Style Fluig Classes

Source: https://style.fluig.com/css.html

Demonstrates how to apply margin utility classes in HTML using Style Fluig. These classes allow for setting margins on all sides, specific sides (top, bottom, left, right), or horizontal/vertical pairs. Breakpoints can be used to make these styles responsive.

```html
<!-- Margin applied to all breakpoints -->
<div class="fs-m-8">This element has a margin of 8px.</div>
<!-- Top Margin applied only at the xs breakpoint -->
<div class="xs:fs-mt-16">This element has a top margin of 16px (applied in xs).</div>
<!-- Bottom Margin applied only at the sm breakpoint -->
<div class="sm:fs-mb-8">This element has a bottom margin of 8px (applied in sm).</div>
<!-- Horizontal Margin applied only at the md breakpoint -->
<div class="md:fs-mx-24">This element has a margin of 24px on the sides (applied in md).</div>
<!-- Vertical Margin applied only at the lg breakpoint -->
<div class="lg:fs-my-32">This element has a margin of 32px on the top and bottom (applied in lg).</div>
```

--------------------------------

### Get Selected Items from Filter Component

Source: https://style.fluig.com/miscellaneous.html

Retrieves the currently selected items from the filter component. This method returns an array of the selected item objects.

```javascript
filter.getSelectedItems();
```

--------------------------------

### Periodical Executor Initialization and Control (JavaScript)

Source: https://style.fluig.com/javascript.html

Initializes a periodical executor to run a callback function at a specified frequency. Provides methods to start, stop, and restart the execution.

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

periodicalExecutor.start();
periodicalExecutor.stop();
periodicalExecutor.restart();
```

--------------------------------

### Instantiate Widget in FTL

Source: https://style.fluig.com/javascript.html

Shows how to declare a widget instance within a FreeMarker (.ftl) template using the required CSS classes and the data-params attribute for configuration.

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

--------------------------------

### Get Internal Input Element of Tag Autocomplete

Source: https://style.fluig.com/javascript.html

Explains how to retrieve the internal input element of the Tag Autocomplete component. This allows for custom behaviors or direct manipulation of the input.

```javascript
myTagAutocomplete.input();
```

--------------------------------

### Steps Component for Wizards (HTML)

Source: https://style.fluig.com/components.html

The steps component visually represents a step-by-step process, suitable for wizards. This example shows a basic horizontal layout with different states for each step: 'done' for completed steps, 'active' for the current step, and default for upcoming steps.

```html
<ul class="steps">    <li class="step-item done">        <span class="step-bullet"></span>        <span class="step-label">Solicitação</span>    </li>    <li class="step-item done active">        <span class="step-bullet"></span>        <span class="step-label">Dados do formulário</span>    </li>    <li class="step-item">        <span class="step-bullet"></span>        <span class="step-label">Permissões</span>    </li>    <li class="step-item">        <span class="step-bullet"></span>        <span class="step-label">Pré-visualização</span>    </li></ul>
```

--------------------------------

### FLUIGC Autocomplete with Tag Input Usage

Source: https://style.fluig.com/javascript.html

Provides an example of using FLUIGC Autocomplete as a tag input. It includes HTML structure and JavaScript initialization with options for remote data fetching.

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

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

--------------------------------

### JavaScript Polar Area Chart Remove Data Method

Source: https://style.fluig.com/chart.html

This JavaScript example shows how to remove the first data point from all datasets in a Polar Area chart using the `removeData` method.

```javascript
polarChart.removeData();
```

--------------------------------

### Bar Chart Basic Initialization

Source: https://style.fluig.com/chart.html

Initializes a bar chart using the FLUIGC charting library. This basic example shows how to create a chart instance and call the `bar` function with data and options.

```javascript
var chart = FLUIGC.chart('#MY_SELECTOR');
// call the bar function
var barChart = chart.bar(data, options);
```

--------------------------------

### Bootstrap Grid: Responsive Layouts for Devices (HTML)

Source: https://style.fluig.com/css.html

Demonstrates creating dynamic layouts using Bootstrap's responsive column classes for mobile, tablet, and desktop. These classes adjust column widths based on viewport size.

```html
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
```

--------------------------------

### Destroy Tagscloud Instance (Javascript)

Source: https://style.fluig.com/miscellaneous.html

This Javascript snippet shows how to completely destroy a tagscloud instance and its associated data. It first gets the instance of the tagscloud and then calls the `destroy` method on it.

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

--------------------------------

### Implement Modal with HTML Template

Source: https://style.fluig.com/javascript.html

Demonstrates how to define a modal structure using an HTML template and trigger it via JavaScript using the FLUIGC.modal API.

```html
<div class="comp-show-dialog">
    <button class="btn btn-primary btn-lg" data-comp-show-dialog>
        Open dialog
    </button>
</div>
<script type="text/template" class="comp-show-dialog-tpl">
    <div class="fs-align-items-center fs-display-flex fs-flex-direction-column fs-md-gap fs-sm-padding-vertical">
        <img is="theme-illustrations" src="/style-guide/images/illustrations/tasks.svg" title="tasks" width="100">
        <h5 class="fs-no-margin">Title dialog</h5>
        <p class="fs-no-margin text-center">Message dialog.</p>
        <div class="fs-display-flex fs-sm-gap">
            <button class="btn btn-default" data-dismiss="modal">Close</button>
            <button class="btn btn-primary">Save</button>
        </div>
    </div>
</script>
```

```javascript
var template = $('.comp-show-dialog-tpl').html();
FLUIGC.modal({
    content: Mustache.render(template),
    id: 'fluig-dialog',
    size: "small",
    showHeader: false,
    showFooter: false
});
```

--------------------------------

### Configure Basic Donut Chart with Javascript

Source: https://style.fluig.com/chart.html

This code provides the fundamental setup for creating a donut chart using FLUIGC. It targets a specific HTML element and initiates the donut chart functionality.

```javascript
var chart = FLUIGC.chart('#MY_SELECTOR');
// call the donut function
var chartDonut = chart.donut();
```

--------------------------------

### Radar Chart

Source: https://style.fluig.com/chart.html

Documentation for creating and configuring radar charts. Radar charts are used to display multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.

```APIDOC
## Chart Radar

### Description
A radar chart is a way of showing multiple data points and the variation between them.

### Basic Configuration
```javascript
var chart = FLUIGC.chart('#MY_SELECTOR');
// call the radar function
var radarChart = chart.radar(data, options);
```

### Configuration with ID, Width, and Height
```javascript
var chart = FLUIGC.chart('#MY_SELECTOR', {
    id: 'set_an_id_for_my_chart',
    width: '700',
    height: '200',
    /* See the list of options */
});
// call the radar function
var radarChart = chart.radar(data, options);
```
```

--------------------------------

### Initialize Switcher Component

Source: https://style.fluig.com/javascript.html

Shows how to transform standard checkbox or radio inputs into Switcher components using the FLUIGC.switcher.init method.

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

--------------------------------

### Implement Horizontal Bar Chart

Source: https://style.fluig.com/chart.html

Shows the setup for a horizontal bar chart, including basic initialization and configuration with custom dimensions. It also covers methods for adding, updating, and removing data points.

```html
<div id="MY_SELECTOR"></div>
```

```javascript
var chart = FLUIGC.chart('#MY_SELECTOR', {
    id: 'set_an_id_for_my_chart',
    width: '700',
    height: '200'
});
var horizontalBarChart = chart.horizontalBar(data, options);

// Data manipulation
horizontalBarChart.addData([40, 60], 'August');
horizontalBarChart.data.datasets[0].data[2] = 50;
horizontalBarChart.update();
horizontalBarChart.removeData();
```

--------------------------------

### Initialize Fluig Datatable with Basic Configuration

Source: https://style.fluig.com/javascript.html

This Javascript code demonstrates the basic initialization of the Fluig datatable. It uses the `FLUIGC.datatable()` constructor, passing the target element's selector ('#target'), a configuration object, and a callback function. The configuration includes data request, content rendering fields, and header titles. The callback handles potential errors or successful data loading.

```javascript
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)
});
```

--------------------------------

### Code Editor Methods

Source: https://style.fluig.com/miscellaneous.html

A collection of JavaScript methods for interacting with the Code Editor component, including setting and getting content, manipulating text ranges, cursor positioning, and editor display options.

```javascript
editor.setValue();
```

```javascript
editor.getValue();
```

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

```javascript
editor.insert("Something cool");
```

```javascript
editor.selection.getCursor();
```

```javascript
editor.gotoLine(lineNumber);
```

```javascript
editor.session.getLength();
```

```javascript
editor.getSession().setTabSize(4);
```

```javascript
editor.getSession().setUseWrapMode(true);
```

```javascript
editor.setHighlightActiveLine(false);
```

```javascript
editor.setShowPrintMargin(false);
```

```javascript
editor.setReadOnly(true)
```

--------------------------------

### Initialize and Create Line Chart (Basic)

Source: https://style.fluig.com/chart.html

Demonstrates the basic initialization of a line chart using FLUIGC.chart. It selects a target element by ID and applies the line chart function with provided data and options. This is the simplest way to render a line chart.

```javascript
var chart = FLUIGC.chart('#MY_SELECTOR'); // call the line function
var lineChart = chart.line(data, options);
```

--------------------------------

### Handle Cropper Events

Source: https://style.fluig.com/miscellaneous.html

JavaScript event handlers for the cropper component. These events allow developers to intercept and respond to user interactions like starting, moving, ending, cropping, or zooming the image.

```javascript
cropstart: function(e){
    console.log(e.type);
    console.log(e.namespace);
    console.log(e.action);
    if (e.action === 'crop') {
        e.preventDefault();
    }
}

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

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

crop: function(e){
    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: function(e){
    var maxRatio = 10;
    var imageData = $(this).cropper('getImageData');
    var currentRatio = imageData.width / imageData.naturalWidth;
    if (e.ratio > 0 && currentRatio > maxRatio) {
        e.preventDefault();
        $(this).cropper('setCanvasData', {
            width: imageData.naturalWidth * maxRatio
        });
    }
}
```

--------------------------------

### Create Stacked Progress Bars with HTML

Source: https://style.fluig.com/components.html

This example illustrates how to stack multiple progress bars within a single `.progress` container. The code defines three stacked bars with different completion percentages and status indicators (success, warning, danger), each with its own width.

```html
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 35%">
        <span class="sr-only">35% Complete (success)</span>
    </div>
    <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
        <span class="sr-only">20% Complete (warning)</span>
    </div>
    <div class="progress-bar progress-bar-danger" style="width: 10%">
        <span class="sr-only">10% Complete (danger)</span>
    </div>
</div>
```
Tokens:
Raw