implab/implabjs-djx Files · djx/src/main/ts/tsx/DjxWidgetBase.ts

`Subscribable` is made compatible with rxjs, added map, filter and scan...

`Subscribable` is made compatible with rxjs, added map, filter and scan methods to observables. `watch` can accept either stateful object and a property name to observe or the subscribable value. added ref attribute to the markup elements and widgets. `bind`, `tooggleClass` and `attach` methods can be passed to `ref` attribute in the markup to interact with elemnts and widgets.

cin - - Load All Authors

File last commit:

r102:c65ea2350b1a v1.3


                r102:c65ea2350b1a

v1.3

Download file

             DjxWidgetBase.ts
        
                    128 lines
            
             | 4.3 KiB
            
                | video/mp2t
            
             |
                TypeScriptLexer
            
             / djx / src / main / ts / tsx / DjxWidgetBase.ts
          
                    History
                
                 |
                  Source
                 | Raw
                 |Copy content
                 |Copy permalink

        cin
    
minor fix

              r83
            
      import { djbase, djclass } from "../declare";

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      import _WidgetBase = require("dijit/_WidgetBase");

      import _AttachMixin = require("dijit/_AttachMixin");

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
      import { Rendition, isNode, isElementNode } from "./traits";

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      import registry = require("dijit/registry");

        cin
    
@on decorator registers handlers directry on domNode, added support to multiple events in one decorator...

              r85
            
      import on = require("dojo/on");

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
      import { Scope } from "./Scope";

      import { render } from "./render";

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      // type Handle = dojo.Handle;

      export interface EventArgs {

          bubbles?: boolean;

          cancelable?: boolean;

          composed?: boolean;

      }

        cin
    
Switched to @implab/dojo-typings

              r71
            
      export interface DjxWidgetBase<Attrs = {}, Events extends { [name in keyof Events]: Event } = {}> extends

          _WidgetBase<Events> {

        cin
    
temp commit, working on @on() decorator

              r72
            
        cin
    
implemented @on("event-name") decorator for event handlers

              r73
            
          /** This property is declared only for type inference to work, it is never assigned

           * and should not be used.

           */

        cin
    
temp commit, working on @on() decorator

              r72
            
          readonly _eventMap: Events & GlobalEventHandlersEventMap;

        cin
    
fixed DjxWidgetBase._eventHandlers initialization

              r81
            
          /** 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;

          }>;

        cin
    
Switched to @implab/dojo-typings

              r71
            
      }

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
        cin
    
Switched to @implab/dojo-typings

              r71
            
      type _super = {

          startup(): void;

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
          destroy(preserveDom?: boolean): void;

        cin
    
fixed tslint errors, added support for private methods to @on() decorator

              r79
            
      };

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      @djclass

        cin
    
Switched to @implab/dojo-typings

              r71
            
      export abstract class DjxWidgetBase<Attrs = {}, Events = {}> extends djbase<_super, _AttachMixin>(_WidgetBase, _AttachMixin) {

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
          private readonly _scope = new Scope();

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
          buildRendering() {

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
              const node = render(this.render(), this._scope);

              if (!isElementNode(node))

                  throw new Error("The render method must return a single DOM element");

              this.domNode = node as HTMLElement;

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
              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;

        cin
    
implemented @on("event-name") decorator for event handlers

              r73
            
              // the donNode is constructed now we need to connect event handlers

              this._connectEventHandlers();

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
              if (src && dest) {

                  while (src.firstChild)

                      dest.appendChild(src.firstChild);

              }

          }

          abstract render(): Rendition<HTMLElement>;

        cin
    
temp commit, working on @on() decorator

              r72
            
          private _connectEventHandlers() {

        cin
    
minor fix

              r83
            
              if (this._eventHandlers)

                  this._eventHandlers.forEach(({ eventName, handlerMethod }) => {

                      const handler = this[handlerMethod as keyof this];

                      if (typeof handler === "function")

        cin
    
@on decorator registers handlers directry on domNode, added support to multiple events in one decorator...

              r85
            
                          on(this.domNode, eventName, handler.bind(this));

        cin
    
minor fix

              r83
            
                  });

        cin
    
temp commit, working on @on() decorator

              r72
            
          }

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
          _processTemplateNode<T extends (Element | Node | _WidgetBase)>(

              baseNode: T,

        cin
    
Switched to @implab/dojo-typings

              r71
            
              getAttrFunc: (baseNode: T, attr: string) => any,

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
              // 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,

        cin
    
Switched to @implab/dojo-typings

              r71
            
                          (n, p) => n.get(p as any), // callback to get a property of a widget

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
                          (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();

          }

        cin
    
`Subscribable` is made compatible with rxjs, added map, filter and scan...

              r102
            
          destroy(preserveDom?: boolean) {

              this._scope.destroy();

              super.destroy(preserveDom);

          }

        cin
    
Converted to subproject djx, removed dojo-typings

              r65
            
      }

	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

cin minor fix	r83	import { djbase, djclass } from "../declare";
cin Converted to subproject djx, removed dojo-typings	r65	import _WidgetBase = require("dijit/_WidgetBase");
		import _AttachMixin = require("dijit/_AttachMixin");
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	import { Rendition, isNode, isElementNode } from "./traits";
cin Converted to subproject djx, removed dojo-typings	r65	import registry = require("dijit/registry");
cin @on decorator registers handlers directry on domNode, added support to multiple events in one decorator...	r85	import on = require("dojo/on");
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	import { Scope } from "./Scope";
		import { render } from "./render";
cin Converted to subproject djx, removed dojo-typings	r65
		// type Handle = dojo.Handle;

		export interface EventArgs {
		bubbles?: boolean;

		cancelable?: boolean;

		composed?: boolean;
		}

cin Switched to @implab/dojo-typings	r71	export interface DjxWidgetBase<Attrs = {}, Events extends { [name in keyof Events]: Event } = {}> extends
		_WidgetBase<Events> {
cin temp commit, working on @on() decorator	r72
cin implemented @on("event-name") decorator for event handlers	r73	/** This property is declared only for type inference to work, it is never assigned
		* and should not be used.
		*/
cin temp commit, working on @on() decorator	r72	readonly _eventMap: Events & GlobalEventHandlersEventMap;
cin fixed DjxWidgetBase._eventHandlers initialization	r81
		/** 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;
		}>;
cin Switched to @implab/dojo-typings	r71	}
cin Converted to subproject djx, removed dojo-typings	r65
cin Switched to @implab/dojo-typings	r71	type _super = {
		startup(): void;
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102
		destroy(preserveDom?: boolean): void;
cin fixed tslint errors, added support for private methods to @on() decorator	r79	};
cin Converted to subproject djx, removed dojo-typings	r65
		@djclass
cin Switched to @implab/dojo-typings	r71	export abstract class DjxWidgetBase<Attrs = {}, Events = {}> extends djbase<_super, _AttachMixin>(_WidgetBase, _AttachMixin) {
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	private readonly _scope = new Scope();
cin Converted to subproject djx, removed dojo-typings	r65
		buildRendering() {
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102	const node = render(this.render(), this._scope);
		if (!isElementNode(node))
		throw new Error("The render method must return a single DOM element");
		this.domNode = node as HTMLElement;

cin Converted to subproject djx, removed dojo-typings	r65	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;

cin implemented @on("event-name") decorator for event handlers	r73	// the donNode is constructed now we need to connect event handlers
		this._connectEventHandlers();

cin Converted to subproject djx, removed dojo-typings	r65	if (src && dest) {
		while (src.firstChild)
		dest.appendChild(src.firstChild);
		}
		}

		abstract render(): Rendition<HTMLElement>;

cin temp commit, working on @on() decorator	r72	private _connectEventHandlers() {
cin minor fix	r83	if (this._eventHandlers)
		this._eventHandlers.forEach(({ eventName, handlerMethod }) => {
		const handler = this[handlerMethod as keyof this];
		if (typeof handler === "function")
cin @on decorator registers handlers directry on domNode, added support to multiple events in one decorator...	r85	on(this.domNode, eventName, handler.bind(this));
cin minor fix	r83	});
cin temp commit, working on @on() decorator	r72	}

cin Converted to subproject djx, removed dojo-typings	r65	_processTemplateNode<T extends (Element \| Node \| _WidgetBase)>(
		baseNode: T,
cin Switched to @implab/dojo-typings	r71	getAttrFunc: (baseNode: T, attr: string) => any,
cin Converted to subproject djx, removed dojo-typings	r65	// 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,
cin Switched to @implab/dojo-typings	r71	(n, p) => n.get(p as any), // callback to get a property of a widget
cin Converted to subproject djx, removed dojo-typings	r65	(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();
		}
cin `Subscribable` is made compatible with rxjs, added map, filter and scan...	r102
		destroy(preserveDom?: boolean) {
		this._scope.destroy();
		super.destroy(preserveDom);
		}
cin Converted to subproject djx, removed dojo-typings	r65	}