diff --git a/build/js/AdminLTE.js b/build/js/AdminLTE.js index fd709a432..7f854ddf1 100644 --- a/build/js/AdminLTE.js +++ b/build/js/AdminLTE.js @@ -4,6 +4,7 @@ import ControlSidebar from './ControlSidebar' import DirectChat from './DirectChat' import Dropdown from './Dropdown' import ExpandableTable from './ExpandableTable' +import Fullscreen from './Fullscreen' import Layout from './Layout' import PushMenu from './PushMenu' import SidebarSearch from './SidebarSearch' @@ -18,6 +19,7 @@ export { DirectChat, Dropdown, ExpandableTable, + Fullscreen, Layout, PushMenu, SidebarSearch, diff --git a/build/js/Fullscreen.js b/build/js/Fullscreen.js new file mode 100644 index 000000000..4551f3e4c --- /dev/null +++ b/build/js/Fullscreen.js @@ -0,0 +1,117 @@ +/** + * -------------------------------------------- + * AdminLTE Fullscreen.js + * License MIT + * -------------------------------------------- + */ + +import $ from 'jquery' + +/** + * Constants + * ==================================================== + */ + +const NAME = 'Fullscreen' +const DATA_KEY = 'lte.fullscreen' +const JQUERY_NO_CONFLICT = $.fn[NAME] + +const SELECTOR_DATA_WIDGET = '[data-widget="fullscreen"]' +const SELECTOR_ICON = `${SELECTOR_DATA_WIDGET} i` + +const Default = { + minimizeIcon: 'fa-compress-arrows-alt', + maximizeIcon: 'fa-expand-arrows-alt' +} + +/** + * Class Definition + * ==================================================== + */ + +class Fullscreen { + constructor(_element, _options) { + this.element = _element + this.options = $.extend({}, Default, _options) + } + + // Public + + toggle() { + if (document.fullscreenElement || + document.mozFullScreenElement || + document.webkitFullscreenElement || + document.msFullscreenElement) { + this.windowed() + } else { + this.fullscreen() + } + } + + fullscreen() { + if (document.documentElement.requestFullscreen) { + document.documentElement.requestFullscreen() + } else if (document.documentElement.webkitRequestFullscreen) { + document.documentElement.webkitRequestFullscreen() + } else if (document.documentElement.msRequestFullscreen) { + document.documentElement.msRequestFullscreen() + } + + $(SELECTOR_ICON).removeClass(this.options.maximizeIcon).addClass(this.options.minimizeIcon) + } + + windowed() { + if (document.exitFullscreen) { + document.exitFullscreen() + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen() + } else if (document.msExitFullscreen) { + document.msExitFullscreen() + } + + $(SELECTOR_ICON).removeClass(this.options.minimizeIcon).addClass(this.options.maximizeIcon) + } + + // Static + + static _jQueryInterface(config) { + let data = $(this).data(DATA_KEY) + + if (!data) { + data = $(this).data() + } + + const _options = $.extend({}, Default, typeof config === 'object' ? config : data) + const plugin = new Fullscreen($(this), _options) + + $(this).data(DATA_KEY, typeof config === 'object' ? config : data) + + if (typeof config === 'string' && config.match(/toggle|fullscreen|windowed/)) { + plugin[config]() + } else { + plugin.init() + } + } +} + +/** + * Data API + * ==================================================== + */ +$(document).on('click', SELECTOR_DATA_WIDGET, function () { + Fullscreen._jQueryInterface.call($(this), 'toggle') +}) + +/** + * jQuery API + * ==================================================== + */ + +$.fn[NAME] = Fullscreen._jQueryInterface +$.fn[NAME].Constructor = Fullscreen +$.fn[NAME].noConflict = function () { + $.fn[NAME] = JQUERY_NO_CONFLICT + return Fullscreen._jQueryInterface +} + +export default Fullscreen diff --git a/index.html b/index.html index f6aa23d03..baee47fe1 100644 --- a/index.html +++ b/index.html @@ -143,6 +143,11 @@ See All Notifications + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +