Anthony Improgo / playground

Compare View

switch
from
...
to
 
Commits (3)
Showing 3 changed files   Show diff stats
maui/demo.html
  Diff comments   View file @4f0e0bb
... ... @@ -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="/static/bower_components/angular/angular.min.js"></script>
  24 + <script src="/static/bower_components/angular-route/angular-route.min.js"></script>
  25 + <script src="/static/bower_components/angular-touch/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="demo.js"></script>
  28 + </head>
  29 + <body ng-app="MobileAngularUiExamples" ng-controller="MainController">
  30 +
  31 + <!-- Sidebars -->
  32 + <div ng-include="'/static/bower_components/mobile-angular-ui/demo/sidebar.html'" class="sidebar sidebar-left" toggleable parent-active-class="sidebar-left-in" id="mainSidebar"></div>
  33 +
  34 + <div ng-include="'/static/bower_components/mobile-angular-ui/demo/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
  Diff comments   View file @4f0e0bb
... ... @@ -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: "/static/bower_components/mobile-angular-ui/demo/home.html"});
  9 + $routeProvider.when('/scroll', {templateUrl: "/static/bower_components/mobile-angular-ui/demo/scroll.html"});
  10 + $routeProvider.when('/toggle', {templateUrl: "/static/bower_components/mobile-angular-ui/demo/toggle.html"});
  11 + $routeProvider.when('/tabs', {templateUrl: "/static/bower_components/mobile-angular-ui/demo/tabs.html"});
  12 + $routeProvider.when('/accordion', {templateUrl: "/static/bower_components/mobile-angular-ui/demo/accordion.html"});
  13 + $routeProvider.when('/overlay', {templateUrl: "/static/bower_components/mobile-angular-ui/demo/overlay.html"});
  14 + $routeProvider.when('/forms', {templateUrl: "/static/bower_components/mobile-angular-ui/demo/forms.html"});
  15 + $routeProvider.when('/carousel', {templateUrl: "/static/bower_components/mobile-angular-ui/demo/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 +});
... ...
salt/roots/playground/nginx.conf
  Diff comments   View file @4f0e0bb
... ... @@ -15,6 +15,11 @@ server {
15 15 alias /vagrant/static/;
16 16 }
17 17  
  18 + location /maui/ {
  19 + expires off;
  20 + alias /vagrant/maui/;
  21 + }
  22 +
18 23 location /media/ {
19 24 expires off;
20 25 alias /vagrant/media/;
... ...