googlearchive/polymer-patterns

Small, useful, samples that show how to do things, the Polymer way

Polymer Snippets

Small, useful snippets/samples that show how to do things the Polymer way.

Setup

bower install

Run the tests

1. Fire up a web server in the root of this repo. For example:

   python -m SimpleHTTPServer

2. Hit http://localhost:8000/tests/.

Contributing

See the contribution guide.

Table of Contents

Basics

• Binding to a property
• Binding to a complex object
• Binding to a native HTML element
• Binding to a style
• Using 'bind' to create a single template instance
• Finding Shadow DOM elements
• Using a computed property
• Creating a one-time binding
• Extending a native HTML element

Control Flow

• Conditionally hiding an element
• Getting the iteration index when looping over a collection
• Looping over a collection using iterative templates
• Using conditional templates
• Using template repeat with a table row or an option

Inheritance

• Extending a Polymer element
• Overriding an inherited method

Forms

• Binding a boolean property to a checkbox
• Binding to a text input
• Binding to a textarea
• Selecting one item using radio buttons
• Selecting many items using checkboxes
• Selecting one item using the core-selector element
• Selecting many items using the core-selector element
• Implementing simple validation

Observing Changes

• Observing property changes
• Observing changes to light DOM children
• Waching for changes to a nested object

Events

• Using custom events

Insertion Points

• Creating an insertion point using the content tag
• Creating insertions using the select attribute
• Accessing the DOM inside a content tag
• Retrieving the insertion points for distributed nodes

Filters

• Using custom filters

Styling Elements

• Defining styles inside a Polymer element
• Programmatically changing the styles of an element
• Using :host with a CSS selector
• Using :host with pseudo classes
• Using host-context to theme an element
• Applying styles by piercing Shadow DOM boundaries
• Styling distributed nodes

Layout attributes

• Using layout attributes
• Using flex
• Nesting flex layouts

Core Elements

Snippets using Polymer core elements.

Core Toolbar

• Using core-toolbar
• Adding a menu button
• Adding button rows
• Changing toolbar size

polymer-patterns's Issues

Noticed some odd failures in test runner

When I open the test runner I see 42 pass and 3 failures reported in the top right. However, the page itself shows all green and clicking on 'failures' filters the list down to nothing. Not sure what's up :\

0.8, 0.9 or 1.0 too ?

This repo is great, curious if there is something similar for newer versions, or will be?

Need a preventing FOUC sample

The sample should go in basics/.

Polymer is not present in the jsbin URLs

Getting the following errors
Redirect at origin 'http://www.polymer-project.org' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://null.jsbin.com' is therefore not allowed access.

ReferenceError: Polymer is not defined
at runner:2

7 links in the TOC are bad

The following links under https://github.com/PolymerLabs/polymer-snippets#table-of-contents are bad:

• https://github.com/PolymerLabs/polymer-snippets/blob/master/selecting-one-item-using-radio-buttons.html
• https://github.com/PolymerLabs/polymer-snippets/blob/master/selecting-many-items-using-checkboxes.html
• https://github.com/PolymerLabs/polymer-snippets/blob/master/selecting-items-using-the-core-selector-element.html
• https://github.com/PolymerLabs/polymer-snippets/blob/master/layout-attributes/using-layout-attributes.html
• https://github.com/PolymerLabs/polymer-snippets/blob/master/layout-attributes/using-flex.html
• https://github.com/PolymerLabs/polymer-snippets/blob/master/layout-attributes/nesting-flex-layouts.html

A snippet on validation messages showing and hiding would be nice

How to properly use JS with Polymer?

I'm trying to integrate bricks.js (https://jsfiddle.net/939ppbj4/13/) into a polymer project, but I can't quite figure out how to do it..

I've tried to go through the snippets in this repo but it seems javascript is always written as:

Polymer({
      is: 'test',
      properties: {
        blablabla
      },
});

which I find a little confusing..

I believe the closest thing I've gotten to being correct is as its written below, but it results in a bricks.min.js error saying

Uncaught TypeError: Cannot read property 'style' of null

(I don't get this error if I run same code outside polymer (like in the jsfiddle)

<dom-module id="test">
  <template>
    <section class="grid" >
      <div data-packed>
        <img src="http://lorempixel.com/150/340/">
      </div>
      <div data-packed>
        <img src="http://lorempixel.com/150/240/">
      </div>
      <div data-packed>
        <img src="http://lorempixel.com/150/540/">
      </div>
      <div data-packed>
        <img src="http://lorempixel.com/150/140/">
      </div>
      <div data-packed>
        <img src="http://lorempixel.com/150/320/">
      </div>
      <div data-packed>
        <img src="http://lorempixel.com/150/108/">
      </div>
      <div data-packed>
        <img src="http://lorempixel.com/150/340/">
      </div>
    </section>
  </template>

  <script src="../../scripts/bricks.min.js"></script>

  <script type="text/javascript">
    var sizes = [
      { columns: 2, gutter: 10 },
      { mq: '48em', columns: 3, gutter: 10 },
      { mq: '64em', columns: 4, gutter: 10 }
    ];

    var brickInstance = Bricks({
      container: '.grid',
      packed: 'data-packed',
      sizes: sizes,
    });

    window.onresize = function() {
      brickInstance.pack()
    };
  </script>
</dom-module>

Any help/suggestions would be much appreciated :3

Add <template is="auto-binding"> snippets

I've got two snippets related to , http://jsbin.com/disafa/3/edit and http://jsbin.com/wusos/2/edit, that I need to import into this repo once the initial set are all pulled in.

Create a "Using the core-input element for text fields" sample

Assigned to kroikie.

Need sample that shows extending a Polymer element

Need sample to show dynamically adding a custom element into the host's DOM

Note: should use a custom element with attributes.

make repo name consistent with readme title

Repo name is polymer-patterns, README title is Polymer Snippets. Either one is good, just keep it consistent

Polymer "inheritance" proposal - expose more mixins!!

I fully understand why you wen't away from full components inheritance. A crude weapon indeed.
However it would be VERY convenient if all elements exposed their style, properties and behaviour as mixins for other elements to build on.

This IS currently possible, so it is only a matter of enhancing existing elements to follow this pattern to allow for better composition.

This would also help to solve the "problem" with the content selector limitation: googlearchive/core-selector#39

Example paper-scroll-header-panel

var mixinElement = Polymer.registry('paper-scroll-header-panel')

Polymer.extend({
  properties: [
    mixinElement.properties, 
    AnotherSetOfproperties, 
  ],
  behaviors: [
    myOtherMixinElement.behaviors,
    someNiceBehavior,
    mixinElement.behaviors
  ]
}, {
  // my specific element overrides and customizations
});

You could of course see a behavior as a full set of properties and methods which form a logical unit. Then expose methods and properties as separate mixin units as well. Then allow full inheritance as a convenience, which simply inherits all behaviors and the shared styles exposed by the elements as well.
Provide full flexibility and granular control.

Cheers!

Write a core-ajax sample

Write a sample that defines a Polymer element that reads JSON data from some API at load time using the core-ajax element.

Conditional attribute-assignment has changed?

It appears that the conditional-binding operator has changed from ?= to $=. Oddly, I can't even find conditional as a term in the current documentation https://www.polymer-project.org/1.0/docs/devguide/data-binding, but it does show the dollar-sign usage at one point. When I switched to dollar-sign in my code, it worked properly.

(Also, line 26 with the conditional-binding documentation, no longer exists).

Need sample that shows extending a native HTML element

e.target.templateInstance.model

I just found the documentation on finding the model that goes w/ the target of an event handler. I haven't seen this in any of the examples and think it is worth demonstrating.

Often, you’ll want to identify the event with the model data used to generate the template instance, either to update the model data or to access a piece of data that isn’t rendered by the template.

You can get the model data from the event’s target.templateInstance.model property. Any identifiers that you could access inside the template are available as properties on the .model object.

Content element selectors - loosen up please!

As I understand it and from own experience, a content element can only select direct children. This makes sense in most simple scenarios, but as soon as you have a custom element in the mix it falls apart. The custom element acts as a wrapper around the "real" child elements, now in the shadow dom, but then the children are not there for selection and you can't really compose this way with custom elements which should be the whole point?
Am I missing something here!? I can't believe this design constraint.

https://github.com/Polymer/core-selector/blob/master/core-selector.html#L292

IMO, the nodes should be mapped, so that if a node is a custom element, it should add its children to the list of nodes as well (only at the top level, not recursively!). I understand why you have the current limitation, but sometimes (often), the custom elements acts as a wrapper, a structural element container without any (intended) UI influence, just a way to decompose a logical entity.

PS: How do you test if a given node is a custom element? Simply by naming convention? or is there a better way? Thanks.

Need a second core-selector example

https://github.com/PolymerLabs/polymer-snippets/blob/master/snippets/forms/selecting-items-using-the-core-selector-element.html should be split into two samples.

• Rename the current sample "Selecting many items using the core selector element".
• Create a second sample "Selecting one item the core selector element" that let's the user select only a single item from a collection. In this sample, do not use valueattr as an argument. Instead, work with the indices of the selected element.