Fix #5654 - roojspacker - get it working as a doc tool...
[roojs1] / docs.old / symbols / src / Roo_ColorPalette.js.html
diff --git a/docs.old/symbols/src/Roo_ColorPalette.js.html b/docs.old/symbols/src/Roo_ColorPalette.js.html
new file mode 100644 (file)
index 0000000..5999200
--- /dev/null
@@ -0,0 +1,148 @@
+<html><head><title>../roojs1/Roo/ColorPalette.js</title><link rel="stylesheet" type="text/css" href="../../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+/**
+ * @class Roo.ColorPalette
+ * @extends Roo.Component
+ * Simple color palette class for choosing colors.  The palette can be rendered to any container.&lt;br /&gt;
+ * Here's an example of typical usage:
+ * &lt;pre&gt;&lt;code&gt;
+var cp = new Roo.ColorPalette({value:'993300'});  // initial selected color
+cp.render('my-div');
+
+cp.on('select', function(palette, selColor){
+    // do something with selColor
+});
+&lt;/code&gt;&lt;/pre&gt;
+ * @constructor
+ * Create a new ColorPalette
+ * @param {Object} config The config object
+ */
+</span><span class="jsdoc-var">Roo.ColorPalette </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">Roo.ColorPalette.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
+    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
+        </span><span class="jsdoc-comment">/**
+            * @event select
+            * Fires when a color is selected
+            * @param {ColorPalette} this
+            * @param {String} color The 6-digit color hex code (without the # symbol)
+            */
+        </span><span class="jsdoc-var">select</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+    </span><span class="jsdoc-syntax">});
+
+    </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;select&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+    }
+};
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.ColorPalette</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Component</span><span class="jsdoc-syntax">, {
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} itemCls
+     * The CSS class to apply to the containing element (defaults to &quot;x-color-palette&quot;)
+     */
+    </span><span class="jsdoc-var">itemCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-color-palette&quot;</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {String} value
+     * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol).  Note that
+     * the hex codes are case-sensitive.
+     */
+    </span><span class="jsdoc-var">value </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">clickEvent</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">ctype</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Roo.ColorPalette&quot;</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * @cfg {Boolean} allowReselect If set to true then reselecting a color that is already selected fires the selection event
+     */
+    </span><span class="jsdoc-var">allowReselect </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">/**
+     * &lt;p&gt;An array of 6-digit color hex code strings (without the # symbol).  This array can contain any number
+     * of colors, and each hex code should be unique.  The width of the palette is controlled via CSS by adjusting
+     * the width property of the 'x-color-palette' class (or assigning a custom class), so you can balance the number
+     * of colors with the width setting until the box is symmetrical.&lt;/p&gt;
+     * &lt;p&gt;You can override individual colors if needed:&lt;/p&gt;
+     * &lt;pre&gt;&lt;code&gt;
+var cp = new Roo.ColorPalette();
+cp.colors[0] = &quot;FF0000&quot;;  // change the first box to red
+&lt;/code&gt;&lt;/pre&gt;
+
+Or you can provide a custom array of your own for complete control:
+&lt;pre&gt;&lt;code&gt;
+var cp = new Roo.ColorPalette();
+cp.colors = [&quot;000000&quot;, &quot;993300&quot;, &quot;333300&quot;];
+&lt;/code&gt;&lt;/pre&gt;
+     * @type Array
+     */
+    </span><span class="jsdoc-var">colors </span><span class="jsdoc-syntax">: [
+        </span><span class="jsdoc-string">&quot;000000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;993300&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;333300&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;003300&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;003366&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;000080&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;333399&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;333333&quot;</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-string">&quot;800000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FF6600&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;808000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;008000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;008080&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;0000FF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;666699&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;808080&quot;</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-string">&quot;FF0000&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FF9900&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;99CC00&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;339966&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;33CCCC&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;3366FF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;800080&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;969696&quot;</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-string">&quot;FF00FF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FFCC00&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FFFF00&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;00FF00&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;00FFFF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;00CCFF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;993366&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;C0C0C0&quot;</span><span class="jsdoc-syntax">,
+        </span><span class="jsdoc-string">&quot;FF99CC&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FFCC99&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FFFF99&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;CCFFCC&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;CCFFFF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;99CCFF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;CC99FF&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;FFFFFF&quot;
+    </span><span class="jsdoc-syntax">],
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.MasterTemplate</span><span class="jsdoc-syntax">(
+            </span><span class="jsdoc-string">'&lt;tpl&gt;&lt;a href=&quot;#&quot; class=&quot;color-{0}&quot; hidefocus=&quot;on&quot;&gt;&lt;em&gt;&lt;span style=&quot;background:#{0}&quot; unselectable=&quot;on&quot;&gt;&amp;#160;&lt;/span&gt;&lt;/em&gt;&lt;/a&gt;&lt;/tpl&gt;'
+        </span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.colors</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">c.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
+            </span><span class="jsdoc-var">t.add</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]]);
+        }
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">el.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.itemCls</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">t.overwrite</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">container.dom.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.clickEvent</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handleClick</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">delegate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;a&quot;</span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.clickEvent </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">delegate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;a&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">preventDefault</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">});
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">afterRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-var">Roo.ColorPalette.superclass.afterRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">);
+        }
+    },
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">handleClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t.className.match</span><span class="jsdoc-syntax">(/(?:^|\s)color-(.{6})(?:\s|$)/)[1];
+            </span><span class="jsdoc-var">this.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.toUpperCase</span><span class="jsdoc-syntax">());
+        }
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Selects the specified color in the palette (fires the select event)
+     * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
+     */
+    </span><span class="jsdoc-var">select </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;#&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.allowReselect</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;a.color-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.value</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-color-palette-sel&quot;</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-var">el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;a.color-&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-color-palette-sel&quot;</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;select&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">);
+        }
+    }
+});</span></code></body></html>
\ No newline at end of file