angular-pressure
Version:
pressure.js support for Angular.js applications
137 lines (121 loc) • 4.91 kB
HTML
<html ng-app="psEvents">
<head>
<style type="text/css">
html, body {
background-color: #ffffff;
font-size: 16pt;
font-family: 'Futura', 'Avenir', 'Helvetica', sans-serif;
}
h2 {
font-size: 26pt;
}
.btn-test {
border-radius: 5px;
width: 400px;
padding: 5px;
margin: 5px auto;
vertical-align: middle;
text-align: center;
color: white;
background-color: rgb(255,200,0);
}
</style>
</head>
<body>
<div id="target0" class="btn-test"
ng-controller="psCtrl"
ps-force-touch-start="onForceTouchStart($event)"
ps-force-touch-end="onForceTouchEnd()"
ps-force-touch="onForceTouch($event, force)"
ps-force-touch-start-deep-press="onForceTouchStartDeepPress($event)"
ps-force-touch-end-deep-press="count = count + 1"
ps-force-touch-unsupported="onForceTouchUnsupported()"
ps-force-touch-options="{polyfill: true, preventDefault: false}"
ng-init="count=0;force=0"
><h2>{{eventType}}</h2>
<p>default<br>Count: {{count}}<br>Force: {{force}} ({{forceG}})</p></div>
<div id="target1" class="btn-test"
ng-controller="psCtrl"
ps-force-touch-start="onForceTouchStart($event)"
ps-force-touch-end="onForceTouchEnd()"
ps-force-touch="onForceTouch($event, force)"
ps-force-touch-start-deep-press="onForceTouchStartDeepPress($event)"
ps-force-touch-end-deep-press="count = count + 1"
ps-force-touch-unsupported="onForceTouchUnsupported()"
ps-force-touch-options="{polyfill: false, preventDefault: false}"
ng-init="count=0;force=0"
>
<h2>{{eventType}}</h2>
<p>{polyfill: false}<br>Count: {{count}}<br>Force: {{force}}</p>
</div>
<div id="target2" class="btn-test"
ng-controller="psCtrl"
ps-force-touch-start="onForceTouchStart($event)"
ps-force-touch-end="onForceTouchEnd()"
ps-force-touch="onForceTouch($event, force)"
ps-force-touch-start-deep-press="onForceTouchStartDeepPress($event)"
ps-force-touch-end-deep-press="count = count + 1"
ps-force-touch-unsupported="onForceTouchUnsupported()"
ps-force-touch-options="{only: '3d'}"
ng-init="count=0;force=0"
>
<h2>{{eventType}}</h2>
<p>{only: '3d'}<br>Count: {{count}}<br>Force: {{force}}</p>
</div>
<div id="target3" class="btn-test"
ng-controller="psCtrl"
ps-force-touch-start="onForceTouchStart($event)"
ps-force-touch-end="onForceTouchEnd()"
ps-force-touch="onForceTouch($event, force)"
ps-force-touch-start-deep-press="onForceTouchStartDeepPress($event)"
ps-force-touch-end-deep-press="count = count + 1"
ps-force-touch-unsupported="onForceTouchUnsupported()"
ps-force-touch-options="{only: 'force'}"
ng-init="count=0;force=0"
>
<h2>{{eventType}}</h2>
<p>{only: 'force'}<br>Count: {{count}}<br>Force: {{force}}</p>
</div>
<script type="text/javascript" src="./pressure.js"></script>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript" src="./angular.pressure.js"></script>
<script type="text/javascript">
/**
* @psEvents
*/
angular.module('psEvents', ['psForceTouchEvents'])
.controller('psCtrl', function ($scope) {
$scope.eventType = "No events yet";
$scope.force = 0;
$scope.forceG = 0;
$scope.onForceTouchStart = function(event) {
// on Force Touch Start
$scope.eventType = event.type;
};
$scope.onForceTouchEnd = function(event) {
// on Force Touch End
};
// change
$scope.onForceTouch = function(event, force) {
// on Force Touch
$scope.force = Pressure.map(force, 0, 1, 0, 100).toFixed(0);
$scope.forceG = Pressure.map(force, 0, 1, 0, 445.7).toFixed(2) + 'g'; // force (simulation) Gram.
event.element.css('backgroundColor', "rgb(" + parseInt(Pressure.map(force, 0, 1, 255, 0)) + ",200," + parseInt(Pressure.map(force, 0, 1, 0, 255)) +")");
event.element.css('width', Pressure.map(force, 0, 1, 500, 600) + "px");
};
$scope.onForceTouchStartDeepPress = function(event) {
// on Force Touch Start Deep Press
$scope.eventType = event.type;
};
$scope.onForceTouchEndDeepPress = function() {
// on Force Touch End Deep Press
$scope.eventType = event.type;
};
$scope.onForceTouchUnsupported = function(event) {
// on Force Touch Unsupported
};
});
</script>
</body>
</html>