@@ -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:// |
|
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 |
|
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