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

              plugins {
                  id "org.implab.gradle-typescript" version "1.3.3"
                  id "ivy-publish"
              }
              typescript {
                  compilerOptions {
                      lib = ["es5", "dom", "scripthost", "es2015.promise", "es2015.symbol", "es2015.iterable"]
                      //listFiles = true
                      declaration = true
                      strict = true
                      types = []
                      module = "amd"
                      it.target = "es5"
                      experimentalDecorators = true
                      jsx = "react"
                      jsxFactory = "createElement"
                      moduleResolution = "node"
                      // dojo-typings are sick
                      skipLibCheck = true
                      // traceResolution = true
                      // baseUrl = "./"
                      // paths = [ "*": [ "$projectDir/src/typings/*" ] ]
                      // baseUrl = "$projectDir/src/typings"
                      // typeRoots = ["$projectDir/src/typings"]
                  }
                  tscCmd = "$projectDir/node_modules/.bin/tsc"
                  tsLintCmd = "$projectDir/node_modules/.bin/tslint"
              	esLintCmd = "$projectDir/node_modules/.bin/eslint"
              }
              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"]
                  }
              }
              configureTsTest {
                  compilerOptions {
                      typeRoots = []
                      types = ["requirejs", sources.main.output.typingsDir.get().toString() ]
                  }
              }
              npmPackMeta {
                  meta {
                      name = "@$npmScope/$project.name"
                  }
              }
              task npmPackTypings(type: Copy) {
                  dependsOn typings
                  npmPackContents.dependsOn it
                  from typescript.typingsDir
                  into npm.packageDir
              }
              task printVersion {
                  doLast {
                      println "packageName: ${npmPackMeta.metadata.get().name}";
                      println "version: $version";
                      println "target: $typescript.compilerOptions.target";
                      println "module: $typescript.compilerOptions.module";
                      println "symbols: $symbols";
                  }
              }
  No newline at end of file

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 = {};
                  private _children = new Array();
                  private _created: boolean = false;
                  visitNext(v: any) {
                      if (this._created)
                          throw new Error("The Element is already created");
                      if (isNull(v) || typeof v === "boolean")
                          // skip null, undefined, booleans ( this will work:  {value && <span>{value}</span>} )
                          return;
                      if (isPlainObject(v)) {
                          mixin(this._attrs, v);
                      } else if (v instanceof Array) {
                          v.forEach(x => this.visitNext(x));
                      } else {
                          this._children.push(v);
                      }
                  }
                  getChildDom(v: any) {
                      const tv = typeof v;
                      if (tv === "string" || tv === "number" || v instanceof RegExp || v instanceof Date) {
                          return document.createTextNode(v.toString());
                      } else if (isNode(v)) {
                          return v;
                      } else if (isBuildContext(v)) {
                          return v.getDomNode();
                      } else {
                          throw new Error("Invalid parameter");
                      }
                  }
                  ensureCreated() {
                      if (!this._created) {
                          this._create(this._attrs, this._children);
                          this._children = [];
                          this._attrs = {};
                          this._created = true;
                      }
                  }
                  /** @deprecated will be removed in 1.0.0, use getDomNode() */
                  getDomElement() {
                      return this.getDomNode();
                  }
                  /** Creates DOM node if not created. No additional actions are taken. */
                  getDomNode() {
                      this.ensureCreated();
                      return this._getDomNode();
                  }
                  /** Creates DOM node if not created, places it to the specified position
                   * and calls startup() method for all widgets contained by this node.
                   *
                   * @param {string | Node} refNode The reference node where the created
                   *   DOM should be placed.
                   * @param {DojoNodePosition} position Optional parameter, specifies the
                   *   position relative to refNode. Default is "last" (i.e. last child).
                   */
                  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;
                  abstract _getDomNode(): TNode;
              }

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

              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<Element> {
-                 private _component: (props: any) => Element;
+             export class FunctionComponentContext extends BuildContextBase<Node> {
+                 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");
                      this._component = component;
                  }
                  _create(attrs: object, children: any[]) {
                      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 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<HTMLElement> {
                  elementType: string;
                  _element: HTMLElement | undefined;
                  constructor(elementType: string) {
                      argumentNotEmptyString(elementType, "elementType");
                      super();
                      this.elementType = elementType;
                  }
                  _addChild(child: any): void {
                      if (!this._element)
                          throw new Error("The HTML element isn't created");
                      dom.place(this.getChildDom(child), this._element);
                  }
                  _create(attrs: object, children: any[]) {
                      this._element = dom.create(this.elementType, attrs);
                      if (children)
                          children.forEach(v => this._addChild(v));
                  }
                  _getDomNode() {
                      if (!this._element)
                          throw new Error("The HTML element isn't created");
                      return this._element;
                  }
              }

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 {
                  domNode: Node;
                  containerNode?: Node;
                  placeAt?(refNode: string | Node, position?: DojoNodePosition): void;
                  startup?(): void;
                  addChild?(widget: any, index?: number): void;
              }
              export type _WidgetCtor = new (attrs: any, srcNode?: string | Node) => _Widget;
              export class WidgetContext extends BuildContextBase<Node> {
                  readonly widgetClass: _WidgetCtor;
                  _instance: _Widget | undefined;
                  constructor(widgetClass: _WidgetCtor) {
                      super();
                      argumentNotNull(widgetClass, "widgetClass");
                      this.widgetClass = widgetClass;
                  }
                  _addChild(child: any): void {
                      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");
                          // the current widget isn't started, it's children shouldn't start too
                          dom.place(this.getChildDom(child), instance.containerNode);
                      }
                  }
-                 _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() {
                      if (!this._instance)
                          throw new Error("The instance of the widget isn't created");
                      return this._instance;
                  }
                  _getDomNode() {
                      if (!this._instance)
                          throw new Error("The instance of the widget isn't created");
                      return this._instance.domNode;
                  }
                  /** Overrides default placeAt implementation. Calls placeAt of the
                   * widget and then starts it.
                   *
                   * @param refNode A node or id of the node where the widget should be placed.
                   * @param position A position relative to refNode.
                   */
                  placeAt(refNode: string | Node, position?: DojoNodePosition) {
                      this.ensureCreated();
                      const instance = this._getInstance();
                      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();
                  }
              }

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

              import _WidgetBase = require("dijit/_WidgetBase");
              type _WidgetBaseConstructor = typeof _WidgetBase;
              export type DojoNodePosition = "first" | "after" | "before" | "last" | "replace" | "only" | number;
              export interface BuildContext<TNode extends Node = Node> {
                  getDomNode(): TNode;
                  placeAt(refNode: string | Node, position?: DojoNodePosition): void;
              }
              export function isNode(el: any): el is Node {
                  return el && el.nodeName && el.nodeType;
              }
              export function isElementNode(el: any): el is Element {
                  return isNode(el) && el.nodeType === 1;
              }
              export function isTextNode(el: any): el is Text {
                  return isNode(el) && el.nodeType === 3;
              }
              export function isProcessingInstructionNode(el: any): el is ProcessingInstruction {
                  return isNode(el) && el.nodeType === 7;
              }
              export function isCommentNode(el: any): el is Comment {
                  return isNode(el) && el.nodeType === 8;
              }
              export function isDocumentNode(el: any): el is Document {
                  return isNode(el) && el.nodeType === 9;
              }
              export function isDocumentTypeNode(el: any): el is DocumentType {
                  return isNode(el) && el.nodeType === 10;
              }
              export function isDocumentFragmentNode(el: any): el is DocumentFragment {
                  return isNode(el) && el.nodeType === 11;
              }
              export function isWidget(v: any): v is _WidgetBase {
                  return v && "domNode" in v;
              }
              export function isBuildContext(v: any): v is BuildContext {
                  return typeof v === "object" && typeof v.getDomElement === "function";
              }
              export function isPlainObject(v: object) {
                  if (typeof v !== "object")
                      return false;
                  const vp = Object.getPrototypeOf(v);
                  return !vp || vp === Object.prototype;
              }
              export function isWidgetConstructor(v: any): v is _WidgetBaseConstructor {
                  return typeof v === "function" && v.prototype && (
                      "domNode" in v.prototype ||
                      "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);
+             }

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