Skip to content

Instantly share code, notes, and snippets.

@IgorRubinovich

IgorRubinovich/Polymer 1.0 custom element using iron-image

Last active August 29, 2015 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save IgorRubinovich/36bc1ce3a314ed7cf032 to your computer and use it in GitHub Desktop.
Save IgorRubinovich/36bc1ce3a314ed7cf032 to your computer and use it in GitHub Desktop.
Download ZIP
Polymer 1.0 custom element using iron-image.html
Raw
Polymer 1.0 custom element using iron-image
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/iron-image/iron-image.html">
<link rel="import" href="bower_components/paper-spinner/paper-spinner.html">
<dom-module id="iron-image_test-element">
<style is="custom-style">
paper-spinner { display: block; position: fixed; top:50%; left:50%; margin-top: 0px; margin-left: 0px; }
</style>
<template>
<paper-spinner id="spinner"></paper-spinner>
</template>
</dom-module>
<style>
input { margin-top : 20px }
</style>
<body>
<iron-image_test-element></iron-image_test-element>
<div>
<input type="button" value="another image">
</body>
<script>
Polymer({
is: "iron-image_test-element",
ready: function() {
var img = document.createElement("iron-image");
img.setAttribute("sizing", "contain");
img.setAttribute("class", "preload fade");
img.style.width = "400px";
img.style.height = "400px";
Polymer.dom(this.root).appendChild(img);
Polymer.dom(this.root).flush();
this.img = img;
this.src = "http://img11.deviantart.net/4345/i/2010/203/4/a/two_black_cats_on_roof_by_skripper.jpg";
},
anotherImage : function(newValue, oldValue) {
console.log('update');
this.img.src = this.src;
},
properties : {
'src' : {
type : String,
observer : 'anotherImage',
notify : true
}
}
});
var cats = [
'https://s-media-cache-ak0.pinimg.com/236x/56/6d/e4/566de48d3aa13e92401f488af362d667.jpg',
'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ2lPfugSbZmnCL2K2fpMsHaEsjnhRA4ow1i3ttZzHun9umfqde',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRnEWbK3xjP0MBLVHoSm2VPx71_GO7vubr-NnPOXy7NixSfh1c',
'http://img11.deviantart.net/4345/i/2010/203/4/a/two_black_cats_on_roof_by_skripper.jpg'
], next = 0;
document.querySelector('input').addEventListener('click', function() {
document.querySelector('iron-image_test-element').src = cats[next];
next = (next+1) % cats.length;
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment