Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #4770 from laco0416/polymer1.0

Polymer v1.0
  • Loading branch information...
commit 625cd68fed45e3230393af71bcde1d36706f3d56 2 parents ab3cc82 + 4a3cfb0
@vvakame vvakame authored
View
155 polymer/polymer-tests.ts
@@ -1,101 +1,58 @@
/// <reference path="polymer.d.ts"/>
-class AbstractPolymerElement implements PolymerElement {
- $: { [id: string]: HTMLElement }; //polymer object for elements that have an ID
-
- // inargs is the [args] for the callback.. need to update function def
- async(inMethod: () => void, inArgs?: Array<any>, 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 { }
-
- cancelUnbindAll(): 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 {}
-}
-
-class AbstractWebComponent extends AbstractPolymerElement {
-
- public name: string;
-
- constructor(name: string) {
- super();
- this.name = name;
- }
-
- protected get(): HTMLElement {
- return <any>this;
- }
-}
-
-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 (<any>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 = (<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');
- }
- }
-}
+Polymer({
+ is: "my-element",
+
+ properties: {
+ prop1: String,
+ prop2: {
+ type: Boolean,
+ value: true,
+ readOnly: false,
+ reflectToAttribute: true,
+ notify: true,
+ computed: "__prop2()"
+ }
+ },
+
+ hostAttributes: {
+ "string-attribute": 'Value',
+ "boolean-attribute": true,
+ tabindex: 0
+ },
+
+ ready: function () {
+ this.textContent = 'My element!';
+ this.$.name.textContent = this.name;
+ this.serialize({});
+ this.async(function () {
+ // access sibling or parent elements here
+ });
+ },
+
+ __prop2: function () {
+ var toLight = document.createElement('div');
+ Polymer.dom(this).appendChild(toLight);
+
+ var toLocal = document.createElement('div');
+ var beforeNode = Polymer.dom(this.root).childNodes[0];
+ Polymer.dom(this.root).insertBefore(toLocal, beforeNode);
+
+ var allSpans = Polymer.dom(this).querySelectorAll('span');
+ }
+});
+
+var MyElement = Polymer.Class(<polymer.Base>{
+ is: 'my-element',
+
+ created: function () {
+ this.textContent = 'My element!';
+ }
+
+});
+
+document.registerElement('my-element', MyElement);
+
+// Equivalent:
+var el1 = new MyElement();
+var el2 = document.createElement('my-element');
View
15 polymer/polymer.app-router.d.ts
@@ -1,15 +0,0 @@
-// Type definitions for app-router
-// Project: https://github.com/erikringsmuth/app-router
-// Definitions by: Louis Grignon <https://github.com/lgrignon>
-// Definitions: https://github.com/borisyankov/DefinitelyTyped
-
-///<reference path="polymer.d.ts"/>
-
-declare module PolymerComponents {
- module App {
- export interface Router extends PolymerElement, HTMLElement {
- init(): void;
- go(path: string, options?: { replace?: boolean }): void;
- }
- }
-}
View
72 polymer/polymer.core-drawer-panel.d.ts
@@ -1,72 +0,0 @@
-// Type definitions for polymer's paper-toast
-// Project: https://github.com/Polymer/core-drawer-panel
-// Definitions by: Louis Grignon <https://github.com/lgrignon>
-// Definitions: https://github.com/borisyankov/DefinitelyTyped
-
-///<reference path="polymer.d.ts"/>
-
-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;
- }
- }
-}
View
92 polymer/polymer.core-overlay.d.ts
@@ -1,92 +0,0 @@
-// Type definitions for polymer's paper-toast
-// Project: https://github.com/Polymer/core-selector
-// Definitions by: Louis Grignon <https://github.com/lgrignon>
-// Definitions: https://github.com/borisyankov/DefinitelyTyped
-
-///<reference path="polymer.d.ts"/>
-
-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;
- }
- }
-}
View
20 polymer/polymer.core-selector.d.ts
@@ -1,20 +0,0 @@
-// Type definitions for polymer's paper-toast
-// Project: https://github.com/Polymer/core-selector
-// Definitions by: Louis Grignon <https://github.com/lgrignon>
-// Definitions: https://github.com/borisyankov/DefinitelyTyped
-
-///<reference path="polymer.d.ts"/>
-
-declare module PolymerComponents {
- export module Core {
- export interface Selector extends PolymerElement, HTMLElement {
- }
-
- export interface SelectorOnSelectEvent extends Event {
- detail: {
- item: HTMLElement;
- isSelected: boolean;
- };
- }
- }
-}
View
371 polymer/polymer.d.ts
@@ -1,64 +1,307 @@
-// Type definitions for polymer
-// Project: https://github.com/polymer
-// Definitions by: Louis Grignon <https://github.com/lgrignon>
-// 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<string>;
- // 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 <https://github.com/lgrignon>, Suguru Inatomi <https://github.com/laco0416>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+///<reference path="../webcomponents.js/webcomponents.js.d.ts"/>
+
+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;
+
View
30 polymer/polymer.paper-dialog.d.ts
@@ -1,30 +0,0 @@
-// Type definitions for polymer's paper-dialog
-// Project: https://github.com/Polymer/paper-dialog
-// Definitions by: Louis Grignon <https://github.com/lgrignon>
-// Definitions: https://github.com/borisyankov/DefinitelyTyped
-
-///<reference path="polymer.d.ts"/>
-///<reference path="polymer.core-overlay.d.ts"/>
-
-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;
- }
- }
-}
View
63 polymer/polymer.paper-toast.d.ts
@@ -1,63 +0,0 @@
-// Type definitions for polymer's paper-toast
-// Project: https://github.com/Polymer/paper-toast
-// Definitions by: Louis Grignon <https://github.com/lgrignon>
-// Definitions: https://github.com/borisyankov/DefinitelyTyped
-
-///<reference path="polymer.d.ts"/>
-
-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;
- }
- }
-}
View
6 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;
View
6 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 {
Please sign in to comment.
Something went wrong with that request. Please try again.