| Current File : /home/hencockfreshchic/public_html/admin.cpanel/dist/js/demo.js |
/**
* AdminLTE Demo Menu
* ------------------
* You should not use this file in production.
* This file is for demo purposes only.
*/
(function ($) {
'use strict'
var $sidebar = $('.control-sidebar')
var $container = $('<div />', {
class: 'p-3 control-sidebar-content'
})
$sidebar.append($container)
var navbar_dark_skins = [
'navbar-primary',
'navbar-secondary',
'navbar-info',
'navbar-success',
'navbar-danger',
'navbar-indigo',
'navbar-purple',
'navbar-pink',
'navbar-navy',
'navbar-lightblue',
'navbar-teal',
'navbar-cyan',
'navbar-dark',
'navbar-gray-dark',
'navbar-gray',
]
var navbar_light_skins = [
'navbar-light',
'navbar-warning',
'navbar-white',
'navbar-orange',
]
$container.append(
'<h5>Customize AdminLTE</h5><hr class="mb-2"/>'
)
var $no_border_checkbox = $('<input />', {
type : 'checkbox',
value : 1,
checked: $('.main-header').hasClass('border-bottom-0'),
'class': 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.main-header').addClass('border-bottom-0')
} else {
$('.main-header').removeClass('border-bottom-0')
}
})
var $no_border_container = $('<div />', {'class': 'mb-1'}).append($no_border_checkbox).append('<span>No Navbar border</span>')
$container.append($no_border_container)
var $text_sm_body_checkbox = $('<input />', {
type : 'checkbox',
value : 1,
checked: $('body').hasClass('text-sm'),
'class': 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('text-sm')
} else {
$('body').removeClass('text-sm')
}
})
var $text_sm_body_container = $('<div />', {'class': 'mb-1'}).append($text_sm_body_checkbox).append('<span>Body small text</span>')
$container.append($text_sm_body_container)
var $text_sm_header_checkbox = $('<input />', {
type : 'checkbox',
value : 1,
checked: $('.main-header').hasClass('text-sm'),
'class': 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.main-header').addClass('text-sm')
} else {
$('.main-header').removeClass('text-sm')
}
})
var $text_sm_header_container = $('<div />', {'class': 'mb-1'}).append($text_sm_header_checkbox).append('<span>Navbar small text</span>')
$container.append($text_sm_header_container)
var $text_sm_sidebar_checkbox = $('<input />', {
type : 'checkbox',
value : 1,
checked: $('.nav-sidebar').hasClass('text-sm'),
'class': 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.nav-sidebar').addClass('text-sm')
} else {
$('.nav-sidebar').removeClass('text-sm')
}
})
var $text_sm_sidebar_container = $('<div />', {'class': 'mb-1'}).append($text_sm_sidebar_checkbox).append('<span>Sidebar nav small text</span>')
$container.append($text_sm_sidebar_container)
var $text_sm_footer_checkbox = $('<input />', {
type : 'checkbox',
value : 1,
checked: $('.main-footer').hasClass('text-sm'),
'class': 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.main-footer').addClass('text-sm')
} else {
$('.main-footer').removeClass('text-sm')
}
})
var $text_sm_footer_container = $('<div />', {'class': 'mb-1'}).append($text_sm_footer_checkbox).append('<span>Footer small text</span>')
$container.append($text_sm_footer_container)
var $flat_sidebar_checkbox = $('<input />', {
type : 'checkbox',
value : 1,
checked: $('.nav-sidebar').hasClass('nav-flat'),
'class': 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.nav-sidebar').addClass('nav-flat')
} else {
$('.nav-sidebar').removeClass('nav-flat')
}
})
var $flat_sidebar_container = $('<div />', {'class': 'mb-1'}).append($flat_sidebar_checkbox).append('<span>Sidebar nav flat style</span>')
$container.append($flat_sidebar_container)
var $legacy_sidebar_checkbox = $('<input />', {
type : 'checkbox',
value : 1,
checked: $('.nav-sidebar').hasClass('nav-legacy'),
'class': 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.nav-sidebar').addClass('nav-legacy')
} else {
$('.nav-sidebar').removeClass('nav-legacy')
}
})
var $legacy_sidebar_container = $('<div />', {'class': 'mb-1'}).append($legacy_sidebar_checkbox).append('<span>Sidebar nav legacy style</span>')
$container.append($legacy_sidebar_container)
var $compact_sidebar_checkbox = $('<input />', {
type : 'checkbox',
value : 1,
checked: $('.nav-sidebar').hasClass('nav-compact'),
'class': 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.nav-sidebar').addClass('nav-compact')
} else {
$('.nav-sidebar').removeClass('nav-compact')
}
})
var $compact_sidebar_container = $('<div />', {'class': 'mb-1'}).append($compact_sidebar_checkbox).append('<span>Sidebar nav compact</span>')
$container.append($compact_sidebar_container)
var $child_indent_sidebar_checkbox = $('<input />', {
type : 'checkbox',
value : 1,
checked: $('.nav-sidebar').hasClass('nav-child-indent'),
'class': 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.nav-sidebar').addClass('nav-child-indent')
} else {
$('.nav-sidebar').removeClass('nav-child-indent')
}
})
var $child_indent_sidebar_container = $('<div />', {'class': 'mb-1'}).append($child_indent_sidebar_checkbox).append('<span>Sidebar nav child indent</span>')
$container.append($child_indent_sidebar_container)
var $no_expand_sidebar_checkbox = $('<input />', {
type : 'checkbox',
value : 1,
checked: $('.main-sidebar').hasClass('sidebar-no-expand'),
'class': 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.main-sidebar').addClass('sidebar-no-expand')
} else {
$('.main-sidebar').removeClass('sidebar-no-expand')
}
})
var $no_expand_sidebar_container = $('<div />', {'class': 'mb-1'}).append($no_expand_sidebar_checkbox).append('<span>Main Sidebar disable hover/focus auto expand</span>')
$container.append($no_expand_sidebar_container)
var $text_sm_brand_checkbox = $('<input />', {
type : 'checkbox',
value : 1,
checked: $('.brand-link').hasClass('text-sm'),
'class': 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.brand-link').addClass('text-sm')
} else {
$('.brand-link').removeClass('text-sm')
}
})
var $text_sm_brand_container = $('<div />', {'class': 'mb-4'}).append($text_sm_brand_checkbox).append('<span>Brand small text</span>')
$container.append($text_sm_brand_container)
$container.append('<h6>Navbar Variants</h6>')
var $navbar_variants = $('<div />', {
'class': 'd-flex'
})
var navbar_all_colors = navbar_dark_skins.concat(navbar_light_skins)
var $navbar_variants_colors = createSkinBlock(navbar_all_colors, function (e) {
var color = $(this).data('color')
var $main_header = $('.main-header')
$main_header.removeClass('navbar-dark').removeClass('navbar-light')
navbar_all_colors.map(function (color) {
$main_header.removeClass(color)
})
if (navbar_dark_skins.indexOf(color) > -1) {
$main_header.addClass('navbar-dark')
} else {
$main_header.addClass('navbar-light')
}
$main_header.addClass(color)
})
$navbar_variants.append($navbar_variants_colors)
$container.append($navbar_variants)
var sidebar_colors = [
'bg-primary',
'bg-warning',
'bg-info',
'bg-danger',
'bg-success',
'bg-indigo',
'bg-lightblue',
'bg-navy',
'bg-purple',
'bg-fuchsia',
'bg-pink',
'bg-maroon',
'bg-orange',
'bg-lime',
'bg-teal',
'bg-olive'
]
var accent_colors = [
'accent-primary',
'accent-warning',
'accent-info',
'accent-danger',
'accent-success',
'accent-indigo',
'accent-lightblue',
'accent-navy',
'accent-purple',
'accent-fuchsia',
'accent-pink',
'accent-maroon',
'accent-orange',
'accent-lime',
'accent-teal',
'accent-olive'
]
var sidebar_skins = [
'sidebar-dark-primary',
'sidebar-dark-warning',
'sidebar-dark-info',
'sidebar-dark-danger',
'sidebar-dark-success',
'sidebar-dark-indigo',
'sidebar-dark-lightblue',
'sidebar-dark-navy',
'sidebar-dark-purple',
'sidebar-dark-fuchsia',
'sidebar-dark-pink',
'sidebar-dark-maroon',
'sidebar-dark-orange',
'sidebar-dark-lime',
'sidebar-dark-teal',
'sidebar-dark-olive',
'sidebar-light-primary',
'sidebar-light-warning',
'sidebar-light-info',
'sidebar-light-danger',
'sidebar-light-success',
'sidebar-light-indigo',
'sidebar-light-lightblue',
'sidebar-light-navy',
'sidebar-light-purple',
'sidebar-light-fuchsia',
'sidebar-light-pink',
'sidebar-light-maroon',
'sidebar-light-orange',
'sidebar-light-lime',
'sidebar-light-teal',
'sidebar-light-olive'
]
$container.append('<h6>Accent Color Variants</h6>')
var $accent_variants = $('<div />', {
'class': 'd-flex'
})
$container.append($accent_variants)
$container.append(createSkinBlock(accent_colors, function () {
var color = $(this).data('color')
var accent_class = color
var $body = $('body')
accent_colors.map(function (skin) {
$body.removeClass(skin)
})
$body.addClass(accent_class)
}))
$container.append('<h6>Dark Sidebar Variants</h6>')
var $sidebar_variants_dark = $('<div />', {
'class': 'd-flex'
})
$container.append($sidebar_variants_dark)
$container.append(createSkinBlock(sidebar_colors, function () {
var color = $(this).data('color')
var sidebar_class = 'sidebar-dark-' + color.replace('bg-', '')
var $sidebar = $('.main-sidebar')
sidebar_skins.map(function (skin) {
$sidebar.removeClass(skin)
})
$sidebar.addClass(sidebar_class)
}))
$container.append('<h6>Light Sidebar Variants</h6>')
var $sidebar_variants_light = $('<div />', {
'class': 'd-flex'
})
$container.append($sidebar_variants_light)
$container.append(createSkinBlock(sidebar_colors, function () {
var color = $(this).data('color')
var sidebar_class = 'sidebar-light-' + color.replace('bg-', '')
var $sidebar = $('.main-sidebar')
sidebar_skins.map(function (skin) {
$sidebar.removeClass(skin)
})
$sidebar.addClass(sidebar_class)
}))
var logo_skins = navbar_all_colors
$container.append('<h6>Brand Logo Variants</h6>')
var $logo_variants = $('<div />', {
'class': 'd-flex'
})
$container.append($logo_variants)
var $clear_btn = $('<a />', {
href: 'javascript:void(0)'
}).text('clear').on('click', function () {
var $logo = $('.brand-link')
logo_skins.map(function (skin) {
$logo.removeClass(skin)
})
})
$container.append(createSkinBlock(logo_skins, function () {
var color = $(this).data('color')
var $logo = $('.brand-link')
logo_skins.map(function (skin) {
$logo.removeClass(skin)
})
$logo.addClass(color)
}).append($clear_btn))
function createSkinBlock(colors, callback) {
var $block = $('<div />', {
'class': 'd-flex flex-wrap mb-3'
})
colors.map(function (color) {
var $color = $('<div />', {
'class': (typeof color === 'object' ? color.join(' ') : color).replace('navbar-', 'bg-').replace('accent-', 'bg-') + ' elevation-2'
})
$block.append($color)
$color.data('color', color)
$color.css({
width : '40px',
height : '20px',
borderRadius: '25px',
marginRight : 10,
marginBottom: 10,
opacity : 0.8,
cursor : 'pointer'
})
$color.hover(function () {
$(this).css({ opacity: 1 }).removeClass('elevation-2').addClass('elevation-4')
}, function () {
$(this).css({ opacity: 0.8 }).removeClass('elevation-4').addClass('elevation-2')
})
if (callback) {
$color.on('click', callback)
}
})
return $block
}
$('.product-image-thumb').on('click', function() {
const image_element = $(this).find('img');
$('.product-image').prop('src', $(image_element).attr('src'))
$('.product-image-thumb.active').removeClass('active');
$(this).addClass('active');
});
})(jQuery)
$(function() {
$('#form-tags-1').tagsInput();
$('#form-tags-2').tagsInput({
'onAddTag': function(input, value) {
console.log('tag added', input, value);
},
'onRemoveTag': function(input, value) {
console.log('tag removed', input, value);
},
'onChange': function(input, value) {
console.log('change triggered', input, value);
}
});
$('#form-tags-3').tagsInput({
'unique': true,
'minChars': 2,
'maxChars': 10,
'limit': 5,
'validationPattern': new RegExp('^[a-zA-Z]+$')
});
$('#form-tags-4').tagsInput({
'autocomplete': {
source: [
'apple',
'banana',
'orange',
'pizza'
]
}
});
$('#form-tags-5').tagsInput({
'delimiter': ';'
});
$('#form-tags-6').tagsInput({
'delimiter': [',', ';']
});
});
/* jQuery Tags Input Revisited Plugin
*
* Copyright (c) Krzysztof Rusnarczyk
* Licensed under the MIT license */
(function($) {
var delimiter = [];
var inputSettings = [];
var callbacks = [];
$.fn.addTag = function(value, options) {
options = jQuery.extend({
focus: false,
callback: true
}, options);
this.each(function() {
var id = $(this).attr('id');
var tagslist = $(this).val().split(_getDelimiter(delimiter[id]));
if (tagslist[0] === '') tagslist = [];
value = jQuery.trim(value);
if ((inputSettings[id].unique && $(this).tagExist(value)) || !_validateTag(value, inputSettings[id], tagslist, delimiter[id])) {
$('#' + id + '_tag').addClass('error');
return false;
}
$('<span>', {class: 'tag'}).append(
$('<span>', {class: 'tag-text'}).text(value),
$('<button>', {class: 'tag-remove'}).click(function() {
return $('#' + id).removeTag(encodeURI(value));
})
).insertBefore('#' + id + '_addTag');
tagslist.push(value);
$('#' + id + '_tag').val('');
if (options.focus) {
$('#' + id + '_tag').focus();
} else {
$('#' + id + '_tag').blur();
}
$.fn.tagsInput.updateTagsField(this, tagslist);
if (options.callback && callbacks[id] && callbacks[id]['onAddTag']) {
var f = callbacks[id]['onAddTag'];
f.call(this, this, value);
}
if (callbacks[id] && callbacks[id]['onChange']) {
var i = tagslist.length;
var f = callbacks[id]['onChange'];
f.call(this, this, value);
}
});
return false;
};
$.fn.removeTag = function(value) {
value = decodeURI(value);
this.each(function() {
var id = $(this).attr('id');
var old = $(this).val().split(_getDelimiter(delimiter[id]));
$('#' + id + '_tagsinput .tag').remove();
var str = '';
for (i = 0; i < old.length; ++i) {
if (old[i] != value) {
str = str + _getDelimiter(delimiter[id]) + old[i];
}
}
$.fn.tagsInput.importTags(this, str);
if (callbacks[id] && callbacks[id]['onRemoveTag']) {
var f = callbacks[id]['onRemoveTag'];
f.call(this, this, value);
}
});
return false;
};
$.fn.tagExist = function(val) {
var id = $(this).attr('id');
var tagslist = $(this).val().split(_getDelimiter(delimiter[id]));
return (jQuery.inArray(val, tagslist) >= 0);
};
$.fn.importTags = function(str) {
var id = $(this).attr('id');
$('#' + id + '_tagsinput .tag').remove();
$.fn.tagsInput.importTags(this, str);
};
$.fn.tagsInput = function(options) {
var settings = jQuery.extend({
interactive: true,
placeholder: 'Add a tag',
minChars: 0,
maxChars: null,
limit: null,
validationPattern: null,
width: 'auto',
height: 'auto',
autocomplete: null,
hide: true,
delimiter: ',',
unique: true,
removeWithBackspace: true
}, options);
var uniqueIdCounter = 0;
this.each(function() {
if (typeof $(this).data('tagsinput-init') !== 'undefined') return;
$(this).data('tagsinput-init', true);
if (settings.hide) $(this).hide();
var id = $(this).attr('id');
if (!id || _getDelimiter(delimiter[$(this).attr('id')])) {
id = $(this).attr('id', 'tags' + new Date().getTime() + (++uniqueIdCounter)).attr('id');
}
var data = jQuery.extend({
pid: id,
real_input: '#' + id,
holder: '#' + id + '_tagsinput',
input_wrapper: '#' + id + '_addTag',
fake_input: '#' + id + '_tag'
}, settings);
delimiter[id] = data.delimiter;
inputSettings[id] = {
minChars: settings.minChars,
maxChars: settings.maxChars,
limit: settings.limit,
validationPattern: settings.validationPattern,
unique: settings.unique
};
if (settings.onAddTag || settings.onRemoveTag || settings.onChange) {
callbacks[id] = [];
callbacks[id]['onAddTag'] = settings.onAddTag;
callbacks[id]['onRemoveTag'] = settings.onRemoveTag;
callbacks[id]['onChange'] = settings.onChange;
}
var markup = $('<div>', {id: id + '_tagsinput', class: 'tagsinput'}).append(
$('<div>', {id: id + '_addTag'}).append(
settings.interactive ? $('<input>', {id: id + '_tag', class: 'tag-input', value: '', placeholder: settings.placeholder}) : null
)
);
$(markup).insertAfter(this);
$(data.holder).css('width', settings.width);
$(data.holder).css('min-height', settings.height);
$(data.holder).css('height', settings.height);
if ($(data.real_input).val() !== '') {
$.fn.tagsInput.importTags($(data.real_input), $(data.real_input).val());
}
// Stop here if interactive option is not chosen
if (!settings.interactive) return;
$(data.fake_input).val('');
$(data.fake_input).data('pasted', false);
$(data.fake_input).on('focus', data, function(event) {
$(data.holder).addClass('focus');
if ($(this).val() === '') {
$(this).removeClass('error');
}
});
$(data.fake_input).on('blur', data, function(event) {
$(data.holder).removeClass('focus');
});
if (settings.autocomplete !== null && jQuery.ui.autocomplete !== undefined) {
$(data.fake_input).autocomplete(settings.autocomplete);
$(data.fake_input).on('autocompleteselect', data, function(event, ui) {
$(event.data.real_input).addTag(ui.item.value, {
focus: true,
unique: settings.unique
});
return false;
});
$(data.fake_input).on('keypress', data, function(event) {
if (_checkDelimiter(event)) {
$(this).autocomplete("close");
}
});
} else {
$(data.fake_input).on('blur', data, function(event) {
$(event.data.real_input).addTag($(event.data.fake_input).val(), {
focus: true,
unique: settings.unique
});
return false;
});
}
// If a user types a delimiter create a new tag
$(data.fake_input).on('keypress', data, function(event) {
if (_checkDelimiter(event)) {
event.preventDefault();
$(event.data.real_input).addTag($(event.data.fake_input).val(), {
focus: true,
unique: settings.unique
});
return false;
}
});
$(data.fake_input).on('paste', function () {
$(this).data('pasted', true);
});
// If a user pastes the text check if it shouldn't be splitted into tags
$(data.fake_input).on('input', data, function(event) {
if (!$(this).data('pasted')) return;
$(this).data('pasted', false);
var value = $(event.data.fake_input).val();
value = value.replace(/\n/g, '');
value = value.replace(/\s/g, '');
var tags = _splitIntoTags(event.data.delimiter, value);
if (tags.length > 1) {
for (var i = 0; i < tags.length; ++i) {
$(event.data.real_input).addTag(tags[i], {
focus: true,
unique: settings.unique
});
}
return false;
}
});
// Deletes last tag on backspace
data.removeWithBackspace && $(data.fake_input).on('keydown', function(event) {
if (event.keyCode == 8 && $(this).val() === '') {
event.preventDefault();
var lastTag = $(this).closest('.tagsinput').find('.tag:last > span').text();
var id = $(this).attr('id').replace(/_tag$/, '');
$('#' + id).removeTag(encodeURI(lastTag));
$(this).trigger('focus');
}
});
// Removes the error class when user changes the value of the fake input
$(data.fake_input).keydown(function(event) {
// enter, alt, shift, esc, ctrl and arrows keys are ignored
if (jQuery.inArray(event.keyCode, [13, 37, 38, 39, 40, 27, 16, 17, 18, 225]) === -1) {
$(this).removeClass('error');
}
});
});
return this;
};
$.fn.tagsInput.updateTagsField = function(obj, tagslist) {
var id = $(obj).attr('id');
$(obj).val(tagslist.join(_getDelimiter(delimiter[id])));
};
$.fn.tagsInput.importTags = function(obj, val) {
$(obj).val('');
var id = $(obj).attr('id');
var tags = _splitIntoTags(delimiter[id], val);
for (i = 0; i < tags.length; ++i) {
$(obj).addTag(tags[i], {
focus: false,
callback: false
});
}
if (callbacks[id] && callbacks[id]['onChange']) {
var f = callbacks[id]['onChange'];
f.call(obj, obj, tags);
}
};
var _getDelimiter = function(delimiter) {
if (typeof delimiter === 'undefined') {
return delimiter;
} else if (typeof delimiter === 'string') {
return delimiter;
} else {
return delimiter[0];
}
};
var _validateTag = function(value, inputSettings, tagslist, delimiter) {
var result = true;
if (value === '') result = false;
if (value.length < inputSettings.minChars) result = false;
if (inputSettings.maxChars !== null && value.length > inputSettings.maxChars) result = false;
if (inputSettings.limit !== null && tagslist.length >= inputSettings.limit) result = false;
if (inputSettings.validationPattern !== null && !inputSettings.validationPattern.test(value)) result = false;
if (typeof delimiter === 'string') {
if (value.indexOf(delimiter) > -1) result = false;
} else {
$.each(delimiter, function(index, _delimiter) {
if (value.indexOf(_delimiter) > -1) result = false;
return false;
});
}
return result;
};
var _checkDelimiter = function(event) {
var found = false;
if (event.which === 13) {
return true;
}
if (typeof event.data.delimiter === 'string') {
if (event.which === event.data.delimiter.charCodeAt(0)) {
found = true;
}
} else {
$.each(event.data.delimiter, function(index, delimiter) {
if (event.which === delimiter.charCodeAt(0)) {
found = true;
}
});
}
return found;
};
var _splitIntoTags = function(delimiter, value) {
if (value === '') return [];
if (typeof delimiter === 'string') {
return value.split(delimiter);
} else {
var tmpDelimiter = '∞';
var text = value;
$.each(delimiter, function(index, _delimiter) {
text = text.split(_delimiter).join(tmpDelimiter);
});
return text.split(tmpDelimiter);
}
return [];
};
})(jQuery);