From e44a7e37b6c7b5961adaffc62b9042b8d442938e Mon Sep 17 00:00:00 2001
From: mensonge
Date: Thu, 13 Nov 2008 09:49:11 +0000
Subject: New feature: basic Ajax suggestion for tags and implementation of
 Dojo toolkit

git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
---
 includes/js/dijit/ColorPalette.js | 292 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 292 insertions(+)
 create mode 100644 includes/js/dijit/ColorPalette.js

(limited to 'includes/js/dijit/ColorPalette.js')

diff --git a/includes/js/dijit/ColorPalette.js b/includes/js/dijit/ColorPalette.js
new file mode 100644
index 0000000..ad0553d
--- /dev/null
+++ b/includes/js/dijit/ColorPalette.js
@@ -0,0 +1,292 @@
+if(!dojo._hasResource["dijit.ColorPalette"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dijit.ColorPalette"] = true;
+dojo.provide("dijit.ColorPalette");
+
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+dojo.require("dojo.colors");
+dojo.require("dojo.i18n");
+dojo.requireLocalization("dojo", "colors", null, "zh,pt,da,tr,ru,de,sv,ja,he,fi,nb,el,ar,pt-pt,cs,fr,es,nl,ko,zh-tw,pl,it,hu,ROOT");
+
+dojo.declare("dijit.ColorPalette",
+	[dijit._Widget, dijit._Templated],
+	{
+	// summary: A keyboard accessible color-picking widget
+	// description:
+	//	Grid showing various colors, so the user can pick a certain color
+	//	Can be used standalone, or as a popup.
+	//
+	// example:
+	// |	<div dojoType="dijit.ColorPalette"></div>
+	//
+	// example:
+	// |    var picker = new dijit.ColorPalette({ },srcNode);
+	// |	picker.startup();
+	//
+	// defaultTimeout: Number
+	//		number of milliseconds before a held key or button becomes typematic
+	defaultTimeout: 500,
+
+	// timeoutChangeRate: Number
+	//		fraction of time used to change the typematic timer between events
+	//		1.0 means that each typematic event fires at defaultTimeout intervals
+	//		< 1.0 means that each typematic event fires at an increasing faster rate
+	timeoutChangeRate: 0.90,
+
+	// palette: String
+	//		Size of grid, either "7x10" or "3x4".
+	palette: "7x10",
+
+	//_value: String
+	//		The value of the selected color.
+	value: null,
+
+	//_currentFocus: Integer
+	//		Index of the currently focused color.
+	_currentFocus: 0,
+
+	// _xDim: Integer
+	//		This is the number of colors horizontally across.
+	_xDim: null,
+
+	// _yDim: Integer
+	///		This is the number of colors vertically down.
+	_yDim: null,
+
+	// _palettes: Map
+	// 		This represents the value of the colors.
+	//		The first level is a hashmap of the different arrays available
+	//		The next two dimensions represent the columns and rows of colors.
+	_palettes: {
+
+		"7x10":	[["white", "seashell", "cornsilk", "lemonchiffon","lightyellow", "palegreen", "paleturquoise", "lightcyan",	"lavender", "plum"],
+				["lightgray", "pink", "bisque", "moccasin", "khaki", "lightgreen", "lightseagreen", "lightskyblue", "cornflowerblue", "violet"],
+				["silver", "lightcoral", "sandybrown", "orange", "palegoldenrod", "chartreuse", "mediumturquoise", 	"skyblue", "mediumslateblue","orchid"],
+				["gray", "red", "orangered", "darkorange", "yellow", "limegreen", 	"darkseagreen", "royalblue", "slateblue", "mediumorchid"],
+				["dimgray", "crimson", 	"chocolate", "coral", "gold", "forestgreen", "seagreen", "blue", "blueviolet", "darkorchid"],
+				["darkslategray","firebrick","saddlebrown", "sienna", "olive", "green", "darkcyan", "mediumblue","darkslateblue", "darkmagenta" ],
+				["black", "darkred", "maroon", "brown", "darkolivegreen", "darkgreen", "midnightblue", "navy", "indigo", 	"purple"]],
+
+		"3x4": [["white", "lime", "green", "blue"],
+			["silver", "yellow", "fuchsia", "navy"],
+			["gray", "red", "purple", "black"]]	
+
+	},
+
+	// _imagePaths: Map
+	//		This is stores the path to the palette images
+	_imagePaths: {
+		"7x10": dojo.moduleUrl("dijit", "templates/colors7x10.png"),
+		"3x4": dojo.moduleUrl("dijit", "templates/colors3x4.png")
+	},
+
+	// _paletteCoords: Map
+	//		This is a map that is used to calculate the coordinates of the
+	//		images that make up the palette.
+	_paletteCoords: {
+		"leftOffset": 3, "topOffset": 3,
+		"cWidth": 20, "cHeight": 20
+		
+	},
+
+	// templatePath: String
+	//		Path to the template of this widget.
+	templateString:"<div class=\"dijitInline dijitColorPalette\">\n\t<div class=\"dijitColorPaletteInner\" dojoAttachPoint=\"divNode\" waiRole=\"grid\" tabIndex=\"${tabIndex}\">\n\t\t<img class=\"dijitColorPaletteUnder\" dojoAttachPoint=\"imageNode\" waiRole=\"presentation\">\n\t</div>\t\n</div>\n",
+
+	// _paletteDims: Object
+	//		Size of the supported palettes for alignment purposes.
+	_paletteDims: {
+		"7x10": {"width": "206px", "height": "145px"},
+		"3x4": {"width": "86px", "height": "64px"}
+	},
+
+	// tabIndex: String
+	//		Widget tabindex.
+	tabIndex: "0",
+
+	postCreate: function(){
+		// A name has to be given to the colorMap, this needs to be unique per Palette.
+		dojo.mixin(this.divNode.style, this._paletteDims[this.palette]);
+		this.imageNode.setAttribute("src", this._imagePaths[this.palette]);
+		var choices = this._palettes[this.palette];	
+		this.domNode.style.position = "relative";
+		this._cellNodes = [];	
+		this.colorNames = dojo.i18n.getLocalization("dojo", "colors", this.lang);
+		var url = dojo.moduleUrl("dojo", "resources/blank.gif"),
+            colorObject = new dojo.Color(),
+		    coords = this._paletteCoords;
+		for(var row=0; row < choices.length; row++){
+			for(var col=0; col < choices[row].length; col++) {
+                var imgNode = dojo.doc.createElement("img");
+                imgNode.src = url;
+                dojo.addClass(imgNode, "dijitPaletteImg");
+                var color = choices[row][col],
+                        colorValue = colorObject.setColor(dojo.Color.named[color]);
+                imgNode.alt = this.colorNames[color];
+                imgNode.color = colorValue.toHex();
+                var imgStyle = imgNode.style;
+                imgStyle.color = imgStyle.backgroundColor = imgNode.color;
+                var cellNode = dojo.doc.createElement("span");
+                cellNode.appendChild(imgNode);
+                dojo.forEach(["Dijitclick", "MouseEnter", "Focus", "Blur"], function(handler) {
+                    this.connect(cellNode, "on" + handler.toLowerCase(), "_onCell" + handler);
+                }, this);
+                this.divNode.appendChild(cellNode);
+                var cellStyle = cellNode.style;
+                cellStyle.top = coords.topOffset + (row * coords.cHeight) + "px";
+                cellStyle.left = coords.leftOffset + (col * coords.cWidth) + "px";
+                dojo.attr(cellNode, "tabindex", "-1");
+                cellNode.title = this.colorNames[color];
+                dojo.addClass(cellNode, "dijitPaletteCell");
+                dijit.setWaiRole(cellNode, "gridcell");
+                cellNode.index = this._cellNodes.length;
+                this._cellNodes.push(cellNode);
+            }
+		}
+		this._xDim = choices[0].length;
+		this._yDim = choices.length;
+		this.connect(this.divNode, "onfocus", "_onDivNodeFocus");
+
+		// Now set all events
+		// The palette itself is navigated to with the tab key on the keyboard
+		// Keyboard navigation within the Palette is with the arrow keys
+		// Spacebar selects the color.
+		// For the up key the index is changed by negative the x dimension.		
+
+		var keyIncrementMap = {
+			UP_ARROW: -this._xDim,
+			// The down key the index is increase by the x dimension.	
+			DOWN_ARROW: this._xDim,
+			// Right and left move the index by 1.
+			RIGHT_ARROW: 1,
+			LEFT_ARROW: -1
+		};
+		for(var key in keyIncrementMap){
+			this._connects.push(dijit.typematic.addKeyListener(this.domNode,
+				{keyCode:dojo.keys[key], ctrlKey:false, altKey:false, shiftKey:false},
+				this,
+				function(){
+					var increment = keyIncrementMap[key];
+					return function(count){ this._navigateByKey(increment, count); };
+				}(),
+				this.timeoutChangeRate, this.defaultTimeout));
+		}
+	},
+
+	focus: function(){
+		// summary:
+		//		Focus this ColorPalette.  Puts focus on the first swatch.
+		this._focusFirst();
+	},
+
+	onChange: function(color){
+		// summary:
+		//		Callback when a color is selected.
+		// color: String
+		//		Hex value corresponding to color.
+//		console.debug("Color selected is: "+color);
+	},
+
+	_focusFirst: function(){
+		this._currentFocus = 0;
+		var cellNode = this._cellNodes[this._currentFocus];
+		window.setTimeout(function(){dijit.focus(cellNode)}, 0);
+	},
+
+	_onDivNodeFocus: function(evt){
+		// focus bubbles on Firefox 2, so just make sure that focus has really
+		// gone to the container
+		if(evt.target === this.divNode){
+			this._focusFirst();
+		}
+	},
+
+	_onFocus: function(){
+		// while focus is on the palette, set its tabindex to -1 so that on a
+		// shift-tab from a cell, the container is not in the tab order
+		dojo.attr(this.divNode, "tabindex", "-1");
+	},
+
+	_onBlur: function(){
+		this._removeCellHighlight(this._currentFocus);
+		// when focus leaves the palette, restore its tabindex, since it was
+		// modified by _onFocus().
+		dojo.attr(this.divNode, "tabindex", this.tabIndex);
+	},
+
+	_onCellDijitclick: function(/*Event*/ evt){
+		// summary:
+		//		Handler for click, enter key & space key. Selects the color.
+		// evt:
+		//		The event.
+		var target = evt.currentTarget;
+		if (this._currentFocus != target.index){
+			this._currentFocus = target.index;
+			window.setTimeout(function(){dijit.focus(target)}, 0);
+		}
+		this._selectColor(target);
+		dojo.stopEvent(evt);
+	},
+
+	_onCellMouseEnter: function(/*Event*/ evt){
+		// summary:
+		//		Handler for onMouseOver. Put focus on the color under the mouse.
+		// evt:
+		//		The mouse event.
+		var target = evt.currentTarget;
+		window.setTimeout(function(){dijit.focus(target)}, 0);
+	},
+
+	_onCellFocus: function(/*Event*/ evt){
+		// summary:
+		//		Handler for onFocus. Removes highlight of
+		//		the color that just lost focus, and highlights
+		//		the new color.
+		// evt:
+		//		The focus event.
+		this._removeCellHighlight(this._currentFocus);
+		this._currentFocus = evt.currentTarget.index;
+		dojo.addClass(evt.currentTarget, "dijitPaletteCellHighlight");
+	},
+
+	_onCellBlur: function(/*Event*/ evt){
+		// summary:
+		//		needed for Firefox 2 on Mac OS X
+		this._removeCellHighlight(this._currentFocus);
+	},
+
+	_removeCellHighlight: function(index){
+		dojo.removeClass(this._cellNodes[index], "dijitPaletteCellHighlight");
+	},
+
+	_selectColor: function(selectNode){	
+		// summary:
+		// 		This selects a color. It triggers the onChange event
+		// area:
+		//		The area node that covers the color being selected.
+		var img = selectNode.getElementsByTagName("img")[0];
+		this.onChange(this.value = img.color);
+	},
+
+	_navigateByKey: function(increment, typeCount){
+		// summary:
+		// 	  	This is the callback for typematic.
+		// 		It changes the focus and the highlighed color.
+		// increment:
+		// 		How much the key is navigated.
+		// typeCount:
+		//		How many times typematic has fired.
+
+		// typecount == -1 means the key is released.
+		if(typeCount == -1){ return; }
+
+		var newFocusIndex = this._currentFocus + increment;
+		if(newFocusIndex < this._cellNodes.length && newFocusIndex > -1)
+		{
+			var focusNode = this._cellNodes[newFocusIndex];
+			focusNode.focus();
+		}
+	}
+});
+
+}
-- 
cgit v1.2.3-54-g00ecf