| @@ -10,7 +10,7 | |||||
| 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 | }, | |
| @@ -21,7 +21,7 export interface DjxWidgetBase<Attrs = a | |||||
| 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 | |
| @@ -30,6 +30,16 export abstract class DjxWidgetBase<Attr | |||||
| 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>; | |
| @@ -68,7 +78,8 export abstract class DjxWidgetBase<Attr | |||||
| 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); | |
| @@ -27,7 +27,7 export class MyWidget extends djbase(Djx | |||||
| 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> | |
| @@ -36,6 +36,10 export class MyWidget extends djbase(Djx | |||||
| 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 | } | |
        
        General Comments 0
    
    
  
  
                      You need to be logged in to leave comments.
                      Login now
                    
                