implab/implabjs-djx Commit - r48:030ea350f98b

Added support for ContentPane, corrected widget startup calls

cin -

r48:030ea350f98b v1.0.3 default

parent child

Context file:

r48:030ea350f98b

Collapse all files

build.gradle +3 -3

             configureTsMain {
                 compilerOptions {
-                    /*baseUrl = "$projectDir/src"
+                    //baseUrl = "$projectDir/src"
-                    paths = [
+                    /*paths = [
                         "dojo/*" : [ "typings/dojo/*" ],
                         "dijit/*" : [ "typings/dijit/*" ]
                     ]*/
-                    types = ["requirejs", "dojo-typings"]
+                    types = ["requirejs", "dojo-typings", "$projectDir/src/main/typings"]
                 }
             }

src/main/ts/tsx/BuildContextBase.ts +10 -2

             import { isNull, mixin } from "@implab/core-amd/safe";
-            import { isPlainObject, isNode, isBuildContext, DojoNodePosition, BuildContext } from "./traits";
+            import { isPlainObject, isNode, isBuildContext, DojoNodePosition, BuildContext, isInPage } from "./traits";
             import dom = require("dojo/dom-construct");
             import registry = require("dijit/registry");
             export abstract class BuildContextBase<TNode extends Node> implements BuildContext<TNode> {
                 private _attrs = {};
                 placeAt(refNode: string | Node, position?: DojoNodePosition) {
                     const domNode = this.getDomNode();
                     dom.place(domNode, refNode, position);
-                    registry.findWidgets(domNode).forEach(w => w.startup());
+                    const parentWidget = domNode.parentNode ? registry.getEnclosingWidget(domNode.parentNode) : null;
+                    if ((parentWidget && parentWidget._started) || isInPage(domNode))
+                        this._startup();
+                }
+                _startup () {
+                    registry.findWidgets(this._getDomNode()).forEach(w => w.startup());
                 }
                 abstract _create(attrs: object, children: any[]): void;

src/main/ts/tsx/FunctionComponentContext.ts +8 -7

             import attr = require("dojo/dom-attr");
             import { argumentNotNull } from "@implab/core-amd/safe";
             import { BuildContextBase } from "./BuildContextBase";
+            import registry = require("dijit/registry");
-            export class FunctionComponentContext extends BuildContextBase<Element> {
+            export class FunctionComponentContext extends BuildContextBase<Node> {
-                private _component: (props: any) => Element;
+                private _component: (props: any) => any;
-                private _element: Element | undefined;
+                private _node: Node | undefined;
-                constructor(component: (props: any) => Element) {
+                constructor(component: (props: any) => any) {
                     super();
                     argumentNotNull(component, "component");
                     const _attrs: any = attrs || {};
                     _attrs.children = children.map(x => this.getChildDom(x));
-                    this._element = this._component.call(null, _attrs);
+                    this._node = this.getChildDom(this._component.call(null, _attrs));
                 }
                 _getDomNode() {
-                    if (!this._element)
+                    if (!this._node)
                         throw new Error("The instance of the widget isn't created");
-                    return this._element;
+                    return this._node;
                 }
             }

src/main/ts/tsx/HtmlElementContext.ts +1 0

             import attr = require("dojo/dom-attr");
             import { argumentNotEmptyString } from "@implab/core-amd/safe";
             import { BuildContextBase } from "./BuildContextBase";
+            import registry = require("dijit/registry");
             export class HtmlElementContext extends BuildContextBase<HTMLElement> {
                 elementType: string;

src/main/ts/tsx/WidgetContext.ts +44 -11

             import dom = require("dojo/dom-construct");
             import { argumentNotNull } from "@implab/core-amd/safe";
             import { BuildContextBase } from "./BuildContextBase";
-            import { DojoNodePosition, isWidget } from "./traits";
+            import { DojoNodePosition, isInPage, isWidget } from "./traits";
+            import registry = require("dijit/registry");
+            import ContentPane = require("dijit/layout/ContentPane");
             // tslint:disable-next-line: class-name
             export interface _Widget {
                     const instance = this._getInstance();
                     if (instance.addChild) {
-                        if (child instanceof WidgetContext)
+                        if (child instanceof WidgetContext) {
                             // layout containers add custom logic to addChild methods
                             instance.addChild(child.getWidgetInstance());
-                        else if (isWidget(child))
+                        } else if (isWidget(child)) {
                             instance.addChild(child);
-                        else
+                        } else {
-                            instance.addChild(this.getChildDom(child));
+                            if (!instance.containerNode)
+                                throw new Error("The widget doesn't have neither addChild nor containerNode");
+                            // the current widget isn't started, it's children shouldn't start too
+                            dom.place(this.getChildDom(child), instance.containerNode);
+                        }
                     } else {
                         if (!instance.containerNode)
                             throw new Error("The widget doesn't have neither addChild nor containerNode");
                     }
                 }
-                _create(attrs: object, children: any[]) {
+                _create(attrs: any, children: any[]) {
-                    this._instance = new this.widgetClass(attrs);
+                    if (this.widgetClass.prototype instanceof ContentPane) {
-                    if (children)
+                        // a special case for the ContentPane this is for
+                        // the compatibility with this heavy widget, all
+                        // regular containers could be easily manipulated
+                        // through `containerNode` property or `addChild` method.
+                        // render children to the DocumentFragment
+                        const content = document.createDocumentFragment();
+                        children.forEach(child => content.appendChild(this.getChildDom(child)));
+                        // set the content property to the parameters of the widget
+                        const _attrs = { ...attrs, content };
+                        this._instance = new this.widgetClass(_attrs);
+                    } else {
+                        this._instance = new this.widgetClass(attrs);
                         children.forEach(x => this._addChild(x));
+                    }
                 }
                 private _getInstance() {
                     if (typeof instance.placeAt === "function") {
                         instance.placeAt(refNode, position);
-                        // do we need to force widget startup?
+                        // fix the dojo startup behavior when the widget is placed
-                        if (typeof instance.startup === "function")
+                        // directly to the document and doesn't have any enclosing widgets
-                            instance.startup();
+                        const parentWidget = instance.domNode.parentNode ?
+                            registry.getEnclosingWidget(instance.domNode.parentNode) : null
+                        if (!parentWidget && isInPage(instance.domNode))
+                            this._startup();
                     } else {
+                        // the widget doesn't have a placeAt method, strange but whatever
                         super.placeAt(refNode, position);
                     }
                 }
+                _startup() {
+                    const instance = this._getInstance();
+                    if (typeof instance.startup === "function")
+                        instance.startup();
+                }
                 getWidgetInstance() {
                     this.ensureCreated();
                     return this._getInstance();

src/main/ts/tsx/traits.ts +7 0

@@ -64,3 +64,10 export function isWidgetConstructor(v: a
64	"buildRendering" in v.prototype	64	"buildRendering" in v.prototype
65	);	65	);
66	}	66	}
		67
		68	/** Tests whether the specified node is placed in visible dom.
		69	* @param {Node} node The node to test
		70	*/
		71	export function isInPage(node: Node) {
		72	return (node === document.body) ? false : document.body.contains(node);
		73	}

General Comments 0

Write
Preview

You need to be logged in to leave comments. Login now

No TODOs yet

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings
t s	Toggle sidebar on some pages