dynamically edit template of iron-list - polymer

At first, i know, there are many questions about iron-list. But mostly about editing items and not whole template inside iron-list..
My code is really extremely complicated and posting it is pointless. I am working on data-tables which are using iron-list. I have element called diamond-listing and inside this diamond-listing i have iron-list.
You can image this like: Parent element define <template> with some content inside it, and child element (diamond-listing) will render this template as a table
Of course diamond-listing is used multiple times in my application and always with different template. For example: page users have columns with userID, userName etc.. and on page stations there are columns stationID, address etc.. with different number of columns. Every pagea has it's own <template> which i am trying to propagate to diamond-listing. For example:
<diamond-listing as="user" id="permissionsTable" type="pagination" pagination-items-per-page="6" header-data="{{headerData}}" address="/user/" loading="{{loading}}">
<div id="test" slot="content">
<template>
<div class="diamond-row" on-tap="_openUrl" info$="/user/[[user.id]]">
<diamond-item text="{{user.username}}"></diamond-item>
<diamond-item text="{{user.partner.name}}"></diamond-item>
</div>
</template>
</div>
</diamond-listing>
What i managed to do is to make it work in shadow dom using <slot> and simply rewrite <template> inside <iron-list>, but here we are.. For example using Firefox, which doesn't support webcomponents, there isn't <template> as a child of <iron-list> (because there is no shadow-dom) so there is no way how to update <template> and render iron-list.
What i tried:
1) Find template inside iron-list and use removeChild and appendChild functions.
var test = this.querySelector("#test template");
this.$$("#diamondList").removeChild(this.$$("#diamondList template"));
this.$$("#diamondList").appendChild(test);
Without success.
2) Define in HTML empty iron-list without any template inside it. And then in javascript add template dynamically. Without success. ( iron-list is crying it requires template)
3) Create dynamically iron-list using document.createElement
var test = this.querySelector("#test template");
var list = document.createElement("iron-list");
list.appendChild(test);
list.as = this.as;
list.items = [{"username":"test","partner":{"name":"Test partner","id":1}}];
list.id = "diamondList";
result: same as 2) ...
Is there a way, how to update template which is used to render all items in iron-list?
Or create iron-list with defined template inside JS ?
Or somehow do it with dom-repeat ? I won't have more than 10 items in listing, since it's fully pagination listing. ( this is propably simplest solution, but i don't know how to render <template> for every iteration

Here is one general answer, don't know if it will work for your case:
In Polymer, recommended way of manipulating the DOM is by manipulating the data, not by removeChild or appendChild.
For example,
if you have list of users as: var users_array = [....];
create the iron-list as:
<iron-list date="users_array">
<template>
...
<template>
</iron-list>
adding and removing elements in users_array will affect the iron-list
immediately.

Use a dom-if or use hidden inside the iron-list.
<iron-list items="[[items]]">
<template>
<template is="dom-if" if="[[item.isType1]]">
<!-- item1 -->
</template>
<template is="dom-if" if="[[item.isType2]]">
<!-- item2 -->
</template>
</template>
</iron-list>

Related

How to access elements within dom-repeat in Polymer 3.0?

I have the following piece of code:
<dom-repeat id="template" items="{{chats}}">
<template>
<template is="dom-if" if="[[item.opened]]">
<section id$="msg-[[index]]"></section>
</template>
</template>
</dom-repeat>
How do can I access section with id=msg-3 and set scrollTop to 999 upon being rendered?
I know that in polymer 1 the best practice was to bind to on attached and wait on a dom-repeat event with a debouncer this no longer works in polymer 3, however.
If you know the index number you can access the element with ;
let el = this.shadowRoot.querySelector('#msg-'+<index>);
Remember, if item not rendered due to your filter with dom-if, you can not acces this element.
EDIT
In order to show on top of the selected item;
let screenPosition = el.getBoundingClientRect();
window.scrollTo(screenPosition);
Demo

is it possible nest/inner dom-if where the second dom-if depends on value oberseved from the first dom-if block

I read carefully these threads
Polymer 1 nested dom-if within dom-repeat not updating when data changes
how to dynamically append an element to dom-if in Polymer?
How to access content of dom-if inside a custom element?
that may have some relation with my question but I didn't manage find any clue if I can do what I want and how.
In my company, there are several flows, each one for each business flow and each step of the flow is a screen coded as a Polymer 1 web component. All them are warraped in a root Polymer component which defines the route.
A simple exemple would be:
my-root-component:
<dom-module id="my-root-component">
<template>
<first-obrigatiory-page which-route={aValueReturnedFromFirstComponent}></first-obrigatiory-page>
<template is="dom-if" if="[[_isTrueFunction(aValueReturnedFromFirstComponent)]]" restamp>
<second-page which-sub-route={aValueReturnedFromSecondComponent}></second-page>
<template is="dom-if" if="[[_isTrueFunction(aValueReturnedFromSecondComponentComponent)]]" restamp>
<third-page ></third-page>
</template>
</template>
</template>
<script>
Polymer({
is: 'my-root-component',
behaviors: [doesntMatterHere],
properties: {
The first dom-if works as expected but the second seems not be taken in account and my third-page component is never showed.
I checked and the equivalent for _isTrueFunction(aValueReturnedFromSecondComponentComponent) is returning true.
Does aValueReturnedFromFirstComponent really return anything, because you should declare the attribute as which-route="{{aValueReturnedFromFirstComponent}}" instead of using simple { }.
Does the whichRoute (note the camelCase) property in the first-obrigatiory-page element have the notify: true property so the variable actually sends back the updated value?
I usually set observers on variables whenever dom-ifs don't update so I can see if they really change or not, and then set the variables myself through the console with document.querySelector('my-root-component').set('aValueReturnedFromFirstComponent', true) so I can see that the dom-if really updates.
A workaround could be to use events, but what you've done should work.

How can I allow a polymer component to contain dynamic elements?

In polymer, let's say I have a container element <x-container>, and two child elements <a-child>, <b-child>. In an element, I want to be able to specify that it contains either <a-child> or <b-child> (it will never have both).
For example, it could look like:
1. <x-container><a-child></a-child></x-container>
or,
2. <x-container><b-child></b-child></x-container>.
Since <x-container> has a lot of code, I don't want to duplicate it, but want to be able to use an <x-container> like this:
<x-container type = 'a-child'></x-container> which would then have the same behavior as the first item mentioned. How could I achieve this functionality?
Just instanciate it when you have the information which one its going to be!
//in your x-container component
observers: ['_typeChanged(type)'],
_typeChanged: function(type) {
var child = this.create(type);
Polymer.dom(this.root).appendChild(child);
}
Or you use a slot then you could do smth like this
parent component
<x-container>
<template is="dom-if" if="[[_isA()]]"><a-child></a-child></template>
<template is="dom-if" if="[[_isB()]]"><b-child></b-child></template>
</x-container>
and in your x-containerĀ“s template just simply put a slot the child will be rendered within the slot
<slot></slot>

Polymer Advanced DataBinding

I plan to display three columns in my application, each with roughly 1k of custom items (picture, header, text). It will probably work with something like
<template>
<template bind="{{myData as m}}">
<template repeat if="{{m.1}}">
<custom-item icon="{{m.icon}}" label="{{m.title}}"></custom-item>
</template>
<template repeat if="{{m.2}}">
<custom-item icon="{{m.icon}}" label="{{m.title}}"></custom-item>
</template>
...
</template>
</template>
but I want to avoid loading 3k items from database to client, they will probably stay within top 200. Is there a way to do some sort of dynamic loading in polymer?
i would recommend core-list for this. https://www.polymer-project.org/docs/elements/core-elements.html#core-list i recently used it in a album list. (large album covers and several buttons and text) it greatly improved performance from using only a repeating template. to load more results you could use a onscroll callback.
keep in mind all this is assuming you are working in a auto-binding template.
<template id="app" is="auto-binding">
// all html code in here
</template>
and waited for the template to be bound
document.querySelector("#app").addEventListener('template-bound', function () {
//all this js code will be in here
});
im my app i used core-header-panel to get scroll event it would work the same with core-scroll-header-panel. i gave the header panel a id. i just called it headerPanel.
<core-header-panel id="headerPanel">
then i set the scrollTarget for core-list to use the scroller of the headerPanel. make a variable in js
this.scrollTarget = document.querySelector('#headerPanel').scroller;
then i link that to the core-list
<core-list data="{{data}}" scrollTarget="{{scrollTarget}}">
<template>
<custom-item icon="{{model.icon}}" label="{{model.title}}"></custom-item>
</tempalte>
</core-list>
that has core-list set up. as for not loading 3000 results i would use a callback on the scroller we set up a min ago. then calculate a % of the page that has been scrolled and call a function if scrolled more then say 80%
this.scrollTarget.onscroll = function () {
var precent = (this.scrollTarget.scrollTop / (this.scrollTarget.scrollHeight - this.scrollTarget.offsetHeight)) * 100;
if (precent > 80) {
// call some function to .push() more to this.data
}
};
edit: added bit about waiting for template to be bound.
hope this helps.
There is also a polymer element for infinite scrolling :
core-scroll-thresold, you can combine it with the core-list

polymer restricting querySelector to shadow dom with inline template

I am trying to restrict querySelector to elements with the shadow dom created by a template with in the mainline of my web page. Here is a fragment of what I want to do:
<template id="userForm" is="auto-binding">
<div id=contents>
<my-element id='myElement>
</div>
</template>
<script>
var userForm = document.querySelector('#userForm');
Now I would like to able to do something like:
var myElement = userForm.querySelector('#myElement');
or
var myElement = userForm.$.contents.querySelector('#myElement');
But neither of these work. If the template were contained within a custom element I could use:
this.$.contents.querySelector('#myElement);
All of this in aid of making sure I don;t select an element with the same id outside of the template.
Anyone know how to accomplish this?
I can be mistaken, but I think all you need to do is
yourElement.shadowRoot.querySelector("#yourId");