CBE iFrame Demo #2
Note: This does not work in IE5<, Opera nor NN4.
The Mini Browser
The MiniBrowser object is dynamically created. You can have as many as memory permits. The URL and title can be changed at any time. They are draggable, minimizable, and "come to top" when focused. When minimized, they float in the lower left corner when the page is scrolled. Just click to restore.
The following links will open pages in the MiniBrowser that has the focus.
CBE Docs
Getting Started
CBE Object Model
CBE Event Model
CBE Examples
Menu 3 Template
Menu 4 Template
PHP Example
php Calendar
windowOnload()
function windowOnload() {
new MiniBrowser('cen', 0, 500, 300, "CBE Menu 1", 'menu1_template.html');
new MiniBrowser('se', 0, 400, 200, "CBE Menu 2", 'menu2_template.html');
window.cbe.addEventListener('scroll', winScrollListener);
}
The MiniBrowser Constructor
function MiniBrowser(uX, uY, uW, uH, sTitle, sUrl) {
/* Add this mb to the array mbAll */
if (!window.mbAll) {
window.mbAll = new Array();
window.mbHiZ = 0;
window.mbFocus = this;
}
this.index = mbAll.length;
mbAll[this.index] = this;
this.init = true;
/* Argument properties */
this.x = uX;
this.y = uY;
this.width = uW;
this.height = uH;
this.title = sTitle;
this.url = sUrl;
/* Default properties
you can change these then call paint() */
this.minVis = 125; // amount visible when minimized
this.titleHeight = 18;
this.mainMargin = 2;
this.titleColor = '#ffffff';
this.titleBgColor = '#0000cc';
this.mainBgColor = '#999999';
this.border = 1;
/* Create elements */
this.eMain = document.cbe.createElement("DIV");
this.eMain.id = 'idMBM' + mbAll.length;
document.cbe.appendChild(this.eMain);
this.eMain.cbe.addEventListener('click', mbMouseDownListener, false);
this.eMain.cbe.mb = this;
this.eTitle = document.cbe.createElement("DIV");
this.eTitle.id = 'idMBT' + mbAll.length;
this.eMain.cbe.appendChild(this.eTitle);
this.eTitle.innerHTML = "MB"+mbAll.length;
with(this.eTitle.cbe) {
addEventListener('dragStart', mbDragStartListener, false);
addEventListener('drag', mbDragListener, false);
addEventListener('dragEnd', mbDragEndListener, false);
}
this.eCtrl = document.cbe.createElement("DIV");
this.eCtrl.id = 'idMBC' + mbAll.length;
this.eTitle.cbe.appendChild(this.eCtrl);
this.eCtrl.innerHTML =
"<img title='Minimize' width='14' height='14' src='../../images/cb_x.gif' border='0'>";
this.eBody = document.cbe.createElement("DIV");
this.eBody.id = 'idMBB' + mbAll.length;
this.eMain.cbe.appendChild(this.eBody);
this.eIframe = document.createElement("IFRAME");
this.eIframe.id = this.eIframe.name = 'idMBI' + mbAll.length;
this.eBody.appendChild(this.eIframe);
/* Methods */
// REPLACE
this.replace = function(url, sTitle) {
this.eIframe.src = url;
this.url = url;
if (sTitle) {
this.title = sTitle;
this.eTitle.firstChild.nodeValue = this.title;
}
}
// FOCUS
this.focus = function() {
if (!mbFocus || this.minimized) return;
mbFocus.eBody.cbe.hide();
mbFocus.eTitle.cbe.color('#999999');
mbFocus = this;
mbFocus.eMain.cbe.zIndex(++mbHiZ);
mbFocus.eTitle.cbe.color(this.titleColor);
mbFocus.eBody.cbe.show();
}
// CLOSE
this.close = function() {
this.eMain.cbe.hide();
}
// MINIMIZE
this.minimize = function() {
if (!this.minimized) {
this.minimized = true;
this.x = this.eMain.cbe.pageX() - document.cbe.scrollLeft();
this.y = this.eMain.cbe.pageY() - document.cbe.scrollTop();
this.eBody.cbe.hide();
this.eMain.cbe.resizeTo(
this.eMain.cbe.width(),
this.eTitle.cbe.height() + (2*this.mainMargin) + (2*this.border)
);
this.eMain.cbe.moveTo(
this.minVis - this.eMain.cbe.width(),
document.cbe.scrollTop() + document.cbe.height() - ((this.index+1)*24)
);
this.clientOffset = this.eMain.cbe.pageY() - document.cbe.scrollTop();
}
return false;
}
// RESTORE
this.restore = function() {
if (this.minimized) {
this.minimized = false;
this.eMain.cbe.moveTo(
this.x + document.cbe.scrollLeft(),
this.y + document.cbe.scrollTop()
);
this.paint();
}
}
// PAINT
this.paint = function() {
/* Init main cbe */
this.eMain.style.border = 'solid '+this.border+'px '+this.titleBgColor;
with (this.eMain.cbe) {
background(this.mainBgColor);
resizeTo(
this.width+(2*this.mainMargin)+(2*this.border),
this.height+this.titleHeight+(3*this.mainMargin)+(2*this.border)
);
show();
}
/* Init titlebar cbe */
if (this.title) this.eTitle.firstChild.nodeValue = this.title;
with (this.eTitle.style) {
color = '#999999';
backgroundColor = this.titleBgColor;
fontFamily = "verdana,arial,helvetica,sans-serif";
fontSize = "12px";
fontWeight = "bold";
padding = "1px 4px 1px 4px";
textAlign = 'right';
}
with (this.eTitle.cbe) {
resizeTo(this.width, this.titleHeight);
moveTo(this.mainMargin, this.mainMargin);
show();
}
/* Init control menu */
with (this.eCtrl.cbe) {
background(this.titleBgColor);
resizeTo(this.titleHeight, this.titleHeight);
moveTo(0, this.mainMargin);
show();
}
/* Init iframe container */
with (this.eBody.cbe) {
resizeTo(this.width, this.height);
moveTo(this.eTitle.cbe.left(), this.titleHeight+(2*this.mainMargin));
hide();
}
/* Init iframe */
with (this.eIframe) {
width = this.width;
height = this.height;
marginWidth = 0;
marginHeight = 0;
frameBorder = 0;
scrolling = 'auto';
}
// Initial position
if (this.init) {
this.eMain.cbe.moveTo(this.x, this.y);
this.eIframe.src = this.url;
this.init = false;
}
/* Init floating offset */
this.clientOffset = this.eMain.cbe.pageY() - document.cbe.scrollTop();
this.focus();
} // end paint()
// Paint it
setTimeout("mbAll["+(mbAll.length-1)+"].paint()", 125);
} // end MiniBrowser Constructor
The Event Listeners
function mbMouseDownListener(e) {
if (e.cbeTarget.mb) {
e.cbeCurrentTarget.mb.focus();
}
}
function mbDragStartListener(e) {
if (e.cbeTarget.parentNode.mb) {
var mb = e.cbeTarget.parentNode.mb;
mb.focus();
if (!mb.minimized) mb.eBody.cbe.hide();
}
}
function mbDragListener(e) {
if (e.cbeTarget.parentNode.mb) {
var mb = e.cbeTarget.parentNode.mb;
mb.eMain.cbe.moveBy(e.dx, e.dy);
}
}
function mbDragEndListener(e) {
if (e.cbeTarget.parentNode.mb) {
var mb = e.cbeTarget.parentNode.mb;
if (!mb.minimized) mb.eBody.cbe.show();
mb.clientOffset = mb.eMain.cbe.pageY() - document.cbe.scrollTop();
if (mb.minimized) mb.restore();
}
if (e.cbeTarget.id.indexOf('idMBC')!=-1) {
if (e.cbeTarget.contains(e.pageX, e.pageY)) {
if (e.cbeTarget.parentNode.parentNode.mb) {
var mb = e.cbeTarget.parentNode.parentNode.mb;
if (mb.minimized) mb.restore();
else mb.minimize();
}
}
}
}
function winScrollListener() {
for (var i=0; i<mbAll.length; ++i) {
if (mbAll[i].minimized)
mbAll[i].eMain.cbe.slideTo(
mbAll[i].eMain.cbe.left(),
document.cbe.scrollTop() + mbAll[i].clientOffset,
500
);
}
}
|