I have this polymer element in which a list of items are shown. I am populating the list with iron-list. Each list item contains a paper-card, which hides some other custom elements, when i click a button, the corresponding view will display. Everything upto this part is working fine.
The problem i'm having is, When i show a custom element, or hide the element, the iron-list item height wont update. When i show the element, the element will show behind other views, and when i hide, a white space is appearing with height equal to that of the showed view.
below is the code for the list,
<div on-click="clicked" id="feedlist">
<iron-list items="{{feedList}}" as="item">
<template>
<card-element field="{{item.id}}" feed-id="{{item.id}}" feed-number="{{item.id}}" feed-title="{{item.title}}" feed-name="{{item.name}}" date="{{item.timeStamp}}"></card-element>
</template>
</iron-list>
and code for this card-element is as given below
<div class="content" id="content">
<text-input id="note" type="1" note="{{response.note}}" feed-id="[[feedId]]"></text-input>
<data-viewer id="dataViewer" plugin-data="{{response.data}}" feed-id="[[feedId]]" default-view="gridView" parent="feed"></data-viewer>
<comment-view id="comment" comments="{{response.comment}}" feed-id="[[feedId]]"></comment-view>
</div>
im hiding and showing, text-input, data-viewer and comment-view or all at once according to button clicks.
Below is the code for toggling the data-viewer,
toggleDataView: function (event) {
event.stopPropagation();
if (this.isFeed) {
this.isDataView = false;
this.isFeed = false;
}
this.isDataView = !this.isDataView;
if (this.isDataView) {
this.isComment = false;
this.isNote = false;
this.$.note.hide();
this.$.comment.hide();
this.$.dataViewer.show();
this._showDragView();
} else {
this.$.dataViewer.hide();
this._hideDragView();
}
},
I think you need to call updateSizeForItem(item) https://elements.polymer-project.org/elements/iron-list#method-updateSizeForItem after you update an item (view, hide, ...)
Related
So i have an input with a dropdown underneath. So when i click into an input the dropdown opens. But i can't select anything from the dropdown cause it is not focussed. So when i click on a value it doesnt get selected and the dropdown closes again because it looses focus. So i am now wondering how i can include the div into the focus of the input.
HTML input:
<input type="text" class="form-control myInput" [(ngModel)]="textToSort"
(keyup)="onKeyDownAction($event)" (blur)="onBlurEventAction()" id="{{id}}"
(focus)="focusFunction()" (focusout)="unFocusFunction()"/>
HTML div (dropdown):
<div class="data-container" *ngIf="showDropDown" style="position: absolute;" >
<p
*ngFor="let data of dataList; let i = index"
class="data-list"
(click)="updateTextBox(i,data[columnName]); focusOnInput();"
[ngClass]="{highlight:checkHighlight(i)}"
> {{data[columnName]}}</p>
</div>
Component:
focusFunction(){
this.showDropDown = true;
}
unFocusFunction() {
this.showDropDown = false;
}
blur event happens on your input because of mousedownon list item
So in order to prevent this you need to add
(mousedown)="$event.preventDefault()"
handler for your list items.
I created simple demo:
https://stackblitz.com/edit/angular-x3cdr1
Have you in your CSS, tried setting the z-index to 1 for the dropdown class when it is expanded?
Please share a plunkr or a stackblitz link to look at the scenario.
The simplest approach would be as follows:
focusFunction(){
this.showDropDown = true;
}
unFocusFunction() {
setTimeout(() => { this.showDropDown = false; }, 500);
}
I think checking this stackblitz would help also:
https://stackblitz.com/edit/angular-search-filter?file=app%2Fapp.component.ts
I have this code in angular application
html:
<input type="button" value="Add" (click)="addItems()" />
<div id="messageContainer" style="width:200px; height:300px; overflow-y:scroll;" #scrollMe >
<div *ngFor="let i of items">
{{i}}
</div>
</div>
component.ts:
items: string[] = [];
count = 20;
#ViewChild('scrollMe') private scrollContainer: ElementRef;
ngOnInit() {
this.addInitialItems();
}
addItems() {
const currentPosition = this.scrollContainer.nativeElement.scrollTop;
this.items.unshift(this.count.toString());
this.count++;
this.scrollContainer.nativeElement.scrollTop = currentPosition;
}
addInitialItems() {
for (let i = 0; i <= this.count - 1; i++) {
this.items.unshift(i.toString());
}
// this is not working
this.scrollContainer.nativeElement.scrollTop = this.scrollContainer.nativeElement.scrollHeight;
}
Initially messageContainer div should be filled with multiple items, with div scrolled to bottom, once user click an Add button it will add an item to the top of the messegaes list and should maintain the scroll position.
Retaining scroll position is done with
const currentPosition = this.scrollContainer.nativeElement.scrollTop;
//add new item
this.scrollContainer.nativeElement.scrollTop = currentPosition;
But, initial scrolling to bottom of div is not working,
this.scrollContainer.nativeElement.scrollTop = this.scrollContainer.nativeElement.scrollHeight;
scrollTop value is 0 even after setting it,
How to get this scrolled to bottom of the div initially?
#ViewChild objects are not fully defined until the 'ngAfterViewInit' lifecycle hook. Try moving your method call to that hook.
ngAfterViewInit() {
this.addInitialItems();
}
Something else you might want to try is binding to scrollTop directly in the template, so you won't have to access the nativeElement at all.
<input type="button" value="Add" (click)="addItems()" />
<div id="messageContainer" style="width:200px; height:300px; overflow-y:scroll;" [scrollTop]="myScrollVariable">
<div *ngFor="let i of items">
{{i}}
</div>
</div>
In your component you could then simply write something like
this.myScrollVariable = currentPosition;
Instead of modifying the DOM element directly. Granted, if you wanted to initialize the scroll to the scrollHeight, you'd probably still need to use ViewChild to access the nativeElement and get that attribute (although personally, I would just initialize scrollTop to some absurdly high number like 99999999, anything greater than scrollHeight will be the same as the exact scrollHeight).
If moving the method call to ngAfterViewInit doesn't work, try setting scrollTop inside a setTimeout function. Sometimes the Angular change detector is weird about picking up changes to the native DOM and as a workaround you can escape the change outside the regular angular event loop with a timeout.
setTimeout(()=>{ this.scrollContainer.nativeElement.scrollTop = whatever; },1)
To build off the accepted answer, you can pretty elegantly set a div to start scrolling at the bottom using template variables:
<div class="overflow-scroll" #scrollContainer [scrollTop]="scrollContainer.scrollHeight">
<!-- tall/wide content -->
</div>
I have an iron-list which I add new items to while scrolling to the bottom using iron-scroll-threshold. That works fine.
What I also need is a general event which is fired when scrolling stops.
I need that to know whether the listed items (m.message) have been seen by the user, by checking which items are currently visible in the view-port after scrolling, and then marking them as "read".
<div class="container" on-content-scroll="_scrollHandler">
<iron-scroll-threshold id="threshold" scroll-target="mlist" lower-threshold="500" on-lower-threshold="_loadMoreData"></iron-scroll-threshold>
<iron-list items="[[messages]]" id="mlist" as="m">
<template>
<div>
<p>[[m.message]]</p>
</div>
</template>
</iron-list>
</div>
The handler _scrollHandler is never fired however.
What would be necessary to get an event after scrolling ends?
You need the style: overflow: auto on the div.container. This will make sure the scroll event will invoke.
I could not find any such event as content-scroll, but with the changes above you should be able to change your HTML to bind against the handler like: on-scroll="_scrollHandler".
To detect if scrolling has stopped, I'd recommend using Polymer.debounce to have the callback set the isScrolling state to false like:
app._scrollHandler = function (e) {
app.isScrolling = true
app.debounce('scroll-handler', _ => {
app.isScrolling = false
}, 20)
}
It works at the end by moving on-scroll="_scrollHandler" to the iron-list:
<div class="container">
<iron-scroll-threshold id="threshold" scroll-target="mlist" lower-threshold="500" on-lower-threshold="_loadMoreData"></iron-scroll-threshold>
<iron-list items="[[messages]]" id="mlist" as="m" on-scroll="_scrollHandler">
<template>
<div>
<p>[[m.message]]</p>
</div>
</template>
</iron-list>
</div>
With the function being:
_scrollHandler: function() {
this.debounce("markAsRead", function(e) {
console.log("debounce");
}, 500);
}
Edit:
In case the iron-scroll-threshold wraps the iron-list, you need to move on-scroll to the iron-scroll-threshold-element:
<iron-scroll-threshold on-scroll="_scrollHandler" id="threshold" on-lower-threshold="_loadMore">
<iron-list scroll-target="threshold">...</iron-list>
</iron-scroll-threshold>
My dom repeat displays a list of icons which I can bookmark or unbookmark ,which generating dom-repeat I call a function to find if this icon is bookmarked or not,that will return CSS class
.book-marked {
color: red;
}
.not-book-marked {
color: green;
}
<template is="dom-repeat" items="{{membersList}}">
<iron-icon icon="bookmark" class$="[[_computeBookMark(item.userId)]]" on-tap="_toogleBookMark"></iron-icon>
</template>
Once I get all my list of icon now if user click that icon I need to toogle css class.so I wrote on-tap function
_toogleBookMark:function(e) {
var userData = e.model.item; //gets entire data object of that element
var index = e.model.index; //gets index of that element
},
I can't use ID since its dom-repeat ,Is there any other ways so that I can change CSS of that dom-repeat element in _toogleBookMark() function on clicking? or is it possible to change CSS with index??or using "e" reference in _toogleBookMark(e) function !!
Not sure if I understood correctly - you want to access the element you've tapped?
Just use the event.target property then. It will return the element on which the event happened, in this case, the icon you have tapped.
_toogleBookMark = function(e) {
e.target.classList.toggle("not-book-marked");
}
Check this example.
Mind you:
1) When using Shady DOM, assuming our element is a custom element, target can be a component from the element's template, not the element itself. To prevent that, use Polymer.dom(e).localTarget (read more here).
2) When using a custom element with light DOM children, the above may not be enough, your (local)target will be a light DOM child, not the element you wished for. In that case, use Element.closest(selector) to (optionally) go up the DOM to the element you want. Read more about the method here.
As you just want to swap your class on tap, do it like this:
Add an own attribute, like data-id="1" and the id attribute, but be sure they have the same value:
<template is="dom-repeat" items="{{membersList}}">
<iron-icon icon="bookmark" class$="[[_computeBookMark(item.userId)]]" on-tap="_toogleBookMark" data-id="{{item.userId}}" id="{{item.userId}}"></iron-icon>
</template>
Now, inside your _toggleBookMark function, you can access the current tapped element and swap CSS classes by:
_toogleBookMark:function(e) {
// this gives you your userId from the data-id attribute
var userId = e.path[0].dataId;
// we can access the element now with
var element = this.$$('#' + e.path[0].dataId);
if (element.classList.contains('book-marked')) {
element.classList.remove('book-marked');
element.classList.add('not-book-marked');
} else {
element.classList.add('book-marked');
element.classList.remove('not-book-marked');
}
},
When using ng-hide or ng-show directives a .ng-class is added or removed so DOM elements are visible or not.
However they kinda get positional "removed" as for example, hiding or showing two continous div elements one on top of the other.
<div ng-show="condition1">First div</div>
<div ng-show="condition2">Second div</div>
So, if condition1 evaluates to false first div will be hidden BUT second div will take the position which the just hidden div took.
How can I avoid that? I only want DOM elements to be invisible but not to get somehow removed.
First workaround.
I tried to overried .ng-hide class and getting a secondary class, only-hide, for elements on which I wanted this effect:
.ng-hide.only-hide {
visibility: hidden !important;
}
But didn't get results so far.
I achieved it with this second class approach by setting:
.ng-hide.only-hide {
visibility: hidden !important;
display: block !important;
}
As Angular sets .ng-hide with display:none, I make it invisible but present setting display:block.
To preserve and maintain the space occuped by the div you can't use directly ng-hide or ng-show.
You can use the ng-style directive as following:
<div ng-style="conditionHide1">First div</div>
<div ng-style="conditionHide2">Second div</div>
then your conditionHide1 and conditionHide2 should be like
if (condition1)
$scope.conditionHide1= {'visibility': 'hidden'}; // then div1 will hidden.
else
$scope.conditionHide1= {'visibility': 'visible'}; // then div1 will visible.
if (condition2)
$scope.conditionHide2= {'visibility': 'hidden'}; // then div2 will hidden.
else
$scope.conditionHide2= {'visibility': 'visible'}; // then div2 will visible.
You can change the visibility of the button by changing the $scope.conditionHide1 and $scope.conditionHide2 according to your conditions.
Solution2 by using a custom directive:
Create a new directive named condition and relative to an Attribute. Set-up a watch to watch the value of the attribute and, based on the value, set to the element (in this case the div) an appropriate css style. The value is mapped to the variable showDiv which change his value by clicking on the button. Clicking on the button, the value showDiv became the opposite !showDiv and the watch change the visibility from visible to hidden and vice-versa.
angular.module('MyModule', [])
.directive('condition', function() {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$watch(attributes.condition, function(value){
element.css('visibility', value ? 'visible' : 'hidden');
});
}
};
})
.controller('MyController', function($scope) {
$scope.showDiv = true;
});
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='MyModule' ng-controller='MyController'>
<div condition='showDiv'>Div visible/invisible</div>
<button ng-click='showDiv = !showDiv'>Hide div or show it</button>
</div>