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 @@
1
+<!DOCTYPE html>
2
+<html>
3
+<head>
4
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5
+    <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..." />
6
+    <meta name="author" content="Peter Dematté" />
7
+    <meta http-equiv="language" content="en" />
8
+	<link rel="shortcut icon" type="image/x-icon" href="../development/favicon.ico">
9
+	<link rel="icon" type="image/x-icon" href="../development/favicon.ico">
10
+
11
+	<link rel="stylesheet" type="text/css" href="../index.css">
12
+	<link id="colorPickerMod" rel="stylesheet" type="text/css" href="mod.css">
13
+	<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
14
+	<script type="text/javascript" src="../jqColorPicker.min.js"></script>
15
+	<script type="text/javascript" src="index.js"></script>
16
+
17
+	<title>tiny jQuery color picker demo</title>
18
+</head>
19
+<body>
20
+<div id="content-wrapper">
21
+<h1>Tiny jQuery colorPicker</h1>
22
+<p>This a demo that describes tinyColorPicker custumization 'Skinned dev-tools like with RGB sliders' in a more understandable way.</p>
23
+<a name="demo" id="demo" class="a-inline"></a>
24
+<h2>Skinned dev-tools like, with RGB sliders</h2>
25
+<div class="input-toggles">
26
+	<input class="color no-alpha" value="#B6BD79" />
27
+	<input class="color no-alpha" value="rgb(162, 63, 3)" />
28
+	<input class="color no-alpha" value="hsl(32, 95%, 23%)" />
29
+</div>
30
+<div class="div-toggles">
31
+	<div class="trigger" value="#556B2F"><div><div></div></div></div>
32
+	<div class="trigger" value="rgb(100, 86, 70)"><div><div></div></div></div>
33
+	<div class="trigger" value="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div>
34
+
35
+<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>
36
+</body>
37
+</html>

+ 90
- 0
demo/index.js View File

@@ -0,0 +1,90 @@
1
+$(function(){
2
+	'use strict';
3
+
4
+	var options = {
5
+		customBG: '#222', // bg of page is dark, so if opcity close to 0 -> dark shines through
6
+		doRender: 'div div', // tell it where to render bg-color if no input
7
+		colorNames: { // get more colors in the other demo... will be displayed next to color patch
8
+			'808080': 'grey',
9
+			'00FFFF': 'cyan',
10
+			'000000': 'black',
11
+			'0000FF': 'blue',
12
+			'FF00FF': 'magenta',
13
+			'008000': 'green',
14
+			'FF0000': 'red',
15
+			'C0C0C0': 'silver',
16
+			'FFFFFF': 'white',
17
+			'FFFF00': 'yellow'
18
+		},
19
+		buildCallback: function($elm) { // called the first time colorPicker gets triggered
20
+			var that = this; // for callback function
21
+			var currentRGB = ''; // either r, g or b
22
+			var $currentSlider = $(); // the clicked rgb slider
23
+			var currentOffset = {}; // of slider
24
+			var $window = $(window);
25
+			var mouseMove = function(e) { // don't render sliders here. Just setColor;
26
+				var color = {}; // new calculated color
27
+
28
+				color[currentRGB] = (e.pageX - currentOffset.left) / that.currentWidth * 255;
29
+				that.color.setColor(color, 'rgb'); // set calculated value
30
+				that.render(); // tell colorPicker to render
31
+			};
32
+
33
+			$elm.append( // render extra sliders and patch
34
+				'<div class="cp-rgb-r"><div class="cp-rgb-r-cursor"></div></div>' +
35
+				'<div class="cp-rgb-g"><div class="cp-rgb-g-cursor"></div></div>' +
36
+				'<div class="cp-rgb-b"><div class="cp-rgb-b-cursor"></div></div>' +
37
+				'<div class="cp-patch"><div></div></div><div class="cp-disp"></div>');
38
+
39
+			this.cursorRStyle = $elm.find('.cp-rgb-r-cursor')[0].style; // caching for faster render renderCallback
40
+			this.cursorGStyle = $elm.find('.cp-rgb-g-cursor')[0].style;
41
+			this.cursorBStyle = $elm.find('.cp-rgb-b-cursor')[0].style;
42
+
43
+			this.patchStyle = $('.cp-patch div')[0].style;
44
+			this.$display = $('.cp-disp');
45
+
46
+			$elm.on('mousedown', '.cp-rgb-r, .cp-rgb-g, .cp-rgb-b', function(e) { // event delegation
47
+				$currentSlider = $(this); // well ;o)
48
+				currentRGB = this.className.replace(/cp-rgb-(\D){1}/, "$1"); // cp-rgb-r -> r
49
+				currentOffset = $currentSlider.offset(); // for later calculations
50
+				that.currentWidth = $currentSlider.width(); // ... also here
51
+				$window.on('mousemove.rgb', mouseMove); // install mousemove listener
52
+				e.preventDefault && e.preventDefault(); // prevent selecting text
53
+				mouseMove(e); // render color picker the first time
54
+				return false; // for IE
55
+			});
56
+
57
+			$window.on('mouseup', function(e) {
58
+				$window.off('mousemove.rgb'); // turn off mousemove event handler
59
+			});
60
+
61
+			// append css after just generated / use cssAddon instead if you want
62
+			$('#colorPickerMod').appendTo('head');
63
+		},
64
+		renderCallback: function($elm, toggled) {
65
+			var colors = this.color.colors; // the whole color object
66
+			var rgb = colors.RND.rgb; // the RGB color in 0-255
67
+
68
+			// the following 6 lines are not necessary if you don't have the trigger icons with the arrows...
69
+			// if (toggled === true) { // just showing (only on show)
70
+			// 	$('.trigger').removeClass('active'); // turns arrow of color triggers
71
+			// 	$elm.closest('.trigger').addClass('active');
72
+			// } else if (toggled === false) { // just hiding (only on hide)
73
+			// 	$elm.closest('.trigger').removeClass('active');
74
+			// }
75
+
76
+			this.patchStyle.backgroundColor = $elm[0].style.backgroundColor; // set patch color...
77
+			this.$display.text(this.color.options.colorNames[colors.HEX] || $elm.val()); // ...and text aside
78
+
79
+			this.currentWidth = this.currentWidth || this.$UI.find('.cp-rgb-r')[0].clientWidth; // first time
80
+			this.cursorRStyle.left = (rgb.r / 255 * this.currentWidth) + 'px'; // render sliders
81
+			this.cursorGStyle.left = (rgb.g / 255 * this.currentWidth) + 'px'; // faster than with $().css
82
+			this.cursorBStyle.left = (rgb.b / 255 * this.currentWidth) + 'px';
83
+		}
84
+	};
85
+
86
+
87
+	window.myColorPicker =
88
+	$('.color').colorPicker(options);
89
+	$('.trigger').colorPicker();
90
+});

+ 149
- 0
demo/mod.css View File

@@ -0,0 +1,149 @@
1
+.cp-patch {
2
+	float: left;
3
+	margin: 9px 0 0;
4
+	height: 24px;
5
+	width: 24px;
6
+	border: 1px solid #aaa;
7
+}
8
+
9
+.cp-patch {
10
+	background-image: url('data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7');
11
+}
12
+
13
+.cp-patch div {
14
+	height: 24px;
15
+	width: 24px;
16
+}
17
+
18
+.cp-disp {
19
+	padding: 4px 0 4px 4px;
20
+	margin-top: 10px;
21
+	font-size: 12px;
22
+	height: 16px;
23
+	line-height: 16px;
24
+	color: #333;
25
+}
26
+
27
+.cp-color-picker {
28
+	border: 1px solid #999;
29
+	padding: 8px;
30
+	box-shadow: 5px 5px 16px rgba(0,0,0,0.4);
31
+	background: #eee;
32
+	overflow: visible;
33
+	border-radius: 3px;
34
+	margin: 5px 0 0;
35
+}
36
+
37
+.cp-color-picker:after {
38
+	content: "";
39
+	display: block;
40
+	position: absolute;
41
+	top: -8px;
42
+	left: 8px;
43
+	border: 8px solid #eee;
44
+	border-width: 0px 8px 8px;
45
+	border-color: transparent transparent #eee;
46
+}
47
+
48
+.cp-color-picker:before {
49
+	content: "";
50
+	display: block;
51
+
52
+	position: absolute;
53
+	top: -9px;
54
+	left: 8px;
55
+	border: 8px solid #eee;
56
+	border-width: 0px 8px 8px;
57
+	border-color: transparent transparent #999;
58
+}
59
+
60
+.cp-xy-slider {
61
+	border: 1px solid #aaa;
62
+	margin-bottom: 10px;
63
+	width: 150px;
64
+	height: 150px;
65
+}
66
+.cp-xy-slider:active {
67
+	cursor: none;
68
+}
69
+
70
+.cp-xy-cursor{
71
+	width: 12px;
72
+	height: 12px;
73
+	margin: -6px;
74
+}
75
+
76
+.cp-z-slider {
77
+	margin-left: 8px;
78
+	border: 1px solid #aaa;
79
+	height: 150px;
80
+	width: 24px;
81
+}
82
+
83
+.cp-z-cursor{
84
+	border-width: 5px;
85
+	margin-top: -5px;
86
+}
87
+
88
+.cp-color-picker .cp-alpha,
89
+.cp-color-picker .cp-rgb-r,
90
+.cp-color-picker .cp-rgb-g,
91
+.cp-color-picker .cp-rgb-b {
92
+	overflow: visible;
93
+	width: 152px;
94
+	margin: 12px 0 0;
95
+	height: 6px;
96
+	border-radius: 6px;
97
+	overflow: visible;
98
+	border: 1px solid #aaa;
99
+	box-sizing: border-box;
100
+	background-image: linear-gradient(to right, rgba(238,238,238,1) 0%, rgba(238,238,238,0) 100%);
101
+}
102
+.cp-alpha-cursor,
103
+.cp-rgb-r-cursor,
104
+.cp-rgb-g-cursor,
105
+.cp-rgb-b-cursor{
106
+	box-sizing: border-box;
107
+	position: absolute;
108
+	background: #eee;
109
+	border-radius: 100%;
110
+	width: 14px;
111
+	height: 14px;
112
+	margin: -5px -7px;
113
+	border: 1px solid #999!important;
114
+	box-shadow: inset -2px -4px 3px #ccc;
115
+}
116
+
117
+.cp-alpha:after,
118
+.cp-rgb-r:after,
119
+.cp-rgb-g:after,
120
+.cp-rgb-b:after {
121
+	position: relative;
122
+	content: "α";
123
+	color: #666;
124
+	font-size: 16px;
125
+	font-family: monospace;
126
+	position: absolute;
127
+	right: -26px;
128
+	top: -8px
129
+}
130
+
131
+.cp-rgb-r:after {
132
+	content: "R";
133
+}
134
+.cp-rgb-g:after {
135
+	content: "G";
136
+}
137
+.cp-rgb-b:after {
138
+	content: "B";
139
+}
140
+
141
+div.cp-rgb-r {
142
+	background-color: red;
143
+}
144
+div.cp-rgb-g {
145
+	background-color: green;
146
+}
147
+div.cp-rgb-b {
148
+	background-color: blue;
149
+}

+ 3
- 0
index.css View File

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

Loading…
Cancel
Save