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