swat/apps/qooxdoo-examples/example/ColorPopup_1.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>Test for qx.ui.component.ColorPopup.</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19   qx.core.Init.getInstance().defineMain(function()
  20   {
  21     var mybtn = new qx.ui.form.Button("Open Popup");
  22     mybtn.setLocation(20, 48);
  23     mybtn.addEventListener("execute", function() {
  24       mypop.setTop(qx.dom.DomLocation.getPageBoxBottom(this.getElement()));
  25       mypop.setLeft(qx.dom.DomLocation.getPageBoxLeft(this.getElement()));
  26       mypop.show();
  27     });
  28
  29     var myview = new qx.ui.basic.Label("Selected Color");
  30     myview.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
  31     myview.setLocation(100, 48);
  32     myview.setPadding(3, 6);
  33     myview.setBackgroundImage("core/dotted_white.gif");
  34     myview.addToDocument();
  35
  36     var mytables =
  37     {
  38       core : {
  39         label : "Basic Colors",
  40         values : [ "#000", "#333", "#666", "#999", "#CCC", "#FFF", "red", "green", "blue", "yellow", "teal", "maroon" ]
  41       },
  42
  43       template : {
  44         label : "Template Colors",
  45         values : [ "#B07B30", "#B07BC9", "#E3AEC9", "#7A2A53" ]
  46       },
  47
  48       recent : {
  49         label : "Recent Colors",
  50
  51         // In this case we need named colors or rgb-value-strings, hex is not allowed currently
  52         values : [ "rgb(122,195,134)", "orange" ]
  53       }
  54     }
  55
  56     var mypop = new qx.ui.component.ColorPopup(mytables);
  57     mypop.setLocation(100, 100);
  58     mypop.setValue(new qx.renderer.color.Color("#23F3C1"));
  59
  60     mybtn.addToDocument();
  61     mypop.addToDocument();
  62
  63     mypop.addEventListener("changeValue", function(e) {
  64       this.debug("Value Listener: " + e.getData());
  65       myview.setBackgroundColor(e.getData());
  66       myview.setBackgroundImage(e.getData() ? null : "core/dotted_white.gif");
  67     });
  68
  69     mypop.addEventListener("changeRed", function(e) {
  70       this.debug("Red Listener: " + e.getData());
  71     });
  72
  73     mypop.addEventListener("changeGreen", function(e) {
  74       this.debug("Green Listener: " + e.getData());
  75     });
  76
  77     mypop.addEventListener("changeBlue", function(e) {
  78       this.debug("Blue Listener: " + e.getData());
  79     });
  80   });
  81   </script>
  82 </body>
  83 </html>