first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,643 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Template JS core
|
||||
*
|
||||
* Core JS file with default functionality configuration
|
||||
*
|
||||
* Version: 1.3
|
||||
* Latest update: Aug 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Allow CSS transitions when page is loaded
|
||||
$(window).on('load', function() {
|
||||
$('body').removeClass('no-transitions');
|
||||
});
|
||||
|
||||
|
||||
$(function() {
|
||||
|
||||
// Disable CSS transitions on page load
|
||||
$('body').addClass('no-transitions');
|
||||
|
||||
|
||||
|
||||
// ========================================
|
||||
//
|
||||
// Content area height
|
||||
//
|
||||
// ========================================
|
||||
|
||||
|
||||
// Calculate min height
|
||||
function containerHeight() {
|
||||
var availableHeight = $(window).height() - $('.page-container').offset().top - $('.navbar-fixed-bottom').outerHeight();
|
||||
|
||||
$('.page-container').attr('style', 'min-height:' + availableHeight + 'px');
|
||||
}
|
||||
|
||||
// Initialize
|
||||
containerHeight();
|
||||
|
||||
|
||||
|
||||
|
||||
// ========================================
|
||||
//
|
||||
// Heading elements
|
||||
//
|
||||
// ========================================
|
||||
|
||||
|
||||
// Heading elements toggler
|
||||
// -------------------------
|
||||
|
||||
// Add control button toggler to page and panel headers if have heading elements
|
||||
$('.panel-footer').has('> .heading-elements:not(.not-collapsible)').prepend('<a class="heading-elements-toggle"><i class="icon-more"></i></a>');
|
||||
$('.page-title, .panel-title').parent().has('> .heading-elements:not(.not-collapsible)').children('.page-title, .panel-title').append('<a class="heading-elements-toggle"><i class="icon-more"></i></a>');
|
||||
|
||||
|
||||
// Toggle visible state of heading elements
|
||||
$('.page-title .heading-elements-toggle, .panel-title .heading-elements-toggle').on('click', function() {
|
||||
$(this).parent().parent().toggleClass('has-visible-elements').children('.heading-elements').toggleClass('visible-elements');
|
||||
});
|
||||
$('.panel-footer .heading-elements-toggle').on('click', function() {
|
||||
$(this).parent().toggleClass('has-visible-elements').children('.heading-elements').toggleClass('visible-elements');
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Breadcrumb elements toggler
|
||||
// -------------------------
|
||||
|
||||
// Add control button toggler to breadcrumbs if has elements
|
||||
$('.breadcrumb-line').has('.breadcrumb-elements').prepend('<a class="breadcrumb-elements-toggle"><i class="icon-menu-open"></i></a>');
|
||||
|
||||
|
||||
// Toggle visible state of breadcrumb elements
|
||||
$('.breadcrumb-elements-toggle').on('click', function() {
|
||||
$(this).parent().children('.breadcrumb-elements').toggleClass('visible-elements');
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// ========================================
|
||||
//
|
||||
// Navbar
|
||||
//
|
||||
// ========================================
|
||||
|
||||
|
||||
// Navbar navigation
|
||||
// -------------------------
|
||||
|
||||
// Prevent dropdown from closing on click
|
||||
$(document).on('click', '.dropdown-content', function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// Disabled links
|
||||
$('.navbar-nav .disabled a').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// Show tabs inside dropdowns
|
||||
$('.dropdown-content a[data-toggle="tab"]').on('click', function (e) {
|
||||
$(this).tab('show');
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// ========================================
|
||||
//
|
||||
// Element controls
|
||||
//
|
||||
// ========================================
|
||||
|
||||
|
||||
// Reload elements
|
||||
// -------------------------
|
||||
|
||||
// Panels
|
||||
$('.panel [data-action=reload]').click(function (e) {
|
||||
e.preventDefault();
|
||||
var block = $(this).parent().parent().parent().parent().parent();
|
||||
$(block).block({
|
||||
message: '<i class="icon-spinner2 spinner"></i>',
|
||||
overlayCSS: {
|
||||
backgroundColor: '#fff',
|
||||
opacity: 0.8,
|
||||
cursor: 'wait',
|
||||
'box-shadow': '0 0 0 1px #ddd'
|
||||
},
|
||||
css: {
|
||||
border: 0,
|
||||
padding: 0,
|
||||
backgroundColor: 'none'
|
||||
}
|
||||
});
|
||||
|
||||
// For demo purposes
|
||||
window.setTimeout(function () {
|
||||
$(block).unblock();
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
|
||||
// Sidebar categories
|
||||
$('.category-title [data-action=reload]').click(function (e) {
|
||||
e.preventDefault();
|
||||
var block = $(this).parent().parent().parent().parent();
|
||||
$(block).block({
|
||||
message: '<i class="icon-spinner2 spinner"></i>',
|
||||
overlayCSS: {
|
||||
backgroundColor: '#000',
|
||||
opacity: 0.5,
|
||||
cursor: 'wait',
|
||||
'box-shadow': '0 0 0 1px #000'
|
||||
},
|
||||
css: {
|
||||
border: 0,
|
||||
padding: 0,
|
||||
backgroundColor: 'none',
|
||||
color: '#fff'
|
||||
}
|
||||
});
|
||||
|
||||
// For demo purposes
|
||||
window.setTimeout(function () {
|
||||
$(block).unblock();
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
|
||||
// Light sidebar categories
|
||||
$('.sidebar-default .category-title [data-action=reload]').click(function (e) {
|
||||
e.preventDefault();
|
||||
var block = $(this).parent().parent().parent().parent();
|
||||
$(block).block({
|
||||
message: '<i class="icon-spinner2 spinner"></i>',
|
||||
overlayCSS: {
|
||||
backgroundColor: '#fff',
|
||||
opacity: 0.8,
|
||||
cursor: 'wait',
|
||||
'box-shadow': '0 0 0 1px #ddd'
|
||||
},
|
||||
css: {
|
||||
border: 0,
|
||||
padding: 0,
|
||||
backgroundColor: 'none'
|
||||
}
|
||||
});
|
||||
|
||||
// For demo purposes
|
||||
window.setTimeout(function () {
|
||||
$(block).unblock();
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Collapse elements
|
||||
// -------------------------
|
||||
|
||||
//
|
||||
// Sidebar categories
|
||||
//
|
||||
|
||||
// Hide if collapsed by default
|
||||
$('.category-collapsed').children('.category-content').hide();
|
||||
|
||||
|
||||
// Rotate icon if collapsed by default
|
||||
$('.category-collapsed').find('[data-action=collapse]').addClass('rotate-180');
|
||||
|
||||
|
||||
// Collapse on click
|
||||
$('.category-title [data-action=collapse]').click(function (e) {
|
||||
e.preventDefault();
|
||||
var $categoryCollapse = $(this).parent().parent().parent().nextAll();
|
||||
$(this).parents('.category-title').toggleClass('category-collapsed');
|
||||
$(this).toggleClass('rotate-180');
|
||||
|
||||
containerHeight(); // adjust page height
|
||||
|
||||
$categoryCollapse.slideToggle(150);
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
// Panels
|
||||
//
|
||||
|
||||
// Hide if collapsed by default
|
||||
$('.panel-collapsed').children('.panel-heading').nextAll().hide();
|
||||
|
||||
|
||||
// Rotate icon if collapsed by default
|
||||
$('.panel-collapsed').find('[data-action=collapse]').addClass('rotate-180');
|
||||
|
||||
|
||||
// Collapse on click
|
||||
$('.panel [data-action=collapse]').click(function (e) {
|
||||
e.preventDefault();
|
||||
var $panelCollapse = $(this).parent().parent().parent().parent().nextAll();
|
||||
$(this).parents('.panel').toggleClass('panel-collapsed');
|
||||
$(this).toggleClass('rotate-180');
|
||||
|
||||
containerHeight(); // recalculate page height
|
||||
|
||||
$panelCollapse.slideToggle(150);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Remove elements
|
||||
// -------------------------
|
||||
|
||||
// Panels
|
||||
$('.panel [data-action=close]').click(function (e) {
|
||||
e.preventDefault();
|
||||
var $panelClose = $(this).parent().parent().parent().parent().parent();
|
||||
|
||||
containerHeight(); // recalculate page height
|
||||
|
||||
$panelClose.slideUp(150, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Sidebar categories
|
||||
$('.category-title [data-action=close]').click(function (e) {
|
||||
e.preventDefault();
|
||||
var $categoryClose = $(this).parent().parent().parent().parent();
|
||||
|
||||
containerHeight(); // recalculate page height
|
||||
|
||||
$categoryClose.slideUp(150, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// ========================================
|
||||
//
|
||||
// Main navigation
|
||||
//
|
||||
// ========================================
|
||||
|
||||
|
||||
// Main navigation
|
||||
// -------------------------
|
||||
|
||||
//set active for current nav link
|
||||
$('.navigation a[href$="'+window.location.pathname+'"]').closest('li').first().addClass('active');
|
||||
|
||||
//active navbar
|
||||
const $find_active_navbar = $('.navbar a[href$="'+window.location.pathname+'"]').first();
|
||||
$find_active_navbar.closest('li').addClass('active');
|
||||
$find_active_navbar.closest('.dropdown').addClass('active');
|
||||
|
||||
// Add 'active' class to parent list item in all levels
|
||||
$('.navigation').find('li.active').parents('li').addClass('active');
|
||||
|
||||
// Hide all nested lists
|
||||
$('.navigation').find('li').not('.active, .category-title').has('ul').children('ul').addClass('hidden-ul');
|
||||
|
||||
// Highlight children links
|
||||
$('.navigation').find('li').has('ul').children('a').addClass('has-ul');
|
||||
|
||||
// Add active state to all dropdown parent levels
|
||||
$('.dropdown-menu:not(.dropdown-content), .dropdown-menu:not(.dropdown-content) .dropdown-submenu').has('li.active').addClass('active').parents('.navbar-nav .dropdown:not(.language-switch), .navbar-nav .dropup:not(.language-switch)').addClass('active');
|
||||
|
||||
|
||||
|
||||
// Main navigation tooltips positioning
|
||||
// -------------------------
|
||||
|
||||
// Left sidebar
|
||||
$('.navigation-main > .navigation-header > i').tooltip({
|
||||
placement: 'right',
|
||||
container: 'body'
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Collapsible functionality
|
||||
// -------------------------
|
||||
|
||||
// Main navigation
|
||||
$('.navigation-main').find('li').has('ul').children('a').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
// Collapsible
|
||||
$(this).parent('li').not('.disabled').not($('.sidebar-xs').not('.sidebar-xs-indicator').find('.navigation-main').children('li')).toggleClass('active').children('ul').toggle();
|
||||
|
||||
// Accordion
|
||||
if ($('.navigation-main').hasClass('navigation-accordion')) {
|
||||
$(this).parent('li').not('.disabled').not($('.sidebar-xs').not('.sidebar-xs-indicator').find('.navigation-main').children('li')).siblings(':has(.has-ul)').removeClass('active').children('ul').hide();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Alternate navigation
|
||||
$('.navigation-alt').find('li').has('ul').children('a').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Collapsible
|
||||
$(this).parent('li').not('.disabled').toggleClass('active').children('ul').slideToggle(200);
|
||||
|
||||
// Accordion
|
||||
if ($('.navigation-alt').hasClass('navigation-accordion')) {
|
||||
$(this).parent('li').not('.disabled').siblings(':has(.has-ul)').removeClass('active').children('ul').slideUp(200);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// ========================================
|
||||
//
|
||||
// Sidebars
|
||||
//
|
||||
// ========================================
|
||||
|
||||
|
||||
// Mini sidebar
|
||||
// -------------------------
|
||||
|
||||
// Toggle mini sidebar
|
||||
$('.sidebar-main-toggle').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Toggle min sidebar class
|
||||
$('body').toggleClass('sidebar-xs');
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Sidebar controls
|
||||
// -------------------------
|
||||
|
||||
// Disable click in disabled navigation items
|
||||
$(document).on('click', '.navigation .disabled a', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
// Adjust page height on sidebar control button click
|
||||
$(document).on('click', '.sidebar-control', function (e) {
|
||||
containerHeight();
|
||||
});
|
||||
|
||||
|
||||
// Hide main sidebar in Dual Sidebar
|
||||
$(document).on('click', '.sidebar-main-hide', function (e) {
|
||||
e.preventDefault();
|
||||
$('body').toggleClass('sidebar-main-hidden');
|
||||
});
|
||||
|
||||
|
||||
// Toggle second sidebar in Dual Sidebar
|
||||
$(document).on('click', '.sidebar-secondary-hide', function (e) {
|
||||
e.preventDefault();
|
||||
$('body').toggleClass('sidebar-secondary-hidden');
|
||||
});
|
||||
|
||||
|
||||
// Hide detached sidebar
|
||||
$(document).on('click', '.sidebar-detached-hide', function (e) {
|
||||
e.preventDefault();
|
||||
$('body').toggleClass('sidebar-detached-hidden');
|
||||
});
|
||||
|
||||
|
||||
// Hide all sidebars
|
||||
$(document).on('click', '.sidebar-all-hide', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
$('body').toggleClass('sidebar-all-hidden');
|
||||
});
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Opposite sidebar
|
||||
//
|
||||
|
||||
// Collapse main sidebar if opposite sidebar is visible
|
||||
$(document).on('click', '.sidebar-opposite-toggle', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Opposite sidebar visibility
|
||||
$('body').toggleClass('sidebar-opposite-visible');
|
||||
|
||||
// If visible
|
||||
if ($('body').hasClass('sidebar-opposite-visible')) {
|
||||
|
||||
// Make main sidebar mini
|
||||
$('body').addClass('sidebar-xs');
|
||||
|
||||
// Hide children lists
|
||||
$('.navigation-main').children('li').children('ul').css('display', '');
|
||||
}
|
||||
else {
|
||||
|
||||
// Make main sidebar default
|
||||
$('body').removeClass('sidebar-xs');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Hide main sidebar if opposite sidebar is shown
|
||||
$(document).on('click', '.sidebar-opposite-main-hide', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Opposite sidebar visibility
|
||||
$('body').toggleClass('sidebar-opposite-visible');
|
||||
|
||||
// If visible
|
||||
if ($('body').hasClass('sidebar-opposite-visible')) {
|
||||
|
||||
// Hide main sidebar
|
||||
$('body').addClass('sidebar-main-hidden');
|
||||
}
|
||||
else {
|
||||
|
||||
// Show main sidebar
|
||||
$('body').removeClass('sidebar-main-hidden');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Hide secondary sidebar if opposite sidebar is shown
|
||||
$(document).on('click', '.sidebar-opposite-secondary-hide', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Opposite sidebar visibility
|
||||
$('body').toggleClass('sidebar-opposite-visible');
|
||||
|
||||
// If visible
|
||||
if ($('body').hasClass('sidebar-opposite-visible')) {
|
||||
|
||||
// Hide secondary
|
||||
$('body').addClass('sidebar-secondary-hidden');
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
// Show secondary
|
||||
$('body').removeClass('sidebar-secondary-hidden');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Hide all sidebars if opposite sidebar is shown
|
||||
$(document).on('click', '.sidebar-opposite-hide', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Toggle sidebars visibility
|
||||
$('body').toggleClass('sidebar-all-hidden');
|
||||
|
||||
// If hidden
|
||||
if ($('body').hasClass('sidebar-all-hidden')) {
|
||||
|
||||
// Show opposite
|
||||
$('body').addClass('sidebar-opposite-visible');
|
||||
|
||||
// Hide children lists
|
||||
$('.navigation-main').children('li').children('ul').css('display', '');
|
||||
}
|
||||
else {
|
||||
|
||||
// Hide opposite
|
||||
$('body').removeClass('sidebar-opposite-visible');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Keep the width of the main sidebar if opposite sidebar is visible
|
||||
$(document).on('click', '.sidebar-opposite-fix', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Toggle opposite sidebar visibility
|
||||
$('body').toggleClass('sidebar-opposite-visible');
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Mobile sidebar controls
|
||||
// -------------------------
|
||||
|
||||
// Toggle main sidebar
|
||||
$('.sidebar-mobile-main-toggle').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$('body').toggleClass('sidebar-mobile-main').removeClass('sidebar-mobile-secondary sidebar-mobile-opposite sidebar-mobile-detached');
|
||||
});
|
||||
|
||||
|
||||
// Toggle secondary sidebar
|
||||
$('.sidebar-mobile-secondary-toggle').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$('body').toggleClass('sidebar-mobile-secondary').removeClass('sidebar-mobile-main sidebar-mobile-opposite sidebar-mobile-detached');
|
||||
});
|
||||
|
||||
|
||||
// Toggle opposite sidebar
|
||||
$('.sidebar-mobile-opposite-toggle').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$('body').toggleClass('sidebar-mobile-opposite').removeClass('sidebar-mobile-main sidebar-mobile-secondary sidebar-mobile-detached');
|
||||
});
|
||||
|
||||
|
||||
// Toggle detached sidebar
|
||||
$('.sidebar-mobile-detached-toggle').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$('body').toggleClass('sidebar-mobile-detached').removeClass('sidebar-mobile-main sidebar-mobile-secondary sidebar-mobile-opposite');
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Mobile sidebar setup
|
||||
// -------------------------
|
||||
|
||||
$(window).on('resize', function() {
|
||||
setTimeout(function() {
|
||||
containerHeight();
|
||||
|
||||
if($(window).width() <= 768) {
|
||||
|
||||
// Add mini sidebar indicator
|
||||
$('body').addClass('sidebar-xs-indicator');
|
||||
|
||||
// Place right sidebar before content
|
||||
$('.sidebar-opposite').insertBefore('.content-wrapper');
|
||||
|
||||
// Place detached sidebar before content
|
||||
$('.sidebar-detached').insertBefore('.content-wrapper');
|
||||
|
||||
// Add mouse events for dropdown submenus
|
||||
$('.dropdown-submenu').on('mouseenter', function() {
|
||||
$(this).children('.dropdown-menu').addClass('show');
|
||||
}).on('mouseleave', function() {
|
||||
$(this).children('.dropdown-menu').removeClass('show');
|
||||
});
|
||||
}
|
||||
else {
|
||||
|
||||
// Remove mini sidebar indicator
|
||||
$('body').removeClass('sidebar-xs-indicator');
|
||||
|
||||
// Revert back right sidebar
|
||||
$('.sidebar-opposite').insertAfter('.content-wrapper');
|
||||
|
||||
// Remove all mobile sidebar classes
|
||||
$('body').removeClass('sidebar-mobile-main sidebar-mobile-secondary sidebar-mobile-detached sidebar-mobile-opposite');
|
||||
|
||||
// Revert left detached position
|
||||
if($('body').hasClass('has-detached-left')) {
|
||||
$('.sidebar-detached').insertBefore('.container-detached');
|
||||
}
|
||||
|
||||
// Revert right detached position
|
||||
else if($('body').hasClass('has-detached-right')) {
|
||||
$('.sidebar-detached').insertAfter('.container-detached');
|
||||
}
|
||||
|
||||
// Remove visibility of heading elements on desktop
|
||||
$('.page-header-content, .panel-heading, .panel-footer').removeClass('has-visible-elements');
|
||||
$('.heading-elements').removeClass('visible-elements');
|
||||
|
||||
// Disable appearance of dropdown submenus
|
||||
$('.dropdown-submenu').children('.dropdown-menu').removeClass('show');
|
||||
}
|
||||
}, 100);
|
||||
}).resize();
|
||||
|
||||
|
||||
|
||||
|
||||
// ========================================
|
||||
//
|
||||
// Other code
|
||||
//
|
||||
// ========================================
|
||||
|
||||
|
||||
// Plugins
|
||||
// -------------------------
|
||||
|
||||
// Popover
|
||||
$('[data-popup="popover"]').popover();
|
||||
|
||||
|
||||
// Tooltip
|
||||
$('[data-popup="tooltip"]').tooltip();
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user