widget.js | |
---|---|
Base for all widgets. A widget uses a HTML canvas (see htmlCanvas.js) to render itself using Usage:
Widgets can also be rendered on a HTML canvas (since widget implements
It is therefor easy to compose widgets from other widgets. Note: Widgets composed by other widgets must
expose sub widgets using | define(
[
'./widget-extensions',
'./router',
'./events',
'./htmlCanvas',
'jquery'
],
function (ext, router, events, htmlCanvas, jQuery) { |
| |
WidgetUsage: | var widget = function (spec, my) {
my = my || {};
spec = spec || {};
var that = {}; |
Unique widget id. Provided by id argument or auto generated. | var id = spec.id || idGenerator.newId(); |
Public/Protected API | |
Mix in Events (See events.js) Trigger events using:
Listen for events:
or more commonly: | jQuery.extend(that, events.eventhandler()); |
Third party protected extensions added to | for (var extProperty in ext) {
if (ext.hasOwnProperty(extProperty)) {
my[extProperty] = ext[extProperty];
}
} |
Returns sub widgets of the widget. Needed to traverse widget tree. Override in concrete widgets! | that.widgets = function () {
return [];
};
|
Expose widget id | that.getId = function () {
return id;
};
that.id = function () {
return id;
};
|
Route / Controller extensions | |
Returns link to route/path | my.linkTo = function (path) {
return router.router.linkTo(path);
}; |
Redirects to route/path | my.redirectTo = function (path) {
router.router.redirectTo(path);
};
|
Render extensions | |
Append widget to DOM-element matched by aJQuery | that.appendTo = function (aJQuery) {
that.renderOn(htmlCanvas(aJQuery));
}; |
Same as | that.replace = function (aJQuery) {
var canvas = htmlCanvas(aJQuery);
canvas.root.asJQuery().empty();
that.renderOn(canvas);
}; |
Implemention for Basicly it allows us to do: | that.appendToBrush = function (aTagBrush) {
that.appendTo(aTagBrush.asJQuery());
}; |
Return JQuery that match root element (div). | that.asJQuery = function () {
return jQuery('#' + that.getId());
}; |
Update supportmakes it possible to do
If you decide to override | |
True if widget have rendered content. | that.isRendered = function () {
return that.asJQuery().length > 0;
}; |
Renders a wrapper/root for widget - a div as default | my.renderRoot = function (html) {
return html.div().id(id);
}; |
Renders the acctual content inside the wrapper div. Override in concrete widgets! | that.renderContentOn = function (html) {
}; |
Renders widget by wrapping | that.renderOn = function (html) {
my.renderRoot(html).render(that.renderContentOn);
}; |
| that.update = function () {
if (!that.isRendered()) {
return;
}
var rootCanvas = htmlCanvas(that.asJQuery());
rootCanvas.root.asJQuery().empty();
that.renderContentOn(rootCanvas);
};
return that;
}; |
| |
idGeneratorCreates unique ids used by widgets to identify their root div. | var idGenerator = (function () {
var that = {};
var id = 0;
that.newId = function () {
id += 1;
return id.toString();
};
return that;
})(); |
Exportswidget function | return widget;
}
);
|