I have a form with several input fields and checkbox. I can shift focus through the input fields and checkboxes. But the "SAVE" paper-button at the page wont get focus at all. User needs to use a mouse to click the paper-button.
How to make paper-button focusable?
Tabbing seems to work fine for me with the following code:
<head>
<title>Hello</title>
<base href="http://element-party.xyz/">
<link rel="import" href="all-elements.html">
</head>
<body>
<dom-module id="element-name">
<template>
<paper-input label="input 1"></paper-input>
<paper-input label="input 2"></paper-input>
<paper-input label="input 3"></paper-input>
<paper-input label="input 4"></paper-input>
<paper-input label="input 5"></paper-input>
<paper-checkbox>Checkbox</paper-checkbox>
<paper-button>Button</paper-button>
</template>
<script>
Polymer({
is: "element-name"
});
</script>
</dom-module>
<element-name></element-name>
</body>
</html>
Can you provide some code showing your problem?
Related
First off, I apologize for the title-gore. I struggled to summarize this issue in a single sentence.
I have a Polymer element. In my element, I wish to display (or simply log to console) the innerHTML of a template element that is a child of (contents of) the element instance.
(Please note that the intent here is to create an element similar to the demo-snippet of iron-demo-helpers.)
Consider the following Polymer element:
<link rel="import" href="../../polymer/polymer.html">
<dom-module id="print-contents-html">
<script>
Polymer({
is: 'print-contents-html',
attached: function() {
var template = Polymer.dom(this).queryDistributedElements('template')[0];
console.log(template.innerHTML);
}
});
</script>
</dom-module>
Very simply, I query for the 'template' element and log its inner HTML.
Now consider the following usage:
<!doctype html>
<html>
<head>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="./print-contents-html.html">
</head>
<body>
<print-contents-html>
<template>
Hello World
</template>
</print-contents-html>
</body>
</html>
As expected, this results in "Hello World" being logged to the console.
However, I am trying to make use of the 'print-contents-html' element within another Polymer element:
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="./print-contents-html.html">
<dom-module id="simple-demo">
<template>
<print-contents-html>
<template>
Hello World from simple demo
</template>
</print-contents-html>
</template>
<script>
Polymer({
is: 'simple-demo',
});
</script>
</dom-module>
Now if I update the usage to also include an instance of the simple-demo element:
<!doctype html>
<html>
<head>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="./print-contents-html.html">
<link rel="import" href="./simple-demo.html">
</head>
<body>
<print-contents-html>
<template>
Hello World
</template>
</print-contents-html>
<simple-demo></simple-demo>
</body>
</html>
I would expect to see both "Hello World" and "Hello World from simple demo" logged to the console. However the simple demo message is not logged.
It appears that while the queryDistributedElements() does return the instance of the template element, the innerHTML field is an empty string.
Does anyone know why this is the case? That accessing the content/child template element does not have its innerHTML set?
Secondly, does anyone know of an alternative method through which I can access the innerHTML of the template element that is a content/child of a polymer element?
Kind Regards,
Andrew Butler
This issue is discussed in Polymer's Github repository.
The solution is to add a preserve-content attribute it the inner <template> tag:
<dom-module id="simple-demo">
<template>
<print-contents-html>
<template preserve-content>
Hello World from simple demo
</template>
</print-contents-html>
</template>
...
Then it works!
In iron-data-table, when I click any currently selected row, I expect the selected-item ({{selectedItem}}) object to reflect the currently (and previously) selected row; but instead, it becomes null.
Steps to recreate the problem:
Open this jsBin.
Select any row.
Notice selected object prints to top of page and to console.
Select a different row.
Notice newly selected item prints to top of page and to console.
Clear console. (Optional. Will help you see results of next step.)
Click currently selected row.
Notice selected-item ({{selectedItem}}) object is now null.
How can I correct this so the selected object is the newly selected row (which is the previously selected row) and not null?
http://jsbin.com/xucemijada/1/edit?html,console,output
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="iron-data-table/iron-data-table.html">
<link rel="import" href="iron-data-table/default-styles.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
</style>
[[_computeSelectedStr(selectedItem)]]
<iron-ajax
auto
url="https://saulis.github.io/iron-data-table/demo/users.json"
last-response="{{users}}"
>
</iron-ajax>
<iron-data-table id="grid"
selection-enabled
items="[[users.results]]"
selected-item="{{selectedItem}}"
>
<data-table-column name="Picture" width="50px" flex="0">
<template>
<img src="[[item.user.picture.thumbnail]]">
</template>
</data-table-column>
<data-table-column name="First Name">
<template>[[item.user.name.first]]</template>
</data-table-column>
<data-table-column name="Last Name">
<template>[[item.user.name.last]]</template>
</data-table-column>
<data-table-column name="Email">
<template>[[item.user.email]]</template>
</data-table-column>
</iron-data-table>
</template>
<script>
(function(){
'use strict';
Polymer({
is: 'x-foo',
observers: [
'_selectedItemChanged(selectedItem)' ,
],
_selectedItemChanged: function(ob) {
console.log('selectedItem', ob);
},
_computeSelectedStr: function(ob) {
return JSON.stringify(ob);
},
});
})();
</script>
</dom-module>
</body>
</html>
When a row is clicked a second time, the item gets deselected and having null in selectedItem is meant to reflect that. Similarly, in multi-select mode selectedItems is empty when nothing is selected.
Since v1.0.1 <iron-data-table> will fire deselecting-item event which can be used to prevent deselection.
table.addEventListener('deselecting-item', function(e) {
e.preventDefault();
});
I've updated your JSBin to show an example how to use this event: http://jsbin.com/dubuyoy/edit?html,console,output
I am am trying to create a custom element that plays a youtube video in paper-dialog. So videoPlayer = Polymer.dom(this.root).querySelector('video-player'); inherits/has access to that paper-dialogs open method, I am trying to extend my custom element. It isn't working, but hopefully I am on the right track and someone can show me correctly.
I am using Polymer 1.0, but I only have https://www.polymer-project.org/0.5/docs/polymer/polymer.html#extending-other-elements to go by for extending elements.
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/google-youtube/google-youtube.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="video-player">
<template>
<div class="layout horizontal">
<paper-button dialog-dismiss>
<paper-icon-button icon="arrow-back"></paper-icon-button>
</paper-button>
</div>
<div style="height: 100%; width: 100%">
<google-youtube style="height: 100%;"
video-id="YMWd7QnXY8E"
rel="1"
start="5"
playsinline="0"
controls="2"
showinfo="0"
width="100%"
height="100%"
autoplay="1">
</google-youtube>
</div>
</template>
<script>
Polymer({
is: "video-player"
});
</script>
<paper-dialog name="video-player" extends="video-player">
<template>
<shadow></shadow>
</template>
<script>
Polymer();
</script>
</paper-dialog>
<video-player></video-player>
As was mentioned in the comments, you can't yet extend custom elements, so the existing pattern (or at least the one I use) is to make use of behaviors wherever possible and wrappers wherever not.
e.g.
<dom-module id="popup-video-player">
<template>
<video-player></video-player>
</template>
<script>
Polymer({
is: 'popup-video-player',
behaviors: [Polymer.PaperDialogBehavior],
...
});
</script>
</dom-module>
Now you can use <popup-video-player> just like a paper-dialog.
I know it stinks because if video-player has a bunch of properties that you want access to, you have to copy them in the popup-video-player element's API, which is not exactly DRY.
If you look at the paper-input source, you'll see them doing the same thing. It's obvious that they want to extend iron-input, but they can't so you get things like this:
<input is="iron-input" id="input"
aria-labelledby$="[[_ariaLabelledBy]]"
aria-describedby$="[[_ariaDescribedBy]]"
disabled$="[[disabled]]"
title$="[[title]]"
... >
As a side note, you could always hook into the <video-player>s "properties" property and make the API additions programatically.
maybe something like this would work: (untested!)
Polymer({
...
properties: (function () {
var prop = {
//special properties specific to the pop up version of video-player
//..obviously be careful to avoid name space conflicts.
};
var video_player = document.createElement('video-player');
video_player.properties.keys().forEach( function(key) {
props[key] = video_player[key];
});
return props;
}()),
});
I'm having troubles with the following small self contained polymer example for databinding.
My understanding is that by having the consumer and supplier both have an attributes with data, with the expression {{stuff}} passed in, that this is referring to the variable "stuff", in the scope of the element.
When the supplier is loaded, and ready, it should populate the stuff variable, causing the consumer to insert the data.
http://jsbin.com/yawipodayo/1/edit?html,css,js,output
<!doctype html>
<html>
<head>
<script src="../bower_components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import" href="../bower_components/polymer/polymer.html">
</head>
<body>
<polymer-element name="consumer" attributes="data">
<template bind="{{data}}">{{}}</template>
</polymer-element>
<polymer-element name="supplier" attributes="data">
<template></template>
<script>
Polymer('supplier', {
ready: function(){
this.data = "test"
}
});
</script>
</polymer-element>
<polymer-element name = "root">
<template>
<supplier data="{{stuff}}"></supplier>
<consumer data="{{stuff}}"></consumer>
</template>
</polymer-element>
<root>
</root>
</body>
</html>
You have an amount of glitches within your code. I will drop comments around the problems to be fixed:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer</title>
<script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
</head>
<body>
<!-- noscript tags are mandatory for elements not having script declared -->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓ -->
<polymer-element name="my-consumer" attributes="data" noscript>
<!-- when you need to output data, output it -->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓ -->
<template>{{data}}</template>
</polymer-element>
<!-- names MUST include hyphens (everywhere) -->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ -->
<polymer-element name="my-supplier" attributes="data">
<template></template>
<script>
// As of 0.5 you don’t need to specify name in script
// ⇓⇓⇓⇓
Polymer({
ready: function(){
this.data = "test"
}
});
</script>
</polymer-element>
<polymer-element name = "my-root" noscript>
<template>
<my-supplier data="{{stuff}}"></my-supplier>
<my-consumer data="{{stuff}}"></my-consumer>
</template>
</polymer-element>
<my-root>
</my-root>
</body>
</html>
The corrected version works as expected: http://jsbin.com/zewimobaro/1/edit
i am working on a custom element that will serve as a form for sending map node data to a database using a restful service.
i have 3 questions about this element.
can this even work? i am trying to use a method which seems exactly the opposite of the direct data binding method when collecting data from a server. can this be used for sending to the server.
in the core-ajax element i am using the auto="false" attribute. how would i go about calling the go() command when a use clicks the paper-button?
if this method for sending can work how do i catch the body="{}" line in php when submitted? i know it isn't sent as a $_GET. is it sent as $_POST or do i need to use another method to catch it?
my element template currently looks like
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<polymer-element name="add-node" attributes="url">
<template>
<style>
paper-input {
color:#000000;
text-align:left;
}
paper-button.colored {
background:#000000;
color:#ffffff;
}
.centered {
display:block;
text-align:center;
width:100%;
}
</style>
<geo-location latitude="{{lat}}" longitude="{{lng}}"></geo-location>
<form id="form_1">
<paper-input floatingLabel label="Name:" value="{{name}}"></paper-input>
<br>
<paper-input floatingLabel label="Street Address:" value="{{address}}"></paper-input>
<br>
<paper-input floatingLabel label="City" value="{{city}}"></paper-input>
<br>
<paper-input floatingLabel label="State" value="{{state}}"></paper-input>
<br>
<paper-input floatingLabel label="Zip" value="{{zip}}"></paper-input>
<br>
<paper-input floatingLabel label="Phone:" value="{{phone}}"></paper-input>
<br>
<paper-input floatingLabel label="Description:" value="{{description}}"></paper-input>
<br>
<div class="centered">
<paper-button on-tap="{{doSend}}" raisedButton class="colored" label="Save"></paper-button>
</div>
</form>
<core-ajax id="ajax" auto="false" method="POST" contentType="application/json" url="{{url}}"
body='{"name":"{{name}}", "address":"{{address}}", "city":"{{city}}", "state":"{{state}}", "zip":"{{zip}}", "phone":"{{phone}}", "description":"{{description}}", "longitude":"{{lng}}", "latitude":"{{lat}}"}' response="{{response}}">
</core-ajax>
<template repeat="{{response}}">{{data}}</template>
</template>
<script>
Polymer('add-node', {
doSend: function(event, detail, sender){
this.$.ajax.go();
}
});
</script>
</polymer-element>
It should work just OK. To invoke the go() give your ajax element an id so it is easy to access, ie
<core-ajax id="foobar" auto="false" ...></core-ajax>
attach an eventhandler to the button
<paper-button ... on-tap="{{doSend}}"></paper-button>
and implement the doSend() handler in your elements script section (do not forget to get rid of the noscript in the elements declaration)
<script>
Polymer('add-node', {
doSend: function(event, detail, sender){
this.$.foobar.go();
}
});
</script>
As of proccessing the data at server side - yes, you should look for the data in the $_POST.
A couple of notes:
Instead of assembling data at send time, it's probably convenient to treat the data as an object in the first place. I called it item (it could be record or node or whatever) and I made it bindable so you could pass in a record for editing.
body is generally for sending data that you format yourself. In this, case since you have normal name='value' pairs that you want to access as such in PHP, use params instead. At that point either GET or POST will work (POST is usually better).
Updated example:
<polymer-element name="add-node" attributes="url item">
<template>
<style>
paper-input {
color:#000000;
text-align:left;
}
paper-button.colored {
background:#000000;
color:#ffffff;
}
.centered {
display:block;
text-align:center;
width:100%;
}
</style>
<geo-location latitude="{{lat}}" longitude="{{lng}}"></geo-location>
<form id="form_1">
<paper-input floatingLabel label="Name:" value="{{item.name}}"></paper-input>
<br>
<paper-input floatingLabel label="Street Address:" value="{{item.address}}"></paper-input>
<br>
<paper-input floatingLabel label="City" value="{{item.city}}"></paper-input>
<br>
<paper-input floatingLabel label="State" value="{{item.state}}"></paper-input>
<br>
<paper-input floatingLabel label="Zip" value="{{item.zip}}"></paper-input>
<br>
<paper-input floatingLabel label="Phone:" value="{{item.phone}}"></paper-input>
<br>
<paper-input floatingLabel label="Description:" value="{{item.description}}"></paper-input>
<br>
<div class="centered">
<paper-button on-tap="{{doSend}}" raisedButton class="colored" label="Save"></paper-button>
</div>
</form>
<core-ajax id="ajax" method="POST" url="{{url}}" params="{{item}}" response="{{response}}"></core-ajax>
<template repeat="{{response}}">{{data}}</template>
</template>
<script>
Polymer('add-node', {
created: function() {
this.item = {};
},
doSend: function() {
this.$.ajax.go();
}
});
</script>
</polymer-element>