javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Max Lynch
2013-08-24 20:46:31 -05:00
parent d9f1c23ee1
commit 9a660ccb00
10 changed files with 179 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
dist/framework-with-theme.css vendored
View File

@ -409,3 +409,6 @@ a.list-item {
background-color: whitesmoke; background-color: whitesmoke;
color: #222222; color: #222222;
font-weight: bold; } font-weight: bold; }
a.list-item {
color: #333333; }

8
example/angular/customer.html
View File

@ -1,3 +1,5 @@
<h2>{{customer.name}}</h2> <div class="content-padded">
<a class="button button-default">Edit</a> <h2>{{customer.name}}</h2>
<a class="button button-danger">Delete</a> <a class="button button-default">Edit</a>
<a class="button button-danger">Delete</a>
</div>

3
example/angular/index.html
View File

@ -11,7 +11,7 @@
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular-animate.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-animate.min.js"></script>
<script src="app.js"></script> <script src="app.js"></script>
</head> </head>
@ -23,5 +23,6 @@
<main class="content" ng-controller="CustomersCtrl"> <main class="content" ng-controller="CustomersCtrl">
<div ng-view class="pane reveal-animation"></div> <div ng-view class="pane reveal-animation"></div>
</main> </main>
<script src="../../js/framework/framework-list.js"></script>
</body> </body>
</html> </html>

21
example/events.html Normal file
View File

@ -0,0 +1,21 @@
<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/framework-with-theme.css">
<link rel="stylesheet" href="app.css">
<script>
</script>
</head>
<body>
<div class="content content-padded">
<a href="#" class="button button-success">Tap me!</a>
<div id="event-log"></div>
</div>
<script src="../../js/framework/framework-events.js"></script>
<script src="events.js"></script>
</body>
</html>

21
example/events.js Normal file
View File

@ -0,0 +1,21 @@
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);
}
window.FM.on('tap', function(e) {
console.log('GOT TAP', e);
logEvent({
type: 'tap',
event: e
});
});
window.FM.on('click', function(e) {
console.log('GOT CLICK', e);
logEvent({
type: 'click',
event: e
});
});

97
js/framework/framework-events.js Normal file
View File

@ -0,0 +1,97 @@
/**
* framework-events.js
*
* Author: Max Lynch <max@drifty.com>
*
* Framework events handles various mobile browser events, and
* detects special events like tap/swipe/etc. and emits them
* as custom events that can be used in an app.
*/
(function(window, document, framework) {
framework.EventController = function (){};
// A map of event types that we virtually detect and emit
framework.EventController.prototype.VIRTUAL_EVENT_TYPES = ['tap', 'swipeleft', 'swiperight'];
// Some convenient top-level event functions
framework.trigger = function(type, data) {
window.dispatchEvent(new CustomEvent(type, data));
};
framework.on = function(type, callback, element) {
var i;
var e = element || window;
/*
var virtualTypes = framework.EventController.VIRTUAL_EVENT_TYPES;
for(i = 0; i < virtualTypes.length; i++) {
if(type.toLowerCase() == virtualTypes[i]) {
// TODO: listen for virtual event
return;
}
}
*/
// Native listener
e.addEventListener(type, callback);
};
var _touchStart = function(event) {
console.log("EVENT: touchstart", event);
framework.EventController.isTouching = true;
};
var _touchMove = function(event) {
console.log("EVENT: touchmove", event);
};
var _touchEnd = function(event) {
console.log("EVENT: touchend", event);
if(framework.EventController.isTouching) {
console.log("EVENT: (virtual) tap", event);
framework.trigger('tap', {
});
}
framework.EventController.isTouching = false;
};
// With a click event, we need to check the target
// and if it's an internal target that doesn't want
// a click, cancel it
var _click = function(e) {
var target = e.target;
if (
! target
|| e.which > 1
|| e.metaKey
|| e.ctrlKey
//|| isScrolling
|| location.protocol !== target.protocol
|| location.host !== target.host
// Not sure abotu this one
//|| !target.hash && /#/.test(target.href)
|| target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '')
//|| target.getAttribute('data-ignore') == 'push'
) {
// Allow it
console.log("EVENT: click", e);
return;
}
// We need to cancel this one
e.preventDefault();
}
var _popstate = function(event) {
console.log("EVENT: popstate", event);
}
// Set up various listeners
window.addEventListener('touchstart', _touchStart);
window.addEventListener('touchmove', _touchMove);
window.addEventListener('touchend', _touchEnd);
window.addEventListener('click', _click);
window.addEventListener('popstate', _popstate);
})(this, document, this.FM = this.FM || {});

23
js/framework/framework-list.js Normal file
View File

@ -0,0 +1,23 @@
(function(window, document, framework) {
framework.Tabs = function() {}
framework.List.prototype._TAB_ITEM_CLASS = 'tab-item';
framework.List.prototype._onTouchStart = function(event) {
console.log('Touch start!', event);
if(event.target && event.target.parentNode.classList.contains(this._TAB_ITEM_CLASS)) {
event.target.classList.add('active');
}
};
framework.List.prototype._onTouchEnd = function(event) {
console.log('Touch end!', event);
if(event.target && event.target.parentNode.classList.contains(this._TAB_ITEM_CLASS)) {
event.target.classList.remove('active');
}
};
document.addEventListener('mousedown', framework.Tabs.prototype._onTouchStart);
document.addEventListener('touchstart', framework.Tabs.prototype._onTouchStart);
document.addEventListener('touchend', framework.Tabs.prototype._onTouchEnd);
})(this, document, this.FM = this.FM || {});

2
js/framework/framework-tabs.js
View File

@ -1,3 +1,5 @@
'use strict';
(function(window, document, framework) { (function(window, document, framework) {
framework.Tabs = function() {} framework.Tabs = function() {}

10
js/framework/framework-utilities.js
View File

@ -1,12 +1,4 @@
(function(window, document, framework) { (function(window, document, framework) {
framework.trigger = function(type, data) {
window.dispatchEvent( new CustomEvent(type, data) );
};
framework.on = function(type, callback, element) { })(this, document, this.FM = this.FM || {});
var e = element || window;
e.addEventListener(type, callback);
};
})(this, document, this.FM = this.FM || {});

4
scss/framework/theme/default/_listview.scss
View File

@ -3,3 +3,7 @@
color: $listDividerColor; color: $listDividerColor;
font-weight: bold; font-weight: bold;
} }
a.list-item {
color: $darkColor;
}