gerrit.onap Code Review - ccsdk/features.git/blob

   1 (function( $, app ) {
   2
   3         var ui = app.ns("ui");
   4
   5         ui.AbstractPanel = ui.AbstractWidget.extend({
   6                 defaults: {
   7                         body: null,            // initial content of the body
   8                         modal: true,           // create a modal panel - creates a div that blocks interaction with page
   9                         height: 'auto',        // panel height
  10                         width: 400,            // panel width (in pixels)
  11                         open: false,           // show the panel when it is created
  12                         parent: 'BODY',        // node that panel is attached to
  13                         autoRemove: false      // remove the panel from the dom and destroy it when the widget is closed
  14                 },
  15                 shared: {  // shared data for all instances of ui.Panel and decendants
  16                         stack: [], // array of all open panels
  17                         modal: $( { tag: "DIV", id: "uiModal", css: { opacity: 0.2, position: "absolute", top: "0px", left: "0px" } } )
  18                 },
  19                 init: function() {
  20                         this._super();
  21                 },
  22                 open: function( ev ) {
  23                         this.el
  24                                 .css( { visibility: "hidden" } )
  25                                 .appendTo( this.config.parent )
  26                                 .css( this._getPosition( ev ) )
  27                                 .css( { zIndex: (this.shared.stack.length ? (+this.shared.stack[this.shared.stack.length - 1].el.css("zIndex") + 10) : 100) } )
  28                                 .css( { visibility: "visible", display: "block" } );
  29                         this.shared.stack.remove(this);
  30                         this.shared.stack.push(this);
  31                         this._setModal();
  32                         $(document).bind("keyup", this._close_handler );
  33                         this.fire("open", { source: this, event: ev } );
  34                         return this;
  35                 },
  36                 close: function() {
  37                         var index = this.shared.stack.indexOf(this);
  38                         if(index !== -1) {
  39                                 this.shared.stack.splice(index, 1);
  40                                 this.el.css( { left: "-2999px" } ); // move the dialog to the left rather than hiding to prevent ie6 rendering artifacts
  41                                 this._setModal();
  42                                 this.fire("close", this );
  43                                 if(this.config.autoRemove) {
  44                                         this.remove();
  45                                 }
  46                         }
  47                         return this;
  48                 },
  49                 // close the panel and remove it from the dom, destroying it (you can not reuse the panel after calling remove)
  50                 remove: function() {
  51                         this.close();
  52                         $(document).unbind("keyup", this._close_handler );
  53                         this._super();
  54                 },
  55                 // starting at the top of the stack, find the first panel that wants a modal and put it just underneath, otherwise remove the modal
  56                 _setModal: function() {
  57                         for(var stackPtr = this.shared.stack.length - 1; stackPtr >= 0; stackPtr--) {
  58                                 if(this.shared.stack[stackPtr].config.modal) {
  59                                         this.shared.modal
  60                                                 .appendTo( document.body )
  61                                                 .css( { zIndex: this.shared.stack[stackPtr].el.css("zIndex") - 5 } )
  62                                                 .css( $(document).vSize().asSize() );
  63                                         return;
  64                                 }
  65                         }
  66                         this.shared.modal.remove(); // no panels that want a modal were found
  67                 },
  68                 _getPosition: function() {
  69                         return $(window).vSize()                        // get the current viewport size
  70                                 .sub(this.el.vSize())                         // subtract the size of the panel
  71                                 .mod(function(s) { return s / 2; })           // divide by 2 (to center it)
  72                                 .add($(document).vScroll())                   // add the current scroll offset
  73                                 .mod(function(s) { return Math.max(5, s); })  // make sure the panel is not off the edge of the window
  74                                 .asOffset();                                  // and return it as a {top, left} object
  75                 },
  76                 _close_handler: function( ev ) {
  77                         if( ev.type === "keyup" && ev.keyCode !== 27) { return; } // press esc key to close
  78                         $(document).unbind("keyup", this._close_handler);
  79                         this.close( ev );
  80                 }
  81         });
  82
  83 })( this.jQuery, this.app );