-
-
Save gdakram/1650717 to your computer and use it in GitHub Desktop.
Basic YUI Widget Structure, commented up to work with yuidocs.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* global YUI */ | |
/** | |
* My Module's purpose | |
* @module my-module | |
* @requires base-build, widget | |
*/ | |
YUI.add("my-module", function (Y) { | |
"use strict"; | |
/** | |
* @class Y.MyWidget | |
* @extends Y.Widget | |
* @constructor | |
**/ | |
Y.MyWidget = Y.Base.create("my-module", Y.Widget, [], { | |
/** | |
* Publishing events and running | |
* instantiations that doesn't require DOM. | |
* @method initializer | |
*/ | |
initializer: function () { | |
// publish any events | |
// do any instantiation that doesn't require DOM | |
}, | |
/** | |
* The renderUI method creates the following {Y.Node}s and appends them to the {contentBox}: | |
* <ol> | |
* <li>Title Node</li> | |
* <li>Button Node</li> | |
* </ol> | |
* @method renderUI | |
*/ | |
renderUI: function () { | |
// create all DOM nodes | |
var title = Y.Node.create("<div></div>"), | |
button = Y.Node.create("<div>Click Me!</div>"); | |
// use this.getClassName(arg1s...) to create unque classes | |
title.addClass(this.getClassName("title")); | |
button.addClass(this.getClassName("button")); | |
// add nodes to the page all at once | |
this.get("contentBox").append(Y.all([title, button])); | |
// store shortcuts for DOM you'll need to reference | |
this._titleNode = title; | |
this._buttonNode = button; | |
}, | |
/** | |
* Bind events listeners in widget. | |
* @method bindUI | |
*/ | |
bindUI: function () { | |
// store references to event handlers you set on other | |
// objects for clean up later | |
this._buttonClickHandler = this._buttonNode.on("click", function (event) { | |
Y.log("you clicked the button!"); | |
event.halt(); | |
}, this); | |
// assign listeners to events on the instance directly | |
// they're cleaned up automatically | |
this.after("titleChange", this._afterTitleChange, this); | |
}, | |
/** | |
* The change event handler for the title attribute. | |
* @private | |
* @method _afterTitleChange | |
* @param {Object} event Title Change Event | |
*/ | |
_afterTitleChange: function (event) { | |
this._titleNode.setContent(event.newVal); | |
}, | |
/** | |
* Method's purpose | |
* @method syncUI | |
*/ | |
syncUI: function () { | |
// now that the DOM is created, syncUI sets it up | |
// given the current state of our ATTRS | |
this._afterTitleChange({ | |
newVal: this.get("title") | |
}); | |
}, | |
/** | |
* Detaching event handlers and nulling node references. | |
* @method destructor | |
*/ | |
destructor: function () { | |
if (this.get("rendered")) { | |
// bindUI was called, clean up events | |
this._buttonClickHandler.detach(); | |
this._buttonClickHandler = null; | |
// renderUI was called, clean up shortcuts | |
this._titleNode = this._buttonNode = null; | |
} | |
} | |
}, { | |
// Public attributes that broadcast change events | |
ATTRS: { | |
/** | |
* The title attribute of the widget. | |
* | |
* @attribute title | |
* @type String | |
* @default "No one gave me a title :(" | |
*/ | |
title: { | |
value: "No one gave me a title :(" | |
} | |
}, | |
// Attributes whose default values can be scraped from HTML | |
HTML_PARSER: { | |
title: function (srcNode) { | |
return srcNode.getAttribute("title"); | |
} | |
} | |
}); | |
}, "3.3.0", { | |
requires: [ | |
"base-build", // provides Y.Base.create | |
"widget" // provides Y.Widget | |
], | |
group: "nfl", // declares the nfl group (important for skins) | |
skinnable: true // declares that your module is skinned | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "YUI Doc Test", | |
"description": "YUIDoc documentation tool written in Javascript", | |
"version": "Version 0.0.1", | |
"url": "", | |
"options": { | |
"linkNatives": "true", | |
"attributesEmit": "true", | |
"outdir": "out/" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You'll need npm (node package manager) installed in your system before yuidoc can be installed.
Clone and install yuidoc from: https://github.com/davglass/yuidocjs. Follow the steps in the project's home page.
Put the two files above into a directory and invoke "yuidoc ." and check out the "out" directory for the output.