iron-list+iron-scroll-threshold inside a div using scroll-target with an element not working
650 views
Skip to first unread message
ignacio...@gmail.com
Apr 24, 2017, 4:49:08 AM4/24/17
to Polymer
Hi,
I want to add an iron-list inside a div , but the scroll is not working. I set the scroll-target to the element id.
It is like the scroll is still pointing to the document but the iron-scroll-threshold isn´t , so the scroll is over the document and not the container div.
Here a sample code
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html>
<head>
<title>Grid layout using iron-list</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="/bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="/bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="/bower_components/app-layout/app-scroll-effects/effects/waterfall.html">
<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/bower_components/iron-image/iron-image.html">
<link rel="import" href="/bower_components/iron-scroll-threshold/iron-scroll-threshold.html">
<link rel="import" href="/bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="/bower_components/iron-list/iron-list.html">
<style>
body {
margin: 0;
background-color: #f6f6f6;
font-family: 'Roboto', 'Noto', sans-serif;
}
</style>
</head>
<body unresolved>
<dom-module id="x-grid">
<template>
<style>
:host {
display: block;
@apply(--paper-font-common-base);
}
app-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
background-color: #4285f4;
color: white;
}
iron-list {
margin-top: 90px;
padding-bottom: 16px;
}
.photoContent {
@apply(--layout);
background-color: #ddd;
position: relative;
width: 300px;
height: 300px;
margin: 8px;
}
.photoContent:hover .detail{
opacity: 1;
}
.photoContent > iron-image {
@apply(--layout-flex);
}
.photoContent > .detail {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
color: white;
font-size: 20px;
font-weight: 100;
padding: 20px;
opacity: 0;
transition: opacity 0.1s;
}
.searchInput {
@apply(--layout-flex);
font-size: 18px;
padding: 10px 20px;
border: none;
background-color: rgba(255, 255, 255, 0.2);
color: white;
-webkit-appearance: none;
border-radius: 0px;
}
.searchInput:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.searchInput:focus {
background-color: white;
outline: none;
color: black;
}
.loadingIndicator {
font-size: 16px;
text-align: center;
height: 60px;
}
.loadingIndicator paper-spinner {
margin-right: 20px;
vertical-align: middle;
}
@media (max-width: 800px) {
.photoContainer {
width: calc(50% - 16px);
}
.photoContent {
width: auto;
}
}
@media (max-width: 400px) {
iron-list {
margin-top: 72px;
}
.photoContainer {
width: 100%;
}
.photoContent > .detail {
opacity: 1;
}
}
::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
::-moz-placeholder {
color: rgba(255, 255, 255, 0.5);
}
:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
</style>
<iron-ajax id="ajax" loading="{{loadingPhotos}}" url="[[_getAPIEndpoint(apiKey, searchText, page)]]"
handle-as="text" on-response="_didReceiveResponse"></iron-ajax>
<app-header fixed effects="waterfall">
<app-toolbar>
<input class="searchInput" type="search" placeholder="Search on Flikr" value="{{searchText::input}}">
</app-toolbar>
</app-header>
<iron-list items="[[photos]]" as="photo" scroll-target="cc" grid>
<template>
<div class="photoContainer">
<div class="photoContent" tabindex$="[[tabIndex]]">
<iron-image sizing="cover"
src="//farm[[photo.farm]].staticflickr.com/[[photo.server]]/[[photo.id]]_[[photo.secret]]_n.jpg">
</iron-image>
<div class="detail">[[photo.title]]</div>
</div>
</div>
</template>
</iron-list>
<div class="loadingIndicator" hidden$="[[!loadingPhotos]]">
<paper-spinner active$="[[loadingPhotos]]"></paper-spinner> Fetching photos for <b>[[searchText]]</b>
</div>
<!-- this element loads more photos when the user scrolls down and reached the lower threshold -->
<iron-scroll-threshold id="scrollTheshold"
lower-threshold="500"
on-lower-threshold="_onLowerThreshold"
scroll-target="cc">
</iron-scroll-threshold>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-grid',
properties: {
apiKey: {
type: String,
value: 'c304f1096a06486d3c1e7ab271bf7f3f'
},
photos: Array,
perPage: {
type: Number,
value: 100
},
page: {
type: Number,
value: 0
},
searchText: {
type: String,
value: 'Big Sur'
},
loadingPhotos: Boolean
},
observers: [
'_resetPhotos(searchText)'
],
_getAPIEndpoint: function(apiKey, searchText, page) {
return 'https://api.flickr.com/services/rest/?method=flickr.photos.search' +
'&api_key=' + apiKey +
'&safe_search=1&sort=interestingness-desc'+
'&text=' + encodeURIComponent(searchText) +
'&page=' + page +
'&format=json' +
'&per_page=' + this.perPage;
},
_didReceiveResponse: function(e) {
var payload = JSON.parse(e.detail.response.match('jsonFlickrApi\\((.*)\\)')[1]);
if (!payload || !payload.photos || !payload.photos.photo) {
return;
}
payload.photos.photo.forEach(function(photo) {
this.push('photos', photo);
}, this);
this.$.scrollTheshold.clearTriggers();
},
_onLowerThreshold: function() {
this.debounce('_loadPhotos', this._loadMorePhotos, 60);
},
_loadMorePhotos: function() {
if (this.$.ajax.lastRequest) {
this.$.ajax.lastRequest.abort();
}
this.page++;
this.$.ajax.generateRequest();
},
_resetPhotos: function(searchText) {
this.page = 0;
this.photos = [];
if (searchText.trim() !== '') {
this.debounce('_loadPhotos', this._loadMorePhotos, 400);
}
}
});
});
</script>
<div style="width:400px;height: 200px;overflow: auto" id="cc">
<x-grid></x-grid>
</div>
</body>
</html>
Daniel Llewellyn
Apr 24, 2017, 10:06:47 AM4/24/17
to ignacio...@gmail.com, Polymer
lower-threshold="500"
on-lower-threshold="_onLowerThreshold"
scroll-target="cc">
</iron-scroll-threshold>
You cannot reference the ID "cc" because it is outside of your element. You either need to wrap your element in another element which includes the ID "cc" or you need to move your references to the main document.
type: String,
value: 'c304f1096a06486d3c1e7ab271bf7f3f'
},
Now go change that key, because the whole world can see it and use it for nefarious deeds.
Daniel Llewellyn
Bowl Hat
Ignacio Manzano
Apr 24, 2017, 10:10:45 AM4/24/17
to Daniel Llewellyn, Polymer
Thanks!
It is the key of the iron-list demo example, it is not mine :). ..it is in the github's file
Daniel Llewellyn
Apr 24, 2017, 6:42:45 PM4/24/17
to Ignacio Manzano, Polymer
On 24 April 2017 at 15:10, Ignacio Manzano <ignacio...@gmail.com> wrote:
Thanks!It is the key of the iron-list demo example, it is not mine :). ..it is in the github's file
From what I can discern, the scroll-target attribute takes the name of a _variable_ which points to the HTML Element you wish to monitor for scroll events.
In the example you shared from iron-list's repo the variable is the top-level `document` object. You can populate a variable using `var cc = document.getElementById('cc');` if you are sure you want to monitor scroll events on the element with the ID of "cc".
I believe the variable needs to be either global or local to the element which hosts the `iron-scroll-threshold` instance. In the example from iron-list that meant the variable needed to be defined in the main document scope or the global scope; because `document` is in the global scope it satisfies that requirement.
John Teague
Apr 25, 2017, 5:59:09 PM4/25/17
to Polymer
Did you change that API key? 😀
Ignacio Manzano
Apr 25, 2017, 6:12:04 PM4/25/17
to John Teague, Polymer
Hi,
The API key is not mine, I toke it from the polymer iron-list example , it is where this example came from. They have to remove it from iron-list girhub
Best,
Ignacio
On Tue, Apr 25, 2017, 18:59 John Teague <jo...@gemservers.com> wrote:
Did you change that API key? 😀
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to a topic in the Google Groups "Polymer" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/polymer-dev/mgsgMKyIaVU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/ebac6884-6702-4e1f-89cc-3490757ea2dd%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
John Teague
Apr 25, 2017, 6:17:32 PM4/25/17
to Polymer
I know. I was just having a bit o'fun with Daniel.
Reply all
Reply to author
Forward
0 new messages