diff --git a/polymer/polymer-tests.ts b/polymer/polymer-tests.ts index f594b4f22..ac7f180b4 100644 --- a/polymer/polymer-tests.ts +++ b/polymer/polymer-tests.ts @@ -1,101 +1,58 @@ /// -class AbstractPolymerElement implements PolymerElement { - $: { [id: string]: HTMLElement }; //polymer object for elements that have an ID +Polymer({ + is: "my-element", - // inargs is the [args] for the callback.. need to update function def - async(inMethod: () => void, inArgs?: Array, inTimeout?: number): void { } - job(jobName: string, inMethod: () => void, inTimeout?: number): void { } - fire(eventName: string, details?: any, targetNode?: any, bubbles?: boolean, cancelable?: boolean): void { } - asyncFire(eventName: string, details?: any, targetNode?: any, bubbles?: boolean, cancelable?: boolean): void { } + properties: { + prop1: String, + prop2: { + type: Boolean, + value: true, + readOnly: false, + reflectToAttribute: true, + notify: true, + computed: "__prop2()" + } + }, - cancelUnbindAll(): void { } - - /** - * User must call from attached callback - */ - resizableAttachedHandler(): void {} + hostAttributes: { + "string-attribute": 'Value', + "boolean-attribute": true, + tabindex: 0 + }, - /** - * User must call from detached callback - */ - resizableDetachedHandler(): void {} + ready: function () { + this.textContent = 'My element!'; + this.$.name.textContent = this.name; + this.serialize({}); + this.async(function () { + // access sibling or parent elements here + }); + }, - /** - * User must call from attached callback - */ - resizerAttachedHandler(): void {} + __prop2: function () { + var toLight = document.createElement('div'); + Polymer.dom(this).appendChild(toLight); - /** - * User must call from detached callback - */ - resizerDetachedHandler(): void {} + var toLocal = document.createElement('div'); + var beforeNode = Polymer.dom(this.root).childNodes[0]; + Polymer.dom(this.root).insertBefore(toLocal, beforeNode); - /** - * User should call when resizing or un-hiding children - */ - notifyResize(): void {} -} + var allSpans = Polymer.dom(this).querySelectorAll('span'); + } +}); -class AbstractWebComponent extends AbstractPolymerElement { +var MyElement = Polymer.Class({ + is: 'my-element', - public name: string; + created: function () { + this.textContent = 'My element!'; + } - constructor(name: string) { - super(); - this.name = name; - } +}); - protected get(): HTMLElement { - return this; - } -} +document.registerElement('my-element', MyElement); -function registerWebComponent(webComponentClass: Function, ...mixins: any[]): void { - - // we need a flat object, without prototype in order to polymer to work on our components - var flattenedComponent: any = {}; - if (mixins) { - // apply mixins - mixins.forEach(mixin => { - for (var i in mixin) { - if (mixin.hasOwnProperty(i)) { - webComponentClass.prototype[i] = mixin[i]; - } - } - }); - } - var webComponent: AbstractWebComponent = new (webComponentClass)(); - for (var i in webComponent) { - // do not include polymer functions - if (i != "async" && i != "job" && i != "fire" && i != "asyncFire" && i != "cancelUnbindAll") { - var attribute: any = (webComponent)[i]; - flattenedComponent[i] = attribute; - } - } - - console.debug('registering web component', webComponent, flattenedComponent); - Polymer(webComponent.name, flattenedComponent); -} - -class Spinner extends AbstractWebComponent { - private pendingRequestsCount: number; - - constructor() { - super('test-spinner'); - } - - public ready(): void { - this.pendingRequestsCount = 0; - this.updateUI(); - } - - private updateUI(): void { - var spinnerHidden: boolean = this.pendingRequestsCount == 0; - if (spinnerHidden) { - this.get().setAttribute('hidden', 'true'); - } else { - this.get().removeAttribute('hidden'); - } - } -} \ No newline at end of file +// Equivalent: +var el1 = new MyElement(); +var el2 = document.createElement('my-element'); diff --git a/polymer/polymer.app-router.d.ts b/polymer/polymer.app-router.d.ts deleted file mode 100644 index adf2f8d3b..000000000 --- a/polymer/polymer.app-router.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -// Type definitions for app-router -// Project: https://github.com/erikringsmuth/app-router -// Definitions by: Louis Grignon -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -/// - -declare module PolymerComponents { - module App { - export interface Router extends PolymerElement, HTMLElement { - init(): void; - go(path: string, options?: { replace?: boolean }): void; - } - } -} \ No newline at end of file diff --git a/polymer/polymer.core-drawer-panel.d.ts b/polymer/polymer.core-drawer-panel.d.ts deleted file mode 100644 index f219b4d0b..000000000 --- a/polymer/polymer.core-drawer-panel.d.ts +++ /dev/null @@ -1,72 +0,0 @@ -// Type definitions for polymer's paper-toast -// Project: https://github.com/Polymer/core-drawer-panel -// Definitions by: Louis Grignon -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -/// - -declare module PolymerComponents { - export module Core { - export interface DrawerPanel extends PolymerElement, HTMLElement { - /** - * Width of the drawer panel. default: '256px' - */ - drawerWidth: string; - - /** - * Max-width when the panel changes to narrow layout. default: '640px' - */ - responsiveWidth: string; - - /** - * The panel that is being selected. drawer for the drawer panel and main for the main panel. default: null - */ - selected: string; - - /** - * The panel to be selected when core-drawer-panel changes to narrow layout. default: 'main' - */ - defaultSelected: string; - - /** - * Returns true if the panel is in narrow layout. This is useful if you need to show/hide elements based on the layout. default: false - */ - narrow: boolean; - - /** - * If true, position the drawer to the right. default: false - */ - rightDrawer: boolean; - - /** - * If true, swipe to open/close the drawer is disabled. default: false - */ - disableSwipe: boolean; - - /** - * If true, ignore responsiveWidth setting and force the narrow layout. default: false - */ - forceNarrow: boolean; - - /** - * If true, swipe from the edge is disabled. default: false - */ - disableEdgeSwipe: boolean; - - /** - * Toggles the panel open and closed. - */ - togglePanel(): void; - - /** - * Opens the drawer. - */ - openDrawer(): void; - - /** - * Closes the drawer. - */ - closeDrawer(): void; - } - } -} \ No newline at end of file diff --git a/polymer/polymer.core-overlay.d.ts b/polymer/polymer.core-overlay.d.ts deleted file mode 100644 index 706dee899..000000000 --- a/polymer/polymer.core-overlay.d.ts +++ /dev/null @@ -1,92 +0,0 @@ -// Type definitions for polymer's paper-toast -// Project: https://github.com/Polymer/core-selector -// Definitions by: Louis Grignon -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -/// - -declare module PolymerComponents { - export module Core { - export interface Overlay extends PolymerElement, HTMLElement { - /** - * The target element that will be shown when the overlay is opened. If unspecified, the core-overlay itself is the target. - * default: the overlay element - */ - target: Object; - - /** - * A core-overlay's size is guaranteed to be constrained to the window size. To achieve this, the sizingElement is sized with a max-height/width. By default this element is the target element, but it can be specifically set to a specific element inside the target if that is more appropriate. This is useful, for example, when a region inside the overlay should scroll if needed. - * default: the target element - */ - sizingTarget: Object; - - /** - * Set opened to true to show an overlay and to false to hide it. A core-overlay may be made initially opened by setting its opened attribute. - * default: false - */ - opened: boolean; - - /** - * If true, the overlay has a backdrop darkening the rest of the screen. The backdrop element is attached to the document body and may be styled with the class core-overlay-backdrop. When opened the core-opened class is applied. - * default: false - */ - backdrop: boolean; - - /** - * If true, the overlay is guaranteed to display above page content. - * default: false - */ - layered: boolean; - - /** - * By default an overlay will close automatically if the user taps outside it or presses the escape key. Disable this behavior by setting the autoCloseDisabled property to true. - * default: false - */ - autoCloseDisabled: boolean; - - /** - * By default an overlay will focus its target or an element inside it with the autoFocus attribute. Disable this behavior by setting the autoFocusDisabled property to true. - * default: false - */ - autoFocusDisabled: boolean; - - /** - * This property specifies an attribute on elements that should close the overlay on tap. Should not set closeSelector if this is set. - * default: "core-overlay-toggle" - */ - closeAttribute: string; - - /** - * This property specifies a selector matching elements that should close the overlay on tap. Should not set closeAttribute if this is set. - * default: '' - */ - closeSelector: string; - - /** - * The transition property specifies a string which identifies a core-transition element that will be used to help the overlay open and close. The default core-transition-fade will cause the overlay to fade in and out. - * default: 'core-transition-fade' - */ - transition: string; - - /** - * Toggle the opened state of the overlay. - */ - toggle(): void; - - /** - * Open the overlay. This is equivalent to setting the opened property to true. - */ - open(): void; - - /** - * Close the overlay. This is equivalent to setting the opened property to false. - */ - close(): void; - - /** - * Extensions of core-overlay should implement the resizeHandler method to adjust the size and position of the overlay when the browser window resizes. - */ - resizeHandler(): void; - } - } -} \ No newline at end of file diff --git a/polymer/polymer.core-selector.d.ts b/polymer/polymer.core-selector.d.ts deleted file mode 100644 index c7941cdde..000000000 --- a/polymer/polymer.core-selector.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -// Type definitions for polymer's paper-toast -// Project: https://github.com/Polymer/core-selector -// Definitions by: Louis Grignon -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -/// - -declare module PolymerComponents { - export module Core { - export interface Selector extends PolymerElement, HTMLElement { - } - - export interface SelectorOnSelectEvent extends Event { - detail: { - item: HTMLElement; - isSelected: boolean; - }; - } - } -} \ No newline at end of file diff --git a/polymer/polymer.d.ts b/polymer/polymer.d.ts index ed084a448..5515fa3dc 100644 --- a/polymer/polymer.d.ts +++ b/polymer/polymer.d.ts @@ -1,64 +1,307 @@ -// Type definitions for polymer -// Project: https://github.com/polymer -// Definitions by: Louis Grignon -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -interface PolymerElement { - - // definition - publish?: Object; - computed?: Object; - // object mapping variable names to functions name - observe?: Object; - - // life time API - created? (): void; - ready? (): void; - attached? (): void; - domReady? (): void; - detached? (): void; - attributeChanged? (attrName: string, oldVal: any, newVal: any): void; - - /** - * User must call from attached callback - */ - resizableAttachedHandler(): void; - - /** - * User must call from detached callback - */ - resizableDetachedHandler(): void; - - /** - * User must call from attached callback - */ - resizerAttachedHandler(): void; - - /** - * User must call from detached callback - */ - resizerDetachedHandler(): void; - - /** - * User should call when resizing or un-hiding children - */ - notifyResize(): void; -} - -interface Polymer { - - importElements(node: Node, callback: Function): void; - import(url: string, callback?: () => void): void; - - mixin(target: any, ...mixins: any[]): any; - waitingFor(): Array; - // should be an "integer" for milliseconds - forceReady(timeout: number): void; - - (tagName: string, prototype: PolymerElement): void; - (tagName: string, prototype: any): void; - (prototype: PolymerElement): void; - (): void; -} - -declare var Polymer: Polymer; +// Type definitions for polymer v1.0 +// Project: https://github.com/Polymer/polymer +// Definitions by: Louis Grignon , Suguru Inatomi +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module polymer { + + type PropConstructorType = StringConstructor|ObjectConstructor|BooleanConstructor|NumberConstructor|DateConstructor|ArrayConstructor; + + interface PropObjectType { + type: PropConstructorType; + value?:boolean|number|string|Function; + reflectToAttributes?:boolean; + notify?:boolean; + readOnly?:boolean; + observer?:string; + computed?:string; + } + + interface Base { + + /* polymer-micro */ + + // Attributes + + hostAttributes?: {[name:string]:any}; + + reflectPropertiesToAttribute?(name: string): void; + + serializeValueToAttribute?(value: any, attribute: string, node?: Element): void; + + deserialize?(value: string, type: NumberConstructor): number; + deserialize?(value: string, type: BooleanConstructor): boolean; + deserialize?(value: string, type: ObjectConstructor): Object; + deserialize?(value: string, type: ArrayConstructor): any[]; + deserialize?(value: string, type: DateConstructor): Date; + deserialize?(value: string, type: StringConstructor): string; + + serialize?(value: any): string; + + // Behaviors + + behaviors?:Object[]; + + // Constructors + + factoryImpl?(...args: any[]): void; + + // Debouncer + + debounce?(jobName: string, callback: Function, wait: number): void; + + isDebouncerActive?(jobName: string): boolean; + + flushDebouncer?(jobName: string): void; + + cancelDebouncer?(jobName: string): void; + + // Extends + + extends?: string; + + getNativePrototype?(tag: string): Object; + + // Properties + + properties?:{[prop:string]:(PropConstructorType|PropObjectType);}; + + getPropertyInfo?(property: string): Object; + + // Tag + + is: string; + + /* polymer-mini */ + + // Ready + + ready?(): void; + + attachedCallback?(): void; + + // Shady + + domHost?(): Element; + + distributeContent?(): void; + + elementMatches?(selector: string, node?: Element): boolean; + + // Template { + + instanceTemplate?(template: HTMLElement): DocumentFragment; + + /* polymer-standard */ + + + // Annotations + + $?: any; + + // Events + + listeners?: {[key:string]:string;}; + + listen?(node: Element, eventName: string, methodName: string): void; + + unlisten?(node: Element, eventName: string, methodName: string): void; + + // Gestures + + setScrollDirection?(direction: string, node?: HTMLElement): void; + + // NotifyPath + + notifyPath?(path: string, value: any, fromAbove: any): void; + + set?(path: string|(string|number)[], value: any, root?: Object): void; + + get?(path: string|(string|number)[], root?: Object): any; + + linkPaths?(to: string, from?: string): void; + + unlinkPaths?(path: string): void; + + push?(path: string): number; + + pop?(path: string): any; + + splice?(path: string, start: number, deleteCount: number): number; + + shift?(path: string): any; + + unshift?(path: string): number; + + // ResolveUrl + + resolveUrl?(url: string): string; + + // Styling + + scopeSubtree?(container: Element, shouldObserve: boolean): void; + + // Utils + + $$?(selector: string): Element; + + toggleClass?(name: string, bool?: boolean, node?: HTMLElement): void; + + toggleAttribute?(name: string, bool?: boolean, node?: HTMLElement): void; + + classFollows?(name: string, toElement: HTMLElement, fromElement: HTMLElement): void; + + attributeFollows?(name: string, toElement: HTMLElement, fromElement: HTMLElement): void; + + getContentChildNodes?(selector: string): Node[]; + + getContentChildren?(selector: string): HTMLElement[]; + + fire?(type: string, detail?: Object, options?: Object): CustomEvent; + + async?(callback: ()=>void, waitTime?: number): number; + + cancelAsync?(handle: number): void; + + arrayDelete?(path: string|any[], item: any): any[]; + + transform?(transform: string, node?: HTMLElement): void; + + translate3d?(x: number, y: number, z: number, node?: HTMLElement): void; + + importHref?(href: string, onload?: Function, onerror?: Function): HTMLLinkElement; + + create?(tag: string, props: Object): Element; + + // XStyling + + updateStyles?(): void; + + /* common api */ + + registerCallback?():void; + + createdCallback?():void; + + attachedCallback?():void; + + detachedCallback?():void; + + attributeChangedCallback?(name: string):void; + + extend?(prototype: Object, api: Object):Object; + + mixin?(target: Object, source: Object):Object; + + copyOwnProperty?(name: string, source: Object, target: Object):void; + + observers?: string[]; + + created?(): void; + + attached?(): void; + + detached?(): void; + + attributeChanged?(name: string, oldValue: any, newValue: any): void; + + } + + interface DomApiStatic { + + (obj: Node|Base):DomApi; + + (obj: Event):EventApi; + + flush():void; + } + + interface DomApi { + + appendChild(node: Node): Node; + + insertBefore(node: Node, refNode?: Node):Node; + + removeChild(node: Node):Node; + + replaceChild(node: Node, refNode: Node):Node; + + getOwnerRoot():Node; + + querySelector(selector: string):Node; + + querySelectorAll(selector: string):Node[]; + + getDestinationInsertionPoints():Node[]; + + getDistributedNodes():Node[]; + + queryDistributedElements(selector: string):Node[]; + + setAttribute(name: string, value: any):void; + + removeAttribute(name: string):void; + + childNodes:Node[]; + + children:Element[]; + + parentNode:Node; + + firstChild:Node; + + lastChild:Node; + + nextSibling:Node; + + previousSibling:Node; + + firstElementChild:Element; + + lastElementChild:Element; + + nextElementSibling:Element; + + previousElementSibling:Element; + + textContent:string; + + innerHTML:string; + } + + interface EventApi { + + rootTarget:EventTarget; + + localTarget:EventTarget; + + path:Node[]; + } + + interface Settings { + + wantShadow:boolean; + hasShadow:boolean; + nativeShadow:boolean; + useShadow:boolean; + useNativeShadow:boolean; + useNativeImports:boolean; + useNativeCustomElements:boolean; + } + + interface PolymerStatic { + + Settings: Settings; + + dom:DomApiStatic; + + (prototype: Base):webcomponents.CustomElementConstructor; + + Class(prototype: Base):webcomponents.CustomElementConstructor; + } +} + +declare var Polymer: polymer.PolymerStatic; + diff --git a/polymer/polymer.paper-dialog.d.ts b/polymer/polymer.paper-dialog.d.ts deleted file mode 100644 index 51758e42c..000000000 --- a/polymer/polymer.paper-dialog.d.ts +++ /dev/null @@ -1,30 +0,0 @@ -// Type definitions for polymer's paper-dialog -// Project: https://github.com/Polymer/paper-dialog -// Definitions by: Louis Grignon -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -/// -/// - -declare module PolymerComponents { - export module Paper { - export interface Dialog extends PolymerComponents.Core.Overlay, HTMLElement { - /** - * The title of the dialog. - * default: '' - */ - heading: string; - - /** - * See paper-dialog-transition - * default: '' - */ - transition: string; - - /** - * default: true - */ - layered: boolean; - } - } -} \ No newline at end of file diff --git a/polymer/polymer.paper-toast.d.ts b/polymer/polymer.paper-toast.d.ts deleted file mode 100644 index 6e29c1c8b..000000000 --- a/polymer/polymer.paper-toast.d.ts +++ /dev/null @@ -1,63 +0,0 @@ -// Type definitions for polymer's paper-toast -// Project: https://github.com/Polymer/paper-toast -// Definitions by: Louis Grignon -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -/// - -declare module PolymerComponents { - export module Paper { - export interface Toast extends PolymerElement, HTMLElement { - /** - * The text shows in a toast. - * default: '' - */ - text: string; - - /** - * The duration in milliseconds to show the toast. - * default: 3000 - */ - duration: number; - - /** - * Set opened to true to show the toast and to false to hide it. - * default: false - */ - opened: boolean; - - /** - * Min-width when the toast changes to narrow layout. In narrow layout, the toast fits at the bottom of the screen when opened. - * default: '480px' - */ - responsiveWidth: string; - - /** - * If true, the toast can't be swiped. - * default: false - */ - swipeDisabled: boolean; - - /** - * By default, the toast will close automatically if the user taps outside it or presses the escape key. Disable this behavior by setting the autoCloseDisabled property to true. - * default: false - */ - autoCloseDisabled: boolean; - - /** - * Show the toast for the specified duration - */ - show(): void; - - /** - * Dismiss the toast and hide it. - */ - dismiss(): void; - - /** - * Toggle the opened state of the toast. - */ - toggle(): void; - } - } -} \ No newline at end of file diff --git a/webcomponents.js/webcomponents.js-tests.ts b/webcomponents.js/webcomponents.js-tests.ts index 316f9dd8e..b5e67abb9 100644 --- a/webcomponents.js/webcomponents.js-tests.ts +++ b/webcomponents.js/webcomponents.js-tests.ts @@ -10,10 +10,14 @@ var fooProto = Object.create(HTMLElement.prototype, { } }); -document.registerElement("x-foo", { +var XFoo = document.registerElement("x-foo", { prototype: fooProto }); +var xFoo = new XFoo(); +xFoo.textContent = ""; +document.body.appendChild(xFoo); + window.CustomElements.hasNative; window.CustomElements.flags; window.CustomElements.ready; diff --git a/webcomponents.js/webcomponents.js.d.ts b/webcomponents.js/webcomponents.js.d.ts index 43e85373f..39a964a08 100644 --- a/webcomponents.js/webcomponents.js.d.ts +++ b/webcomponents.js/webcomponents.js.d.ts @@ -10,6 +10,10 @@ declare module webcomponents { extends?: string; } + export interface CustomElementConstructor { + new(): HTMLElement; + } + export interface CustomElementsPolyfill { hasNative: boolean; flags: any; @@ -38,7 +42,7 @@ declare module "webcomponents.js" { } interface Document { - registerElement(name: string, prototype: webcomponents.CustomElementInit): void; + registerElement(name: string, prototype: webcomponents.CustomElementInit): webcomponents.CustomElementConstructor; } interface Window {