rsence-pre 3.0.0.9 → 3.0.0.10

data/client/js/controls/textcontrol/textcontrol.coffee

@@ -20,17 +20,21 @@ HTextControl = HControl.extend
     click: true
     contextMenu: true
 
+  multiline: false
   controlDefaults: HControlDefaults.extend
+    labelPadding: 2
     labelStyle:
       textIndent: 0
       fontSize: '10px'
+      lineHeight: '14px'
       color: '#666'
-    labelWidth: 'auto'
+    labelWidth:     'auto'
     refreshAfter:   0.0 # amount of milliseconds to wait for a refresh from the input field
     refreshOnBlur:  true
     refreshOnInput: true
-    refreshOnIdle:  true
+    refreshOnIdle:  false
     focusOnCreate:  false
+    unit: false # unit suffix
 
   ## This flag is true, when the text input field has focus.
   hasTextFocus: false
@@ -40,16 +44,17 @@ HTextControl = HControl.extend
   ###
   contextMenu: -> true
 
+  markupElemNames: ['value','invalid','label','subview','bg']
+
   ### = Description
   ## The refreshLabel method sets the title property of the text
   ## field, essentially creating a tooltip using the label.
   ###
+  labelPadding: 2
   refreshLabel: ->
     return unless @label
-    if @markupElemIds? and @markupElemIds.label?
-      @setAttrOfPart( 'label', 'title', @label )
-    else
-      return
+    return unless @markupElemIds? and @markupElemIds.label?
+    @setAttrOfPart( 'label', 'title', @label )
     if @_labelView?
       @_labelView.setLabel( @label )
     else
@@ -58,25 +63,94 @@ HTextControl = HControl.extend
         style: @options.labelStyle
       )
     if @options.labelWidth == 'auto'
-      _labelWidth = @_labelView.stringWidth( @label, null, @_labelView.markupElemIds.value )+4
+      ELEM.flushElem([@_labelView.elemId])
+      _labelWidth = @_labelView.stringWidth( @label )
     else
       _labelWidth = @options.labelWidth
+    _labelWidth += @options.labelPadding || @labelPadding
     @_labelView.rect.setWidth( _labelWidth )
     @_labelView.drawRect()
-    if @componentName == 'textarea'
+    if @multiline
       @setStyleOfPart('value','textIndent',_labelWidth+'px')
     else
       @setStyleOfPart('label','left',_labelWidth+'px')
 
-  drawSubviews: ->
-    ELEM.setStyle(@elemId,'overflow','visible')
+  _clearFocusBlurEvent: ->
+    _elemId = @markupElemIds.value
+    Event.stopObserving(_elemId,'focus',=>@textFocus())
+    Event.stopObserving(_elemId,'blur',=>@textBlur())
+
+  _invalidChar: '〰'
+  _setInvalidMarker: ->
+    _str = @getInputElement().value
+    _strLen = _str.length
+    if @fieldType == 'password'
+      _str = ''
+      for i in [1.._strLen]
+        _str += '•'
+    w = @stringWidth(_str,null,@markupElemIds.label,{
+      fontFamily: @styleOfPart('value','fontFamily')
+      fontSize: @styleOfPart('value','fontSize')
+      fontWeight: @styleOfPart('value','fontWeight')
+      whiteSpace: 'pre'
+    })
+    _invaCount = Math.ceil(w/@_invalidCharWidth)+1
+    _istr = ''
+    _align = @styleOfPart('value','textAlign')
+    @setStyleOfPart('invalid','textAlign',_align)
+    [ _left, _right ] = [
+      parseInt( @styleOfPart('value','left'), 10 ),
+      parseInt( @styleOfPart('value','right'), 10 )
+    ]
+    [ _pLeft, _pRight ] = [
+      parseInt( @styleOfPart('value','paddingLeft'), 10 ),
+      parseInt( @styleOfPart('value','paddingRight'), 10 )
+    ]
+    [ _mLeft, _mRight ] = [
+      parseInt( @styleOfPart('value','marginLeft'), 10 ),
+      parseInt( @styleOfPart('value','marginRight'), 10 )
+    ]
+    if _align == 'right'
+      @setStyleOfPart('invalid','left','auto')
+      @setStyleOfPart('invalid','right',(_right+_pRight)+'px')
+    else
+      @setStyleOfPart('invalid','right','auto')
+      @setStyleOfPart('invalid','left',(_left+_pLeft+_mLeft)+'px')
+    @setStyleOfPart('invalid','width',w+'px')
+    @setStyleOfPart('invalid','visibility','inherit')
+    _istr += @_invalidChar for [0.._invaCount]
+    @setMarkupOfPart('invalid',_istr)
+  _unsetInvalidMarker: ->
+    @setMarkupOfPart('invalid','')
+    @setStyleOfPart('invalid','visibility','hidden')
+
+  setValid: (_state)-> # true == valid, false == invalid
+    @_isValid = _state
+    if _state
+      @_unsetInvalidMarker()
+    else
+      @_setInvalidMarker()
+
+  fieldType: 'text'
+  drawMarkup: ->
     @base()
+    @_invalidCharWidth = @stringWidth(@_invalidChar,null,@markupElemIds.invalid)
+    _parentId = @markupElemIds.label
+    if @multiline
+      _elemId = ELEM.make(_parentId,'textarea')
+    else
+      _elemId = ELEM.make(_parentId,'input',{attr:{type:@fieldType,value:@value}})
+    @markupElemIds.value = _elemId
+    @setCSSClass('value','input')
+    Event.observe(_elemId,'focus',=>@textFocus())
+    Event.observe(_elemId,'blur',=>@textBlur())
     if @options.focusOnCreate
       @getInputElement().focus()
       @setSelectionRange( @value.length, @value.length ) if @typeChr(@value) == 's'
 
-  lostActiveStatus: ->
-    if @markupElemIds? && @markupElemIds.value?
+  lostActiveStatus: (_prevActive)->
+    @base(_prevActive)
+    if @markupElemIds? and @markupElemIds.value? and _prevActive != @
       ELEM.get( @markupElemIds.value ).blur()
       @textBlur()
 
@@ -86,12 +160,14 @@ HTextControl = HControl.extend
     @setStyleOfPart('value', _name, _value, _cacheOverride)
 
   click: ->
-    @getInputElement().focus()
+    @getInputElement().focus() unless @hasTextFocus
 
   setEnabled: (_flag)->
     @base(_flag)
     if @markupElemIds? and @markupElemIds.value?
       ELEM.get(@markupElemIds.value).disabled = !@enabled
+    else
+      @pushTask => @setEnabled(_flag)
 
   _clipboardEventTimer: null
   _getChangeEventFn: ->
@@ -130,6 +206,7 @@ HTextControl = HControl.extend
   ##
   ###
   textFocus: ->
+    return if @hasTextFocus
     EVENT.changeActiveControl( @ )
     @hasTextFocus = true
     @_setChangeEventFn()
@@ -140,6 +217,7 @@ HTextControl = HControl.extend
   ## Called when the input field loses focus.
   ###
   textBlur: ->
+    return unless @hasTextFocus
     @hasTextFocus = false
     @_clearChangeEventFn()
     if @options.refreshOnBlur
@@ -147,8 +225,8 @@ HTextControl = HControl.extend
       @refreshValue()
     true
 
-  idle: ->
-    @refreshAfter() if @hasTextFocus and @options.refreshOnIdle and @options.refreshOnInput
+  # idle: ->
+  #   @refreshAfter() if @hasTextFocus and @options.refreshOnIdle and @options.refreshOnInput
 
   refreshValue: ->
     @setTextFieldValue( @value )
@@ -157,8 +235,7 @@ HTextControl = HControl.extend
   ## Placeholder method for validation of the value.
   ##
   ###
-  validateText: (_value)->
-    @fieldToValue(_value)
+  validateText: (_value)-> @fieldToValue(_value)
 
   ### = Description
   ## Returns the input element or null, if no input element created (yet).
@@ -172,10 +249,8 @@ HTextControl = HControl.extend
   ###
   getTextFieldValue: ->
     _inputElement = @getInputElement()
-    if _inputElement?
-      return _inputElement.value
-    else
-      return ''
+    return _inputElement.value if _inputElement?
+    ''
 
   valueToField: (_value)-> _value
   fieldToValue: (_value)-> _value
@@ -191,8 +266,11 @@ HTextControl = HControl.extend
     return unless _inputElement?
     [ _selectionStart, _selectionEnd ] = @getSelectionRange()
     _value = @valueToField(_value)
-    _inputElement.value = _value if _inputElement.value != _value.toString()
-    @setSelectionRange( _selectionStart, _selectionEnd )
+    @_lastFieldValue = _value
+    unless @hasTextFocus
+      _inputElement.value = _value if _inputElement.value != _value.toString()
+      @setSelectionRange( _selectionStart, _selectionEnd )
+    @setValid(true) if _inputElement.value == _value
 
   # returns a random number prefixed and suffixed with '---'
   _randomMarker: -> '---'+Math.round((1+Math.random())*10000)+'---'
@@ -202,13 +280,14 @@ HTextControl = HControl.extend
     clearTimeout(@_refreshTimer) if @_refreshTimer
     @_refreshTimer = null
     @_clearChangeEventFn()
+    @_clearFocusBlurEvent()
     @base()
 
   ### = Description
   ## Returns the selection (or text cursor position) of the input element
   ## as an +Array+ like +[ startOffset, endOffset ]+.
   ###
-  getSelectionRange: ->
+  _getLeftAlignedSelectionRange: ->
     _inputElement = @getInputElement()
     if _inputElement == null or @hasTextFocus == false
       _rangeArr = [ 0, 0 ]
@@ -239,25 +318,52 @@ HTextControl = HControl.extend
     else
       _rangeArr = [ 0, 0 ]
     return _rangeArr
-
+  _getRightAlignedSelectionRange: ->
+    _inputElement = @getInputElement()
+    _inputValue = _inputElement.value
+    _valueLength = _inputValue.length
+    if _inputElement == null or @hasTextFocus == false
+      _rangeArr = [ 0, 0 ]
+    ## Other browsers
+    else if _inputElement.selectionStart
+      _rangeArr = [ _valueLength-_inputElement.selectionStart, _valueLength-_inputElement.selectionEnd ]
+    ## Internet Explorer:
+    else if document.selection
+      # create a range object
+      _range = document.selection.createRange()
+      # original range text
+      _rangeText = _range.text
+      _rangeLength = _rangeText.length
+      # make a copy of the text and replace \r\n with \n
+      _origValue = _inputElement.value.replace(/\r\n/g, "\n")
+      # create random marker to replace the text with
+      _marker = @_randomMarker()
+      # re-generate marker if it's found in the text.
+      _marker = @_randomMarker() while ~_origValue.indexOf( _marker )
+      _markerLength = _marker.length
+      # temporarily set the text of the selection to the unique marker
+      _range.text = _marker
+      _markerValue = _inputElement.value.replace(/\r\n/g, "\n")
+      _range.text = _rangeText
+      _markerIndex = _markerValue.indexOf( _marker )
+      _rangeArr = [ _valueLength-_markerIndex, _valueLength-_markerIndex + _rangeLength ]
+    ## No support:
+    else
+      _rangeArr = [ 0, 0 ]
+    return _rangeArr
+  getSelectionRange: ->
+    return @_getRightAlignedSelectionRange() if @styleOfPart('value','textAlign') == 'right'
+    @_getLeftAlignedSelectionRange()
   _refreshTimer: null
   _lastFieldValue: null
   refreshAfter: ->
     _fieldValue = @getTextFieldValue()
-    if @_lastFieldValue == null or _fieldValue != @_lastFieldValue
+    if not @_lastFieldValue? or _fieldValue != @_lastFieldValue
       @_lastFieldValue = _fieldValue
       if @_refreshTimer
         clearTimeout( @_refreshTimer )
         @_refreshTimer = null
-      if @options.refreshAfter and @options.refreshAfter > 0
-        _this = @
-        @_refreshTimer = setTimeout( (->
-          _this._updateValueFromField()
-        ), @options.refreshAfter*1000 )
-      else
-        @_updateValueFromField()
-    # @setValue( @validateText( @getTextFieldValue() ) )
-    # @refreshValue()
+      @pushTask => @_updateValueFromField()
 
   ### = Description
   ## Sets the selection (or text cursor position) of the input element.
@@ -281,6 +387,10 @@ HTextControl = HControl.extend
       _selectionEnd = _selectionStart
     _inputElement = @getInputElement()
     return if _inputElement == null or @hasTextFocus == false
+    if @styleOfPart('value','textAlign') == 'right'
+      _len = _inputElement.value.length
+      _selectionStart = _len - _selectionStart
+      _selectionEnd = _len - _selectionEnd
     # Internet Explorer
     if _inputElement.createTextRange
       _range = _inputElement.createTextRange()
@@ -300,6 +410,33 @@ HTextControl = HControl.extend
   ###
   textEnter: ->
     @refreshAfter() if @options.refreshOnInput
-    false
+    true
+
+  drawSubviews: ->
+    @drawUnit()
+
+  _extraLabelRight: 0
+  drawUnit: ->
+    if @options.unit
+      _style =
+        fontSize:   @styleOfPart('value','fontSize')
+        fontFamily: @styleOfPart('value','fontFamily')
+        fontWeight: @styleOfPart('value','fontWeight')
+        color:      @styleOfPart('value','color')
+        whiteSpace: 'pre'
+        textAlign:     'right'
+        verticalAlign: 'middle'
+        lineHeight:    '100%'
+      ELEM.flush()
+      [ w, h ] = @stringSize(@options.unit,null,@markupElemIds.label,true,_style)
+      h = ELEM.getSize(@markupElemIds.label)[1]
+      _style.lineHeight = h+'px'
+      _unitRect = [null,1,w+4,h-2,4,1]
+      @unitSuffix = HLabel.new(_unitRect,@,
+        label: @options.unit
+        style: _style
+      )
+      @_extraLabelRight += @unitSuffix.rect.width
+      @setStyleOfPart('label','right',this._extraLabelRight+'px')
 
 HTextField = HTextControl

data/client/js/controls/textcontrol/themes/default/textcontrol.css

@@ -1,137 +1,101 @@
-
-.default .textcontrol_input {
-  position: absolute;
-  display: block;
+.default.textcontrol {
+  overflow: visible;
+}
+.default.textcontrol > .input_parent {
+  position: absolute; z-index: 2;
+  left: 1px; top: 1px; right: 1px; bottom: 1px;
+}
+.default.textcontrol > .input_parent > .input {
+  position: absolute; display: block;
   font-family: Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  color: #000;
+  font-size: 13px; color: #000; resize: none;
   background-color: transparent;
   vertical-align: middle;
-  border: 0;
-  left: 0; top: 0;
-  #{(
-  (BROWSER_TYPE.firefox||BROWSER_TYPE.ie7||BROWSER_TYPE.ie8||BROWSER_TYPE.ie9||BROWSER_TYPE.ie10||BROWSER_TYPE.opera)?
-    'padding-left:2px;width:100% !important;height:90% !important;':
-    'padding:2px;right:0px;bottom:0px;width:auto;height:auto;'
-  )}
+  border: 0; left: 0; top: 0;
+  right: 0; bottom: 0;
+  width: 100%; height: 100%;
+  -moz-box-sizing:    border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing:         border-box;
 }
-
-.default .textcontrol_input:focus {
-  outline-color: transparent;
-  outline-style: none;
+.default.textcontrol > .input_parent > .input::-ms-clear {
+    display: none;
 }
-
-.default .disabled .textcontrol_input {
-  color: #333;
+.default.textcontrol.disabled > .input_parent > .input { color: #333; }
+.default.textcontrol > .input_parent > .input:focus {
+  outline-color: transparent; outline-style: none;
+}
+.default.textcontrol > .input_parent > .input_invalid {
+  position: absolute; white-space: nowrap; overflow: hidden;
+  vertical-align: bottom; visibility: hidden;
+  bottom: 1px; font-size: 10px; line-height: 6px;
+  color: #c00; z-index: 0; font-weight: bold;
 }
 
-.default .textcontrol_subview {
+
+
+.default.textcontrol > .subview {
   position: absolute;
   left: 0; top: 0; right: 0; bottom: 0;
   z-index: 1;
 }
+.default.textcontrol.active > .subview { display: none; }
 
-.default .active>.textcontrol_subview {
-  display: none;
-}
 
-.default .textcontrol_input_parent {
-  position: absolute;
-  z-index: 2;
-  #{(
-  ((BROWSER_TYPE.chrome && BROWSER_TYPE.mac)||BROWSER_TYPE.firefox||BROWSER_TYPE.ie7||BROWSER_TYPE.ie8||BROWSER_TYPE.ie9||BROWSER_TYPE.ie10||BROWSER_TYPE.opera)?
-    'left:0;padding-left:1px;top:0;right:4px;bottom:0;':
-    'left:-2px;top:-2px;right:-2px;bottom:-2px;'
-  )}
-  #{(BROWSER_TYPE.chrome && BROWSER_TYPE.mac)?'top:1px;':''}
-}
 
-.default .textcontrol_bg {
+.default.textcontrol > .bg > .c {
   position: absolute;
   left: 2px; top: 2px; right: 2px; bottom: 2px;
   background-color: #fff;
 }
-
-.default .active>.textcontrol_bg {
+.default.textcontrol.active > .bg > .c {
   left: 0; top: 0; right: 0; bottom: 0;
   -webkit-box-shadow: 0 0 3px #333;
   box-shadow: 0 0 3px #333;
 }
+.default.textcontrol.disabled > .bg > .c { background-color: #eee; }
 
-.default .disabled .textcontrol_bg {
-  background-color: #eee;
-}
-
-
-.default .textcontrol_ne,
-.default .textcontrol_nw,
-.default .textcontrol_se,
-.default .textcontrol_sw {
-  position: absolute;
-  width: 7px; height: 7px;
+.default.textcontrol > .bg > .ne,
+.default.textcontrol > .bg > .nw,
+.default.textcontrol > .bg > .se,
+.default.textcontrol > .bg > .sw {
+  position: absolute; width: 7px; height: 7px;
   background-repeat: no-repeat;
-  background-image: #{this.getCssFilePath('textcontrol_parts1.png')};
+  background-image: #url(textcontrol_parts1.png);
 }
-
-.default .textcontrol_nw {
-  left: 0; top: 0;
-  background-position: 0 0;
+.default.textcontrol > .bg > .nw {
+  left: 0; top: 0; background-position: 0 0;
 }
-
-.default .textcontrol_ne {
-  right: 0; top: 0;
-  background-position: -7px 0;
+.default.textcontrol > .bg > .ne {
+  right: 0; top: 0; background-position: -7px 0;
 }
-
-.default .textcontrol_sw {
-  left: 0; bottom: 0;
-  background-position: 0 -7px;
+.default.textcontrol > .bg > .sw {
+  left: 0; bottom: 0; background-position: 0 -7px;
 }
-
-.default .textcontrol_se {
-  right: 0; bottom: 0;
-  background-position: -7px -7px;
+.default.textcontrol > .bg > .se {
+  right: 0; bottom: 0; background-position: -7px -7px;
 }
-
-
-
-.default .textcontrol_w,
-.default .textcontrol_e {
-  position: absolute;
-  width: 7px; top: 7px; bottom: 7px;
+.default.textcontrol > .bg > .w,
+.default.textcontrol > .bg > .e {
+  position: absolute; width: 7px; top: 7px; bottom: 7px;
   background-repeat: repeat-y;
-  background-image: #{this.getCssFilePath('textcontrol_parts3.png')};
+  background-image: #url(textcontrol_parts3.png);
 }
-
-.default .textcontrol_w {
-  left: 0;
-  background-position: 0 0;
+.default.textcontrol > .bg > .w {
+  left: 0; background-position: 0 0;
 }
-
-.default .textcontrol_e {
-  right: 0;
-  background-position: -7px 0;
+.default.textcontrol > .bg > .e {
+  right: 0; background-position: -7px 0;
 }
-
-
-
-.default .textcontrol_n,
-.default .textcontrol_s {
-  position: absolute;
-  height: 7px; left: 7px; right: 7px;
+.default.textcontrol > .bg > .n,
+.default.textcontrol > .bg > .s {
+  position: absolute; height: 7px; left: 7px; right: 7px;
   background-repeat: repeat-x;
-  background-image: #{this.getCssFilePath('textcontrol_parts2.png')};
+  background-image: #url(textcontrol_parts2.png);
 }
-
-.default .textcontrol_n {
-  top: 0;
-  background-position: 0 0;
+.default.textcontrol > .bg > .n {
+  top: 0; background-position: 0 0;
 }
-
-.default .textcontrol_s {
-  bottom: 0;
-  background-position: 0 -7px;
+.default.textcontrol > .bg > .s {
+  bottom: 0; background-position: 0 -7px;
 }
-
-
-

data/client/js/controls/textcontrol/themes/default/textcontrol.html

@@ -1,20 +1,15 @@
-<div class="textcontrol_bg" id="bg]I["></div>
-
-<div class="textcontrol_n"></div>
-<div class="textcontrol_s"></div>
-<div class="textcontrol_w"></div>
-<div class="textcontrol_e"></div>
-
-<div class="textcontrol_nw"></div>
-<div class="textcontrol_ne"></div>
-<div class="textcontrol_se"></div>
-<div class="textcontrol_sw"></div>
-
-<div id="subview]I[" class="textcontrol_subview"></div>
-
-<div id="label]I[" title="#{this.label}" class="textcontrol_input_parent">
-  <input type="text" class="textcontrol_input" #{this.enabled?'':'disabled'}
-    onfocus="HSystem.views[#{this.viewId}].textFocus();" 
-    onblur="HSystem.views[#{this.viewId}].textBlur();" 
-    id="value]I[" value="#{this.value}" />
+<div class="bg" id="bg]I[">
+  <div class="n"></div>
+  <div class="s"></div>
+  <div class="w"></div>
+  <div class="e"></div>
+  <div class="c"></div>
+  <div class="nw"></div>
+  <div class="ne"></div>
+  <div class="se"></div>
+  <div class="sw"></div>
+</div>
+<div id="subview]I[" class="subview"></div>
+<div id="label]I[" title="#{this.label}" class="input_parent">
+  <div class="input_invalid" id="invalid]I["></div>
 </div>

data/client/js/controls/uploader/themes/default/uploader.css

@@ -52,5 +52,5 @@
 .upload_progress .progress_indicator {
   position: absolute;
   right: 0px; top: 4px; width: 16px; height: 16px;
-  background-image: #{this.getCssFilePath('upload_progress.gif')};
+  background-image: #url(upload_progress.gif);
 }

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

@@ -54,7 +54,7 @@
 }
 
 .window_titlebar * {
-  background-image: #{this.getCssFilePath('window_parts1.png')};
+  background-image: #url(window_parts1.png);
 }
 
 .window_titlebar_edge_left {
@@ -80,7 +80,7 @@
   left: 24px; top: 0; right: 24px; height: 24px;
   background-position: 0 0;
   background-repeat: repeat-x;
-  background-image: #{this.getCssFilePath('window_parts2.png')};
+  background-image: #url(window_parts2.png);
 }
 
 .inactive > .window_titlebar > .window_titlebar_center {
@@ -90,11 +90,11 @@
 .window_bg {
   left: 24px; top: 24px; right: 24px; bottom: 24px;
   background-repeat: repeat;
-  background-image: #{this.getCssFilePath('window_bg_active.png')};
+  background-image: #url(window_bg_active.png);
 }
 
 .inactive > .window_bg {
-  background-image: #{this.getCssFilePath('window_bg_inactive.png')};
+  background-image: #url(window_bg_inactive.png);
 }
 
 .window_body {
@@ -102,7 +102,7 @@
 }
 
 .window_body * {
-  background-image: #{this.getCssFilePath('window_parts1.png')};
+  background-image: #url(window_parts1.png);
 }
 
 .window_body_edge_left {
@@ -146,7 +146,7 @@
   left: 24px; bottom: 0; right: 24px; height: 24px;
   background-repeat: repeat-x;
   background-position: 0 -24px;
-  background-image: #{this.getCssFilePath('window_parts2.png')};
+  background-image: #url(window_parts2.png);
 }
 
 .inactive > .window_body > .window_body_edge_bottom {
@@ -183,7 +183,7 @@
   z-index: 10000;
   background-position: -59px -35px;
   font-size: 0;
-  background-image: #{this.getCssFilePath('window_parts1.png')};
+  background-image: #url(window_parts1.png)
 }
 
 .inactive > .window_resize_se {
@@ -194,7 +194,7 @@
 .window_controls_collapse,
 .window_controls_zoom {
   top: 6px; width: 15px; height: 15px;
-  background-image: #{this.getCssFilePath('window_buttons.png')};
+  background-image: #url(window_buttons.png)
 }
 
 .window_controls_close {

data/client/js/core/elem/elem.coffee

@@ -677,12 +677,14 @@ ELEM = HClass.extend
     _id = @_add( _elem )
     @_initCache( _id )
     if _options?
-      if _options.attrs?
-        if _options.attrs instanceof Array
-          for _attr in _options.attrs
+      _attrs = _options.attrs if _options.attrs?
+      _attrs = _options.attr if _options.attr? and not _attr?
+      if _attrs?
+        if _attrs instanceof Array
+          for _attr in _attrs
             @setAttr( _id, _attr[0], _attr[1], true )
         else
-          for _attrName, _attrValue of _options.attrs
+          for _attrName, _attrValue of _attrs
             @setAttr( _id, _attrName, _attrValue, true )
       if _options.styles
         @setStyles( _id, _options.styles )