dojo_src 1.4.102 → 1.5.0

data/Rakefile

@@ -1,4 +1,5 @@
 require 'rubygems'
+require 'lib/dojo_src.rb'
 require 'rake'
 require 'rake/testtask'
 require 'rake/rdoctask'
@@ -7,12 +8,10 @@ require 'rake/gempackagetask'
 
 PKG_FILES = FileList[ '[a-zA-Z]*', 'dojo/**/*', 'lib/**/*']
 
-$:.unshift(File.join(File.dirname(__FILE__),'lib'))
-require 'dojo_src'
 
 spec = Gem::Specification.new do |s|
   s.name = "dojo_src"
-  s.version = DojoSrc.version 
+  s.version = DojoSrc::VERSION
   s.author = "niquola"
   s.email = "niquola@gmail.com"
   s.executables << 'dojofy' 

data/bin/dojofy

@@ -17,7 +17,7 @@ if File.exists?(version_file)
 end
 
 require 'dojo_src'
-version = DojoSrc.version
+version = DojoSrc::VERSION
 if version && installed_version && installed_version == version
   puts 'dojo installed and dojo version is up to date'
   exit

data/dojo/dijit/Calendar.js

@@ -6,10 +6,11 @@ dojo.require("dojo.date.locale");
 
 dojo.require("dijit._Widget");
 dojo.require("dijit._Templated");
+dojo.require("dijit._CssStateMixin");
 
 dojo.declare(
 	"dijit.Calendar",
-	[dijit._Widget, dijit._Templated],
+	[dijit._Widget, dijit._Templated, dijit._CssStateMixin],
 	{
 		// summary:
 		//		A simple GUI for choosing a date in the context of a monthly calendar.
@@ -47,6 +48,16 @@ dojo.declare(
 		// tabIndex: Integer
 		//		Order fields are traversed when user hits the tab key
 		tabIndex: "0",
+		
+		baseClass:"dijitCalendar",
+
+		// Set node classes for various mouse events, see dijit._CssStateMixin for more details 
+		cssStateNodes: {
+			"decrementMonth": "dijitCalendarArrow",
+			"incrementMonth": "dijitCalendarArrow",
+			"previousYearLabelNode": "dijitCalendarPreviousYear",
+			"nextYearLabelNode": "dijitCalendarNextYear"			
+		},
 
 		attributeMap: dojo.delegate(dijit._Widget.prototype.attributeMap, {
 			tabIndex: "domNode"
@@ -57,8 +68,8 @@ dojo.declare(
 			//      Deprecated.   Used attr('value', ...) instead.
 			// tags:
 			//      deprecated
-			dojo.deprecated("dijit.Calendar:setValue() is deprecated.  Use attr('value', ...) instead.", "", "2.0");
-			this.attr('value', value);
+			dojo.deprecated("dijit.Calendar:setValue() is deprecated.  Use set('value', ...) instead.", "", "2.0");
+			this.set('value', value);
 		},
 
 		_getValueAttr: function(){
@@ -89,7 +100,7 @@ dojo.declare(
 				this.displayMonth = new this.dateClassObj(value);
 				if(!this.isDisabledDate(value, this.lang)){
 					this.value = value;
-					this.onChange(this.attr('value'));
+					this.onChange(this.get('value'));
 				}
 				dojo.attr(this.domNode, "aria-label",
 					this.dateLocaleModule.format(value,
@@ -173,8 +184,13 @@ dojo.declare(
 			}, this);
 
 			// Fill in localized month name
-			var monthNames = this.dateLocaleModule.getNames('months', 'wide', 'standAlone', this.lang);
+			var monthNames = this.dateLocaleModule.getNames('months', 'wide', 'standAlone', this.lang, month);
 			this._setText(this.monthLabelNode, monthNames[month.getMonth()]);
+			// Repopulate month list based on current year (Hebrew calendar)
+			dojo.query(".dijitCalendarMonthLabelTemplate", this.domNode).forEach(function(node, i){
+				dojo.toggleClass(node, "dijitHidden", !(i in monthNames)); // hide leap months (Hebrew)
+				this._setText(node, monthNames[i]);
+			}, this);
 
 			// Fill in localized prev/current/next years
 			var y = month.getFullYear() - 1;
@@ -204,7 +220,7 @@ dojo.declare(
 		goToToday: function(){
 			// summary:
 			//      Sets calendar's value to today's date
-			this.attr('value', this.dateClassObj());
+			this.set('value', new this.dateClassObj());
 		},
 
 		constructor: function(/*Object*/args){
@@ -246,18 +262,18 @@ dojo.declare(
 				this._setText(label, dayNames[(i + dayOffset) % 7]);
 			}, this);
 
+			var dateObj = new this.dateClassObj(this.value);
 			// Fill in spacer/month dropdown element with all the month names (invisible) so that the maximum width will affect layout
-			var monthNames = this.dateLocaleModule.getNames('months', 'wide', 'standAlone', this.lang);
+			var monthNames = this.dateLocaleModule.getNames('months', 'wide', 'standAlone', this.lang, dateObj);
 			cloneClass(".dijitCalendarMonthLabelTemplate", monthNames.length-1);
 			dojo.query(".dijitCalendarMonthLabelTemplate", this.domNode).forEach(function(node, i){
 				dojo.attr(node, "month", i);
-				this._setText(node, monthNames[i]);
+				if(i in monthNames){ this._setText(node, monthNames[i]); }
 				dojo.place(node.cloneNode(true), this.monthLabelSpacer);
 			}, this);
 
-			var value = this.value;
 			this.value = null;
-			this.attr('value', new this.dateClassObj(value));
+			this.set('value', dateObj);
 		},
 
 		_onMenuHover: function(e){
@@ -326,17 +342,24 @@ dojo.declare(
 			dojo.stopEvent(evt);
 			for(var node = evt.target; node && !node.dijitDateValue; node = node.parentNode);
 			if(node && !dojo.hasClass(node, "dijitCalendarDisabledDate")){
-				this.attr('value', node.dijitDateValue);
-				this.onValueSelected(this.attr('value'));
+				this.set('value', node.dijitDateValue);
+				this.onValueSelected(this.get('value'));
 			}
 		},
 
 		_onDayMouseOver: function(/*Event*/ evt){
 			// summary:
-			//      Handler for mouse over events on days, sets up hovered style
+			//      Handler for mouse over events on days, sets hovered style
 			// tags:
 			//      protected
-			var node = evt.target;
+
+			// event can occur on <td> or the <span> inside the td,
+			// set node to the <td>.
+			var node =
+				dojo.hasClass(evt.target, "dijitCalendarDateLabel") ?
+				evt.target.parentNode :
+				evt.target;
+
 			if(node && (node.dijitDateValue || node == this.previousYearLabelNode || node == this.nextYearLabelNode) ){
 				dojo.addClass(node, "dijitCalendarHoveredDate");
 				this._currentNode = node;
@@ -348,18 +371,33 @@ dojo.declare(
 			//      Handler for mouse out events on days, clears hovered style
 			// tags:
 			//      protected
+	
 			if(!this._currentNode){ return; }
-			for(var node = evt.relatedTarget; node;){
-				if(node == this._currentNode){ return; }
-				try{
-					node = node.parentNode;
-				}catch(x){
-					node = null;
-				}
-			}
+			
+			// if mouse out occurs moving from <td> to <span> inside <td>, ignore it
+			if(evt.relatedTarget && evt.relatedTarget.parentNode == this._currentNode){ return; }
+
 			dojo.removeClass(this._currentNode, "dijitCalendarHoveredDate");
+			if(dojo.hasClass(this._currentNode, "dijitCalendarActiveDate")) {
+				dojo.removeClass(this._currentNode, "dijitCalendarActiveDate");
+			}
 			this._currentNode = null;
 		},
+		
+		_onDayMouseDown: function(/*Event*/ evt){
+			var node = evt.target.parentNode;
+			if(node && node.dijitDateValue){
+				dojo.addClass(node, "dijitCalendarActiveDate");
+				this._currentNode = node;
+			}
+		},
+		
+		_onDayMouseUp: function(/*Event*/ evt){
+			var node = evt.target.parentNode;
+			if(node && node.dijitDateValue){
+				dojo.removeClass(node, "dijitCalendarActiveDate");
+			}
+		},
 
 //TODO: use typematic
 //TODO: skip disabled dates without ending up in a loop
@@ -403,7 +441,7 @@ dojo.declare(
 					newValue = new Date(newValue).setDate(1);
 					break;
 				case dk.ENTER:
-					this.onValueSelected(this.attr('value'));
+					this.onValueSelected(this.get('value'));
 					break;
 				case dk.ESCAPE:
 					//TODO
@@ -416,7 +454,7 @@ dojo.declare(
 				newValue = this.dateFuncObj.add(newValue, interval, increment);
 			}
 
-			this.attr("value", newValue);
+			this.set("value", newValue);
 		},
 
 		onValueSelected: function(/*Date*/ date){

data/dojo/dijit/CheckedMenuItem.js

@@ -35,7 +35,7 @@ dojo.declare("dijit.CheckedMenuItem",
 			// tags:
 			//		private
 			if(!this.disabled){
-				this.attr("checked", !this.checked);
+				this.set("checked", !this.checked);
 				this.onChange(this.checked);
 			}
 			this.inherited(arguments);

data/dojo/dijit/ColorPalette.js

@@ -4,10 +4,13 @@ dojo.require("dijit._Widget");
 dojo.require("dijit._Templated");
 dojo.require("dojo.colors");
 dojo.require("dojo.i18n");
+
+dojo.require("dijit._PaletteMixin");
+
 dojo.requireLocalization("dojo", "colors");
 
 dojo.declare("dijit.ColorPalette",
-	[dijit._Widget, dijit._Templated],
+	[dijit._Widget, dijit._Templated, dijit._PaletteMixin],
 	{
 	// summary:
 	//		A keyboard accessible color-picking widget
@@ -19,43 +22,17 @@ dojo.declare("dijit.ColorPalette",
 	// |	<div dojoType="dijit.ColorPalette"></div>
 	//
 	// example:
-	// |    var picker = new dijit.ColorPalette({ },srcNode);
+	// |	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: [private] DomNode
-	//		The currently focused or hovered color.
-	//		Different from value, which represents the selected (i.e. clicked) color.
-	_currentFocus: 0,
-
-	// _xDim: [protected] Integer
-	//		This is the number of colors horizontally across.
-	_xDim: null,
-
-	// _yDim: [protected] Integer
-	///		This is the number of colors vertically down.
-	_yDim: null,
-
 	// _palettes: [protected] Map
 	// 		This represents the value of the colors.
-	//		The first level is a hashmap of the different arrays available
+	//		The first level is a hashmap of the different palettes available.
 	//		The next two dimensions represent the columns and rows of colors.
 	_palettes: {
 		"7x10":	[["white", "seashell", "cornsilk", "lemonchiffon","lightyellow", "palegreen", "paleturquoise", "lightcyan",	"lavender", "plum"],
@@ -75,280 +52,58 @@ dojo.declare("dijit.ColorPalette",
 	//		This is stores the path to the palette images
 	_imagePaths: {
 		"7x10": dojo.moduleUrl("dijit.themes", "a11y/colors7x10.png"),
-		"3x4": dojo.moduleUrl("dijit.themes", "a11y/colors3x4.png")
-	},
-
-	// _paletteCoords: [protected] 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
+		"3x4": dojo.moduleUrl("dijit.themes", "a11y/colors3x4.png"),
+		"7x10-rtl": dojo.moduleUrl("dijit.themes", "a11y/colors7x10-rtl.png"),
+		"3x4-rtl": dojo.moduleUrl("dijit.themes", "a11y/colors3x4-rtl.png")
 	},
 
 	// templateString: String
 	//		The template of this widget.
 	templateString: dojo.cache("dijit", "templates/ColorPalette.html"),
 
-	// _paletteDims: [protected] Object
-	//		Size of the supported palettes for alignment purposes.
-	_paletteDims: {
-		"7x10": {"width": "206px", "height": "145px"},
-		"3x4": {"width": "86px", "height": "64px"}
-	},
+	baseClass: "dijitColorPalette",
 
-	// tabIndex: String
-	//		Widget tab index.
-	tabIndex: "0",
+	dyeClass: 'dijit._Color',
 
 	buildRendering: function(){
 		// Instantiate the template, which makes a skeleton into which we'll insert a bunch of
 		// <img> nodes
-		this.inherited(arguments);
-	
-		// 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].toString());
-		var choices = this._palettes[this.palette];
-		this.domNode.style.position = "relative";
-		this._cellNodes = [];
-		this.colorNames = dojo.i18n.getLocalization("dojo", "colors", this.lang);
-		var url = this._blankGif,
-			colorObject = new dojo.Color(),
-			coords = this._paletteCoords;
-		for(var row=0; row < choices.length; row++){
-			var rowNode = dojo.create("div", {
-				role: "row"
-			}, this.divNode);
-			for(var col=0; col < choices[row].length; col++){
-
-				var color = choices[row][col],
-						colorValue = colorObject.setColor(dojo.Color.named[color]);
-
-				var cellNode = dojo.create("span", {
-					"class": "dijitPaletteCell",
-					tabIndex: "-1",
-					title: this.colorNames[color],
-					style: {
-						top: coords.topOffset + (row * coords.cHeight) + "px",
-						left: coords.leftOffset + (col * coords.cWidth) + "px"
-					}
-				});
-
-				var imgNode = dojo.create("img",{
-					src: url,
-					"class":"dijitPaletteImg",
-					alt: this.colorNames[color]
-				}, cellNode);
-
-				// FIXME: color is an attribute of img?
-				imgNode.color = colorValue.toHex();
-				var imgStyle = imgNode.style;
-				imgStyle.color = imgStyle.backgroundColor = imgNode.color;
-
-				dojo.forEach(["Dijitclick", "MouseEnter", "MouseLeave", "Focus"], function(handler){
-					this.connect(cellNode, "on" + handler.toLowerCase(), "_onCell" + handler);
-				}, this);
 
-				dojo.place(cellNode, rowNode);
-
-				dijit.setWaiRole(cellNode, "gridcell");
-				cellNode.index = this._cellNodes.length;
-				this._cellNodes.push(cellNode);
-			}
-		}
-		this._xDim = choices[0].length;
-		this._yDim = choices.length;
-
-		// 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,
-				{charOrCode: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));
-		}
-	},
-	
-	postCreate: function(){
 		this.inherited(arguments);
 
-		// Set initial navigable node.   At any point in time there's exactly one
-		// cell with tabIndex != -1.   If focus is inside the ColorPalette then
-		// focus is on that cell.
-		// TODO: if we set aria info (for the current value) on the ColorPalette itself then can we avoid
-		// having to focus each individual cell?
-		this._currentFocus = this._cellNodes[0];
-		dojo.attr(this._currentFocus, "tabIndex", this.tabIndex);
-	},
-
-	focus: function(){
-		// summary:
-		//		Focus this ColorPalette.  Puts focus on the most recently focused cell.
-
-		// The cell already has tabIndex set, just need to set CSS and focus it
-		dojo.addClass(this._currentFocus, "dijitPaletteCellHighlight");
-		dijit.focus(this._currentFocus);
-	},
-
-	onChange: function(color){
-		// summary:
-		//		Callback when a color is selected.
-		// color: String
-		//		Hex value corresponding to color.
-//		console.debug("Color selected is: "+color);
-	},
-
-	_onFocus: function(){
-		// summary:
-		//		Handler for when the ColorPalette gets focus (because a cell inside
-		//		the ColorPalette got focus)
-		// tags:
-		//		protected
-
-		dojo.addClass(this._currentFocus, "dijitPaletteCellHighlight");
-		this.inherited(arguments);
-	},
+		this.imageNode.setAttribute("src", this._imagePaths[this.palette + (this.isLeftToRight() ? "" : "-rtl")].toString());
 
-	_onBlur: function(){
-		// summary:
-		//		Handler for when the ColorPalette loses focus
-		// tags:
-		//		protected
-
-		// Just to be the same as 1.3, when I am focused again go to first (0,0) cell rather than
-		// currently focused node.
-		dojo.attr(this._currentFocus, "tabIndex", "-1");
-		dojo.removeClass(this._currentFocus, "dijitPaletteCellHighlight");
-		this._currentFocus = this._cellNodes[0];
-		dojo.attr(this._currentFocus, "tabIndex", this.tabIndex);
-
-		this.inherited(arguments);
-	},
-
-	_onCellDijitclick: function(/*Event*/ evt){
-		// summary:
-		//		Handler for click, enter key & space key. Selects the color.
-		// evt:
-		//		The event.
-		// tags:
-		//		private
-
-		var target = evt.currentTarget;
-		this._selectColor(target);
-		dojo.stopEvent(evt);
-	},
-
-	_onCellMouseEnter: function(/*Event*/ evt){
-		// summary:
-		//		Handler for onMouseEnter event on a cell. Put highlight on the color under the mouse.
-		// evt:
-		//		The mouse event.
-		// tags:
-		//		private
-
-		var target = evt.currentTarget;
-		this._setCurrent(target);
-	},
-
-	_onCellMouseLeave: function(/*Event*/ evt){
-		// summary:
-		//		Handler for onMouseLeave event on a cell. Remove highlight on the color under the mouse.
-		// evt:
-		//		The mouse event.
-		// tags:
-		//		private
-
-		dojo.removeClass(this._currentFocus, "dijitPaletteCellHighlight");
-	},
-
-	_onCellFocus: function(/*Event*/ evt){
-		// summary:
-		//		Handler for onFocus of a cell.
-		// description:
-		//		Removes highlight of the color that just lost focus, and highlights
-		//		the new color.  Also moves the tabIndex setting to the new cell.
-		//		
-		// evt:
-		//		The focus event.
-		// tags:
-		//		private
-
-		this._setCurrent(evt.currentTarget);
-	},
-
-	_setCurrent: function(/*Node*/ node){
-		// summary:
-		//		Called when a color is hovered or focused.
-		// description:
-		//		Removes highlight of the old color, and highlights
-		//		the new color.  Also moves the tabIndex setting to the new cell.
-		// tags:
-		//		protected
-		if("_currentFocus" in this){
-			// Remove highlight and tabIndex on old cell
-			dojo.attr(this._currentFocus, "tabIndex", "-1");
-			dojo.removeClass(this._currentFocus, "dijitPaletteCellHighlight");
-		}
-
-		// Set highlight and tabIndex of new cell
-		this._currentFocus = node;
-		if(node){
-			dojo.attr(node, "tabIndex", this.tabIndex);
-			dojo.addClass(node, "dijitPaletteCellHighlight");
-		}
-	},
-
-	_selectColor: function(selectNode){
-		// summary:
-		// 		This selects a color. It triggers the onChange event
-		// area:
-		//		The area node that covers the color being selected.
-		// tags:
-		//		private
-		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.
-		// tags:
-		//		private
-
-		// typecount == -1 means the key is released.
-		if(typeCount == -1){ return; }
-
-		var newFocusIndex = this._currentFocus.index + increment;
-		if(newFocusIndex < this._cellNodes.length && newFocusIndex > -1)
-		{
-			var focusNode = this._cellNodes[newFocusIndex];
-			this._setCurrent(focusNode);
+		var i18nColorNames = dojo.i18n.getLocalization("dojo", "colors", this.lang);
+		this._preparePalette(
+			this._palettes[this.palette],
+			i18nColorNames
+		);
+	}
+});
 
-			// Actually focus the node, for the benefit of screen readers.
-			// Use setTimeout because IE doesn't like changing focus inside of an event handler
-			setTimeout(dojo.hitch(dijit, "focus", focusNode), 0);
+dojo.declare("dijit._Color", dojo.Color,
+	// summary:
+	//		Object associated with each cell in a ColorPalette palette.
+	//		Implements dijit.Dye.
+	{
+		constructor: function(/*String*/alias){
+			this._alias = alias;
+			this.setColor(dojo.Color.named[alias]);
+		},
+
+		getValue: function(){
+			// summary:
+			//		Note that although dijit._Color is initialized with a value like "white" getValue() always
+			//		returns a hex value
+			return this.toHex();
+		},
+
+		fillCell: function(/*DOMNode*/ cell, /*String*/ blankGif){
+			dojo.create("img", {
+				src: blankGif,
+				"class": "dijitPaletteImg",
+				alt: this._alias
+			}, cell);
 		}
 	}
-});
+);