fisheyelist.js

初学者

/*
	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\"></div>", 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;