[Pkg-javascript-commits] [jquery-minicolors] 01/15: Added swatches under the picker
David Prévot
taffit at moszumanska.debian.org
Sat Jan 30 21:52:42 UTC 2016
This is an automated email from the git hooks/post-receive script.
taffit pushed a commit to branch master
in repository jquery-minicolors.
commit ca9e2b35b24fcdc5840c37b0ca9ab075bc082f23
Author: Andrea Baron <andrea at bhweb.it>
Date: Tue Jan 26 10:48:20 2016 +0100
Added swatches under the picker
Added a maximum of 7 swatches to be displayed under the color grid,
which allows customizable colors to be selected.
Implements claviska/jquery-minicolors#50
---
index.html | 13 ++++++++
jquery.minicolors.css | 41 ++++++++++++++++++++++++
jquery.minicolors.js | 86 +++++++++++++++++++++++++++++++++++++++++++-------
without-bootstrap.html | 6 ++++
4 files changed, 134 insertions(+), 12 deletions(-)
diff --git a/index.html b/index.html
index 282444d..bc64fca 100644
--- a/index.html
+++ b/index.html
@@ -78,6 +78,7 @@
letterCase: $(this).attr('data-letterCase') || 'lowercase',
opacity: $(this).attr('data-opacity'),
position: $(this).attr('data-position') || 'bottom left',
+ swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
change: function(value, opacity) {
if( !value ) return;
if( opacity ) value += ', ' + opacity;
@@ -345,6 +346,18 @@
</div>
</div>
</div>
+ <div class="row">
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="letter-case">Swatches</label>
+ <br>
+ <input type="text" id="swatches" class="form-control demo" data-format="rgb" data-opacity="1" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)" value="#abcdef">
+ <span class="help-block">
+ Example with swatches.
+ </span>
+ </div>
+ </div>
+ </div>
</div>
<!-- API -->
diff --git a/jquery.minicolors.css b/jquery.minicolors.css
index 47dffa5..0cb7a49 100644
--- a/jquery.minicolors.css
+++ b/jquery.minicolors.css
@@ -54,6 +54,10 @@
display: none;
}
+.minicolors-panel.with-swatches {
+ height: 182px;
+}
+
.minicolors-panel.minicolors-visible {
display: block;
}
@@ -193,6 +197,28 @@
box-sizing: content-box;
}
+/* Swatches */
+.minicolors-swatches,.minicolors-swatches li {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ overflow: hidden;
+ position: absolute;
+ top: 157px;
+ left: 5px;
+}
+
+.minicolors-swatches .minicolors-swatch {
+ position: relative;
+ float: left;
+ cursor: pointer;
+ margin:0 4px 0 0;
+}
+
+.minicolors-swatch.selected {
+ border-color:#000;
+}
+
/* Inline controls */
.minicolors-inline {
display: inline-block;
@@ -218,6 +244,15 @@
width: 18px;
height: 18px;
}
+.minicolors-theme-default .minicolors-swatches .minicolors-swatch {
+ top: 0;
+ left: 0;
+ width: 18px;
+ height: 18px;
+}
+.minicolors-theme-default .minicolors-swatches {
+ height: 20px;
+}
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
left: auto;
right: 5px;
@@ -246,6 +281,12 @@
height: 28px;
border-radius: 3px;
}
+.minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
+ top: 0;
+ left: 0;
+ width: 20px;
+ height: 20px;
+}
.minicolors-theme-bootstrap .minicolors-swatch-color {
border-radius: inherit;
}
diff --git a/jquery.minicolors.js b/jquery.minicolors.js
index 7b95f37..c866871 100644
--- a/jquery.minicolors.js
+++ b/jquery.minicolors.js
@@ -45,7 +45,8 @@
position: 'bottom left',
show: null,
showSpeed: 100,
- theme: 'default'
+ theme: 'default',
+ swatches: []
}
};
@@ -151,7 +152,11 @@
var minicolors = $('<div class="minicolors" />'),
defaults = $.minicolors.defaults,
opacity = input.attr('data-opacity'),
- size;
+ size,
+ swatches,
+ swatch,
+ panel,
+ i;
// Do nothing if already initialized
if( input.data('minicolors-initialized') ) return;
@@ -200,18 +205,43 @@
'</div>' +
'</div>'
);
-
+
// The swatch
if( !settings.inline ) {
- input.after('<span class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"></span></span>');
- input.next('.minicolors-swatch').on('click', function(event) {
+ input.after('<span class="minicolors-swatch minicolors-sprite minicolors-input-swatch"><span class="minicolors-swatch-color"></span></span>');
+ input.next('.minicolors-input-swatch').on('click', function(event) {
event.preventDefault();
input.focus();
});
}
// Prevent text selection in IE
- input.parent().find('.minicolors-panel').on('selectstart', function() { return false; }).end();
+ panel = input.parent().find('.minicolors-panel');
+ panel.on('selectstart', function() { return false; }).end();
+
+ // Swatches
+ if (settings.swatches && settings.swatches.length !== 0) {
+ if (settings.swatches.length > 7) {
+ settings.swatches.length = 7;
+ }
+ panel.addClass('with-swatches');
+ swatches = $('<ul class="minicolors-swatches"></ul>')
+ .appendTo(panel);
+ for(i = 0; i < settings.swatches.length; ++i) {
+ swatch = settings.swatches[i];
+ swatch = isRgb(swatch) ? parseRgb(swatch, true) : hex2rgb(parseHex(swatch, true));
+ $('<li class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"></span></li>')
+ .appendTo(swatches)
+ .data('swatch-color', settings.swatches[i])
+ .find('.minicolors-swatch-color')
+ .css({
+ backgroundColor: rgb2hex(swatch),
+ opacity: swatch.a
+ });
+ settings.swatches[i] = swatch;
+ }
+
+ }
// Inline controls
if( settings.inline ) input.parent().addClass('minicolors-inline');
@@ -371,7 +401,7 @@
// Helpful references
minicolors = input.parent(),
settings = input.data('minicolors-settings'),
- swatch = minicolors.find('.minicolors-swatch'),
+ swatch = minicolors.find('.minicolors-input-swatch'),
// Panel objects
grid = minicolors.find('.minicolors-grid'),
@@ -524,7 +554,7 @@
// Helpful references
minicolors = input.parent(),
settings = input.data('minicolors-settings'),
- swatch = minicolors.find('.minicolors-swatch'),
+ swatch = minicolors.find('.minicolors-input-swatch'),
// Panel objects
grid = minicolors.find('.minicolors-grid'),
@@ -678,17 +708,42 @@
function doChange(input, value, opacity) {
var settings = input.data('minicolors-settings'),
- lastChange = input.data('minicolors-lastChange');
+ lastChange = input.data('minicolors-lastChange'),
+ obj,
+ sel,
+ i;
// Only run if it actually changed
if( !lastChange || lastChange.value !== value || lastChange.opacity !== opacity ) {
-
+
// Remember last-changed value
input.data('minicolors-lastChange', {
value: value,
opacity: opacity
});
+ // Check and select applicable swatch
+ if (settings.swatches && settings.swatches.length !== 0) {
+ if(!isRgb(value)) {
+ obj = hex2rgb(value);
+ }
+ else {
+ obj = parseRgb(value, true);
+ }
+ sel = -1;
+ for(i = 0; i < settings.swatches.length; ++i) {
+ if (obj.r === settings.swatches[i].r && obj.g === settings.swatches[i].g && obj.b === settings.swatches[i].b && obj.a === settings.swatches[i].a) {
+ sel = i;
+ break;
+ }
+ }
+
+ input.parent().find('.minicolors-swatches .minicolors-swatch').removeClass('selected');
+ if (i !== -1) {
+ input.parent().find('.minicolors-swatches .minicolors-swatch').eq(i).addClass('selected');
+ }
+ }
+
// Fire change event
if( settings.change ) {
if( settings.changeDelay ) {
@@ -935,8 +990,15 @@
.on('mouseup.minicolors touchend.minicolors', function() {
$(this).removeData('minicolors-target');
})
+ // Selected a swatch
+ .on('click.minicolors', '.minicolors-swatches li', function(event) {
+ event.preventDefault();
+ var target = $(this), input = target.parents('.minicolors').find('.minicolors-input');
+ input.val(target.data('swatch-color'));
+ updateFromInput(input);
+ })
// Show panel when swatch is clicked
- .on('mousedown.minicolors touchstart.minicolors', '.minicolors-swatch', function(event) {
+ .on('mousedown.minicolors touchstart.minicolors', '.minicolors-input-swatch', function(event) {
var input = $(this).parent().find('.minicolors-input');
event.preventDefault();
show(input);
@@ -993,7 +1055,7 @@
if( value.toLowerCase() === 'transparent' ) swatchOpacity = 0;
input
.closest('.minicolors')
- .find('.minicolors-swatch > span')
+ .find('.minicolors-input-swatch > span')
.css('opacity', swatchOpacity);
// Set input value
diff --git a/without-bootstrap.html b/without-bootstrap.html
index 0fe3f82..75e1a59 100644
--- a/without-bootstrap.html
+++ b/without-bootstrap.html
@@ -55,6 +55,7 @@
letterCase: $(this).attr('data-letterCase') || 'lowercase',
opacity: $(this).attr('data-opacity'),
position: $(this).attr('data-position') || 'bottom left',
+ swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
change: function(hex, opacity) {
var log;
try {
@@ -169,6 +170,11 @@
<br>
<input type="text" id="letter-case" class="demo" data-letterCase="uppercase">
</div>
+ <div class="form-group">
+ <label for="letter-case">Swatches</label>
+ <br>
+ <input type="text" id="letter-case" class="demo" data-format="rgb" data-opacity="1" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)">
+ </div>
</body>
</html>
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/jquery-minicolors.git
More information about the Pkg-javascript-commits
mailing list