├── .gitignore ├── .npmignore ├── LICENSE ├── Readme.md ├── android17.d.ts ├── demo ├── app │ ├── App_Resources │ │ ├── Android │ │ │ ├── AndroidManifest.xml │ │ │ ├── app.gradle │ │ │ ├── drawable-hdpi │ │ │ │ └── icon.png │ │ │ ├── drawable-ldpi │ │ │ │ └── icon.png │ │ │ ├── drawable-mdpi │ │ │ │ └── icon.png │ │ │ └── drawable-nodpi │ │ │ │ └── splashscreen.9.png │ │ └── iOS │ │ │ ├── Default-568h@2x.png │ │ │ ├── Default-667h@2x.png │ │ │ ├── Default-736h@3x.png │ │ │ ├── Default-Landscape-568h@2x.png │ │ │ ├── Default-Landscape-667h@2x.png │ │ │ ├── Default-Landscape.png │ │ │ ├── Default-Landscape@2x.png │ │ │ ├── Default-Landscape@3x.png │ │ │ ├── Default-Portrait.png │ │ │ ├── Default-Portrait@2x.png │ │ │ ├── Default.png │ │ │ ├── Default@2x.png │ │ │ ├── Icon-Small-50.png │ │ │ ├── Icon-Small-50@2x.png │ │ │ ├── Icon-Small.png │ │ │ ├── Icon-Small@2x.png │ │ │ ├── Info.plist │ │ │ ├── icon-40.png │ │ │ ├── icon-40@2x.png │ │ │ ├── icon-60.png │ │ │ ├── icon-60@2x.png │ │ │ ├── icon-72.png │ │ │ ├── icon-72@2x.png │ │ │ ├── icon-76.png │ │ │ ├── icon-76@2x.png │ │ │ ├── icon.png │ │ │ └── icon@2x.png │ ├── app.css │ ├── app.ts │ ├── images │ │ └── mountains.png │ ├── main-page.ts │ ├── main-page.xml │ ├── package.json │ └── songs.json ├── package.json └── tsconfig.json ├── ios.d.ts ├── nativescript-collapsing-header.d.ts ├── nativescript-collapsing-header.ts ├── package.json ├── tsconfig.json ├── tslint.json ├── utilities.d.ts └── utilities.ts /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | src 34 | # Files that might appear in the root of a volume 35 | .DocumentRevisions-V100 36 | .fseventsd 37 | .Spotlight-V100 38 | .TemporaryItems 39 | .Trashes 40 | .VolumeIcon.icns 41 | 42 | # Directories potentially created on remote AFP share 43 | .AppleDB 44 | .AppleDesktop 45 | Network Trash Folder 46 | Temporary Items 47 | .apdisk 48 | 49 | *.js 50 | *.js.map 51 | *.log 52 | demo/app/*.js 53 | demo/*.d.ts 54 | demo/platforms 55 | demo/node_modules/ 56 | node_modules 57 | .vscode -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | demo/ 2 | *.png 3 | *.log 4 | *.ts 5 | !*.d.ts -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | nativescript-collapsing-header 4 | Copyright (c) 2016, Josh Sommer 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy of 7 | this software and associated documentation files (the "Software"), to deal in 8 | the Software without restriction, including without limitation the rights to 9 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 10 | the Software, and to permit persons to whom the Software is furnished to do so, 11 | subject to the following conditions: 12 | 13 | This software may not be used for any type of Multi Level Marketing, Metwork 14 | Marketing or any other type of pyramid schemes application, or application 15 | associated with a business in this type of business. Without expressed written 16 | permission from it's author. 17 | 18 | The above copyright notice and this permission notice shall be included in all 19 | copies or substantial portions of the Software. 20 | 21 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 22 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 23 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 24 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 25 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 26 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 27 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | #NativeScript Collapsing Header Plugin for Android & iOS. 2 | 3 | [![NativeScript Collapsing Header. Click to Play](https://img.youtube.com/vi/4grgEuX9mLQ/0.jpg)](https://www.youtube.com/embed/4grgEuX9mLQ) 4 | ###Install 5 | `$ tns plugin add nativescript-collapsing-header` 6 | 7 | ###Example xml useage 8 | 9 | ```xml 10 | 13 | 14 | 15 | 16 | 17 | 18 | 24 | 25 | 26 | 27 | 28 | ``` 29 | ###Example css 30 | ```css 31 | #headerLabel{ 32 | font-size: 25; 33 | horizontal-align: center; 34 | color:#B2EBF2; 35 | margin-top: 20; 36 | } 37 | .header-template{ 38 | background-color:#212121; 39 | height: 65; 40 | width: 100%; 41 | } 42 | .body-template TextView{ 43 | font-size:20; 44 | padding:5 15; 45 | border:none; 46 | } 47 | ``` 48 | To use the collapsing header plugin you need to first import it into your xml layout with `xmlns:collapsingHeader="nativescript-collapsing-header"` 49 | 50 | when using the collapsing header plugin you need at least two layout views inside of the ```` element. ```` and ````. 51 | 52 | The ```` has a property called `dropShadow` if set to true it will create a small drop shadow effect on the bottom of the header. 53 | 54 | ##{N} ListView support. 55 | As of version 2.0.0 list view support has been added. Instead of a ```` elment, add a ```` like you would normally, see below for and example. 56 | 57 | ```xml 58 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | ``` 78 | 79 | ## iOS Only 80 | to change the status bar color you there is a property for the ```` element called `statusIosBarBackgroundColor` if not it defaults to white. 81 | 82 | 83 | ###Plugin Development Work Flow. 84 | 85 | * Clone repository to your machine. 86 | * First run `npm install` 87 | * Then run `npm run setup` to prepare the demo project 88 | * Build with `npm run build` 89 | * Run and deploy to your device or emulator with `npm run demo.android` or `npm run demo.ios` 90 | 91 | 92 | ###Special thanks to: 93 | [Nathan Walker](https://github.com/NathanWalker) for setting up the {N} plugin seed that I used to get this plugin up and running. More info can be found about it here: 94 | https://github.com/NathanWalker/nativescript-plugin-seed 95 | 96 | ##License 97 | 98 | [MIT](/LICENSE) 99 | 100 | for {N} version 1.7.0+ -------------------------------------------------------------------------------- /demo/app/App_Resources/Android/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 12 | 13 | 16 | 17 | 18 | 19 | 20 | 21 | 27 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /demo/app/App_Resources/Android/app.gradle: -------------------------------------------------------------------------------- 1 | // Add your native dependencies here: 2 | 3 | // Uncomment to add recyclerview-v7 dependency 4 | //dependencies { 5 | // compile 'com.android.support:recyclerview-v7:+' 6 | //} -------------------------------------------------------------------------------- /demo/app/App_Resources/Android/drawable-hdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/Android/drawable-hdpi/icon.png -------------------------------------------------------------------------------- /demo/app/App_Resources/Android/drawable-ldpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/Android/drawable-ldpi/icon.png -------------------------------------------------------------------------------- /demo/app/App_Resources/Android/drawable-mdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/Android/drawable-mdpi/icon.png -------------------------------------------------------------------------------- /demo/app/App_Resources/Android/drawable-nodpi/splashscreen.9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/Android/drawable-nodpi/splashscreen.9.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-568h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Default-568h@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-667h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Default-667h@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-736h@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Default-736h@3x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-Landscape-568h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Default-Landscape-568h@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-Landscape-667h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Default-Landscape-667h@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-Landscape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Default-Landscape.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-Landscape@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Default-Landscape@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-Landscape@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Default-Landscape@3x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-Portrait.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Default-Portrait.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-Portrait@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Default-Portrait@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Default.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Default@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Icon-Small-50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Icon-Small-50.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Icon-Small-50@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Icon-Small-50@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Icon-Small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Icon-Small.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Icon-Small@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/Icon-Small@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | ${PRODUCT_NAME} 9 | CFBundleExecutable 10 | ${EXECUTABLE_NAME} 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | ${PRODUCT_NAME} 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1.0 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiredDeviceCapabilities 28 | 29 | armv7 30 | 31 | UISupportedInterfaceOrientations 32 | 33 | UIInterfaceOrientationPortrait 34 | UIInterfaceOrientationLandscapeLeft 35 | UIInterfaceOrientationLandscapeRight 36 | 37 | UISupportedInterfaceOrientations~ipad 38 | 39 | UIInterfaceOrientationPortrait 40 | UIInterfaceOrientationPortraitUpsideDown 41 | UIInterfaceOrientationLandscapeLeft 42 | UIInterfaceOrientationLandscapeRight 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/icon-40.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/icon-40@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/icon-60.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/icon-60@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/icon-72.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-72@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/icon-72@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/icon-76.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/icon-76@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/icon.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/App_Resources/iOS/icon@2x.png -------------------------------------------------------------------------------- /demo/app/app.css: -------------------------------------------------------------------------------- 1 | #headerLabel{ 2 | font-size: 25; 3 | horizontal-align: center; 4 | color:#B2EBF2; 5 | margin-top: 20; 6 | } 7 | .header-template{ 8 | background-color:#212121; 9 | height: 65; 10 | width: 100%; 11 | } 12 | .body-template TextView{ 13 | font-size:20; 14 | padding:5 15; 15 | border:none; 16 | } -------------------------------------------------------------------------------- /demo/app/app.ts: -------------------------------------------------------------------------------- 1 | import * as application from 'application'; 2 | application.start({ moduleName: 'main-page' }); 3 | -------------------------------------------------------------------------------- /demo/app/images/mountains.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JoshDSommer/nativescript-collapsing-header/59b3ef9060b307582d1ace4ae0ef9629e286c359/demo/app/images/mountains.png -------------------------------------------------------------------------------- /demo/app/main-page.ts: -------------------------------------------------------------------------------- 1 | import * as observable from 'data/observable'; 2 | import * as pages from 'ui/page'; 3 | let songs = require('./songs.json'); 4 | import {ListView} from 'ui/list-view'; 5 | 6 | // Event handler for Page "loaded" event attached in main-page.xml 7 | export function pageLoaded(args: observable.EventData) { 8 | let page = args.object; 9 | page.actionBarHidden = true; 10 | page.bindingContext = { 11 | items: 12 | songs 13 | }; 14 | console.log('hello'); 15 | let songList = page.getViewById('songList'); 16 | //let scroll = page.getViewById('scroll'); 17 | 18 | } -------------------------------------------------------------------------------- /demo/app/main-page.xml: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 27 | 28 | -------------------------------------------------------------------------------- /demo/app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tns-template-hello-world-ts", 3 | "main": "app.js", 4 | "version": "1.6.0", 5 | "author": { 6 | "name": "Telerik", 7 | "email": "support@telerik.com" 8 | }, 9 | "description": "Nativescript hello-world-ts project template", 10 | "license": "Apache-2.0", 11 | "keywords": [ 12 | "telerik", 13 | "mobile", 14 | "nativescript", 15 | "{N}", 16 | "tns", 17 | "appbuilder", 18 | "template" 19 | ], 20 | "repository": { 21 | "type": "git", 22 | "url": "git+ssh://git@github.com/NativeScript/template-hello-world-ts.git" 23 | }, 24 | "bugs": { 25 | "url": "https://github.com/NativeScript/template-hello-world-ts/issues" 26 | }, 27 | "homepage": "https://github.com/NativeScript/template-hello-world-ts", 28 | "android": { 29 | "v8Flags": "--expose_gc" 30 | }, 31 | "devDependencies": { 32 | "nativescript-dev-typescript": "^0.3.0" 33 | }, 34 | "_id": "tns-template-hello-world-ts@1.6.0", 35 | "_shasum": "a567c2b9a56024818c06596dab9629d155c5b8a8", 36 | "_resolved": "https://registry.npmjs.org/tns-template-hello-world-ts/-/tns-template-hello-world-ts-1.6.0.tgz", 37 | "_from": "tns-template-hello-world-ts@latest", 38 | "scripts": {}, 39 | "_npmVersion": "2.14.7", 40 | "_nodeVersion": "4.2.2", 41 | "_npmUser": { 42 | "name": "enchev", 43 | "email": "vladimir.enchev@gmail.com" 44 | }, 45 | "dist": { 46 | "shasum": "a567c2b9a56024818c06596dab9629d155c5b8a8", 47 | "tarball": "http://registry.npmjs.org/tns-template-hello-world-ts/-/tns-template-hello-world-ts-1.6.0.tgz" 48 | }, 49 | "maintainers": [ 50 | { 51 | "name": "enchev", 52 | "email": "vladimir.enchev@gmail.com" 53 | }, 54 | { 55 | "name": "erjangavalji", 56 | "email": "erjan.gavalji@gmail.com" 57 | }, 58 | { 59 | "name": "fatme", 60 | "email": "hfatme@gmail.com" 61 | }, 62 | { 63 | "name": "hdeshev", 64 | "email": "hristo@deshev.com" 65 | }, 66 | { 67 | "name": "kerezov", 68 | "email": "d.kerezov@gmail.com" 69 | }, 70 | { 71 | "name": "ligaz", 72 | "email": "stefan.dobrev@gmail.com" 73 | }, 74 | { 75 | "name": "nsndeck", 76 | "email": "nedyalko.nikolov@telerik.com" 77 | }, 78 | { 79 | "name": "rosen-vladimirov", 80 | "email": "rosen.vladimirov.91@gmail.com" 81 | }, 82 | { 83 | "name": "sdobrev", 84 | "email": "stefan.dobrev@gmail.com" 85 | }, 86 | { 87 | "name": "tailsu", 88 | "email": "tailsu@gmail.com" 89 | }, 90 | { 91 | "name": "teobugslayer", 92 | "email": "teobugslayer@gmail.com" 93 | }, 94 | { 95 | "name": "valio.stoychev", 96 | "email": "valio.stoychev@gmail.com" 97 | } 98 | ], 99 | "_npmOperationalInternal": { 100 | "host": "packages-5-east.internal.npmjs.com", 101 | "tmp": "tmp/tns-template-hello-world-ts-1.6.0.tgz_1455717516189_0.6427943941671401" 102 | }, 103 | "directories": {}, 104 | "readme": "ERROR: No README data found!" 105 | } 106 | -------------------------------------------------------------------------------- /demo/app/songs.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "5161", 4 | "parent": "5159", 5 | "isDir": false, 6 | "title": "California Girls", 7 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 8 | "artist": "Beach Boys", 9 | "track": 1, 10 | "year": 2003, 11 | "genre": "Pop", 12 | "coverArt": "5159", 13 | "size": 6890361, 14 | "contentType": "audio/mpeg", 15 | "suffix": "mp3", 16 | "duration": 167, 17 | "bitRate": 320, 18 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/01 California Girls.mp3", 19 | "isVideo": false, 20 | "created": "2015-09-05T15:47:25.000Z", 21 | "albumId": "325", 22 | "artistId": "105", 23 | "type": "music" 24 | }, 25 | { 26 | "id": "5162", 27 | "parent": "5159", 28 | "isDir": false, 29 | "title": "I Get Around", 30 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 31 | "artist": "Beach Boys", 32 | "track": 2, 33 | "year": 2003, 34 | "genre": "Pop", 35 | "coverArt": "5159", 36 | "size": 5590508, 37 | "contentType": "audio/mpeg", 38 | "suffix": "mp3", 39 | "duration": 134, 40 | "bitRate": 320, 41 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/02 I Get Around.mp3", 42 | "isVideo": false, 43 | "created": "2015-09-05T15:47:25.000Z", 44 | "albumId": "325", 45 | "artistId": "105", 46 | "type": "music" 47 | }, 48 | { 49 | "id": "5163", 50 | "parent": "5159", 51 | "isDir": false, 52 | "title": "Surfin' Safari", 53 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 54 | "artist": "Beach Boys", 55 | "track": 3, 56 | "year": 2003, 57 | "genre": "Pop", 58 | "coverArt": "5159", 59 | "size": 5286443, 60 | "contentType": "audio/mpeg", 61 | "suffix": "mp3", 62 | "duration": 127, 63 | "bitRate": 320, 64 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/03 Surfin' Safari.mp3", 65 | "isVideo": false, 66 | "created": "2015-09-05T15:47:26.000Z", 67 | "albumId": "325", 68 | "artistId": "105", 69 | "type": "music" 70 | }, 71 | { 72 | "id": "5164", 73 | "parent": "5159", 74 | "isDir": false, 75 | "title": "Surfin' USA", 76 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 77 | "artist": "Beach Boys", 78 | "track": 4, 79 | "year": 2003, 80 | "genre": "Pop", 81 | "coverArt": "5159", 82 | "size": 6143259, 83 | "contentType": "audio/mpeg", 84 | "suffix": "mp3", 85 | "duration": 148, 86 | "bitRate": 320, 87 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/04 Surfin' USA.mp3", 88 | "isVideo": false, 89 | "created": "2015-09-05T15:47:26.000Z", 90 | "albumId": "325", 91 | "artistId": "105", 92 | "type": "music" 93 | }, 94 | { 95 | "id": "5165", 96 | "parent": "5159", 97 | "isDir": false, 98 | "title": "Fun, Fun, Fun", 99 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 100 | "artist": "Beach Boys", 101 | "track": 5, 102 | "year": 2003, 103 | "genre": "Pop", 104 | "coverArt": "5159", 105 | "size": 5855912, 106 | "contentType": "audio/mpeg", 107 | "suffix": "mp3", 108 | "duration": 141, 109 | "bitRate": 320, 110 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/05 Fun, Fun, Fun.mp3", 111 | "isVideo": false, 112 | "created": "2015-09-05T15:47:26.000Z", 113 | "albumId": "325", 114 | "artistId": "105", 115 | "type": "music" 116 | }, 117 | { 118 | "id": "5166", 119 | "parent": "5159", 120 | "isDir": false, 121 | "title": "Surfer Girl", 122 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 123 | "artist": "Beach Boys", 124 | "track": 6, 125 | "year": 2003, 126 | "genre": "Pop", 127 | "coverArt": "5159", 128 | "size": 6155798, 129 | "contentType": "audio/mpeg", 130 | "suffix": "mp3", 131 | "duration": 148, 132 | "bitRate": 320, 133 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/06 Surfer Girl.mp3", 134 | "isVideo": false, 135 | "created": "2015-09-05T15:47:26.000Z", 136 | "albumId": "325", 137 | "artistId": "105", 138 | "type": "music" 139 | }, 140 | { 141 | "id": "5167", 142 | "parent": "5159", 143 | "isDir": false, 144 | "title": "Don't Worry Baby (Single Version)", 145 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 146 | "artist": "Beach Boys", 147 | "track": 7, 148 | "year": 2003, 149 | "genre": "Pop", 150 | "coverArt": "5159", 151 | "size": 6972908, 152 | "contentType": "audio/mpeg", 153 | "suffix": "mp3", 154 | "duration": 169, 155 | "bitRate": 320, 156 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/07 Don't Worry Baby (Single Version).mp3", 157 | "isVideo": false, 158 | "created": "2015-09-05T15:47:26.000Z", 159 | "albumId": "325", 160 | "artistId": "105", 161 | "type": "music" 162 | }, 163 | { 164 | "id": "5168", 165 | "parent": "5159", 166 | "isDir": false, 167 | "title": "Little Deuce Coupe", 168 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 169 | "artist": "Beach Boys", 170 | "track": 8, 171 | "year": 2003, 172 | "genre": "Pop", 173 | "coverArt": "5159", 174 | "size": 4237365, 175 | "contentType": "audio/mpeg", 176 | "suffix": "mp3", 177 | "duration": 100, 178 | "bitRate": 320, 179 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/08 Little Deuce Coupe.mp3", 180 | "isVideo": false, 181 | "created": "2015-09-05T15:47:26.000Z", 182 | "albumId": "325", 183 | "artistId": "105", 184 | "type": "music" 185 | }, 186 | { 187 | "id": "5169", 188 | "parent": "5159", 189 | "isDir": false, 190 | "title": "Shut Down", 191 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 192 | "artist": "Beach Boys", 193 | "track": 9, 194 | "year": 2003, 195 | "genre": "Pop", 196 | "coverArt": "5159", 197 | "size": 4615618, 198 | "contentType": "audio/mpeg", 199 | "suffix": "mp3", 200 | "duration": 110, 201 | "bitRate": 320, 202 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/09 Shut Down.mp3", 203 | "isVideo": false, 204 | "created": "2015-09-05T15:47:27.000Z", 205 | "albumId": "325", 206 | "artistId": "105", 207 | "type": "music" 208 | }, 209 | { 210 | "id": "5170", 211 | "parent": "5159", 212 | "isDir": false, 213 | "title": "Help Me, Rhonda (Single Version)", 214 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 215 | "artist": "Beach Boys", 216 | "track": 10, 217 | "year": 2003, 218 | "genre": "Pop", 219 | "coverArt": "5159", 220 | "size": 6912304, 221 | "contentType": "audio/mpeg", 222 | "suffix": "mp3", 223 | "duration": 167, 224 | "bitRate": 320, 225 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/10 Help Me, Rhonda (Single Version).mp3", 226 | "isVideo": false, 227 | "created": "2015-09-05T15:47:27.000Z", 228 | "albumId": "325", 229 | "artistId": "105", 230 | "type": "music" 231 | }, 232 | { 233 | "id": "5171", 234 | "parent": "5159", 235 | "isDir": false, 236 | "title": "Be True To Your School (Single Version)", 237 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 238 | "artist": "Beach Boys", 239 | "track": 11, 240 | "year": 2003, 241 | "genre": "Pop", 242 | "coverArt": "5159", 243 | "size": 5409741, 244 | "contentType": "audio/mpeg", 245 | "suffix": "mp3", 246 | "duration": 130, 247 | "bitRate": 320, 248 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/11 Be True To Your School (Single Ve.mp3", 249 | "isVideo": false, 250 | "created": "2015-09-05T15:47:27.000Z", 251 | "albumId": "325", 252 | "artistId": "105", 253 | "type": "music" 254 | }, 255 | { 256 | "id": "5172", 257 | "parent": "5159", 258 | "isDir": false, 259 | "title": "When I Grow Up (To Be A Man)", 260 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 261 | "artist": "Beach Boys", 262 | "track": 12, 263 | "year": 2003, 264 | "genre": "Pop", 265 | "coverArt": "5159", 266 | "size": 5156875, 267 | "contentType": "audio/mpeg", 268 | "suffix": "mp3", 269 | "duration": 123, 270 | "bitRate": 320, 271 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/12 When I Grow Up (To Be A Man).mp3", 272 | "isVideo": false, 273 | "created": "2015-09-05T15:47:27.000Z", 274 | "albumId": "325", 275 | "artistId": "105", 276 | "type": "music" 277 | }, 278 | { 279 | "id": "5173", 280 | "parent": "5159", 281 | "isDir": false, 282 | "title": "In My Room", 283 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 284 | "artist": "Beach Boys", 285 | "track": 13, 286 | "year": 2003, 287 | "genre": "Pop", 288 | "coverArt": "5159", 289 | "size": 5557071, 290 | "contentType": "audio/mpeg", 291 | "suffix": "mp3", 292 | "duration": 133, 293 | "bitRate": 320, 294 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/13 In My Room.mp3", 295 | "isVideo": false, 296 | "created": "2015-09-05T15:47:27.000Z", 297 | "albumId": "325", 298 | "artistId": "105", 299 | "type": "music" 300 | }, 301 | { 302 | "id": "5174", 303 | "parent": "5159", 304 | "isDir": false, 305 | "title": "God Only Knows", 306 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 307 | "artist": "Beach Boys", 308 | "track": 14, 309 | "year": 2003, 310 | "genre": "Pop", 311 | "coverArt": "5159", 312 | "size": 7134867, 313 | "contentType": "audio/mpeg", 314 | "suffix": "mp3", 315 | "duration": 173, 316 | "bitRate": 320, 317 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/14 God Only Knows.mp3", 318 | "isVideo": false, 319 | "created": "2015-09-05T15:47:28.000Z", 320 | "albumId": "325", 321 | "artistId": "105", 322 | "type": "music" 323 | }, 324 | { 325 | "id": "5160", 326 | "parent": "5159", 327 | "isDir": false, 328 | "title": "Sloop John B", 329 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 330 | "artist": "Beach Boys", 331 | "track": 15, 332 | "year": 2003, 333 | "genre": "Pop", 334 | "coverArt": "5159", 335 | "size": 7374149, 336 | "contentType": "audio/mpeg", 337 | "suffix": "mp3", 338 | "duration": 179, 339 | "bitRate": 320, 340 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/15 Sloop John B.mp3", 341 | "isVideo": false, 342 | "created": "2015-09-05T15:47:28.000Z", 343 | "albumId": "325", 344 | "artistId": "105", 345 | "type": "music" 346 | }, 347 | { 348 | "id": "5175", 349 | "parent": "5159", 350 | "isDir": false, 351 | "title": "Wouldn't It Be Nice", 352 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 353 | "artist": "Beach Boys", 354 | "track": 16, 355 | "year": 2003, 356 | "genre": "Pop", 357 | "coverArt": "5159", 358 | "size": 6322981, 359 | "contentType": "audio/mpeg", 360 | "suffix": "mp3", 361 | "duration": 153, 362 | "bitRate": 320, 363 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/16 Wouldn't It Be Nice.mp3", 364 | "isVideo": false, 365 | "created": "2015-09-05T15:47:28.000Z", 366 | "albumId": "325", 367 | "artistId": "105", 368 | "type": "music" 369 | }, 370 | { 371 | "id": "5176", 372 | "parent": "5159", 373 | "isDir": false, 374 | "title": "Getcha Back", 375 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 376 | "artist": "Beach Boys", 377 | "track": 17, 378 | "year": 2003, 379 | "genre": "Pop", 380 | "coverArt": "5159", 381 | "size": 7458786, 382 | "contentType": "audio/mpeg", 383 | "suffix": "mp3", 384 | "duration": 181, 385 | "bitRate": 320, 386 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/17 Getcha Back.mp3", 387 | "isVideo": false, 388 | "created": "2015-09-05T15:47:28.000Z", 389 | "albumId": "325", 390 | "artistId": "105", 391 | "type": "music" 392 | }, 393 | { 394 | "id": "5177", 395 | "parent": "5159", 396 | "isDir": false, 397 | "title": "Come Go With Me", 398 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 399 | "artist": "Beach Boys", 400 | "track": 18, 401 | "year": 2003, 402 | "genre": "Pop", 403 | "coverArt": "5159", 404 | "size": 5313610, 405 | "contentType": "audio/mpeg", 406 | "suffix": "mp3", 407 | "duration": 127, 408 | "bitRate": 320, 409 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/18 Come Go With Me.mp3", 410 | "isVideo": false, 411 | "created": "2015-09-05T15:47:28.000Z", 412 | "albumId": "325", 413 | "artistId": "105", 414 | "type": "music" 415 | }, 416 | { 417 | "id": "5178", 418 | "parent": "5159", 419 | "isDir": false, 420 | "title": "Rock And Roll Music", 421 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 422 | "artist": "Beach Boys", 423 | "track": 19, 424 | "year": 2003, 425 | "genre": "Pop", 426 | "coverArt": "5159", 427 | "size": 6232075, 428 | "contentType": "audio/mpeg", 429 | "suffix": "mp3", 430 | "duration": 150, 431 | "bitRate": 320, 432 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/19 Rock And Roll Music.mp3", 433 | "isVideo": false, 434 | "created": "2015-09-05T15:47:28.000Z", 435 | "albumId": "325", 436 | "artistId": "105", 437 | "type": "music" 438 | }, 439 | { 440 | "id": "5179", 441 | "parent": "5159", 442 | "isDir": false, 443 | "title": "Dance, Dance, Dance", 444 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 445 | "artist": "Beach Boys", 446 | "track": 20, 447 | "year": 2003, 448 | "genre": "Pop", 449 | "coverArt": "5159", 450 | "size": 5153741, 451 | "contentType": "audio/mpeg", 452 | "suffix": "mp3", 453 | "duration": 123, 454 | "bitRate": 320, 455 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/20 Dance, Dance, Dance.mp3", 456 | "isVideo": false, 457 | "created": "2015-09-05T15:47:28.000Z", 458 | "albumId": "325", 459 | "artistId": "105", 460 | "type": "music" 461 | }, 462 | { 463 | "id": "5180", 464 | "parent": "5159", 465 | "isDir": false, 466 | "title": "Barbara Ann (Single Version)", 467 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 468 | "artist": "Beach Boys", 469 | "track": 21, 470 | "year": 2003, 471 | "genre": "Pop", 472 | "coverArt": "5159", 473 | "size": 5556026, 474 | "contentType": "audio/mpeg", 475 | "suffix": "mp3", 476 | "duration": 133, 477 | "bitRate": 320, 478 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/21 Barbara Ann (Single Version).mp3", 479 | "isVideo": false, 480 | "created": "2015-09-05T15:47:28.000Z", 481 | "albumId": "325", 482 | "artistId": "105", 483 | "type": "music" 484 | }, 485 | { 486 | "id": "5181", 487 | "parent": "5159", 488 | "isDir": false, 489 | "title": "Do You Wanna Dance?", 490 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 491 | "artist": "Beach Boys", 492 | "track": 22, 493 | "year": 2003, 494 | "genre": "Pop", 495 | "coverArt": "5159", 496 | "size": 5838149, 497 | "contentType": "audio/mpeg", 498 | "suffix": "mp3", 499 | "duration": 141, 500 | "bitRate": 320, 501 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/22 Do You Wanna Dance_.mp3", 502 | "isVideo": false, 503 | "created": "2015-09-05T15:47:28.000Z", 504 | "albumId": "325", 505 | "artistId": "105", 506 | "type": "music" 507 | }, 508 | { 509 | "id": "5182", 510 | "parent": "5159", 511 | "isDir": false, 512 | "title": "Heroes And Villains", 513 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 514 | "artist": "Beach Boys", 515 | "track": 23, 516 | "year": 2003, 517 | "genre": "Pop", 518 | "coverArt": "5159", 519 | "size": 9019863, 520 | "contentType": "audio/mpeg", 521 | "suffix": "mp3", 522 | "duration": 220, 523 | "bitRate": 320, 524 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/23 Heroes And Villains.mp3", 525 | "isVideo": false, 526 | "created": "2015-09-05T15:47:29.000Z", 527 | "albumId": "325", 528 | "artistId": "105", 529 | "type": "music" 530 | }, 531 | { 532 | "id": "5183", 533 | "parent": "5159", 534 | "isDir": false, 535 | "title": "Good Timin'", 536 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 537 | "artist": "Beach Boys", 538 | "track": 24, 539 | "year": 2003, 540 | "genre": "Pop", 541 | "coverArt": "5159", 542 | "size": 5572745, 543 | "contentType": "audio/mpeg", 544 | "suffix": "mp3", 545 | "duration": 134, 546 | "bitRate": 320, 547 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/24 Good Timin'.mp3", 548 | "isVideo": false, 549 | "created": "2015-09-05T15:47:29.000Z", 550 | "albumId": "325", 551 | "artistId": "105", 552 | "type": "music" 553 | }, 554 | { 555 | "id": "5184", 556 | "parent": "5159", 557 | "isDir": false, 558 | "title": "Kokomo", 559 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 560 | "artist": "Beach Boys", 561 | "track": 25, 562 | "year": 2003, 563 | "genre": "Pop", 564 | "coverArt": "5159", 565 | "size": 8925822, 566 | "contentType": "audio/mpeg", 567 | "suffix": "mp3", 568 | "duration": 218, 569 | "bitRate": 320, 570 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/25 Kokomo.mp3", 571 | "isVideo": false, 572 | "created": "2015-09-05T15:47:29.000Z", 573 | "albumId": "325", 574 | "artistId": "105", 575 | "type": "music" 576 | }, 577 | { 578 | "id": "5185", 579 | "parent": "5159", 580 | "isDir": false, 581 | "title": "Do It Again", 582 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 583 | "artist": "Beach Boys", 584 | "track": 26, 585 | "year": 2003, 586 | "genre": "Pop", 587 | "coverArt": "5159", 588 | "size": 5850688, 589 | "contentType": "audio/mpeg", 590 | "suffix": "mp3", 591 | "duration": 141, 592 | "bitRate": 320, 593 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/26 Do It Again.mp3", 594 | "isVideo": false, 595 | "created": "2015-09-05T15:47:29.000Z", 596 | "albumId": "325", 597 | "artistId": "105", 598 | "type": "music" 599 | }, 600 | { 601 | "id": "5186", 602 | "parent": "5159", 603 | "isDir": false, 604 | "title": "Wild Honey", 605 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 606 | "artist": "Beach Boys", 607 | "track": 27, 608 | "year": 2003, 609 | "genre": "Pop", 610 | "coverArt": "5159", 611 | "size": 6598834, 612 | "contentType": "audio/mpeg", 613 | "suffix": "mp3", 614 | "duration": 160, 615 | "bitRate": 320, 616 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/27 Wild Honey.mp3", 617 | "isVideo": false, 618 | "created": "2015-09-05T15:47:30.000Z", 619 | "albumId": "325", 620 | "artistId": "105", 621 | "type": "music" 622 | }, 623 | { 624 | "id": "5187", 625 | "parent": "5159", 626 | "isDir": false, 627 | "title": "Darlin'", 628 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 629 | "artist": "Beach Boys", 630 | "track": 28, 631 | "year": 2003, 632 | "genre": "Pop", 633 | "coverArt": "5159", 634 | "size": 5582149, 635 | "contentType": "audio/mpeg", 636 | "suffix": "mp3", 637 | "duration": 134, 638 | "bitRate": 320, 639 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/28 Darlin'.mp3", 640 | "isVideo": false, 641 | "created": "2015-09-05T15:47:30.000Z", 642 | "albumId": "325", 643 | "artistId": "105", 644 | "type": "music" 645 | }, 646 | { 647 | "id": "5188", 648 | "parent": "5159", 649 | "isDir": false, 650 | "title": "I Can Hear Music", 651 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 652 | "artist": "Beach Boys", 653 | "track": 29, 654 | "year": 2003, 655 | "genre": "Pop", 656 | "coverArt": "5159", 657 | "size": 6570622, 658 | "contentType": "audio/mpeg", 659 | "suffix": "mp3", 660 | "duration": 159, 661 | "bitRate": 320, 662 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/29 I Can Hear Music.mp3", 663 | "isVideo": false, 664 | "created": "2015-09-05T15:47:30.000Z", 665 | "albumId": "325", 666 | "artistId": "105", 667 | "type": "music" 668 | }, 669 | { 670 | "id": "5189", 671 | "parent": "5159", 672 | "isDir": false, 673 | "title": "Good Vibrations", 674 | "album": "Sounds Of Summer: The Very Best Of The Beach Boys", 675 | "artist": "Beach Boys", 676 | "track": 30, 677 | "year": 2003, 678 | "genre": "Pop", 679 | "coverArt": "5159", 680 | "size": 8950900, 681 | "contentType": "audio/mpeg", 682 | "suffix": "mp3", 683 | "duration": 218, 684 | "bitRate": 320, 685 | "path": "Beach Boys/Sounds Of Summer_ The Very Best Of The B/30 Good Vibrations.mp3", 686 | "isVideo": false, 687 | "created": "2015-09-05T15:47:30.000Z", 688 | "albumId": "325", 689 | "artistId": "105", 690 | "type": "music" 691 | } 692 | ] -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "nativescript": { 3 | "id": "org.nativescript.demo", 4 | "tns-ios": { 5 | "version": "1.7.0" 6 | }, 7 | "tns-android": { 8 | "version": "1.7.1" 9 | } 10 | }, 11 | "dependencies": { 12 | "nativescript-collapsing-header": "file:..", 13 | "tns-core-modules": "^1.7.1" 14 | }, 15 | "devDependencies": { 16 | "nativescript-dev-typescript": "^0.3.1", 17 | "typescript": "^1.8.9" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "sourceMap": true, 6 | "experimentalDecorators": true, 7 | "noEmitHelpers": true 8 | }, 9 | "exclude": [ 10 | "node_modules", 11 | "platforms" 12 | ] 13 | } -------------------------------------------------------------------------------- /nativescript-collapsing-header.d.ts: -------------------------------------------------------------------------------- 1 | import { AbsoluteLayout } from 'ui/layouts/absolute-layout'; 2 | import { AddChildFromBuilder } from 'ui/core/view'; 3 | import { StackLayout } from 'ui/layouts/stack-layout'; 4 | import { ListView } from 'ui/list-view'; 5 | export declare class Header extends StackLayout { 6 | private _dropShadow; 7 | dropShadow: boolean; 8 | constructor(); 9 | } 10 | export declare class Content extends StackLayout { 11 | } 12 | export declare class ListViewContent extends ListView { 13 | } 14 | export interface IMinimumHeights { 15 | portrait: number; 16 | landscape: number; 17 | } 18 | export declare class CollapsingHeader extends AbsoluteLayout implements AddChildFromBuilder { 19 | header: Header; 20 | content: Content; 21 | private _childLayouts; 22 | private _topOpacity; 23 | private _loaded; 24 | private _minimumHeights; 25 | private _statusBarBackgroundColor; 26 | statusIosBarBackgroundColor: string; 27 | android: any; 28 | ios: any; 29 | constructor(); 30 | private constructView(); 31 | _addChildFromBuilder: (name: string, value: any) => void; 32 | } 33 | -------------------------------------------------------------------------------- /nativescript-collapsing-header.ts: -------------------------------------------------------------------------------- 1 | import * as app from 'application'; 2 | import * as Platform from 'platform'; 3 | import {ScrollView, ScrollEventData} from 'ui/scroll-view'; 4 | import {AbsoluteLayout} from 'ui/layouts/absolute-layout'; 5 | import {View, AddChildFromBuilder} from 'ui/core/view'; 6 | import {Label} from 'ui/label'; 7 | import {StackLayout} from 'ui/layouts/stack-layout'; 8 | import {Color} from 'color'; 9 | import {ListView} from 'ui/list-view'; 10 | import {CollapsingUtilities as utilities} from './utilities'; 11 | 12 | export class Header extends StackLayout { 13 | private _dropShadow: boolean; 14 | 15 | get dropShadow(): boolean { 16 | return this._dropShadow; 17 | } 18 | set dropShadow(value: boolean) { 19 | this._dropShadow = value; 20 | } 21 | 22 | constructor() { 23 | super(); 24 | this.dropShadow = false; 25 | } 26 | } 27 | 28 | export class Content extends StackLayout { 29 | 30 | } 31 | export class ListViewContent extends ListView { 32 | 33 | } 34 | 35 | 36 | export interface IMinimumHeights { 37 | portrait: number; 38 | landscape: number; 39 | } 40 | 41 | export class CollapsingHeader extends AbsoluteLayout implements AddChildFromBuilder { 42 | public header: Header; 43 | public content: Content; 44 | 45 | private _childLayouts: View[]; 46 | private _topOpacity: number; 47 | private _loaded: boolean; 48 | private _minimumHeights: IMinimumHeights; 49 | private _statusBarBackgroundColor: string; 50 | 51 | get statusIosBarBackgroundColor(): string { 52 | return this._statusBarBackgroundColor; 53 | } 54 | 55 | set statusIosBarBackgroundColor(color: string) { 56 | this._statusBarBackgroundColor = color; 57 | } 58 | 59 | get android(): any { 60 | return; 61 | } 62 | 63 | get ios(): any { 64 | return; 65 | } 66 | 67 | constructor() { 68 | super(); 69 | this.constructView(); 70 | } 71 | 72 | private constructView(): void { 73 | this._childLayouts = []; 74 | let contentView: Content | ListView; 75 | let scrollView: ScrollView = new ScrollView(); 76 | let viewsToFade: View[]; 77 | let maxTopViewHeight: number; 78 | let controlsToFade: string[]; 79 | let headerView: StackLayout = new StackLayout(); 80 | let statusBarBackground: StackLayout = new StackLayout(); 81 | let invalidSetup = false; 82 | 83 | this._minimumHeights = utilities.getMinimumHeights(); 84 | if (this.statusIosBarBackgroundColor == null) { 85 | this.statusIosBarBackgroundColor = '#fff'; 86 | } 87 | //must set the vertical alignmnet or else there is issues with margin-top of 0 being the middle of the screen. 88 | this.verticalAlignment = 'top'; 89 | scrollView.verticalAlignment = 'top'; 90 | headerView.verticalAlignment = 'top'; 91 | this._topOpacity = 1; 92 | this._loaded = false; 93 | 94 | this.on(AbsoluteLayout.loadedEvent, (data: any) => { 95 | //prevents re adding views on resume in android. 96 | if (!this._loaded) { 97 | this._loaded = true; 98 | 99 | let wrapperStackLayout = new StackLayout(); 100 | wrapperStackLayout.verticalAlignment = 'top'; 101 | 102 | scrollView.width = '100%'; 103 | scrollView.height = '100%'; 104 | wrapperStackLayout.width = '100%'; 105 | 106 | this.addChild(scrollView); 107 | this.addChild(headerView); 108 | this.addChild(wrapperStackLayout); 109 | this.addChild(statusBarBackground); 110 | 111 | statusBarBackground.height = 25; 112 | statusBarBackground.backgroundColor = new Color(this.statusIosBarBackgroundColor); 113 | statusBarBackground.verticalAlignment = 'top'; 114 | statusBarBackground.width = '100%'; 115 | AbsoluteLayout.setTop(statusBarBackground, -25); 116 | //creates a new stack layout to wrap the content inside of the plugin. 117 | 118 | this._childLayouts.forEach(element => { 119 | if (element instanceof Content || element instanceof ListView) { 120 | contentView = element; 121 | } 122 | }); 123 | this._childLayouts.forEach(element => { 124 | if (element instanceof Header || element.className === 'header-template') { 125 | headerView.addChild(element); 126 | if (element instanceof Header && (
element).dropShadow) { 127 | headerView.height = element.height; 128 | headerView.addChild(utilities.addDropShadow(element.height, element.width)); 129 | } else { 130 | headerView.height = element.height; 131 | } 132 | element.verticalAlignment = 'top'; 133 | headerView.width = '100%'; 134 | element.width = '100%'; 135 | } 136 | }); 137 | 138 | utilities.validateView(this, headerView, contentView); 139 | 140 | headerView.marginTop = 0; 141 | wrapperStackLayout.marginTop = 0; 142 | 143 | if (contentView instanceof Content) { 144 | this.removeChild(wrapperStackLayout); 145 | 146 | //AbsoluteLayout.setTop(scrollView, headerView.height); 147 | wrapperStackLayout.addChild(contentView); 148 | wrapperStackLayout.paddingTop = headerView.height; 149 | 150 | scrollView.content = wrapperStackLayout; 151 | utilities.disableBounce(scrollView); 152 | 153 | utilities.addScrollEvent(scrollView, headerView); 154 | } else { 155 | wrapperStackLayout.height = '100%'; 156 | 157 | wrapperStackLayout.addChild(contentView); 158 | contentView.verticalAlignment = 'top'; 159 | contentView.marginTop = headerView.height; 160 | 161 | utilities.disableBounce(contentView); 162 | 163 | utilities.addListScrollEvent(contentView, headerView); 164 | } 165 | } 166 | }); 167 | } 168 | 169 | _addChildFromBuilder = (name: string, value: any) => { 170 | if (value instanceof View) { 171 | this._childLayouts.push(value); 172 | } 173 | }; 174 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nativescript-collapsing-header", 3 | "version": "2.0.0", 4 | "description": "NativeScript Collapsing Header Plugin.", 5 | "main": "nativescript-collapsing-header.js", 6 | "nativescript": { 7 | "platforms": { 8 | "android": "1.7.0", 9 | "ios": "1.7.0" 10 | }, 11 | "tns-ios": { 12 | "version": "1.7.0" 13 | } 14 | }, 15 | "scripts": { 16 | "build": "tsc", 17 | "demo.ios": "npm run preparedemo && cd demo && tns run ios", 18 | "demo.android": "npm run preparedemo && cd demo && tns run android", 19 | "preparedemo": "npm run build && cd demo && tns plugin remove nativescript-collapsing-header && tns plugin add .. && tns install", 20 | "setup": "cd demo && npm install && cd .. && npm run build && cd demo && tns plugin add .. && cd .." 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "https://github.com/TheOriginalJosh/nativescript-collapsing-header.git" 25 | }, 26 | "keywords": [ 27 | "NativeScript", 28 | "JavaScript", 29 | "Android", 30 | "iOS", 31 | "Collapsing Header" 32 | ], 33 | "author": { 34 | "name": "Josh Sommer", 35 | "email": "joshdsommer@gmail.com" 36 | }, 37 | "bugs": { 38 | "url": "https://github.com/TheOriginalJosh/nativescript-collapsing-header/issues" 39 | }, 40 | "license": "MIT", 41 | "homepage": "https://github.com/TheOriginalJosh/nativescript-collapsing-header", 42 | "readmeFilename": "README.md", 43 | "devDependencies": { 44 | "typescript": "^1.8.9" 45 | } 46 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "removeComments": true, 6 | "experimentalDecorators": true, 7 | "sourceMap": true, 8 | "declaration": true 9 | }, 10 | "files": [ 11 | "demo/node_modules/tns-core-modules/tns-core-modules.d.ts", 12 | "nativescript-collapsing-header.ts", 13 | "android17.d.ts" 14 | ], 15 | "compileOnSave": false 16 | } -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "class-name": true, 4 | "comment-format": [ 5 | true, 6 | "check-space" 7 | ], 8 | "indent": [ 9 | true, 10 | "tabs" 11 | ], 12 | "no-duplicate-variable": true, 13 | "no-eval": true, 14 | "no-internal-module": true, 15 | "no-trailing-whitespace": true, 16 | "no-var-keyword": true, 17 | "one-line": [ 18 | true, 19 | "check-open-brace", 20 | "check-whitespace" 21 | ], 22 | "quotemark": [ 23 | true, 24 | "single" 25 | ], 26 | "semicolon": true, 27 | "triple-equals": [ 28 | true, 29 | "allow-null-check" 30 | ], 31 | "typedef-whitespace": [ 32 | true, 33 | { 34 | "call-signature": "nospace", 35 | "index-signature": "nospace", 36 | "parameter": "nospace", 37 | "property-declaration": "nospace", 38 | "variable-declaration": "nospace" 39 | } 40 | ], 41 | "variable-name": [ 42 | true, 43 | "ban-keywords" 44 | ], 45 | "whitespace": [ 46 | true, 47 | "check-branch", 48 | "check-decl", 49 | "check-operator", 50 | "check-separator", 51 | "check-type" 52 | ] 53 | } 54 | } -------------------------------------------------------------------------------- /utilities.d.ts: -------------------------------------------------------------------------------- 1 | import { ScrollView } from 'ui/scroll-view'; 2 | import { AbsoluteLayout } from 'ui/layouts/absolute-layout'; 3 | import { View } from 'ui/core/view'; 4 | import { ListView } from 'ui/list-view'; 5 | import { StackLayout } from 'ui/layouts/stack-layout'; 6 | import { Content, IMinimumHeights } from './nativescript-collapsing-header'; 7 | export declare class CollapsingUtilities { 8 | private static animateHideHeader(headerHidden, headerView, content); 9 | private static animateShowHeader(headerHidden, headerView, content); 10 | static disableBounce(view: ScrollView | ListView): void; 11 | static validateView(parent: AbsoluteLayout, headerView: AbsoluteLayout, contentView: Content | ListView): void; 12 | static addListScrollEvent(listView: ListView, headerView: StackLayout): void; 13 | static addScrollEvent(scrollView: ScrollView, headerView: StackLayout): void; 14 | static setMinimumHeight(contentView: Content, minHeight: number): void; 15 | static getMinimumHeights(): IMinimumHeights; 16 | static addDropShadow(marginTop: number, width: number): StackLayout; 17 | private static shadowView(opacity, width); 18 | static displayDevWarning(parent: AbsoluteLayout, message: string, ...viewsToCollapse: View[]): void; 19 | } 20 | -------------------------------------------------------------------------------- /utilities.ts: -------------------------------------------------------------------------------- 1 | import * as app from 'application'; 2 | import * as Platform from 'platform'; 3 | import {ScrollView, ScrollEventData} from 'ui/scroll-view'; 4 | import {AbsoluteLayout} from 'ui/layouts/absolute-layout'; 5 | import {View, AddChildFromBuilder} from 'ui/core/view'; 6 | import {Label} from 'ui/label'; 7 | import { ListView } from 'ui/list-view'; 8 | import {StackLayout} from 'ui/layouts/stack-layout'; 9 | import {Color} from 'color'; 10 | import {CollapsingHeader, Header, Content, IMinimumHeights} from './nativescript-collapsing-header'; 11 | import { SwipeDirection, GestureEventData, SwipeGestureEventData, PanGestureEventData } from 'ui/gestures'; 12 | 13 | 14 | export class CollapsingUtilities { 15 | 16 | private static animateHideHeader(headerHidden: boolean, headerView: AbsoluteLayout, content: ListView | ScrollView): boolean { 17 | if (headerHidden === false) { 18 | headerView.animate({ 19 | translate: { x: 0, y: (headerView.height * -1) }, 20 | duration: 500, 21 | }); 22 | if (content instanceof ListView) { 23 | content.animate({ 24 | translate: { x: 0, y: (headerView.height * -1) }, 25 | duration: 500, 26 | }); 27 | } 28 | 29 | headerHidden = true; 30 | } 31 | return headerHidden; 32 | }; 33 | private static animateShowHeader(headerHidden: boolean, headerView: AbsoluteLayout, content: ListView | ScrollView): boolean { 34 | if (headerHidden === true) { 35 | headerView.animate({ 36 | translate: { x: 0, y: 0 }, 37 | duration: 400, 38 | }); 39 | if (content instanceof ListView) { 40 | content.animate({ 41 | translate: { x: 0, y: 0 }, 42 | duration: 400, 43 | }); 44 | } 45 | headerHidden = false; 46 | } 47 | return headerHidden; 48 | }; 49 | 50 | public static disableBounce(view: ScrollView | ListView): void { 51 | //no ui bounce. causes problems 52 | if (app.ios) { 53 | view.ios.bounces = false; 54 | } else if (app.android && view.android != null) { 55 | view.android.setOverScrollMode(2); 56 | } 57 | } 58 | 59 | public static validateView(parent: AbsoluteLayout, headerView: AbsoluteLayout, contentView: Content | ListView): void { 60 | if (headerView == null || contentView == null) { 61 | this.displayDevWarning(parent, 'ScrollView Setup Invalid. You must have Header and Content tags', 62 | headerView, 63 | contentView, contentView); 64 | return; 65 | } 66 | if (isNaN(headerView.height)) { 67 | this.displayDevWarning(parent, 'Header MUST have a height set.', 68 | headerView, contentView); 69 | return; 70 | } 71 | } 72 | 73 | public static addListScrollEvent(listView: ListView, headerView: StackLayout) { 74 | let headerHidden: boolean = false; 75 | const animateHideHeader = this.animateHideHeader; 76 | const animateShowHeader = this.animateShowHeader; 77 | 78 | listView.height = '100%'; 79 | 80 | if (app.android) { 81 | 82 | let mLastFirstVisibleItem: number; 83 | listView.android.setOnScrollListener(new android.widget.AbsListView.OnScrollListener({ 84 | 85 | onScrollStateChanged: function (view: android.widget.AbsListView, scrollState: number) { 86 | 87 | }, 88 | onScroll: function (view: android.widget.AbsListView, firstVisibleItem: number, visibleItemCount: number, totalItemCount: number) { 89 | if (mLastFirstVisibleItem < firstVisibleItem) { 90 | headerHidden = animateHideHeader(headerHidden, headerView, listView); 91 | } 92 | if (mLastFirstVisibleItem > firstVisibleItem) { 93 | headerHidden = animateShowHeader(headerHidden, headerView, listView); 94 | } 95 | mLastFirstVisibleItem = firstVisibleItem; 96 | } 97 | })); 98 | } else if (app.ios) { 99 | listView.on('pan', (args: PanGestureEventData) => { 100 | if (args.deltaY < 0) { 101 | headerHidden = animateHideHeader(headerHidden, headerView, listView); 102 | 103 | } else { 104 | headerHidden = animateShowHeader(headerHidden, headerView, listView); 105 | } 106 | }); 107 | } 108 | } 109 | 110 | public static addScrollEvent(scrollView: ScrollView, headerView: StackLayout) { 111 | let prevOffset = -10; 112 | let headerHidden: boolean = false; 113 | const animateHideHeader = this.animateHideHeader; 114 | const animateShowHeader = this.animateShowHeader; 115 | let wrapperStackLayout = scrollView.content; 116 | scrollView.on(ScrollView.scrollEvent, (args: ScrollEventData) => { 117 | console.log(scrollView.verticalOffset); 118 | if (prevOffset <= scrollView.verticalOffset) { 119 | headerHidden = animateHideHeader(headerHidden, headerView, scrollView); 120 | wrapperStackLayout.paddingTop = 0; 121 | } else { 122 | headerHidden = animateShowHeader(headerHidden, headerView, scrollView); 123 | wrapperStackLayout.paddingTop = headerView.height; 124 | } 125 | prevOffset = scrollView.verticalOffset; 126 | }); 127 | } 128 | 129 | public static setMinimumHeight(contentView: Content, minHeight: number): void { 130 | (contentView).minHeight = minHeight; 131 | } 132 | 133 | public static getMinimumHeights(): IMinimumHeights { 134 | let height1 = Platform.screen.mainScreen.heightDIPs; 135 | let height2 = Platform.screen.mainScreen.widthDIPs; 136 | //if the first hieght is lager than the second hiehgt it's the portrait views min hieght. 137 | if (height1 > height2) { 138 | return { 139 | portrait: height1, 140 | landscape: height2 141 | }; 142 | } else { 143 | return { 144 | portrait: height2, 145 | landscape: height1 146 | }; 147 | } 148 | } 149 | 150 | public static addDropShadow(marginTop: number, width: number): StackLayout { 151 | let wrapper = new StackLayout(); 152 | wrapper.width = width; 153 | wrapper.height = 3; 154 | wrapper.marginTop = marginTop; 155 | wrapper.addChild(this.shadowView(0.4, width)); 156 | wrapper.addChild(this.shadowView(0.2, width)); 157 | wrapper.addChild(this.shadowView(0.05, width)); 158 | return wrapper; 159 | } 160 | 161 | private static shadowView(opacity: number, width: number): StackLayout { 162 | let shadowRow = new StackLayout(); 163 | shadowRow.backgroundColor = new Color('black'); 164 | shadowRow.opacity = opacity; 165 | shadowRow.height = 1; 166 | return shadowRow; 167 | } 168 | 169 | public static displayDevWarning(parent: AbsoluteLayout, message: string, ...viewsToCollapse: View[]): void { 170 | let warningText = new Label(); 171 | warningText.text = message; 172 | warningText.color = new Color('red'); 173 | warningText.textWrap = true; 174 | warningText.marginTop = 50; 175 | parent.addChild(warningText); 176 | viewsToCollapse.forEach((view: View) => { 177 | if (view != null) { 178 | view.visibility = 'collapse'; 179 | } 180 | }); 181 | } 182 | } --------------------------------------------------------------------------------