typeOf Source and Usage

The typeOf function is actually quite short:

var typeOf = this.typeOf = function(item){
	if (item == null) return 'null';
	if (item.$family) return item.$family();

	if (item.nodeName){
		if (item.nodeType == 1) return 'element';
		if (item.nodeType == 3) return (/\S/).test(item.nodeValue) ? 'textnode' : 'whitespace';
	} else if (typeof item.length == 'number'){
		if (item.callee) return 'arguments';
		if ('item' in item) return 'collection';
	}

	return typeof item;
};

typeOf checks for specific properties on the object in question to determine its descriptive type. Simple, right? Note the $family() check within typeOf; each Type (Array, Function, Date, etc.) instance is given a $family method which returns its type. Let’s try a few typeOf calls:

typeof document.body;  // returns "object"
typeOf(document.body);  // returns "element"

typeof new Date();  // returns "object"
typeOf(new Date());  // returns "date"

typeof [];  // returns "object"
typeOf([]);  // returns "array"

typeOf is an awesome utility function, right? Getting a more detailed object type than simply “object” can be hugely help in validating the object before using it. typeOf is just another awesome utility within the MooTools JavaScript framework.

Determining Object Type with MooTools’ typeOf is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

I’ve spent the last two weeks in London, eating fish’n'chips, drinking cup’o'tea, and being a hooligan at the Arsenal. Oh yeah, there was a MooTools hackathon too. The MooTools hackathon was hugely successful and I’ll be providing more detail about what was accomplished and where MooTools is going over the coming weeks. It was also great to meet some of the development team in person instead of simple IRC. MooTools FTW!

Another exciting part of my time in London was presenting at London Ajax. My presentation was called “JavaScript Coding with Class”, preaching the values of class-based JavaScript frameworks like MooTools and Dojo. I kept the talk high-level but I’m confident I got my point across, showing the value of class structures.

This was my first time presenting this deck, so let me know if you see room for improvement (outside of the billion “um’s” I used.)

Due to popular request, my slides have been embedded above.

JavaScript Coding with Class is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The MooTools JavaScript

The technique below is very much like monkey patching:

(function() {
	
	// Keep reference to the original Class
	var klass = Class;
	
	// Redefine class ("that's deep")
	Class = function(name, params, context) {
		// Find out if this is namespaced or the original method
		var namespaced = (arguments.length > 1);
		
		// Add the class name to the param list
		if(namespaced) params.$name = name;
		
		// Create and get the original class
		var original = new klass(namespaced ? params : name);
		
		// If namespaced, set class into namespace
		if(namespaced) Object.place(name, original, context);
		
		// Return this newly created class!
		return original;
	};
	
})();

I keep a reference to the original Class, as I’ll be using it within my new Class function.  The new signature allows for a namespaced class name, the usual class properties, and the context which may be passed to the Object.place method.  The first step is analyzing the arguments provided to Class;  if one argument, it’s a traditional class;  if more than one argument is provided, we know we’re trying to create a namespaced class and will act accordingly.  You’ll also notice that I add a $name property to the class prototype, providing the given class name to the class for later use.  I’ve found the class’ declaredClass property incredibly helpful within Dojo.

Here’s how you’d use the new Class function:

// Create a namespaced class
var myClass = new Class("davidwalsh.ui.Slider", {
	initialize: function() { 
		// Do stuff!
	},
	doSomething: function(){}
});
// myClass === davidwalsh.ui.Slider!

// Create an instance of the class
var myInstance = new davidwalsh.ui.Slider({
	// props
});

// Get the name of the declared class
var instanceClassName = myInstance.$name; // equals "davidwalsh.ui.Slider"

The first argument becomes the namespace and class name as a string.  The second argument is the traditional parameters argument.  If only one argument is provided to the Class function, the class is created and returned per usual;  in fact, both the namespaced method and traditional method return the newly created class.  The method provided above is completely backward compatible so you wont have rewrite your existing code.

Namespaced classes are probably a good idea, as many would argue that “polluting” the global namespace with numerous objects can lead to problems.  In any event, this namespacing method should help you make the most of my set/get nested object methods and allow you to keep the global namespace as clean as you’d like!

Create Namespaced Classes with MooTools is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The MooTools JavaScript

Here goes the magic, slightly modified from Dojo:

(function() {

	// Utility method to get and set objects that may or may not exist
	var objectifier = function(splits, create, context) {
		var result = context || window;
		for(var i = 0, s; result && (s = splits[i]); i++) {
			result = (s in result ? result[s] : (create ? result[s] = {} : undefined));
		}
		return result;
	};

	// Creates an object if it doesn't already exist
	Object.extend("place", function(name, value, context) {
		var splits = name.split("."), s = splits.pop(), result = objectifier(splits, true, context);
		return result && s ? (result[s] = value) : undefined;
	});

	// Retrieves an object if not already present
	Object.extend("retrieve", function(name, create, context) {
		return objectifier(name.split("."), create, context);
	});

	// Checks to see if the object exists
	Object.extend("exists", function(name, context) {
		return Object.retrieve(name, false, context) !== undefined;
	});

})();

Both methods use a root method for parsing the string and finding the object, if it exists.  The place method creates the object, accepting the object name, value, and context (base object), creating the object as desired:

// Creates my.namespace.MyClass
Object.place("my.namespace.MyClass", {
	name: "David"
});
// my.namespace.MyClass.name = "David"

// Creates some.existing.objecto.my.namespace.MyClass
Object.place("my.namespace.MyClass", {
	name: "David"
}, some.existing.objecto); // Has to be an existing object

Likewise, the retrieve method searches for the object, and optionally may create it:

// Get an object
Object.retrieve("my.namespace.MyClassToo");

// Try to find an object, create it if it doesn't exist
Object.retrieve("my.namespace.MyClassThree", true);

As a bonus, I’ve also thrown in an exists method to check for the existence of an object:

Object.exists("my.namespace.MyClassToo"); // returns TRUE or FALSE

Woohoo!  These are some really nice utility methods to have around if you’re looking to work with dynamic objects and namespaces!

Create and Retrieve Nested Object with MooTools is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The HTML

The basic setup is the same as a traditional form upload within the browser;  a FORM element with an INPUT of file type:

<form method="post" action="mootools-upload.php" enctype="multipart/form-data" id="uploadForm">
<div>
	<div class="formRow">
		<label for="file" class="floated">File: </label>
		<input type="file" id="file" name="file[]" multiple><br>
	</div>

	<div class="formRow">
		<input type="submit" name="upload" value="Upload">
	</div>
</div>
</form>

This setup allows file uploading even if JavaScript is not enabled.  (Note to IT snobs:  get over yourselves and turn JavaScript back on)

The CSS

The “drop zone” and “progress bar” areas can be easily styled in any fashion you’d like.  My sample CSS looks like this:

.droppable {
	border: #ccc 1px solid;
	border-radius: 8px;
	background: #eee;
	color: #666;
	padding: 20px;
	margin: 10px;
	clear: both;
	text-align: center;
}

.droppable.hover {
	background: #ddd;
}

.uploadList {
	margin: 0;
	padding: 0;
	list-style: none;
}

.uploadItem {
	overflow: hidden;
	border-bottom: #BCBCBC 1px solid;
	margin: 0 20px;
	padding: 3px;
}

.uploadItem span {
	overflow: hidden;
	width: 150px;
	float: left;
	display: block;
}

a.addInputRow,
a.delInputRow,
.uploadItem a {
	display: inline-block;
	background: url(add.png) no-repeat;
	height: 16px;
	width: 16px;
	text-indent: -999px;
}

.uploadItem a {
	float: left;
	display: block;
	padding-left: 20px;
	background-image: url(delete.png);
}

a.delInputRow {
	background-image: url(delete.png);
}

.progress {
	margin: 5px 0;
	height: 15px;
	border-radius: 3px;
	background: #545A74;
}

Since we have (unfortunately) become accustomed to the ugly INPUT type=file, my only CSS advice is to make sure you make not only your “drop zone” apparent but explain that the user should drag and drop.

The MooTools JavaScript

Arian has provided 3 JavaScript classes within his mootools-form-upload repository:

• Form.Upload:  The main worker class, detecting the browser capabilities and building a file uploader based on those features
• Form.MultiFileInput:  A class which builds and manages the list of files to be uploaded.
• Request.File:  Manages the FormData object, sends files, and reports progress.

Another resource, iFrameFormRequest, can be included in case the user is rocking a legacy browser.  With the resources above added to the page, let’s set up our drag and drop file uploader:

window.addEvent('domready', function(){
	
	// Create the file uploader
	var upload = new Form.Upload('file', {
		dropMsg: "Drop files here",
		onComplete: function(){
			alert('Files uploaded!');
		}
	});

	// Use iFrameFormRequest, which posts to iFrame 
	if (!upload.isModern()) {
		new iFrameFormRequest('uploadForm', {
			onComplete: function(response){
				alert('Files uploaded!');
			}
		});
	}

});

We start by creating an instance of Form.Upload, passing it the INPUT node and the class options.  The onComplete option is most important, as it represents the event that fires when all uploads have completed, allowing you to notify the user.

For more customizable uploads, like notifications for progress and success, you can pair Form.MultipleFileInput and Request.File directly:

// From ReadMe.md

// the input element, the list (ul) and the drop zone element.
var input, list, drop;
// Form.MultipleFileInput instance
var inputFiles = new Form.MultipleFileInput(input, list, drop, {
    onDragenter: drop.addClass.pass('hover', drop),
    onDragleave: drop.removeClass.pass('hover', drop),
    onDrop: drop.removeClass.pass('hover', drop)
});

// Request instance;
var request = new Request.File({
    url: 'files.php'
    // onSuccess
    // onProgress
});

myForm.addEvent('submit', function(event){
    event.preventDefault();
    inputFiles.getFiles().each(function(file){
        request.append('url[]' , file);
    });
    request.send();
});

This solution would be good for using detailed progress bars.

Outstanding work once again by Arian.  His contribution to the MooTools JavaScript framework has been priceless, and he continues that effort with his drag and drop file upload system.  These classes prove the power of MooTools and the advancement of browsers today.  Give your users the elegant option of drag and drop uploads!

Drag and Drop MooTools File Uploads is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

One of the more impressive MooTools plugins to hit the Forge recently was The Wall by Marco Dell’Anna.  The Wall creates an endless grid of elements which can be grabbed and dragged, fading in elements as they are encountered.  Let me show you a quick usage of the Wall!

The HTML

There are two elements in the setup: a viewport and a wall holder:

<div id="viewport">
	<div id="wall"></div>
</div>

Easy enough.

The CSS

The CSS must be configured to accommodate your wall.  Your viewport’s height and width properties should be multiples of your block heights.  You don’t have to configure the viewport that way, but it you wall will be more visually appealing.

#viewport		{ border:1px solid #ccc; width:450px; height:450px; position:relative; overflow:hidden; }
#wall			{ z-index:1; }
#wall img		{ width:150px; height:150px; display:block; float:left; }

My viewport will be 450 x 450, with each element being 150 x 150.

The MooTools JavaScript

It all starts by creating a Wall instance, providing width, height, rangex, and rangey attributes, providing them as the size of the elements (or not):

// When the DOM is ready
window.addEvent("domready", function() {
	
	// Define a few variables, including the number of images and the "current index"
	var numImages = 23, // 24 images, 0 index
		counter = 0;
		
	// Create the Wall
	new Wall("wall", {
		width: 150,
		height: 150,
		rangex: [-150,150],
		rangey: [-150,150],
		callOnUpdate: function(items) {
			// For every item returned...
			items.each(function(item) {
				// Inject a new image, fade it in
				new Element("img", {
					src: (++counter) + ".jpg",
					styles: {
						opacity: 0
					}
				}).inject(item.node).fade(1);
				// Reset to image one if the maxlength is greater than the counter
				if(counter > numImages) counter = 1;
			});
		}
	}).initWall();	
});

The callOnUpdate method is most important, providing an index by which you can inject your new element (in our case, an image).  Once the counter reaches its maximum length, the index is reset, and the wall continues!

Awesome work by Marco.  My example is just the most basic of usages — visit Marco’s website to see the additional options and examples he has provided.  I can see someone using The Wall to generate a very creative, all-encompassing website!

MooTools Wall Plugin is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.