', {\n 'class': 'dropdown-menu dropdown-menu-right'\n }).appendTo($dropdown);\n\n for (var i = 0; i < 0; i++) {\n var st = me.$globalOptions.listStyles[i];\n var st = 'primary';\n $('
')\n .on('mousedown', function (ev) {\n ev.stopPropagation()\n })\n .click(function () {\n var classes = me.$el[0].className.split(' ');\n var oldClass = null;\n for (var i = 0; i < classes.length; i++) {\n if (me.$globalOptions.listStyles.indexOf(classes[i]) > -1) {\n oldClass = classes[i];\n }\n }\n me.$el.removeClass(me.$globalOptions.listStyles.join(\" \"))\n .addClass(this.className);\n\n me._triggerEvent('styleChange', [me, oldClass, this.className]);\n\n })\n .appendTo($menu);\n }\n\n return $dropdown;\n },\n _attachExpandClickListener: function (control) {\n var me = this;\n control.on('mousedown', function (ev) {\n ev.stopPropagation();\n });\n control.on('click', function (ev) {\n ev.stopPropagation();\n me.hideTooltip(control);\n me.toggleSize();\n });\n },\n _generateClose: function () {\n var me = this;\n var options = me.$options.close;\n var control = $('
');\n control.append('
');\n if (options.tooltip && typeof options.tooltip === 'string') {\n control.append('
' + options.tooltip + '');\n control.attr('data-tooltip', options.tooltip);\n }\n me._attachCloseClickListener(control);\n return $('
').append(control);\n },\n _attachCloseClickListener: function (control) {\n var me = this;\n control.on('mousedown', function (ev) {\n ev.stopPropagation();\n });\n control.on('click', function (ev) {\n ev.stopPropagation();\n me.hideTooltip(control);\n me.close();\n });\n },\n _getMaxZIndex: function () {\n var me = this;\n var panels = $('.lobipanel.panel-unpin:not(.panel-minimized.panel-expanded)'),\n style,\n max,\n cur;\n if (panels.length === 0) {\n return {\n \"id\": \"\",\n \"z-index\": LobiPanel.PRIVATE_OPTIONS.initialZIndex\n };\n }\n style = $(panels[0]).attr('style');\n var id = $(panels[0]).data('inner-id');\n if (!style) {\n max = LobiPanel.PRIVATE_OPTIONS.initialZIndex;\n } else {\n max = style.getCss()['z-index'];\n }\n for (var i = 1; i < panels.length; i++) {\n style = $(panels[i]).attr('style');\n if (!style) {\n cur = 0;\n } else {\n cur = style.getCss()['z-index'];\n }\n if (cur > max) {\n id = $(panels[i]).data('inner-id');\n max = cur;\n }\n }\n return {\n \"id\": id,\n \"z-index\": parseInt(max, 10)\n };\n },\n _onPanelClick: function () {\n var me = this;\n me.$el.on('mousedown.lobiPanel', function () {\n if (me.isPinned() ||\n me.isMinimized() ||\n me.isOnFullScreen()) {\n return false;\n }\n me.bringToFront();\n });\n },\n _offPanelClick: function () {\n var me = this;\n me.$el.off('mousedown.lobiPanel');\n },\n _changeClassOfControl: function (el) {\n var me = this;\n el = $(el);\n var opts = me.$options[el.attr('data-func')];\n if (!opts.icon) {\n return;\n }\n el.find('.' + LobiPanel.PRIVATE_OPTIONS.iconClass).toggleClass(opts.icon).toggleClass(opts.icon2);\n },\n _getFooterForMinimizedPanels: function () {\n var me = this;\n //we grab footer where minimized panels should go\n var minimizedCtr = $('.' + LobiPanel.PRIVATE_OPTIONS.toolbarClass);\n //if panel does not exist we create it and append to body\n if (minimizedCtr.length === 0) {\n minimizedCtr = $('
');\n $('body').append(minimizedCtr);\n }\n return minimizedCtr;\n },\n _expandOnHeaderClick: function () {\n var me = this;\n me.$heading.on('click.lobiPanel', function () {\n me.maximize();\n me.bringToFront();\n });\n },\n _removeExpandOnHeaderClick: function () {\n var me = this;\n me.$heading.off('click.lobiPanel');\n },\n _getAvailableWidth: function (calcWidth) {\n var me = this;\n if (me.$options.maxWidth) {\n calcWidth = Math.min(calcWidth, me.$options.maxWidth);\n }\n if (me.$options.minWidth) {\n calcWidth = Math.max(calcWidth, me.$options.minWidth);\n }\n return calcWidth;\n },\n _getAvailableHeight: function (calcHeight) {\n var me = this;\n if (me.$options.maxHeight) {\n calcHeight = Math.min(calcHeight, me.$options.maxHeight);\n }\n if (me.$options.minHeight) {\n calcHeight = Math.max(calcHeight, me.$options.minHeight);\n }\n return calcHeight;\n },\n _calculateBodyHeight: function (h) {\n var me = this;\n return h - me.$heading.outerHeight() - me.$el.find('.panel-footer').outerHeight();\n },\n _calculateBodyWidth: function (w) {\n var me = this;\n return w - 2;\n },\n _appendInnerIdToParent: function (parent, innerId) {\n var me = this;\n //If this is first lobipanel element of its parent\n if (parent.attr(LobiPanel.PRIVATE_OPTIONS.parentAttr) === undefined) {\n parent.attr(LobiPanel.PRIVATE_OPTIONS.parentAttr, innerId);\n }\n //This means that parent already has LobiPanel instance\n else {\n //if parent already has panel innerId than we do nothing\n if (parent.attr(LobiPanel.PRIVATE_OPTIONS.parentAttr).indexOf(innerId) > -1) {\n return;\n }\n var innerIds = parent.attr(LobiPanel.PRIVATE_OPTIONS.parentAttr);\n parent.attr(LobiPanel.PRIVATE_OPTIONS.parentAttr, innerIds + \" \" + innerId);\n }\n me.$el.attr('data-index', me.$el.index());\n },\n _insertInParent: function () {\n var me = this;\n //find its parent element\n var parent = $('[' + LobiPanel.PRIVATE_OPTIONS.parentAttr + '~=' + me.innerId + ']');\n me.$el.insertAt(me.$el.attr('data-index'), parent);\n },\n _generateWindow8Spinner: function () {\n var me = this;\n var template = ['
',\n '
',\n '
',\n '
',\n '
',\n '
',\n '
'].join(\"\");\n return $('
' + template + '
');\n },\n _enableSorting: function () {\n var me = this;\n var parent = me.$el.parent();\n if (parent.hasClass('ui-sortable')) {\n parent.sortable(\"destroy\");\n }\n if (me.$options.sortable) {\n me.$el.addClass('lobipanel-sortable');\n parent.addClass('lobipanel-parent-sortable');\n } else {\n me.$el.removeClass('lobipanel-sortable');\n }\n parent.sortable({\n connectWith: '.lobipanel-parent-sortable',\n items: '.lobipanel-sortable',\n handle: '.panel-heading',\n cursor: 'move',\n placeholder: 'lobipanel-placeholder',\n forcePlaceholderSize: true,\n opacity: 0.7,\n revert: 300,\n update: function (event, ui) {\n me.savepanelPositions();\n var $panel = ui.item;\n\n var innerId = $panel.data('inner-id');\n me._removeInnerIdFromParent(innerId);\n me._appendInnerIdToParent(ui.item.parent(), innerId);\n me._triggerEvent('dragged');\n }\n });\n },\n\n savepanelPositions: function () {\n var me = this;\n var $parents = $('.lobipanel-parent-sortable');\n $parents.each(function (index, parent) {\n var $parent = $(parent);\n\n var parentInnerId = $parent.data('inner-id');\n if (!parentInnerId) {\n console.error(\"Panel does not have parent id \", $parent);\n return;\n }\n var $childPanels = $parent.find('.lobipanel');\n var positions = {};\n $childPanels.each(function (index, el) {\n var $el = $(el);\n positions[$el.data('inner-id')] = index;\n });\n me.storageObject.saveChildPositions(parentInnerId, positions);\n });\n },\n\n _disableSorting: function () {\n var me = this;\n var parent = me.$el.parent();\n if (parent.hasClass('ui-sortable')) {\n parent.sortable(\"destroy\");\n }\n },\n _removeInnerIdFromParent: function (innerId) {\n var me = this;\n var parent = $('[' + LobiPanel.PRIVATE_OPTIONS.parentAttr + '~=' + innerId + ']');\n if (parent.length) {\n var innerIds = parent.attr(LobiPanel.PRIVATE_OPTIONS.parentAttr).replace(innerId, '').trim().replace(/\\s{2,}/g, ' ');\n parent.attr(LobiPanel.PRIVATE_OPTIONS.parentAttr, innerIds);\n }\n },\n _onToggleIconsBtnClick: function () {\n var me = this;\n me.$heading.find('.toggle-controls').on('click.lobiPanel', function () {\n me.$el.toggleClass(\"controls-expanded\");\n });\n },\n _adjustForScreenSize: function () {\n var me = this;\n me.disableTooltips();\n if ($(window).width() > 768 && me.$options.tooltips) {\n me.enableTooltips();\n }\n if (me.isOnFullScreen()) {\n me.$body.css({\n width: me._calculateBodyWidth(me.$el.width()),\n height: me._calculateBodyHeight(me.$el.height())\n });\n }\n },\n _enableResponsiveness: function () {\n var me = this;\n me._adjustForScreenSize();\n $(window).on('resize.lobiPanel', function () {\n me._adjustForScreenSize();\n });\n },\n _setBodyHeight: function () {\n var me = this;\n if (me.$options.bodyHeight !== 'auto') {\n me.$body.css({\n 'height': me.$options.bodyHeight,\n overflow: 'auto'\n });\n }\n },\n _getOptionsFromAttributes: function () {\n var me = this;\n var $el = me.$el;\n var options = {};\n for (var key in $.fn.lobiPanel.DEFAULTS) {\n var k = key.toDash();\n var val = $el.data(k);\n if (val !== undefined) {\n if (typeof $.fn.lobiPanel.DEFAULTS[key] !== 'object') {\n options[key] = val;\n } else {\n options[key] = eval('(' + val + ')');\n }\n }\n }\n return options;\n },\n _saveState: function (state, params) {\n var me = this;\n // console.log(\"Save state \", state, params);\n if (!me.hasRandomId && me.$options.stateful) {\n me.storage.state = state;\n if (params) {\n me.storage.stateParams = params;\n }\n\n me._saveLocalStorage(me.storage);\n }\n },\n getParam: function (key, value) {\n var me = this;\n // console.log(\"Save state \", state, params);\n return me.storage[key];\n },\n saveParam: function (key, value) {\n var me = this;\n // console.log(\"Save state \", state, params);\n me.storage[key] = value;\n\n me._saveLocalStorage(me.storage);\n },\n _saveLocalStorage: function (storage) {\n var me = this;\n me.storageObject.savePanelParams(me.innerId, storage);\n },\n _applyState: function (state, params) {\n var me = this;\n switch (state) {\n case 'pinned':\n if (!me.hasRandomId) {\n var allPanelPositions = me.storageObject.getAllPanelPositions();\n // console.log(allPanelPositions);\n for (var i in allPanelPositions) {\n var panelPositions = allPanelPositions[i];\n var innerParentId = i;\n var $parent = $('.lobipanel-parent-sortable[data-inner-id=' + innerParentId + ']');\n for (var j in panelPositions) {\n var $panel = $('[data-inner-id=' + j + ']');\n me._removeInnerIdFromParent($panel.data('inner-id'));\n me._appendInnerIdToParent($parent, $panel.data('inner-id'));\n if (!$panel.hasClass('panel-unpin') && !$panel.hasClass('panel-expanded')) {\n $panel.insertAt(panelPositions[j], $parent);\n }\n }\n }\n }\n // if (params && params.index !== null && params.index !== undefined) {\n // me._applyIndex(params.index);\n // }\n break;\n case 'unpinned':\n me.unpin();\n me.setPosition(params.left, params.top, 0);\n me.setSize(params.width, params.height, 0);\n break;\n case 'minimized':\n me.unpin();\n me.minimize();\n break;\n case 'collapsed':\n me.minimize();\n break;\n case 'fullscreen':\n me.toFullScreen();\n break;\n default:\n break;\n }\n },\n _applyIndex: function (index) {\n var me = this;\n if (index !== null) {\n me.$el.insertAt(index, me.$el.parent());\n }\n },\n _triggerEvent: function (eventType) {\n var me = this;\n var args = Array.prototype.slice.call(arguments, 1);\n args.unshift(me);\n\n me.$el.trigger(eventType + '.lobiPanel', args);\n if (me.$options[eventType] && typeof me.$options[eventType] === 'function') {\n return me.$options[eventType].apply(me, args);\n }\n\n return true;\n },\n doPin: function () {\n var me = this;\n if (me._triggerEvent(\"beforePin\") !== false) {\n me.pin();\n me._saveState('pinned');\n me._triggerEvent(\"onPin\");\n }\n return me;\n },\n doUnpin: function () {\n var me = this;\n if (me._triggerEvent('beforeUnpin') !== false) {\n me.unpin();\n me._updateUnpinnedState();\n me._triggerEvent('onUnpin');\n }\n return me;\n },\n doTogglePin: function () {\n var me = this;\n if (this.isPinned()) {\n this.doUnpin();\n } else {\n this.doPin();\n }\n return me;\n },\n _updateUnpinnedState: function () {\n var me = this;\n me._saveState('unpinned', me.getAlignment());\n },\n getAlignment: function () {\n var me = this;\n return {\n top: me.$el.css('top'),\n left: me.$el.css('left'),\n width: me.$el.css('width'),\n height: me.$el.css('height')\n };\n }\n };\n\n $.fn.lobiPanel = function (option) {\n var args = arguments,\n ret = null;\n this.each(function () {\n\n var $this = $(this);\n var data = $this.data('lobiPanel');\n var options = typeof option === 'object' && option;\n\n if (!data) {\n $this.data('lobiPanel', (data = new LobiPanel($this, options)));\n }\n if (typeof option === 'string') {\n args = Array.prototype.slice.call(args, 1);\n ret = data[option].apply(data, args);\n }\n });\n return ret;\n };\n $.fn.lobiPanelParent = function (option) {\n this.each(function (index, parent) {\n var $parent = $(parent);\n if (!$parent.hasClass('ui-sortable')) {\n $parent.sortable({\n connectWith: '.lobipanel-parent-sortable',\n items: '.lobipanel-sortable',\n handle: '.panel-heading',\n cursor: 'move',\n placeholder: 'lobipanel-placeholder',\n forcePlaceholderSize: true,\n opacity: 0.7,\n revert: 300,\n update: function (event, ui) {\n console.log(ui);\n // me.savepanelPositions();\n //\n // // me._removeInnerIdFromParent(innerId);\n // // me._appendInnerIdToParent(ui.item.parent(), innerId);\n // me._triggerEvent('dragged');\n }\n });\n }\n });\n return this;\n };\n LobiPanel.PRIVATE_OPTIONS = {\n //We need to know what is the parent of the panel, that's why we add\n //this attribute to parent element and it contains space seperated inner-ids of all its child lobipanel\n parentAttr: 'data-lobipanel-child-inner-id',\n toolbarClass: 'lobipanel-minimized-toolbar', //This class is added to container which contains all minimized panels\n //First instance on lobiPanel will get this z-index css property.\n //Every next instance will get 1 + previous z-index\n initialZIndex: 10000,\n //This class is attached to every panel-control icon\n iconClass: 'panel-control-icon'\n };\n $.fn.lobiPanel.DEFAULTS = {\n //Makes
unpinned panel draggable\n //Warning!!! This requires jquery ui draggable widget to be included\n draggable: true,\n //Makes
pinned panels sortable\n //Warning!!! This requires jquery ui sortable widget to be included\n sortable: false,\n //jquery ui sortable plugin option.\n //To avoid any problems this option must be same for all panels which are direct children of their parent\n connectWith: '.ui-sortable',\n //This parameter accepts string ['both', 'vertical', 'horizontal', 'none']. none means disable resize\n resize: 'both',\n //Minimum width
unpin, resizable panel can have.\n minWidth: 200,\n //Minimum height
unpin, resizable panel can have.\n minHeight: 100,\n //Maximum width
unpin, resizable panel can have.\n maxWidth: 1200,\n //Maximum height
unpin, resizable panel can have.\n maxHeight: 700,\n //The url which will be used to load content. If not provided reload button will do nothing\n loadUrl: \"\",\n //If loadUrl is provided plugin will load content as soon as plugin is initialized\n autoload: true,\n bodyHeight: 'auto',\n //This will enable tooltips on panel controls\n tooltips: true,\n forAngularJs: false,\n toggleIcon: 'glyphicon glyphicon-cog',\n expandAnimation: 100,\n collapseAnimation: 100,\n state: 'pinned', // Initial state of the panel. Available options: pinned, unpinned, collapsed, minimized, fullscreen\n initialIndex: null, // Initial index of the panel among its siblings\n stateful: false, // If you set this to true you must specify data-inner-id. Plugin will save (in localStorage) it's states such as\n // pinned, unpinned, collapsed, minimized, fullscreen, position among it's siblings\n // and apply them when you reload the browser\n constrain: 'document', // 'parent', 'document', 'window'\n unpin: {\n icon: 'glyphicon glyphicon-move', //You can user glyphicons if you do not want to use font-awesome\n tooltip: 'Unpin' //tooltip text, If you want to disable tooltip, set it to false\n },\n reload: {\n icon: 'glyphicon glyphicon-refresh', //You can user glyphicons if you do not want to use font-awesome\n tooltip: 'Reload' //tooltip text, If you want to disable tooltip, set it to false\n },\n minimize: {\n icon: 'glyphicon glyphicon-minus', //icon is shown when panel is not minimized\n icon2: 'glyphicon glyphicon-plus', //icon2 is shown when panel is minimized\n tooltip: 'Minimize' //tooltip text, If you want to disable tooltip, set it to false\n },\n expand: {\n icon: 'glyphicon glyphicon-resize-full', //icon is shown when panel is not on full screen\n icon2: 'glyphicon glyphicon-resize-small', //icon2 is shown when pane is on full screen state\n tooltip: 'Fullscreen' //tooltip text, If you want to disable tooltip, set it to false\n },\n changeStyle: {\n icon: 'glyphicon glyphicon-th', //icon is shown when panel is not on full screen\n tooltip: 'Style' //tooltip text, If you want to disable tooltip, set it to false\n },\n close: {\n icon: 'glyphicon glyphicon-remove', //You can user glyphicons if you do not want to use font-awesome\n tooltip: 'Close' //tooltip text, If you want to disable tooltip, set it to false\n },\n editTitle: {\n icon: 'glyphicon glyphicon-pencil',\n icon2: 'glyphicon glyphicon-floppy-disk',\n tooltip: 'Edit title'\n },\n styles: [\n {\n bg: '#d9534f',\n text: '#FFF'\n },\n {\n bg: '#f0ad4e',\n text: '#FFF'\n },\n {\n bg: '#337ab7',\n text: '#FFF'\n },\n {\n bg: '#5bc0de',\n text: '#FFF'\n },\n {\n bg: '#4753e4',\n text: '#FFF'\n },\n {\n bg: '#9e4aea',\n text: '#FFF'\n }\n ],\n storageObject: null,\n\n // Events\n /**\n * @event beforeTitleChange\n * Fires before title change happens. Returning false will prevent title change from happening.\n * @param {LobiPanel} The
LobiPanel instance\n */\n beforeTitleChange: null\n };\n\n $('.lobipanel').lobiPanel();\n\n var $parent = $('.lobipanel-parent-sortable');\n $parent.lobiPanelParent();\n});\n\n"
},
{
"path": "gulpfile.js",
"content": "/**\n * Created by zura on 12/10/2017.\n */\n\n'use strict';\n\nvar pjson = require('./package.json');\n\nvar less = require('gulp-less');\nvar path = require('path');\nvar gulp = require('gulp');\nvar copy = require('gulp-copy');\nvar uglify = require('gulp-uglify');\nvar rename = require('gulp-rename');\nvar cleanCSS = require('gulp-clean-css');\n// var pump = require('pump');\n\n\ngulp.task('less', function () {\n return gulp.src('./less/lobipanel.less')\n .pipe(less({\n paths: [path.join(__dirname, 'less', 'includes')]\n }))\n .pipe(gulp.dest('./css'));\n});\n\ngulp.task('copy', function () {\n gulp.src('./js/**/*.js')\n .pipe(gulp.dest('./dist/js'));\n gulp.src('./css/**/*.css')\n .pipe(gulp.dest('./dist/css'));\n\n});\n\ngulp.task('cssmin', function () {\n return gulp.src('./css/lobipanel.css')\n .pipe(cleanCSS({compatibility: 'ie8'}))\n .pipe(rename({suffix: '.min'}))\n .pipe(gulp.dest('./dist/css'));\n});\n\ngulp.task('scripts', function () {\n gulp.src([\n './js/lobipanel.js'\n ])\n\n .pipe(gulp.dest('./dist/js'))\n .pipe(uglify())\n .pipe(rename({suffix: '.min'}))\n .pipe(gulp.dest('./dist/js'))\n});\n\ngulp.task('watch', function () {\n gulp.watch('./less/**/*.less', ['less', 'cssmin', 'copy']);\n gulp.watch('./js/**/*.js', ['scripts', 'copy']);\n});\n\ngulp.task('default', ['less', 'copy', 'cssmin', 'scripts'], function () {\n gulp.start('watch');\n});"
},
{
"path": "index.html",
"content": "\n\n\n
Lobipanel - jQuery plugin for bootstrap panels. It extends panels with several common and useful functions.\n
\n
\n\n \n
\n
\n
\n\n\n \n \n \n \n \n\n
\n\n
\n
\n
\n\n\n
\n
\n
\n
\n \n
\n \n
\n
Basic example
\n
\n
\n
\n
\n Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing.\n
\n
\n
\n
\n
$('selector').lobiPanel();\n
\n
\n
\n \n
\n
Disable control buttons
\n
\n
\n
\n
\n Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing.\n
\n
\n
\n
\n
$('selector').lobiPanel({\n reload: false,\n close: false,\n editTitle: false\n});\n
\n
\n
\n \n
\n
Stateful. Saves its state in localStorage
\n
\n
\n
\n
\n Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing.\n
\n
\n
\n
\n
$('selector').lobiPanel({\n stateful: true\n});\n
\n
\n
\n \n
\n
Use font awesome icons
\n
\n
\n
\n
\n Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing.\n
\n
\n
\n
\n
$('selector').lobiPanel({\n reload: {\n icon: 'fa fa-refresh'\n },\n editTitle: {\n icon: 'fa fa-edit',\n icon2: 'fa fa-save'\n },\n unpin: {\n icon: 'fa fa-arrows'\n },\n minimize: {\n icon: 'fa fa-chevron-up',\n icon2: 'fa fa-chevron-down'\n },\n close: {\n icon: 'fa fa-times-circle'\n },\n expand: {\n icon: 'fa fa-expand',\n icon2: 'fa fa-compress'\n }\n});\n
\n
\n
\n \n
\n
Constrain panel size
\n
Unpin the panel and try to resize it.
\n
\n
\n
\n
\n Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing.\n
\n
\n
\n
\n
$('selector').lobiPanel({\n minWidth: 300,\n minHeight: 300,\n maxWidth: 600,\n maxHeight: 480\n});\n
\n
\n
\n \n
\n
Load content from url
\n
Load content from specified url and apply highlight code
\n
\n
\n
\n
\n
Content from url
\n \n
\n
\n\n
\n
\n
\n
\n
$('selector').on('loaded.lobiPanel', function(ev, lobiPanel){\n var $body = lobiPanel.$el.find('.panel-body');\n $body.html('<div class=\"highlight\"><pre><code>' + $body.html() + '</code></pre></div>');\n hljs.highlightBlock($body.find('code')[0]);\n});\n$('selector').lobiPanel({\n loadUrl: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css',\n bodyHeight: 400\n});\n
\n
\n
\n \n
\n
Multiple panels with drag & drop
\n
Drag panels by clicking on the headers
\n
\n
\n
\n
\n
\n
\n
\n
\n \n \n | # | \n First Name | \n Last Name | \n Username | \n
\n \n \n \n | 1 | \n Mark | \n Otto | \n @mdo | \n
\n \n | 2 | \n Jacob | \n Thornton | \n @fat | \n
\n \n | 3 | \n Larry | \n the Bird | \n @twitter | \n
\n \n
\n
\n
\n
\n
\n
\n
\n \n \n | # | \n First Name | \n Last Name | \n Username | \n
\n \n \n \n | 1 | \n Mark | \n Otto | \n @mdo | \n
\n \n | 2 | \n Jacob | \n Thornton | \n @fat | \n
\n \n | 3 | \n Larry | \n the Bird | \n @twitter | \n
\n \n
\n
\n
\n
\n
\n
\n
\n
$('.panel').lobiPanel({\n sortable: true\n});\n
\n
\n
\n \n
\n
Initialize with data-* attributes
\n
\n
\n
\n
\n This is panel title\n
\n
\n
\n
\n \n \n | # | \n First Name | \n Last Name | \n Username | \n
\n \n \n \n | 1 | \n Mark | \n Otto | \n @mdo | \n
\n \n | 2 | \n Jacob | \n Thornton | \n @fat | \n
\n \n | 3 | \n Larry | \n the Bird | \n @twitter | \n
\n \n
\n
\n
\n
\n
\n
<div class="panel panel-default lobipanel" data-inner-id="lobipanel-data-attributes" data-body-height="300" data-tooltips="false" data-min-width="400" data-resize="horizontal" data-close="{tooltip: 'custom'}">\n <div class="panel-heading">\n <div class="panel-title">\n This is panel title\n </div>\n </div>\n <div class="panel-body">\n content\n </div>\n</div>\n
\n
\n
\n \n
\n
Nested LobiPanel example
\n
\n
\n
\n
\n
LobiPanel title
\n \n
\n
\n
\n
\n
\n
Nested LobiPanel title
\n \n
\n
\n Panel 1\n
\n
\n
\n
\n
\n
\n
\n
<div class="panel panel-info lobipanel">\n <div class="panel-heading">\n <div class="panel-title">\n <h4>LobiPanel title</h4>\n </div>\n </div>\n <div class="panel-body">\n <div class="panel panel-warning lobipanel">\n <div class="panel-heading">\n <div class="panel-title">\n <h4>Nested LobiPanel title</h4>\n </div>\n </div>\n <div class="panel-body">\n Panel 1\n </div>\n </div>\n <div class="row">\n <div class="col-lg-6">\n <div class="panel panel-default lobipanel" data-sortable="true">\n <div class="panel-heading">\n <div class="panel-title">\n <h4>Panel title</h4>\n </div>\n </div>\n <div class="panel-body">\n Panel 2\n </div>\n </div>\n <div class="panel panel-default lobipanel" data-sortable="true">\n <div class="panel-heading">\n <div class="panel-title">\n <h4>Panel title</h4>\n </div>\n </div>\n <div class="panel-body">\n Panel 3\n </div>\n </div>\n </div>\n <div class="col-lg-6">\n <div class="panel panel-default lobipanel" data-sortable="true">\n <div class="panel-heading">\n <div class="panel-title">\n <h4>Panel title</h4>\n </div>\n </div>\n <div class="panel-body">\n Panel 4\n </div>\n </div>\n <div class="panel panel-default lobipanel" data-sortable="true">\n <div class="panel-heading">\n <div class="panel-title">\n <h4>Panel title</h4>\n </div>\n </div>\n <div class="panel-body">\n Panel 5\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n
\n
\n
\n
\n
\n
\n\n\n \n \n \n \n \n\n \n \n \n \n \n\n \n\n \n \n\n"
},
{
"path": "js/lobipanel.js",
"content": "//Author : @arboshiki\n/**\n * Generates random string of n length.\n * String contains only letters and numbers\n *\n * @param {int} n\n * @returns {String}\n */\nMath.randomString = function (n) {\n var text = \"\";\n var possible = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\n\n for (var i = 0; i < n; i++)\n text += possible.charAt(Math.floor(Math.random() * possible.length));\n\n return text;\n};\n\n/**\n * This function is for HTML element style attribute.\n * It converts the style attribute to css object\n *\n * @returns {object}\n */\nString.prototype.getCss = function () {\n var css = {};\n var style = this.valueOf().split(';');\n for (var i = 0; i < style.length; i++) {\n style[i] = $.trim(style[i]);\n if (style[i]) {\n var s = style[i].split(':');\n css[$.trim(s[0])] = $.trim(s[1]);\n }\n }\n return css;\n};\nString.prototype.trim = function () {\n return this.replace(/^\\s+|\\s+$/g, \"\");\n};\n\nString.prototype.toCamel = function () {\n return this.replace(/(\\-[a-z])/g, function ($1) {\n return $1.toUpperCase().replace('-', '');\n });\n};\n\nString.prototype.toDash = function () {\n return this.replace(/([A-Z])/g, function ($1) {\n return \"-\" + $1.toLowerCase();\n });\n};\nString.prototype.toUnderscore = function () {\n return this.replace(/([A-Z])/g, function ($1) {\n return \"_\" + $1.toLowerCase();\n });\n};\n\n/**\n * Checks if number is between two numbers\n *\n * @param {number} num1\n * @param {number} num2\n * @param {boolean} including \"include these numbers in comparison or not\" default false\n * @returns boolean\n */\nNumber.prototype.isBetween = function (num1, num2, including) {\n if (!including) {\n if (this.valueOf() < num2 && this.valueOf() > num1) {\n return true;\n }\n } else {\n if (this.valueOf() <= num2 && this.valueOf() >= num1) {\n return true;\n }\n }\n return false;\n};\n\n/**\n * Inserts element at specific index in given elements children\n *\n * @param {number} i\n * @param {string} selector\n * @returns {undefined}\n */\n$.fn.insertAt = function (i, selector) {\n var $object = selector;\n if (typeof selector === 'string') {\n $object = $(selector);\n }\n\n i = Math.min($object.children().length, i);\n if (i == 0) {\n $object.prepend(this);\n return this;\n }\n var oldIndex = this.data('index');\n\n if (!i || isNaN(i)) {\n i = $object.children().length - 1;\n }\n this.attr('data-index', i);\n\n var $el = $object.children().eq(i - 1);\n if ($el.length) {\n $el.after(this);\n } else {\n $object.append(this);\n }\n $object.children().each(function (index, el) {\n var $el = $(el);\n if (oldIndex < i && index > oldIndex && index <= i) {\n $el.attr('data-index', parseInt($el.data('data-index'), 10) - 1);\n } else if (oldIndex >= i && index > i && index <= oldIndex) {\n $el.attr('data-index', parseInt($el.attr('data-index'), 10) + 1);\n }\n });\n return this;\n};\n\n$.fn.disableSelection = function () {\n return this\n .attr('unselectable', 'on')\n .css('user-select', 'none')\n .on('selectstart', false);\n};\n\n$.fn.enableSelection = function () {\n return this\n .removeAttr('unselectable')\n .css('user-select', 'initial')\n .off('selectstart');\n};\n\n$(function () {\n var STORAGE_PREFIX = 'lobipanel_';\n\n var StorageLocal = function () {\n this.saveChildPositions = function (parentInnerId, positions) {\n if (positions !== undefined) {\n localStorage.setItem(STORAGE_PREFIX + 'parent_' + parentInnerId, JSON.stringify(positions));\n }\n };\n\n this.savePanelParams = function (innerId, storage) {\n localStorage.setItem(STORAGE_PREFIX + innerId, JSON.stringify(storage));\n };\n\n this.getAllPanelPositions = function () {\n var parents = [];\n for (var i in localStorage) {\n if (i.indexOf(STORAGE_PREFIX + 'parent_') === 0) {\n var innerParentId = i.replace(STORAGE_PREFIX + 'parent_', '');\n var $parent = $('.lobipanel-parent-sortable[data-inner-id=' + innerParentId + ']');\n if ($parent.length) {\n parents[innerParentId] = JSON.parse(localStorage[i]);\n }\n }\n }\n return parents;\n };\n\n this.getPanelStorage = function (innerId) {\n var item = localStorage.getItem(STORAGE_PREFIX + innerId);\n return JSON.parse(item || null) || {};\n };\n\n };\n\n var LobiPanel = function ($el, options) {\n var me = this;\n\n this.hasRandomId = false;\n this.storage = {};\n\n\n this.$el = $el;\n if (!me.$el.data('inner-id')) {\n me.hasRandomId = true;\n me.$el.attr('data-inner-id', Math.randomString(10));\n }\n\n this.innerId = me.$el.data('inner-id');\n\n this.$options = me._processInput(options);\n me.$heading = this.$el.find('>.panel-heading');\n me.$body = this.$el.find('>.panel-body');\n me._init();\n me.$el.css('display', 'none');\n me._applyState(me.$options.state, me.$options.stateParams);\n me.$el.css('display', 'block');\n // me._applyIndex(me.$options.initialIndex);\n me._triggerEvent(\"init\");\n };\n\n LobiPanel.prototype = {\n _processInput: function (options) {\n var me = this;\n if (!options) {\n options = {};\n }\n\n\n this.storageObject = options.storageObject || new StorageLocal();\n if (!me.hasRandomId) {\n me.storage = this.storageObject.getPanelStorage(me.innerId);\n }\n var opts = me._getOptionsFromAttributes();\n// window.console.log(opts);\n options = $.extend({}, $.fn.lobiPanel.DEFAULTS, me.storage, options, opts);\n var objects = ['unpin', 'reload', 'expand', 'minimize', 'close', 'editTitle'];\n for (var i = 0; i < objects.length; i++) {\n var prop = objects[i];\n if (typeof options[prop] === 'object') {\n options[prop] = $.extend({}, $.fn.lobiPanel.DEFAULTS[prop], options[prop], opts[prop]);\n }\n }\n return options;\n },\n _init: function () {\n var me = this;\n me.$el.addClass('lobipanel');\n\n me.$heading.append(me._generateControls());\n//------------------------------------------------------------------------------\n var parent = me.$el.parent();\n me._appendInnerIdToParent(parent, me.innerId);\n me._enableSorting();\n me._onToggleIconsBtnClick();\n me._enableResponsiveness();\n me._setBodyHeight();\n if (me.$options.autoload) {\n me.load();\n }\n var maxWidth = 'calc(100% - ' + me.$heading.find('.dropdown-menu').children().length * me.$heading.find('.dropdown-menu li').first().outerWidth() + \"px)\";\n me.$heading.find('.panel-title').css('max-width', maxWidth);\n\n if (me.getParam('panelTitle')) {\n me.$heading.find('.panel-title').html(me.getParam('panelTitle'));\n }\n\n var style = me.getParam('panelStyle');\n if (style) {\n me.applyStyle(style.bg, style.text);\n }\n\n // me.savepanelPositions();\n // me._triggerEvent(\"init\");\n },\n /**\n * Checks if panel is initialized. Panel is initialized if it has\n * lobipanel class and data-inner-id=\"\" attribute\n *\n * @returns {boolean}\n */\n isPanelInit: function () {\n var me = this;\n return me.$el.hasClass('lobipanel') && me.$el.data('inner-id');\n },\n\n /**\n * Checks if panel is pinned or unpinned\n *\n * @returns {Boolean}\n */\n isPinned: function () {\n var me = this;\n return !me.$el.hasClass('panel-unpin');\n },\n\n /**\n * Pin the panel\n *\n * @returns {LobiPanel}\n */\n pin: function () {\n var me = this;\n\n //disable resize functionality\n me.disableResize();\n me.disableDrag();\n\n //remove on panel click event (which brings the panel into front)\n me._offPanelClick();\n //remove panel-unpin class\n me.$el.removeClass('panel-unpin')\n //save current position, z-index and size to use it for later unpin\n .attr('old-style', me.$el.attr('style'))\n // .removeAttr('style')\n .css('position', 'relative');\n\n var toRemoveProperties = [\n 'position',\n 'z-index',\n 'left',\n 'top',\n 'width',\n 'height'\n ];\n\n for (var i in toRemoveProperties) {\n me.$el.css(toRemoveProperties[i], '');\n }\n\n me.$body.css({\n width: '',\n height: ''\n });\n me._setBodyHeight();\n me._insertInParent();\n me._enableSorting();\n return me;\n },\n\n /**\n * Unpin the panel\n *\n * @returns {LobiPanel}\n */\n unpin: function () {\n var me = this;\n if (me.$el.hasClass(\"panel-collapsed\")) {\n return me;\n }\n me._disableSorting();\n if (me.$el.attr('old-style')) {\n me.$el.attr('style', me.$el.attr('old-style'));\n } else {\n var width = me.$el.width();\n var height = me.$el.height();\n var left = Math.max(0, (($(window).width() - me.$el.outerWidth()) / 2));\n var top = Math.max(0, ($(document).scrollTop() + ($(window).height() - me.$el.outerHeight()) / 2));\n me.$el.css({\n left: left,\n top: top,\n width: width,\n height: height\n });\n }\n var res = me._getMaxZIndex();\n me.$el.css('z-index', res['z-index'] + 1);\n me._onPanelClick();\n\n me.$el.addClass('panel-unpin');\n $('body').append(me.$el);\n\n var panelWidth = me._getAvailableWidth(me.$el.width());\n var panelHeight = me._getAvailableHeight(me.$el.height());\n me.$el.css({\n position: 'absolute',\n width: panelWidth,\n height: panelHeight\n });\n //we give .panel-body to width and height in order .panel-body to start scroling\n var bHeight = me._calculateBodyHeight(panelHeight);\n var bWidth = me._calculateBodyWidth(panelWidth);\n me.$body.css({\n width: bWidth,\n height: bHeight\n });\n\n if (me.$options.draggable) {\n me.enableDrag();\n }\n if (me.$options.resize !== 'none') {\n me.enableResize();\n }\n return me;\n },\n\n /**\n * Toggles (pin or unpin) the panel\n *\n * @returns {LobiPanel}\n */\n togglePin: function () {\n var me = this;\n if (this.isPinned()) {\n this.unpin();\n } else {\n this.pin();\n }\n return me;\n },\n\n /**\n * Checks if panel is minimized or not. It does not matter if panel is pinned or not\n *\n * @returns {Boolean}\n */\n isMinimized: function () {\n var me = this;\n return me.$el.hasClass('panel-minimized') || me.$el.hasClass('panel-collapsed');\n },\n\n /**\n * Minimize the panel. If panel is pinned it is minimized on its place\n * if panel is unpinned it is minimized at the bottom of the page\n *\n * @returns {LobiPanel}\n */\n minimize: function () {\n var me = this;\n me._triggerEvent(\"beforeMinimize\");\n if (me.isMinimized()) {\n return me;\n }\n if (me.isPinned()) {\n me.$body.slideUp();\n me.$el.find('.panel-footer').slideUp();\n me.$el.addClass('panel-collapsed');\n me._saveState('collapsed');\n me._changeClassOfControl(me.$heading.find('[data-func=\"minimize\"]'));\n } else {\n me.disableTooltips();\n //get footer where we need to put panel\n var footer = me._getFooterForMinimizedPanels();\n //find other panels which are already inside footer\n var children = footer.find('>*');\n var left, top;\n //get top coordinate of footer\n top = footer.offset().top;\n //if there are no other panels inside footer, this panel will be first\n //and its left coordinate will be footer's left coordinate\n if (children.length === 0) {\n left = footer.offset().left;\n } else {\n //if there exist panels inside footer, then this panel's left\n //coordinate will be last panel's (in footer) right coordinate\n var ch = $(children[children.length - 1]);\n left = ch.offset().left + ch.width();\n }\n //if panel was not expanded and it was jus unpin we need to save\n //panel's style\n if (!me.$el.hasClass('panel-expanded')) {\n me.$el.attr('old-style', me.$el.attr('style'));\n }\n me.$el.animate({\n left: left,\n top: top,\n width: 200,\n height: footer.height()\n }, 100, function () {\n //if panel was expanded on full screen before we minimize it\n //after minimization we remove 'panel-expanded' class and we change icon\n if (me.$el.hasClass('panel-expanded')) {\n me.$el.removeClass('panel-expanded');\n me.$el.find('.panel-heading [data-func=expand] .' + LobiPanel.PRIVATE_OPTIONS.iconClass)\n .removeClass(me.$options.expand.icon2)\n .addClass(me.$options.expand.icon)\n ;\n }\n //we add 'panel-minimized' class\n me.$el.addClass('panel-minimized');\n me.$el.removeAttr('style');\n me.disableDrag();\n me.disableResize();\n me._expandOnHeaderClick();\n //animation was made and panel is positioned in place we it must be\n //so we append panel into footer\n footer.append(me.$el);\n $('body').addClass('lobipanel-minimized');\n var maxWidth = 'calc(100% - ' + me.$heading.find('.dropdown-menu li>a:visible').length * me.$heading.find('.dropdown-menu li>a:visible').first().outerWidth() + \"px)\";\n me.$heading.find('.panel-title').css('max-width', maxWidth);\n me._saveState('minimized');\n me._triggerEvent(\"onMinimize\");\n });\n }\n return me;\n },\n\n /**\n * Maximize the panel. This method works for minimized panel.\n * If panel is pinned it's maximized on its place.\n * If panel is unpinned it's maximized on position from which it was minimized\n *\n * @returns {LobiPanel}\n */\n maximize: function () {\n var me = this;\n me._triggerEvent(\"beforeMaximize\");\n if (!me.isMinimized()) {\n return me;\n }\n if (me.isPinned()) {\n me.$body.slideDown();\n me.$el.find('.panel-footer').slideDown();\n me.$el.removeClass('panel-collapsed');\n me._saveState('pinned');\n me._changeClassOfControl(me.$heading.find('[data-func=\"minimize\"]'));\n me._triggerEvent(\"onMaximize\");\n } else {\n me.enableTooltips();\n //we get css style which was saved before minimization\n var css = me.$el.attr('old-style').getCss();\n //we give panel these css properties, coz animation work\n me.$el.css({\n position: css.position || 'fixed',\n 'z-index': css['z-index'],\n left: me.$el.offset().left,\n top: me.$el.offset().top,\n width: me.$el.width(),\n height: me.$el.height()\n });\n //we append panel into body\n $('body').append(me.$el);\n //It is not possible to make animations to these propeties and we remove it\n delete css['position'];\n delete css['z-index'];\n// css['position'] = 'absolute';\n //and we animate panel to its saved style\n me.$el.animate(css, 100, function () {\n //we remove position property from style, before 'panel-unpin'\n //class has it to absolute\n me.$el.css('position', '');\n me.$el.removeClass('panel-minimized');\n //as panel is already in its place we remove 'old-style' property\n me.$el.removeAttr('old-style');\n if (me.$options.draggable) {\n me.enableDrag();\n }\n me.enableResize();\n me._removeExpandOnHeaderClick();\n //If there are no other elements inside footer, remove it also\n var footer = me._getFooterForMinimizedPanels();\n if (footer.children().length === 0) {\n footer.remove();\n }\n $('body').removeClass('lobipanel-minimized')\n .addClass('lobipanel-minimized');\n var maxWidth = 'calc(100% - ' + me.$heading.find('.dropdown-menu li').length * me.$heading.find('.dropdown-menu li').first().outerWidth() + \"px)\";\n me.$heading.find('.panel-title').css('max-width', maxWidth);\n me._updateUnpinnedState();\n me._triggerEvent(\"onMaximize\");\n });\n }\n return me;\n },\n\n /**\n * Toggles (minimize or maximize) the panel state.\n *\n * @returns {LobiPanel}\n */\n toggleMinimize: function () {\n var me = this;\n if (me.isMinimized()) {\n me.maximize();\n } else {\n me.minimize();\n }\n return me;\n },\n\n /**\n * Checks if panel is on full screen\n *\n * @returns {Boolean}\n */\n isOnFullScreen: function () {\n var me = this;\n return me.$el.hasClass('panel-expanded');\n },\n\n /**\n * Expands the panel to full screen size\n *\n * @returns {LobiPanel}\n */\n toFullScreen: function () {\n var me = this;\n me._triggerEvent(\"beforeFullScreen\");\n if (me.$el.hasClass(\"panel-collapsed\")) {\n return me;\n }\n me.$el.attr('data-index', me.$el.index());\n me._changeClassOfControl(me.$heading.find('[data-func=\"expand\"]'));\n me.$el.css('position', 'fixed');\n var res = me._getMaxZIndex();\n //if panel is pinned or minimized, its position is not absolute and\n //animation will not work correctly so we change its position and\n //other css properties and we append panel into body\n if (me.isPinned() || me.isMinimized()) {\n me.enableTooltips();\n me.$el.css({\n \"z-index\": res[\"z-index\"] + 1,\n left: me.$el.offset().left,\n top: me.$el.offset().top - $(window).scrollTop(),\n width: me.$el.width(),\n height: me.$el.height()\n });\n $('body').append(me.$el);\n //If we are expanding panel to full screen from footer and in footer there are no more elements\n //remove footer also\n var footer = me._getFooterForMinimizedPanels();\n if (footer.children().length === 0) {\n footer.remove();\n }\n } else {\n me.$body.css({\n width: '',\n height: ''\n });\n me._setBodyHeight();\n }\n //if panel is not minimized we save its style property, because when\n //toSmallSize() method is called panel needs to have style, it had before calling method\n // toFullScreen()\n if (!me.isMinimized()) {\n me.$el.attr('old-style', me.$el.attr('style'));\n me.disableResize();\n } else {\n me.$el.removeClass('panel-minimized');\n me._removeExpandOnHeaderClick();\n }\n //get toolbar\n var toolbar = $('.' + LobiPanel.PRIVATE_OPTIONS.toolbarClass);\n var toolbarHeight = toolbar.outerHeight() || 0;\n me.$el.animate({\n width: $(window).width(),\n height: $(window).height() - toolbarHeight,\n left: 0,\n top: 0\n }, me.$options.expandAnimation, function () {\n me.$el.css({\n width: '',\n height: '',\n right: 0,\n bottom: toolbarHeight\n });\n me.$el.addClass('panel-expanded');\n $('body').css('overflow', 'hidden');\n me.$body.css({\n width: me._calculateBodyWidth(me.$el.width()),\n height: me._calculateBodyHeight(me.$el.height())\n });\n me.disableDrag();\n if (me.isPinned()) {\n me._disableSorting();\n }\n me._saveState('fullscreen');\n me._triggerEvent(\"onFullScreen\");\n });\n return me;\n },\n\n /**\n * Collapse the panel to small size\n *\n * @returns {LobiPanel}\n */\n toSmallSize: function () {\n var me = this;\n me._triggerEvent(\"beforeSmallSize\");\n me._changeClassOfControl(me.$heading.find('[data-func=\"expand\"]'));\n var css = me.$el.attr('old-style').getCss();\n\n var toRemoveProperties = [\n 'position',\n 'z-index',\n 'left',\n 'top',\n 'width',\n 'height'\n ];\n\n //we get css properties from old-style (saved before expanding)\n //and we animate panel to this css properties\n me.$el.animate({\n position: 'absolute',\n left: css.left,\n top: css.top,\n width: css.width,\n height: css.height,\n right: css.right,\n bottom: css.bottom\n }, me.$options.collapseAnimation, function () {\n //we remove old-style as we do not need it\n me.$el.removeAttr('old-style');\n //if panel is pinned we also remove its style attribute and we\n //append panel in its parent element\n if (!me.$el.hasClass('panel-unpin')) {\n for (var i in toRemoveProperties) {\n me.$el.css(toRemoveProperties[i], '');\n }\n // me.$el.removeAttr('style');\n me._insertInParent();\n me._enableSorting();\n } else {\n if (me.$options.draggable) {\n me.enableDrag();\n }\n me.enableResize();\n }\n me.$el.removeClass('panel-expanded');\n $('body').css('overflow', 'auto');\n var bWidth = '';\n var bHeight = '';\n if (!me.isPinned()) {\n bWidth = me._calculateBodyWidth(me.getWidth());\n bHeight = me._calculateBodyHeight(me.getHeight());\n } else if (me.$options.bodyHeight !== 'auto') {\n bHeight = me.$options.bodyHeight;\n }\n if (me.isPinned()) {\n me._saveState('pinned');\n } else {\n me._updateUnpinnedState();\n }\n me.$body.css({\n width: bWidth,\n height: bHeight\n });\n me._triggerEvent(\"onSmallSize\");\n });\n return me;\n },\n\n /**\n * Toggles (changes to full screen size or to small size) the panel size\n *\n * @returns {LobiPanel}\n */\n toggleSize: function () {\n var me = this;\n if (me.isOnFullScreen()) {\n me.toSmallSize();\n } else {\n me.toFullScreen();\n }\n return me;\n },\n\n /**\n * Closes the panel. Removes it from document\n *\n * @param {number} animationDuration\n * @returns {LobiPanel}\n */\n close: function (animationDuration) {\n var me = this,\n animationDuration = animationDuration === undefined ? 100 : animationDuration;\n me._triggerEvent('beforeClose');\n me.$el.hide(animationDuration, function () {\n if (me.isOnFullScreen()) {\n $('body').css('overflow', 'auto');\n }\n me._triggerEvent('onClose');\n me.$el.remove();\n var footer = me._getFooterForMinimizedPanels();\n if (footer.children().length === 0) {\n footer.remove();\n }\n });\n return me;\n },\n\n /**\n * Moves unpinned panel to given position.\n * This method will do nothing if panel is pinned\n *\n * @param {number} left\n * @param {number} top\n * @param {number} animationDuration\n * @returns {LobiPanel}\n */\n setPosition: function (left, top, animationDuration) {\n var me = this,\n animationDuration = animationDuration === undefined ? 100 : animationDuration;\n\n //this method works only if panel is not pinned\n if (me.isPinned()) {\n return me;\n }\n me.$el.animate({\n 'left': left,\n 'top': top\n }, animationDuration);\n return me;\n },\n\n /**\n * Set the width of the panel\n *\n * @param {number} w\n * @param {number} animationDuration\n * @returns {LobiPanel}\n */\n setWidth: function (w, animationDuration) {\n var me = this,\n animationDuration = animationDuration === undefined ? 100 : animationDuration;\n if (me.isPinned()) {\n return me;\n }\n var bWidth = me._calculateBodyWidth(w);\n me.$el.animate({\n width: w\n }, animationDuration);\n me.$body.animate({\n width: bWidth\n }, animationDuration);\n return me;\n },\n\n /**\n * Set the height of the panel\n *\n * @param {number} h\n * @param {number} animationDuration\n * @returns {LobiPanel}\n */\n setHeight: function (h, animationDuration) {\n var me = this,\n animationDuration = animationDuration === undefined ? 100 : animationDuration;\n if (me.isPinned()) {\n return me;\n }\n var bHeight = me._calculateBodyHeight(h);\n me.$el.animate({\n height: h\n }, animationDuration);\n me.$body.animate({\n height: bHeight\n }, animationDuration);\n return me;\n },\n\n /**\n * Set size (width and height) of the panel\n *\n * @param {number} w\n * @param {number} h\n * @param {number} animationDuration\n * @returns {LobiPanel}\n */\n setSize: function (w, h, animationDuration) {\n var me = this,\n animationDuration = animationDuration === undefined ? 100 : animationDuration;\n if (me.isPinned()) {\n return me;\n }\n var bHeight = me._calculateBodyHeight(h);\n var bWidth = me._calculateBodyWidth(w);\n me.$el.animate({\n height: h,\n width: w\n }, animationDuration);\n me.$body.animate({\n height: bHeight,\n width: bWidth\n }, animationDuration);\n return me;\n },\n\n /**\n * Get the position of the panel.\n * Returns object where x is left coordinate and y is top coordinate\n *\n * @returns {Object}\n */\n getPosition: function () {\n var me = this;\n var offset = me.$el.offset();\n return {\n x: offset.left,\n y: offset.top\n };\n },\n\n /**\n * Get width of the panel\n *\n * @returns {number}\n */\n getWidth: function () {\n var me = this;\n return me.$el.width();\n },\n\n /**\n * Get height of the panel\n *\n * @returns {number}\n */\n getHeight: function () {\n var me = this;\n return me.$el.height();\n },\n\n /**\n * If panel is overlapped by another panel this panel will be shown on front\n * (this panel will overlap other panels)\n *\n * @returns {LobiPanel}\n */\n bringToFront: function () {\n var me = this;\n me._triggerEvent(\"beforeToFront\");\n var res = me._getMaxZIndex();\n if (res['id'] === me.$el.data('inner-id')) {\n return me;\n }\n me.$el.css('z-index', res['z-index'] + 1);\n me._triggerEvent(\"onToFront\");\n return me;\n },\n\n /**\n * Enable dragging of panel\n *\n * @returns {LobiPanel}\n */\n enableDrag: function () {\n var me = this;\n me.$el.draggable({\n handle: '.panel-heading',\n containment: me.$options.constrain,\n start: function () {\n me.$el.css('position', 'absolute');\n },\n stop: function () {\n me.$el.css('position', '');\n me._updateUnpinnedState();\n }\n });\n return me;\n },\n\n /**\n * Disable dragging of the panel\n *\n * @returns {LobiPanel}\n */\n disableDrag: function () {\n var me = this;\n if (me.$el.hasClass('ui-draggable')) {\n me.$el.draggable(\"destroy\");\n }\n return me;\n },\n\n /**\n * Enable resize of the panel\n *\n * @returns {LobiPanel}\n */\n enableResize: function () {\n var me = this;\n var handles = false;\n if (me.$options.resize === 'vertical') {\n handles = 'n, s';\n } else if (me.$options.resize === 'horizontal') {\n handles = 'e, w';\n } else if (me.$options.resize === 'both') {\n handles = 'all';\n }\n if (!handles) {\n return me;\n }\n me.$el.resizable({\n minWidth: me.$options.minWidth,\n maxWidth: me.$options.maxWidth,\n minHeight: me.$options.minHeight,\n maxHeight: me.$options.maxHeight,\n handles: handles,\n start: function () {\n me.$el.disableSelection();\n me._triggerEvent('resizeStart');\n },\n stop: function () {\n me.$el.enableSelection();\n me._triggerEvent('resizeStop');\n },\n resize: function () {\n var bHeight = me._calculateBodyHeight(me.$el.height());\n var bWidth = me._calculateBodyWidth(me.$el.width());\n me.$body.css({\n width: bWidth,\n height: bHeight\n });\n me._updateUnpinnedState();\n me._triggerEvent(\"onResize\");\n }\n });\n return me;\n },\n\n /**\n * Disable resize of the panel\n *\n * @returns {LobiPanel}\n */\n disableResize: function () {\n var me = this;\n if (me.$el.hasClass('ui-resizable')) {\n me.$el.resizable(\"destroy\");\n }\n return me;\n },\n\n /**\n * Start spinner of the panel loading\n *\n * @returns {LobiPanel}\n */\n startLoading: function () {\n var me = this;\n var spinner = me._generateWindow8Spinner();\n me.$el.append(spinner);\n var sp = spinner.find('.spinner');\n sp.css('margin-top', 50);\n return me;\n },\n\n /**\n * Stop spinner of the panel loading\n *\n * @returns {LobiPanel}\n */\n stopLoading: function () {\n var me = this;\n me.$el.find('.spinner-wrapper').remove();\n return me;\n },\n\n /**\n * Set url. This url will be used to load data when Reload button is clicked\n * or user calls .load() method without url parameter\n *\n * @param {string} url\n * @returns {LobiPanel}\n */\n setLoadUrl: function (url) {\n var me = this;\n me.$options.loadUrl = url;\n return me;\n },\n\n /**\n * Load data into .panel-body.\n * params object is in format\n * {\n * url: '', //Optional: load url\n * data: 'PlainObject or String', //Optional: A plain object or string of parameters which is sent to the server with the request.\n * callback: 'function' //Optional: callback function which is called when load is finished\n * }\n *\n * @param {Object} params\n * @returns {LobiPanel}\n */\n load: function (params) {\n var me = this;\n params = params || {};\n if (typeof params === 'string') {\n params = {url: params};\n }\n var url = params.url || me.$options.loadUrl,\n data = params.data || {},\n callback = params.callback || null;\n\n if (!url) {\n return me;\n }\n me._triggerEvent(\"beforeLoad\");\n me.startLoading();\n me.$body.load(url, data, function (result, status, xhr) {\n if (callback && typeof callback === 'function') {\n me.callback(result, status, xhr);\n }\n me.stopLoading();\n me._triggerEvent(\"loaded\", result, status, xhr);\n });\n return me;\n },\n\n /**\n * Destroy the LobiPanel instance\n *\n * @returns {jQuery}\n */\n destroy: function () {\n var me = this;\n me.disableDrag();\n me.disableResize();\n me.$options.sortable = false;\n me._enableSorting();\n me._removeInnerIdFromParent(me.innerId);\n me.$el.removeClass('lobipanel')\n .removeAttr('data-inner-id')\n .removeAttr('data-index')\n .removeData('lobiPanel');\n me.$heading.find('.dropdown').remove();\n return me.$el;\n },\n\n /**\n * Creates input field to edit panel title\n *\n * @returns {LobiPanel}\n */\n startTitleEditing: function () {\n var me = this;\n var title = me.$heading.find('.panel-title').text().trim();\n var input = $('
');\n input.on('keydown', function (ev) {\n if (ev.which === 13) {\n me.finishTitleEditing();\n } else if (ev.which === 27) {\n me.cancelTitleEditing();\n }\n });\n me.$heading.find('.panel-title')\n .data('old-title', title)\n .html(\"\").append(input);\n input[0].focus();\n input[0].select();\n me._changeClassOfControl(me.$heading.find('[data-func=\"editTitle\"]'));\n return me;\n },\n\n /**\n * Check if panel title is being edited (if it is in edit process)\n *\n * @returns {Boolean}\n */\n isTitleEditing: function () {\n var me = this;\n return me.$heading.find('.panel-title input').length > 0;\n },\n\n /**\n * Cancel the panel new title and return to previous title when it is changed but not saved\n *\n * @returns {LobiPanel}\n */\n cancelTitleEditing: function () {\n var me = this;\n var title = me.$heading.find('.panel-title');\n title.html(title.data('old-title'))\n .find('input').remove();\n me._changeClassOfControl(me.$heading.find('[data-func=\"editTitle\"]'));\n return me;\n },\n\n /**\n * Finish the panel title editing process and save new title\n *\n * @returns {LobiPanel}\n */\n finishTitleEditing: function () {\n var me = this,\n input = me.$heading.find('input');\n if (me._triggerEvent('beforeTitleChange', input.val()) === false) {\n return me;\n }\n\n me.saveParam('panelTitle', input.val());\n me.$heading.find('.panel-title').html(input.val());\n input.remove();\n me._changeClassOfControl(me.$heading.find('[data-func=\"editTitle\"]'));\n me._triggerEvent('onTitleChange', input.val());\n return me;\n },\n\n /**\n * Enable tooltips on panel controls\n *\n * @returns {LobiPanel}\n */\n enableTooltips: function () {\n var me = this;\n if ($(window).width() < 768) {\n return me;\n }\n var controls = me.$heading.find('.dropdown-menu>li>a');\n controls.each(function (index, el) {\n var $el = $(el);\n $el.attr('data-toggle', 'tooltip')\n .attr('data-title', $el.data('tooltip'))\n .attr('data-placement', 'bottom')\n ;\n });\n controls.each(function (ind, el) {\n $(el).tooltip({\n container: 'body',\n template: '
'\n });\n });\n return me;\n },\n\n /**\n * Disable tooltips on panel controls\n *\n * @returns {LobiPanel}\n */\n disableTooltips: function () {\n var me = this;\n var $links = me.$heading.find('.dropdown-menu>li>a');\n $links.each(function (ind, el) {\n var bsTooltip = $(el).data('bs.tooltip');\n if (bsTooltip) {\n $(el).tooltip('destroy');\n }\n });\n // me.$heading.find('.dropdown-menu>li>a').tooltip('destroy');\n return me;\n },\n\n _generateControls: function () {\n var me = this;\n var dropdown = me._generateDropdown();\n var menu = dropdown.find('.dropdown-menu');\n if (me.$options.editTitle !== false) {\n menu.append(me._generateEditTitle());\n }\n if (me.$options.unpin !== false) {\n menu.append(me._generateUnpin());\n }\n if (me.$options.reload !== false) {\n menu.append(me._generateReload());\n }\n if (me.$options.minimize !== false) {\n menu.append(me._generateMinimize());\n }\n if (me.$options.expand !== false) {\n menu.append(me._generateExpand());\n }\n if (me.$options.changeStyle !== false) {\n menu.append(me._generateChangeStyle());\n }\n if (me.$options.close !== false) {\n menu.append(me._generateClose());\n }\n menu.find('>li>a').on('click', function (ev) {\n ev.preventDefault();\n ev.stopPropagation();\n });\n return dropdown;\n },\n _generateDropdown: function () {\n var me = this;\n return $('
')\n .append('')\n .append('
');\n },\n _generateEditTitle: function () {\n var me = this;\n var options = me.$options.editTitle;\n var control = $('
');\n control.append('
');\n if (options.tooltip && typeof options.tooltip === 'string') {\n control.append('
' + options.tooltip + '');\n control.attr('data-tooltip', options.tooltip);\n }\n\n me._attachEditTitleClickListener(control);\n return $('
').append(control);\n },\n _attachEditTitleClickListener: function (control) {\n var me = this;\n control.on('mousedown', function (ev) {\n ev.stopPropagation();\n });\n control.on('click', function (ev) {\n ev.stopPropagation();\n me.hideTooltip(control);\n if (me.isTitleEditing()) {\n me.finishTitleEditing();\n } else {\n me.startTitleEditing();\n }\n });\n },\n\n hideTooltip: function ($el) {\n var bsTooltip = $el.data('bs.tooltip');\n\n if (bsTooltip) {\n $el.tooltip('hide');\n }\n return this;\n },\n _generateUnpin: function () {\n var me = this;\n var options = me.$options.unpin;\n var control = $('
');\n control.append('
');\n if (options.tooltip && typeof options.tooltip === 'string') {\n control.append('
' + options.tooltip + '');\n control.attr('data-tooltip', options.tooltip);\n }\n me._attachUnpinClickListener(control);\n return $('
').append(control);\n },\n _attachUnpinClickListener: function (control) {\n var me = this;\n //hide the tooltip\n control.on('mousedown', function (ev) {\n ev.stopPropagation();\n });\n control.on('click', function () {\n me.hideTooltip(control);\n me.doTogglePin();\n });\n },\n _generateReload: function () {\n var me = this;\n var options = me.$options.reload;\n var control = $('
');\n control.append('
');\n if (options.tooltip && typeof options.tooltip === 'string') {\n control.append('
' + options.tooltip + '');\n control.attr('data-tooltip', options.tooltip);\n }\n me._attachReloadClickListener(control);\n return $('
').append(control);\n },\n _attachReloadClickListener: function (control) {\n var me = this;\n control.on('mousedown', function (ev) {\n ev.stopPropagation();\n });\n control.on('click', function () {\n me.hideTooltip(control);\n me.load();\n });\n },\n _generateMinimize: function () {\n var me = this;\n var options = me.$options.minimize;\n var control = $('
');\n control.append('
');\n if (options.tooltip && typeof options.tooltip === 'string') {\n control.append('
' + options.tooltip + '');\n control.attr('data-tooltip', options.tooltip);\n }\n me._attachMinimizeClickListener(control);\n return $('
').append(control);\n },\n _attachMinimizeClickListener: function (control) {\n var me = this;\n control.on('mousedown', function (ev) {\n ev.stopPropagation();\n });\n control.on('click', function (ev) {\n ev.stopPropagation();\n me.hideTooltip(control);\n me.toggleMinimize();\n });\n },\n _generateExpand: function () {\n var me = this;\n var options = me.$options.expand;\n var control = $('
');\n control.append('
');\n if (options.tooltip && typeof options.tooltip === 'string') {\n control.append('
' + options.tooltip + '');\n control.attr('data-tooltip', options.tooltip);\n }\n me._attachExpandClickListener(control);\n return $('
').append(control);\n },\n _generateChangeStyle: function () {\n var me = this;\n var options = me.$options.changeStyle;\n var $control = $('
');\n $control.append('
');\n if (options.tooltip && typeof options.tooltip === 'string') {\n $control.append('
' + options.tooltip + '');\n $control.attr('data-tooltip', options.tooltip);\n }\n // me._attachExpandClickListener(control);\n\n var $dropdown = $('
').append($control);\n\n var $menu = $('
', {\n 'class': 'style-list'\n }).appendTo($dropdown);\n\n if (me.$options.styles) {\n for (var i = 0; i < me.$options.styles.length; i++) {\n var style = me.$options.styles[i];\n $menu.append('
');\n }\n }\n $menu.find('.style-item').on('click', function () {\n var $item = $(this);\n me.saveParam('panelStyle', {\n bg: $item.data('bg'),\n text: $item.data('text')\n });\n me.applyStyle($item.data('bg'), $item.data('text'));\n $menu.removeClass('opened');\n });\n\n $control.on('click', function () {\n var $this = $(this);\n var $parent = $this.closest('.style-change-item');\n $parent.find('.style-list').toggleClass('opened');\n });\n\n return $dropdown;\n },\n\n applyStyle: function (color, text) {\n var me = this;\n me.$heading.css('background-color', color);\n me.$heading.css('border-color', color);\n me.$heading.css('color', text);\n me.$el.css('border-color', color);\n },\n\n _createDropdownForStyleChange: function () {\n var me = this;\n var $dropdown = $('
', {\n 'class': 'dropdown'\n }).append(\n $('