implab/implabjs-djx Commit - r57:f2499237b5bf

DjxWidgetBase: implemented copying content from srcNode to contentNode

cin -

r57:f2499237b5bf v1.0.9 default

parent child

Context file:

r57:f2499237b5bf

Collapse all files

package.json +1 -1

             {
                 "name": "@implab/djx",
                 "version": "0.0.1-dev",
                 "description": "Supports using dojo version 1 with typescript and .tsx files",
                 "keywords": [
                     "dojo",
                     "tsx",
                     "typescript",
                     "widgets"
                 ],
                 "author": "Implab team",
                 "license": "BSD-2-Clause",
-                "repository": "https://hg.code.sf.net/p/implabjs/djx",
+                "repository": "https://code.implab.org/implab/implabjs-djx",
                 "publishConfig": {
                     "access": "public"
                 },
                 "peerDependencies": {
                     "dojo": "1.16.0",
                     "@implab/core-amd": "^1.4.0"
                 },
                 "devDependencies": {
                     "@implab/core-amd": "^1.4.0",
                     "@types/chai": "4.1.3",
                     "@types/requirejs": "2.1.31",
                     "@types/yaml": "1.2.0",
                     "chai": "4.2.0",
                     "dojo": "1.16.0",
                     "dojo-typings": "~1.11.9",
                     "eslint": "6.8.0",
                     "tslint": "^6.1.3",
                     "typescript": "4.0.2",
                     "yaml": "~1.7.2",
                     "requirejs": "2.3.6"
                 }
             }

src/main/ts/tsx/DjxWidgetBase.ts +12 -1

             import { djbase, djclass } from "../declare";
             import _WidgetBase = require("dijit/_WidgetBase");
             import _AttachMixin = require("dijit/_AttachMixin");
             import { BuildContext, isNode, startupWidgets } from "./traits";
             import registry = require("dijit/registry");
             // type Handle = dojo.Handle;
             export interface EventArgs {
                 bubbles?: boolean;
                 cancelable?: boolean;
                 composed?: boolean;
             }
             export interface DjxWidgetBase<Attrs = any, Events extends { [name in keyof Events]: Event } = any> {
                 set<K extends keyof Attrs & string>(key: K, value: Attrs[K]): this;
                 set(props: Partial<Attrs>): this;
                 get<K extends keyof Attrs & string>(key: K): Attrs[K];
                 on<K extends keyof Events & string>(eventName: K, cb: (evt: Events[K]) => void): dojo.WatchHandle;
                 emit<K extends keyof Events & string>(eventName: K, evt: Omit<Events[K], keyof Event> & EventArgs): void;
             }
             @djclass
             export abstract class DjxWidgetBase<Attrs = any, Events = any> extends djbase(_WidgetBase, _AttachMixin) {
                 buildRendering() {
                     this.domNode = this.render().getDomNode();
                     super.buildRendering();
+                    // now we should get assigned data-dojo-attach-points
+                    // place the contents of the original srcNode to the containerNode
+                    const src = this.srcNodeRef;
+                    const dest = this.containerNode;
+                    if (src && dest) {
+                        while (src.firstChild)
+                            dest.appendChild(src.firstChild);
+                    }
                 }
                 abstract render(): BuildContext<HTMLElement>;
                 _processTemplateNode<T extends (Element | Node | _WidgetBase)>(
                     baseNode: T,
                     getAttrFunc: (baseNode: T, attr: string) => string,
                     // tslint:disable-next-line: ban-types
                     attachFunc: (node: T, type: string, func?: Function) => dojo.Handle
                 ): boolean {
                     if (isNode(baseNode)) {
                         const w = registry.byNode(baseNode);
                         if (w) {
                             // from dijit/_WidgetsInTemplateMixin
                             this._processTemplateNode(w,
                                 (n, p) => n.get(p), // callback to get a property of a widget
                                 (widget, type, callback) => {
                                     if (!callback)
                                         throw new Error("The callback must be specified");
                                     // callback to do data-dojo-attach-event to a widget
                                     if (type in widget) {
                                         // back-compat, remove for 2.0
                                         return widget.connect(widget, type, callback as EventListener);
                                     } else {
                                         // 1.x may never hit this branch, but it's the default for 2.0
                                         return widget.on(type, callback);
                                     }
                                 });
                             // don't process widgets internals
                             return false;
                         }
                     }
                     return super._processTemplateNode(baseNode, getAttrFunc, attachFunc);
                 }
                 /** Starts current widget and all its supporting widgets (placed outside
-                 * `containerNode`) and child widgets (placed inside `containerNode`)*/
+                 * `containerNode`) and child widgets (placed inside `containerNode`)
+                 */
                 startup() {
                     // startup supporting widgets
                     startupWidgets(this.domNode, this.containerNode);
                     super.startup();
                 }
             }

src/test/ts/view/MyWidget.tsx +5 -1

             import { djbase, djclass, bind, prototype, AbstractConstructor } from "../declare";
             import { DjxWidgetBase } from "../tsx/DjxWidgetBase";
             import { createElement } from "../tsx";
             interface MyWidgetAttrs {
                 title: string;
                 counter: number;
             }
             interface MyWidgetEvents {
                 "count-inc": Event;
                 "count-dec": Event;
             }
             @djclass
             export class MyWidget extends djbase(DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>>) {
                 @bind({ node: "titleNode", type: "innerHTML" })
                 title = "";
                 @prototype()
                 counter = 0;
                 render() {
                     const Frame = (props: any) => <div>{props.children}</div>;
-                    return <div className="myWidget" tabIndex={3} style={{ alignContent: "center", border: "1px solid" }} >
+                    return <div className="myWidget" onsubmit={e => this._onSubmit(e)} tabIndex={3} style={{ alignContent: "center", border: "1px solid" }} >
                         <h1 data-dojo-attach-point="titleNode"></h1>
                         <Frame>
                             <span class="up-button" onclick={e => this._onIncClick(e)}>[+]</span>
                             <span class="down-button" onclick={() => this._onDecClick()}>[-]</span>
                         </Frame>
                     </div>;
                 }
+                _onSubmit(e: Event) {
+                }
                 _onIncClick(e: MouseEvent) {
                     this.emit("count-inc", { bubbles: false });
                 }
                 _onDecClick() {
                     this.emit("count-dec", { bubbles: false });
                 }
             }

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