Cleaned up examples folder
Max Lynch
@ -1,27 +0,0 @@
|
||||
.pane {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
.reveal-animation {
|
||||
/*
|
||||
-webkit-transform: translate3d(0%, 0, 0);
|
||||
transform: translate3d(0%, 0, 0);
|
||||
|
||||
-webkit-transition: -webkit-transform 1s ease-in-out;
|
||||
transition: transform 1s ease-in-out;
|
||||
*/
|
||||
}
|
||||
.reveal-animation.ng-enter {
|
||||
-webkit-transition: 0.2s linear all;
|
||||
-webkit-transform:translate3d(100%,0,0) ;
|
||||
}
|
||||
.reveal-animation.ng-enter-active {
|
||||
-webkit-transform:translate3d(0,0,0) ;
|
||||
}
|
||||
.reveal-animation.ng-leave {
|
||||
-webkit-transition: 0.2s linear all;
|
||||
-webkit-transform:translate3d(0,0,0);
|
||||
}
|
||||
.reveal-animation.ng-leave-active {
|
||||
-webkit-transform:translate3d(-100%,0,0);
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
document.addEventListener('touchstart', function() {});
|
||||
|
||||
var app = angular.module('peopleApp', ['ngRoute', 'ngAnimate']);
|
||||
|
||||
app.config( ["$routeProvider", function($routeProvider){
|
||||
$routeProvider.when("/customers", {"templateUrl" : "customers.html", controller: 'CustomersCtrl'});
|
||||
$routeProvider.when("/customer/:id", {"templateUrl" : "customer.html", controller: 'CustomerCtrl'});
|
||||
$routeProvider.otherwise({"redirectTo":"/customers"});
|
||||
|
||||
}]
|
||||
);
|
||||
|
||||
app.provider('Customers', function() {
|
||||
var customers = [
|
||||
{'name': 'Max Lynch', id: 1},
|
||||
{'name': 'Max Lynch', id: 2},
|
||||
{'name': 'Max Lynch', id: 3},
|
||||
{'name': 'Max Lynch', id: 4},
|
||||
{'name': 'Max Lynch', id: 5},
|
||||
{'name': 'Max Lynch', id: 6},
|
||||
{'name': 'Max Lynch', id: 7},
|
||||
{'name': 'Max Lynch', id: 8},
|
||||
{'name': 'Max Lynch', id: 9},
|
||||
{'name': 'Max Lynch', id: 10},
|
||||
{'name': 'Max Lynch', id: 11},
|
||||
];
|
||||
|
||||
this.$get = function() {
|
||||
return {
|
||||
list: customers,
|
||||
getById: function(id) {
|
||||
for(var i = 0; i < this.list.length; i++) { if(this.list[i].id == id) return this.list[i]; }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
app.controller('CustomersCtrl', function($scope, Customers) {
|
||||
$scope.customers = Customers;
|
||||
});
|
||||
|
||||
app.controller('CustomerCtrl', function($scope, $routeParams, Customers) {
|
||||
var id = $routeParams.id;
|
||||
var customer = Customers.getById(id);
|
||||
$scope.customer = customer;
|
||||
console.log('Showing user', id, customer);
|
||||
});
|
||||
@ -1,54 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
<link rel="stylesheet" href="app.css">
|
||||
<style>
|
||||
.swiperight {
|
||||
-webkit-transition: 0.1s ease-in-out all;
|
||||
-webkit-transform:translate3d(120%,0,0) ;
|
||||
}
|
||||
#remove-box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
button {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content padded">
|
||||
<a href="#" id="tap-button" class="button button-success">Tap me!</a>
|
||||
<a href="#" id="swipe-button" class="button button-success">Swipe me!</a>
|
||||
<div id="remove-box" class="relative">
|
||||
<div id="remove-box-overlay" class="overlay">Tap to remove me</div>
|
||||
<form action="/badurl">
|
||||
<button type="submit">Under click</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="event-log"></div>
|
||||
</div>
|
||||
<script src="../js/utils.js"></script>
|
||||
<script src="../js/gestures.js"></script>
|
||||
<script src="../js/events.js"></script>
|
||||
<script src="events.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,90 +0,0 @@
|
||||
var logEvent = function(data) {
|
||||
var e = document.getElementById('event-log');
|
||||
var l = document.createElement('div');
|
||||
l.innerHTML = 'EVENT: ' + data.type;
|
||||
console.log(data.event);
|
||||
e.appendChild(l);
|
||||
}
|
||||
|
||||
var tb = document.getElementById('tap-button');
|
||||
var sb = document.getElementById('swipe-button');
|
||||
var rb = document.getElementById('remove-box-overlay');
|
||||
|
||||
window.FM.on('click', function(e) {
|
||||
console.log('GOT CLICK', e);
|
||||
logEvent({
|
||||
type: 'click',
|
||||
event: e
|
||||
});
|
||||
}, tb);
|
||||
|
||||
window.FM.onGesture('tap', function(e) {
|
||||
e.target.parentNode.removeChild(e.target);
|
||||
console.log('GOT CLICK ON BOX', e);
|
||||
logEvent({
|
||||
type: 'clickbox',
|
||||
event: e
|
||||
});
|
||||
}, rb);
|
||||
|
||||
window.FM.onGesture('tap', function(e) {
|
||||
console.log('GOT TAP', e);
|
||||
logEvent({
|
||||
type: 'tap',
|
||||
event: e
|
||||
});
|
||||
}, tb);
|
||||
window.FM.onGesture('touch', function(e) {
|
||||
console.log('GOT TOUCH', e);
|
||||
logEvent({
|
||||
type: 'touch',
|
||||
event: e
|
||||
});
|
||||
}, tb);
|
||||
|
||||
window.FM.onGesture('release', function(e) {
|
||||
console.log('GOT RELEASE', e);
|
||||
logEvent({
|
||||
type: 'release',
|
||||
event: e
|
||||
});
|
||||
}, tb);
|
||||
window.FM.onGesture('swipe', function(e) {
|
||||
console.log('GOT SWIPE', e);
|
||||
logEvent({
|
||||
type: 'swipe',
|
||||
event: e
|
||||
});
|
||||
}, sb);
|
||||
window.FM.onGesture('swiperight', function(e) {
|
||||
console.log('GOT SWIPE RIGHT', e);
|
||||
logEvent({
|
||||
type: 'swiperight',
|
||||
event: e
|
||||
});
|
||||
|
||||
e.target.classList.add('swiperight');
|
||||
}, sb);
|
||||
window.FM.onGesture('swipeleft', function(e) {
|
||||
console.log('GOT SWIPE LEFT', e);
|
||||
logEvent({
|
||||
type: 'swipeleft',
|
||||
event: e
|
||||
});
|
||||
|
||||
e.target.classList.add('swipeleft');
|
||||
}, sb);
|
||||
window.FM.onGesture('swipeup', function(e) {
|
||||
console.log('GOT SWIPE UP', e);
|
||||
logEvent({
|
||||
type: 'swipeup',
|
||||
event: e
|
||||
});
|
||||
}, sb);
|
||||
window.FM.onGesture('swipedown', function(e) {
|
||||
console.log('GOT SWIPE DOWN', e);
|
||||
logEvent({
|
||||
type: 'swipedown',
|
||||
event: e
|
||||
});
|
||||
}, sb);
|
||||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 193 KiB After Width: | Height: | Size: 193 KiB |
|
Before Width: | Height: | Size: 136 KiB After Width: | Height: | Size: 136 KiB |
|
Before Width: | Height: | Size: 403 KiB After Width: | Height: | Size: 403 KiB |
|
Before Width: | Height: | Size: 348 KiB After Width: | Height: | Size: 348 KiB |
|
Before Width: | Height: | Size: 221 KiB After Width: | Height: | Size: 221 KiB |
|
Before Width: | Height: | Size: 133 KiB After Width: | Height: | Size: 133 KiB |
|
Before Width: | Height: | Size: 180 KiB After Width: | Height: | Size: 180 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |