animation.shift property renamed to shift.animation

documentation

changes.txt

@@ -6,7 +6,7 @@ Changes for REDIPS.drag library
 - added event.relocateAfter(div, to) - it's called after each element is relocated
 - added event.shiftOverflow - called after overflow happen in "shift" drop mode
 - fixed emptyCell - if TD contains only text then it will be treated as empty cell
-- animation.shift property renamed to shift.animation TODO
+- animation.shift property renamed to shift.animation
 
 5.0.4 (2012-12-20)
 - modified enableDrag - method has option to accept node reference to enable / disable DIV elements inside that node

example09/script.js

@@ -16,8 +16,8 @@ var redipsInit,			// define redipsInit variable
 redipsInit = function () {
 	// initialization
 	rd.init();
-	// enable animation on shifted elements
-	rd.animation.shift = true;
+	// enable shift animation
+	rd.shift.animation = true;
 	// save initial DIV positions to "pos" object (it should go after initialization)
 	startPositions();
 	// in a moment when DIV element is moved, set drop_option property (shift or single)
@@ -70,7 +70,7 @@ startPositions = function () {
 
 // enable / disable animation
 toggleAnimation = function (chk) {
-	REDIPS.drag.animation.shift = chk.checked;
+	REDIPS.drag.shift.animation = chk.checked;
 };
 
 

example14/script.js

@@ -17,8 +17,8 @@ redipsInit = function () {
 	rd.init();
 	// set shift drop option
 	rd.dropMode = 'shift';
-	// enable animation for shifted elements
-	rd.animation.shift = true;
+	// enable shift animation
+	rd.shift.animation = true;
 };
 
 
@@ -30,7 +30,7 @@ setDropMode = function (radioButton) {
 
 // enable / disable animation
 toggleAnimation = function (chk) {
-	REDIPS.drag.animation.shift = chk.checked;
+	REDIPS.drag.shift.animation = chk.checked;
 };
 
 

example21/script.js

@@ -22,10 +22,10 @@ redipsInit = function () {
 	rd.init();
 	// set mode option to "shift"
 	rd.dropMode = 'shift';
-	// enable animation on shifted elements
-	rd.animation.shift = true;
 	// set animation loop pause
 	rd.animation.pause = 20;
+	// enable shift.animation
+	rd.shift.animation = true;
 	// set TD for overflow elements (initially)
 	rd.shift.overflow = document.getElementById('overflow');
 	// add counter to cloned element name
@@ -81,7 +81,7 @@ overflow = function (radio) {
 
 // enable / disable animation
 shiftAnimation = function (chk) {
-	REDIPS.drag.animation.shift = chk.checked;
+	REDIPS.drag.shift.animation = chk.checked;
 };
 
 

example25/script.js

@@ -28,12 +28,12 @@ redips.init = function () {
 	redips.mode = 'mode1';
 	// REDIPS.drag initialization
 	rd.init();
-	// set shift mode and shift animation (shift animation must be turned on because moveObject uses animation)
+	// set shift mode drop mode
 	rd.dropMode = 'shift';
-	rd.animation.shift = true;
-	// set vertical shift (each column is treated separately) and overflowed element will be deleted 
-	rd.shift.mode = 'vertical2';
-	rd.shift.overflow = 'delete';
+	// set shift properties
+	rd.shift.mode = 'vertical2';	// set vertical shift (each column is treated separately)
+	rd.shift.overflow = 'delete';	// overflowed element will be deleted
+	rd.shift.animation = true;		// shift animation (shift animation must be turned on because moveObject uses animation)
 	// event handler called in a moment before DIV is dropped (create result box in the most right column)
 	rd.event.droppedBefore = function (targetTD) {
 		// TD in 4th column

example26/script.js

@@ -19,7 +19,7 @@ redips.init = function () {
 	// initialization
 	rd.init();
 	// shift DIV elements with animation
-	rd.animation.shift = true;
+	rd.shift.animation = true;
 	// disabled elements will have opacity effect
 	rd.style.opacityDisabled = 50;
 	// set hover color

index.html

@@ -20,8 +20,8 @@
 				rd.dropMode = 'shift';
 				// set shift mode to vertical2
 				rd.shift.mode = 'vertical2';
-				// enable animation on shifted elements
-				rd.animation.shift = true;
+				// enable shift animation
+				rd.shift.animation = true;
 				// set animation loop pause
 				rd.animation.pause = 20;
 				// display action in the message line (list of all event handlers can be found at the drag.js bottom)

redips-drag-source.js

@@ -3,7 +3,7 @@ Copyright (c) 2008-2011, www.redips.net All rights reserved.
 Code licensed under the BSD License: http://www.redips.net/license/
 http://www.redips.net/javascript/drag-and-drop-table-content/
 Version 5.0.5
-Dec 24, 2012.
+Dec 27, 2012.
 */
 
 /*jslint white: true, browser: true, undef: true, nomen: true, eqeqeq: true, plusplus: false, bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxerr: 14 */
@@ -24,7 +24,7 @@ var REDIPS = REDIPS || {};
 
 /**
  * @namespace
- * @description REDIPS.drag is a JavaScript drag and drop library focused on dragging table content and table rows.
+ * @description REDIPS.drag is a JavaScript drag and drop library focused on dragging table content (DIV elements) and table rows.
  * @name REDIPS.drag
  * @author darko.bunic@google.com (Darko Bunic)
  * @see
@@ -34,7 +34,7 @@ var REDIPS = REDIPS || {};
  * <a href="http://www.redips.net/javascript/drag-and-drop-table-row/">Drag and drop table rows</a>
  * <a href="http://www.redips.net/javascript/drag-and-drop-table-content/">Drag and Drop table content</a>
  * <a href="http://www.redips.net/javascript/drag-and-drop-content-shift/">JavaScript drag and drop plus content shift</a>
- * @version 5.0.5
+ * @version 5.0.5 (2012-12-27)
  */
 REDIPS.drag = (function () {
 		// methods
@@ -3119,7 +3119,9 @@ REDIPS.drag = (function () {
 	 * @param {String} [mode] Relocation mode "instant" or "animation". Default is "instant".
 	 * @public
 	 * @function
-	 * @see <a href="#event:relocated">event.relocated</a>
+	 * @see <a href="#event:relocateBefore">event.relocateBefore</a>
+	 * @see <a href="#event:relocateAfter">event.relocateAfter</a>
+	 * @see <a href="#event:relocateEnd">event.relocateEnd</a>
 	 * @name REDIPS.drag#relocate
 	 */
 	relocate = function (from, to, mode) {
@@ -3288,7 +3290,7 @@ REDIPS.drag = (function () {
 	 * var firstCell = document.getElementById('firstCellOnTable'),
 	 *     lastCell = document.getElementById('lastCellOnTable');
 	 * // enable animation
-	 * REDIPS.drag.animation.shift = true;
+	 * REDIPS.drag.shift.animation = true;
 	 * // shift content
 	 * REDIPS.drag.shiftCells(lastCell, firstCell);
 	 * @public
@@ -3317,7 +3319,7 @@ REDIPS.drag = (function () {
 			handleOverflow;		// overflow method used locally (handler overflowed cells)
 		// define myShift local method (content will be shifted with or without animation)
 		myShift = function (source, target) {
-			if (REDIPS.drag.animation.shift) {
+			if (REDIPS.drag.shift.animation) {
 				relocate(source, target, 'animation');
 			}
 			else {
@@ -4342,22 +4344,22 @@ REDIPS.drag = (function () {
 		 */
 		clone : clone,
 		/**
-		 * Object contains animation pause, step and animation shift drop option.
+		 * Object contains animation properties: pause and step.
 		 * <ul>
 		 * <li>{Integer} animation.pause - Animation pause (lower values means the animation will go faster). Default value is 20 (milliseconds).</li>
 		 * <li>{Integer} animation.step - Value defines number of pixels in each step. Higher values means bigger step (faster animation) but with less smoothness. Default value is 2 (px).</li>
-		 * <li>{Boolean} animation.shift - Shift drop mode animation. If set to true, table content will be relocated with animation in case of "shift" drop mode. Default is false.</li>
 		 * </ul>
 		 * @type Object
 		 * @name REDIPS.drag#animation
 		 */
 		animation : animation,
 		/**
-		 * Object contains several properties: "shift.after", "shift.mode" and "shift.overflow".
+		 * Object contains several properties: shift.after, shift.mode, shift.overflow and shift.animation.
 		 * <ul>
 		 * <li>{String} shift.after - how to shift table content after DIV element is dropped</li>
 		 * <li>{String} shift.mode - shift modes (horizontal / vertical)</li>
 		 * <li>{String|HTMLElement} shift.overflow - defines how to behave when DIV element falls off the end</li>
+		 * <li>{Boolean} shift.animation - if set to true, table content will be relocated with animation - default is false</li>
 		 * </ul>
 		 *  
 		 * shift.after option has the following values: "default", "delete" and "always" (this property will have effect only if dropMode is set to "shift"). Default value is "default".
@@ -4505,32 +4507,32 @@ REDIPS.drag = (function () {
 		 * It is called only if animation is turned on.
 		 * @name REDIPS.drag#event:relocateEnd
 		 * @see <a href="#relocate">relocate</a>
-		 * @see <a href="#event.relocateBefore">relocateBefore</a>
-		 * @see <a href="#event.relocateAfter">relocateAfter</a>
+		 * @see <a href="#event:relocateBefore">event.relocateBefore</a>
+		 * @see <a href="#event:relocateAfter">event.relocateAfter</a>
 		 * @function
 		 * @event
 		 */
 		/**
 		 * Event handler invoked before DIV element will be relocated.
-		 * For example, in shift drop mode, this event handler will be called for each DIV element.
+		 * For example, in shift drop mode, this event handler will be called before each DIV element move.
 		 * @param {HTMLElement} div Reference of DIV element that will be relocated.
 		 * @param {HTMLElement} td Reference of TD where DIV element will be relocated.
 		 * @name REDIPS.drag#event:relocateBefore
 		 * @see <a href="#relocate">relocate</a>
-		 * @see <a href="#event.relocateAfter">relocateAfter</a>
-		 * @see <a href="#event.relocateEnd">relocateEnd</a>
+		 * @see <a href="#event:relocateAfter">event.relocateAfter</a>
+		 * @see <a href="#event:relocateEnd">event.relocateEnd</a>
 		 * @function
 		 * @event
 		 */
 		/**
 		 * Event handler invoked after DIV element is relocated.
-		 * For example, in shift drop mode, this event handler will be called for each DIV element.
+		 * For example, in shift drop mode, this event handler will be called after each DIV element has been moved.
 		 * @param {HTMLElement} div Reference of DIV element that is relocated.
-		 * @param {HTMLElement} td Reference of TD where DIV element will be relocated.
+		 * @param {HTMLElement} td Reference of TD where DIV element is relocated.
 		 * @name REDIPS.drag#event:relocateAfter
 		 * @see <a href="#relocate">relocate</a>
-		 * @see <a href="#event.relocateBefore">relocateBefore</a>
-		 * @see <a href="#event.relocateEnd">relocateEnd</a>
+		 * @see <a href="#event:relocateBefore">event.relocateBefore</a>
+		 * @see <a href="#event:relocateEnd">event.relocateEnd</a>
 		 * @function
 		 * @event
 		 */
@@ -4625,6 +4627,7 @@ REDIPS.drag = (function () {
 		 * Event handler invoked in a moment when overflow happen in shift mode.
 		 * @param {HTMLElement} td Reference of TD where overflow happen.
 		 * @name REDIPS.drag#event:shiftOverflow
+		 * @see <a href="#dropMode">dropMode</a>
 		 * @function
 		 * @event
 		 */