Polygit importing iron-ajax doesn't seem to work? - polymer

How do you properly import iron-ajax with polygit? This gives me error 400
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="iron-ajax/iron-ajax.html">


Polygit is deprecated and is no longer functional. You can instead use the following <base> URLs in demos:
Polymer 1 - https://cdn.rawgit.com/download/polymer-cdn/1.8.0/lib/
Polymer 2 - https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/
<head>
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.8.0/lib/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="iron-ajax/iron-ajax.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<div>Please wait...</div>
<iron-ajax id="ajax"
auto
url="http://jsonplaceholder.typicode.com/users/"
last-response="{{data}}"
handleAs="json">
</iron-ajax>
<table>
<template is="dom-repeat" items="[[data]]">
<tr>
<td>[[item.id]]</td>
<td>[[item.name]]</td>
<td>[[item.email]]</td>
</tr>
</template>
</table>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
</body>
jsbin

Related

Polymer 1.x: Imperatively accessing DOM nodes inside a dom-if template

Here is my jsBin.
I want to access by its id a DOM node inside a dom-if template. With my existing code, I expect to see true when attempting to cast these nodes to Booleans, but instead I get false (i.e., undefined).
Steps to recreate the problem:
Open this jsBin.
Understand that the HTML pane on the right is working correctly by showing Foo and Bar and not showing Baz.
Observe the console and understand the id="foo" node is accessible but the id="bar" and id="baz" elements are not. And this is my problem.
How can I access those nodes imperatively?
http://jsbin.com/kemoravote/1/edit?html,console,output
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="iron-form/iron-form.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<div id="foo">Foo</div>
<template is="dom-if" if="{{show}}">
<div id="bar">Bar</div>
</template>
<template is="dom-if" if="{{!show}}">
<div id="baz">Baz</div>
</template>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
show: {
type: Boolean,
value: function() {
return true;
}
}
},
attached: function() {
console.log('foo', !!this.$.foo);
console.log('bar', !!this.$.bar);
console.log('baz', !!this.$.baz);
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>

The $ selector won't work. You have to use $$ as follows:
console.log('baz', !!this.$$('#baz'));
Here is the jsBin.
http://jsbin.com/xogediyato/1/edit?html,console,output
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="iron-form/iron-form.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<div id="foo">Foo</div>
<template is="dom-if" if="{{show}}">
<div id="bar">Bar</div>
</template>
<template is="dom-if" if="{{!show}}">
<div id="baz">Baz</div>
</template>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
show: {
type: Boolean,
value: function() {
return true;
}
}
},
attached: function() {
console.log('foo', !!this.$.foo);
console.log('bar', !!this.$.bar);
console.log('baz', !!this.$.baz);
console.log('bar', !!this.$$('#bar'));
console.log('baz', !!this.$$('#baz'));
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>

Using withBackdrop for paper-dialog prevents controls from being focused via tabbing

I have a paper-dialog that uses the with-backdrop property. I've noticed that after clicking anywhere within a paper-dialog that does not use the with-backdrop property, I can hit the tab key and the browser will focus the input element:
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-example',
ready: function() {
this.$$('paper-dialog').open();
}
});
});
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="polymer/polymer.html" rel="import">
<dom-module id="x-example">
<style>
:host {
display: block;
}
</style>
<template>
<paper-dialog>
<h2 class="header">Hello</h2>
<paper-input
label="Focusable input"
tabindex
type="text">
</paper-input>
</paper-dialog>
</template>
</dom-module>
<x-example></x-example>
If I set the with-backdrop property, however, the browser will not focus the input element:
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-example',
ready: function() {
this.$$('paper-dialog').open();
}
});
});
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="polymer/polymer.html" rel="import">
<dom-module id="x-example">
<style>
:host {
display: block;
}
</style>
<template>
<paper-dialog with-backdrop>
<h2 class="header">Hello</h2>
<paper-input
label="Focusable input"
tabindex
type="text">
</paper-input>
</paper-dialog>
</template>
</dom-module>
<x-example></x-example>
Is there a way to have a backdrop and still allow the dialog to navigatable via the keyboard?
Device info: I am experiencing this issue running Chrome v50 on OSX.

Seems to be issue with versions that you are using. I tried it on Polymer's website and my local and this seems to be working fine. Below are the versions that i used:
Paper-dialog: 1.0.4
Polymer: 1.3.2
Paper-input: 1.0.18
I'll also recommend you to open up an issue on Github for the same

In the demo, I included the tabindex attribute in my input element without specifying a value. Removing this property allowed the input to be focused:
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-example',
ready: function() {
this.$$('paper-dialog').open();
}
});
});
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="polymer/polymer.html" rel="import">
<dom-module id="x-example">
<style>
:host {
display: block;
}
</style>
<template>
<paper-dialog with-backdrop>
<h2 class="header">Hello</h2>
<paper-input
label="Focusable input"
type="text">
</paper-input>
</paper-dialog>
</template>
</dom-module>
<x-example></x-example>

paper-tabs event listener to change selected?

In addition to paper tabs, I have other areas where a user can click to navigate. So, I want to set the paper-tab manually when this happens.
For paper-tabs, is there a event that I can fire in another template to change the selected attribute value? I saw that there was a iron-select but I think it fires after a change. In addition, I tried this.fire('iron-select', 1); in another template and the paper-tab did not change.

You can bind to the paper-tabs' selected attribute or you can change the value of the paper-tabs' selected property.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<base href="http://polygit.org/polymer+:master/components/">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="paper-header-panel/paper-header-panel.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="paper-radio-group/paper-radio-group.html">
<link rel="import" href="paper-radio-button/paper-radio-button.html">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body class="fullbleed">
<template is="dom-bind" id="app">
<paper-header-panel>
<paper-toolbar>
<paper-tabs selected="{{selected}}" attr-for-selected="name">
<paper-tab name="one">One</paper-tab>
<paper-tab name="two">Two</paper-tab>
<paper-tab name="three">Three</paper-tab>
</paper-tabs>
</paper-toolbar>
<div class="container">
<paper-radio-group selected="{{selected}}">
<paper-radio-button name="one">One</paper-radio-button>
<paper-radio-button name="two">Two</paper-radio-button>
<paper-radio-button name="three">Three</paper-radio-button>
</paper-radio-group>
<div class="button-group">
<paper-button data-name="one" on-tap="selectTab">One</paper-button>
<paper-button data-name="two" on-tap="selectTab">Two</paper-button>
<paper-button data-name="three" on-tap="selectTab">Three</paper-button>
</div>
</div>
</paper-header-panel>
</template>
<script>
(function() {
var app = document.getElementById('app');
app.selected = "one";
app.selectTab = function(e) {
app.selected = e.target.dataset.name;
};
})();
</script>
</body>
</html>

Polymer 1.0: paper-tooltip not working

I can't seem to get <paper-tooltip> element to work for me.
Here is my JSBin.
What am I doing wrong?
<!doctype html>
<head>
<meta charset="utf-8">
<base href="http://polymer-magic-server.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<template>
<style></style>
<div class="with-tooltip" tabindex="0">
<input type="checkbox">Oxygen
<paper-tooltip>Atomic number: 8</paper-tooltip>
</div>
<paper-icon-button id="heart" icon="favorite" alt="heart"></paper-icon-button>
<paper-icon-button id="back" icon="arrow-back" alt="go back"></paper-icon-button>
<paper-icon-button id="fwd" icon="arrow-forward" alt="go forward"></paper-icon-button>
<paper-tooltip for="heart" margin-top="0"><3 <3 <3 </paper-tooltip>
<paper-tooltip for="back" margin-top="0">halp I am trapped in a tooltip</paper-tooltip>
<paper-tooltip for="fwd" margin-top="0">back to the future</paper-tooltip>
</template>
<script>
// only need this when both (1) in the main document and
// (2) on non-Chrome browsers
addEventListener('WebComponentsReady', function() {
Polymer({
is: "x-foo"
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>

Summary from comments:
Per #kevinashcraft:
You have to import paper-icon-button, iron-icons, and paper-tooltip. Here's a working JSBin.

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

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">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/core-localstorage/core-localstorage.html">
<polymer-element name="codelab-app">
<template>
<link rel="stylesheet" href="styles.css">
<core-drawer-panel id="drawerPanel" responsiveWidth="600px">
<core-header-panel drawer>
<core-toolbar>Menu</core-toolbar>
</core-header-panel>
<core-header-panel main>
<core-toolbar>
<paper-icon-button icon="menu" on-click="{{toggleDrawer}}"></paper-icon-button>
<span flex>My notes</span>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
<paper-fab icon="icons:add" on-click="{{showNewNoteInput}}"></paper-fab>
</core-toolbar>
<div class="content">
<paper-input id="newNoteInput"
floatingLabel
label="Add a new note"
on-change="{{add}}"
value="{{newNote}}"></paper-input>
<template repeat="{{data}}" >
<div center horizontal layout class="item">
<paper-checkbox checked="{{done}}" on-change="{{dataChanged}}"></paper-checkbox>
<div flex class="card">
<p>{{body}}</p>
</div>
</div>
<core-localstorage id="storage" name="codelab-app-storage" value="{{data}}"></core-localstorage>
</template>
</div>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
Polymer('codelab-app', {
data: [],
add: function() {
if (this.newNote) {
this.data.unshift({
body: this.newNote,
done: false
});
this.$.newNoteInput.style.display = 'none';
this.$.newNoteInput.value = null;
}
},
toggleDrawer: function() {
this.$.drawerPanel.togglePanel();
},
ready: function() {
this.$.newNoteInput.style.display = 'none';
},
showNewNoteInput: function() {
this.$.newNoteInput.style.display = 'block';
},
dataChanged: function() {
this.$.storage.save();
}
});
</script>
</polymer-element>

You are looping the creation of a static ID tag, and because you shouldn't have duplicates of an ID, it is throwing an error.
Lines causing the issue:
<template repeat="{{data}}" >
<core-localstorage id="storage" name="codelab-app-storage" value="{{data}}"></core-localstorage>
</template>