implab/implabjs-djx Commit - r81:cc5be30e84f8

fixed DjxWidgetBase._eventHandlers initialization

cin -

r81:cc5be30e84f8 v1.2.4 default

parent child

Context file:

r81:cc5be30e84f8

Collapse all files

djx/src/main/ts/tsx/DjxWidgetBase.ts +11 -9

-            import { djbase, djclass } from "../declare";
+            import { djbase, djclass, prototype } from "../declare";
             import _WidgetBase = require("dijit/_WidgetBase");
             import _AttachMixin = require("dijit/_AttachMixin");
             import { Rendition, isNode } from "./traits";
             import registry = require("dijit/registry");
             // type Handle = dojo.Handle;
             export interface EventArgs {
                 bubbles?: boolean;
                 cancelable?: boolean;
                 composed?: boolean;
             }
             export interface DjxWidgetBase<Attrs = {}, Events extends { [name in keyof Events]: Event } = {}> extends
                 _WidgetBase<Events> {
                 /** This property is declared only for type inference to work, it is never assigned
                  * and should not be used.
                  */
                 readonly _eventMap: Events & GlobalEventHandlersEventMap;
+                /** The list of pairs of event and method names. When the widget is created all methods from
+                 * this list will be connected to corresponding events.
+                 *
+                 * This property is maintained in the prototype
+                 */
+                _eventHandlers: Array<{
+                    eventName: string,
+                    handlerMethod: keyof any;
+                }>;
             }
             type _super = {
                 startup(): void;
             };
             @djclass
             export abstract class DjxWidgetBase<Attrs = {}, Events = {}> extends djbase<_super, _AttachMixin>(_WidgetBase, _AttachMixin) {
-                /** The list of pairs of event and method names. When the widget is created all methods from
-                 * this list will be connected to corresponding events.
-                 */
-                _eventHandlers: Array<{
-                    eventName: string,
-                    handlerMethod: keyof any;
-                }> = [];
                 buildRendering() {
                     this.domNode = this.render().getDomNode();
                     super.buildRendering();
                     // now we should get assigned data-dojo-attach-points
                     // place the contents of the original srcNode to the containerNode
                     const src = this.srcNodeRef;
                     const dest = this.containerNode;
                     // the donNode is constructed now we need to connect event handlers
                     this._connectEventHandlers();
                     if (src && dest) {
                         while (src.firstChild)
                             dest.appendChild(src.firstChild);
                     }
                 }
                 abstract render(): Rendition<HTMLElement>;
                 private _connectEventHandlers() {
                     this._eventHandlers.forEach(({eventName, handlerMethod}) => {
                         const handler = this[handlerMethod as keyof this];
                         if (typeof handler === "function")
                             this.on(eventName, handler.bind(this));
                     });
                 }
                 _processTemplateNode<T extends (Element | Node | _WidgetBase)>(
                     baseNode: T,
                     getAttrFunc: (baseNode: T, attr: string) => any,
                     // tslint:disable-next-line: ban-types
                     attachFunc: (node: T, type: string, func?: Function) => dojo.Handle
                 ): boolean {
                     if (isNode(baseNode)) {
                         const w = registry.byNode(baseNode);
                         if (w) {
                             // from dijit/_WidgetsInTemplateMixin
                             this._processTemplateNode(w,
                                 (n, p) => n.get(p as any), // callback to get a property of a widget
                                 (widget, type, callback) => {
                                     if (!callback)
                                         throw new Error("The callback must be specified");
                                     // callback to do data-dojo-attach-event to a widget
                                     if (type in widget) {
                                         // back-compat, remove for 2.0
                                         return widget.connect(widget, type, callback as EventListener);
                                     } else {
                                         // 1.x may never hit this branch, but it's the default for 2.0
                                         return widget.on(type, callback);
                                     }
                                 });
                             // don't process widgets internals
                             return false;
                         }
                     }
                     return super._processTemplateNode(baseNode, getAttrFunc, attachFunc);
                 }
                 /** Starts current widget and all its supporting widgets (placed outside
                  * `containerNode`) and child widgets (placed inside `containerNode`)
                  */
                 startup() {
                     // startup supporting widgets
                     registry.findWidgets(this.domNode, this.containerNode).forEach(w => w.startup());
                     super.startup();
                 }
             }

djx/src/main/ts/tsx/traits.ts +3 0

             import { IDestroyable, IRemovable } from "@implab/core-amd/interfaces";
             import { isDestroyable } from "@implab/core-amd/safe";
             import _WidgetBase = require("dijit/_WidgetBase");
             import registry = require("dijit/registry");
             import dom = require("dojo/dom-construct");
             import Stateful = require("dojo/Stateful");
             import { FunctionRendition } from "./FunctionRendition";
             import { DjxWidgetBase } from "./DjxWidgetBase";
             type _WidgetBaseConstructor = typeof _WidgetBase;
             export type DojoNodePosition = "first" | "after" | "before" | "last" | "replace" | "only" | number;
             export interface Rendition<TNode extends Node = Node> {
                 getDomNode(): TNode;
                 placeAt(refNode: string | Node, position?: DojoNodePosition): void;
             }
             /**
              * @deprecated use Rendition
              */
             export type BuildContext<TNode extends Node = Node> = Rendition<TNode>;
             export interface IRecursivelyDestroyable {
                 destroyRecursive(): void;
             }
             export function isNode(el: any): el is Node {
                 return el && el.nodeName && el.nodeType;
             }
             export function isElementNode(el: any): el is Element {
                 return isNode(el) && el.nodeType === 1;
             }
             export function isTextNode(el: any): el is Text {
                 return isNode(el) && el.nodeType === 3;
             }
             export function isProcessingInstructionNode(el: any): el is ProcessingInstruction {
                 return isNode(el) && el.nodeType === 7;
             }
             export function isCommentNode(el: any): el is Comment {
                 return isNode(el) && el.nodeType === 8;
             }
             export function isDocumentNode(el: any): el is Document {
                 return isNode(el) && el.nodeType === 9;
             }
             export function isDocumentTypeNode(el: any): el is DocumentType {
                 return isNode(el) && el.nodeType === 10;
             }
             export function isDocumentFragmentNode(el: any): el is DocumentFragment {
                 return isNode(el) && el.nodeType === 11;
             }
             export function isWidget(v: any): v is _WidgetBase {
                 return v && "domNode" in v;
             }
             export function isRendition(v: any): v is Rendition {
                 return typeof v === "object" && typeof v.getDomElement === "function";
             }
             /**
              * @deprecated use isRendition
              */
             export const isBuildContext = isRendition;
             export function isPlainObject(v: object) {
                 if (typeof v !== "object")
                     return false;
                 const vp = Object.getPrototypeOf(v);
                 return !vp || vp === Object.prototype;
             }
             export function isWidgetConstructor(v: any): v is _WidgetBaseConstructor {
                 return typeof v === "function" && v.prototype && (
                     "domNode" in v.prototype ||
                     "buildRendering" in v.prototype
                 );
             }
             /** Tests whether the specified node is placed in visible dom.
              *  @param {Node} node The node to test
              */
             export function isInPage(node: Node) {
                 return (node === document.body) ? false : document.body.contains(node);
             }
             export function isRecursivelyDestroyable(target: any): target is IRecursivelyDestroyable {
                 return target && typeof target.destroyRecursive === "function";
             }
             /** Destroys DOM Node with all contained widgets.
              * If the specified node is the root node of a widget, then the
              * widget will be destroyed.
              *
              * @param target DOM Node or widget to destroy
              */
             export function destroy(target: Node | IDestroyable | IRecursivelyDestroyable) {
                 if (isRecursivelyDestroyable(target)) {
                     target.destroyRecursive();
                 } else if (isDestroyable(target)) {
                     target.destroy();
                 } else if (isNode(target)) {
                     const w = isElementNode(target) ? registry.byNode(target) : undefined;
                     if (w) {
                         w.destroyRecursive();
                     } else {
                         registry.findWidgets(target).forEach(destroy);
                         dom.destroy(target);
                     }
                 }
             }
             /** Empties a content of the specified node and destroys all contained widgets.
              *
              * @param target DOM node to .
              */
             export function emptyNode(target: Node) {
                 registry.findWidgets(target).forEach(destroy);
                 dom.empty(target);
             }
             /** This function starts all widgets inside the DOM node if the target is a node
              * or starts widget itself if the target is the widget. If the specified node
              * associated with the widget that widget will be started.
              *
              * @param target DOM node to find and start widgets or the widget itself.
              */
             export function startupWidgets(target: Node | _WidgetBase, skipNode?: Node) {
                 if (isNode(target)) {
                     const w = isElementNode(target) ? registry.byNode(target) : undefined;
                     if (w) {
                         if (w.startup)
                             w.startup();
                     } else {
                         registry.findWidgets(target, skipNode).forEach(x => x.startup());
                     }
                 } else {
                     if (target.startup)
                         target.startup();
                 }
             }
             type StatefulProps<T> = T extends Stateful<infer A> ? A : never;
             type CleanFn = (instance: IRemovable | IDestroyable) => void;
             /**
              * Observers the property and calls render callback each change.
              *
              * @param target The target object which property will be observed.
              * @param prop The name of the property.
              * @param render The callback which will be called every time the value is changed
              * @param cleanupOrOwner The object with method `own` or an callback to register lifecycle for the observer.
              * @returns Rendition which is created instantly
              */
             export function watch<W extends _WidgetBase, K extends keyof W>(
                 target: W,
                 prop: K,
                 render: (model: W[K]) => any,
                 cleanupOrOwner?: { own: CleanFn } | CleanFn
             ): Rendition;
             /**
              * Observers the property and calls render callback each change.
              *
              * @param target The target object which property will be observed.
              * @param prop The name of the property.
              * @param render The callback which will be called every time the value is changed
              * @param cleanupOrOwner The object with method `own` or an callback to register lifecycle for the observer.
              * @returns Rendition which is created instantly
              */
             export function watch<T extends Stateful, K extends keyof StatefulProps<T>>(
                 target: T,
                 prop: K,
                 render: (model: StatefulProps<T>[K]) => any,
                 cleanupOrOwner?: { own: CleanFn } | CleanFn
             ): Rendition;
             export function watch<T extends Stateful, K extends keyof StatefulProps<T> & string>(
                 target: T,
                 prop: K,
                 render: (model: StatefulProps<T>[K]) => any,
                 cleanupOrOwner: { own: CleanFn } | CleanFn = () => { }
             ) {
                 let rendition = new FunctionRendition(() => render(target.get(prop)));
                 const _own = cleanupOrOwner instanceof Function ? cleanupOrOwner : (x: IRemovable) => cleanupOrOwner.own(x);
                 _own(target.watch(prop, (_name, oldValue, newValue) => {
                     if (oldValue !== newValue) {
                         const newRendition = new FunctionRendition(() => render(newValue));
                         newRendition.placeAt(rendition.getDomNode(), "replace");
                         destroy(rendition.getDomNode());
                         rendition = newRendition;
                     }
                 }));
                 return rendition;
             }
             /** Decorates the method which will be registered as the handle for the specified event.
              * This decorator can be applied to DjxWidgetBase subclass methods.
              *
              * ```
              *  @on("click")
              *  _onClick(eventObj: MouseEvent) {
              *      // ...
              *  }
              * ```
              */
             export const on = <E extends string>(eventName: E) =>
                 <K extends string,
                     T extends DjxWidgetBase<any, { [p in E]: EV }>,
                     EV extends Event
                 >(
                     target: T,
                     key: K,
                     _descriptor: TypedPropertyDescriptor<(eventObj: EV) => void> | TypedPropertyDescriptor<() => void>
                 ): any => {
+                    if(!target._eventHandlers)
+                        target._eventHandlers = [{ eventName, handlerMethod: key }];
+                    else
                         target._eventHandlers.push({ eventName, handlerMethod: key });
                 };

General Comments 0

Write
Preview

You need to be logged in to leave comments. Login now

No TODOs yet

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings
t s	Toggle sidebar on some pages