admin.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478
  1. if (typeof jQuery === "undefined") {
  2. throw new Error("jQuery plugins need to be before this file");
  3. }
  4. $.AdminBSB = {};
  5. $.AdminBSB.options = {
  6. colors: {
  7. red: '#F44336',
  8. pink: '#E91E63',
  9. purple: '#9C27B0',
  10. deepPurple: '#673AB7',
  11. indigo: '#3F51B5',
  12. blue: '#2196F3',
  13. lightBlue: '#03A9F4',
  14. cyan: '#00BCD4',
  15. teal: '#009688',
  16. green: '#4CAF50',
  17. lightGreen: '#8BC34A',
  18. lime: '#CDDC39',
  19. yellow: '#ffe821',
  20. amber: '#FFC107',
  21. orange: '#FF9800',
  22. deepOrange: '#FF5722',
  23. brown: '#795548',
  24. grey: '#9E9E9E',
  25. blueGrey: '#607D8B',
  26. black: '#000000',
  27. white: '#ffffff'
  28. },
  29. leftSideBar: {
  30. scrollColor: 'rgba(0,0,0,0.5)',
  31. scrollWidth: '4px',
  32. scrollAlwaysVisible: false,
  33. scrollBorderRadius: '0',
  34. scrollRailBorderRadius: '0',
  35. scrollActiveItemWhenPageLoad: true,
  36. breakpointWidth: 1170
  37. },
  38. dropdownMenu: {
  39. effectIn: 'fadeIn',
  40. effectOut: 'fadeOut'
  41. }
  42. };
  43. /* Left Sidebar - Function =================================================================================================
  44. * You can manage the left sidebar menu options
  45. *
  46. */
  47. $.AdminBSB.leftSideBar = {
  48. activate: function () {
  49. var that = this;
  50. var $body = $('body');
  51. var $overlay = $('.overlay');
  52. //Close sidebar
  53. $(window).click(function (e) {
  54. var $target = $(e.target);
  55. if (e.target.nodeName.toLowerCase() === 'i') {
  56. $target = $(e.target).parent();
  57. }
  58. if (!$target.hasClass('bars') && that.isOpen() && $target.parents('#left-sidebar').length === 0) {
  59. //if (!$target.hasClass('js-right-sidebar'))
  60. // $overlay.fadeOut();
  61. $body.removeClass('overlay-open');
  62. }
  63. });
  64. $.each($('.menu-toggle.toggled'), function (i, val) {
  65. $(val).next().slideToggle(0);
  66. });
  67. //When page load
  68. $.each($('.menu .list li.active'), function (i, val) {
  69. var $activeAnchors = $(val).find('a:eq(0)');
  70. var $parentAnchors = $(val).parentsUntil('.menu .list', 'li').children('a:first-child');
  71. $activeAnchors = $activeAnchors.add($parentAnchors);
  72. $activeAnchors.addClass('toggled');
  73. $activeAnchors.next().show();
  74. });
  75. //Collapse or Expand Menu
  76. $('.menu-toggle').on('click', function (e) {
  77. var $this = $(this);
  78. var $content = $this.next();
  79. if ($($this.parents('ul')[0]).hasClass('list')) {
  80. var $not = $(e.target).hasClass('menu-toggle') ? e.target : $(e.target).parents('.menu-toggle');
  81. $.each($('.menu-toggle.toggled').not($not).next(), function (i, val) {
  82. if ($(val).is(':visible')) {
  83. $(val).prev().toggleClass('toggled');
  84. $(val).slideUp();
  85. }
  86. });
  87. }
  88. $this.toggleClass('toggled');
  89. $content.slideToggle(320);
  90. });
  91. //Set menu height
  92. that.setMenuHeight();
  93. that.checkStatuForResize(true);
  94. $(window).resize(function () {
  95. that.setMenuHeight();
  96. that.checkStatuForResize(false);
  97. });
  98. //Set Waves
  99. var theme = "block";
  100. var bodyClassName = $body.prop('className');
  101. if (bodyClassName) {
  102. var classArray = bodyClassName.split(' ');
  103. for (var j = 0; j < classArray.length; j++) {
  104. if (classArray[j].indexOf('theme') === 0) {
  105. theme = classArray[j].split('-')[1];
  106. break;
  107. }
  108. }
  109. }
  110. Waves.attach('.menu .list a', ['waves-' + theme]);
  111. Waves.init();
  112. },
  113. setMenuHeight: function (isFirstTime) {
  114. if (typeof $.fn.slimScroll != 'undefined') {
  115. var configs = $.AdminBSB.options.leftSideBar;
  116. var height = ($(window).height() - ($('.legal').outerHeight() + $('.user-info').outerHeight() + $('.navbar').innerHeight()));
  117. var $el = $('.list');
  118. $el.slimscroll({
  119. height: height + "px",
  120. color: configs.scrollColor,
  121. size: configs.scrollWidth,
  122. alwaysVisible: configs.scrollAlwaysVisible,
  123. borderRadius: configs.scrollBorderRadius,
  124. railBorderRadius: configs.scrollRailBorderRadius
  125. });
  126. //Scroll active menu item when page load, if option set = true
  127. if ($.AdminBSB.options.leftSideBar.scrollActiveItemWhenPageLoad) {
  128. var $activeItem = $('.menu .list li.active');
  129. if ($activeItem.length) {
  130. var activeItemOffsetTop = $activeItem[0].offsetTop;
  131. if (activeItemOffsetTop > 150) $el.slimscroll({ scrollTo: activeItemOffsetTop + 'px' });
  132. }
  133. }
  134. }
  135. },
  136. checkStatuForResize: function (firstTime) {
  137. var $body = $('body');
  138. // var $openCloseBar = $('.navbar .navbar-header .bars');
  139. var width = $body.width();
  140. if (firstTime) {
  141. $body.find('.content, .sidebar').addClass('no-animate').delay(1000).queue(function () {
  142. $(this).removeClass('no-animate').dequeue();
  143. });
  144. }
  145. if (width < $.AdminBSB.options.leftSideBar.breakpointWidth) {
  146. $body.addClass('ls-closed');
  147. //$openCloseBar.fadeIn();
  148. }
  149. else {
  150. $body.removeClass('ls-closed');
  151. //$openCloseBar.fadeOut();
  152. }
  153. },
  154. isOpen: function () {
  155. return $('body').hasClass('overlay-open');
  156. }
  157. };
  158. //==========================================================================================================================
  159. /* Right Sidebar - Function ================================================================================================
  160. * You can manage the right sidebar menu options
  161. *
  162. */
  163. $.AdminBSB.rightSideBar = {
  164. activate: function () {
  165. var _this = this;
  166. var $sidebar = $('#rightsidebar');
  167. var $overlay = $('.overlay');
  168. //Close sidebar
  169. $(window).click(function (e) {
  170. var $target = $(e.target);
  171. if (e.target.nodeName.toLowerCase() === 'i') { $target = $(e.target).parent(); }
  172. if (!$target.hasClass('js-right-sidebar') && _this.isOpen() && $target.parents('#rightsidebar').length === 0) {
  173. if (!$target.hasClass('bars')) $overlay.fadeOut();
  174. $sidebar.removeClass('open');
  175. }
  176. });
  177. $('.js-right-sidebar').on('click', function () {
  178. $sidebar.toggleClass('open');
  179. if (_this.isOpen()) { $overlay.fadeIn(); } else { $overlay.fadeOut(); }
  180. });
  181. },
  182. isOpen: function () {
  183. return $('.right-sidebar').hasClass('open');
  184. }
  185. }
  186. //==========================================================================================================================
  187. /* Searchbar - Function ================================================================================================
  188. * You can manage the search bar
  189. *
  190. */
  191. var $searchBar = $('.search-bar');
  192. $.AdminBSB.search = {
  193. activate: function () {
  194. var _this = this;
  195. //Search button click event
  196. $('.js-search').on('click', function () {
  197. _this.showSearchBar();
  198. });
  199. //Close search click event
  200. $searchBar.find('.close-search').on('click', function () {
  201. _this.hideSearchBar();
  202. });
  203. //ESC key on pressed
  204. $searchBar.find('input[type="text"]').on('keyup', function (e) {
  205. if (e.keyCode == 27) {
  206. _this.hideSearchBar();
  207. }
  208. });
  209. },
  210. showSearchBar: function () {
  211. $searchBar.addClass('open');
  212. $searchBar.find('input[type="text"]').focus();
  213. },
  214. hideSearchBar: function () {
  215. $searchBar.removeClass('open');
  216. $searchBar.find('input[type="text"]').val('');
  217. }
  218. }
  219. //==========================================================================================================================
  220. /* Navbar - Function =======================================================================================================
  221. * You can manage the navbar
  222. *
  223. */
  224. $.AdminBSB.navbar = {
  225. activate: function () {
  226. var $body = $('body');
  227. var $overlay = $('.overlay');
  228. //Open left sidebar panel
  229. $('.bars').on('click', function () {
  230. $body.toggleClass('ls-closed');
  231. //if ($body.hasClass('ls-closed')) $body.toggleClass('overlay-open');
  232. if ($body.hasClass('overlay-open')) { $overlay.fadeIn(); } else { $overlay.fadeOut(); }
  233. });
  234. //Close collapse bar on click event
  235. $('.nav [data-close="true"]').on('click', function () {
  236. var isVisible = $('.navbar-toggle').is(':visible');
  237. var $navbarCollapse = $('.navbar-collapse');
  238. if (isVisible) {
  239. $navbarCollapse.slideUp(function () {
  240. $navbarCollapse.removeClass('in').removeAttr('style');
  241. });
  242. }
  243. });
  244. }
  245. }
  246. //==========================================================================================================================
  247. /* Input - Function ========================================================================================================
  248. * You can manage the inputs(also textareas) with name of class 'form-control'
  249. *
  250. */
  251. $.AdminBSB.input = {
  252. activate: function ($parentSelector) {
  253. $parentSelector = $parentSelector || $('body');
  254. //On focus event
  255. $parentSelector.find('.form-control').focus(function () {
  256. $(this).parent().addClass('focused');
  257. });
  258. //On focusout event
  259. $parentSelector.find('.form-control').focusout(function () {
  260. var $this = $(this);
  261. if ($this.parents('.form-group').hasClass('form-float')) {
  262. if ($this.val() == '') { $this.parents('.form-line').removeClass('focused'); }
  263. }
  264. else {
  265. $this.parents('.form-line').removeClass('focused');
  266. }
  267. });
  268. //On label click
  269. $parentSelector.on('click', '.form-float .form-line .form-label', function () {
  270. $(this).parent().find('input').focus();
  271. });
  272. //Not blank form
  273. $parentSelector.find('.form-control').each(function () {
  274. if ($(this).val() !== '') {
  275. $(this).parents('.form-line').addClass('focused');
  276. }
  277. });
  278. }
  279. }
  280. //==========================================================================================================================
  281. /* Form - Select - Function ================================================================================================
  282. * You can manage the 'select' of form elements
  283. *
  284. */
  285. $.AdminBSB.select = {
  286. activate: function () {
  287. if ($.fn.selectpicker) { $('select:not(.ms)').selectpicker(); }
  288. }
  289. }
  290. //==========================================================================================================================
  291. /* DropdownMenu - Function =================================================================================================
  292. * You can manage the dropdown menu
  293. *
  294. */
  295. $.AdminBSB.dropdownMenu = {
  296. activate: function () {
  297. var _this = this;
  298. $('.dropdown, .dropup, .btn-group').on({
  299. "show.bs.dropdown": function () {
  300. var dropdown = _this.dropdownEffect(this);
  301. _this.dropdownEffectStart(dropdown, dropdown.effectIn);
  302. },
  303. "shown.bs.dropdown": function () {
  304. var dropdown = _this.dropdownEffect(this);
  305. if (dropdown.effectIn && dropdown.effectOut) {
  306. _this.dropdownEffectEnd(dropdown, function () { });
  307. }
  308. },
  309. "hide.bs.dropdown": function (e) {
  310. var dropdown = _this.dropdownEffect(this);
  311. if (dropdown.effectOut) {
  312. e.preventDefault();
  313. _this.dropdownEffectStart(dropdown, dropdown.effectOut);
  314. _this.dropdownEffectEnd(dropdown, function () {
  315. dropdown.dropdown.removeClass('open');
  316. });
  317. }
  318. }
  319. });
  320. //Set Waves
  321. Waves.attach('.dropdown-menu li a', ['waves-block']);
  322. Waves.init();
  323. },
  324. dropdownEffect: function (target) {
  325. var effectIn = $.AdminBSB.options.dropdownMenu.effectIn, effectOut = $.AdminBSB.options.dropdownMenu.effectOut;
  326. var dropdown = $(target), dropdownMenu = $('.dropdown-menu', target);
  327. if (dropdown.length > 0) {
  328. var udEffectIn = dropdown.data('effect-in');
  329. var udEffectOut = dropdown.data('effect-out');
  330. if (udEffectIn !== undefined) { effectIn = udEffectIn; }
  331. if (udEffectOut !== undefined) { effectOut = udEffectOut; }
  332. }
  333. return {
  334. target: target,
  335. dropdown: dropdown,
  336. dropdownMenu: dropdownMenu,
  337. effectIn: effectIn,
  338. effectOut: effectOut
  339. };
  340. },
  341. dropdownEffectStart: function (data, effectToStart) {
  342. if (effectToStart) {
  343. data.dropdown.addClass('dropdown-animating');
  344. data.dropdownMenu.addClass('animated dropdown-animated');
  345. data.dropdownMenu.addClass(effectToStart);
  346. }
  347. },
  348. dropdownEffectEnd: function (data, callback) {
  349. var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  350. data.dropdown.one(animationEnd, function () {
  351. data.dropdown.removeClass('dropdown-animating');
  352. data.dropdownMenu.removeClass('animated dropdown-animated');
  353. data.dropdownMenu.removeClass(data.effectIn);
  354. data.dropdownMenu.removeClass(data.effectOut);
  355. if (typeof callback == 'function') {
  356. callback();
  357. }
  358. });
  359. }
  360. }
  361. //==========================================================================================================================
  362. /* Browser - Function ======================================================================================================
  363. * You can manage browser
  364. *
  365. */
  366. var edge = 'Microsoft Edge';
  367. var ie10 = 'Internet Explorer 10';
  368. var ie11 = 'Internet Explorer 11';
  369. var opera = 'Opera';
  370. var firefox = 'Mozilla Firefox';
  371. var chrome = 'Google Chrome';
  372. var safari = 'Safari';
  373. $.AdminBSB.browser = {
  374. activate: function () {
  375. var _this = this;
  376. var className = _this.getClassName();
  377. if (className !== '') $('html').addClass(_this.getClassName());
  378. },
  379. getBrowser: function () {
  380. var userAgent = navigator.userAgent.toLowerCase();
  381. if (/edge/i.test(userAgent)) {
  382. return edge;
  383. } else if (/rv:11/i.test(userAgent)) {
  384. return ie11;
  385. } else if (/msie 10/i.test(userAgent)) {
  386. return ie10;
  387. } else if (/opr/i.test(userAgent)) {
  388. return opera;
  389. } else if (/chrome/i.test(userAgent)) {
  390. return chrome;
  391. } else if (/firefox/i.test(userAgent)) {
  392. return firefox;
  393. } else if (!!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) {
  394. return safari;
  395. }
  396. return undefined;
  397. },
  398. getClassName: function () {
  399. var browser = this.getBrowser();
  400. if (browser === edge) {
  401. return 'edge';
  402. } else if (browser === ie11) {
  403. return 'ie11';
  404. } else if (browser === ie10) {
  405. return 'ie10';
  406. } else if (browser === opera) {
  407. return 'opera';
  408. } else if (browser === chrome) {
  409. return 'chrome';
  410. } else if (browser === firefox) {
  411. return 'firefox';
  412. } else if (browser === safari) {
  413. return 'safari';
  414. } else {
  415. return '';
  416. }
  417. }
  418. }
  419. //==========================================================================================================================
  420. $(function () {
  421. $.AdminBSB.browser.activate();
  422. $.AdminBSB.leftSideBar.activate();
  423. $.AdminBSB.rightSideBar.activate();
  424. $.AdminBSB.navbar.activate();
  425. $.AdminBSB.dropdownMenu.activate();
  426. $.AdminBSB.input.activate();
  427. $.AdminBSB.select.activate();
  428. $.AdminBSB.search.activate();
  429. setTimeout(function () { $('.page-loader-wrapper').fadeOut(); }, 50);
  430. });