Merge branch 'showhidepicker'

bgrins · Jul 16, 2014 · 3763e50 · 3763e50
2 parents 07605c4 + 30b6623
commit 3763e50
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 42 deletions.
diff --git a/docs/docs.js b/docs/docs.js
@@ -231,6 +231,23 @@ $("#showPaletteOnly").spectrum({
     ]
 });
 
+$("#togglePaletteOnly").spectrum({
+    color: 'blanchedalmond',
+    showPaletteOnly: true,
+    togglePaletteOnly: true,
+    showPalette:true,
+    palette: [
+        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
+        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
+        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
+        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
+        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
+        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
+        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
+        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
+    ]
+});
+
 $("#clickoutFiresChange").spectrum({
     clickoutFiresChange: true,
     change: updateBorders

diff --git a/example/index.html b/example/index.html
@@ -85,6 +85,8 @@ <h2>Spectrum Colorpicker Crazy Configurator</h2>
                 <button class='btn toggleBtn' data-rule='showInitial'>Show Initial</button>
                 <button class='btn toggleBtn' data-rule='showAlpha'>Show Alpha</button>
                 <button class='btn toggleBtn' data-rule='showPaletteOnly'>Show Palette Only</button>
+                <button class='btn toggleBtn' data-rule='togglePaletteOnly'>Show Picker Toggle Button</button>
+                <button class='btn toggleBtn' data-rule='showButtons'>Show Buttons</button>
             </div>
             <br />
             <br />

diff --git a/i18n/jquery.spectrum-nl.js b/i18n/jquery.spectrum-nl.js
@@ -8,6 +8,8 @@
         cancelText: "Annuleer",
         chooseText: "Kies",
         clearText: "Wis kleur selectie"
+        togglePaletteMoreText: 'Meer',
+        togglePaletteLessText: 'Minder'
     };
 
     $.extend($.fn.spectrum.defaults, localization);

diff --git a/index.html b/index.html
@@ -195,10 +195,13 @@ <h2 id="options">Options</h2>
     localStorageKey: string,
     showPalette: bool,
     showPaletteOnly: bool,
+    togglePaletteOnly: bool,
     showSelectionPalette: bool,
     clickoutFiresChange: bool,
     cancelText: string,
     chooseText: string,
+    togglePaletteMoreText: string,
+    togglePaletteLessText: string,
     containerClassName: string,
     replacerClassName: string,
     preferredFormat: string,
@@ -361,6 +364,41 @@ <h3 id="options-showPaletteOnly">Show Palette Only</h3>
             </div>
         </div>
 
+        <h3 id="options-togglePaletteOnly">Toggle Palette Only</h3>
+        <div class='option-content'>
+            <div class='description'>
+            <p>Spectrum can show a button to toggle the colorpicker next to the palette. This way, the user can choose from a limited number of colors in the palette, but still be able to pick a color that's not in the palette.<br />
+                The default value for <code>togglePaletteOnly</code> is FALSE. Set it to TRUE to enable the Toggle button.<br /><br />
+                You can also change the text on the Toggle Button with the options <code>togglePaletteMoreText</code> (default is "more") and <code>togglePaletteLessText</code> (default is "less").</p>
+            </div>
+
+            <pre class='prettyprint'>
+$("#togglePaletteOnly").spectrum({
+    showPaletteOnly: true,
+    togglePaletteOnly: true,
+    togglePaletteMoreText: 'more',
+    togglePaletteLessText: 'less',
+    color: 'blanchedalmond',
+    palette: [
+        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
+        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
+        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
+        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
+        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
+        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
+        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
+        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
+    ]
+});
+            </pre>
+            <div class='example'>
+            <span class='label label-result'>
+            Result
+            </span>
+                <input type='text' name='togglePaletteOnly' id='togglePaletteOnly'  />
+            </div>
+        </div>
+
         <h3 id="options-showSelectionPalette">Show Selection Palette</h3>
         <div class='option-content'>
             <div class='description'>

diff --git a/spectrum.css b/spectrum.css
@@ -134,6 +134,9 @@ License: MIT
 .sp-container.sp-buttons-disabled .sp-button-container {
     display: none;
 }
+.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
+    display: none;
+}
 .sp-palette-only .sp-picker-container {
     display: none;
 }
@@ -255,20 +258,17 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
     border: solid 1px #f0c49B;
     padding: 0;
 }
-.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear
-{
+.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
     font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     box-sizing: border-box;
 }
-.sp-top
-{
+.sp-top {
     margin-bottom: 3px;
 }
-.sp-color, .sp-hue, .sp-clear
-{
+.sp-color, .sp-hue, .sp-clear {
     border: solid 1px #666;
 }
 
@@ -294,31 +294,31 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .sp-input:focus  {
     border: 1px solid orange;
 }
-.sp-input.sp-validation-error
-{
+.sp-input.sp-validation-error {
     border: 1px solid red;
     background: #fdd;
 }
-.sp-picker-container , .sp-palette-container
-{
+.sp-picker-container , .sp-palette-container {
     float:left;
     position: relative;
     padding: 10px;
     padding-bottom: 300px;
     margin-bottom: -290px;
 }
-.sp-picker-container
-{
+.sp-picker-container {
     width: 172px;
     border-left: solid 1px #fff;
 }
 
 /* Palettes */
-.sp-palette-container
-{
+.sp-palette-container {
     border-right: solid 1px #ccc;
 }
 
+.sp-palette-only .sp-palette-container {
+    border: 0;
+}
+
 .sp-palette .sp-thumb-el {
     display: block;
     position:relative;
@@ -332,14 +332,12 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
     border-color: orange;
 }
-.sp-thumb-el
-{
+.sp-thumb-el {
     position:relative;
 }
 
 /* Initial */
-.sp-initial
-{
+.sp-initial {
     float: left;
     border: solid 1px #333;
 }
@@ -357,6 +355,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 /* Buttons */
+.sp-palette-button-container,
 .sp-button-container {
     float: right;
 }
@@ -391,8 +390,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
     float:left;
     font-size:10px;
 }
-.sp-preview
-{
+.sp-preview {
     position:relative;
     width:25px;
     height: 20px;
@@ -402,21 +400,18 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
     z-index: 0;
 }
 
-.sp-palette
-{
+.sp-palette {
     *width: 220px;
     max-width: 220px;
 }
-.sp-palette .sp-thumb-el
-{
+.sp-palette .sp-thumb-el {
     width:16px;
     height: 16px;
     margin:2px 1px;
     border: solid 1px #d0d0d0;
 }
 
-.sp-container
-{
+.sp-container {
     padding-bottom:0;
 }
 
@@ -461,8 +456,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
     -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
     box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
 }
-.sp-cancel
-{
+.sp-cancel {
     font-size: 11px;
     color: #d93f3f !important;
     margin:0;
@@ -472,43 +466,36 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
     text-decoration:none;
 
 }
-.sp-cancel:hover
-{
+.sp-cancel:hover {
     color: #d93f3f !important;
     text-decoration: underline;
 }
 
 
-.sp-palette span:hover, .sp-palette span.sp-thumb-active
-{
+.sp-palette span:hover, .sp-palette span.sp-thumb-active {
     border-color: #000;
 }
 
-.sp-preview, .sp-alpha, .sp-thumb-el
-{
+.sp-preview, .sp-alpha, .sp-thumb-el {
     position:relative;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
 }
-.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner
-{
+.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
     display:block;
     position:absolute;
     top:0;left:0;bottom:0;right:0;
 }
 
-.sp-palette .sp-thumb-inner
-{
+.sp-palette .sp-thumb-inner {
     background-position: 50% 50%;
     background-repeat: no-repeat;
 }
 
-.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner
-{
+.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
 }
 
-.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner
-{
+.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
 }
 

diff --git a/spectrum.js b/spectrum.js
@@ -25,12 +25,15 @@
         showInitial: false,
         showPalette: false,
         showPaletteOnly: false,
+        togglePaletteOnly: false,
         showSelectionPalette: true,
         localStorageKey: false,
         appendTo: "body",
         maxSelectionSize: 7,
         cancelText: "cancel",
         chooseText: "choose",
+        togglePaletteMoreText: "more",
+        togglePaletteLessText: "less",
         clearText: "Clear Color Selection",
         noColorSelectedText: "No Color Selected",
         preferredFormat: false,
@@ -80,6 +83,9 @@
             "<div class='sp-container sp-hidden'>",
                 "<div class='sp-palette-container'>",
                     "<div class='sp-palette sp-thumb sp-cf'></div>",
+                    "<div class='sp-palette-button-container sp-cf'>",
+                        "<button type='button' class='sp-palette-toggle'></button>",
+                    "</div>",
                 "</div>",
                 "<div class='sp-picker-container'>",
                     "<div class='sp-top sp-cf'>",
@@ -194,6 +200,7 @@
             boundElement = $(element),
             disabled = false,
             container = $(markup, doc).addClass(theme),
+            pickerContainer = container.find(".sp-picker-container"),
             dragger = container.find(".sp-color"),
             dragHelper = container.find(".sp-dragger"),
             slider = container.find(".sp-hue"),
@@ -207,6 +214,7 @@
             cancelButton = container.find(".sp-cancel"),
             clearButton = container.find(".sp-clear"),
             chooseButton = container.find(".sp-choose"),
+            toggleButton = container.find(".sp-palette-toggle"),
             isInput = boundElement.is("input"),
             isInputTypeColor = isInput && inputTypeColorSupport && boundElement.attr("type") === "color",
             shouldReplace = isInput && !flat,
@@ -227,6 +235,8 @@
                 opts.showPalette = true;
             }
 
+            toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);
+
             if (opts.palette) {
                 palette = opts.palette.slice(0);
                 paletteArray = $.isArray(palette[0]) ? palette : [palette];
@@ -244,6 +254,7 @@
             container.toggleClass("sp-alpha-enabled", opts.showAlpha);
             container.toggleClass("sp-clear-enabled", allowEmpty);
             container.toggleClass("sp-buttons-disabled", !opts.showButtons);
+            container.toggleClass("sp-palette-buttons-disabled", !opts.togglePaletteOnly);
             container.toggleClass("sp-palette-disabled", !opts.showPalette);
             container.toggleClass("sp-palette-only", opts.showPaletteOnly);
             container.toggleClass("sp-initial-disabled", !opts.showInitial);
@@ -340,6 +351,24 @@
                 }
             });
 
+            toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);
+            toggleButton.bind("click.spectrum", function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+
+                opts.showPaletteOnly = !opts.showPaletteOnly;
+
+                // To make sure the Picker area is drawn on the right, next to the
+                // Palette area (and not below the palette), first move the Palette
+                // to the left to make space for the picker, plus 5px extra.
+                // The 'applyOptions' function puts the whole container back into place
+                // and takes care of the button-text and the sp-palette-only CSS class.
+                if (!opts.showPaletteOnly && !flat) {
+                    container.css('left', '-=' + (pickerContainer.outerWidth(true) + 5));
+                }
+                applyOptions();
+            });
+
             draggable(alphaSlider, function (dragX, dragY, e) {
                 currentAlpha = (dragX / alphaWidth);
                 isEmpty = false;

diff --git a/test/index.html b/test/index.html
@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>Spectrum Tests</title>
   <link rel="stylesheet" href="qunit.css">
+  <link rel="stylesheet" href="../spectrum.css">
 </head>
 <body>
   <div id="qunit"></div>