Anonymous avatar Anonymous committed 56e66a3

Make ColorPicker round trip correctly

Comments (0)

Files changed (2)

tw2/yui/templates/colorpicker.html

 <style type="text/css">
   .yui-picker { position: relative; padding: 6px; background-color: #eeeeee; width: 420px; height:220px; }
 </style>
-<div id="$w.compound_id" class="yui-picker"></div>
+<div id="$w.compound_id" class="yui-picker"><input type="hidden" id="${w.compound_id}:hex" name="$w.compound_id" value="$w.value"/></div>
 <script type="text/javascript">
     var Event = YAHOO.util.Event;
     Event.onDOMReady(function() {
         picker = new YAHOO.widget.ColorPicker("$w.compound_id", $w.options);
+        picker.setValue($w.rgb, true);
+        picker.on("rgbChange", function(o) {
+            var hex = '#';
+            for(var v in o.newValue)
+                hex += o.newValue[v].toString(16);
+            document.getElementById('${w.compound_id}:hex').value = hex;
+        });        
     });
 </script>
 </div>

tw2/yui/widgets.py

 """
 ToscaWidgets wrappers for Yahoo User Interface (YUI) widgets.
 """
-import tw2.core as twc, tw2.forms as twf, simplejson, webob
+import tw2.core as twc, tw2.forms as twf, simplejson, webob, re
 encoder = simplejson.encoder.JSONEncoder()
 
 yui_version = '2.9.0'
         twc.Link(id='hue_thumb', modname=__name__, filename="static/"+yui_version+"/colorpicker/assets/hue_thumb.png"),
     ]
     template = "genshi:tw2.yui.templates.colorpicker"
+    rgb = twc.Variable(default='[0xFF,0xFF,0xFF]')
 
     def prepare(self):
         self.safe_modify('options')
+        if self.value and re.match('^#[0-9a-fA-F]{6}$', self.value):
+            self.rgb = encoder.encode([int(self.value[i:i+2], 16) for i in (1, 3, 5)])
         self.options['images'] = {
             'PICKER_THUMB': '/resources/tw2.yui.widgets/static/'+yui_version+'/colorpicker/assets/picker_thumb.png',
             'HUE_THUMB': '/resources/tw2.yui.widgets/static/'+yui_version+'/colorpicker/assets/hue_thumb.png',
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.