From f27bb32c4acdc88a6c025156d25a450664c25d6a Mon Sep 17 00:00:00 2001 From: Abdullah Almsaeed Date: Wed, 19 Oct 2016 11:23:34 -0400 Subject: [PATCH] Add Control Sidebar Plugin --- build/grunt/babel.js | 1 + build/grunt/concat.js | 3 +- build/grunt/watch.js | 6 +- build/js/dist/ControlSidebar.js | 153 ++++++++++++++++++++++++++++ build/js/dist/ControlSidebar.js.map | 1 + build/js/src/ControlSidebar.js | 134 ++++++++++++++++++++++++ 6 files changed, 294 insertions(+), 4 deletions(-) create mode 100644 build/js/dist/ControlSidebar.js create mode 100644 build/js/dist/ControlSidebar.js.map create mode 100644 build/js/src/ControlSidebar.js diff --git a/build/grunt/babel.js b/build/grunt/babel.js index f462c105e..e8aa9dc7d 100644 --- a/build/grunt/babel.js +++ b/build/grunt/babel.js @@ -13,6 +13,7 @@ module.exports = function (grunt) { 'build/js/dist/Treeview.js': 'build/js/src/Treeview.js', 'build/js/dist/PushMenu.js': 'build/js/src/PushMenu.js', 'build/js/dist/Widget.js': 'build/js/src/Widget.js', + 'build/js/dist/ControlSidebar.js': 'build/js/src/ControlSidebar.js', 'dist/js/adminlte.js': 'build/js/src/AdminLTE.js' } } diff --git a/build/grunt/concat.js b/build/grunt/concat.js index 365be72df..6b40b7465 100644 --- a/build/grunt/concat.js +++ b/build/grunt/concat.js @@ -12,7 +12,8 @@ module.exports = function (grunt) { 'build/js/src/Layout.js', 'build/js/src/Treeview.js', 'build/js/src/PushMenu.js', - 'build/js/src/Widget.js' + 'build/js/src/Widget.js', + 'build/js/src/ControlSidebar.js' ], dest: 'build/js/src/AdminLTE.js' } diff --git a/build/grunt/watch.js b/build/grunt/watch.js index 25b8e6d10..93b2b490f 100644 --- a/build/grunt/watch.js +++ b/build/grunt/watch.js @@ -5,15 +5,15 @@ module.exports = function (grunt) { return { sass: { files: ['build/scss/*.scss', 'build/scss/skins/*.scss'], - tasks: ['sass'] + tasks: ['sass', 'notify:watch'] }, es6: { files: ['build/js/src/*.js'], - tasks: ['concat', 'babel', 'uglify'] + tasks: ['concat', 'babel', 'uglify', 'notify:watch'] }, js: { files: ['dist/js/adminlte.js', 'dist/js/app.js'], - tasks: ['uglify'] + tasks: ['uglify', 'notify:watch'] } }; }; diff --git a/build/js/dist/ControlSidebar.js b/build/js/dist/ControlSidebar.js new file mode 100644 index 000000000..71f9db968 --- /dev/null +++ b/build/js/dist/ControlSidebar.js @@ -0,0 +1,153 @@ +'use strict'; + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +/** + * -------------------------------------------- + * AdminLTE ControlSidebar.js + * License MIT + * -------------------------------------------- + */ + +var ControlSidebar = function ($) { + 'use strict'; + + /** + * Constants + * ==================================================== + */ + + var NAME = 'ControlSidebar'; + var DATA_KEY = 'lte.control.sidebar'; + var EVENT_KEY = '.' + DATA_KEY; + var JQUERY_NO_CONFLICT = $.fn[NAME]; + var DATA_API_KEY = '.data-api'; + + var Event = { + CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY + }; + + var Selector = { + CONTROL_SIDEBAR: '.control-sidebar', + DATA_TOGGLE: '[data-widget="control-sidebar"]' + }; + + var ClassName = { + CONTROL_SIDEBAR_OPEN: 'control-sidebar-open', + CONTROL_SIDEBAR_SLIDE: 'control-sidebar-slide-open' + }; + + var Default = { + slide: true + }; + + /** + * Class Definition + * ==================================================== + */ + + var ControlSidebar = function () { + function ControlSidebar(element, config) { + _classCallCheck(this, ControlSidebar); + + this._element = element; + this._config = this._getConfig(config); + } + + // Public + + _createClass(ControlSidebar, [{ + key: 'show', + value: function show() { + console.log('showing', this._config.slide); + // Show the control sidebar + if (this._config.slide) { + $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE); + } else { + $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN); + } + } + }, { + key: 'collapse', + value: function collapse() { + // Collapse the control sidebar + if (this._config.slide) { + $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE); + } else { + $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN); + } + } + }, { + key: 'toggle', + value: function toggle() { + if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)) { + // Open the control sidebar + this.show(); + } else { + // Close the control sidebar + this.collapse(); + } + } + + // Private + + }, { + key: '_getConfig', + value: function _getConfig(config) { + return $.extend({}, Default, config); + } + + // Static + + }], [{ + key: '_jQueryInterface', + value: function _jQueryInterface(operation) { + return this.each(function () { + var data = $(this).data(DATA_KEY); + + if (!data) { + data = new ControlSidebar(this, $(this).data()); + $(this).data(DATA_KEY, data); + } + + if (data[operation] === undefined) { + throw new Error(operation + ' is not a function'); + } + + data[operation](); + }); + } + }]); + + return ControlSidebar; + }(); + + /** + * + * Data Api implementation + * ==================================================== + */ + + $(document).on('click', Selector.DATA_TOGGLE, function (event) { + event.preventDefault(); + + ControlSidebar._jQueryInterface.call($(this), 'toggle'); + }); + + /** + * jQuery API + * ==================================================== + */ + + $.fn[NAME] = ControlSidebar._jQueryInterface; + $.fn[NAME].Constructor = ControlSidebar; + $.fn[NAME].noConflict = function () { + $.fn[NAME] = JQUERY_NO_CONFLICT; + return ControlSidebar._jQueryInterface; + }; + + return ControlSidebar; +}(jQuery); +//# sourceMappingURL=ControlSidebar.js.map diff --git a/build/js/dist/ControlSidebar.js.map b/build/js/dist/ControlSidebar.js.map new file mode 100644 index 000000000..d88f5d9ee --- /dev/null +++ b/build/js/dist/ControlSidebar.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/ControlSidebar.js"],"names":["ControlSidebar","$","NAME","DATA_KEY","EVENT_KEY","JQUERY_NO_CONFLICT","fn","DATA_API_KEY","Event","CLICK_DATA_API","Selector","CONTROL_SIDEBAR","DATA_TOGGLE","ClassName","CONTROL_SIDEBAR_OPEN","CONTROL_SIDEBAR_SLIDE","Default","slide","element","config","_element","_config","_getConfig","console","log","removeClass","addClass","hasClass","show","collapse","extend","operation","each","data","undefined","Error","document","on","event","preventDefault","_jQueryInterface","call","Constructor","noConflict","jQuery"],"mappings":"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","file":"ControlSidebar.js","sourcesContent":["/**\n * --------------------------------------------\n * AdminLTE ControlSidebar.js\n * License MIT\n * --------------------------------------------\n */\n\nconst ControlSidebar = (($) => {\n 'use strict'\n\n /**\n * Constants\n * ====================================================\n */\n\n const NAME = 'ControlSidebar'\n const DATA_KEY = 'lte.control.sidebar'\n const EVENT_KEY = `.${DATA_KEY}`\n const JQUERY_NO_CONFLICT = $.fn[NAME]\n const DATA_API_KEY = '.data-api'\n\n const Event = {\n CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`\n }\n\n const Selector = {\n CONTROL_SIDEBAR: '.control-sidebar',\n DATA_TOGGLE : '[data-widget=\"control-sidebar\"]'\n }\n\n const ClassName = {\n CONTROL_SIDEBAR_OPEN : 'control-sidebar-open',\n CONTROL_SIDEBAR_SLIDE: 'control-sidebar-slide-open'\n }\n\n const Default = {\n slide: true\n }\n\n /**\n * Class Definition\n * ====================================================\n */\n\n class ControlSidebar {\n\n constructor(element, config) {\n this._element = element\n this._config = this._getConfig(config);\n }\n\n // Public\n\n show() {\n console.log('showing', this._config.slide)\n // Show the control sidebar\n if (this._config.slide) {\n $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE)\n } else {\n $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN)\n }\n }\n\n collapse() {\n // Collapse the control sidebar\n if (this._config.slide) {\n $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE)\n } else {\n $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN)\n }\n }\n\n toggle() {\n if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)) {\n // Open the control sidebar\n this.show()\n } else {\n // Close the control sidebar\n this.collapse()\n }\n }\n\n // Private\n\n _getConfig(config) {\n return $.extend({}, Default, config)\n }\n\n // Static\n\n static _jQueryInterface(operation) {\n return this.each(function () {\n let data = $(this).data(DATA_KEY)\n\n if (!data) {\n data = new ControlSidebar(this, $(this).data())\n $(this).data(DATA_KEY, data)\n }\n\n if(data[operation] === undefined) {\n throw new Error(`${operation} is not a function`)\n }\n\n data[operation]();\n })\n }\n }\n\n /**\n *\n * Data Api implementation\n * ====================================================\n */\n\n $(document).on('click', Selector.DATA_TOGGLE, function (event) {\n event.preventDefault()\n\n ControlSidebar._jQueryInterface.call($(this), 'toggle')\n })\n\n /**\n * jQuery API\n * ====================================================\n */\n\n $.fn[NAME] = ControlSidebar._jQueryInterface\n $.fn[NAME].Constructor = ControlSidebar\n $.fn[NAME].noConflict = function () {\n $.fn[NAME] = JQUERY_NO_CONFLICT\n return ControlSidebar._jQueryInterface\n }\n\n return ControlSidebar\n\n})(jQuery)\n"]} \ No newline at end of file diff --git a/build/js/src/ControlSidebar.js b/build/js/src/ControlSidebar.js new file mode 100644 index 000000000..3b8880b64 --- /dev/null +++ b/build/js/src/ControlSidebar.js @@ -0,0 +1,134 @@ +/** + * -------------------------------------------- + * AdminLTE ControlSidebar.js + * License MIT + * -------------------------------------------- + */ + +const ControlSidebar = (($) => { + 'use strict' + + /** + * Constants + * ==================================================== + */ + + const NAME = 'ControlSidebar' + const DATA_KEY = 'lte.control.sidebar' + const EVENT_KEY = `.${DATA_KEY}` + const JQUERY_NO_CONFLICT = $.fn[NAME] + const DATA_API_KEY = '.data-api' + + const Event = { + CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}` + } + + const Selector = { + CONTROL_SIDEBAR: '.control-sidebar', + DATA_TOGGLE : '[data-widget="control-sidebar"]' + } + + const ClassName = { + CONTROL_SIDEBAR_OPEN : 'control-sidebar-open', + CONTROL_SIDEBAR_SLIDE: 'control-sidebar-slide-open' + } + + const Default = { + slide: true + } + + /** + * Class Definition + * ==================================================== + */ + + class ControlSidebar { + + constructor(element, config) { + this._element = element + this._config = this._getConfig(config); + } + + // Public + + show() { + // Show the control sidebar + if (this._config.slide) { + $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE) + } else { + $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN) + } + } + + collapse() { + // Collapse the control sidebar + if (this._config.slide) { + $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE) + } else { + $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN) + } + } + + toggle() { + if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)) { + // Open the control sidebar + this.show() + } else { + // Close the control sidebar + this.collapse() + } + } + + // Private + + _getConfig(config) { + return $.extend({}, Default, config) + } + + // Static + + static _jQueryInterface(operation) { + return this.each(function () { + let data = $(this).data(DATA_KEY) + + if (!data) { + data = new ControlSidebar(this, $(this).data()) + $(this).data(DATA_KEY, data) + } + + if(data[operation] === undefined) { + throw new Error(`${operation} is not a function`) + } + + data[operation](); + }) + } + } + + /** + * + * Data Api implementation + * ==================================================== + */ + + $(document).on('click', Selector.DATA_TOGGLE, function (event) { + event.preventDefault() + + ControlSidebar._jQueryInterface.call($(this), 'toggle') + }) + + /** + * jQuery API + * ==================================================== + */ + + $.fn[NAME] = ControlSidebar._jQueryInterface + $.fn[NAME].Constructor = ControlSidebar + $.fn[NAME].noConflict = function () { + $.fn[NAME] = JQUERY_NO_CONFLICT + return ControlSidebar._jQueryInterface + } + + return ControlSidebar + +})(jQuery)