metronic.js 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868
  1. /**
  2. Core script to handle the entire theme and core functions
  3. **/
  4. var Metronic = function() {
  5. // IE mode
  6. var isRTL = false;
  7. var isIE8 = false;
  8. var isIE9 = false;
  9. var isIE10 = false;
  10. var resizeHandlers = [];
  11. var assetsPath = '../../assets/';
  12. var globalImgPath = 'global/img/';
  13. var globalPluginsPath = 'global/plugins/';
  14. var globalCssPath = 'global/css/';
  15. // theme layout color set
  16. var brandColors = {
  17. 'blue': '#89C4F4',
  18. 'red': '#F3565D',
  19. 'green': '#1bbc9b',
  20. 'purple': '#9b59b6',
  21. 'grey': '#95a5a6',
  22. 'yellow': '#F8CB00'
  23. };
  24. // initializes main settings
  25. var handleInit = function() {
  26. if ($('body').css('direction') === 'rtl') {
  27. isRTL = true;
  28. }
  29. isIE8 = !!navigator.userAgent.match(/MSIE 8.0/);
  30. isIE9 = !!navigator.userAgent.match(/MSIE 9.0/);
  31. isIE10 = !!navigator.userAgent.match(/MSIE 10.0/);
  32. if (isIE10) {
  33. $('html').addClass('ie10'); // detect IE10 version
  34. }
  35. if (isIE10 || isIE9 || isIE8) {
  36. $('html').addClass('ie'); // detect IE10 version
  37. }
  38. };
  39. // runs callback functions set by Metronic.addResponsiveHandler().
  40. var _runResizeHandlers = function() {
  41. // reinitialize other subscribed elements
  42. for (var i = 0; i < resizeHandlers.length; i++) {
  43. var each = resizeHandlers[i];
  44. each.call();
  45. }
  46. };
  47. // handle the layout reinitialization on window resize
  48. var handleOnResize = function() {
  49. var resize;
  50. if (isIE8) {
  51. var currheight;
  52. $(window).resize(function() {
  53. if (currheight == document.documentElement.clientHeight) {
  54. return; //quite event since only body resized not window.
  55. }
  56. if (resize) {
  57. clearTimeout(resize);
  58. }
  59. resize = setTimeout(function() {
  60. _runResizeHandlers();
  61. }, 50); // wait 50ms until window resize finishes.
  62. currheight = document.documentElement.clientHeight; // store last body client height
  63. });
  64. } else {
  65. $(window).resize(function() {
  66. if (resize) {
  67. clearTimeout(resize);
  68. }
  69. resize = setTimeout(function() {
  70. _runResizeHandlers();
  71. }, 50); // wait 50ms until window resize finishes.
  72. });
  73. }
  74. };
  75. // Handles portlet tools & actions
  76. var handlePortletTools = function() {
  77. // handle portlet remove
  78. $('body').on('click', '.portlet > .portlet-title > .tools > a.remove', function(e) {
  79. e.preventDefault();
  80. var portlet = $(this).closest(".portlet");
  81. if ($('body').hasClass('page-portlet-fullscreen')) {
  82. $('body').removeClass('page-portlet-fullscreen');
  83. }
  84. portlet.find('.portlet-title .fullscreen').tooltip('destroy');
  85. portlet.find('.portlet-title > .tools > .reload').tooltip('destroy');
  86. portlet.find('.portlet-title > .tools > .remove').tooltip('destroy');
  87. portlet.find('.portlet-title > .tools > .config').tooltip('destroy');
  88. portlet.find('.portlet-title > .tools > .collapse, .portlet > .portlet-title > .tools > .expand').tooltip('destroy');
  89. portlet.remove();
  90. });
  91. // handle portlet fullscreen
  92. $('body').on('click', '.portlet > .portlet-title .fullscreen', function(e) {
  93. e.preventDefault();
  94. var portlet = $(this).closest(".portlet");
  95. if (portlet.hasClass('portlet-fullscreen')) {
  96. $(this).removeClass('on');
  97. portlet.removeClass('portlet-fullscreen');
  98. $('body').removeClass('page-portlet-fullscreen');
  99. portlet.children('.portlet-body').css('height', 'auto');
  100. } else {
  101. var height = Metronic.getViewPort().height -
  102. portlet.children('.portlet-title').outerHeight() -
  103. parseInt(portlet.children('.portlet-body').css('padding-top')) -
  104. parseInt(portlet.children('.portlet-body').css('padding-bottom'));
  105. $(this).addClass('on');
  106. portlet.addClass('portlet-fullscreen');
  107. $('body').addClass('page-portlet-fullscreen');
  108. portlet.children('.portlet-body').css('height', height);
  109. }
  110. });
  111. $('body').on('click', '.portlet > .portlet-title > .tools > a.reload', function(e) {
  112. e.preventDefault();
  113. var el = $(this).closest(".portlet").children(".portlet-body");
  114. var url = $(this).attr("data-url");
  115. var error = $(this).attr("data-error-display");
  116. if (url) {
  117. Metronic.blockUI({
  118. target: el,
  119. animate: true,
  120. overlayColor: 'none'
  121. });
  122. $.ajax({
  123. type: "GET",
  124. cache: false,
  125. url: url,
  126. dataType: "html",
  127. success: function(res) {
  128. Metronic.unblockUI(el);
  129. el.html(res);
  130. },
  131. error: function(xhr, ajaxOptions, thrownError) {
  132. Metronic.unblockUI(el);
  133. var msg = 'Error on reloading the content. Please check your connection and try again.';
  134. if (error == "toastr" && toastr) {
  135. toastr.error(msg);
  136. } else if (error == "notific8" && $.notific8) {
  137. $.notific8('zindex', 11500);
  138. $.notific8(msg, {
  139. theme: 'ruby',
  140. life: 3000
  141. });
  142. } else {
  143. alert(msg);
  144. }
  145. }
  146. });
  147. } else {
  148. // for demo purpose
  149. Metronic.blockUI({
  150. target: el,
  151. animate: true,
  152. overlayColor: 'none'
  153. });
  154. window.setTimeout(function() {
  155. Metronic.unblockUI(el);
  156. }, 1000);
  157. }
  158. });
  159. // load ajax data on page init
  160. $('.portlet .portlet-title a.reload[data-load="true"]').click();
  161. $('body').on('click', '.portlet > .portlet-title > .tools > .collapse, .portlet .portlet-title > .tools > .expand', function(e) {
  162. e.preventDefault();
  163. var el = $(this).closest(".portlet").children(".portlet-body");
  164. if ($(this).hasClass("collapse")) {
  165. $(this).removeClass("collapse").addClass("expand");
  166. el.slideUp(200);
  167. } else {
  168. $(this).removeClass("expand").addClass("collapse");
  169. el.slideDown(200);
  170. }
  171. });
  172. };
  173. // Handles custom checkboxes & radios using jQuery Uniform plugin
  174. var handleUniform = function() {
  175. if (!$().uniform) {
  176. return;
  177. }
  178. var test = $("input[type=checkbox]:not(.toggle, .make-switch, .icheck), input[type=radio]:not(.toggle, .star, .make-switch, .icheck)");
  179. if (test.size() > 0) {
  180. test.each(function() {
  181. if ($(this).parents(".checker").size() === 0) {
  182. $(this).show();
  183. $(this).uniform();
  184. }
  185. });
  186. }
  187. };
  188. // Handles custom checkboxes & radios using jQuery iCheck plugin
  189. var handleiCheck = function() {
  190. if (!$().iCheck) {
  191. return;
  192. }
  193. $('.icheck').each(function() {
  194. var checkboxClass = $(this).attr('data-checkbox') ? $(this).attr('data-checkbox') : 'icheckbox_minimal-grey';
  195. var radioClass = $(this).attr('data-radio') ? $(this).attr('data-radio') : 'iradio_minimal-grey';
  196. if (checkboxClass.indexOf('_line') > -1 || radioClass.indexOf('_line') > -1) {
  197. $(this).iCheck({
  198. checkboxClass: checkboxClass,
  199. radioClass: radioClass,
  200. insert: '<div class="icheck_line-icon"></div>' + $(this).attr("data-label")
  201. });
  202. } else {
  203. $(this).iCheck({
  204. checkboxClass: checkboxClass,
  205. radioClass: radioClass
  206. });
  207. }
  208. });
  209. };
  210. // Handles Bootstrap switches
  211. var handleBootstrapSwitch = function() {
  212. if (!$().bootstrapSwitch) {
  213. return;
  214. }
  215. $('.make-switch').bootstrapSwitch();
  216. };
  217. // Handles Bootstrap Accordions.
  218. var handleAccordions = function() {
  219. $('body').on('shown.bs.collapse', '.accordion.scrollable', function(e) {
  220. Metronic.scrollTo($(e.target));
  221. });
  222. };
  223. // Handles Bootstrap Tabs.
  224. var handleTabs = function() {
  225. //activate tab if tab id provided in the URL
  226. if (location.hash) {
  227. var tabid = location.hash.substr(1);
  228. $('a[href="#' + tabid + '"]').parents('.tab-pane:hidden').each(function() {
  229. var tabid = $(this).attr("id");
  230. $('a[href="#' + tabid + '"]').click();
  231. });
  232. $('a[href="#' + tabid + '"]').click();
  233. }
  234. };
  235. // Handles Bootstrap Modals.
  236. var handleModals = function() {
  237. // fix stackable modal issue: when 2 or more modals opened, closing one of modal will remove .modal-open class.
  238. $('body').on('hide.bs.modal', function() {
  239. if ($('.modal:visible').size() > 1 && $('html').hasClass('modal-open') === false) {
  240. $('html').addClass('modal-open');
  241. } else if ($('.modal:visible').size() <= 1) {
  242. $('html').removeClass('modal-open');
  243. }
  244. });
  245. // fix page scrollbars issue
  246. $('body').on('show.bs.modal', '.modal', function() {
  247. if ($(this).hasClass("modal-scroll")) {
  248. $('body').addClass("modal-open-noscroll");
  249. }
  250. });
  251. // fix page scrollbars issue
  252. $('body').on('hide.bs.modal', '.modal', function() {
  253. $('body').removeClass("modal-open-noscroll");
  254. });
  255. // remove ajax content and remove cache on modal closed
  256. $('body').on('hidden.bs.modal', '.modal:not(.modal-cached)', function () {
  257. $(this).removeData('bs.modal');
  258. });
  259. };
  260. // Handles Bootstrap Tooltips.
  261. var handleTooltips = function() {
  262. // global tooltips
  263. $('.tooltips').tooltip();
  264. // portlet tooltips
  265. $('.portlet > .portlet-title .fullscreen').tooltip({
  266. container: 'body',
  267. title: 'Fullscreen'
  268. });
  269. $('.portlet > .portlet-title > .tools > .reload').tooltip({
  270. container: 'body',
  271. title: 'Reload'
  272. });
  273. $('.portlet > .portlet-title > .tools > .remove').tooltip({
  274. container: 'body',
  275. title: 'Remove'
  276. });
  277. $('.portlet > .portlet-title > .tools > .config').tooltip({
  278. container: 'body',
  279. title: 'Settings'
  280. });
  281. $('.portlet > .portlet-title > .tools > .collapse, .portlet > .portlet-title > .tools > .expand').tooltip({
  282. container: 'body',
  283. title: 'Collapse/Expand'
  284. });
  285. };
  286. // Handles Bootstrap Dropdowns
  287. var handleDropdowns = function() {
  288. /*
  289. Hold dropdown on click
  290. */
  291. $('body').on('click', '.dropdown-menu.hold-on-click', function(e) {
  292. e.stopPropagation();
  293. });
  294. };
  295. var handleAlerts = function() {
  296. $('body').on('click', '[data-close="alert"]', function(e) {
  297. $(this).parent('.alert').hide();
  298. $(this).closest('.note').hide();
  299. e.preventDefault();
  300. });
  301. $('body').on('click', '[data-close="note"]', function(e) {
  302. $(this).closest('.note').hide();
  303. e.preventDefault();
  304. });
  305. $('body').on('click', '[data-remove="note"]', function(e) {
  306. $(this).closest('.note').remove();
  307. e.preventDefault();
  308. });
  309. };
  310. // Handle Hower Dropdowns
  311. var handleDropdownHover = function() {
  312. $('[data-hover="dropdown"]').not('.hover-initialized').each(function() {
  313. $(this).dropdownHover();
  314. $(this).addClass('hover-initialized');
  315. });
  316. };
  317. // Handles Bootstrap Popovers
  318. // last popep popover
  319. var lastPopedPopover;
  320. var handlePopovers = function() {
  321. $('.popovers').popover();
  322. // close last displayed popover
  323. $(document).on('click.bs.popover.data-api', function(e) {
  324. if (lastPopedPopover) {
  325. lastPopedPopover.popover('hide');
  326. }
  327. });
  328. };
  329. // Handles scrollable contents using jQuery SlimScroll plugin.
  330. var handleScrollers = function() {
  331. Metronic.initSlimScroll('.scroller');
  332. };
  333. // Handles Image Preview using jQuery Fancybox plugin
  334. var handleFancybox = function() {
  335. if (!jQuery.fancybox) {
  336. return;
  337. }
  338. if ($(".fancybox-button").size() > 0) {
  339. $(".fancybox-button").fancybox({
  340. groupAttr: 'data-rel',
  341. prevEffect: 'none',
  342. nextEffect: 'none',
  343. closeBtn: true,
  344. helpers: {
  345. title: {
  346. type: 'inside'
  347. }
  348. }
  349. });
  350. }
  351. };
  352. // Fix input placeholder issue for IE8 and IE9
  353. var handleFixInputPlaceholderForIE = function() {
  354. //fix html5 placeholder attribute for ie7 & ie8
  355. if (isIE8 || isIE9) { // ie8 & ie9
  356. // this is html5 placeholder fix for inputs, inputs with placeholder-no-fix class will be skipped(e.g: we need this for password fields)
  357. $('input[placeholder]:not(.placeholder-no-fix), textarea[placeholder]:not(.placeholder-no-fix)').each(function() {
  358. var input = $(this);
  359. if (input.val() === '' && input.attr("placeholder") !== '') {
  360. input.addClass("placeholder").val(input.attr('placeholder'));
  361. }
  362. input.focus(function() {
  363. if (input.val() == input.attr('placeholder')) {
  364. input.val('');
  365. }
  366. });
  367. input.blur(function() {
  368. if (input.val() === '' || input.val() == input.attr('placeholder')) {
  369. input.val(input.attr('placeholder'));
  370. }
  371. });
  372. });
  373. }
  374. };
  375. // Handle Select2 Dropdowns
  376. var handleSelect2 = function() {
  377. if ($().select2) {
  378. $('.select2me').select2({
  379. placeholder: "Select",
  380. allowClear: true
  381. });
  382. }
  383. };
  384. //* END:CORE HANDLERS *//
  385. return {
  386. //main function to initiate the theme
  387. init: function() {
  388. //IMPORTANT!!!: Do not modify the core handlers call order.
  389. //Core handlers
  390. handleInit(); // initialize core variables
  391. handleOnResize(); // set and handle responsive
  392. //UI Component handlers
  393. handleUniform(); // hanfle custom radio & checkboxes
  394. handleiCheck(); // handles custom icheck radio and checkboxes
  395. handleBootstrapSwitch(); // handle bootstrap switch plugin
  396. handleScrollers(); // handles slim scrolling contents
  397. handleFancybox(); // handle fancy box
  398. handleSelect2(); // handle custom Select2 dropdowns
  399. handlePortletTools(); // handles portlet action bar functionality(refresh, configure, toggle, remove)
  400. handleAlerts(); //handle closabled alerts
  401. handleDropdowns(); // handle dropdowns
  402. handleTabs(); // handle tabs
  403. handleTooltips(); // handle bootstrap tooltips
  404. handlePopovers(); // handles bootstrap popovers
  405. handleAccordions(); //handles accordions
  406. handleModals(); // handle modals
  407. // Hacks
  408. handleFixInputPlaceholderForIE(); //IE8 & IE9 input placeholder issue fix
  409. },
  410. //main function to initiate core javascript after ajax complete
  411. initAjax: function() {
  412. handleUniform(); // handles custom radio & checkboxes
  413. handleiCheck(); // handles custom icheck radio and checkboxes
  414. handleBootstrapSwitch(); // handle bootstrap switch plugin
  415. handleDropdownHover(); // handles dropdown hover
  416. handleScrollers(); // handles slim scrolling contents
  417. handleSelect2(); // handle custom Select2 dropdowns
  418. handleFancybox(); // handle fancy box
  419. handleDropdowns(); // handle dropdowns
  420. handleTooltips(); // handle bootstrap tooltips
  421. handlePopovers(); // handles bootstrap popovers
  422. handleAccordions(); //handles accordions
  423. },
  424. //init main components
  425. initComponents: function() {
  426. this.initAjax();
  427. },
  428. //public function to remember last opened popover that needs to be closed on click
  429. setLastPopedPopover: function(el) {
  430. lastPopedPopover = el;
  431. },
  432. //public function to add callback a function which will be called on window resize
  433. addResizeHandler: function(func) {
  434. resizeHandlers.push(func);
  435. },
  436. //public functon to call _runresizeHandlers
  437. runResizeHandlers: function() {
  438. _runResizeHandlers();
  439. },
  440. // wrMetronicer function to scroll(focus) to an element
  441. scrollTo: function(el, offeset) {
  442. var pos = (el && el.size() > 0) ? el.offset().top : 0;
  443. if (el) {
  444. if ($('body').hasClass('page-header-fixed')) {
  445. pos = pos - $('.page-header').height();
  446. }
  447. pos = pos + (offeset ? offeset : -1 * el.height());
  448. }
  449. $('html,body').animate({
  450. scrollTop: pos
  451. }, 'slow');
  452. },
  453. initSlimScroll: function(el) {
  454. $(el).each(function() {
  455. if ($(this).attr("data-initialized")) {
  456. return; // exit
  457. }
  458. var height;
  459. if ($(this).attr("data-height")) {
  460. height = $(this).attr("data-height");
  461. } else {
  462. height = $(this).css('height');
  463. }
  464. $(this).slimScroll({
  465. allowPageScroll: true, // allow page scroll when the element scroll is ended
  466. size: '7px',
  467. color: ($(this).attr("data-handle-color") ? $(this).attr("data-handle-color") : '#bbb'),
  468. wrapperClass: ($(this).attr("data-wrapper-class") ? $(this).attr("data-wrapper-class") : 'slimScrollDiv'),
  469. railColor: ($(this).attr("data-rail-color") ? $(this).attr("data-rail-color") : '#eaeaea'),
  470. position: isRTL ? 'left' : 'right',
  471. height: height,
  472. alwaysVisible: ($(this).attr("data-always-visible") == "1" ? true : false),
  473. railVisible: ($(this).attr("data-rail-visible") == "1" ? true : false),
  474. disableFadeOut: true
  475. });
  476. $(this).attr("data-initialized", "1");
  477. });
  478. },
  479. destroySlimScroll: function(el) {
  480. $(el).each(function() {
  481. if ($(this).attr("data-initialized") === "1") { // destroy existing instance before updating the height
  482. $(this).removeAttr("data-initialized");
  483. $(this).removeAttr("style");
  484. var attrList = {};
  485. // store the custom attribures so later we will reassign.
  486. if ($(this).attr("data-handle-color")) {
  487. attrList["data-handle-color"] = $(this).attr("data-handle-color");
  488. }
  489. if ($(this).attr("data-wrapper-class")) {
  490. attrList["data-wrapper-class"] = $(this).attr("data-wrapper-class");
  491. }
  492. if ($(this).attr("data-rail-color")) {
  493. attrList["data-rail-color"] = $(this).attr("data-rail-color");
  494. }
  495. if ($(this).attr("data-always-visible")) {
  496. attrList["data-always-visible"] = $(this).attr("data-always-visible");
  497. }
  498. if ($(this).attr("data-rail-visible")) {
  499. attrList["data-rail-visible"] = $(this).attr("data-rail-visible");
  500. }
  501. $(this).slimScroll({
  502. wrapperClass: ($(this).attr("data-wrapper-class") ? $(this).attr("data-wrapper-class") : 'slimScrollDiv'),
  503. destroy: true
  504. });
  505. var the = $(this);
  506. // reassign custom attributes
  507. $.each(attrList, function(key, value) {
  508. the.attr(key, value);
  509. });
  510. }
  511. });
  512. },
  513. // function to scroll to the top
  514. scrollTop: function() {
  515. Metronic.scrollTo();
  516. },
  517. // wrMetronicer function to block element(indicate loading)
  518. blockUI: function(options) {
  519. options = $.extend(true, {}, options);
  520. var html = '';
  521. if (options.animate) {
  522. html = '<div class="loading-message ' + (options.boxed ? 'loading-message-boxed' : '') + '">' + '<div class="block-spinner-bar"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>' + '</div>';
  523. } else if (options.iconOnly) {
  524. html = '<div class="loading-message ' + (options.boxed ? 'loading-message-boxed' : '') + '"><img src="' + this.getGlobalImgPath() + 'loading-spinner-grey.gif" align=""></div>';
  525. } else if (options.textOnly) {
  526. html = '<div class="loading-message ' + (options.boxed ? 'loading-message-boxed' : '') + '"><span>&nbsp;&nbsp;' + (options.message ? options.message : 'LOADING...') + '</span></div>';
  527. } else {
  528. html = '<div class="loading-message ' + (options.boxed ? 'loading-message-boxed' : '') + '"><img src="' + this.getGlobalImgPath() + 'loading-spinner-grey.gif" align=""><span>&nbsp;&nbsp;' + (options.message ? options.message : 'LOADING...') + '</span></div>';
  529. }
  530. if (options.target) { // element blocking
  531. var el = $(options.target);
  532. if (el.height() <= ($(window).height())) {
  533. options.cenrerY = true;
  534. }
  535. el.block({
  536. message: html,
  537. baseZ: options.zIndex ? options.zIndex : 1000,
  538. centerY: options.cenrerY !== undefined ? options.cenrerY : false,
  539. css: {
  540. top: '10%',
  541. border: '0',
  542. padding: '0',
  543. backgroundColor: 'none'
  544. },
  545. overlayCSS: {
  546. backgroundColor: options.overlayColor ? options.overlayColor : '#555',
  547. opacity: options.boxed ? 0.05 : 0.1,
  548. cursor: 'wait'
  549. }
  550. });
  551. } else { // page blocking
  552. $.blockUI({
  553. message: html,
  554. baseZ: options.zIndex ? options.zIndex : 1000,
  555. css: {
  556. border: '0',
  557. padding: '0',
  558. backgroundColor: 'none'
  559. },
  560. overlayCSS: {
  561. backgroundColor: options.overlayColor ? options.overlayColor : '#555',
  562. opacity: options.boxed ? 0.05 : 0.1,
  563. cursor: 'wait'
  564. }
  565. });
  566. }
  567. },
  568. // wrMetronicer function to un-block element(finish loading)
  569. unblockUI: function(target) {
  570. if (target) {
  571. $(target).unblock({
  572. onUnblock: function() {
  573. $(target).css('position', '');
  574. $(target).css('zoom', '');
  575. }
  576. });
  577. } else {
  578. $.unblockUI();
  579. }
  580. },
  581. startPageLoading: function(options) {
  582. if (options && options.animate) {
  583. $('.page-spinner-bar').remove();
  584. $('body').append('<div class="page-spinner-bar"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>');
  585. } else {
  586. $('.page-loading').remove();
  587. $('body').append('<div class="page-loading"><img src="' + this.getGlobalImgPath() + 'loading-spinner-grey.gif"/>&nbsp;&nbsp;<span>' + (options && options.message ? options.message : 'Loading...') + '</span></div>');
  588. }
  589. },
  590. stopPageLoading: function() {
  591. $('.page-loading, .page-spinner-bar').remove();
  592. },
  593. alert: function(options) {
  594. options = $.extend(true, {
  595. container: "", // alerts parent container(by default placed after the page breadcrumbs)
  596. place: "append", // "append" or "prepend" in container
  597. type: 'success', // alert's type
  598. message: "", // alert's message
  599. close: true, // make alert closable
  600. reset: true, // close all previouse alerts first
  601. focus: true, // auto scroll to the alert after shown
  602. closeInSeconds: 0, // auto close after defined seconds
  603. icon: "" // put icon before the message
  604. }, options);
  605. var id = Metronic.getUniqueID("Metronic_alert");
  606. var html = '<div id="' + id + '" class="Metronic-alerts alert alert-' + options.type + ' fade in">' + (options.close ? '<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>' : '') + (options.icon !== "" ? '<i class="fa-lg fa fa-' + options.icon + '"></i> ' : '') + options.message + '</div>';
  607. if (options.reset) {
  608. $('.Metronic-alerts').remove();
  609. }
  610. if (!options.container) {
  611. if ($('body').hasClass("page-container-bg-solid")) {
  612. $('.page-title').after(html);
  613. } else {
  614. if ($('.page-bar').size() > 0) {
  615. $('.page-bar').after(html);
  616. } else {
  617. $('.page-breadcrumb').after(html);
  618. }
  619. }
  620. } else {
  621. if (options.place == "append") {
  622. $(options.container).append(html);
  623. } else {
  624. $(options.container).prepend(html);
  625. }
  626. }
  627. if (options.focus) {
  628. Metronic.scrollTo($('#' + id));
  629. }
  630. if (options.closeInSeconds > 0) {
  631. setTimeout(function() {
  632. $('#' + id).remove();
  633. }, options.closeInSeconds * 1000);
  634. }
  635. return id;
  636. },
  637. // initializes uniform elements
  638. initUniform: function(els) {
  639. if (els) {
  640. $(els).each(function() {
  641. if ($(this).parents(".checker").size() === 0) {
  642. $(this).show();
  643. $(this).uniform();
  644. }
  645. });
  646. } else {
  647. handleUniform();
  648. }
  649. },
  650. //wrMetronicer function to update/sync jquery uniform checkbox & radios
  651. updateUniform: function(els) {
  652. $.uniform.update(els); // update the uniform checkbox & radios UI after the actual input control state changed
  653. },
  654. //public function to initialize the fancybox plugin
  655. initFancybox: function() {
  656. handleFancybox();
  657. },
  658. //public helper function to get actual input value(used in IE9 and IE8 due to placeholder attribute not supported)
  659. getActualVal: function(el) {
  660. el = $(el);
  661. if (el.val() === el.attr("placeholder")) {
  662. return "";
  663. }
  664. return el.val();
  665. },
  666. //public function to get a paremeter by name from URL
  667. getURLParameter: function(paramName) {
  668. var searchString = window.location.search.substring(1),
  669. i, val, params = searchString.split("&");
  670. for (i = 0; i < params.length; i++) {
  671. val = params[i].split("=");
  672. if (val[0] == paramName) {
  673. return unescape(val[1]);
  674. }
  675. }
  676. return null;
  677. },
  678. // check for device touch support
  679. isTouchDevice: function() {
  680. try {
  681. document.createEvent("TouchEvent");
  682. return true;
  683. } catch (e) {
  684. return false;
  685. }
  686. },
  687. // To get the correct viewport width based on http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
  688. getViewPort: function() {
  689. var e = window,
  690. a = 'inner';
  691. if (!('innerWidth' in window)) {
  692. a = 'client';
  693. e = document.documentElement || document.body;
  694. }
  695. return {
  696. width: e[a + 'Width'],
  697. height: e[a + 'Height']
  698. };
  699. },
  700. getUniqueID: function(prefix) {
  701. return 'prefix_' + Math.floor(Math.random() * (new Date()).getTime());
  702. },
  703. // check IE8 mode
  704. isIE8: function() {
  705. return isIE8;
  706. },
  707. // check IE9 mode
  708. isIE9: function() {
  709. return isIE9;
  710. },
  711. //check RTL mode
  712. isRTL: function() {
  713. return isRTL;
  714. },
  715. // check IE8 mode
  716. isAngularJsApp: function() {
  717. return (typeof angular == 'undefined') ? false : true;
  718. },
  719. getAssetsPath: function() {
  720. return assetsPath;
  721. },
  722. setAssetsPath: function(path) {
  723. assetsPath = path;
  724. },
  725. setGlobalImgPath: function(path) {
  726. globalImgPath = path;
  727. },
  728. getGlobalImgPath: function() {
  729. return assetsPath + globalImgPath;
  730. },
  731. setGlobalPluginsPath: function(path) {
  732. globalPluginsPath = path;
  733. },
  734. getGlobalPluginsPath: function() {
  735. return assetsPath + globalPluginsPath;
  736. },
  737. getGlobalCssPath: function() {
  738. return assetsPath + globalCssPath;
  739. },
  740. // get layout color code by color name
  741. getBrandColor: function(name) {
  742. if (brandColors[name]) {
  743. return brandColors[name];
  744. } else {
  745. return '';
  746. }
  747. }
  748. };
  749. }();