javascript - Ionic2 Scroll in Expandable Header -


i using ionic 2, , have implemented expandable header based on this tutorial.

it works perfectly, except have 2 issues:

  1. as can see, search items 0.7 opaque. correct, background of items should have 1.0 opacity.

  2. when there no results (i.e. no items in scroll list). expandable header won't collapse. there not items scroll on, won't resize header.

  3. after apply filter (and clear again), infinite scroll (ioninfinite)="doinfinite($event)" event not fire when scroll bottom of page.

enter image description here

here code. apologies it's much, don't want leave out relevant.

any advise appreciated.

html

<ion-header>   <expandable-header [scrollarea]="mycontent" headerheight="{{isios ? 270 : 247}}">      <ion-item class="search-item searchtext">       <ion-row>         <ion-col class="col-search">           <ion-searchbar class="ion-searchtext" id="ion-searchtext" [(ngmodel)]="searchquerytext" (change)="onchangetext($event)" (ionclear)="oncanceltext($event)"             (ioninput)="oninputtext($event)" placeholder="keyword search" debounce="1" [showcancelbutton]="isios"></ion-searchbar>         </ion-col>         <ion-col class="col-cancel" *ngif="!isios">           <button ion-button *ngif="!isios && searchquerytext" (click)="oncanceltext($event)" color="primary" clear small>         <p class="small-text-search search-cancel">cancel</p>       </button>         </ion-col>       </ion-row>     </ion-item>      <ion-item class="search-item">       <ion-row>         <ion-col class="col-search">           <ion-searchbar id="ion-locationbar" [(ngmodel)]="searchquerylocation" (ionclear)="oncancellocation($event)" (ioninput)="oninputlocation($event)"             (click)="presentfiltermap()" placeholder="location" debounce="1" [showcancelbutton]="true"></ion-searchbar>         </ion-col>         <ion-col class="col-cancel" *ngif="!isios">           <button ion-button *ngif="!isios && searchquerylocation" (click)="oncancellocation($event)" color="primary" clear small>         <p class="small-text-search search-cancel">cancel</p>       </button>         </ion-col>       </ion-row>     </ion-item>      <ion-item class="search-item">       <ion-row>         <ion-col class="col-search">           <ion-searchbar id="ion-locationbar" [(ngmodel)]="searchquerysectors" (ionclear)="oncancelsectors($event)" (ioninput)="oninputsectors($event)"             (click)="presentfiltercategories()" placeholder="sectors" debounce="1" [showcancelbutton]="true"></ion-searchbar>         </ion-col>         <ion-col class="col-cancel" *ngif="!isios">           <button ion-button *ngif="!isios && searchquerysectors" (click)="oncancelsectors($event)" color="primary" clear small>         <p class="small-text-search search-cancel">cancel</p>       </button>         </ion-col>       </ion-row>     </ion-item>      <ion-item class="search-item">       <ion-row>         <ion-col class="col-search">           <ion-searchbar id="ion-locationbar" [(ngmodel)]="searchqueryrating" (ionclear)="oncancelrating($event)" (ioninput)="oninputrating($event)"             (click)="presentfilterrating()" placeholder="star rating" debounce="1" [showcancelbutton]="true"></ion-searchbar>         </ion-col>         <ion-col class="col-cancel" *ngif="!isios">           <button ion-button *ngif="!isios && searchqueryrating" (click)="oncancelrating($event)" color="primary" clear small>         <p class="small-text-search search-cancel">cancel</p>       </button>         </ion-col>       </ion-row>     </ion-item>      <ion-item class="search-item">       <ion-row>         <ion-col class="col-search">           <ion-searchbar id="ion-locationbar" [(ngmodel)]="searchquerytime" (ionclear)="oncanceltime($event)" (ioninput)="oninputtime($event)"             (click)="presentfiltertime()" placeholder="last online" debounce="1" [showcancelbutton]="true"></ion-searchbar>         </ion-col>         <ion-col class="col-cancel" *ngif="!isios">           <button ion-button *ngif="!isios && searchquerytime" (click)="oncanceltime($event)" color="primary" clear small>         <p class="small-text-search search-cancel">cancel</p>       </button>         </ion-col>       </ion-row>     </ion-item>    </expandable-header>    <ion-navbar color="primary">      <button ion-button menutoggle>       <ion-icon name="menu"></ion-icon>     </button>      <ion-title class="search-title-text">       market     </ion-title>      <div class="clear-all" *ngif="searchquerytext || searchquerylocation || searchquerysectors || searchqueryrating || searchquerytime"       (click)="clearfilters($event)">       <p class="clear-all-text {{isios ? 'clear-all-text-ios' : ''}}">clear all</p>       </div>    </ion-navbar> </ion-header>  <ion-content padding class="content-wanted" id="search-content" fullscreen #mycontent>   <ion-list>     <ion-item-sliding #slidingitem *ngfor="let item of mymodels">       <ion-item class="item-search-wanted" (click)="itemtapped($event, item, true)" (press)="openslide(slidingitem, item, $event)">

css

.ios, .md {     page-home {         ion-item {             width: 92%;             margin: 4%;             padding-left: 10px !important;             margin-bottom: 10px;             background-color: #fff;             opacity: 0.7;             font-size: 0.9em;             transition: 0.2s linear;         }      }  }  expandable-header .element.style {     min-height: 6px; }  expandable-header .label-md {     margin: -16px 2px -4px -18px; }  expandable-header .searchtext .label-md {     margin: -10px 2px -4px -18px; }  expandable-header .searchtext .label-ios {     margin: 25px 2px -4px -4px; }  expandable-header .label-ios {     margin: -4px 2px -4px -4px; }  .toolbar-ios ion-title {     padding: 13px 90px 3px !important; }  .toolbar-ios {     padding-top: 15px; }  expandable-header .search-item {     opacity: 0.7 !important; }  expandable-header .item-md.item-block .item-inner {     padding-right: 8px;     border-bottom: 0px solid #dedede; }  expandable-header .searchbar-md {     width: 213%; }  expandable-header .button-clear-md {     float: right;     padding-top: 18px; }  expandable-header .searchbar-clear-icon {      display: none !important;  }  .clear-all-text {     color: #fff;     font-size: 85%;     padding-right: 20px;     white-space: nowrap; }  .clear-all-text-ios {     padding-left: 250px; }

expandable-header.ts

import { component, input, elementref, renderer } '@angular/core';  @component({     selector: 'expandable-header',     templateurl: 'expandable-header.html' }) export class expandableheader {     @input('scrollarea') scrollarea: any;     @input('headerheight') headerheight: number;     newheaderheight: any;     constructor(public element: elementref, public renderer: renderer) {     }      ngoninit() {         if (!this.scrollarea._scroll.enabled) {             this.scrollarea.enablescrolllistener();         }         this.renderer.setelementstyle(this.element.nativeelement, 'height', this.headerheight + 'px');         this.scrollarea.ionscroll.subscribe((ev) => {             this.resizeheader(ev);         });     }      resizeheader(ev) {         ev.domwrite(() => {             this.newheaderheight = this.headerheight - ev.scrolltop;             if (this.newheaderheight < 0) {                 this.newheaderheight = 0;             }             this.renderer.setelementstyle(this.element.nativeelement, 'height', this.newheaderheight + 'px');             (let headerelement of this.element.nativeelement.children) {                 let totalheight = headerelement.offsettop + headerelement.clientheight;                 if (totalheight > this.newheaderheight && !headerelement.ishidden) {                     headerelement.ishidden = true;                     this.renderer.setelementstyle(headerelement, 'opacity', '0');                 } else if (totalheight <= this.newheaderheight && headerelement.ishidden) {                     headerelement.ishidden = false;                     this.renderer.setelementstyle(headerelement, 'opacity', '0.7');                 }             }         });     } }


Comments

Post a Comment

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

consider, toml node module can use: // toml.d.ts declare module toml { export function parse(value:string):any; } declare module "toml" { export = toml; } then: /// <reference path="../../../../../defs/toml/toml.d.ts"/> import toml = require('toml'); toml.parse(...); however, node module export single function, such 'glob' ( https://github.com/isaacs/node-glob ). the node usage of module be: var glob = require("glob") glob("*.js", {}, callback(err, files) { ... }); you'd naively expect this: // glob.d.ts declare function globs(paths:string, options:any, callback:{(err:any, files:string[]):void; ...but because typescripts 'import' semantics bit strange, seems can use 'import .. = require()' statement alias modules . trying call: /// <reference path="../../../../../defs/glob/glob.d.ts"/> import blog = require('glob'); results in: error ts2072: mod...
Read more

openid - Okta: Failed to get authorization code through API call -

i'm integrating okta own idp server using okta's api. i'm implementing authorization code flow following steps below: in own server, use /api/v1/authn endpoint sessiontoken. use sessiontoken obtain authorization calling endpoint: /oauth2/v1/authorize?client_id=" + clientid + "&sessiontoken=" + sessiontoken + "&response_type=code&response_mode=query&scope=openid&redirect_uri=" + redirecturl + "&state=evanyang&nonce=" it's supposed return response status code 302 , location header containing redirect url code value. however, keep getting response status code 200 , without location header, html body saying "you using unsupported browser." , "javascript disabled on browser." according api documentation: http://developer.okta.com/docs/api/resources/oidc.html#authentication-request , sessiontoken parameter sufficient this: an okta one-time sessiontoken. allows api-based ...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more