Browse Source

added demo

tags/1.0.1
peterd 3 years ago
parent
commit
3e55b26d50
4 changed files with 279 additions and 0 deletions
  1. 37
    0
      demo/index.html
  2. 90
    0
      demo/index.js
  3. 149
    0
      demo/mod.css
  4. 3
    0
      index.css

+ 37
- 0
demo/index.html View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Description" content="tiny ColorPicker is a small (10.0KB, 4.5KB gZip) but very advanced jQuery color picker and color conversion / calculation tool that supports the following color spaces: rgb, hsv, hsl, hex, but also alpha, WCAG 2.0 readability standards (based on opacity levels of all layers), contrast, color similarity, grayscale, 2-layer or 3-layer overlap mix, etc..." />
<meta name="author" content="Peter Dematté" />
<meta http-equiv="language" content="en" />
<link rel="shortcut icon" type="image/x-icon" href="../development/favicon.ico">
<link rel="icon" type="image/x-icon" href="../development/favicon.ico">

<link rel="stylesheet" type="text/css" href="../index.css">
<link id="colorPickerMod" rel="stylesheet" type="text/css" href="mod.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../jqColorPicker.min.js"></script>
<script type="text/javascript" src="index.js"></script>

<title>tiny jQuery color picker demo</title>
</head>
<body>
<div id="content-wrapper">
<h1>Tiny jQuery colorPicker</h1>
<p>This a demo that describes tinyColorPicker custumization 'Skinned dev-tools like with RGB sliders' in a more understandable way.</p>
<a name="demo" id="demo" class="a-inline"></a>
<h2>Skinned dev-tools like, with RGB sliders</h2>
<div class="input-toggles">
<input class="color no-alpha" value="#B6BD79" />
<input class="color no-alpha" value="rgb(162, 63, 3)" />
<input class="color no-alpha" value="hsl(32, 95%, 23%)" />
</div>
<div class="div-toggles">
<div class="trigger" value="#556B2F"><div><div></div></div></div>
<div class="trigger" value="rgb(100, 86, 70)"><div><div></div></div></div>
<div class="trigger" value="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div>

<a class="a-inline" href="https://github.com/PitPik/tinyColorPicker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="../development/fmog.png" alt="Fork me on GitHub"></a>
</body>
</html>

+ 90
- 0
demo/index.js View File

@@ -0,0 +1,90 @@
$(function(){
'use strict';

var options = {
customBG: '#222', // bg of page is dark, so if opcity close to 0 -> dark shines through
doRender: 'div div', // tell it where to render bg-color if no input
colorNames: { // get more colors in the other demo... will be displayed next to color patch
'808080': 'grey',
'00FFFF': 'cyan',
'000000': 'black',
'0000FF': 'blue',
'FF00FF': 'magenta',
'008000': 'green',
'FF0000': 'red',
'C0C0C0': 'silver',
'FFFFFF': 'white',
'FFFF00': 'yellow'
},
buildCallback: function($elm) { // called the first time colorPicker gets triggered
var that = this; // for callback function
var currentRGB = ''; // either r, g or b
var $currentSlider = $(); // the clicked rgb slider
var currentOffset = {}; // of slider
var $window = $(window);
var mouseMove = function(e) { // don't render sliders here. Just setColor;
var color = {}; // new calculated color

color[currentRGB] = (e.pageX - currentOffset.left) / that.currentWidth * 255;
that.color.setColor(color, 'rgb'); // set calculated value
that.render(); // tell colorPicker to render
};

$elm.append( // render extra sliders and patch
'<div class="cp-rgb-r"><div class="cp-rgb-r-cursor"></div></div>' +
'<div class="cp-rgb-g"><div class="cp-rgb-g-cursor"></div></div>' +
'<div class="cp-rgb-b"><div class="cp-rgb-b-cursor"></div></div>' +
'<div class="cp-patch"><div></div></div><div class="cp-disp"></div>');

this.cursorRStyle = $elm.find('.cp-rgb-r-cursor')[0].style; // caching for faster render renderCallback
this.cursorGStyle = $elm.find('.cp-rgb-g-cursor')[0].style;
this.cursorBStyle = $elm.find('.cp-rgb-b-cursor')[0].style;

this.patchStyle = $('.cp-patch div')[0].style;
this.$display = $('.cp-disp');

$elm.on('mousedown', '.cp-rgb-r, .cp-rgb-g, .cp-rgb-b', function(e) { // event delegation
$currentSlider = $(this); // well ;o)
currentRGB = this.className.replace(/cp-rgb-(\D){1}/, "$1"); // cp-rgb-r -> r
currentOffset = $currentSlider.offset(); // for later calculations
that.currentWidth = $currentSlider.width(); // ... also here
$window.on('mousemove.rgb', mouseMove); // install mousemove listener
e.preventDefault && e.preventDefault(); // prevent selecting text
mouseMove(e); // render color picker the first time
return false; // for IE
});

$window.on('mouseup', function(e) {
$window.off('mousemove.rgb'); // turn off mousemove event handler
});

// append css after just generated / use cssAddon instead if you want
$('#colorPickerMod').appendTo('head');
},
renderCallback: function($elm, toggled) {
var colors = this.color.colors; // the whole color object
var rgb = colors.RND.rgb; // the RGB color in 0-255

// the following 6 lines are not necessary if you don't have the trigger icons with the arrows...
// if (toggled === true) { // just showing (only on show)
// $('.trigger').removeClass('active'); // turns arrow of color triggers
// $elm.closest('.trigger').addClass('active');
// } else if (toggled === false) { // just hiding (only on hide)
// $elm.closest('.trigger').removeClass('active');
// }

this.patchStyle.backgroundColor = $elm[0].style.backgroundColor; // set patch color...
this.$display.text(this.color.options.colorNames[colors.HEX] || $elm.val()); // ...and text aside

this.currentWidth = this.currentWidth || this.$UI.find('.cp-rgb-r')[0].clientWidth; // first time
this.cursorRStyle.left = (rgb.r / 255 * this.currentWidth) + 'px'; // render sliders
this.cursorGStyle.left = (rgb.g / 255 * this.currentWidth) + 'px'; // faster than with $().css
this.cursorBStyle.left = (rgb.b / 255 * this.currentWidth) + 'px';
}
};


window.myColorPicker =
$('.color').colorPicker(options);
$('.trigger').colorPicker();
});

+ 149
- 0
demo/mod.css View File

@@ -0,0 +1,149 @@
.cp-patch {
float: left;
margin: 9px 0 0;
height: 24px;
width: 24px;
border: 1px solid #aaa;
}

.cp-patch {
background-image: url('data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7');
}

.cp-patch div {
height: 24px;
width: 24px;
}

.cp-disp {
padding: 4px 0 4px 4px;
margin-top: 10px;
font-size: 12px;
height: 16px;
line-height: 16px;
color: #333;
}

.cp-color-picker {
border: 1px solid #999;
padding: 8px;
box-shadow: 5px 5px 16px rgba(0,0,0,0.4);
background: #eee;
overflow: visible;
border-radius: 3px;
margin: 5px 0 0;
}

.cp-color-picker:after {
content: "";
display: block;
position: absolute;
top: -8px;
left: 8px;
border: 8px solid #eee;
border-width: 0px 8px 8px;
border-color: transparent transparent #eee;
}

.cp-color-picker:before {
content: "";
display: block;

position: absolute;
top: -9px;
left: 8px;
border: 8px solid #eee;
border-width: 0px 8px 8px;
border-color: transparent transparent #999;
}

.cp-xy-slider {
border: 1px solid #aaa;
margin-bottom: 10px;
width: 150px;
height: 150px;
}
.cp-xy-slider:active {
cursor: none;
}

.cp-xy-cursor{
width: 12px;
height: 12px;
margin: -6px;
}

.cp-z-slider {
margin-left: 8px;
border: 1px solid #aaa;
height: 150px;
width: 24px;
}

.cp-z-cursor{
border-width: 5px;
margin-top: -5px;
}

.cp-color-picker .cp-alpha,
.cp-color-picker .cp-rgb-r,
.cp-color-picker .cp-rgb-g,
.cp-color-picker .cp-rgb-b {
overflow: visible;
width: 152px;
margin: 12px 0 0;
height: 6px;
border-radius: 6px;
overflow: visible;
border: 1px solid #aaa;
box-sizing: border-box;
background-image: linear-gradient(to right, rgba(238,238,238,1) 0%, rgba(238,238,238,0) 100%);
}
.cp-alpha-cursor,
.cp-rgb-r-cursor,
.cp-rgb-g-cursor,
.cp-rgb-b-cursor{
box-sizing: border-box;
position: absolute;
background: #eee;
border-radius: 100%;
width: 14px;
height: 14px;
margin: -5px -7px;
border: 1px solid #999!important;
box-shadow: inset -2px -4px 3px #ccc;
}

.cp-alpha:after,
.cp-rgb-r:after,
.cp-rgb-g:after,
.cp-rgb-b:after {
position: relative;
content: "α";
color: #666;
font-size: 16px;
font-family: monospace;
position: absolute;
right: -26px;
top: -8px
}

.cp-rgb-r:after {
content: "R";
}
.cp-rgb-g:after {
content: "G";
}
.cp-rgb-b:after {
content: "B";
}

div.cp-rgb-r {
background-color: red;
}
div.cp-rgb-g {
background-color: green;
}
div.cp-rgb-b {
background-color: blue;
}

+ 3
- 0
index.css View File

@@ -1,3 +1,6 @@
html, body {
height: 100%;
}
body {
color: #ccc;
padding: .5em 1em;

Loading…
Cancel
Save