Netsyms/tinyColorPicker
2
0
Fork 0
mirror of https://github.com/PitPik/tinyColorPicker synced 2025-07-14 13:34:29 -06:00
Code Issues Releases Wiki Activity

Demo improvements

Browse Source
This commit is contained in:
peterd 2015-02-05 12:52:39 +01:00
parent 4f88b1a626
commit 32d23e3178
2 changed files with 168 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.css
View File

@ -34,11 +34,12 @@ pre {
position: relative;
display: inline-block;
width: 40px;
padding: 5px;
padding: 4px;
height: 25px;
border: 1px solid #666;
border-radius: 2px;
background: #eee;
box-shadow: inset 0 -17px 8px rgba(0,0,0,0.3), inset 0 -4px 7px rgba(0,0,0,0.3);
}
.div-toggles .color:after {
content: "";
@ -50,6 +51,20 @@ pre {
border: 5px solid;
border-color: #000 transparent transparent;
}
.div-toggles .color:before {
content: "";
display: block;
position: absolute;
top: 50%;
right: 4px;
margin-top: -1px;
border: 5px solid;
border-color: #eee transparent transparent;
}
.div-toggles .active:before {
margin-top: -7px;
border-color: transparent transparent #eee;
}
.div-toggles .active:after {
margin-top: -8px;
border-color: transparent transparent #000;
@ -62,5 +77,6 @@ pre {
}
.div-toggles .color div div {
border: 1px solid #666;
border-color: #666 #ccc #ccc #666;
background: #aaa;
}

166
index.html
View File

@ -34,9 +34,9 @@ On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
<input class="color" value="hsl(32, 95%, 23%)" />
</div>
<div class="div-toggles">
<div class="color trigger" value="#44A647"><div><div></div></div></div>
<div class="color trigger" value="#556B2F"><div><div></div></div></div>
<div class="color trigger" value="rgb(100, 86, 70)"><div><div></div></div></div>
<div class="color trigger" value="hsl(167, 29%, 68%)"><div><div></div></div></div>
<div class="color trigger" value="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div>
</div>
<h2>Features</h2>
<p>Tiny jQuery colorPicker only loads if triggered to show. It uses battery saving technologies and super fast rendering for best performance on desktop and mobile browsers.<br>
@ -73,9 +73,9 @@ window.myColorPicker = $('input.color').colorPicker({
<p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicke on GitHub</a> for now.</p>
<!-- <script type="text/javascript" src="jquery-1.11.2.js"></script> -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="colors.js"></script>
<script type="text/javascript" src="jqColorPicker.js"></script>
<!-- <script type="text/javascript" src="jqColorPicker.min.js"></script> -->
<!-- <script type="text/javascript" src="colors.js"></script> -->
<!-- <script type="text/javascript" src="jqColorPicker.js"></script> -->
<script type="text/javascript" src="jqColorPicker.min.js"></script>
<script type="text/javascript">
(function(window, undefined){
'use strict';
@ -287,8 +287,148 @@ window.myColorPicker = $('input.color').colorPicker({
// skinned similar to dev tools color picker (but then way smaller and faster...)
plugin.dev_skinned = {
customBG: '#222',
margin: '5px -2px',
margin: '5px 0px',
doRender: 'div div',
colorNames: {
'191970': 'midnightblue',
'696969': 'dimgrey',
'708090': 'slategrey',
'778899': 'lightslategrey',
'800000': 'maroon',
'800080': 'purple',
'808000': 'olive',
'808080': 'grey',
'F0F8FF': 'aliceblue',
'FAEBD7': 'antiquewhite',
'00FFFF': 'cyan',
'7FFFD4': 'aquamarine',
'F0FFFF': 'azure',
'F5F5DC': 'beige',
'FFE4C4': 'bisque',
'000000': 'black',
'FFEBCD': 'blanchedalmond',
'0000FF': 'blue',
'8A2BE2': 'blueviolet',
'A52A2A': 'brown',
'DEB887': 'burlywood',
'5F9EA0': 'cadetblue',
'7FFF00': 'chartreuse',
'D2691E': 'chocolate',
'FF7F50': 'coral',
'6495ED': 'cornflowerblue',
'FFF8DC': 'cornsilk',
'DC143C': 'crimson',
'00008B': 'darkblue',
'008B8B': 'darkcyan',
'B8860B': 'darkgoldenrod',
'A9A9A9': 'darkgrey',
'006400': 'darkgreen',
'BDB76B': 'darkkhaki',
'8B008B': 'darkmagenta',
'556B2F': 'darkolivegreen',
'FF8C00': 'darkorange',
'9932CC': 'darkorchid',
'8B0000': 'darkred',
'E9967A': 'darksalmon',
'8FBC8F': 'darkseagreen',
'483D8B': 'darkslateblue',
'2F4F4F': 'darkslategrey',
'00CED1': 'darkturquoise',
'9400D3': 'darkviolet',
'FF1493': 'deeppink',
'00BFFF': 'deepskyblue',
'1E90FF': 'dodgerblue',
'B22222': 'firebrick',
'FFFAF0': 'floralwhite',
'228B22': 'forestgreen',
'FF00FF': 'magenta',
'DCDCDC': 'gainsboro',
'F8F8FF': 'ghostwhite',
'FFD700': 'gold',
'DAA520': 'goldenrod',
'008000': 'green',
'ADFF2F': 'greenyellow',
'F0FFF0': 'honeydew',
'FF69B4': 'hotpink',
'CD5C5C': 'indianred',
'4B0082': 'indigo',
'FFFFF0': 'ivory',
'F0E68C': 'khaki',
'E6E6FA': 'lavender',
'FFF0F5': 'lavenderblush',
'7CFC00': 'lawngreen',
'FFFACD': 'lemonchiffon',
'ADD8E6': 'lightblue',
'F08080': 'lightcoral',
'E0FFFF': 'lightcyan',
'FAFAD2': 'lightgoldenrodyellow',
'D3D3D3': 'lightgrey',
'90EE90': 'lightgreen',
'FFB6C1': 'lightpink',
'FFA07A': 'lightsalmon',
'20B2AA': 'lightseagreen',
'87CEFA': 'lightskyblue',
'B0C4DE': 'lightsteelblue',
'FFFFE0': 'lightyellow',
'00FF00': 'lime',
'32CD32': 'limegreen',
'FAF0E6': 'linen',
'66CDAA': 'mediumaquamarine',
'0000CD': 'mediumblue',
'BA55D3': 'mediumorchid',
'9370DB': 'mediumpurple',
'3CB371': 'mediumseagreen',
'7B68EE': 'mediumslateblue',
'00FA9A': 'mediumspringgreen',
'48D1CC': 'mediumturquoise',
'C71585': 'mediumvioletred',
'F5FFFA': 'mintcream',
'FFE4E1': 'mistyrose',
'FFE4B5': 'moccasin',
'FFDEAD': 'navajowhite',
'000080': 'navy',
'FDF5E6': 'oldlace',
'6B8E23': 'olivedrab',
'FFA500': 'orange',
'FF4500': 'orangered',
'DA70D6': 'orchid',
'EEE8AA': 'palegoldenrod',
'98FB98': 'palegreen',
'AFEEEE': 'paleturquoise',
'DB7093': 'palevioletred',
'FFEFD5': 'papayawhip',
'FFDAB9': 'peachpuff',
'CD853F': 'peru',
'FFC0CB': 'pink',
'DDA0DD': 'plum',
'B0E0E6': 'powderblue',
'FF0000': 'red',
'BC8F8F': 'rosybrown',
'4169E1': 'royalblue',
'8B4513': 'saddlebrown',
'FA8072': 'salmon',
'F4A460': 'sandybrown',
'2E8B57': 'seagreen',
'FFF5EE': 'seashell',
'A0522D': 'sienna',
'C0C0C0': 'silver',
'87CEEB': 'skyblue',
'6A5ACD': 'slateblue',
'FFFAFA': 'snow',
'00FF7F': 'springgreen',
'4682B4': 'steelblue',
'D2B48C': 'tan',
'008080': 'teal',
'D8BFD8': 'thistle',
'FF6347': 'tomato',
'40E0D0': 'turquoise',
'EE82EE': 'violet',
'F5DEB3': 'wheat',
'FFFFFF': 'white',
'F5F5F5': 'whitesmoke',
'FFFF00': 'yellow',
'9ACD32': 'yellowgreen'
},
buidCallback: function($elm) {
var that = this;
@ -296,11 +436,8 @@ window.myColorPicker = $('input.color').colorPicker({
$elm.append('<div class="cp-patch"><div></div></div><div class="cp-disp"></div>');
$('.trigger').on('click', function(e) {
if (e.target === this && $(this).hasClass('active')) {
if (typeof e.stopPropagation != "undefined") {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
e.cancelBubble = true;
e.stopPropagation && e.stopPropagation();
that.toggle();
}
})
@ -316,11 +453,11 @@ window.myColorPicker = $('input.color').colorPicker({
'.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;}' +
'.cp-color-picker:after{content:""; display:block; ' +
'position:absolute; top:-15px; left:12px; border:8px solid #eee;' +
'position:absolute; top:-15px; left:8px; border:8px solid #eee;' +
'border-color: transparent transparent #eee}' +
// simulate border...
'.cp-color-picker:before{content:""; display:block; ' +
'position:absolute; top:-16px; left:12px; border:8px solid #eee;' +
'position:absolute; top:-16px; left:8px; border:8px solid #eee;' +
'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;}' +
@ -341,7 +478,7 @@ window.myColorPicker = $('input.color').colorPicker({
rgb = colors.RND.rgb;
$('.cp-patch div').css({'background-color': $elm.css('background-color')});
$('.cp-disp').text($elm.val());
$('.cp-disp').text(this.color.options.colorNames[colors.HEX] || $elm.val());
if (toggled === true) {
// here you can recalculate position after showing the color picker
// in case it doesn't fit into view.
@ -351,7 +488,6 @@ window.myColorPicker = $('input.color').colorPicker({
$elm.closest('.color').removeClass('active');
}
}
};