SOURCE CODE: Uize.Widget.Bar.Slider.xSkin

/*______________
|       ______  |   U I Z E    J A V A S C R I P T    F R A M E W O R K
|     /      /  |   ---------------------------------------------------
|    /    O /   |    MODULE : Uize.Widget.Bar.Slider.xSkin Class Extension
|   /    / /    |
|  /    / /  /| |    ONLINE : http://uize.com
| /____/ /__/_| | COPYRIGHT : (c)2005-2014 UIZE
|          /___ |   LICENSE : Available under MIT License or GNU General Public License
|_______________|             http://uize.com/license.html
*/

/* Module Meta Data
  type: Extension
  importance: 1
  codeCompleteness: 100
  docCompleteness: 15
*/

/*?
  Introduction
    The =Uize.Widget.Bar.Slider.xSkin= extension sets an initial value for the =html= state property so as to provide slider instances with a default skin.

    *DEVELOPERS:* `Chris van Rensburg`

    The =Uize.Widget.Bar.Slider.xSkin= module is an extension module that extends the =Uize.Widget.Bar.Slider= class.
*/

Uize.module ({
  name:'Uize.Widget.Bar.Slider.xSkin',
  required:[
    'Uize.Node',
    'Uize.Dom.Util'
  ],
  builder:function (_class) {
    'use strict';

    var
      /*** Variables for Scruncher Optimization ***/
        _undefined
    ;

    /*** Extend the Class ***/
      _class.presets.Skin = {
        html:{
          process:function (_input) {
            function _opacityStyle (_color,_opacity) {
              _opacity = _opacity || 0;
              return (
                _opacity
                  ? ('background:' + _color + ';' + (_opacity < 100 ? _getOpacityStr (_opacity / 100) : ''))
                  : 'display:none;'
              );
            }
            var
              m = this,
              _Uize_Node = Uize.Node,
              _getOpacityStr = Uize.Dom.Util.getOpacityStr,
              _idPrefix = _input.idPrefix,
              _orientation = _input.orientation,
              _orientationNo = _orientation == 'vertical' ? 1 : 0,
              _borderThickness = _input.borderThickness != _undefined ? _input.borderThickness : 5,
              _knobSize = _input.knobSize != _undefined ? _input.knobSize : 15,
              _shell = m.getNode (),
              _shellDims = _Uize_Node.getDimensions (_shell),
              _dimAttributes = ['width','height'],
              _outerDims = _shell
                ? [
                  _shellDims [_dimAttributes [1 - _orientationNo]],
                  _shellDims [_dimAttributes [_orientationNo]]
                ]
                : [_input.thickness || 35,_input.length || 280],
              _trackDims = [_outerDims [0] - _borderThickness * 2,_outerDims [1] - _borderThickness * 2],
              _knobDims = [_trackDims [0],_knobSize],
              _borderHtml = '',
              _resourcesFolderPath = _input.pathToResources + 'Uize/Widget/Bar/Slider/'
            ;
            /*** Generate Border HTML ***/
              if (_borderThickness > 0 && _input.borderTintLevel != 100) {
                var
                  _borderTopCell = '',
                  _borderSideCell = ''
                ;
                _borderHtml =
                  '' +
                    '' +
                      '' +
                      _borderTopCell +
                      '' +
                    '' +
                    '' +
                      _borderSideCell +
                      '' +
                      _borderSideCell +
                    '' +
                    '' +
                      '' +
                      _borderTopCell +
                      '' +
                    '' +
                  ''
                ;
              }
            /*** Generate Complete Slider HTML ***/
              var
                _outerDimsStyle = 'width:' + _outerDims [1 - _orientationNo] + 'px; height:' + _outerDims [_orientationNo] + 'px;',
                _trackDimsStyle = 'width:' + _trackDims [1 - _orientationNo] + 'px; height:' + _trackDims [_orientationNo] + 'px;',
                _trackPosStyle = 'left:' + _borderThickness + 'px; top:' + _borderThickness + 'px;',
                _knobDimsStyle = 'position:absolute; left:0px; top:0px; width:' + _knobDims [1 - _orientationNo] + 'px; height:' + _knobDims [_orientationNo] + 'px;'
              ;
            return (
              '
' +
                _borderHtml +
                '
' +
                ((_input.emptyTintLevel != 100 || _input.fullTintLevel != 100) ? ('') : '') +
                '
' +
                '
' +
                '
' +
                  '
' +
                    (_input.knobTintLevel != 100 ? ('') : '') +
                    '' +
                  '
' +
                '
' +
              '
'
            );
          }
        }
      };

      _class.set (_class.presets.Skin);
  }
});