silverna-packs.js

《JavaScript王者归来》examples.rar

						this.activeActionList[actionIdx].push($pointer.addEventListener(action.type, action.handler));
					}
					else{
						this.knobs.each(function(knob, i){
							var active = knob.addEventListener(action.type, action.handler, false, $pointer,{knob:knob, panel:panel});
							active.knob = knob;
							$pointer.activeActionList[actionIdx].push(active);
						});
					}
				}
			}
			else
			{
				this.actionList.each(function(x, i){
					$pointer.active(i);
				});
			}
		}
		//停止Behavior的活动
		Behavior.prototype.stop = function(actionIdx)
		{
			var $pointer = this;
			if(actionIdx != null)
			{
				var action = this.actionList[actionIdx];
				var active = this.activeActionList[actionIdx];

				if(active)
				{
					active.each(function(active){
						if(action.userAction)
						{
							$pointer.removeEventListener(action.type, active);
						}
						else if(active.knob)
							active.knob.removeEventListener(action.type, active, false);
					});
					this.activeActionList[actionIdx].length = 0;
				}
			}
			else
			{
				this.actionList.each(function(x, i){
					$pointer.stop(i);
				});
			}
		}
		ClickBehavior = function()
		{
			Behavior.call(this);

			this.addAction("click", "onclick");
			this.addAction("dblclick", "ondblclick");
			this.addUserAction("disable", "ondisable");
			this.addUserAction("enable", "onenable");
		}
		ClickBehavior.prototype = new Behavior();
		ClickBehavior.prototype.ondisable = function(evt)
		{
			var knob = this.knobs[evt.index];
			this.activeColor = knob.el.style.color;
			knob.setFontColor("#808080");
			this.stop(0);
		}
		ClickBehavior.prototype.onenable = function(evt)
		{
			var knob = this.knobs[evt.index];
			knob.setFontColor(this.activeColor);
			this.active(0);
		}


		HoverBehavior = function()
		{
			Behavior.call(this);

			this.addAction("mouseover", "hoverIn");		
			this.addAction("mouseout", "hoverOut");
			this.addAction("mousedown", "hoverDown");
			this.addAction("mousedown", "hoverUp");
		}
		HoverBehavior.prototype = new Behavior();

		SelectBehavior = function()
		{
			Behavior.call(this);

			this.addAction("select", "onselect");
			this.addAction("change", "onchange");
			this.addUserAction("disable", "ondisable");
			this.addUserAction("enable", "onenable");
		}
		SelectBehavior.prototype = new Behavior();
		SelectBehavior.prototype.ondisable = function(evt)
		{
			var knob = this.knobs[evt.index];
			this.activeColor = knob.el.style.color;
			knob.setFontColor("#808080");
			this.stop(0);
		}
		SelectBehavior.prototype.onenable = function(evt)
		{
			var knob = this.knobs[evt.index];
			knob.setFontColor(this.activeColor);
			this.active(0);
		}

		DragBehavior = function()
		{
			Behavior.call(this);

			this.addAction("mousedown", "dragstart");		
			this.addAction("mouseup", "dragend");
			this.addAction("mousemove", "drag");

			this._shadow = null; //拖动时复制的“影子”knob
			this.shadow = 0;  //拖动时是否有“影子” 0 - 100 影子的深度
			this.droppable = true;  //是否可以放置在当前位置
			
			//拖动模式，分为实模式real和虚模式virtual
			//虚模式下，拖动的物件只显示出外框
			this.dragMode = "real";
		}
		DragBehavior._iframe = null; //用来覆盖select框的iframe
		DragBehavior.prototype = new Behavior();
		DragBehavior.prototype.rangeX = {
			start: 0, end: Infinity
		}
		DragBehavior.prototype.rangeY = {
			start: 0, end: Infinity
		}
		DragBehavior.prototype.precision = 1;

		DragBehavior.prototype.floating = {x : 0, y : 0}; //浮动偏移量

		DragBehavior.prototype.setRangeX = function(startX, endX)
		{
			this.rangeX = {start:startX, end: endX};
		}
		DragBehavior.prototype.setRangeY = function(startY, endY)
		{
			this.rangeY = {start:startY, end: endY};
		}
		DragBehavior.prototype.setRangeXBy = function(startX, endX)
		{
			var panel = this.panel || this.knobs[0];
			var pos = panel.getAbsPosition();
			this.rangeX = {start:pos.x + startX, end: pos.x + endX};
		}
		DragBehavior.prototype.setRangeYBy = function(startY, endY)
		{
			var panel = this.panel || this.knobs[0];
			var pos = panel.getAbsPosition();
			this.rangeY = {start:pos.y + startY, end: pos.y + endY};
		}
		DragBehavior.prototype.setGrid = function(precision)
		{
			this.precision = precision;
		}
		DragBehavior.prototype.getFloatingPos = function()
		{
			return this.floating;
		}

		DragBehavior.prototype.tempIFM = function()
		{
			if(!DragBehavior._iframe)
			{
				DragBehavior._iframe = $html("iframe");
				DragBehavior._iframe.el.id = "temp_iframe" + Math.random();
				DragBehavior._iframe.setAttribute("name",DragBehavior._iframe.el.id);
				DragBehavior._iframe.el.style.filter="alpha(opacity=0)";
				DragBehavior._iframe.el.style.opacity = "0";
				DragBehavior._iframe.el.style.position = "absolute";
				DragBehavior._iframe.el.style.top = "0px";
				DragBehavior._iframe.el.style.left = "0px";
				DragBehavior._iframe.el.style.width = "100%";
				DragBehavior._iframe.el.style.height = "100%";
				DragBehavior._iframe.setAttribute("frameborder",0);
				DragBehavior._iframe.setAttribute("border",0);
			}
			DragBehavior._iframe.focus();
			return DragBehavior._iframe.el;
		}
		//分派ondragend事件，layerX,layerY是drag的时候的鼠标相对于被拖动对象坐标
		//pageX、pageY是drag的时候鼠标相对于页面文档的坐标
		//panel是拖动的dom对象，shadow是“影子”
		DragBehavior.prototype.dragstart = function(evt)
		{	
			if(evt.leftButton())
			{
				var knob = evt.knob; 
				var panel = evt.panel || knob;
				var pos = panel.getAbsPosition();
				if(!$isIE7()) $body().appendChild(this.tempIFM());
				panel.focus();
	
				if(!this._shadow && this.shadow > 0)
				{
					this._shadow = panel.el.cloneNode(true);
					this._shadow.id = "";
					this._shadow.style.filter="alpha(opacity="+this.shadow+")";
					this._shadow.style.opacity = this.shadow;
					if(!this._position) this._position = this._shadow.style.position;
					panel.el.parentNode.insertBefore(this._shadow,panel.el);
				}

				knob.setCapture();				
				panel.setAbsPosition(pos.x, pos.y);	
				//MK-Shadow
				this.offsetX = evt.pageX - pos.x;
				this.offsetY = evt.pageY - pos.y;
				this.posX = pos.x;
				this.posY = pos.y;
				this.offsetLeft = this.offsetX;
				this.offsetTop = this.offsetY;
				this.offsetRight = parseInt(panel.el.clientWidth) - evt.pageX;
				this.offsetBottom = parseInt(panel.el.clientHeight) - evt.pageY;
				this.active(1);		
				this.active(2);

				var mousePos = core.web.HTMLElement.getMousePosition(evt);
				var eventArgs = {knob:knob, layerX:this.offsetX, layerY:this.offsetY, pageX:evt.pageX, pageY:evt.pageY, target:panel.el, shadow:this._shadow}
				this.dispatchEvent("dragstart",eventArgs);
			}
		}
		//分派ondragend事件，layerX,layerY是drag的时候的鼠标相对于被拖动对象坐标
		//pageX、pageY是drag的时候鼠标相对于页面文档的坐标
		//panel是拖动的dom对象，shadow是“影子”
		DragBehavior.prototype.dragend = function(evt)
		{
			if(evt.leftButton())
			{
				var knob = evt.knob;
				var panel = evt.panel || knob;
				if(this._shadow)
				{
					if(!this.droppable)
					{
						var pos = $html(this._shadow).getAbsPosition();
						panel.setAbsPosition(pos.x, pos.y);
						panel.el.style.position = this._position;
						this._shadow.parentNode.insertBefore(panel.el,this._shadow);
					}
					this._shadow.parentNode.removeChild(this._shadow);
					$trash(this._shadow = null);
				}
				if(this.dragMode == "virtual")
				{
					panel.showChildren();
					if(panel.getAttribute("borderStyle")!=null) 
						panel.el.style.border = panel.getAttribute("borderStyle");
					panel.setAttribute("borderStyle",null);
				}
				
				var _tempIFM = $id(this.tempIFM().id);
				if(_tempIFM){
					$body().removeChild(_tempIFM);
					$trash(_tempIFM == null);
				}

				knob.releaseCapture();
				this.stop(2);

				var mousePos = core.web.HTMLElement.getMousePosition(evt);
				var eventArgs = {knob:knob, layerX:this.offsetX, layerY:this.offsetY, pageX:evt.pageX, pageY:evt.pageY, target:panel.el, shadow:this._shadow}
				this.dispatchEvent("dragend",eventArgs);
			}
		}
		//分派ondrag事件，layerX,layerY是drag的时候的鼠标相对于被拖动对象坐标
		//pageX、pageY是drag的时候鼠标相对于页面文档的坐标
		//panel是拖动的dom对象，shadow是“影子”
		DragBehavior.prototype.drag = function(evt)
		{
			var knob = evt.knob;
			var panel = evt.panel || knob;
			var lx = evt.pageX - this.offsetX;
			var ly = evt.pageY - this.offsetY;
			if(this.dragMode == "virtual" && panel.hideChildren())
			{
				if(!panel.getAttribute("borderStyle"))
					panel.setAttribute("borderStyle", panel.el.style.border || '');
				panel.el.style.border = "dotted 1px #999999";
			}
			lx = lx > this.rangeX.start ? lx : this.rangeX.start;
			lx = lx < this.rangeX.end ? lx : this.rangeX.end;
			ly = ly > this.rangeY.start ? ly : this.rangeY.start;
			ly = ly < this.rangeY.end ? ly : this.rangeY.end;
			lx = lx > 0?lx: 0;
			ly = ly > 0?ly: 0;
			lx = Math.round(lx / this.precision) * this.precision;
			ly = Math.round(ly / this.precision) * this.precision;

			var eventArgs = {knob:knob, layerX:this.offsetX, layerY:this.offsetY, pageX:evt.pageX, pageY:evt.pageY, target:panel.el, shadow:this._shadow}
			eventArgs.defaultOp = function(){
				panel.setAbsPosition(lx, ly);
			}	
			this.dispatchEvent("drag",eventArgs);
		}
		DragBehavior.prototype.activeIdx = DragBehavior.prototype.active;
		DragBehavior.prototype.active = function(idx)
		{
			if(idx) this.activeIdx(idx);
			else{
				this.activeIdx(0);
			}
		}
	}
	with(adorners)
	{
		//Adorner 是一个抽象的“装饰”原型，它抽象的是页面上的“外观”，或者我们叫它“控制区域”、“热点”
		//Adorner构造函数
		Adorner = function()
		{
			this.behaviorList = [];
			core.events.EventManager.apply(this);
		}

		//得到某种外部资源的路径，例如图片等
		Adorner.prototype.resource = function(name){
			if(name) 
				return $root() + "_resource/" + name;
			return null;
		}
		//显示装饰件
		Adorner.prototype.show = $abstract;
		//隐藏装饰件
		Adorner.prototype.hide = $abstract;
		//装载装饰件 · Widget.setupAll的时候将会自动调用此方法
		Adorner.prototype.load = $abstract;
		//装载完成之后将会触发onload事件
		Adorner.prototype.onload = $void; 

		Adorner.prototype.addBehaviors = function()
		{
			return this.behaviorList.push.apply(this.behaviorList, arguments);
		}
		Adorner.prototype.addBehavior = function(behavior, behaviorHdl, evtArgs)
		{
			var $pointer = this;
			this.behaviorList.push(behavior);

			if(behaviorHdl)
			{
				setTimeout(function(){
					behaviorHdl.call($pointer, evtArgs)}, 1);
			}
			return behavior;
		}
		Adorner.prototype.activeAll = function()
		{
			this.behaviorList.each(function(b){
				b.active();
			});
		}
		Adorner.prototype.stopAll = function()
		{
			this.behaviorList.each(function(b){
				b.stop();
			});
		}
	}
	//提供可扩展的Widget接口，一个Widget由一组Adorners组成
	//Widget的基类构造函数，构造一个Widget，扩展Widget类型，调用这个构造函数
	Widget = function()
	{
		this.adornerList = [];						//adornerList，一个Widget由多个adorners组成
		core.events.EventManager.apply(this);		//Event通用原型
	}
	
	//将Adorner添加到Widget列表
	Widget.prototype.addAdorner = function(adorner)
	{
		this.adornerList.push.apply(this.adornerList, arguments);
	}
	//获得第一个Adorner引用
	Widget.prototype.firstAdorner = function()
	{
		return this.adornerList[this.adornerList.length - 1];
	}

	//装载Widget的Adorners外观·不建议重载此方法
	Widget.prototype.load = function(face){
		var faces = face.getElementsByTagName("face");
		if(!faces.length)
			faces = face.getElementsByTagName("silverna:face");

		var $pointer = this;
		if(faces.length > 0)
		{			
			for(var i = this.adornerList.length - 1; i >= 0; i--)
			{
				var _f = faces[i];
				this.adornerList[i].skin = this.adornerList[i].load(_f, face);
				//restore trashes
				$trash(_f);
			}
		}
		else
		{
			if(this.firstAdorner())
			{		
				this.adornerList[0].skin = this.firstAdorner().load(face);
				//restore trashes
				$trash(face);
			}
		}
	}

	//获取并解析页面上所有的Widgets
	Widget.setupAll = function()
	{
		var widgets = $(document.getElementsByTagName("widget"));

		if(!widgets.length)
			widgets = document.getElementsByTagName("silverna:widget");
		
		for(var i = 0; i < widgets.length; i++)
		{
			Widget.setup(widgets[i].id);
		}
	}

	//根据ID获取并解析页面上的Widget
	Widget.setup = function(id)
	{
		var wf = $(id);
		var widgetType = $require(wf.getAttribute("type"));

		var widget = new widgetType();
		widget.load(wf);
		return widget;
	}	
}