Widget Environment Source Codevar WEVersion = "version 4.04";
/* This notice must be left untouched at all times
widget.js v. 4.04
The latest version should be available at
http://www.onderstekop.nl
http://widget-env.sourceforge.net/
Copyright (c) 2007 Bart Spaans All rights reserved.
Created 8. 4. 2007 by Bart Spaans (Web: http://www.onderstekop.nl)
Last modified: 8. 4. 2007
-------------------------------------
LICENSE: LGPL
-------------------------------------
License
Widget Environment
Copyright (C) 2007 Bart Spaans
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
Copyright (C) 1991, 1999 Free Software Foundation, Inc.
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
*/
/////GLOBAL WIDGET CONFIGURATION///////
var minWidgetHeight = '100px';
var minWidgetWidth = '100px';
var customWidgetWidth = '600px';
var customWidgetHeight = '600px';
//DON'T CHANGE THESE
var dragObject = null;
var mouseOffset = null;
var resizeWidget = null;
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
document.onkeyup = keyUp;
function widget(wID) {
//OBJECY VARIABLES
this.header = "Nar";
this.content = "This is the Widget Environment version 3.03";
this.icon = "img/widget.gif";
this.toTrayIcon = "img/totray.gif";
this.maximizeIcon = "img/maximize.gif";
this.closeIcon = "img/close.gif";
this.width = customWidgetWidth;
this.height = customWidgetHeight;
this.left = Math.random() * (parseInt(screen.width) - parseInt(customWidgetWidth));
this.top = Math.random() * (parseInt(screen.height) - 220 - parseInt(customWidgetHeight)) + 40;
this.widgetID = wID;
this.showWidget = showWidget;
}
function showWidget () {
if (!document.getElementById('navBar'))
createNavBar();
//BUILDING THE WIDGET
newWidget = document.createElement('div');
newWidget.className = 'widgetStyleMain';
newWidget.id = this.widgetID;
newWidget.style.height = this.height;
newWidget.style.width = this.width;
newWidget.style.left = this.left;
newWidget.style.top = this.top;
newWidget.name = "Widget";
document.body.appendChild(newWidget);
//BUILDING THE HEADER OF THE WIDGET
header = document.createElement('div');
header.className = 'widgetStyleHeader';
header.id = this.widgetID + "HEA";
header.innerHTML = "<img src='" + this.icon + "' style='position: absolute; left: 2px; top: 2px; '>" + this.header;
header.innerHTML += "<img src='" + this.toTrayIcon + "' class='widgetStyleToTrayButton' id='" + this.widgetID +"TRAY'>";
header.innerHTML += "<img src='" + this.maximizeIcon + "' class='widgetStyleMaximizeButton' id='" + this.widgetID +"MAX'>";
header.innerHTML += "<img src='" + this.closeIcon + "' class='widgetStyleCloseButton' id='" + this.widgetID +"CLOSE'>";
newWidget.appendChild(header);
//BUILDING THE CONTENT OF THE WIDGET
content = document.createElement('div');
content.className = 'widgetStyleContents';
content.id = this.widgetID + "CONTENT";
content.style.height = parseInt(newWidget.style.height) - 53 + 'px';
content.style.width = parseInt(newWidget.style.width) - 6 + 'px';
content.innerHTML = this.content;
newWidget.appendChild(content);
//BUILDING THE STATUS BAR
statusBar = document.createElement('div');
statusBar.className = 'widgetStyleStatusBar';
newWidget.appendChild(statusBar);
//ADDING THE RESIZE BUTTON
resizeButton = document.createElement('div');
resizeButton.id = this.widgetID + 'RESIZE';
resizeButton.className = 'widgetStyleResizeButton';
newWidget.appendChild(resizeButton);
//ADDING THE REFRESH BUTTON
refreshButton = document.createElement('div');
refreshButton.id = this.widgetID + 'REFRESH';
refreshButton.className = 'widgetStyleRefreshButton';
newWidget.appendChild(refreshButton);
//ADDING THE LOCK BUTTON
lockButton = document.createElement('img');
lockButton.id = this.widgetID + "LOCK";
lockButton.src= "img/unlock.gif";
lockButton.className = 'widgetStyleLockButton';
newWidget.appendChild(lockButton);
//ADD TO NAVIGATION BAR
navvBar = document.createElement('div');
navvBar.className = "navBarEntry";
navvBar.id = this.widgetID + 'NAV';
navvBar.name = "WidgetNav";
navvBar.innerHTML = "<img src='" + this.icon + "' style='position: absolute; left: 3px; top: 2px; '>" + this.header;
document.getElementById('navBar').appendChild(navvBar);
selectFromNav(this.widgetID+'NAV', true);
//ATTACHING THE EVENTS
if (!document.attachEvent) {
document.getElementById(this.widgetID + "HEA").addEventListener("dblclick", function (e) { maximizeWidget(this.id);}, false);
document.getElementById(this.widgetID + "CLOSE").addEventListener("click", function (e) { closeWidget(this.id);}, false);
document.getElementById(this.widgetID + "MAX").addEventListener("click", function (e) { maximizeWidget(this.id);} , false);
document.getElementById(this.widgetID + "TRAY").addEventListener("click", function (e) { minimizeToTray(this.id);}, false);
document.getElementById(this.widgetID + "NAV").addEventListener("click", function (e) { selectFromNav(this.id);}, false);
document.getElementById(this.widgetID + "RESIZE").addEventListener("mousedown", function (e) {resizeWidget=true;}, false);
document.getElementById(this.widgetID + "REFRESH").addEventListener("click", function (e) {refreshContent(this.id)}, false);
document.getElementById(this.widgetID + "LOCK").addEventListener("click", function (e) {toggleLock(this.id)}, false);
}
else {
document.getElementById(this.widgetID + "HEA").ondblclick = function (e) { maximizeWidget(this.id);};
document.getElementById(this.widgetID + "CLOSE").onclick = function (e) { closeWidget(this.id); };
document.getElementById(this.widgetID + "MAX").onclick = function (e) { maximizeWidget(this.id); };
document.getElementById(this.widgetID + "TRAY").onclick = function (e) { minimizeToTray(this.id); };
document.getElementById(this.widgetID + "NAV").onclick = function (e) { selectFromNav(this.id); };
document.getElementById(this.widgetID + "RESIZE").onmousedown = function (e) { resizeWidget=true; };
document.getElementById(this.widgetID + "REFRESH").onclick = function (e) { refreshContent(this.id); };
document.getElementById(this.widgetID + "LOCK").onclick = function (e) { toggleLock(this.id); };
}
//MAKING THE WIDGET DRAGGABLE
makeDraggable(newWidget);
}
function closeWidget(widgetID) {
id = widgetID.substring(0, widgetID.length - 5);
document.body.removeChild(document.getElementById(id));
document.getElementById('navBar').removeChild(document.getElementById(id+ "NAV"));
}
function maximizeWidget(widgetID) {
id = widgetID.substring(0, widgetID.length - 3);
widgetID = id + "MAX";
//if widget is locked, exit this function
lockId = document.getElementById(id + "LOCK");
if (lockId.src == document.location.href + "img/lock.gif") {
alert("You can't maximize, minimize, drag or resize this widget, because the widget has been locked. Click the unlock-icon to move the widget freely.");
return false;
}
maximize = document.getElementById(widgetID).src==document.location.href + "img/maximize.gif"?true:false;
contents = id + "CONTENT";
contents = document.getElementById(contents);
widgett = document.getElementById(id);
//The actual maximizing of the widget
if (maximize) {
document.getElementById(widgetID).src = document.location.href + "img/minimize.gif";
widgett.style.left = 0;
widgett.style.top = 35;
//Setting the widget height and width to the height and width of the browser-window. Unfortunately this has to be browser-dependent.
if (window.innerWidth) {
widgett.style.width = window.innerWidth -2;
widgett.style.height = window.innerHeight -37;
contents.style.width = window.innerWidth -10;
contents.style.height = window.innerHeight - 88;
}
else{
widgett.style.width = document.body.offsetWidth-20;
widgett.style.height = document.body.offsetHeight-38;
contents.style.width = document.body.offsetWidth-28;
contents.style.height = document.body.offsetHeight-90;
}
}
//Minimizing the widget; this, again, contains a browser-dependent function;
else {
document.getElementById(widgetID).src = document.location.href + "img/maximize.gif";
widgett.style.width = customWidgetWidth;
widgett.style.height = customWidgetHeight;
if (window.innerWidth) {
widgett.style.left = window.innerWidth / 2 - parseInt(customWidgetWidth) / 2;
widgett.style.top = window.innerHeight / 2 - parseInt(customWidgetHeight) / 2;
contents.style.width = parseInt(customWidgetWidth) - 6;
contents.style.height = parseInt(customWidgetHeight) - 52;
}
else {
widgett.style.left = document.body.offsetWidth / 2 - parseInt(customWidgetWidth) / 2;
widgett.style.top = document.body.offsetHeight / 2 - parseInt(customWidgetHeight) / 2;
contents.style.width = parseInt(customWidgetWidth) - 6;
contents.style.height = parseInt(customWidgetHeight) - 52;
}
}
}
function minimizeToTray (widgetID) {
id = widgetID.substring(0, widgetID.length - 4);
document.getElementById(id).style.visibility = "hidden";
}
function makeNewWidget(link, header, width, height, maximized) {
divs =document.body.getElementsByTagName('div');
//Producing a unique new ID
x=0;
for (i = 0; i < divs.length; i++) {
if (divs[i].name == "Widget")
x++;
}
x++;
newW = new widget("Widget" + x);
if (link != null || link != "" || link != undefined) {
idW ="Widget" + x + "FRAME";
newW.content = "<iframe src='"+link+"' id='" +idW + "' width='99%' height='99%'/>";
}
else {
newW.content = "Widget Environmint version " + WEVersion;
}
newW.header = header;
if (width != null && height != null) {
newW.width = width;
newW.height = height;
}
newW.showWidget();
document.getElementById('NavMenu').style.visibility = "hidden";
document.getElementById('menuButton').style.background = "url('img/menu.gif') no-repeat";
if(maximized==true) {
maximizeWidget(newW.widgetID + "MAX");
}
}
function refreshContent(wId) {
wId = wId.substring(0, wId.length - 7);
wId += "FRAME";
document.getElementById(wId).src = document.getElementById(wId).src;
}
function toggleLock (wId) {
wId = document.getElementById(wId);
if (wId.src == document.location.href + "img/unlock.gif") {
wId.src = "img/lock.gif";
}
else {
wId.src = "img/unlock.gif";
}
}
/*
DRAG AND RESIZE FUNCTIONS
*/
function mouseMove(ev){
if (dragObject) {
lockId = document.getElementById(dragObject.id + "LOCK");
if (lockId.src == document.location.href + "img/lock.gif") {
return false;
}
}
ev = ev || window.event;
var mousePos = mouseCoords(ev);
//basic drag and drop actions
if(dragObject && !resizeWidget){
dragObject.style.position = 'absolute';
dragObject.style.top = mousePos.y - mouseOffset.y;
dragObject.style.left = mousePos.x - mouseOffset.x;
return false;
}
//resize by drag and drop
if (dragObject && resizeWidget) {
contents = document.getElementById(dragObject.id + "CONTENT");
resizeX = (mousePos.x-parseInt(dragObject.style.left) - mouseOffset.x);
resizeY = (mousePos.y - parseInt(dragObject.style.top) - mouseOffset.y);
if (parseInt(dragObject.style.width) + resizeX > parseInt(minWidgetWidth)) {
dragObject.style.width = parseInt(dragObject.style.width) + resizeX;
contents.style.width = parseInt(contents.style.width) + resizeX;
}
if (parseInt(dragObject.style.height) + resizeY > parseInt(minWidgetHeight)) {
dragObject.style.height = parseInt(dragObject.style.height) + resizeY;
contents.style.height = parseInt(contents.style.height) + resizeY;
}
mouseOffset = getMouseOffset(dragObject, ev);
}
}
function getMouseOffset(target, ev) {
//this function is needed to rectify the widget's coordinates after drag and drop
ev = ev || window.event;
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
function getPosition(e){
//this function is basically an aid to the getMouseOffset function and defines the position of the widget.
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x:left, y:top};
}
function keyDown (ev) {
//if shift is pressed and the widget is being dragged. The widget will be resized.
var unicode = ev.keyCode ? ev.keyCode : ev.charCode;
if (unicode == 16)
resizeWidget = true;
}
function keyUp (){
resizeWidget=false;
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop};
}
function mouseUp(){
dragObject = null;
resizeWidget = false;
}
function makeDraggable(item){
if(!item) return;
item.style.zIndex = '0';
item.onmousedown = function(ev){
dragObject = this;
selectFromNav(this.id + "NAV", true);
alldivs = document.body.getElementsByTagName('div')
for($i = 0; $i<alldivs.length; $i++) {
if (alldivs[$i].name == "Widget") {
alldivs[$i].style.zIndex= '0';
}
}
item.style.zIndex='1';
mouseOffset = getMouseOffset(this, ev);
return false;
}
}
/*
NAVIGATION BAR FUNCTIONS
*/
function createNavBar () {
//ADD THE NAVBAR
navbar = document.createElement('div');
navbar.id = "navBar";
navbar.className = 'navigationBar';
if (window.innerWidth) {
navbar.style.width = window.innerWidth;
}
else{
navbar.style.width = document.body.offsetWidth-21;
}
navbar.style.top = 0;
navbar.style.left = 0;
navbar.style.height = "40px";
document.body.appendChild(navbar);
//ADD THE MENU
menuButton = document.createElement('div');
menuButton.id = 'menuButton';
menuButton.className= 'menuButton';
navbar.appendChild(menuButton);
//ADD FOOTER
footer = document.createElement('div');
footer.className = 'footer';
footer.innerHTML = 'powered by: <a onclick="makeNewWidget(\'about.html\', \'Onderstekop.nl\');">Widget Environment</a> ' + WEVersion;
document.body.appendChild(footer);
if(!document.attachEvent) {
menuButton.addEventListener('click', function () {showMenu();}, false);
}
else {
menuButton.attachEvent('onclick', function () {showMenu();});
}
}
function selectFromNav (widgetID, newWW) {
currentFront = false;
allNavs = document.getElementById('navBar').getElementsByTagName('div');
for ($i = 0; $i < allNavs.length; $i++){
if (allNavs[$i].style.zIndex == 1 && newWW == undefined) {
currentFront = (allNavs[$i].id).substring(0, (allNavs[$i].id).length - 3);
}
if(allNavs[$i].name == "WidgetNav") {
allNavs[$i].style.background = '#0000F0';
allNavs[$i].style.zIndex = 0;
}
if (allNavs[$i].id ==widgetID&& !currentFront) {
allNavs[$i].style.background = '#000080';
allNavs[$i].style.zIndex = 1;
}
}
widgetID = widgetID.substring(0, widgetID.length - 3);
widgets = document.body.getElementsByTagName('div');
for (i =0; i < widgets.length; i++) {
if (widgets[i].name == "Widget") {
widgets[i].style.zIndex=0;
}
if (widgets[i].id == widgetID) {
if (widgets[i].id == currentFront)
widgets[i].style.visibility = "hidden";
else {
widgets[i].style.visibility = "visible";
widgets[i].style.zIndex=1;
}
}
}
}
function showMenu () {
if (document.getElementById('NavMenu').style.visibility != "visible") {
document.getElementById('NavMenu').style.visibility = "visible";
document.getElementById('menuButton').style.background = "url('img/menuopen.gif') no-repeat";
}
else {
document.getElementById('NavMenu').style.visibility = "hidden";
document.getElementById('menuButton').style.background = "url('img/menu.gif') no-repeat";
}
subnavs = document.getElementById('NavMenu').getElementsByTagName('ul');
for (i =0; i < subnavs.length; i++) {
subnavs[i].style.position = "absolute";
subnavs[i].style.left= "-999em";
}
}
function showSubNav(subID) {
subnavs = document.getElementById('NavMenu').getElementsByTagName('ul');
for (i =0; i < subnavs.length; i++) {
subnavs[i].style.position = "absolute";
subnavs[i].style.left= "-999em";
}
if(document.getElementById(subID)) {
sub = document.getElementById(subID).style;
sub.position = "absolute";
if(!document.attachEvent) {
sub.left = "133px";
}
else{
sub.left = "110px";
}
}
}
/*
ICON FUNCTIONS
*/
function addIcon (sourceImg, imgL, imgT, iconCaption, iconLink) {
newIcon = document.createElement("img");
newIcon.src = sourceImg;
newIcon.style.border =0;
newCaption = document.createElement("div");
newCaption.className = "icon";
newCaption.style.left = imgL;
newCaption.style.top = imgT;
newCaption.innerHTML += "<a style='text-decoration:underline; cursor: pointer; ' onclick='makeNewWidget(\"" + iconLink + "\", \"" + iconCaption + "\")'><img src='" + sourceImg +"' style='border: 0;'/><br/><span name='IconCaption'>" + iconCaption + "</span></a>";
document.body.appendChild(newCaption);
}