Setting src of <img> in a Polymer Element - html

Below is the code for my polymer element
I have tried normal dom binding with and everything works fine
The src of the img however does not work.
I checked the html in chrome dev tools and it showed the src all wrong
The src here says /img/12.jpg which means the image is in the folder the html file is in
It however refers to the root of the folder instead
Expected src in dev tools: http://localhost:3000/elements/image-hover/img/12.jpg
Observed src: img/12.jpg
What can I do insted of harcoding it to the expected src?
<dom-module id="image-hover">
<template>
<img src="{{imgsrc}}"/>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'image-hover',
properties: {
imgsrc: {
type: String,
value: 'img/12.jpg'
}
}
});
})();
</script>
Edit: I have solved this issue by using the content tag provided by polymer.
<content id="image" select="img"></content>
The question still remains how can I figure out the source of the folder the element is in.

You can do the following:
<dom-module id="image-hover">
<template>
<img src="{{imgsrc}}"/>
</template>
</dom-module>
<script>
Polymer({
is: 'image-hover',
properties: {
imgsrc: {
type: String,
value: function () {
return location.host + "/img/12.jpg";
}
}
}
});
</script>
The value is now a function that returns a String using the location object. More information can be found on that here. Put simply, it contains information about the current URL.

You can use this.resolveUrl as follows:
properties: {
imgsrc: {
type: String,
value: function() {return this.resolveUrl('img/12.jpg')}
}
}

Related

Event Handling in Polymer

I have switch.html like this:
<link rel="import" href="/public/components/paper-toggle-button/paper-toggle-button.html">
<dom-module id="element-name">
<template>
<div><paper-toggle-button on-change="{{handleToggle}}"></paper-toggle-button></div>
</template>
<script>
// element registration
Polymer({
is: "element-name",
properties: {
greeting: {
type: String,
value: "Hello!"
}
},
handleToggle: function() {
alert('Ow!')
}
});
</script>
</dom-module>
version: 1.2.0
How do I catch change event and handle it? I have set on-change property, but it does not work. Next, I need to send json to my server.
You have wrapped handleToggle in curly braces which makes it a binding. Just remove them to tell on-change to call a function:
<paper-toggle-button on-change="handleToggle"></paper-toggle-button>
Did you try this:
on-change="handleToggle"
handleToggle is not a property, so you do not have to use {{}}.

How to get the width of a polymer element inside the JS of the polymer element

I have a polymer element and inside its Javascript I am trying to find its width and height as it is inside the DOM. I tried many ways but I always get 0 back.
...and here's the one which works for me:
Add the Polymer.IronResizableBehavior behaviour to your element (see https://elements.polymer-project.org/elements/iron-resizable-behavior). Then your element will be sent a iron-resize event when it gets sized. In the handler, check to see whether it's not 0; if not, you're golden.
Untested code follows:
<dom-module id="hard-chicken">
<template>
Hello <span>{{name}}</span>
</template>
</dom-module>
<script>
Polymer({
is: 'hard-chicken',
behaviors: [ Polymer.IronResizableBehavior ],
listeners: { "iron-resize": "onWidthChange" },
onWidthChange: function() {
var w = this.offsetWidth;
if (w > 0)
console.log("width is now ", w);
}
});
</script>
This took way, way too long to figure out...
polymer 1.0
<link rel="import" href="../polymer/polymer.html">
<!--
Here's where you'll define your element. You can define multiple elements
if you want, but the package name will be taken from the first custom
element you define in the file. You can also document your element! For
more info, see [the docs](https://ele.io/docs).
#element hard-chicken
-->
<dom-module id="hard-chicken" attributes="name">
<template>
<style>
:host {
font-family: sans-serif;
}
</style>
Hello {{name}}
</template>
<script>
Polymer({is:'hard-chicken',
/**
* The name of the person you want to say hello to.
* #attribute name
* #type string
* #default "Polymer Dev"
*/
name: 'Polymer Dev',
ready: function() {
console.log(this.offsetWidth);
});
</script>
</dom-module>
You probably want to calculate the width in the attached handler of the element, as that comes last when the unit is actually attached to the DOM.
See https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#initialization-order
attached: function() {
console.log(this.offsetWidth);
}
This should do it:
attached: function() {
this.async(function() {
console.log(this.offsetWidth);
});
}
Read the documentation at:
https://www.polymer-project.org/1.0/docs/devguide/registering-elements#initialization-order
<dom-module id="hard-chicken">
<style>
:host {
font-family: sans-serif;
}
</style>
<template>
Hello <span>{{name}}</span>
</template>
</dom-module>
<script>
Polymer({
is: 'hard-chicken',
/**
* The name of the person you want to say hello to.
* #attribute name
* #type string
* #default "Polymer Dev"
*/
properties: {
name: {
value : 'Polymer Dev',
type: String
}
},
_getWidth: function () {
console.log(this.offsetWidth);
},
ready: function() {
this.async(this._getWidth, 500);
}
});
</script>
<link rel="import" href="../polymer/polymer.html">
<!-- You can import core and paper elements -->
<link rel="import" href="../core-ajax/core-ajax.html">
<!--
Here's where you'll define your element. You can define multiple elements
if you want, but the package name will be taken from the first custom
element you define in the file. You can also document your element! For
more info, see [the docs](https://ele.io/docs).
#element hard-chicken
-->
<polymer-element name="hard-chicken" attributes="name">
<template>
<style>
:host {
font-family: sans-serif;
}
</style>
Hello {{name}}
</template>
<script>
Polymer('hard-chicken', {
/**
* The name of the person you want to say hello to.
* #attribute name
* #type string
* #default "Polymer Dev"
*/
name: 'Polymer Dev',
ready: function() {
console.log(this.offsetWidth);
}
});
</script>
</polymer-element>

In Polymer 1.0 how can I databind to a boolean property of an element?

How can I bind to a boolean property of an element. It seems this
<my-element a-property-of-type-boolean='{{someBoolean}}'></my-element>
does not Work, but I also cant find out how to bind to it when it is exposed like this:
<my-element a-property-of-type-boolean></my-element>
It seems an option is to set the type to Object instead of Boolean, but I am not sure how valid this approach is
Thanks :-)
If you put an attribute on your element, the related property it will always be true. For example in:
<my-element a-property-of-type-boolean='false'></my-element>
a-property-of-type-boolean is true.
So, if you you want to use a Boolean property on your element, I suggest to declare the property with the default value of false and then, if you need to change the value to true, you can add the attribute on you element.
Your Polymer prototype:
Polymer({
is: 'my-element',
properties: {
aPropertyOfTypeBoolean: {
type: Boolean,
value: false
}
}
});
Your element:
<my-element a-property-of-type-boolean></my-element>
As you already figured it out, the behavior of boolean properties has changed in Polymer 1.0 (ref) and now follows the specification of HTML boolean attributes.
You got different solutions to this, but until now I haven't found a clean solution.
As a preface of the solution I'll make a tiny improvement (adding an Id to the problematic element) to your code:
<dom-module id='main-page'>
<template>
<paper-button on-tap='tap'>Click me</paper-button>
<my-element id="myElem" a-property-of-type-boolean></my-element>
<div>In main page it is <div>{{someBoolean}}</div></div>
</template>
</dom-module>
(ref) You could listen to notification's and manually add and remove the attribute from your element (ref).
tap: function() {
if (this.aPropertyOfTypeBoolean) {
Polymer.dom(this.$.myElem).removeAttribute('aPropertyOfTypeBoolean');
} else {
Polymer.dom(this.$.myElem).setAttribute('aPropertyOfTypeBoolean', true);
}
}
If you edit the to use a Boolean attribute you can also set it's property as follows: (it wont reflect in the html unless you use reflectToAttribute: true in the property being defined as Boolean):.
tap: function() {
this.$.myElem.set('aPropertyOfTypeBoolean', Boolean(this.aPropertyOfTypeBoolean));
}
Or you can either hide your element with hidden or template-if solutions.
<template is="dom-if" if="{{someBoolean}}">
<my-element a-property-of-type-boolean></my-element>
</template>
<template is="dom-if" if="{{!someBoolean}}">
<my-element></my-element>
</template>
With hidden
<my-element hidden$="{{someBoolean}}"></my-element>
<my-element a-property-of-type-boolean hidden$="{{!someBoolean}}"></my-element>
Ok, sorry about that guys. I have not done my homework. Everything actually seems to be working exactly as I was hoping for and databinding Works fine. Here is the small example that I did to try and prove my point
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'>
<meta name='mobile-web-app-capable' content='yes'>
<meta name='apple-mobile-web-app-capable' content='yes'>
<script src='bower_components/webcomponentsjs/webcomponents.js'></script>
<link rel='import' href='bower_components/polymer/polymer.html'>
</head>
<body>
<dom-module id='my-element'>
<template>
<div>In my element it is <div>{{aPropertyOfTypeBoolean}}</div></div>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element',
properties: {
aPropertyOfTypeBoolean: {
type: Boolean,
value: false,
}
}
});
</script>
<dom-module id='main-page'>
<template>
<paper-button on-tap='tap'>Click me</paper-button>
<my-element a-property-of-type-boolean='{{someBoolean}}'></my-element>
<div>In main page it is <div>{{someBoolean}}</div></div>
</template>
</dom-module>
<script>
Polymer({
is: 'main-page',
properties: {
someBoolean: {
type: Boolean,
value: false
}
},
tap: function(){
this.someBoolean = !this.someBoolean;
}
});
</script>
<main-page></main-page>
Add $ at the end of it:
<my-element a-property-of-type-boolean$='{{someBoolean}}'></my-element>

Polymer 1.0 services issue

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 a service that use the iron-ajax to request reddit api and look for the posts. Here is the code :
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="reddit-list-service">
<template>
<iron-ajax
url='https://www.reddit.com/new.json'
handle-as='json'
debounce-duration="300"
on-response='handleResponse'
debounce-duration="300"
auto>
</iron-ajax>
</template>
</dom-module>
<script>
(function () {
Polymer({
is: 'reddit-list-service',
properties: {
modhash: {
type: String,
value: function() {
return '';
}
},
posts: {
type: Array,
value: function () {
return [];
}
},
after: {
type: String,
value: function () {
return '';
}
}
},
// Update object properties from the ajax call response
handleResponse: function (resp) {
this.properties.modash = resp.detail.response.data.modhash;
this.properties.posts = resp.detail.response.data.children;
this.properties.after = resp.detail.response.data.after;
this.post = this.properties.posts; // just to try
console.log(this.properties.posts);
}
});
})();
</script>
My log shows me that I get posts from the API and that's great!
Here's the issue when I want to use this service to make a list out of the posts array I can't figure out how to get them into my list compoment which is below :
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../reddit-list-service/reddit-list-service.html">
<dom-module id="reddit-post-list">
<template>
<reddit-list-service posts="{{posts}}">
</reddit-list-service>
<template is="dom-repeat" id="post-list" posts="{{posts}}">
<p>{{post.author}}</p>
<template>
</template>
</dom-module>
<script>
(function () {
Polymer({
is: 'reddit-post-list',
properties: {
},
});
})();
</script>
I've tried several think I saw in the documentation but I can't figure out what's wrong the author property doesn't show up.
Any clue?
You have a few things that aren't quite right here. In reddit-post-list you are not using the dom-repeat template correctly. See below:
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="reddit-list-service.html">
<dom-module id="reddit-post-list">
<template>
<reddit-list-service posts="{{posts}}"></reddit-list-service>
<template is="dom-repeat" items="[[posts]]">
<p>{{item.data.author}}</p>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "reddit-post-list"
});
</script>
You need an attribute called items which is the array the dom-repeat will iterate over. Inside the iteration you need to refer to item as this is the array item for the current iteration. Here are the docs.
For you reddit-list-service, you need to set the the reflectToAttribute and notify attributes to true on your posts property. This means that any changes to this property are reflected back on the posts attribute on the reddit-list-service element. See here for more information.
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<dom-module id="reddit-list-service">
<template>
<iron-ajax auto url="https://www.reddit.com/new.json" handle-as="json" on-response="handleResponse"></iron-ajax>
</template>
</dom-module>
<script>
Polymer({
is: "reddit-list-service",
properties: {
modhash: {
type: String,
value: ""
},
posts: {
type: Array,
value: function () {
return [];
},
reflectToAttribute: true, // note these two new attributes
notify: true
},
after: {
type: String,
value: ""
}
},
// Update object properties from the ajax call response
handleResponse: function (resp) {
this.modash = resp.detail.response.data.modhash;
this.posts = resp.detail.response.data.children;
this.after = resp.detail.response.data.after;
}
});
</script>
I have also tidied up the following things:
Removed the immediately called function wrapper from the <script> tags as these are not needed.
When referring to properties in your element you only need to use this.PROPERTYNAME rather than this.properties.PROPERTYNAME.
Having looked at the JSON returned, it appears that the author property is on the another property called data.
When you declare a value for a property in your element, you only need to have a function that returns a value if the property type is an Object or Array.

Polymer: How to loop and render HTML to screen

I am working on a widget that pulls third party information from a database using json. Once the information has been collected, I plan to loop through the information and create the required HTML code and insert this into the template via a {{variable}}
Now I am getting an unexpected result. When I do this, the html is being displayed as text.
Here is some sudo code of the issue:
<polymer-element name="loop-element">
<template>
{{customerList}}
</template>
<script>
Polymer('loop-element', {
ready: function() {
this.loadCustomerList();
}
customerList:"Loading customer list...",
loadCustomerList: function() {
CustomerNameArray[] = //Get the array from jSon file
i = 0;
do {
this.customerList = "<div>" + customerNameArray[i] + "</div>";
} while (customerNameArray[i]);
}
});
</script>
</polymer-element>
Essentially the DIV's are not being rendered, instead they are being printed to the screen as text:
"<div>Name 1</div>" "<div>Name 2</div>" ... n
Instead of:
Name 1
Name 2
Name n...
You can see a JSBin example here: http://jsbin.com/tituzibu/1/edit
Can anyone recommend how to go about outputting a list to the template?
Polymer v.1.0
/* relative path to polymer.html*/
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="employee-list">
<style>
/* CSS rules for your element */
</style>
<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>
</dom-module>
<script>
Polymer({
is: 'employee-list',
ready: function() {
this.employees = [
{first: 'Bob', last: 'Smith'},
{first: 'Sally', last: 'Johnson'}
];
}
});
</script>
doc
You should use Polymer's DOM-based data-binding features rather than creating the markup yourself.
<template repeat="{{customer, i in customers}}">
<div>{{i}}, {{customer.name}}</div>
</template>
http://www.polymer-project.org/docs/polymer/databinding.html#an-example
Maybe a little late...
If you want to stick to your approach you could use this.injectBoundHTML:
<polymer-element name="loop-element">
<template>
<div id='customerList'> </div>
</template>
<script>
Polymer('loop-element', {
ready: function() {
this.loadCustomerList();
}
customerList:"Loading customer list...",
loadCustomerList: function() {
CustomerNameArray[] = //Get the array from jSon file
i = 0;
do {
this.customerList = "<div>" + customerNameArray[i] + "</div>";
} while (customerNameArray[i]);
this.injectBoundHTML( this.customerList,
this.$.customerList);
}
});
</script>
</polymer-element>
However the first approach is better..
In Polymer 3.0 you can do the following:
<dom-repeat items="{{customers}}">
<template>
{{item.name}}
</template>
</dom-repeat>
Any list is binded to the items property of dom-repeat, and item within the template is used to represent the object from the list. You can read more about the dom-repeat on the Polymer 3.0 API reference page here.