├── .gitignore ├── README.md ├── app ├── app.html ├── app.js ├── pages │ ├── additem │ │ ├── additem.html │ │ ├── additem.js │ │ └── additem.scss │ ├── basic-form │ │ ├── basic-form.html │ │ ├── basic-form.js │ │ └── basic-form.scss │ ├── buildform │ │ ├── buildform.html │ │ ├── buildform.js │ │ └── buildform.scss │ ├── detailitem │ │ ├── detailitem.html │ │ ├── detailitem.js │ │ └── detailitem.scss │ ├── formvalidate │ │ ├── formvalidate.html │ │ ├── formvalidate.js │ │ └── formvalidate.scss │ ├── item-details │ │ ├── item-details.html │ │ ├── item-details.js │ │ └── item-details.scss │ ├── list │ │ ├── list.html │ │ └── list.js │ └── listitem │ │ ├── listitem.html │ │ ├── listitem.js │ │ └── listitem.scss └── theme │ ├── app.core.scss │ ├── app.ios.scss │ ├── app.md.scss │ ├── app.variables.scss │ └── app.wp.scss ├── config.xml ├── gulpfile.js ├── hooks ├── README.md └── after_prepare │ └── 010_add_platform_class.js ├── ionic.config.json ├── package.json ├── resources ├── android │ ├── icon │ │ ├── drawable-hdpi-icon.png │ │ ├── drawable-ldpi-icon.png │ │ ├── drawable-mdpi-icon.png │ │ ├── drawable-xhdpi-icon.png │ │ ├── drawable-xxhdpi-icon.png │ │ └── drawable-xxxhdpi-icon.png │ └── splash │ │ ├── drawable-land-hdpi-screen.png │ │ ├── drawable-land-ldpi-screen.png │ │ ├── drawable-land-mdpi-screen.png │ │ ├── drawable-land-xhdpi-screen.png │ │ ├── drawable-land-xxhdpi-screen.png │ │ ├── drawable-land-xxxhdpi-screen.png │ │ ├── drawable-port-hdpi-screen.png │ │ ├── drawable-port-ldpi-screen.png │ │ ├── drawable-port-mdpi-screen.png │ │ ├── drawable-port-xhdpi-screen.png │ │ ├── drawable-port-xxhdpi-screen.png │ │ └── drawable-port-xxxhdpi-screen.png ├── icon.png ├── ios │ ├── icon │ │ ├── icon-40.png │ │ ├── icon-40@2x.png │ │ ├── icon-50.png │ │ ├── icon-50@2x.png │ │ ├── icon-60.png │ │ ├── icon-60@2x.png │ │ ├── icon-60@3x.png │ │ ├── icon-72.png │ │ ├── icon-72@2x.png │ │ ├── icon-76.png │ │ ├── icon-76@2x.png │ │ ├── icon-small.png │ │ ├── icon-small@2x.png │ │ ├── icon-small@3x.png │ │ ├── icon.png │ │ └── icon@2x.png │ └── splash │ │ ├── Default-568h@2x~iphone.png │ │ ├── Default-667h.png │ │ ├── Default-736h.png │ │ ├── Default-Landscape-736h.png │ │ ├── Default-Landscape@2x~ipad.png │ │ ├── Default-Landscape~ipad.png │ │ ├── Default-Portrait@2x~ipad.png │ │ ├── Default-Portrait~ipad.png │ │ ├── Default@2x~iphone.png │ │ └── Default~iphone.png └── splash.png └── www ├── img └── appicon.png ├── index.html ├── jquery.js └── materialize.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies files to intentionally ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | node_modules/ 5 | www/build/ 6 | platforms/ 7 | plugins/ 8 | *.swp 9 | .DS_Store 10 | Thumbs.db 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ionic 2 Forms Examples 2 | 3 | The documented examples here are simple, the kind I wished to have come across on the web during my early days with Ionic 2 forms. 4 | 5 | Understanding the basics are crucial in every tool. Many tutorials and blogs online took Ionic 2 forms (and Angularjs 2 forms in general) in a relatively complex manner which made it way too harder for someone like myself to come to terms with the shift. 6 | 7 | I put what I learn here (with rants on [myBlog]('https://blog.khophi.co')) to help myself now and for future projects, plus, perhaps, assist incoming Ionic 2 ionizers to get up and running in a basic way, with the understanding and background in Ionic 2 forms, enough to let them go out there, power on the Hadron Collider, and get some particles Ionized! 8 | 9 | ## Examples available here 10 | - See how to create basic form in Ionic 2, using `ngForm`, `ngControl` and `ControlGroup` implicitly 11 | - How to use `FormBuilder` to explicitly create a form, with `Validators` and other customizations 12 | 13 | ## Screenshots: 14 | [![ionic 2 basic form][2]][2] 15 | [2]: http://i.imgur.com/Yj4H8Am.png 16 | 17 | ## Build 18 | Test it out locally 19 | - Clone this repo 20 | - `npm install` 21 | - `ionic serve -l` 22 | 23 | Get ionized! -------------------------------------------------------------------------------- /app/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Pages 5 | 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /app/app.js: -------------------------------------------------------------------------------- 1 | import { App, IonicApp, Platform, MenuController } from 'ionic-angular'; 2 | import { StatusBar } from 'ionic-native'; 3 | import { BasicformPage } from './pages/basic-form/basic-form'; 4 | import { ListPage } from './pages/list/list'; 5 | import { BuildformPage } from './pages/buildform/buildform'; 6 | import { FormvalidatePage } from './pages/formvalidate/formvalidate'; 7 | 8 | @App({ 9 | templateUrl: 'build/app.html', 10 | config: {} 11 | }) 12 | class MyApp { 13 | static get parameters() { 14 | return [ 15 | [IonicApp], 16 | [Platform], 17 | [MenuController] 18 | ]; 19 | } 20 | 21 | constructor(app, platform, menu) { 22 | // set up our app 23 | this.app = app; 24 | this.platform = platform; 25 | this.menu = menu; 26 | this.initializeApp(); 27 | 28 | // set our app's pages 29 | this.pages = [ 30 | { title: 'Basic Form', component: BasicformPage }, 31 | { title: 'Form Builder', component: BuildformPage }, 32 | { title: 'Form Builder w/ Validate', component: FormvalidatePage } 33 | ]; 34 | 35 | // make BasicformPage the root (or first) page 36 | // this.rootPage = FormvalidatePage; 37 | // this.rootPage = BuildformPage; 38 | this.rootPage = BasicformPage; 39 | } 40 | 41 | initializeApp() { 42 | this.platform.ready().then(() => { 43 | // Okay, so the platform is ready and our plugins are available. 44 | // Here you can do any higher level native things you might need. 45 | StatusBar.styleDefault(); 46 | }); 47 | } 48 | 49 | openPage(page) { 50 | // close the menu when clicking a link from the menu 51 | this.menu.close(); 52 | // navigate to the new page if it is not the current page 53 | let nav = this.app.getComponent('nav'); 54 | nav.setRoot(page.component); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /app/pages/additem/additem.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | additem 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /app/pages/additem/additem.js: -------------------------------------------------------------------------------- 1 | import {Page, NavController} from 'ionic-angular'; 2 | 3 | /* 4 | Generated class for the AdditemPage page. 5 | 6 | See http://ionicframework.com/docs/v2/components/#navigation for more info on 7 | Ionic pages and navigation. 8 | */ 9 | @Page({ 10 | templateUrl: 'build/pages/additem/additem.html', 11 | }) 12 | export class AdditemPage { 13 | static get parameters() { 14 | return [[NavController]]; 15 | } 16 | 17 | constructor(nav) { 18 | this.nav = nav; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /app/pages/additem/additem.scss: -------------------------------------------------------------------------------- 1 | .additem { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /app/pages/basic-form/basic-form.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | Hello Ionic 6 | 7 | 8 |

9 | Form values submitted will be displayed in console. F12 on Chrome to open console 10 |

11 | 12 |
13 | 19 | 20 | 21 | Browsers 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | Category 33 | 34 | Select me 35 | 36 | 37 | 38 | My Text here 39 | 40 | 41 | 43 |
44 | 45 | 46 |

47 | You submitted "{{ myData.mytext }}" 48 |

49 | 50 | -------------------------------------------------------------------------------- /app/pages/basic-form/basic-form.js: -------------------------------------------------------------------------------- 1 | import {Page} from 'ionic-angular'; 2 | 3 | @Page({ 4 | templateUrl: 'build/pages/basic-form/basic-form.html', 5 | }) 6 | 7 | export class BasicformPage { 8 | constructor() { 9 | this.myData = null; 10 | } 11 | 12 | onSubmit(formData) { 13 | console.log('Form submission is ', formData); 14 | this.myData = formData; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /app/pages/basic-form/basic-form.scss: -------------------------------------------------------------------------------- 1 | .getting-started { 2 | p { 3 | margin: 20px 0; 4 | line-height: 22px; 5 | font-size: 16px; 6 | } 7 | } 8 | 9 | 10 | .dropdown-content { 11 | background-color: #fff; 12 | margin: 0; 13 | display: none; 14 | min-width: 100px; 15 | max-height: 650px; 16 | overflow-y: auto; 17 | opacity: 0; 18 | position: absolute; 19 | z-index: 999; 20 | will-change: width, height; 21 | } 22 | 23 | .dropdown-content li { 24 | clear: both; 25 | color: rgba(0, 0, 0, 0.87); 26 | cursor: pointer; 27 | min-height: 50px; 28 | line-height: 1.5rem; 29 | width: 100%; 30 | text-align: left; 31 | text-transform: none; 32 | } 33 | 34 | .dropdown-content li:hover, .dropdown-content li.active, .dropdown-content li.selected { 35 | background-color: #eee; 36 | } 37 | 38 | .dropdown-content li.active.selected { 39 | background-color: #e1e1e1; 40 | } 41 | 42 | .dropdown-content li.divider { 43 | min-height: 0; 44 | height: 1px; 45 | } 46 | 47 | .dropdown-content li > a, .dropdown-content li > span { 48 | font-size: 16px; 49 | color: #26a69a; 50 | display: block; 51 | line-height: 22px; 52 | padding: 14px 16px; 53 | } 54 | 55 | .dropdown-content li > span > label { 56 | top: 1px; 57 | left: 3px; 58 | height: 18px; 59 | } 60 | 61 | .dropdown-content li > a > i { 62 | height: inherit; 63 | line-height: inherit; 64 | } 65 | 66 | select:focus { 67 | outline: 1px solid #c9f3ef; 68 | } 69 | 70 | /* Select Field 71 | ========================================================================== */ 72 | select { 73 | display: none; 74 | } 75 | 76 | select.browser-default { 77 | display: block; 78 | } 79 | 80 | select { 81 | background-color: rgba(255, 255, 255, 0.9); 82 | width: 100%; 83 | padding: 5px; 84 | border: 1px solid #f2f2f2; 85 | border-radius: 2px; 86 | height: 3rem; 87 | } 88 | 89 | .select-label { 90 | position: absolute; 91 | } 92 | 93 | .select-wrapper { 94 | position: relative; 95 | } 96 | 97 | .select-wrapper input.select-dropdown { 98 | position: relative; 99 | cursor: pointer; 100 | background-color: transparent; 101 | border: none; 102 | border-bottom: 1px solid #9e9e9e; 103 | outline: none; 104 | height: 3rem; 105 | line-height: 3rem; 106 | width: 100%; 107 | font-size: 1rem; 108 | margin: 0 0 15px 0; 109 | padding: 0; 110 | display: block; 111 | } 112 | 113 | .select-wrapper span.caret { 114 | color: initial; 115 | position: absolute; 116 | right: 0; 117 | top: 16px; 118 | font-size: 10px; 119 | } 120 | 121 | .select-wrapper span.caret.disabled { 122 | color: rgba(0, 0, 0, 0.26); 123 | } 124 | 125 | .select-wrapper + label { 126 | position: absolute; 127 | top: -14px; 128 | font-size: 0.8rem; 129 | } 130 | 131 | select:disabled { 132 | color: rgba(0, 0, 0, 0.3); 133 | } 134 | 135 | .select-wrapper input.select-dropdown:disabled { 136 | color: rgba(0, 0, 0, 0.3); 137 | cursor: default; 138 | -webkit-user-select: none; 139 | /* webkit (safari, chrome) browsers */ 140 | -moz-user-select: none; 141 | /* mozilla browsers */ 142 | -ms-user-select: none; 143 | /* IE10+ */ 144 | border-bottom: 1px solid rgba(0, 0, 0, 0.3); 145 | } 146 | 147 | .select-wrapper i { 148 | color: rgba(0, 0, 0, 0.3); 149 | } 150 | 151 | .select-dropdown li.disabled, 152 | .select-dropdown li.disabled > span, 153 | .select-dropdown li.optgroup { 154 | color: rgba(0, 0, 0, 0.3); 155 | background-color: transparent; 156 | } 157 | 158 | .prefix ~ .select-wrapper { 159 | margin-left: 3rem; 160 | width: 92%; 161 | width: calc(100% - 3rem); 162 | } 163 | 164 | .prefix ~ label { 165 | margin-left: 3rem; 166 | } 167 | 168 | .select-dropdown li img { 169 | height: 40px; 170 | width: 40px; 171 | margin: 5px 15px; 172 | float: right; 173 | } 174 | 175 | .select-dropdown li.optgroup { 176 | border-top: 1px solid #eee; 177 | } 178 | 179 | .select-dropdown li.optgroup.selected > span { 180 | color: rgba(0, 0, 0, 0.7); 181 | } 182 | 183 | .select-dropdown li.optgroup > span { 184 | color: rgba(0, 0, 0, 0.4); 185 | } 186 | 187 | .select-dropdown li.optgroup ~ li.optgroup-option { 188 | padding-left: 1rem; 189 | } 190 | 191 | select { 192 | text-transform: none; 193 | } 194 | 195 | select:focus { 196 | outline: 1px solid #c9f3ef; 197 | } 198 | 199 | -------------------------------------------------------------------------------- /app/pages/buildform/buildform.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | Form Builder Example 6 | 7 | 8 |

9 | Form values submitted will be displayed in console. F12 on Chrome to open console 10 |

11 | 12 |
13 | 14 | Subject 15 | 16 | 17 | 18 | Message 19 | 20 | 21 | 23 |
24 | 25 | 26 |

27 | You submitted:
Subject: "{{ myData.subject }}"
Message: "{{ myData.message }}" 28 |

29 | 30 | -------------------------------------------------------------------------------- /app/pages/buildform/buildform.js: -------------------------------------------------------------------------------- 1 | import { Page } from 'ionic-angular'; 2 | import { FormBuilder, ControlGroup } from 'angular2/common'; 3 | 4 | @Page({ 5 | templateUrl: 'build/pages/buildform/buildform.html', 6 | }) 7 | 8 | export class BuildformPage { 9 | static get parameters() { 10 | return [[FormBuilder]]; 11 | } 12 | 13 | constructor(formBuilder) { 14 | this.nav = nav; 15 | this.myData = null; 16 | this.myForm = formBuilder.group({ 17 | 'subject': '', 18 | 'message': '' 19 | }) 20 | } 21 | 22 | onSubmit(formData) { 23 | console.log('Form submitted is ', formData); 24 | this.myData = formData; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /app/pages/buildform/buildform.scss: -------------------------------------------------------------------------------- 1 | .buildform { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /app/pages/detailitem/detailitem.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | detailitem 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /app/pages/detailitem/detailitem.js: -------------------------------------------------------------------------------- 1 | import {Page, NavController} from 'ionic-angular'; 2 | 3 | /* 4 | Generated class for the DetailitemPage page. 5 | 6 | See http://ionicframework.com/docs/v2/components/#navigation for more info on 7 | Ionic pages and navigation. 8 | */ 9 | @Page({ 10 | templateUrl: 'build/pages/detailitem/detailitem.html', 11 | }) 12 | export class DetailitemPage { 13 | static get parameters() { 14 | return [[NavController]]; 15 | } 16 | 17 | constructor(nav) { 18 | this.nav = nav; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /app/pages/detailitem/detailitem.scss: -------------------------------------------------------------------------------- 1 | .detailitem { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /app/pages/formvalidate/formvalidate.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | Form with Validation 6 | 7 | 8 |

9 | Form values submitted will be displayed in console. F12 on Chrome to open console 10 |

11 | 12 |
13 | 14 | Subject 15 | 16 | 17 |

Subject is empty

18 |

Subject is required

19 | 20 | Message 21 | 22 | 23 |

Message is empty

24 | 26 |
27 | 28 | 29 |

30 | You submitted: 31 |
Subject: "{{ myData.subject }}" 32 |
Message: "{{ myData.message }}" 33 |

34 | 35 | -------------------------------------------------------------------------------- /app/pages/formvalidate/formvalidate.js: -------------------------------------------------------------------------------- 1 | import {Page, NavController} from 'ionic-angular'; 2 | import { FormBuilder, Validators, AbstractControl, ControlGroup } from 'angular2/common'; 3 | 4 | @Page({ 5 | templateUrl: 'build/pages/formvalidate/formvalidate.html', 6 | }) 7 | export class FormvalidatePage { 8 | static get parameters() { 9 | return [[FormBuilder]]; 10 | } 11 | 12 | constructor(formBuilder) { 13 | this.nav = nav; 14 | this.myData = null; 15 | this.myForm = formBuilder.group({ 16 | 'subject': ['', Validators.required], 17 | 'message': ['', Validators.required] 18 | }) 19 | 20 | this.subject = this.myForm.controls['subject']; 21 | this.message = this.myForm.controls['message'] 22 | } 23 | 24 | onSubmit(formData) { 25 | console.log('Form submitted is ', formData); 26 | this.myData = formData; 27 | } 28 | } -------------------------------------------------------------------------------- /app/pages/formvalidate/formvalidate.scss: -------------------------------------------------------------------------------- 1 | .formvalidate { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /app/pages/item-details/item-details.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | Item Details 6 | 7 | 8 | 9 |
10 | {{selectedItem.title}} 11 | 12 |
13 | You navigated here from {{selectedItem.title}} 14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /app/pages/item-details/item-details.js: -------------------------------------------------------------------------------- 1 | import {Page, NavController, NavParams} from 'ionic-angular'; 2 | 3 | 4 | @Page({ 5 | templateUrl: 'build/pages/item-details/item-details.html' 6 | }) 7 | export class ItemDetailsPage { 8 | static get parameters() { 9 | return [[NavController], [NavParams]]; 10 | } 11 | 12 | constructor(nav, navParams) { 13 | this.nav = nav; 14 | // If we navigated to this page, we will have an item available as a nav param 15 | this.selectedItem = navParams.get('item'); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /app/pages/item-details/item-details.scss: -------------------------------------------------------------------------------- 1 | div.selection { 2 | font-size: 22px; 3 | display: block; 4 | text-align: center; 5 | padding-top: 5%; 6 | } 7 | 8 | -------------------------------------------------------------------------------- /app/pages/list/list.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | My First List 6 | 7 | 8 | 9 | 10 | 17 | 18 |
19 | You navigated here from {{selectedItem.title}} 20 |
21 | 22 | -------------------------------------------------------------------------------- /app/pages/list/list.js: -------------------------------------------------------------------------------- 1 | import {Page, NavController, NavParams} from 'ionic-angular'; 2 | import {ItemDetailsPage} from '../item-details/item-details'; 3 | 4 | 5 | @Page({ 6 | templateUrl: 'build/pages/list/list.html' 7 | }) 8 | export class ListPage { 9 | static get parameters() { 10 | return [[NavController], [NavParams]]; 11 | } 12 | 13 | constructor(nav, navParams) { 14 | this.nav = nav; 15 | 16 | // If we navigated to this page, we will have an item available as a nav param 17 | this.selectedItem = navParams.get('item'); 18 | 19 | this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane', 20 | 'american-football', 'boat', 'bluetooth', 'build']; 21 | 22 | this.items = []; 23 | for(let i = 1; i < 11; i++) { 24 | this.items.push({ 25 | title: 'Item ' + i, 26 | note: 'This is item #' + i, 27 | icon: this.icons[Math.floor(Math.random() * this.icons.length)] 28 | }); 29 | } 30 | } 31 | 32 | itemTapped(event, item) { 33 | this.nav.push(ItemDetailsPage, { 34 | item: item 35 | }); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /app/pages/listitem/listitem.html: -------------------------------------------------------------------------------- 1 | 2 | All Items 3 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /app/pages/listitem/listitem.js: -------------------------------------------------------------------------------- 1 | import {Page, NavController} from 'ionic-angular'; 2 | 3 | /* 4 | Generated class for the ListitemPage page. 5 | 6 | See http://ionicframework.com/docs/v2/components/#navigation for more info on 7 | Ionic pages and navigation. 8 | */ 9 | @Page({ 10 | templateUrl: 'build/pages/listitem/listitem.html', 11 | }) 12 | export class ListitemPage { 13 | static get parameters() { 14 | return [[NavController]]; 15 | } 16 | 17 | constructor(nav) { 18 | this.nav = nav; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /app/pages/listitem/listitem.scss: -------------------------------------------------------------------------------- 1 | .listitem { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /app/theme/app.core.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Shared Imports 5 | // -------------------------------------------------- 6 | // These are the imports which make up the design of this app. 7 | // By default each design mode includes these shared imports. 8 | // App Shared Sass variables belong in app.variables.scss. 9 | 10 | @import "../pages/basic-form/basic-form.scss"; 11 | @import "../pages/item-details/item-details.scss"; 12 | @import "../pages/buildform/buildform.scss"; 13 | @import "../pages/formvalidate/formvalidate.scss"; -------------------------------------------------------------------------------- /app/theme/app.ios.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Shared Variables 5 | // -------------------------------------------------- 6 | // Shared Sass variables go in the app.variables.scss file 7 | @import 'app.variables'; 8 | 9 | 10 | // App iOS Variables 11 | // -------------------------------------------------- 12 | // iOS only Sass variables can go here 13 | 14 | 15 | // Ionic iOS Sass 16 | // -------------------------------------------------- 17 | // Custom App variables must be declared before importing Ionic. 18 | // Ionic will use its default values when a custom variable isn't provided. 19 | @import "ionic.ios"; 20 | 21 | 22 | // App Shared Sass 23 | // -------------------------------------------------- 24 | // All Sass files that make up this app goes into the app.core.scss file. 25 | // For simpler CSS overrides, custom app CSS must come after Ionic's CSS. 26 | @import 'app.core'; 27 | 28 | 29 | // App iOS Only Sass 30 | // -------------------------------------------------- 31 | // CSS that should only apply to the iOS app 32 | -------------------------------------------------------------------------------- /app/theme/app.md.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Shared Variables 5 | // -------------------------------------------------- 6 | // Shared Sass variables go in the app.variables.scss file 7 | @import 'app.variables'; 8 | 9 | 10 | // App Material Design Variables 11 | // -------------------------------------------------- 12 | // Material Design only Sass variables can go here 13 | 14 | 15 | // Ionic Material Design Sass 16 | // -------------------------------------------------- 17 | // Custom App variables must be declared before importing Ionic. 18 | // Ionic will use its default values when a custom variable isn't provided. 19 | @import "ionic.md"; 20 | 21 | 22 | // App Shared Sass 23 | // -------------------------------------------------- 24 | // All Sass files that make up this app goes into the app.core.scss file. 25 | // For simpler CSS overrides, custom app CSS must come after Ionic's CSS. 26 | @import 'app.core'; 27 | 28 | 29 | // App Material Design Only Sass 30 | // -------------------------------------------------- 31 | // CSS that should only apply to the Material Design app 32 | -------------------------------------------------------------------------------- /app/theme/app.variables.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | // Ionic Shared Functions 4 | // -------------------------------------------------- 5 | // Makes Ionic Sass functions available to your App 6 | 7 | @import 'globals.core'; 8 | 9 | // App Shared Variables 10 | // -------------------------------------------------- 11 | // To customize the look and feel of this app, you can override 12 | // the Sass variables found in Ionic's source scss files. Setting 13 | // variables before Ionic's Sass will use these variables rather than 14 | // Ionic's default Sass variable values. App Shared Sass imports belong 15 | // in the app.core.scss file and not this file. Sass variables specific 16 | // to the mode belong in either the app.ios.scss or app.md.scss files. 17 | 18 | 19 | // App Shared Color Variables 20 | // -------------------------------------------------- 21 | // It's highly recommended to change the default colors 22 | // to match your app's branding. Ionic uses a Sass map of 23 | // colors so you can add, rename and remove colors as needed. 24 | // The "primary" color is the only required color in the map. 25 | // Both iOS and MD colors can be further customized if colors 26 | // are different per mode. 27 | 28 | $colors: ( 29 | primary: #387ef5, 30 | secondary: #32db64, 31 | danger: #f53d3d, 32 | light: #f4f4f4, 33 | dark: #222, 34 | favorite: #69BB7B 35 | ); 36 | -------------------------------------------------------------------------------- /app/theme/app.wp.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Shared Variables 5 | // -------------------------------------------------- 6 | // Shared Sass variables go in the app.variables.scss file 7 | @import 'app.variables'; 8 | 9 | 10 | // App Windows Variables 11 | // -------------------------------------------------- 12 | // Windows only Sass variables can go here 13 | 14 | 15 | // Ionic Windows Sass 16 | // -------------------------------------------------- 17 | // Custom App variables must be declared before importing Ionic. 18 | // Ionic will use its default values when a custom variable isn't provided. 19 | @import "ionic.wp"; 20 | 21 | 22 | // App Shared Sass 23 | // -------------------------------------------------- 24 | // All Sass files that make up this app goes into the app.core.scss file. 25 | // For simpler CSS overrides, custom app CSS must come after Ionic's CSS. 26 | @import 'app.core'; 27 | 28 | 29 | // App Windows Only Sass 30 | // -------------------------------------------------- 31 | // CSS that should only apply to the Windows app 32 | -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | MyIonic2Project 4 | An Ionic Framework and Cordova project. 5 | Ionic Framework Team 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | gulpWatch = require('gulp-watch'), 3 | del = require('del'), 4 | runSequence = require('run-sequence'), 5 | argv = process.argv; 6 | 7 | 8 | /** 9 | * Ionic hooks 10 | * Add ':before' or ':after' to any Ionic project command name to run the specified 11 | * tasks before or after the command. 12 | */ 13 | gulp.task('serve:before', ['watch']); 14 | gulp.task('emulate:before', ['build']); 15 | gulp.task('deploy:before', ['build']); 16 | gulp.task('build:before', ['build']); 17 | 18 | // we want to 'watch' when livereloading 19 | var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1; 20 | gulp.task('run:before', [shouldWatch ? 'watch' : 'build']); 21 | 22 | /** 23 | * Ionic Gulp tasks, for more information on each see 24 | * https://github.com/driftyco/ionic-gulp-tasks 25 | * 26 | * Using these will allow you to stay up to date if the default Ionic 2 build 27 | * changes, but you are of course welcome (and encouraged) to customize your 28 | * build however you see fit. 29 | */ 30 | var buildBrowserify = require('ionic-gulp-browserify-es2015'); 31 | var buildSass = require('ionic-gulp-sass-build'); 32 | var copyHTML = require('ionic-gulp-html-copy'); 33 | var copyFonts = require('ionic-gulp-fonts-copy'); 34 | var copyScripts = require('ionic-gulp-scripts-copy'); 35 | 36 | var isRelease = argv.indexOf('--release') > -1; 37 | 38 | gulp.task('watch', ['clean'], function(done){ 39 | runSequence( 40 | ['sass', 'html', 'fonts', 'scripts'], 41 | function(){ 42 | gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); }); 43 | gulpWatch('app/**/*.html', function(){ gulp.start('html'); }); 44 | buildBrowserify({ watch: true }).on('end', done); 45 | } 46 | ); 47 | }); 48 | 49 | gulp.task('build', ['clean'], function(done){ 50 | runSequence( 51 | ['sass', 'html', 'fonts', 'scripts'], 52 | function(){ 53 | buildBrowserify({ 54 | minify: isRelease, 55 | browserifyOptions: { 56 | debug: !isRelease 57 | }, 58 | uglifyOptions: { 59 | mangle: false 60 | } 61 | }).on('end', done); 62 | } 63 | ); 64 | }); 65 | 66 | gulp.task('sass', buildSass); 67 | gulp.task('html', copyHTML); 68 | gulp.task('fonts', copyFonts); 69 | gulp.task('scripts', copyScripts); 70 | gulp.task('clean', function(){ 71 | return del('www/build'); 72 | }); 73 | -------------------------------------------------------------------------------- /hooks/README.md: -------------------------------------------------------------------------------- 1 | 21 | # Cordova Hooks 22 | 23 | Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system to customize cordova commands. Hook scripts could be defined by adding them to the special predefined folder (`/hooks`) or via configuration files (`config.xml` and `plugin.xml`) and run serially in the following order: 24 | * Application hooks from `/hooks`; 25 | * Application hooks from `config.xml`; 26 | * Plugin hooks from `plugins/.../plugin.xml`. 27 | 28 | __Remember__: Make your scripts executable. 29 | 30 | __Note__: `.cordova/hooks` directory is also supported for backward compatibility, but we don't recommend using it as it is deprecated. 31 | 32 | ## Supported hook types 33 | The following hook types are supported: 34 | 35 | after_build/ 36 | after_compile/ 37 | after_docs/ 38 | after_emulate/ 39 | after_platform_add/ 40 | after_platform_rm/ 41 | after_platform_ls/ 42 | after_plugin_add/ 43 | after_plugin_ls/ 44 | after_plugin_rm/ 45 | after_plugin_search/ 46 | after_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed 47 | after_prepare/ 48 | after_run/ 49 | after_serve/ 50 | before_build/ 51 | before_compile/ 52 | before_docs/ 53 | before_emulate/ 54 | before_platform_add/ 55 | before_platform_rm/ 56 | before_platform_ls/ 57 | before_plugin_add/ 58 | before_plugin_ls/ 59 | before_plugin_rm/ 60 | before_plugin_search/ 61 | before_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed 62 | before_plugin_uninstall/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being uninstalled 63 | before_prepare/ 64 | before_run/ 65 | before_serve/ 66 | pre_package/ <-- Windows 8 and Windows Phone only. 67 | 68 | ## Ways to define hooks 69 | ### Via '/hooks' directory 70 | To execute custom action when corresponding hook type is fired, use hook type as a name for a subfolder inside 'hooks' directory and place you script file here, for example: 71 | 72 | # script file will be automatically executed after each build 73 | hooks/after_build/after_build_custom_action.js 74 | 75 | 76 | ### Config.xml 77 | 78 | Hooks can be defined in project's `config.xml` using `` elements, for example: 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | ... 89 | 90 | 91 | 92 | 93 | 94 | 95 | ... 96 | 97 | 98 | ### Plugin hooks (plugin.xml) 99 | 100 | As a plugin developer you can define hook scripts using `` elements in a `plugin.xml` like that: 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | ... 109 | 110 | 111 | `before_plugin_install`, `after_plugin_install`, `before_plugin_uninstall` plugin hooks will be fired exclusively for the plugin being installed/uninstalled. 112 | 113 | ## Script Interface 114 | 115 | ### Javascript 116 | 117 | If you are writing hooks in Javascript you should use the following module definition: 118 | ```javascript 119 | module.exports = function(context) { 120 | ... 121 | } 122 | ``` 123 | 124 | You can make your scipts async using Q: 125 | ```javascript 126 | module.exports = function(context) { 127 | var Q = context.requireCordovaModule('q'); 128 | var deferral = new Q.defer(); 129 | 130 | setTimeout(function(){ 131 | console.log('hook.js>> end'); 132 | deferral.resolve(); 133 | }, 1000); 134 | 135 | return deferral.promise; 136 | } 137 | ``` 138 | 139 | `context` object contains hook type, executed script full path, hook options, command-line arguments passed to Cordova and top-level "cordova" object: 140 | ```json 141 | { 142 | "hook": "before_plugin_install", 143 | "scriptLocation": "c:\\script\\full\\path\\appBeforePluginInstall.js", 144 | "cmdLine": "The\\exact\\command\\cordova\\run\\with arguments", 145 | "opts": { 146 | "projectRoot":"C:\\path\\to\\the\\project", 147 | "cordova": { 148 | "platforms": ["wp8"], 149 | "plugins": ["com.plugin.withhooks"], 150 | "version": "0.21.7-dev" 151 | }, 152 | "plugin": { 153 | "id": "com.plugin.withhooks", 154 | "pluginInfo": { 155 | ... 156 | }, 157 | "platform": "wp8", 158 | "dir": "C:\\path\\to\\the\\project\\plugins\\com.plugin.withhooks" 159 | } 160 | }, 161 | "cordova": {...} 162 | } 163 | 164 | ``` 165 | `context.opts.plugin` object will only be passed to plugin hooks scripts. 166 | 167 | You can also require additional Cordova modules in your script using `context.requireCordovaModule` in the following way: 168 | ```javascript 169 | var Q = context.requireCordovaModule('q'); 170 | ``` 171 | 172 | __Note__: new module loader script interface is used for the `.js` files defined via `config.xml` or `plugin.xml` only. 173 | For compatibility reasons hook files specified via `/hooks` folders are run via Node child_process spawn, see 'Non-javascript' section below. 174 | 175 | ### Non-javascript 176 | 177 | Non-javascript scripts are run via Node child_process spawn from the project's root directory and have the root directory passes as the first argument. All other options are passed to the script using environment variables: 178 | 179 | * CORDOVA_VERSION - The version of the Cordova-CLI. 180 | * CORDOVA_PLATFORMS - Comma separated list of platforms that the command applies to (e.g.: android, ios). 181 | * CORDOVA_PLUGINS - Comma separated list of plugin IDs that the command applies to (e.g.: org.apache.cordova.file, org.apache.cordova.file-transfer) 182 | * CORDOVA_HOOK - Path to the hook that is being executed. 183 | * CORDOVA_CMDLINE - The exact command-line arguments passed to cordova (e.g.: cordova run ios --emulate) 184 | 185 | If a script returns a non-zero exit code, then the parent cordova command will be aborted. 186 | 187 | ## Writing hooks 188 | 189 | We highly recommend writing your hooks using Node.js so that they are 190 | cross-platform. Some good examples are shown here: 191 | 192 | [http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/](http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/) 193 | 194 | Also, note that even if you are working on Windows, and in case your hook scripts aren't bat files (which is recommended, if you want your scripts to work in non-Windows operating systems) Cordova CLI will expect a shebang line as the first line for it to know the interpreter it needs to use to launch the script. The shebang line should match the following example: 195 | 196 | #!/usr/bin/env [name_of_interpreter_executable] 197 | -------------------------------------------------------------------------------- /hooks/after_prepare/010_add_platform_class.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | // Add Platform Class 4 | // v1.0 5 | // Automatically adds the platform class to the body tag 6 | // after the `prepare` command. By placing the platform CSS classes 7 | // directly in the HTML built for the platform, it speeds up 8 | // rendering the correct layout/style for the specific platform 9 | // instead of waiting for the JS to figure out the correct classes. 10 | 11 | var fs = require('fs'); 12 | var path = require('path'); 13 | 14 | var rootdir = process.argv[2]; 15 | 16 | function addPlatformBodyTag(indexPath, platform) { 17 | // add the platform class to the body tag 18 | try { 19 | var platformClass = 'platform-' + platform; 20 | var cordovaClass = 'platform-cordova platform-webview'; 21 | 22 | var html = fs.readFileSync(indexPath, 'utf8'); 23 | 24 | var bodyTag = findBodyTag(html); 25 | if(!bodyTag) return; // no opening body tag, something's wrong 26 | 27 | if(bodyTag.indexOf(platformClass) > -1) return; // already added 28 | 29 | var newBodyTag = bodyTag; 30 | 31 | var classAttr = findClassAttr(bodyTag); 32 | if(classAttr) { 33 | // body tag has existing class attribute, add the classname 34 | var endingQuote = classAttr.substring(classAttr.length-1); 35 | var newClassAttr = classAttr.substring(0, classAttr.length-1); 36 | newClassAttr += ' ' + platformClass + ' ' + cordovaClass + endingQuote; 37 | newBodyTag = bodyTag.replace(classAttr, newClassAttr); 38 | 39 | } else { 40 | // add class attribute to the body tag 41 | newBodyTag = bodyTag.replace('>', ' class="' + platformClass + ' ' + cordovaClass + '">'); 42 | } 43 | 44 | html = html.replace(bodyTag, newBodyTag); 45 | 46 | fs.writeFileSync(indexPath, html, 'utf8'); 47 | 48 | process.stdout.write('add to body class: ' + platformClass + '\n'); 49 | } catch(e) { 50 | process.stdout.write(e); 51 | } 52 | } 53 | 54 | function findBodyTag(html) { 55 | // get the body tag 56 | try{ 57 | return html.match(/])(.*?)>/gi)[0]; 58 | }catch(e){} 59 | } 60 | 61 | function findClassAttr(bodyTag) { 62 | // get the body tag's class attribute 63 | try{ 64 | return bodyTag.match(/ class=["|'](.*?)["|']/gi)[0]; 65 | }catch(e){} 66 | } 67 | 68 | if (rootdir) { 69 | 70 | // go through each of the platform directories that have been prepared 71 | var platforms = (process.env.CORDOVA_PLATFORMS ? process.env.CORDOVA_PLATFORMS.split(',') : []); 72 | 73 | for(var x=0; x 2 | 3 | 4 | Ionic 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /www/materialize.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Materialize v0.97.6 (http://materializecss.com) 3 | * Copyright 2014-2015 Materialize 4 | * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE) 5 | */ 6 | // Check for jQuery. 7 | if (typeof(jQuery) === 'undefined') { 8 | var jQuery; 9 | // Check if require is a defined function. 10 | if (typeof(require) === 'function') { 11 | jQuery = $ = require('jquery'); 12 | // Else use the dollar sign alias. 13 | } else { 14 | jQuery = $; 15 | } 16 | } 17 | ; 18 | 19 | // t: current time, b: begInnIng value, c: change In value, d: duration 20 | jQuery.easing['jswing'] = jQuery.easing['swing']; 21 | 22 | jQuery.extend( jQuery.easing, 23 | { 24 | def: 'easeOutQuad', 25 | swing: function (x, t, b, c, d) { 26 | //alert(jQuery.easing.default); 27 | return jQuery.easing[jQuery.easing.def](x, t, b, c, d); 28 | }, 29 | easeInQuad: function (x, t, b, c, d) { 30 | return c*(t/=d)*t + b; 31 | }, 32 | easeOutQuad: function (x, t, b, c, d) { 33 | return -c *(t/=d)*(t-2) + b; 34 | }, 35 | easeInOutQuad: function (x, t, b, c, d) { 36 | if ((t/=d/2) < 1) return c/2*t*t + b; 37 | return -c/2 * ((--t)*(t-2) - 1) + b; 38 | }, 39 | easeInCubic: function (x, t, b, c, d) { 40 | return c*(t/=d)*t*t + b; 41 | }, 42 | easeOutCubic: function (x, t, b, c, d) { 43 | return c*((t=t/d-1)*t*t + 1) + b; 44 | }, 45 | easeInOutCubic: function (x, t, b, c, d) { 46 | if ((t/=d/2) < 1) return c/2*t*t*t + b; 47 | return c/2*((t-=2)*t*t + 2) + b; 48 | }, 49 | easeInQuart: function (x, t, b, c, d) { 50 | return c*(t/=d)*t*t*t + b; 51 | }, 52 | easeOutQuart: function (x, t, b, c, d) { 53 | return -c * ((t=t/d-1)*t*t*t - 1) + b; 54 | }, 55 | easeInOutQuart: function (x, t, b, c, d) { 56 | if ((t/=d/2) < 1) return c/2*t*t*t*t + b; 57 | return -c/2 * ((t-=2)*t*t*t - 2) + b; 58 | }, 59 | easeInQuint: function (x, t, b, c, d) { 60 | return c*(t/=d)*t*t*t*t + b; 61 | }, 62 | easeOutQuint: function (x, t, b, c, d) { 63 | return c*((t=t/d-1)*t*t*t*t + 1) + b; 64 | }, 65 | easeInOutQuint: function (x, t, b, c, d) { 66 | if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; 67 | return c/2*((t-=2)*t*t*t*t + 2) + b; 68 | }, 69 | easeInSine: function (x, t, b, c, d) { 70 | return -c * Math.cos(t/d * (Math.PI/2)) + c + b; 71 | }, 72 | easeOutSine: function (x, t, b, c, d) { 73 | return c * Math.sin(t/d * (Math.PI/2)) + b; 74 | }, 75 | easeInOutSine: function (x, t, b, c, d) { 76 | return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; 77 | }, 78 | easeInExpo: function (x, t, b, c, d) { 79 | return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; 80 | }, 81 | easeOutExpo: function (x, t, b, c, d) { 82 | return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 83 | }, 84 | easeInOutExpo: function (x, t, b, c, d) { 85 | if (t==0) return b; 86 | if (t==d) return b+c; 87 | if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; 88 | return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 89 | }, 90 | easeInCirc: function (x, t, b, c, d) { 91 | return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; 92 | }, 93 | easeOutCirc: function (x, t, b, c, d) { 94 | return c * Math.sqrt(1 - (t=t/d-1)*t) + b; 95 | }, 96 | easeInOutCirc: function (x, t, b, c, d) { 97 | if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; 98 | return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; 99 | }, 100 | easeInElastic: function (x, t, b, c, d) { 101 | var s=1.70158;var p=0;var a=c; 102 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 103 | if (a < Math.abs(c)) { a=c; var s=p/4; } 104 | else var s = p/(2*Math.PI) * Math.asin (c/a); 105 | return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 106 | }, 107 | easeOutElastic: function (x, t, b, c, d) { 108 | var s=1.70158;var p=0;var a=c; 109 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 110 | if (a < Math.abs(c)) { a=c; var s=p/4; } 111 | else var s = p/(2*Math.PI) * Math.asin (c/a); 112 | return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; 113 | }, 114 | easeInOutElastic: function (x, t, b, c, d) { 115 | var s=1.70158;var p=0;var a=c; 116 | if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); 117 | if (a < Math.abs(c)) { a=c; var s=p/4; } 118 | else var s = p/(2*Math.PI) * Math.asin (c/a); 119 | if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 120 | return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; 121 | }, 122 | easeInBack: function (x, t, b, c, d, s) { 123 | if (s == undefined) s = 1.70158; 124 | return c*(t/=d)*t*((s+1)*t - s) + b; 125 | }, 126 | easeOutBack: function (x, t, b, c, d, s) { 127 | if (s == undefined) s = 1.70158; 128 | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; 129 | }, 130 | easeInOutBack: function (x, t, b, c, d, s) { 131 | if (s == undefined) s = 1.70158; 132 | if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 133 | return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 134 | }, 135 | easeInBounce: function (x, t, b, c, d) { 136 | return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; 137 | }, 138 | easeOutBounce: function (x, t, b, c, d) { 139 | if ((t/=d) < (1/2.75)) { 140 | return c*(7.5625*t*t) + b; 141 | } else if (t < (2/2.75)) { 142 | return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 143 | } else if (t < (2.5/2.75)) { 144 | return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 145 | } else { 146 | return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 147 | } 148 | }, 149 | easeInOutBounce: function (x, t, b, c, d) { 150 | if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; 151 | return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; 152 | } 153 | }); 154 | 155 | 156 | ;// Required for Meteor package, the use of window prevents export by Meteor 157 | (function(window){ 158 | if(window.Package){ 159 | Materialize = {}; 160 | } else { 161 | window.Materialize = {}; 162 | } 163 | })(window); 164 | 165 | 166 | // Unique ID 167 | Materialize.guid = (function() { 168 | function s4() { 169 | return Math.floor((1 + Math.random()) * 0x10000) 170 | .toString(16) 171 | .substring(1); 172 | } 173 | return function() { 174 | return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 175 | s4() + '-' + s4() + s4() + s4(); 176 | }; 177 | })(); 178 | 179 | // Velocity has conflicts when loaded with jQuery, this will check for it 180 | var Vel; 181 | if ($) { 182 | Vel = $.Velocity; 183 | } else if (jQuery) { 184 | Vel = jQuery.Velocity; 185 | } else { 186 | Vel = Velocity; 187 | } 188 | ;(function ($) { 189 | 190 | // Add posibility to scroll to selected option 191 | // usefull for select for example 192 | $.fn.scrollTo = function(elem) { 193 | $(this).scrollTop($(this).scrollTop() - $(this).offset().top + $(elem).offset().top); 194 | return this; 195 | }; 196 | 197 | $.fn.dropdown = function (option) { 198 | var defaults = { 199 | inDuration: 300, 200 | outDuration: 225, 201 | constrain_width: true, // Constrains width of dropdown to the activator 202 | hover: false, 203 | gutter: 0, // Spacing from edge 204 | belowOrigin: false, 205 | alignment: 'left' 206 | }; 207 | 208 | this.each(function(){ 209 | var origin = $(this); 210 | var options = $.extend({}, defaults, option); 211 | var isFocused = false; 212 | 213 | // Dropdown menu 214 | var activates = $("#"+ origin.attr('data-activates')); 215 | 216 | function updateOptions() { 217 | if (origin.data('induration') !== undefined) 218 | options.inDuration = origin.data('inDuration'); 219 | if (origin.data('outduration') !== undefined) 220 | options.outDuration = origin.data('outDuration'); 221 | if (origin.data('constrainwidth') !== undefined) 222 | options.constrain_width = origin.data('constrainwidth'); 223 | if (origin.data('hover') !== undefined) 224 | options.hover = origin.data('hover'); 225 | if (origin.data('gutter') !== undefined) 226 | options.gutter = origin.data('gutter'); 227 | if (origin.data('beloworigin') !== undefined) 228 | options.belowOrigin = origin.data('beloworigin'); 229 | if (origin.data('alignment') !== undefined) 230 | options.alignment = origin.data('alignment'); 231 | } 232 | 233 | updateOptions(); 234 | 235 | // Attach dropdown to its activator 236 | origin.after(activates); 237 | 238 | /* 239 | Helper function to position and resize dropdown. 240 | Used in hover and click handler. 241 | */ 242 | function placeDropdown(eventType) { 243 | // Check for simultaneous focus and click events. 244 | if (eventType === 'focus') { 245 | isFocused = true; 246 | } 247 | 248 | // Check html data attributes 249 | updateOptions(); 250 | 251 | // Set Dropdown state 252 | activates.addClass('active'); 253 | origin.addClass('active'); 254 | 255 | // Constrain width 256 | if (options.constrain_width === true) { 257 | activates.css('width', origin.outerWidth()); 258 | 259 | } else { 260 | activates.css('white-space', 'nowrap'); 261 | } 262 | 263 | // Offscreen detection 264 | var windowHeight = window.innerHeight; 265 | var originHeight = origin.innerHeight(); 266 | var offsetLeft = origin.offset().left; 267 | var offsetTop = origin.offset().top - $(window).scrollTop(); 268 | var currAlignment = options.alignment; 269 | var gutterSpacing = 0; 270 | var leftPosition = 0; 271 | 272 | // Below Origin 273 | var verticalOffset = 0; 274 | if (options.belowOrigin === true) { 275 | verticalOffset = originHeight; 276 | } 277 | 278 | // Check for scrolling positioned container. 279 | var scrollOffset = 0; 280 | var wrapper = origin.parent(); 281 | if (!wrapper.is('body') && wrapper[0].scrollHeight > wrapper[0].clientHeight) { 282 | scrollOffset = wrapper[0].scrollTop; 283 | } 284 | 285 | 286 | if (offsetLeft + activates.innerWidth() > $(window).width()) { 287 | // Dropdown goes past screen on right, force right alignment 288 | currAlignment = 'right'; 289 | 290 | } else if (offsetLeft - activates.innerWidth() + origin.innerWidth() < 0) { 291 | // Dropdown goes past screen on left, force left alignment 292 | currAlignment = 'left'; 293 | } 294 | // Vertical bottom offscreen detection 295 | if (offsetTop + activates.innerHeight() > windowHeight) { 296 | // If going upwards still goes offscreen, just crop height of dropdown. 297 | if (offsetTop + originHeight - activates.innerHeight() < 0) { 298 | var adjustedHeight = windowHeight - offsetTop - verticalOffset; 299 | activates.css('max-height', adjustedHeight); 300 | } else { 301 | // Flow upwards. 302 | if (!verticalOffset) { 303 | verticalOffset += originHeight; 304 | } 305 | verticalOffset -= activates.innerHeight(); 306 | } 307 | } 308 | 309 | // Handle edge alignment 310 | if (currAlignment === 'left') { 311 | gutterSpacing = options.gutter; 312 | leftPosition = origin.position().left + gutterSpacing; 313 | } 314 | else if (currAlignment === 'right') { 315 | var offsetRight = origin.position().left + origin.outerWidth() - activates.outerWidth(); 316 | gutterSpacing = -options.gutter; 317 | leftPosition = offsetRight + gutterSpacing; 318 | } 319 | 320 | // Position dropdown 321 | activates.css({ 322 | position: 'absolute', 323 | top: origin.position().top + verticalOffset + scrollOffset, 324 | left: leftPosition 325 | }); 326 | 327 | 328 | // Show dropdown 329 | activates.stop(true, true).css('opacity', 0) 330 | .slideDown({ 331 | queue: false, 332 | duration: options.inDuration, 333 | easing: 'easeOutCubic', 334 | complete: function() { 335 | $(this).css('height', ''); 336 | } 337 | }) 338 | .animate( {opacity: 1}, {queue: false, duration: options.inDuration, easing: 'easeOutSine'}); 339 | } 340 | 341 | function hideDropdown() { 342 | // Check for simultaneous focus and click events. 343 | isFocused = false; 344 | activates.fadeOut(options.outDuration); 345 | activates.removeClass('active'); 346 | origin.removeClass('active'); 347 | setTimeout(function() { activates.css('max-height', ''); }, options.outDuration); 348 | } 349 | 350 | // Hover 351 | if (options.hover) { 352 | var open = false; 353 | origin.unbind('click.' + origin.attr('id')); 354 | // Hover handler to show dropdown 355 | origin.on('mouseenter', function(e){ // Mouse over 356 | if (open === false) { 357 | placeDropdown(); 358 | open = true; 359 | } 360 | }); 361 | origin.on('mouseleave', function(e){ 362 | // If hover on origin then to something other than dropdown content, then close 363 | var toEl = e.toElement || e.relatedTarget; // added browser compatibility for target element 364 | if(!$(toEl).closest('.dropdown-content').is(activates)) { 365 | activates.stop(true, true); 366 | hideDropdown(); 367 | open = false; 368 | } 369 | }); 370 | 371 | activates.on('mouseleave', function(e){ // Mouse out 372 | var toEl = e.toElement || e.relatedTarget; 373 | if(!$(toEl).closest('.dropdown-button').is(origin)) { 374 | activates.stop(true, true); 375 | hideDropdown(); 376 | open = false; 377 | } 378 | }); 379 | 380 | // Click 381 | } else { 382 | // Click handler to show dropdown 383 | origin.unbind('click.' + origin.attr('id')); 384 | origin.bind('click.'+origin.attr('id'), function(e){ 385 | if (!isFocused) { 386 | if ( origin[0] == e.currentTarget && 387 | !origin.hasClass('active') && 388 | ($(e.target).closest('.dropdown-content').length === 0)) { 389 | e.preventDefault(); // Prevents button click from moving window 390 | placeDropdown('click'); 391 | } 392 | // If origin is clicked and menu is open, close menu 393 | else if (origin.hasClass('active')) { 394 | hideDropdown(); 395 | $(document).unbind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id')); 396 | } 397 | // If menu open, add click close handler to document 398 | if (activates.hasClass('active')) { 399 | $(document).bind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id'), function (e) { 400 | if (!activates.is(e.target) && !origin.is(e.target) && (!origin.find(e.target).length) ) { 401 | hideDropdown(); 402 | $(document).unbind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id')); 403 | } 404 | }); 405 | } 406 | } 407 | }); 408 | 409 | } // End else 410 | 411 | // Listen to open and close event - useful for select component 412 | origin.on('open', function(e, eventType) { 413 | placeDropdown(eventType); 414 | }); 415 | origin.on('close', hideDropdown); 416 | 417 | 418 | }); 419 | }; // End dropdown plugin 420 | 421 | 422 | }( jQuery )); 423 | 424 | 425 | ;(function ($) { 426 | 427 | /******************* 428 | * Select Plugin * 429 | ******************/ 430 | $.fn.material_select = function (callback) { 431 | $(this).each(function(){ 432 | var $select = $(this); 433 | 434 | if ($select.hasClass('browser-default')) { 435 | return; // Continue to next (return false breaks out of entire loop) 436 | } 437 | 438 | var multiple = $select.attr('multiple') ? true : false, 439 | lastID = $select.data('select-id'); // Tear down structure if Select needs to be rebuilt 440 | 441 | if (lastID) { 442 | $select.parent().find('span.caret').remove(); 443 | $select.parent().find('input').remove(); 444 | 445 | $select.unwrap(); 446 | $('ul#select-options-'+lastID).remove(); 447 | } 448 | 449 | // If destroying the select, remove the selelct-id and reset it to it's uninitialized state. 450 | if(callback === 'destroy') { 451 | $select.data('select-id', null).removeClass('initialized'); 452 | return; 453 | } 454 | 455 | var uniqueID = Materialize.guid(); 456 | $select.data('select-id', uniqueID); 457 | var wrapper = $('
'); 458 | wrapper.addClass($select.attr('class')); 459 | var options = $('
    '), 460 | selectChildren = $select.children('option, optgroup'), 461 | valuesSelected = [], 462 | optionsHover = false; 463 | 464 | var label = $select.find('option:selected').html() || $select.find('option:first').html() || ""; 465 | 466 | // Function that renders and appends the option taking into 467 | // account type and possible image icon. 468 | var appendOptionWithIcon = function(select, option, type) { 469 | // Add disabled attr if disabled 470 | var disabledClass = (option.is(':disabled')) ? 'disabled ' : ''; 471 | var optgroupClass = (type === 'optgroup-option') ? 'optgroup-option ' : ''; 472 | 473 | // add icons 474 | var icon_url = option.data('icon'); 475 | var classes = option.attr('class'); 476 | if (!!icon_url) { 477 | var classString = ''; 478 | if (!!classes) classString = ' class="' + classes + '"'; 479 | 480 | // Check for multiple type. 481 | if (type === 'multiple') { 482 | options.append($('
  • ' + option.html() + '
    • ')); 483 | } else { 484 | options.append($('
  • ' + option.html() + '
    • ')); 485 | } 486 | return true; 487 | } 488 | 489 | // Check for multiple type. 490 | if (type === 'multiple') { 491 | options.append($('
  • ' + option.html() + '
    • ')); 492 | } else { 493 | options.append($('
  • ' + option.html() + '
    • ')); 494 | } 495 | }; 496 | 497 | /* Create dropdown structure. */ 498 | if (selectChildren.length) { 499 | selectChildren.each(function() { 500 | if ($(this).is('option')) { 501 | // Direct descendant option. 502 | if (multiple) { 503 | appendOptionWithIcon($select, $(this), 'multiple'); 504 | 505 | } else { 506 | appendOptionWithIcon($select, $(this)); 507 | } 508 | } else if ($(this).is('optgroup')) { 509 | // Optgroup. 510 | var selectOptions = $(this).children('option'); 511 | options.append($('
  • ' + $(this).attr('label') + '
    • ')); 512 | 513 | selectOptions.each(function() { 514 | appendOptionWithIcon($select, $(this), 'optgroup-option'); 515 | }); 516 | } 517 | }); 518 | } 519 | 520 | options.find('li:not(.optgroup)').each(function (i) { 521 | $(this).click(function (e) { 522 | // Check if option element is disabled 523 | if (!$(this).hasClass('disabled') && !$(this).hasClass('optgroup')) { 524 | var selected = true; 525 | 526 | if (multiple) { 527 | $('input[type="checkbox"]', this).prop('checked', function(i, v) { return !v; }); 528 | selected = toggleEntryFromArray(valuesSelected, $(this).index(), $select); 529 | $newSelect.trigger('focus'); 530 | } else { 531 | options.find('li').removeClass('active'); 532 | $(this).toggleClass('active'); 533 | $newSelect.val($(this).text()); 534 | } 535 | 536 | activateOption(options, $(this)); 537 | $select.find('option').eq(i).prop('selected', selected); 538 | // Trigger onchange() event 539 | $select.trigger('change'); 540 | if (typeof callback !== 'undefined') callback(); 541 | } 542 | 543 | e.stopPropagation(); 544 | }); 545 | }); 546 | 547 | // Wrap Elements 548 | $select.wrap(wrapper); 549 | // Add Select Display Element 550 | var dropdownIcon = $('▼'); 551 | if ($select.is(':disabled')) 552 | dropdownIcon.addClass('disabled'); 553 | 554 | // escape double quotes 555 | var sanitizedLabelHtml = label.replace(/"/g, '"'); 556 | 557 | var $newSelect = $(''); 558 | $select.before($newSelect); 559 | $newSelect.before(dropdownIcon); 560 | 561 | $newSelect.after(options); 562 | // Check if section element is disabled 563 | if (!$select.is(':disabled')) { 564 | $newSelect.dropdown({'hover': false, 'closeOnClick': false}); 565 | } 566 | 567 | // Copy tabindex 568 | if ($select.attr('tabindex')) { 569 | $($newSelect[0]).attr('tabindex', $select.attr('tabindex')); 570 | } 571 | 572 | $select.addClass('initialized'); 573 | 574 | $newSelect.on({ 575 | 'focus': function (){ 576 | if ($('ul.select-dropdown').not(options[0]).is(':visible')) { 577 | $('input.select-dropdown').trigger('close'); 578 | } 579 | if (!options.is(':visible')) { 580 | $(this).trigger('open', ['focus']); 581 | var label = $(this).val(); 582 | var selectedOption = options.find('li').filter(function() { 583 | return $(this).text().toLowerCase() === label.toLowerCase(); 584 | })[0]; 585 | activateOption(options, selectedOption); 586 | } 587 | }, 588 | 'click': function (e){ 589 | e.stopPropagation(); 590 | } 591 | }); 592 | 593 | $newSelect.on('blur', function() { 594 | if (!multiple) { 595 | $(this).trigger('close'); 596 | } 597 | options.find('li.selected').removeClass('selected'); 598 | }); 599 | 600 | options.hover(function() { 601 | optionsHover = true; 602 | }, function () { 603 | optionsHover = false; 604 | }); 605 | 606 | $(window).on({ 607 | 'click': function () { 608 | multiple && (optionsHover || $newSelect.trigger('close')); 609 | } 610 | }); 611 | 612 | // Add initial multiple selections. 613 | if (multiple) { 614 | $select.find("option:selected:not(:disabled)").each(function () { 615 | var index = $(this).index(); 616 | 617 | toggleEntryFromArray(valuesSelected, index, $select); 618 | options.find("li").eq(index).find(":checkbox").prop("checked", true); 619 | }); 620 | } 621 | 622 | // Make option as selected and scroll to selected position 623 | var activateOption = function(collection, newOption) { 624 | if (newOption) { 625 | collection.find('li.selected').removeClass('selected'); 626 | var option = $(newOption); 627 | option.addClass('selected'); 628 | options.scrollTo(option); 629 | } 630 | }; 631 | 632 | // Allow user to search by typing 633 | // this array is cleared after 1 second 634 | var filterQuery = [], 635 | onKeyDown = function(e){ 636 | // TAB - switch to another input 637 | if(e.which == 9){ 638 | $newSelect.trigger('close'); 639 | return; 640 | } 641 | 642 | // ARROW DOWN WHEN SELECT IS CLOSED - open select options 643 | if(e.which == 40 && !options.is(':visible')){ 644 | $newSelect.trigger('open'); 645 | return; 646 | } 647 | 648 | // ENTER WHEN SELECT IS CLOSED - submit form 649 | if(e.which == 13 && !options.is(':visible')){ 650 | return; 651 | } 652 | 653 | e.preventDefault(); 654 | 655 | // CASE WHEN USER TYPE LETTERS 656 | var letter = String.fromCharCode(e.which).toLowerCase(), 657 | nonLetters = [9,13,27,38,40]; 658 | if (letter && (nonLetters.indexOf(e.which) === -1)) { 659 | filterQuery.push(letter); 660 | 661 | var string = filterQuery.join(''), 662 | newOption = options.find('li').filter(function() { 663 | return $(this).text().toLowerCase().indexOf(string) === 0; 664 | })[0]; 665 | 666 | if (newOption) { 667 | activateOption(options, newOption); 668 | } 669 | } 670 | 671 | // ENTER - select option and close when select options are opened 672 | if (e.which == 13) { 673 | var activeOption = options.find('li.selected:not(.disabled)')[0]; 674 | if(activeOption){ 675 | $(activeOption).trigger('click'); 676 | if (!multiple) { 677 | $newSelect.trigger('close'); 678 | } 679 | } 680 | } 681 | 682 | // ARROW DOWN - move to next not disabled option 683 | if (e.which == 40) { 684 | if (options.find('li.selected').length) { 685 | newOption = options.find('li.selected').next('li:not(.disabled)')[0]; 686 | } else { 687 | newOption = options.find('li:not(.disabled)')[0]; 688 | } 689 | activateOption(options, newOption); 690 | } 691 | 692 | // ESC - close options 693 | if (e.which == 27) { 694 | $newSelect.trigger('close'); 695 | } 696 | 697 | // ARROW UP - move to previous not disabled option 698 | if (e.which == 38) { 699 | newOption = options.find('li.selected').prev('li:not(.disabled)')[0]; 700 | if(newOption) 701 | activateOption(options, newOption); 702 | } 703 | 704 | // Automaticaly clean filter query so user can search again by starting letters 705 | setTimeout(function(){ filterQuery = []; }, 1000); 706 | }; 707 | 708 | $newSelect.on('keydown', onKeyDown); 709 | }); 710 | 711 | function toggleEntryFromArray(entriesArray, entryIndex, select) { 712 | var index = entriesArray.indexOf(entryIndex), 713 | notAdded = index === -1; 714 | 715 | if (notAdded) { 716 | entriesArray.push(entryIndex); 717 | } else { 718 | entriesArray.splice(index, 1); 719 | } 720 | 721 | select.siblings('ul.dropdown-content').find('li').eq(entryIndex).toggleClass('active'); 722 | 723 | // use notAdded instead of true (to detect if the option is selected or not) 724 | select.find('option').eq(entryIndex).prop('selected', notAdded); 725 | setValueToInput(entriesArray, select); 726 | 727 | return notAdded; 728 | } 729 | 730 | function setValueToInput(entriesArray, select) { 731 | var value = ''; 732 | 733 | for (var i = 0, count = entriesArray.length; i < count; i++) { 734 | var text = select.find('option').eq(entriesArray[i]).text(); 735 | 736 | i === 0 ? value += text : value += ', ' + text; 737 | } 738 | 739 | if (value === '') { 740 | value = select.find('option:disabled').eq(0).text(); 741 | } 742 | 743 | select.siblings('input.select-dropdown').val(value); 744 | } 745 | }; 746 | 747 | }( jQuery )); --------------------------------------------------------------------------------