237 lines
6.7 KiB
JavaScript
Executable File
237 lines
6.7 KiB
JavaScript
Executable File
/*=========================================================================================
|
|
File Name: table-components.js
|
|
Description: Table Components js
|
|
----------------------------------------------------------------------------------------
|
|
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
|
|
Version: 1.0
|
|
Author: Pixinvent
|
|
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
|
==========================================================================================*/
|
|
|
|
(function(window, document, $) {
|
|
// Bootstrap TouchSpin JS
|
|
|
|
|
|
'use strict';
|
|
var $html = $('html');
|
|
|
|
/* Checkbox & Radio Styles Starts */
|
|
$('.colors li').on('click', function() {
|
|
var self = $(this);
|
|
|
|
if (!self.hasClass('active')) {
|
|
self.siblings().removeClass('active');
|
|
|
|
var skin = self.closest('.skin'),
|
|
color = self.attr('class') ? '-' + self.attr('class') : '',
|
|
checkbox = skin.data('icheckbox'),
|
|
radio = skin.data('iradio'),
|
|
checkbox_default = 'icheckbox_minimal',
|
|
radio_default = 'iradio_minimal';
|
|
|
|
if (skin.hasClass('skin-square')) {
|
|
checkbox_default = 'icheckbox_square';
|
|
radio_default = 'iradio_square';
|
|
checkbox === undefined && (checkbox = 'icheckbox_square-red', radio = 'iradio_square-red');
|
|
}
|
|
|
|
if (skin.hasClass('skin-flat')) {
|
|
checkbox_default = 'icheckbox_flat';
|
|
radio_default = 'iradio_flat';
|
|
checkbox === undefined && (checkbox = 'icheckbox_flat-green', radio = 'iradio_flat-green');
|
|
}
|
|
|
|
if (skin.hasClass('skin-line')) {
|
|
checkbox_default = 'icheckbox_line';
|
|
radio_default = 'iradio_line';
|
|
checkbox === undefined && (checkbox = 'icheckbox_line-blue', radio = 'iradio_line-blue');
|
|
}
|
|
|
|
checkbox === undefined && (checkbox = checkbox_default, radio = radio_default);
|
|
|
|
skin.find('input, .skin-states .state').each(function() {
|
|
var element = $(this).hasClass('state') ? $(this) : $(this).parent(),
|
|
element_class = element.attr('class').replace(checkbox, checkbox_default + color).replace(radio, radio_default + color);
|
|
|
|
element.attr('class', element_class);
|
|
});
|
|
|
|
skin.data('icheckbox', checkbox_default + color);
|
|
skin.data('iradio', radio_default + color);
|
|
self.addClass('active');
|
|
}
|
|
});
|
|
// Checkbox & Radio 1
|
|
$('.icheck1 input').iCheck({
|
|
checkboxClass: 'icheckbox_square-blue',
|
|
radioClass: 'iradio_square-blue',
|
|
});
|
|
|
|
// Checkbox & Radio 2
|
|
$('.icheck2 input').iCheck({
|
|
checkboxClass: 'icheckbox_minimal',
|
|
radioClass: 'iradio_minimal',
|
|
});
|
|
|
|
// Square Checkbox & Radio
|
|
$('.skin-square input').iCheck({
|
|
checkboxClass: 'icheckbox_square-red',
|
|
radioClass: 'iradio_square-red',
|
|
});
|
|
//Flat Checkbox & Radio
|
|
$('.skin-flat input').iCheck({
|
|
checkboxClass: 'icheckbox_flat-green',
|
|
radioClass: 'iradio_flat-green'
|
|
});
|
|
// Polaris Checkbox & Radio
|
|
$('.skin-polaris input').iCheck({
|
|
checkboxClass: 'icheckbox_polaris',
|
|
radioClass: 'iradio_polaris',
|
|
increaseArea: '-10%'
|
|
});
|
|
// Futurico Checkbox & Radio
|
|
$('.skin-futurico input').iCheck({
|
|
checkboxClass: 'icheckbox_futurico',
|
|
radioClass: 'iradio_futurico',
|
|
increaseArea: '20%'
|
|
});
|
|
/* Checkbox & Radio Styles Ends */
|
|
|
|
|
|
// Switchery JS
|
|
|
|
|
|
'use strict';
|
|
$html = $('html');
|
|
|
|
/* Toggle Starts */
|
|
$('.switch:checkbox').checkboxpicker();
|
|
|
|
$('#switch12').checkboxpicker({
|
|
html: true,
|
|
offLabel: '<span class="icon-remove">',
|
|
onLabel: '<span class="icon-ok">'
|
|
});
|
|
|
|
// Switchery
|
|
var i = 0;
|
|
if (Array.prototype.forEach) {
|
|
var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery'));
|
|
|
|
elems.forEach(function (html) {
|
|
var switchery = new Switchery(html);
|
|
});
|
|
} else {
|
|
var elems1 = document.querySelectorAll('.switchery');
|
|
|
|
for (i = 0; i < elems1.length; i++) {
|
|
var switchery = new Switchery(elems1[i]);
|
|
}
|
|
}
|
|
|
|
var elemSmall = document.querySelectorAll('.switchery-sm');
|
|
for (i = 0; i < elemSmall.length; i++) {
|
|
new Switchery(elemSmall[i], {className:"switchery switchery-small"});
|
|
}
|
|
|
|
var danger = document.querySelectorAll('.switchery-danger');
|
|
for (i = 0; i < danger.length; i++) {
|
|
new Switchery(danger[i], { color: '#DA4453' });
|
|
}
|
|
/* Toggle Ends */
|
|
|
|
|
|
|
|
//- Checkbox Radio
|
|
|
|
|
|
'use strict';
|
|
|
|
// Basic Select2 select
|
|
$(".select2").select2();
|
|
|
|
// Single Select Placeholder
|
|
$(".select2-placeholder").select2({
|
|
placeholder: "Select a state",
|
|
allowClear: true
|
|
});
|
|
|
|
// Select With Icon
|
|
$(".select2-icons").select2({
|
|
minimumResultsForSearch: Infinity,
|
|
templateResult: iconFormat,
|
|
templateSelection: iconFormat,
|
|
escapeMarkup: function(es) { return es; }
|
|
});
|
|
|
|
// Format icon
|
|
function iconFormat(icon) {
|
|
var originalOption = icon.element;
|
|
if (!icon.id) { return icon.text; }
|
|
var $icon = "<i class='icon-" + $(icon.element).data('icon') + "'></i>" + icon.text;
|
|
|
|
return $icon;
|
|
}
|
|
|
|
// Theme support
|
|
$(".select2-theme").select2({
|
|
placeholder: "Classic Theme",
|
|
theme: "classic"
|
|
});
|
|
|
|
// Templating
|
|
function formatState (state) {
|
|
if (!state.id) { return state.text; }
|
|
else{
|
|
var $state = $(
|
|
'<span><img src="../../../app-assets/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
|
|
);
|
|
return $state;
|
|
}
|
|
}
|
|
|
|
$(".select2-templating").select2({
|
|
templateResult: formatState,
|
|
templateSelection: formatState
|
|
});
|
|
|
|
// Mini
|
|
$('.select2-size-xs').select2({
|
|
containerCssClass: 'select-xs'
|
|
});
|
|
|
|
|
|
|
|
// Bootstrap TouchSpin JS
|
|
|
|
|
|
'use strict';
|
|
var $html = $('html');
|
|
|
|
// Default Spin
|
|
$(".touchspin").TouchSpin({
|
|
buttondown_class: "btn btn-primary",
|
|
buttonup_class: "btn btn-primary",
|
|
buttondown_txt: '<i class="ft-minus"></i>',
|
|
buttonup_txt: '<i class="ft-plus"></i>'
|
|
});
|
|
|
|
$("#chart1").sparkline([5,6,7,8,9,10,12,13,15,14,13,12,10,9,8,10,12,14,15,16,17,14,12,11,10,8], {
|
|
type: 'bar',
|
|
width: '100%',
|
|
height: '30px',
|
|
barWidth: 2,
|
|
barSpacing: 4,
|
|
barColor: '#FF5722'
|
|
});
|
|
|
|
$("#chart2").sparkline([ [8,10], [12,8], [9,14], [8,11], [10,13], [7,11], [8,14], [9,12], [10,11], [12,14], [8,12], [9,12], [9,14] ], {
|
|
type: 'bar',
|
|
width: '100%',
|
|
height: '30px',
|
|
barWidth: 4,
|
|
barSpacing: 6,
|
|
stackedBarColor: ['#4CAF50', '#FFEB3B']
|
|
});
|
|
|
|
})(window, document, jQuery); |