Menu
I'm using Polymer for a new version on my website. I'm currently experimenting with the hero-transition of the core-animated-pages. Some examples are provided in the core-animated-pages examples and especially this one.
With these examples I've got to understand the examples and I've gotten to this example: jsbin. It's not entirely polished, but it works.
Now, I want to have the card show in this example to be a custom element. Of this custom element I would need the to have two hero-id's, one for the image and one for an album title. I tried simulating it in this example. Here's the code:
album-card custom element
<polymer-element name="album-card">
<template>
<style>
:host{
display: block;
position: relative;
background-color: grey;
width: 200px;
}
.description{
padding: 0px 10px;
color: white;
}
.cube{
width: 200px;
height: 200px;
}
</style>
<div vertical layout>
<div class="cube" style="background: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg) no-repeat; background-size: cover; background-position: center center;" hero-id="photo-hero" hero></div>
<div class="description">
<content select="h2" hero-id="title-hero" hero></content>
<content select="h4"></content>
</div>
</div>
</template>
<script>
Polymer("album-card", {});
</script>
</polymer-element>
The main element with where the transition appears
<polymer-element name="my-app">
<template>
<style>
</style>
<core-animated-pages selected="{{photopage}}" transitions="hero-transition cross-fade" on-tap="{{albumTapped}}">
<section>
<album-card>
<h2>Album name</h2>
<h4>x pictures</h4>
</album-card>
</section>
<section>
<core-toolbar class="tall" style="background-image: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg); background-size: cover;background-position: 50% 50%;" hero-id="photo-hero" hero>
<div class="title bottom" hero hero-id="title-hero">Album name</div>
</core-toolbar>
</section>
</core-animated-pages>
</template>
<script>
Polymer("my-app", {
photopage: 0,
albumTapped: function(){
this.photopage++;
}
});
</script>
</polymer-element>
Now I know this is due to the shadow dom in which the hero-id and hero attributes of the fields are set, thus not being accessible by other elements on the page, but is there a way around this in this particular case?
253
It's actually not about the shadow dom. the animated goes for hero "1 shadow-dom of depth" and cross-fade any shadow-dom deep.
The thing is that your custom album-card was getting all "bindy" before ready callback and trampling stuff.
Also, the way you choose the selected album is kinda messed up (at least that's what i figure) so with your code (and i gotta leave office now I'm home having fun editing my answer and striking stuff) i made it work in reverse back and forth as such: your fixed code (updated 2)
I'm sorry i wouldn't fiddle more with it because I really gotta leave. Maybe later i'll comeback and explain it better but at least the "TLDR" answer is here: you shouldn't bind stuff before the ready callback (actually you can but it is specific and should be declared explicitly on the element prototype). i'll probably get back here later(here i am). hope it helps.
ADDENDUM: oh and i didn't noticed at the time (i was in a hurry) you were nesting your element in a section, with custom elements, that's not needed (nor expected by the component in this case).
the full code just for copy/paste easiness:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src='http://www.polymer-project.org/webcomponents.js'></script>
<link rel='import' href='http://www.polymer-project.org/components/polymer/polymer.html'>
<link rel='import' href='http://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html'>
<link rel='import' href='http://www.polymer-project.org/components/core-toolbar/core-toolbar.html'></head>
<body>
<!-- your album card element -->
<polymer-element name="album-card" noscript>
<template>
<style>
#thumbAlbum{
display: block;
background-color: grey;
width: 200px;
}
#albumDesc{
padding: 0px 10px;
color: white;
}
#albumCover{
width: 200px;
height: 200px;
}
</style>
<div id="thumbAlbum" vertical layout>
<div id="albumCover" class="cube" style="background: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg) no-repeat; background-size: cover; background-position: center center;" hero-id="photo-hero" hero></div>
<div id="albumDesc" class="description">
<content select="h2" hero-id="title-hero" hero></content>
<content select="h4"></content>
</div>
</div>
</template>
</polymer-element>
<!-- your app alement -->
<polymer-element name="my-app">
<template>
<core-animated-pages selected="{{photopage}}" transitions="hero-transition cross-fade" on-tap="{{albumTapped}}">
<album-card>
<h2>Album name</h2>
<h4>x pictures</h4>
</album-card>
<section>
<core-toolbar class="tall" style="background-image: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg); background-size: cover;background-position: 50% 50%;" hero-id="photo-hero" hero>
<div class="title bottom" hero hero-id="title-hero">Album name</div>
</core-toolbar>
</section>
</core-animated-pages>
</template>
<script>
Polymer("my-app", {
photopage: 0,
ready:function(){
},
albumTapped: function(){
this.photopage = this.photopage > 0 ? 0 : 1;
},
});
</script>
</polymer-element>
<my-app></my-app>
</body>
</html>
Oh, and on an important sidenote: always use the webcomponents.js as platform.js is deprecated and not really friendly to find out problems. plus import the polymer.html.
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
