App.Extend.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548
  1. var App = function() {
  2. var basePath = '/content/';
  3. var imgPath = 'ui/img/';
  4. var pluginsPath = 'plugins/';
  5. var cssPath = 'ui/css/';
  6. //初始化内容页layout组件高度
  7. var handleIframeLayoutHeight = function () {
  8. var height = App.getViewPort().height - $('.main-footer').outerHeight() - $('.main-header').outerHeight() - $(".content-tabs").outerHeight();
  9. // $("#layout").css({ "height": height });
  10. return height;
  11. }
  12. //初始化iframe内容页高度
  13. var handleIframeLayoutContent = function () {
  14. var height = App.getViewPort().height - $('.main-footer').outerHeight() - $('.main-header').outerHeight() - $(".content-tabs").outerHeight();
  15. $(".tab_iframe").css({
  16. height: height
  17. });
  18. //var width = App.getViewPort().width- $(".page-sidebar-menu").width();
  19. $(".tab_iframe").css({
  20. width: "100%"
  21. });
  22. }
  23. //处理全屏
  24. var handleFullScreen = function () {
  25. var de = document.documentElement;
  26. if (de.requestFullscreen) {
  27. de.requestFullscreen();
  28. } else if (de.mozRequestFullScreen) {
  29. de.mozRequestFullScreen();
  30. } else if (de.webkitRequestFullScreen) {
  31. de.webkitRequestFullScreen();
  32. } else if (de.msRequestFullscreen) {
  33. de.msRequestFullscreen();
  34. }
  35. else {
  36. // App.alert({ message: "该浏览器不支持全屏!", type: "danger" });
  37. alert("当前浏览器不支持全屏!");
  38. }
  39. };
  40. // 判断浏览器种类
  41. var exitFullscreen=function() {
  42. if(document.exitFullscreen) {
  43. document.exitFullscreen();
  44. } else if(document.mozCancelFullScreen) {
  45. document.mozCancelFullScreen();
  46. } else if(document.webkitExitFullscreen) {
  47. document.webkitExitFullscreen();
  48. }
  49. }
  50. // Handles custom checkboxes & radios using jQuery iCheck plugin
  51. var handleiCheck = function () {
  52. if (!$().iCheck) {
  53. return;
  54. }
  55. $('.icheck').each(function () {
  56. var checkboxClass = $(this).attr('data-checkbox') ? $(this).attr('data-checkbox') : 'icheckbox_minimal-grey';
  57. var radioClass = $(this).attr('data-radio') ? $(this).attr('data-radio') : 'iradio_minimal-grey';
  58. if (checkboxClass.indexOf('_line') > -1 || radioClass.indexOf('_line') > -1) {
  59. $(this).iCheck({
  60. checkboxClass: checkboxClass,
  61. radioClass: radioClass,
  62. insert: '<div class="icheck_line-icon"></div>' + $(this).attr("data-label")
  63. });
  64. } else {
  65. $(this).iCheck({
  66. checkboxClass: checkboxClass,
  67. radioClass: radioClass
  68. });
  69. }
  70. });
  71. };
  72. // Handles Bootstrap switches
  73. var handleBootstrapSwitch = function () {
  74. if (!$().bootstrapSwitch) {
  75. return;
  76. }
  77. $('.make-switch').bootstrapSwitch();
  78. };
  79. // Handles Bootstrap confirmations
  80. var handleBootstrapConfirmation = function () {
  81. if (!$().confirmation) {
  82. return;
  83. }
  84. $('[data-toggle=confirmation]').confirmation({ container: 'body', btnOkClass: 'btn btn-sm btn-success', btnCancelClass: 'btn btn-sm btn-danger' });
  85. }
  86. // Handles Bootstrap Accordions.
  87. var handleAccordions = function () {
  88. $('body').on('shown.bs.collapse', '.accordion.scrollable', function (e) {
  89. App.scrollTo($(e.target));
  90. });
  91. };
  92. // Handles Bootstrap Tabs.
  93. var handleTabs = function () {
  94. //activate tab if tab id provided in the URL
  95. if (location.hash) {
  96. var tabid = encodeURI(location.hash.substr(1));
  97. $('a[href="#' + tabid + '"]').parents('.tab-pane:hidden').each(function () {
  98. var tabid = $(this).attr("id");
  99. $('a[href="#' + tabid + '"]').click();
  100. });
  101. $('a[href="#' + tabid + '"]').click();
  102. }
  103. if ($().tabdrop) {
  104. $('.tabbable-tabdrop .nav-pills, .tabbable-tabdrop .nav-tabs').tabdrop({
  105. text: '<i class="fa fa-ellipsis-v"></i>&nbsp;<i class="fa fa-angle-down"></i>'
  106. });
  107. }
  108. };
  109. // Handles Bootstrap Modals.
  110. var handleModals = function () {
  111. // fix stackable modal issue: when 2 or more modals opened, closing one of modal will remove .modal-open class.
  112. $('body').on('hide.bs.modal', function () {
  113. if ($('.modal:visible').size() > 1 && $('html').hasClass('modal-open') === false) {
  114. $('html').addClass('modal-open');
  115. } else if ($('.modal:visible').size() <= 1) {
  116. $('html').removeClass('modal-open');
  117. }
  118. });
  119. // fix page scrollbars issue
  120. $('body').on('show.bs.modal', '.modal', function () {
  121. if ($(this).hasClass("modal-scroll")) {
  122. $('body').addClass("modal-open-noscroll");
  123. }
  124. });
  125. // fix page scrollbars issue
  126. $('body').on('hide.bs.modal', '.modal', function () {
  127. $('body').removeClass("modal-open-noscroll");
  128. });
  129. // remove ajax content and remove cache on modal closed
  130. $('body').on('hidden.bs.modal', '.modal:not(.modal-cached)', function () {
  131. $(this).removeData('bs.modal');
  132. });
  133. };
  134. // Handles Bootstrap Tooltips.
  135. var handleTooltips = function () {
  136. // global tooltips
  137. $('.tooltips').tooltip();
  138. // portlet tooltips
  139. $('.portlet > .portlet-title .fullscreen').tooltip({
  140. container: 'body',
  141. title: 'Fullscreen'
  142. });
  143. $('.portlet > .portlet-title > .tools > .reload').tooltip({
  144. container: 'body',
  145. title: 'Reload'
  146. });
  147. $('.portlet > .portlet-title > .tools > .remove').tooltip({
  148. container: 'body',
  149. title: 'Remove'
  150. });
  151. $('.portlet > .portlet-title > .tools > .config').tooltip({
  152. container: 'body',
  153. title: 'Settings'
  154. });
  155. $('.portlet > .portlet-title > .tools > .collapse, .portlet > .portlet-title > .tools > .expand').tooltip({
  156. container: 'body',
  157. title: 'Collapse/Expand'
  158. });
  159. };
  160. // Handles Bootstrap Dropdowns
  161. var handleDropdowns = function () {
  162. /*
  163. Hold dropdown on click
  164. */
  165. $('body').on('click', '.dropdown-menu.hold-on-click', function (e) {
  166. e.stopPropagation();
  167. });
  168. };
  169. var handleAlerts = function () {
  170. $('body').on('click', '[data-close="alert"]', function (e) {
  171. $(this).parent('.alert').hide();
  172. $(this).closest('.note').hide();
  173. e.preventDefault();
  174. });
  175. $('body').on('click', '[data-close="note"]', function (e) {
  176. $(this).closest('.note').hide();
  177. e.preventDefault();
  178. });
  179. $('body').on('click', '[data-remove="note"]', function (e) {
  180. $(this).closest('.note').remove();
  181. e.preventDefault();
  182. });
  183. };
  184. // Handle Hower Dropdowns
  185. var handleDropdownHover = function () {
  186. $('[data-hover="dropdown"]').not('.hover-initialized').each(function () {
  187. $(this).dropdownHover();
  188. $(this).addClass('hover-initialized');
  189. });
  190. };
  191. // Fix input placeholder issue for IE8 and IE9
  192. var handleFixInputPlaceholderForIE = function () {
  193. var isIe8 = !!navigator.userAgent.match(/MSIE 8.0/);
  194. var isIe9 = !!navigator.userAgent.match(/MSIE 9.0/);
  195. var isIe10 = !!navigator.userAgent.match(/MSIE 10.0/);
  196. //fix html5 placeholder attribute for ie7 & ie8
  197. if (isIe8 || isIe9) { // ie8 & ie9
  198. // this is html5 placeholder fix for inputs, inputs with placeholder-no-fix class will be skipped(e.g: we need this for password fields)
  199. $('input[placeholder]:not(.placeholder-no-fix), textarea[placeholder]:not(.placeholder-no-fix)').each(function () {
  200. var input = $(this);
  201. if (input.val() === '' && input.attr("placeholder") !== '') {
  202. input.addClass("placeholder").val(input.attr('placeholder'));
  203. }
  204. input.focus(function () {
  205. if (input.val() == input.attr('placeholder')) {
  206. input.val('');
  207. }
  208. });
  209. input.blur(function () {
  210. if (input.val() === '' || input.val() == input.attr('placeholder')) {
  211. input.val(input.attr('placeholder'));
  212. }
  213. });
  214. });
  215. }
  216. };
  217. // last popep popover
  218. var lastPopedPopover;
  219. var handlePopovers = function () {
  220. $('.popovers').popover();
  221. // close last displayed popover
  222. $(document).on('click.bs.popover.data-api', function (e) {
  223. if (lastPopedPopover) {
  224. lastPopedPopover.popover('hide');
  225. }
  226. });
  227. };
  228. // Handles scrollable contents using jQuery SlimScroll plugin.
  229. var handleScrollers = function () {
  230. App.initSlimScroll('.scroller');
  231. };
  232. var handleInitFullScreen = function() {
  233. fullScreenClickCount = 0;
  234. $(".fullscreen").bind("click", function() {
  235. if (fullScreenClickCount % 2 === 0) {
  236. handleFullScreen();
  237. } else {
  238. exitFullscreen();
  239. }
  240. fullScreenClickCount++;
  241. });
  242. };
  243. return {
  244. init: function () {
  245. //IMPORTANT!!!: Do not modify the core handlers call order.
  246. //UI Component handlers
  247. handleiCheck(); // handles custom icheck radio and checkboxes
  248. handleBootstrapSwitch(); // handle bootstrap switch plugin
  249. handleScrollers(); // handles slim scrolling contents
  250. handleAlerts(); //handle closabled alerts
  251. handleDropdowns(); // handle dropdowns
  252. handleTabs(); // handle tabs
  253. handleTooltips(); // handle bootstrap tooltips
  254. handlePopovers(); // handles bootstrap popovers
  255. handleAccordions(); //handles accordions
  256. handleModals(); // handle modals
  257. handleBootstrapConfirmation(); // handle bootstrap confirmations
  258. handleFixInputPlaceholderForIE(); //IE8 & IE9 input placeholder issue fix
  259. handleInitFullScreen();
  260. },
  261. initSlimScroll: function (el) {
  262. $(el).each(function () {
  263. if ($(this).attr("data-initialized")) {
  264. return; // exit
  265. }
  266. var height;
  267. if ($(this).attr("data-height")) {
  268. height = $(this).attr("data-height");
  269. } else {
  270. height = $(this).css('height');
  271. }
  272. $(this).slimScroll({
  273. allowPageScroll: true, // allow page scroll when the element scroll is ended
  274. size: '7px',
  275. color: ($(this).attr("data-handle-color") ? $(this).attr("data-handle-color") : '#bbb'),
  276. wrapperClass: ($(this).attr("data-wrapper-class") ? $(this).attr("data-wrapper-class") : 'slimScrollDiv'),
  277. railColor: ($(this).attr("data-rail-color") ? $(this).attr("data-rail-color") : '#eaeaea'),
  278. position: isRTL ? 'left' : 'right',
  279. height: height,
  280. alwaysVisible: ($(this).attr("data-always-visible") == "1" ? true : false),
  281. railVisible: ($(this).attr("data-rail-visible") == "1" ? true : false),
  282. disableFadeOut: true
  283. });
  284. $(this).attr("data-initialized", "1");
  285. });
  286. },
  287. destroySlimScroll: function (el) {
  288. $(el).each(function () {
  289. if ($(this).attr("data-initialized") === "1") { // destroy existing instance before updating the height
  290. $(this).removeAttr("data-initialized");
  291. $(this).removeAttr("style");
  292. var attrList = {};
  293. // store the custom attribures so later we will reassign.
  294. if ($(this).attr("data-handle-color")) {
  295. attrList["data-handle-color"] = $(this).attr("data-handle-color");
  296. }
  297. if ($(this).attr("data-wrapper-class")) {
  298. attrList["data-wrapper-class"] = $(this).attr("data-wrapper-class");
  299. }
  300. if ($(this).attr("data-rail-color")) {
  301. attrList["data-rail-color"] = $(this).attr("data-rail-color");
  302. }
  303. if ($(this).attr("data-always-visible")) {
  304. attrList["data-always-visible"] = $(this).attr("data-always-visible");
  305. }
  306. if ($(this).attr("data-rail-visible")) {
  307. attrList["data-rail-visible"] = $(this).attr("data-rail-visible");
  308. }
  309. $(this).slimScroll({
  310. wrapperClass: ($(this).attr("data-wrapper-class") ? $(this).attr("data-wrapper-class") : 'slimScrollDiv'),
  311. destroy: true
  312. });
  313. var the = $(this);
  314. // reassign custom attributes
  315. $.each(attrList, function (key, value) {
  316. the.attr(key, value);
  317. });
  318. }
  319. });
  320. },
  321. getIframeLayoutHeight: function () {
  322. return handleIframeLayoutHeight();
  323. },
  324. requestFullScreen:function() {
  325. return handleFullScreen();
  326. },
  327. //处理iframe内容
  328. handleIframeContent:function() {
  329. return handleIframeLayoutContent();
  330. },
  331. //处理sidebar ajax方式加载
  332. handleSidebarAjaxContent:function() {
  333. jQuery('.sidebar-menu').on('click', ' li > a.ajaxify', function (e) {
  334. e.preventDefault();
  335. var url = $(this).attr("href");
  336. var pageContentBody = $('#tab-page-content');
  337. App.startPageLoading({ message: '加载中...' });
  338. $.get(url, {}, function (res) {
  339. pageContentBody.html(res);
  340. // App.fixContentHeight(); // fix content height
  341. App.stopPageLoading();
  342. });
  343. });
  344. },
  345. fixIframeCotent: function () {
  346. setInterval(function () {
  347. //_runResizeHandlers();
  348. handleIframeLayoutContent();
  349. }, 200);
  350. return;
  351. },
  352. blockUI: function (options) {
  353. options = $.extend(true, {}, options);
  354. var html = '';
  355. if (options.animate) {
  356. 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>';
  357. } else if (options.iconOnly) {
  358. html = '<div class="loading-message ' + (options.boxed ? 'loading-message-boxed' : '') + '"><img src="' + this.getGlobalImgPath() + 'loading-spinner-blue.gif" align=""></div>';
  359. } else if (options.textOnly) {
  360. html = '<div class="loading-message ' + (options.boxed ? 'loading-message-boxed' : '') + '"><span>&nbsp;&nbsp;' + (options.message ? options.message : 'LOADING...') + '</span></div>';
  361. } else {
  362. html = '<div class="loading-message ' + (options.boxed ? 'loading-message-boxed' : '') + '"><img src="' + this.getGlobalImgPath() + 'loading-spinner-blue.gif" align=""><span>&nbsp;&nbsp;' + (options.message ? options.message : 'LOADING...') + '</span></div>';
  363. }
  364. if (options.target) { // element blocking
  365. var el = $(options.target);
  366. if (el.height() <= ($(window).height())) {
  367. options.cenrerY = true;
  368. }
  369. el.block({
  370. message: html,
  371. baseZ: options.zIndex ? options.zIndex : 1000,
  372. centerY: options.cenrerY !== undefined ? options.cenrerY : false,
  373. css: {
  374. top: '10%',
  375. border: '0',
  376. padding: '0',
  377. backgroundColor: 'none'
  378. },
  379. overlayCSS: {
  380. backgroundColor: options.overlayColor ? options.overlayColor : '#555',
  381. opacity: options.boxed ? 0.05 : 0.1,
  382. cursor: 'wait'
  383. }
  384. });
  385. } else { // page blocking
  386. $.blockUI({
  387. message: html,
  388. baseZ: options.zIndex ? options.zIndex : 1000,
  389. css: {
  390. border: '0',
  391. padding: '0',
  392. backgroundColor: 'none'
  393. },
  394. overlayCSS: {
  395. backgroundColor: options.overlayColor ? options.overlayColor : '#555',
  396. opacity: options.boxed ? 0.05 : 0.1,
  397. cursor: 'wait'
  398. }
  399. });
  400. }
  401. },
  402. // wrApper function to un-block element(finish loading)
  403. unblockUI: function (target) {
  404. if (target) {
  405. $(target).unblock({
  406. onUnblock: function () {
  407. $(target).css('position', '');
  408. $(target).css('zoom', '');
  409. }
  410. });
  411. } else {
  412. $.unblockUI();
  413. }
  414. },
  415. startPageLoading: function (options) {
  416. if (options && options.animate) {
  417. $('.page-spinner-bar').remove();
  418. $('body').append('<div class="page-spinner-bar"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>');
  419. } else {
  420. $('.page-loading').remove();
  421. $('body').append('<div class="page-loading"><img src="' + this.getGlobalImgPath() + 'loading-spinner-blue.gif"/>&nbsp;&nbsp;<span>' + (options && options.message ? options.message : 'Loading...') + '</span></div>');
  422. }
  423. },
  424. stopPageLoading: function () {
  425. $('.page-loading, .page-spinner-bar').remove();
  426. },
  427. getViewPort: function () {
  428. var e = window,
  429. a = 'inner';
  430. if (!('innerWidth' in window)) {
  431. a = 'client';
  432. e = document.documentElement || document.body;
  433. }
  434. return {
  435. width: e[a + 'Width'],
  436. height: e[a + 'Height']
  437. };
  438. },
  439. getbasePath: function () {
  440. return basePath;
  441. },
  442. setbasePath: function (path) {
  443. basePath = path;
  444. },
  445. setGlobalImgPath: function (path) {
  446. imgPath = path;
  447. },
  448. getGlobalImgPath: function () {
  449. return basePath + imgPath;
  450. },
  451. setGlobalPluginsPath: function (path) {
  452. pluginsPath = path;
  453. },
  454. getGlobalPluginsPath: function () {
  455. return basePath + pluginsPath;
  456. },
  457. getGlobalCssPath: function () {
  458. return basePath + cssPath;
  459. }
  460. };
  461. }();
  462. jQuery(document).ready(function () {
  463. App.init(); // init metronic core componets
  464. });
  465. /*修复IE11 bug*/
  466. (function () {
  467. function CustomEvent(event, params) {
  468. params = params || { bubbles: false, cancelable: false, detail: undefined };
  469. var evt = document.createEvent('CustomEvent');
  470. evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
  471. return evt;
  472. };
  473. CustomEvent.prototype = window.Event.prototype;
  474. window.CustomEvent = CustomEvent;
  475. })();