├── .editorconfig ├── .gitignore ├── README.md ├── config.xml ├── 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 ├── src ├── app │ ├── app.component.ts │ ├── app.html │ ├── app.module.ts │ ├── app.scss │ └── main.ts ├── assets │ ├── icon │ │ └── favicon.ico │ ├── img │ │ ├── advance-card-bttf.png │ │ ├── bjork-live.jpg │ │ └── marty-avatar.png │ └── manifest.json ├── config.ts ├── index.html ├── manifest.json ├── pages │ ├── components │ │ ├── actionsheet │ │ │ ├── components.actionsheet.html │ │ │ └── components.actionsheet.page.ts │ │ ├── alerts │ │ │ ├── components.alerts.html │ │ │ └── components.alerts.page.ts │ │ ├── badges │ │ │ ├── components.badges.html │ │ │ └── components.badges.page.ts │ │ ├── buttons │ │ │ ├── components.buttons.html │ │ │ └── components.buttons.page.ts │ │ ├── cards │ │ │ ├── components.cards.html │ │ │ └── components.cards.page.ts │ │ ├── checkbox │ │ │ ├── components.checkbox.html │ │ │ └── components.checkbox.page.ts │ │ ├── components.module.ts │ │ ├── floating-action-buttons │ │ │ ├── components.floating-action-buttons.html │ │ │ └── components.floating-action-buttons.page.ts │ │ ├── gestures │ │ │ ├── components.gestures.html │ │ │ └── components.gestures.page.ts │ │ ├── grid │ │ │ ├── components.grid.html │ │ │ └── components.grid.page.ts │ │ ├── icons │ │ │ ├── components.icons.html │ │ │ └── components.icons.page.ts │ │ ├── inputs │ │ │ ├── components.inputs-list.html │ │ │ ├── components.inputs-list.page.ts │ │ │ ├── fixed-labels │ │ │ │ ├── components.inputs.fixed-labels.html │ │ │ │ └── components.inputs.fixed-labels.page.ts │ │ │ ├── floating-labels │ │ │ │ ├── components.inputs.floating-labels.html │ │ │ │ └── components.inputs.floating-labels.page.ts │ │ │ ├── inline-labels │ │ │ │ ├── components.inputs.inline-labels.html │ │ │ │ └── components.inputs.inline-labels.page.ts │ │ │ ├── inset-labels │ │ │ │ ├── components.inputs.inset-labels.html │ │ │ │ └── components.inputs.inset-labels.page.ts │ │ │ ├── placeholder-labels │ │ │ │ ├── components.inputs.placeholder-labels.html │ │ │ │ └── components.inputs.placeholder-labels.page.ts │ │ │ └── stacked-labels │ │ │ │ ├── components.inputs.stacked-labels.html │ │ │ │ └── components.inputs.stacked-labels.page.ts │ │ └── list │ │ │ ├── components.list.html │ │ │ └── components.list.page.ts │ ├── google-maps │ │ ├── google-maps.html │ │ ├── google-maps.module.ts │ │ ├── google-maps.page.ts │ │ └── interfaces.ts │ ├── home │ │ ├── home-data.ts │ │ ├── home.html │ │ ├── home.module.ts │ │ ├── home.page.ts │ │ ├── home.scss │ │ └── models │ │ │ └── tile.model.ts │ ├── slide-box │ │ ├── slide-box.html │ │ ├── slide-box.module.ts │ │ └── slide-box.page.ts │ └── wordpress │ │ ├── item │ │ ├── wordpress.item.html │ │ └── wordpress.item.page.ts │ │ ├── list │ │ ├── wordpress.list.html │ │ └── wordpress.list.page.ts │ │ ├── models │ │ └── post.model.ts │ │ ├── wordpress.module.ts │ │ └── wordpress.service.ts ├── pipes │ ├── pipes.module.ts │ ├── trim-html.pipe.ts │ └── truncate.pipe.ts ├── service-worker.js ├── services │ ├── call.service.ts │ ├── email.service.ts │ ├── in-app-browser.service.ts │ └── maps.service.ts └── theme │ └── variables.scss ├── tsconfig.json ├── tslint.json └── www └── index.html /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs 2 | # editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 2 9 | 10 | # We recommend you to keep these unchanged 11 | end_of_line = lf 12 | charset = utf-8 13 | trim_trailing_whitespace = true 14 | insert_final_newline = true 15 | 16 | [*.md] 17 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | *.log 7 | *.tmp 8 | *.tmp.* 9 | log.txt 10 | *.sublime-project 11 | *.sublime-workspace 12 | .vscode/ 13 | npm-debug.log* 14 | 15 | .idea/ 16 | .sass-cache/ 17 | .tmp/ 18 | .versions/ 19 | coverage/ 20 | dist/ 21 | node_modules/ 22 | tmp/ 23 | temp/ 24 | hooks/ 25 | platforms/ 26 | plugins/ 27 | plugins/android.json 28 | plugins/ios.json 29 | www/ 30 | $RECYCLE.BIN/ 31 | 32 | .DS_Store 33 | Thumbs.db 34 | UserInterfaceState.xcuserstate 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Supermodular2 Ionic 2 | A super modular Ionic 2.x starter application. 3 | 4 | * Project's Home: https://github.com/skounis/supermodular2 5 | 6 | > Need more? Don't miss [Ionic 3 Toolkit](http://appseed.io/ionic-3-toolkit), The Swiss Arny Knife of Ionic3! 7 | 8 | ## Dependecies, Run and Build 9 | 10 | ### Install Ionic CLI 2.x 11 | To build and run this `Supermodular 2` you need to have Ionic CLI beta installed 12 | 13 | ```bash 14 | $ sudo npm install -g ionic 15 | ``` 16 | 17 | You can revert back and restore any version of Ionic CLI by using the command: 18 | ```bash 19 | $ sudo npm install -g {ionic version} 20 | ``` 21 | 22 | eg: 23 | ```bash 24 | $ sudo npm install -g ionic@1.7.14 25 | ``` 26 | 27 | ### Install NodeJS dependencies 28 | Run `npm install` to install all needed dependencies. 29 | 30 | ### Install plugins and platforms from package.json 31 | Run `ionic state restore` to install all Cordova plugins and platforms included in the package.json. 32 | 33 | ### Run the app 34 | Use `ionic serve -l` to run the app in browser and watch for changes in code 35 | 36 | or 37 | 38 | use `ionic serve` to just run the app for a browser preview 39 | 40 | or 41 | 42 | use `ionic serve --lab` to run the app in a browser on two platforms at the same time. 43 | 44 | ### Add a platform 45 | ```bash 46 | $ ionic platform add 47 | ``` 48 | 49 | Supported Cordova platforms: 50 | ```bash 51 | $ ionic platform add ios 52 | $ ionic platform add android 53 | ``` 54 | 55 | ### Build the app 56 | ```bash 57 | $ ionic build 58 | ``` 59 | 60 | ### Εmulate the app on simulator 61 | iOS: 62 | ```bash 63 | $ ionic emulate ios 64 | ``` 65 | 66 | Android: 67 | ```bash 68 | $ ionic emulate android 69 | ``` 70 | 71 | ### Plugins installation 72 | Use the following commands and install all the plugins required by the app: 73 | ```bash 74 | $ cordova plugin add {plugin id or url} 75 | ``` 76 | 77 | eg: 78 | ```bash 79 | cordova plugin add cordova-plugin-inappbrowser 80 | ``` 81 | 82 | #### Used Cordova plugins 83 | In case that the required Cordova plugins are not installed while installing NodeJS dependencies, Cordova's command mentioned previously can be used to install the following plugins: 84 | 85 | * **cordova-plugin-device** - This plugin defines a global device object, which describes the device's hardware and software. 86 | * **cordova-plugin-console** - This plugin is meant to ensure that console.log() is as useful as it can be. It adds additional function for iOS, Ubuntu, Windows Phone 8, and Windows. 87 | * **cordova-plugin-whitelist** - This plugin implements a whitelist policy for navigating the application webview on Cordova 4.0. 88 | * **cordova-plugin-splashscreen** - This plugin is required to work with splash screens. This plugin displays and hides a splash screen during application launch. 89 | * **cordova-plugin-statusbar** - Used to customize the iOS and Android StatusBar, alter the appearance of the status bar (color/style). 90 | * **ionic-plugin-keyboard** - It provides functions to make interacting with the keyboard easier, and fires events to indicate that the keyboard will hide/show. 91 | 92 | ## Credits 93 | 94 | * [Ionic Framework](http://ionicframework.com/) 95 | * [Ionic 2.0](http://ionic.io/2) 96 | 97 | The Ionic 'Tutorial' starter is used 98 | ```bash 99 | $ ionic start supermodular2 tutorial --v2 --ts 100 | ``` 101 | 102 | ## Third Party Licenses 103 | * [Apache License](http://www.apache.org/licenses/) 104 | * [MIT License](https://opensource.org/licenses/MIT) 105 | -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | supermodular2-rc0 4 | An awesome Ionic/Cordova app. 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 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /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 { 42 | this.statusBar.styleDefault(); 43 | }); 44 | } 45 | 46 | openPage(page) { 47 | this.menu.close(); 48 | this.nav.setRoot(page.component); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/app/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Pages 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | {{p.title}} 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { AgmCoreModule } from '@agm/core'; 2 | import { NgModule } from '@angular/core'; 3 | import { HttpModule } from '@angular/http'; 4 | import { BrowserModule } from '@angular/platform-browser'; 5 | import { StatusBar } from '@ionic-native/status-bar'; 6 | import { IonicApp, IonicModule } from 'ionic-angular'; 7 | import { Config } from '../config'; 8 | 9 | import { ComponentsModule } from '../pages/components/components.module'; 10 | import { GoogleMapsModule } from '../pages/google-maps/google-maps.module'; 11 | import { HomeModule } from '../pages/home/home.module'; 12 | import { SlideBoxModule } from '../pages/slide-box/slide-box.module'; 13 | import { WordpressModule } from '../pages/wordpress/wordpress.module'; 14 | import { MyApp } from './app.component'; 15 | 16 | @NgModule({ 17 | declarations: [ 18 | MyApp 19 | ], 20 | imports: [ 21 | BrowserModule, 22 | HttpModule, 23 | IonicModule.forRoot(MyApp), 24 | AgmCoreModule.forRoot(), 25 | 26 | ComponentsModule, 27 | GoogleMapsModule, 28 | HomeModule, 29 | SlideBoxModule, 30 | WordpressModule 31 | ], 32 | bootstrap: [IonicApp], 33 | entryComponents: [ 34 | MyApp 35 | ], 36 | providers: [ 37 | Config, 38 | StatusBar 39 | ] 40 | }) 41 | export class AppModule { 42 | } 43 | -------------------------------------------------------------------------------- /src/app/app.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Global Sass 5 | // -------------------------------------------------- 6 | // Put style rules here that you want to apply globally. These 7 | // styles are for the entire app and not just one component. 8 | // Additionally, this file can be also used as an entry point 9 | // to import other Sass files to be included in the output CSS. 10 | // 11 | // Shared Sass variables, which can be used to adjust Ionic's 12 | // default Sass variables, belong in "theme/variables.scss". 13 | // 14 | // To declare rules for a specific mode, create a child rule 15 | // for the .md, .ios, or .wp mode classes. The mode class is 16 | // automatically applied to the element in the app. 17 | 18 | @media (min-width: 768px) { 19 | .ion-page { 20 | margin-left: 30%; 21 | width: 70%; 22 | } 23 | 24 | ion-menu { 25 | width: 30%; 26 | display: block; 27 | } 28 | 29 | .bar-button-menutoggle { 30 | display: none; 31 | } 32 | 33 | ion-menu ion-backdrop { 34 | display: none; 35 | } 36 | 37 | ion-content { 38 | border-left: none; 39 | } 40 | 41 | ion-menu[type=overlay] .menu-inner { 42 | -webkit-transform: translateX(0px) !important; 43 | transform: translateX(0px) !important; 44 | box-shadow: none; 45 | width: 100%; 46 | } 47 | } 48 | 49 | /* 50 | * Components Cards page style 51 | */ 52 | .card-background-page { 53 | ion-card { 54 | position: relative; 55 | text-align: center; 56 | } 57 | 58 | .card-title { 59 | position: absolute; 60 | top: 36%; 61 | font-size: 2.0em; 62 | width: 100%; 63 | font-weight: bold; 64 | color: #fff; 65 | } 66 | 67 | .card-subtitle { 68 | font-size: 1.0em; 69 | position: absolute; 70 | top: 52%; 71 | width: 100%; 72 | color: #fff; 73 | } 74 | } 75 | 76 | h1.as-header-icon { 77 | text-align: center; 78 | } 79 | 80 | h1.as-header-icon ion-icon{ 81 | font-size: 6em; 82 | } 83 | 84 | /* 85 | * Components Grid page style 86 | */ 87 | .grid-page { 88 | ion-col div { 89 | background-color: #F9FAFB; 90 | padding: 5px; 91 | border: 1px solid #ddd; 92 | border-radius: 2px; 93 | text-align: center; 94 | } 95 | } 96 | 97 | /* 98 | * Components Icons page style 99 | */ 100 | .icons-page { 101 | ion-icon { 102 | font-size: 50px; 103 | } 104 | 105 | ion-row { 106 | height: 100%; 107 | flex-wrap: wrap; 108 | } 109 | 110 | ion-col { 111 | flex: 0 0 25%; 112 | max-width: 25%; 113 | text-align: center; 114 | padding: 10px 5px; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /src/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import 'rxjs/add/operator/map'; 4 | 5 | import { AppModule } from './app.module'; 6 | 7 | platformBrowserDynamic().bootstrapModule(AppModule); 8 | -------------------------------------------------------------------------------- /src/assets/icon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appseed-io/supermodular2/32b52a121a9c225fcf138ef44cc96497db50ae00/src/assets/icon/favicon.ico -------------------------------------------------------------------------------- /src/assets/img/advance-card-bttf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appseed-io/supermodular2/32b52a121a9c225fcf138ef44cc96497db50ae00/src/assets/img/advance-card-bttf.png -------------------------------------------------------------------------------- /src/assets/img/bjork-live.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appseed-io/supermodular2/32b52a121a9c225fcf138ef44cc96497db50ae00/src/assets/img/bjork-live.jpg -------------------------------------------------------------------------------- /src/assets/img/marty-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appseed-io/supermodular2/32b52a121a9c225fcf138ef44cc96497db50ae00/src/assets/img/marty-avatar.png -------------------------------------------------------------------------------- /src/assets/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Ionic", 3 | "short_name": "Ionic", 4 | "start_url": "index.html", 5 | "display": "standalone", 6 | "icons": [{ 7 | "src": "assets/imgs/logo.png", 8 | "sizes": "512x512", 9 | "type": "image/png" 10 | }], 11 | "background_color": "#4e8ef7", 12 | "theme_color": "#4e8ef7" 13 | } -------------------------------------------------------------------------------- /src/config.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable() 4 | export class Config { 5 | public wordpressApiUrl = 'http://demo.titaniumtemplates.com/wordpress/?json=1'; 6 | } -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ionic App 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Ionic", 3 | "short_name": "Ionic", 4 | "start_url": "index.html", 5 | "display": "standalone", 6 | "icons": [{ 7 | "src": "assets/imgs/logo.png", 8 | "sizes": "512x512", 9 | "type": "image/png" 10 | }], 11 | "background_color": "#4e8ef7", 12 | "theme_color": "#4e8ef7" 13 | } -------------------------------------------------------------------------------- /src/pages/components/actionsheet/components.actionsheet.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Action Sheet 4 | 5 | 6 | 7 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /src/pages/components/actionsheet/components.actionsheet.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Platform, ActionSheetController } from 'ionic-angular'; 3 | 4 | @Component({ 5 | templateUrl: 'components.actionsheet.html' 6 | }) 7 | 8 | export class ComponentsActionSheetPage { 9 | constructor( 10 | public platform: Platform, 11 | public actionsheetCtrl: ActionSheetController 12 | ) { 13 | } 14 | 15 | openActionSheet() { 16 | let actionSheet = this.actionsheetCtrl.create({ 17 | title: 'Select an action', 18 | buttons: [ 19 | { 20 | text: 'Delete', 21 | role: 'destructive', 22 | icon: !this.platform.is('ios') ? 'trash' : null, 23 | handler: () => { 24 | console.log('Delete clicked'); 25 | } 26 | }, 27 | { 28 | text: 'Share', 29 | icon: !this.platform.is('ios') ? 'share' : null, 30 | handler: () => { 31 | console.log('Share clicked'); 32 | } 33 | }, 34 | { 35 | text: 'Play', 36 | icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null, 37 | handler: () => { 38 | console.log('Play clicked'); 39 | } 40 | }, 41 | { 42 | text: 'Favorite', 43 | icon: !this.platform.is('ios') ? 'heart-outline' : null, 44 | handler: () => { 45 | console.log('Favorite clicked'); 46 | } 47 | }, 48 | { 49 | text: 'Cancel', 50 | role: 'cancel', // will always sort to be on the bottom 51 | icon: !this.platform.is('ios') ? 'close' : null, 52 | handler: () => { 53 | console.log('Cancel clicked'); 54 | } 55 | } 56 | ] 57 | }); 58 | actionSheet.present(); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/pages/components/alerts/components.alerts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Alerts 4 | 5 | 6 | 7 | 8 | 11 | 14 | 17 | 20 | 23 | 24 | -------------------------------------------------------------------------------- /src/pages/components/alerts/components.alerts.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { AlertController } from 'ionic-angular'; 3 | 4 | @Component({ 5 | templateUrl: 'components.alerts.html' 6 | }) 7 | export class ComponentsAlertsPage { 8 | testRadioOpen: boolean; 9 | testRadioResult; 10 | testCheckboxOpen: boolean; 11 | testCheckboxResult; 12 | 13 | constructor( 14 | public alertCtrl: AlertController 15 | ) { 16 | } 17 | 18 | doAlert() { 19 | let alert = this.alertCtrl.create({ 20 | title: 'Alert!', 21 | message: 'This is some important information!', 22 | buttons: ['Ok'] 23 | }); 24 | alert.present(); 25 | } 26 | 27 | doPrompt() { 28 | let prompt = this.alertCtrl.create({ 29 | title: 'Password', 30 | message: 'Enter your password to login', 31 | inputs: [ 32 | { 33 | name: 'password', 34 | placeholder: 'Password' 35 | }, 36 | ], 37 | buttons: [ 38 | { 39 | text: 'Cancel', 40 | handler: data => { 41 | console.log('Cancel clicked'); 42 | } 43 | }, 44 | { 45 | text: 'Login', 46 | handler: data => { 47 | console.log('Login clicked'); 48 | } 49 | } 50 | ] 51 | }); 52 | prompt.present(); 53 | } 54 | 55 | doConfirmation() { 56 | let confirmation = this.alertCtrl.create({ 57 | title: 'Confirmation', 58 | message: 'Are you sure you want to delete this item?', 59 | buttons: [ 60 | { 61 | text: 'No', 62 | handler: () => { 63 | console.log('No clicked'); 64 | } 65 | }, 66 | { 67 | text: 'Yes', 68 | handler: () => { 69 | console.log('Yes clicked'); 70 | } 71 | } 72 | ] 73 | }); 74 | confirmation.present(); 75 | } 76 | 77 | doRadioAlert() { 78 | let radioAlert = this.alertCtrl.create(); 79 | radioAlert.setTitle('Select color'); 80 | 81 | radioAlert.addInput({ 82 | type: 'radio', 83 | label: 'Blue', 84 | value: 'blue', 85 | checked: true 86 | }); 87 | 88 | radioAlert.addInput({ 89 | type: 'radio', 90 | label: 'Green', 91 | value: 'green' 92 | }); 93 | 94 | radioAlert.addInput({ 95 | type: 'radio', 96 | label: 'Red', 97 | value: 'red' 98 | }); 99 | 100 | radioAlert.addInput({ 101 | type: 'radio', 102 | label: 'Yellow', 103 | value: 'yellow' 104 | }); 105 | 106 | radioAlert.addInput({ 107 | type: 'radio', 108 | label: 'Purple', 109 | value: 'purple' 110 | }); 111 | 112 | radioAlert.addInput({ 113 | type: 'radio', 114 | label: 'White', 115 | value: 'white' 116 | }); 117 | 118 | radioAlert.addInput({ 119 | type: 'radio', 120 | label: 'Black', 121 | value: 'black' 122 | }); 123 | 124 | radioAlert.addButton('Cancel'); 125 | radioAlert.addButton({ 126 | text: 'Ok', 127 | handler: data => { 128 | console.log('Radio data:', data); 129 | this.testRadioOpen = false; 130 | this.testRadioResult = data; 131 | } 132 | }); 133 | 134 | radioAlert.present().then(() => { 135 | this.testRadioOpen = true; 136 | }); 137 | } 138 | 139 | doCheckboxAlert() { 140 | let checkboxAlert = this.alertCtrl.create(); 141 | checkboxAlert.setTitle('Which fruits you like?'); 142 | 143 | checkboxAlert.addInput({ 144 | type: 'checkbox', 145 | label: 'Apple', 146 | value: 'apple', 147 | checked: true 148 | }); 149 | 150 | checkboxAlert.addInput({ 151 | type: 'checkbox', 152 | label: 'Banana', 153 | value: 'banana' 154 | }); 155 | 156 | checkboxAlert.addInput({ 157 | type: 'checkbox', 158 | label: 'Kiwi', 159 | value: 'kiwi' 160 | }); 161 | 162 | checkboxAlert.addInput({ 163 | type: 'checkbox', 164 | label: 'Strawberry', 165 | value: 'strawberry' 166 | }); 167 | 168 | checkboxAlert.addInput({ 169 | type: 'checkbox', 170 | label: 'Pineapple', 171 | value: 'pineapple' 172 | }); 173 | 174 | checkboxAlert.addButton('Cancel'); 175 | checkboxAlert.addButton({ 176 | text: 'Okay', 177 | handler: data => { 178 | console.log('Checkbox data:', data); 179 | this.testCheckboxOpen = false; 180 | this.testCheckboxResult = data; 181 | } 182 | }); 183 | checkboxAlert.present().then(() => { 184 | this.testCheckboxOpen = true; 185 | }); 186 | } 187 | } 188 | -------------------------------------------------------------------------------- /src/pages/components/badges/components.badges.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Badges 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 | Björk 16 |

17 |

18 | Björk first came to prominence as one of the lead vocalists of the avant pop Icelandic sextet the 19 | Sugarcubes, but when... 20 |

21 | 22 | 23 | 24 | 25 | Albums 26 | 9 27 | 28 | 29 | 30 | 31 | Followers 32 | 260k 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/pages/components/badges/components.badges.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: 'components.badges.html' 5 | }) 6 | 7 | export class ComponentsBadgesPage { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/components/buttons/components.buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Buttons 4 | 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 |
30 | 31 |
32 |
33 | 34 |
35 |
36 | 37 |
38 |
39 | 40 |
41 |
42 | 43 |
44 |
45 | 46 |
47 |
48 | 49 |
50 |
51 | 52 |
53 |
54 | 55 |
56 |
57 | 58 |
59 |
60 | 61 |
62 |
63 | 64 |
65 |
66 | 67 |
68 |
69 | 70 |
71 |
72 | 73 |
74 |
75 | 76 |
77 |
78 | 79 |
80 |
81 | 82 |
83 |
84 | 85 |
86 |
87 | 88 |
89 |
90 | 91 |
92 |
93 | 94 |
95 |
96 | 97 |
98 |
99 | 100 |
101 |
102 | 103 |
104 |
105 | 106 |
107 |
108 | 109 |
110 |
111 | 112 |
113 |
114 | 118 | 121 |
122 | 123 | -------------------------------------------------------------------------------- /src/pages/components/buttons/components.buttons.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: 'components.buttons.html' 5 | }) 6 | 7 | export class ComponentsButtonsPage { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/components/cards/components.cards.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Cards 4 | 5 | 6 | 7 | 8 | 9 | 10 | This is just your basic card with some text to boot. 11 | 12 | 13 | 14 | 15 | 16 | Header 17 | 18 | 19 | This is a card with some text and a header. 20 | 21 | 22 | 23 | 24 | 25 | List In Card 26 | 27 | 28 | 29 | 33 | 34 | 38 | 39 | 43 | 44 | 48 | 49 | 53 | 54 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | Björk 66 | 67 |

68 | Björk first came to prominence as one of the lead vocalists of the avant pop Icelandic sextet the 69 | Sugarcubes, but when... 70 |

71 | 72 | 73 | 74 | 78 | 79 | 80 | 84 | 85 | 86 | 90 | 91 | 92 | 93 |
94 | 95 | 96 |
Björk
97 |
9 Albums
98 | 99 |
100 | 101 | 102 | 103 | 104 | 105 |

Marty McFly

106 |

November 5, 1955

107 | 108 | 109 | 110 | 111 | 112 |

Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a 113 | DeLorean?! Whoa. This is heavy.

114 | 115 | 116 | 117 | 118 | 122 | 123 | 124 | 128 | 129 | 130 | 131 | 11h ago 132 | 133 | 134 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /src/pages/components/cards/components.cards.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: 'components.cards.html' 5 | }) 6 | 7 | export class ComponentsCardsPage { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/components/checkbox/components.checkbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Checkbox 4 | 5 | 6 | 7 | 8 | 9 | 10 | Items List 11 | 12 | 13 | 14 | Item 1 15 | 16 | 17 | 18 | 19 | Item 2 20 | 21 | 22 | 23 | 24 | Item 3 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/pages/components/checkbox/components.checkbox.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: 'components.checkbox.html' 5 | }) 6 | 7 | export class ComponentsCheckboxPage { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/components/components.module.ts: -------------------------------------------------------------------------------- 1 | import { IonicModule } from 'ionic-angular'; 2 | import { NgModule } from '@angular/core'; 3 | import { ComponentsInputsStackedLabelsPage } from './inputs/stacked-labels/components.inputs.stacked-labels.page'; 4 | import { ComponentsInputsPlaceholderLabelsPage } from './inputs/placeholder-labels/components.inputs.placeholder-labels.page'; 5 | import { ComponentsInputsInsetLabelsPage } from './inputs/inset-labels/components.inputs.inset-labels.page'; 6 | import { ComponentsInputsInlineLabelsPage } from './inputs/inline-labels/components.inputs.inline-labels.page'; 7 | import { ComponentsInputsFloatingLabelsPage } from './inputs/floating-labels/components.inputs.floating-labels.page'; 8 | import { ComponentsInputsFixedLabelsPage } from './inputs/fixed-labels/components.inputs.fixed-labels.page'; 9 | import { ComponentsInputsListPage } from './inputs/components.inputs-list.page'; 10 | import { ComponentsIconsPage } from './icons/components.icons.page'; 11 | import { ComponentsGridPage } from './grid/components.grid.page'; 12 | import { ComponentsGesturesPage } from './gestures/components.gestures.page'; 13 | import { ComponentsFloatingActionButtonsPage } from './floating-action-buttons/components.floating-action-buttons.page'; 14 | import { ComponentsCheckboxPage } from './checkbox/components.checkbox.page'; 15 | import { ComponentsCardsPage } from './cards/components.cards.page'; 16 | import { ComponentsButtonsPage } from './buttons/components.buttons.page'; 17 | import { ComponentsBadgesPage } from './badges/components.badges.page'; 18 | import { ComponentsAlertsPage } from './alerts/components.alerts.page'; 19 | import { ComponentsActionSheetPage } from './actionsheet/components.actionsheet.page'; 20 | import { ComponentsListPage } from './list/components.list.page'; 21 | 22 | @NgModule({ 23 | imports: [IonicModule], 24 | declarations: [ 25 | ComponentsListPage, 26 | ComponentsActionSheetPage, 27 | ComponentsAlertsPage, 28 | ComponentsBadgesPage, 29 | ComponentsButtonsPage, 30 | ComponentsCardsPage, 31 | ComponentsCheckboxPage, 32 | ComponentsFloatingActionButtonsPage, 33 | ComponentsGesturesPage, 34 | ComponentsGridPage, 35 | ComponentsIconsPage, 36 | ComponentsInputsListPage, 37 | ComponentsInputsFixedLabelsPage, 38 | ComponentsInputsFloatingLabelsPage, 39 | ComponentsInputsInlineLabelsPage, 40 | ComponentsInputsInsetLabelsPage, 41 | ComponentsInputsPlaceholderLabelsPage, 42 | ComponentsInputsStackedLabelsPage 43 | ], 44 | entryComponents: [ 45 | ComponentsListPage, 46 | ComponentsActionSheetPage, 47 | ComponentsAlertsPage, 48 | ComponentsBadgesPage, 49 | ComponentsButtonsPage, 50 | ComponentsCardsPage, 51 | ComponentsCheckboxPage, 52 | ComponentsFloatingActionButtonsPage, 53 | ComponentsGesturesPage, 54 | ComponentsGridPage, 55 | ComponentsIconsPage, 56 | ComponentsInputsListPage, 57 | ComponentsInputsFixedLabelsPage, 58 | ComponentsInputsFloatingLabelsPage, 59 | ComponentsInputsInlineLabelsPage, 60 | ComponentsInputsInsetLabelsPage, 61 | ComponentsInputsPlaceholderLabelsPage, 62 | ComponentsInputsStackedLabelsPage 63 | ] 64 | }) 65 | export class ComponentsModule { 66 | 67 | } 68 | -------------------------------------------------------------------------------- /src/pages/components/floating-action-buttons/components.floating-action-buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | FABs 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 19 | 22 | 25 | 28 | 29 | 30 | 31 | 32 | 35 | 36 | 39 | 42 | 45 | 48 | 49 | 50 | 51 | 52 | 55 | 56 | 59 | 62 | 65 | 68 | 69 | 70 | 71 | 72 | 75 | 76 | 79 | 82 | 85 | 88 | 89 | 90 | 91 | 92 | 95 | 96 | 99 | 100 | 101 | 104 | 105 | 106 | 109 | 110 | 111 | 114 | 115 | 116 | 117 | 118 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /src/pages/components/floating-action-buttons/components.floating-action-buttons.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: 'components.floating-action-buttons.html' 5 | }) 6 | 7 | export class ComponentsFloatingActionButtonsPage { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/components/gestures/components.gestures.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Gestures 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Tapped: {{tap}} times 12 | 13 | 14 | 15 | 16 | 17 | Pressed: {{press}} times 18 | 19 | 20 | 21 | 22 | 23 | Panned: {{pan}} times 24 | 25 | 26 | 27 | 28 | 29 | Swiped: {{swipe}} times 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/pages/components/gestures/components.gestures.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | templateUrl: 'components.gestures.html' 6 | }) 7 | export class ComponentsGesturesPage { 8 | 9 | public press: number = 0; 10 | public pan: number = 0; 11 | public swipe: number = 0; 12 | public tap: number = 0; 13 | 14 | pressEvent(e) { 15 | this.press++; 16 | } 17 | 18 | panEvent(e) { 19 | this.pan++; 20 | } 21 | 22 | swipeEvent(e) { 23 | this.swipe++; 24 | } 25 | 26 | tapEvent(e) { 27 | this.tap++; 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /src/pages/components/grid/components.grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Grid 4 | 5 | 6 | 7 | 8 | 9 | 10 |
col
11 | 12 | 13 |
col
14 | 15 | 16 |
col
17 | 18 | 19 |
20 | col
21 | 3 lines
22 | of text
23 |
24 | 25 | 26 | 27 | 28 | 29 |
col
30 | 31 | 32 |
col
33 | 34 | 35 |
col
36 | 37 | 38 |
39 | col
40 | 3 lines
41 | center
42 |
43 | 44 | 45 | 46 | 47 | 48 |
col
49 | 50 | 51 |
col
52 | 53 | 54 |
55 | col
56 | 3 lines
57 | center
58 |
59 | 60 | 61 | 62 | 63 | 64 |
col
65 | 66 | 67 |
68 | col
69 | 3 lines
70 | baseline
71 |
72 | 73 | 74 | 75 | 76 | 77 |
78 | col
79 | 2 lines
80 |
81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /src/pages/components/grid/components.grid.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | templateUrl: 'components.grid.html' 6 | }) 7 | export class ComponentsGridPage { 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/components/icons/components.icons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Icons 4 | 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 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /src/pages/components/icons/components.icons.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | templateUrl: 'components.icons.html' 6 | }) 7 | export class ComponentsIconsPage { 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/components/inputs/components.inputs-list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Inputs 4 | 5 | 6 | 7 | 8 | 9 | 10 | Fixed Labels 11 | 12 | 13 | Floating Labels 14 | 15 | 16 | Inline Labels 17 | 18 | 19 | Inset Labels 20 | 21 | 22 | Placeholder Labels 23 | 24 | 25 | Stacked Labels 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/pages/components/inputs/components.inputs-list.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController } from 'ionic-angular'; 3 | import { ComponentsInputsFixedLabelsPage } from './fixed-labels/components.inputs.fixed-labels.page'; 4 | import { ComponentsInputsFloatingLabelsPage } from './floating-labels/components.inputs.floating-labels.page'; 5 | import { ComponentsInputsInlineLabelsPage } from './inline-labels/components.inputs.inline-labels.page'; 6 | import { ComponentsInputsInsetLabelsPage } from './inset-labels/components.inputs.inset-labels.page'; 7 | import { ComponentsInputsPlaceholderLabelsPage } from './placeholder-labels/components.inputs.placeholder-labels.page'; 8 | import { ComponentsInputsStackedLabelsPage } from './stacked-labels/components.inputs.stacked-labels.page'; 9 | 10 | @Component({ 11 | templateUrl: 'components.inputs-list.html' 12 | }) 13 | export class ComponentsInputsListPage { 14 | constructor( 15 | private navCtrl: NavController 16 | ) { 17 | } 18 | 19 | public fixedLabelsTapped() { 20 | this.navCtrl.push(ComponentsInputsFixedLabelsPage); 21 | } 22 | 23 | public floatingLabelsTapped() { 24 | this.navCtrl.push(ComponentsInputsFloatingLabelsPage); 25 | } 26 | 27 | public inlineLabelsTapped() { 28 | this.navCtrl.push(ComponentsInputsInlineLabelsPage); 29 | } 30 | 31 | public insetLabelsTapped() { 32 | this.navCtrl.push(ComponentsInputsInsetLabelsPage); 33 | } 34 | 35 | public placeholderLabelsTapped() { 36 | this.navCtrl.push(ComponentsInputsPlaceholderLabelsPage); 37 | } 38 | 39 | public stackedLabelsTapped() { 40 | this.navCtrl.push(ComponentsInputsStackedLabelsPage); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/pages/components/inputs/fixed-labels/components.inputs.fixed-labels.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Fixed Labels 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Username 13 | 14 | 15 | 16 | 17 | Password 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/pages/components/inputs/fixed-labels/components.inputs.fixed-labels.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: 'components.inputs.fixed-labels.html' 5 | }) 6 | 7 | export class ComponentsInputsFixedLabelsPage { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/components/inputs/floating-labels/components.inputs.floating-labels.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Floating Labels 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Username 13 | 14 | 15 | 16 | 17 | Password 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /src/pages/components/inputs/floating-labels/components.inputs.floating-labels.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | templateUrl: 'components.inputs.floating-labels.html' 6 | }) 7 | export class ComponentsInputsFloatingLabelsPage { 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/components/inputs/inline-labels/components.inputs.inline-labels.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Inline Labels 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Username 13 | 14 | 15 | 16 | 17 | Password 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /src/pages/components/inputs/inline-labels/components.inputs.inline-labels.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | templateUrl: 'components.inputs.inline-labels.html' 6 | }) 7 | export class ComponentsInputsInlineLabelsPage { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/components/inputs/inset-labels/components.inputs.inset-labels.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Inset Labels 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Username 12 | 13 | 14 | 15 | 16 | Password 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /src/pages/components/inputs/inset-labels/components.inputs.inset-labels.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | templateUrl: 'components.inputs.inset-labels.html' 6 | }) 7 | export class ComponentsInputsInsetLabelsPage { 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/components/inputs/placeholder-labels/components.inputs.placeholder-labels.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Placeholder Labels 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /src/pages/components/inputs/placeholder-labels/components.inputs.placeholder-labels.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | templateUrl: 'components.inputs.placeholder-labels.html' 6 | }) 7 | export class ComponentsInputsPlaceholderLabelsPage { 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/components/inputs/stacked-labels/components.inputs.stacked-labels.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Stacked Labels 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Username 12 | 13 | 14 | 15 | 16 | Password 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /src/pages/components/inputs/stacked-labels/components.inputs.stacked-labels.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | templateUrl: 'components.inputs.stacked-labels.html' 6 | }) 7 | export class ComponentsInputsStackedLabelsPage { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/components/list/components.list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | Components 7 | 8 | 9 | 10 | 11 | 12 | 13 | Action Sheet 14 | 15 | 16 | Alerts 17 | 18 | 19 | Badges 20 | 21 | 22 | Buttons 23 | 24 | 25 | Cards 26 | 27 | 28 | Checkbox 29 | 30 | 31 | Floating Action Buttons 32 | 33 | 34 | Gestures 35 | 36 | 37 | Grid 38 | 39 | 40 | Icons 41 | 42 | 43 | Inputs 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/pages/components/list/components.list.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController } from 'ionic-angular'; 3 | import { ComponentsActionSheetPage } from '../actionsheet/components.actionsheet.page'; 4 | import { ComponentsAlertsPage } from '../alerts/components.alerts.page'; 5 | import { ComponentsBadgesPage } from '../badges/components.badges.page'; 6 | import { ComponentsButtonsPage } from '../buttons/components.buttons.page'; 7 | import { ComponentsCardsPage } from '../cards/components.cards.page'; 8 | import { ComponentsCheckboxPage } from '../checkbox/components.checkbox.page'; 9 | import { ComponentsFloatingActionButtonsPage } from '../floating-action-buttons/components.floating-action-buttons.page'; 10 | import { ComponentsGesturesPage } from '../gestures/components.gestures.page'; 11 | import { ComponentsGridPage } from '../grid/components.grid.page'; 12 | import { ComponentsIconsPage } from '../icons/components.icons.page'; 13 | import { ComponentsInputsListPage } from '../inputs/components.inputs-list.page'; 14 | 15 | @Component({ 16 | templateUrl: 'components.list.html' 17 | }) 18 | export class ComponentsListPage { 19 | constructor( 20 | private navCtrl: NavController 21 | ) { 22 | } 23 | 24 | public actionsheetTapped() { 25 | this.navCtrl.push(ComponentsActionSheetPage); 26 | } 27 | 28 | public alertsTapped() { 29 | this.navCtrl.push(ComponentsAlertsPage); 30 | } 31 | 32 | public badgesTapped() { 33 | this.navCtrl.push(ComponentsBadgesPage); 34 | } 35 | 36 | public buttonsTapped() { 37 | this.navCtrl.push(ComponentsButtonsPage); 38 | } 39 | 40 | public cardsTapped() { 41 | this.navCtrl.push(ComponentsCardsPage); 42 | } 43 | 44 | public checkboxTapped() { 45 | this.navCtrl.push(ComponentsCheckboxPage); 46 | } 47 | 48 | public floatingActionButtonsTapped() { 49 | this.navCtrl.push(ComponentsFloatingActionButtonsPage); 50 | } 51 | 52 | public gesturesTapped() { 53 | this.navCtrl.push(ComponentsGesturesPage); 54 | } 55 | 56 | public gridTapped() { 57 | this.navCtrl.push(ComponentsGridPage); 58 | } 59 | 60 | public iconsTapped() { 61 | this.navCtrl.push(ComponentsIconsPage); 62 | } 63 | 64 | public inputsTapped() { 65 | this.navCtrl.push(ComponentsInputsListPage); 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/pages/google-maps/google-maps.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | Google maps 7 | 8 | 9 | 10 | 11 | 15 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/pages/google-maps/google-maps.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicModule } from 'ionic-angular'; 3 | 4 | import { GoogleMapsPage } from './google-maps.page'; 5 | import { AgmCoreModule } from '@agm/core'; 6 | 7 | @NgModule({ 8 | declarations: [GoogleMapsPage], 9 | entryComponents: [GoogleMapsPage], 10 | imports: [IonicModule, AgmCoreModule] 11 | }) 12 | export class GoogleMapsModule { 13 | 14 | } 15 | -------------------------------------------------------------------------------- /src/pages/google-maps/google-maps.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { IMarker, IPoint } from './interfaces'; 4 | 5 | @Component({ 6 | templateUrl: 'google-maps.html' 7 | }) 8 | export class GoogleMapsPage { 9 | public markers: IMarker[]; 10 | public origin: IPoint; 11 | public zoom: number; 12 | 13 | constructor() { 14 | this.initMarkers(); 15 | this.origin = { 16 | lat: 51.673858, 17 | lng: 7.815982 18 | }; 19 | this.zoom = 8; 20 | } 21 | 22 | public clickedMarker(label: string) { 23 | window.alert(`clicked the marker: ${label || ''}`); 24 | } 25 | 26 | private initMarkers(): void { 27 | this.markers = [{ 28 | lat: 51.673858, 29 | lng: 7.815982, 30 | label: 'A' 31 | }, { 32 | lat: 51.373858, 33 | lng: 7.215982, 34 | label: 'B' 35 | }, { 36 | lat: 51.723858, 37 | lng: 7.895982, 38 | label: 'C' 39 | }]; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/pages/google-maps/interfaces.ts: -------------------------------------------------------------------------------- 1 | export interface IPoint { 2 | lat: number; 3 | lng: number; 4 | } 5 | 6 | export interface IMarker extends IPoint { 7 | label?: string; 8 | } -------------------------------------------------------------------------------- /src/pages/home/home-data.ts: -------------------------------------------------------------------------------- 1 | export const data = { 2 | facebook: 'https://www.facebook.com/ionicframework', 3 | phoneNumber: '+306973216110', 4 | email: { 5 | to: 'skounis@gmail.com', 6 | subject: 'Cordova Icons', 7 | body: 'How are you? Nice greetings from Leipzig' 8 | }, 9 | officeLocation: '37.7736854,-122.421034' 10 | }; -------------------------------------------------------------------------------- /src/pages/home/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | Supermodular 2 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 |

ABC Corp Inc.

16 | 50 Market Street, San Francisco, California 94103, United States 17 |
18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |

26 |

{{tile.title}}

27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | Call us 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | Send us and Email 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | Find us / Get directions 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | Visit us on Facebook 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/pages/home/home.module.ts: -------------------------------------------------------------------------------- 1 | import { IonicModule } from 'ionic-angular'; 2 | import { NgModule } from '@angular/core'; 3 | import { EmailService } from '../../services/email.service'; 4 | import { CallService } from '../../services/call.service'; 5 | import { HomePage } from './home.page'; 6 | import { InAppBrowserService } from '../../services/in-app-browser.service'; 7 | import { MapsService } from '../../services/maps.service'; 8 | 9 | @NgModule({ 10 | imports: [IonicModule], 11 | declarations: [HomePage], 12 | entryComponents: [HomePage], 13 | providers: [ 14 | EmailService, 15 | CallService, 16 | InAppBrowserService, 17 | MapsService 18 | ] 19 | }) 20 | export class HomeModule { 21 | 22 | } 23 | -------------------------------------------------------------------------------- /src/pages/home/home.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Nav } from 'ionic-angular'; 3 | 4 | import { WordpressListPage } from '../wordpress/list/wordpress.list.page'; 5 | import { SlideBoxPage } from '../slide-box/slide-box.page'; 6 | import { GoogleMapsPage } from '../google-maps/google-maps.page'; 7 | 8 | import { Tile } from './models/tile.model'; 9 | import { EmailService } from '../../services/email.service'; 10 | import { CallService } from '../../services/call.service'; 11 | import { MapsService } from '../../services/maps.service'; 12 | import { InAppBrowserService } from '../../services/in-app-browser.service'; 13 | import { data } from './home-data'; 14 | 15 | @Component({ 16 | templateUrl: 'home.html', 17 | providers: [] 18 | }) 19 | export class HomePage { 20 | public tiles: Tile[][]; 21 | 22 | private nav: Nav; 23 | 24 | constructor( 25 | private emailService: EmailService, 26 | private callService: CallService, 27 | private mapsService: MapsService, 28 | private browserService: InAppBrowserService, 29 | nav: Nav 30 | ) { 31 | this.nav = nav; 32 | this.initTiles(); 33 | } 34 | 35 | public navigateTo(tile) { 36 | this.nav.setRoot(tile.component); 37 | } 38 | 39 | public getDirections() { 40 | this.mapsService.openMapsApp(data.officeLocation); 41 | } 42 | 43 | public sendEmail() { 44 | this.emailService.sendEmail(data.email); 45 | } 46 | 47 | public openFacebookPage() { 48 | this.browserService.open(data.facebook); 49 | } 50 | 51 | public callUs() { 52 | this.callService.call(data.phoneNumber); 53 | } 54 | 55 | private initTiles(): void { 56 | this.tiles = [[{ 57 | title: 'Wordpress', 58 | path: 'wordpress-articles', 59 | icon: 'logo-wordpress', 60 | component: WordpressListPage 61 | }, { 62 | title: 'Slides', 63 | path: 'slides', 64 | icon: 'swap', 65 | component: SlideBoxPage 66 | }], [{ 67 | title: 'Map', 68 | path: 'map', 69 | icon: 'map', 70 | component: GoogleMapsPage 71 | }]]; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/pages/home/home.scss: -------------------------------------------------------------------------------- 1 | .getting-started { 2 | .home-hello { 3 | position: relative; 4 | 5 | .hello-title { 6 | position: absolute; 7 | left: 0; 8 | right: 0; 9 | bottom: 0; 10 | margin: 0; 11 | border: 0; 12 | background: rgba(255, 255, 255, 0.6); 13 | padding: 10px; 14 | } 15 | 16 | h1 { 17 | margin-top: 0; 18 | } 19 | } 20 | 21 | .tile { 22 | .item { 23 | padding: 0; 24 | } 25 | 26 | .item-inner { 27 | padding: 0; 28 | } 29 | 30 | h2 { 31 | text-align: center; 32 | } 33 | 34 | h1 { 35 | text-align: center; 36 | padding-bottom: 10px; 37 | } 38 | } 39 | 40 | ion-item-content { 41 | margin: 0; 42 | } 43 | 44 | .quick-action { 45 | width: 100%; 46 | ion-icon { 47 | font-size: 2em; 48 | width: 20px; 49 | } 50 | span { 51 | font-size: 1.6rem; 52 | padding-left: 10px; 53 | padding-top: -3px; 54 | vertical-align: text-bottom; 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /src/pages/home/models/tile.model.ts: -------------------------------------------------------------------------------- 1 | export class Tile { 2 | public title: string; 3 | public path: string; 4 | public icon: string; 5 | public component: any; 6 | } -------------------------------------------------------------------------------- /src/pages/slide-box/slide-box.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | Slides 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/pages/slide-box/slide-box.module.ts: -------------------------------------------------------------------------------- 1 | import { IonicModule } from 'ionic-angular'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { SlideBoxPage } from './slide-box.page'; 5 | 6 | @NgModule({ 7 | imports: [IonicModule], 8 | declarations: [SlideBoxPage], 9 | entryComponents: [SlideBoxPage] 10 | }) 11 | export class SlideBoxModule { 12 | 13 | } 14 | -------------------------------------------------------------------------------- /src/pages/slide-box/slide-box.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: 'slide-box.html' 5 | }) 6 | export class SlideBoxPage { 7 | public items: any[]; 8 | 9 | constructor() { 10 | this.items = this.generateItems(7); 11 | } 12 | 13 | private generateItems(n: number): any { 14 | let items = []; 15 | for (let i = 0; i < n; i++) { 16 | items.push({ 17 | image: 'http://lorempixel.com/g/786/1024/city/' + i + '/' 18 | }); 19 | } 20 | return items; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/pages/wordpress/item/wordpress.item.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | WP post 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

{{post.title}}

15 |
16 |

{{post.author}} - {{post.date}}

17 |

[{{post.tags.join(', ')}}]

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/pages/wordpress/item/wordpress.item.page.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavParams } from 'ionic-angular'; 3 | import { Post } from '../models/post.model'; 4 | 5 | @Component({ 6 | templateUrl: 'wordpress.item.html' 7 | }) 8 | export class WordpressItemPage { 9 | post: Post; 10 | 11 | constructor(navParams: NavParams) { 12 | this.post = navParams.get('item'); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/pages/wordpress/list/wordpress.list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | WP posts 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

{{post.title}}

15 |

{{post.brief | trimHtml | truncate : 140}}

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/pages/wordpress/list/wordpress.list.page.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { LoadingController, NavController } from 'ionic-angular'; 3 | import { WordpressService } from '../wordpress.service'; 4 | import { WordpressItemPage } from '../item/wordpress.item.page'; 5 | import { Post } from '../models/post.model'; 6 | 7 | @Component({ 8 | templateUrl: 'wordpress.list.html', 9 | providers: [WordpressService] 10 | }) 11 | export class WordpressListPage implements OnInit { 12 | public posts: Post[]; 13 | private loading; 14 | 15 | constructor( 16 | private loadingCtrl: LoadingController, 17 | private wordpressService: WordpressService, 18 | private nav: NavController 19 | ) { 20 | this.loading = this.loadingCtrl.create({ content: 'Loading, please wait...' }); 21 | this.loading.present(); 22 | } 23 | 24 | ngOnInit(): void { 25 | this.wordpressService.getPosts() 26 | .subscribe(posts => { 27 | this.posts = posts; 28 | this.loading.dismiss(); 29 | }); 30 | } 31 | 32 | public itemTapped(item) { 33 | this.nav.push(WordpressItemPage, { 34 | item: item 35 | }); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/pages/wordpress/models/post.model.ts: -------------------------------------------------------------------------------- 1 | export class Post { 2 | public id: number; 3 | public title: string; 4 | public brief: string; 5 | public content: string; 6 | public image: string; 7 | public date: Date; 8 | public author: string; 9 | public tags: string[]; 10 | public url: string; 11 | } -------------------------------------------------------------------------------- /src/pages/wordpress/wordpress.module.ts: -------------------------------------------------------------------------------- 1 | import { IonicModule } from 'ionic-angular'; 2 | import { NgModule } from '@angular/core'; 3 | import { PipesModule } from '../../pipes/pipes.module'; 4 | 5 | import { WordpressItemPage } from './item/wordpress.item.page'; 6 | import { WordpressListPage } from './list/wordpress.list.page'; 7 | 8 | @NgModule({ 9 | imports: [ 10 | IonicModule, 11 | PipesModule 12 | ], 13 | declarations: [ 14 | WordpressItemPage, 15 | WordpressListPage 16 | ], 17 | entryComponents: [ 18 | WordpressItemPage, 19 | WordpressListPage 20 | ] 21 | }) 22 | export class WordpressModule { 23 | 24 | } 25 | -------------------------------------------------------------------------------- /src/pages/wordpress/wordpress.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Http } from '@angular/http'; 3 | import { Config } from '../../config'; 4 | import { Observable } from 'rxjs'; 5 | import { Post } from './models/post.model'; 6 | 7 | @Injectable() 8 | export class WordpressService { 9 | private articles: Post[]; 10 | 11 | constructor( 12 | private http: Http, 13 | private config: Config 14 | ) {} 15 | 16 | public getPosts(): Observable { 17 | return this.http.get(this.config.wordpressApiUrl) 18 | .map(x => x.json()) 19 | .map(response => { 20 | this.articles = response.posts.map((item: any) => this.createArticle(item)); 21 | return this.articles; 22 | }); 23 | } 24 | 25 | private createArticle(item): Post { 26 | let imageUrl = item.attachments.length > 0 ? item.attachments[0].images.full.url : null; 27 | let tags = item.tags.map(x => x.title); 28 | 29 | let contentIndex = item.content.indexOf('

') + 4; 30 | let content = contentIndex === -1 ? item.content : item.content.substring(contentIndex); 31 | 32 | return { 33 | id: item.id, 34 | title: item.title, 35 | brief: item.excerpt, 36 | image: imageUrl, 37 | date: item.date, 38 | content: content, 39 | author: item.author.name, 40 | tags: tags, 41 | url: this.config.wordpressApiUrl 42 | }; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/pipes/pipes.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { TrimHtmlPipe } from './trim-html.pipe'; 3 | import { TruncatePipe } from './truncate.pipe'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | TruncatePipe, 8 | TrimHtmlPipe 9 | ], 10 | exports: [ 11 | TruncatePipe, 12 | TrimHtmlPipe 13 | ] 14 | }) 15 | export class PipesModule { 16 | 17 | } 18 | -------------------------------------------------------------------------------- /src/pipes/trim-html.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'trimHtml' 5 | }) 6 | export class TrimHtmlPipe implements PipeTransform { 7 | public transform(value: string): string { 8 | return this.htmlToPlainText(value); 9 | } 10 | 11 | private htmlToPlainText(html: string): string { 12 | return String(html).replace(/<[^>]+>/gm, ''); 13 | } 14 | } -------------------------------------------------------------------------------- /src/pipes/truncate.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'truncate' 5 | }) 6 | export class TruncatePipe implements PipeTransform { 7 | transform(value: string, limit: number): string { 8 | return value.length > limit ? value.substring(0, limit) + '...' : value; 9 | } 10 | } -------------------------------------------------------------------------------- /src/service-worker.js: -------------------------------------------------------------------------------- 1 | // tick this to make the cache invalidate and update 2 | const CACHE_VERSION = 1; 3 | const CURRENT_CACHES = { 4 | 'read-through': 'read-through-cache-v' + CACHE_VERSION 5 | }; 6 | 7 | self.addEventListener('activate', (event) => { 8 | // Delete all caches that aren't named in CURRENT_CACHES. 9 | // While there is only one cache in this example, the same logic will handle the case where 10 | // there are multiple versioned caches. 11 | const expectedCacheNames = Object.keys(CURRENT_CACHES).map((key) => { 12 | return CURRENT_CACHES[key]; 13 | }); 14 | 15 | event.waitUntil( 16 | caches.keys().then((cacheNames) => { 17 | return Promise.all( 18 | cacheNames.map((cacheName) => { 19 | if (expectedCacheNames.indexOf(cacheName) === -1) { 20 | // If this cache name isn't present in the array of "expected" cache names, then delete it. 21 | console.log('Deleting out of date cache:', cacheName); 22 | return caches.delete(cacheName); 23 | } 24 | }) 25 | ); 26 | }) 27 | ); 28 | }); 29 | 30 | // This sample illustrates an aggressive approach to caching, in which every valid response is 31 | // cached and every request is first checked against the cache. 32 | // This may not be an appropriate approach if your web application makes requests for 33 | // arbitrary URLs as part of its normal operation (e.g. a RSS client or a news aggregator), 34 | // as the cache could end up containing large responses that might not end up ever being accessed. 35 | // Other approaches, like selectively caching based on response headers or only caching 36 | // responses served from a specific domain, might be more appropriate for those use cases. 37 | self.addEventListener('fetch', (event) => { 38 | 39 | event.respondWith( 40 | caches.open(CURRENT_CACHES['read-through']).then((cache) => { 41 | return cache.match(event.request).then((response) => { 42 | if (response) { 43 | // If there is an entry in the cache for event.request, then response will be defined 44 | // and we can just return it. 45 | 46 | return response; 47 | } 48 | 49 | // Otherwise, if there is no entry in the cache for event.request, response will be 50 | // undefined, and we need to fetch() the resource. 51 | console.log(' No response for %s found in cache. ' + 52 | 'About to fetch from network...', event.request.url); 53 | 54 | // We call .clone() on the request since we might use it in the call to cache.put() later on. 55 | // Both fetch() and cache.put() "consume" the request, so we need to make a copy. 56 | // (see https://fetch.spec.whatwg.org/#dom-request-clone) 57 | return fetch(event.request.clone()).then((response) => { 58 | 59 | // Optional: add in extra conditions here, e.g. response.type == 'basic' to only cache 60 | // responses from the same domain. See https://fetch.spec.whatwg.org/#concept-response-type 61 | if (response.status < 400 && response.type === 'basic') { 62 | // We need to call .clone() on the response object to save a copy of it to the cache. 63 | // (https://fetch.spec.whatwg.org/#dom-request-clone) 64 | cache.put(event.request, response.clone()); 65 | } 66 | 67 | // Return the original response object, which will be used to fulfill the resource request. 68 | return response; 69 | }); 70 | }).catch((error) => { 71 | // This catch() will handle exceptions that arise from the match() or fetch() operations. 72 | // Note that a HTTP error response (e.g. 404) will NOT trigger an exception. 73 | // It will return a normal response object that has the appropriate error code set. 74 | console.error(' Read-through caching failed:', error); 75 | 76 | throw error; 77 | }); 78 | }) 79 | ); 80 | }); -------------------------------------------------------------------------------- /src/services/call.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable() 4 | export class CallService { 5 | public call(phoneNumber: string): void { 6 | window.location.href = 'tel:' + phoneNumber; 7 | } 8 | } -------------------------------------------------------------------------------- /src/services/email.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | export class Email { 4 | to: string; 5 | subject: string; 6 | body: string; 7 | } 8 | 9 | @Injectable() 10 | export class EmailService { 11 | public sendEmail(email: Email) { 12 | let plugins: any = (window).cordova.plugins; 13 | plugins.email.isAvailable(() => { 14 | plugins.email.open(email); 15 | }); 16 | } 17 | } -------------------------------------------------------------------------------- /src/services/in-app-browser.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable() 4 | export class InAppBrowserService { 5 | public open(url: string): boolean { 6 | window.open(url, '_system', 'location=yes'); 7 | return false; 8 | } 9 | } -------------------------------------------------------------------------------- /src/services/maps.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Platform } from 'ionic-angular'; 3 | 4 | @Injectable() 5 | export class MapsService { 6 | private platform: Platform; 7 | 8 | constructor(platform: Platform) { 9 | this.platform = platform; 10 | } 11 | 12 | public openMapsApp(location: any) { 13 | let q; 14 | if (this.platform.is('android')) { 15 | q = 'geo:' + location; 16 | } else { 17 | q = 'maps://maps.apple.com/?q=' + location; 18 | } 19 | window.location.href = q; 20 | } 21 | } -------------------------------------------------------------------------------- /src/theme/variables.scss: -------------------------------------------------------------------------------- 1 | // Ionic Variables and Theming. For more info, please see: 2 | // http://ionicframework.com/docs/v2/theming/ 3 | @import "ionic.globals"; 4 | 5 | 6 | // Shared Variables 7 | // -------------------------------------------------- 8 | // To customize the look and feel of this app, you can override 9 | // the Sass variables found in Ionic's source scss files. 10 | // To view all the possible Ionic variables, see: 11 | // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/ 12 | 13 | $text-color: #000; 14 | $background-color: #fff; 15 | 16 | 17 | // Named Color Variables 18 | // -------------------------------------------------- 19 | // Named colors makes it easy to reuse colors on various components. 20 | // It's highly recommended to change the default colors 21 | // to match your app's branding. Ionic uses a Sass map of 22 | // colors so you can add, rename and remove colors as needed. 23 | // The "primary" color is the only required color in the map. 24 | 25 | $colors: ( 26 | primary: #387ef5, 27 | secondary: #32db64, 28 | danger: #f53d3d, 29 | light: #f4f4f4, 30 | dark: #222, 31 | favorite: #69BB7B 32 | ); 33 | 34 | 35 | // App Theme 36 | // -------------------------------------------------- 37 | // Ionic apps can have different themes applied, which can 38 | // then be future customized. This import comes last 39 | // so that the above variables are used and Ionic's 40 | // default are overridden. 41 | 42 | @import "ionic.theme.default"; 43 | 44 | 45 | // Ionicons 46 | // -------------------------------------------------- 47 | // The premium icon font for Ionic. For more info, please see: 48 | // http://ionicframework.com/docs/v2/ionicons/ 49 | 50 | $ionicons-font-path: "../assets/fonts"; 51 | @import "ionic.ionicons"; 52 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "allowSyntheticDefaultImports": true, 5 | "declaration": true, 6 | "emitDecoratorMetadata": true, 7 | "experimentalDecorators": true, 8 | "lib": [ 9 | "dom", 10 | "es2015" 11 | ], 12 | "module": "es2015", 13 | "moduleResolution": "node", 14 | "target": "es5" 15 | }, 16 | "exclude": [ 17 | "node_modules" 18 | ], 19 | "compileOnSave": false, 20 | "atom": { 21 | "rewriteTsconfig": false 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "align": [ 4 | true, 5 | "parameters", 6 | "arguments", 7 | "statements" 8 | ], 9 | "ban": false, 10 | "class-name": true, 11 | "comment-format": [ 12 | true, 13 | "check-space" 14 | ], 15 | "curly": true, 16 | "eofline": false, 17 | "forin": true, 18 | "indent": [ 19 | true, 20 | "tabs" 21 | ], 22 | "interface-name": true, 23 | "jsdoc-format": true, 24 | "label-position": true, 25 | "max-line-length": [ 26 | true, 27 | 140 28 | ], 29 | "member-access": false, 30 | "member-ordering": [ 31 | true, 32 | "private-before-public", 33 | "static-before-instance", 34 | "variables-before-functions" 35 | ], 36 | "no-any": false, 37 | "no-arg": true, 38 | "no-bitwise": false, 39 | "no-conditional-assignment": true, 40 | "no-console": [ 41 | true, 42 | "debug", 43 | "info", 44 | "time", 45 | "timeEnd", 46 | "trace" 47 | ], 48 | "no-construct": true, 49 | "no-constructor-vars": false, 50 | "no-debugger": true, 51 | "no-shadowed-variable": true, 52 | "no-duplicate-variable": true, 53 | "no-empty": true, 54 | "no-eval": true, 55 | "no-internal-module": true, 56 | "no-require-imports": true, 57 | "no-string-literal": true, 58 | "no-switch-case-fall-through": true, 59 | "trailing-comma": true, 60 | "no-trailing-whitespace": true, 61 | "no-unused-expression": true, 62 | "no-unused-variable": true, 63 | "no-use-before-declare": true, 64 | "no-var-keyword": true, 65 | "no-var-requires": true, 66 | "one-line": [ 67 | true, 68 | "check-open-brace", 69 | "check-catch", 70 | "check-else", 71 | "check-whitespace" 72 | ], 73 | "quotemark": [ 74 | true, 75 | "single" 76 | ], 77 | "radix": true, 78 | "semicolon": true, 79 | "switch-default": true, 80 | "triple-equals": [ 81 | true, 82 | "allow-null-check" 83 | ], 84 | "typedef": [ 85 | false, 86 | "call-signature", 87 | "parameter", 88 | "property-declaration", 89 | "variable-declaration", 90 | "member-variable-declaration" 91 | ], 92 | "typedef-whitespace": [ 93 | true, 94 | { 95 | "call-signature": "nospace", 96 | "index-signature": "nospace", 97 | "parameter": "nospace", 98 | "property-declaration": "nospace", 99 | "variable-declaration": "nospace" 100 | } 101 | ], 102 | "variable-name": false, 103 | "whitespace": [ 104 | true, 105 | "check-branch", 106 | "check-decl", 107 | "check-operator", 108 | "check-separator", 109 | "check-type" 110 | ] 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /www/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | Ionic App 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | --------------------------------------------------------------------------------