SOURCE CODE: Uize.Widgets.ColorInfo.Html (view docs)

Uize.module ({
  name:'Uize.Widgets.ColorInfo.Html',
  builder:function () {
    'use strict';

    return Uize.package ({
      process:function (i) {
        function _cssClass (_class) {return m.cssClass (_class)}
        function _resolveNonStringToPixel (_value) {return typeof _value == "string" ? _value : +_value + "px"}
        var
          m = this,
          i = arguments [0],
          _idPrefix = i.idPrefix,
          _fragment0 = '" class="',
          _fragment1 = '" style="',
          _fragment2 = 'background-color:' + _resolveNonStringToPixel (i['valueAsHexRgb']) + ';',
          _fragment3 = _cssClass ('subheader')
        ;
        return (
          '<div id="' + _idPrefix + _fragment0 + i['mCssBindings_rootNodeClasses'] + '">\r\n  <div class="' + _cssClass ('contents') + '">\r\n    <div id="' + _idPrefix + '-heading' + _fragment0 + _cssClass ('heading') + '">' + i['valueAsHexRgb'] + '</div>\r\n    <div id="' + _idPrefix + '-body' + _fragment0 + _cssClass ('body') + '">\r\n      <div id="' + _idPrefix + '-swatch' + _fragment0 + _cssClass ('swatch') + _fragment1 + _fragment2 + '"></div>\r\n      <div class="' + _fragment3 + '">As a background</div>\r\n      <div id="' + _idPrefix + '-asBackground' + _fragment0 + _cssClass ('asBg') + _fragment1 + _fragment2 + '">\r\n        <span class="' + _cssClass ('whiteText') + '">white text</span>  \r\n        <span class="' + _cssClass ('blackText') + '">black text</span>\r\n      </div>\r\n      <div class="' + _fragment3 + '">As a text color</div>\r\n      <div id="' + _idPrefix + '-asForeground' + _fragment0 + _cssClass ('asColor') + _fragment1 + 'color:' + _resolveNonStringToPixel (i['valueAsHexRgb']) + ';' + '">\r\n        <div class="' + _cssClass ('onWhite') + '"></div>\r\n        <div class="' + _cssClass ('onBlack') + '"></div>\r\n        <div style="position:relative; width:100%;">on white    on black</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n'
        );

      }
    });
  }
});