mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
348 lines
9.9 KiB
HTML
348 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="ionicApp">
|
|
<head>
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
|
<style>
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
outline: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
div {
|
|
background-color: #eee;
|
|
}
|
|
input {
|
|
-webkit-user-select: auto;
|
|
}
|
|
button {
|
|
font-size: 24px;
|
|
background: gray;
|
|
}
|
|
.activated {
|
|
background: red !important;
|
|
}
|
|
.notifiers div {
|
|
position: fixed;
|
|
right: 0;
|
|
color: white;
|
|
padding: 1px;
|
|
width: 70px;
|
|
text-align: center;
|
|
display: none;
|
|
font-size: 10px;
|
|
}
|
|
#click {
|
|
top: 0;
|
|
background: green;
|
|
}
|
|
#mousedown {
|
|
top: 15px;
|
|
background: lightblue;
|
|
}
|
|
#mouseup {
|
|
top: 30px;
|
|
background: blue;
|
|
}
|
|
#mousemove {
|
|
top: 45px;
|
|
background: darkblue;
|
|
}
|
|
#touchstart {
|
|
top: 60px;
|
|
background: pink;
|
|
}
|
|
#touchend {
|
|
top: 75px;
|
|
background: red;
|
|
}
|
|
#touchmove {
|
|
top: 90px;
|
|
background: maroon;
|
|
}
|
|
#touchcancel {
|
|
top: 105px;
|
|
background: purple;
|
|
}
|
|
#focusin {
|
|
top: 120px;
|
|
background: orange;
|
|
}
|
|
#focusout {
|
|
top: 135px;
|
|
background: orangered;
|
|
}
|
|
#clickblocked {
|
|
top: 150px;
|
|
background: darkgray;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
|
|
<script src="../../../../dist/js/ionic.bundle.js"></script>
|
|
</head>
|
|
<body ng-controller="MainCtrl">
|
|
|
|
<div style="margin-bottom: 20px">
|
|
<button style="padding: 5px">Btn</button>
|
|
<a href="#" style="display:inline-block; padding:10px; background:#eee">Link</a>
|
|
<label style="background: yellow; padding: 12px 0 12px 40px">
|
|
<input type="checkbox" style="width:25px;height:25px">
|
|
</label>
|
|
<label style="background: orange; padding: 12px 0 12px 40px">
|
|
<input type="radio" name="radio" style="width:25px;height:25px">
|
|
</label>
|
|
<label style="background: orangered; padding: 12px 0 12px 40px">
|
|
<input type="radio" name="radio" style="width:25px;height:25px">
|
|
</label>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 20px">
|
|
<label style="background: green; padding: 12px 0 12px 50px">
|
|
<input style="width: 60px; height: 28px">
|
|
</label>
|
|
<label style="background: blue; padding: 12px 0 12px 50px;">
|
|
<select>
|
|
<option>Opt 1</option>
|
|
<option>Opt 2</option>
|
|
<option>Opt 3</option>
|
|
<option>Opt 4</option>
|
|
<option>Opt 5</option>
|
|
</select>
|
|
</label>
|
|
<div id="myDiv" style="display:inline-block; width: 20px; background: gray; padding: 12px 0 12px 60px;">div</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div style="padding: 10px 16px; display:inline-block; background:maroon" ng-click="buttonClick()">ng</div>
|
|
<a ng-click="linkClick()" href="#" style="display:inline-block; padding:10px; background:#eee">Link</a>
|
|
<label style="background: yellow; padding: 12px 0 12px 40px">
|
|
<input ng-click="checkboxClick()" type="checkbox" style="width:25px;height:25px">
|
|
</label>
|
|
<label style="background: orange; padding: 12px 0 12px 40px">
|
|
<input type="radio" name="radio" style="width:25px;height:25px">
|
|
</label>
|
|
<label style="background: orangered; padding: 12px 0 12px 40px">
|
|
<input type="radio" name="radio" style="width:25px;height:25px">
|
|
</label>
|
|
</div>
|
|
|
|
<div style="margin:20px 0 10px;">
|
|
<input type="range" style="width: 150px">
|
|
<input type="file" style="width: 100px">
|
|
</div>
|
|
|
|
<div data-tap-disabled="true" style="display:none">
|
|
<leaflet id="map" events="events" center="center" testing="no-testing" markers="markers" defaults="defaults" style="width:80px; height:100px; right: 0; top: 170px; position:absolute; overflow:hidden;"></leaflet>
|
|
</div>
|
|
|
|
<div style="position:absolute; right:0; top: 270px; width: 80px; height:80px; overflow:hidden">
|
|
<img style="width:100%; height:100%;" src="" onclick="imgClick()">
|
|
</div>
|
|
|
|
<!--
|
|
<video controls width=320 height=200 poster="https://www.apple.com/home/images/promo_iphone5s.jpg">
|
|
<source src="http://mastbaumbishop.wikispaces.com/file/view/sample.m4v/77739109/sample.m4v">
|
|
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
|
|
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">
|
|
</video>
|
|
-->
|
|
|
|
<div class="notifiers">
|
|
<div id="click">click</div>
|
|
<div id="mousedown">mousedown</div>
|
|
<div id="mouseup">mouseup</div>
|
|
<div id="mousemove">mousemove</div>
|
|
<div id="touchstart">touchstart</div>
|
|
<div id="touchend">touchend</div>
|
|
<div id="touchmove">touchmove</div>
|
|
<div id="touchcancel">touchcancel</div>
|
|
<div id="focusin">focusin</div>
|
|
<div id="focusout">focusout</div>
|
|
<div id="clickblocked">clickblocked</div>
|
|
</div>
|
|
|
|
<div id="logs"></div>
|
|
|
|
</body>
|
|
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
|
|
<script src="/tmp/angular-leaflet-directive.js"></script>
|
|
<script>
|
|
window.timers = {};
|
|
var duration = 1000;
|
|
|
|
document.addEventListener('mousedown', setEvent, false);
|
|
document.addEventListener('mouseup', setEvent, false);
|
|
//document.addEventListener('mousemove', setEvent, false);
|
|
document.addEventListener('touchstart', setEvent, false);
|
|
document.addEventListener('touchend', setEvent, false);
|
|
document.addEventListener('touchmove', setEvent, false);
|
|
document.addEventListener('touchcancel', setEvent, false);
|
|
document.addEventListener('focusin', onFocusIn, false);
|
|
document.addEventListener('focusout', onFocusOut, false);
|
|
|
|
function setEvent(e) {
|
|
if(e.type.indexOf('move') < 0) {
|
|
console.debug(e.type, e.target.tagName);
|
|
}
|
|
var timerId = e.type + 'timerId';
|
|
clearTimeout(timerId);
|
|
var el = document.getElementById(e.type);
|
|
window.timers[timerId] = setTimeout(function(e2){
|
|
document.getElementById(e.type).style.display = '';
|
|
}, duration);
|
|
el.style.display = 'block';
|
|
}
|
|
|
|
function onFocusIn(e) {
|
|
console.debug('focusin', e.target.tagName, e.isSimulated);
|
|
clearTimeout( window.timers['focusin_timer'] );
|
|
document.getElementById('focusin').style.display = 'block';
|
|
window.timers['focusin_timer'] = setTimeout(function(){
|
|
document.getElementById('focusin').style.display = '';
|
|
}, duration);
|
|
}
|
|
|
|
function onFocusOut(e) {
|
|
console.debug('focusout', e.target.tagName);
|
|
clearTimeout( window.timers['focusout_timer'] );
|
|
document.getElementById('focusout').style.display = 'block';
|
|
window.timers['focusout_timer'] = setTimeout(function(){
|
|
document.getElementById('focusout').style.display = '';
|
|
}, duration);
|
|
}
|
|
|
|
function onClick(e) {
|
|
console.debug('click', (e.pointerType ? e.pointerType : 'mouse'), e.target.tagName)
|
|
clearTimeout( window.timers['onClick_timer'] );
|
|
document.getElementById('click').style.display = 'block';
|
|
document.getElementById('click').innerText = (e.pointerType ? e.pointerType : '') + ' click';
|
|
window.timers['onClick_timer'] = setTimeout(function(){
|
|
document.getElementById('click').style.display = '';
|
|
}, duration);
|
|
}
|
|
document.addEventListener('click', onClick, false);
|
|
|
|
function imgClick() {
|
|
console.debug('img click')
|
|
}
|
|
|
|
|
|
document.getElementById('myDiv').addEventListener('click', function(e){
|
|
console.debug('div clicked!');
|
|
}, false);
|
|
|
|
|
|
var msgs = [];
|
|
var index = 0;
|
|
var timeId;
|
|
var winConsoleError = console.error;
|
|
|
|
function getTime() {
|
|
var d = new Date();
|
|
return d.getSeconds() + '.' + d.getMilliseconds();
|
|
}
|
|
|
|
console.error = function() {
|
|
winConsoleError.apply(this, arguments);
|
|
var args = ['ERROR!'];
|
|
for (var i = 0, j = arguments.length; i < j; i++){
|
|
args.push(arguments[i]);
|
|
}
|
|
console.debug.apply(this, args);
|
|
};
|
|
|
|
console.debug = function() {
|
|
index++;
|
|
var msg = [];
|
|
msg.push(index);
|
|
for (var i = 0, j = arguments.length; i < j; i++){
|
|
msg.push(arguments[i]);
|
|
}
|
|
msg.push(getTime());
|
|
|
|
msg = msg.join(', ');
|
|
|
|
if(arguments[0] === 'ERROR!') msg = '<span style="color:red;font-weight:bold">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'touchstart') msg = '<span style="color:pink">' + msg + '</span>';
|
|
if(arguments[0] === 'touchend') msg = '<span style="color:red">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'mousedown') msg = '<span style="color:lightblue">' + msg + '</span>';
|
|
if(arguments[0] === 'mouseup') msg = '<span style="color:blue">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'focusin') msg = '<span style="color:orange">' + msg + '</span>';
|
|
if(arguments[0] === 'focusout') msg = '<span style="color:orangered">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'click') msg = '<span style="color:green;font-weight:bold">' + msg + '</span>';
|
|
|
|
if(arguments[0] === 'clickPrevent') msg = '<span style="color:gray;">' + msg + '</span>';
|
|
|
|
msgs.unshift( msg );
|
|
|
|
if(msgs.length > 30) {
|
|
msgs.splice(40);
|
|
}
|
|
|
|
// do this so we try not to interfere with the device performance
|
|
clearTimeout(timeId);
|
|
timeId = setTimeout(function(){
|
|
document.getElementById('logs').innerHTML = msgs.join('<br>');
|
|
}, 150);
|
|
|
|
}
|
|
|
|
|
|
angular.module('ionicApp', ['ionic', 'leaflet-directive'])
|
|
|
|
.controller('MainCtrl', function($scope){
|
|
|
|
$scope.buttonClick = function() {
|
|
console.debug('ng-click div');
|
|
};
|
|
|
|
$scope.linkClick = function() {
|
|
console.debug('ng-click link');
|
|
};
|
|
|
|
$scope.checkboxClick = function() {
|
|
console.debug('ng-click checkbox');
|
|
};
|
|
|
|
$scope.events = {
|
|
map: {
|
|
enable: ['click', 'moveend'],
|
|
logic: 'emit'
|
|
}
|
|
};
|
|
|
|
angular.extend($scope, {
|
|
defaults: {
|
|
tileLayer: "http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg",
|
|
maxZoom: 17,
|
|
minZoom: 3,
|
|
attributionControl: false,
|
|
detectRetina: true,
|
|
zoomControl: false
|
|
},
|
|
center: {
|
|
lat: 47.366667,
|
|
lng: 8.55,
|
|
zoom: 12
|
|
},
|
|
markers: {}
|
|
});
|
|
|
|
$scope.$on("leafletDirectiveMap.click", function(e, args) {
|
|
console.debug('map click');
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
</html>
|