ControlSidebar.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. /* ControlSidebar()
  2. * ===============
  3. * Toggles the state of the control sidebar
  4. *
  5. * @Usage: $('#control-sidebar-trigger').controlSidebar(options)
  6. * or add [data-toggle="control-sidebar"] to the trigger
  7. * Pass any option as data-option="value"
  8. */
  9. +function ($) {
  10. 'use strict';
  11. var DataKey = 'lte.controlsidebar';
  12. var Default = {
  13. slide: true
  14. };
  15. var Selector = {
  16. sidebar: '.control-sidebar',
  17. data : '[data-toggle="control-sidebar"]',
  18. open : '.control-sidebar-open',
  19. bg : '.control-sidebar-bg',
  20. wrapper: '.wrapper',
  21. content: '.content-wrapper',
  22. boxed : '.layout-boxed'
  23. };
  24. var ClassName = {
  25. open : 'control-sidebar-open',
  26. fixed: 'fixed'
  27. };
  28. var Event = {
  29. collapsed: 'collapsed.controlsidebar',
  30. expanded : 'expanded.controlsidebar'
  31. };
  32. // ControlSidebar Class Definition
  33. // ===============================
  34. var ControlSidebar = function (element, options) {
  35. this.element = element;
  36. this.options = options;
  37. this.hasBindedResize = false;
  38. this.init();
  39. };
  40. ControlSidebar.prototype.init = function () {
  41. // Add click listener if the element hasn't been
  42. // initialized using the data API
  43. if (!$(this.element).is(Selector.data)) {
  44. $(this).on('click', this.toggle);
  45. }
  46. this.fix();
  47. $(window).resize(function () {
  48. this.fix();
  49. }.bind(this));
  50. };
  51. ControlSidebar.prototype.toggle = function (event) {
  52. if (event) event.preventDefault();
  53. this.fix();
  54. if (!$(Selector.sidebar).is(Selector.open) && !$('body').is(Selector.open)) {
  55. this.expand();
  56. } else {
  57. this.collapse();
  58. }
  59. };
  60. ControlSidebar.prototype.expand = function () {
  61. $(Selector.sidebar).show();
  62. if (!this.options.slide) {
  63. $('body').addClass(ClassName.open);
  64. } else {
  65. $(Selector.sidebar).addClass(ClassName.open);
  66. }
  67. $(this.element).trigger($.Event(Event.expanded));
  68. };
  69. ControlSidebar.prototype.collapse = function () {
  70. $('body, ' + Selector.sidebar).removeClass(ClassName.open);
  71. $(Selector.sidebar).fadeOut();
  72. $(this.element).trigger($.Event(Event.collapsed));
  73. };
  74. ControlSidebar.prototype.fix = function () {
  75. if ($('body').is(Selector.boxed)) {
  76. this._fixForBoxed($(Selector.bg));
  77. }
  78. };
  79. // Private
  80. ControlSidebar.prototype._fixForBoxed = function (bg) {
  81. bg.css({
  82. position: 'absolute',
  83. height : $(Selector.wrapper).height()
  84. });
  85. };
  86. // Plugin Definition
  87. // =================
  88. function Plugin(option) {
  89. return this.each(function () {
  90. var $this = $(this);
  91. var data = $this.data(DataKey);
  92. if (!data) {
  93. var options = $.extend({}, Default, $this.data(), typeof option == 'object' && option);
  94. $this.data(DataKey, (data = new ControlSidebar($this, options)));
  95. }
  96. if (typeof option == 'string') data.toggle();
  97. });
  98. }
  99. var old = $.fn.controlSidebar;
  100. $.fn.controlSidebar = Plugin;
  101. $.fn.controlSidebar.Constructor = ControlSidebar;
  102. // No Conflict Mode
  103. // ================
  104. $.fn.controlSidebar.noConflict = function () {
  105. $.fn.controlSidebar = old;
  106. return this;
  107. };
  108. // ControlSidebar Data API
  109. // =======================
  110. $(document).on('click', Selector.data, function (event) {
  111. if (event) event.preventDefault();
  112. Plugin.call($(this), 'toggle');
  113. });
  114. }(jQuery);