123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681 |
- /*! AdminLTE app.js
- * ================
- * Main JS application file for AdminLTE v2. This file
- * should be included in all pages. It controls some layout
- * options and implements exclusive AdminLTE plugins.
- *
- * @Author Almsaeed Studio
- * @Support <http://www.almsaeedstudio.com>
- * @Email <support@almsaeedstudio.com>
- * @version 2.1.2
- * @license MIT <http://opensource.org/licenses/MIT>
- */
- //Make sure jQuery has been loaded before app.js
- if (typeof jQuery === "undefined") {
- throw new Error("AdminLTE requires jQuery");
- }
- /* AdminLTE
- *
- * @type Object
- * @description $.AdminLTE is the main object for the template's app.
- * It's used for implementing functions and options related
- * to the template. Keeping everything wrapped in an object
- * prevents conflict with other plugins and is a better
- * way to organize our code.
- */
- $.AdminLTE = {};
- /* --------------------
- * - AdminLTE Options -
- * --------------------
- * Modify these options to suit your implementation
- */
- $.AdminLTE.options = {
- //Add slimscroll to navbar menus
- //This requires you to load the slimscroll plugin
- //in every page before app.js
- navbarMenuSlimscroll: true,
- navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
- navbarMenuHeight: "200px", //The height of the inner menu
- //General animation speed for JS animated elements such as box collapse/expand and
- //sidebar treeview slide up/down. This options accepts an integer as milliseconds,
- //'fast', 'normal', or 'slow'
- animationSpeed: 500,
- //Sidebar push menu toggle button selector
- sidebarToggleSelector: "[data-toggle='offcanvas']",
- //Activate sidebar push menu
- sidebarPushMenu: true,
- //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
- sidebarSlimScroll: true,
- //Enable sidebar expand on hover effect for sidebar mini
- //This option is forced to true if both the fixed layout and sidebar mini
- //are used together
- sidebarExpandOnHover: false,
- //BoxRefresh Plugin
- enableBoxRefresh: true,
- //Bootstrap.js tooltip
- enableBSToppltip: true,
- BSTooltipSelector: "[data-toggle='tooltip']",
- //Enable Fast Click. Fastclick.js creates a more
- //native touch experience with touch devices. If you
- //choose to enable the plugin, make sure you load the script
- //before AdminLTE's app.js
- enableFastclick: true,
- //Control Sidebar Options
- enableControlSidebar: true,
- controlSidebarOptions: {
- //Which button should trigger the open/close event
- toggleBtnSelector: "[data-toggle='control-sidebar']",
- //The sidebar selector
- selector: ".control-sidebar",
- //Enable slide over content
- slide: true
- },
- //Box Widget Plugin. Enable this plugin
- //to allow boxes to be collapsed and/or removed
- enableBoxWidget: true,
- //Box Widget plugin options
- boxWidgetOptions: {
- boxWidgetIcons: {
- //Collapse icon
- collapse: 'fa-minus',
- //Open icon
- open: 'fa-plus',
- //Remove icon
- remove: 'fa-times'
- },
- boxWidgetSelectors: {
- //Remove button selector
- remove: '[data-widget="remove"]',
- //Collapse button selector
- collapse: '[data-widget="collapse"]'
- }
- },
- //Direct Chat plugin options
- directChat: {
- //Enable direct chat by default
- enable: true,
- //The button to open and close the chat contacts pane
- contactToggleSelector: '[data-widget="chat-pane-toggle"]'
- },
- //Define the set of colors to use globally around the website
- colors: {
- lightBlue: "#3c8dbc",
- red: "#f56954",
- green: "#00a65a",
- aqua: "#00c0ef",
- yellow: "#f39c12",
- blue: "#0073b7",
- navy: "#001F3F",
- teal: "#39CCCC",
- olive: "#3D9970",
- lime: "#01FF70",
- orange: "#FF851B",
- fuchsia: "#F012BE",
- purple: "#8E24AA",
- maroon: "#D81B60",
- black: "#222222",
- gray: "#d2d6de"
- },
- //The standard screen sizes that bootstrap uses.
- //If you change these in the variables.less file, change
- //them here too.
- screenSizes: {
- xs: 480,
- sm: 768,
- md: 992,
- lg: 1200
- }
- };
- /* ------------------
- * - Implementation -
- * ------------------
- * The next block of code implements AdminLTE's
- * functions and plugins as specified by the
- * options above.
- */
- $(function () {
- "use strict";
- //Extend options if external options exist
- if (typeof AdminLTEOptions !== "undefined") {
- $.extend(true,$.AdminLTE.options,AdminLTEOptions);
- }
- //Easy access to options
- var o = $.AdminLTE.options;
- //Set up the object
- _init();
- //Activate the layout maker
- $.AdminLTE.layout.activate();
- //Enable sidebar tree view controls
- $.AdminLTE.tree('.sidebar');
- //Enable control sidebar
- if (o.enableControlSidebar) {
- $.AdminLTE.controlSidebar.activate();
- }
- //Add slimscroll to navbar dropdown
- if (o.navbarMenuSlimscroll && typeof $.fn.slimscroll != 'undefined') {
- $(".navbar .menu").slimscroll({
- height: o.navbarMenuHeight,
- alwaysVisible: false,
- size: o.navbarMenuSlimscrollWidth
- }).css("width", "100%");
- }
- //Activate sidebar push menu
- if (o.sidebarPushMenu) {
- $.AdminLTE.pushMenu.activate(o.sidebarToggleSelector);
- }
- //Activate Bootstrap tooltip
- if (o.enableBSToppltip) {
- $('body').tooltip({
- selector: o.BSTooltipSelector
- });
- }
- //Activate box widget
- if (o.enableBoxWidget) {
- $.AdminLTE.boxWidget.activate();
- }
- //Activate fast click
- if (o.enableFastclick && typeof FastClick != 'undefined') {
- FastClick.attach(document.body);
- }
- //Activate direct chat widget
- if (o.directChat.enable) {
- $(document).on('click', o.directChat.contactToggleSelector, function () {
- var box = $(this).parents('.direct-chat').first();
- box.toggleClass('direct-chat-contacts-open');
- });
- }
- /*
- * INITIALIZE BUTTON TOGGLE
- * ------------------------
- */
- $('.btn-group[data-toggle="btn-toggle"]').each(function () {
- var group = $(this);
- $(this).find(".btn").on('click', function (e) {
- group.find(".btn.active").removeClass("active");
- $(this).addClass("active");
- e.preventDefault();
- });
- });
- });
- /* ----------------------------------
- * - Initialize the AdminLTE Object -
- * ----------------------------------
- * All AdminLTE functions are implemented below.
- */
- function _init() {
- 'use strict';
- /* Layout
- * ======
- * Fixes the layout height in case min-height fails.
- *
- * @type Object
- * @usage $.AdminLTE.layout.activate()
- * $.AdminLTE.layout.fix()
- * $.AdminLTE.layout.fixSidebar()
- */
- $.AdminLTE.layout = {
- activate: function () {
- var _this = this;
- _this.fix();
- _this.fixSidebar();
- $(window, ".wrapper").resize(function () {
- _this.fix();
- _this.fixSidebar();
- });
- },
- fix: function () {
- //Get window height and the wrapper height
- var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight();
- var window_height = $(window).height();
- var sidebar_height = $(".sidebar").height();
- //Set the min-height of the content and sidebar based on the
- //the height of the document.
- if ($("body").hasClass("fixed")) {
- $(".content-wrapper, .right-side").css('min-height', window_height - $('.main-footer').outerHeight());
- } else {
- var postSetWidth;
- if (window_height <= sidebar_height) {
- $(".content-wrapper, .right-side").css('min-height', window_height - neg);
- postSetWidth = window_height - neg;
- } else {
- //$(".content-wrapper, .right-side").css('min-height', sidebar_height);
- postSetWidth = sidebar_height;
- }
- //Fix for the control sidebar height
- var controlSidebar = $($.AdminLTE.options.controlSidebarOptions.selector);
- if (typeof controlSidebar !== "undefined") {
- if (controlSidebar.height() > postSetWidth)
- $(".content-wrapper, .right-side").css('min-height', controlSidebar.height());
- }
- }
- },
- fixSidebar: function () {
- //Make sure the body tag has the .fixed class
- if (!$("body").hasClass("fixed")) {
- if (typeof $.fn.slimScroll != 'undefined') {
- $(".sidebar").slimScroll({destroy: true}).height("auto");
- }
- return;
- } else if (typeof $.fn.slimScroll == 'undefined' && window.console) {
- window.console.error("Error: the fixed layout requires the slimscroll plugin!");
- }
- //Enable slimscroll for fixed layout
- if ($.AdminLTE.options.sidebarSlimScroll) {
- if (typeof $.fn.slimScroll != 'undefined') {
- //Destroy if it exists
- $(".sidebar").slimScroll({destroy: true}).height("auto");
- //Add slimscroll
- $(".sidebar").slimscroll({
- height: ($(window).height() - $(".main-header").height()) + "px",
- color: "rgba(0,0,0,0.2)",
- size: "3px"
- });
- }
- }
- }
- };
- /* PushMenu()
- * ==========
- * Adds the push menu functionality to the sidebar.
- *
- * @type Function
- * @usage: $.AdminLTE.pushMenu("[data-toggle='offcanvas']")
- */
- $.AdminLTE.pushMenu = {
- activate: function (toggleBtn) {
- //Get the screen sizes
- var screenSizes = $.AdminLTE.options.screenSizes;
- //Enable sidebar toggle
- $(toggleBtn).on('click', function (e) {
- e.preventDefault();
- //Enable sidebar push menu
- if ($(window).width() > (screenSizes.sm - 1)) {
- if ($("body").hasClass('sidebar-collapse')) {
- $("body").removeClass('sidebar-collapse').trigger('expanded.pushMenu');
- } else {
- $("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu');
- }
- }
- //Handle sidebar push menu for small screens
- else {
- if ($("body").hasClass('sidebar-open')) {
- $("body").removeClass('sidebar-open').removeClass('sidebar-collapse').trigger('collapsed.pushMenu');
- } else {
- $("body").addClass('sidebar-open').trigger('expanded.pushMenu');
- }
- }
- });
- $(".content-wrapper").click(function () {
- //Enable hide menu when clicking on the content-wrapper on small screens
- if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
- $("body").removeClass('sidebar-open');
- }
- });
- //Enable expand on hover for sidebar mini
- if ($.AdminLTE.options.sidebarExpandOnHover || ($('body').hasClass('fixed') && $('body').hasClass('sidebar-mini'))) {
- this.expandOnHover();
- }
- },
- expandOnHover: function () {
- var _this = this;
- var screenWidth = $.AdminLTE.options.screenSizes.sm - 1;
- //Expand sidebar on hover
- $('.main-sidebar').hover(function () {
- if ($('body').hasClass('sidebar-mini')
- && $("body").hasClass('sidebar-collapse')
- && $(window).width() > screenWidth) {
- _this.expand();
- }
- }, function () {
- if ($('body').hasClass('sidebar-mini')
- && $('body').hasClass('sidebar-expanded-on-hover')
- && $(window).width() > screenWidth) {
- _this.collapse();
- }
- });
- },
- expand: function () {
- $("body").removeClass('sidebar-collapse').addClass('sidebar-expanded-on-hover');
- },
- collapse: function () {
- if ($('body').hasClass('sidebar-expanded-on-hover')) {
- $('body').removeClass('sidebar-expanded-on-hover').addClass('sidebar-collapse');
- }
- }
- };
- /* Tree()
- * ======
- * Converts the sidebar into a multilevel
- * tree view menu.
- *
- * @type Function
- * @Usage: $.AdminLTE.tree('.sidebar')
- */
- $.AdminLTE.tree = function (menu) {
- var _this = this;
- var animationSpeed = $.AdminLTE.options.animationSpeed;
- $(document).on('click', menu + ' li a', function (e) {
- //Get the clicked link and the next element
- var $this = $(this);
- var checkElement = $this.next();
- //Check if the next element is a menu and is visible
- if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
- //Close the menu
- checkElement.slideUp(animationSpeed, function () {
- checkElement.removeClass('menu-open');
- //Fix the layout in case the sidebar stretches over the height of the window
- //_this.layout.fix();
- });
- checkElement.parent("li").removeClass("active");
- }
- //If the menu is not visible
- else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
- //Get the parent menu
- var parent = $this.parents('ul').first();
- //Close all open menus within the parent
- var ul = parent.find('ul:visible').slideUp(animationSpeed);
- //Remove the menu-open class from the parent
- ul.removeClass('menu-open');
- //Get the parent li
- var parent_li = $this.parent("li");
- //Open the target menu and add the menu-open class
- checkElement.slideDown(animationSpeed, function () {
- //Add the class active to the parent li
- checkElement.addClass('menu-open');
- parent.find('li.active').removeClass('active');
- parent_li.addClass('active');
- //Fix the layout in case the sidebar stretches over the height of the window
- _this.layout.fix();
- });
- }
- //if this isn't a link, prevent the page from being redirected
- if (checkElement.is('.treeview-menu')) {
- e.preventDefault();
- }
- });
- };
- /* ControlSidebar
- * ==============
- * Adds functionality to the right sidebar
- *
- * @type Object
- * @usage $.AdminLTE.controlSidebar.activate(options)
- */
- $.AdminLTE.controlSidebar = {
- //instantiate the object
- activate: function () {
- //Get the object
- var _this = this;
- //Update options
- var o = $.AdminLTE.options.controlSidebarOptions;
- //Get the sidebar
- var sidebar = $(o.selector);
- //The toggle button
- var btn = $(o.toggleBtnSelector);
- //Listen to the click event
- btn.on('click', function (e) {
- e.preventDefault();
- //If the sidebar is not open
- if (!sidebar.hasClass('control-sidebar-open')
- && !$('body').hasClass('control-sidebar-open')) {
- //Open the sidebar
- _this.open(sidebar, o.slide);
- } else {
- _this.close(sidebar, o.slide);
- }
- });
- //If the body has a boxed layout, fix the sidebar bg position
- var bg = $(".control-sidebar-bg");
- _this._fix(bg);
- //If the body has a fixed layout, make the control sidebar fixed
- if ($('body').hasClass('fixed')) {
- _this._fixForFixed(sidebar);
- } else {
- //If the content height is less than the sidebar's height, force max height
- if ($('.content-wrapper, .right-side').height() < sidebar.height()) {
- _this._fixForContent(sidebar);
- }
- }
- },
- //Open the control sidebar
- open: function (sidebar, slide) {
- //Slide over content
- if (slide) {
- sidebar.addClass('control-sidebar-open');
- } else {
- //Push the content by adding the open class to the body instead
- //of the sidebar itself
- $('body').addClass('control-sidebar-open');
- }
- },
- //Close the control sidebar
- close: function (sidebar, slide) {
- if (slide) {
- sidebar.removeClass('control-sidebar-open');
- } else {
- $('body').removeClass('control-sidebar-open');
- }
- },
- _fix: function (sidebar) {
- var _this = this;
- if ($("body").hasClass('layout-boxed')) {
- sidebar.css('position', 'absolute');
- sidebar.height($(".wrapper").height());
- $(window).resize(function () {
- _this._fix(sidebar);
- });
- } else {
- sidebar.css({
- 'position': 'fixed',
- 'height': 'auto'
- });
- }
- },
- _fixForFixed: function (sidebar) {
- sidebar.css({
- 'position': 'fixed',
- 'max-height': '100%',
- 'overflow': 'auto',
- 'padding-bottom': '50px'
- });
- },
- _fixForContent: function (sidebar) {
- //$(".content-wrapper, .right-side").css('min-height', sidebar.height());
- }
- };
- /* BoxWidget
- * =========
- * BoxWidget is a plugin to handle collapsing and
- * removing boxes from the screen.
- *
- * @type Object
- * @usage $.AdminLTE.boxWidget.activate()
- * Set all your options in the main $.AdminLTE.options object
- */
- $.AdminLTE.boxWidget = {
- selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
- icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
- animationSpeed: $.AdminLTE.options.animationSpeed,
- activate: function (_box) {
- var _this = this;
- if (!_box) {
- _box = document; // activate all boxes per default
- }
- //Listen for collapse event triggers
- $(_box).on('click', _this.selectors.collapse, function (e) {
- e.preventDefault();
- _this.collapse($(this));
- });
- //Listen for remove event triggers
- $(_box).on('click', _this.selectors.remove, function (e) {
- e.preventDefault();
- _this.remove($(this));
- });
- },
- collapse: function (element) {
- var _this = this;
- //Find the box parent
- var box = element.parents(".box").first();
- //Find the body and the footer
- var box_content = box.find("> .box-body, > .box-footer, > form >.box-body, > form > .box-footer");
- if (!box.hasClass("collapsed-box")) {
- //Convert minus into plus
- element.children(":first")
- .removeClass(_this.icons.collapse)
- .addClass(_this.icons.open);
- //Hide the content
- box_content.slideUp(_this.animationSpeed, function () {
- box.addClass("collapsed-box");
- });
- } else {
- //Convert plus into minus
- element.children(":first")
- .removeClass(_this.icons.open)
- .addClass(_this.icons.collapse);
- //Show the content
- box_content.slideDown(_this.animationSpeed, function () {
- box.removeClass("collapsed-box");
- });
- }
- },
- remove: function (element) {
- //Find the box parent
- var box = element.parents(".box").first();
- box.slideUp(this.animationSpeed);
- }
- };
- }
- /* ------------------
- * - Custom Plugins -
- * ------------------
- * All custom plugins are defined below.
- */
- /*
- * BOX REFRESH BUTTON
- * ------------------
- * This is a custom plugin to use with the component BOX. It allows you to add
- * a refresh button to the box. It converts the box's state to a loading state.
- *
- * @type plugin
- * @usage $("#box-widget").boxRefresh( options );
- */
- (function ($) {
- "use strict";
- $.fn.boxRefresh = function (options) {
- // Render options
- var settings = $.extend({
- //Refresh button selector
- trigger: ".refresh-btn",
- //File source to be loaded (e.g: ajax/src.php)
- source: "",
- //Callbacks
- onLoadStart: function (box) {
- return box;
- }, //Right after the button has been clicked
- onLoadDone: function (box) {
- return box;
- } //When the source has been loaded
- }, options);
- //The overlay
- var overlay = $('<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>');
- return this.each(function () {
- //if a source is specified
- if (settings.source === "") {
- if (window.console) {
- window.console.log("Please specify a source first - boxRefresh()");
- }
- return;
- }
- //the box
- var box = $(this);
- //the button
- var rBtn = box.find(settings.trigger).first();
- //On trigger click
- rBtn.on('click', function (e) {
- e.preventDefault();
- //Add loading overlay
- start(box);
- //Perform ajax call
- box.find(".box-body").load(settings.source, function () {
- done(box);
- });
- });
- });
- function start(box) {
- //Add overlay and loading img
- box.append(overlay);
- settings.onLoadStart.call(box);
- }
- function done(box) {
- //Remove overlay and loading img
- box.find(overlay).remove();
- settings.onLoadDone.call(box);
- }
- };
- })(jQuery);
- /*
- * EXPLICIT BOX ACTIVATION
- * -----------------------
- * This is a custom plugin to use with the component BOX. It allows you to activate
- * a box inserted in the DOM after the app.js was loaded.
- *
- * @type plugin
- * @usage $("#box-widget").activateBox();
- */
- (function ($) {
- 'use strict';
- $.fn.activateBox = function () {
- $.AdminLTE.boxWidget.activate(this);
- };
- })(jQuery);
|