Limitless

https://themes.kopyov.com/limitless/demo/docs/
Admin
Limitless is a perfectly crafted, fully responsive HTML/CSS web application kit based on the...
Tokens:119,132
Snippets:606
Trust Score:6.3
Update:11 months ago
Show doc for...
Tokens:
Raw
### Initialize Bootbox

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

Allows a function to be called when a Bootbox dialog is initialized. This is useful for custom setup or event handling after a dialog appears.

```javascript
bootbox.init(function() {
  // Custom initialization logic here
});
```

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

### SweetAlert: Get Progress Steps

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getProgressSteps() method retrieves the progress steps configured for a multi-step SweetAlert popup. This is relevant when using the progress steps feature.

```javascript
Swal.getProgressSteps()
```

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

### Advanced Sweet Alert with Callback (JavaScript)

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

Provides an example of an advanced Sweet Alert configuration, including a warning icon, cancel button, and a callback function executed when the 'Confirm' button is clicked. This allows for user interaction and conditional actions.

```javascript
// Advanced initialization
Swal.fire({
	title: 'Are you sure?',
	text: "You won't be able to revert this!",
	icon: 'warning',
	showCancelButton: true,
	confirmButtonColor: '#3085d6',
	cancelButtonColor: '#d33',
	confirmButtonText: 'Yes, delete it!'
}).then((result) => {
	if (result.isConfirmed) {
		Swal.fire(
			'Deleted!',
			'Your file has been deleted.',
			'success'
		)
	}
});
```

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

### Basic Sweet Alert Initialization (JavaScript)

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

Demonstrates the basic usage of the Sweet Alert plugin to display a simple alert message. This is a straightforward way to present information to the user.

```javascript
// Basic initialization
Swal.fire(
	'The Internet?',
	'That thing is still around?',
	'question'
)
```

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

### Bootstrap File Input Basic Setup

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_uploaders

This JavaScript code initializes the Bootstrap file input plugin on elements with the class 'file-input'. It configures various options such as button labels, icons, and initial caption. This setup is for a basic file input element.

```javascript
// Basic setup
$('.file-input').fileinput({
	browseLabel: 'Browse',
	browseIcon: '<i class="ph-file-plus me-2"></i>',
	uploadIcon: '<i class="ph-file-arrow-up me-2"></i>',
	removeIcon: '<i class="ph-x fs-base me-2"></i>',
	layoutTemplates: {
		icon: '<i class="ph-check"></i>'
	},
	uploadClass: 'btn btn-light',
	removeClass: 'btn btn-light',
	initialCaption: "No file selected",
	previewZoomButtonClasses: previewZoomButtonClasses,
	previewZoomButtonIcons: previewZoomButtonIcons,
	fileActionSettings: fileActionSettings
});
```

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

### SweetAlert: Get Focusable Elements

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getFocusableElements() method returns a list of all focusable elements within the SweetAlert popup. This is helpful for accessibility features or custom focus management.

```javascript
Swal.getFocusableElements()
```

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

### Initialize Noty Notification

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

Initializes a new Noty notification with specified text and type. Noty displays alert, success, error, warning, information, or confirmation messages in a queue.

```javascript
new Noty({
	text: 'Change a few things up and try submitting again.',
	type: 'error'
}).show();
```

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

### Replace .list-icons with hstack for Icon Links (HTML)

Source: https://themes.kopyov.com/limitless/demo/docs/other_migration

This example demonstrates the removal of the `.list-icons` class and the adoption of `hstack` with text/link color classes for styling icon-only links. This change promotes a more consistent styling approach using Bootstrap's utility classes.

```html
<!-- Old markup -->
	<div class="list-icons">
		<a class="list-icons-item">
			<i class="icon-user"></i>
		</a>
	</div>

<!-- New markup -->
<div class="hstack gap-2">
	<a href="#" class="text-body">
		<i class="ph-user"></i>
	</a>
</div>
```

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

### Install Gulp Globally

Source: https://themes.kopyov.com/limitless/demo/docs/base_scss_compile

Installs Gulp globally on your system using npm, allowing it to be accessed from any project directory. This command requires administrator privileges (sudo) and installs Gulp as a command-line tool.

```bash
sudo npm install -g gulp
```

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

### Install Gulp Locally

Source: https://themes.kopyov.com/limitless/demo/docs/base_scss_compile

Installs Gulp as a development dependency for the current project. This command adds Gulp to your project's `node_modules` directory and updates `package.json`.

```bash
npm install --save-dev gulp
```

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

### Check Gulp Version

Source: https://themes.kopyov.com/limitless/demo/docs/base_scss_compile

Verifies the global installation of Gulp by displaying its version number. This confirms that Gulp has been successfully installed and is accessible from the command line.

```bash
gulp -v
```

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

### Moment.js: Format Dates

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_extensions

Provides examples of formatting dates using Moment.js with various format specifiers. This covers common date and time representations.

```javascript
// Format dates example
moment().format('MMMM Do YYYY, h:mm:ss a'); // September 21st 2015, 1:31:51 am
moment().format('dddd');                    // Monday
moment().format("MMM Do YY");               // Sep 21st 15
moment().format('YYYY [escaped] YYYY');     // 2015 escaped 2015
moment().format();                          // 2015-09-21T01:31:51+02:00
```

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

### Check Node.js Version

Source: https://themes.kopyov.com/limitless/demo/docs/base_scss_compile

Verifies the installation of Node.js by displaying its version number in the command line. This command is essential for ensuring that Node.js is correctly set up before proceeding with other installations.

```bash
node -v
```

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

### Start Autocomplete Search

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_forms

The `start(query)` function initiates the search process within the Autocomplete.js engine. It takes an optional query string, manipulates it, checks trigger conditions, fetches data, and renders the results list if enabled. This method is crucial for performing searches based on user input or predefined queries.

```javascript
autoCompleteJS.start("tea");
```

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

### Include Sweet Alert Plugin in HTML

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

This snippet shows how to include the Sweet Alert plugin script in the `<head>` section of an HTML document. Ensure the path to the script is correct for your project.

```html
<!-- Load plugin -->
<script src="assets/js/vendor/notifications/sweet_alert.min.js"></script>
```

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

### SweetAlert2 Show Animation Classes

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

Defines CSS classes to be applied when a SweetAlert2 popup is shown, creating a fade-in animation. These classes are essential for visualizing the popup's appearance.

```javascript
showClass: {
	popup: 'swal2-show',
	backdrop: 'swal2-backdrop-show',
	icon: 'swal2-icon-show'
}
```

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

### SweetAlert: Get Footer Element

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getFooter() method retrieves the DOM element of the footer section in a SweetAlert popup. This can be used to modify or display footer content.

```javascript
Swal.getFooter()
```

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

### Initialize and Use Mark.js for Basic Highlighting

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_extensions

Demonstrates initializing Mark.js with a specific DOM element and performing basic text highlighting. It includes removing previous highlights before applying new ones based on user input. Dependencies include the Mark.js library.

```javascript
// Create an instance of mark.js and pass an argument containing
// the DOM object of the context (where to search for matches)
const instanceBase = new Mark(document.querySelector(".demo-target-base"));

// Cache DOM elements
const inputBase = document.querySelector("input[name='keyword-basic']");

// Initialize
function performMarkBasic() {

	// Read the keyword
	const keywordBase = inputBase.value;

	// Remove previous marked elements and mark
	// the new keyword inside the context
	instanceBase.unmark({
		done: function(){
			instanceBase.mark(keywordBase);
		}
	});
}

// Listen to input and option changes
inputBase.addEventListener("input", performMarkBasic);
```

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

### Initialize Quill Editor with Full Toolbar

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_editors

Example of initializing the Quill editor with a comprehensive set of toolbar options, including font, size, header, text formatting, blockquotes, code blocks, lists, scripts, indentation, direction, color, alignment, formula, image, video, and a clean button.

```javascript
// Initialize
const quillFull = new Quill('.quill-full', {
	modules: {
		toolbar: [
			[{ 'font': [] }],
			[{ 'size': ['small', false, 'large', 'huge'] }],
			[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
			['bold', 'italic', 'underline', 'strike'],
			['blockquote', 'code-block'],
			[{ 'header': 1 }, { 'header': 2 }],
			[{ 'list': 'ordered'}, { 'list': 'bullet' }],
			[{ 'script': 'sub'}, { 'script': 'super' }],
			[{ 'indent': '-1'}, { 'indent': '+1' }],
			[{ 'direction': 'rtl' }],
			[{ 'color': [] }, { 'background': [] }],
			[{ 'align': [] }],
			[ 'formula', 'image', 'video' ],
			['clean']
		]
	},
	bounds: '.content-inner',
	placeholder: 'Please add your text here...',
	theme: 'snow'
});
```

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

### SweetAlert: Get Image Element

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getImage() method retrieves the DOM element of the image displayed within the SweetAlert popup. This allows for direct manipulation or styling of the image.

```javascript
Swal.getImage()
```

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

### Include Bootbox.js and Bootstrap Dependencies

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

These script tags are necessary to include the Bootbox.js library and Bootstrap's JavaScript components in your HTML. Ensure these are placed within the `<head>` section of your document.

```html
<script src="assets/js/bootstrap/bootstrap.bundle.min.js"></script>

<!-- Load plugin -->
<script src="assets/js/vendor/notifications/bootbox.min.js"></script>
```

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

### Initialize Mark.js Instance

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_extensions

Shows how to create a new instance of Mark.js. The constructor accepts a context argument which can be a single DOM element, an array of elements, a NodeList, or a CSS selector string. This defines the scope for highlighting.

```javascript
var instance = new Mark(context);
```

```javascript
var instance = new Mark(document.querySelector("div.context"));
```

```javascript
var instance = new Mark("div.context");
```

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

### SweetAlert: Get Icon Element

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getIcon() method retrieves the DOM element representing the icon displayed in the SweetAlert popup. Useful for dynamic icon changes or styling.

```javascript
Swal.getIcon()
```

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

### SweetAlert: Get Close Button Element

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getCloseButton() method returns the DOM element of the SweetAlert's close button. This can be used to interact with or style the close button.

```javascript
Swal.getCloseButton()
```

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

### HTML Structure for Full Width Layout

Source: https://themes.kopyov.com/limitless/demo/docs/layout_overview

This HTML snippet illustrates the markup for a full-width layout. It highlights how the main content area (`.content-wrapper`) and sidebars (`.sidebar`) are structured to span the full available width. The example includes a main navbar, sidebars, and content area, demonstrating a flexible layout suitable for various screen sizes.

```html
<!-- 4 columns layout -->
<body>

	<!-- Main navbar -->
	<div class="navbar navbar-expand-xl navbar-static shadow">
		...
	</div>
	<!-- /main navbar -->


	<!-- Page content -->
	<div class="page-content">

		<!-- Main sidebar -->
		<div class="sidebar sidebar-light sidebar-main sidebar-expand-lg sidebar-main-resized">
			...
		</div>
		<!-- /main sidebar -->


		<!-- Secondary sidebar -->
		<div class="sidebar sidebar-light sidebar-secondary sidebar-expand-lg">
			...
		</div>
		<!-- /secondary sidebar -->


		<!-- Main content -->
		<div class="content-wrapper">

			<!-- Inner content -->
			<div class="content-inner">

				<!-- Page header -->
				<div class="page-header">
					...
				</div>
				<!-- /page header -->


				<!-- Content area -->
				<div class="content container pt-0">
					...
				</div>
				<!-- /content area -->


				<!-- Footer -->
				<div class="navbar navbar-sm navbar-footer border-top">
					...
				</div>
				<!-- /footer -->

			</div>
			<!-- /inner content -->

		</div>
		<!-- /main content -->


		<!-- Right sidebar -->
		<div class="sidebar sidebar-light sidebar-end sidebar-expand-lg">
			...
		</div>
		<!-- /right sidebar -->

	</div>
	<!-- /page content -->

</body>
<!-- /4 columns layout -->
```

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

### SweetAlert: Get Validation Message

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getValidationMessage() method retrieves the DOM element of the validation message within a SweetAlert popup. Returns `null` if no validation message is currently displayed.

```javascript
Swal.getValidationMessage()
```

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

### SweetAlert: Get Input Element

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getInput() method retrieves the DOM node of the input element when a SweetAlert popup is configured with the `input` parameter. Returns `null` if no input is present.

```javascript
Swal.getInput()
```

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

### Show a Notification using Noty API

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

Demonstrates how to programmatically display a notification using the Noty plugin's API. This typically involves instantiating a Noty object and calling its 'show' method.

```javascript
var n = new Noty({
    text: 'Notification Text'
}).show();
```

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

### Initialize FancyTree with Basic Options

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_ui

This JavaScript snippet demonstrates the basic initialization of FancyTree on an element with the class 'tree-default'. It also includes an example of using the 'init' event to apply tooltips to elements with the 'has-tooltip' class within the tree.

```javascript
// Basic initialization
$('.tree-default').fancytree({
    init: function(event, data) {
        $('.has-tooltip .fancytree-title').tooltip();
    }
});
```

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

### SweetAlert: Get Popup Title Element

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getTitle() method returns the DOM element corresponding to the title of the SweetAlert popup. This allows direct access to the title element for manipulation.

```javascript
Swal.getTitle()
```

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

### SweetAlert: Get Popup Container

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getContainer() method retrieves the DOM element that serves as the container for the SweetAlert popup, including its backdrop. This can be useful for advanced DOM manipulation or styling.

```javascript
Swal.getContainer()
```

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

### Initialize i18next for internationalization in JavaScript

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_extensions

This JavaScript snippet demonstrates the basic initialization of the i18next internationalization framework. It includes loading necessary plugins (i18nextHttpBackend, i18nextBrowserLanguageDetector), configuring the backend to load translation files, and setting a fallback language. It also shows how to translate content within elements that have a 'data-i18n' attribute.

```javascript
// Basic initialization
const elements = document.querySelectorAll('.language-switch .dropdown-item'),
selector = document.querySelectorAll('[data-i18n]'),
englishLangClass = 'en',
ukrainianLangClass = 'ua';

// Add options
i18next.use(i18nextHttpBackend).use(i18nextBrowserLanguageDetector).init({
	backend: {
		loadPath: '../../../assets/demo/locales/{{lng}}.json'
	},
	debug: true,
	fallbackLng: 'en'
},
function (err, t) {
	selector.forEach(function(item) {
		item.innerHTML = i18next.t(item.getAttribute("data-i18n"));
	});
});
```

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

### SweetAlert: Get Cancel Button Element

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getCancelButton() method returns the DOM element of the "Cancel" button in a SweetAlert popup. This allows for programmatic interaction with the cancel button.

```javascript
Swal.getCancelButton()
```

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

### SweetAlert: Get Deny Button Element

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getDenyButton() method returns the DOM element of the "Deny" button in a SweetAlert popup. This enables programmatic control over the deny button.

```javascript
Swal.getDenyButton()
```

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

### Bootbox Prompt Dialog for User Input

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

Illustrates a prompt dialog that asks the user for input. The callback function receives the user's input as a string, or `null` if the dialog was dismissed. Custom buttons can be defined, and ESC key or close button click results in a `null` callback.

```javascript
bootbox.prompt({
	title: 'Please enter your name',
	buttons: {
		confirm: {
			label: 'Yes',
			className: 'btn-primary'
		},
		cancel: {
			label: 'Cancel',
			className: 'btn-link'
		}
	},
	callback: function (result) {
		if (result === null) {
			bootbox.alert({
				title: 'Prompt dismissed',
				message: 'You have cancelled this damn thing'
			});
		} else {
			bootbox.alert({
				title: 'Hi <strong>' + result + '</strong>',
				message: 'How are you doing today?'
			});
		}
	}
});
```

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

### SweetAlert: Get Confirm Button Element

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getConfirmButton() method returns the DOM element of the "Confirm" button in a SweetAlert popup. This allows for direct interaction with the confirm button.

```javascript
Swal.getConfirmButton()
```

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

### SweetAlert: Get HTML Content Container

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getHtmlContainer() method returns the DOM element where the `html` or `text` content of a SweetAlert popup is rendered. This is useful for manipulating the main content area.

```javascript
Swal.getHtmlContainer()
```

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

### Implement JavaScript Theme Switcher

Source: https://themes.kopyov.com/limitless/demo/docs/base_themes

This JavaScript code provides a theme switching mechanism for the Limitless demo. It supports light, dark, and system themes, persisting user preferences in localStorage. It also dynamically adjusts the theme based on the operating system's color scheme preference. Dependencies include DOM manipulation and the `localStorage` API.

```javascript
// Check localStorage on page load and set mathing theme/direction
(function () {
	((localStorage.getItem('theme') == 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) || localStorage.getItem('theme') == 'dark') && document.documentElement.setAttribute('data-color-theme', 'dark');
})();

// Theme configuration
var layoutTheme = function() {
	var primaryTheme = 'light';
	var secondaryTheme = 'dark';
	var storageKey = 'theme';
	var colorscheme = document.getElementsByName('main-theme');
	var mql = window.matchMedia('(prefers-color-scheme: ' + primaryTheme + ')');

	// Changes the active radiobutton
	function indicateTheme(mode) {
		for(var i = colorscheme.length; i--; ) {
			if(colorscheme[i].value == mode) {
				colorscheme[i].checked = true;
				colorscheme[i].closest('.list-group-item').classList.add('bg-primary', 'bg-opacity-10', 'border-primary');
			}
			else {
				colorscheme[i].closest('.list-group-item').classList.remove('bg-primary', 'bg-opacity-10', 'border-primary');
			}
		}
	};

	// Turns alt stylesheet on/off
	function applyTheme(mode) {
		var st = document.documentElement;
		if (mode == primaryTheme) {
			st.removeAttribute('data-color-theme');
		}
		else if (mode == secondaryTheme) {
			st.setAttribute('data-color-theme', 'dark');
		}
		else {
			if (!mql.matches) {
				st.setAttribute('data-color-theme', 'dark');
			}
			else {
				st.removeAttribute('data-color-theme');
			}
		}
	};

	// Handles radiobutton clicks
	function setTheme(e) {
		var mode = e.target.value;
		document.documentElement.classList.add('no-transitions');
		if ((mode == primaryTheme)) {
			localStorage.removeItem(storageKey);
		}
		else {
			localStorage.setItem(storageKey, mode);
		}
		// When the auto button was clicked the auto-switcher needs to kick in
		autoTheme(mql);
	};

	// Handles the media query evaluation, so it expects a media query as parameter
	function autoTheme(e) {
		var current = localStorage.getItem(storageKey);
		var mode = primaryTheme;
		var indicate = primaryTheme;
		// User set preference has priority
		if ( current != null) {
			indicate = mode = current;
		}
		else if (e != null && e.matches) {
			mode = primaryTheme;
		}
		applyTheme(mode);
		indicateTheme(indicate);
		setTimeout(function() {
			document.documentElement.classList.remove('no-transitions');
		}, 100);
	};

	// Create an event listener for media query matches and run it immediately
	autoTheme(mql);
	mql.addListener(autoTheme);

	// Set up listeners for radio button clicks
	for(var i = colorscheme.length; i--; ) {
		colorscheme[i].onchange = setTheme;
	}
};

```

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

### SweetAlert: Get Remaining Timer Time

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getTimerLeft() method returns the remaining time in milliseconds for a SweetAlert popup's timer, if a `timer` parameter was set. Returns `null` if no timer is active.

```javascript
Swal.getTimerLeft()
```

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

### Boxed Content Markup - HTML

Source: https://themes.kopyov.com/limitless/demo/docs/layout_overview

This example demonstrates how to mark up boxed content within a page. It focuses on applying the boxed styling to the main content area, distinct from the overall page layout. This is useful for specific sections requiring a contained appearance.

```html
<!-- Boxed content -->
<body>
	...
	<!-- Content area -->
	<div class="content container pt-0">
		...
	</div>
	<!-- /content area -->
	...
</body>
<!-- /boxed content -->
```

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

### SweetAlert: Get Actions Block Element

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.getActions() method returns the DOM element that contains the action buttons (like Confirm, Cancel, Deny) of the SweetAlert popup. This is useful for controlling button layouts or states.

```javascript
Swal.getActions()
```

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

### SweetAlert: Show Loading Indicator

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.showLoading() method displays a loading indicator (spinner) within the SweetAlert popup. By default, it replaces the "Confirm" button, but can be configured to replace another button.

```javascript
Swal.showLoading()
```

```javascript
Swal.showLoading(Swal.getDenyButton())
```

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

### Update Dropdown Content Markup (HTML)

Source: https://themes.kopyov.com/limitless/demo/docs/other_migration

This example illustrates changes to dropdown markup. The classes `.dropdown-content`, `.dropdown-content-header`, and `.dropdown-content-body` have been removed. Developers should now use the `data-bs-auto-close="outside"` attribute and standard padding utility classes for styling dropdown content.

```html
<a href="#" class="navbar-nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">Menu</a>
<div class="dropdown-menu p-3">
	...
</div>
```

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

### Datepicker Instance Properties and Methods

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_pickers

Details about the properties and methods available on an instance of the Datepicker.

```APIDOC
## Datepicker Instance Properties and Methods

### Description
Properties and methods that can be accessed on a Datepicker instance after it has been initialized.

### Instance properties
#### datepicker.active
- **active** (Boolean) - Read-only - Whether the picker element is shown.

#### datepicker.pickerElement
- **pickerElement** (HTMLDivElement) - Read-only - DOM object of the picker element.

#### datepicker.rangepicker
- **rangepicker** (DateRangePicker) - Read-only - DateRangePicker instance that the datepicker belongs to. Only available when the datepicker is a part of date range picker.

### Instance methods
#### datepicker.destroy()
- **destroy** (Function) - Destroy the Datepicker instance.
  - **Example**:
    ```javascript
    datepicker.destroy();
    ```

#### datepicker.getDate()
- **getDate** (Function) - Get selected date(s). The method returns a Date object of selected date by default, and returns an array of selected dates in multidate mode. If format string is passed, it returns date string(s) formatted in given format.
  - **Parameters**:
    - **format** (String, optional) - The format string to format the returned date(s).
  - **Example**:
    ```javascript
    datepicker.getDate();
    datepicker.getDate('yyyy-mm-dd');
    ```

#### datepicker.hide()
- **hide** (Function) - Hide the picker element. Not available on inline picker.
  - **Example**:
    ```javascript
    datepicker.hide();
    ```

#### datepicker.refresh()
- **refresh** (Function) - Refresh the picker element and the associated input field.
  - **Parameters**:
    - **target** (DOM Element, optional) - The target element to refresh.
    - **forceRender** (Boolean, optional) - Whether to force rendering.
  - **Example**:
    ```javascript
    datepicker.refresh();
    datepicker.refresh(myInput, true);
    ```
```

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

### Initialize and Update Date Range Picker

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_pickers

Demonstrates how to initialize a date range picker with specific min/max dates and how to programmatically update these dates after initialization using jQuery.

```javascript
// Create a new date range picker
$('#daterange').daterangepicker({ minDate: '2022-03-05', maxDate: '2022-03-06' });

// Change the selected date range of that picker
$('#daterange').data('daterangepicker').setMinDate('2022-03-01');
$('#daterange').data('daterangepicker').setMaxDate('2022-03-31');
```

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

### Install Gulp Plugins with npm

Source: https://themes.kopyov.com/limitless/demo/docs/base_scss_compile

Installs a set of essential Gulp plugins for tasks like CSS processing, JavaScript linting and concatenation, and Sass compilation. These are typically installed as development dependencies.

```bash
npm install gulp-postcss autoprefixer gulp-jshint jshint gulp-sass gulp-clean-css gulp-concat gulp-uglify gulp-rename gulp-rtlcss gulp-dart-sass --save-dev
```

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

### Bootstrap Grid System Setup

Source: https://themes.kopyov.com/limitless/demo/docs/base_bootstrap

Bootstrap's mobile-first flexbox grid system uses containers, rows, and columns to create responsive layouts. It supports six breakpoints and offers extensive customization through Sass variables and predefined classes.

```html
<!-- Example of a row with columns -->
<div class="container">
  <div class="row">
    <div class="col-sm-4">Column 1</div>
    <div class="col-sm-8">Column 2</div>
  </div>
</div>
```

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

### Apply Boxed Width Markup - HTML

Source: https://themes.kopyov.com/limitless/demo/docs/layout_overview

This snippet shows how to apply a fixed-width (boxed) layout to the entire page. It involves adding specific classes to the `<body>` and a wrapper `<div>`. This setup is for the second layout and allows for optional background images.

```html
<!-- Boxed layout -->
<body class="layout-boxed-bg">

	<!-- Boxed layout wrapper -->
	<div class="layout-boxed container px-0">
		...
	</div>
	<!-- / boxed layout wrapper -->

</body>
<!-- /boxed layout -->
```

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

### Set Bootbox Defaults

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

Sets default options for Bootbox dialogs. These defaults can be overridden by individual wrapper method calls. Options control various aspects of dialog appearance and behavior.

```javascript
bootbox.setDefaults({
  locale: "en",
  animate: true,
  size: "small"
});
```

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

### Plupload Queue Initialization with Options

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_uploaders

This JavaScript code initializes the Plupload queue functionality on a selected HTML element. It configures various options including supported runtimes, upload URL, chunk size, file filters (size and type), and image resizing.

```javascript
$(".file-uploader").pluploadQueue({
    runtimes: 'html5, html4,  Silverlight',
    url: 'assets/demo/data/uploader/plupload.json',
    chunk_size: '300Kb',
    unique_names: true,
    filters: {
        max_file_size: '300Kb',
        mime_types: [{
            title: "Image files",
            extensions: "jpg,gif,png"
        }]
    },
    resize: {
        width: 320,
        height: 240,
        quality: 90
    }
});
```

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

### Check npm Version

Source: https://themes.kopyov.com/limitless/demo/docs/base_scss_compile

Confirms the installation of npm (Node Package Manager) by outputting its version. This step is crucial as npm is used for installing Gulp and other project dependencies.

```bash
npm -v
```

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

### Global CSS Variable Examples

Source: https://themes.kopyov.com/limitless/demo/docs/base_css_variables

Demonstrates common global CSS variables used for typography, spacing, borders, shadows, sizing, and colors. These variables provide a foundation for consistent styling across the application.

```css
// Typography
--body-font-size-lg: 1rem;
--body-font-size-sm: 0.75rem;
--body-font-size-xs: 0.625rem;
--body-line-height-computed: calc(1375rem / 1000);
--body-line-height-lg: 1.375;
--body-line-height-sm: 1.8334;
--body-line-height-xs: 2.2;

// Spacing
--spacer-1: 0.3125rem;
--spacer-2: 0.625rem;
--spacer: 1.25rem;
--spacer-4: 1.875rem;
--spacer-5: 3.75rem;

// Border radius
--border-radius: 0.375rem;
--border-radius-sm: 0.25rem;
--border-radius-lg: 0.5rem;

// Box shadow
--box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.125);
--box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
--box-shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.15);

// Sizing
--icon-font-size: 1.25rem;
--icon-font-size-lg: 1.5rem;
--icon-font-size-sm: 1rem;

// Colors
--gray-100: #F9FAFB;
--gray-200: #F3F4F6;
--gray-300: #E5E7EB;
--gray-400: #D1D5DB;
--gray-500: #9CA3AF;
--gray-600: #6B7280;
--gray-700: #4B5563;
--gray-800: #374151;
--gray-900: #1F2937;
```

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

### Load Prism.js Syntax Highlighter Plugin

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_extensions

Includes the Prism.js script in the HTML head to enable syntax highlighting. Prism.js requires `<code>` elements and uses `language-xxxx` classes for language definition, which can be inherited by ancestor elements.

```html
<!-- Load plugin -->
<script src="assets/js/vendor/ui/prism.min.js"></script>
```

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

### Trumbowyg Text Range: Get Selected Text

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_editors

Demonstrates how to get the text content of the currently selected range within the Trumbowyg editor using the 'getRangeText' method.

```javascript
// Get text
var text = $('#editor').trumbowyg('getRangeText');
```

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

### Initialize Session Timeout

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_extensions

Example of initializing the session timeout plugin with specific options for session expiration warning and redirection. This configuration includes custom titles, messages, and URLs for redirection and logout.

```javascript
// Session timeout
$.sessionTimeout({
	title: 'Session Timeout',
	message: 'Your session is about to expire. Do you want to stay connected?',
	ignoreUserActivity: true,
	warnAfter: 10000,
	redirAfter: 30000,
	redirUrl: 'login_unlock.html',
	logoutUrl: 'login_advanced.html'
});
```

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

### Replace Media List Component with Flex Utilities (HTML)

Source: https://themes.kopyov.com/limitless/demo/docs/other_migration

This code shows the transition from the older `.media-list` and `.media` structure to using Bootstrap's flexbox utilities (`d-flex`, `flex-fill`, `me-3`). This change offers a more flexible and modern approach to creating media object layouts.

```html
<!-- Old markup -->
<ul class="media-list">
	<li class="media">
		<div class="mr-3">
			<a href="#">
				<img src="user.jpg" class="rounded-circle" width="40" height="40" alt="">
			</a>
		</div>

		<div class="media-body">
			<a href="#" class="media-title d-block font-weight-semibold">Walking away fallaciously</a>
			Wise that some and before yellow thus yikes mandrill one luxuriantly other fashionably much
		</div>
	</li>
</ul>

<!-- New markup -->
<div class="d-flex mb-3">
	<a href="#" class="me-3">
		<img src="user.jpg" width="40" height="40" class="rounded-pill" alt="">
	</a>
	<div class="flex-fill">
		<a href="#" class="fw-semibold">Walking away fallaciously</a>
		Wise that some and before yellow thus yikes mandrill one luxuriantly other fashionably much
	</div>
</div>
```

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

### Highlight Text Ranges with markRanges() in JavaScript

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_extensions

The markRanges() method enables highlighting of specific text ranges identified by their start position and length. This is useful for marking precise sections of text within a DOM element. The method takes an array of range objects (each with 'start' and 'length' properties) and an optional options object for customization.

```javascript
var context = document.querySelector(".context");
var instance = new Mark(context);
var ranges = [
  { start: 10, length: 5 },
  { start: 25, length: 3 }
];
instance.markRanges(ranges, {
  element: "span",
  className: "highlight"
});
```

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

### Initialize Basic Grid.js Table with Data

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_tables

This JavaScript code demonstrates how to initialize a basic Grid.js table. It defines sample data and column headers, then renders the table into a specified DOM element. Ensure the target element with the class '.gridjs-example-basic' exists in your HTML.

```javascript
// Demo data
const demoData = [
	["John", "john@example.com", "(353) 01 222 3333", "Netherlands"],
	["Mark", "mark@gmail.com", "(01) 22 888 4444", "Switzerland"],
	["Eoin", "eoin@gmail.com", "0097 22 654 00033", "Germany"],
	["Sarah", "sarahcdd@gmail.com", "+322 876 1233", "France"],
	["Afshin", "afshin@mail.com", "(353) 22 87 8356", "Norway"]
];

// Basic example
const gridjsBasicElement = document.querySelector(".gridjs-example-basic");
if(gridjsBasicElement) {
	const gridjsBasic = new gridjs.Grid({
		className: {
			table: 'table'
		},
		columns: ["Name", "Email", "Phone Number", "Country"],
		data: demoData
	});
	gridjsBasic.render(gridjsBasicElement);
}
```

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

### Initialize Idle Timeout

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_extensions

Example of initializing the session timeout plugin as an idle timeout. This configuration focuses on a shorter warning and redirection period, suitable for detecting user inactivity.

```javascript
// Idle timeout
$.sessionTimeout({
	title: 'Idle Timeout',
	message: 'Your session is about to expire. Do you want to stay connected?',
	warnAfter: 5000,
	redirAfter: 15000,
	redirUrl: 'login_unlock.html',
	logoutUrl: 'login_advanced.html'
});
```

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

### SweetAlert: Reset Validation Message

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.resetValidationMessage() method hides the validation message that was previously shown using Swal.showValidationMessage().

```javascript
Swal.resetValidationMessage()
```

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

### Initialize Dropzone with Multiple Files

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_uploaders

This JavaScript snippet shows how to initialize Dropzone for handling multiple file uploads. It targets an element with the ID 'dropzone_multiple' and configures options such as the upload URL, parameter name for the file, a default message, and maximum file size.

```javascript
// Multiple files
let dropzoneMultiple = new Dropzone("#dropzone_multiple", {
	url: "#",
	paramName: "file", // The name that will be used to transfer the file
	dictDefaultMessage: 'Drop files to upload or CLICK',
	maxFilesize: 0.1 // MB
});
```

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

### SweetAlert: Check if Loading

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

The Swal.isLoading() method determines if the SweetAlert popup is currently in a loading state. This is related to Swal.showLoading() and Swal.hideLoading().

```javascript
Swal.isLoading()
```

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

### Include Spectrum Color Picker Dependencies - HTML

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_pickers

Includes the necessary JavaScript files for the Spectrum color picker. This involves loading jQuery first, followed by the Spectrum plugin script itself. These should be placed in the HTML `<head>` section.

```html
<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/jquery/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/vendor/pickers/color/spectrum.js"></script>
```

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

### Hide All Bootbox Dialogs

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_notifications

Hides all currently active Bootbox dialogs. This is a global method to quickly dismiss all open dialogs.

```javascript
bootbox.hideAll();
```

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

### Include Dual Listbox JavaScript Library

Source: https://themes.kopyov.com/limitless/demo/docs/plugins_forms

Demonstrates how to load the Dual Listbox JavaScript library either through a Content Delivery Network (CDN) or by including a local file. This step is essential before initializing the library.

```html
<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/dual-listbox/dist/dual-listbox.min.js"></script>

<!-- Load plugin -->
<script src="assets/js/vendor/forms/inputs/duallistbox.min.js"></script>
```
Tokens:
Raw