Raataar/pokedex
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Neues Initialrelease mit IonicMaterial

Browse Source
This commit is contained in:
Carsten Hilmer
2016-08-22 12:55:52 +02:00
parent 30a5df79aa
commit 45e482b14d
1249 changed files with 305225 additions and 68794 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
www/templates/menu/html/menu.html Normal file
View File

@@ -0,0 +1,241 @@
<!--View Information-->
<!--View name : Menu-->
<!--Controller name : menuCtrl-->
<!--Controller path : www/templates/menu/js/controllers.js-->
<!--State name : app-->
<!--URL : #app-->
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-balanced material-background-nav-bar">
<ion-nav-buttons side="left">
<a class="button button-icon button-clear ion-navicon" menu-toggle="left" ng-click="toggleLeft()"></a>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<md-sidenav md-component-id="left" on-swipe-left="closeSideNav()" on-drag-left="closeSideNav()">
<!--menu section-->
<div class="material-background" id="toggle-menu-left-header">
<!--menu header section-->
<div class="menu-left-header">
<img class="user-img" src="img/profileAvatar.jpg">
<p>
<span class="title">Ionic Material</span>
<br/>
<span class="sub-title">Material Design Application</span>
</p>
</div><!--end menu header section-->
</div> <!--menu content section-->
<ion-content id="toggle-menu-left-content">
<!--If device is android application will present below code.-->
<!--It will disable animation to better performance on android.-->
<!--list section-->
<div ng-if="isAndroid" class="menu-list">
<md-subheader class="md-warn">Application Storage</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.contractlist')">
<div class="col-33">
<i class="fa fa-database"></i>
</div>
<div class="col-66">
<span>SQLite DB</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.imagedownload')">
<div class="col-33">
<i class="fa fa-database"></i>
</div>
<div class="col-66">
<span>Bilder Herunterladen</span>
</div>
</div>
<md-subheader class="md-warn">Share Application Content</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.contractUs')">
<div class="col-33">
<i class="fa fa-inbox"></i>
</div>
<div class="col-66">
<span>Email & Message</span>
</div>
</div>
<md-subheader class="md-warn">Advertising Application</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.googleAdmob')">
<div class="col-33">
<i class="fa fa-money"></i>
</div>
<div class="col-66">
<span>Google AdMob</span>
</div>
</div>
<md-subheader class="md-warn">Push Notification</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.singlePushNotification')">
<div class="col-33">
<i class="fa fa-sign-in fa-rotate-90"></i>
</div>
<div class="col-66">
<span>Single Push</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.schedulePushNotification')">
<div class="col-33">
<i class="fa fa-clock-o"></i>
</div>
<div class="col-66">
<span>Schedule Push</span>
</div>
</div>
<md-subheader class="md-warn">Hardware Connect</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.mobileContractList')">
<div class="col-33">
<i class="fa fa-users"></i>
</div>
<div class="col-66">
<span>Mobile Contract</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.imagePicker')">
<div class="col-33">
<i class="fa fa-picture-o"></i>
</div>
<div class="col-66">
<span>Image Picker</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.vibration')">
<div class="col-33">
<i class="fa fa-asterisk"></i>
</div>
<div class="col-66">
<span>Vibration</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.flashLight')">
<div class="col-33">
<i class="fa fa-bolt"></i>
</div>
<div class="col-66">
<span>Flashlight</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.deviceInformation')">
<div class="col-33">
<i class="fa fa-info"></i>
</div>
<div class="col-66">
<span>Device Information</span>
</div>
</div>
<md-subheader class="md-warn">Material User Interface</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.dashboard')">
<div class="col-33">
<i class="fa fa-th-list"></i>
</div>
<div class="col-66">
<span>Dashboard</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.defaultUI')">
<div class="col-33">
<i class="fa fa-bookmark-o"></i>
</div>
<div class="col-66">
<span>Default UI</span>
</div>
</div>
<md-subheader class="md-warn">Themes</md-subheader>
<div class="row menu-item" ng-click="navigateTo('app.tryAppNoBackBtn')">
<div class="col-33">
<i class="fa fa-diamond"></i>
</div>
<div class="col-66">
<span>Try App</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.pricing')">
<div class="col-33">
<i class="fa fa-line-chart"></i>
</div>
<div class="col-66">
<span>Pricing</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.menuDashboard')">
<div class="col-33">
<i class="fa fa-th-large"></i>
</div>
<div class="col-66">
<span>Menu Dashboard</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.expense')">
<div class="col-33">
<i class="fa fa-suitcase"></i>
</div>
<div class="col-66">
<span>Expense</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.newsFeed')">
<div class="col-33">
<i class="fa fa-newspaper-o"></i>
</div>
<div class="col-66">
<span>News Feed</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.onlineCourse')">
<div class="col-33">
<i class="fa fa-graduation-cap"></i>
</div>
<div class="col-66">
<span>Online Course</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.locationFeed')">
<div class="col-33">
<i class="fa fa-flag"></i>
</div>
<div class="col-66">
<span>Location Feed</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.cubeFeed')">
<div class="col-33">
<i class="fa fa-cubes"></i>
</div>
<div class="col-66">
<span>Cube Feed</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.clothShop')">
<div class="col-33">
<i class="fa fa-heart"></i>
</div>
<div class="col-66">
<span>Cloth Shop</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.catalog')">
<div class="col-33">
<i class="fa fa-tags"></i>
</div>
<div class="col-66">
<span>Catalog</span>
</div>
</div>
<div class="row menu-item" ng-click="navigateTo('app.restaurant')">
<div class="col-33">
<i class="fa fa-cutlery"></i>
</div>
<div class="col-66">
<span>Restaurant</span>
</div>
</div>
</div>
</ion-content><!--end menu content section-->
<!--end menu section-->
</md-sidenav>
</ion-side-menus>

143
www/templates/menu/js/controllers.js Normal file
View File

@@ -0,0 +1,143 @@
// Controller of menu toggle.
// Learn more about Sidenav directive of angular material
// https://material.angularjs.org/latest/#/demo/material.components.sidenav
appControllers.controller('menuCtrl', function ($scope, $timeout, $mdUtil, $mdSidenav, $log, $ionicHistory, $state, $ionicPlatform, $mdDialog, $mdBottomSheet, $mdMenu, $mdSelect) {
$scope.toggleLeft = buildToggler('left');
// buildToggler is for create menu toggle.
// Parameter :
// navID = id of navigation bar.
function buildToggler(navID) {
var debounceFn = $mdUtil.debounce(function () {
$mdSidenav(navID).toggle();
}, 0);
return debounceFn;
};// End buildToggler.
// navigateTo is for navigate to other page
// by using targetPage to be the destination state.
// Parameter :
// stateNames = target state to go
$scope.navigateTo = function (stateName) {
$timeout(function () {
$mdSidenav('left').close();
if ($ionicHistory.currentStateName() != stateName) {
$ionicHistory.nextViewOptions({
disableAnimate: true,
disableBack: true
});
$state.go(stateName);
}
}, ($scope.isAndroid == false ? 300 : 0));
};// End navigateTo.
//closeSideNav is for close side navigation
//It will use with event on-swipe-left="closeSideNav()" on-drag-left="closeSideNav()"
//When user swipe or drag md-sidenav to left side
$scope.closeSideNav = function(){
$mdSidenav('left').close();
};
//End closeSideNav
// $ionicPlatform.registerBackButtonAction(callback, priority, [actionId])
//
// Register a hardware back button action. Only one action will execute
// when the back button is clicked, so this method decides which of
// the registered back button actions has the highest priority.
//
// For example, if an actionsheet is showing, the back button should
// close the actionsheet, but it should not also go back a page view
// or close a modal which may be open.
//
// The priorities for the existing back button hooks are as follows:
// Return to previous view = 100
// Close side menu = 150
// Dismiss modal = 200
// Close action sheet = 300
// Dismiss popup = 400
// Dismiss loading overlay = 500
//
// Your back button action will override each of the above actions
// whose priority is less than the priority you provide. For example,
// an action assigned a priority of 101 will override the ‘return to
// previous view’ action, but not any of the other actions.
//
// Learn more at : http://ionicframework.com/docs/api/service/$ionicPlatform/#registerBackButtonAction
$ionicPlatform.registerBackButtonAction(function(){
if($mdSidenav("left").isOpen()){
//If side navigation is open it will close and then return
$mdSidenav('left').close();
}
else if(jQuery('md-bottom-sheet').length > 0 ) {
//If bottom sheet is open it will close and then return
$mdBottomSheet.cancel();
}
else if(jQuery('[id^=dialog]').length > 0 ){
//If popup dialog is open it will close and then return
$mdDialog.cancel();
}
else if(jQuery('md-menu-content').length > 0 ){
//If md-menu is open it will close and then return
$mdMenu.hide();
}
else if(jQuery('md-select-menu').length > 0 ){
//If md-select is open it will close and then return
$mdSelect.hide();
}
else{
// If control :
// side navigation,
// bottom sheet,
// popup dialog,
// md-menu,
// md-select
// is not opening, It will show $mdDialog to ask for
// Confirmation to close the application or go to the view of lasted state.
// Check for the current state that not have previous state.
// It will show $mdDialog to ask for Confirmation to close the application.
if($ionicHistory.backView() == null){
//Check is popup dialog is not open.
if(jQuery('[id^=dialog]').length == 0 ) {
// mdDialog for show $mdDialog to ask for
// Confirmation to close the application.
$mdDialog.show({
controller: 'DialogController',
templateUrl: 'confirm-dialog.html',
targetEvent: null,
locals: {
displayOption: {
title: "Confirmation",
content: "Do you want to close the application?",
ok: "Confirm",
cancel: "Cancel"
}
}
}).then(function () {
//If user tap Confirm at the popup dialog.
//Application will close.
ionic.Platform.exitApp();
}, function () {
// For cancel button actions.
}); //End mdDialog
}
}
else{
//Go to the view of lasted state.
$ionicHistory.goBack();
}
}
},100);
//End of $ionicPlatform.registerBackButtonAction
}); // End of menu toggle controller.