I will try to be simple, i'm on the final stage of my app (a portfolio page), and i only need the interaction between pages, so:
short question:
how to select an specific item of some custom-element made with template is="dom-repeat" and publish like a property to bind later outside with another element attribute (selected="{{}}")
long question:
Form top to bottom. I've got a custom element with two elements inside of neon-animated-pages. The first element is a grid of cards made whit template is="dom-repeat", and the second is another neon animated pages, inside of this are all the works-pages (all pages make a change in a declarative way like this demo)
portfolio-page template:
<neon-animated-pages id="page" class="flex" selected="{{projectSelected}}">
<portfolio-grid id="grid" on-tap="_goToProject" card-selected="{{selected}}"> <-- card-selected not defined yet -->
</portfolio-grid>
<work-pages work-selected="{{selected}}" on-back-portfolio="_backPortfolio">
</work-pages>
</neon-animated-pages>
portfolio-page script:
Polymer({
is: "portfolio-page",
properties:{
projectSelected:{
type: Number,
value: 0
}
},
_goToProject: function(){
this.projectSelected = 1;
},
_backPortfolio: function(){
this.projectSelected = 0;
}
});
Inside of portfolio grid, is another custom element, a simple card with attributes like title and description, the img attribute here is the css id inside of the portfolio-card which sets the background image of my card:
<dom-module id="portfolio-grid">
<template>
<style>
SOME STYLE HERE
</style>
<div class="layout horizontal wrap">
<template is="dom-repeat" id="cardList" items="[[cards]]">
<portfolio-card class$="{{item.class}}" img="{{item.img}}"
title="{{item.title}}" description="{{item.description}}">
</portfolio-card>
</template>
</div>
</template>
<script>
Polymer({
is: "portfolio-grid",
behaviors: [
Polymer.NeonAnimatableBehavior
],
properties: {
cards: {
type: Array,
value: function(){
return [
{ img: 'monalisa', title: 'The Mona Lisa',
description: 'Painting', class: 'cardSmall'},
{ img: 'starrynight', title: 'Starry Night',
description: 'Painting', class: 'cardSmall'},
{ img: 'david', title: 'David',
description: 'Sculpture', class: 'cardMedium'},
{ img: 'memory', title: 'The Persistence Of Memory',
description: 'Painting', class: 'cardSmall'},
{ img: 'venus', title: 'Venus de milo',
description: 'Sculpture', class: 'cardSmall'},
{ img: 'birth', title: 'Birth of Venus',
description: 'Painting', class: 'cardMedium'},
{ img: 'guernica', title: 'The Guernica',
description: 'Painting', class: 'cardBig'},
{ img: 'nightwatch', title: 'The Night Watch',
description: 'Painting', class: 'cardSmall'},
{ img: 'kiss', title: 'The Kiss',
description: 'Painting', class: 'cardSmall'}
]
}
},
animationConfig: {
value: function() {
return {
'entry': {
name: 'fade-in-animation',
node: this,
timing: 2000
},
'exit': {
name: 'fade-out-animation',
node: this
}
}
}
}
}
});
</script>
</dom-module>
And finally my work-pages, here i've got all the works i want to show with fixed navigation controls, all working good (next, previous and back to portfolio grid):
<dom-module id="work-pages">
<template>
<style>
SOME STYLE HERE
</style>
<section id="container" class="layout vertical">
<neon-animated-pages id="works" class="flex" attr-for-selected="work" selected="{{workSelected}}">
<workpage-monalisa work="monalisa"></workpage-monalisa>
<workpage-starrynight work="starrynight"></workpage-starrynight>
<workpage-david work="david"></workpage-david>
<workpage-memory work="memory"></workpage-memory>
<workpage-venus work="venus"></workpage-venus>
<workpage-birth work="birth"></workpage-birth>
<workpage-guernica work="guernica"></workpage-guernica>
<workpage-nightwatch work=nightwatch""></workpage-nightwatch>
<workpage-kiss work="kiss"></workpage-kiss>
</neon-animated-pages>
</section>
<!-- Navigation Buttons -->
<div class="controls">
<!-- Back Work Button -->
<iron-icon id="menuIcon" icon="mrcauko-icons:menu"></iron-icon>
<!-- Back Work Button -->
<div id="back">
<iron-icon class="button" icon="mrcauko-icons:back" on-tap="_goPrev"></iron-icon>
</div>
<!-- Next Work Button -->
<div id="next">
<iron-icon class="button" icon="mrcauko-icons:next" on-tap="_goNext"></iron-icon>
</div>
<!-- Bottom Bar -->
<div class="bottomBar layout horizontal">
<div class="flex"></div>
<iron-icon id="backToPortfolio" icon="mrcauko-icons:view-portfolio" on-tap="_goBackPortfolio"></iron-icon>
<div class="flex"></div>
</div>
</div>
</template>
<script>
Polymer({
is: "work-pages",
behaviors: [
Polymer.NeonAnimatableBehavior
],
properties: {
workSelected: {
type: String,
notify: true
},
animationConfig: {
type: Object,
value: function() {
return {
'entry': {
name: 'fade-in-animation',
node: this
},
'exit': {
name: 'fade-out-animation',
node: this
}
}
}
}
},
listeners: {
'neon-animation-finish': '_onNeonAnimationFinish'
},
_onNeonAnimationFinish: function(){ //This isn't working
this.$.works.scroller.scrollTop = 0;
},
_goBackPortfolio: function(){
this.fire('back-portfolio');
},
_goPrev: function() {
this.$.works.selectPrevious();
},
_goNext: function() {
this.$.works.selectNext();
}
});
</script>
I've been thinking different aproaches but don't know how to implement them.
- Because i've got the same name in item.img and attr-for-selected="work" in the work-pages, somehow say "hey, when i click this card, the item.work is the same as the work-selected"(see portfolio-page)
- Don't know if i need to use the array selector
- Wrap the portfolio-grid inside an iron-selector element, to establish attr-for-selected$="{{item.img}}"(not tried yet but i think this way is using too many elements, and im sure there is a better way)
I know there is demos with neon-animated-pages, but my project is more specific, besides the code of the demos is too complicated for my poor knowledge of js (that's why i love polymer, 'cause i can create great things, and i'm not an expertise in js). I'm not asking to do my job, just only some enlightening to continue. So I ask for help from the immortals like you guys.
