alvinalexander.com | career | drupal | java | mac | mysql | perl | scala | uml | unix  

Struts example source code file (FisheyeList.js)

This example Struts source code file (FisheyeList.js) is included in the DevDaily.com "Java Source Code Warehouse" project. The intent of this project is to help you "Learn Java by Example" TM.

Java - Struts tags/keywords

arial, arial, bottom:4, center:0, helvetica, helvetica, left:1, left:1, right:2, right:2, top:3

The Struts FisheyeList.js source code

/*
	Copyright (c) 2004-2006, The Dojo Foundation
	All Rights Reserved.

	Licensed under the Academic Free License version 2.1 or above OR the
	modified BSD license. For more information on Dojo licensing, see:

		http://dojotoolkit.org/community/licensing.shtml
*/



dojo.provide("dojo.widget.FisheyeList");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.HtmlWidget");
dojo.require("dojo.html.style");
dojo.require("dojo.html.selection");
dojo.require("dojo.html.util");
dojo.require("dojo.event.*");
dojo.widget.defineWidget("dojo.widget.FisheyeList", dojo.widget.HtmlWidget, function () {
	this.pos = {x:-1, y:-1};
	this.EDGE = {CENTER:0, LEFT:1, RIGHT:2, TOP:3, BOTTOM:4};
	this.timerScale = 1;
}, {templateString:"<div class=\"dojoHtmlFisheyeListBar\">
", templateCssString:".dojoHtmlFisheyeListItemLabel {\n\tfont-family: Arial, Helvetica, sans-serif;\n\tbackground-color: #eee;\n\tborder: 2px solid #666;\n\tpadding: 2px;\n\ttext-align: center;\n\tposition: absolute;\n\tdisplay: none;\n}\n\n.dojoHtmlFisheyeListItemLabel.selected {\n\tdisplay: block;\n}\n\n.dojoHtmlFisheyeListItemImage {\n\tborder: 0px;\n\tposition: absolute;\n}\n\n.dojoHtmlFisheyeListItem {\n\tposition: absolute;\n\tz-index: 2;\n}\n\n.dojoHtmlFisheyeListBar {\n\tposition: relative;\n}\n", templateCssPath:dojo.uri.moduleUri("dojo.widget", "templates/FisheyeList.css"), isContainer:true, snarfChildDomOutput:true, itemWidth:40, itemHeight:40, itemMaxWidth:150, itemMaxHeight:150, orientation:"horizontal", conservativeTrigger:false, effectUnits:2, itemPadding:10, attachEdge:"center", labelEdge:"bottom", enableCrappySvgSupport:false, fillInTemplate:function () { dojo.html.disableSelection(this.domNode); this.isHorizontal = (this.orientation == "horizontal"); this.selectedNode = -1; this.isOver = false; this.hitX1 = -1; this.hitY1 = -1; this.hitX2 = -1; this.hitY2 = -1; this.anchorEdge = this._toEdge(this.attachEdge, this.EDGE.CENTER); this.labelEdge = this._toEdge(this.labelEdge, this.EDGE.TOP); if (this.isHorizontal && (this.anchorEdge == this.EDGE.LEFT)) { this.anchorEdge = this.EDGE.CENTER; } if (this.isHorizontal && (this.anchorEdge == this.EDGE.RIGHT)) { this.anchorEdge = this.EDGE.CENTER; } if (!this.isHorizontal && (this.anchorEdge == this.EDGE.TOP)) { this.anchorEdge = this.EDGE.CENTER; } if (!this.isHorizontal && (this.anchorEdge == this.EDGE.BOTTOM)) { this.anchorEdge = this.EDGE.CENTER; } if (this.labelEdge == this.EDGE.CENTER) { this.labelEdge = this.EDGE.TOP; } if (this.isHorizontal && (this.labelEdge == this.EDGE.LEFT)) { this.labelEdge = this.EDGE.TOP; } if (this.isHorizontal && (this.labelEdge == this.EDGE.RIGHT)) { this.labelEdge = this.EDGE.TOP; } if (!this.isHorizontal && (this.labelEdge == this.EDGE.TOP)) { this.labelEdge = this.EDGE.LEFT; } if (!this.isHorizontal && (this.labelEdge == this.EDGE.BOTTOM)) { this.labelEdge = this.EDGE.LEFT; } this.proximityLeft = this.itemWidth * (this.effectUnits - 0.5); this.proximityRight = this.itemWidth * (this.effectUnits - 0.5); this.proximityTop = this.itemHeight * (this.effectUnits - 0.5); this.proximityBottom = this.itemHeight * (this.effectUnits - 0.5); if (this.anchorEdge == this.EDGE.LEFT) { this.proximityLeft = 0; } if (this.anchorEdge == this.EDGE.RIGHT) { this.proximityRight = 0; } if (this.anchorEdge == this.EDGE.TOP) { this.proximityTop = 0; } if (this.anchorEdge == this.EDGE.BOTTOM) { this.proximityBottom = 0; } if (this.anchorEdge == this.EDGE.CENTER) { this.proximityLeft /= 2; this.proximityRight /= 2; this.proximityTop /= 2; this.proximityBottom /= 2; } }, postCreate:function () { this._initializePositioning(); if (!this.conservativeTrigger) { dojo.event.connect(document.documentElement, "onmousemove", this, "_onMouseMove"); } dojo.event.connect(document.documentElement, "onmouseout", this, "_onBodyOut"); dojo.event.connect(this, "addChild", this, "_initializePositioning"); }, _initializePositioning:function () { this.itemCount = this.children.length; this.barWidth = (this.isHorizontal ? this.itemCount : 1) * this.itemWidth; this.barHeight = (this.isHorizontal ? 1 : this.itemCount) * this.itemHeight; this.totalWidth = this.proximityLeft + this.proximityRight + this.barWidth; this.totalHeight = this.proximityTop + this.proximityBottom + this.barHeight; for (var i = 0; i < this.children.length; i++) { this.children[i].posX = this.itemWidth * (this.isHorizontal ? i : 0); this.children[i].posY = this.itemHeight * (this.isHorizontal ? 0 : i); this.children[i].cenX = this.children[i].posX + (this.itemWidth / 2); this.children[i].cenY = this.children[i].posY + (this.itemHeight / 2); var isz = this.isHorizontal ? this.itemWidth : this.itemHeight; var r = this.effectUnits * isz; var c = this.isHorizontal ? this.children[i].cenX : this.children[i].cenY; var lhs = this.isHorizontal ? this.proximityLeft : this.proximityTop; var rhs = this.isHorizontal ? this.proximityRight : this.proximityBottom; var siz = this.isHorizontal ? this.barWidth : this.barHeight; var range_lhs = r; var range_rhs = r; if (range_lhs > c + lhs) { range_lhs = c + lhs; } if (range_rhs > (siz - c + rhs)) { range_rhs = siz - c + rhs; } this.children[i].effectRangeLeft = range_lhs / isz; this.children[i].effectRangeRght = range_rhs / isz; } this.domNode.style.width = this.barWidth + "px"; this.domNode.style.height = this.barHeight + "px"; for (var i = 0; i < this.children.length; i++) { var itm = this.children[i]; var elm = itm.domNode; elm.style.left = itm.posX + "px"; elm.style.top = itm.posY + "px"; elm.style.width = this.itemWidth + "px"; elm.style.height = this.itemHeight + "px"; if (itm.svgNode) { itm.svgNode.style.position = "absolute"; itm.svgNode.style.left = this.itemPadding + "%"; itm.svgNode.style.top = this.itemPadding + "%"; itm.svgNode.style.width = (100 - 2 * this.itemPadding) + "%"; itm.svgNode.style.height = (100 - 2 * this.itemPadding) + "%"; itm.svgNode.style.zIndex = 1; itm.svgNode.setSize(this.itemWidth, this.itemHeight); } else { itm.imgNode.style.left = this.itemPadding + "%"; itm.imgNode.style.top = this.itemPadding + "%"; itm.imgNode.style.width = (100 - 2 * this.itemPadding) + "%"; itm.imgNode.style.height = (100 - 2 * this.itemPadding) + "%"; } } this._calcHitGrid(); }, _onBodyOut:function (e) { if (dojo.html.overElement(dojo.body(), e)) { return; } this._setDormant(e); }, _setDormant:function (e) { if (!this.isOver) { return; } this.isOver = false; if (this.conservativeTrigger) { dojo.event.disconnect(document.documentElement, "onmousemove", this, "_onMouseMove"); } this._onGridMouseMove(-1, -1); }, _setActive:function (e) { if (this.isOver) { return; } this.isOver = true; if (this.conservativeTrigger) { dojo.event.connect(document.documentElement, "onmousemove", this, "_onMouseMove"); this.timerScale = 0; this._onMouseMove(e); this._expandSlowly(); } }, _onMouseMove:function (e) { if ((e.pageX >= this.hitX1) && (e.pageX <= this.hitX2) && (e.pageY >= this.hitY1) && (e.pageY <= this.hitY2)) { if (!this.isOver) { this._setActive(e); } this._onGridMouseMove(e.pageX - this.hitX1, e.pageY - this.hitY1); } else { if (this.isOver) { this._setDormant(e); } } }, onResized:function () { this._calcHitGrid(); }, _onGridMouseMove:function (x, y) { this.pos = {x:x, y:y}; this._paint(); }, _paint:function () { var x = this.pos.x; var y = this.pos.y; if (this.itemCount <= 0) { return; } var pos = this.isHorizontal ? x : y; var prx = this.isHorizontal ? this.proximityLeft : this.proximityTop; var siz = this.isHorizontal ? this.itemWidth : this.itemHeight; var sim = this.isHorizontal ? (1 - this.timerScale) * this.itemWidth + this.timerScale * this.itemMaxWidth : (1 - this.timerScale) * this.itemHeight + this.timerScale * this.itemMaxHeight; var cen = ((pos - prx) / siz) - 0.5; var max_off_cen = (sim / siz) - 0.5; if (max_off_cen > this.effectUnits) { max_off_cen = this.effectUnits; } var off_weight = 0; if (this.anchorEdge == this.EDGE.BOTTOM) { var cen2 = (y - this.proximityTop) / this.itemHeight; off_weight = (cen2 > 0.5) ? 1 : y / (this.proximityTop + (this.itemHeight / 2)); } if (this.anchorEdge == this.EDGE.TOP) { var cen2 = (y - this.proximityTop) / this.itemHeight; off_weight = (cen2 < 0.5) ? 1 : (this.totalHeight - y) / (this.proximityBottom + (this.itemHeight / 2)); } if (this.anchorEdge == this.EDGE.RIGHT) { var cen2 = (x - this.proximityLeft) / this.itemWidth; off_weight = (cen2 > 0.5) ? 1 : x / (this.proximityLeft + (this.itemWidth / 2)); } if (this.anchorEdge == this.EDGE.LEFT) { var cen2 = (x - this.proximityLeft) / this.itemWidth; off_weight = (cen2 < 0.5) ? 1 : (this.totalWidth - x) / (this.proximityRight + (this.itemWidth / 2)); } if (this.anchorEdge == this.EDGE.CENTER) { if (this.isHorizontal) { off_weight = y / (this.totalHeight); } else { off_weight = x / (this.totalWidth); } if (off_weight > 0.5) { off_weight = 1 - off_weight; } off_weight *= 2; } for (var i = 0; i < this.itemCount; i++) { var weight = this._weighAt(cen, i); if (weight < 0) { weight = 0; } this._setItemSize(i, weight * off_weight); } var main_p = Math.round(cen); var offset = 0; if (cen < 0) { main_p = 0; } else { if (cen > this.itemCount - 1) { main_p = this.itemCount - 1; } else { offset = (cen - main_p) * ((this.isHorizontal ? this.itemWidth : this.itemHeight) - this.children[main_p].sizeMain); } } this._positionElementsFrom(main_p, offset); }, _weighAt:function (cen, i) { var dist = Math.abs(cen - i); var limit = ((cen - i) > 0) ? this.children[i].effectRangeRght : this.children[i].effectRangeLeft; return (dist > limit) ? 0 : (1 - dist / limit); }, _setItemSize:function (p, scale) { scale *= this.timerScale; var w = Math.round(this.itemWidth + ((this.itemMaxWidth - this.itemWidth) * scale)); var h = Math.round(this.itemHeight + ((this.itemMaxHeight - this.itemHeight) * scale)); if (this.isHorizontal) { this.children[p].sizeW = w; this.children[p].sizeH = h; this.children[p].sizeMain = w; this.children[p].sizeOff = h; var y = 0; if (this.anchorEdge == this.EDGE.TOP) { y = (this.children[p].cenY - (this.itemHeight / 2)); } else { if (this.anchorEdge == this.EDGE.BOTTOM) { y = (this.children[p].cenY - (h - (this.itemHeight / 2))); } else { y = (this.children[p].cenY - (h / 2)); } } this.children[p].usualX = Math.round(this.children[p].cenX - (w / 2)); this.children[p].domNode.style.top = y + "px"; this.children[p].domNode.style.left = this.children[p].usualX + "px"; } else { this.children[p].sizeW = w; this.children[p].sizeH = h; this.children[p].sizeOff = w; this.children[p].sizeMain = h; var x = 0; if (this.anchorEdge == this.EDGE.LEFT) { x = this.children[p].cenX - (this.itemWidth / 2); } else { if (this.anchorEdge == this.EDGE.RIGHT) { x = this.children[p].cenX - (w - (this.itemWidth / 2)); } else { x = this.children[p].cenX - (w / 2); } } this.children[p].domNode.style.left = x + "px"; this.children[p].usualY = Math.round(this.children[p].cenY - (h / 2)); this.children[p].domNode.style.top = this.children[p].usualY + "px"; } this.children[p].domNode.style.width = w + "px"; this.children[p].domNode.style.height = h + "px"; if (this.children[p].svgNode) { this.children[p].svgNode.setSize(w, h); } }, _positionElementsFrom:function (p, offset) { var pos = 0; if (this.isHorizontal) { pos = Math.round(this.children[p].usualX + offset); this.children[p].domNode.style.left = pos + "px"; } else { pos = Math.round(this.children[p].usualY + offset); this.children[p].domNode.style.top = pos + "px"; } this._positionLabel(this.children[p]); var bpos = pos; for (var i = p - 1; i >= 0; i--) { bpos -= this.children[i].sizeMain; if (this.isHorizontal) { this.children[i].domNode.style.left = bpos + "px"; } else { this.children[i].domNode.style.top = bpos + "px"; } this._positionLabel(this.children[i]); } var apos = pos; for (var i = p + 1; i < this.itemCount; i++) { apos += this.children[i - 1].sizeMain; if (this.isHorizontal) { this.children[i].domNode.style.left = apos + "px"; } else { this.children[i].domNode.style.top = apos + "px"; } this._positionLabel(this.children[i]); } }, _positionLabel:function (itm) { var x = 0; var y = 0; var mb = dojo.html.getMarginBox(itm.lblNode); if (this.labelEdge == this.EDGE.TOP) { x = Math.round((itm.sizeW / 2) - (mb.width / 2)); y = -mb.height; } if (this.labelEdge == this.EDGE.BOTTOM) { x = Math.round((itm.sizeW / 2) - (mb.width / 2)); y = itm.sizeH; } if (this.labelEdge == this.EDGE.LEFT) { x = -mb.width; y = Math.round((itm.sizeH / 2) - (mb.height / 2)); } if (this.labelEdge == this.EDGE.RIGHT) { x = itm.sizeW; y = Math.round((itm.sizeH / 2) - (mb.height / 2)); } itm.lblNode.style.left = x + "px"; itm.lblNode.style.top = y + "px"; }, _calcHitGrid:function () { var pos = dojo.html.getAbsolutePosition(this.domNode, true); this.hitX1 = pos.x - this.proximityLeft; this.hitY1 = pos.y - this.proximityTop; this.hitX2 = this.hitX1 + this.totalWidth; this.hitY2 = this.hitY1 + this.totalHeight; }, _toEdge:function (inp, def) { return this.EDGE[inp.toUpperCase()] || def; }, _expandSlowly:function () { if (!this.isOver) { return; } this.timerScale += 0.2; this._paint(); if (this.timerScale < 1) { dojo.lang.setTimeout(this, "_expandSlowly", 10); } }, destroy:function () { dojo.event.disconnect(document.documentElement, "onmouseout", this, "_onBodyOut"); dojo.event.disconnect(document.documentElement, "onmousemove", this, "_onMouseMove"); dojo.widget.FisheyeList.superclass.destroy.call(this); }}); dojo.widget.defineWidget("dojo.widget.FisheyeListItem", dojo.widget.HtmlWidget, {iconSrc:"", svgSrc:"", caption:"", id:"", _blankImgPath:dojo.uri.moduleUri("dojo.widget", "templates/images/blank.gif"), templateString:"<div class=\"dojoHtmlFisheyeListItem\">" + " " + "
" + "", fillInTemplate:function () { if (this.svgSrc != "") { this.svgNode = this._createSvgNode(this.svgSrc); this.domNode.appendChild(this.svgNode); this.imgNode.style.display = "none"; } else { if ((this.iconSrc.toLowerCase().substring(this.iconSrc.length - 4) == ".png") && (dojo.render.html.ie) && (!dojo.render.html.ie70)) { if (dojo.dom.hasParent(this.imgNode) && this.id != "") { var parent = this.imgNode.parentNode; parent.setAttribute("id", this.id); } this.imgNode.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.iconSrc + "', sizingMethod='scale')"; this.imgNode.src = this._blankImgPath.toString(); } else { if (dojo.dom.hasParent(this.imgNode) && this.id != "") { var parent = this.imgNode.parentNode; parent.setAttribute("id", this.id); } this.imgNode.src = this.iconSrc; } } if (this.lblNode) { this.lblNode.appendChild(document.createTextNode(this.caption)); } dojo.html.disableSelection(this.domNode); }, _createSvgNode:function (src) { var elm = document.createElement("embed"); elm.src = src; elm.type = "image/svg+xml"; elm.style.width = "1px"; elm.style.height = "1px"; elm.loaded = 0; elm.setSizeOnLoad = false; elm.onload = function () { this.svgRoot = this.getSVGDocument().rootElement; this.svgDoc = this.getSVGDocument().documentElement; this.zeroWidth = this.svgRoot.width.baseVal.value; this.zeroHeight = this.svgRoot.height.baseVal.value; this.loaded = true; if (this.setSizeOnLoad) { this.setSize(this.setWidth, this.setHeight); } }; elm.setSize = function (w, h) { if (!this.loaded) { this.setWidth = w; this.setHeight = h; this.setSizeOnLoad = true; return; } this.style.width = w + "px"; this.style.height = h + "px"; this.svgRoot.width.baseVal.value = w; this.svgRoot.height.baseVal.value = h; var scale_x = w / this.zeroWidth; var scale_y = h / this.zeroHeight; for (var i = 0; i < this.svgDoc.childNodes.length; i++) { if (this.svgDoc.childNodes[i].setAttribute) { this.svgDoc.childNodes[i].setAttribute("transform", "scale(" + scale_x + "," + scale_y + ")"); } } }; return elm; }, onMouseOver:function (e) { if (!this.parent.isOver) { this.parent._setActive(e); } if (this.caption != "") { dojo.html.addClass(this.lblNode, "selected"); this.parent._positionLabel(this); } }, onMouseOut:function (e) { dojo.html.removeClass(this.lblNode, "selected"); }, onClick:function (e) { }});

Other Struts examples (source code examples)

Here is a short list of links related to this Struts FisheyeList.js source code file:

... this post is sponsored by my books ...

#1 New Release!

FP Best Seller

 

new blog posts

 

Copyright 1998-2021 Alvin Alexander, alvinalexander.com
All Rights Reserved.

A percentage of advertising revenue from
pages under the /java/jwarehouse URI on this website is
paid back to open source projects.