1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\r
4 <title>Rico-Popup Controls</title>
\r
6 <script src="LoadRicoClient.js" type="text/javascript"></script>
\r
7 <link href="../demo.css" type="text/css" rel="stylesheet" />
\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
14 Rico.onLoad( function() {
\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
22 cal1.returnValue=function(newVal) { cal1Box.value=newVal; };
\r
25 // initialize calendar #2 (show week #)
\r
26 cal2Box=Rico.$('CalendarValue2');
\r
27 cal2=new Rico.CalendarControl("cal2", {showWeekNumber:1});
\r
29 cal2.returnValue=function(newVal) { cal2Box.value=newVal; };
\r
31 // initialize calendar #3 (no "Today is")
\r
32 cal3Box=Rico.$('CalendarValue3');
\r
33 cal3=new Rico.CalendarControl("cal3", {showToday:0});
\r
35 cal3.returnValue=function(newVal) { cal3Box.value=newVal; };
\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
43 for (var i=1; i<=3; i++) {
\r
44 Rico.eventBind('CalendarButton'+i,"click", Rico.eventHandle(window,'CalendarClick'+i));
\r
46 Rico.eventBind('ColorButton',"click", Rico.eventHandle(window,'ColorClick'));
\r
47 Rico.eventBind('TextButton',"click", Rico.eventHandle(window,'DisplayText'));
\r
49 Rico.log('onLoad finished');
\r
52 function CalendarClick1(e) {
\r
53 if (Rico.visible(cal1.container)) {
\r
58 colorpicker.close();
\r
59 cal1.open(cal1Box.value);
\r
60 Rico.positionCtlOverIcon(cal1.container,'CalendarButton1');
\r
66 function SetDateFormat(e) {
\r
68 var sel=Rico.$('CalFormat');
\r
69 cal1.setDateFmt(sel.options[sel.selectedIndex].text);
\r
72 function CalendarClick2(e) {
\r
73 if (Rico.visible(cal2.container)) {
\r
78 colorpicker.close();
\r
79 cal2.open(cal2Box.value);
\r
80 Rico.positionCtlOverIcon(cal2.container,'CalendarButton2');
\r
86 function CalendarClick3(e) {
\r
87 if (Rico.visible(cal3.container)) {
\r
92 colorpicker.close();
\r
93 cal3.open(cal3Box.value);
\r
94 Rico.positionCtlOverIcon(cal3.container,'CalendarButton3');
\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
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
113 function ColorClick(e) {
\r
114 if (Rico.visible(colorpicker.container)) {
\r
115 colorpicker.close();
\r
117 Rico.positionCtlOverIcon(colorpicker.container,'ColorButton');
\r
121 colorpicker.open();
\r
127 function DisplayText(e) {
\r
129 var txt=Rico.$('TextBox').value;
\r
131 alert('Enter some text first!');
\r
136 hideOnClick: false,
\r
137 zIndex : PopupCnt+10, // ensures shadows layer correctly
\r
142 var popup=new Rico.Window('Window #'+PopupCnt,options);
\r
143 popup.setContent(txt);
\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
153 body {font-family: Arial, Tahoma, Verdana;}
\r
165 <div id='explanation'>
\r
167 <script type='text/javascript'>
\r
168 document.write(Rico.Lib+' '+Rico.LibVersion);
\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
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
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
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
199 <p><table border='1' cellspacing='0' cellpadding='7' style='background-color:#DDD;'>
\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
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
215 <br><button id='TextButton'>Display text in window</button>
\r