JavaScript DHTML/Rico/Color Picker
Color picker
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Rico-Popup Controls</title> <script src="rico21/src/prototype.js" type="text/javascript"></script> <script src="rico21/src/rico.js" type="text/javascript"></script> <script type="text/javascript"> Rico.loadModule("Calendar","ColorPicker"); Rico.loadModule("Color"); // only required for ProcessColorSelection() var cal1,cal2,cal3,cal1Box,cal2Box,cal3Box; var colorpicker,colorBox Rico.onLoad( function() {
// initialize calendar (addHoliday calls are optional) cal1Box=$("CalendarValue1"); cal1=new Rico.CalendarControl("cal1"); cal1.addHoliday(25,12,0,"Christmas","#F55","white"); cal1.addHoliday(1,1,0,"New Years","#2F2","white"); cal1.atLoad(); cal1.returnValue=function(newVal) { cal1Box.value=newVal; }; SetDateFormat(); // initialize calendar #2 (show week #) cal2Box=$("CalendarValue2"); cal2=new Rico.CalendarControl("cal2", {showWeekNumber:1}); cal2.atLoad(); cal2.returnValue=function(newVal) { cal2Box.value=newVal; }; // initialize calendar #3 (no "Today is") cal3Box=$("CalendarValue3"); cal3=new Rico.CalendarControl("cal3", {showToday:0}); cal3.atLoad(); cal3.returnValue=function(newVal) { cal3Box.value=newVal; }; // initialize color picker colorpicker=new Rico.ColorPicker("colorpicker1"); colorpicker.atLoad(); colorpicker.returnValue=ProcessColorSelection; colorBox=$("ColorValue");
}); function CalendarClick1(e) {
if (Element.visible(cal1.container)) { cal1.close(); } else { RicoUtil.positionCtlOverIcon(cal1.container,$("CalendarButton1")); cal1.open(cal1Box.value); cal2.close(); cal3.close(); colorpicker.close(); } Event.stop(e);
} function SetDateFormat(e) {
cal1Box.value=""; cal1.setDateFmt($F("CalFormat"));
} function CalendarClick2(e) {
if (Element.visible(cal2.container)) { cal2.close(); } else { RicoUtil.positionCtlOverIcon(cal2.container,$("CalendarButton2")); cal1.close(); cal3.close(); cal2.open(cal2Box.value); colorpicker.close(); } Event.stop(e);
} function CalendarClick3(e) {
if (Element.visible(cal3.container)) { cal3.close(); } else { RicoUtil.positionCtlOverIcon(cal3.container,$("CalendarButton3")); cal1.close(); cal2.close(); cal3.open(cal3Box.value); colorpicker.close(); } Event.stop(e);
} function ProcessColorSelection(newVal) {
colorBox.value=newVal; // set text box background to the selected color colorBox.style.backgroundColor=newVal; colorBox.style.color= Prototype.Browser.WebKit ? "black" : TextColor(newVal);
} // choose black or white text - whichever gives the best contrast function TextColor(hexval) {
var objColor=Rico.Color.createFromHex(hexval); return (objColor.rgb.g > 160 || objColor.rgb.r+objColor.rgb.g+objColor.rgb.b > 480) ? "black" : "white";
} function ColorClick(e) {
if (Element.visible(colorpicker.container)) { colorpicker.close(); } else { RicoUtil.positionCtlOverIcon(colorpicker.container,$("ColorButton")); cal1.close(); cal2.close(); cal3.close(); colorpicker.open(); } Event.stop(e);
} var PopupCnt=0; function DisplayText(e,winFlag) {
var txt=$("TextBox").value; if (!txt) { alert("Enter some text first!"); return; } var options={ hideOnClick: false, zIndex : ++PopupCnt // ensures shadows layer correctly }; var popup=new Rico.Popup(options); popup.options.canDragFunc=true; if (winFlag) { popup.createWindow("Window #"+PopupCnt,txt,"10em","20em"); } else { popup.createPopup(document.body,txt,"10em","20em"); } var color=colorBox.value || "#FFFFFF"; // get color picker value popup.contentDiv.style.backgroundColor=color; popup.contentDiv.style.color=TextColor(color); // pick a random location in the upper-left quadrant of the screen var x=Math.floor(Math.random()*RicoUtil.windowWidth()/2); var y=Math.floor(Math.random()*RicoUtil.windowHeight()/2); popup.openPopup(x,y); Event.stop(e);
} </script> <style> body {font-family: Arial, Tahoma, Verdana;} div.ricoPopup {
background-color: white; border: 2px solid black; padding: 5px;
} div.ricoWindow {
border: 2px solid black;
} .ricoTitle {
padding: 3px; color: white; background-color: black;
}
- row1 span {
font-size: 8pt;
}
- CalFormat {
font-size: 8pt;
} </style> </head> <body>
Popup Controls Example
<button id="CalendarButton1" onclick="CalendarClick1(event)">Calendar</button>
|
<button id="CalendarButton2" onclick="CalendarClick2(event)">Calendar with Week Number</button> |
<button id="CalendarButton3" onclick="CalendarClick3(event)">Calendar without "Today is"</button> |
<button id="ColorButton" onclick="ColorClick(event)">Color Picker</button> |
<input type="text" id="CalendarValue1" size="10"> | <input type="text" id="CalendarValue2" size="10"> | <input type="text" id="CalendarValue3" size="10"> | <input type="text" id="ColorValue" size="8"> |
Type or paste some text into the box, then click the button.
|
</body> </html>
</source>