Documentation

---

The Wall: Class

Wall class creates a wall of elements that can be dragged. New elements are created by dragging The Wall.

THE WALL METHOD: constructor

Class constructor.

Syntax:

            var wall = new Wall("mywall", [,options]);

Arguments:

1. Element id (required)
2. Options

Options:

• handle : (default to undefined) Defines a different handle
• draggable - (boolean: defaults to true) Enables drag
• inertia - (boolean: defaults to false) Enables inertia
• invert - (boolean: defaults to false) Reverse drag direction
• autoposition - (boolean: defaults to false) Wall autoposition
• speed - (number: defaults to 1000) Motion speed
• transition - (function: defaults to Fx.Transitions.Quad.easeOut) Defines transition
• slideshow - (boolean: defaults to false) Enables Wall Slideshow
• showDuration - (number: defaults to 3000) Slideshow display duration
• preload - (boolean: defaults to false) Content preloa
• width - (number: defaults to 0) W tile
• height - (number: defaults to 0) H tile
• startx - (number: defaults to 0) Starting tile
• starty - (number: defaults to 0) Starting tile
• rangex - (array: defaults to [-500, 500]) Defines the number of columns (not pixel)
• rangey - (array: defaults to [-500, 500]) Defines the number of lines (not pixel)
• printCoordinates - (boolean: defaults to false) Insert coordinates into the tile
• callOnUpdate - (function: defaults to Function) Action when drag is completed
• callOnChange - (function: defaults to Function) Unbridled action when ID element is active

Return:object

• (object) - This Wall instance

THE WALL METHOD: initWall

Initialize The Wall building.

Syntax:

            var wall = new Wall("mywall");
				wall.initWall();

Return:object

• (object) - This Wall instance

THE WALL METHOD: getMovement

Verifies if The Wall is moving.

Syntax:

	        var wall = new Wall("mywall", {
		                        "draggable":true,
		                        "width":200,
		                        "height":200,
		                        callOnUpdate: function(items){
		                            items.each(function(e, i){
		                                var a = new Element("div");
		                                    a.set("html", "click me" );
		                                    a.inject(e.node);
		                                    // Behaviour on click
		                                    a.addEvent("click", function(e){
		                                        // Get Movement
		                                        if( wall.getMovement() ){
													//... (move) your action
		                                        }else{
		                                            //... (no move) your action
		                                        }
		                                    })
		                            }.bind( this ))
		                        }.bind( this )
		                    });
		

Return:boolean

• boolean

THE WALL METHOD: getIdFromCoordinates

Returns the ID of inserted coordinates.

Syntax:

	        wall.getIdFromCoordinates(column,row);
        

Arguments:

1. column - Column item
2. row - Row item

Example:

	        var wall = new Wall("mywall", {...}).initWall();
			tileId   = wall.getIdFromCoordinates(2,4);
        

Return:numeric

• numeric

THE WALL METHOD: getCoordinatesFromId

Returns the element coordinates according to its ID.

Syntax:

	        var wall = new Wall("mywall", {...}).initWall();
			tileId   = wall.getCoordinatesFromId(id);
        

Arguments:

id - id item

Return:object

			{
				c: numeric,
				r: numeric
			}

THE WALL METHOD: getActiveItem

Returns the active element ID.

Notes

This request should be mostly used in Coda functionality.

Syntax:

		        var wall = new Wall("mywall", {...}).initWall();
				var id   = wall.getActiveItem();
	        

Return:

• numeric

THE WALL METHOD: getListLinksPoints

Returns a link list corresponding to the total number of elements created by The Wall.

Notes

This request should be mostly used in Coda functionality.

Syntax:

	        var wall = new Wall("mywall", {...}).initWall();
			var id   = wall.getListLinksPoints("idElement");
        

Arguments:

1. idElement: id element to update

Return:array

List node items

			[
				a.wall-item-coda #1,
				a.wall-item-coda #2,
				a.wall-item-coda #3,
				...
			]

THE WALL METHOD: preloadContent

Executes all creation callbacks.

Notes

This method is automatically applied when preload option is set to true.

Syntax:

	        var wall = new Wall("mywall", {"preload":true}).initWall();
			    wall.preloadContent();

Return:array[object]

List node items

			[
				Object { node=div.tile, x=0, y=0},
				Object { node=div.tile, x=0, y=1},
				Object { node=div.tile, x=0, y=2},
				Object { node=div.tile, x=0, y=3},
				...
			]

THE WALL METHOD: setCallOnUpdate

Callback executed when The Wall is updated and requires new elements.

Syntax:

			var myFunctionUpdate = function( items ){
				items.each(function(e, i){
					// ... your code 
				})
			}.bind( this );
			
	        var wall = new Wall("mywall", {...})
				wall.setCallOnUpdate( myFunctionUpdate );
				wall.initWall();
			    

Arguments:

1. items is array new items

Return:

• Function

THE WALL METHOD: setCallOnChange

Callback executed when a new active ID is set.

Syntax:

			var myFunctionChange = function( id ){
				// ... your code 
			}.bind( this );
			
	        var wall = new Wall("mywall", {...})
				wall.setCallOnChange( myFunctionChange );
				wall.initWall();

Arguments:

id: id active item

Return:

• Function

THE WALL METHOD: moveTo

Moves The Wall to the required coordinates.

Syntax:

			mywall.moveTo( c, r );

Arguments:

c: Column coordinate
r: Row coordinate

Return:

• return false or dom active node

THE WALL METHOD: moveToActive

Moves The Wall to the active element position.

Syntax:

			mywall.moveToActive();

Return:

• return moveTo return

THE WALL METHOD: moveToNext

Moves The Wall to the following element.

Notes

This request should be mostly used in Coda functionality.

Syntax:

			mywall.moveToNext();

Return:

• return moveTo return

THE WALL METHOD: moveToPrev

Moves The Wall to the previous element.

Notes

This request should be mostly used in Coda functionality.

Syntax:

			mywall.moveToPrev();

Return:

• return moveTo return