googlearchive/polymer-elements

Basic non-visual elements

polymer-elements's Issues

<polymer-animation>: cannot play an animation in WebComponentsReady without going async

See gist: https://gist.github.com/sorvell/6980699

can't get tests running

Hey Guys -
Sorry if this is a lame question. I don't have much node experience. I forked the repo and tried to run the tests so i could give you a pull request, but I could not get the tests running. Here are my steps to reproduce.

1. Fork the repo
2. git clone --recursive
3. cd
4. npm install
5. start a webserver with document root at
6. open a browser with to localhost:4000/test/runner.html

I basically get some 404's for missing a mocha test file and then get some javascript errors about missing methods.

localstorage and toggle-button don't play nicely

In the example below, the toggle button correctly sets the value in localstorage, but when I refresh the page, it resets the value in localstorage to the default value instead of using whatever value is already there.

<script src="third_party/polymer-all/polymer/polymer.js"></script> <script> Polymer('saved-toggler', {}); </script>

<polymer-animation>: change event names

The event names animation-end|start are too generic. We should follow the polymer convention and use: polymer-animation-end|start.

polymer-select should not fire a 'select' event since that event type is already in use

The meaning of the select event is ambiguous since dom already uses this even type to mean 'text was selected' (http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select).

What about 'selection-change' instead?

This was discovered when it was noted that event.path is not generated for the 'select' event when it's fired in a shadowRoot.

Bower packages

Hey @ebidel !
How about putting all these great elements in separate packages so one can install them easy via bower?

I know, this is all in pretty alpha state, but I would also like to build some polymer components and it would be great if I can install dependencies (polymer-ajax/polymehr-xhr e.g.) á la bower install.

What do you think?

polymer-elements.html malformed

(copied from polymer-ui-elements issue 35)

The html comment in polymer-elments.html has a javascript style comment inside it (which is fine, but doesn't do anything), and then within this, there is another html comment. The close comment tag in this this inner html comment actually ends the first html comment, and then the link, class annotation, and end comment tag are all not part of the comment.

polymer-ajax: properly serialize nested objects/arrrays

Demo: http://jsbin.com/AVOTUTAC/1/edit

I'm not sure the right answer, but nested objects/arrays get serialized as strings when they're URL encoded by the element.

<polymer-ajax id="ajax" params="{{params}}" method="post" ...></polymer-ajax>
...
this.params = {
  credential: {
    username: "ebidel",
    password: "abc"
  }
}

produces:

...&credential=%5Bobject%20Object%5D

Instead, we could do basic parameterizing for arrays and objects...?

credential = [1,2,3] -> &credential0=1&credential1=2&credential2=3
credential = {username="ebidel", password:"abc"} -> &credential_ebidel=ebidel&credential_password=abc

Rename elements.html

File elements.html should be renamed to polymer-elements.html, in order to be consistent with other elements loded by polymer-docs.

No demos work in IE10

Getting a

SCRIPT5007: Unable to get property '__published' of undefined or null reference
polymer-element.js, line 114 character 7

On every one i've tried so far.
Thought these were suppose to work in all new browser?

template repeat doesn't work if not wrapped in another template

I created an element which prints a list of paper-items with

<template repeat="X">

Anyway it didn't work until i provided a <template> as parent.

Example not working:

<polymer-element name="repository-list">
        <template repeat="{{repo in repositories}}">
            <paper-item label="{{repo.name}}"><a href="repository.php?id={{repo.id}}"></a></paper-item>
        </template>
        <!-- script !--->
</polymer-element>

Example working:

<polymer-element name="repository-list">
    <template>
        <template repeat="{{repo in repositories}}">
            <paper-item label="{{repo.name}}"><a href="repository.php?id={{repo.id}}"></a></paper-item>
        </template>
    </template>
</polymer-element>

It's a wanted behaviour? Because it is not intuitive

Full code:

<polymer-element name="repository-list">
    <template>
        <template repeat="{{repo in repositories}}">
            <paper-item label="{{repo.name}}"><a href="repository.php?id={{repo.id}}"></a></paper-item>
        </template>
    </template>

    <script>
        Polymer("repository-list", {
            ready: function() {
                this.repositories = [
                    {name: "A", id: 1},
                    {name: "B", id: 2},
                    {name: "C", id: 3},
                    {name: "D", id: 4},
                    {name: "E", id: 5}
                ];
            }
        });
    </script>
</polymer-element>

Polymer elements that represents raw data

Hey @ebidel @arv et al,

First of all congrats on the new chromestatus.com! :) Great job! Seeing
Polymer in a real world production app is awesome, I like that!

I have a question about Polymer. I know the project is in a very early
state, so there aren't any best practices yet. However, when having a whole
app encapsulated in a polymer element (e.g. just like the todoMVC example),
and this app needs a bunch of data to interact with, so there's no data
fetched asynchronously during runtime but already deployed with the app.
How should one pack this data (which the app needs, because it wouldn't
work without it) in a polymer element?

As far as I understand the whole project, everything is an element, so is
the data an app uses. So, instead of just having a global variable that
holds the whole data, things have to be encapsulated in a polymer element.

I wonder, how to actually do that. How to implement a polymer element that
just represents data, so no callbacks etc.?

Regards

polymer-google-jsapi doesn't fire polymer-google-jsapi-loaded in Canary

Try: http://www.polymer-project.org/polymer-all/polymer-elements/polymer-google-jsapi/index.html

Canary no longer fires polymer-google-jsapi-loaded. Stable works more or less every time. Turning off Experimental Web Platform features doesn't seem to help either.

polymer-flex-panel source missing.

Error in console on the polymer-flex-layout demo because of the missing file.

polymer-animation element is currently broken

No animations are currently working. Also there is a circular callback between apply and play methods in case the autoplay is true.

polymer-signals events should not bubble, but non-bubbling events are unsupported by on-* syntax

uppercase signals do not work

[original issue posed by ojanvafai]

In the example below, my signal with an uppercase letter in the name doesn't work and the lowercase one gets called twice when it should only get called once.

<!DOCTYPE html>
<script src="third_party/polymer/polymer.js"></script>
<link rel="import" href="third_party/polymer-elements/polymer-signals/polymer-signals.html">

<polymer-element name="my-element">
  <template>
    Should get a "fooBar" signal and only a single "foobar" signal.
  </template>
  <script>
    Polymer('my-element', {
      created: function() {
        this.asyncFire('polymer-signal', {name: "foobar", data: "foobar"});
        this.asyncFire('polymer-signal', {name: "fooBar", data: "fooBar"});
      }
    });
  </script>
</polymer-element>

<polymer-element name="my-app">
  <template>
    <polymer-signals on-polymer-signal-foobar="foobarSignal"></polymer-signals>
    <polymer-signals on-polymer-signal-fooBar="foobarSignal"></polymer-signals>
    <content></cotnent>
  </template>
  <script>
    Polymer('my-app', {
      foobarSignal: function(e, detail, sender) {
        this.innerHTML += '<br>[my-app] got a [' + detail + '] signal<br>';
      }
    });
  </script>
</polymer-element>

<my-element></my-element>
<my-app></my-app>

polymer-element size is not adjust to content size

<template>
...
<div>
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
    <div class="spacer" style="clear: both;"></div>
</div>

When you check size of such element in chrome is states 0 , 0. I have tried also "clearfix" with css after selector without success. Inside shadow root size is fine, but outside is not.

I am not sure if it should work, but looks like but for me.

Error in CONTRIBUTING.md

The repository 'polymer-all' doesn't exist.

git clone [email protected]:Polymer/polymer-all --recursive

bower.json's version needs a bump

Right now the bower version of polymer-ui-elements and polymer-elements is not bumped to "0.0.20131107". If you run "bower install polymer-ui-elements", you will get the "0.0.20131107" version of Polymer. Because of the incompatible change with the оn- events, right now you will get the outdated version of

polymer-elements\polymer-selector\polymer-selector.html

and inside of it you'll have old implementation:

<polymer-selection id="selection" multi="{{multi}}" on-polymer-select="selectionSelect"></polymer-selection>

which won't work with version "0.0.20131107" of Polymer

In single selection, polymer-select event should fire once per selection change

Currently, selecting an item on a <polymer-selection> triggers two discrete polymer-select events: one for deselecting the previously-selected item, and another for selecting the new item. To me, at least, this was counter-intuitive — I was expecting a single event.

I'd had code that needed to update when the selection changed, and sinking polymer-select caused the code to be invoked twice. I eventually worked out that my handler needed to check event.detail.isSelected to determine whether it was handling the deselection (which I didn't care about) or the selection (which I did).

I'd hazard that most UIs that need to track the selection state (e.g., to show details for a selected item) would want to do the same thing. So I thought it'd be nicer if the polymer-selection were smart enough to just fire the event once, at least for the common single-selection (not multi) case.

There's an existing comment in setItemSelected about replacing the current event with summary notifications. Perhaps that would address this issue, but even if that isn't pursued, it'd be nice to just fire a single event in this common case.