rsence 2.0.0.0.pre

data/js/controls/validatorview/validatorview.js

@@ -0,0 +1,55 @@
+/*   Riassence Framework
+ *   Copyright 2008 Riassence Inc.
+ *   http://riassence.com/
+ *
+ *   You should have received a copy of the GNU General Public License along
+ *   with this software package. If not, contact licensing@riassence.com
+ */
+
+HValidatorView = HControl.extend({
+
+  constructor: function(_rect, _parent, _options) {
+    if(_options !== undefined){
+      if(_options.valueField && _options.valueField.componentBehaviour[1] === 'control'){
+        _rect.offsetTo(
+          _options.valueField.rect.right,
+          _options.valueField.rect.top
+        );
+      }
+    }
+    this.base(_rect, _parent, _options);
+  },
+  
+/** = Description
+  * Ensures the value set is a Boolean.
+  *
+  * = Parameters
+  * +_flag+::   True to set the status to selected, false to set to unselected.
+  *
+  **/
+  setValue: function(_flag) {
+    if (!_flag && _flag !== false) {
+      _flag = false;
+    }
+    this.base(_flag);
+  },
+
+/** = Description
+  * Updates the graphics to match the Boolean value.
+  *
+  **/
+  refreshValue: function(){
+    var _this = this,
+        _value = _this.value,
+        _trueValue = _value === true,
+        _x = _trueValue?-21:0,
+        _y = _this.enabled?0:-21,
+        _title = _trueValue?'':_value,
+        _elemId = _this.elemId;
+    ELEM.setStyle(_elemId,'background-image',"url("+_this.getThemeGfxFile('validator.png')+")");
+    ELEM.setStyle(_elemId,'background-repeat','no-repeat');
+    ELEM.setStyle(_elemId,'background-position',_x+'px '+_y+'px');
+  }
+
+  
+});

data/js/controls/window/themes/default/window.css

@@ -0,0 +1,219 @@
+
+
+.window_titlebar,
+.window_titlebar_edge_left, 
+.window_titlebar_center,
+.window_titlebar_edge_right,
+.window_bg,
+.window_body,
+.window_body_edge_left,
+.window_body_edge_right,
+.window_body_corner_left,
+.window_body_corner_right,
+.window_body_edge_bottom,
+.window_label,
+.window_controls,
+.window_subview,
+.window_controls_close,
+.window_controls_collapse,
+.window_controls_zoom {
+  position: absolute;
+  display: block;
+  overflow: hidden;
+  cursor: inherit;
+  background-repeat: no-repeat;
+}
+
+.window_controls * {
+  cursor: pointer;
+}
+
+.window_titlebar {
+  left: 0px; top: 0px; height: 24px; min-width: 96px; right: 0px;
+}
+
+.window_titlebar * {
+  background-image: #{this.getCssFilePath('window_parts1.png')};
+}
+
+.window_titlebar_edge_left {
+  left: 0px; top: 0px; width: 24px; height: 24px;
+  background-position: 0px 0px;
+}
+
+.inactive .window_titlebar_edge_left {
+  background-position: 0px -48px;
+}
+
+.window_titlebar_edge_right {
+  right: 0px; top: 0px; width: 24px; height: 24px;
+  background-position: -24px 0px;
+}
+
+.inactive .window_titlebar_edge_right {
+  right: 0px; top: 0px; width: 24px; height: 24px;
+  background-position: -24px -48px;
+}
+
+.window_titlebar_center {
+  left: 24px; top: 0px; right: 24px; height: 24px;
+  background-position: 0px 0px;
+  background-repeat: repeat-x;
+  background-image: #{this.getCssFilePath('window_parts2.png')};
+}
+
+.inactive .window_titlebar_center {
+  background-position: 0px -48px;
+}
+
+.window_bg {
+  left: 24px; top: 24px; right: 24px; bottom: 24px;
+  background-repeat: repeat;
+  background-image: #{this.getCssFilePath('window_bg_active.png')};
+}
+
+.inactive .window_bg {
+  background-image: #{this.getCssFilePath('window_bg_inactive.png')};
+}
+
+.window_body {
+  left: 0px; top: 24px; right: 0px; bottom: 0px;
+}
+
+.window_body * {
+  background-image: #{this.getCssFilePath('window_parts1.png')};
+}
+
+.window_body_edge_left {
+  left: 0px; top: 0px; bottom: 24px; width: 24px;
+  background-repeat: repeat-y;
+  background-position: -72px 0px;
+}
+
+.inactive .window_body_edge_left {
+  background-position: -120px 0px;
+}
+
+.window_body_edge_right {
+  right: 0px; top: 0px; bottom: 24px; width: 24px;
+  background-repeat: repeat-y;
+  background-position: -96px 0px;
+}
+
+.inactive .window_body_edge_right {
+  background-position: -144px 0px;
+}
+
+.window_body_corner_left {
+  left: 0px; bottom: 0px; height: 24px; width: 24px;
+  background-position: 0px -24px;
+}
+.inactive .window_body_corner_left {
+  background-position: 0px -72px;
+}
+
+.window_body_corner_right {
+  right: 0px; bottom: 0px; height: 24px; width: 24px;
+  background-position: -24px -24px;
+}
+
+.inactive .window_body_corner_right {
+  background-position: -24px -72px;
+}
+
+.window_body_edge_bottom {
+  left: 24px; bottom: 0px; right: 24px; height: 24px;
+  background-repeat: repeat-x;
+  background-position: 0px -24px;
+  background-image: #{this.getCssFilePath('window_parts2.png')};
+}
+
+.inactive .window_body_edge_bottom {
+  background-position: 0px -72px;
+}
+
+.window_label {
+  left: 0px; top: 0px; right: 0px; height: 24px;
+  line-height: 25px;
+  text-align: center;
+  vertical-align: middle;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  font-weight: bold;
+  color: #000;
+}
+
+.inactive .window_label {
+  color: #666;
+}
+
+.window_controls {
+  left: 0px; top: 0px; right: 0px; bottom: 0px;
+}
+
+.window_subview {
+  left: 2px; top: 26px; right: 2px; bottom: 2px;
+}
+
+.window_resize_se {
+  position: absolute;
+  right: 0px; bottom: 0px; width: 13px; height: 13px;
+  cursor: se-resize;
+  z-index: 10000;
+  background-position: -59px -35px;
+  font-size: 0px;
+  background-image: #{this.getCssFilePath('window_parts1.png')};
+}
+
+.inactive .window_resize_se {
+  background-position: -59px -83px;
+}
+
+.window_controls_close,
+.window_controls_collapse,
+.window_controls_zoom {
+  top: 6px; width: 15px; height: 15px;
+  background-image: #{this.getCssFilePath('window_buttons.png')};
+}
+
+.window_controls_close {
+  left: 8px;
+  background-position: 0px 0px;
+}
+
+.window_controls:hover .window_controls_close {
+  background-position: 0px -15px;
+}
+
+.window_controls:hover .window_controls_close:active {
+  background-position: 0px -30px;
+}
+
+
+.window_controls_collapse {
+  left: 27px;
+  background-position: -30px 0px;
+}
+
+.window_controls:hover .window_controls_collapse {
+  background-position: -30px -15px;
+}
+
+.window_controls:hover .window_controls_collapse:active {
+  background-position: -30px -30px;
+}
+
+
+.window_controls_zoom {
+  left: 46px;
+  background-position: -15px 0px;
+}
+
+.window_controls:hover .window_controls_zoom {
+  background-position: -15px -15px;
+}
+
+.window_controls:hover .window_controls_zoom:active {
+  background-position: -15px -30px;
+}
+

data/js/controls/window/themes/default/window.html

@@ -0,0 +1,17 @@
+<div class="window_titlebar">
+  <div class="window_titlebar_edge_left"></div>
+  <div class="window_titlebar_center"></div>
+  <div class="window_titlebar_edge_right"></div>
+</div>
+<div class="window_bg"></div>
+<div class="window_body">
+  <div class="window_body_edge_left"></div>
+  <div class="window_body_edge_right"></div>
+  <div class="window_body_edge_bottom"></div>
+  <div class="window_body_corner_left"></div>
+  <div class="window_body_corner_right"></div>
+</div>
+<div class="window_label" id="label#{_ID}">#{this.label}</div>
+<div class="window_controls" id="control#{_ID}">#{this.options.closeButton?'<div class="window_controls_close" onclick="HSystem.views['+this.viewId+'].windowClose();"></div>':''}#{this.options.collapseButton?'<div class="window_controls_collapse" onclick="HSystem.views['+this.viewId+'].windowCollapse();"></div>':''}#{this.options.zoomButton?'<div class="window_controls_zoom" onclick="HSystem.views['+this.viewId+'].windowZoom();"></div>':''}</div>
+<div class="window_subview" id="subview#{_ID}"></div>
+#{this.options.noResize?'':'<div class="window_resize_se"></div>'}

data/js/controls/window/window.js

@@ -0,0 +1,284 @@
+/*   Riassence Framework
+ *   Copyright 2008 Riassence Inc.
+ *   http://riassence.com/
+ *
+ *   You should have received a copy of the GNU General Public License along
+ *   with this software package. If not, contact licensing@riassence.com
+ */
+
+/*** = Description
+  ** The HWindow component can contain subviews and its position and size
+  ** is modifiable by the user (within limits).
+  ** Its label is the title of the HWindow and its constructor support a
+  ** few additions to the set of HDynControl#controlDefaults.
+  ** See #controlDefaults
+  **
+  ***/
+HWindow = HDynControl.extend({
+  
+  componentName:      'window',
+  
+/** = Description
+  * In addition to the standard HControl#constructor options,
+  * the following properties can be set:
+  * 
+  * Key::         Description
+  * +minX+::      The minimum X-coordinate allowed to be dragged or resized to.
+  *               Defaults to +0+.
+  * +minY+::      The minimum Y-coordinate allowed to be dragged or resized to.
+  *               Defaults to +0+.
+  * +maxX+::      The maximum X-coordinate allowed to be dragged or resized to.
+  *               Defaults to the browser window width.
+  * +maxY+::      The maximum Y-coordinate allowed to be dragged or resized to.
+  *               Defaults to the browser window height.
+  * +minSize+::   An array containing exactly two values: +[ width, height ]+.
+  *               Defines the minimum size allowed for resizing.
+  *               Defaults to +[ 96, 54 ]+
+  * +maxSize+::   An array containing exactly two values: +[ width, height ]+.
+  *               Defines the maximum size allowed for resizing.
+  *               Defaults to the browser window size.
+  * +resizeW+::   The size of the west (left) resizable edge. Defaults to +6+.
+  * +resizeE+::   The size of the east (right) resizable edge. Defaults to +6+.
+  * +resizeN+::   The size of the north (top) resizable edge. Defaults to +6+.
+  * +resizeS+::   The size of the south (bottom) resizable edge. Default to +6+.
+  * +resizeNW+::  The size of the north-west (left top) resizable corner.
+  *               Defaults to +[ 6, 6 ]+
+  * +resizeNE+::  The size of the north-east (right top) resizable corner.
+  *               Defaults to +[ 6, 6 ]+
+  * +resizeSW+::  The size of the south-west (left bottom) resizable corner.
+  *               Defaults to +[ 6, 6 ]+
+  * +resizeSE+::  The size of the south-east (right bottom) resizable corner.
+  *               Defaults to +[ 16, 16 ]+
+  * +noResize+::  A flag (when true) disables all resizing and only allows
+  *               moving.
+  * +fullWindowMove+:: A flag (when true) enables the full HWindow area 
+  *                    responds to drag events. By default it's false,
+  *                    meaning only the title bar is draggable.
+  * +closeButton+:: A flag (when true) enables the close button of HWindow.
+  *                 By default, it's disabled. When enabled, extend the
+  *                 HWindow#windowClose method. By default it destructs
+  *                 the HWindow instance.
+  * +collapseButton+:: A flag (when true) enables the collapse (or minimize)
+  *                    button of the HWindow instance. By default it's
+  *                    disabled. When enabled, extend the 
+  *                    HWindow#windowCollapse method, which by default
+  *                    zooms the window to its +minSize+.
+  * +zoomButton+:: A flag (when true) enables the zoom (or maximize)
+  *                button of the HWindow instance. By default it's
+  *                disabled. When enabled, extend the 
+  *                HWindow#windowZoom method, which by default zooms the
+  *                contents of the HWindow to fit or the +maxSize+ depending
+  *                on which is smaller.
+  *
+  **/
+  controlDefaults: (HDynControl.prototype.controlDefaults.extend({
+    constructor: function(_ctrl){
+      var _winSize = ELEM.windowSize(),
+          _winWidth = _winSize[0],
+          _winHeight = _winSize[1];
+      if(!this.minSize){
+        this.minSize = [96,54];
+      }
+      if(!this.maxSize){
+        this.maxSize = _winSize;
+      }
+      if(!this.maxX){
+        this.maxX = _winWidth-this.minSize[0];
+      }
+      if(!this.maxY){
+        this.maxY = _winHeight-this.minSize[1];
+      }
+      if(!this.events){
+        this.events = {
+          draggable: true
+        };
+      }
+      if(!this.resizeNW){
+        this.resizeNW = [ 6, 6 ];
+      }
+      if(!this.resizeNE){
+        this.resizeNE = [ 6, 6 ];
+      }
+      if(!this.resizeSW){
+        this.resizeSW = [ 6, 6 ];
+      }
+      if(!this.resizeSE){
+        this.resizeSE = [ 16, 16 ];
+      }
+    },
+    maxX: 'auto',
+    maxY: 'auto',
+    maxSize: 'auto',
+    resizeW:   4,
+    resizeE:   4,
+    resizeN:   4,
+    resizeS:   4,
+    fullWindowMove: false,
+    closeButton: false,
+    collapseButton: false,
+    zoomButton: false
+  })),
+  
+  draw: function(){
+    var _drawn = this.drawn;
+    this.base();
+    if(!_drawn){
+      HSystem.windowFocus(this);
+    }
+  },
+  
+  // -- overrides the drag rules to adapt to the !fullWindowMove as well
+  // as disabling draggability in window button areas. ++
+
+/** = Description
+  * makeRectRules function
+  *
+  *
+  **/
+  makeRectRules: function(){
+    var _this = this,
+        _rectRules = _this.base(),
+        _rect = _this.rect,
+        _opts = _this.options,
+        _leftPx=_opts.resizeW;
+    if(!_opts.fullWindowMove){
+      if(_opts.zoomButton){
+        _leftPx = 61;
+      }
+      else if(_opts.collapseButton){
+        _leftPx = 46;
+      }
+      else if(_opts.closeButton){
+        _leftPx = 27;
+      }
+      _rectRules[8] = [_leftPx,_opts.resizeN,_rect.width-_opts.resizeE,25];
+    }
+    return _rectRules;
+  },
+  
+  maxRect: function(){
+    var _rect = this.base();
+    if(_rect[2]<this.options.minSize[0]){
+      _rect[2] = this.options.minSize[0];
+    }
+    else if(_rect[2]>this.options.maxSize[0]){
+      _rect[2] = this.options.maxSize[0];
+    }
+    if(_rect[3]<this.options.minSize[1]){
+      _rect[3] = this.options.minSize[1];
+    }
+    else if(_rect[3]>this.options.maxSize[1]){
+      _rect[3] = this.options.maxSize[1];
+    }
+    return _rect;
+  },
+  
+/** Reports to HSystem that this window has the focus and the 
+  * previously active window needs to blur 
+  **/
+  gainedActiveStatus: function(){
+    HSystem.windowFocus(this);
+  },
+  
+/** HSystem calls this method, whenever this window is allowed to be focused
+  **/
+  windowFocus: function(){
+    this.toggleCSSClass(this.elemId, 'inactive', false);
+  },
+  
+/** HSystem calls this method, whenever this window needs to lose its 
+  * focus (another window focused) 
+  **/
+  windowBlur: function(){
+    this.toggleCSSClass(this.elemId, 'inactive', true);
+    this.setStyle('cursor','default');
+  },
+  
+/** This method gets called, whenever the close button has been clicked
+  **/
+  windowClose: function(){
+    this.die(); // extend this to this.app.die(), if your app needs to die instead of just the window
+  },
+  
+/** This method gets called, whenever the collapse (minimize) button has 
+  * been clicked
+  **/
+  windowCollapse: function(){
+    var _minRect = HRect.nu(
+      this.rect.leftTop,
+      this.rect.leftTop.subtract(
+        0-this.options.minSize[0],
+        0-this.options.minSize[1]
+      )
+    );
+    _minRect.setHeight(26);
+    if(this.rect.equals(_minRect)){
+      if(this.prevRect !== undefined && !this.prevRect.equals(_minRect)){
+        this.animateTo( HRect.nu( this.prevRect ) );
+      }
+      else {
+        this.windowZoom();
+      }
+    }
+    else {
+      this.prevRect = HRect.nu(_minRect);
+      this.animateTo( _minRect );
+    }
+  },
+  
+/** This method gets called, whenever the zoom (maximize/restore) 
+  * button has been clicked
+  **/
+  windowZoom: function(){
+    var _maxSize = this.options.maxSize === 'auto' ? this.parentSize() : this.options.maxSize,
+        _maxRect = HRect.nu(
+          this.options.minX,
+          this.options.minY,
+          _maxSize[0],
+          _maxSize[1]
+        ),
+        _fitsRect = HRect.nu( this.rect ),
+        i = 0,
+        _views = this.views,
+        _view, _size, _right, _bottom;
+    for( ; i < _views.length; i++ ){
+      _view = HSystem.views[_views[i]];
+      _size = ELEM.getVisibleSize(_view.elemId);
+      _pos  = ELEM.getVisiblePosition(_view.elemId);
+      _right = _size[0]+_pos[0];
+      _bottom = _size[1]+_pos[1];
+      if(_right > _fitsRect.width){
+        _fitsRect.setWidth(_right);
+      }
+      if(_bottom > _fitsRect.height){
+        _fitsRect.setHeight(_bottom);
+      }
+    }
+    if(_fitsRect.width > _maxSize[0]){
+      _fitsRect.setWidth( _maxSize[0] );
+    }
+    else if(_fitsRect.width < this.options.minSize[0]){
+      _fitsRect.setWidth( this.options.minSize[0] );
+    }
+    if(_fitsRect.height > _maxSize[1]){
+      _fitsRect.setHeight( _maxSize[1] );
+    }
+    else if(_fitsRect.height < this.options.minSize[1]){
+      _fitsRect.setHeight( this.options.minSize[1] );
+    }
+    if(this.rect.equals(_fitsRect)){
+      if(this.prevRect !== undefined && !this.prevRect.equals(_fitsRect)){
+        this.animateTo( HRect.nu(this.prevRect) );
+      }
+      else {
+        this.prevRect = HRect.nu( this.rect );
+        this.animateTo( _maxRect );
+      }
+    }
+    else {
+      this.prevRect = HRect.nu(_fitsRect);
+      this.animateTo( _fitsRect );
+    }
+  }
+});
+