FAQ Database Discussion Community


Polymer 1.0 in Ember-cli, wrong appearance

javascript,ember.js,polymer,frontend,ember-cli
I have managed to integrate Polymer 1.0 to my Ember-cli project. This my Brocfile var vulcanize = require('broccoli-vulcanize'); var pickFiles = require('broccoli-static-compiler'); var mergeTrees = require('broccoli-merge-trees'); var EmberApp = require('ember-cli/lib/broccoli/ember-app'); var app = new EmberApp({ compassOptions: { sassDir: "app/styles/main", outputStyle: 'expanded' } }); //app.import("./bower_components/webcomponentsjs/webcomponents-lite.min.js"); var polymerVulcanize = vulcanize('app', { input:...

Polymer's two way data-binding not working in an element's child's attribute value

javascript,html5,data-binding,polymer
I have a product-card custom element that looks like this: <dom-module id="product-card"> <template> <div class="card-main-content layout horizontal center"> <content select="img"></content> <content select="h3"></content> <content select="h4"></content> </div> <content></content> <paper-icon-button id="carticon" icon="add-shopping-cart" on-tap="cartTapped"> </paper-icon-button> </template> </dom-module> <script> (function() {...

data binding issue with polymer template inside angular app

angularjs,polymer
I copied and paste code from https://www.polymer-project.org/1.0/docs/devguide/templates.html in my angular app. Anything inside of the template tag is not rendering. <dom-module id="employee-list"> <template> <div> Employee list: </div> <template is="dom-repeat" items="{{employees}}"> <div>First name: <span>{{item.first}}</span></div> <div>Last name: <span>{{item.last}}</span></div> </template> </template> <script> Polymer({ is:...

Dropshadow from paper-toolbar overlays paper-dialog

css,polymer,polymer-1.0
I have basic drawer app with a dialog box. When the dialog box opens the dropshadow from the toolbar(I assume) is bleeding over the box. Is there a fix for this? <paper-drawer-panel> <paper-header-panel drawer> </... <paper-header-panel main> <paper-toolbar> <paper-dialog>...</paper-dialog> </paper-toolbar> </paper-header-panel> </paper-drawer-panel> Some things I have tried includes moving the...

Polymer 1.0 how to call a paper-icon-button's tap when a coupled paper-input-container receives the enter key

event-handling,polymer,web-component
I have a paper-input-container next to a paper-icon-button and want to trigger the same function that is wired to the paper-icon-button's on-tap handler when a user hit's enter while the input has focus... anyone know how to do this. <html> <head> </head> <body> <dom-module id="example-stuff" > <style> :host { display:...

Polymer core-localstoreage TypeError: Cannot read property 'save' of undefined

polymer,material-design
I'm following this tutorial to build a Material Design app with Polymer. http://io2014codelabs.appspot.com/static/codelabs/polymer-build-mobile/#6 when I implement this i get this error TypeError: Cannot read property 'save' of undefined this error is happening in the dataChanged function anyone know why? <link rel="import" href="bower_components/polymer/polymer.html"> <link rel="import" href="bower_components/font-roboto/roboto.html"> <link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">...

dom-if doesn't get updated in dom-repeat

javascript,html,templates,polymer,polymer-1.0
<template is="dom-repeat" items="{{fruit_list}}" as="fruit"> <template is="dom-if" if="{{fruit.isOrange}}"> I'm an orange! </template> </template> Here I have a dom-if template inside a dom-repeat template. It works great if the value of fruit.isOrange has already been finalized. However if not, for example, it was true when before but now I change it to...

Why does this polymer element's property resolve to undefined?

javascript,polymer,web-component,polymer-1.0
I am trying to dynamically assign an attribute to an iron-ajax template but it resolves to undefined. <dom-module id="products-service"> <style> :host { display: none; } </style> <template> <iron-ajax id="productsajax" auto url="http://localhost:3003/api/taxons/products" params='{"token":"my-token"}' method='GET' on-response='productsLoaded' handleAs='json'> </iron-ajax> </template> </dom-module> <script> (function() { Polymer({ is: 'products-service', properties: { categoryid: { type:...

Browser compatibility of Polymer

cross-browser,polymer,compatibility,polymer-1.0
I am starting to use Polymer 1.0: the only thing I tried is a simple template like this: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="bower_components/polymer/polymer.html"></link> <link rel="import" href="bower_components/iron-icons/iron-icons.html"> <title>Polymer...

How to create a new template instance in Polymer 1.0?

polymer,polymer-1.0
In Polymer 0.5 I used the templateElement.createInstance(dataToBind) to create a new instance of a template and bind the data object to the new instance: var instance = templateElement.createInstance(dataToBind); container.appendChild(instance); In Polymer.Base I found the instanceTemplate function to create a new instance of the template, but this function does not bind...

Polymer 1.0 notifyPath for array element

polymer
Simple example: <template is="dom-repeat" items="{{items}}"> <template is="dom-repeat" items="{{item.subitems}}"> <span>{{item}}</span> </template> <span on-tap="add">ADD</span> </template> attached: function () { this.items = [ { subitems:[] }, { subitems:[] } ] }, add: function (e) { e.model.item.subitems.push("Test"); } This will not refresh the dom-repeat for {{item.subitems}}. How can I notify polymer of the change?...

Polymer 1.0 app-theme only affecting index.html and not on custom elements

css,polymer
I'm using the Polymer Starter Kit, and I wanted to move the scaffold into it's own element <main-scaffold>. There are styles in app-theme.html that applied to it before I moved it into from index.html into it's own element, but now none of the styles apply. This is the case for...

Polymer & google cloud endpoints golang backend

google-app-engine,polymer,google-cloud-endpoints
I'm trying to get my google cloud endpoint from polymer 1.0 all is set and working (backend and dispatcher on appengine), but the google-api-loader/google-client-loader (Tried both) refuses to acknowledge my endpoint, with google-api-loader nothing happens ready event never triggers, with google-client-loader it does but tries to get this url: https://content.googleapis.com/discovery/v1/apis/jobs/v1/rest?fields=rootUrl%2CservicePath%2Cresources%2Cparameters%2Cmethods&pp=0...

How to use Polymer (1.0) with Rails (4)?

ruby-on-rails,ruby-on-rails-4,polymer,web-component
Now that Polymer (1.0) is "Production Ready" Which is the best way to use it on Rails (4) ? I read a lot and I saw that all the solutions are deprecated, (For example using Gems like: likepolymer-rails, emcee , etc) I'm lost trying to create a good structure for...

Dynamically created html import inside a polymer element (Version 1.0)

javascript,html,polymer,web-component,polymer-1.0
Dynamically created html import inside a polymer element Does anyone know how to dynamically add a html import into a polymer element (version 1.0)? The code below doesn't seem to work and complains that the.. HTML element <link> is ignored in shadow tree. Does anyone know any way around this...

Binding imperatively

binding,polymer
Is there a way to set up bindings imperatively. An example use case: var el2 = new MyElement(); el2.myProp = this.$.anotherElement.anotherProp That won't setup a binding, it just assigns the value or object. I'd like to find a way to do something like: el2.myProp.bindTo(this.$.anotherElement.anotherProp) Possible?...

Polymer change the icon in paper-icon-button onclick

javascript,polymer
Using Polymer 1.0 I'm trying to change an paper-icon-button's (Polymer) icon on click. Can't get it working. I've done this so far. <paper-icon-button class="expandComments" icon="{{isCollapsed? 'expand-more' : 'expand-less'}}" on-click="expanding"> </paper-icon-button> 'expand-more and 'expand-less' is the icons i want to use. Created function: created: function() { this.isCollapsed = true; }, Expanding...

Polymer iron-form not working

polymer,polymer-1.0
I have the following markup in my html: <form is="iron-form" login-form> <paper-input label="Email" type="email" name="email"></paper-input> <paper-input label="Password" type="password" name="password"></paper-input> <paper-button class="self-end btn-primary" raised login-btn>Login</paper-button> </form> In chrome, the form is never upgraded to an iron-form, but it works fine in firefox. However, I can use: document.createElement('form', 'iron-form'); to create an...

Polymer 1.0 import all elements at once

html,polymer,polymer-1.0
I have started locking at Googles new Polymer SDK, now that I started learning I asked my self if it's possible to include all elements of the paper group at once? Otherwise my header gets bigger as my actual body code... <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html"> ...

How to two-way bind iron-input to dom-repeat's item?

javascript,polymer,polymer-1.0
I just started playing with Polymer 1.0 and am trying to do a very simple binding to collection. I am able to display text within dom-repeat, but the two-way binding to iron-input does not work. I tried array of strings, and objects. No luck. <link rel="import" href="bower_components/polymer/polymer.html"> <link rel="import" href="bower_components/iron-input/iron-input.html">...

Prevent polymer from setting sub-elements class to style-scope

polymer,polymer-1.0
I'm having some trouble migrating to Polymer 1.0 My main problem is that the classes "style-scope" and "my-element" are being applied to every child node in the element. This is not a problem when using something like this: <paper-dialog modal class="vertical layout"> <div class="top"> <div class="green">{{format(inputtext)}}</div> It just changes their...

Why do Polymer's computed properties need explicit property arguments?

polymer,polymer-1.0
I was digging a bit into the Polymer 1.0 elements and I am a little curious about the computed properties. For example, in paper-drawer-panel.html, <dom-module id="paper-drawer-panel" …> … <div id="main" style$="[[_computeDrawerStyle(drawerWidth)]]"> … </div> … </dom-module> <script> Polymer({ is: 'paper-drawer-panel', … _computeDrawerStyle: function(drawerWidth) { return 'width:' + drawerWidth + ';'; },...

iron-media-query doesn't work - Polymer 1.0

polymer,polymer-1.0
I'm new to Polymer (1.0). My <iron-media-query> element is not working. No errors in the console but it does not display anything. Some improvements would be awesome! I'm trying to get it up and running since 2 hours. :) Thanks in advance Ron <!-- Works correctly --> <link rel="import" href="../polymer/polymer.html">...

Duplicate values with Polymer template repeat

templates,polymer,repeat,web-component
Okay any I have a strange thing happening with my polymer template <polymer-element name="my-playlist" attributes="info"> <template> <core-ajax url="/getlist" method="POST" auto response="{{data}}" handleAs="json"> </core-ajax> <style> </style> <core-selector class="list"> <template repeat="{{k in data}}"> <core-ajax url="http://api.soundcloud.com/tracks/{{k.track}}.json?client_id=9a6dccd301f1d1cbab751e0a1ec82e2e" method="GET" auto response="{{response}}" handleAs="json">...

Dart - Polymer Unit Testing. Not able to reference dom elements after click event

dart,polymer,dart-polymer
Not able to reference dom elements. Most of the test case works except for the last expectation in ClickSignInButton when I want to make sure I can evaluate error message div when form is submitted without any data. expect(document.querySelector('qme-header').shadowRoot .querySelector('#headerErrorDiv'), isNotNull); always fails and headerErrorDiv is null even though its...

:host styles have no effect

polymer,polymer-1.0
I had a wokring app with some :host styles on custom elements built with Polymer 5.5. Now, I'm converting this to Polymer 1.0 but run into this weird issue: Styles defined with :host are not applied. For testing purposes I took the example right from the documentation: <dom-element id="my-element"> <style>...

Polymer 1.0 iron-flex-layout only works on some tags

css,flex,polymer,polymer-1.0
Update: The polymer docs are now updated to reflect the answer below I'm doing a polymer 1.0 app. I'm trying to layout some paper toolbars on part of the screen horizontally. It seems I can get iron-flex-layout's @apply(--layout-horizontal) to work on some elements but not on others. I put together...

Polymer Data-Binding will not replace

javascript,polymer,web-component
I have a polymer element that refuses to bind, and I can't figure out why. The rendered output is just sending the raw {{varName}} rather than replacing it with the appropriate value. However, formulas (with the [[fn(arg)]] syntax) and binding to tags (with the $="{{varName}} syntax) works fine. Any idea...

Computed bindings in auto-binding templates in Polymer 1.0

polymer,polymer-1.0
How can I define computed bindings in auto-binding templates (i.e. those declared as <template is='dom-bind'>...</template>)?

Polymer hide drawer on big screens

html,polymer
This is my third question in one week about the Polymer SDK, I'm really sorry about that. Basically I'm trying to hide the drawer of the <paper-drawer-panel> element on a big screen, so that it looks like the mobile version, with this nice hamburger-menu i have coded with the <paper-icon-button>...

How to style Polymer's toolbar background in 0.5?

polymer,toolbar
I'm having issues trying to set the full background color of the toolbar in Polymer 0.5 when using core-scaffold. What I've tried so far on Stackoverflow only sets the left menu side, but not the right content side. How does one set the background color for the full toolbar? Below...

Create a custom event for a Polymer Custom-Element

javascript,javascript-events,polymer
I've been trying to create an event to be triggered given certain conditional (more general case), but I have not found a way, at least not in the official documentation of Polymer for handling events https://www.polymer-project.org/0.5/articles/communication.html The custom element listen to another event, so he expects a condition is met...

Polymer 1.0 - I cannot use class={{variable}}. How can I set class name dynamically?

polymer,polymer-1.0
I have understood from my last question here that string concatenate is not allowed with 0.9 and above (currently I am migrating to version 1.0). I have to rather wrap every variable inside separate HTML element. However there are times when I need to use a href or class attribute...

Static and dynamic class in the same element. Polymer

polymer
How to define in the same DOM element a dynamic class and another static? I tried this: class$="{{clase}} my-static-class" class$="[{{clase}}, 'my-static-class']" class$="{{clase}}" class="my-static-class" but doesn't work....

Shared behavior state across custom elements

javascript,internationalization,polymer,polymer-1.0
I have these two custom Polymer Elements (Polymer 1.0.3): Displays text to be translated. Displays button to trigger loading of translation. I also have a Behavior that holds the translations (json object) and contains all the functions that make translation possible. This is what I expect to happen: Click the...

Polymer dom-repeat and displaying result of iron-ajax call

javascript,json,polymer
I have a feed of GP Practice addresses the start of which is as follows (not the whole feed which is over 16000 entries - still got to figure out paging) [{"Address1":"73 UPPER WICKHAM LANE","Address2":"WELLING","Address3":"KENT","Address4":"","Address5":"","CloseDate":"\/Date(-62135596800000+0000)\/","ContactName":"","ContactTelephone":"020 88541910","EmailAddress":"","LastUpdatedDate":"\/Date(1434749040000+0100)\/","Name":"(GPSI) DR AC...

Dynamically adding and removing Event listeners

javascript,polymer,polymer-1.0
I added a tap listener to a div in a custom element using var nicediv = document.getElementById('nicediv'); nicediv.addEventListener('tap',this.listenerfunc.bind(this),false); This is successful but I am unable to remove the event listener. This didn't work. nicediv.removeEventListener('tap',this.listenerfunc); Any thoughts?...

Polymer hello-world component not rendering

polymer,web-component
I'm following the Polymer tutorial at https://www.youtube.com/watch?v=wId1gMzriRE I'm using Polymer 1.0 (the tutorial is an older version). I had changed the platform.js to webcomponents.js. Now my index.html is as <!doctype html> <html> <head> <title>Polymer Trial</title> <script src="bower_components/webcomponentsjs/webcomponents.js"></script> <link rel="import" href="elements/hello-world.html"> </head> <body> <h2>Test</h2> <hello-world></hello-world>...

Change google-map center using Polymer

polymer
I'm working on a custom element using Polymer. I want to change its center after it was rendered. I can't found it on Polymer docs. Anyone could help me? <dom-module id="my-map"> <template> <google-map latitude="{{latitude}}" longitude="{{longitude}}" zoom="15"> </google-map> </template> <script> Polymer({ is: "my-map" // I want to change map center here...

Polymer 1.0 data binding not working

data,binding,polymer
I have the following polymer element: The value of navigator.currentStep is not updating after someMethod is called. <dom-module id="m"> <template> Navigator step = <span>{{navigator.currentStep}}</span> </template> </dom-module> Polymer({ is: 'm', ready: function() { this.navigator = new Navigator(1); console.log(this.navigator.currentStep); // 1 }, someMethod: function() { this.navigator.next(); console.log(this.navigator.currentStep); // 2 } }); Output...

paper-header-panel content div behaving erratically

css,polymer,polymer-1.0
I am doing a simple test of polymer 1.0 elements. In the paper-header-panel test, the content area elements are not visible or are moving over the paper-header div. The demo is here and the code is below. Why is the content text not being displayed? <!DOCTYPE html> <html> <head> <title>paper-header-panel...

Polymer dropdown data binding with AJAX response

javascript,ajax,data-binding,polymer
I'm very new to JS and Polymer. Can't figure out why this is not working, I've rewritten it a millin times based on the few topics out there. The idea is to have a very simple dropdown with it's choices data bound to the response of the AJAX request. Based...

How do I use dom-repeat in Polymer binding to a dictionary

polymer
I am trying to bind to data below which is a dictionary <template is="dom-repeat" items="{{data}}"> </template> I have found a similar question here Polymer: How to loop and render HTML to screen <template repeat="{{customer, i in customers}}"> <div>{{i}}, {{customer.name}}</div> </template> but I am not sure if this applies to Polymer...

polymer 1.0 data binding not working as expected

javascript,php,arrays,json,polymer
I'm trying to bind some data in a custom element but to no avail. I have a system-menu.html that has my custom element: system-menu.html <link rel="import" href="../../bower_components/polymer/polymer.html"> <link rel="import" href="../../bower_components/iron-menu-behavior/iron-menubar-behavior.html"> <dom-module id="system-menu"> <template> <template is="dom-repeat" items="{{data}}"> <li>{{item.name}}</li> </template> </template> </dom-module> <script> (function() {...

How to style paper elements inside of a custom element (Polymer 1.0)?

html,css,polymer,polymer-1.0
Whatever I do, I can't seem to be able to style paper-elements using custom properties inside a custom element: <dom-module id="ts-dashboard"> <style> :host { display: block; --paper-tabs-selection-bar-color : #ED1C23; } paper-tabs { background-color : #962E33; } </style> <template> <paper-tabs selected="{{selected}}"> <paper-tab>Choice 1</paper-tab> <paper-tab>Choice 2</paper-tab> </paper-tabs> <!-- some more elements... -->...

Polymer 1.0 services issue

polymer,web-component
I'm working on a reddit client using polymer to check out web compoments technologies. I started with the 0.5 version and got back on this project recently. That when I found out that polymer had the 1.0 released so I started over (as it wasn't that advanced anyway). I have...

Polymer Page load up issues

html,polymer
I have found this very great looking Polymer-starter-kit-lite V1.0.1 here. When trying to create my own page some text appears while loading the page. Here is mine: and here is the Polymer Starter Kit that i downloaded from github, it comes in with a smooth fading effect: Maybe someone knows...

Are there any Chrome-specific techniques to scope/isolate CSS?

css,google-chrome,google-chrome-extension,polymer,shadow-dom
I'm writing a Chrome extension that injects HTML into a displayed page. I want the injected HTML to have it's own style, protected from the CSS that may be present in the host page. I've tried using conventional CSS, and still suffer from style corruption from the host page. After...

Click event not firing in polymer paper-icon-button

javascript,polymer
I have the following page defined <!DOCTYPE html> <html> <head> <title>Practice List</title> <link rel="import" href="elements/elements.html" /> <link rel="stylesheet" type="text/css" href="Styles/styles.css" /> <!-- google fonts definitions --> <link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> </head> <body unresolved...

Polymer 1.0 passing JSON string as proprty

arrays,json,polymer,polymer-1.0
I am back with new question and looking for expert help once again! In my Polymer 0.5 project I had a JSON array passed to a property like this: <horizontal-barset max="3320000" data='[ {"title": "Annuals", "prevord": "1-15-2015", "ds": [ {"subhead": "Last Year Sales", "value": "2960000", "className" : "last-year"}, {"subhead": "YTD", "value":...

Set focus for paper-input via radio button

input,radio-button,focus,polymer,paper-elements
In Polymer (1.0), how can I set the focus of the iron-input when (as example) radiobutton 'radio1' is selected. <div> <div>Title:</div> <paper-radio-group> <paper-radio-button name="radio1">Radio1Label</paper-radio-button> <paper-radio-button name="radio2">Radio2Label</paper-radio-button> </paper-radio-group> <paper-input-container> <input is="iron-input"> </paper-input-container> </div> ...

How to declare and bind to properties with type=“object” in Polymer 1.0

json,polymer,polymer-1.0
I'm having an issue understanding how Polymer 1.0 handles declared properties, specifically those with the type="object". In order to figure this out I am trying to create a simple element to select a material type and display things about it. Here is what my element looks like so far <dom-module...

core-animated-pages in Polymer 1.0

polymer,web-component,polymer-1.0
I noticed that there is no substitute for core-animated-pages in Polymer 1.0 (there is no iron-animated-pages). Am I missing something? Is there any other way to implement similar functionality? Any answer greatly appreciated.

Polymer 1.0 - routing

polymer
I'm new to Polymer. I start writing a simple webapp in which 1. User first land in a login page 2. If user passes login, then direct user to content page I write an element "login" <dom-module id="login"> <template> <!-- local DOM for your element --> <p>Username</p> <input class="paper-font-body2" value="{{email::change}}"...

Why does the polymer property binding need a tag in my template?

javascript,html,polymer
I am trying to understand how Polymer renders properties in the template of a custom element. I'm seeing some behavior that I can't explain, where some properties are being rendered in one case (when surrounded by tags), but not in another (when tags are not present in the template). To...

Polymer 1.0 Data Binding in s>

html,data-binding,polymer
I'm tinkering around with Polymer again and there is something I want to do but it doesn't work and the workaround looks so messy. I want to style an element but take advantage of Data Binding. Basically I try to do this: <dom-module id="proto-element"> <template> <style> #wrapper{ width:{{pixels}}; background: #e1e1e1;...

Polymer bounded property not updating (sometimes)

javascript,binding,polymer,value
This problem is with 1.0 I have the following html in a polymer element <iron-selector attr-for-selected="step-number" selected="{{stepNumber}}"> <section step-number="1"> <page-1 id="page1"></page-1> </section> <section step-number="2"> <page-2 id="page2"></page-2> </section> <section step-number="3"> <page-3 id="page3"></page-3> </section>` page 1 fires an event - event1, page-2 fires event2. Here's my javascript for the polymer element function...

PolymerElements iron-ajax not posting data

polymer,web-component
This here is my iron-ajax element inside a dom-module: This here is my javascript: var iron_ajax = document.querySelector('iron-ajax'); iron_ajax.body = {"full_names":profile.getName(),"access_token":googleUser.getAuthResponse().id_token}; iron_ajax.generateRequest(); When I grab the $_POST variable and dump the contents to a file (after encoding them as json) I get [] (That means no data, zero, nothing). When...

Listening children's property change notifier using prototype's listeners property in Polymer not working

javascript,polymer,polymer-1.0
Why will not this work ? I am trying to use notify and listeners together. Am I missing something ? Polymer({ is: 'x-child', properties: { message: { type: String, value: '', notify: true } } }); Polymer({ is: 'x-dad', listeners: { 'message-changed': '_onMessageReceived' }, _onMessageReceived: function (e) { alert('child sent...

What's the difference between binding to [[var]] and {{var}} in Polymer 1.x?

data-binding,polymer,2-way-object-databinding,polymer-1.0
I am familiar with bindings with curly braces, like {{variable}}, from Polymer 0.5. However, in examples and code snippets for the release version of Polymer, I've begun to notice bindings with square brackets, such as [[variable]], as well. Does {{variable}} mean something different now, or is it the same and...

Polymer 1.0: Two-way bindings with input elements

javascript,polymer,custom-element
Code Consider the following Polymer custom element: <dom-module id="test-element"> <template> <input type="text" value="{{value}}"> <button>Reset</button> </template> <script> Polymer({ is: 'test-element', properties: { 'value': { type: String, reflectToAttribute: true, notify: true, value: null } } }); </script> </dom-module> I use this custom element in my index.html as follows: <html> <head> <script type="text/javascript"...

Computed binding doesn't work with on-click (Polymer)

javascript,html,polymer
<template is="dom-repeat" items="{{myItems}}"> <div on-click="{{ComputedBindingFunction(item)}}">Foo</div> </template> This yields an error saying: listener method {{ComputedBindingFunction(item)}} not defined Shouldn't the function be executed, instead of literally trying to attach the function name with {{}}'s to on-click according to the docs? Note that ComputedBindingFunction returns a function....

How to validate only after leaving focus of paper-input (Polymer 1.0)

validation,focus,polymer
I'm trying to get Polymer to only validate input for my paper-input once I leave the focus of the textbox. Here's a bit of code I have below: <paper-input label="ZIP Code:" auto-validate pattern="\d{5}([-]\d{4})?" error-message="Invalid ZIP Code"></paper-input> The above code works great at live validation and the regex allows the format...

Computed property isn't recomputed when array dependency is mutated

polymer,polymer-1.0
I'm using a computed property as the items for a dom-repeat. <template is="dom-repeat" items="{{double(values)}}"> <span>{{item}}</span> </template> When its dependency values changes, the property isn't recomputed. addValue: function() { this.push('values', this.values.length+1); this.async(this.addValue, 1000); }, If, instead of mutating values, I set it to a new array, it does work: this.set('values', this.values.concat(this.values.length+1))...

Polymer change notification and two-way binding syntax

javascript,polymer
I'm trying to figure out how to use the 2-way notifications in polymer described here But while this explains that there is some mechanism for notifying if an object on a child element has changed: When a sub-property of a property configured with type: Object changes, an element fires a...

Inheritance of customized polymer element in version 1.0

polymer,polymer-1.0
I have two polymer elements which have similar characteristics. I'm trying to "merge" those two to one element. What I see in the documentation is that custom elements can not be inherited in polymer 1.0. It starts here: <div title="{{tile.description}}" class="flex-item"> <template is='dom-if' if='{{typeIsSingle}}'> <single-item-tile tile='{{tile}}'></single-item-tile> </template> <template is='dom-if' if='{{typeIsGrouped}}'>...

Understanding Polymer data-binding and HTML tags

data-binding,polymer
I'm new to Polymer and while testing data-binding, I discover that I have to encapsulate double-mustache expressions within HTML tags (for example <span>{{var}}</span>). If not, variable is simply not expanded and printed as is. An exemple (from Polymer Quick Tour), with a line more to show this behaviour. You can...

populate content based on list selection in Polymer

polymer
I'm trying to use the application layout "nav-list-detail" in Polymer but not sure how to select something from <!-- List --> <paper-menu class="list" on-iron-activate="_listTap"> <template is="dom-repeat" items="{{items}}"> <paper-item><span class="paper-font-body1">{{item}}</span></paper-item> </template> </paper-menu> and have it populate <!-- Main Content --> <div class="content"></div> My model is <script> (function() { Polymer({ is: 'nav-list-detail',...

Using dom-if for conditionals in arrays

polymer,polymer-1.0
In 0.5 I could use the expressions in the dom-if to select for certain things in arrays while looping through them. How could I achieve the same effect in 1.0?

Preselect a default page in iron-pages when using with paper-tabs

javascript,polymer,polymer-1.0
I am using Polymer iron-pages along with paper-tabs in my rails app. The problem is none of pages were shown until one of the paper-tabs was clicked. I want the first page in iron-pages to be selected by default without user interaction. I have put both paper-tabs and iron-pages in...

Having trouble applying a mixin in Polymer

html,css,polymer,polymer-1.0
I'm having problems getting a mixin to work in polymer. I've created --test-theme but it's not applying the style inside the element. Any ideas where I'm going wrong? story-card.html <dom-module id="story-card"> <style> :host { display: block; box-sizing: border-box; } #story-card { min-height: 5em; max-width: 45%; margin-left: auto; margin-right: auto; padding:...

how to execute a function on-close or on dismiss of paper-dialog for polymer 1.0?

javascript,polymer,web-component
Here is my code for polymer version 1.0. This is paper-dialog element i want to execute a function on closing this dialog. How can i do that? <paper-dialog id="paper-id" entry-animation="scale-up-animation" exit-animation="scale-down-animation" > <sample-element></sample-element> </paper-dialog> ...

Paper-Input autofocus amongst 2 competing paper-inputs

javascript,ruby-on-rails,polymer,web-component
I have 2 paper inputs (one in header) for a search engine and it defaults the autofocus to the header one when both have "autofocus" like so. <paper-input id="bodyinput" name="thetext" type="text" class="searchbar" placeholder="Enter a search term here..." autofocus> </paper-input> The header bar is hidden on the homepage using .hide() in...

Conditional template on Polymer 1.0

polymer,polymer-1.0
I'm having trouble applying the new conditional template, in particular with the condition itself, I think. I've got something like this: <template is="dom-repeat" items="{{menuitems}}" as="poscol"> <template is="dom-if" if="{{index != 4}}"> <div class="positioncolum horizontal layout center wrap flex"> <span>{{index}}</span> <template is="dom-repeat" items="{{poscol}}" as="mitem" > <main-menu-item mitem="{{mitem}}" order="{{mitem.TotalOrder}}" onclick="clickMainMenuMod(index)">...

Using dom-repeat over a flat array of strings

polymer,polymer-1.0
I have a flat array of strings protocol.domainNames = ["a", "b", "c"] and I'm trying to render it inside a component using this template: <select id="select-domain"> <option>Select domain</option> <template is="dom-repeat" items="{{protocol.domainNames}}" as="domainName"> <option value="{{index}}">{{domainName}}</option> </template> </select> Unfortunately, I'm getting a list of <option>s that are empty: All examples in the...

Using a listener for a tap inside a dom-if

polymer,polymer-1.0
I have a simple button that I want to trigger something when pressed. I gave the button an id and created a listener for id.tap. This works fine, but when I put my button inside a template[is=dom-if] it stops working. Is this meant to work like this? How do I...

Is there an “onOpen” event for paper-dialog?

javascript,events,polymer,paper-elements
Is there an "onOpen" event for paper-dialog? I would like to know when the dialog is fully "opened" and "closed", mostly for changing content when the dialog has finishing its opening animation. Previously in Polymer 0.5 one can listen to the core-overlay-close-completed event for that. However it doesn't seem to...

With iron-ajax, how to read the headers of a response?

javascript,ajax,polymer,polymer-1.0
When a response for a request arrives, is there any way to read the response headers?

Dart Polymer: Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox

firefox,dart,polymer
I use Dart Polymer PaperDialogs containing CoreAnimatedPages. The idea is to have popups in which you can click through multiple option views. Example repository available at: https://bitbucket.org/neogucky/polymer-dialog-problem/ DialogView: view.html <link rel="import" href="packages/polymer/polymer.html"> <link rel="import" href="packages/paper_elements/paper_button.html"> <link rel="import" href="packages/paper_elements/paper_dialog.html"> <link rel="import"...

How to notify page transition with iron-pages

polymer,polymer-1.0
I am playing around with the Polymer Starter Kit by building a simple application which has a few pages. I would like for one of the pages to display a list of items that it loads from the server. The issue is that this list must load only when the...

Dynamic update of dom-repeat templates by changing the underlying array

javascript,dom,polymer,polymer-1.0
Is there a Polymer dom api method or other ways to automatically update the repeated template with additional elements, should the underlying array gets updated? I have a dynamic array that gets updated through ajax calls repeatedly. This array keeps changing its length (elements get incrementally appended or removed based...

Change style programmatically

polymer,polymer-1.0
I'm attempting to follow the Custom property API for Polymer elements docs with regards to updating an element's CSS properties (and styles) programmatically but can't seem to get it working. Here is my current attempt: <link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html"> <dom-module id="my-namecard"> <style> :host { --color: green; } span { color: var(--color,...

Trying to append a Polymer element in another Polymer element

javascript,polymer,polymer-1.0
I have a v-fire Polymer : <script> Polymer({ is: 'v-fire', properties : { onFire: { type : String, reflectToAttribute: true } }, firing: function () { this.fire('fire'); } }) </script> I want to be able to use it anywhere in my Polymer elements to make them trigger an internal function...

polymer databinding performence

polymer,btle
I am trying to make an app that reads data from a device over btle and displays this data in a streaming graph. I want to do this with use of polymer. It would be nice to shield the complexity of btle. To have a html tag for btle that...

How to Bind Attribute from Custom Polymer Element to angularjs

javascript,angularjs,polymer
I created a custom element called my-slider-input which computes values from a user input. I need to take use these values in an angular controller. I'm wondering what's the best practice to do this? Given this polymer element: <dom-module id="my-slider-input"> <style> :host { display: block; } </style> <template> <button id="input1">Input...

Polymer 1.0 skip nodes with ExcludeLocalNames

javascript,html,polymer
I try to migrate from Polymer 0.5 to 1.0 and got the following question: Does anybody know, how to ignore nodes inside a paper-menu? In 0.5 you could set the attribute excludedLocalNames to ignore some of them, but in 1.0 it seems to have changed. In the IronSelectableBehavior, there is...

document.createElement multiple arguments

javascript,html,html5,dom,polymer
I was reading through the polymer documentation, and I saw this: var el2 = document.createElement('input', 'my-input'); Source Forgetting about polymer for a second, can document.createElement currently take 2 arguments? Is it related to Polymer's type-extensions? Side note: Webstorm was "complaining" when I called it with 2 arguments....

Are there any built in auto-complete input components for Polymer 1.0?

polymer,polymer-1.0
I've been muddling around with Polymer 1.0 since its release, and I've hit a use case where a select list just won't be sufficient (too many options to select from). What I really need is an autocomplete textbox. Is there one built-in or planned in the paper or iron Polymer...

Setting width and height of svg in Polymer element

svg,polymer
This is probably just some stupid mistake I'm making, but I'm not able to identify the cause of the problem. I'm creating a Polymer element containing a SVG element. I have tried several ways to set the width and height of the svg element, but all my efforts seem to...

Icon list for Polymer

html,polymer
The polymer starter kit makes references to <iron-icon> to implement icons. For example: <iron-icon icon="home"></iron-icon> I've checked the iron-icons section on the Polymer Catalog website, but the demo which should show all the icons is which is missing. Is there any other reference of all the icons in the <iron-icon>...

Polymer 1.0 access parent e.model in nested repeats

polymer,polymer-1.0
<template is="dom-repeat" items="{{items}}" as="first"> <template is="dom-repeat" items="{{first}}" as="second"> <span on-tap="test">{{second}}</span> </template> </template> items: [["1","2"],["3","4"]], test: function (e) { // access e.model of first } Is it possible to access the e.model of the outer repeat loop? Just getting the object is not enough (altough this would be a start). I...

How can I access item in parent repeat template while in filter

javascript,html,templates,polymer
<iron-pages> <template is="dom-repeat" items="{{fruit_categories}}" as="category"> <div> <template is="dom-repeat" items="{{all_fruits}}" as="fruit" filter="isThisFruitInTheRightCategory"> <!-- Some more stuff --> <span>{{fruit.weight}}</span> <span>{{fruit.age}}</span> <!-- ... --> </template> </div> </template> </iron-pages> isThisFruitInTheRightCategory: function(fruit){ return fruit.category === /* Q: How do I get the current category? */ } Suppose I...

Mobile App Performance : Polymer or Ionic?

javascript,cordova,ionic-framework,polymer,google-chrome-app
I am a web developer and I heard that Google just released the "production ready" version of Polymer (1.0). On the other hand, I have heard a lot about Ionic since 2013. I am now trying to find the best way to make a web app look native, responsive and...

google-signin don't return user info

polymer,web-component,google-signin,google-web-component
I am using google-signin element from Google Web Components, but I don't know how to return user info. <google-signin client-id="{{my-id}}" scopes="email profile" signed-in="{{signedIn}}"></google-signin> I tried to write some JS function but it didn't work. function (signedIn) { var profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile(); console.log('Name: ' + profile.getName()); console.log('Image: ' + profile.getImageUrl()); }...

Polymer google-signin element gets Cannot read property 'currentUser' of null

javascript,polymer,web-component,polymer-1.0
I'm trying to get the google-signin element to work with just adding this to my HTML: <google-signin clientId="[my-client-id]" scopes="https://www.googleapis.com/auth/drive"></google-signin> The Sign-in button shows up on the page, but when I click it, I get the error: Cannot read property 'currentUser' of null I'm testing it out on just localhost, so...

How to use Polymer template auto-binding in Polymer1.0?

html,css,html5,polymer,polymer-1.0
Polymer doesn't provide much detailed documentation as now. So I am wondering how to use the template auto-binding feature. Previously with polymer 0.5 <template is=auto-binding> would work. But doesnt work any more with Polymer 1.0. My use-case is not building custom elements using Polymer instead build a web app using...

Using Polymer iron-ajax in repeating template

polymer
How do I load a json file and use the data in a repeating template? This code doesn't produce anything: <dom-module id="name-list"> <template> <iron-ajax auto url="names.json" handleAs="json" lastResponse="{{data}}"></iron-ajax> <template is="dom-repeat" items="{{data}}"> <div>First name: <span>{{item.firstName}}</span></div> <div>Last name: <span>{{item.lastName}}</span></div> </template> </template> </dom-module> <script> Polymer({...

Polymer Main Text is displayed on top of the drawer

html,polymer,drawer
I played around with polymer again, so I created a basic page with the help of some great tutorials on youtube but I always get this issue when opening the drawer. As you can see the menu icon and the "Polymer" title is from the bottom toolbar. Maybe somebody knows...

paper-ripple is listening to click events outside of its container

javascript,html,polymer,paper-elements,polymer-1.0
I'm trying to create a simple ripple effect for a card in my app. It works great, but it is also responding to mouse events outside of its container: Code looks like this: <dom-module> ... <template> ... <paper-material> <div class="wrapper">...</div> <paper-ripple></paper-ripple> </paper-material> ... </template> </dom-module> I don't quite see why...

Polymer 1.0 strange behaviour on properties

polymer
I'm just learning polymer (1.0) so please bear with me. I'm using express.js to return some array of JSON.stringified items and for-each them, so the result is as follows (in HTML): <fighter-profile fighter="{&quot;country&quot;:&quot;USA&quot;,&quot;countryFullName&quot;:&quot;United States&quot;,&quot;name&quot;:&quot;Frank...