new

source/Windows/res/components/calendar/script.js

@@ -0,0 +1,415 @@
+YL.onReady(function () {
+  var lang = YL.static.lang === 'zh-cn' ||  YL.static.lang === 'zh-tw'?
+    {
+      Mon: '星期一',
+      MonShort: '一',
+      Tues: '星期二',
+      TuesShort: '二',
+      Wed: '星期三',
+      WedShort: '三',
+      Thur: '星期四',
+      ThurShort: '四',
+      Fri: '星期五',
+      FriShort: '五',
+      Sat: '星期六',
+      SatShort: '六',
+      Sun: '星期日',
+      SunShort: '日',
+      Jan: '1月',
+      Feb: '2月',
+      Mar: '3月',
+      Apr: '4月',
+      May: '5月',
+      June: '6月',
+      July: '7月',
+      Aug: '8月',
+      Sept: '9月',
+      Oct: '10月',
+      Nov: '11月',
+      Dec: '12月',
+    }:
+    {
+      Mon: 'Monday',
+      MonShort: 'Mon',
+      Tues: 'Tuesday',
+      TuesShort: 'Tues',
+      Wed: 'Wednesday',
+      WedShort: 'Wed',
+      Thur: 'Thursday',
+      ThurShort: 'Thur',
+      Fri: 'Friday',
+      FriShort: 'Fri',
+      Sat: 'Saturday',
+      SatShort: 'Sat',
+      Sun: 'Sunday',
+      SunShort: 'Sun',
+      Jan: 'Jan',
+      Feb: 'Feb',
+      Mar: 'Mar',
+      Apr: 'Apr',
+      May: 'May',
+      June: 'June',
+      July: 'July',
+      Aug: 'Aug',
+      Sept: 'Sept',
+      Oct: 'Oct',
+      Nov: 'Nov',
+      Dec: 'Dec',
+    };
+  
+  var o_box_time = document.getElementById('_box_time');
+  var aDiv_time = o_box_time.getElementsByClassName('div-time');
+  var arrWeek = [lang.Sun, lang.Mon, lang.Tues, lang.Wed, lang.Thur, lang.Fri, lang.Sat];
+  var oCalendar = o_box_time.getElementsByClassName('calendar')[0];
+  var _aStrong = oCalendar.getElementsByTagName('strong');
+  var oDays = oCalendar.getElementsByClassName('_days')[0].getElementsByTagName('ul')[0];
+  var _oHeader = document.getElementsByClassName('_header')[0];
+  var _r_l = _oHeader.getElementsByTagName('span');
+  var _oYears_months = o_box_time.getElementsByClassName('_years_months')[0];
+  var _oYears_months_ul = _oYears_months.getElementsByTagName('ul')[0];
+  var _oNormal = o_box_time.getElementsByClassName('_normal')[0];
+  var _aLi_months = _oYears_months.getElementsByTagName('li');
+  var _delay_time = null;
+  var onOff = 0;
+  var _oTenYears = o_box_time.getElementsByClassName('_tenyears')[0];
+  var _oTenYears_ul = _oTenYears.firstElementChild;
+  var _oTenYears_lis = _oTenYears.getElementsByTagName('li');
+  var _nowDate = new Date();
+  var _setyear = _nowDate.getFullYear();
+  var _setmonth = _nowDate.getMonth();
+  var _setdate = _nowDate.getDate();
+  var _relYear = _setyear;
+  var _relMonth = _setmonth;
+  var _relDate = _setdate;
+  var _temp_ten = 0;
+  initDom();
+  showTime();
+  setInterval(showTime, 1000);
+  
+  function showTime() {
+    var date = new Date();
+    var h = date.getHours();
+    var m = date.getMinutes();
+    var s = date.getSeconds();
+    var year = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var day = date.getDate();
+    var week = date.getDay();
+    var str;
+    str = toZero(h) + ':' + toZero(m) + ':' + toZero(s);
+    aDiv_time[0].innerHTML = str;
+    str = year + '/' + month + '/' + day + ',' + arrWeek[week];
+    aDiv_time[1].innerHTML = str;
+  }
+  
+  aDiv_time[1].onclick = function () {
+    clearTimeout(_delay_time);
+    _setyear = _relYear;
+    _setmonth = _relMonth;
+    _setdate = _relDate;
+    showDate();
+    onOff = 0;
+    _oYears_months.style.display = 'none';
+    _oNormal.style.display = 'block';
+    _oTenYears.style.display = 'none';
+    for (var i = 0; i < _aLi_months.length; i++) {
+      _aLi_months[i].className = '';
+    }
+    _aLi_months[_setmonth].className = 'active';
+  };
+  var i;
+  for (i = 0; i < 3; i++) {
+    _aLi_months[_setmonth + i * 12].className = 'active';
+  }
+  for (i = 0; i < _aLi_months.length; i++) {
+    (function (n) {
+      _aLi_months[n].onclick = function () {
+        var i;
+        for (i = 0; i < _aLi_months.length; i++) {
+          _aLi_months[i].className = '';
+        }
+        _setmonth = n % 12;
+        for (i = 0; i < _aLi_months.length; i++) {
+          _aLi_months[i].className = '';
+        }
+        
+        for (i = 0; i < 3; i++) {
+          _aLi_months[_setmonth + i * 12].className = 'active';
+        }
+        console.log(this.offsetLeft, this.offsetTop);
+        
+        clearTimeout(_delay_time);
+        _delay_time = setTimeout(function () {
+          _aStrong[0].innerHTML = _setyear + '/' + (_setmonth + 1);
+          _oYears_months.style.display = 'none';
+          _oNormal.style.display = 'block';
+          
+          
+          _fn_block(_oNormal);
+          
+          _oTenYears.style.display = 'none';
+          // document.title=onOff;
+          showDate();
+          onOff = 0;
+        }, 200);
+        
+        
+      }
+    })(i);
+  }
+  
+  function _fn_block(ele) {
+    ele.style.transition = '0s';
+    ele.style.transform = 'scale(0.5)';
+    setTimeout(function () {
+      ele.style.transition = '0.3s';
+      ele.style.transform = 'scale(1)';
+    }, 10);
+  }
+  
+  showDate();
+  
+  function showDate() {
+    var str = '';
+    if (_setmonth === 0) {
+      str = _fn_layout(_setyear - 1, 11, _setdate) + _fn_layout(_setyear, _setmonth, _setdate) + _fn_layout(_setyear, _setmonth + 1, _setdate);
+    } else if (_setmonth === 11) {
+      str = _fn_layout(_setyear, _setmonth - 1, _setdate) + _fn_layout(_setyear, _setmonth, _setdate) + _fn_layout(_setyear + 1, 0, _setdate);
+    } else {
+      str = _fn_layout(_setyear, _setmonth - 1, _setdate) + _fn_layout(_setyear, _setmonth, _setdate) + _fn_layout(_setyear, _setmonth + 1, _setdate);
+    }
+    oDays.innerHTML = str;
+    _aStrong[0].innerHTML = _setyear + '/' + (_setmonth + 1);
+  }
+  
+  function _fn_layout(_setyear, _setmonth, _setdate) {
+    if (_setyear === _relYear && _setmonth === _relMonth) {
+      _setdate = _relDate;
+    } else {
+      _setdate = 1;
+    }
+    var _oDate = new Date();
+    var _date;
+    _oDate.setDate(_setdate);
+    _oDate.setMonth(_setmonth);
+    _oDate.setFullYear(_setyear);
+    _date = new Date(_oDate);
+    _date.setDate(0);
+    var _prevDays = _date.getDate();
+    _date = new Date(_oDate);
+    _date.setDate(1);
+    var _week = _date.getDay();
+    _date = new Date(_oDate);
+    _date.setDate(1);
+    _date.setMonth(_setmonth + 1);
+    _date.setDate(0);
+    var _allDays = _date.getDate();
+    var str = '';
+    var num = 0;
+    var i;
+    if (_week === 0) {
+      _week = 7;
+    }
+    for (i = 0; i < _week; i++) {
+      str = '<li class="grey">' + (_prevDays - i) + '</li>' + str;
+      num++;
+    }
+    for (i = 0; i < _allDays; i++) {
+      if (i === _setdate - 1) {
+        str += '<li class="active">' + (i + 1) + '</li>';
+      } else {
+        str += '<li>' + (i + 1) + '</li>';
+      }
+      num++;
+    }
+    for (i = 0; i < 42 - num; i++) {
+      str += '<li class="grey">' + (i + 1) + '</li>';
+    }
+    return str;
+  }
+  
+  _aStrong[0].onclick = function () {
+    clearTimeout(_delay_time);
+    if (onOff === 0) {
+      _aStrong[0].innerHTML = _setyear;
+      _oYears_months.style.display = 'block';
+      _fn_block(_oYears_months);
+      _oNormal.style.display = 'none';
+      _oTenYears.style.display = 'none';
+    } else if (onOff === 1) {
+      _temp_ten = 0;
+      _aStrong[0].innerHTML = Math.floor(_setyear / 10) * 10 + '-' + (Math.floor(_setyear / 10) * 10 + 9);
+      _oYears_months.style.display = 'none';
+      _oNormal.style.display = 'none';
+      _oTenYears.style.display = 'block';
+      _fn_block(_oTenYears);
+    } else if (onOff === 2) {
+      _aStrong[0].innerHTML = _setyear + '/' + (_setmonth + 1);
+      _oYears_months.style.display = 'none';
+      _oNormal.style.display = 'block';
+      _fn_block(_oNormal);
+      _oTenYears.style.display = 'none';
+    }
+    var i;
+    for (i = 0; i < _aLi_months.length; i++) {
+      _aLi_months[i].className = '';
+    }
+    for (i = 0; i < 3; i++) {
+      _aLi_months[_setmonth + i * 12].className = 'active';
+    }
+    if (onOff === 1) {
+      ten(_setyear);
+    }
+    if (onOff === 2) {
+      showDate();
+    }
+    onOff++;
+    onOff = onOff % 3;
+  };
+  
+  function ten(_year) {
+    _oTenYears_ul.innerHTML = _layout_tenyear(_year - 10) + _layout_tenyear(_year) + _layout_tenyear(_year + 10);
+    
+    for (var i = 0; i < _oTenYears_lis.length; i++) {
+      _oTenYears_lis[i].onclick = function () {
+        for (var i = 0; i < _oTenYears_lis.length; i++) {
+          _oTenYears_lis[i].className === 'active' && (_oTenYears_lis[i].className = '');
+        }
+        this.className = 'active';
+        _setyear = parseInt(this.innerHTML);
+        clearTimeout(_delay_time);
+        _delay_time = setTimeout(function () {
+          onOff = 1;
+          _aStrong[0].innerHTML = _setyear;
+          _oYears_months.style.display = 'block';
+          _fn_block(_oYears_months);
+          _oNormal.style.display = 'none';
+          _oTenYears.style.display = 'none';
+        }, 200);
+      }
+    }
+    
+  }
+  
+  _r_l[0].onclick = function () {
+    if (onOff === 0) {
+      _setmonth--;
+      if (_setmonth === -1) {
+        _setmonth = 11;  //0-11
+        _setyear--;
+      }
+      showDate();
+      oDays.style.transition = '0s';
+      oDays.style.top = '-25.2rem';
+      setTimeout(function () {
+        oDays.style.transition = '0.5s';
+        oDays.style.top = '-12.6rem';
+      }, 10);
+      
+      
+    } else if (onOff === 1) {
+      _setyear--;
+      _oYears_months_ul.style.transition = '0s';
+      _oYears_months_ul.style.top = '-21.6rem';
+      setTimeout(function () {
+        _oYears_months_ul.style.transition = '0.5s';
+        _oYears_months_ul.style.top = '-10.8rem';
+      }, 10);
+      _aStrong[0].innerHTML = _setyear;
+    } else if (onOff === 2) {
+      _temp_ten--;
+      var _temp = _setyear + 10 * _temp_ten;
+      _aStrong[0].innerHTML = Math.floor(_temp / 10) * 10 + '-' + (Math.floor(_temp / 10) * 10 + 9);
+      ten(_temp);
+      
+      _oTenYears_ul.style.transition = '0s';
+      _oTenYears_ul.style.top = '-21.6rem';
+      setTimeout(function () {
+        _oTenYears_ul.style.transition = '0.5s';
+        _oTenYears_ul.style.top = '-10.8rem';
+      }, 10);
+    }
+  };
+  _r_l[1].onclick = function () {
+    if (onOff === 0) {
+      _setmonth++;
+      if (_setmonth === 12) {
+        _setmonth = 0;  //0-11
+        _setyear++;
+      }
+      
+      showDate();
+      oDays.style.transition = '0s';
+      oDays.style.top = '0';
+      setTimeout(function () {
+        oDays.style.transition = '0.5s';
+        oDays.style.top = '-12.6rem';
+      }, 10);
+      
+    } else if (onOff === 1) {
+      _setyear++;
+      _oYears_months_ul.style.transition = '0s';
+      _oYears_months_ul.style.top = '0';
+      setTimeout(function () {
+        _oYears_months_ul.style.transition = '0.5s';
+        _oYears_months_ul.style.top = '-10.8rem';
+      }, 10);
+      _aStrong[0].innerHTML = _setyear;
+    } else if (onOff === 2) {
+      _temp_ten++;
+      var _temp = _setyear + 10 * _temp_ten;
+      _aStrong[0].innerHTML = Math.floor(_temp / 10) * 10 + '-' + (Math.floor(_temp / 10) * 10 + 9);
+      ten(_temp);
+      
+      _oTenYears_ul.style.transition = '0s';
+      _oTenYears_ul.style.top = '0';
+      setTimeout(function () {
+        _oTenYears_ul.style.transition = '0.5s';
+        _oTenYears_ul.style.top = '-10.8rem';
+      }, 10);
+      
+    }
+  };
+  
+  function toZero(num) {
+    return num < 10 ? '0' + num : '' + num;
+  }
+  
+  function _layout_tenyear(_year) {
+    var str = '';
+    var num = Math.floor(_year / 10) * 10;
+    var start = num - 1;
+    var end = num + 10;
+    for (var i = 0; i < 12; i++) {
+      if ((start + i) === _setyear && (start + i) >= num && (start + i) < end) {
+        str += '<li class="active">' + (start + i) + '</li>';
+      } else if (i === 0 || i === 11) {
+        str += '<li class="grey">' + (start + i) + '</li>';
+      } else {
+        str += '<li>' + (start + i) + '</li>';
+      }
+    }
+    return str;
+  }
+  
+  function initDom() {
+    var domWeek = o_box_time.getElementsByClassName('_week')[0];
+    var week = [lang.SunShort, lang.MonShort, lang.TuesShort, lang.WedShort, lang.ThurShort, lang.FriShort, lang.SatShort];
+    var months = [lang.Jan, lang.Feb, lang.Mar, lang.Apr, lang.May, lang.June, lang.July, lang.Aug, lang.Sept, lang.Oct, lang.Nov, lang.Dec];
+    week.forEach(function (t) {
+      var span = document.createElement('span');
+      span.innerHTML = t;
+      domWeek.appendChild(span);
+    });
+    var funcAddMonth = function () {
+      months.forEach(function (t) {
+        var li = document.createElement('li');
+        li.innerHTML = t;
+        _oYears_months_ul.appendChild(li);
+      });
+    };
+    funcAddMonth();
+    funcAddMonth();
+    funcAddMonth();
+  }
+});

source/Windows/res/components/calendar/style.css

@@ -0,0 +1,161 @@
+#_box_time *{
+    margin: 0;
+    padding: 0;
+}
+#_box_time li{
+    list-style: none;
+}
+#_box_time .clearfix:after{
+    content: '';
+    visibility: hidden;
+    display: block;
+    clear: both;
+}
+#_box_time{
+    color: #fff;
+    position: absolute;
+    bottom:2rem;
+    right: 0;
+    height: 25rem;
+    width:294px;
+}
+#_box_time ._h_m_s{
+    margin-top: 0.6rem;
+    height: 3.4rem;
+    font-size: 1.7rem;
+    line-height: 3.4rem;
+    text-indent: 1.2rem;
+}
+#_box_time ._y_m_d{
+    color: rgba(255, 255, 255, 0.50);
+    min-width: 12em;
+    margin-left: 0.8rem;
+    text-indent: 0.4rem;
+    font-size: 0.7rem;
+    height:1.5rem;
+    line-height: 1.5rem;
+    margin-bottom: 0.35rem;
+    text-align: left;
+}
+#_box_time ._y_m_d:hover{
+    cursor: pointer;
+    color: rgba(255, 255, 255, 0.72);
+}
+#_box_time .calendar {
+    height: 16.35rem;
+}
+#_box_time .calendar ._header{
+    height: 1.9rem;
+    line-height: 1.9rem;
+    font-size: 0.9rem;
+    color: #fff;
+    opacity: 0.8;
+    text-indent: 0.3rem;
+    position: relative;
+}
+#_box_time .calendar ._header strong{
+    padding-left: 0.9rem;
+    height: 1.9rem;
+    display: block;
+    width: 6.5rem;
+    font-weight: normal;
+    cursor: pointer;
+}
+#_box_time .calendar ._header strong:hover{
+    text-shadow: 0 0 3px #fff;
+}
+#_box_time .calendar ._header span{
+    cursor: pointer;
+    color: #fff;
+    position: absolute;
+    top:0;
+    right: 0;
+    height: 1.9rem;
+    text-indent: 0.65rem;
+    display: inline-block;
+    writing-mode: vertical-lr;
+    -webkit-writing-mode: vertical-lr;
+    font-weight: bold;
+}
+#_box_time .calendar ._header span:hover{
+    text-shadow: 0 0 3px #fff;
+}
+#_box_time .calendar ._header .aL{
+    right: 58px;
+}
+#_box_time .calendar ._header .aR{
+    right: 18px;
+}
+#_box_time .calendar ._week {
+    padding: 0 0.6rem 0;
+}
+#_box_time .calendar ._week span{
+    display: block;
+    width: 2.4rem;
+    font-size: 0.55rem;
+    height: 1.85rem;
+    float: left;
+    line-height: 1.85rem;
+    text-align: center;
+}
+#_box_time .calendar ._days {
+    height: 12.5rem;
+    overflow: hidden;
+    margin: 0 0.6rem 0;
+    position: relative;
+}
+#_box_time .calendar ._days ul{
+    position: absolute;
+    top:-12.6rem;
+    left: 0;
+}
+#_box_time .calendar ._days li{
+    /*font-family: arial;*/
+    font-size: 0.9rem;
+    display: block;
+    width: 2.3rem;
+    height: 2rem;
+    float: left;
+    line-height: 2rem;
+    text-align: center;
+    margin: 0.05rem;
+}
+#_box_time ._normal{
+    /*display: none;*/
+}
+#_box_time .grey {  color: rgba(236, 247, 255, 0.36);  }
+#_box_time .active {
+    box-shadow: inset 0 0 0 0.1rem rgba(255, 255, 255, 0.36), inset 0 0 0 0.2rem rgba(255, 255, 255, 0.30);
+    background-color: rgba(255, 255, 255, 0.25);
+}
+#_box_time ._years_months{
+    display: none;
+}
+#_box_time ._tenyears{
+    display: none;
+}
+#_box_time ._tenyears,._years_months{
+    margin-left: 0.65rem;
+    height: 10.8rem;
+    position: relative;
+    overflow: hidden;
+}
+#_box_time ._tenyears ul,#_box_time ._years_months ul{
+    position: absolute;
+    top: -10.8rem;
+    left: 0;
+}
+#_box_time ._years_months ul:hover{
+    /*top: -10.8rem;*/
+}
+#_box_time ._tenyears li,#_box_time ._years_months li{
+    cursor: pointer;
+    width: 4.15rem;
+    height: 3.6rem;
+    float: left;
+    line-height: 3.6rem;
+    text-align: center;
+}
+#_box_time ._tenyears li:hover,#_box_time ._years_months li:hover{
+    text-shadow: 0 0 1px #fff;
+}

source/Windows/res/components/color-picker/color-picker.css

@@ -0,0 +1,423 @@
+/*
+colpick Color Picker / colpick.com
+*/
+
+/*Main container*/
+.colpick {
+    position: absolute;
+    width: 346px;
+    height: 170px;
+    overflow: hidden;
+    display: none;
+    font-family: Arial, Helvetica, sans-serif;
+    background:#ebebeb;
+    border: 1px solid #bbb;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+
+    /*Prevents selecting text when dragging the selectors*/
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+.colpick,
+.colpick * {
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+}
+/*Color selection box*/
+.colpick_color {
+    position: absolute;
+    left: 7px;
+    top: 7px;
+    width: 156px;
+    height: 156px;
+    overflow: hidden;
+    outline: 1px solid #aaa;
+    cursor: crosshair;
+}
+.colpick_color_overlay1 {
+    position: absolute;
+    left:0;
+    top:0;
+    width: 156px;
+    height: 156px;
+    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff'); /* IE6 & IE7 */
+    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')"; /* IE8 */
+    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
+}
+.colpick_color_overlay2 {
+    position: absolute;
+    left:0;
+    top:0;
+    width: 156px;
+    height: 156px;
+    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000'); /* IE6 & IE7 */
+    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')"; /* IE8 */
+    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
+}
+/*HSL gradients are different*/
+.colpick_hsl .colpick_color_overlay1 {
+    background: linear-gradient(to right, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 100%);
+}
+.colpick_hsl .colpick_color_overlay2 {
+    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
+}
+/*Circular color selector*/
+.colpick_selector_outer {
+    background:none;
+    position: absolute;
+    width: 11px;
+    height: 11px;
+    margin: -6px 0 0 -6px;
+    border: 1px solid black;
+    border-radius: 50%;
+}
+.colpick_selector_inner{
+    position: absolute;
+    width: 9px;
+    height: 9px;
+    border: 1px solid white;
+    border-radius: 50%;
+}
+/*Vertical hue bar*/
+.colpick_hue {
+    position: absolute;
+    top: 6px;
+    left: 175px;
+    width: 19px;
+    height: 156px;
+    border: 1px solid #aaa;
+    cursor: n-resize;
+}
+/*Hue bar sliding indicator*/
+.colpick_hue_arrs {
+    position: absolute;
+    left: -8px;
+    width: 35px;
+    height: 7px;
+    margin: -7px 0 0 0;
+}
+.colpick_hue_larr {
+    position:absolute;
+    width: 0;
+    height: 0;
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    border-left: 7px solid #858585;
+}
+.colpick_hue_rarr {
+    position:absolute;
+    right:0;
+    width: 0;
+    height: 0;
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    border-right: 7px solid #858585;
+}
+/*New color box*/
+.colpick_new_color {
+    position: absolute;
+    left: 207px;
+    top: 6px;
+    width: 60px;
+    height: 27px;
+    background: #f00;
+    border: 1px solid #8f8f8f;
+}
+/*Current color box*/
+.colpick_current_color {
+    position: absolute;
+    left: 277px;
+    top: 6px;
+    width: 60px;
+    height: 27px;
+    background: #f00;
+    border: 1px solid #8f8f8f;
+}
+/*Input field containers*/
+.colpick_field, .colpick_hex_field  {
+    position: absolute;
+    height: 20px;
+    width: 60px;
+    overflow:hidden;
+    background:#f3f3f3;
+    color:#b8b8b8;
+    font-size:12px;
+    border:1px solid #bdbdbd;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+.colpick_rgb_r {
+    top: 40px;
+    left: 207px;
+}
+.colpick_rgb_g {
+    top: 67px;
+    left: 207px;
+}
+.colpick_rgb_b {
+    top: 94px;
+    left: 207px;
+}
+.colpick_hsx_h {
+    top: 40px;
+    left: 277px;
+}
+.colpick_hsx_s {
+    top: 67px;
+    left: 277px;
+}
+.colpick_hsx_x {
+    top: 94px;
+    left: 277px;
+}
+.colpick_hex_field {
+    width: 68px;
+    left: 207px;
+    top: 121px;
+}
+/*Text field container on focus*/
+.colpick_focus {
+    border-color: #999;
+}
+/*Field label container*/
+.colpick_field_letter {
+    position: absolute;
+    width: 12px;
+    height: 20px;
+    line-height: 20px;
+    padding-left: 4px;
+    background: #efefef;
+    border-right: 1px solid #bdbdbd;
+    font-weight: bold;
+    color:#777;
+}
+/*Text inputs*/
+.colpick_field input, .colpick_hex_field input {
+    position: absolute;
+    right: 11px;
+    margin: 0;
+    padding: 0;
+    height: 20px;
+    line-height: 20px;
+    background: transparent;
+    border: none;
+    font-size: 12px;
+    font-family: Arial, Helvetica, sans-serif;
+    color: #555;
+    text-align: right;
+    outline: none;
+}
+.colpick_hex_field input {
+    right: 4px;
+}
+/*Field up/down arrows*/
+.colpick_field_arrs {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 9px;
+    height: 21px;
+    cursor: n-resize;
+}
+.colpick_field_uarr {
+    position: absolute;
+    top: 5px;
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-bottom: 4px solid #959595;
+}
+.colpick_field_darr {
+    position: absolute;
+    bottom:5px;
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 4px solid #959595;
+}
+/*Submit/Select button*/
+.colpick_submit {
+    position: absolute;
+    left: 207px;
+    top: 149px;
+    width: 130px;
+    height: 22px;
+    line-height:22px;
+    background: #efefef;
+    text-align: center;
+    color: #555;
+    font-size: 12px;
+    font-weight:bold;
+    border: 1px solid #bdbdbd;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+.colpick_submit:hover {
+    background:#f3f3f3;
+    border-color:#999;
+    cursor: pointer;
+}
+
+/*full layout with no submit button*/
+.colpick_full_ns  .colpick_submit, .colpick_full_ns .colpick_current_color{
+    display:none;
+}
+.colpick_full_ns .colpick_new_color {
+    width: 130px;
+    height: 25px;
+}
+.colpick_full_ns .colpick_rgb_r, .colpick_full_ns .colpick_hsx_h {
+    top: 42px;
+}
+.colpick_full_ns .colpick_rgb_g, .colpick_full_ns .colpick_hsx_s {
+    top: 73px;
+}
+.colpick_full_ns .colpick_rgb_b, .colpick_full_ns .colpick_hsx_x {
+    top: 104px;
+}
+.colpick_full_ns .colpick_hex_field {
+    top: 135px;
+}
+
+/*rgbhex layout*/
+.colpick_rgbhex .colpick_hsx_h, .colpick_rgbhex .colpick_hsx_s, .colpick_rgbhex .colpick_hsx_x {
+    display:none;
+}
+.colpick_rgbhex {
+    width:282px;
+}
+.colpick_rgbhex .colpick_field, .colpick_rgbhex .colpick_submit {
+    width:68px;
+}
+.colpick_rgbhex .colpick_new_color {
+    width:34px;
+    border-right:none;
+}
+.colpick_rgbhex .colpick_current_color {
+    width:34px;
+    left:240px;
+    border-left:none;
+}
+
+/*rgbhex layout, no submit button*/
+.colpick_rgbhex_ns  .colpick_submit, .colpick_rgbhex_ns .colpick_current_color{
+    display:none;
+}
+.colpick_rgbhex_ns .colpick_new_color{
+    width:68px;
+    border: 1px solid #8f8f8f;
+}
+.colpick_rgbhex_ns .colpick_rgb_r {
+    top: 42px;
+}
+.colpick_rgbhex_ns .colpick_rgb_g {
+    top: 73px;
+}
+.colpick_rgbhex_ns .colpick_rgb_b {
+    top: 104px;
+}
+.colpick_rgbhex_ns .colpick_hex_field {
+    top: 135px;
+}
+
+/*hex layout*/
+.colpick_hex .colpick_hsx_h, .colpick_hex .colpick_hsx_s, .colpick_hex .colpick_hsx_x, .colpick_hex .colpick_rgb_r, .colpick_hex .colpick_rgb_g, .colpick_hex .colpick_rgb_b {
+    display:none;
+}
+.colpick_hex {
+    width:206px;
+    height:201px;
+}
+.colpick_hex .colpick_hex_field {
+    width:72px;
+    height:25px;
+    top:168px;
+    left:80px;
+}
+.colpick_hex .colpick_hex_field div, .colpick_hex .colpick_hex_field input {
+    height: 25px;
+    line-height: 25px;
+}
+.colpick_hex .colpick_new_color {
+    left:9px;
+    top:168px;
+    width:30px;
+    border-right:none;
+}
+.colpick_hex .colpick_current_color {
+    left:39px;
+    top:168px;
+    width:30px;
+    border-left:none;
+}
+.colpick_hex .colpick_submit {
+    left:164px;
+    top: 168px;
+    width:30px;
+    height:25px;
+    line-height: 25px;
+}
+
+/*hex layout, no submit button*/
+.colpick_hex_ns  .colpick_submit, .colpick_hex_ns .colpick_current_color {
+    display:none;
+}
+.colpick_hex_ns .colpick_hex_field {
+    width:80px;
+}
+.colpick_hex_ns .colpick_new_color{
+    width:60px;
+    border: 1px solid #8f8f8f;
+}
+
+/*Dark color scheme*/
+.colpick_dark {
+    background: #161616;
+    border-color: #2a2a2a;
+}
+.colpick_dark .colpick_color {
+    outline-color: #333;
+}
+.colpick_dark .colpick_hue {
+    border-color: #555;
+}
+.colpick_dark .colpick_field, .colpick_dark .colpick_hex_field {
+    background: #101010;
+    border-color: #2d2d2d;
+}
+.colpick_dark .colpick_field_letter {
+    background: #131313;
+    border-color: #2d2d2d;
+    color: #696969;
+}
+.colpick_dark .colpick_field input, .colpick_dark .colpick_hex_field input {
+    color: #7a7a7a;
+}
+.colpick_dark .colpick_field_uarr {
+    border-bottom-color:#696969;
+}
+.colpick_dark .colpick_field_darr {
+    border-top-color:#696969;
+}
+.colpick_dark .colpick_focus {
+    border-color:#444;
+}
+.colpick_dark .colpick_submit {
+    background: #131313;
+    border-color:#2d2d2d;
+    color:#7a7a7a;
+}
+.colpick_dark .colpick_submit:hover {
+    background-color:#101010;
+    border-color:#444;
+}

source/Windows/res/components/color-picker/color-picker.js

@@ -0,0 +1,561 @@
+/*
+colpick Color Picker
+Copyright 2013 Jose Vargas. Licensed under GPL license. Based on Stefan Petre's Color Picker www.eyecon.ro, dual licensed under the MIT and GPL licenses
+
+For usage and examples: colpick.com/plugin
+ */
+
+(function ($) {
+    var colpick = function () {
+        var
+            tpl = '<div class="colpick"><div class="colpick_color"><div class="colpick_color_overlay1"><div class="colpick_color_overlay2"><div class="colpick_selector_outer"><div class="colpick_selector_inner"></div></div></div></div></div><div class="colpick_hue"><div class="colpick_hue_arrs"><div class="colpick_hue_larr"></div><div class="colpick_hue_rarr"></div></div></div><div class="colpick_new_color"></div><div class="colpick_current_color"></div><div class="colpick_hex_field"><div class="colpick_field_letter">#</div><input type="text" maxlength="6" size="6" /></div><div class="colpick_rgb_r colpick_field"><div class="colpick_field_letter">R</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_g colpick_field"><div class="colpick_field_letter">G</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_b colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsx_h colpick_field"><div class="colpick_field_letter">H</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsx_s colpick_field"><div class="colpick_field_letter">S</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsx_x colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_submit"></div></div>',
+            defaults = {
+                showEvent: 'click',
+                onShow: function () {},
+                onBeforeShow: function(){},
+                onHide: function () {},
+                onChange: function () {},
+                onSubmit: function () {},
+                colorScheme: 'light',
+                color: '3289c7',
+                livePreview: true,
+                flat: false,
+                layout: 'full',
+                submit: 1,
+                submitText: 'OK',
+                height: 156,
+                hsl: false
+            },
+            //Fill the inputs of the plugin
+            fillRGBFields = function  (hsx, cal) {
+                var rgb = $(cal).data('colpick').hsl ? hslToRgb(hsx) : hsbToRgb(hsx);
+                $(cal).data('colpick').fields
+                    .eq(1).val(rgb.r).end()
+                    .eq(2).val(rgb.g).end()
+                    .eq(3).val(rgb.b).end();
+            },
+            fillHSXFields = function  (hsx, cal) {
+
+                $(cal).data('colpick').fields
+                    .eq(4).val(Math.round(hsx.h)).end()
+                    .eq(5).val(Math.round(hsx.s)).end()
+                    .eq(6).val(Math.round(hsx.x)).end();
+            },
+            fillHexFields = function (hsx, cal) {
+                $(cal).data('colpick').fields.eq(0).val($(cal).data('colpick').hsl ? hslToHex(hsx) : hsbToHex(hsx));
+            },
+            //Set the round selector position
+            setSelector = function (hsx, cal) {
+                $(cal).data('colpick').selector.css('backgroundColor', '#' + ($(cal).data('colpick').hsl ? hslToHex({h:hsx.h,s:100,x:50}) : hsbToHex({h:hsx.h,s:100,x:100})) );
+                $(cal).data('colpick').selectorIndic.css({
+                    left: parseInt($(cal).data('colpick').height * hsx.s/100, 10),
+                    top: parseInt($(cal).data('colpick').height * (100-hsx.x)/100, 10)
+                });
+            },
+            //Set the hue selector position
+            setHue = function (hsx, cal) {
+                $(cal).data('colpick').hue.css('top', parseInt($(cal).data('colpick').height - $(cal).data('colpick').height * hsx.h/360, 10));
+            },
+            //Set current and new colors
+            setCurrentColor = function (hsx, cal) {
+                $(cal).data('colpick').currentColor.css('backgroundColor', '#' + ($(cal).data('colpick').hsl ? hslToHex(hsx) : hsbToHex(hsx)) );
+            },
+            setNewColor = function (hsx, cal) {
+                $(cal).data('colpick').newColor.css('backgroundColor', '#' + ($(cal).data('colpick').hsl ? hslToHex(hsx) : hsbToHex(hsx)) );
+            },
+            //Called when the new color is changed
+            change = function (ev) {
+                var cal = $(this).parent().parent(), col;
+                if (this.parentNode.className.indexOf('_hex') > 0) {
+                    cal.data('colpick').color = col = cal.data('colpick').hsl ? hexToHsl(fixHex(this.value)) : hexToHsb(fixHex(this.value));
+                    fillRGBFields(col, cal.get(0));
+                    fillHSXFields(col, cal.get(0));
+                } else if (this.parentNode.className.indexOf('_hsx') > 0) {
+                    cal.data('colpick').color = col = fixHsx({
+                        h: parseInt(cal.data('colpick').fields.eq(4).val(), 10),
+                        s: parseInt(cal.data('colpick').fields.eq(5).val(), 10),
+                        x: parseInt(cal.data('colpick').fields.eq(6).val(), 10)
+                    });
+                    fillRGBFields(col, cal.get(0));
+                    fillHexFields(col, cal.get(0));
+                } else {
+                    var rgb = {
+                        r: parseInt(cal.data('colpick').fields.eq(1).val(), 10),
+                        g: parseInt(cal.data('colpick').fields.eq(2).val(), 10),
+                        b: parseInt(cal.data('colpick').fields.eq(3).val(), 10)
+                    };
+                    cal.data('colpick').color = col = cal.data('colpick').hsl ? rgbToHsl(fixRgb(rgb)) : rgbToHsb(fixRgb(rgb));
+                    fillHexFields(col, cal.get(0));
+                    fillHSXFields(col, cal.get(0));
+                }
+                setSelector(col, cal.get(0));
+                setHue(col, cal.get(0));
+                setNewColor(col, cal.get(0));
+                cal.data('colpick').onChange.apply(cal.parent(), [col, cal.data('colpick').hsl ? hslToHex(col) : hsbToHex(col), cal.data('colpick').hsl ? hslToRgb(col) : hsbToRgb(col), cal.data('colpick').el, 0]);
+            },
+            //Change style on blur and on focus of inputs
+            blur = function (ev) {
+                $(this).parent().removeClass('colpick_focus');
+            },
+            focus = function () {
+                $(this).parent().parent().data('colpick').fields.parent().removeClass('colpick_focus');
+                $(this).parent().addClass('colpick_focus');
+            },
+            //Increment/decrement arrows functions
+            downIncrement = function (ev) {
+                ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
+                var field = $(this).parent().find('input').focus();
+                var current = {
+                    el: $(this).parent().addClass('colpick_slider'),
+                    max: this.parentNode.className.indexOf('_hsx_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsx') > 0 ? 100 : 255),
+                    y: ev.pageY,
+                    field: field,
+                    val: parseInt(field.val(), 10),
+                    preview: $(this).parent().parent().data('colpick').livePreview
+                };
+                $(document).mouseup(current, upIncrement);
+                $(document).mousemove(current, moveIncrement);
+            },
+            moveIncrement = function (ev) {
+                ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val - ev.pageY + ev.data.y, 10))));
+                if (ev.data.preview) {
+                    change.apply(ev.data.field.get(0), [true]);
+                }
+                return false;
+            },
+            upIncrement = function (ev) {
+                change.apply(ev.data.field.get(0), [true]);
+                ev.data.el.removeClass('colpick_slider').find('input').focus();
+                $(document).off('mouseup', upIncrement);
+                $(document).off('mousemove', moveIncrement);
+                return false;
+            },
+            //Hue slider functions
+            downHue = function (ev) {
+                ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
+                var current = {
+                    cal: $(this).parent(),
+                    y: $(this).offset().top
+                };
+                $(document).on('mouseup touchend',current,upHue);
+                $(document).on('mousemove touchmove',current,moveHue);
+
+                var pageY = ((ev.type == 'touchstart') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
+                change.apply(
+                    current.cal.data('colpick')
+                        .fields.eq(4).val(parseInt(360*(current.cal.data('colpick').height - (pageY - current.y))/current.cal.data('colpick').height, 10))
+                        .get(0),
+                    [current.cal.data('colpick').livePreview]
+                );
+                return false;
+            },
+            moveHue = function (ev) {
+                var pageY = ((ev.type == 'touchmove') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
+                change.apply(
+                    ev.data.cal.data('colpick')
+                        .fields.eq(4).val(parseInt(360*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.y))))/ev.data.cal.data('colpick').height, 10))
+                        .get(0),
+                    [ev.data.preview]
+                );
+                return false;
+            },
+            upHue = function (ev) {
+                //fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
+                //fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
+                $(document).off('mouseup touchend',upHue);
+                $(document).off('mousemove touchmove',moveHue);
+                return false;
+            },
+            //Color selector functions
+            downSelector = function (ev) {
+                ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
+                var current = {
+                    cal: $(this).parent(),
+                    pos: $(this).offset()
+                };
+                current.preview = current.cal.data('colpick').livePreview;
+
+                $(document).on('mouseup touchend',current,upSelector);
+                $(document).on('mousemove touchmove',current,moveSelector);
+
+                var payeX,pageY;
+                if(ev.type == 'touchstart') {
+                    pageX = ev.originalEvent.changedTouches[0].pageX,
+                        pageY = ev.originalEvent.changedTouches[0].pageY;
+                } else {
+                    pageX = ev.pageX;
+                    pageY = ev.pageY;
+                }
+
+                change.apply(
+                    current.cal.data('colpick').fields
+                        .eq(6).val(parseInt(100*(current.cal.data('colpick').height - (pageY - current.pos.top))/current.cal.data('colpick').height, 10)).end()
+                        .eq(5).val(parseInt(100*(pageX - current.pos.left)/current.cal.data('colpick').height, 10))
+                        .get(0),
+                    [current.preview]
+                );
+                return false;
+            },
+            moveSelector = function (ev) {
+                var payeX,pageY;
+                if(ev.type == 'touchmove') {
+                    pageX = ev.originalEvent.changedTouches[0].pageX,
+                        pageY = ev.originalEvent.changedTouches[0].pageY;
+                } else {
+                    pageX = ev.pageX;
+                    pageY = ev.pageY;
+                }
+
+                change.apply(
+                    ev.data.cal.data('colpick').fields
+                        .eq(6).val(parseInt(100*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.pos.top))))/ev.data.cal.data('colpick').height, 10)).end()
+                        .eq(5).val(parseInt(100*(Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageX - ev.data.pos.left))))/ev.data.cal.data('colpick').height, 10))
+                        .get(0),
+                    [ev.data.preview]
+                );
+                return false;
+            },
+            upSelector = function (ev) {
+                //fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
+                //fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
+                $(document).off('mouseup touchend',upSelector);
+                $(document).off('mousemove touchmove',moveSelector);
+                return false;
+            },
+            //Submit button
+            clickSubmit = function (ev) {
+                var cal = $(this).parent();
+                var col = cal.data('colpick').color;
+                cal.data('colpick').origColor = col;
+                setCurrentColor(col, cal.get(0));
+                cal.data('colpick').onSubmit(col, cal.data('colpick').hsl ? hslToHex(col) : hsbToHex(col), cal.data('colpick').hsl ? hslToRgb(col) : hsbToRgb(col), cal.data('colpick').el);
+            },
+            //Show/hide the color picker
+            show = function (ev) {
+                // Prevent the trigger of any direct parent
+                ev.stopPropagation();
+                var cal = $('#' + $(this).data('colpickId'));
+                cal.data('colpick').onBeforeShow.apply(this, [cal.get(0)]);
+                var pos = $(this).offset();
+                var top = pos.top + this.offsetHeight;
+                var left = pos.left;
+                var viewPort = getViewport();
+                var calW = cal.width();
+                if (left + calW > viewPort.l + viewPort.w) {
+                    left -= calW;
+                }
+                cal.css({left: left + 'px', top: top + 'px'});
+                if (cal.data('colpick').onShow.apply(this, [cal.get(0)]) != false) {
+                    cal.show();
+                }
+                //Hide when user clicks outside
+                $('html').mousedown({cal:cal}, hide);
+                cal.mousedown(function(ev){ev.stopPropagation();})
+            },
+            hide = function (ev) {
+                if (ev.data.cal.data('colpick').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
+                    ev.data.cal.hide();
+                }
+                $('html').off('mousedown', hide);
+            },
+            getViewport = function () {
+                var m = document.compatMode == 'CSS1Compat';
+                return {
+                    l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
+                    w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth)
+                };
+            },
+            //Fix the values if the user enters a negative or high value
+            fixHsx = function (hsx) {
+                return {
+                    h: Math.min(360, Math.max(0, hsx.h)),
+                    s: Math.min(100, Math.max(0, hsx.s)),
+                    x: Math.min(100, Math.max(0, hsx.x))
+                };
+            },
+            fixRgb = function (rgb) {
+                return {
+                    r: Math.min(255, Math.max(0, rgb.r)),
+                    g: Math.min(255, Math.max(0, rgb.g)),
+                    b: Math.min(255, Math.max(0, rgb.b))
+                };
+            },
+            fixHex = function (hex) {
+                var len = 6 - hex.length;
+                if (len > 0) {
+                    var o = [];
+                    for (var i=0; i<len; i++) {
+                        o.push('0');
+                    }
+                    o.push(hex);
+                    hex = o.join('');
+                }
+                return hex;
+            },
+            restoreOriginal = function () {
+                var cal = $(this).parent();
+                var col = cal.data('colpick').origColor;
+                cal.data('colpick').color = col;
+                fillRGBFields(col, cal.get(0));
+                fillHexFields(col, cal.get(0));
+                fillHSXFields(col, cal.get(0));
+                setSelector(col, cal.get(0));
+                setHue(col, cal.get(0));
+                setNewColor(col, cal.get(0));
+            };
+        return {
+            init: function (opt) {
+                opt = $.extend({}, defaults, opt||{});
+                //Set color
+                if (typeof opt.color == 'string') {
+                    opt.color = opt.hsl ? hexToHsl(opt.color) : hexToHsb(opt.color);
+                } else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
+                    opt.color = opt.hsl ? rgbToHsl(opt.color) : rgbToHsb(opt.color);
+                } else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
+                    opt.color = opt.hsl ? fixHsl(opt.color) : fixHsb(opt.color);
+                } else {
+                    return this;
+                }
+
+                //For each selected DOM element
+                return this.each(function () {
+                    //If the element does not have an ID
+                    if (!$(this).data('colpickId')) {
+                        var options = $.extend({}, opt);
+                        options.origColor = opt.color;
+                        //Generate and assign a random ID
+                        var id = 'collorpicker_' + parseInt(Math.random() * 1000);
+                        $(this).data('colpickId', id);
+                        //Set the tpl's ID and get the HTML
+                        var cal = $(tpl).attr('id', id);
+                        //Add class according to layout
+                        cal.addClass('colpick_'+options.layout+(options.submit?'':' colpick_'+options.layout+'_ns'));
+                        //Add class if the color scheme is not default
+                        if(options.colorScheme != 'light') cal.addClass('colpick_'+options.colorScheme);
+                        //Add class if HSL is enabled
+                        if(options.hsl) cal.addClass('colpick_hsl');
+                        //Setup submit button
+                        cal.find('div.colpick_submit').html(options.submitText).click(clickSubmit);
+                        //Setup input fields
+                        options.fields = cal.find('input').change(change).blur(blur).focus(focus);
+                        cal.find('div.colpick_field_arrs').mousedown(downIncrement).end().find('div.colpick_current_color').click(restoreOriginal);
+                        //Setup hue selector
+                        options.selector = cal.find('div.colpick_color').on('mousedown touchstart',downSelector);
+                        options.selectorIndic = options.selector.find('div.colpick_selector_outer');
+                        //Store parts of the plugin
+                        options.el = this;
+                        options.hue = cal.find('div.colpick_hue_arrs');
+                        huebar = options.hue.parent();
+                        //Paint the hue bar
+                        var UA = navigator.userAgent.toLowerCase();
+                        var isIE = navigator.appName === 'Microsoft Internet Explorer';
+                        var IEver = isIE ? parseFloat( UA.match( /msie ([0-9]{1,}[\.0-9]{0,})/ )[1] ) : 0;
+                        var ngIE = ( isIE && IEver < 10 );
+                        var stops = ['#ff0000','#ff0080','#ff00ff','#8000ff','#0000ff','#0080ff','#00ffff','#00ff80','#00ff00','#80ff00','#ffff00','#ff8000','#ff0000'];
+                        if(ngIE) {
+                            var i, div;
+                            for(i=0; i<=11; i++) {
+                                div = $('<div></div>').attr('style','height:8.333333%; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+')";');
+                                huebar.append(div);
+                            }
+                        } else {
+                            stopList = stops.join(',');
+                            huebar.attr('style','background:-webkit-linear-gradient(top center,'+stopList+'); background:-moz-linear-gradient(top center,'+stopList+'); background:linear-gradient(to bottom,'+stopList+'); ');
+                        }
+                        cal.find('div.colpick_hue').on('mousedown touchstart',downHue);
+                        options.newColor = cal.find('div.colpick_new_color');
+                        options.currentColor = cal.find('div.colpick_current_color');
+                        //Store options and fill with default color
+                        cal.data('colpick', options);
+                        fillRGBFields(options.color, cal.get(0));
+                        fillHSXFields(options.color, cal.get(0));
+                        fillHexFields(options.color, cal.get(0));
+                        setHue(options.color, cal.get(0));
+                        setSelector(options.color, cal.get(0));
+                        setCurrentColor(options.color, cal.get(0));
+                        setNewColor(options.color, cal.get(0));
+                        //Append to body if flat=false, else show in place
+                        if (options.flat) {
+                            cal.appendTo(this).show();
+                            cal.css({
+                                position: 'relative',
+                                display: 'block'
+                            });
+                        } else {
+                            cal.appendTo(document.body);
+                            $(this).on(options.showEvent, show);
+                            cal.css({
+                                position:'absolute'
+                            });
+                        }
+                    }
+                });
+            },
+            //Shows the picker
+            showPicker: function() {
+                return this.each( function () {
+                    if ($(this).data('colpickId')) {
+                        show.apply(this);
+                    }
+                });
+            },
+            //Hides the picker
+            hidePicker: function() {
+                return this.each( function () {
+                    if ($(this).data('colpickId')) {
+                        $('#' + $(this).data('colpickId')).hide();
+                    }
+                });
+            },
+            //Sets a color as new and current (default)
+            setColor: function(col, setCurrent) {
+                setCurrent = (typeof setCurrent === "undefined") ? 1 : setCurrent;
+                if (typeof col == 'string') {
+                    col = hexToHsb(col);
+                } else if (col.r != undefined && col.g != undefined && col.b != undefined) {
+                    col = rgbToHsb(col);
+                } else if (col.h != undefined && col.s != undefined && col.b != undefined) {
+                    col = fixHsb(col);
+                } else {
+                    return this;
+                }
+                return this.each(function(){
+                    if ($(this).data('colpickId')) {
+                        var cal = $('#' + $(this).data('colpickId'));
+                        cal.data('colpick').color = col;
+                        cal.data('colpick').origColor = col;
+                        fillRGBFields(col, cal.get(0));
+                        fillHSXFields(col, cal.get(0));
+                        fillHexFields(col, cal.get(0));
+                        setHue(col, cal.get(0));
+                        setSelector(col, cal.get(0));
+
+                        setNewColor(col, cal.get(0));
+                        cal.data('colpick').onChange.apply(cal.parent(), [
+                            col,
+                            cal.data('colpick').hsl ? hslToHex(col) : hsbToHex(col),
+                            cal.data('colpick').hsl ? hslToRgb(col) : hsbToRgb(col),
+                            cal.data('colpick').el,
+                            1
+                        ]);
+                        if(setCurrent) {
+                            setCurrentColor(col, cal.get(0));
+                        }
+                    }
+                });
+            }
+        };
+    }();
+    //Color space convertions
+    var hexToRgb = function (hex) {
+        var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
+        return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
+    };
+    var hexToHsb = function (hex) {
+        return rgbToHsb(hexToRgb(hex));
+    };
+    var hexToHsl = function (hex) {
+        return rgbToHsl(hexToRgb(hex));
+    };
+    var rgbToHsb = function (rgb) {
+        var hsb = {h: 0, s: 0, x: 0};
+        var min = Math.min(rgb.r, rgb.g, rgb.b);
+        var max = Math.max(rgb.r, rgb.g, rgb.b);
+        var delta = max - min;
+        hsb.x = max;
+        hsb.s = max != 0 ? 255 * delta / max : 0;
+        if (hsb.s != 0) {
+            if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
+            else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
+            else hsb.h = 4 + (rgb.r - rgb.g) / delta;
+        } else hsb.h = -1;
+        hsb.h *= 60;
+        if (hsb.h < 0) hsb.h += 360;
+        hsb.s *= 100/255;
+        hsb.x *= 100/255;
+        return hsb;
+    };
+    var rgbToHsl = function (rgb) {
+        return hsbToHsl(rgbToHsb(rgb));
+    };
+    var hsbToHsl = function(hsb) {
+        var hsl = {h: 0, s: 0, x: 0};
+        hsl.h = hsb.h;
+        hsl.x = hsb.x*(200-hsb.s)/200;
+        hsl.s = hsb.x*hsb.s/(100-Math.abs(2*hsl.x-100));
+        return hsl;
+    };
+    var hslToHsb = function(hsl) {
+        var hsb = {h: 0, s: 0, x: 0};
+        hsb.h = hsl.h;
+        hsb.x = (200*hsl.x + hsl.s*(100-Math.abs(2*hsl.x-100)))/200
+        hsb.s = 200*(hsb.x-hsl.x)/hsb.x;
+        return hsb;
+    };
+    var hsbToRgb = function (hsb) {
+        var rgb = {};
+        var h = hsb.h;
+        var s = hsb.s*255/100;
+        var v = hsb.x*255/100;
+        if(s == 0) {
+            rgb.r = rgb.g = rgb.b = v;
+        } else {
+            var t1 = v;
+            var t2 = (255-s)*v/255;
+            var t3 = (t1-t2)*(h%60)/60;
+            if(h==360) h = 0;
+            if(h<60) {rgb.r=t1;	rgb.b=t2; rgb.g=t2+t3}
+            else if(h<120) {rgb.g=t1; rgb.b=t2;	rgb.r=t1-t3}
+            else if(h<180) {rgb.g=t1; rgb.r=t2;	rgb.b=t2+t3}
+            else if(h<240) {rgb.b=t1; rgb.r=t2;	rgb.g=t1-t3}
+            else if(h<300) {rgb.b=t1; rgb.g=t2;	rgb.r=t2+t3}
+            else if(h<360) {rgb.r=t1; rgb.g=t2;	rgb.b=t1-t3}
+            else {rgb.r=0; rgb.g=0;	rgb.b=0}
+        }
+        return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
+    };
+    var hslToRgb = function(hsl) {
+        return hsbToRgb(hslToHsb(hsl));
+    };
+    var rgbToHex = function (rgb) {
+        var hex = [
+            rgb.r.toString(16),
+            rgb.g.toString(16),
+            rgb.b.toString(16)
+        ];
+        $.each(hex, function (nr, val) {
+            if (val.length == 1) {
+                hex[nr] = '0' + val;
+            }
+        });
+        return hex.join('');
+    };
+    var hsbToHex = function (hsb) {
+        return rgbToHex(hsbToRgb(hsb));
+    };
+    var hslToHex = function (hsl) {
+        return hsbToHex(hslToHsb(hsl));
+    };
+    $.fn.extend({
+        colpick: colpick.init,
+        colpickHide: colpick.hidePicker,
+        colpickShow: colpick.showPicker,
+        colpickSetColor: colpick.setColor
+    });
+    $.extend({
+        colpick:{
+            rgbToHex: rgbToHex,
+            rgbToHsb: rgbToHsb,
+            rgbToHsl: rgbToHsl,
+            hsbToHex: hsbToHex,
+            hsbToRgb: hsbToRgb,
+            hsbToHsl: hsbToHsl,
+            hexToHsb: hexToHsb,
+            hexToHsl: hexToHsl,
+            hexToRgb: hexToRgb,
+            hslToHsb: hslToHsb,
+            hslToRgb: hslToRgb,
+            hslToHex: hslToHex
+        }
+    });
+})(jQuery);

source/Windows/res/components/contextMenu/README.md

@@ -0,0 +1,97 @@
+# contextMenu
+自由定制页面元素的右键菜单。
+
+![demo](https://github.com/yuri2peter/contextMenu/blob/master/pre.png?raw=true)
+
+> 是的同类的插件很多，作者造轮子是因为当初寻找右键菜单插件的时候，找了几个都有bug，要么经不起环境的考验，只能跑通demo。如果你也在寻找一款右键菜单插件，不如试试这一款，应该不会让你失望。
+
+## 最新版本
+v2.2.5
+## 原理
+该插件通过指定的参数，渲染出一个漂亮的右键菜单，并绑定菜单项点击事件。
+
+需要的参数有：
+
+1. 右键事件e。指定一个事件e，它可能是通过原生js、jq，甚至vue捕捉的；该插件将获取点击的位置，并阻止事件冒泡，屏蔽默认的右键菜单。
+2. 菜单描述数组menu。menu数组决定了你想渲染出什么样的菜单。
+
+## 特色
+
+* 侵入性小，这个插件几乎不会影响全局，除了ContextMenu全局变量。
+* 兼容性好，在各个屏幕尺寸和有无滚动条的场景都有不错的渲染效果。
+* 支持多层嵌套的DOM触发的事件，以最里层为准（详见demo）。
+* 支持二级菜单。
+
+## 准备
+
+1. 下载源码(并点赞)
+2. 引入 jquery
+3. 引入 contextMenu.css
+4. 引入 contextMenu.js
+
+## 典型用法
+
+~~~js
+            $('body').contextmenu(function (e) {
+                var menu=[
+                    'menu1', //合理的html或纯文字
+                    'menu2',
+                    '|', //分隔符
+                    [
+                        'click me', //title
+                        function (dom) {alert('Hi')} // 点击菜单项的回调
+                    ],
+                ];
+                ContextMenu.render(e,menu,this); //开始渲染
+            });
+~~~
+
+## API
+`ContextMenu.render(e,menu,param,theme)`
+
+**e**:点击事件对象，如`$('body').contextmenu(function (e){})`。
+
+**menu**:
+
+menu为`true`代表禁用系统默认菜单，但是不渲染自定义菜单；
+
+menu为数组表示渲染自定义右键菜单；
+~~~js
+var menu=[
+    '文字1', //纯文字或html将直接被渲染，做为一个提示性菜单项
+    '文字2',
+    '|', //简单的一个分隔符
+    ['功能1',function(param){alert("功能1点击")}], //这种格式说明这个菜单项可以被点击并产生回调
+    [
+        '子菜单',[
+            '文字3',
+            '文字4',
+            '|',
+            ['功能2',function(param){alert("功能2点击")}],
+        ]
+    ] //声明一个子菜单，子菜单内部的声明格式和父级一样
+]
+~~~
+
+**param**:菜单点击回调的第一个参数
+
+**theme**:主题（目前可选主题"light"）
+
+## 其他
+注意：为了获得正确的屏幕尺寸，添加了一个`html,body:{height:100%}`的样式，请确保该样式生效不被覆盖。
+
+## 更多项目
+[Yuri2'Projects](https://github.com/yuri2peter/)
+
+## TOOD
+
+* 右键菜单，二级垂直方向有可能溢出
+
+## 更新记录
+
+* v2.2.5 修复文字溢出（title提示）和子菜单底部溢出
+* v2.2.3 优化css
+* v2.2.2 新增第三个参数[bool] disable 临时禁用菜单点击功能 `['功能2',function(param){alert("功能2点击")},true]`
+* v2.2.1 优化css
+* v2.2.0 新增主题切换功能
+* v2.1.1 修复了二级菜单溢出屏幕的问题，更好的兼容性

source/Windows/res/components/contextMenu/contextMenu.css

@@ -0,0 +1,92 @@
+
+html, body {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+.yuri2-context-menu {
+    left: 0;
+    top: 0;
+    position: fixed;
+    width: 150px;
+    height: auto;
+    background-color: rgb(61, 61, 61);
+    display: block;
+    /*border-radius: 5px;*/
+    z-index: 99999999;
+    color: white;
+    /*overflow: hidden;*/
+}
+.yuri2-context-menu.sub {
+    left: 98%;
+    position: absolute;
+    display: none;
+}
+.yuri2-context-menu.sub.left {
+    left: auto;
+    right: 98%;
+}
+.yuri2-context-menu ul li:hover .yuri2-context-menu.sub {
+    display: block;
+}
+.yuri2-context-menu ul.left .yuri2-context-menu.sub{
+    left: -100%;
+}
+.yuri2-context-menu ul {
+    margin: 0px;
+    padding: 0px;
+    box-shadow: 0 0 16px rgba(0, 0, 0, 0.54);
+}
+
+.yuri2-context-menu ul li {
+    transition: background-color 0.5s;
+    cursor: default;
+    padding: 0px 1em;
+    list-style: none;
+    line-height: 30px;
+    height: 30px;
+    font-size: 10px;
+    /*overflow: hidden;*/
+    position: relative;
+}
+.yuri2-context-menu ul li div.title{
+    width: 80%;
+    overflow: hidden;
+    height: 100%;
+    float: left;
+    word-break: break-all;
+}
+.yuri2-context-menu ul li div.title.disable {
+    color: darkgrey;
+}
+.yuri2-context-menu ul li.sub:after {
+    content: ">";
+    float: right;
+    transform: scale3d(0.5,1.5,1);
+    position: relative;
+}
+.yuri2-context-menu ul li:hover {
+    background-color: #636363;
+}
+
+.yuri2-context-menu ul li a {
+    text-decoration: none;
+    display: block;
+    height: 100%;
+    color: #333;
+    outline: none;
+}
+
+.yuri2-context-menu ul hr {
+    margin: 0;
+    height: 0;
+    border: 0;
+    border-bottom: rgba(132, 132, 132, 0.47) 1px solid;
+    border-top: none
+}
+
+/*浅色主题*/
+.yuri2-context-menu.light {background-color: #e0e0e0;border-color: #535353;color: #333333;}
+.yuri2-context-menu.light ul li:hover {background-color: #707070;color: #ffffff;}
+.yuri2-context-menu.light ul hr{border-color: #535353;}

source/Windows/res/components/contextMenu/contextMenu.js

@@ -0,0 +1,96 @@
+/**
+ * contextMenu v2.2.4
+ * @author Yuri2(yuri2peter@qq.com)
+ * @link https://github.com/yuri2peter/contextMenu
+ * Enjoy! (●'◡'●)
+ * 基于jq的右键菜单（动态绑定）
+ * @author Yuri2
+ */
+window.ContextMenu={
+    _className:'yuri2-context-menu',
+    _stopProp:function (e) {
+        if (e.cancelable) {
+            // 判断默认行为是否已经被禁用
+            if (!e.defaultPrevented) {
+                e.preventDefault();
+            }
+        }
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+    },
+    _getMainContent:function(text){
+        return text.replace(/<\/?.+?>/g,"");
+    },
+    render:function (e, menu, trigger,theme) {
+        theme||(theme='');
+        var x=e.clientX,y=e.clientY;
+        this._stopProp(e);
+        this._removeContextMenu();
+        if(menu===true){return;}
+        if(typeof menu === 'object' && menu.length===0){menu=[['...']]}
+        var dom = $("<div class='"+ContextMenu._className+" "+theme+"'><ul></ul></div>");
+        $('body').append(dom);
+        var ul=dom.find('ul');
+        if(x+150>document.body.clientWidth){x-=150;ul.addClass('left')}
+        menu.forEach(function (item) {
+            if(item==='|'){
+                ul.append($('<hr/>'));
+            }
+            else if(typeof(item)==='string'){
+                ul.append($('<li><div class="title" title="'+ContextMenu._getMainContent(item)+'">'+item+'</div></li>'));
+            }
+            else if(typeof(item)==='object'){
+                var sub=$('<li><div class="title '+(item[2]===true?'disable':'')+'" title="'+ContextMenu._getMainContent(item[0])+'">'+item[0]+'</div></li>');
+                ul.append(sub);
+                if(typeof(item[1])==='object'){
+                    var subMenu=$("<div class='sub "+ContextMenu._className+" "+theme+"'>\</div>");
+                    var subUl=$("<ul></ul>");
+                    sub.addClass('sub');
+                    subMenu.append(subUl);
+                    if(x+300>document.body.clientWidth){subMenu.addClass('left')}
+                    sub.append(subMenu);
+                    var counterForTop = -1;
+                    item[1].forEach(function (t) {
+                        if(t==='|'){
+                            subUl.append($('<hr/>'));
+                        }
+                        else if(typeof(t)==='string'){
+                            subUl.append($('<li><div class="title" title="'+ContextMenu._getMainContent(t)+'">'+t+'</div></li>'));
+                            counterForTop++;
+                        }
+                        else if(typeof(t)==='object'){
+                            var subLi=$('<li><div class="title '+(t[2]===true?'disable':'')+'" title="'+ContextMenu._getMainContent(t[0])+'">'+t[0]+'</div></li>');
+                            subUl.append(subLi);
+                            if(t[2]!==true){
+                                subLi.click(trigger,t[1]);
+                                subLi.click(function () {ContextMenu._removeContextMenu();});
+                            }
+                            counterForTop++;
+                        }
+                    });
+                    if(y+dom.height()>document.body.clientHeight && document.body.clientHeight>0){
+                        subMenu.css('top','-'+(counterForTop*30)+'px')
+                    }
+                }
+                else if(typeof(item[1])==='function' &&item[2]!==true){
+                    sub.click(trigger,item[1]);
+                    sub.click(function () {ContextMenu._removeContextMenu();});
+                }
+            }
+        });
+        //修正坐标
+        if(y+dom.height()>document.body.clientHeight && document.body.clientHeight>0){y-=dom.height()}
+        dom.css({
+            top:y,
+            left:x,
+        });
+    },
+    _removeContextMenu:function () {
+        $('.'+ContextMenu._className).remove();
+    },
+};
+
+$(document).click(function (e) {
+    if ($(e.target).hasClass(ContextMenu._className) || $(e.target).parents('.'+ContextMenu._className).length > 0) return;
+    ContextMenu._removeContextMenu();
+});

source/Windows/res/components/layer-v3.0.3/layer/mobile/layer.js

@@ -0,0 +1,2 @@
+/*! layer mobile-v2.0.0 Web弹层组件 MIT License  http://layer.layui.com/mobile  By 贤心 */
+ ;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(n.content||"")+"</p>"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+l+'<div class="layui-m-layercont">'+n.content+"</div>"+c+"</div></div></div>",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o<r;o++)l.touch(s[o],a);if(e.shade&&e.shadeClose){var c=t[i]("layui-m-layershade")[0];l.touch(c,function(){layer.close(n.index,e.end)})}e.end&&(l.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new c(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(l.timer[e]),delete l.timer[e],"function"==typeof l.end[e]&&l.end[e](),delete l.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window);