├── .gitignore ├── .npmignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── 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 │ │ │ ├── Menu.png │ │ │ ├── close.png │ │ │ ├── home.png │ │ │ ├── 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 │ │ │ ├── nearby.png │ │ │ ├── notifications.png │ │ │ ├── search.png │ │ │ └── settings.png │ ├── app.css │ ├── app.ts │ ├── main-page.ts │ ├── main-page.xml │ ├── main-view-model.ts │ └── package.json ├── package.json └── tsconfig.json ├── media ├── circle_menu_header.png └── menu.gif ├── nativescript-circle-menu.ios.d.ts ├── nativescript-circle-menu.ios.ts ├── package.json ├── platforms └── ios │ └── Podfile └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | *.js 2 | *.js.map 3 | *.log 4 | .DS_Store 5 | demo/app/*.js 6 | demo/*.d.ts 7 | demo/platforms 8 | demo/node_modules 9 | node_modules -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | demo/ 2 | *.png 3 | *.log 4 | *.ts 5 | !*.d.ts 6 | media -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Submitting Pull Requests 2 | 3 | **Please follow these basic steps to simplify pull request reviews - if you don't you'll probably just be asked to anyway.** 4 | 5 | * Please rebase your branch against the current master 6 | * Run ```npm install``` to make sure your development dependencies are up-to-date 7 | * Make reference to possible [issues](https://github.com/DeviantJS/nativescript-circle-menu/issues) on PR comment 8 | 9 | ## Submitting bug reports 10 | 11 | * Please be sure to state which version of node **and** npm you're using -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | CircleMenu 4 | Copyright (c) 2015 Ramotion 5 | 6 | nativescript-circle-menu 7 | Copyright (c) 2016, Nathan Walker 8 | Copyright (c) 2016, Joshua Wiens 9 | 10 | Permission is hereby granted, free of charge, to any person obtaining a copy of 11 | this software and associated documentation files (the "Software"), to deal in 12 | the Software without restriction, including without limitation the rights to 13 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 14 | the Software, and to permit persons to whom the Software is furnished to do so, 15 | subject to the following conditions: 16 | 17 | The above copyright notice and this permission notice shall be included in all 18 | copies or substantial portions of the Software. 19 | 20 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 21 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 22 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 23 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 24 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 25 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | NativeScript Plus Ramotion Circle Menu 3 |
4 |

5 | ## Ramotion Circle Menu {N} Plugin 6 | 7 | A plugin to bring the exceptional work of [Ramotion](https://ramotion.com/) into the {N} platform. 8 | 9 | Circle Menu is an expanding circular menu. 10 | 11 | As [Ramotion](https://ramotion.com/) is as **forward thinking** as they are **super cool & talented**, they open sourced it which allows us to make it available to the {N} community. 12 | 13 | Circle Menu Source for the [iOS Platform](https://github.com/Ramotion/circle-menu) 14 | 15 | ![Sample](media/menu.gif) 16 | 17 | ## Install 18 | 19 | ``` 20 | npm i nativescript-circle-menu --save 21 | ``` 22 | 23 | ## Usage 24 | 25 | ``` 26 | import {Color} from 'color'; 27 | import {TNSCircleMenu, TNSCircleButton} from 'nativescript-circle-menu'; 28 | 29 | this.circleMenu = new TNSCircleMenu(); 30 | this.circleMenu.initMenu([ 31 | new TNSCircleButton({ 32 | icon: "home.png", 33 | color: new Color('#B3714F').ios, 34 | action: () => { 35 | console.log('home selected'); 36 | } 37 | }), 38 | new TNSCircleButton({ 39 | icon: "search.png", 40 | color: new Color('#7C3FE8').ios, 41 | action: () => { 42 | console.log('search selected'); 43 | } 44 | }), 45 | new TNSCircleButton({ 46 | icon: "notifications.png", 47 | color: new Color('#4E75E2').ios, 48 | action: () => { 49 | console.log('notifications selected'); 50 | } 51 | }), 52 | new TNSCircleButton({ 53 | icon: "settings.png", 54 | color: new Color('#528100').ios, 55 | action: () => { 56 | console.log('settings selected'); 57 | } 58 | }), 59 | new TNSCircleButton({ 60 | icon: "nearby.png", 61 | color: new Color('#85D5FE').ios, 62 | action: () => { 63 | console.log('nearby selected'); 64 | } 65 | }) 66 | ]); 67 | ``` 68 | 69 | ## Methods 70 | 71 | ``` 72 | initMenu(items: Array, menuImage?: string, closeImage?: string, position?: CGRect, bgColor?: string, duration?: number, distance?: number); 73 | ``` 74 | 75 | ## Issues 76 | 77 | >Flooding the native implementations repo with {N} specific implementation problems is discourteous. 78 | >They were kind enough open source some really great UI / UX please respect the fact it is not their responsibility to investigate or solve issues using this plugin in NativeScript. 79 | 80 | Please create issues [here](https://github.com/DeviantJS/nativescript-circle-menu/issues) first and only after it has been properly vetted to not be an {N} specific implementation problem 81 | should you open an issue in the [Circle Menu GitHub repo](https://github.com/Ramotion/circle-menu/issues). 82 | 83 | ## Contributing 84 | 85 | Please see the [CONTRIBUTING](https://github.com/DeviantJS/nativescript-circle-menu/blob/master/CONTRIBUTING.md) file for guidelines. 86 | 87 | ## License 88 | 89 | MIT -------------------------------------------------------------------------------- /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/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/Android/drawable-hdpi/icon.png -------------------------------------------------------------------------------- /demo/app/App_Resources/Android/drawable-ldpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/Android/drawable-ldpi/icon.png -------------------------------------------------------------------------------- /demo/app/App_Resources/Android/drawable-mdpi/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/Android/drawable-mdpi/icon.png -------------------------------------------------------------------------------- /demo/app/App_Resources/Android/drawable-nodpi/splashscreen.9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/Android/drawable-nodpi/splashscreen.9.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-568h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Default-568h@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-667h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Default-667h@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-736h@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Default-736h@3x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-Landscape-568h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Default-Landscape-568h@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-Landscape-667h@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Default-Landscape-667h@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-Landscape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Default-Landscape.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-Landscape@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Default-Landscape@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-Landscape@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Default-Landscape@3x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-Portrait.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Default-Portrait.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default-Portrait@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Default-Portrait@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Default.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Default@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Default@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Icon-Small-50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Icon-Small-50.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Icon-Small-50@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Icon-Small-50@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Icon-Small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Icon-Small.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/Icon-Small@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/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/Menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/Menu.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/close.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/home.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/icon-40.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/icon-40@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/icon-60.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/icon-60@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/icon-72.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-72@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/icon-72@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/icon-76.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/icon-76@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/icon.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/icon@2x.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/nearby.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/nearby.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/notifications.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/notifications.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/search.png -------------------------------------------------------------------------------- /demo/app/App_Resources/iOS/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/demo/app/App_Resources/iOS/settings.png -------------------------------------------------------------------------------- /demo/app/app.css: -------------------------------------------------------------------------------- 1 | .message { 2 | color: #000; 3 | font-size: 20; 4 | horizontal-align: center; 5 | padding:20; 6 | } 7 | 8 | StackLayout { 9 | width: 100%; 10 | height: 100%; 11 | background-color:#000; 12 | } 13 | -------------------------------------------------------------------------------- /demo/app/app.ts: -------------------------------------------------------------------------------- 1 | import * as application from 'application'; 2 | application.start({ moduleName: 'main-page' }); 3 | -------------------------------------------------------------------------------- /demo/app/main-page.ts: -------------------------------------------------------------------------------- 1 | import * as observable from 'data/observable'; 2 | import * as pages from 'ui/page'; 3 | import {HelloWorldModel} from './main-view-model'; 4 | 5 | // Event handler for Page "loaded" event attached in main-page.xml 6 | export function pageLoaded(args: observable.EventData) { 7 | // Get the event sender 8 | var page = args.object; 9 | page.bindingContext = new HelloWorldModel(); 10 | } -------------------------------------------------------------------------------- /demo/app/main-page.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /demo/app/main-view-model.ts: -------------------------------------------------------------------------------- 1 | import {Observable} from 'data/observable'; 2 | import {Color} from 'color'; 3 | import {TNSCircleMenu, TNSCircleButton} from 'nativescript-circle-menu'; 4 | 5 | export class HelloWorldModel extends Observable { 6 | private circleMenu: any; 7 | 8 | constructor() { 9 | super(); 10 | 11 | this.circleMenu = new TNSCircleMenu(); 12 | this.circleMenu.initMenu([ 13 | new TNSCircleButton({ 14 | icon: "home.png", 15 | color: new Color('#B3714F').ios, 16 | action: () => { 17 | console.log('home selected'); 18 | } 19 | }), 20 | new TNSCircleButton({ 21 | icon: "search.png", 22 | color: new Color('#7C3FE8').ios, 23 | action: () => { 24 | console.log('search selected'); 25 | } 26 | }), 27 | new TNSCircleButton({ 28 | icon: "notifications.png", 29 | color: new Color('#4E75E2').ios, 30 | action: () => { 31 | console.log('notifications selected'); 32 | } 33 | }), 34 | new TNSCircleButton({ 35 | icon: "settings.png", 36 | color: new Color('#528100').ios, 37 | action: () => { 38 | console.log('settings selected'); 39 | } 40 | }), 41 | new TNSCircleButton({ 42 | icon: "nearby.png", 43 | color: new Color('#85D5FE').ios, 44 | action: () => { 45 | console.log('nearby selected'); 46 | } 47 | }) 48 | ]); 49 | } 50 | } -------------------------------------------------------------------------------- /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/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "nativescript": { 3 | "id": "org.nativescript.demo", 4 | "tns-ios": { 5 | "version": "2.0.1" 6 | }, 7 | "tns-android": { 8 | "version": "2.0.0" 9 | } 10 | }, 11 | "dependencies": { 12 | "nativescript-circle-menu": "file:..", 13 | "tns-core-modules": "^2.0.1" 14 | }, 15 | "devDependencies": { 16 | "babel-traverse": "6.7.6", 17 | "babel-types": "6.7.7", 18 | "babylon": "6.7.0", 19 | "filewalker": "0.1.2", 20 | "lazy": "1.0.11", 21 | "nativescript-dev-typescript": "^0.3.2", 22 | "typescript": "^1.8.10" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /media/circle_menu_header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/media/circle_menu_header.png -------------------------------------------------------------------------------- /media/menu.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeviantJS/nativescript-circle-menu/a4f394cdd393962565f81d7dd14213de06d3d521/media/menu.gif -------------------------------------------------------------------------------- /nativescript-circle-menu.ios.d.ts: -------------------------------------------------------------------------------- 1 | export declare class TNSCircleButton { 2 | icon: string; 3 | color: any; 4 | action: () => {}; 5 | constructor(model?: any); 6 | } 7 | export declare class TNSCircleMenu extends NSObject { 8 | static ObjCProtocols: any[]; 9 | private _items; 10 | initMenu(items: Array, menuImage?: string, closeImage?: string, position?: CGRect, bgColor?: string, duration?: number, distance?: number): void; 11 | circleMenuWillDisplayAtIndex(menu: any, button: any, atIndex: any): void; 12 | circleMenuButtonWillSelectedAtIndex(menu: any, button: any, atIndex: any): void; 13 | } 14 | -------------------------------------------------------------------------------- /nativescript-circle-menu.ios.ts: -------------------------------------------------------------------------------- 1 | import {topmost} from 'ui/frame'; 2 | import {Color} from 'color'; 3 | 4 | declare var CircleMenu, UIImage, UIControlStateNormal, UIImageRenderingModeAlwaysTemplate, UIControlStateHighlighted, CircleMenuDelegate, UIColor, CGRectMake; 5 | 6 | export class TNSCircleButton { 7 | public icon: string; 8 | public color: any; 9 | public action: () => {}; 10 | constructor(model?: any) { 11 | if (model) { 12 | for (let key in model) { 13 | this[key] = model[key]; 14 | } 15 | } 16 | } 17 | } 18 | 19 | export class TNSCircleMenu extends NSObject { 20 | public static ObjCProtocols = [CircleMenuDelegate]; 21 | private _items: Array; 22 | 23 | public initMenu(items: Array, menuImage?: string, closeImage?: string, position?: CGRect, bgColor?: string, duration?: number, distance?: number) { 24 | this._items = items; 25 | 26 | // default to center 27 | position = position || CGRectMake((UIScreen.mainScreen().bounds.size.width - 50) / 2, (UIScreen.mainScreen().bounds.size.height - 50) / 2, 50, 50); 28 | let menu = new CircleMenu( 29 | position, 30 | menuImage || "menu.png", 31 | closeImage || "close.png", 32 | items.length, 33 | duration || .5, 34 | distance || 120); 35 | menu.backgroundColor = new Color(bgColor || '#fff').ios; 36 | menu.delegate = this; 37 | menu.layer.cornerRadius = menu.frame.size.width / 2.0; 38 | topmost().ios.controller.view.addSubview(menu); 39 | } 40 | 41 | public circleMenuWillDisplayAtIndex(menu, button, atIndex) { 42 | console.log(`circleMenu called...`); 43 | button.backgroundColor = this._items[atIndex].color; 44 | button.setImageForState(UIImage.imageNamed(this._items[atIndex].icon), UIControlStateNormal); 45 | 46 | // set highlited image 47 | let highlightedImage = UIImage.imageNamed(this._items[atIndex].icon).imageWithRenderingMode(UIImageRenderingModeAlwaysTemplate); 48 | button.setImageForState(highlightedImage, UIControlStateHighlighted); 49 | button.tintColor = UIColor.colorWithRedGreenBlueAlpha(0, 0, 0, .3); 50 | } 51 | 52 | public circleMenuButtonWillSelectedAtIndex(menu, button, atIndex) { 53 | console.log(`button selected index: ${atIndex}`); 54 | this._items[atIndex].action(); 55 | } 56 | 57 | // This is fired after the menu animates back closed 58 | // TODO: Potentially dispatch a notification event 59 | // public circleMenuButtonDidSelectedAtIndex(menu, button, atIndex) { 60 | // console.log(`button did selected: ${atIndex}`); 61 | // } 62 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nativescript-circle-menu", 3 | "version": "1.0.0", 4 | "description": "CircleMenu is a simple, elegant menu with a circular layout. http://ramotion.com.", 5 | "main": "nativescript-circle-menu.js", 6 | "nativescript": { 7 | "platforms": { 8 | "ios": "2.0.1" 9 | } 10 | }, 11 | "scripts": { 12 | "build": "tsc", 13 | "demo.ios": "npm run preparedemo && cd demo && tns emulate ios", 14 | "preparedemo": "npm run build && cd demo && tns plugin remove nativescript-circle-menu && tns plugin add .. && tns install", 15 | "setup": "cd demo && npm install && cd .. && npm run build && cd demo && tns plugin add .. && cd .." 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "https://github.com/DeviantJS/nativescript-circle-menu.git" 20 | }, 21 | "keywords": [ 22 | "NativeScript", 23 | "JavaScript", 24 | "iOS", 25 | "circle-menu", 26 | "menu" 27 | ], 28 | "author": { 29 | "name": "Nathan Walker", 30 | "email": "walkerrunpdx@gmail.com" 31 | }, 32 | "contributors": [ 33 | "Joshua Wiens (https://github.com/d3viant0ne)" 34 | ], 35 | "bugs": { 36 | "url": "https://github.com/DeviantJS/nativescript-circle-menu/issues" 37 | }, 38 | "license": { 39 | "type": "MIT", 40 | "url": "https://github.com/DeviantJS/nativescript-circle-menu/blob/master/LICENSE" 41 | }, 42 | "homepage": "https://github.com/DeviantJS/nativescript-circle-menu", 43 | "readmeFilename": "README.md", 44 | "devDependencies": { 45 | "tns-platform-declarations": "^2.0.0", 46 | "typescript": "^1.8.10" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /platforms/ios/Podfile: -------------------------------------------------------------------------------- 1 | pod 'CircleMenu' -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "removeComments": true, 6 | "experimentalDecorators": true, 7 | "sourceMap": true, 8 | "declaration": true, 9 | "noEmitOnError": false 10 | }, 11 | "files": [ 12 | "demo/node_modules/tns-core-modules/tns-core-modules.d.ts", 13 | "node_modules/tns-platform-declarations/android17.d.ts", 14 | "node_modules/tns-platform-declarations/ios.d.ts", 15 | "node_modules/tns-platform-declarations/org.nativescript.widgets.d.ts", 16 | "nativescript-circle-menu.ios.ts" 17 | ], 18 | "compileOnSave": false 19 | } --------------------------------------------------------------------------------