app.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681
  1. /*! AdminLTE app.js
  2. * ================
  3. * Main JS application file for AdminLTE v2. This file
  4. * should be included in all pages. It controls some layout
  5. * options and implements exclusive AdminLTE plugins.
  6. *
  7. * @Author Almsaeed Studio
  8. * @Support <http://www.almsaeedstudio.com>
  9. * @Email <support@almsaeedstudio.com>
  10. * @version 2.1.2
  11. * @license MIT <http://opensource.org/licenses/MIT>
  12. */
  13. //Make sure jQuery has been loaded before app.js
  14. if (typeof jQuery === "undefined") {
  15. throw new Error("AdminLTE requires jQuery");
  16. }
  17. /* AdminLTE
  18. *
  19. * @type Object
  20. * @description $.AdminLTE is the main object for the template's app.
  21. * It's used for implementing functions and options related
  22. * to the template. Keeping everything wrapped in an object
  23. * prevents conflict with other plugins and is a better
  24. * way to organize our code.
  25. */
  26. $.AdminLTE = {};
  27. /* --------------------
  28. * - AdminLTE Options -
  29. * --------------------
  30. * Modify these options to suit your implementation
  31. */
  32. $.AdminLTE.options = {
  33. //Add slimscroll to navbar menus
  34. //This requires you to load the slimscroll plugin
  35. //in every page before app.js
  36. navbarMenuSlimscroll: true,
  37. navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
  38. navbarMenuHeight: "200px", //The height of the inner menu
  39. //General animation speed for JS animated elements such as box collapse/expand and
  40. //sidebar treeview slide up/down. This options accepts an integer as milliseconds,
  41. //'fast', 'normal', or 'slow'
  42. animationSpeed: 500,
  43. //Sidebar push menu toggle button selector
  44. sidebarToggleSelector: "[data-toggle='offcanvas']",
  45. //Activate sidebar push menu
  46. sidebarPushMenu: true,
  47. //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
  48. sidebarSlimScroll: true,
  49. //Enable sidebar expand on hover effect for sidebar mini
  50. //This option is forced to true if both the fixed layout and sidebar mini
  51. //are used together
  52. sidebarExpandOnHover: false,
  53. //BoxRefresh Plugin
  54. enableBoxRefresh: true,
  55. //Bootstrap.js tooltip
  56. enableBSToppltip: true,
  57. BSTooltipSelector: "[data-toggle='tooltip']",
  58. //Enable Fast Click. Fastclick.js creates a more
  59. //native touch experience with touch devices. If you
  60. //choose to enable the plugin, make sure you load the script
  61. //before AdminLTE's app.js
  62. enableFastclick: true,
  63. //Control Sidebar Options
  64. enableControlSidebar: true,
  65. controlSidebarOptions: {
  66. //Which button should trigger the open/close event
  67. toggleBtnSelector: "[data-toggle='control-sidebar']",
  68. //The sidebar selector
  69. selector: ".control-sidebar",
  70. //Enable slide over content
  71. slide: true
  72. },
  73. //Box Widget Plugin. Enable this plugin
  74. //to allow boxes to be collapsed and/or removed
  75. enableBoxWidget: true,
  76. //Box Widget plugin options
  77. boxWidgetOptions: {
  78. boxWidgetIcons: {
  79. //Collapse icon
  80. collapse: 'fa-minus',
  81. //Open icon
  82. open: 'fa-plus',
  83. //Remove icon
  84. remove: 'fa-times'
  85. },
  86. boxWidgetSelectors: {
  87. //Remove button selector
  88. remove: '[data-widget="remove"]',
  89. //Collapse button selector
  90. collapse: '[data-widget="collapse"]'
  91. }
  92. },
  93. //Direct Chat plugin options
  94. directChat: {
  95. //Enable direct chat by default
  96. enable: true,
  97. //The button to open and close the chat contacts pane
  98. contactToggleSelector: '[data-widget="chat-pane-toggle"]'
  99. },
  100. //Define the set of colors to use globally around the website
  101. colors: {
  102. lightBlue: "#3c8dbc",
  103. red: "#f56954",
  104. green: "#00a65a",
  105. aqua: "#00c0ef",
  106. yellow: "#f39c12",
  107. blue: "#0073b7",
  108. navy: "#001F3F",
  109. teal: "#39CCCC",
  110. olive: "#3D9970",
  111. lime: "#01FF70",
  112. orange: "#FF851B",
  113. fuchsia: "#F012BE",
  114. purple: "#8E24AA",
  115. maroon: "#D81B60",
  116. black: "#222222",
  117. gray: "#d2d6de"
  118. },
  119. //The standard screen sizes that bootstrap uses.
  120. //If you change these in the variables.less file, change
  121. //them here too.
  122. screenSizes: {
  123. xs: 480,
  124. sm: 768,
  125. md: 992,
  126. lg: 1200
  127. }
  128. };
  129. /* ------------------
  130. * - Implementation -
  131. * ------------------
  132. * The next block of code implements AdminLTE's
  133. * functions and plugins as specified by the
  134. * options above.
  135. */
  136. $(function () {
  137. "use strict";
  138. //Extend options if external options exist
  139. if (typeof AdminLTEOptions !== "undefined") {
  140. $.extend(true,$.AdminLTE.options,AdminLTEOptions);
  141. }
  142. //Easy access to options
  143. var o = $.AdminLTE.options;
  144. //Set up the object
  145. _init();
  146. //Activate the layout maker
  147. $.AdminLTE.layout.activate();
  148. //Enable sidebar tree view controls
  149. $.AdminLTE.tree('.sidebar');
  150. //Enable control sidebar
  151. if (o.enableControlSidebar) {
  152. $.AdminLTE.controlSidebar.activate();
  153. }
  154. //Add slimscroll to navbar dropdown
  155. if (o.navbarMenuSlimscroll && typeof $.fn.slimscroll != 'undefined') {
  156. $(".navbar .menu").slimscroll({
  157. height: o.navbarMenuHeight,
  158. alwaysVisible: false,
  159. size: o.navbarMenuSlimscrollWidth
  160. }).css("width", "100%");
  161. }
  162. //Activate sidebar push menu
  163. if (o.sidebarPushMenu) {
  164. $.AdminLTE.pushMenu.activate(o.sidebarToggleSelector);
  165. }
  166. //Activate Bootstrap tooltip
  167. if (o.enableBSToppltip) {
  168. $('body').tooltip({
  169. selector: o.BSTooltipSelector
  170. });
  171. }
  172. //Activate box widget
  173. if (o.enableBoxWidget) {
  174. $.AdminLTE.boxWidget.activate();
  175. }
  176. //Activate fast click
  177. if (o.enableFastclick && typeof FastClick != 'undefined') {
  178. FastClick.attach(document.body);
  179. }
  180. //Activate direct chat widget
  181. if (o.directChat.enable) {
  182. $(document).on('click', o.directChat.contactToggleSelector, function () {
  183. var box = $(this).parents('.direct-chat').first();
  184. box.toggleClass('direct-chat-contacts-open');
  185. });
  186. }
  187. /*
  188. * INITIALIZE BUTTON TOGGLE
  189. * ------------------------
  190. */
  191. $('.btn-group[data-toggle="btn-toggle"]').each(function () {
  192. var group = $(this);
  193. $(this).find(".btn").on('click', function (e) {
  194. group.find(".btn.active").removeClass("active");
  195. $(this).addClass("active");
  196. e.preventDefault();
  197. });
  198. });
  199. });
  200. /* ----------------------------------
  201. * - Initialize the AdminLTE Object -
  202. * ----------------------------------
  203. * All AdminLTE functions are implemented below.
  204. */
  205. function _init() {
  206. 'use strict';
  207. /* Layout
  208. * ======
  209. * Fixes the layout height in case min-height fails.
  210. *
  211. * @type Object
  212. * @usage $.AdminLTE.layout.activate()
  213. * $.AdminLTE.layout.fix()
  214. * $.AdminLTE.layout.fixSidebar()
  215. */
  216. $.AdminLTE.layout = {
  217. activate: function () {
  218. var _this = this;
  219. _this.fix();
  220. _this.fixSidebar();
  221. $(window, ".wrapper").resize(function () {
  222. _this.fix();
  223. _this.fixSidebar();
  224. });
  225. },
  226. fix: function () {
  227. //Get window height and the wrapper height
  228. var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight();
  229. var window_height = $(window).height();
  230. var sidebar_height = $(".sidebar").height();
  231. //Set the min-height of the content and sidebar based on the
  232. //the height of the document.
  233. if ($("body").hasClass("fixed")) {
  234. $(".content-wrapper, .right-side").css('min-height', window_height - $('.main-footer').outerHeight());
  235. } else {
  236. var postSetWidth;
  237. if (window_height <= sidebar_height) {
  238. $(".content-wrapper, .right-side").css('min-height', window_height - neg);
  239. postSetWidth = window_height - neg;
  240. } else {
  241. //$(".content-wrapper, .right-side").css('min-height', sidebar_height);
  242. postSetWidth = sidebar_height;
  243. }
  244. //Fix for the control sidebar height
  245. var controlSidebar = $($.AdminLTE.options.controlSidebarOptions.selector);
  246. if (typeof controlSidebar !== "undefined") {
  247. if (controlSidebar.height() > postSetWidth)
  248. $(".content-wrapper, .right-side").css('min-height', controlSidebar.height());
  249. }
  250. }
  251. },
  252. fixSidebar: function () {
  253. //Make sure the body tag has the .fixed class
  254. if (!$("body").hasClass("fixed")) {
  255. if (typeof $.fn.slimScroll != 'undefined') {
  256. $(".sidebar").slimScroll({destroy: true}).height("auto");
  257. }
  258. return;
  259. } else if (typeof $.fn.slimScroll == 'undefined' && window.console) {
  260. window.console.error("Error: the fixed layout requires the slimscroll plugin!");
  261. }
  262. //Enable slimscroll for fixed layout
  263. if ($.AdminLTE.options.sidebarSlimScroll) {
  264. if (typeof $.fn.slimScroll != 'undefined') {
  265. //Destroy if it exists
  266. $(".sidebar").slimScroll({destroy: true}).height("auto");
  267. //Add slimscroll
  268. $(".sidebar").slimscroll({
  269. height: ($(window).height() - $(".main-header").height()) + "px",
  270. color: "rgba(0,0,0,0.2)",
  271. size: "3px"
  272. });
  273. }
  274. }
  275. }
  276. };
  277. /* PushMenu()
  278. * ==========
  279. * Adds the push menu functionality to the sidebar.
  280. *
  281. * @type Function
  282. * @usage: $.AdminLTE.pushMenu("[data-toggle='offcanvas']")
  283. */
  284. $.AdminLTE.pushMenu = {
  285. activate: function (toggleBtn) {
  286. //Get the screen sizes
  287. var screenSizes = $.AdminLTE.options.screenSizes;
  288. //Enable sidebar toggle
  289. $(toggleBtn).on('click', function (e) {
  290. e.preventDefault();
  291. //Enable sidebar push menu
  292. if ($(window).width() > (screenSizes.sm - 1)) {
  293. if ($("body").hasClass('sidebar-collapse')) {
  294. $("body").removeClass('sidebar-collapse').trigger('expanded.pushMenu');
  295. } else {
  296. $("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu');
  297. }
  298. }
  299. //Handle sidebar push menu for small screens
  300. else {
  301. if ($("body").hasClass('sidebar-open')) {
  302. $("body").removeClass('sidebar-open').removeClass('sidebar-collapse').trigger('collapsed.pushMenu');
  303. } else {
  304. $("body").addClass('sidebar-open').trigger('expanded.pushMenu');
  305. }
  306. }
  307. });
  308. $(".content-wrapper").click(function () {
  309. //Enable hide menu when clicking on the content-wrapper on small screens
  310. if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
  311. $("body").removeClass('sidebar-open');
  312. }
  313. });
  314. //Enable expand on hover for sidebar mini
  315. if ($.AdminLTE.options.sidebarExpandOnHover || ($('body').hasClass('fixed') && $('body').hasClass('sidebar-mini'))) {
  316. this.expandOnHover();
  317. }
  318. },
  319. expandOnHover: function () {
  320. var _this = this;
  321. var screenWidth = $.AdminLTE.options.screenSizes.sm - 1;
  322. //Expand sidebar on hover
  323. $('.main-sidebar').hover(function () {
  324. if ($('body').hasClass('sidebar-mini')
  325. && $("body").hasClass('sidebar-collapse')
  326. && $(window).width() > screenWidth) {
  327. _this.expand();
  328. }
  329. }, function () {
  330. if ($('body').hasClass('sidebar-mini')
  331. && $('body').hasClass('sidebar-expanded-on-hover')
  332. && $(window).width() > screenWidth) {
  333. _this.collapse();
  334. }
  335. });
  336. },
  337. expand: function () {
  338. $("body").removeClass('sidebar-collapse').addClass('sidebar-expanded-on-hover');
  339. },
  340. collapse: function () {
  341. if ($('body').hasClass('sidebar-expanded-on-hover')) {
  342. $('body').removeClass('sidebar-expanded-on-hover').addClass('sidebar-collapse');
  343. }
  344. }
  345. };
  346. /* Tree()
  347. * ======
  348. * Converts the sidebar into a multilevel
  349. * tree view menu.
  350. *
  351. * @type Function
  352. * @Usage: $.AdminLTE.tree('.sidebar')
  353. */
  354. $.AdminLTE.tree = function (menu) {
  355. var _this = this;
  356. var animationSpeed = $.AdminLTE.options.animationSpeed;
  357. $(document).on('click', menu + ' li a', function (e) {
  358. //Get the clicked link and the next element
  359. var $this = $(this);
  360. var checkElement = $this.next();
  361. //Check if the next element is a menu and is visible
  362. if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
  363. //Close the menu
  364. checkElement.slideUp(animationSpeed, function () {
  365. checkElement.removeClass('menu-open');
  366. //Fix the layout in case the sidebar stretches over the height of the window
  367. //_this.layout.fix();
  368. });
  369. checkElement.parent("li").removeClass("active");
  370. }
  371. //If the menu is not visible
  372. else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
  373. //Get the parent menu
  374. var parent = $this.parents('ul').first();
  375. //Close all open menus within the parent
  376. var ul = parent.find('ul:visible').slideUp(animationSpeed);
  377. //Remove the menu-open class from the parent
  378. ul.removeClass('menu-open');
  379. //Get the parent li
  380. var parent_li = $this.parent("li");
  381. //Open the target menu and add the menu-open class
  382. checkElement.slideDown(animationSpeed, function () {
  383. //Add the class active to the parent li
  384. checkElement.addClass('menu-open');
  385. parent.find('li.active').removeClass('active');
  386. parent_li.addClass('active');
  387. //Fix the layout in case the sidebar stretches over the height of the window
  388. _this.layout.fix();
  389. });
  390. }
  391. //if this isn't a link, prevent the page from being redirected
  392. if (checkElement.is('.treeview-menu')) {
  393. e.preventDefault();
  394. }
  395. });
  396. };
  397. /* ControlSidebar
  398. * ==============
  399. * Adds functionality to the right sidebar
  400. *
  401. * @type Object
  402. * @usage $.AdminLTE.controlSidebar.activate(options)
  403. */
  404. $.AdminLTE.controlSidebar = {
  405. //instantiate the object
  406. activate: function () {
  407. //Get the object
  408. var _this = this;
  409. //Update options
  410. var o = $.AdminLTE.options.controlSidebarOptions;
  411. //Get the sidebar
  412. var sidebar = $(o.selector);
  413. //The toggle button
  414. var btn = $(o.toggleBtnSelector);
  415. //Listen to the click event
  416. btn.on('click', function (e) {
  417. e.preventDefault();
  418. //If the sidebar is not open
  419. if (!sidebar.hasClass('control-sidebar-open')
  420. && !$('body').hasClass('control-sidebar-open')) {
  421. //Open the sidebar
  422. _this.open(sidebar, o.slide);
  423. } else {
  424. _this.close(sidebar, o.slide);
  425. }
  426. });
  427. //If the body has a boxed layout, fix the sidebar bg position
  428. var bg = $(".control-sidebar-bg");
  429. _this._fix(bg);
  430. //If the body has a fixed layout, make the control sidebar fixed
  431. if ($('body').hasClass('fixed')) {
  432. _this._fixForFixed(sidebar);
  433. } else {
  434. //If the content height is less than the sidebar's height, force max height
  435. if ($('.content-wrapper, .right-side').height() < sidebar.height()) {
  436. _this._fixForContent(sidebar);
  437. }
  438. }
  439. },
  440. //Open the control sidebar
  441. open: function (sidebar, slide) {
  442. //Slide over content
  443. if (slide) {
  444. sidebar.addClass('control-sidebar-open');
  445. } else {
  446. //Push the content by adding the open class to the body instead
  447. //of the sidebar itself
  448. $('body').addClass('control-sidebar-open');
  449. }
  450. },
  451. //Close the control sidebar
  452. close: function (sidebar, slide) {
  453. if (slide) {
  454. sidebar.removeClass('control-sidebar-open');
  455. } else {
  456. $('body').removeClass('control-sidebar-open');
  457. }
  458. },
  459. _fix: function (sidebar) {
  460. var _this = this;
  461. if ($("body").hasClass('layout-boxed')) {
  462. sidebar.css('position', 'absolute');
  463. sidebar.height($(".wrapper").height());
  464. $(window).resize(function () {
  465. _this._fix(sidebar);
  466. });
  467. } else {
  468. sidebar.css({
  469. 'position': 'fixed',
  470. 'height': 'auto'
  471. });
  472. }
  473. },
  474. _fixForFixed: function (sidebar) {
  475. sidebar.css({
  476. 'position': 'fixed',
  477. 'max-height': '100%',
  478. 'overflow': 'auto',
  479. 'padding-bottom': '50px'
  480. });
  481. },
  482. _fixForContent: function (sidebar) {
  483. //$(".content-wrapper, .right-side").css('min-height', sidebar.height());
  484. }
  485. };
  486. /* BoxWidget
  487. * =========
  488. * BoxWidget is a plugin to handle collapsing and
  489. * removing boxes from the screen.
  490. *
  491. * @type Object
  492. * @usage $.AdminLTE.boxWidget.activate()
  493. * Set all your options in the main $.AdminLTE.options object
  494. */
  495. $.AdminLTE.boxWidget = {
  496. selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
  497. icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
  498. animationSpeed: $.AdminLTE.options.animationSpeed,
  499. activate: function (_box) {
  500. var _this = this;
  501. if (!_box) {
  502. _box = document; // activate all boxes per default
  503. }
  504. //Listen for collapse event triggers
  505. $(_box).on('click', _this.selectors.collapse, function (e) {
  506. e.preventDefault();
  507. _this.collapse($(this));
  508. });
  509. //Listen for remove event triggers
  510. $(_box).on('click', _this.selectors.remove, function (e) {
  511. e.preventDefault();
  512. _this.remove($(this));
  513. });
  514. },
  515. collapse: function (element) {
  516. var _this = this;
  517. //Find the box parent
  518. var box = element.parents(".box").first();
  519. //Find the body and the footer
  520. var box_content = box.find("> .box-body, > .box-footer, > form >.box-body, > form > .box-footer");
  521. if (!box.hasClass("collapsed-box")) {
  522. //Convert minus into plus
  523. element.children(":first")
  524. .removeClass(_this.icons.collapse)
  525. .addClass(_this.icons.open);
  526. //Hide the content
  527. box_content.slideUp(_this.animationSpeed, function () {
  528. box.addClass("collapsed-box");
  529. });
  530. } else {
  531. //Convert plus into minus
  532. element.children(":first")
  533. .removeClass(_this.icons.open)
  534. .addClass(_this.icons.collapse);
  535. //Show the content
  536. box_content.slideDown(_this.animationSpeed, function () {
  537. box.removeClass("collapsed-box");
  538. });
  539. }
  540. },
  541. remove: function (element) {
  542. //Find the box parent
  543. var box = element.parents(".box").first();
  544. box.slideUp(this.animationSpeed);
  545. }
  546. };
  547. }
  548. /* ------------------
  549. * - Custom Plugins -
  550. * ------------------
  551. * All custom plugins are defined below.
  552. */
  553. /*
  554. * BOX REFRESH BUTTON
  555. * ------------------
  556. * This is a custom plugin to use with the component BOX. It allows you to add
  557. * a refresh button to the box. It converts the box's state to a loading state.
  558. *
  559. * @type plugin
  560. * @usage $("#box-widget").boxRefresh( options );
  561. */
  562. (function ($) {
  563. "use strict";
  564. $.fn.boxRefresh = function (options) {
  565. // Render options
  566. var settings = $.extend({
  567. //Refresh button selector
  568. trigger: ".refresh-btn",
  569. //File source to be loaded (e.g: ajax/src.php)
  570. source: "",
  571. //Callbacks
  572. onLoadStart: function (box) {
  573. return box;
  574. }, //Right after the button has been clicked
  575. onLoadDone: function (box) {
  576. return box;
  577. } //When the source has been loaded
  578. }, options);
  579. //The overlay
  580. var overlay = $('<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>');
  581. return this.each(function () {
  582. //if a source is specified
  583. if (settings.source === "") {
  584. if (window.console) {
  585. window.console.log("Please specify a source first - boxRefresh()");
  586. }
  587. return;
  588. }
  589. //the box
  590. var box = $(this);
  591. //the button
  592. var rBtn = box.find(settings.trigger).first();
  593. //On trigger click
  594. rBtn.on('click', function (e) {
  595. e.preventDefault();
  596. //Add loading overlay
  597. start(box);
  598. //Perform ajax call
  599. box.find(".box-body").load(settings.source, function () {
  600. done(box);
  601. });
  602. });
  603. });
  604. function start(box) {
  605. //Add overlay and loading img
  606. box.append(overlay);
  607. settings.onLoadStart.call(box);
  608. }
  609. function done(box) {
  610. //Remove overlay and loading img
  611. box.find(overlay).remove();
  612. settings.onLoadDone.call(box);
  613. }
  614. };
  615. })(jQuery);
  616. /*
  617. * EXPLICIT BOX ACTIVATION
  618. * -----------------------
  619. * This is a custom plugin to use with the component BOX. It allows you to activate
  620. * a box inserted in the DOM after the app.js was loaded.
  621. *
  622. * @type plugin
  623. * @usage $("#box-widget").activateBox();
  624. */
  625. (function ($) {
  626. 'use strict';
  627. $.fn.activateBox = function () {
  628. $.AdminLTE.boxWidget.activate(this);
  629. };
  630. })(jQuery);