Create Multifunctional Floating Panels - jsPanel

Create Multifunctional Floating Panels - jsPanel
File Size: 874 KB
Views Total: 23402
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

jsPanel is a jQuery dialog & popup plugin to create multifunctional, highly configurable, themeable, draggable and resizable floating panels (windows) on your web project.

The plugin can be used as modal window, dialog box, tooltip and even as hint. 

As of version 4.0.0 jsPanel is written in plain JavaScript, all dependencies are removed. You can download the jsPanel 4 here.

Table of contents:

Key Features:

  • Auto dismiss after a timeout.
  • Supports any HTML content.
  • AJAX & iframe content are supported as well.
  • Header controls & footer toolbar.
  • Built-in draggable and resizable interactions.

Dependencies (v3):

  • jQuery
  • jQuery UI & jQuery ui touch punch  (Required only when you intend to use jQuery UI's Draggable and Resizable functionalities)
  • Bootstrap 3 or Bootstrap 4 framework (Required only when you intend to use option.bootstrap)
  • Font Awesome Iconic Font (Required only when you intend to use the font-awesome iconfont)

Basic usage (v3):

1. Include the jsPanel plugin and other required resources on the webpage.

<!-- Required -->
<link rel="stylesheet" href="/path/to/source/jquery.jspanel.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/source/jquery.jspanel-compiled.js"></script>

<!-- OPTIONAL -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/cdn/font-awesome.min.css" />
<script src="/path/to/cdn/jquery-ui.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Create a basic floating panel that appends to the body element.

$.jsPanel();

3. Override the default options to create your own floating panels on the page.

$.jsPanel({

  // auto closes the panel after a timeout
  // sets a timeout here
  autoclose: false,

  // shows borders around the panel
  border: false,

  callback: false,

  // closes the panel by pressing ESC key
  closeOnEscape: false,

  // contaner element to hold the panel
  container: 'body',

  // any panel content here:
  // DOM element
  // array of elements
  // HTML string
  // jQuery object
  // function that returns an HTML string, DOM element(s) or jQuery object 
  content: false,

  /* loads content via ajax:
     contentAjax: {
       url:            'url/to/load',
       autoload:       true,
       autoresize:     true,
       autoreposition: true
     }
  */
  contentAjax: false,

  /*loads iframe content to the panel
    contentIframe: {
      width:  1200,
      height: 950,
      src:    'iframe.html',
      id: 'myID',
      classname: 'myClass',
      name:   'myFrame',
      style:  {'border': '10px solid #000'}
    }
  */
  contentIframe: false,

  // CSS overflow property
  contentOverflow: 'hidden',

  // content size
  contentSize: {
    width: 400,
    /* do not replace with "400 200" */
    height: 200
  },

  // allows to set double-click handlers for header, content and footer
  dblclicks: false,

  // time to wait before closing the panel
  delayClose: 0,

  // jQuery UI draggable configs
  draggable: {
    handle: 'div.jsPanel-headerlogo, div.jsPanel-titlebar, div.jsPanel-ftr',
    opacity: 0.8
  },

  // built-in draggable configs
  dragit: {
    axis: false,
    containment: false,
    grid: false,
    handles: '.jsPanel-headerlogo, .jsPanel-titlebar, .jsPanel-ftr.active',
    // do not set .jsPanel-titlebar to .jsPanel-hdr
    opacity: 0.8,
    start: false,
    drag: false,
    stop: false,
    disable: false,
    disableui: false
  },

  // jQuery UI resizable configs
  resizable: {
    handles: 'n, e, s, w, ne, se, sw, nw',
    autoHide: false,
    minWidth: 40,
    minHeight: 40
  },

  // built-in draggable configs
  resizeit: {
    containment: false,
    grid: false,
    handles: 'n, e, s, w, ne, se, sw, nw',
    minWidth: 40,
    minHeight: 40,
    maxWidth: 10000,
    maxHeight: 10000,
    start: false,
    resize: false,
    stop: false,
    disable: false,
    disableui: false
  },

  // shows footer toolbar
  footerToolbar: false,

  // shows header controls
  headerControls: {
    close: false,
    maximize: false,
    minimize: false,
    normalize: false,
    smallify: false,
    controls: 'all',
    iconfont: 'jsglyph'
  },

  // shows header logo
  headerLogo: false,

  // allows to remove the panel header
  headerRemove: false,

  // header title
  headerTitle: 'jsPanel',

  // shows header toolbar
  headerToolbar: false,

  // unique ID
  id: function id() {
    return "jsPanel-".concat(jsPanel.id += 1);
  },

  // margins to maintain when maximized
  maximizedMargin: [5, 5, 5, 5],

  // change the default minimize behavior
  minimizeTo: true,

  // panel size
  panelSize: { width: 430, height: 270 }

  // 'modal', 'hint', 'tooltip'
  paneltype: false,

  // panel position
  /*{
      my: 'center',
      at: 'center',
      of: 'window',
      minLeft: undefined,
      minTop: undefined,
      maxLeft: undefined,
      maxTop: undefined,
      offsetX: 0,
      offsetY: 0,
      modify: false,
      fixed: 'true',
      autoposition: false
    }
  position: 'center',

  // RTL mode
  rtl: false,

  // sets the panel to maximized, minimized after panel was created
  setstatus: false,

  // applies an animation to the panel when inserted into the document
  show: false,

  // your own template here
  template: false,

  // built-in themes: 'default', 'primary', 'info', 'success', 'warning' or 'danger'
  // Bootstrap themes: "bootstrap-default", "bootstrap-primary", "bootstrap-info", "bootstrap-success", "bootstrap-warning" and "bootstrap-danger"
  // or any colors
  theme: 'default'
  
});

4. Callback functions.

$.jsPanel({

  // a function or an array of functions
  // fired after the jsPanel was inserted into the document.
  callback: false,

  // fired before the jsPanel is closed
  onbeforeclose: function (panel) {
    // do something
  },

  // fired before the jsPanel is maximized
  onbeforemaximize: function (panel) {
    // do something
  },

  // fired before the jsPanel is minimized
  onbeforeminimize: function (panel) {
    // do something
  },

  // fired before the jsPanel is restored
  onbeforenormalize: function (panel) {
    // do something
  },

  // fired before the jsPanel is smallified/unsmallified
  onbeforesmallify: function (panel) {
    // do something
  },
  onbeforeunsmallify: function (panel) {
    // do something
  },

  // fired before the jsPanel is resized
  onbeforeresize: function (panel) {
    // do something
  },

  // fired after the jsPanel is closed
  onclosed: function (panel) {
    // do something
  },

  // fired after the jsPanel is maximized
  onmaximized: function (panel) {
    // do something
  },

  // fired after the jsPanel is minimized
  onminimized: function (panel) {
    // do something
  },

  // fired after the jsPanel is restored
  onnormalized: function (panel) {
    // do something
  },
  
  // fired after the jsPanel is resized
  onresized: function (panel) {
    // do something
  },

  // fired after the jsPanel is smallified/unsmallified
  onsmallified: function (panel) {
    // do something
  },
  onunsmallified: function (panel) {
    // do something
  },

  // fired on window resize
  onwindowresize: false

});

5. API methods.

// close the panel
instance.close();

// close all child panels
instance.closeChildpanels();  

// reload content
instance.contentReload(callback);

// resize content
instance.contentResize(callback);

// enable/disable dragit interaction
instance.dragit();

// bring the panel to the front
instance.front(callback);

// show/hide header controls
instance.headerControl(control [, action]);

// set/get header title
instance.headerTitle(title); 

// maximize the panel
instance.maximize(callback);  

// minimize the panel
instance.minimize(callback)  

// restore the panel
instance.normalize(callback);

// re-position the panel
instance.reposition(position, callback);  

// resize the panel
instance.resize(width, height [, callback]);

// enable/disable resizeit interaction
instance.resizeit();

// change the theme
instance.setTheme(theme, callback);  

// smallify the panel
instance.smallify(callback);

// add tootlbar
instance.toolbarAdd(location, toolbar [, callback]);

Basic usage (v4):

1. Include the jsPanel plugin and other required resources on the webpage.

<!-- Core Stylesheet -->
<link rel="stylesheet" href="dist/jspanel.css">
<!-- Core JavaScript -->
<script src="dist/jspanel.js"></script>
<!-- optional extensions -->
<script src="dist/extensions/contextmenu/jspanel.contextmenu.js"></script>
<script src="dist/extensions/hint/jspanel.hint.js"></script>
<script src="dist/extensions/modal/jspanel.modal.js"></script>
<script src="dist/extensions/tooltip/jspanel.tooltip.js"></script>
<script src="dist/extensions/dock/jspanel.dock.js"></script>

2. Or import the jsPanel as an ES module.

// import main js
import { jsPanel } from './es6module/jspanel.min.js';

// import extensions as needed
import './es6module/extensions/hint/jspanel.hint.min.js';
import './es6module/extensions/modal/jspanel.modal.min.js';
import './es6module/extensions/contextmenu/jspanel.contextmenu.min.js';
import './es6module/extensions/tooltip/jspanel.tooltip.min.js';
import './es6module/extensions/layout/jspanel.layout.min.js';
import './es6module/extensions/dock/jspanel.dock.min.js';

3. Create a basic panel.

jsPanel.create({
  // options here
});

4. Customize the panel with the following options.

jsPanel.create({

  // adds additional close control to the panel
  addCloseControl: false,

  // animations you want to use
  animateIn: 'jsPanelFadeIn'
  animateOut: 'jsPanelFadeOut'

  // auto closes the panel after a timeout
  // sets a timeout here
  autoclose: false,

  // shows borders around the panel
  border: false,

  // border radius
  borderRadius: 6,

  // box shadow of the panel
  boxShadow: 3,

  // closes the panel by pressing ESC key
  closeOnEscape: false,

  // configs here
  config: {},

  // contaner element to hold the panel
  container: 'body',

  // any panel content here:
  // DOM element
  // array of elements
  // HTML string
  // jQuery object
  // function that returns an HTML string, DOM element(s) or jQuery object 
  content: false,

  /* loads content via ajax:
     contentAjax: {
       url:            'url/to/load',
       autoload:       true,
       autoresize:     true,
       autoreposition: true
     }
  */
  contentAjax: false,

  /*loads data via Fetch API
    contentFetch: {
      resource: 'content.html',
      bodyMethod: 'text',
      evalscripttags: true,
      autoresize: true,
      autoreposition: true,
      done: function (panel, response) {
        panel.content.innerHTML = response;
      },
      beforeSend: function (panel) {
        // ...
      },
    },
  */
  contentFetch: false,

  // CSS overflow property
  contentOverflow: 'hidden',

  // content size
  contentSize: {
    width: 400,
    /* do not replace with "400 200" */
    height: 200
  },

  // stores optional custom data
  data: null,

  // built-in draggable configs
  dragit: {
    axis: false,
    containment: false,
    cursor: 'move',
    disable: false,
    disableOnMaximized: true,
    grid: false, // Snaps the panel to a grid, e.g. [10, 10]
    handles: '.jsPanel-headerlogo, .jsPanel-titlebar, .jsPanel-ftr.active',
    // do not set .jsPanel-titlebar to .jsPanel-hdr
    opacity: 0.8,
    start: false, // function(panel, paneldata, event)
    drag: false, // function(panel, paneldata, event)
    stop: false, // function(panel, paneldata, event)
    drop: false // {dropZones:  ['.drop-demo .drop-target'], callback: function(panel, target, source) {...}}
    snap: {
      callback: (panel) => {
        // do something
      },
      snapLeftTop: (panel) => {
        // or boolean
      },
      snapCenterTop: (panel) => {
        // or boolean
      },
      snapRightTop: (panel) => {
        // or boolean
      },
      snapRightCenter: (panel) => {
        // or boolean
      },
      snapRightBottom: (panel) => {
        // or boolean
      },
      snapCenterBottom: (panel) => {
        // or boolean
      },
      snapLeftBottom: (panel) => {
        // or boolean
      },
      snapLeftCenter: (panel) => {
        // or boolean
      },
      containment: true,
      repositionOnSnap: true,
      resizeToPreSnap: true,
      sensitivity: 70,
      trigger: 'panel', // or 'pointer'
      active: 'both', // or 'inside'
    }
    
  },

  // shows footer toolbar
  footerToolbar: false,

  // shows header controls
  headerControls: {
    close: false,
    maximize: false,
    minimize: false,
    normalize: false,
    smallify: false,
    size: 'md',
    add: null // add custom controls here
  },

  // shows header logo
  headerLogo: false,

  // allows to remove the panel header
  header: true,

  // header title
  headerTitle: 'jsPanel',

  // add a header toolbar
  // String, Array, Node or Function
  headerToolbar: false,

  // Iconic Font You Want To Use
  // String or Array
  iconfont: false,

  // unique ID
  id: function id() {
    return "jsPanel-".concat(jsPanel.id += 1);
  },

  // margins to maintain when maximized
  maximizedMargin: [5, 5, 5, 5],

  // limits the dimensions of a maximized panel
  // e.g. maximizedMargin: [61, 5, 5, 5]
  maximizedMargin: 0,

  // change the default minimize behavior
  minimizeTo: true,

  // opacity
  opacity: undefined,

  // panel size
  panelSize: { width: 430, height: 270 }

  // 'standard', 'contextmenu', 'error'
  // 'hint', 'modal', 'tooltip'
  paneltype: false,

  // panel position
  /*{
      my: 'center',
      at: 'center',
      of: 'window',
      minLeft: undefined,
      minTop: undefined,
      maxLeft: undefined,
      maxTop: undefined,
      offsetX: 0,
      offsetY: 0,
      modify: false,
      autoposition: false
    }
  position: 'center',

  // built-in resizable configs
  resizeit: {
    containment: false,
    aspectRatio: false,
    grid: false,
    handles: 'n, e, s, w, ne, se, sw, nw',
    minWidth: 40,
    minHeight: 40,
    maxWidth: 10000,
    maxHeight: 10000,
    start: false,
    resize: false,
    stop: false,
    disable: false,
  },

  // RTL mode
  rtl: false,

  // 'maximized', 'minimized', 'smallified' or 'smallifiedmax'
  setstatus: false,

  // your own template here
  template: false,

  // sync 3 margin options
  syncMargins: false,

  // built-in themes: 'default', 'primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark' and 'none'
  // Bootstrap themes: "bootstrap-default", "bootstrap-primary", "bootstrap-info", "bootstrap-success", "bootstrap-warning" and "bootstrap-danger"
  // or any colors
  theme: 'default'
  
});

5. Callback functions.

jsPanel.create({

  // a function or an array of functions
  // fired after the jsPanel was inserted into the document.
  callback: false,

  // fired before the jsPanel is closed
  onbeforeclose: function (panel, status, closedByUser) {
    // do something
  },

  // fired before the jsPanel is maximized
  onbeforemaximize: function (panel, status) {
    // do something
  },

  // fired before the jsPanel is minimized
  onbeforeminimize: function (panel, status) {
    // do something
  },

  // fired before the jsPanel is restored
  onbeforenormalize: function (panel, status) {
    // do something
  },

  // fired before the jsPanel is smallified/unsmallified
  onbeforesmallify: function (panel, status) {
    // do something
  },
  onbeforeunsmallify: function (panel, status) {
    // do something
  },

  // fired before the jsPanel is resized
  onbeforeresize: function (panel, status, closedByUser) {
    // do something
  },

  // fired after the jsPanel is closed
  onclosed: function (panel, closedByUser) {
    // do something
  },

  // fired after a panel fronted
  onfronted: function(panel, status){
    // do something
  }

  // fired after the jsPanel is maximized
  onmaximized: function (panel, status) {
    // do something
  },

  // fired after the jsPanel is minimized
  onminimized: function (panel, status) {
    // do something
  },

  // fired after the jsPanel is restored
  onnormalized: function (panel, status) {
    // do something
  },

  // fired after the jsPanel is smallified/unsmallified
  onsmallified: function (panel, status) {
    // do something
  },
  onunsmallified: function (panel, status) {
    // do something
  },

  // fired after a panel's status changed
  onstatuschange: function(panel, status){
    // do something
  },

  // fired after parent element resized
  onparentresize: function (panel, parentsize) {
    // do something
  }

  // fired on window resize
  onwindowresize: function (event, panel) {
    // do something
  }
  
});

6. API methods.

// add a custom control to the controlbar
instance.addControl({
  html: '<span class="far fa-bars"></span>',
  name: 'menu',
  ariaLabel: '',
  handler: function(panel, control){
    panel.content.innerHTML = 'You clicked the "menu" control';
  },
  position: 1, // 1. smallify; 2. minimize; 3. normalize; 4. maximize; 5. close
  afterInsert: function(control){
    // do with the control whatever is needed ...
  }
});

// converts a DOMString to a DocumentFragment
instance.strToHtml(str);

// place: 'header' or 'footer'
instance.addToolbar(place, toolbar [, callback]);

// close the panel
instance.close();

// close all child panels
instance.closeChildpanels();  

// remove all content from the content section of the panel the method was called on
instance.contentRemove([callback]);

// enable/disable dragit interaction
instance.dragit();

// bring the panel to the front
instance.front(callback);

// return a NodeList (versions < 4.5.0 returned an array) with all childpanels of the panel the method was called on
instance.getChildpanels(callback);

// check if is child panel
instance.isChildpanel(callback);

// maximize the panel
instance.maximize(callback);  

// minimize the panel
instance.minimize(callback)  

// restore the panel
instance.normalize(callback);

// check where a panel is positioned relative to reference and return an object
instance.overlaps(reference[, elmtBox, event]);

// re-position the panel
instance.reposition(position, callback);  

// resize the panel
instance.resize(width, height [, callback]);

// enable/disable resizeit interaction
instance.resizeit();

// set CSS border of an existing panel.
instance.setBorder(value);  

// set CSS border-radius of an existing panel.
instance.setBorderRadius(value);  

// disables, enables, removes, hides or shows a control from an existing panel
// Control: "close", "maximize", "normalize", "minimize" or "smallify"
// action: "remove", "hide", "disable", "enable", "show"
instance.setControlStatus(control, action [, callback]);  

// set header logo
instance.setHeaderLogo(logo [, callback]);

// set header title
instance.setHeaderTitle(title [, callback]);

// change the theme
instance.setTheme(theme, callback);  

// smallify the panel
instance.smallify(callback);

// unsmallify a panel
instance.unsmallify([callback]);

7. Properties.

// panel content
instance.content

// controls
panel.controlbar

// returns the element the panel can be dropped into or false
drag: function() {
  this.content.innerHTML = '<p>#' + this.droppableTo.id + '</p>';
}

// Returns a string like 'left-top' with the position a panel can snap to
drag: function () {
  this.content.innerHTML = '<p>panel.snappableTo is: ' + this.snappableTo + '</p>';
},

// Returns a string like 'left-top' with the position a panel actually snapped to
stop: function () {
  this.content.innerHTML = '<p>panel.snapped is: ' + this.snapped + '</p>';
},

// footer content
instance.footer

// header content
instance.header

// headerbar content
instance.headerbar

// header logo
instance.headerlogo

// header title
instance.headertitle

// header title
instance.headertitle

// header toolbar content
instance.headertoolbar

// returns the configuration object of a panel after the panel defaults were merged with the configuration
instance.options

// returns a string with the current status of an existing panel.
instance.status

// titlebar
instance.titlebar

8. Events.

// fired whenever a panel is fronted
document.addEventListener('jspanelfronted', handler, false);

// fired when the panel is fully rendered
document.addEventListener('jspanelloaded', handler, false);

// fired before a panel is closed
document.addEventListener('jspanelbeforeclose', handler, false);

// fired befor a panel is maximized
document.addEventListener('jspanelbeforemaximize', handler, false);

// fired befor a panel is minimize
document.addEventListener('jspanelbeforeminimize', handler, false);

// firedbefor a panel is normalized
document.addEventListener('jspanelbeforenormalize', handler, false);

// fired befor a panel is smallified
document.addEventListener('jspanelbeforesmallify', handler, false);

// fired befor a panel is unsmallified
document.addEventListener('jspanelbeforeunsmallify', handler, false);

// fired after a panel is closed
document.addEventListener('jspanelclosed', handler, false);

// fired after a panel is closed by user
document.addEventListener('jspanelcloseduser', handler, false);

// fired after a panel is maximized
document.addEventListener('jspanelmaximized', handler, false);

// fired after a panel is minimized
document.addEventListener('jspanelminimized', handler, false);

// fired after a panel is normalized
document.addEventListener('jspanelnormalized', handler, false);

// fired after a panel is smallified
document.addEventListener('jspanelsmallified', handler, false);

// fired after a maximized panel is smallified
document.addEventListener('jspanelminimized', handler, false);

// fired whenever a panel changes its status
document.addEventListener('jspanelstatuschange', handler, false);

// fired when start dragging
document.addEventListener('jspaneldragstart', handler, false);

// fired when dragging
document.addEventListener('jspaneldrag', handler, false);

// fired when stop dragging
document.addEventListener('jspaneldragstop', handler, false);

// fired when start resizing
document.addEventListener('jspanelresizestart', handler, false);

// fired when resizing
document.addEventListener('jspanelresize', handler, false);

// fired when stop resizing
document.addEventListener('jspanelresizestop', handler, false);

Changelog:

v4.11.4 (2021-04-10)

  • bugfix in dragit interaction
  • improved panel positioning, dragit and snap features in order to allow for scrollbars
  • added option parentPanelFront to the tooltip configuration options (tooltip extension updated to v1.4.0)

v4.11.3 (2021-02-04)

  • bugfix in the code for the resizeit interaction reducing memory leaks.
  • bugfix when using the dock extension a docked panel:
  • bugfix layout extension: jsPanel.layout.restoreId now returns the restored panel
  • added parameter closeOnMouseleave in contextmenu extension

v4.11.2 (2020-12-09)

  • bugfix in the code for the dragit interaction reducing memory leaks

v4.11.1 (2020-11-23)

  • bugfix in maximize() method

v4.11.0 stable (2020-11-20)

  • renamed panel property autocloseProgressbar to progressbar. The old property name remains usable for compatibility.
  • bugfix in option onwindowresize
  • various internal improvements in js and css

v4.11.0 beta (2020-06-17)

  • added method jsPanel.strToHtml(str) converting a DOMString to a DocumentFragment.
  • added option opacity
  • bugfix in modal extension concerning the use of onclosed callback.
  • bugfix in autoposition parameter of option position.
  • updated jsPanel.ajax() in order to improve its usability as general purpose AJAX tool.
  • This update might require a change in your code if you use jsPanel.ajax() and/or option contentAjax.
  • updated jsPanel.fetch() in order to improve its usability as general purpose Fetch tool.
  • This update might require a change in your code if you use jsPanel.fetch() and/or option contentFetch.
  • updated option contentAjax optionally loads only a page fragment.
  • updated CSS for controlbar
  • updated header title is now wrapped in a <div> instead of a <span>
  • updated contextmenu extension due to changes in jsPanel.ajax().
  • updated dock extension internally. Should not affect existing code.
  • disabled the use of the Pointer Events API. So for now only Touch and Mouse events are used by a panels controls and dragit/resizeit interactions.

v4.10.1 (2020-05-01)

  • Bugs fixed

v4.10.1 (2020-04-09)

  • bugfix in autoposition feature of option.position
  • updated datepicker extension

v4.10.0 (2020-03-10)

  • bugfix in the resizeit functionality
  • fixed CSS issue concerning header logo in minimized panel
  • added method jsPanel.toggleClass()
  • added option data
  • updated layout extension
  • updated all jsPanel events (jspanelloaded, jspanelclosed, etc.) are now cancelable

v4.9.5 (2020-02-02)

  • bugfix in option resizeit parameter aspectRatio when using modifier keys
  • fixed/improved some minor code issues

v4.9.3/4 (2020-01-16)

  • Fixed an issue with package.json

v4.9.2 (2020-01-15)

  • updated events jspanelclosed and jspanelcloseduser
  • updated dock extension: master AND slave panels get the same z-index value if either panel is fronted. Recoded event handling within the extension.
  • updated panel template to fix an issue with IE11

v4.9.1 (2019-12-12)

  • fixes a typo in the js files of the folder es6module

v4.9.0 (2019-12-10)

  • added jsPanel events: implemented event property panel referring to the panel firing the event
  • added dragit.snap parameter active
  • added almost all option dragit and resizeit parameters are now editable for already existing panels
  • added option maximizedMargin is now editable for existing panels
  • added first implementation of dragit.drop allowing to move a panel from its current parent element to another one
  • added SHIFT modifier key action to the resizeit interaction
  • updated option resizeit modifier key functionality
  • updated options dragit and resizeit: the start, drag/resize and stop callbacks now receive the same argument paneldata (instead of args position/size) with css left, top, width and height data
  • improved handling of contentSize:"auto" / panelSize:"auto" when combined with autoclose
  • bugs fixed

v3.11.3 (2019-11-27)

  • Use of panel controls and built-in dragit/resizeit interactions are limited to the left mouse button (if a mouse is used).

4.8.0 (2019-11-08)

  • bugfix in option resizeit and panel method resize()
  • bugfix in method jsPanel.close()
  • added setting "content" to parameter aspectRatio of option resizeit in order to maintain the aspect ratio of the content section while resizing a panel
  • added support for Font Awesome duotone icons to option iconfont
  • added modifier keys to the resizeit feature
  • updated z-index handling in modal extension
  • updated handling of iframes in the content section while dragging/resizing a panel
  • updated event sequence: jspanelcloseduser is now fired before jspanelclosed
  • updated option onclosed callback receives a second argument closedByUser set to true if the panel is closed by user action
  • updated option onbeforeclose callback receives a third argument closedByUser set to true if the panel is closed by user action
  • updated modal extension due to the updated method jsPanel.close()

4.7.0 (2019-06-18)

  • bugfix in option dragit
  • bugfix in option resizeit
  • bugfix in method normalize()
  • bugfix in method resize()
  • bugfix in jsPanel.addScript()
  • bugfix in the contextmenu extension
  • bugfix in the dock extension
  • completely recoded methods handling option position
  • completely recoded options onwindowresize and onparentresize
  • added option addCloseControl to add an additional close control to the
  • panel (might be handy if the header section is removed)
  • added a customizable progressbar to option autoclose
  • added method addControl() to add custom controls to the controlbar of existing panels
  • added tooltip method remove() in order to remove a handler triggering a specific tooltip
  • added polyfill Number.isInteger() to support IE11
  • updated option headerControls in order to add custom controls
  • option theme: when theme: "none" or the method setTheme() is used
  • properties assigned via options border and/or borderRadius remain untouched
  • reworked SVG icons for the controls
  • updated methods setBorder() and setBorderRadius() are now available to
  • existing panels in order to set/change CSS border/borderRadius
  • updated options border and borderRadius
  • updated tooltip extension: due to new positioning methods
  • updated layout extension: added optional use of sessionStorage instead of localStorage
  • updated hint extension: due to updated header controls
  • various internal bugfixes

4.6.0 (2019-03-27)

  • bugfix in option.dragit.snap concerning use of trigger: 'pointer'
  • bugfix concerning jspaneldragstop/jspanelresizestop events
  • bugfix in method front()
  • bugfix in tooltip extension
  • added theme modifier 'filleddark'
  • added parameter size to option headerControls in order to set size of controls
  • added some more return values to method overlaps()
  • added jsPanel.errorReporting to turn off/on error jsPanel reporting
  • various minor fixes and improvements

4.5.0 (2019-02-12)

  • jsPanel now uses pointer events if supported
  • bugfix - recoded the complete close() function to fix a long standing bug
  • bugfix in jsPanel.position() concerning the use of the dock extension
  • bugfix in minimize() concerning the use of an image as background
  • bugfix in option dragit
  • bugfix in tooltip extension
  • additional built-in themes
  • updated built-in theme colors
  • all built-in themes are are now "normal" color themes → less CSS
  • recoded bootstrap theme support → no more bootstrap adjustments in jspanel.css needed
  • option theme can now be used with an object as value → more theming options and better support of images (includes css gradients) as panel background
  • reworked built-in controls icons, updated CSS accordingly and changed hover effect of controls
  • added option onparentresize to autoreposition childpanels on various resize actions of the parentpanel
  • added parameter status to the callbacks onbeforemaximize, onmaximized etc.
  • added parameter options 'hide' and 'show' to panel method setControlStatus() parameter action
  • added optional callback function to panel method getChildpanels() and the method now returns a NodeList (instead of an array)
  • added optional callback function to panel method isChildpanel()
  • added support for setting option.position.of in a position shorthand string
  • various minor fixes/improvements in js and css

4.4.0 (2018-11-30)

  • added theme modifier fillcolor to specify a custom background color for the content section
  • updated option border accepts all color names usable with option theme
  • updated method .overlaps()
  • bugfix in option resizeit
  • bugfix in option onwindowresize
  • bugfix in option dragit concerning option onwindowresize
  • updated start, stop, drag/resize callbacks in options dragit/resizeit now additionally get the event object as argument
  • added polyfill for String.prototype.includes()
  • added CommonJS module exports

4.3.0 (2018-11-11)

  • added event jspanelcloseduser which is fired when a panel is closed using the header control
  • added panel method .overlaps()
  • added parameter aspectRatio to option resizeit
  • updated panel method .close() - it now has a return value depending on whether the panel was closed successfully or not
  • option.container default value is changed to 'window'. This might need a change in existing code when container: doccument.body is used even though this was the default previously
  • option.maximizedMargin now accepts a function as value
  • option.theme supports color names derived from the Material Design Color System like 'bluegray700', 'orangeA400' etc.
  • options position, dragit and resizeit now correctly position, drag and resize panels appended to a container using css transform: scale() if both container and panel are scaled
  • bugfix in global color methods
  • various tweaks in css and js

4.2.1 (2018-09-15)

  • fix in methods setHeaderLogo() and setHeaderTitle() - logo and title are now updated in minimized replacement as well
  • fix in css concerning only IE11 when using very long title texts (controls were pushed out of panel boundaries)
  • fix in options dragit and resizeit
  • added: All parameters of option position now accept a function as value

4.1.2 (2018-08-13)

  • fix in options dragit and resizeit - handler was not unbound when mouse cursor came over a <object> tag in content section of a jsPanel
  • added click on modal backdrop will close a modal jsPanel
  • changed option.closeOnEscape is set to true by default for a modal jPanel

4.1.1 (2018-07-26)

  • fixed jspanel.min.js to make it work with IE11
  • fixed CSS and JS to improve compatibility with Bootstrap > 4.1.2
  • fix in the internal function applying a arbitrary theme
  • replaced some wrong files in the folder es6module

4.1.0 (2018-07-24)

  • improved method .smallify()
  • added method jsPanel.addScript() in order to add a script to the document
  • added option borderRadius applies a css border-radius to the panel
  • when using a mouse draging/resizing and all controls of a panel are now limited to the left mouse button
  • fix for IE

4.0.0 (2018-05-23)

  • bugfix in the dock extensions
  • bugfix in the function creating the minimized replacement
  • option resizeit defaults of minWidth and minHeight set to 128
  • various tweaks in css and js

4.0.0-beta.5 (2018-04-19)

  • new events jspaneldragstart, jspaneldrag, jspaneldragstop, jspanelresizestart, jspanelresize, jspanelresizestop
  • new extension dock extending a jsPanel with the method .dock(). This method allows to dock one or more slave panels to a master panel. Basically that means a slave panel is dragged, maximized, normalized, minimized, closed and optionally resized together with the master panel it's docked to.
  • bugfix in option dragit
  • bugfix in extension layout
  • bugfix in jspanel.css
  • bugfix in CSS for Right-To-Left panels
  • removed CSS border-radius settings from themes

v3.11.1 (2017-11-22)

  • options dragit/resizeit on touch devices now work with touch AND mouse
  • the header logo now is also a default drag handle

v3.11.0 (2017-10-22)

  • option.position extended with parameters minLeft, maxLeft, minTop and maxTop
  • bugfix in options dragit and resizeit when panel content includes one or more iframes
  • various minor bugfixes

v3.10.0 (2017-08-19)

  • Added options dragit and resizeit callbacks start, drag/resize and stop receive second argument with position/size object
  • Added parameter disableOnMaximized for option.dragit
  • Improved compatibility of options dragit and resizeit on mobile devices

v3.9.3 (2017-07-17)

  • Fixed panel did not front on click in header section on some browsers

v3.9.2 (2017-06-28)

  • Fixed issue with option.dragit in combination with option.onwindowresize
  • Fixed issue with options dragit/resizeit (panel is now properly fronted when starting a drag or resize operstion or when clicking the header section)
  • Fixed issue in optio.resizeit (panel "glued" to mouse in some situations)
  • Fixed: When the content section of a jsPanel contains another document complete with DTD, HTML tag etc. the panel sometimes "glued" to the mousecursor after draging/resizing the panel with the built-in dragit/resizeit interactions

v3.9.0 (2017-06-17)

  • Fixed: When the content section of a jsPanel contains another document complete with DTD, HTML tag etc. the panel sometimes "glued" to the mousecursor after draging/resizing the panel with the built-in dragit/resizeit interactions

v3.9.0 (2017-05-29)

  • jsPanel script now works also after calling $.noConflict()
  • Added: new grid option for options dragit and resizeit
  • improved handling of options object passed to $.jsPanel()
  • minified js files created via butternut

v3.8.1 (2017-05-10)

  • Bugfix in option.dragit and option.resizeit when using option.position.of

v3.8.0 (2017-04-26)

  • Added: option.panelSize to set the dimensions of the complete panel (option.contentSize sets only the dimensions of the content section)
  • Added: method jsPanel.contextmenu(elmt, config) to easily use jsPanel as context menu
  • Added: methods .dragit() and .resizeit() to disable/reenable dragit/resizeit interactions of existing panels
  • Added: parameter 'disable' to options dragit and resizeit to create panels with the interactions dragit and/or resizeit initialized but disabled until reenabled again
  • Added: positioning can be completely turned off with setting option.position to a value evaluating to false
  • Added: parameters autoresize and autoposition to option.contentAjax
  • Fixed: option.maximizedMargin properties now accept 0 values when using an object
  • Improved support of mobile devices (especially Android) concerning the built-in draggable and resizable interactions (option.dragit and option.resizeit)
  • Improved support of option.contentSize.width/height set to "auto" when used together with option.contentAjax
  • Improvements in CSS and some internal methods

v3.7.0 (2017-03-02)

  • small adjustment of css colors when hovering controls of built-in themes
  • option.headerControls: added option to use custom iconset for the controls
  • css: added flexbox vendor prefixes
  • removed the polyfills

v3.6.1 (2017-02-08)

  • bugfix in internal function building header/footer toolbar when using a space seperated list of classnames to add

v3.6.0 (2017-02-03)

  • css various minor tweaks
  • js various minor tweaks
  • bugfix in internal functions responsible for applying a theme
  • bugfix in option.show
  • new option.closeOneEscape to enable closeOnEscape for individual panels instead of the global jsPanel.closeOnEscape

v3.5.0 (2016-12-08)

  • css fix affecting only childpanels (panels that are appended to content section of other panel)
  • css tweaks for minimized replacements, panels without header/footer section
  • css/js tweaks for header logos
  • option.template now works also within a predefined configuration used with option.config
  • option.maximizedMargin now also accepts a configuration passed as array
  • option.maximizedMargin array can be used to synchronize maximizedMargin, option.dragit.containment and option.resizeit.containment
  • new: option.position parameter false to skip positioning completely
  • jsPanel.closeOnEscape now also accepts a string "closeparent" to directly close a parentpanel

v3.4.1 (2016-11-04)

  • bugfix in option.border
  • new added parameter resize to method .resize() in order to allow passing values for content section size instead of panel size
  • a few internal code improvements

v3.4.0 (2016-10-28)

  • .setTheme() and option.theme can now be used with a value of none. Creates an all white panel without any theme related classes/styles applied
  • .setTheme() and option.theme added support for Material Design for Bootstrap themes
  • .close() added parameters skipOnbeforeClose and skipOnclosed
  • new option.minimizeTo allows to specify a container a minimized panel is appended to or prevents a minimized replacement from being created at all
  • new option.delayClose allows to set a delay when closing a panel (useful when you want apply an animation before the panel is actually removed)
  • new option.border now supports passing a border-color overriding the theme color which would otherwise be used as border-color
  • new: support for Material icons for the controls
  • various internal code changes and minor bugfixes

v3.3.1 (2016-09-17)

  • Bugfix: With version 3.3.0 some tooltip connectors had no background color depending on configuration
  • Code: In the js development file (jquery.jspanel.js) most occurrences of standard string concatenations are replaced with template literals

v3.3.0 (2016-09-12)

  • CSS for header section (including header toolbar) and footer toolbar is modified. In case you use header and/or footer toolbars you might have to change custom css you applied.
  • new option.headerLogo to add a logo to the top left corner of the panel

v3.2.0 (2016-08-26)

  • new option.onwindowresize allows to enable panel responsivenes to a window resize event
  • method .reposition() now supports repositioning of tooltips (including the connector)
  • a lot of internal code improvements

v3.1.1 (2016-07-25)

  • Bugfix: Controls did not work on some mobile browsers.

v3.1.0 (2016-07-13)

  • better support of using "auto" for width/height values
  • .resize() now optionally accepts a config object with the props: width, height, minwidth, maxwidth, minheight, maxheight and callback
  • calling .resize() without any argument is the same as calling .resize( config ) where all config parameters are set to their defaults

v3.0.1 (2016-06-25)

  • Method maximize(). Method can now be called even if a panel is already maximized. Better support in IE11 and EDGE
  • method close() improved
  • option.onmaximized callback removed from method smallify()
  • option.onnormalized callback removed from method smallify() and after a resize with mouse
  • bugfix for smallified panels that are resized only horizontally
  • bugfix for minimized panels in IE11
  • new properties of the global jsPanel object: jsPanel.isIE is true if browser is MS IE11; jsPanel.isEdge is true if browser is MS EDGE.

v3.0.0 (2016-06-13)

  • use of some ES2015/ES2016 features. The download package includes a JavaScript file transpiled to ES5 using Babel.
  • use of CSS flex for header and footer sections
  • completely new positioning function with other syntax
  • completely new event handling
  • no more support for IE <= 10

v2.6.1 (2016-01-24)

  • bugfix in option.position when using the number 0 as value for either left or top
  • new option.onbeforeclose takes a function to execute before the jsPanel closes. If function returns false panel will not close.
  • new option.onbeforemaximize takes a function to execute before the jsPanel maximizes. If function returns false panel will not maximize.
  • new option.onbeforeminimize takes a function to execute before the jsPanel minimizes. If function returns false panel will not minimize.
  • new option.onbeforenormalize takes a function to execute before the jsPanel normalizes. If function returns false panel will not normalize.
  • new option.onclosed takes a function to execute after the jsPanel closed.
  • new option.onmaximized takes a function to execute after the jsPanel maximized.
  • new option.onminimized takes a function to execute after the jsPanel minimized.
  • new option.onnormalized takes a function to execute after the jsPanel normalized.

2015-10-08

  • v2.5.5: bugfix option.ajax (causing unnecesary get requests whenever a jsPanel is created)

About author:

Author: Flyer53

Homepage: http://jspanel.de/


This awesome jQuery plugin is developed by Flyer53. For more Advanced Usages, please check the demo page or visit the official website.