##// 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 2 "name": "@implab/djx",
3 3 "version": "0.0.1-dev",
4 4 "description": "Supports using dojo version 1 with typescript and .tsx files",
5 5 "keywords": [
6 6 "dojo",
7 7 "tsx",
8 8 "typescript",
9 9 "widgets"
10 10 ],
11 11 "author": "Implab team",
12 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 14 "publishConfig": {
15 15 "access": "public"
16 16 },
17 17 "peerDependencies": {
18 18 "dojo": "1.16.0",
19 19 "@implab/core-amd": "^1.4.0"
20 20 },
21 21 "devDependencies": {
22 22 "@implab/core-amd": "^1.4.0",
23 23 "@types/chai": "4.1.3",
24 24 "@types/requirejs": "2.1.31",
25 25 "@types/yaml": "1.2.0",
26 26 "chai": "4.2.0",
27 27 "dojo": "1.16.0",
28 28 "dojo-typings": "~1.11.9",
29 29 "eslint": "6.8.0",
30 30 "tslint": "^6.1.3",
31 31 "typescript": "4.0.2",
32 32 "yaml": "~1.7.2",
33 33 "requirejs": "2.3.6"
34 34 }
35 35 }
@@ -1,77 +1,88
1 1 import { djbase, djclass } from "../declare";
2 2 import _WidgetBase = require("dijit/_WidgetBase");
3 3 import _AttachMixin = require("dijit/_AttachMixin");
4 4 import { BuildContext, isNode, startupWidgets } from "./traits";
5 5 import registry = require("dijit/registry");
6 6
7 7 // type Handle = dojo.Handle;
8 8
9 9 export interface EventArgs {
10 10 bubbles?: boolean;
11 11
12 12 cancelable?: boolean;
13 13
14 14 composed?: boolean;
15 15 }
16 16
17 17 export interface DjxWidgetBase<Attrs = any, Events extends { [name in keyof Events]: Event } = any> {
18 18 set<K extends keyof Attrs & string>(key: K, value: Attrs[K]): this;
19 19 set(props: Partial<Attrs>): this;
20 20 get<K extends keyof Attrs & string>(key: K): Attrs[K];
21 21
22 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 27 @djclass
28 28 export abstract class DjxWidgetBase<Attrs = any, Events = any> extends djbase(_WidgetBase, _AttachMixin) {
29 29
30 30 buildRendering() {
31 31 this.domNode = this.render().getDomNode();
32 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 45 abstract render(): BuildContext<HTMLElement>;
36 46
37 47 _processTemplateNode<T extends (Element | Node | _WidgetBase)>(
38 48 baseNode: T,
39 49 getAttrFunc: (baseNode: T, attr: string) => string,
40 50 // tslint:disable-next-line: ban-types
41 51 attachFunc: (node: T, type: string, func?: Function) => dojo.Handle
42 52 ): boolean {
43 53 if (isNode(baseNode)) {
44 54 const w = registry.byNode(baseNode);
45 55 if (w) {
46 56 // from dijit/_WidgetsInTemplateMixin
47 57 this._processTemplateNode(w,
48 58 (n, p) => n.get(p), // callback to get a property of a widget
49 59 (widget, type, callback) => {
50 60 if (!callback)
51 61 throw new Error("The callback must be specified");
52 62
53 63 // callback to do data-dojo-attach-event to a widget
54 64 if (type in widget) {
55 65 // back-compat, remove for 2.0
56 66 return widget.connect(widget, type, callback as EventListener);
57 67 } else {
58 68 // 1.x may never hit this branch, but it's the default for 2.0
59 69 return widget.on(type, callback);
60 70 }
61 71
62 72 });
63 73 // don't process widgets internals
64 74 return false;
65 75 }
66 76 }
67 77 return super._processTemplateNode(baseNode, getAttrFunc, attachFunc);
68 78 }
69 79
70 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 83 startup() {
73 84 // startup supporting widgets
74 85 startupWidgets(this.domNode, this.containerNode);
75 86 super.startup();
76 87 }
77 88 }
@@ -1,46 +1,50
1 1 import { djbase, djclass, bind, prototype, AbstractConstructor } from "../declare";
2 2
3 3 import { DjxWidgetBase } from "../tsx/DjxWidgetBase";
4 4 import { createElement } from "../tsx";
5 5
6 6 interface MyWidgetAttrs {
7 7 title: string;
8 8
9 9 counter: number;
10 10 }
11 11
12 12 interface MyWidgetEvents {
13 13 "count-inc": Event;
14 14
15 15 "count-dec": Event;
16 16 }
17 17
18 18
19 19 @djclass
20 20 export class MyWidget extends djbase(DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>>) {
21 21
22 22 @bind({ node: "titleNode", type: "innerHTML" })
23 23 title = "";
24 24
25 25 @prototype()
26 26 counter = 0;
27 27
28 28 render() {
29 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 31 <h1 data-dojo-attach-point="titleNode"></h1>
32 32 <Frame>
33 33 <span class="up-button" onclick={e => this._onIncClick(e)}>[+]</span>
34 34 <span class="down-button" onclick={() => this._onDecClick()}>[-]</span>
35 35 </Frame>
36 36 </div>;
37 37 }
38 38
39 _onSubmit(e: Event) {
40
41 }
42
39 43 _onIncClick(e: MouseEvent) {
40 44 this.emit("count-inc", { bubbles: false });
41 45 }
42 46
43 47 _onDecClick() {
44 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