diff --git a/build.gradle b/build.gradle --- a/build.gradle +++ b/build.gradle @@ -32,12 +32,12 @@ typescript { configureTsMain { compilerOptions { - /*baseUrl = "$projectDir/src" - paths = [ + //baseUrl = "$projectDir/src" + /*paths = [ "dojo/*" : [ "typings/dojo/*" ], "dijit/*" : [ "typings/dijit/*" ] ]*/ - types = ["requirejs", "dojo-typings"] + types = ["requirejs", "dojo-typings", "$projectDir/src/main/typings"] } } diff --git a/src/main/ts/tsx/BuildContextBase.ts b/src/main/ts/tsx/BuildContextBase.ts --- a/src/main/ts/tsx/BuildContextBase.ts +++ b/src/main/ts/tsx/BuildContextBase.ts @@ -1,9 +1,10 @@ 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 implements BuildContext { private _attrs = {}; @@ -72,7 +73,14 @@ export abstract class BuildContextBase 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; diff --git a/src/main/ts/tsx/FunctionComponentContext.ts b/src/main/ts/tsx/FunctionComponentContext.ts --- a/src/main/ts/tsx/FunctionComponentContext.ts +++ b/src/main/ts/tsx/FunctionComponentContext.ts @@ -2,14 +2,15 @@ import dom = require("dojo/dom-construct 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 { - private _component: (props: any) => Element; +export class FunctionComponentContext extends BuildContextBase { + 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"); @@ -20,13 +21,13 @@ export class FunctionComponentContext ex 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; } } diff --git a/src/main/ts/tsx/HtmlElementContext.ts b/src/main/ts/tsx/HtmlElementContext.ts --- a/src/main/ts/tsx/HtmlElementContext.ts +++ b/src/main/ts/tsx/HtmlElementContext.ts @@ -2,6 +2,7 @@ import dom = require("dojo/dom-construct 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 { elementType: string; diff --git a/src/main/ts/tsx/WidgetContext.ts b/src/main/ts/tsx/WidgetContext.ts --- a/src/main/ts/tsx/WidgetContext.ts +++ b/src/main/ts/tsx/WidgetContext.ts @@ -1,7 +1,9 @@ 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 { @@ -33,13 +35,18 @@ export class WidgetContext extends Build 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 - instance.addChild(this.getChildDom(child)); + } else { + 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"); @@ -49,10 +56,25 @@ export class WidgetContext extends Build } } - _create(attrs: object, children: any[]) { - this._instance = new this.widgetClass(attrs); - if (children) + _create(attrs: any, children: any[]) { + if (this.widgetClass.prototype instanceof ContentPane) { + // 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() { @@ -79,14 +101,25 @@ export class WidgetContext extends Build if (typeof instance.placeAt === "function") { instance.placeAt(refNode, position); - // do we need to force widget startup? - if (typeof instance.startup === "function") - instance.startup(); + // fix the dojo startup behavior when the widget is placed + // directly to the document and doesn't have any enclosing widgets + 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(); diff --git a/src/main/ts/tsx/traits.ts b/src/main/ts/tsx/traits.ts --- a/src/main/ts/tsx/traits.ts +++ b/src/main/ts/tsx/traits.ts @@ -64,3 +64,10 @@ export function isWidgetConstructor(v: a "buildRendering" in v.prototype ); } + +/** Tests whether the specified node is placed in visible dom. + * @param {Node} node The node to test + */ +export function isInPage(node: Node) { + return (node === document.body) ? false : document.body.contains(node); +}