Show empty button by using option allowEmpty and showPaletteOnly

docs/docs.js

@@ -250,6 +250,26 @@ $("#showPaletteOnly").spectrum({
     }
 });
 
+$("#showPaletteOnlyEmpty").spectrum({
+    color: 'blanchedalmond',
+    showPaletteOnly: true,
+    showPalette:true,
+    palette: [
+        ['black', 'white', 'blanchedalmond', 'violet'],
+        ['red', 'yellow', 'green', 'blue']
+    ],
+    change: function(c) {
+        var label = $("[data-label-for=" + this.id + "]");
+        label.text("Change called: " + (c ? c.toHexString() : "transparent"));
+    },
+    move: function(c) {
+        var label = $("[data-label-for=" + this.id + "]");
+        label.text("Move called: " + (c ? c.toHexString() : "transparent"));
+    },
+    allowEmpty: true
+});
+
+
 $("#hideAfterPaletteSelect").spectrum({
     showPaletteOnly: true,
     showPalette:true,

index.html

@@ -350,13 +350,23 @@ <h3 id="options-showPaletteOnly">Show Palette Only</h3>
             <pre class='prettyprint'>
 $("#showPaletteOnly").spectrum({
     showPaletteOnly: true,
-    showPalette:true,
+    showPalette: true,
     color: 'blanchedalmond',
     palette: [
         ['black', 'white', 'blanchedalmond',
         'rgb(255, 128, 0);', 'hsv 100 70 50'],
         ['red', 'yellow', 'green', 'blue', 'violet']
     ]
+});
+$("#showPaletteOnlyEmpty").spectrum({
+    showPaletteOnly: true,
+    showPalette: true,
+    color: 'blanchedalmond',
+    palette: [
+        ['black', 'white', 'blanchedalmond', 'violet'],
+        ['red', 'yellow', 'green', 'blue']
+    ],
+    allowEmpty: true
 });
             </pre>
             <div class='example'>
@@ -366,6 +376,10 @@ <h3 id="options-showPaletteOnly">Show Palette Only</h3>
                 <input type='text' name='showPaletteOnly' id='showPaletteOnly'  />
                 <em data-label-for="showPaletteOnly" class='em-label'></em>
             </div>
+            <div class="example">
+                <input type="text" name="showPaletteOnlyEmpty" id="showPaletteOnlyEmpty">
+                <em data-label-for="showPaletteOnlyEmpty" class='em-label'></em>
+            </div>
         </div>
 
         <h3 id="options-togglePaletteOnly">Toggle Palette Only</h3>

spectrum.css

@@ -102,7 +102,8 @@ License: MIT
     border: solid 1px #333;
 }
 
-.sp-clear {
+.sp-clear,
+.sp-container .sp-clear-palette-only {
     display: none;
 }
 
@@ -120,6 +121,20 @@ License: MIT
     height: 28px;
 }
 
+.sp-clear-enabled.sp-palette-only .sp-clear-palette-only {
+    display: block;
+    position: static;
+    height: 16px;
+    margin: 3px 2px;
+    width: 16px;
+
+    -webkit-box-shadow: inset 0 0 0 1px #ccc;
+    -moz-box-shadow: inset 0 0 0 1px #ccc;
+    -ms-box-shadow: inset 0 0 0 1px #ccc;
+    -o-box-shadow: inset 0 0 0 1px #ccc;
+    box-shadow: inset 0 0 0 1px #ccc;
+}
+
 /* Don't allow text selection */
 .sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
     -webkit-user-select:none;

spectrum.js

@@ -96,6 +96,7 @@
                     "<div class='sp-palette-button-container sp-cf'>",
                         "<button type='button' class='sp-palette-toggle'></button>",
                     "</div>",
+                    "<div class='sp-clear sp-clear-display sp-clear-palette-only'></div>",
                 "</div>",
                 "<div class='sp-picker-container'>",
                     "<div class='sp-top sp-cf'>",