Skip to content

Instantly share code, notes, and snippets.

@qtrandev

qtrandev/Polymer

Last active November 6, 2015 04:02
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save qtrandev/ff2c405a8396c1197ccd to your computer and use it in GitHub Desktop.
Save qtrandev/ff2c405a8396c1197ccd to your computer and use it in GitHub Desktop.
Download ZIP
Polymer 1.0 snippets and notes from Polycasts YouTube videos
Raw
Polymer
Info:
=====
These snippets help me remember how to use Polymer syntax. Many come from the Polycasts YouTube videos.
Message me @qtrandev in the Polymer Slack or email qtrandev@gmail.com and I'll message you links I know.
Getting started:
================
bower init
bower install --save Polymer/polymer#^1.0.0
Update Polymer:
===============
bower update
Basic Format:
=============
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="component-name">
<style>
</style>
<template>
</template>
<script>
Polymer({
is: "component-name",
ready: function() { // optional
this.propertyName = "Name"
},
propertyName: { // optional
type: String,
value: "Name"
}
});
</script>
</dom-module>
Usage:
======
<head>
<link rel="import" href="component-name.html">
</head>
<body>
<component-name propertyName="Name"></component-name>
</body>
Extend Native Element:
======================
is: 'super-button',
extends: 'button'
<button is="super-button"></button>
JS Usage: document.createElement('button', 'super-button')
Styles:
=======
<style is="custom-style"></style> -- Keeps style in element only ===
paper-slider::shadow #sliderKnobInner { } -- Style nodes internal to element's shadow dom ===
.red-theme /deep/ #ink {} -- styles will pierce all shadow boundaries ===
.header { color: var(--ui-message-header-color); } -- CSS variables
<style is="custom-style"> ui-message { -ui-message-header-color: white; } </style> ===
.container { ... @apply(-ui-message-container-theme) }
.header { @apply(-ui-message-header-theme) }
.content { @apply(-ui-message-content-theme) }
<style is="custom-style"> ui-message {
-ui-message-container-theme: { } ;
-ui-message-header-theme: { } ;
-ui-message-content-theme: { } ;
} </style> ===
Behaviors:
==========
<script>
var MyBehaviors = MyBehaviors || {}; // namespace
MyBehaviors.PressedBehavior = {
properties: {
pressed: {
type: Boolean,
default: false;
readOnly: true;
}
},
listeners: {
mousedown: '_addPressed',
mouseup: '_removePressed'
}
created: function() { // lifecycle callback
console.log('object with behavior is created');
}
_addPressed: function() {
this.classList.add('pressed'); // Adds the pressed class that the element knows or use style animation
this._onPressStart();
},
_removePressed: function() {
this.classList.remove('pressed');
this._onPressEnd();
}
_onPressStart: function() {
// abstract
}
_onPressEnd: function() {
// abstract
}
};
</script>
Usage: <link rel="import" href="../pressed-behavior/pressed-behavior.html">
is: 'bouncy-button',
behaviors: [MyBehaviors.PressedBehavior], // behaviors array ===
_onPressEnd: function() { alert('Press ended'); } // implement abstract method
Style:
<style>
:host(.pressed) {
-webkit-animation: bounce 0.9s ease-out;
animation: bounce 0.9s ease-out;
}
@keyframes bounce {
0% { transform: scale(1.0) };
10% { transform: scale(1.2) };
20% { transform: scale(1.3) };
30% { transform: scale(1.2) };
100% { transform: scale(1.0) };
}
@-webkit-keyframes bounce { ... -webkit-transform: ...
</style>
Neon-Animation:
===============
Display: display: none, display: inline-block
<link rel="import" href="../neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../neon-animation/animations/fade-out-animation.html">
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
Use:
is: 'login-panel',
behaviors: [Polymer.NeonAnimationRunnerBehavior], // enables animationConfig
listeners: { // short-hand for addEventListener(), need since animations doesn't persist state
'neon-animation-finish': '_onNeonAnimationFinish'
},
properties: {
opened: {
type: Boolean
},
animationConfig: { // set up all animations
value: function() {
return {
'entry': {
name: 'scale-up-animation',
node: this // target of the animation - can also use this.$.child
},
'exit': {
name: 'fade-out-animation',
node: this
}
};
}
}
},
show: function() {
this.opened = true;
this.style.display = 'inline-block';
// this.cancelAnimation() -- optionally cancel any previous animation
this.playAnimation('entry');
}
hide: function() {
this.opened = false;
// this.style.display = 'none';
this.playAnimation('exit');
}
_onNeonAnimationFinish: function() {
if (!this.opened) {
this.style.display = 'none';
}
}
Multiple animations:
animationConfig: { // set up all animations
value: function() {
return {
'entry': [
{
name: 'slide-down-animation',
node: this,
timing: { duration: 2000 }
},
{
name: 'fade-in-animation',
node: this,
timing: { delay: 1000, duration: 1000 }
}
],
'exit': {
name: 'fade-out-animation',
node: this
}
}
}
}
Creating Custom Animations:
===========================
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../neon-animation/neon-animation-behavior.html">
<link rel="import" href="../neon-animation/web-animations.html">
<script>
Polymer({
is: 'bounce-in-animation',
behaviors: [Polymer.NeonAnimationBehavior],
configure: function(config) {
var node = config.node;
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
}
// Remove the offsets to have the keyframes evenly
// distributed over the life of the animation
this._effect = new KeyframeEffect(node, [
{offset: 0.0, 'transform': 'scale(0)' },
{offset: 0.8, 'transform': 'scale(1.5, 1.5)' },
{offset: 0.9, 'transform': 'scale(0.8, 0.8)' },
{offset: 0.95, 'transform': 'scale(1.2, 1.2)' },
{offset: 0.98, 'transform': 'scale(0.9, 0.9)' },
{offset: 1.0, 'transform': 'scale(1, 1)' }
], this.timingFromConfig(config));
return this._effect;
}
});
</script>
Theme:
======
Create and import theme.html:
<style is="custom-style">
paper-menu {
--paper-menu-background-color: orange;
}
paper-button {
--paper-button: {
color: green;
background-color: aqua;
}
}
</style>
Resource: https://polymerthemes.com
Leaflet Map:
============
<leaflet-map fit-to-markers latitude="26.023679" longitude="-80.143186" zoom="10">
<leaflet-tilelayer url="[[getTileLayerAddress()]]"></leaflet-tilelayer>
<leaflet-icon
id="busIcon"
icon-url="http://...png" // Internal name is iconUrl, but you have to use icon-url
icon-anchor-x="22" // Internal name is iconAnchorX, but you have to use icon-anchor-x
icon-anchor-y="22">
</leaflet-icon>
<leaflet-marker ... icon="busIcon" ...></leaflet-marker>
Resource: http://leaflet-extras.github.io/leaflet-map/demo.html
Routing with app-router:
========================
<link rel="import" href="../bower_components/app-router/app-router.html">
<link rel="import" href="../bower_components/pushstate-anchor/pushstate-anchor.html">
<app-router mode="push-state">
<app-route path="/home" import="/elements/transit-map/transit-map.html"></app-route>
<app-route path="/routes" import="/elements/route-table/route-table.html"></app-route>
<app-route path="/routes/:route" import="/elements/route-view/route-view.html"></app-route>
<app-route path="*" import="error-page.html"></app-route>
</app-router>
<template id="mainmenu" is="dom-bind">
<paper-menu>
<paper-item paper-drawer-toggle>
<a is="pushstate-anchor" href="/routes">
<iron-icon icon="list"></iron-icon>
<span>Routes</span>
</a>
</paper-item>
</paper-menu>
</template>
Using 'route' parameter from the path:
<dom-module id="route-view">
<style>
</style>
<template>
<h1>Route View Route ID: <span>{{route}}</span></h1>
</template>
<script>
Polymer({
is: "route-view",
properties: {
route: {
type: String,
value: '1',
notify: true
}
}
});
</script>
</dom-module>
Elements:
=========
paper-drawer-toggle - auto-hide menu and hide on button clicks for drawer panel
Components:
===========
bower install --save PolymerElements/paper-toolbar
bower install --save PolymerElements/paper-icon-button
bower install --save leaflet-map
bower install --save GoogleWebComponents/firebase-element
Server:
=======
npm install connect serve-static
>var connect = require('connect');
>var serveStatic = require('serve-static');
>connect().use(serveStatic(__dirname)).listen(8080);
node server.js
Yeoman:
=======
npm install -g generator-polymer
yo polymer
Gotchas - Wish I knew earlier:
==============================
1) <template id="tr" is="dom-bind">
--Need is="dom-bind" in <template> if want to use bindings {{var}} in main index.html page
--Also need is="dom-bind" in <template> if want to use routing such as more-routing.
---Ex: Around <more-route-selector><paper-menu> and
----<more-route-selector selectedParams="{{params}}"><iron-pages><section
2) You can't use JQuery (iron-ajax is available for JSON processing)
--The problem is any Javascript library you import will use the main DOM
---but your element is in the shadow/shady/light DOM
--Only Javascript functions declared in Polymer({ }); seems to work with the Polymer element.
3) Wrap your data bindings in <span>{{var}}</span>.
One var per span. You can't do this: <span>{{var1}} {{var2}}</span>.
4) Attribute input to elements use dashes: icon-anchor-x="22" if element has property iconAnchorX
5) Commas - don't miss them in Polymer({ properties: ...}) or after the is and properties - easy to miss.
Links:
======
https://www.polymer-project.org/0.5/components/core-icons/demo.html
--Quick link to all the icons used with iron-icons
http://www.gajotres.net/polymer-adventures-more-then-150-resources/
--All Polymer resource links - wish I saw this earlier
https://github.com/Granze/awesome-polymer
--Polymer 1.0 resource links
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment