├── .editorconfig ├── .gitignore ├── .io-config.json ├── .sourcemaps ├── main.css.map └── main.js.map ├── README.md ├── config.xml ├── ionic.config.json ├── package-lock.json ├── package.json ├── resources ├── android │ ├── icon │ │ ├── drawable-hdpi-icon.png │ │ ├── drawable-ldpi-icon.png │ │ ├── drawable-mdpi-icon.png │ │ ├── drawable-xhdpi-icon.png │ │ ├── drawable-xxhdpi-icon.png │ │ └── drawable-xxxhdpi-icon.png │ └── splash │ │ ├── drawable-land-hdpi-screen.png │ │ ├── drawable-land-ldpi-screen.png │ │ ├── drawable-land-mdpi-screen.png │ │ ├── drawable-land-xhdpi-screen.png │ │ ├── drawable-land-xxhdpi-screen.png │ │ ├── drawable-land-xxxhdpi-screen.png │ │ ├── drawable-port-hdpi-screen.png │ │ ├── drawable-port-ldpi-screen.png │ │ ├── drawable-port-mdpi-screen.png │ │ ├── drawable-port-xhdpi-screen.png │ │ ├── drawable-port-xxhdpi-screen.png │ │ └── drawable-port-xxxhdpi-screen.png ├── gifs │ ├── android.gif │ └── ios.gif ├── icon.png ├── ios │ ├── icon │ │ ├── icon-40.png │ │ ├── icon-40@2x.png │ │ ├── icon-40@3x.png │ │ ├── icon-50.png │ │ ├── icon-50@2x.png │ │ ├── icon-60.png │ │ ├── icon-60@2x.png │ │ ├── icon-60@3x.png │ │ ├── icon-72.png │ │ ├── icon-72@2x.png │ │ ├── icon-76.png │ │ ├── icon-76@2x.png │ │ ├── icon-83.5@2x.png │ │ ├── icon-small.png │ │ ├── icon-small@2x.png │ │ ├── icon-small@3x.png │ │ ├── icon.png │ │ └── icon@2x.png │ └── splash │ │ ├── Default-568h@2x~iphone.png │ │ ├── Default-667h.png │ │ ├── Default-736h.png │ │ ├── Default-Landscape-736h.png │ │ ├── Default-Landscape@2x~ipad.png │ │ ├── Default-Landscape~ipad.png │ │ ├── Default-Portrait@2x~ipad.png │ │ ├── Default-Portrait~ipad.png │ │ ├── Default@2x~iphone.png │ │ └── Default~iphone.png └── splash.png ├── src ├── app │ ├── app.component.ts │ ├── app.html │ ├── app.module.ts │ ├── app.scss │ └── main.ts ├── assets │ ├── icon │ │ └── favicon.ico │ └── img │ │ └── ocean.jpg ├── components │ └── full-screen-content │ │ ├── fullscreen-content.component.html │ │ ├── fullscreen-content.component.scss │ │ ├── fullscreen-content.component.ts │ │ └── models │ │ └── full-screen-content-settings.ts ├── index.html ├── manifest.json ├── pages │ └── home │ │ ├── home.html │ │ ├── home.scss │ │ └── home.ts ├── service-worker.js └── theme │ └── variables.scss ├── tsconfig.json └── tslint.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs 2 | # editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 2 9 | 10 | # We recommend you to keep these unchanged 11 | end_of_line = lf 12 | charset = utf-8 13 | trim_trailing_whitespace = true 14 | insert_final_newline = true 15 | 16 | [*.md] 17 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | *.log 7 | *.tmp 8 | *.tmp.* 9 | log.txt 10 | *.sublime-project 11 | *.sublime-workspace 12 | .vscode/ 13 | npm-debug.log* 14 | 15 | .idea/ 16 | .sass-cache/ 17 | .tmp/ 18 | .versions/ 19 | coverage/ 20 | dist/ 21 | node_modules/ 22 | tmp/ 23 | temp/ 24 | hooks/ 25 | platforms/ 26 | plugins/ 27 | plugins/android.json 28 | plugins/ios.json 29 | www/ 30 | $RECYCLE.BIN/ 31 | 32 | .DS_Store 33 | Thumbs.db 34 | UserInterfaceState.xcuserstate 35 | -------------------------------------------------------------------------------- /.io-config.json: -------------------------------------------------------------------------------- 1 | {"app_id":"057918ab"} -------------------------------------------------------------------------------- /.sourcemaps/main.css.map: -------------------------------------------------------------------------------- 1 | null -------------------------------------------------------------------------------- /.sourcemaps/main.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../node_modules/@angular/core/esm5 lazy","../../src lazy","../../src/pages/home/home.ts","../../src/app/main.ts","../../src/app/app.module.ts","../../src/app/app.component.ts","../../src/components/full-screen-content/fullscreen-content.component.ts"],"names":[],"mappings":"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","file":"main.js","sourcesContent":["function webpackEmptyAsyncContext(req) {\n\t// Here Promise.resolve().then() is used instead of new Promise() to prevent\n\t// uncatched exception popping up in devtools\n\treturn Promise.resolve().then(function() {\n\t\tthrow new Error(\"Cannot find module '\" + req + \"'.\");\n\t});\n}\nwebpackEmptyAsyncContext.keys = function() { return []; };\nwebpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext;\nmodule.exports = webpackEmptyAsyncContext;\nwebpackEmptyAsyncContext.id = 109;\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/@angular/core/esm5 lazy\n// module id = 109\n// module chunks = 0","function webpackEmptyAsyncContext(req) {\n\t// Here Promise.resolve().then() is used instead of new Promise() to prevent\n\t// uncatched exception popping up in devtools\n\treturn Promise.resolve().then(function() {\n\t\tthrow new Error(\"Cannot find module '\" + req + \"'.\");\n\t});\n}\nwebpackEmptyAsyncContext.keys = function() { return []; };\nwebpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext;\nmodule.exports = webpackEmptyAsyncContext;\nwebpackEmptyAsyncContext.id = 150;\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src lazy\n// module id = 150\n// module chunks = 0","// Angular references\nimport { Component } from '@angular/core';\n\n// Fullscreen content model\nimport { FullScreenContentConfig } from '../../components/full-screen-content/fullscreen-content.component';\n\n@Component({\n\tselector: 'page-home',\n\ttemplateUrl: 'home.html'\n})\nexport class HomePage {\n\n\t// Config object\n\tpublic config: FullScreenContentConfig;\n\n\tconstructor() {\n\n\t\t// Custom Config\n\t\tthis.config = {\n\t\t\ttolerance: 1,\n\t\t\toffset : 250\n\t\t};\n\t}\n}\n\n\n// WEBPACK FOOTER //\n// ./src/pages/home/home.ts","import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app.module';\n\nplatformBrowserDynamic().bootstrapModule(AppModule);\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/main.ts","// Angular\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule, ErrorHandler } from '@angular/core';\n\n// Ionic\nimport { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';\n\n// Ionic Native\nimport { StatusBar } from '@ionic-native/status-bar';\nimport { SplashScreen } from '@ionic-native/splash-screen';\n\n// App\nimport { MyApp } from './app.component';\n\n// Custom directives\nimport { FullscreenContentComponent } from '../components/full-screen-content/fullscreen-content.component';\n\n// Pages\nimport { HomePage } from '../pages/home/home';\n\n@NgModule({\n\tdeclarations: [\n\t\tMyApp,\n\t\tHomePage,\n\t\tFullscreenContentComponent\n\t],\n\timports: [\n\t\tBrowserModule,\n\t\tIonicModule.forRoot(MyApp, {\n\t\t\tplatforms: {\n\t\t\t\tios: {\n\t\t\t\t\tstatusbarPadding: true\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t],\n\tbootstrap: [IonicApp],\n\tentryComponents: [\n\t\tMyApp,\n\t\tHomePage\n\t],\n\tproviders: [\n\t\tStatusBar,\n\t\tSplashScreen,\n\t\t{ provide: ErrorHandler, useClass: IonicErrorHandler }\n\t]\n})\nexport class AppModule { }\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/app.module.ts","// Angular references\nimport { Component } from '@angular/core';\nimport { Platform, Config } from 'ionic-angular';\n\n// Ionic references\nimport { SplashScreen } from '@ionic-native/splash-screen';\nimport { StatusBar } from '@ionic-native/status-bar';\n\n// Pages\nimport { HomePage } from '../pages/home/home';\n\n@Component({\n\ttemplateUrl: 'app.html'\n})\nexport class MyApp {\n\trootPage = HomePage;\n\n\tconstructor(platform: Platform,\n\t\t\t\tstatusBar: StatusBar,\n\t\t\t\tsplashScreen: SplashScreen) {\n\t\tplatform.ready().then(() => {\n\t\t\tstatusBar.styleLightContent();\n\t\t\tsplashScreen.hide();\n\t\t});\n\t}\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/app/app.component.ts","// Angular references\nimport { Component, ElementRef, Input, Renderer, ContentChild } from '@angular/core';\n\n// Ionic references\nimport { Content, Platform } from 'ionic-angular'\n\n// Configuration interface\nexport class FullScreenContentConfig {\n public tolerance?: number = 1;\n public offset?: number = 250;\n\n // Elements selectors\n public headerSelector?: string = 'header';\n public scrollElementSelector?: string = 'scroll-content';\n\n // Css classes\n public headerVisibleClassName?: string = 'header--visible';\n public headerHiddenClassName?: string = 'header--hidden';\n}\n\n// DirectionEnum\nenum DirectionEnum {\n Up,\n Down\n}\n\n@Component({\n selector: 'fullscreen-content',\n templateUrl: 'fullscreen-content.component.html'\n})\nexport class FullscreenContentComponent {\n\n // Content reference\n @ContentChild(Content) content: Content;\n\n // Component configuration\n @Input() config: FullScreenContentConfig;\n\n // Main HTML elements\n private headerElement: any;\n private scrollElement: any;\n\n private lastPositionY: number;\n\n constructor(private elementRef: ElementRef,\n private renderer: Renderer,\n private platform: Platform) { }\n\n ngOnInit() {\n\n // Initialize the component configuration\n this.extendDefaultConfig();\n\n // Set the fullscreen attribute to true in order to show the content\n // in the space where the header was when hidding it\n this.content.fullscreen = true;\n\n // Subscribe to the scroll event of the ion-content element\n this.content.ionScroll.subscribe((evt) => { this.onContentScroll(evt); });\n\n // Get the header of the page\n this.headerElement = document.getElementsByClassName(this.config.headerSelector)[0];\n\n // Get the content element\n this.scrollElement = this.elementRef.nativeElement.getElementsByClassName(this.config.scrollElementSelector)[0];\n\n // Initialize the starting position\n this.lastPositionY = 0;\n }\n\n ngOnDestroy() {\n this.content.ionScroll.unsubscribe();\n }\n\n onContentScroll(ev) {\n ev.domWrite(() => {\n this.updateHeaderState(ev);\n });\n }\n\n // Extend the default config with the custom values sent\n private extendDefaultConfig(): void {\n let defaultConfig = new FullScreenContentConfig();\n for (var key in this.config) {\n defaultConfig[key] = this.config[key];\n }\n this.config = defaultConfig;\n }\n\n // Check if the tolerance has been exceeded\n private toleranceExceeded(currentPositionY: number): boolean {\n return Math.abs(currentPositionY - this.lastPositionY) >= this.config.tolerance;\n }\n\n // Get the physical height of the scroll element\n private getScrollerPhysicalHeight(): number {\n return Math.max(\n this.scrollElement.offsetHeight,\n this.scrollElement.clientHeight);\n }\n\n // Get the height of the scroll element\n private getScrollerHeight(): number {\n return Math.max(\n this.scrollElement.scrollHeight,\n this.scrollElement.offsetHeight,\n this.scrollElement.clientHeight);\n }\n\n // Show the header\n private showHeader(): void {\n let classList = this.headerElement.classList;\n if (!classList.contains(this.config.headerVisibleClassName)) {\n classList.remove(this.config.headerHiddenClassName);\n classList.add(this.config.headerVisibleClassName);\n }\n }\n\n // Hide the header\n private hideHeader(): void {\n let classList = this.headerElement.classList;\n if (classList.contains(this.config.headerVisibleClassName) || !classList.contains(this.config.headerHiddenClassName)) {\n classList.add(this.config.headerHiddenClassName);\n classList.remove(this.config.headerVisibleClassName);\n }\n }\n\n // Returns true if the current scroll position is out of document boundaries\n private isOutOfBounds(currentPositionY: number): boolean {\n return currentPositionY < 0\n || currentPositionY + this.getScrollerPhysicalHeight() > this.getScrollerHeight();\n }\n\n // Shor or hide the header according to the scrolling status\n private updateHeaderState(ev: any) {\n let currentPositionY = ev.scrollTop,\n toleranceExceeded = this.toleranceExceeded(currentPositionY),\n insideOffset = currentPositionY <= this.config.offset,\n scrollDirection = currentPositionY > this.lastPositionY ? DirectionEnum.Down : DirectionEnum.Up;\n\n if (this.isOutOfBounds(currentPositionY)) {\n return;\n }\n\n if (scrollDirection === DirectionEnum.Down && !insideOffset && toleranceExceeded) {\n this.hideHeader();\n } else if (scrollDirection === DirectionEnum.Up && (insideOffset || toleranceExceeded)) {\n this.showHeader();\n }\n\n // Update the last position\n this.lastPositionY = currentPositionY;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/full-screen-content/fullscreen-content.component.ts"],"sourceRoot":""} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fullscreen Content demo [![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/) 2 | 3 | Ionic 3 demo of how to hide the header when scrolling down and show it again when scrolling up. 4 | 5 |

6 | ios 7 | android 8 |

9 | 10 | # Table of contents 11 | 12 | * [Ionic info](#ionic-info) 13 | * [Running the demo](#running-the-demo) 14 | * [Using the component in your projects](#using-the-component-in-your-projects) 15 | * [Settings](#settings) 16 | * [Changelog](#changelog) 17 | * [Contribution](#contribution) 18 | * [Support this project](#support-this-project) 19 | 20 | # Ionic info 21 | 22 | ``` 23 | Ionic: 24 | 25 | ionic (Ionic CLI) : 4.0.1 (/usr/local/lib/node_modules/ionic) 26 | Ionic Framework : ionic-angular 3.9.2 27 | @ionic/app-scripts : 3.1.11 28 | 29 | Cordova: 30 | 31 | cordova (Cordova CLI) : 7.1.0 32 | Cordova Platforms : android 6.3.0, ios 4.5.4 33 | 34 | System: 35 | 36 | Android SDK Tools : 26.1.1 37 | ios-deploy : 1.9.2 38 | ios-sim : 5.1.0 39 | NodeJS : v8.11.1 (/usr/local/bin/node) 40 | npm : 5.10.0 41 | OS : macOS High Sierra 42 | Xcode : Xcode 9.4.1 Build version 9F2000 43 | ``` 44 | 45 | ## Running the demo 46 | 47 | Inside of the project folder, run `npm install` and then to run the demo in the browser `ionic serve [-t android/ios]` 48 | 49 | ## Using the component in your projects 50 | 51 | Just copy the `full-screen-content` folder (inculding the html, ts and scss files) in your project, and include the `FullscreenContentComponent` in the `declarations` array from your `@NgModule`. 52 | 53 | Then in your view, just include the header and the content inside the `` tags and add the `#target` template variable to the header 54 | 55 | ``` 56 | 57 | 58 | 59 | ... 60 | 61 | 62 | 63 | ... 64 | 65 | 66 | 67 | ``` 68 | 69 | **Important** 70 | 71 | When using the component on iOS, please make sure to: 72 | 73 | 1) Install the [Web View plugin for Cordova that is specialized for Ionic apps](https://github.com/ionic-team/cordova-plugin-ionic-webview#installation-instructions). 74 | 2) Configure the `StatusBar` cordova plugin setting the `overlaysWebView` to be `false`, and the `backgroundColorByHexString` to be the same color of your header. For example if your header's color is `#387ef5` (Ionic's default primary color): 75 | 76 | ``` 77 | // Ionic Native 78 | import { StatusBar } from '@ionic-native/status-bar'; 79 | 80 | // Pages 81 | import { HomePage } from '../pages/home/home'; 82 | 83 | @Component({ 84 | templateUrl: 'app.html' 85 | }) 86 | export class MyApp { 87 | 88 | // ... 89 | 90 | constructor(platform: Platform, statusBar: StatusBar) { 91 | 92 | platform.ready().then(() => { 93 | 94 | statusBar.styleLightContent(); 95 | 96 | if (platform.is('ios')) { 97 | statusBar.overlaysWebView(false); // <--- Here! 98 | statusBar.backgroundColorByHexString('#387ef5'); // <--- And here! 99 | } 100 | 101 | // ... 102 | }); 103 | } 104 | } 105 | ``` 106 | 107 | ## Settings 108 | 109 | The component also defines the `FullScreenContentSettings` interface, to customize the behaviour of the component. 110 | 111 | ``` 112 | export interface FullScreenContentSettings { 113 | tolerance?: number; 114 | offset?: number; 115 | headerVisibleClassName?: string; 116 | headerHiddenClassName?: string; 117 | } 118 | ``` 119 | 120 | The settings should be sent to the component using the `settings` property: 121 | 122 | ``` 123 | // Fullscreen content settings 124 | import { FullScreenContentSettings } from '../path/to/component/models/full-screen-content-settings'; 125 | 126 | @Component({ 127 | selector: 'page-home', 128 | templateUrl: 'home.html' 129 | }) 130 | export class HomePage { 131 | 132 | public customSettings: FullScreenContentSettings = { 133 | tolerance: 10, 134 | offset: 250 135 | }; 136 | 137 | // ... 138 | } 139 | ``` 140 | 141 | And in the view: 142 | 143 | ``` 144 | 145 | ... 146 | 147 | ``` 148 | 149 | You can change the default **tolerance** () and **offset** () and the class names used when showing (**headerVisibleClassName**) and hidding (**headerHiddenClassName**) the header. 150 | 151 | Param | Type | Description | Default value 152 | --- | --- | ---| --- 153 | `tolerance` | `number` | **Optional**. Scroll tolerance in `px` before state changes | `10` 154 | `offset` | `number` | **Optional**. Vertical offset in `px` before element is first unpinned | `250` 155 | `headerVisibleClassName` | `string` | **Optional**. Name of the class used to show the header | `header--visible` 156 | `headerHiddenClassName` | `string` | **Optional**. Name of the class used to hide the header | `header--hidden` 157 | 158 | # Changelog 159 | 160 | * **04/08/2018** Updated dependencies to use the latest Ionic 3 version. Improved internal logic to avoid accessing the DOM directly 161 | 162 | # Contribution 163 | - Having an **issue** or looking for **support**? [Open an issue](https://github.com/sebaferreras/Ionic3-FullscreenContent/issues/new) and I'll do my best to help you out. 164 | - Got a **new feature or a bug fix**? Fork the repo, make your changes, and submit a pull request. 165 | 166 | # Support this project 167 | If you find this project useful, please star the repo to let people know that it's reliable. Also, share it with friends and colleagues that might find this useful as well. Thank you! :) -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | FullScreenContent 4 | This demo shows how to hide the header when scrolling down and show it again when scrolling up. 5 | Sebastian Ferreras 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fullscreencontent", 3 | "integrations": { 4 | "cordova": {} 5 | }, 6 | "v2": true, 7 | "typescript": true, 8 | "pro_id": "057918ab" 9 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fullscreen-content", 3 | "author": "Sebastian Ferreras", 4 | "homepage": "http://www.flioh.com/", 5 | "private": true, 6 | "scripts": { 7 | "clean": "ionic-app-scripts clean", 8 | "build": "ionic-app-scripts build", 9 | "ionic:build": "ionic-app-scripts build", 10 | "ionic:serve": "ionic-app-scripts serve" 11 | }, 12 | "dependencies": { 13 | "@angular/common": "5.0.0", 14 | "@angular/compiler": "5.0.0", 15 | "@angular/compiler-cli": "5.0.0", 16 | "@angular/core": "5.0.0", 17 | "@angular/forms": "5.0.0", 18 | "@angular/http": "5.0.0", 19 | "@angular/platform-browser": "5.0.0", 20 | "@angular/platform-browser-dynamic": "5.0.0", 21 | "@ionic-native/core": "3.10.2", 22 | "@ionic-native/splash-screen": "3.10.2", 23 | "@ionic-native/status-bar": "3.10.2", 24 | "@ionic/storage": "2.1.3", 25 | "cordova-android": "6.3.0", 26 | "cordova-ios": "4.5.4", 27 | "cordova-plugin-device": "1.1.4", 28 | "cordova-plugin-ionic-webview": "^1.2.1", 29 | "cordova-plugin-splashscreen": "~4.0.1", 30 | "cordova-plugin-statusbar": "^2.4.2", 31 | "cordova-plugin-whitelist": "1.3.1", 32 | "ionic-angular": "3.9.2", 33 | "ionic-plugin-keyboard": "~2.2.1", 34 | "ionicons": "3.0.0", 35 | "rxjs": "5.5.2", 36 | "sw-toolbox": "3.6.0", 37 | "zone.js": "0.8.18" 38 | }, 39 | "devDependencies": { 40 | "@ionic/app-scripts": "^3.1.11", 41 | "typescript": "2.4.2" 42 | }, 43 | "cordovaPlugins": [ 44 | "cordova-plugin-whitelist", 45 | "cordova-plugin-console", 46 | "cordova-plugin-statusbar", 47 | "cordova-plugin-device", 48 | "cordova-plugin-splashscreen", 49 | "ionic-plugin-keyboard" 50 | ], 51 | "cordovaPlatforms": [ 52 | "ios", 53 | { 54 | "platform": "ios", 55 | "version": "", 56 | "locator": "ios" 57 | } 58 | ], 59 | "description": "Ionic 3 demo of how to hide the header when scrolling down and show it again when scrolling up.", 60 | "cordova": { 61 | "platforms": [ 62 | "android", 63 | "ios" 64 | ], 65 | "plugins": { 66 | "ionic-plugin-keyboard": {}, 67 | "cordova-plugin-whitelist": {}, 68 | "cordova-plugin-device": {}, 69 | "cordova-plugin-splashscreen": {}, 70 | "cordova-plugin-ionic-webview": {}, 71 | "cordova-plugin-statusbar": {} 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /resources/android/icon/drawable-hdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/icon/drawable-hdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-ldpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/icon/drawable-ldpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-mdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/icon/drawable-mdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/icon/drawable-xhdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xxhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/icon/drawable-xxhdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xxxhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/icon/drawable-xxxhdpi-icon.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-hdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/splash/drawable-land-hdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-ldpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/splash/drawable-land-ldpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-mdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/splash/drawable-land-mdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/splash/drawable-land-xhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/splash/drawable-land-xxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xxxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/splash/drawable-land-xxxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-hdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/splash/drawable-port-hdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-ldpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/splash/drawable-port-ldpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-mdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/splash/drawable-port-mdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/splash/drawable-port-xhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/splash/drawable-port-xxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xxxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/android/splash/drawable-port-xxxhdpi-screen.png -------------------------------------------------------------------------------- /resources/gifs/android.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/gifs/android.gif -------------------------------------------------------------------------------- /resources/gifs/ios.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/gifs/ios.gif -------------------------------------------------------------------------------- /resources/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/icon.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-40.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-40@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-40@3x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-50.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-50@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-50@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-60.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-60@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-60@3x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-72.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-72@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-72@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-76.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-76@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-83.5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-83.5@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-small.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-small@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-small@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-small@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon-small@3x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon.png -------------------------------------------------------------------------------- /resources/ios/icon/icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/icon/icon@2x.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-568h@2x~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/splash/Default-568h@2x~iphone.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-667h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/splash/Default-667h.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-736h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/splash/Default-736h.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Landscape-736h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/splash/Default-Landscape-736h.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Landscape@2x~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/splash/Default-Landscape@2x~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Landscape~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/splash/Default-Landscape~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Portrait@2x~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/splash/Default-Portrait@2x~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Portrait~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/splash/Default-Portrait~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default@2x~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/splash/Default@2x~iphone.png -------------------------------------------------------------------------------- /resources/ios/splash/Default~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/ios/splash/Default~iphone.png -------------------------------------------------------------------------------- /resources/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/resources/splash.png -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | // Angular 2 | import { Component } from '@angular/core'; 3 | 4 | // Ionic 5 | import { Platform } from 'ionic-angular'; 6 | 7 | // Ionic Native 8 | import { StatusBar } from '@ionic-native/status-bar'; 9 | import { SplashScreen } from '@ionic-native/splash-screen'; 10 | 11 | // Pages 12 | import { HomePage } from '../pages/home/home'; 13 | 14 | @Component({ 15 | templateUrl: 'app.html' 16 | }) 17 | export class MyApp { 18 | rootPage = HomePage; 19 | 20 | constructor(platform: Platform, 21 | statusBar: StatusBar, 22 | splashScreen: SplashScreen) { 23 | platform.ready().then(() => { 24 | statusBar.styleLightContent(); 25 | 26 | if (platform.is('ios')) { 27 | statusBar.overlaysWebView(false); 28 | statusBar.backgroundColorByHexString('#387ef5'); 29 | } 30 | 31 | splashScreen.hide(); 32 | }); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/app/app.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | // Angular 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { NgModule, ErrorHandler } from '@angular/core'; 4 | 5 | // Ionic 6 | import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 7 | 8 | // Ionic Native 9 | import { StatusBar } from '@ionic-native/status-bar'; 10 | import { SplashScreen } from '@ionic-native/splash-screen'; 11 | 12 | // App 13 | import { MyApp } from './app.component'; 14 | 15 | // Custom directives 16 | import { FullscreenContentComponent } from '../components/full-screen-content/fullscreen-content.component'; 17 | 18 | // Pages 19 | import { HomePage } from '../pages/home/home'; 20 | 21 | @NgModule({ 22 | declarations: [ 23 | MyApp, 24 | HomePage, 25 | FullscreenContentComponent 26 | ], 27 | imports: [ 28 | BrowserModule, 29 | IonicModule.forRoot(MyApp) 30 | ], 31 | bootstrap: [IonicApp], 32 | entryComponents: [ 33 | MyApp, 34 | HomePage 35 | ], 36 | providers: [ 37 | StatusBar, 38 | SplashScreen, 39 | { provide: ErrorHandler, useClass: IonicErrorHandler } 40 | ] 41 | }) 42 | export class AppModule { } 43 | -------------------------------------------------------------------------------- /src/app/app.scss: -------------------------------------------------------------------------------- 1 | hr { 2 | height: 1px !important; 3 | } -------------------------------------------------------------------------------- /src/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule); 6 | -------------------------------------------------------------------------------- /src/assets/icon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/src/assets/icon/favicon.ico -------------------------------------------------------------------------------- /src/assets/img/ocean.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebaferreras/Ionic3-FullscreenContent/6cc403f179d920274b0fc5097467bb088ff1d2d0/src/assets/img/ocean.jpg -------------------------------------------------------------------------------- /src/components/full-screen-content/fullscreen-content.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/full-screen-content/fullscreen-content.component.scss: -------------------------------------------------------------------------------- 1 | fullscreen-content { 2 | .header { 3 | will-change: transform; 4 | transition: transform 300ms cubic-bezier(0.36,0.66,0.04,1); 5 | } 6 | .header--visible { 7 | transform: translateY(0%); 8 | } 9 | .header--hidden { 10 | transform: translateY(-100%); 11 | } 12 | } -------------------------------------------------------------------------------- /src/components/full-screen-content/fullscreen-content.component.ts: -------------------------------------------------------------------------------- 1 | // Angular 2 | import { Component, ElementRef, Input, ContentChild, Renderer2 } from '@angular/core'; 3 | 4 | // Ionic 5 | import { Content } from 'ionic-angular' 6 | 7 | // Models 8 | import { FullScreenContentSettings } from './models/full-screen-content-settings'; 9 | 10 | // Enums 11 | enum Direction { Up, Down }; 12 | 13 | @Component({ 14 | selector: 'fullscreen-content', 15 | templateUrl: 'fullscreen-content.component.html' 16 | }) 17 | export class FullscreenContentComponent { 18 | 19 | @ContentChild(Content) content: Content; 20 | @ContentChild('target') target: ElementRef; 21 | 22 | private scrollElement: any; 23 | private lastPositionY: number; 24 | private targetIsVisible: boolean = true; 25 | private componentSettings: FullScreenContentSettings; 26 | 27 | @Input('settings') 28 | set settings(value: FullScreenContentSettings) { 29 | if (value) { 30 | this.componentSettings = value; 31 | this.mergeSettings(); 32 | } 33 | } 34 | 35 | constructor(private renderer: Renderer2) { } 36 | 37 | ngAfterViewInit() { 38 | 39 | if (!this.target) { 40 | this.printErrorInConsole(`Missing #target template variable in the HTML element that should be hidden when scrolling.`); 41 | return; 42 | } 43 | 44 | if (!this.content) { 45 | this.printErrorInConsole(`Missing ion-content element.`); 46 | return; 47 | } 48 | 49 | // Set the fullscreen attribute to true in order to show the content 50 | // in the space where the header was when hidding it 51 | this.content.fullscreen = true; 52 | 53 | // Subscribe to the scroll event of the ion-content element 54 | this.content.ionScroll.subscribe((evt) => { 55 | this.onContentScroll(evt); 56 | }); 57 | 58 | // Get the content element. This is a hidden method from Ionic 59 | // but it's still better than accessing the DOM directly 60 | this.scrollElement = this.content.getScrollElement() 61 | 62 | // Initialize the starting position 63 | this.lastPositionY = 0; 64 | } 65 | 66 | ngOnDestroy() { 67 | this.content.ionScroll.unsubscribe(); 68 | } 69 | 70 | onContentScroll(ev) { 71 | ev.domWrite(() => { 72 | this.updateHeaderState(ev); 73 | }); 74 | } 75 | 76 | // Check if the tolerance has been exceeded 77 | private toleranceExceeded(currentPositionY: number): boolean { 78 | return Math.abs(currentPositionY - this.lastPositionY) >= this.componentSettings.tolerance; 79 | } 80 | 81 | // Get the physical height of the scroll element 82 | private getScrollerPhysicalHeight(): number { 83 | return Math.max(this.scrollElement.offsetHeight, this.scrollElement.clientHeight); 84 | } 85 | 86 | // Get the height of the scroll element 87 | private getScrollerHeight(): number { 88 | return Math.max(this.scrollElement.scrollHeight, this.scrollElement.offsetHeight, this.scrollElement.clientHeight); 89 | } 90 | 91 | // Show the header 92 | private showHeader(): void { 93 | if (this.targetIsVisible) return; 94 | 95 | this.targetIsVisible = true; 96 | this.renderer.removeClass(this.target.nativeElement, this.componentSettings.headerHiddenClassName); 97 | this.renderer.addClass(this.target.nativeElement, this.componentSettings.headerVisibleClassName); 98 | } 99 | 100 | // Hide the header 101 | private hideHeader(): void { 102 | if (!this.targetIsVisible) return; 103 | 104 | this.targetIsVisible = false; 105 | this.renderer.removeClass(this.target.nativeElement, this.componentSettings.headerVisibleClassName); 106 | this.renderer.addClass(this.target.nativeElement, this.componentSettings.headerHiddenClassName); 107 | } 108 | 109 | // Returns true if the current scroll position is out of document boundaries 110 | private isOutOfBounds(currentPositionY: number): boolean { 111 | return currentPositionY < 0 || currentPositionY + this.getScrollerPhysicalHeight() > this.getScrollerHeight(); 112 | } 113 | 114 | // Shor or hide the header according to the scrolling status 115 | private updateHeaderState(ev: any) { 116 | const currentPositionY = ev.scrollTop, 117 | toleranceExceeded = this.toleranceExceeded(currentPositionY), 118 | insideOffset = currentPositionY <= this.componentSettings.offset, 119 | scrollDirection = currentPositionY > this.lastPositionY ? Direction.Down : Direction.Up; 120 | 121 | if (this.isOutOfBounds(currentPositionY)) { 122 | return; 123 | } 124 | 125 | if (scrollDirection === Direction.Down && !insideOffset && toleranceExceeded) { 126 | this.hideHeader(); 127 | } else if (scrollDirection === Direction.Up && (insideOffset || toleranceExceeded)) { 128 | this.showHeader(); 129 | } 130 | 131 | // Update the last position 132 | this.lastPositionY = currentPositionY; 133 | } 134 | 135 | // Merge the settings received with the default settings 136 | private mergeSettings(): void { 137 | const defaultSettings: FullScreenContentSettings = { 138 | tolerance: 10, 139 | offset: 250, 140 | headerVisibleClassName: 'header--visible', 141 | headerHiddenClassName: 'header--hidden' 142 | }; 143 | 144 | if (!this.componentSettings) { 145 | // Use the default values 146 | this.componentSettings = defaultSettings; 147 | return; 148 | } 149 | 150 | this.componentSettings.tolerance = this.isDefinedAndPositive(this.componentSettings.tolerance) ? this.componentSettings.tolerance : defaultSettings.tolerance; 151 | this.componentSettings.offset = this.isDefinedAndPositive(this.componentSettings.offset) ? this.componentSettings.offset : defaultSettings.offset; 152 | this.componentSettings.headerHiddenClassName = this.isDefined(this.componentSettings.headerHiddenClassName) ? this.componentSettings.headerHiddenClassName : defaultSettings.headerHiddenClassName; 153 | this.componentSettings.headerVisibleClassName = this.isDefined(this.componentSettings.headerVisibleClassName) ? this.componentSettings.headerVisibleClassName : defaultSettings.headerVisibleClassName; 154 | } 155 | 156 | private isDefined(property: any): boolean { 157 | return property !== null && property !== undefined; 158 | } 159 | 160 | private isDefinedAndPositive(property: any): boolean { 161 | return this.isDefined(property) && !isNaN(property) && property > 0; 162 | } 163 | 164 | private printErrorInConsole(errorMessage: string): void { 165 | console.error(`[FullScreenContent]: ${errorMessage}`); 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /src/components/full-screen-content/models/full-screen-content-settings.ts: -------------------------------------------------------------------------------- 1 | // FullScreenContentSettings interface 2 | export interface FullScreenContentSettings { 3 | tolerance?: number; 4 | offset?: number; 5 | headerVisibleClassName?: string; 6 | headerHiddenClassName?: string; 7 | } -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ionic App 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Ionic", 3 | "short_name": "Ionic", 4 | "start_url": "index.html", 5 | "display": "standalone", 6 | "icons": [{ 7 | "src": "assets/imgs/logo.png", 8 | "sizes": "512x512", 9 | "type": "image/png" 10 | }], 11 | "background_color": "#4e8ef7", 12 | "theme_color": "#4e8ef7" 13 | } -------------------------------------------------------------------------------- /src/pages/home/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | HomePage 12 | 13 | 14 | 15 | 16 | 17 | ocean image 18 | 19 |
20 |

Lorem ipsum dolor sit

21 |

22 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 23 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 24 |

25 |

26 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 27 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 28 |

29 |

30 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 31 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 32 |

33 |

34 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 35 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 36 |

37 | 38 |
39 | 40 |

Sed ut perspiciatis

41 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque 42 | ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem 43 | quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi 44 | nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non 45 | numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

46 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque 47 | ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem 48 | quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi 49 | nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non 50 | numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

51 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque 52 | ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem 53 | quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi 54 | nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non 55 | numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

56 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque 57 | ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem 58 | quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi 59 | nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non 60 | numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

61 | 62 |
63 | 64 |

Ut enim ad minima

65 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 66 | consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel 67 | illum qui dolorem eum fugiat quo voluptas nulla pariatur?

68 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 69 | consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel 70 | illum qui dolorem eum fugiat quo voluptas nulla pariatur?

71 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 72 | consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel 73 | illum qui dolorem eum fugiat quo voluptas nulla pariatur?

74 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 75 | consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel 76 | illum qui dolorem eum fugiat quo voluptas nulla pariatur?

77 |
78 | 79 | 80 | -------------------------------------------------------------------------------- /src/pages/home/home.scss: -------------------------------------------------------------------------------- 1 | page-home { 2 | 3 | img { 4 | height: 250px; 5 | } 6 | 7 | } -------------------------------------------------------------------------------- /src/pages/home/home.ts: -------------------------------------------------------------------------------- 1 | // Angular 2 | import { Component } from '@angular/core'; 3 | 4 | // Fullscreen content settings 5 | import { FullScreenContentSettings } from '../../components/full-screen-content/models/full-screen-content-settings'; 6 | 7 | @Component({ 8 | selector: 'page-home', 9 | templateUrl: 'home.html' 10 | }) 11 | export class HomePage { 12 | 13 | public customSettings: FullScreenContentSettings = { 14 | tolerance: 10, 15 | offset: 250 16 | }; 17 | 18 | constructor() { } 19 | } -------------------------------------------------------------------------------- /src/service-worker.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Check out https://googlechrome.github.io/sw-toolbox/docs/master/index.html for 3 | * more info on how to use sw-toolbox to custom configure your service worker. 4 | */ 5 | 6 | 7 | 'use strict'; 8 | importScripts('./build/sw-toolbox.js'); 9 | 10 | self.toolbox.options.cache = { 11 | name: 'ionic-cache' 12 | }; 13 | 14 | // pre-cache our key assets 15 | self.toolbox.precache( 16 | [ 17 | './build/main.js', 18 | './build/main.css', 19 | './build/polyfills.js', 20 | 'index.html', 21 | 'manifest.json' 22 | ] 23 | ); 24 | 25 | // dynamically cache any other local assets 26 | self.toolbox.router.any('/*', self.toolbox.cacheFirst); 27 | 28 | // for any other requests go to the network, cache, 29 | // and then only use that cached resource if your user goes offline 30 | self.toolbox.router.default = self.toolbox.networkFirst; -------------------------------------------------------------------------------- /src/theme/variables.scss: -------------------------------------------------------------------------------- 1 | // Ionic Variables and Theming. For more info, please see: 2 | // http://ionicframework.com/docs/v2/theming/ 3 | $font-path: "../assets/fonts"; 4 | 5 | @import "ionic.globals"; 6 | 7 | 8 | // Shared Variables 9 | // -------------------------------------------------- 10 | // To customize the look and feel of this app, you can override 11 | // the Sass variables found in Ionic's source scss files. 12 | // To view all the possible Ionic variables, see: 13 | // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/ 14 | 15 | 16 | 17 | 18 | // Named Color Variables 19 | // -------------------------------------------------- 20 | // Named colors makes it easy to reuse colors on various components. 21 | // It's highly recommended to change the default colors 22 | // to match your app's branding. Ionic uses a Sass map of 23 | // colors so you can add, rename and remove colors as needed. 24 | // The "primary" color is the only required color in the map. 25 | 26 | $colors: ( 27 | primary: #387ef5, 28 | secondary: #32db64, 29 | danger: #f53d3d, 30 | light: #f4f4f4, 31 | dark: #222 32 | ); 33 | 34 | 35 | // App iOS Variables 36 | // -------------------------------------------------- 37 | // iOS only Sass variables can go here 38 | 39 | 40 | 41 | 42 | // App Material Design Variables 43 | // -------------------------------------------------- 44 | // Material Design only Sass variables can go here 45 | 46 | 47 | 48 | 49 | // App Windows Variables 50 | // -------------------------------------------------- 51 | // Windows only Sass variables can go here 52 | 53 | 54 | 55 | 56 | // App Theme 57 | // -------------------------------------------------- 58 | // Ionic apps can have different themes applied, which can 59 | // then be future customized. This import comes last 60 | // so that the above variables are used and Ionic's 61 | // default are overridden. 62 | 63 | @import "ionic.theme.default"; 64 | 65 | 66 | // Ionicons 67 | // -------------------------------------------------- 68 | // The premium icon font for Ionic. For more info, please see: 69 | // http://ionicframework.com/docs/v2/ionicons/ 70 | 71 | @import "ionic.ionicons"; 72 | 73 | 74 | // Fonts 75 | // -------------------------------------------------- 76 | 77 | @import "roboto"; 78 | @import "noto-sans"; 79 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "declaration": false, 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "dom", 9 | "es2015" 10 | ], 11 | "module": "es2015", 12 | "moduleResolution": "node", 13 | "sourceMap": true, 14 | "target": "es5" 15 | }, 16 | "include": [ 17 | "src/**/*.ts" 18 | ], 19 | "exclude": [ 20 | "node_modules" 21 | ], 22 | "compileOnSave": false, 23 | "atom": { 24 | "rewriteTsconfig": false 25 | } 26 | } -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "no-duplicate-variable": true, 4 | "no-unused-variable": [ 5 | true 6 | ] 7 | }, 8 | "rulesDirectory": [ 9 | "node_modules/tslint-eslint-rules/dist/rules" 10 | ] 11 | } 12 | --------------------------------------------------------------------------------