app.js 30 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045
  1. /**
  2. Core script to handle the entire theme and core functions
  3. **/
  4. var App = 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 App.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 = App.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. App.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. App.unblockUI(el);
  129. el.html(res);
  130. App.initAjax() // reinitialize elements & plugins for newly loaded content
  131. },
  132. error: function(xhr, ajaxOptions, thrownError) {
  133. App.unblockUI(el);
  134. var msg = 'Error on reloading the content. Please check your connection and try again.';
  135. if (error == "toastr" && toastr) {
  136. toastr.error(msg);
  137. } else if (error == "notific8" && $.notific8) {
  138. $.notific8('zindex', 11500);
  139. $.notific8(msg, {
  140. theme: 'ruby',
  141. life: 3000
  142. });
  143. } else {
  144. alert(msg);
  145. }
  146. }
  147. });
  148. } else {
  149. // for demo purpose
  150. App.blockUI({
  151. target: el,
  152. animate: true,
  153. overlayColor: 'none'
  154. });
  155. window.setTimeout(function() {
  156. App.unblockUI(el);
  157. }, 1000);
  158. }
  159. });
  160. // load ajax data on page init
  161. $('.portlet .portlet-title a.reload[data-load="true"]').click();
  162. $('body').on('click', '.portlet > .portlet-title > .tools > .collapse, .portlet .portlet-title > .tools > .expand', function(e) {
  163. e.preventDefault();
  164. var el = $(this).closest(".portlet").children(".portlet-body");
  165. if ($(this).hasClass("collapse")) {
  166. $(this).removeClass("collapse").addClass("expand");
  167. el.slideUp(200);
  168. } else {
  169. $(this).removeClass("expand").addClass("collapse");
  170. el.slideDown(200);
  171. }
  172. });
  173. };
  174. // Handles custom checkboxes & radios using jQuery Uniform plugin
  175. var handleUniform = function() {
  176. if (!$().uniform) {
  177. return;
  178. }
  179. var test = $("input[type=checkbox]:not(.toggle, .md-check, .md-radiobtn, .make-switch, .icheck), input[type=radio]:not(.toggle, .md-check, .md-radiobtn, .star, .make-switch, .icheck)");
  180. if (test.size() > 0) {
  181. test.each(function() {
  182. if ($(this).parents(".checker").size() === 0) {
  183. $(this).show();
  184. $(this).uniform();
  185. }
  186. });
  187. }
  188. };
  189. // Handlesmaterial design checkboxes
  190. var handleMaterialDesign = function() {
  191. // Material design ckeckbox and radio effects
  192. $('body').on('click', '.md-checkbox > label, .md-radio > label', function() {
  193. var the = $(this);
  194. // find the first span which is our circle/bubble
  195. var el = $(this).children('span:first-child');
  196. // add the bubble class (we do this so it doesnt show on page load)
  197. el.addClass('inc');
  198. // clone it
  199. var newone = el.clone(true);
  200. // add the cloned version before our original
  201. el.before(newone);
  202. // remove the original so that it is ready to run on next click
  203. $("." + el.attr("class") + ":last", the).remove();
  204. });
  205. if ($('body').hasClass('page-md')) {
  206. // Material design click effect
  207. // credit where credit's due; http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design
  208. var element, circle, d, x, y;
  209. $('body').on('click', 'a.btn, button.btn, input.btn, label.btn', function(e) {
  210. element = $(this);
  211. if(element.find(".md-click-circle").length == 0) {
  212. element.prepend("<span class='md-click-circle'></span>");
  213. }
  214. circle = element.find(".md-click-circle");
  215. circle.removeClass("md-click-animate");
  216. if(!circle.height() && !circle.width()) {
  217. d = Math.max(element.outerWidth(), element.outerHeight());
  218. circle.css({height: d, width: d});
  219. }
  220. x = e.pageX - element.offset().left - circle.width()/2;
  221. y = e.pageY - element.offset().top - circle.height()/2;
  222. circle.css({top: y+'px', left: x+'px'}).addClass("md-click-animate");
  223. setTimeout(function() {
  224. circle.remove();
  225. }, 1000);
  226. });
  227. }
  228. // Floating labels
  229. var handleInput = function(el) {
  230. if (el.val() != "") {
  231. el.addClass('edited');
  232. } else {
  233. el.removeClass('edited');
  234. }
  235. }
  236. $('body').on('keydown', '.form-md-floating-label .form-control', function(e) {
  237. handleInput($(this));
  238. });
  239. $('body').on('blur', '.form-md-floating-label .form-control', function(e) {
  240. handleInput($(this));
  241. });
  242. $('.form-md-floating-label .form-control').each(function(){
  243. if ($(this).val().length > 0) {
  244. $(this).addClass('edited');
  245. }
  246. });
  247. }
  248. // Handles custom checkboxes & radios using jQuery iCheck plugin
  249. var handleiCheck = function() {
  250. if (!$().iCheck) {
  251. return;
  252. }
  253. $('.icheck').each(function() {
  254. var checkboxClass = $(this).attr('data-checkbox') ? $(this).attr('data-checkbox') : 'icheckbox_minimal-grey';
  255. var radioClass = $(this).attr('data-radio') ? $(this).attr('data-radio') : 'iradio_minimal-grey';
  256. if (checkboxClass.indexOf('_line') > -1 || radioClass.indexOf('_line') > -1) {
  257. $(this).iCheck({
  258. checkboxClass: checkboxClass,
  259. radioClass: radioClass,
  260. insert: '<div class="icheck_line-icon"></div>' + $(this).attr("data-label")
  261. });
  262. } else {
  263. $(this).iCheck({
  264. checkboxClass: checkboxClass,
  265. radioClass: radioClass
  266. });
  267. }
  268. });
  269. };
  270. // Handles Bootstrap switches
  271. var handleBootstrapSwitch = function() {
  272. if (!$().bootstrapSwitch) {
  273. return;
  274. }
  275. $('.make-switch').bootstrapSwitch();
  276. };
  277. // Handles Bootstrap confirmations
  278. var handleBootstrapConfirmation = function() {
  279. if (!$().confirmation) {
  280. return;
  281. }
  282. $('[data-toggle=confirmation]').confirmation({ container: 'body', btnOkClass: 'btn btn-sm btn-success', btnCancelClass: 'btn btn-sm btn-danger'});
  283. }
  284. // Handles Bootstrap Accordions.
  285. var handleAccordions = function() {
  286. $('body').on('shown.bs.collapse', '.accordion.scrollable', function(e) {
  287. App.scrollTo($(e.target));
  288. });
  289. };
  290. // Handles Bootstrap Tabs.
  291. var handleTabs = function() {
  292. //activate tab if tab id provided in the URL
  293. if (location.hash) {
  294. var tabid = encodeURI(location.hash.substr(1));
  295. $('a[href="#' + tabid + '"]').parents('.tab-pane:hidden').each(function() {
  296. var tabid = $(this).attr("id");
  297. $('a[href="#' + tabid + '"]').click();
  298. });
  299. $('a[href="#' + tabid + '"]').click();
  300. }
  301. if ($().tabdrop) {
  302. $('.tabbable-tabdrop .nav-pills, .tabbable-tabdrop .nav-tabs').tabdrop({
  303. text: '<i class="fa fa-ellipsis-v"></i>&nbsp;<i class="fa fa-angle-down"></i>'
  304. });
  305. }
  306. };
  307. // Handles Bootstrap Modals.
  308. var handleModals = function() {
  309. // fix stackable modal issue: when 2 or more modals opened, closing one of modal will remove .modal-open class.
  310. $('body').on('hide.bs.modal', function() {
  311. if ($('.modal:visible').size() > 1 && $('html').hasClass('modal-open') === false) {
  312. $('html').addClass('modal-open');
  313. } else if ($('.modal:visible').size() <= 1) {
  314. $('html').removeClass('modal-open');
  315. }
  316. });
  317. // fix page scrollbars issue
  318. $('body').on('show.bs.modal', '.modal', function() {
  319. if ($(this).hasClass("modal-scroll")) {
  320. $('body').addClass("modal-open-noscroll");
  321. }
  322. });
  323. // fix page scrollbars issue
  324. $('body').on('hide.bs.modal', '.modal', function() {
  325. $('body').removeClass("modal-open-noscroll");
  326. });
  327. // remove ajax content and remove cache on modal closed
  328. $('body').on('hidden.bs.modal', '.modal:not(.modal-cached)', function () {
  329. $(this).removeData('bs.modal');
  330. });
  331. };
  332. // Handles Bootstrap Tooltips.
  333. var handleTooltips = function() {
  334. // global tooltips
  335. $('.tooltips').tooltip();
  336. // portlet tooltips
  337. $('.portlet > .portlet-title .fullscreen').tooltip({
  338. container: 'body',
  339. title: 'Fullscreen'
  340. });
  341. $('.portlet > .portlet-title > .tools > .reload').tooltip({
  342. container: 'body',
  343. title: 'Reload'
  344. });
  345. $('.portlet > .portlet-title > .tools > .remove').tooltip({
  346. container: 'body',
  347. title: 'Remove'
  348. });
  349. $('.portlet > .portlet-title > .tools > .config').tooltip({
  350. container: 'body',
  351. title: 'Settings'
  352. });
  353. $('.portlet > .portlet-title > .tools > .collapse, .portlet > .portlet-title > .tools > .expand').tooltip({
  354. container: 'body',
  355. title: 'Collapse/Expand'
  356. });
  357. };
  358. // Handles Bootstrap Dropdowns
  359. var handleDropdowns = function() {
  360. /*
  361. Hold dropdown on click
  362. */
  363. $('body').on('click', '.dropdown-menu.hold-on-click', function(e) {
  364. e.stopPropagation();
  365. });
  366. };
  367. var handleAlerts = function() {
  368. $('body').on('click', '[data-close="alert"]', function(e) {
  369. $(this).parent('.alert').hide();
  370. $(this).closest('.note').hide();
  371. e.preventDefault();
  372. });
  373. $('body').on('click', '[data-close="note"]', function(e) {
  374. $(this).closest('.note').hide();
  375. e.preventDefault();
  376. });
  377. $('body').on('click', '[data-remove="note"]', function(e) {
  378. $(this).closest('.note').remove();
  379. e.preventDefault();
  380. });
  381. };
  382. // Handle Hower Dropdowns
  383. var handleDropdownHover = function() {
  384. $('[data-hover="dropdown"]').not('.hover-initialized').each(function() {
  385. $(this).dropdownHover();
  386. $(this).addClass('hover-initialized');
  387. });
  388. };
  389. // Handle textarea autosize
  390. var handleTextareaAutosize = function() {
  391. if (typeof(autosize) == "function") {
  392. autosize(document.querySelector('textarea.autosizeme'));
  393. }
  394. }
  395. // Handles Bootstrap Popovers
  396. // last popep popover
  397. var lastPopedPopover;
  398. var handlePopovers = function() {
  399. $('.popovers').popover();
  400. // close last displayed popover
  401. $(document).on('click.bs.popover.data-api', function(e) {
  402. if (lastPopedPopover) {
  403. lastPopedPopover.popover('hide');
  404. }
  405. });
  406. };
  407. // Handles scrollable contents using jQuery SlimScroll plugin.
  408. var handleScrollers = function() {
  409. // App.initSlimScroll('.scroller');
  410. };
  411. // Handles Image Preview using jQuery Fancybox plugin
  412. var handleFancybox = function() {
  413. if (!jQuery.fancybox) {
  414. return;
  415. }
  416. if ($(".fancybox-button").size() > 0) {
  417. $(".fancybox-button").fancybox({
  418. groupAttr: 'data-rel',
  419. prevEffect: 'none',
  420. nextEffect: 'none',
  421. closeBtn: true,
  422. helpers: {
  423. title: {
  424. type: 'inside'
  425. }
  426. }
  427. });
  428. }
  429. };
  430. // Handles counterup plugin wrapper
  431. var handleCounterup = function() {
  432. if (!$().counterUp) {
  433. return;
  434. }
  435. $("[data-counter='counterup']").counterUp({
  436. delay: 10,
  437. time: 1000
  438. });
  439. };
  440. // Fix input placeholder issue for IE8 and IE9
  441. var handleFixInputPlaceholderForIE = function() {
  442. //fix html5 placeholder attribute for ie7 & ie8
  443. if (isIE8 || isIE9) { // ie8 & ie9
  444. // this is html5 placeholder fix for inputs, inputs with placeholder-no-fix class will be skipped(e.g: we need this for password fields)
  445. $('input[placeholder]:not(.placeholder-no-fix), textarea[placeholder]:not(.placeholder-no-fix)').each(function() {
  446. var input = $(this);
  447. if (input.val() === '' && input.attr("placeholder") !== '') {
  448. input.addClass("placeholder").val(input.attr('placeholder'));
  449. }
  450. input.focus(function() {
  451. if (input.val() == input.attr('placeholder')) {
  452. input.val('');
  453. }
  454. });
  455. input.blur(function() {
  456. if (input.val() === '' || input.val() == input.attr('placeholder')) {
  457. input.val(input.attr('placeholder'));
  458. }
  459. });
  460. });
  461. }
  462. };
  463. // Handle Select2 Dropdowns
  464. var handleSelect2 = function() {
  465. if ($().select2) {
  466. $.fn.select2.defaults.set("theme", "bootstrap");
  467. $('.select2me').select2({
  468. placeholder: "Select",
  469. width: 'auto',
  470. allowClear: true
  471. });
  472. }
  473. };
  474. // handle group element heights
  475. var handleHeight = function() {
  476. $('[data-auto-height]').each(function() {
  477. var parent = $(this);
  478. var items = $('[data-height]', parent);
  479. var height = 0;
  480. var mode = parent.attr('data-mode');
  481. var offset = parseInt(parent.attr('data-offset') ? parent.attr('data-offset') : 0);
  482. items.each(function() {
  483. if ($(this).attr('data-height') == "height") {
  484. $(this).css('height', '');
  485. } else {
  486. $(this).css('min-height', '');
  487. }
  488. var height_ = (mode == 'base-height' ? $(this).outerHeight() : $(this).outerHeight(true));
  489. if (height_ > height) {
  490. height = height_;
  491. }
  492. });
  493. height = height + offset;
  494. items.each(function() {
  495. if ($(this).attr('data-height') == "height") {
  496. $(this).css('height', height);
  497. } else {
  498. $(this).css('min-height', height);
  499. }
  500. });
  501. if(parent.attr('data-related')) {
  502. $(parent.attr('data-related')).css('height', parent.height());
  503. }
  504. });
  505. }
  506. //* END:CORE HANDLERS *//
  507. return {
  508. //main function to initiate the theme
  509. init: function() {
  510. //IMPORTANT!!!: Do not modify the core handlers call order.
  511. //Core handlers
  512. handleInit(); // initialize core variables
  513. handleOnResize(); // set and handle responsive
  514. //UI Component handlers
  515. handleMaterialDesign(); // handle material design
  516. handleUniform(); // hanfle custom radio & checkboxes
  517. handleiCheck(); // handles custom icheck radio and checkboxes
  518. handleBootstrapSwitch(); // handle bootstrap switch plugin
  519. handleScrollers(); // handles slim scrolling contents
  520. handleFancybox(); // handle fancy box
  521. handleSelect2(); // handle custom Select2 dropdowns
  522. handlePortletTools(); // handles portlet action bar functionality(refresh, configure, toggle, remove)
  523. handleAlerts(); //handle closabled alerts
  524. handleDropdowns(); // handle dropdowns
  525. handleTabs(); // handle tabs
  526. handleTooltips(); // handle bootstrap tooltips
  527. handlePopovers(); // handles bootstrap popovers
  528. handleAccordions(); //handles accordions
  529. handleModals(); // handle modals
  530. handleBootstrapConfirmation(); // handle bootstrap confirmations
  531. handleTextareaAutosize(); // handle autosize textareas
  532. handleCounterup(); // handle counterup instances
  533. //Handle group element heights
  534. this.addResizeHandler(handleHeight); // handle auto calculating height on window resize
  535. // Hacks
  536. handleFixInputPlaceholderForIE(); //IE8 & IE9 input placeholder issue fix
  537. },
  538. //main function to initiate core javascript after ajax complete
  539. initAjax: function() {
  540. handleUniform(); // handles custom radio & checkboxes
  541. handleiCheck(); // handles custom icheck radio and checkboxes
  542. handleBootstrapSwitch(); // handle bootstrap switch plugin
  543. handleDropdownHover(); // handles dropdown hover
  544. handleScrollers(); // handles slim scrolling contents
  545. handleSelect2(); // handle custom Select2 dropdowns
  546. handleFancybox(); // handle fancy box
  547. handleDropdowns(); // handle dropdowns
  548. handleTooltips(); // handle bootstrap tooltips
  549. handlePopovers(); // handles bootstrap popovers
  550. handleAccordions(); //handles accordions
  551. handleBootstrapConfirmation(); // handle bootstrap confirmations
  552. },
  553. //init main components
  554. initComponents: function() {
  555. this.initAjax();
  556. },
  557. //public function to remember last opened popover that needs to be closed on click
  558. setLastPopedPopover: function(el) {
  559. lastPopedPopover = el;
  560. },
  561. //public function to add callback a function which will be called on window resize
  562. addResizeHandler: function(func) {
  563. resizeHandlers.push(func);
  564. },
  565. //public functon to call _runresizeHandlers
  566. runResizeHandlers: function() {
  567. _runResizeHandlers();
  568. },
  569. // wrApper function to scroll(focus) to an element
  570. scrollTo: function(el, offeset) {
  571. var pos = (el && el.size() > 0) ? el.offset().top : 0;
  572. if (el) {
  573. if ($('body').hasClass('page-header-fixed')) {
  574. pos = pos - $('.page-header').height();
  575. } else if ($('body').hasClass('page-header-top-fixed')) {
  576. pos = pos - $('.page-header-top').height();
  577. } else if ($('body').hasClass('page-header-menu-fixed')) {
  578. pos = pos - $('.page-header-menu').height();
  579. }
  580. pos = pos + (offeset ? offeset : -1 * el.height());
  581. }
  582. $('html,body').animate({
  583. scrollTop: pos
  584. }, 'slow');
  585. },
  586. initSlimScroll: function(el) {
  587. $(el).each(function() {
  588. if ($(this).attr("data-initialized")) {
  589. return; // exit
  590. }
  591. var height;
  592. if ($(this).attr("data-height")) {
  593. height = $(this).attr("data-height");
  594. } else {
  595. height = $(this).css('height');
  596. }
  597. $(this).slimScroll({
  598. allowPageScroll: true, // allow page scroll when the element scroll is ended
  599. size: '7px',
  600. color: ($(this).attr("data-handle-color") ? $(this).attr("data-handle-color") : '#bbb'),
  601. wrapperClass: ($(this).attr("data-wrapper-class") ? $(this).attr("data-wrapper-class") : 'slimScrollDiv'),
  602. railColor: ($(this).attr("data-rail-color") ? $(this).attr("data-rail-color") : '#eaeaea'),
  603. position: isRTL ? 'left' : 'right',
  604. height: height,
  605. alwaysVisible: ($(this).attr("data-always-visible") == "1" ? true : false),
  606. railVisible: ($(this).attr("data-rail-visible") == "1" ? true : false),
  607. disableFadeOut: true
  608. });
  609. $(this).attr("data-initialized", "1");
  610. });
  611. },
  612. destroySlimScroll: function(el) {
  613. $(el).each(function() {
  614. if ($(this).attr("data-initialized") === "1") { // destroy existing instance before updating the height
  615. $(this).removeAttr("data-initialized");
  616. $(this).removeAttr("style");
  617. var attrList = {};
  618. // store the custom attribures so later we will reassign.
  619. if ($(this).attr("data-handle-color")) {
  620. attrList["data-handle-color"] = $(this).attr("data-handle-color");
  621. }
  622. if ($(this).attr("data-wrapper-class")) {
  623. attrList["data-wrapper-class"] = $(this).attr("data-wrapper-class");
  624. }
  625. if ($(this).attr("data-rail-color")) {
  626. attrList["data-rail-color"] = $(this).attr("data-rail-color");
  627. }
  628. if ($(this).attr("data-always-visible")) {
  629. attrList["data-always-visible"] = $(this).attr("data-always-visible");
  630. }
  631. if ($(this).attr("data-rail-visible")) {
  632. attrList["data-rail-visible"] = $(this).attr("data-rail-visible");
  633. }
  634. $(this).slimScroll({
  635. wrapperClass: ($(this).attr("data-wrapper-class") ? $(this).attr("data-wrapper-class") : 'slimScrollDiv'),
  636. destroy: true
  637. });
  638. var the = $(this);
  639. // reassign custom attributes
  640. $.each(attrList, function(key, value) {
  641. the.attr(key, value);
  642. });
  643. }
  644. });
  645. },
  646. // function to scroll to the top
  647. scrollTop: function() {
  648. App.scrollTo();
  649. },
  650. // wrApper function to block element(indicate loading)
  651. blockUI: function(options) {
  652. options = $.extend(true, {}, options);
  653. var html = '';
  654. if (options.animate) {
  655. 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>';
  656. } else if (options.iconOnly) {
  657. html = '<div class="loading-message ' + (options.boxed ? 'loading-message-boxed' : '') + '"><img src="' + this.getGlobalImgPath() + 'loading-spinner-grey.gif" align=""></div>';
  658. } else if (options.textOnly) {
  659. html = '<div class="loading-message ' + (options.boxed ? 'loading-message-boxed' : '') + '"><span>&nbsp;&nbsp;' + (options.message ? options.message : 'LOADING...') + '</span></div>';
  660. } else {
  661. 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>';
  662. }
  663. if (options.target) { // element blocking
  664. var el = $(options.target);
  665. if (el.height() <= ($(window).height())) {
  666. options.cenrerY = true;
  667. }
  668. el.block({
  669. message: html,
  670. baseZ: options.zIndex ? options.zIndex : 1000,
  671. centerY: options.cenrerY !== undefined ? options.cenrerY : false,
  672. css: {
  673. top: '10%',
  674. border: '0',
  675. padding: '0',
  676. backgroundColor: 'none'
  677. },
  678. overlayCSS: {
  679. backgroundColor: options.overlayColor ? options.overlayColor : '#555',
  680. opacity: options.boxed ? 0.05 : 0.1,
  681. cursor: 'wait'
  682. }
  683. });
  684. } else { // page blocking
  685. $.blockUI({
  686. message: html,
  687. baseZ: options.zIndex ? options.zIndex : 1000,
  688. css: {
  689. border: '0',
  690. padding: '0',
  691. backgroundColor: 'none'
  692. },
  693. overlayCSS: {
  694. backgroundColor: options.overlayColor ? options.overlayColor : '#555',
  695. opacity: options.boxed ? 0.05 : 0.1,
  696. cursor: 'wait'
  697. }
  698. });
  699. }
  700. },
  701. // wrApper function to un-block element(finish loading)
  702. unblockUI: function(target) {
  703. if (target) {
  704. $(target).unblock({
  705. onUnblock: function() {
  706. $(target).css('position', '');
  707. $(target).css('zoom', '');
  708. }
  709. });
  710. } else {
  711. $.unblockUI();
  712. }
  713. },
  714. startPageLoading: function(options) {
  715. if (options && options.animate) {
  716. $('.page-spinner-bar').remove();
  717. $('body').append('<div class="page-spinner-bar"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>');
  718. } else {
  719. $('.page-loading').remove();
  720. $('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>');
  721. }
  722. },
  723. stopPageLoading: function() {
  724. $('.page-loading, .page-spinner-bar').remove();
  725. },
  726. alert: function(options) {
  727. options = $.extend(true, {
  728. container: "", // alerts parent container(by default placed after the page breadcrumbs)
  729. place: "append", // "append" or "prepend" in container
  730. type: 'success', // alert's type
  731. message: "", // alert's message
  732. close: true, // make alert closable
  733. reset: true, // close all previouse alerts first
  734. focus: true, // auto scroll to the alert after shown
  735. closeInSeconds: 0, // auto close after defined seconds
  736. icon: "" // put icon before the message
  737. }, options);
  738. var id = App.getUniqueID("App_alert");
  739. var html = '<div id="' + id + '" class="custom-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>';
  740. if (options.reset) {
  741. $('.custom-alerts').remove();
  742. }
  743. if (!options.container) {
  744. if ($('body').hasClass("page-container-bg-solid") || $('body').hasClass("page-content-white")) {
  745. $('.page-title').after(html);
  746. } else {
  747. if ($('.page-bar').size() > 0) {
  748. $('.page-bar').after(html);
  749. } else {
  750. $('.page-breadcrumb').after(html);
  751. }
  752. }
  753. } else {
  754. if (options.place == "append") {
  755. $(options.container).append(html);
  756. } else {
  757. $(options.container).prepend(html);
  758. }
  759. }
  760. if (options.focus) {
  761. App.scrollTo($('#' + id));
  762. }
  763. if (options.closeInSeconds > 0) {
  764. setTimeout(function() {
  765. $('#' + id).remove();
  766. }, options.closeInSeconds * 1000);
  767. }
  768. return id;
  769. },
  770. // initializes uniform elements
  771. initUniform: function(els) {
  772. if (els) {
  773. $(els).each(function() {
  774. if ($(this).parents(".checker").size() === 0) {
  775. $(this).show();
  776. $(this).uniform();
  777. }
  778. });
  779. } else {
  780. handleUniform();
  781. }
  782. },
  783. //wrApper function to update/sync jquery uniform checkbox & radios
  784. updateUniform: function(els) {
  785. $.uniform.update(els); // update the uniform checkbox & radios UI after the actual input control state changed
  786. },
  787. //public function to initialize the fancybox plugin
  788. initFancybox: function() {
  789. handleFancybox();
  790. },
  791. //public helper function to get actual input value(used in IE9 and IE8 due to placeholder attribute not supported)
  792. getActualVal: function(el) {
  793. el = $(el);
  794. if (el.val() === el.attr("placeholder")) {
  795. return "";
  796. }
  797. return el.val();
  798. },
  799. //public function to get a paremeter by name from URL
  800. getURLParameter: function(paramName) {
  801. var searchString = window.location.search.substring(1),
  802. i, val, params = searchString.split("&");
  803. for (i = 0; i < params.length; i++) {
  804. val = params[i].split("=");
  805. if (val[0] == paramName) {
  806. return unescape(val[1]);
  807. }
  808. }
  809. return null;
  810. },
  811. // check for device touch support
  812. isTouchDevice: function() {
  813. try {
  814. document.createEvent("TouchEvent");
  815. return true;
  816. } catch (e) {
  817. return false;
  818. }
  819. },
  820. // To get the correct viewport width based on http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
  821. getViewPort: function() {
  822. var e = window,
  823. a = 'inner';
  824. if (!('innerWidth' in window)) {
  825. a = 'client';
  826. e = document.documentElement || document.body;
  827. }
  828. return {
  829. width: e[a + 'Width'],
  830. height: e[a + 'Height']
  831. };
  832. },
  833. getUniqueID: function(prefix) {
  834. return 'prefix_' + Math.floor(Math.random() * (new Date()).getTime());
  835. },
  836. // check IE8 mode
  837. isIE8: function() {
  838. return isIE8;
  839. },
  840. // check IE9 mode
  841. isIE9: function() {
  842. return isIE9;
  843. },
  844. //check RTL mode
  845. isRTL: function() {
  846. return isRTL;
  847. },
  848. // check IE8 mode
  849. isAngularJsApp: function() {
  850. return (typeof angular == 'undefined') ? false : true;
  851. },
  852. getAssetsPath: function() {
  853. return assetsPath;
  854. },
  855. setAssetsPath: function(path) {
  856. assetsPath = path;
  857. },
  858. setGlobalImgPath: function(path) {
  859. globalImgPath = path;
  860. },
  861. getGlobalImgPath: function() {
  862. return assetsPath + globalImgPath;
  863. },
  864. setGlobalPluginsPath: function(path) {
  865. globalPluginsPath = path;
  866. },
  867. getGlobalPluginsPath: function() {
  868. return assetsPath + globalPluginsPath;
  869. },
  870. getGlobalCssPath: function() {
  871. return assetsPath + globalCssPath;
  872. },
  873. // get layout color code by color name
  874. getBrandColor: function(name) {
  875. if (brandColors[name]) {
  876. return brandColors[name];
  877. } else {
  878. return '';
  879. }
  880. },
  881. getResponsiveBreakpoint: function(size) {
  882. // bootstrap responsive breakpoints
  883. var sizes = {
  884. 'xs' : 480, // extra small
  885. 'sm' : 768, // small
  886. 'md' : 992, // medium
  887. 'lg' : 1200 // large
  888. };
  889. return sizes[size] ? sizes[size] : 0;
  890. }
  891. };
  892. }();
  893. jQuery(document).ready(function() {
  894. App.init(); // init metronic core componets
  895. });