Rico-Popup Controls
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);
}
Popup Controls Example
Calendar
Calendar with
Week Number
Calendar without
"Today is"
Color Picker
Type or paste some text into the box, then click the button.
Open popups can be dragged around the page.
Color picker result will be used for the background color.
Type "Esc" to close the popups.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Display text as popup
Display text as window