[Pkg-javascript-commits] [jquery-minicolors] 06/15: Now selecting a swatch sets the value in the input field as requested in the settings

David Prévot taffit at moszumanska.debian.org
Sat Jan 30 21:52:49 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 abc187d7a18a1e1ae9484d599fec3b818705e985
Author: Andrea Baron <andrea at bhweb.it>
Date:   Wed Jan 27 10:35:29 2016 +0100

    Now selecting a swatch sets the value in the input field as requested in the settings
    
    I moved a part from "updateFromControl" to its own function,
    updateInput, that now can convert between hex and rgb based on the input
    value and the format specified in settings, in this way users can input
    swatches in all possible ways, and the result will always be rgb or hex
    depending on the settings.format parameter.
    Fixes claviska/jquery-minicolors#187
---
 jquery.minicolors.js | 92 +++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 63 insertions(+), 29 deletions(-)

diff --git a/jquery.minicolors.js b/jquery.minicolors.js
index ca7b7ff..ca20f92 100644
--- a/jquery.minicolors.js
+++ b/jquery.minicolors.js
@@ -151,7 +151,6 @@
 
         var minicolors = $('<div class="minicolors" />'),
             defaults = $.minicolors.defaults,
-            opacity = input.attr('data-opacity'),
             size,
             swatches,
             swatch,
@@ -396,7 +395,6 @@
 
             hex = input.val(),
             opacity = input.attr('data-opacity'),
-            value,
 
             // Helpful references
             minicolors = input.parent(),
@@ -497,47 +495,84 @@
                     break;
 
             }
-
+            
             // Handle opacity
             if( settings.opacity ) {
                 opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2);
             } else {
                 opacity = 1;
             }
-            if( settings.opacity ) input.attr('data-opacity', opacity);
+            
+            updateInput(input, hex, opacity);
+        }
+        else {
+            // Set swatch color
+            swatch.find('span').css({
+                backgroundColor: hex,
+                opacity: opacity
+            });
 
-            // Set color string
-            if( settings.format === 'rgb' ) {
-                // Returns RGB(A) string
-                var rgb = hex2rgb(hex),
-                    opacity = input.attr('data-opacity') === '' ? 1 : keepWithin( parseFloat( input.attr('data-opacity') ).toFixed(2), 0, 1 );
-                if( isNaN( opacity ) || !settings.opacity ) opacity = 1;
-
-                if( input.minicolors('rgbObject').a <= 1 && rgb && settings.opacity) {
-                    // Set RGBA string if alpha
-                    value = 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat( opacity ) + ')';
-                } else {
-                    // Set RGB string (alpha = 1)
-                    value = 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
-                }
-            } else {
-                // Returns hex color
-                value = convertCase( hex, settings.letterCase );
+            // Handle change event
+            doChange(input, hex, opacity);
+        }
+    }
+    
+    // Sets the value of the input and does the appropriate conversions
+    // to respect settings, also updates the swatch
+    function updateInput(input, value, opacity) {
+        var rgb,
+        
+        // Helpful references
+        minicolors = input.parent(),
+        settings = input.data('minicolors-settings'),
+        swatch = minicolors.find('.minicolors-input-swatch');
+        
+        if( settings.opacity ) input.attr('data-opacity', opacity);
+        
+        // Set color string
+        if( settings.format === 'rgb' ) {
+            // Returns RGB(A) string
+            
+            // Checks for input format and does the conversion
+            if ( isRgb(value) ) {
+                rgb = parseRgb(value, true);
+            }
+            else {
+                rgb = hex2rgb(parseHex(value, true));
             }
+            
+            opacity = input.attr('data-opacity') === '' ? 1 : keepWithin( parseFloat( input.attr('data-opacity') ).toFixed(2), 0, 1 );
+            if( isNaN( opacity ) || !settings.opacity ) opacity = 1;
 
-            // Update value from picker
-            input.val( value );
+            if( input.minicolors('rgbObject').a <= 1 && rgb && settings.opacity) {
+                // Set RGBA string if alpha
+                value = 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat( opacity ) + ')';
+            } else {
+                // Set RGB string (alpha = 1)
+                value = 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
+            }
+        } else {
+            // Returns hex color
+            
+            // Checks for input format and does the conversion
+            if ( isRgb(value) ) {
+                value = rgbString2hex(value);
+            }
+            
+            value = convertCase( value, settings.letterCase );
         }
 
+        // Update value from picker
+        input.val( value );
+        
         // Set swatch color
         swatch.find('span').css({
-            backgroundColor: hex,
+            backgroundColor: value,
             opacity: opacity
         });
 
         // Handle change event
         doChange(input, value, opacity);
-
     }
 
     // Sets the color picker values from the input
@@ -806,8 +841,7 @@
     function parseRgb(string, obj) {
 
         var values = string.replace(/[^\d,.]/g, ''),
-            rgba = values.split(','),
-            output;
+            rgba = values.split(',');
 
         rgba[0] = keepWithin(parseInt(rgba[0], 10), 0, 255);
         rgba[1] = keepWithin(parseInt(rgba[1], 10), 0, 255);
@@ -860,7 +894,7 @@
 
     // Function to get alpha from a RGB(A) string
     function getAlpha(rgba) {
-        var rgba = rgba.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+(\.\d{1,2})?|\.\d{1,2})[\s+]?/i);
+        rgba = rgba.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+(\.\d{1,2})?|\.\d{1,2})[\s+]?/i);
         return (rgba && rgba.length === 6) ? rgba[4] : '1';
     }
 
@@ -994,7 +1028,7 @@
         .on('click.minicolors', '.minicolors-swatches li', function(event) {
             event.preventDefault();
             var target = $(this), input = target.parents('.minicolors').find('.minicolors-input'), color = target.data('swatch-color');
-            input.val(color).attr('data-opacity', getAlpha(color));
+            updateInput(input, color, getAlpha(color));
             updateFromInput(input);
         })
         // Show panel when swatch is clicked

-- 
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