git.infodrom.org Git - infodrom/rico3/blob - examples/html/controls.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   2 <html>\r
   3 <head>\r
   4 <title>Rico-Popup Controls</title>\r
   5
   6 <script src="LoadRicoClient.js" type="text/javascript"></script>\r
   7 <link href="../demo.css" type="text/css" rel="stylesheet" />\r
   8 \r
   9 <script type='text/javascript'>\r
  10 Rico.loadModule('Calendar','ColorPicker');\r
  11 var cal1,cal2,cal3,cal1Box,cal2Box,cal3Box;\r
  12 var colorpicker,colorBox\r
  13 \r
  14 Rico.onLoad( function() {\r
  15 \r
  16   // initialize calendar  (addHoliday calls are optional)\r
  17   cal1Box=Rico.$('CalendarValue1');\r
  18   cal1=new Rico.CalendarControl("cal1");\r
  19   cal1.addHoliday(25,12,0,'Christmas','#F55','white');\r
  20   cal1.addHoliday(1,1,0,'New Years','#2F2','white');\r
  21   cal1.atLoad();\r
  22   cal1.returnValue=function(newVal) { cal1Box.value=newVal; };\r
  23   SetDateFormat();\r
  24 \r
  25   // initialize calendar #2 (show week #)\r
  26   cal2Box=Rico.$('CalendarValue2');\r
  27   cal2=new Rico.CalendarControl("cal2", {showWeekNumber:1});\r
  28   cal2.atLoad();\r
  29   cal2.returnValue=function(newVal) { cal2Box.value=newVal; };\r
  30 \r
  31   // initialize calendar #3 (no "Today is")\r
  32   cal3Box=Rico.$('CalendarValue3');\r
  33   cal3=new Rico.CalendarControl("cal3", {showToday:0});\r
  34   cal3.atLoad();\r
  35   cal3.returnValue=function(newVal) { cal3Box.value=newVal; };\r
  36   \r
  37   // initialize color picker\r
  38   colorpicker=new Rico.ColorPicker("colorpicker1");\r
  39   colorpicker.atLoad();\r
  40   colorpicker.returnValue=ProcessColorSelection;\r
  41   colorBox=Rico.$('ColorValue');\r
  42   \r
  43   for (var i=1; i<=3; i++) {\r
  44     Rico.eventBind('CalendarButton'+i,"click", Rico.eventHandle(window,'CalendarClick'+i));\r
  45   };\r
  46   Rico.eventBind('ColorButton',"click", Rico.eventHandle(window,'ColorClick'));\r
  47   Rico.eventBind('TextButton',"click", Rico.eventHandle(window,'DisplayText'));\r
  48   \r
  49   Rico.log('onLoad finished');\r
  50 });\r
  51 \r
  52 function CalendarClick1(e) {\r
  53   if (Rico.visible(cal1.container)) {\r
  54     cal1.close();\r
  55   } else {\r
  56     cal2.close();\r
  57     cal3.close();\r
  58     colorpicker.close();\r
  59     cal1.open(cal1Box.value);\r
  60     Rico.positionCtlOverIcon(cal1.container,'CalendarButton1');\r
  61     cal1.move();\r
  62   }\r
  63   Rico.eventStop(e);\r
  64 }\r
  65 \r
  66 function SetDateFormat(e) {\r
  67   cal1Box.value='';\r
  68   var sel=Rico.$('CalFormat');\r
  69   cal1.setDateFmt(sel.options[sel.selectedIndex].text);\r
  70 }\r
  71 \r
  72 function CalendarClick2(e) {\r
  73   if (Rico.visible(cal2.container)) {\r
  74     cal2.close();\r
  75   } else {\r
  76     cal1.close();\r
  77     cal3.close();\r
  78     colorpicker.close();\r
  79     cal2.open(cal2Box.value);\r
  80     Rico.positionCtlOverIcon(cal2.container,'CalendarButton2');\r
  81     cal2.move();\r
  82   }\r
  83   Rico.eventStop(e);\r
  84 }\r
  85 \r
  86 function CalendarClick3(e) {\r
  87   if (Rico.visible(cal3.container)) {\r
  88     cal3.close();\r
  89   } else {\r
  90     cal1.close();\r
  91     cal2.close();\r
  92     colorpicker.close();\r
  93     cal3.open(cal3Box.value);\r
  94     Rico.positionCtlOverIcon(cal3.container,'CalendarButton3');\r
  95     cal3.move();\r
  96   }\r
  97   Rico.eventStop(e);\r
  98 }\r
  99 \r
 100 function ProcessColorSelection(newVal) {\r
 101   colorBox.value=newVal;\r
 102   // set text box background to the selected color\r
 103   colorBox.style.backgroundColor=newVal;\r
 104   colorBox.style.color= Rico.isWebKit ? 'black' : TextColor(newVal);\r
 105 }\r
 106 \r
 107 // choose black or white text - whichever gives the best contrast\r
 108 function TextColor(hexval) {\r
 109   var objColor=Rico.Color.createFromHex(hexval);\r
 110   return (objColor.rgb.g > 160 || objColor.rgb.r+objColor.rgb.g+objColor.rgb.b > 480) ? 'black' : 'white';\r
 111 }\r
 112 \r
 113 function ColorClick(e) {\r
 114   if (Rico.visible(colorpicker.container)) {\r
 115     colorpicker.close();\r
 116   } else {\r
 117     Rico.positionCtlOverIcon(colorpicker.container,'ColorButton');\r
 118     cal1.close();\r
 119     cal2.close();\r
 120     cal3.close();\r
 121     colorpicker.open();\r
 122   }\r
 123   Rico.eventStop(e);\r
 124 }\r
 125 \r
 126 var PopupCnt=0;\r
 127 function DisplayText(e) {\r
 128   Rico.eventStop(e);\r
 129   var txt=Rico.$('TextBox').value;\r
 130   if (!txt) {\r
 131     alert('Enter some text first!');\r
 132     return;\r
 133   }\r
 134   PopupCnt++;\r
 135   var options={\r
 136     hideOnClick: false,\r
 137     zIndex     : PopupCnt+10,   // ensures shadows layer correctly\r
 138     height     : '200px',\r
 139     width      : '300px',\r
 140     overflow   : 'auto'\r
 141   };\r
 142   var popup=new Rico.Window('Window #'+PopupCnt,options);\r
 143   popup.setContent(txt);\r
 144 \r
 145   // pick a random location in the upper-left quadrant of the screen\r
 146   var x=Math.floor(Math.random()*Rico.windowWidth()/2);\r
 147   var y=Math.floor(Math.random()*Rico.windowHeight()/2);\r
 148   popup.openPopup(x,y);\r
 149 }\r
 150 </script>\r
 151
 152 <style>
 153 body {font-family: Arial, Tahoma, Verdana;}\r
 154 #row1 span {\r
 155   font-size: 8pt;\r
 156 }\r
 157 #CalFormat {\r
 158   font-size: 8pt;\r
 159 }\r
 160 </style>
 161 </head>\r
 162 \r
 163 <body>
 164 \r
 165 <div id='explanation'>\r
 166 Base Library: \r
 167 <script type='text/javascript'>\r
 168 document.write(Rico.Lib+' '+Rico.LibVersion);\r
 169 </script>\r
 170 <hr>\r
 171 <h1>Rico: Popup Controls</h1>\r
 172 <p>This example displays the Rico Calendar in various formats and the Rico Color Picker,\r
 173 as well a displaying a dialog window.\r
 174 </p>\r
 175 </div>\r
 176 \r
 177 \r
 178 <table border='1' cellspacing='0' cellpadding='7'>\r
 179 <tr id='row1' valign='top'>\r
 180 <td><button id='CalendarButton1'>Calendar</button>\r
 181 <br><select id='CalFormat' onchange='SetDateFormat(event)'>\r
 182 <option>yyyy-mm-dd</option>\r
 183 <option>dd-mm-yyyy</option>\r
 184 <option>mm/dd/yyyy</option>\r
 185 </select>\r
 186 </td>\r
 187 <td><button id='CalendarButton2'>Calendar with<br>Week Number</button></td>\r
 188 <td><button id='CalendarButton3'>Calendar without<br>"Today is"</button></td>\r
 189 <td><button id='ColorButton'>Color Picker</button></td>\r
 190 </tr>\r
 191 <tr>\r
 192 <td><input type='text' id='CalendarValue1' size='10'></td>\r
 193 <td><input type='text' id='CalendarValue2' size='10'></td>\r
 194 <td><input type='text' id='CalendarValue3' size='10'></td>\r
 195 <td><input type='text' id='ColorValue' size='8'></td>\r
 196 </tr>\r
 197 </table>\r
 198 \r
 199 <p><table border='1' cellspacing='0' cellpadding='7' style='background-color:#DDD;'>\r
 200 <tr><td>\r
 201 <span style='font-size:small;'>\r
 202 Type or paste some text into the box, then click the button.\r
 203 <br>Open popups can be dragged around the page.\r
 204 <br>Type "Esc" to close all popups.\r
 205 </span>\r
 206 <br><textarea id='TextBox' rows='6' cols='70'>\r
 207 Lorem ipsum dolor sit amet, consectetur adipisicing elit, \r
 208 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \r
 209 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris \r
 210 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in \r
 211 reprehenderit in voluptate velit esse cillum dolore eu fugiat \r
 212 nulla pariatur. Excepteur sint occaecat cupidatat non proident, \r
 213 sunt in culpa qui officia deserunt mollit anim id est laborum.\r
 214 </textarea>\r
 215 <br><button id='TextButton'>Display text in window</button>\r
 216 </td></tr>\r
 217 </table>\r
 218 \r
 219 </body>\r
 220 </html>\r