| @@ -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:// |
|
|
|
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 | 24 |
emit<K extends keyof Events & string>(eventName: K, evt: Omit<Events[K], keyof Event> & EventArgs |
|
|
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