##// END OF EJS Templates
DjxWidgetBase: implemented copying content from srcNode to contentNode
cin -
r57:f2499237b5bf v1.0.9 default
parent child
Show More
@@ -1,35 +1,35
1 {
1 {
2 "name": "@implab/djx",
2 "name": "@implab/djx",
3 "version": "0.0.1-dev",
3 "version": "0.0.1-dev",
4 "description": "Supports using dojo version 1 with typescript and .tsx files",
4 "description": "Supports using dojo version 1 with typescript and .tsx files",
5 "keywords": [
5 "keywords": [
6 "dojo",
6 "dojo",
7 "tsx",
7 "tsx",
8 "typescript",
8 "typescript",
9 "widgets"
9 "widgets"
10 ],
10 ],
11 "author": "Implab team",
11 "author": "Implab team",
12 "license": "BSD-2-Clause",
12 "license": "BSD-2-Clause",
13 "repository": "https://hg.code.sf.net/p/implabjs/djx",
13 "repository": "https://code.implab.org/implab/implabjs-djx",
14 "publishConfig": {
14 "publishConfig": {
15 "access": "public"
15 "access": "public"
16 },
16 },
17 "peerDependencies": {
17 "peerDependencies": {
18 "dojo": "1.16.0",
18 "dojo": "1.16.0",
19 "@implab/core-amd": "^1.4.0"
19 "@implab/core-amd": "^1.4.0"
20 },
20 },
21 "devDependencies": {
21 "devDependencies": {
22 "@implab/core-amd": "^1.4.0",
22 "@implab/core-amd": "^1.4.0",
23 "@types/chai": "4.1.3",
23 "@types/chai": "4.1.3",
24 "@types/requirejs": "2.1.31",
24 "@types/requirejs": "2.1.31",
25 "@types/yaml": "1.2.0",
25 "@types/yaml": "1.2.0",
26 "chai": "4.2.0",
26 "chai": "4.2.0",
27 "dojo": "1.16.0",
27 "dojo": "1.16.0",
28 "dojo-typings": "~1.11.9",
28 "dojo-typings": "~1.11.9",
29 "eslint": "6.8.0",
29 "eslint": "6.8.0",
30 "tslint": "^6.1.3",
30 "tslint": "^6.1.3",
31 "typescript": "4.0.2",
31 "typescript": "4.0.2",
32 "yaml": "~1.7.2",
32 "yaml": "~1.7.2",
33 "requirejs": "2.3.6"
33 "requirejs": "2.3.6"
34 }
34 }
35 }
35 }
@@ -1,77 +1,88
1 import { djbase, djclass } from "../declare";
1 import { djbase, djclass } from "../declare";
2 import _WidgetBase = require("dijit/_WidgetBase");
2 import _WidgetBase = require("dijit/_WidgetBase");
3 import _AttachMixin = require("dijit/_AttachMixin");
3 import _AttachMixin = require("dijit/_AttachMixin");
4 import { BuildContext, isNode, startupWidgets } from "./traits";
4 import { BuildContext, isNode, startupWidgets } from "./traits";
5 import registry = require("dijit/registry");
5 import registry = require("dijit/registry");
6
6
7 // type Handle = dojo.Handle;
7 // type Handle = dojo.Handle;
8
8
9 export interface EventArgs {
9 export interface EventArgs {
10 bubbles?: boolean;
10 bubbles?: boolean;
11
11
12 cancelable?: boolean;
12 cancelable?: boolean;
13
13
14 composed?: boolean;
14 composed?: boolean;
15 }
15 }
16
16
17 export interface DjxWidgetBase<Attrs = any, Events extends { [name in keyof Events]: Event } = any> {
17 export interface DjxWidgetBase<Attrs = any, Events extends { [name in keyof Events]: Event } = any> {
18 set<K extends keyof Attrs & string>(key: K, value: Attrs[K]): this;
18 set<K extends keyof Attrs & string>(key: K, value: Attrs[K]): this;
19 set(props: Partial<Attrs>): this;
19 set(props: Partial<Attrs>): this;
20 get<K extends keyof Attrs & string>(key: K): Attrs[K];
20 get<K extends keyof Attrs & string>(key: K): Attrs[K];
21
21
22 on<K extends keyof Events & string>(eventName: K, cb: (evt: Events[K]) => void): dojo.WatchHandle;
22 on<K extends keyof Events & string>(eventName: K, cb: (evt: Events[K]) => void): dojo.WatchHandle;
23
23
24 emit<K extends keyof Events & string>(eventName: K, evt: Omit<Events[K], keyof Event> & EventArgs ): void;
24 emit<K extends keyof Events & string>(eventName: K, evt: Omit<Events[K], keyof Event> & EventArgs): void;
25 }
25 }
26
26
27 @djclass
27 @djclass
28 export abstract class DjxWidgetBase<Attrs = any, Events = any> extends djbase(_WidgetBase, _AttachMixin) {
28 export abstract class DjxWidgetBase<Attrs = any, Events = any> extends djbase(_WidgetBase, _AttachMixin) {
29
29
30 buildRendering() {
30 buildRendering() {
31 this.domNode = this.render().getDomNode();
31 this.domNode = this.render().getDomNode();
32 super.buildRendering();
32 super.buildRendering();
33
34 // now we should get assigned data-dojo-attach-points
35 // place the contents of the original srcNode to the containerNode
36 const src = this.srcNodeRef;
37 const dest = this.containerNode;
38
39 if (src && dest) {
40 while (src.firstChild)
41 dest.appendChild(src.firstChild);
42 }
33 }
43 }
34
44
35 abstract render(): BuildContext<HTMLElement>;
45 abstract render(): BuildContext<HTMLElement>;
36
46
37 _processTemplateNode<T extends (Element | Node | _WidgetBase)>(
47 _processTemplateNode<T extends (Element | Node | _WidgetBase)>(
38 baseNode: T,
48 baseNode: T,
39 getAttrFunc: (baseNode: T, attr: string) => string,
49 getAttrFunc: (baseNode: T, attr: string) => string,
40 // tslint:disable-next-line: ban-types
50 // tslint:disable-next-line: ban-types
41 attachFunc: (node: T, type: string, func?: Function) => dojo.Handle
51 attachFunc: (node: T, type: string, func?: Function) => dojo.Handle
42 ): boolean {
52 ): boolean {
43 if (isNode(baseNode)) {
53 if (isNode(baseNode)) {
44 const w = registry.byNode(baseNode);
54 const w = registry.byNode(baseNode);
45 if (w) {
55 if (w) {
46 // from dijit/_WidgetsInTemplateMixin
56 // from dijit/_WidgetsInTemplateMixin
47 this._processTemplateNode(w,
57 this._processTemplateNode(w,
48 (n, p) => n.get(p), // callback to get a property of a widget
58 (n, p) => n.get(p), // callback to get a property of a widget
49 (widget, type, callback) => {
59 (widget, type, callback) => {
50 if (!callback)
60 if (!callback)
51 throw new Error("The callback must be specified");
61 throw new Error("The callback must be specified");
52
62
53 // callback to do data-dojo-attach-event to a widget
63 // callback to do data-dojo-attach-event to a widget
54 if (type in widget) {
64 if (type in widget) {
55 // back-compat, remove for 2.0
65 // back-compat, remove for 2.0
56 return widget.connect(widget, type, callback as EventListener);
66 return widget.connect(widget, type, callback as EventListener);
57 } else {
67 } else {
58 // 1.x may never hit this branch, but it's the default for 2.0
68 // 1.x may never hit this branch, but it's the default for 2.0
59 return widget.on(type, callback);
69 return widget.on(type, callback);
60 }
70 }
61
71
62 });
72 });
63 // don't process widgets internals
73 // don't process widgets internals
64 return false;
74 return false;
65 }
75 }
66 }
76 }
67 return super._processTemplateNode(baseNode, getAttrFunc, attachFunc);
77 return super._processTemplateNode(baseNode, getAttrFunc, attachFunc);
68 }
78 }
69
79
70 /** Starts current widget and all its supporting widgets (placed outside
80 /** Starts current widget and all its supporting widgets (placed outside
71 * `containerNode`) and child widgets (placed inside `containerNode`)*/
81 * `containerNode`) and child widgets (placed inside `containerNode`)
82 */
72 startup() {
83 startup() {
73 // startup supporting widgets
84 // startup supporting widgets
74 startupWidgets(this.domNode, this.containerNode);
85 startupWidgets(this.domNode, this.containerNode);
75 super.startup();
86 super.startup();
76 }
87 }
77 }
88 }
@@ -1,46 +1,50
1 import { djbase, djclass, bind, prototype, AbstractConstructor } from "../declare";
1 import { djbase, djclass, bind, prototype, AbstractConstructor } from "../declare";
2
2
3 import { DjxWidgetBase } from "../tsx/DjxWidgetBase";
3 import { DjxWidgetBase } from "../tsx/DjxWidgetBase";
4 import { createElement } from "../tsx";
4 import { createElement } from "../tsx";
5
5
6 interface MyWidgetAttrs {
6 interface MyWidgetAttrs {
7 title: string;
7 title: string;
8
8
9 counter: number;
9 counter: number;
10 }
10 }
11
11
12 interface MyWidgetEvents {
12 interface MyWidgetEvents {
13 "count-inc": Event;
13 "count-inc": Event;
14
14
15 "count-dec": Event;
15 "count-dec": Event;
16 }
16 }
17
17
18
18
19 @djclass
19 @djclass
20 export class MyWidget extends djbase(DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>>) {
20 export class MyWidget extends djbase(DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>>) {
21
21
22 @bind({ node: "titleNode", type: "innerHTML" })
22 @bind({ node: "titleNode", type: "innerHTML" })
23 title = "";
23 title = "";
24
24
25 @prototype()
25 @prototype()
26 counter = 0;
26 counter = 0;
27
27
28 render() {
28 render() {
29 const Frame = (props: any) => <div>{props.children}</div>;
29 const Frame = (props: any) => <div>{props.children}</div>;
30 return <div className="myWidget" tabIndex={3} style={{ alignContent: "center", border: "1px solid" }} >
30 return <div className="myWidget" onsubmit={e => this._onSubmit(e)} tabIndex={3} style={{ alignContent: "center", border: "1px solid" }} >
31 <h1 data-dojo-attach-point="titleNode"></h1>
31 <h1 data-dojo-attach-point="titleNode"></h1>
32 <Frame>
32 <Frame>
33 <span class="up-button" onclick={e => this._onIncClick(e)}>[+]</span>
33 <span class="up-button" onclick={e => this._onIncClick(e)}>[+]</span>
34 <span class="down-button" onclick={() => this._onDecClick()}>[-]</span>
34 <span class="down-button" onclick={() => this._onDecClick()}>[-]</span>
35 </Frame>
35 </Frame>
36 </div>;
36 </div>;
37 }
37 }
38
38
39 _onSubmit(e: Event) {
40
41 }
42
39 _onIncClick(e: MouseEvent) {
43 _onIncClick(e: MouseEvent) {
40 this.emit("count-inc", { bubbles: false });
44 this.emit("count-inc", { bubbles: false });
41 }
45 }
42
46
43 _onDecClick() {
47 _onDecClick() {
44 this.emit("count-dec", { bubbles: false });
48 this.emit("count-dec", { bubbles: false });
45 }
49 }
46 }
50 }
General Comments 0
You need to be logged in to leave comments. Login now