New (quite) stable version
Initial version (tested on IE7, IE6 possible with new CSS)pull/16/head
peterd
10 years ago
commit
08725127a0
Binary file not shown.
|
After Width: | Height: | Size: 102 B |
Binary file not shown.
|
After Width: | Height: | Size: 70 B |
Binary file not shown.
|
After Width: | Height: | Size: 594 B |
File diff suppressed because one or more lines are too long
@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<link href="color.css" rel="stylesheet" type="text/css">
|
||||
<title>color_new</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="testPatch"> </div>
|
||||
|
||||
<div id="colorValues"> </div>
|
||||
|
||||
<div id="sliders" class="sliders">
|
||||
<div id="rgbR"><div></div></div>
|
||||
<div id="rgbG"><div></div></div>
|
||||
<div id="rgbB"><div></div></div>
|
||||
|
||||
<div id="hslH"><div></div></div>
|
||||
<div id="hslS"><div></div></div>
|
||||
<div id="hslL"><div></div></div>
|
||||
</div>
|
||||
|
||||
<div id="hsv_map">
|
||||
<canvas id="surface" width="200" height="200"></canvas>
|
||||
<div class="cover"></div>
|
||||
<div class="hsv-cursor"></div>
|
||||
<canvas id="brightness" width="25" height="200"></canvas>
|
||||
<div class="hsv-v-cursor" id="hsv_cursor">
|
||||
<div class="hsv-vl-cursor"></div>
|
||||
<div class="hsv-vr-cursor"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="color_squares">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div id="model_display"></div>
|
||||
|
||||
<!--[if IE]>
|
||||
<object id='wtPlugin' classid='CLSID:092dfa86-5807-5a94-bf3b-5a53ba9e5308'></object>
|
||||
<![endif]-->
|
||||
<!--[if !IE]> <-->
|
||||
<object id="wtPlugin" type="application/x-wacomtabletplugin">
|
||||
<param name="onload" value="pluginLoaded" />
|
||||
</object>
|
||||
<!--> <![endif]-->
|
||||
|
||||
|
||||
<!--canvas style="position: absolute; left: 500px; width: 255px; height: 255px" id="canvas"></canvas-->
|
||||
<!--[if IE]><script type="text/javascript" src="excanvas_r3/excanvas.js"></script><![endif]-->
|
||||
<script type="text/javascript" src="color.js"></script>
|
||||
<script type="text/javascript" src="tools.js"></script>
|
||||
<script type="text/javascript" src="color_init.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,646 @@
|
||||
/* -------- main app -------- */
|
||||
|
||||
.cp-app {
|
||||
color: #bbb;
|
||||
font-family: "Courier New", Courier, mono; /* "Courier New", */
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
|
||||
width: 412px;
|
||||
height: 323px;
|
||||
background-color: #444;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.S {
|
||||
width: 266px;
|
||||
height: 177px;
|
||||
}
|
||||
.XS {
|
||||
width: 158px;
|
||||
height: 173px;
|
||||
}
|
||||
.XXS {
|
||||
height: 105px;
|
||||
width: 154px;
|
||||
}
|
||||
.no-alpha {
|
||||
height: 308px;
|
||||
}
|
||||
.no-alpha .cp-opacity, .no-alpha .cp-alpha {
|
||||
display: none;
|
||||
}
|
||||
.S.no-alpha { /* IE6 */
|
||||
height: 162px;
|
||||
}
|
||||
.XS.no-alpha {
|
||||
height: 158px;
|
||||
}
|
||||
.XXS.no-alpha {
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
|
||||
.cp-app,
|
||||
.cp-app div { /* reset for all children */
|
||||
border: none;
|
||||
padding: 0;
|
||||
float: none;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
/* to be IE <7 compatible */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
-ms-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.cp-app div {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* -------- images -------- */
|
||||
|
||||
.cp-slds .cp-curm,
|
||||
.cp-panel .cp-disp,
|
||||
.cp-panel .cp-nsarrow,
|
||||
.cp-app .cp-exit,
|
||||
.cp-app .cp-memo-cursor,
|
||||
.cp-app .cp-resize {
|
||||
background-image: url(_icons.png);
|
||||
}
|
||||
.cp-app .do-drag div {
|
||||
cursor: url(_blank.png), auto;
|
||||
}
|
||||
.cp-app .cp-opacity,
|
||||
.cp-memo .cp-raster-bg,
|
||||
.cp-app .cp-raster {
|
||||
background-image: url(_bgs.png);
|
||||
}
|
||||
|
||||
/* -------- left sliders -------- */
|
||||
|
||||
.cp-app .cp-slds {
|
||||
width: 287px;
|
||||
height: 256px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
overflow: hidden;
|
||||
cursor: crosshair;
|
||||
}
|
||||
.S .cp-slds {
|
||||
width: 143px;
|
||||
height: 128px;
|
||||
left: 9px;
|
||||
top: 9px;
|
||||
}
|
||||
.XS .cp-slds {
|
||||
left: 7px;
|
||||
top: 7px;
|
||||
}
|
||||
.XXS .cp-slds {
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
/* .cp-slds .cp-sldl-1,
|
||||
.cp-slds .cp-sldl-2,
|
||||
.cp-slds .cp-sldl-3,
|
||||
.cp-slds .cp-sldl-4 { */
|
||||
.cp-slds div {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
left: 0;
|
||||
}
|
||||
.S .cp-sldl-1,
|
||||
.S .cp-sldl-2,
|
||||
.S .cp-sldl-3,
|
||||
.S .cp-sldl-4 {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
.XXS .cp-slds,
|
||||
.XXS .cp-slds .cp-sldl-1,
|
||||
.XXS .cp-slds .cp-sldl-2,
|
||||
.XXS .cp-slds .cp-sldl-3,
|
||||
.XXS .cp-slds .cp-sldl-4 {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
/* -------- right sliders -------- */
|
||||
|
||||
.cp-slds .cp-sldr-1,
|
||||
.cp-slds .cp-sldr-2,
|
||||
.cp-slds .cp-sldr-3,
|
||||
.cp-slds .cp-sldr-4 {
|
||||
width: 31px;
|
||||
/* height: 256px; */
|
||||
left: 256px;
|
||||
cursor: default;
|
||||
}
|
||||
.S .cp-sldr-1,
|
||||
.S .cp-sldr-2,
|
||||
.S .cp-sldr-3,
|
||||
.S .cp-sldr-4 {
|
||||
width: 15px;
|
||||
height: 128px;
|
||||
left: 128px;
|
||||
}
|
||||
|
||||
/* -------- Cursors -------- */
|
||||
|
||||
.cp-slds .cp-curm {
|
||||
margin: -5px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background-position: -36px -30px;
|
||||
/* cursor: crosshair; */
|
||||
}
|
||||
.light .cp-curm {
|
||||
background-position: -7px -30px;
|
||||
}
|
||||
|
||||
.cp-slds .cp-curl,
|
||||
.cp-slds .cp-curr {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
margin: -3px -4px;
|
||||
border: 4px solid;
|
||||
background-image: none;
|
||||
cursor: default;
|
||||
left: auto; /* due to .cp-slds div */
|
||||
}
|
||||
|
||||
.cp-slds .cp-curl,
|
||||
.cp-app .cp-slds .cp-curl-dark,
|
||||
.hue-dark div.cp-curl {
|
||||
right: 27px;
|
||||
border-color: transparent transparent transparent #fff;
|
||||
}
|
||||
.light .cp-curl,
|
||||
.cp-app .cp-slds .cp-curl-light,
|
||||
.hue-light .cp-curl {
|
||||
border-color: transparent transparent transparent #000;
|
||||
}
|
||||
.S .cp-slds .cp-curl,
|
||||
.S .cp-slds .cp-curr {
|
||||
border-width: 3px;
|
||||
}
|
||||
.S .cp-slds .cp-curl-light,
|
||||
.S .cp-slds .cp-curl {
|
||||
right: 13px;
|
||||
}
|
||||
|
||||
.cp-slds .cp-curr,
|
||||
.cp-app .cp-slds .cp-curr-dark {
|
||||
right: 4px;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
}
|
||||
.light .cp-curr,
|
||||
.cp-app .cp-slds .cp-curr-light {
|
||||
border-color: transparent #000 transparent transparent;
|
||||
}
|
||||
|
||||
/* -------- alpha bar -------- */
|
||||
|
||||
.cp-app .cp-opacity {
|
||||
bottom: 44px;
|
||||
left: 10px;
|
||||
height: 10px;
|
||||
width: 287px;
|
||||
background-position: 0 -87px;
|
||||
}
|
||||
.S .cp-opacity {
|
||||
bottom: 27px;
|
||||
left: 9px;
|
||||
width: 143px;
|
||||
background-position: 0 -100px;
|
||||
}
|
||||
.XS .cp-opacity {
|
||||
left: 7px;
|
||||
bottom: 25px;
|
||||
}
|
||||
.XXS .cp-opacity {
|
||||
left: 5px;
|
||||
bottom: 23px;
|
||||
}
|
||||
.cp-opacity div {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
margin-top: -3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cp-opacity .cp-opacity-slider {
|
||||
margin: 0 -4px;
|
||||
width: 0px;
|
||||
height: 8px; /* IE7 */
|
||||
|
||||
border: 4px solid #aaa;
|
||||
border-color: #eee transparent;
|
||||
}
|
||||
|
||||
/* -------- color memory -------- */
|
||||
|
||||
.cp-app .cp-memo {
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
width: 288px;
|
||||
height: 31px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.S .cp-memo {
|
||||
height: 15px;
|
||||
width: 144px;
|
||||
left: 9px;
|
||||
bottom: 9px;
|
||||
}
|
||||
.XS .cp-memo {
|
||||
left: 7px;
|
||||
bottom: 7px;
|
||||
}
|
||||
.XXS .cp-memo {
|
||||
left: 5px;
|
||||
bottom: 5px;
|
||||
}
|
||||
.cp-memo div {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.S .cp-memo div {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.cp-app .cp-raster, /* also for .cp-ctrl section */
|
||||
.cp-memo .cp-raster-bg,
|
||||
.S .cp-memo .cp-raster,
|
||||
.S .cp-memo .cp-raster-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.S .cp-memo .cp-raster-bg {
|
||||
background-position: 0 -31px;
|
||||
}
|
||||
.cp-app .cp-raster {
|
||||
background-position: 0px -49px;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
|
||||
filter: alpha(opacity=20);
|
||||
-moz-opacity: 0.2;
|
||||
-khtml-opacity: 0.2;
|
||||
opacity: .2;
|
||||
}
|
||||
.alpha-bg-b .cp-memo {
|
||||
background-color: #333;
|
||||
}
|
||||
.alpha-bg-b .cp-raster {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
-moz-opacity: 1;
|
||||
-khtml-opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cp-memo .cp-memo-cursor {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-position: -26px -87px;
|
||||
}
|
||||
.cp-app .light .cp-memo-cursor {
|
||||
background-position: 3px -87px;
|
||||
}
|
||||
.S .cp-memo-cursor {
|
||||
background-position: -34px -95px;
|
||||
}
|
||||
.S .light .cp-memo-cursor {
|
||||
background-position: -5px -95px;
|
||||
}
|
||||
|
||||
/* -------- panel -------- */
|
||||
|
||||
.cp-app .cp-panel {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
width: 96px;
|
||||
background-color: #333;
|
||||
border: 1px solid;
|
||||
border-color: #222 #555 #555 #222;
|
||||
overflow: hidden;
|
||||
}
|
||||
.S .cp-panel {
|
||||
top: 9px;
|
||||
right: 9px;
|
||||
bottom: 9px;
|
||||
}
|
||||
.XS .cp-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cp-panel div {
|
||||
position: relative;
|
||||
/*overflow: visible;*/ /* especially for .cp-disp */
|
||||
}
|
||||
|
||||
/* -------- panel sections -------- */
|
||||
|
||||
.cp-panel .cp-hsv, /* not very happy with this ... */
|
||||
.cp-panel .cp-hsl,
|
||||
.cp-panel .cp-rgb,
|
||||
.cp-panel .cp-cmyk,
|
||||
.cp-panel .cp-Lab,
|
||||
.cp-panel .cp-alpha,
|
||||
.no-alpha .cp-panel .cp-HEX,
|
||||
.cp-panel .cp-HEX {
|
||||
width: 86px;
|
||||
margin: -1px 0 1px 4px;
|
||||
padding: 1px 0 3px;
|
||||
border-top: 1px solid #444;
|
||||
border-bottom: 1px solid #222;
|
||||
float: left;
|
||||
}
|
||||
.cp-panel .cp-hsv,
|
||||
.cp-panel .cp-hsl {
|
||||
padding-top: 2px;
|
||||
}
|
||||
.S .cp-hsv,
|
||||
.S .cp-hsl {
|
||||
padding-top: 1px;
|
||||
}
|
||||
.cp-panel .cp-HEX {
|
||||
border-bottom: none; /* 1px solid #333; */
|
||||
border-top: 0;
|
||||
margin-top: -4px;
|
||||
padding-top: 0;
|
||||
}
|
||||
.no-alpha .cp-panel .cp-HEX {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.cp-panel .cp-alpha {
|
||||
border-bottom: none;
|
||||
}
|
||||
.S .rgb-r .cp-hsv,
|
||||
.S .rgb-g .cp-hsv,
|
||||
.S .rgb-b .cp-hsv,
|
||||
.S .rgb-r .cp-hsl,
|
||||
.S .rgb-g .cp-hsl,
|
||||
.S .rgb-b .cp-hsl,
|
||||
.S .hsv-h .cp-rgb,
|
||||
.S .hsv-s .cp-rgb,
|
||||
.S .hsv-v .cp-rgb,
|
||||
.S .hsl-h .cp-rgb,
|
||||
.S .hsl-s .cp-rgb,
|
||||
.S .hsl-l .cp-rgb,
|
||||
.S .cp-cmyk,
|
||||
.S .cp-Lab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* -------- panel sections' elements -------- */
|
||||
|
||||
.cp-panel .cp-butt,
|
||||
.cp-panel .cp-labl {
|
||||
float: left;
|
||||
width: 16px; width: 14px; /* IE 7 */
|
||||
height: 16px; height: 14px; /* IE 7 */
|
||||
margin-top: 2px;
|
||||
text-align: center;
|
||||
border: 1px solid;
|
||||
}
|
||||
.cp-panel .cp-butt {
|
||||
border-color: #555 #222 #222 #555;
|
||||
}
|
||||
.cp-panel .cp-butt:active {
|
||||
background-color: #444;
|
||||
}
|
||||
.cp-panel .cp-labl {
|
||||
border-color: transparent;
|
||||
}
|
||||
.cp-panel .Lab-mode,
|
||||
.cp-panel .cmyk-mode,
|
||||
.cp-panel .hsv-mode,
|
||||
.cp-panel .hsl-mode {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0; /* IE 7 */
|
||||
height: 52px;
|
||||
}
|
||||
.cp-panel .cmyk-mode {
|
||||
height: 70px;
|
||||
}
|
||||
.hsl-h .hsl-h-labl,
|
||||
.hsl-s .hsl-s-labl,
|
||||
.hsl-l .hsl-l-labl,
|
||||
.hsv-h .hsv-h-labl,
|
||||
.hsv-s .hsv-s-labl,
|
||||
.hsv-v .hsv-v-labl {
|
||||
color: #FF9900;
|
||||
}
|
||||
|
||||
.cp-panel .cmyk-mode,
|
||||
.cp-panel .hsv-mode,
|
||||
|
||||
.rgb-r .rgb-r-butt, .rgb-g .rgb-g-butt, .rgb-b .rgb-b-butt,
|
||||
.hsv-h .hsv-h-butt, .hsv-s .hsv-s-butt, .hsv-v .hsv-v-butt,
|
||||
.hsl-h .hsl-h-butt, .hsl-s .hsl-s-butt, .hsl-l .hsl-l-butt,
|
||||
|
||||
.cp-panel .rgb-r-labl,
|
||||
.cp-panel .rgb-g-labl,
|
||||
.cp-panel .rgb-b-labl,
|
||||
|
||||
.cp-panel .alpha-butt,
|
||||
.cp-panel .HEX-butt,
|
||||
.cp-panel .Lab-x-labl/*,
|
||||
.cp-panel .alpha-labl*/ { /* ON */
|
||||
background-color: #444;
|
||||
border-color: #222 #555 #555 #222;
|
||||
}
|
||||
|
||||
.no-rgb-r .rgb-r-labl,
|
||||
.no-rgb-g .rgb-g-labl,
|
||||
.no-rgb-b .rgb-b-labl,
|
||||
|
||||
.mute-alpha .alpha-butt,
|
||||
.no-HEX .HEX-butt,
|
||||
.cmy-only .Lab-x-labl/*,
|
||||
.alpha-bg .alpha-labl*/ { /* OFF */
|
||||
background-color: #333;
|
||||
border-color: #555 #222 #222 #555;
|
||||
}
|
||||
|
||||
.Lab-x-disp,
|
||||
.cmy-only .cmyk-k-disp,
|
||||
.cmy-only .cmyk-k-butt {
|
||||
visibility: hidden;
|
||||
}
|
||||
.cp-panel .HEX-disp {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.cp-panel .cp-disp {
|
||||
float: left;
|
||||
width: 50px; width: 48px; /* IE 7 */
|
||||
height: 16px; height: 14px; /* IE 7 */
|
||||
margin: 2px 2px 0;
|
||||
cursor: text;
|
||||
text-align: left;
|
||||
text-indent: 3px;
|
||||
border: 1px solid;
|
||||
border-color: #222 #555 #555 #222;
|
||||
}
|
||||
.cp-app .cp-nsarrow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -13px;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background-position: -87px -23px;
|
||||
display: none;
|
||||
}
|
||||
.cp-app .start-change .cp-nsarrow {
|
||||
display: block;
|
||||
}
|
||||
.cp-app .do-change .cp-nsarrow {
|
||||
display: block;
|
||||
background-position: -87px -36px;
|
||||
}
|
||||
.do-change .cp-disp {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.cp-panel .cp-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* -------- controller color/contrast bars -------- */
|
||||
|
||||
.cp-panel .cp-cont,
|
||||
.cp-panel .cp-cold {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: 0; /* IE7 */
|
||||
height: 5px; height: 3px; /* IE7 */
|
||||
border: 1px solid #333;
|
||||
}
|
||||
.cp-panel .cp-cold {
|
||||
background-color: #c00;
|
||||
z-index: 1;
|
||||
}
|
||||
.cp-panel .cp-cont {
|
||||
margin-right: -1px;
|
||||
z-index: 2;
|
||||
}
|
||||
.cp-panel .contrast .cp-cont {
|
||||
background-color: #ccc;
|
||||
z-index: 1;
|
||||
}
|
||||
.cp-panel .orange .cp-cold {
|
||||
background-color: #FF9900;
|
||||
}
|
||||
.cp-panel .green .cp-cold {
|
||||
background-color: #44DD00;
|
||||
}
|
||||
|
||||
/* -------- controller buttons -------- */
|
||||
|
||||
.cp-panel .cp-ctrl {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%; /* IE7 */
|
||||
/* overflow: visible; */
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.alpha-bg-b .cp-ctrl,
|
||||
.cp-panel .cp-bres,
|
||||
.cp-panel .cp-bsav {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.cp-panel .cp-col1,
|
||||
.cp-panel .cp-col2,
|
||||
.cp-panel .cp-bres,
|
||||
.cp-panel .cp-bsav {
|
||||
border: 1px solid;
|
||||
border-color: #555 #222 #222 #555;
|
||||
float: left;
|
||||
width: 47px; width: 46px; /* IE7 */
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
}
|
||||
.cp-panel div div {
|
||||
height: 100%; /* IE7 */
|
||||
}
|
||||
.S .cp-ctrl div {
|
||||
line-height: 25px;
|
||||
}
|
||||
.S .cp-panel .cp-bres,
|
||||
.S .cp-panel .cp-bsav {
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
/* -------- app controls -------- */
|
||||
|
||||
.cp-app .cp-exit,
|
||||
.cp-app .cp-resize {
|
||||
right: 3px;
|
||||
top: 3px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-position: 0 -52px;
|
||||
}
|
||||
.cp-app .cp-resize {
|
||||
top: auto;
|
||||
bottom: 3px;
|
||||
background-position: -15px -52px;
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
|
||||
.S .cp-exit {
|
||||
background-position: 1px -52px;
|
||||
}
|
||||
.XS .cp-resize,
|
||||
.XS .cp-exit {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
right: 0;
|
||||
background-image: none;
|
||||
}
|
||||
.XS .cp-exit {
|
||||
top: 0;
|
||||
}
|
||||
.XS .cp-resize {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.cp-app .cp-resizer,
|
||||
.cp-app .cp-resizer div {
|
||||
position: absolute;
|
||||
border: 1px solid #888;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
z-index: 2; /* overwrites: .cp-panel .cp-cont, .cp-panel .cp-cold */
|
||||
display: none;
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.cp-app .cp-resizer div {
|
||||
border: 1px dashed #333;
|
||||
background-color: #bbb;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
|
||||
filter: alpha(opacity=30);
|
||||
-moz-opacity: 0.3;
|
||||
-khtml-opacity: 0.3;
|
||||
opacity: .30;
|
||||
display: block;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,397 @@
|
||||
;(function(window, undefined){
|
||||
"use strict"
|
||||
|
||||
/* ------------ Compress HTML ------------ */
|
||||
var display = document.getElementById('displayHTML'),
|
||||
cp = document.body.children[0],
|
||||
html = cp.outerHTML,
|
||||
HTML = [];
|
||||
// console.log(html)
|
||||
html = html.replace(/\t*\n*/g, '').
|
||||
replace(/<div class="/g, '^').
|
||||
replace(/<div>/g, '|').
|
||||
replace(/disp/g, '~').
|
||||
replace(/butt/g, 'ß').
|
||||
replace(/labl/g, '@').
|
||||
replace(/<\/div>/g, '$').
|
||||
replace(/cp-/g, '§');
|
||||
|
||||
for (var n = 0, len = html.length; n < len; n += !n ? 95 : 100) {
|
||||
HTML.push('\'' + html.substr(n, !n ? 95 : 100));
|
||||
}
|
||||
|
||||
html = "_html = (" + HTML.join("' +\n\t") + "').\n\t" +
|
||||
"replace(/\\^/g, '<div class=\"').\n\t" +
|
||||
"replace(/\\$/g, '</div>').\n\t" +
|
||||
"replace(/~/g, 'disp').\n\t" +
|
||||
"replace(/ß/g, 'butt').\n\t" +
|
||||
"replace(/@/g, 'labl').\n\t" +
|
||||
"replace(/\\|/g, '<div>')";
|
||||
|
||||
display.firstChild.data = html;
|
||||
|
||||
|
||||
/* ------------ Compress CSS ------------ */
|
||||
var display = document.getElementById('displayCSS'),
|
||||
css = document.getElementsByTagName('link')[1],
|
||||
rules = css.sheet.rules,
|
||||
path = css.href.split('/'),
|
||||
CSS = [],
|
||||
bgPosCSS = {},
|
||||
// CSSSplit = [],
|
||||
reUnion = '',
|
||||
txt = '', key = '', val = '', end = 0, start = 0;
|
||||
|
||||
path.pop();
|
||||
path = path.join('/') + '/';
|
||||
|
||||
for (var n = 0, len = rules.length; n < len; n++) {
|
||||
txt = rules[n].cssText;
|
||||
if (/background-position/.test(txt)) {
|
||||
// .hsl-l div.cp-sldl-1 {background-position: -256px 0}
|
||||
end = txt.indexOf(' { ');
|
||||
val = txt.substr(0, end); // good now
|
||||
|
||||
start = txt.indexOf(' }');
|
||||
key = txt.substr(end + 24, start - end - 25);
|
||||
|
||||
if (!bgPosCSS[key]) {
|
||||
bgPosCSS[key] = [val];
|
||||
} else {
|
||||
bgPosCSS[key].push(val);
|
||||
}
|
||||
} else {
|
||||
CSS.push(txt.replace(new RegExp(path, 'g'), ''));
|
||||
}
|
||||
}
|
||||
|
||||
for (var n in bgPosCSS) {
|
||||
// console.log(bgPosCSS[n].join(',') + '{background-position:' + n + '}');
|
||||
CSS.push(
|
||||
bgPosCSS[n].join(',') + '{background-position:' + n + '}'
|
||||
);
|
||||
}
|
||||
|
||||
css = CSS.join(''). // recycle css
|
||||
replace(/cp-/g, '§').
|
||||
replace(/\: /g, ':').
|
||||
replace(/ \{ /g, '{').
|
||||
replace(/; \}/g, '}').
|
||||
replace(/, \./g, ',.').
|
||||
replace(/:0px /g, ':0 ').
|
||||
replace(/ 0px\}/g, ' 0}').
|
||||
replace(/rgb\((\d+), (\d+), (\d+)\)/g, function($1, $2, $3, $4){
|
||||
var hex = ('#' +
|
||||
($2 < 16 ? '0' : '') + (+$2).toString(16) +
|
||||
($3 < 16 ? '0' : '') + (+$3).toString(16) +
|
||||
($4 < 16 ? '0' : '') + (+$4).toString(16)
|
||||
)
|
||||
if ($2 === $3 && $3 === $4) {
|
||||
hex = hex.substring(0, 4);
|
||||
} else if (hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6]) {
|
||||
hex = '#' + hex[1] + hex[3] + hex[5];
|
||||
}
|
||||
return hex;
|
||||
}).
|
||||
|
||||
replace(/ .\§sldl-/g, '^').
|
||||
replace(/ .\§sldr-/g, '?').
|
||||
replace(/ .no-rgb-/g, '~').
|
||||
|
||||
replace(/\.rgb-/g, 'ä').
|
||||
replace(/\.hsv-/g, 'ö').
|
||||
replace(/\.hsl-/g, 'ü').
|
||||
|
||||
replace(/background/g, '@').
|
||||
replace(/-position\:/g, '|').
|
||||
|
||||
replace(/,\.S /g, 'Ä').
|
||||
replace(/px}/g, 'Ö').
|
||||
replace(/\{@\|0 /g, 'Ü'); // !!!
|
||||
|
||||
|
||||
reUnion =
|
||||
"replace(/Ü/g, '{@|0 ').\n\t" +
|
||||
"replace(/Ö/g, 'px}').\n\t" +
|
||||
"replace(/Ä/g, ',.S ').\n\t" +
|
||||
|
||||
"replace(/\\|/g, '-position:').\n\t" +
|
||||
"replace(/@/g, 'background').\n\t" +
|
||||
|
||||
"replace(/ü/g, '.hsl-').\n\t" +
|
||||
"replace(/ö/g, '.hsv-').\n\t" +
|
||||
"replace(/ä/g, '.rgb-').\n\t" +
|
||||
|
||||
"replace(/~/g, ' .no-rgb-}').\n\t" +
|
||||
"replace(/\\?/g, ' .§sldr-').\n\t" +
|
||||
"replace(/\\^/g, ' .§sldl-')\n\t";
|
||||
|
||||
|
||||
// CSSSplit = css.split('.thisIsTheBreakPoint{}');
|
||||
// --------------
|
||||
// css = CSSSplit[0]; // first half
|
||||
CSS = [];
|
||||
|
||||
for (var n = 0, len = css.length; n < len; n += !n ? 92 : 100) {
|
||||
CSS.push('\'' + css.substr(n, !n ? 92 : 100));
|
||||
}
|
||||
var cssMain = "_cssFunc = (" + CSS.join("' +\n\t") + "').\n\t" + reUnion;
|
||||
|
||||
// --------------
|
||||
// css = CSSSplit[1]; // second half
|
||||
// CSS = [];
|
||||
// for (var n = 0, len = css.length; n < len; n += !n ? 92 : 100) {
|
||||
// CSS.push('\'' + css.substr(n, !n ? 92 : 100));
|
||||
// }
|
||||
// cssMain += "\n\n\n_cssFunc = (" + CSS.join("' +\n\t") + "').\n\t" + reUnion;
|
||||
|
||||
|
||||
|
||||
display.firstChild.data = cssMain;
|
||||
|
||||
/* --------------------- MAIN CSS ---------------------------- */
|
||||
|
||||
var display = document.getElementById('displayCSS'),
|
||||
css = document.getElementsByTagName('link')[0],
|
||||
rules = css.sheet.rules,
|
||||
path = css.href.split('/'),
|
||||
CSS = [],
|
||||
bgPosCSS = {},
|
||||
// CSSSplit = [],
|
||||
reUnion = '',
|
||||
txt = '', key = '', val = '', end = 0, start = 0;
|
||||
|
||||
path.pop();
|
||||
path = path.join('/') + '/';
|
||||
|
||||
for (var n = 0, len = rules.length; n < len; n++) {
|
||||
txt = rules[n].cssText;
|
||||
CSS.push(txt.replace(new RegExp(path, 'g'), ''));
|
||||
}
|
||||
|
||||
|
||||
css = CSS.join(''). // recycle css
|
||||
replace(/cp-/g, '§').
|
||||
replace(/\: /g, ':').
|
||||
replace(/ \{ /g, '{').
|
||||
replace(/; /g, ';').
|
||||
replace(/;\}/g, '}').
|
||||
replace(/, \./g, ',.').
|
||||
replace(/:0px /g, ':0 ').
|
||||
replace(/ 0px\}/g, ' 0}').
|
||||
replace(/rgb\((\d+), (\d+), (\d+)\)/g, function($1, $2, $3, $4){
|
||||
var hex = ('#' +
|
||||
($2 < 16 ? '0' : '') + (+$2).toString(16) +
|
||||
($3 < 16 ? '0' : '') + (+$3).toString(16) +
|
||||
($4 < 16 ? '0' : '') + (+$4).toString(16)
|
||||
)
|
||||
if ($2 === $3 && $3 === $4) {
|
||||
hex = hex.substring(0, 4);
|
||||
} else if (hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6]) {
|
||||
hex = '#' + hex[1] + hex[3] + hex[5];
|
||||
}
|
||||
return hex;
|
||||
}).
|
||||
|
||||
replace(/\.§sld/g, '^').
|
||||
replace(/border\-/g, '?').
|
||||
replace(/width\:/g, '~').
|
||||
replace(/transparent/g, '†').
|
||||
replace(/\.§memo/g, 'ø').
|
||||
|
||||
replace(/height\:/g, 'ä').
|
||||
replace(/background\-/g, 'ö').
|
||||
// replace(/position\:/g, 'ü').
|
||||
|
||||
replace(/color\:/g, '@').
|
||||
replace(/position\:/g, '|').
|
||||
replace(/px\;/g, '¥').
|
||||
replace(/\.§panel \./g, '«').
|
||||
replace(/\.§app/g, '∑').
|
||||
|
||||
//replace(/color\:/g, 'Ä').
|
||||
replace(/left\}/g, 'Ö').
|
||||
replace(/right/g, 'Ü'); // !!!
|
||||
|
||||
// /.§slds/ 24
|
||||
// /border-/ 33
|
||||
// /width:/ 36
|
||||
// /height:/ 29
|
||||
// /background-/ 33
|
||||
// /position:/ 28
|
||||
// /color-/ 31
|
||||
// /left/ 25
|
||||
// /right/ 14
|
||||
// /px;/ 108
|
||||
// /.§panel ./ 45
|
||||
// /.§app/ 27 .§memo
|
||||
|
||||
reUnion =
|
||||
"replace(/Ü/g, 'right').\n\t" +
|
||||
"replace(/Ö/g, 'left}').\n\t" +
|
||||
//"replace(/Ä/g, ',color:').\n\t" +
|
||||
|
||||
"replace(/∑/g, '.§app').\n\t" +
|
||||
"replace(/«/g, '.§panel .').\n\t" +
|
||||
"replace(/¥/g, 'px;').\n\t" +
|
||||
"replace(/\\|/g, 'position:').\n\t" +
|
||||
"replace(/@/g, 'color:').\n\t" +
|
||||
|
||||
// "replace(/ü/g, 'position:').\n\t" +
|
||||
"replace(/ö/g, 'background-').\n\t" +
|
||||
"replace(/ä/g, 'height:').\n\t" +
|
||||
|
||||
"replace(/ø/g, '.§memo').\n\t" +
|
||||
"replace(/†/g, 'transparent').\n\t" +
|
||||
"replace(/\\~/g, 'width:').\n\t" +
|
||||
"replace(/\\?/g, 'border-').\n\t" +
|
||||
"replace(/\\^/g, '.§sld')\n\t";
|
||||
|
||||
|
||||
// CSSSplit = css.split('.thisIsTheBreakPoint{}');
|
||||
// --------------
|
||||
// css = CSSSplit[0]; // first half
|
||||
CSS = [];
|
||||
|
||||
for (var n = 0, len = css.length; n < len; n += !n ? 92 : 100) {
|
||||
CSS.push('\'' + css.substr(n, !n ? 92 : 100));
|
||||
}
|
||||
cssMain = "\n\n_cssMain = (" + CSS.join("' +\n\t") + "').\n\t" + reUnion;
|
||||
|
||||
|
||||
display.firstChild.data += cssMain;
|
||||
|
||||
|
||||
/* ------------ Compress images to BASE64 ------------ */
|
||||
// var canvas = document.createElement('canvas'),
|
||||
// ctx = canvas.getContext('2d'),
|
||||
// myimage = new Image(),
|
||||
// IMG64 = '',
|
||||
// images = ['_horizontal.png', '_vertical.png', '_patches.png'],
|
||||
// counter = 0,
|
||||
// encode = function(callback) {
|
||||
// var IMG = [];
|
||||
|
||||
// canvas.width = myimage.width;
|
||||
// canvas.height = myimage.height;
|
||||
|
||||
// ctx.drawImage(myimage, 0, 0);
|
||||
// IMG64 = canvas.toDataURL("image/png"),
|
||||
// imgName = images[counter];
|
||||
|
||||
// for (var n = 0, len = IMG64.length; n < len; n += !n ? 100 - imgName.length + 2 : 100) {
|
||||
// IMG.push('\'' + IMG64.substr(n, !n ? 100 - imgName.length + 2 : 100));
|
||||
// }
|
||||
// IMG = IMG.join("' +\n\t") + "'";
|
||||
// // display.firstChild.data += "\n\n\n" + imgName.replace('.p', 'P') + ' = ' + IMG;
|
||||
// if (images[++counter]) {
|
||||
// myimage.src = images[counter];
|
||||
// }
|
||||
// };
|
||||
|
||||
// myimage.onload = function() {
|
||||
// encode();
|
||||
// };
|
||||
// myimage.src = images[counter];
|
||||
|
||||
|
||||
/*
|
||||
BASE64 conversion via canvas turns out to be bigger than expected..
|
||||
had to upload them via http://webcodertools.com/imagetobase64converter/
|
||||
*/
|
||||
var images = {
|
||||
'_horizontalPng' : 'iVBORw0KGgoAAAANSUhEUgAABIAAAAABCAYAAACmC9U0AAABT0lEQVR4Xu2S3Y6CMBCFhyqIsjGBO1/B9/F5DC/pK3DHhVkUgc7Zqus2DVlGU/cnQZKTjznttNPJBABA149HyRf1iN//4mIBCg0jV4In+j9xJiuihly1V/Z9X88v//kNeDXVvyO/lK+IPR76B019+1Riab3H1zkmeqerKnL+Bzwxx6PAgZxaSQU8vB62T28pxcQeRQ2sHw6GxCOWHvP78zwHAARBABOfdYtd30rwxXOEPDF+dj2+91r6vV/id3k+/brrXmaGUkqKhX3i+ffSt16HQ/dorTGZTHrs7ev7Tl7XdZhOpzc651nfsm1bRFF0YRiGaJoGs9nsQuN/xafTCXEco65rzOdzHI9HJEmCqqqwXC6x3++RZRnKssRqtUJRFFiv19jtdthutyAi5Hl+Jo9VZg7+7f3yXuvZf5c3KaXYzByb+WIzO5ymKW82G/0BNcFhO/tOuuMAAAAASUVORK5CYII=',
|
||||
'_verticalPng' : 'iVBORw0KGgoAAAANSUhEUgAAAAEAABfACAYAAABn2KvYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABHtJREFUeNrtnN9SqzAQxpOF1to6zuiVvoI+j6/gva/lA/kKeqUzjtX+QTi7SzSYBg49xdIzfL34+e1usoQQklCnmLwoCjImNwDQA2xRGMqNAYB+gPEH9IdCgIUA6Aem0P1fLoMQAPYNHYDoCKAv8OMHFgKgX2AjDPQDXn4t1l+gt/1fId//yWgE/hUJ+mAn8EyY5wCwXxhrbaHzn8E9iPlv79DdHxXTqciZ4KROnXRVZMF/6U2OPhcEavtAbZH1SM7wRDD7VoHZItCiyEQf4t6+MW9UOxaZybmdCGKqNrB9Eb5SfMg3wTyiagMtigTmWofiSDCOYNTSNz6sLDIoaCU9GWDd0tdhoMMsRm+r8U/EfB0GfjmLXiqzimDd0tdhoLMsI7la45+I+ToM/HIW0kfGVQTrlr7tA91kaUr//fxrKo8jUFB7VAn6AKpHJf+EKwAAAIYD/f7F7/8MVgMo7P+gBqDKr57Lf72V8x8AAMDgYIuvH4EAAAAMDQX6AACAQcI9GGMjDADA4MA/P2KlP8IEAAAYFCz6AACAgaLA8y8AAIN+CMYXoQAADA7u/UPYCAMAMDjI7z9S+SdwDFQX2C9Gh9GMEOWriz8/Pw1lWQZsi/L3R4czzP678Ve+P8f9nCv/C7hwLq99ah8NfKrU15zPB5pVcwtiJt9qGy0IfEE+jQa+Fn0VtI/fkxUPqBlEfRENeF+tqUpbGpi1iu8epwJzvV5XA4GpWC6XGz7F+/u766EgwJ+ckiTJKU3TnI6OjnI6OzvLZf6zMggt3dzckPhIoiTlSGpQ+eEsVegdz0fbCCi4fRs+Po+4yWdeDXiT+6pBSTeHple1pkz3FZ+avpyavoiPxgLN0B7yprY08PlyQTTm0+PWmkH7ynedNKraar4F/lRj1WpTtYh+ozL/cY2sAvZl0gcbZm0gSLBLvkxGoaogiy/HDXemQk2t5pUm8OAhH8/HH6e0mkJ9q9XKKQXfb07xfZnJbZrRxcVFVt6/t7e3Kc1ms5RGo1Eq5VIZuyl9fHw4k/M5xYeoKj64A7eqCt1ZeqWFVSl8NV9OTV3fmvP5qE9VmzSoEcsXpArK1UHen/hZbgL53BZSdyEXalGau/hU8TEW0u3VcoFPy3EDFrTgT+njydeZ0+l0UV7fu7u7iVzziQQmUm4iqRw4n/NxMxw4s/Mp1NSALxf4NEtQ10cjMDwSl+b+/j6hp6enVGb+jUvrn05iKobm6PboOt8vPISY5Pr6OqGXlxe3fOokoGtAbMUJZmqvYmaLQDP+sdrecOjtO/SXeH69P8Imutm5urqy9PDwYOny8tLS4+OjpfPzc0vPz8+WTk9PLb2+vlpZbCzN53NLx8fHVtYZS5PJxMoEZWWqsjKULY3HYytTi1Pex5OMldXKRVXxuLcy/20onmms3BBOxcr5qCrZtsrd45SPel8sGlOxGoGy0neynQ6VL9fsa1YtWlCrtj9G83G7PjdVush5n5q1iJWLZW6u21a1bUvbVnVzlru0pe3RdmlV1/23fZtbZv4Dx+7FBypx77kAAAAASUVORK5CYII=',
|
||||
'_patchesPng' : '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',
|
||||
'_iconsPng' : 'iVBORw0KGgoAAAANSUhEUgAAAGEAAABDCAMAAAC7vJusAAAAkFBMVEUAAAAvLy9ERERubm7///8AAAD///9EREREREREREREREQAAAD///8AAAD///8AAAD///8AAAD///8AAAD///8AAAD///8AAAD///8AAAD///8AAAD///8cHBwkJCQnJycoKCgpKSkqKiouLi4vLy8/Pz9AQEBCQkJDQ0NdXV1ubm58fHykpKRERERVVVUzMzPx7Ab+AAAAHXRSTlMAAAAAAAQEBQ4QGR4eIyMtLUVFVVVqapKSnJy7u9JKTggAAAFUSURBVHja7dXbUoMwEAbgSICqLYeW88F6KIogqe//dpoYZ0W4AXbv8g9TwkxmvtndZMrEwlw/F8YIRjCCEYxgBCOsFmzqGMEI28J5zzmt0Pc9rdDL0NYgMxIYC5KiKpKAzZphWtZlGm4SjlnkOV6UHeeEUx77rh/npw1dCrI9k9lnwUwF+UG9D3m4ftJJxH4SJdPtaawXcbr+tBaeFrxiur309cIv19+4ytGCU0031a5euPVigLYGqjlAqM4ShOQ+QAYQUO80AMMAAkUGGfMfR9Ul+kmvPq2QGxXKOQBAKdjUgk0t2NiCGEVP+rHT3/iCUMBT90YrPMsKsIWP3x/VolaonJEETchHCS8AYAmaUICQQwaAQnjoXgHAES7jLkEFaHO4bdq/k25HAIpgWY34FwAE5xjCffM+D2DV8B0gRsAZT7hr5gE8wdrJcU+CJqhcqQD7Cx5L7Ph4WnrKAAAAAElFTkSuQmCC',
|
||||
'_bgsPng' : 'iVBORw0KGgoAAAANSUhEUgAAASAAAABvCAYAAABM+h2NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABORJREFUeNrs3VtTW1UYBuCEcxAI4YydWqTWdqr1V7T/2QsvvPDCCy9qjxZbamsrhZIQUHsCEtfafpmJe8qFjpUxfZ4Zuvt2feydJvAOARZUut1u5bRerl692nV913f99/f6QxWAU6KAAAUEKCAABQQoIAAFBCggAAUEKCAABQQoIAAFBCggAAUEKCAABQQoIEABASggQAEBKCBAAQEoIEABASggQAEBKCBAAQEoIGBQC+jatWvd07zxrv9+Xx8fAQEoIEABASggQAEBKCBAAQEoIEABAQoIQAEBCghAAQEKCEABAQOk2u36kS6AAgLetwJKL29toFRM1be+QrVq3rx58//KvM8BAadGAQEKCFBAAAoIGHwnfhneZ+/Nmzf/LufzrI+AAE/BAAUEoIAABQTwztgLZt68eXvBAE/BABQQoIAAFBAweOwFM2/evL1ggKdgAAoIUEAACggYPPaCmTdv3l4wwFMwAAUEKCAABQQMHnvBzJs3by8Y4CkYgAICFBCAAgIGz4lfBQNQQMDgFlCtVisaaHV1tThubW1VInciD0U+ysdnz54N5+PKysphOnRTHsvHlN9EHo/1l5FrkV9Enoz8W87b29tTOS8vLx9EnoncjlyPvBe5EbkZeT4fU96NvBDr2znv7Ows57y0tLQVeSXy08gf5mNfPhPrjyOfrVarlcXFxZ9yfv78+bl8TPlh5LU8n/KDyOuxfj/y+VjfyHl3d/dCKv28fi/yp/m4sLDwQ+SLke9GvhT5Tinfjnw5f4/F/Pz8rZybzeZn+ZjyzVK+EfnzUr4S+Xopf9/L+fxzc3M5d1qt1hf531Mu5k/IxzGf85VYL+fefHH+RqNRrO/t7RW3L+UbkS9Hvhk5/386Kd/qW8/5duRLMV/OdyJfzNebnZ0t7t92u53v/07K9yJfiLwROT9+ef7HyOux/iDyWuSHkT+K+eLtZX9//2xer9frjyOfyY9/Wn8S86v59qT1p7Ge315zLt4RU16K19+O9YXIu5HnYn435hux3opcj9yOPB3z+5E/iPXf43y1yMX778HBQS3f3pTz+28l5bHIr2N+LN3+zszMzGHkoh/S+mHMF98XlNaP8zHd/0W/pMe943NAwKlSQIACAhQQgAICFBCAAgIUEIACAhQQgAIC/n9GqtXqYbfbHa38+RtSu32llPdqdNL6aOSj+LfxyMVekLTem39Ryr/mPDQ0NBznzXtROikPRW6W8k7k3m9rzXthOsPDw73bUuylGRkZ6cR63nvTSfko8oPIr+Pnz96P/DLW816ezujoaN6DdtyX9+P8eS9QZ2xs7Hxf7qa8Xlr/JO6Ljcjrcf6cj1P+OO+N6V1/fHz8XLz+/Tjfubh+sZcorZ+N9Ycxfybyo8ircf6fc56YmFiJ1/8l8mLk7cjzkfP92U15Ns63G+u9nPcKdWq12lQ8Xu3Ixd6f9Pd8P3UmJycnUszzL2N9LM7/anNzs9V7Q2q32395w/q7ubdH6L/KrVbrpPxlKX9Vyl+X8jel/G0pf5f/aDabvXy9tH6ztH63lDdKebOUH5Xyk1LeKuWd/ry2tlap9P125Onp6Zf9eWpq6lW3b8f6zMzM6/71er3+ppSP+u/XNN/pz41Go+sjIMBTMEABASggQAEBKCBAAQEoIEABASggQAEB/CN/CDAAw78uW9AVDw4AAAAASUVORK5CYII=',
|
||||
},
|
||||
IMG = [],
|
||||
IMG64 = '';
|
||||
//AAAAAA
|
||||
|
||||
for (var m in images) {
|
||||
IMG64 = images[m];
|
||||
var IMG = [],
|
||||
isPatch = m === '_patchesPng';
|
||||
|
||||
if (isPatch) {
|
||||
IMG64 = IMG64.replace(/AAAAAA/g, '§').replace(/AAAA/g, '^').replace(/AAA/g, '#');
|
||||
}
|
||||
for (var n = 0, len = IMG64.length; n < len; n += !n ? 100 - m.length + (isPatch ? 0 : 1) : 100) {
|
||||
IMG.push('\'' + IMG64.substr(n, !n ? 100 - m.length + (isPatch ? 0 : 1) : 100));
|
||||
}
|
||||
|
||||
IMG = (isPatch ? '(' : '') + IMG.join("' +\n\t") + "'";
|
||||
display.firstChild.data += "\n\n\n" + m + ' = ' + IMG + (isPatch ? ')' : '') +
|
||||
(isPatch ? ".\n\treplace(/§/g, 'AAAAAA').replace(/\\^/g, 'AAAA').replace(/#/g, 'AAA')" : '');
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
|
||||
function encode64(input) {
|
||||
input = escape(input)
|
||||
var output = ""
|
||||
var chr1, chr2, chr3 = ""
|
||||
var enc1, enc2, enc3, enc4 = ""
|
||||
var i = 0
|
||||
do {
|
||||
chr1 = input.charCodeAt(i++)
|
||||
chr2 = input.charCodeAt(i++)
|
||||
chr3 = input.charCodeAt(i++)
|
||||
enc1 = chr1 >> 2
|
||||
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4)
|
||||
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6)
|
||||
enc4 = chr3 & 63
|
||||
if (isNaN(chr2)) {
|
||||
enc3 = enc4 = 64
|
||||
} else if (isNaN(chr3)) {
|
||||
enc4 = 64
|
||||
}
|
||||
output = output +
|
||||
keyStr.charAt(enc1) +
|
||||
keyStr.charAt(enc2) +
|
||||
keyStr.charAt(enc3) +
|
||||
keyStr.charAt(enc4)
|
||||
chr1 = chr2 = chr3 = ""
|
||||
enc1 = enc2 = enc3 = enc4 = ""
|
||||
} while(i < input.length)
|
||||
return output
|
||||
}
|
||||
function decode64(input) {
|
||||
var output = ""
|
||||
var chr1, chr2, chr3 = ""
|
||||
var enc1, enc2, enc3, enc4 = ""
|
||||
var i = 0
|
||||
// remove all characters that are not A-Z, a-z, 0-9, +, /, or =
|
||||
var base64test = /[^A-Za-z0-9\+\/\=]/g
|
||||
if (base64test.exec(input)) {
|
||||
alert("There were invalid base64 characters in the input text.\n" +
|
||||
"Valid base64 characters are A-Z, a-z, 0-9, '+', '/', and '='\n" +
|
||||
"Expect errors in decoding.")
|
||||
}
|
||||
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "")
|
||||
do {
|
||||
enc1 = keyStr.indexOf(input.charAt(i++))
|
||||
enc2 = keyStr.indexOf(input.charAt(i++))
|
||||
enc3 = keyStr.indexOf(input.charAt(i++))
|
||||
enc4 = keyStr.indexOf(input.charAt(i++))
|
||||
chr1 = (enc1 << 2) | (enc2 >> 4)
|
||||
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2)
|
||||
chr3 = ((enc3 & 3) << 6) | enc4
|
||||
output = output + String.fromCharCode(chr1)
|
||||
if (enc3 != 64) {
|
||||
output = output + String.fromCharCode(chr2)
|
||||
}
|
||||
if (enc4 != 64) {
|
||||
output = output + String.fromCharCode(chr3)
|
||||
}
|
||||
chr1 = chr2 = chr3 = ""
|
||||
enc1 = enc2 = enc3 = enc4 = ""
|
||||
} while (i < input.length)
|
||||
return unescape(output)
|
||||
}
|
||||
*/
|
||||
|
||||
})(window);
|
||||
@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<link href="colorPicker.css" rel="stylesheet" type="text/css">
|
||||
<link href="colorPicker.sys.css" rel="stylesheet" type="text/css">
|
||||
<style type="text/css">
|
||||
#displayHTML, #displayCSS {
|
||||
clear: both;
|
||||
padding: 2em 1em 0;
|
||||
color: #666;
|
||||
font-family: Courier,mono; /* "Courier New", */
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
}
|
||||
pre {
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
-webkit-tab-size: 4;
|
||||
-ms-tab-size: 4;
|
||||
tab-size: 4;
|
||||
}
|
||||
.cp-app {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 10px 0 0 10px;
|
||||
}
|
||||
.cp-app .cp-curm {
|
||||
top: 255px;
|
||||
left: 0;
|
||||
}
|
||||
.cp-app .cp-curl,
|
||||
.cp-app .cp-curr {
|
||||
top: 255px;
|
||||
}
|
||||
.cp-panel .cp-cold {
|
||||
width: 71%;
|
||||
}
|
||||
.cp-panel .cp-cont {
|
||||
width: 29%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<title>colorPicker markup</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="cp-app alpha-bg-w">
|
||||
<div class="cp-slds">
|
||||
<div class="cp-sldl-1"></div>
|
||||
<div class="cp-sldl-2"></div>
|
||||
<div class="cp-sldl-3"></div>
|
||||
<div class="cp-curm"></div>
|
||||
<div class="cp-sldr-1"></div>
|
||||
<div class="cp-sldr-2"></div>
|
||||
<div class="cp-sldr-4"></div>
|
||||
<div class="cp-curl"></div>
|
||||
<div class="cp-curr"></div>
|
||||
</div>
|
||||
<div class="cp-opacity">
|
||||
<div>
|
||||
<div class="cp-opacity-slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cp-memo">
|
||||
<div class="cp-raster"></div>
|
||||
<div class="cp-raster-bg"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="cp-memo-store"></div>
|
||||
<div class="cp-memo-cursor"></div>
|
||||
</div>
|
||||
<div class="cp-panel">
|
||||
<div class="cp-hsv">
|
||||
<div class="hsl-mode cp-butt"></div>
|
||||
<div class="hsv-h-butt cp-butt">H</div>
|
||||
<div class="hsv-h-disp cp-disp">-<div class="cp-nsarrow"></div></div>
|
||||
<div class="hsl-h-labl cp-labl">H</div>
|
||||
<div class="hsv-s-butt cp-butt">S</div>
|
||||
<div class="hsv-s-disp cp-disp">-</div>
|
||||
<div class="hsl-s-labl cp-labl">S</div>
|
||||
<div class="hsv-v-butt cp-butt">B</div>
|
||||
<div class="hsv-v-disp cp-disp">-</div>
|
||||
<div class="hsl-l-labl cp-labl">L</div>
|
||||
</div>
|
||||
<div class="cp-hsl cp-hide">
|
||||
<div class="hsv-mode cp-butt"></div>
|
||||
<div class="hsl-h-butt cp-butt">H</div>
|
||||
<div class="hsl-h-disp cp-disp">-</div>
|
||||
<div class="hsv-h-labl cp-labl">H</div>
|
||||
<div class="hsl-s-butt cp-butt">S</div>
|
||||
<div class="hsl-s-disp cp-disp">-</div>
|
||||
<div class="hsv-s-labl cp-labl">S</div>
|
||||
<div class="hsl-l-butt cp-butt">L</div>
|
||||
<div class="hsl-l-disp cp-disp">-</div>
|
||||
<div class="hsv-v-labl cp-labl">B</div>
|
||||
</div>
|
||||
<div class="cp-rgb">
|
||||
<div class="rgb-r-butt cp-butt">R</div>
|
||||
<div class="rgb-r-disp cp-disp">-</div>
|
||||
<div class="rgb-r-labl cp-butt"> </div>
|
||||
<div class="rgb-g-butt cp-butt">G</div>
|
||||
<div class="rgb-g-disp cp-disp">-</div>
|
||||
<div class="rgb-g-labl cp-butt"> </div>
|
||||
<div class="rgb-b-butt cp-butt">B</div>
|
||||
<div class="rgb-b-disp cp-disp">-</div>
|
||||
<div class="rgb-b-labl cp-butt"> </div>
|
||||
</div>
|
||||
<div class="cp-cmyk">
|
||||
<div class="Lab-mode cp-butt"></div>
|
||||
<div class="cmyk-c-butt cp-labl">C</div>
|
||||
<div class="cmyk-c-disp cp-disp">-</div>
|
||||
<div class="Lab-L-labl cp-labl">L</div>
|
||||
<div class="cmyk-m-butt cp-labl">M</div>
|
||||
<div class="cmyk-m-disp cp-disp">-</div>
|
||||
<div class="Lab-a-labl cp-labl">a</div>
|
||||
<div class="cmyk-y-butt cp-labl">Y</div>
|
||||
<div class="cmyk-y-disp cp-disp">-</div>
|
||||
<div class="Lab-b-labl cp-labl">b</div>
|
||||
<div class="cmyk-k-butt cp-labl">K</div>
|
||||
<div class="cmyk-k-disp cp-disp">-</div>
|
||||
<div class="Lab-x-labl cp-butt"> </div>
|
||||
</div>
|
||||
<div class="cp-Lab cp-hide">
|
||||
<div class="cmyk-mode cp-butt"></div>
|
||||
<div class="Lab-L-butt cp-labl">L</div>
|
||||
<div class="Lab-L-disp cp-disp">-</div>
|
||||
<div class="cmyk-c-labl cp-labl">C</div>
|
||||
<div class="Lab-a-butt cp-labl">a</div>
|
||||
<div class="Lab-a-disp cp-disp">-</div>
|
||||
<div class="cmyk-m-labl cp-labl">M</div>
|
||||
<div class="Lab-b-butt cp-labl">b</div>
|
||||
<div class="Lab-b-disp cp-disp">-</div>
|
||||
<div class="cmyk-y-labl cp-labl">Y</div>
|
||||
<div class="Lab-x-butt cp-labl"> </div>
|
||||
<div class="Lab-x-disp cp-disp">-</div>
|
||||
<div class="cmyk-k-labl cp-labl">K</div>
|
||||
</div>
|
||||
<div class="cp-alpha">
|
||||
<div class="alpha-butt cp-butt">A</div>
|
||||
<div class="alpha-disp cp-disp">-</div>
|
||||
<div class="alpha-labl cp-butt">W</div>
|
||||
</div>
|
||||
<div class="cp-HEX">
|
||||
<div class="HEX-butt cp-butt">#</div>
|
||||
<div class="HEX-disp cp-disp">-</div>
|
||||
<div class="HEX-labl cp-butt">M</div>
|
||||
</div>
|
||||
<div class="cp-ctrl">
|
||||
<div class="cp-raster"></div>
|
||||
<div class="cp-cont"></div>
|
||||
<div class="cp-cold"></div>
|
||||
<div class="cp-col1">
|
||||
<div> </div>
|
||||
</div>
|
||||
<div class="cp-col2">
|
||||
<div> </div>
|
||||
</div>
|
||||
<div class="cp-bres">RESET</div>
|
||||
<div class="cp-bsav">SAVE</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cp-exit"></div>
|
||||
<div class="cp-resize"></div>
|
||||
<div class="cp-resizer"><div></div></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<pre id="displayHTML"> </pre>
|
||||
<pre id="displayCSS"> </pre>
|
||||
|
||||
<script type="text/javascript" src="colorPicker.dev.js"></script>
|
||||
|
||||
<script type="text/javascript" src="color.js"></script>
|
||||
<script type="text/javascript" src="colorPicker.js"></script>
|
||||
<script type="text/javascript">
|
||||
// var myDevMode = new ColorPicker({
|
||||
// devPicker: document.getElementsByClassName('cp-app')[0],
|
||||
// instanceName: 'myDevMode'
|
||||
// });
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<!-- <link href="colorPicker.sys.css" rel="stylesheet" type="text/css"> -->
|
||||
<link href="colorPicker.css" rel="stylesheet" type="text/css">
|
||||
<link href="index.css" rel="stylesheet" type="text/css">
|
||||
<title>colorPicker_new</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="testPatch"> </div>
|
||||
|
||||
<div id="contrastPatch"><div></div><i>-Test-</i></div>
|
||||
|
||||
<div id="colorValues"> </div>
|
||||
|
||||
<div id="sliders" class="sliders">
|
||||
<div id="rgbR"><div></div></div>
|
||||
<div id="rgbG"><div></div></div>
|
||||
<div id="rgbB"><div></div></div>
|
||||
|
||||
<div id="hslH"><div></div></div>
|
||||
<div id="hslS"><div></div></div>
|
||||
<div id="hslL"><div></div></div>
|
||||
|
||||
<!-- <div id="cmyC"><div></div></div>
|
||||
<div id="cmyM"><div></div></div>
|
||||
<div id="cmyY"><div></div></div> -->
|
||||
</div>
|
||||
|
||||
<div id="hsv_map">
|
||||
<canvas id="surface" width="200" height="200"></canvas>
|
||||
<div class="cover"></div>
|
||||
<div class="hsv-cursor"></div>
|
||||
<div class="bar-bg"></div>
|
||||
<div class="bar-white"></div>
|
||||
<canvas id="luminanceBar" width="25" height="200"></canvas>
|
||||
<div class="hsv-barcursors" id="hsv_cursors">
|
||||
<div class="hsv-barcursor-l"></div>
|
||||
<div class="hsv-barcursor-r"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="color_squares">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div id="description">Demo patches: demonstrate how to build color pickers and how Colors' / ColorPicker's API work. Patches are linked to <select><option value="Colors">Colors</option><option value="ColorPicker">ColorPicker</option></select></div>
|
||||
|
||||
<!-- <div id="model_display"></div> -->
|
||||
<!--canvas style="position: absolute; left: 500px; width: 255px; height: 255px" id="canvas"></canvas-->
|
||||
<!-- <script type="text/javascript" src="color.ext.js"></script> -->
|
||||
<script type="text/javascript" src="color.js"></script>
|
||||
<!-- script type="text/javascript" src="tools.js"></script -->
|
||||
<script type="text/javascript" src="colorPicker.data.js"></script>
|
||||
<script type="text/javascript" src="colorPicker.js"></script>
|
||||
<!-- <script type="text/javascript" src="color.all.min.js"></script> -->
|
||||
<script type="text/javascript" src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,537 @@
|
||||
;(function(window, undefined){
|
||||
"use strict"
|
||||
|
||||
|
||||
if (1 === 2) { // to run ColorPicker on its own....
|
||||
myColor = window.myColor = new window.ColorPicker({
|
||||
// customCSS: true
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Some common use variables
|
||||
var ColorPicker = window.ColorPicker,
|
||||
Tools = ColorPicker || window.Tools, // provides functions like addEvent, ... getOrigin, etc.
|
||||
colorSourceSelector = document.getElementById('description').getElementsByTagName('select')[0],
|
||||
startPoint,
|
||||
currentTarget,
|
||||
currentTargetWidth = 0,
|
||||
currentTargetHeight = 0;
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ------- Render color patch ------- */
|
||||
/* ---------------------------------- */
|
||||
var testPatch = document.getElementById('testPatch'),
|
||||
renderTestPatch = function(color) { // used in renderCallback of 'new ColorPicker'
|
||||
var RGB = color.RND.rgb;
|
||||
|
||||
testPatch.style.cssText =
|
||||
'background-color: rgba(' + RGB.r + ',' + RGB.g + ',' + RGB.b + ',' + color.alpha + ');' +
|
||||
'color: ' + (color.rgbaMixBlack.luminance > 0.22 ? '#222' : '#ddd');
|
||||
testPatch.firstChild.data = '#' + color.HEX;
|
||||
};
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ------ Render contrast patch ----- */
|
||||
/* ---------------------------------- */
|
||||
var contrastPatch = document.getElementById('contrastPatch'),
|
||||
backGround = contrastPatch.firstChild,
|
||||
renderContrastPatch = function(color) { // used in renderCallback of 'new ColorPicker'
|
||||
var RGB = color.RND.rgb,
|
||||
bgColor = color.background.RGB,
|
||||
options = myColor.options ? myColor.options : myColor.color.options,
|
||||
cBGColor = myColor ? options.customBG : {},
|
||||
bgType,
|
||||
alphaBG;
|
||||
|
||||
if (!cBGColor) {
|
||||
// contrastPatch.style.display = 'none';
|
||||
// return;
|
||||
cBGColor = {r: 1, g: 1, b: 1};
|
||||
}
|
||||
alphaBG = options.alphaBG;
|
||||
bgType = {w: 'White', b: 'Black', c: 'Custom'}[alphaBG];
|
||||
cBGColor = alphaBG === 'b' ? {r: 0, g: 0, b: 0} : alphaBG === 'w' ? {r: 1, g: 1, b: 1} : cBGColor;
|
||||
contrastPatch.style.cssText =
|
||||
'background-color: rgb(' +
|
||||
Math.round(cBGColor.r * 255) + ',' +
|
||||
Math.round(cBGColor.g * 255) + ',' +
|
||||
Math.round(cBGColor.b * 255) + ');' +
|
||||
'color: ' + 'rgba(' + RGB.r + ',' + RGB.g + ',' + RGB.b + ',' + color.alpha + ');';
|
||||
backGround.style.cssText =
|
||||
'background-color: rgba(' +
|
||||
bgColor.r + ',' +
|
||||
bgColor.g + ',' +
|
||||
bgColor.b + ',' + color.background.alpha + ');';
|
||||
contrastPatch.children[1].firstChild.data = color['rgbaMixBGMix' + bgType] ?
|
||||
'*' + color['rgbaMixBGMix' + bgType].WCAG2Ratio + '*' :
|
||||
'-Test-';
|
||||
};
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ------- Render color values ------ */
|
||||
/* ---------------------------------- */
|
||||
var colorValues = document.getElementById('colorValues'),
|
||||
renderColorValues = function(color) { // used in renderCallback of 'new ColorPicker'
|
||||
var RND = color.RND;
|
||||
|
||||
colorValues.firstChild.data =
|
||||
'rgba(' + RND.rgb.r + ',' + RND.rgb.g + ',' + RND.rgb.b + ',' + color.alpha + ')' + "\n" +
|
||||
'hsva(' + RND.hsv.h + ',' + RND.hsv.s + ',' + RND.hsv.v + ',' + color.alpha + ')' + "\n" +
|
||||
'hsla(' + RND.hsl.h + ',' + RND.hsl.s + ',' + RND.hsl.l + ',' + color.alpha + ')' + "\n" +
|
||||
'CMYK(' + RND.cmyk.c + ',' + RND.cmyk.m + ',' + RND.cmyk.y + ',' + RND.cmyk.k + ')' + "\n" +
|
||||
'CMY(' + RND.cmy.c + ',' + RND.cmy.m + ',' + RND.cmy.y + ')' + "\n" +
|
||||
'Lab(' + RND.Lab.L + ',' + RND.Lab.a + ',' + RND.Lab.b + ')'; // + "\n" +
|
||||
|
||||
// 'mixBG: ' + (color.rgbaMixBG.luminance).toFixed(10) + "\n" +
|
||||
// 'mixBGCBG: ' + (color.rgbaMixCustom.luminance).toFixed(10);
|
||||
// 'XYZ(' + RND.XYZ.X + ',' + RND.XYZ.Y + ',' + RND.XYZ.Z + ')';
|
||||
};
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ---------- Color squares --------- */
|
||||
/* ---------------------------------- */
|
||||
var colorSquares = document.getElementById('color_squares'),
|
||||
squares = colorSquares.children,
|
||||
n = squares.length;
|
||||
|
||||
for ( ; n--; ) { // draw random color values as background
|
||||
squares[n].style.backgroundColor = 'rgb(' +
|
||||
Math.round(Math.random() * 255) + ',' +
|
||||
Math.round(Math.random() * 255) + ',' +
|
||||
Math.round(Math.random() * 255) +')';
|
||||
}
|
||||
|
||||
Tools.addEvent(colorSquares, 'click', function(e){ // event delegation
|
||||
if (e.target.parentNode === this) {
|
||||
myColor.setColor(e.target.style.backgroundColor);
|
||||
startRender(true);
|
||||
}
|
||||
});
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ---------- Color sliders --------- */
|
||||
/* ---------------------------------- */
|
||||
var sliders = document.getElementById('sliders'),
|
||||
sliderChildren = sliders.children,
|
||||
type,
|
||||
mode,
|
||||
max = {
|
||||
rgb: {r: 255, g: 255, b: 255},
|
||||
hsl: {h: 360, s: 100, l: 100},
|
||||
cmy: {c: 100, m: 100, y: 100}
|
||||
// hsv: {h: 360, s: 100, v: 100},
|
||||
// cmyk: {c: 100, m: 100, y: 100, k: 100},
|
||||
},
|
||||
sliderDown = function (e) { // mouseDown callback
|
||||
var target = e.target,
|
||||
id, len;
|
||||
|
||||
if (e.target !== this) {
|
||||
e.preventDefault();
|
||||
|
||||
currentTarget = target.id ? target : target.parentNode;
|
||||
id = currentTarget.id; // rgbR
|
||||
len = id.length - 1;
|
||||
type = id.substr(0, len); // rgb
|
||||
mode = id[len].toLowerCase(); // R -> r
|
||||
startPoint = Tools.getOrigin(currentTarget);
|
||||
currentTargetWidth = currentTarget.offsetWidth;
|
||||
|
||||
sliderMove(e);
|
||||
Tools.addEvent(window, 'mousemove', sliderMove);
|
||||
startRender();
|
||||
}
|
||||
},
|
||||
sliderMove = function (e) { // mouseMove callback
|
||||
var newColor = {};
|
||||
|
||||
// The idea here is (so in the HSV-color-picker) that you don't
|
||||
// render anything here but just send data to the colorPicker, no matter
|
||||
// if it's out of range. colorPicker will take care of that and render it
|
||||
// then in the renderColorSliders correctly (called in renderCallback).
|
||||
newColor[mode] = (e.clientX - startPoint.left) / currentTargetWidth * max[type][mode];
|
||||
myColor.setColor(newColor, type);
|
||||
},
|
||||
renderColorSliders = function(color) { // used in renderCallback of 'new ColorPicker'
|
||||
for (var n = sliderChildren.length; n--; ) {
|
||||
var child = sliderChildren[n],
|
||||
len = child.id.length - 1,
|
||||
type = child.id.substr(0, len),
|
||||
mode = child.id[len].toLowerCase();
|
||||
|
||||
child.children[0].style.width = (color.RND[type][mode] / max[type][mode] * 100) + '%';
|
||||
}
|
||||
};
|
||||
|
||||
Tools.addEvent(sliders, 'mousedown', sliderDown); // event delegation
|
||||
Tools.addEvent(window, 'mouseup', function() {
|
||||
Tools.removeEvent (window, 'mousemove', sliderMove);
|
||||
stopRender();
|
||||
});
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ---- HSV-circle color picker ----- */
|
||||
/* ---------------------------------- */
|
||||
var hsv_map = document.getElementById('hsv_map'),
|
||||
hsv_mapCover = hsv_map.children[1], // well...
|
||||
hsv_mapCursor = hsv_map.children[2],
|
||||
hsv_barBGLayer = hsv_map.children[3],
|
||||
hsv_barWhiteLayer = hsv_map.children[4],
|
||||
hsv_barCursors = hsv_map.children[6],
|
||||
hsv_barCursorsCln = hsv_barCursors.className,
|
||||
hsv_Leftcursor = hsv_barCursors.children[0],
|
||||
hsv_Rightcursor = hsv_barCursors.children[1],
|
||||
|
||||
colorDisc = document.getElementById('surface'),
|
||||
colorDiscRadius = colorDisc.offsetHeight / 2,
|
||||
luminanceBar = document.getElementById('luminanceBar'),
|
||||
|
||||
hsvDown = function(e) { // mouseDown callback
|
||||
var target = e.target;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
currentTarget = target.id ? target : target.parentNode;
|
||||
startPoint = Tools.getOrigin(currentTarget);
|
||||
currentTargetHeight = currentTarget.offsetHeight; // as diameter of circle
|
||||
|
||||
Tools.addEvent(window, 'mousemove', hsvMove);
|
||||
hsv_map.className = 'no-cursor';
|
||||
hsvMove(e);
|
||||
startRender();
|
||||
},
|
||||
hsvMove = function(e) { // mouseMove callback
|
||||
var r, x, y, h, s;
|
||||
|
||||
if(currentTarget === hsv_map) { // the circle
|
||||
r = currentTargetHeight / 2,
|
||||
x = e.clientX - startPoint.left - r,
|
||||
y = e.clientY - startPoint.top - r,
|
||||
h = 360 - ((Math.atan2(y, x) * 180 / Math.PI) + (y < 0 ? 360 : 0)),
|
||||
s = (Math.sqrt((x * x) + (y * y)) / r) * 100;
|
||||
myColor.setColor({h: h, s: s}, 'hsv');
|
||||
} else if (currentTarget === hsv_barCursors) { // the luminanceBar
|
||||
myColor.setColor({
|
||||
v: (currentTargetHeight - (e.clientY - startPoint.top)) / currentTargetHeight * 100
|
||||
}, 'hsv');
|
||||
}
|
||||
},
|
||||
/* renderHSVPicker = function(color) { // used in renderCallback of 'new ColorPicker'
|
||||
var pi2 = Math.PI * 2,
|
||||
x = Math.cos(pi2 - color.hsv.h * pi2),
|
||||
y = Math.sin(pi2 - color.hsv.h * pi2),
|
||||
r = color.hsv.s * (colorDiscRadius - 5), // - border
|
||||
// this approach useing hsl is not the fastest (I just wanted to try out)... so,
|
||||
// better would be to have 2 extra layers underneath luminanceBar, the middle one
|
||||
// being white and opac with color.hsl.l, the 2nd one bgColor to color.heuRGB.
|
||||
// This approach would then be faster and also work with older IEs.
|
||||
hsv2hsl = function(hsv) { // there is no hsv(h, s, v) in CSS
|
||||
var l = (2 - hsv.s) * hsv.v,
|
||||
s = hsv.s * hsv.v;
|
||||
|
||||
return {
|
||||
h: hsv.h,
|
||||
s: !hsv.s ? 0 : l < 1 ? (l ? s / l : 0) : s / (2 - l),
|
||||
l: l / 2
|
||||
}
|
||||
},
|
||||
hslFull = hsv2hsl({
|
||||
h: color.hsv.h,
|
||||
s: color.hsv.s,
|
||||
v: 1
|
||||
});
|
||||
|
||||
hsv_mapCover.style.opacity = 1 - color.hsv.v;
|
||||
hsv_mapCursor.style.cssText =
|
||||
'left: ' + (x * r + colorDiscRadius) + 'px;' +
|
||||
'top: ' + (y * r + colorDiscRadius) + 'px;' +
|
||||
(color.RGBLuminance > 0.22 ? 'background-position: 0 -36px;' : '');
|
||||
|
||||
luminanceBar.style.backgroundColor = 'hsl(' +
|
||||
Math.round(hslFull.h * 360) + ',' +
|
||||
Math.round(hslFull.s * 100) + '%,' +
|
||||
Math.round(hslFull.l * 100) + '%)';
|
||||
hsv_barCursors.className = color.RGBLuminance > 0.22 ? hsv_barCursorsCln + ' dark' : hsv_barCursorsCln;
|
||||
hsv_Leftcursor.style.top = hsv_Rightcursor.style.top = ((1 - color.hsv.v) * colorDiscRadius * 2) + 'px';
|
||||
};
|
||||
*/ renderHSVPicker = function(color) { // used in renderCallback of 'new ColorPicker'
|
||||
var pi2 = Math.PI * 2,
|
||||
x = Math.cos(pi2 - color.hsv.h * pi2),
|
||||
y = Math.sin(pi2 - color.hsv.h * pi2),
|
||||
r = color.hsv.s * (colorDiscRadius - 5);
|
||||
|
||||
hsv_mapCover.style.opacity = 1 - color.hsv.v;
|
||||
// this is the faster version...
|
||||
hsv_barWhiteLayer.style.opacity = 1 - color.hsv.s;
|
||||
hsv_barBGLayer.style.backgroundColor = 'rgb(' +
|
||||
color.hueRGB.r + ',' +
|
||||
color.hueRGB.g + ',' +
|
||||
color.hueRGB.b + ')';
|
||||
|
||||
hsv_mapCursor.style.cssText =
|
||||
'left: ' + (x * r + colorDiscRadius) + 'px;' +
|
||||
'top: ' + (y * r + colorDiscRadius) + 'px;' +
|
||||
// maybe change className of hsv_map to change colors of all cursors...
|
||||
'border-color: ' + (color.RGBLuminance > 0.22 ? '#333;' : '#ddd');
|
||||
hsv_barCursors.className = color.RGBLuminance > 0.22 ? hsv_barCursorsCln + ' dark' : hsv_barCursorsCln;
|
||||
hsv_Leftcursor.style.top = hsv_Rightcursor.style.top = ((1 - color.hsv.v) * colorDiscRadius * 2) + 'px';
|
||||
};
|
||||
|
||||
Tools.addEvent(hsv_map, 'mousedown', hsvDown); // event delegation
|
||||
Tools.addEvent(window, 'mouseup', function() {
|
||||
Tools.removeEvent (window, 'mousemove', hsvMove);
|
||||
hsv_map.className = '';
|
||||
stopRender();
|
||||
});
|
||||
|
||||
// generic function for drawing a canvas disc
|
||||
var drawDisk = function(ctx, coords, radius, steps, colorCallback) {
|
||||
var x = coords[0] || coords, // coordinate on x-axis
|
||||
y = coords[1] || coords, // coordinate on y-axis
|
||||
a = radius[0] || radius, // radius on x-axis
|
||||
b = radius[1] || radius, // radius on y-axis
|
||||
angle = 360,
|
||||
rotate = 0, coef = Math.PI / 180;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(x - a, y - b);
|
||||
ctx.scale(a, b);
|
||||
|
||||
steps = (angle / steps) || 360;
|
||||
|
||||
for (; angle > 0 ; angle -= steps){
|
||||
ctx.beginPath();
|
||||
if (steps !== 360) ctx.moveTo(1, 1); // stroke
|
||||
ctx.arc(1, 1, 1,
|
||||
(angle - (steps / 2) - 1) * coef,
|
||||
(angle + (steps / 2) + 1) * coef);
|
||||
|
||||
if (colorCallback) {
|
||||
colorCallback(ctx, angle);
|
||||
} else {
|
||||
ctx.fillStyle = 'black';
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
ctx.restore();
|
||||
},
|
||||
drawCircle = function(ctx, coords, radius, color, width) { // uses drawDisk
|
||||
width = width || 1;
|
||||
radius = [
|
||||
(radius[0] || radius) - width / 2,
|
||||
(radius[1] || radius) - width / 2
|
||||
];
|
||||
drawDisk(ctx, coords, radius, 1, function(ctx, angle){
|
||||
ctx.restore();
|
||||
ctx.lineWidth = width;
|
||||
ctx.strokeStyle = color || '#000';
|
||||
ctx.stroke();
|
||||
});
|
||||
};
|
||||
|
||||
drawDisk( // HSV color wheel with white center
|
||||
colorDisc.getContext("2d"),
|
||||
[colorDisc.width / 2, colorDisc.height / 2],
|
||||
[colorDisc.width / 2 - 1, colorDisc.height / 2 - 1],
|
||||
360,
|
||||
function(ctx, angle) {
|
||||
var gradient = ctx.createRadialGradient(1, 1, 1, 1, 1, 0);
|
||||
gradient.addColorStop(0, 'hsl(' + (360 - angle + 0) + ', 100%, 50%)');
|
||||
gradient.addColorStop(1, "#FFFFFF");
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fill();
|
||||
}
|
||||
);
|
||||
drawCircle( // gray border
|
||||
colorDisc.getContext("2d"),
|
||||
[colorDisc.width / 2, colorDisc.height / 2],
|
||||
[colorDisc.width / 2, colorDisc.height / 2],
|
||||
'#555',
|
||||
3
|
||||
);
|
||||
// draw the luminanceBar bar
|
||||
var ctx = luminanceBar.getContext("2d"),
|
||||
gradient = ctx.createLinearGradient(0, 0, 0, 200);
|
||||
|
||||
gradient.addColorStop(0,"transparent");
|
||||
gradient.addColorStop(1,"black");
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(0, 0, 30, 200);
|
||||
|
||||
|
||||
// experimental stuff
|
||||
|
||||
// var colorModel = document.getElementById('model_display'),
|
||||
// displayModel = function(model) {
|
||||
// var html = ['<ul class="model">'];
|
||||
// for (var n in model) {
|
||||
// if (typeof model[n] === 'object') {
|
||||
// html.push(n + ': ' + displayModel(model[n]));
|
||||
// // return html.join('');
|
||||
// } else {
|
||||
// html.push('<li>' + n + ': ' + model[n] + '</li>');
|
||||
// }
|
||||
// }
|
||||
// html.push('</ul>');
|
||||
// return html.join('');
|
||||
// };
|
||||
|
||||
|
||||
/*
|
||||
* This script is set up so it runs either with ColorPicker or with Color only.
|
||||
* The difference here is that ColorPicker has a renderCallback that Color doesn't have
|
||||
* therefor we have to set a render intervall in case it's missing...
|
||||
* setInterval() can be exchanged to window.requestAnimationFrame(callBack)...
|
||||
*
|
||||
* If you want to render on mouseMove only then get rid of startRender(); in
|
||||
* all the mouseDown callbacks and add doRender(myColor.colors); in all
|
||||
* mouseMove callbacks. (Also remove all stopRender(); in mouseUp callbacks)
|
||||
*/
|
||||
var doRender = function(color) {
|
||||
renderTestPatch(color);
|
||||
renderContrastPatch(color);
|
||||
renderColorValues(color);
|
||||
renderColorSliders(color);
|
||||
renderHSVPicker(color);
|
||||
// colorModel.innerHTML = displayModel(color); // experimental
|
||||
},
|
||||
renderTimer,
|
||||
// those functions are in case there is no ColorPicker but only Colors involved
|
||||
startRender = function(oneTime){
|
||||
if (isColorPicker) { // ColorPicker present
|
||||
myColor.startRender(oneTime);
|
||||
} else if (oneTime) { // only Colors is instanciated
|
||||
doRender(myColor.colors);
|
||||
} else {
|
||||
renderTimer = window.setInterval(
|
||||
function() {
|
||||
doRender(myColor.colors);
|
||||
// http://stackoverflow.com/questions/2940054/
|
||||
}, 13); // 1000 / 60); // ~16.666 -> 60Hz or 60fps
|
||||
}
|
||||
},
|
||||
stopRender = function(){
|
||||
if (isColorPicker) {
|
||||
myColor.stopRender();
|
||||
} else {
|
||||
window.clearInterval(renderTimer);
|
||||
}
|
||||
},
|
||||
renderCallback = doRender,
|
||||
// finally the instance of either ColorPicker or Colors (export for debugging purposes)
|
||||
color_ColorPicker = new (ColorPicker || Colors)({
|
||||
customBG: '#808080'
|
||||
// renderCallback: renderCallback, // doesn't work in Colors, but also doesn't matter
|
||||
// convertCallback: function(color, type){console.log(color, type)}
|
||||
// resizeCallback: function(e, value, scale, original){console.log(e, value, scale, original)}
|
||||
// actionCallback: function(e, value){console.log(e, value)},
|
||||
// customCSS: true,
|
||||
/* memoryColors: [
|
||||
{r: 100, g: 200, b: 10, a: 0.6},
|
||||
{r: 80, g: 100, b: 50, a: 0.9},
|
||||
{r: 70, g: 80, b: 10, a: 0.9},
|
||||
{r: 20, g: 200, b: 60, a: 0.9},
|
||||
{r: 88, g: 0, b: 30, a: 0.4},
|
||||
{r: 100, g: 0, b: 100, a: 0.6},
|
||||
{r: 200, g: 0, b: 0},
|
||||
{r: 200, g: 30, b: 100}
|
||||
],
|
||||
*/ // size: 2
|
||||
}),
|
||||
color_Colors = new Colors(),
|
||||
myColor,
|
||||
isColorPicker = colorSourceSelector.value === 'ColorPicker';
|
||||
|
||||
myColor = window.myColor = color_Colors;
|
||||
// mySecondColor = window.mySecondColor = new ColorPicker({instanceName: 'mySecondColor'});
|
||||
|
||||
// in case ColorPicker is not there...
|
||||
if (!isColorPicker) { // initial rendering
|
||||
doRender(myColor.colors);
|
||||
}
|
||||
|
||||
colorSourceSelector.onchange = function(e) {
|
||||
if (this.value === 'Colors') {
|
||||
color_ColorPicker.color.options.renderCallback = function(color){};
|
||||
myColor = window.myColor = color_Colors;
|
||||
isColorPicker = false;
|
||||
doRender(myColor.colors);
|
||||
} else {
|
||||
color_ColorPicker.color.options.renderCallback = doRender;
|
||||
myColor = window.myColor = color_ColorPicker;
|
||||
isColorPicker = true;
|
||||
doRender(myColor.color.colors);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function conversionTest () {
|
||||
// conversion test
|
||||
var convert = myColor.color ? myColor.color.convertColor : myColor.convertColor,
|
||||
x = 0.85, y = 0.33, z = 0.23, k = 0.1,
|
||||
modes = ['hsl', 'hsv', 'rgb', 'cmy', 'cmyk', 'Lab', 'XYZ', 'HEX'],
|
||||
color = {},
|
||||
fromMode = '',
|
||||
toMode = '',
|
||||
counter = 0,
|
||||
value,
|
||||
colorOut = [],
|
||||
valueOut = [],
|
||||
isLab = false;
|
||||
|
||||
for (var o = 2; o--; ) {
|
||||
for (var n = 0, m = modes.length; n < m; n++) {
|
||||
if (modes[n] === 'HEX') {
|
||||
color = '89ABCD';
|
||||
} else {
|
||||
color = {};
|
||||
isLab = modes[n] === 'Lab';
|
||||
color[modes[n][0]] = o && !isLab ? x : Math.round(x * 100) + (isLab ? x : 0);
|
||||
color[modes[n][1]] = o && !isLab ? y : Math.round(y * 100) + (isLab ? y : 0);
|
||||
color[modes[n][2]] = o && !isLab ? z : Math.round(z * 100) + (isLab ? z : 0);
|
||||
if (modes[n] === 'cmyk') {
|
||||
color[modes[n][3]] = o ? k : Math.round(k * 100);;
|
||||
}
|
||||
}
|
||||
fromMode = o ? modes[n] : modes[n].toUpperCase();
|
||||
for (var d = 2; d--; ) {
|
||||
for (var p = 0, q = modes.length; p < q; p++) {
|
||||
toMode = d ? modes[p] : modes[p].toUpperCase();
|
||||
if (fromMode !== toMode) {// && fromMode !== 'LAB' && toMode !== 'LAB') {
|
||||
if ((!d && /(?:XYZ|HEX)/.test(toMode)) || // good to avoid double 2XYZ or 2HEX
|
||||
(!o && /(?:XYZ|HEX)/.test(fromMode))) { // good to avoid double XYZ2 or HEX2
|
||||
// do nothing
|
||||
} else {
|
||||
value = convert(color, fromMode + '2' + toMode);
|
||||
colorOut = [];
|
||||
for (var s in color) {
|
||||
colorOut.push(s + ': ' + color[s]);
|
||||
}
|
||||
colorOut = fromMode === 'HEX' ? '"' + color + '"' : '{' + colorOut.join(', ') + '}';
|
||||
|
||||
valueOut = [];
|
||||
for (var s in value) {
|
||||
valueOut.push(s + ': ' + value[s]);
|
||||
}
|
||||
valueOut = toMode === 'HEX' ? '"' + value + '"' : '{' + valueOut.join(', ') + '}';
|
||||
|
||||
console.log('convertColor(' + colorOut + ', "' + fromMode +
|
||||
'2' + toMode + '") = ' + valueOut);
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log('Tested ' + counter + ' conversion combinations (excluding same to same)');
|
||||
}
|
||||
|
||||
window.conversionTest = conversionTest;
|
||||
|
||||
// conversionTest();
|
||||
|
||||
})(window);
|
||||
Loading…
Reference in New Issue