inspinia.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. /*
  2. *
  3. * INSPINIA - Responsive Admin Theme
  4. * version 2.8
  5. *
  6. */
  7. $(document).ready(function () {
  8. // Fast fix bor position issue with Propper.js
  9. // Will be fixed in Bootstrap 4.1 - https://github.com/twbs/bootstrap/pull/24092
  10. Popper.Defaults.modifiers.computeStyle.gpuAcceleration = false;
  11. // Add body-small class if window less than 768px
  12. if ($(window).width() < 769) {
  13. $('body').addClass('body-small')
  14. } else {
  15. $('body').removeClass('body-small')
  16. }
  17. // MetisMenu
  18. var sideMenu = $('#side-menu').metisMenu();
  19. sideMenu.on('shown.metisMenu', function (e) {
  20. fix_height();
  21. });
  22. // Collapse ibox function
  23. $('.collapse-link').on('click', function (e) {
  24. e.preventDefault();
  25. var ibox = $(this).closest('div.ibox');
  26. var button = $(this).find('i');
  27. var content = ibox.children('.ibox-content');
  28. content.slideToggle(200);
  29. button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
  30. ibox.toggleClass('').toggleClass('border-bottom');
  31. setTimeout(function () {
  32. ibox.resize();
  33. ibox.find('[id^=map-]').resize();
  34. }, 50);
  35. });
  36. // Close ibox function
  37. $('.close-link').on('click', function (e) {
  38. e.preventDefault();
  39. var content = $(this).closest('div.ibox');
  40. content.remove();
  41. });
  42. // Fullscreen ibox function
  43. $('.fullscreen-link').on('click', function (e) {
  44. e.preventDefault();
  45. var ibox = $(this).closest('div.ibox');
  46. var button = $(this).find('i');
  47. $('body').toggleClass('fullscreen-ibox-mode');
  48. button.toggleClass('fa-expand').toggleClass('fa-compress');
  49. ibox.toggleClass('fullscreen');
  50. setTimeout(function () {
  51. $(window).trigger('resize');
  52. }, 100);
  53. });
  54. // Close menu in canvas mode
  55. $('.close-canvas-menu').on('click', function (e) {
  56. e.preventDefault();
  57. $("body").toggleClass("mini-navbar");
  58. SmoothlyMenu();
  59. });
  60. // Run menu of canvas
  61. $('body.canvas-menu .sidebar-collapse').slimScroll({
  62. height: '100%',
  63. railOpacity: 0.9
  64. });
  65. // Open close right sidebar
  66. $('.right-sidebar-toggle').on('click', function (e) {
  67. e.preventDefault();
  68. $('#right-sidebar').toggleClass('sidebar-open');
  69. });
  70. // Initialize slimscroll for right sidebar
  71. $('.sidebar-container').slimScroll({
  72. height: '100%',
  73. railOpacity: 0.4,
  74. wheelStep: 10
  75. });
  76. // Open close small chat
  77. $('.open-small-chat').on('click', function (e) {
  78. e.preventDefault();
  79. $(this).children().toggleClass('fa-comments').toggleClass('fa-times');
  80. $('.small-chat-box').toggleClass('active');
  81. });
  82. // Initialize slimscroll for small chat
  83. $('.small-chat-box .content').slimScroll({
  84. height: '234px',
  85. railOpacity: 0.4
  86. });
  87. // Small todo handler
  88. $('.check-link').on('click', function () {
  89. var button = $(this).find('i');
  90. var label = $(this).next('span');
  91. button.toggleClass('fa-check-square').toggleClass('fa-square-o');
  92. label.toggleClass('todo-completed');
  93. return false;
  94. });
  95. // Append config box / Only for demo purpose
  96. // Uncomment on server mode to enable XHR calls
  97. //$.get("skin-config.html", function (data) {
  98. // if (!$('body').hasClass('no-skin-config'))
  99. // $('body').append(data);
  100. //});
  101. // Minimalize menu
  102. $('.navbar-minimalize').on('click', function (event) {
  103. event.preventDefault();
  104. $("body").toggleClass("mini-navbar");
  105. SmoothlyMenu();
  106. });
  107. // Tooltips demo
  108. $('.tooltip-demo').tooltip({
  109. selector: "[data-toggle=tooltip]",
  110. container: "body"
  111. });
  112. // Move right sidebar top after scroll
  113. $(window).scroll(function () {
  114. if ($(window).scrollTop() > 0 && !$('body').hasClass('fixed-nav')) {
  115. $('#right-sidebar').addClass('sidebar-top');
  116. } else {
  117. $('#right-sidebar').removeClass('sidebar-top');
  118. }
  119. });
  120. $("[data-toggle=popover]")
  121. .popover();
  122. // Add slimscroll to element
  123. $('.full-height-scroll').slimscroll({
  124. height: '100%'
  125. })
  126. });
  127. // Fixed Sidebar
  128. $(window).bind("load", function () {
  129. if ($("body").hasClass('fixed-sidebar')) {
  130. $('.sidebar-collapse').slimScroll({
  131. height: '100%',
  132. railOpacity: 0.9
  133. });
  134. }
  135. });
  136. function fix_height() {
  137. var heightWithoutNavbar = $("body > #wrapper").height() - 62;
  138. $(".sidebar-panel").css("min-height", heightWithoutNavbar + "px");
  139. var navbarheight = $('nav.navbar-default').height();
  140. var wrapperHeight = $('#page-wrapper').height();
  141. if (navbarheight > wrapperHeight) {
  142. $('#page-wrapper').css("min-height", navbarheight + "px");
  143. }
  144. if (navbarheight < wrapperHeight) {
  145. $('#page-wrapper').css("min-height", $(window).height() + "px");
  146. }
  147. if ($('body').hasClass('fixed-nav')) {
  148. if (navbarheight > wrapperHeight) {
  149. $('#page-wrapper').css("min-height", navbarheight + "px");
  150. } else {
  151. $('#page-wrapper').css("min-height", $(window).height() - 60 + "px");
  152. }
  153. }
  154. }
  155. $(window).bind("load resize scroll", function () {
  156. // Full height of sidebar
  157. setTimeout(function(){
  158. if (!$("body").hasClass('body-small')) {
  159. fix_height();
  160. }
  161. })
  162. });
  163. // Minimalize menu when screen is less than 768px
  164. $(window).bind("resize", function () {
  165. if ($(this).width() < 769) {
  166. $('body').addClass('body-small')
  167. } else {
  168. $('body').removeClass('body-small')
  169. }
  170. });
  171. // Local Storage functions
  172. // Set proper body class and plugins based on user configuration
  173. $(document).ready(function () {
  174. if (localStorageSupport()) {
  175. var collapse = localStorage.getItem("collapse_menu");
  176. var fixedsidebar = localStorage.getItem("fixedsidebar");
  177. var fixednavbar = localStorage.getItem("fixednavbar");
  178. var boxedlayout = localStorage.getItem("boxedlayout");
  179. var fixedfooter = localStorage.getItem("fixedfooter");
  180. var body = $('body');
  181. if (fixedsidebar == 'on') {
  182. body.addClass('fixed-sidebar');
  183. $('.sidebar-collapse').slimScroll({
  184. height: '100%',
  185. railOpacity: 0.9
  186. });
  187. }
  188. if (collapse == 'on') {
  189. if (body.hasClass('fixed-sidebar')) {
  190. if (!body.hasClass('body-small')) {
  191. body.addClass('mini-navbar');
  192. }
  193. } else {
  194. if (!body.hasClass('body-small')) {
  195. body.addClass('mini-navbar');
  196. }
  197. }
  198. }
  199. if (fixednavbar == 'on') {
  200. $(".navbar-static-top").removeClass('navbar-static-top').addClass('navbar-fixed-top');
  201. body.addClass('fixed-nav');
  202. }
  203. if (boxedlayout == 'on') {
  204. body.addClass('boxed-layout');
  205. }
  206. if (fixedfooter == 'on') {
  207. $(".footer").addClass('fixed');
  208. }
  209. }
  210. });
  211. // check if browser support HTML5 local storage
  212. function localStorageSupport() {
  213. return (('localStorage' in window) && window['localStorage'] !== null)
  214. }
  215. // For demo purpose - animation css script
  216. function animationHover(element, animation) {
  217. element = $(element);
  218. element.hover(
  219. function () {
  220. element.addClass('animated ' + animation);
  221. },
  222. function () {
  223. //wait for animation to finish before removing classes
  224. window.setTimeout(function () {
  225. element.removeClass('animated ' + animation);
  226. }, 2000);
  227. });
  228. }
  229. function SmoothlyMenu() {
  230. if (!$('body').hasClass('mini-navbar') || $('body').hasClass('body-small')) {
  231. // Hide menu in order to smoothly turn on when maximize menu
  232. $('#side-menu').hide();
  233. // For smoothly turn on menu
  234. setTimeout(
  235. function () {
  236. $('#side-menu').fadeIn(400);
  237. }, 200);
  238. } else if ($('body').hasClass('fixed-sidebar')) {
  239. $('#side-menu').hide();
  240. setTimeout(
  241. function () {
  242. $('#side-menu').fadeIn(400);
  243. }, 100);
  244. } else {
  245. // Remove all inline style from jquery fadeIn function to reset menu state
  246. $('#side-menu').removeAttr('style');
  247. }
  248. }
  249. // Dragable panels
  250. function WinMove() {
  251. var element = "[class*=col]";
  252. var handle = ".ibox-title";
  253. var connect = "[class*=col]";
  254. $(element).sortable(
  255. {
  256. handle: handle,
  257. connectWith: connect,
  258. tolerance: 'pointer',
  259. forcePlaceholderSize: true,
  260. opacity: 0.8
  261. })
  262. .disableSelection();
  263. }