polymerjs-snippets package

FAQ

I can't see a snippet description, what can I do?

Add this rules to your Atom's stylesheet Init file (Edit > Open Your stylesheet), change width accordingly:

autocomplete-suggestion-list .right-label {
	max-width: 1200px;
}

Note: There's no need to restart the editor, the UI live updates.

objectfn

objectfn

${1:foo}: function() {
 $0
},

Element

create

Polymer.create('${1:my-element}', {${2:props}});$0

distributeContent

this.distributeContent();$0

domHost

var ${1:el} = this.domHost();$0

domSelector

this.$$('${1:selector}');

node

this.$.${1:nodeId}

elementMatches

this.elementMatches('${1:selector}', ${2:node});$0

getContentChildNodes

    var ${1:nodeList} = this.getContentChildNodes('${2:selector}');$0

getContentChildren

    var ${1:elementList} = this.getContentChildren('${2:selector}');$0

getNativePrototype

    var ${1:nativeElProto} = this.getNativePrototype('${2:HTMLTag}');$0

getPropertyInfo

    var ${1:propInfo} = this.getPropertyInfo('${2:property}');$0

factoryImpl

factoryImpl: function(${1:name}) {
 el.$1 = $1;$0
},$0

lifecycle

created: function() {
 $0
},
 
ready: function() {
 
},
 
attached: function() {
 
},
 
detached: function() {
 
},
 
attributeChanged: function(name, type) {
 var elementName = this.localName;
 var attribute = this.getAttribute(name);
}

hostAttributes

hostAttributes: {
 ${1:checked: true},
 $2
},$0

extends

extends: '${1:input}',$0

behaviors

behaviors: [${1:behavior}],$0

observers

observers: ['${1:observerFn}(${2:prop})'],$0

observers-array

observers: ['${1:observerFn}(${2:prop}.$3splices)'],$0

observers-deep

observers: ['${1:observerFn}(${2:prop}.${3:path}.$4*)'],$0

listeners

listeners: {
 '${1:event}': '${2:eventHandlerFn}'
},$0

listeners-decl

listeners: {
 '${1:event}': '${2:eventHandlerFn}'
},
 
$2: function(e) {
 $3
},$0

Properties

prop

properties: {
 prop: ${1:Number}
},$0

prope

properties: {
 prop: {
   type: ${1:Number},
   value: ${2:0},
   readOnly: ${3:false},
   notify: ${4:true},
   observer: '${5:observerFn}',
   computed: '${6:computedFn}',
   reflectToAttribute: '${7:false}'
  }
},$0

reflectPropertyToAttribute

this.reflectPropertyToAttribute('${1:name}');$0

propget

this.get('${1:path}'${3:, ${4:optionalRoot}});$0

propset

this.set('${1:path}', ${2:value}, ${3:optionalRoot});$0

proppush

this.push('${1:path}', ${2:value}, ${3:optionalItemN});$0

proppop

this.pop('${1:path}');$0

propshift

this.shift('${1:path}', ${2:value});$0

propunshift

this.unshift('${1:path}', ${2:value}, ${3:optionalItemN});$0

propsplice

this.splice('${1:path}', ${2:start}, ${3:deleteCount}, ${4:optionalItemN});$0

arrayDelete

this.arrayDelete('${1:path}', ${2:itemToRemove});$0

mixin

this.mixin(${1:target}, ${2:source});$0

Properties - path

linkPaths

this.linkPaths('${1:to}', '${2:from}');$0

unlinkPaths

this.unlinkPaths('${1:path}');$0

notifyPath

var ${1:didNotify} = this.notifyPath('${2:path}', ${3:value}, ${4:optionalBooleanFromAbove});$0

Serialization

serialize

this.serialize('${1:attrValue}');$0

deserialize

this.deserialize('${1:attrValue}', ${2:type});$0

serializeValueToAttribute

this.serializeValueToAttribute('${1:attrValue}', '${2:attribute}', ${3:node});$0

Async

async

this.async(function() {
  $1
}, ${2:waitTime});$0

asyncfn

var fn = function() {
 ${1:console.info('async');}
};$0
this.async(fn, ${2:waitTime});

Debounce

debounce

this.debounce('${1:taskName}', ${1:function() {
  $2
}}, ${3:250});$0

debouncefn

var fn = function() {
 ${1:console.info('debounce');}
};$0
this.debounce(fn, ${2:250});

Events

fire

this.fire('${1:eventName}', ${2:{detail: {foo: 'data'}}}, {bubbles: ${3:false}, cancelable: ${4:true}, node: ${5:node}});$0

listen

this.listen(${1:node}, '${2:eventName}', '${3:objectFnName}');$0

Template

instanceTemplate

    var ${1:docFragment} = this.instanceTemplate(${2:HTMLTemplateElement});$0

indexForElement

${1:dom-repeat-node}.indexForElement(${2:HTMLElement});$0

itemForElement

${1:dom-repeat-node}.itemForElement(${2:HTMLElement});$0

keyForElement

${1:dom-repeat-node}.keyForElement(${2:HTMLElement});$0

modelForElement

${1:dom-repeat-node}.modelForElement(${2:HTMLElement});$0

sort

${1:dom-repeat-node}.sort();$0

filter

${1:dom-repeat-node}.filter();$0

render

${1:dom-repeat-node}.render();$0

Utility

toggleAttribute

this.toggleAttribute('${1:name}', ${2:true}, ${3:node});$0

toggleClass

this.toggleClass('${1:name}', ${2:true}, ${3:node});$0

attributeFollows

this.attributeFollows('${1:name}', ${2:toElement}, ${3:fromElement});$0

classFollows

this.classFollows('${1:name}', ${2:toElement}, ${3:fromElement});$0

scopeSubtree

this.scopeSubtree(${1:element}, ${2:booleanShouldObserve});$0

transform

Polymer.transform('$1', ${2:node});$0

translate3d

Polymer.translate3d(${1:x}, ${2:y}, ${3:z}, ${4:node});$0

updateStyles

${1:Polymer}.updateStyles();$0

resolveUrl

this.resolveUrl('${1:url}');$0

importHref

this.importHref('${1:foo}.html', function(data) {
 $2
}, function(error) {
 $3
});$0

setScrollDirection

this.setScrollDirection('${1:all|x|y|none}', ${2:node});$0

Iron Elements

iron-a11y-announcer

ia11y-request

Polymer.IronA11yAnnouncer.requestAvailability();$0

ia11y-announce

${1:iron-a11y-announcer-node}.announce('${2:Announcement text}');$0

ia11y-fire-announce

this.fire('iron-announce', {text: '${1:Announcement text}'}, {bubbles: true});$0

iron-a11y-keys

ia11y-add-keyBinding

${1:iron-a11y-keys-node}.addOwnKeyBinding('${2:eventName}', '${3:fnHandlerName}');$0

ia11y-keyboard-event-matches-keys

var ${1:matches} = ${2:iron-a11y-keys-node}.keyboardEventMatchesKeys(${2:eventFn}, '${3:eventName}');$0

ia11y-remove-keyBinding

${1:iron-a11y-keys-node}.removeOwnKeyBindings();$0

iron-ajax

iajax-discard-request

${1:iron-ajax-node}.discardRequest(${2:req});$0

iajax-generate

${1:iron-ajax-node}.generateRequest();$0

iajax-handle-error

${1:iron-ajax-node}.handleErrors(function(req, err) {
  $2
});$0

iajax-handle-response

${1:iron-ajax-node}.handleResponse(function(req) {
	$2
});$0

iajax-request-querystring

var ${1:qs} = ${2:iron-ajax-node}.queryString();$0

iajax-request-headers

var ${1:headers} = ${2:iron-ajax-node}.requestHeaders();$0

iajax-request-options-changed

${1:iron-ajax-node}.requestOptionsChanged();$0

iajax-request-url

var ${1:reqURL} = ${2:iron-ajax-node}.requestURL();$0

iajax-request-toOption

var ${1:data} = ${2:iron-ajax-node}.toRequestOptions();$0

iron-autogrow-textarea

iautogrow-textarea-get

var textarea = ${1:iron-autogrow-textarea-node}.textarea();$0

iautogrow-textarea-validate

var valid = ${1:iron-autogrow-textarea-node}.validate();$0

iron-collapse

icollapse-enableTransition

${1:iron-collapse-node}.enableTransition(${2:boolEnabled});$0

icollapse-hide

${1:iron-collapse-node}.hide();$0

icollapse-show

${1:iron-collapse-node}.show();$0

icollapse-toggle

${1:iron-collapse-node}.toggle();$0

icollapse-updateSize

${1:iron-collapse-node}.updateSize('${2:size}', ${3:boolAnimated});$0

iron-component-page

icomponent-page-marshal

var ${1:rendered} = ${2:iron-component-page-node}.marshal();$0

iron-dropdown

idropdown-containedElement

var ${1:el} = ${2:iron-dropdown-node}.containedElement();$0

iron-form

iform-serialize

  var ${1:data} = ${2:iron-form-node}.serialize();$0

iform-submit

${1:iron-form-node}.submit();$0

iform-validate

var ${1:validForm} = ${2:iron-form-node}.validate();$0

iron-iconset-svg

iiconset-svg-applyIcon

${1:iron-iconset-svg-node}.applyIcon(${2:element}, '${3:iconName}');$0

iiconset-svg-getIconNames

${1:iron-iconset-svg-node}.getIconNames();$0

iiconset-svg-removeIcon

${1:iron-iconset-svg-node}.removeIcon(${2:element});$0

iron-iconset

iiconset-svg-applyIcon

${1:iron-iconset-node}.applyIcon(${2:element}, ${3:icon(String|Number)}, '${4:optionalTheme}', ${5:optionalScale});$0

iiconset-svg-removeIcon

${1:iron-iconset-node}.removeIcon(${2:element});$0

iron-input

iinput-validate

var ${1:validInput} = ${2:iron-input-node}.validate();$0

iron-list

ilist-firstVisibleIndex

var ${1:item} = ${2:iron-list-node}.firstVisibleIndex();$0

ilist-scrollToIndex

${1:iron-list-node}.scrollToIndex(${2:index});$0

ilist-updateViewportBoundaries

${1:iron-list-node}.updateViewportBoundaries();$0

iron-localstorage

ilocalstorage-reload

${1:iron-localstorage-node}.reload();$0

ilocalstorage-save

${1:iron-localstorage-node}.save();$0

iron-media-query

imedia-query-queryChanged

${1:iron-media-query-node}.queryChanged('${2:cssMediaQuery}');$0

imedia-query-queryHandler

${1:iron-media-query-node}.queryHandler('${2:cssMediaQuery}');$0

iron-menu-behavior

imenu-select

${1:iron-menu-node}.select(${2:index});$0

iron-meta

imeta-byKey

var data = ${1:iron-meta-node}.byKey();$0

imeta-factoryImpl

${1:iron-meta-object}.factoryImpl(${2:config});$0

iron-overlay-behavior

ioverlay-behavior-close

${1:iron-overlay-behavior-node}.close();$0

ioverlay-behavior-complete

${1:iron-overlay-behavior-node}.complete();$0

ioverlay-behavior-open

${1:iron-overlay-behavior-node}.open();$0

ioverlay-behavior-prepare

${1:iron-overlay-behavior-node}.prepare();$0

iron-resizable-behavior

iresizable-behavior-assignParentResizable

${1:resizable-node}.assignParentResizable(${2:parentResizable});$0

iresizable-behavior-notifyResize

${1:resizable-node}.notifyResize();$0

iresizable-behavior-resizerShouldNotify

var ${1:shouldNotify} = ${2:resizable-node}.resizerShouldNotify(${3:element});$0

iresizable-behavior-stopResizeNotificationsFor

${1:resizable-node}.stopResizeNotificationsFor(${2:target});$0

iron-signals

isignals-send

this.fire('iron-signal', {name: '${1:signalName}', data: ${3:dataToSend}});$0

iron-validatable-behavior

ivalidatable-behavior-hasValidator

var hasValidator = ${1:validatable-node}.hasValidator();$0

ivalidatable-behavior-validate

var valid = ${1:validatable-node}.validate(${2:values});$0

Paper Elements

paper-dialog-scrollable

ppaper-dialog-scrollable-scrollTarget

var ${1:el} = ${2:paper-dialog-scrollable-node}.scrollTarget();$0

paper-drawer-panel

ppaper-drawer-panel-close

${1:paper-drawer-panel-node}.closeDrawer();$0

ppaper-drawer-panel-open

${1:paper-drawer-panel-node}.openDrawer();$0

ppaper-drawer-panel-toggle

${1:paper-drawer-panel-node}.togglePanel();$0

paper-header-panel

ppaper-header-panel-header

var ${1:element} = ${2:paper-header-panel-node}.header();$0

ppaper-header-panel-scroller

var ${1:element} = ${2:paper-header-panel-node}.scroller();$0

ppaper-header-panel-visibleShadow

var ${1:hasVisibleShadow} = ${2:paper-header-panel-node}.visibleShadow();$0

paper-menu-button

ppaper-menu-button-close

${1:paper-menu-button-node}.close();$0

ppaper-menu-button-open

${1:paper-menu-button-node}.open();$0

paper-radio-group

ppaper-menu-button-select

${1:paper-radio-group-node}.select(${2:itemN});$0

ppaper-menu-button-selectNext

${1:paper-radio-group-node}.selectNext();$0

ppaper-menu-button-selectPrevious

${1:paper-radio-group-node}.selectPrevious();$0

paper-ripple

ppaper-ripple-addRipple

${1:paper-ripple-node}.addRipple();$0

ppaper-ripple-animate

${1:paper-ripple-node}.animate();$0

ppaper-ripple-downAction

${1:paper-ripple-node}.downAction(${2:event});$0

ppaper-ripple-removeRipple

${1:paper-ripple-node}.removeRipple(${2:ripple});$0

ppaper-ripple-shouldKeepAnimating

${1:paper-ripple-node}.shouldKeepAnimating();$0

ppaper-ripple-simulatedRipple

${1:paper-ripple-node}.simulatedRipple();$0

ppaper-ripple-target

var ${1:el} = ${2:paper-ripple-node}.target();$0

ppaper-ripple-upAction

${1:paper-ripple-node}.upAction(${2:event});$0

paper-scroll-header-panel

ppaper-scroll-header-panel-content

var ${1:el} = ${2:paper-scroll-header-panel-node}.content();$0

ppaper-scroll-header-panel-header

var ${1:el} = ${2:paper-scroll-header-panel-node}.header();$0

ppaper-scroll-header-panel-measureHeaderHeight

${1:paper-scroll-header-panel-node}.measureHeaderHeight();$0

ppaper-scroll-header-panel-scroller

var ${1:el} = ${2:paper-scroll-header-panel-node}.scroller();$0

paper-slider

ppaper-slider-decrement

${1:paper-slider-node}.decrement();$0

ppaper-slider-increment

${1:paper-slider-node}.increment();$0

paper-spinner

ppaper-spinner-reset

${1:paper-spinner-node}.reset();$0

paper-toast

ppaper-toast-hide

${1:paper-toast-node}.hide();$0

ppaper-toast-show

${1:paper-toast-node}.show();$0

ppaper-toast-toggle

${1:paper-toast-node}.toggle();$0

paper-tooltip

ppaper-tooltip-hide

${1:paper-tooltip-node}.hide();$0

ppaper-tooltip-show

${1:paper-tooltip-node}.show();$0

ppaper-tooltip-target

var ${1:el} = ${2:paper-tooltip-node}.target();$0