heidji / ionic4-hidenav Goto Github PK

View Code? Open in Web Editor NEW

49.0 4.0 6.0 25 KB

Ionic 4 header animations

License: MIT License

TypeScript 98.32% JavaScript 1.68%

ionic4 autohide expandable header

ionic4-hidenav's People

Contributors

Stargazers

Watchers

Forkers

nditah dotmarn digontobd almothafar michayl-panasuk

ionic4-hidenav's Issues

Overlay layer Flickering on fast scrolling

Hi!, Overlay flickering on fast scrolling. Overlay layer shows with full opacity when scroll down fast

Solved replacing

overlay.style.setProperty('--opacity', this.data[name].opacityFactor / 10 * Math.min(e.detail.scrollTop / (this.data[name].shrinkexpandHeight / 2), 1));

for

if(this.data[name].opacityFactor / 10 * Math.min(e.detail.scrollTop / (this.data[name].shrinkexpandHeight / 2), 1) > 0){
                        
overlay.style.setProperty('--opacity', this.data[name].opacityFactor / 10 * Math.min(e.detail.scrollTop / (this.data[name].shrinkexpandHeight / 2), 1));
                    
}

in ionic4-hidenav.js

Moving Title appears in Top position even when Image is Exanded

Hi my friend,

Please can you tell me how can i set the position of "Moving Title" in the bottom of the hidenav (in expanded position), by default.
The "moving title" works fine when the hidenav is setted "init-expanded="false", but when i set "init-expanded="true", the "moving title" begin in top of the page and then when i scroll up, the "moving Title" disappears of the Top and appears in the bottom and start to moving up.

Thanks for your help.

Add blur support like the opacity-factor

It would be nice to blur the images, when they're scrolled to the top.

Error on view initialization:

Hi,

thanks for this component, it looks awesome and very promising.
Unfortunately, i run in an issue when using hidenav with super-tabs.
It was working in the beginning, then suddenly it stopped after building for android.
I was trying it using ionic serve, so maybe stopping and restarting it triggered this error. I don't know what could possibly break it.

Anyway, right now it appears as if hidenav is initialized before super-tabs is, resulting in this error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'tabChange' of undefined
TypeError: Cannot read property 'tabChange' of undefined
    at HidenavShTabscontentDirective.ngAfterViewInit (ionic4-hidenav.js:1455)
    at callProviderLifecycles (core.js:28206)
    at callElementProvidersLifecycles (core.js:28171)
    at callLifecycleHooksChildrenFirst (core.js:28153)
    at checkAndUpdateView (core.js:38386)
    at callViewAction (core.js:38742)
    at execComponentViewsAction (core.js:38670)
    at checkAndUpdateView (core.js:38383)
    at callWithDebugContext (core.js:39716)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:39299)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
    at invokeTask (zone-evergreen.js:1603)

This is the piece of code from hidenav throwing this error (ionic4-hidenav.js:1455):

class HidenavShTabscontentDirective {
    /**
     * @param {?} el
     * @param {?} contentElem
     * @param {?} globals
     */
    constructor(el, contentElem, globals) {
        this.el = el;
        this.contentElem = contentElem;
        this.globals = globals;
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        this.name = this.globals.requestName();
        this.contentElem.nativeElement.setAttribute('hidenav-sh-tabscontent', this.name);
        $('hidenav-stretchheader', $(this.contentElem.nativeElement).parents().get().find((/**
         * @param {?} itm
         * @return {?}
         */
        itm => $(itm).find('[hidenav-stretchheader]').length))).attr('hidenav-sh-header', this.name);
        if (this.name) {
            if (typeof this.globals.data[this.name] == 'undefined' || this.globals.data[this.name] == null)
                this.globals.data[this.name] = [];
            this.globals.data[this.name].tabscontent = this.el;
            this.globals.data[this.name].tabscontentElem = this.contentElem;
            this.globals.data[this.name].supertabs = this.supertabs;
            this.globals.initiate(this.name);
            this.supertabs.tabChange.subscribe((/** <==========THIS LINE
             * @param {?} e
             * @return {?}
             */
            e => {
                /** @type {?} */
                let i = e.detail.index;
                /** @type {?} */
                let tabs = this.contentElem.nativeElement.querySelectorAll('super-tab');
                /** @type {?} */
                let results = [];
                for (let tab of tabs) {
                    /** @type {?} */
                    let cont = tab.querySelector('ion-content');
                    if (cont.attributes['hidenav-sh-content'])
                        results.push(cont.attributes['hidenav-sh-content'].nodeValue);
                    else
                        results.push(null);
                }
                if (results[i] != null) {
                    this.globals.resetContent(results[i]);
                }
            }));
        }
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        delete this.globals.data[this.name].tabscontent;
    }
}

Debugging in chrome, this.supertabs is actually undefined.

The following is my component's HTML:

<hidenav-stretchheader header-height="90" init-expanded="true" no-border="true">
    <app-custom-header-component></app-custom-header-component>
</hidenav-stretchheader>

<ion-content hidenav-sh-tabscontent>
    <super-tabs [config]="SUPER_TABS_CONFIG">
        <super-tabs-toolbar [showIndicator]="false" slot="top" [scrollable]="true" [scrollablePadding]="false">
            <super-tab-button name="one">ONE</super-tab-button>
            <super-tab-button name="two">TWO</super-tab-button>

            <super-tab-button *ngIf="condition == 'U'" name="three">THREE</super-tab-button>
            <super-tab-button *ngIf="condition == 'U'" name="four">FOUR</super-tab-button>

            <super-tab-button *ngIf="condition == 'V'" name="five">FIVE</super-tab-button>
        </super-tabs-toolbar>
        <super-tabs-container>
            <super-tab>
                <ion-content hidenav-sh-content hidenav-tabspage>
                    <app-custom-component></app-custom-component>
                </ion-content>
            </super-tab>
            <super-tab>
                <ion-content hidenav-sh-content hidenav-tabspage>
                    <app-custom-component></app-custom-component>
                </ion-content>
            </super-tab>

            <super-tab *ngIf="condition == 'U'">
                <ion-content hidenav-sh-content hidenav-tabspage>
                    <app-custom-component></app-custom-component>
                </ion-content>
            </super-tab>
            <super-tab *ngIf="condition == 'U'">
                <ion-content hidenav-sh-content hidenav-tabspage>
                    <app-custom-component></app-custom-component>
                </ion-content>
            </super-tab>

            <super-tab *ngIf="condition == 'V'">
                <ion-content hidenav-sh-content hidenav-tabspage>
                    <app-custom-component></app-custom-component>
                </ion-content>
            </super-tab>

        </super-tabs-container>
    </super-tabs>
</ion-content>

And this is the super-tabs configuration:

private SUPER_TABS_CONFIG = {
    dragThreshold: 100,
    allowElementScroll: true,
    maxDragAngle: 40,
    sideMenuThreshold: 50,
    transitionDuration: 300,
    shortSwipeDuration: 300,
    debug: true,
    avoidElements: true,
    sideMenu: 'left'
  };

I installed super-tabs as a separate package, and I'm noticing that i see two super-tabs in my npm list :

+-- [email protected]
| +-- @ionic-super-tabs/[email protected] <---this one under hidenav
| | +-- @ionic-super-tabs/[email protected]
| | `-- [email protected] deduped
| +-- [email protected]
| `-- [email protected] deduped
...
+-- @ionic-super-tabs/[email protected] <---this one as a "standalone" package
| +-- @ionic-super-tabs/[email protected]
| `-- [email protected] deduped

I even tried using version 6.1.2, but the error persists.

Any suggestion? Am i missing something here?

Position absolute messes up navigation transitions

Hi, as in title, the fact that hidenav-streatchheader is postioned absolute messes up the transitions on ios for me. Example video: https://streamable.com/evgde7

Error in stretchable-header initialization breaks super-tabs repositioning

Hi,

sorry to bother again.
I encountered a couple errors at component initialization, that breaks the tabs repositioning while navigating them.
I'm using hidenav with supertabs and stretching header.
Strange thing is, only one of these errors is thrown per execution. Sometimes it's the first one, sometimes the second one. Looks like some sort of racing condition at initialization time.

The errors in console are these:

ERROR 1

ERROR TypeError: Cannot read property 'attributes' of null
    at SafeSubscriber._next (hidenav-sh-tabscontent.directive.ts:37)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at HTMLElement.handler (fromEvent.js:21)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17289)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)

ERROR 2

ERROR TypeError: Cannot read property 'preserveHeader' of undefined
    at HidenavShService.resetContent (hidenav-sh-service.service.ts:318)
    at SafeSubscriber._next (hidenav-sh-tabscontent.directive.ts:43)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at HTMLElement.handler (fromEvent.js:20)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)

We verified that something similar is happening on the example application too. Here is a gif to demonstrate the behaviour
[The gif's about 2MB so it may take a while to load]
Here is a gif to demonstrate the behaviour (2Mb)
(it happens after exiting and entering again the "stretch header/supertabs" session).

Feel free to ask for more details and tests if needed.

Thanks.

Implement Moving Title and Back Button

Hi,

Good Job @heidji.
Please, can you tell me how can i implement the "moving title", what is the structure in the #shrinkexpand Div.
I would like to implement it like the example gif (cat`s image) when you scroll up and the image shrinked with the text: "moving Title".

In the other hand, where may put ?

Please your help.
Sorry for my english.

Setting init-expanded to true from html is not working

<hidenav-stretchheader [hidenav-rel-content]="content">
<div #shrinkexpand header-height="45" init-expanded="true" opacity-factor="8" opacity-color="#37686e">

Setting init-expanded to true from html is not working.

Add support for iPhone X, XR, XS and XSMax

On iPhone X the header is moved in the safe area. This should be fixed with this:

var(--ion-safe-area-top, 0)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

Jobs

Jooble