mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
Updated panel example and fixed drag issue
This commit is contained in:
Max Lynch
2
Makefile
2
Makefile
@ -7,5 +7,5 @@ release:
|
||||
|
||||
cordova:
|
||||
@cp -R js/ example/cordova/iOS/www/js
|
||||
@cp dist/framework.css example/cordova/iOS/www/css
|
||||
@cp dist/ionic.css example/cordova/iOS/www/css
|
||||
|
||||
|
||||
51
dist/ionic.css
vendored
51
dist/ionic.css
vendored
@ -42,6 +42,16 @@ main > * {
|
||||
.content-padded {
|
||||
padding: 10px; }
|
||||
|
||||
.section {
|
||||
position: fixed;
|
||||
z-index: 1; }
|
||||
|
||||
.full-section {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
.alert {
|
||||
padding: 8px 35px 8px 14px; }
|
||||
|
||||
@ -1033,6 +1043,7 @@ a.list-item {
|
||||
display: none;
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
width: 270px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@ -1041,40 +1052,16 @@ a.list-item {
|
||||
/* has to be scroll, not auto */
|
||||
-webkit-overflow-scrolling: touch; }
|
||||
|
||||
.ion-panel-active-left {
|
||||
.ion-panel-left {
|
||||
left: 0; }
|
||||
|
||||
.ion-panel-active-right {
|
||||
.ion-panel-right {
|
||||
right: 0; }
|
||||
|
||||
.ion-panel-active {
|
||||
display: block;
|
||||
width: 270px; }
|
||||
|
||||
.bar-header, .content, .bar-footer {
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
right: 0;
|
||||
.ion-panel-animated {
|
||||
-webkit-transition: -webkit-transform 200ms ease;
|
||||
-moz-transition: -moz-transform 200ms ease;
|
||||
transition: transform 200ms ease;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0); }
|
||||
|
||||
.ion-panel-left .bar-header,
|
||||
.ion-panel-left .content,
|
||||
.ion-panel-left .bar-footer {
|
||||
-webkit-transform: translate3d(270px, 0, 0);
|
||||
-moz-transform: translate3d(270px, 0, 0);
|
||||
transform: translate3d(270px, 0, 0); }
|
||||
|
||||
.ion-panel-right .bar-header,
|
||||
.ion-panel-right .content,
|
||||
.ion-panel-right .bar-footer {
|
||||
-webkit-transform: translate3d(-270px, 0, 0);
|
||||
-moz-transform: translate3d(-270px, 0, 0);
|
||||
transform: translate3d(-270px, 0, 0); }
|
||||
transition: transform 200ms ease; }
|
||||
|
||||
.ptr-capable {
|
||||
-webkit-user-drag: element; }
|
||||
@ -1149,6 +1136,11 @@ body {
|
||||
main {
|
||||
background-color: white; }
|
||||
|
||||
.full-section {
|
||||
-webkit-box-shadow: -3px 0px 10px rgba(0, 0, 0, 0.2), 3px 0px 10px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: -3px 0px 10px rgba(0, 0, 0, 0.2), 3px 0px 10px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: -3px 0px 10px rgba(0, 0, 0, 0.2), 3px 0px 10px rgba(0, 0, 0, 0.2); }
|
||||
|
||||
.alert {
|
||||
margin-bottom: 1.42857;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
@ -1369,7 +1361,8 @@ a.list-item {
|
||||
color: #333333; }
|
||||
|
||||
.ion-panel {
|
||||
background: #eeeeee; }
|
||||
background: #eeeeee;
|
||||
width: 270px; }
|
||||
|
||||
.ion-panel-left .ion-panel {
|
||||
border-right: 1px solid #bbbbbb; }
|
||||
|
||||
1384
example/cordova/iOS/www/css/ionic.css
Normal file
1384
example/cordova/iOS/www/css/ionic.css
Normal file
File diff suppressed because it is too large
Load Diff
@ -6,7 +6,7 @@
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<!--<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">-->
|
||||
<link rel="stylesheet" href="css/framework.css">
|
||||
<link rel="stylesheet" href="css/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@ -30,25 +30,223 @@
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section id="my-left-panel" class="ion-panel ion-panel-active-left">
|
||||
This is my default left side panel!
|
||||
<section id="my-left-panel" class="ion-panel ion-panel-left">
|
||||
<ul class="list">
|
||||
<li class="list-divider">Left Nav Things</li>
|
||||
<a href="#" class="list-item">
|
||||
Sasafras
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="my-right-panel" class="ion-panel ion-panel-active-right">
|
||||
This is my right side panel!
|
||||
</section>
|
||||
|
||||
<section id="my-other-left-panel" class="ion-panel">
|
||||
This is my other left side panel!
|
||||
|
||||
<section id="my-right-panel" class="ion-panel ion-panel-right">
|
||||
<ul class="list">
|
||||
<li class="list-divider">Left Nav Things</li>
|
||||
<a href="#" class="list-item">
|
||||
Sasafras
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="js/framework/framework-events.js"></script>
|
||||
<script src="js/framework/framework-gestures.js"></script>
|
||||
<script src="js/framework/ion-panel.js"></script>
|
||||
<script src="js/framework/handlers/panel-handler.js"></script>
|
||||
<script>
|
||||
|
||||
<script src="js/ionic-events.js"></script>
|
||||
<script src="js/ionic-gestures.js"></script>
|
||||
<script>
|
||||
var LeftRightPanelViewController = function(options) {
|
||||
var _this = this;
|
||||
|
||||
@ -63,22 +261,14 @@
|
||||
this._leftShowing = false;
|
||||
|
||||
// Bind release and drag listeners
|
||||
window.FM.onGesture('release', function(e) {
|
||||
window.ion.onGesture('release', function(e) {
|
||||
_this._endDrag(e);
|
||||
}, document.body);
|
||||
}, this.center);
|
||||
|
||||
window.FM.onGesture('drag', function(e) {
|
||||
window.ion.onGesture('drag', function(e) {
|
||||
_this._handleDrag(e);
|
||||
}, document.body);
|
||||
}, this.center);
|
||||
|
||||
window.FM.onGesture('swiperight', function(e) {
|
||||
console.log('SWIPERIGHT');
|
||||
//_this.openPercentage(-100);
|
||||
}, document.body);
|
||||
window.FM.onGesture('swipeleft', function(e) {
|
||||
console.log('SWIPELEFT');
|
||||
//_this.openPercentage(-100);
|
||||
}, document.body);
|
||||
};
|
||||
|
||||
LeftRightPanelViewController.prototype = {
|
||||
@ -221,7 +411,7 @@
|
||||
|
||||
this._offsetX = this.getOpenAmount();
|
||||
}
|
||||
console.log('Dragging page', this._startX, this._lastX, this._offsetX, e);
|
||||
//console.log('Dragging page', this._startX, this._lastX, this._offsetX, e);
|
||||
var newX = this._offsetX + (this._lastX - this._startX);
|
||||
|
||||
this.openAmount(newX);
|
||||
@ -243,13 +433,14 @@
|
||||
center: page,
|
||||
animateClass: 'ion-panel-animated'
|
||||
});
|
||||
window.FM.onGesture('tap', function(e) {
|
||||
window.ion.onGesture('tap', function(e) {
|
||||
controller.toggleLeft();
|
||||
}, document.getElementById('left-button'));
|
||||
window.FM.onGesture('tap', function(e) {
|
||||
window.ion.onGesture('tap', function(e) {
|
||||
controller.toggleRight();
|
||||
}, document.getElementById('right-button'));
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
29
example/cordova/iOS/www/js/ionic-buttons.js
vendored
Normal file
29
example/cordova/iOS/www/js/ionic-buttons.js
vendored
Normal file
@ -0,0 +1,29 @@
|
||||
(function(window, document, ion) {
|
||||
ion.Button = function() {}
|
||||
|
||||
// Process an the touchstart event and if this is a button,
|
||||
// add the .active class so Android will show depressed
|
||||
// button states.
|
||||
ion.Button.prototype._onTouchStart = function(event) {
|
||||
console.log('Touch start!', event);
|
||||
if(event.target && event.target.classList.contains('button')) {
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Remove any active state on touch end/cancel/etc.
|
||||
ion.Button.prototype._onTouchEnd = function(event) {
|
||||
console.log('Touch end!', event);
|
||||
if(event.target && event.target.classList.contains('button')) {
|
||||
event.target.classList.remove('active');
|
||||
}
|
||||
|
||||
// TODO: Process the click? Set flag to not process other click events
|
||||
};
|
||||
|
||||
document.addEventListener('touchstart', ion.Button.prototype._onTouchStart);
|
||||
document.addEventListener('touchend', ion.Button.prototype._onTouchEnd);
|
||||
document.addEventListener('touchcancel', ion.Button.prototype._onTouchEnd);
|
||||
|
||||
})(this, document, ion = this.ion || {});
|
||||
98
example/cordova/iOS/www/js/ionic-events.js
vendored
Normal file
98
example/cordova/iOS/www/js/ionic-events.js
vendored
Normal file
@ -0,0 +1,98 @@
|
||||
/**
|
||||
* ion-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.
|
||||
*
|
||||
* Portions lovingly adapted from github.com/maker/ratchet and github.com/alexgibson/tap.js - thanks guys!
|
||||
*/
|
||||
|
||||
(function(window, document, ion) {
|
||||
ion.EventController = {
|
||||
|
||||
// Trigger a new event
|
||||
trigger: function(eventType, data) {
|
||||
// TODO: Do we need to use the old-school createEvent stuff?
|
||||
var event = new CustomEvent(eventType, data);
|
||||
|
||||
// Make sure to trigger the event on the given target, or dispatch it from
|
||||
// the window if we don't have an event target
|
||||
data.target && data.target.dispatchEvent(event) || window.dispatchEvent(event);
|
||||
},
|
||||
|
||||
// Bind an event
|
||||
on: function(type, callback, element) {
|
||||
var e = element || window;
|
||||
e.addEventListener(type, callback);
|
||||
},
|
||||
|
||||
off: function(type, callback, element) {
|
||||
element.removeEventListener(type, callback);
|
||||
},
|
||||
|
||||
// Register for a new gesture event on the given element
|
||||
onGesture: function(type, callback, element) {
|
||||
var gesture = new ion.Gesture(element);
|
||||
gesture.on(type, callback);
|
||||
return gesture;
|
||||
},
|
||||
|
||||
// Unregister a previous gesture event
|
||||
offGesture: function(gesture, type, callback) {
|
||||
gesture.off(type, callback);
|
||||
},
|
||||
|
||||
// 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
|
||||
handleClick: function(e) {
|
||||
var target = e.target;
|
||||
|
||||
if(ion.Gestures.HAS_TOUCHEVENTS) {
|
||||
// We don't allow any clicks on mobile
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
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
|
||||
return;
|
||||
}
|
||||
// We need to cancel this one
|
||||
e.preventDefault();
|
||||
|
||||
},
|
||||
|
||||
handlePopState: function(event) {
|
||||
console.log("EVENT: popstate", event);
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
// Map some convenient top-level functions for event handling
|
||||
ion.on = ion.EventController.on;
|
||||
ion.off = ion.EventController.off;
|
||||
ion.trigger = ion.EventController.trigger;
|
||||
ion.onGesture = ion.EventController.onGesture;
|
||||
ion.offGesture = ion.EventController.offGesture;
|
||||
|
||||
// Set up various listeners
|
||||
window.addEventListener('click', ion.EventController.handleClick);
|
||||
//window.addEventListener('popstate', ion.EventController.handlePopState);
|
||||
|
||||
})(this, document, ion = this.ion || {});
|
||||
1420
example/cordova/iOS/www/js/ionic-gestures.js
vendored
Normal file
1420
example/cordova/iOS/www/js/ionic-gestures.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
28
example/cordova/iOS/www/js/ionic-init.js
vendored
Normal file
28
example/cordova/iOS/www/js/ionic-init.js
vendored
Normal file
@ -0,0 +1,28 @@
|
||||
(function(window, document, ion) {
|
||||
|
||||
function initalize() {
|
||||
// remove the ready listeners
|
||||
document.removeEventListener( "DOMContentLoaded", initalize, false );
|
||||
window.removeEventListener( "load", initalize, false );
|
||||
|
||||
// trigger that the DOM is ready
|
||||
ion.trigger("ready");
|
||||
|
||||
// trigger that the start page is in view
|
||||
ion.trigger("pageview");
|
||||
|
||||
// trigger that the webapp has been initalized
|
||||
ion.trigger("initalized");
|
||||
}
|
||||
|
||||
// When the DOM is ready, initalize the webapp
|
||||
if ( document.readyState === "complete" ) {
|
||||
// DOM is already ready
|
||||
setTimeout( initalize );
|
||||
} else {
|
||||
// DOM isn't ready yet, add event listeners
|
||||
document.addEventListener( "DOMContentLoaded", initalize, false );
|
||||
window.addEventListener( "load", initalize, false );
|
||||
}
|
||||
|
||||
})(this, document, ion = this.ion || {});
|
||||
23
example/cordova/iOS/www/js/ionic-list.js
vendored
Normal file
23
example/cordova/iOS/www/js/ionic-list.js
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
(function(window, document, ion) {
|
||||
ion.List = function() {}
|
||||
|
||||
ion.List.prototype._TAB_ITEM_CLASS = 'tab-item';
|
||||
|
||||
ion.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');
|
||||
}
|
||||
};
|
||||
ion.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', ion.List.prototype._onTouchStart);
|
||||
document.addEventListener('touchstart', ion.List.prototype._onTouchStart);
|
||||
document.addEventListener('touchend', ion.List.prototype._onTouchEnd);
|
||||
|
||||
})(this, document, ion = this.ion || {});
|
||||
154
example/cordova/iOS/www/js/ionic-navigation.js
vendored
Normal file
154
example/cordova/iOS/www/js/ionic-navigation.js
vendored
Normal file
@ -0,0 +1,154 @@
|
||||
(function(window, document, location, ion) {
|
||||
|
||||
var
|
||||
x,
|
||||
el;
|
||||
|
||||
// Add listeners to each link in the document
|
||||
function click(e) {
|
||||
// an element has been clicked. If its a link its good to go
|
||||
// if its not a link then jump up its parents until you find
|
||||
// its wrapping link. If you never find a link do nothing.
|
||||
if(e.target) {
|
||||
el = e.target;
|
||||
if(el.tagName === "A") {
|
||||
return linkClick(e, el);
|
||||
}
|
||||
while(el.parentElement) {
|
||||
el = el.parentElement;
|
||||
if(el.tagName === "A") {
|
||||
return linkClick(e, el);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// A link has been clicked
|
||||
function linkClick(e, el) {
|
||||
|
||||
// if they clicked a link while scrolling don't nav to it
|
||||
if(ion.isScrolling) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
// data-history-go="-1"
|
||||
// shortcut if they just want to use window.history.go()
|
||||
if(el.dataset.historyGo) {
|
||||
window.history.go( parseInt(el.dataset.historyGo, 10) );
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
// only intercept the nav click if they're going to the same domain or page
|
||||
if (location.protocol === el.protocol && location.host === el.host) {
|
||||
|
||||
// trigger the event that a new page should be shown
|
||||
ion.trigger("pageinit", el.href);
|
||||
|
||||
// decide how to handle this click depending on the href
|
||||
if(el.getAttribute("href").indexOf("#") === 0) {
|
||||
// this click is going to another element within this same page
|
||||
|
||||
|
||||
} else {
|
||||
// this click is going to another page in the same domain
|
||||
requestData({
|
||||
url: el.href,
|
||||
success: successPageLoad,
|
||||
fail: failedPageLoad
|
||||
});
|
||||
}
|
||||
|
||||
// stop the browser itself from continuing on with this click
|
||||
// the above code will take care of the navigation
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function locationChange(e) {
|
||||
if(!this._initPopstate) {
|
||||
this._initPopstate = true;
|
||||
return;
|
||||
}
|
||||
|
||||
requestData({
|
||||
url: location.href,
|
||||
success: successPageLoad,
|
||||
fail: failedPageLoad
|
||||
});
|
||||
}
|
||||
|
||||
function requestData(options) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', options.url, true);
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState === 4) {
|
||||
if(xhr.status === 200) {
|
||||
options.success(xhr, options);
|
||||
} else {
|
||||
options.fail(xhr, options);
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
function successPageLoad(xhr, options) {
|
||||
var data = parseXHR(xhr, options);
|
||||
ion.trigger("pageloaded", {
|
||||
data: data
|
||||
});
|
||||
history.pushState({}, data.title, data.url);
|
||||
document.title = data.title;
|
||||
}
|
||||
|
||||
function failedPageLoad(xhr, options) {
|
||||
ion.trigger("pageinitfailed", {
|
||||
responseText: xhr.responseText,
|
||||
responseStatus: xhr.status
|
||||
});
|
||||
}
|
||||
|
||||
function parseXHR(xhr, options) {
|
||||
var
|
||||
container,
|
||||
tmp,
|
||||
data = {};
|
||||
|
||||
data.url = options.url;
|
||||
|
||||
if (!xhr.responseText) return data;
|
||||
|
||||
container = document.createElement('div');
|
||||
container.innerHTML = xhr.responseText;
|
||||
|
||||
// get the title of the page
|
||||
tmp = container.querySelector("title");
|
||||
if(tmp) {
|
||||
data.title = tmp.innerText;
|
||||
} else {
|
||||
data.title = data.url;
|
||||
}
|
||||
|
||||
// get the main content of the page
|
||||
tmp = container.querySelector("main");
|
||||
if(tmp) {
|
||||
data.main = tmp.innerHTML;
|
||||
} else {
|
||||
// something is wrong with the data, trigger that the page init failed
|
||||
ion.trigger("pageinitfailed");
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
// listen to every click
|
||||
document.addEventListener("click", click, false);
|
||||
|
||||
// listen to when the location changes
|
||||
ion.on("popstate", locationChange);
|
||||
|
||||
|
||||
})(this, document, location, ion = this.ion || {});
|
||||
72
example/cordova/iOS/www/js/ionic-panel.js
vendored
Normal file
72
example/cordova/iOS/www/js/ionic-panel.js
vendored
Normal file
@ -0,0 +1,72 @@
|
||||
(function(window, document, ion) {
|
||||
|
||||
var
|
||||
x,
|
||||
isPanelOpen,
|
||||
|
||||
PANEL_ACTIVE = "ion-panel-active",
|
||||
PANEL_ACTIVE_LEFT = "ion-panel-active-left",
|
||||
PANEL_ACTIVE_RIGHT = "ion-panel-active-right",
|
||||
|
||||
PANEL_OPEN_LEFT = "ion-panel-left",
|
||||
PANEL_OPEN_RIGHT = "ion-panel-right";
|
||||
|
||||
ion.Panel = {
|
||||
|
||||
toggle: function(panelId, options) {
|
||||
if(isPanelOpen) {
|
||||
this.close();
|
||||
} else {
|
||||
this.open(panelId, options);
|
||||
}
|
||||
},
|
||||
|
||||
open: function(panelId, options) {
|
||||
// see if there is an element with this id
|
||||
var panel = document.getElementById(panelId);
|
||||
if(panel) {
|
||||
// this element is a panel, open it!
|
||||
|
||||
// remember that a panel is currently open
|
||||
isPanelOpen = true;
|
||||
|
||||
// find all the panels that are or were once active
|
||||
var panelsActive = document.getElementsByClassName(PANEL_ACTIVE);
|
||||
|
||||
// remove the panel-active css classes from each of the previously active panels
|
||||
for(x=0; x<panelsActive.length; x++) {
|
||||
panelsActive[x].classList.remove(PANEL_ACTIVE);
|
||||
}
|
||||
|
||||
// activate the panel we want open by adding the panel-active css classes
|
||||
panel.classList.add(PANEL_ACTIVE);
|
||||
|
||||
// add to <body> that there is a panel open
|
||||
if(options && options.direction === "right") {
|
||||
panel.classList.add(PANEL_ACTIVE_RIGHT);
|
||||
document.body.classList.add(PANEL_OPEN_RIGHT);
|
||||
} else {
|
||||
// left is the default
|
||||
panel.classList.add(PANEL_ACTIVE_LEFT);
|
||||
document.body.classList.add(PANEL_OPEN_LEFT);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
close: function() {
|
||||
if(isPanelOpen) {
|
||||
// there is a panel already open, so close it
|
||||
isPanelOpen = false;
|
||||
|
||||
// remove from <body> so that no panels should be open
|
||||
var className = document.body.className;
|
||||
className = className.replace(PANEL_OPEN_LEFT, "").replace(PANEL_OPEN_RIGHT, "").trim();
|
||||
document.body.className = className;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
window.addEventListener("popstate", ion.Panel.close, false);
|
||||
|
||||
})(this, document, ion = this.ion || {});
|
||||
25
example/cordova/iOS/www/js/ionic-tabs.js
vendored
Normal file
25
example/cordova/iOS/www/js/ionic-tabs.js
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
'use strict';
|
||||
|
||||
(function(window, document, ion) {
|
||||
ion.Tabs = function() {}
|
||||
|
||||
ion.Tabs.prototype._TAB_ITEM_CLASS = 'tab-item';
|
||||
|
||||
ion.Tabs.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');
|
||||
}
|
||||
};
|
||||
ion.Tabs.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', ion.Tabs.prototype._onTouchStart);
|
||||
document.addEventListener('touchstart', ion.Tabs.prototype._onTouchStart);
|
||||
document.addEventListener('touchend', ion.Tabs.prototype._onTouchEnd);
|
||||
|
||||
})(this, document, ion = this.ion || {});
|
||||
68
example/cordova/iOS/www/js/ionic-template.js
vendored
Normal file
68
example/cordova/iOS/www/js/ionic-template.js
vendored
Normal file
@ -0,0 +1,68 @@
|
||||
'use strict';
|
||||
|
||||
(function(window, document, ion) {
|
||||
|
||||
// Loop through each element in the DOM and collect up all
|
||||
// the templates it has. A template either has data to supply
|
||||
// to others, or it needs data from another template
|
||||
function initTemplates() {
|
||||
var
|
||||
x,
|
||||
el,
|
||||
tmp,
|
||||
emptyTemplates = [],
|
||||
container,
|
||||
templateElements;
|
||||
|
||||
// collect up all the templates currently in the DOM
|
||||
templateElements = document.body.querySelectorAll("[data-template]");
|
||||
for(x=0; x<templateElements.length; x++) {
|
||||
el = templateElements[x];
|
||||
|
||||
if(el.dataset.template && !el.tSet) {
|
||||
// this element is either supplying template
|
||||
// data or it needs to be filled with template data
|
||||
|
||||
if(el.innerHTML == "") {
|
||||
// this element is requesting to have its innerHTML
|
||||
// built from a template already set
|
||||
emptyTemplates.push(el);
|
||||
|
||||
} else {
|
||||
// this element contains innerHTML which should be used
|
||||
// as a template for other elements. Save this template
|
||||
// data for future use.
|
||||
|
||||
// Save only in sessionStorage, which maintains a storage area that's
|
||||
// available for the duration of the page session. A page session
|
||||
// lasts for as long as the browser is open and survives over page
|
||||
// reloads and restores. Opening a page in a new tab or window will
|
||||
// cause a new session to be initiated.
|
||||
sessionStorage.setItem("t:" + el.dataset.template, el.outerHTML);
|
||||
}
|
||||
|
||||
// remember that this is set so we don't bother doing all this
|
||||
// code again for the same element in the future
|
||||
el.tSet = true;
|
||||
}
|
||||
}
|
||||
|
||||
// go through each empty template and build it up with existing template data
|
||||
for(x=0; x<emptyTemplates.length; x++) {
|
||||
el = emptyTemplates[x];
|
||||
tmp = sessionStorage.getItem("t:" + el.dataset.template);
|
||||
if(tmp) {
|
||||
// we've got template data, plug it into this element's innerHTML
|
||||
container = document.createElement("div");
|
||||
container.innerHTML = tmp;
|
||||
|
||||
el.parentNode.replaceChild(container.children[0].cloneNode(true), el);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ion.on("ready", initTemplates);
|
||||
ion.on("pagecreate", initTemplates);
|
||||
|
||||
})(this, document, ion = this.ion || {});
|
||||
41
example/cordova/iOS/www/js/ionic-transition.js
vendored
Normal file
41
example/cordova/iOS/www/js/ionic-transition.js
vendored
Normal file
@ -0,0 +1,41 @@
|
||||
(function(window, document, ion) {
|
||||
|
||||
function initTransitions(e) {
|
||||
var data = e.detail.data;
|
||||
|
||||
// build a new main element to hold the new html
|
||||
var newMainElement = document.createElement("main");
|
||||
newMainElement.innerHTML = data.main;
|
||||
|
||||
// get the old main element, which will be the first one
|
||||
var oldMainElement = document.querySelector("main");
|
||||
|
||||
// decide how to do the page transition
|
||||
if(data.transition === "slide-from-left") {
|
||||
slideStart(newMainElement, oldMainElement, "left");
|
||||
} else {
|
||||
// No animation. Nothing fancy here
|
||||
noTransition(newMainElement, oldMainElement, data);
|
||||
}
|
||||
}
|
||||
|
||||
function noTransition(newMainElement, oldMainElement, data) {
|
||||
// entirely replace the old element, no transition
|
||||
oldMainElement.parentNode.replaceChild(newMainElement, oldMainElement);
|
||||
ion.trigger("pagecreate", {
|
||||
url: data.url,
|
||||
title: data.title
|
||||
});
|
||||
ion.trigger("pageview");
|
||||
}
|
||||
|
||||
function slideStart(newMainElement, oldMainElement, fromDirection) {
|
||||
// copy what the main element currently looks like into a document fragment
|
||||
// make all the changes to the document fragment, then replace the
|
||||
// old main with the two new ones. Both the old and new main will be
|
||||
// in the DOM, but their CSS classes will do the transitioning for us
|
||||
}
|
||||
|
||||
ion.on("pageloaded", initTransitions);
|
||||
|
||||
})(this, document, ion = this.ion || {});
|
||||
22
example/cordova/iOS/www/js/ionic-utils.js
vendored
Normal file
22
example/cordova/iOS/www/js/ionic-utils.js
vendored
Normal file
@ -0,0 +1,22 @@
|
||||
(function(window, document, ion) {
|
||||
|
||||
ion.Utils = {
|
||||
/**
|
||||
* extend method,
|
||||
* also used for cloning when dest is an empty object
|
||||
* @param {Object} dest
|
||||
* @param {Object} src
|
||||
* @parm {Boolean} merge do a merge
|
||||
* @returns {Object} dest
|
||||
*/
|
||||
extend: function extend(dest, src, merge) {
|
||||
for (var key in src) {
|
||||
if(dest[key] !== undefined && merge) {
|
||||
continue;
|
||||
}
|
||||
dest[key] = src[key];
|
||||
}
|
||||
return dest;
|
||||
},
|
||||
}
|
||||
})(this, document, ion = this.ion || {});
|
||||
@ -6,7 +6,7 @@
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<!--<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">-->
|
||||
<link rel="stylesheet" href="../../dist/framework.css">
|
||||
<link rel="stylesheet" href="../../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@ -20,8 +20,7 @@
|
||||
</header>
|
||||
|
||||
<main class="content content-padded has-header">
|
||||
<p><button class="button button-primary">Other Left Side Panel</button></p>
|
||||
<p id="event-log"></p>
|
||||
<h2>Cheese!</h2>
|
||||
</main>
|
||||
|
||||
<footer class="bar bar-footer bar-dark">
|
||||
@ -31,23 +30,221 @@
|
||||
</section>
|
||||
|
||||
|
||||
<section id="my-left-panel" class="ion-panel ion-panel-active-left">
|
||||
This is my default left side panel!
|
||||
<section id="my-left-panel" class="ion-panel ion-panel-left">
|
||||
<ul class="list">
|
||||
<li class="list-divider">Left Nav Things</li>
|
||||
<a href="#" class="list-item">
|
||||
Sasafras
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="my-right-panel" class="ion-panel ion-panel-active-right">
|
||||
This is my right side panel!
|
||||
</section>
|
||||
|
||||
<section id="my-other-left-panel" class="ion-panel">
|
||||
This is my other left side panel!
|
||||
<section id="my-right-panel" class="ion-panel ion-panel-right">
|
||||
<ul class="list">
|
||||
<li class="list-divider">Left Nav Things</li>
|
||||
<a href="#" class="list-item">
|
||||
Sasafras
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="../../js/framework/framework-events.js"></script>
|
||||
<script src="../../js/framework/framework-gestures.js"></script>
|
||||
<script src="../../js/framework/ion-panel.js"></script>
|
||||
<script src="../../js/framework/handlers/panel-handler.js"></script>
|
||||
<script src="../../js/ionic-events.js"></script>
|
||||
<script src="../../js/ionic-gestures.js"></script>
|
||||
<script>
|
||||
var LeftRightPanelViewController = function(options) {
|
||||
var _this = this;
|
||||
@ -63,19 +260,19 @@
|
||||
this._leftShowing = false;
|
||||
|
||||
// Bind release and drag listeners
|
||||
window.FM.onGesture('release', function(e) {
|
||||
window.ion.onGesture('release', function(e) {
|
||||
_this._endDrag(e);
|
||||
}, document.body);
|
||||
|
||||
window.FM.onGesture('drag', function(e) {
|
||||
window.ion.onGesture('drag', function(e) {
|
||||
_this._handleDrag(e);
|
||||
}, document.body);
|
||||
|
||||
window.FM.onGesture('swiperight', function(e) {
|
||||
window.ion.onGesture('swiperight', function(e) {
|
||||
console.log('SWIPERIGHT');
|
||||
//_this.openPercentage(-100);
|
||||
}, document.body);
|
||||
window.FM.onGesture('swipeleft', function(e) {
|
||||
window.ion.onGesture('swipeleft', function(e) {
|
||||
console.log('SWIPELEFT');
|
||||
//_this.openPercentage(-100);
|
||||
}, document.body);
|
||||
@ -221,7 +418,7 @@
|
||||
|
||||
this._offsetX = this.getOpenAmount();
|
||||
}
|
||||
console.log('Dragging page', this._startX, this._lastX, this._offsetX, e);
|
||||
//console.log('Dragging page', this._startX, this._lastX, this._offsetX, e);
|
||||
var newX = this._offsetX + (this._lastX - this._startX);
|
||||
|
||||
this.openAmount(newX);
|
||||
@ -243,10 +440,10 @@
|
||||
center: page,
|
||||
animateClass: 'ion-panel-animated'
|
||||
});
|
||||
window.FM.onGesture('tap', function(e) {
|
||||
window.ion.onGesture('tap', function(e) {
|
||||
controller.toggleLeft();
|
||||
}, document.getElementById('left-button'));
|
||||
window.FM.onGesture('tap', function(e) {
|
||||
window.ion.onGesture('tap', function(e) {
|
||||
controller.toggleRight();
|
||||
}, document.getElementById('right-button'));
|
||||
|
||||
|
||||
@ -75,11 +75,10 @@ $listItemBorder: 1px solid #ddd;
|
||||
|
||||
// Panels
|
||||
// -------------------------
|
||||
$panelOpenWidth: 270px;
|
||||
$panelWidth: 270px;
|
||||
$panelAnimationSpeed: 200ms;
|
||||
|
||||
|
||||
|
||||
// GRID
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -113,4 +112,4 @@ $fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200
|
||||
|
||||
// 768px-979px
|
||||
$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768) !default;
|
||||
$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768) !default;
|
||||
$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768) !default;
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
//
|
||||
// Side panel structure
|
||||
// Author: Adam Bradley <adam@drifty.com>
|
||||
|
||||
.ion-panel {
|
||||
display: none;
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
width: $panelWidth;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@ -11,51 +15,8 @@
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.ion-panel-active-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ion-panel-active-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ion-panel-active {
|
||||
display: block;
|
||||
width: $panelOpenWidth;
|
||||
}
|
||||
|
||||
.bar-header, .content, .bar-footer {
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
-webkit-transition: -webkit-transform $panelAnimationSpeed ease;
|
||||
-moz-transition: -moz-transform $panelAnimationSpeed ease;
|
||||
transition: transform $panelAnimationSpeed ease;
|
||||
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.ion-panel-left .bar-header,
|
||||
.ion-panel-left .content,
|
||||
.ion-panel-left .bar-footer
|
||||
{
|
||||
-webkit-transform: translate3d($panelOpenWidth, 0,0 );
|
||||
-moz-transform: translate3d($panelOpenWidth, 0,0 );
|
||||
transform: translate3d($panelOpenWidth, 0,0 );
|
||||
}
|
||||
|
||||
.ion-panel-right .bar-header,
|
||||
.ion-panel-right .content,
|
||||
.ion-panel-right .bar-footer
|
||||
{
|
||||
-webkit-transform: translate3d( ($panelOpenWidth * -1), 0,0 );
|
||||
-moz-transform: translate3d( ($panelOpenWidth * -1), 0,0 );
|
||||
transform: translate3d( ($panelOpenWidth * -1), 0,0 );
|
||||
}
|
||||
|
||||
.ion-panel-left { left: 0; }
|
||||
.ion-panel-right { right: 0; }
|
||||
|
||||
.ion-panel-animated {
|
||||
-webkit-transition: -webkit-transform $panelAnimationSpeed ease;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
|
||||
.ion-panel {
|
||||
background: $panelBackgroundColor;
|
||||
width: $panelWidth;
|
||||
}
|
||||
|
||||
.ion-panel-left .ion-panel {
|
||||
@ -9,4 +10,4 @@
|
||||
|
||||
.ion-panel-right .ion-panel {
|
||||
border-left: 1px solid $panelInsetBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user