material-dashboard.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  1. /*! =========================================================
  2. *
  3. * Material Dashboard PRO - V1.2.0
  4. *
  5. * =========================================================
  6. *
  7. * Copyright 2016 Creative Tim (http://www.creative-tim.com/product/material-dashboard-pro)
  8. *
  9. *
  10. * _oo0oo_
  11. * o8888888o
  12. * 88" . "88
  13. * (| -_- |)
  14. * 0\ = /0
  15. * ___/`---'\___
  16. * .' \| |// '.
  17. * / \||| : |||// \
  18. * / _||||| -:- |||||- \
  19. * | | \\ - /// | |
  20. * | \_| ''\---/'' |_/ |
  21. * \ .-\__ '-' ___/-. /
  22. * ___'. .' /--.--\ `. .'___
  23. * ."" '< `.___\_<|>_/___.' >' "".
  24. * | | : `- \`.;`\ _ /`;.`/ - ` : | |
  25. * \ \ `_. \_ __\ /__ _/ .-` / /
  26. * =====`-.____`.___ \_____/___.-`___.-'=====
  27. * `=---='
  28. *
  29. * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  30. *
  31. * Buddha Bless: "No Bugs"
  32. *
  33. * ========================================================= */
  34. (function() {
  35. isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;
  36. if (isWindows && !$('body').hasClass('sidebar-mini')) {
  37. // if we are on windows OS we activate the perfectScrollbar function
  38. $('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
  39. $('html').addClass('perfect-scrollbar-on');
  40. } else {
  41. $('html').addClass('perfect-scrollbar-off');
  42. }
  43. })();
  44. var breakCards = true;
  45. var searchVisible = 0;
  46. var transparent = true;
  47. var transparentDemo = true;
  48. var fixedTop = false;
  49. var mobile_menu_visible = 0,
  50. mobile_menu_initialized = false,
  51. toggle_initialized = false,
  52. bootstrap_nav_initialized = false;
  53. var seq = 0,
  54. delays = 80,
  55. durations = 500;
  56. var seq2 = 0,
  57. delays2 = 80,
  58. durations2 = 500;
  59. $(document).ready(function() {
  60. $sidebar = $('.sidebar');
  61. $.material.init();
  62. md.initSidebarsCheck();
  63. if ($('body').hasClass('sidebar-mini')) {
  64. md.misc.sidebar_mini_active = true;
  65. }
  66. window_width = $(window).width();
  67. // check if there is an image set for the sidebar's background
  68. md.checkSidebarImage();
  69. md.initMinimizeSidebar();
  70. // Activate bootstrap-select
  71. if ($(".selectpicker").length != 0) {
  72. $(".selectpicker").selectpicker();
  73. }
  74. // Activate the tooltips
  75. //$('[rel="tooltip"]').tooltip();
  76. //removed class label and label-color from tag span and replaced with data-color
  77. var tagClass = $('.tagsinput').data('color');
  78. $('.tagsinput').tagsinput({
  79. tagClass: ' tag-' + tagClass + ' '
  80. });
  81. // Activate bootstrap-select
  82. /*$(".select").dropdown({
  83. "dropdownClass": "dropdown-menu",
  84. "optionClass": ""
  85. });*/
  86. $('.form-control').on("focus", function() {
  87. $(this).parent('.input-group').addClass("input-group-focus");
  88. }).on("blur", function() {
  89. $(this).parent(".input-group").removeClass("input-group-focus");
  90. });
  91. if (breakCards == true) {
  92. // We break the cards headers if there is too much stress on them :-)
  93. $('[data-header-animation="true"]').each(function() {
  94. var $fix_button = $(this)
  95. var $card = $(this).parent('.card');
  96. $card.find('.fix-broken-card').click(function() {
  97. console.log(this);
  98. var $header = $(this).parent().parent().siblings('.card-header, .card-image');
  99. $header.removeClass('hinge').addClass('fadeInDown');
  100. $card.attr('data-count', 0);
  101. setTimeout(function() {
  102. $header.removeClass('fadeInDown animate');
  103. }, 480);
  104. });
  105. $card.mouseenter(function() {
  106. var $this = $(this);
  107. hover_count = parseInt($this.attr('data-count'), 10) + 1 || 0;
  108. $this.attr("data-count", hover_count);
  109. if (hover_count >= 20) {
  110. $(this).children('.card-header, .card-image').addClass('hinge animated');
  111. }
  112. });
  113. });
  114. }
  115. // remove class has-error for checkbox validation
  116. $('input[type="checkbox"][required="true"], input[type="radio"][required="true"]').on('click', function() {
  117. if ($(this).hasClass('error')) {
  118. $(this).closest('div').removeClass('has-error');
  119. }
  120. });
  121. });
  122. $(document).on('click', '.navbar-toggle', function() {
  123. $toggle = $(this);
  124. if (mobile_menu_visible == 1) {
  125. $('html').removeClass('nav-open');
  126. $('.close-layer').remove();
  127. setTimeout(function() {
  128. $toggle.removeClass('toggled');
  129. }, 400);
  130. mobile_menu_visible = 0;
  131. } else {
  132. setTimeout(function() {
  133. $toggle.addClass('toggled');
  134. }, 430);
  135. var $layer = $('<div class="close-layer"></div>');
  136. if ($('body').find('.main-panel').length != 0) {
  137. $layer.appendTo(".main-panel");
  138. } else if (($('body').hasClass('off-canvas-sidebar'))) {
  139. $layer.appendTo(".wrapper-full-page");
  140. }
  141. setTimeout(function() {
  142. $layer.addClass('visible');
  143. }, 100);
  144. $layer.click(function() {
  145. $('html').removeClass('nav-open');
  146. mobile_menu_visible = 0;
  147. $layer.removeClass('visible');
  148. setTimeout(function() {
  149. $layer.remove();
  150. $toggle.removeClass('toggled');
  151. }, 400);
  152. });
  153. $('html').addClass('nav-open');
  154. mobile_menu_visible = 1;
  155. }
  156. });
  157. // activate collapse right menu when the windows is resized
  158. $(window).resize(function() {
  159. md.initSidebarsCheck();
  160. });
  161. md = {
  162. misc: {
  163. navbar_menu_visible: 0,
  164. active_collapse: true,
  165. disabled_collapse_init: 0,
  166. },
  167. checkSidebarImage: function() {
  168. $sidebar = $('.sidebar');
  169. image_src = $sidebar.data('image');
  170. if (image_src !== undefined) {
  171. sidebar_container = '<div class="sidebar-background" style="background-image: url(' + image_src + ') "/>';
  172. $sidebar.append(sidebar_container);
  173. }
  174. },
  175. initSliders: function() {
  176. // Sliders for demo purpose in refine cards section
  177. var slider = document.getElementById('sliderRegular');
  178. noUiSlider.create(slider, {
  179. start: 40,
  180. connect: [true, false],
  181. range: {
  182. min: 0,
  183. max: 100
  184. }
  185. });
  186. var slider2 = document.getElementById('sliderDouble');
  187. noUiSlider.create(slider2, {
  188. start: [20, 60],
  189. connect: true,
  190. range: {
  191. min: 0,
  192. max: 100
  193. }
  194. });
  195. },
  196. initSidebarsCheck: function() {
  197. if ($(window).width() <= 991) {
  198. if ($sidebar.length != 0) {
  199. md.initRightMenu();
  200. }
  201. }
  202. },
  203. initMinimizeSidebar: function() {
  204. $('#minimizeSidebar').click(function() {
  205. var $btn = $(this);
  206. if (md.misc.sidebar_mini_active == true) {
  207. $('body').removeClass('sidebar-mini');
  208. md.misc.sidebar_mini_active = false;
  209. } else {
  210. $('body').addClass('sidebar-mini');
  211. md.misc.sidebar_mini_active = true;
  212. }
  213. // we simulate the window Resize so the charts will get updated in realtime.
  214. var simulateWindowResize = setInterval(function() {
  215. window.dispatchEvent(new Event('resize'));
  216. }, 180);
  217. // we stop the simulation of Window Resize after the animations are completed
  218. setTimeout(function() {
  219. clearInterval(simulateWindowResize);
  220. }, 1000);
  221. });
  222. },
  223. checkScrollForTransparentNavbar: debounce(function() {
  224. if ($(document).scrollTop() > 260) {
  225. if (transparent) {
  226. transparent = false;
  227. $('.navbar-color-on-scroll').removeClass('navbar-transparent');
  228. }
  229. } else {
  230. if (!transparent) {
  231. transparent = true;
  232. $('.navbar-color-on-scroll').addClass('navbar-transparent');
  233. }
  234. }
  235. }, 17),
  236. initRightMenu: debounce(function() {
  237. $sidebar_wrapper = $('.sidebar-wrapper');
  238. if (!mobile_menu_initialized) {
  239. $navbar = $('nav').find('.navbar-collapse').children('.navbar-nav.navbar-right');
  240. mobile_menu_content = '';
  241. nav_content = $navbar.html();
  242. nav_content = '<ul class="nav nav-mobile-menu">' + nav_content + '</ul>';
  243. navbar_form = $('nav').find('.navbar-form').get(0).outerHTML;
  244. $sidebar_nav = $sidebar_wrapper.find(' > .nav');
  245. // insert the navbar form before the sidebar list
  246. $nav_content = $(nav_content);
  247. $navbar_form = $(navbar_form);
  248. $nav_content.insertBefore($sidebar_nav);
  249. $navbar_form.insertBefore($nav_content);
  250. $(".sidebar-wrapper .dropdown .dropdown-menu > li > a").click(function(event) {
  251. event.stopPropagation();
  252. });
  253. // simulate resize so all the charts/maps will be redrawn
  254. window.dispatchEvent(new Event('resize'));
  255. mobile_menu_initialized = true;
  256. } else {
  257. if ($(window).width() > 991) {
  258. // reset all the additions that we made for the sidebar wrapper only if the screen is bigger than 991px
  259. $sidebar_wrapper.find('.navbar-form').remove();
  260. $sidebar_wrapper.find('.nav-mobile-menu').remove();
  261. mobile_menu_initialized = false;
  262. }
  263. }
  264. }, 200),
  265. // initBootstrapNavbarMenu: debounce(function(){
  266. //
  267. // if(!bootstrap_nav_initialized){
  268. // $navbar = $('nav').find('.navbar-collapse').first().clone(true);
  269. //
  270. // nav_content = '';
  271. // mobile_menu_content = '';
  272. //
  273. // //add the content from the regular header to the mobile menu
  274. // $navbar.children('ul').each(function(){
  275. // content_buff = $(this).html();
  276. // nav_content = nav_content + content_buff;
  277. // });
  278. //
  279. // nav_content = '<ul class="nav nav-mobile-menu">' + nav_content + '</ul>';
  280. //
  281. // $navbar.html(nav_content);
  282. // $navbar.addClass('off-canvas-sidebar');
  283. //
  284. // // append it to the body, so it will come from the right side of the screen
  285. // $('body').append($navbar);
  286. //
  287. // $toggle = $('.navbar-toggle');
  288. //
  289. // $navbar.find('a').removeClass('btn btn-round btn-default');
  290. // $navbar.find('button').removeClass('btn-round btn-fill btn-info btn-primary btn-success btn-danger btn-warning btn-neutral');
  291. // $navbar.find('button').addClass('btn-simple btn-block');
  292. //
  293. // bootstrap_nav_initialized = true;
  294. // }
  295. // }, 500),
  296. startAnimationForLineChart: function(chart) {
  297. chart.on('draw', function(data) {
  298. if (data.type === 'line' || data.type === 'area') {
  299. data.element.animate({
  300. d: {
  301. begin: 600,
  302. dur: 700,
  303. from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
  304. to: data.path.clone().stringify(),
  305. easing: Chartist.Svg.Easing.easeOutQuint
  306. }
  307. });
  308. } else if (data.type === 'point') {
  309. seq++;
  310. data.element.animate({
  311. opacity: {
  312. begin: seq * delays,
  313. dur: durations,
  314. from: 0,
  315. to: 1,
  316. easing: 'ease'
  317. }
  318. });
  319. }
  320. });
  321. seq = 0;
  322. },
  323. startAnimationForBarChart: function(chart) {
  324. chart.on('draw', function(data) {
  325. if (data.type === 'bar') {
  326. seq2++;
  327. data.element.animate({
  328. opacity: {
  329. begin: seq2 * delays2,
  330. dur: durations2,
  331. from: 0,
  332. to: 1,
  333. easing: 'ease'
  334. }
  335. });
  336. }
  337. });
  338. seq2 = 0;
  339. }
  340. }
  341. // Returns a function, that, as long as it continues to be invoked, will not
  342. // be triggered. The function will be called after it stops being called for
  343. // N milliseconds. If `immediate` is passed, trigger the function on the
  344. // leading edge, instead of the trailing.
  345. function debounce(func, wait, immediate) {
  346. var timeout;
  347. return function() {
  348. var context = this,
  349. args = arguments;
  350. clearTimeout(timeout);
  351. timeout = setTimeout(function() {
  352. timeout = null;
  353. if (!immediate) func.apply(context, args);
  354. }, wait);
  355. if (immediate && !timeout) func.apply(context, args);
  356. };
  357. };