Commit c430a211bd2daacf25644083a76eedf6db78be1a
1 parent
872e96eb5b
Exists in
master
mobile angular demo
Showing
2 changed files
with
205 additions
and
0 deletions
Show diff stats
maui/demo.html
| @@ -0,0 +1,75 @@ | @@ -0,0 +1,75 @@ | ||
| 1 | +<!DOCTYPE html> | ||
| 2 | +<!-- | ||
| 3 | + ** NOTE ** | ||
| 4 | + | ||
| 5 | + Run `grunt connect` then | ||
| 6 | + navigate to http://localhost:3000/demo | ||
| 7 | + to see this page in browser | ||
| 8 | + | ||
| 9 | + --> | ||
| 10 | +<html> | ||
| 11 | + <head> | ||
| 12 | + <meta charset="utf-8" /> | ||
| 13 | + <title>Mobile Angular UI Examples</title> | ||
| 14 | + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | ||
| 15 | + <meta name="apple-mobile-web-app-capable" content="yes" /> | ||
| 16 | + <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" /> | ||
| 17 | + <meta name="apple-mobile-web-app-status-bar-style" content="yes" /> | ||
| 18 | + <link rel="shortcut icon" href="/static/bower_components/mobile-angular-ui/demo/favicon.png" type="image/x-icon" /> | ||
| 19 | + <link rel="stylesheet" href="/static/bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" /> | ||
| 20 | + <link rel="stylesheet" href="/static/bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" /> | ||
| 21 | + <link rel="stylesheet" href="/static/bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" /> | ||
| 22 | + <link rel="stylesheet" href="/static/bower_components/mobile-angular-ui/demo/demo.css" /> | ||
| 23 | + <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> | ||
| 24 | + <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js"></script> | ||
| 25 | + <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-touch.min.js"></script> | ||
| 26 | + <script src="/static/bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script> | ||
| 27 | + <script src="/static/bower_components/mobile-angular-ui/demo/demo.js"></script> | ||
| 28 | + </head> | ||
| 29 | + <body ng-app="MobileAngularUiExamples" ng-controller="MainController"> | ||
| 30 | + | ||
| 31 | + <!-- Sidebars --> | ||
| 32 | + <div ng-include="'sidebar.html'" class="sidebar sidebar-left" toggleable parent-active-class="sidebar-left-in" id="mainSidebar"></div> | ||
| 33 | + | ||
| 34 | + <div ng-include="'sidebarRight.html'" class="sidebar sidebar-right" toggleable parent-active-class="sidebar-right-in" id="rightSidebar"></div> | ||
| 35 | + | ||
| 36 | + <div class="app"> | ||
| 37 | + | ||
| 38 | + <!-- Navbars --> | ||
| 39 | + | ||
| 40 | + <div class="navbar navbar-app navbar-absolute-top"> | ||
| 41 | + <div class="navbar-brand navbar-brand-center" yield-to="title"> | ||
| 42 | + <span>Mobile Angular UI</span> | ||
| 43 | + </div> | ||
| 44 | + <div class="btn-group pull-left"> | ||
| 45 | + <div ng-click="toggle('mainSidebar')" class="btn btn-navbar sidebar-toggle"> | ||
| 46 | + <i class="fa fa-bars"></i> Menu | ||
| 47 | + </div> | ||
| 48 | + </div> | ||
| 49 | + <div class="btn-group pull-right" yield-to="navbarAction"> | ||
| 50 | + <div ng-click="toggle('rightSidebar')" class="btn btn-navbar"> | ||
| 51 | + <i class="fa fa-comment"></i> Chat | ||
| 52 | + </div> | ||
| 53 | + </div> | ||
| 54 | + </div> | ||
| 55 | + | ||
| 56 | + <div class="navbar navbar-app navbar-absolute-bottom"> | ||
| 57 | + <div class="btn-group justified"> | ||
| 58 | + <a href="http://mobileangularui.com/" class="btn btn-navbar"><i class="fa fa-home fa-navbar"></i> Docs</a> | ||
| 59 | + <a href="https://github.com/mcasimir/mobile-angular-ui" class="btn btn-navbar"><i class="fa fa-github fa-navbar"></i> Sources</a> | ||
| 60 | + <a href="https://github.com/mcasimir/mobile-angular-ui/issues" class="btn btn-navbar"><i class="fa fa-exclamation-circle fa-navbar"></i> Issues</a> | ||
| 61 | + </div> | ||
| 62 | + </div> | ||
| 63 | + | ||
| 64 | + <!-- App Body --> | ||
| 65 | + <div class="app-body" ng-class="{loading: loading}"> | ||
| 66 | + <div ng-show="loading" class="app-content-loading"> | ||
| 67 | + <i class="fa fa-spinner fa-spin loading-spinner"></i> | ||
| 68 | + </div> | ||
| 69 | + | ||
| 70 | + <ng-view class="app-content" ng-hide="loading"></ng-view> | ||
| 71 | + </div> | ||
| 72 | + | ||
| 73 | + </div><!-- ~ .app --> | ||
| 74 | + </body> | ||
| 75 | +</html> |
maui/demo.js
| @@ -0,0 +1,130 @@ | @@ -0,0 +1,130 @@ | ||
| 1 | +var app = angular.module('MobileAngularUiExamples', [ | ||
| 2 | + "ngRoute", | ||
| 3 | + "ngTouch", | ||
| 4 | + "mobile-angular-ui" | ||
| 5 | +]); | ||
| 6 | + | ||
| 7 | +app.config(function($routeProvider, $locationProvider) { | ||
| 8 | + $routeProvider.when('/', {templateUrl: "home.html"}); | ||
| 9 | + $routeProvider.when('/scroll', {templateUrl: "scroll.html"}); | ||
| 10 | + $routeProvider.when('/toggle', {templateUrl: "toggle.html"}); | ||
| 11 | + $routeProvider.when('/tabs', {templateUrl: "tabs.html"}); | ||
| 12 | + $routeProvider.when('/accordion', {templateUrl: "accordion.html"}); | ||
| 13 | + $routeProvider.when('/overlay', {templateUrl: "overlay.html"}); | ||
| 14 | + $routeProvider.when('/forms', {templateUrl: "forms.html"}); | ||
| 15 | + $routeProvider.when('/carousel', {templateUrl: "carousel.html"}); | ||
| 16 | +}); | ||
| 17 | + | ||
| 18 | +app.service('analytics', [ | ||
| 19 | + '$rootScope', '$window', '$location', function($rootScope, $window, $location) { | ||
| 20 | + var send = function(evt, data) { | ||
| 21 | + ga('send', evt, data); | ||
| 22 | + } | ||
| 23 | + } | ||
| 24 | +]); | ||
| 25 | + | ||
| 26 | +app.directive( "carouselExampleItem", function($rootScope, $swipe){ | ||
| 27 | + return function(scope, element, attrs){ | ||
| 28 | + var startX = null; | ||
| 29 | + var startY = null; | ||
| 30 | + var endAction = "cancel"; | ||
| 31 | + var carouselId = element.parent().parent().attr("id"); | ||
| 32 | + | ||
| 33 | + var translateAndRotate = function(x, y, z, deg){ | ||
| 34 | + element[0].style["-webkit-transform"] = "translate3d("+x+"px,"+ y +"px," + z + "px) rotate("+ deg +"deg)"; | ||
| 35 | + element[0].style["-moz-transform"] = "translate3d("+x+"px," + y +"px," + z + "px) rotate("+ deg +"deg)"; | ||
| 36 | + element[0].style["-ms-transform"] = "translate3d("+x+"px," + y + "px," + z + "px) rotate("+ deg +"deg)"; | ||
| 37 | + element[0].style["-o-transform"] = "translate3d("+x+"px," + y + "px," + z + "px) rotate("+ deg +"deg)"; | ||
| 38 | + element[0].style["transform"] = "translate3d("+x+"px," + y + "px," + z + "px) rotate("+ deg +"deg)"; | ||
| 39 | + } | ||
| 40 | + | ||
| 41 | + $swipe.bind(element, { | ||
| 42 | + start: function(coords) { | ||
| 43 | + endAction = null; | ||
| 44 | + startX = coords.x; | ||
| 45 | + startY = coords.y; | ||
| 46 | + }, | ||
| 47 | + | ||
| 48 | + cancel: function(e) { | ||
| 49 | + endAction = null; | ||
| 50 | + translateAndRotate(0, 0, 0, 0); | ||
| 51 | + e.stopPropagation(); | ||
| 52 | + }, | ||
| 53 | + | ||
| 54 | + end: function(coords, e) { | ||
| 55 | + if (endAction == "prev") { | ||
| 56 | + $rootScope.carouselPrev(carouselId); | ||
| 57 | + } else if (endAction == "next") { | ||
| 58 | + $rootScope.carouselNext(carouselId); | ||
| 59 | + } | ||
| 60 | + translateAndRotate(0, 0, 0, 0); | ||
| 61 | + e.stopPropagation(); | ||
| 62 | + }, | ||
| 63 | + | ||
| 64 | + move: function(coords) { | ||
| 65 | + if( startX != null) { | ||
| 66 | + var deltaX = coords.x - startX; | ||
| 67 | + var deltaXRatio = deltaX / element[0].clientWidth; | ||
| 68 | + if (deltaXRatio > 0.3) { | ||
| 69 | + endAction = "next"; | ||
| 70 | + } else if (deltaXRatio < -0.3){ | ||
| 71 | + endAction = "prev"; | ||
| 72 | + } else { | ||
| 73 | + endAction = null; | ||
| 74 | + } | ||
| 75 | + translateAndRotate(deltaXRatio * 200, 0, 0, deltaXRatio * 15); | ||
| 76 | + } | ||
| 77 | + } | ||
| 78 | + }); | ||
| 79 | + } | ||
| 80 | +}); | ||
| 81 | + | ||
| 82 | +app.controller('MainController', function($rootScope, $scope, analytics){ | ||
| 83 | + | ||
| 84 | + $rootScope.$on("$routeChangeStart", function(){ | ||
| 85 | + $rootScope.loading = true; | ||
| 86 | + }); | ||
| 87 | + | ||
| 88 | + $rootScope.$on("$routeChangeSuccess", function(){ | ||
| 89 | + $rootScope.loading = false; | ||
| 90 | + }); | ||
| 91 | + | ||
| 92 | + var scrollItems = []; | ||
| 93 | + | ||
| 94 | + for (var i=1; i<=100; i++) { | ||
| 95 | + scrollItems.push("Item " + i); | ||
| 96 | + } | ||
| 97 | + | ||
| 98 | + $scope.scrollItems = scrollItems; | ||
| 99 | + $scope.invoice = {payed: true}; | ||
| 100 | + | ||
| 101 | + $scope.userAgent = navigator.userAgent; | ||
| 102 | + $scope.chatUsers = [ | ||
| 103 | + { name: "Carlos Flowers", online: true }, | ||
| 104 | + { name: "Byron Taylor", online: true }, | ||
| 105 | + { name: "Jana Terry", online: true }, | ||
| 106 | + { name: "Darryl Stone", online: true }, | ||
| 107 | + { name: "Fannie Carlson", online: true }, | ||
| 108 | + { name: "Holly Nguyen", online: true }, | ||
| 109 | + { name: "Bill Chavez", online: true }, | ||
| 110 | + { name: "Veronica Maxwell", online: true }, | ||
| 111 | + { name: "Jessica Webster", online: true }, | ||
| 112 | + { name: "Jackie Barton", online: true }, | ||
| 113 | + { name: "Crystal Drake", online: false }, | ||
| 114 | + { name: "Milton Dean", online: false }, | ||
| 115 | + { name: "Joann Johnston", online: false }, | ||
| 116 | + { name: "Cora Vaughn", online: false }, | ||
| 117 | + { name: "Nina Briggs", online: false }, | ||
| 118 | + { name: "Casey Turner", online: false }, | ||
| 119 | + { name: "Jimmie Wilson", online: false }, | ||
| 120 | + { name: "Nathaniel Steele", online: false }, | ||
| 121 | + { name: "Aubrey Cole", online: false }, | ||
| 122 | + { name: "Donnie Summers", online: false }, | ||
| 123 | + { name: "Kate Myers", online: false }, | ||
| 124 | + { name: "Priscilla Hawkins", online: false }, | ||
| 125 | + { name: "Joe Barker", online: false }, | ||
| 126 | + { name: "Lee Norman", online: false }, | ||
| 127 | + { name: "Ebony Rice", online: false } | ||
| 128 | + ]; | ||
| 129 | + | ||
| 130 | +}); | ||
| 0 | \ No newline at end of file | 131 | \ No newline at end of file |