From 3ba92d12b7d04a1bfb18964bf816cf17cba454b1 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Wed, 13 Nov 2013 10:09:10 -0600 Subject: [PATCH] Added gesture support for --- dist/css/ionic.css | 126 ++++++++++++--- dist/css/themes/ionic-ios7.css | 141 ----------------- dist/js/ionic-angular.js | 145 ++++++++++++++---- dist/js/ionic.js | 126 +++++++++++++-- js/ext/angular/src/directive/ionicSideMenu.js | 4 +- js/ext/angular/src/service/ionicGesture.js | 4 +- 6 files changed, 336 insertions(+), 210 deletions(-) diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 011ab91611..cbfa911e97 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -4,7 +4,7 @@ * -------------------------------------------------- * Useful utilities and mixins for SCSS files. */ -/*! +/* Ionicons, v1.3.3 Created by Ben Sperry for the Ionic Framework, http://ionicons.com/ https://twitter.com/helloimben https://twitter.com/ionicframework @@ -2046,7 +2046,7 @@ sub { fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; - border: 1px solid #c0c0c0; } + border: 1px solid silver; } /** * 1. Correct `color` not being inherited in IE 8/9. @@ -2480,9 +2480,87 @@ a.subdued‎ { * Action Sheets * -------------------------------------------------- */ +@-webkit-keyframes fadeInHalf { + from { + background-color: rgba(0, 0, 0, 0); } + + to { + background-color: rgba(0, 0, 0, 0.5); } } + +@keyframes fadeInHalf { + from { + background-color: rgba(0, 0, 0, 0); } + + to { + background-color: rgba(0, 0, 0, 0.5); } } + +@-webkit-keyframes fadeOutHalf { + from { + background-color: rgba(0, 0, 0, 0.5); } + + to { + background-color: rgba(0, 0, 0, 0); } } + +@keyframes fadeOutHalf { + from { + background-color: rgba(0, 0, 0, 0.5); } + + to { + background-color: rgba(0, 0, 0, 0); } } + +.action-sheet-backdrop { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0); } + .action-sheet-backdrop.active { + -webkit-animation: fadeInHalf 0.3s; + animation: fadeInHalf 0.3s; + -webkit-animation-fill-mode: forwards; } + .action-sheet-backdrop.active-remove { + -webkit-animation: fadeOutHalf 0.3s; + animation: fadeOutHalf 0.3s; + -webkit-animation-fill-mode: forwards; } + +@-webkit-keyframes actionSheetUp { + 0% { + -webkit-transform: translate3d(0, 100%, 0); + opacity: 0; } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + opacity: 1; } } + +@-webkit-keyframes actionSheetOut { + 0% { + -webkit-transform: translate3d(0, 0, 0); + opacity: 1; } + + 100% { + -webkit-transform: translate3d(0, 100%, 0); + opacity: 0; } } + +.action-sheet-up { + opacity: 1; + -webkit-transform: translate3d(0, 0%, 0); } + .action-sheet-up.ng-enter, .action-sheet-up .ng-enter { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + -webkit-animation-duration: 400ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); } + .action-sheet-up.ng-enter-active, .action-sheet-up .ng-enter-active { + -webkit-animation-name: actionSheetUp; } + .action-sheet-up.ng-leave, .action-sheet-up .ng-leave { + -webkit-animation-duration: 400ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); } + .action-sheet-up.ng-leave-active, .action-sheet-up .ng-leave { + -webkit-animation-name: actionSheetOut; } + .action-sheet { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); position: fixed; bottom: 0; left: 15px; @@ -2491,9 +2569,9 @@ a.subdued‎ { width: calc(100% - 30px); } .action-sheet .button { display: block; - padding: 10px; + padding: 1px; width: 100%; - border-radius: none; + border-radius: 0; background-color: transparent; color: #4a87ee; font-size: 18px; } @@ -2503,12 +2581,21 @@ a.subdued‎ { .action-sheet-title { padding: 10px; text-align: center; - font-size: 12px; } + font-size: 12px; + color: #666666; } .action-sheet-group { - margin-bottom: 10px; - border-radius: 3px; - background-color: rgba(255, 255, 255, 0.95); } + background-color: #fff; + margin-bottom: 5px; + border-radius: 3px 3px 3px 3px; } + .action-sheet-group .button { + border-radius: 0; + border-width: 1px 0px 0px 0px; } + .action-sheet-group .button.active, .action-sheet-group .button:active { + background-color: transparent; + color: inherit; } + .action-sheet-group .button:first-child:last-child { + border-width: 0; } /** * Bar (Headers and Footers) @@ -2626,8 +2713,11 @@ a.subdued‎ { text-align: center; text-overflow: ellipsis; white-space: nowrap; + overflow: hidden; font-size: 18px; line-height: 44px; } + .bar .title.title-left { + text-align: left; } .bar .title a { color: inherit; } .bar .button { @@ -3962,7 +4052,7 @@ input[type="tel"], input[type="color"] { display: inline-block; height: 34px; - color: #f8f8f8; + color: #dfdfdf; vertical-align: middle; font-size: 14px; line-height: 20px; } @@ -4010,7 +4100,7 @@ input[type="file"] { line-height: 34px; } select { - border: 1px solid #ccc; + border: 1px solid #cccccc; background-color: white; } select[multiple], @@ -4019,13 +4109,13 @@ select[size] { input:-moz-placeholder, textarea:-moz-placeholder { - color: #f8f8f8; } + color: #dfdfdf; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { - color: #f8f8f8; } + color: #dfdfdf; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { - color: #f8f8f8; } + color: #dfdfdf; } input[disabled], select[disabled], @@ -4069,7 +4159,7 @@ input[type="checkbox"][readonly] { border-radius: 50%; background: white; content: ' '; - transition: background-color .1s ease-in-out; } + transition: background-color 0.1s ease-in-out; } /* the checkmark within the box */ .checkbox input:after { @@ -4084,7 +4174,7 @@ input[type="checkbox"][readonly] { border-right: 0; content: ' '; opacity: 0; - transition: opacity .05s ease-in-out; + transition: opacity 0.05s ease-in-out; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @@ -4557,7 +4647,7 @@ input[type="range"] { .button-icon:active, .button-icon.active { background: none; box-shadow: none; - text-shadow: 0px 0px 10px #fff; } + text-shadow: 0px 0px 10px white; } .padding > .button.block:first-child { margin-top: 0; } diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css index e119d59757..e69de29bb2 100644 --- a/dist/css/themes/ionic-ios7.css +++ b/dist/css/themes/ionic-ios7.css @@ -1,141 +0,0 @@ -/** - * Mixins - * -------------------------------------------------- - * Useful utilities and mixins for SCSS files. - */ -/** - * Nav controllers and header bar animations - */ -/* -.content-slide-in { - &.ng-enter, > .ng-enter { - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform:translate3d(100%,0,0) ; - box-shadow: -1px 0px 10px rgba(0,0,0,0.6); - } - &.ng-enter-active, > .ng-enter-active { - -webkit-transform:translate3d(0,0,0) ; - } - &.ng-leave, > .ng-leave { - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform:translate3d(0%,0,0); - } - &.ng-leave-active, > .ng-leave-active { - -webkit-transform:translate3d(-10%,0,0); - opacity: 0.8; - } -} -*/ -.content-slide-out.ng-enter, .content-slide-out > .ng-enter { - z-index: 1; - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform: translate3d(-100%, 0, 0); - box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); } -.content-slide-out.ng-enter-active, .content-slide-out > .ng-enter-active { - -webkit-transform: translate3d(0, 0, 0); } -.content-slide-out.ng-leave, .content-slide-out > .ng-leave { - z-index: 0; - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform: translate3d(0%, 0, 0); } -.content-slide-out.ng-leave-active, .content-slide-out > .ng-leave-active { - -webkit-transform: translate3d(10%, 0, 0); - opacity: 0.8; } - -.bar-title-in-add { - -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; - -webkit-transform: translate3d(100%, 0, 0); - opacity: 0; } - -.bar-title-in-add-active { - -webkit-transform: translate3d(0px, 0, 0); - opacity: 1; } - -.bar-title-out-add { - -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; } - -.bar-title-out-add-active { - -webkit-transform: translate3d(-100%, 0, 0); - opacity: 0; } - -.bar-button-in { - opacity: 0; } - -.bar-button-in-add { - -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; - -webkit-transform: translate3d(50%, 0, 0); - opacity: 0; } - -.bar-button-in-active { - -webkit-transform: translate3d(0px, 0, 0); - opacity: 1; } - -/** - * Tab controller animations - */ -.fade-in-out.ng-enter, .fade-in-out > .ng-enter { - opacity: 0; - -webkit-transition: opacity 0.3s ease-in-out; } -.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active { - opacity: 1; } -.fade-in-out.ng-leave, .fade-in-out > .ng-leave { - opacity: 1; - -webkit-transition: opacity 0.3s ease-in-out; } -.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active { - opacity: 0; } - -/* the overall container of the toggle */ -.toggle { - display: inline-block; } - -/* hide the actual checkbox */ -.toggle input { - display: none; } - -.toggle .track { - /* the background of the toggle's track area */ - /* also the track appearance when the toggle is "off" */ - position: relative; - display: inline-block; - box-sizing: border-box; - width: 54px; - height: 32px; - border: solid 2px #dddddd; - border-radius: 20px; - background-color: white; - cursor: pointer; - transition: 0.4s ease; } - -.toggle .handle { - /* the handle (circle) thats inside the toggle's track area */ - /* also the appearance when the handle is "off" */ - position: absolute; - display: block; - width: auto; - /* override defaults */ - height: auto; - /* override defaults */ - box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 4px 5px rgba(0, 0, 0, 0.25); - border-radius: 20px; - background-color: white; - left: 0; - top: 0; - bottom: 0; - right: 20px; - transition: 0.2s ease; - transition-property: left, right; - transition-delay: 0s, .05s; } - -.toggle :checked + .track { - /* When the toggle is "on" */ - /* the track when the toggle is "on" */ - border-color: #4bd863; - background-color: #ccc; - box-shadow: inset 0 0 0 20px #4bd863; - transition: 0.2s ease; - /* the handle when the toggle is "on" */ } - .toggle :checked + .track .handle { - background-color: white; - right: 0; - left: 20px; - -webkit-transform: none; - transition-delay: .05s, 0s; } diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index 77d02e4549..4952dbf113 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -16,6 +16,7 @@ angular.module('ionic.ui', [ 'ionic.ui.content', 'ionic.ui.tabs', 'ionic.ui.nav', + 'ionic.ui.header', 'ionic.ui.sideMenu', 'ionic.ui.list', 'ionic.ui.checkbox', @@ -28,9 +29,11 @@ angular.module('ionic', [ 'ionic.ui', ]); ; -angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet']) +angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet', 'ngAnimate']) + +.factory('ActionSheet', ['$rootScope', '$document', '$compile', '$animate', '$timeout', 'TemplateLoader', + function($rootScope, $document, $compile, $animate, $timeout, TemplateLoader) { -.factory('ActionSheet', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) { return { /** * Load an action sheet with the given template string. @@ -40,23 +43,41 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni * * @param {object} opts the options for this ActionSheet (see docs) */ - show: function(opts, $scope) { - var scope = $scope && $scope.$new() || $rootScope.$new(true); + show: function(opts) { + var scope = $rootScope.$new(true); angular.extend(scope, opts); + + // Compile the template + var element = $compile('')(scope); + + // Grab the sheet element for animation + var sheetEl = angular.element(element[0].querySelector('.action-sheet')); + + var hideSheet = function(didCancel) { + $animate.leave(sheetEl, function() { + if(didCancel) { + opts.cancel(); + } + }); + + $timeout(function() { + $animate.removeClass(element, 'active', function() { + scope.$destroy(); + }); + }); + }; + scope.cancel = function() { - scope.sheet.hide(); - //scope.$destroy(); - opts.cancel(); + hideSheet(true); }; scope.buttonClicked = function(index) { // Check if the button click event returned true, which means // we can close the action sheet if((opts.buttonClicked && opts.buttonClicked(index)) === true) { - scope.sheet.hide(); - //scope.$destroy(); + hideSheet(false); } }; @@ -64,34 +85,31 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni // Check if the destructive button click event returned true, which means // we can close the action sheet if((opts.destructiveButtonClicked && opts.destructiveButtonClicked()) === true) { - scope.sheet.hide(); - //scope.$destroy(); + hideSheet(false); } }; - // Compile the template - var element = $compile('')(scope); - - var s = element.scope(); - $document[0].body.appendChild(element[0]); var sheet = new ionic.views.ActionSheet({el: element[0] }); - s.sheet = sheet; + scope.sheet = sheet; - sheet.show(); + $animate.addClass(element, 'active'); + $animate.enter(sheetEl, element, function() { + }); return sheet; } }; + }]); ; angular.module('ionic.service.gesture', []) .factory('Gesture', [function() { return { - on: function(eventType, cb, element) { - return window.ionic.onGesture(eventType, cb, element); + on: function(eventType, cb, $element) { + return window.ionic.onGesture(eventType, cb, $element[0]); } }; }]); @@ -584,6 +602,41 @@ angular.module('ionic.ui.content', []) })(); ; +(function(ionic) { +'use strict'; + +angular.module('ionic.ui.header', ['ngAnimate']) + + +.directive('headerBar', function() { + return { + restrict: 'E', + replace: true, + transclude: true, + template: '
', + scope: { + type: '@', + alignTitle: '@', + }, + link: function($scope, $element, $attr) { + var hb = new ionic.views.HeaderBar({ + el: $element[0], + alignTitle: $scope.alignTitle || 'center' + }); + + $element.addClass($scope.type); + + $scope.headerBarView = hb; + + $scope.$on('$destroy', function() { + // + }); + } + }; +}); + +})(ionic); +; (function() { 'use strict'; @@ -696,11 +749,11 @@ angular.module('ionic.ui.list', ['ngAnimate']) hasPullToRefresh: ($scope.hasPullToRefresh !== 'false'), onRefresh: function() { $scope.onRefresh(); - $scope.$parent.$broadcast('onRefresh'); + $scope.$parent.$broadcast('scroll.onRefresh'); }, onRefreshOpening: function(amt) { $scope.onRefreshOpening({amount: amt}); - $scope.$parent.$broadcast('onRefreshOpening', amt); + $scope.$parent.$broadcast('scroll.onRefreshOpening', amt); } }); @@ -773,6 +826,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges // Pop function, throttled this.popController = ionic.throttle(function() { _this.pop(); + $scope.$broadcast('navs.pop'); }, 300, { trailing: false }); @@ -820,6 +874,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges */ $scope.pushController = function(scope, element) { _this.push(scope); + $scope.$broadcast('navs.push', scope); }; $scope.navController = this; @@ -846,22 +901,46 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges restrict: 'E', require: '^navs', replace: true, - scope: true, + scope: { + type: '@', + backButtonType: '@', + alignTitle: '@' + }, template: '
' + - 'Back' + + '' + '

{{navController.getTopController().title}}

' + '
', - link: function(scope, element, attrs, navCtrl) { - scope.navController = navCtrl; + link: function($scope, $element, $attr, navCtrl) { + var backButton; - scope.barType = attrs.barType || 'bar-dark'; - element.addClass(scope.barType); + $scope.navController = navCtrl; - scope.$watch('navController.controllers.length', function(value) { - }); - scope.goBack = function() { + $scope.goBack = function() { navCtrl.popController(); }; + + + var hb = new ionic.views.HeaderBar({ + el: $element[0], + alignTitle: $scope.alignTitle || 'center' + }); + + $element.addClass($scope.type); + + $scope.headerBarView = hb; + + $scope.$parent.$on('navs.push', function() { + backButton = angular.element($element[0].querySelector('.button')); + backButton.addClass($scope.backButtonType); + hb.align(); + }); + $scope.$parent.$on('navs.pop', function() { + hb.align(); + }); + + $scope.$on('$destroy', function() { + // + }); } }; }) @@ -1128,7 +1207,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture']) sideMenuCtrl._handleDrag(e); }; - Gesture.on('drag', dragFn, $element[0]); + Gesture.on('drag', dragFn, $element); var dragReleaseFn = function(e) { if(!defaultPrevented) { @@ -1137,7 +1216,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture']) defaultPrevented = false; }; - Gesture.on('release', dragReleaseFn, $element[0]); + Gesture.on('release', dragReleaseFn, $element); sideMenuCtrl.setContent({ onDrag: function(e) {}, diff --git a/dist/js/ionic.js b/dist/js/ionic.js index f5067571ea..29affd66a2 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -135,6 +135,29 @@ window.ionic = { ; (function(ionic) { ionic.DomUtil = { + getTextBounds: function(textNode) { + if(document.createRange) { + var range = document.createRange(); + range.selectNodeContents(textNode); + if(range.getBoundingClientRect) { + var rect = range.getBoundingClientRect(); + + var sx = window.scrollX; + var sy = window.scrollY; + + return { + top: rect.top + sy, + left: rect.left + sx, + right: rect.left + sx + rect.width, + bottom: rect.top + sy + rect.height, + width: rect.width, + height: rect.height + }; + } + } + return null + }, + getChildIndex: function(element) { return Array.prototype.slice.call(element.parentNode.children).indexOf(element); }, @@ -2043,7 +2066,7 @@ window.ionic = { // Whether to disable overflow rubber banding when content is small // enough to fit in the viewport (i.e. doesn't need scrolling) - disableNonOverflowRubberBand: false, + disableNonOverflowRubberBand: true, // Called as the refresher is opened, an amount is passed onRefreshOpening: function() {}, @@ -2501,7 +2524,9 @@ window.ionic = { startTime: Date.now() }; - if(this.disableNonOverflowRubberBand === true) { + // If the viewport is too small and we aren't using pull to refresh, + // don't rubber band the drag + if(this.disableNonOverflowRubberBand === true && !this._refresher) { var maxX = Math.min(0, (-totalWidth + parentWidth)); var maxY = Math.min(0, (-totalHeight + parentHeight)); @@ -2844,22 +2869,95 @@ window.ionic = { initialize: function(opts) { this.el = opts.el; - this._titleEl = this.el.querySelector('.title'); + ionic.extend(this, { + alignTitle: 'center' + }, opts); + + this.align(); }, - resizeTitle: function() { - var e, j, i, - title, - titleWidth, - children = this.el.children; - for(i = 0, j = children.length; i < j; i++) { - e = children[i]; - if(/h\d/.test(e.nodeName.toLowerCase())) { - title = e; + /** + * Align the title text given the buttons in the header + * so that the header text size is maximized and aligned + * correctly as long as possible. + */ + align: function() { + var _this = this; + + window.rAF(ionic.proxy(function() { + var i, c, childSize, childStyle; + var children = this.el.children; + var childNodes = this.el.childNodes; + var styles = window.getComputedStyle(this.el, null); + + // Get the padding of the header for calculations + var paddingLeft = parseFloat(styles['paddingLeft']); + var paddingRight = parseFloat(styles['paddingRight']); + + // Get the full width of the header + var headerWidth = this.el.offsetWidth; + + // Find the title element + var title = this.el.querySelector('.title'); + if(!title) { + return; } - } + + var leftWidth = 0; + var rightWidth = 0; + var titlePos = Array.prototype.indexOf.call(this.el.childNodes, title); - titleWidth = title.offsetWidth; + // Compute how wide the left children are + for(i = 0; i < titlePos; i++) { + childSize = null; + c = childNodes[i]; + if(c.nodeType == 3) { + childSize = ionic.DomUtil.getTextBounds(c); + } else if(c.nodeType == 1) { + childSize = c.getBoundingClientRect(); + } + if(childSize) { + leftWidth += childSize.width; + } + } + + // Compute how wide the right children are + for(i = titlePos + 1; i < childNodes.length; i++) { + childSize = null; + c = childNodes[i]; + if(c.nodeType == 3) { + childSize = ionic.DomUtil.getTextBounds(c); + } else if(c.nodeType == 1) { + childSize = c.getBoundingClientRect(); + } + if(childSize) { + rightWidth += childSize.width; + } + } + + var margin = Math.max(leftWidth, rightWidth) + 10; + + // Size and align the header title based on the sizes of the left and + // right children, and the desired alignment mode + if(this.alignTitle == 'center') { + title.style.left = margin + 'px'; + title.style.right = margin + 'px'; + + console.log(title.offsetWidth, title.scrollWidth); + if(title.offsetWidth < title.scrollWidth) { + title.style.textAlign = 'left'; + title.style.right = (rightWidth + 5) + 'px'; + } else { + title.style.textAlign = 'center'; + } + } else if(this.alignTitle == 'left') { + title.style.textAlign = 'left'; + title.style.left = (leftWidth + 15) + 'px'; + } else if(this.alignTitle == 'right') { + title.style.textAlign = 'right'; + title.style.right = (rightWidth + 15) + 'px'; + } + }, this)); } }); diff --git a/js/ext/angular/src/directive/ionicSideMenu.js b/js/ext/angular/src/directive/ionicSideMenu.js index 07841e7062..637dd86fc2 100644 --- a/js/ext/angular/src/directive/ionicSideMenu.js +++ b/js/ext/angular/src/directive/ionicSideMenu.js @@ -70,7 +70,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture']) sideMenuCtrl._handleDrag(e); }; - Gesture.on('drag', dragFn, $element[0]); + Gesture.on('drag', dragFn, $element); var dragReleaseFn = function(e) { if(!defaultPrevented) { @@ -79,7 +79,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture']) defaultPrevented = false; }; - Gesture.on('release', dragReleaseFn, $element[0]); + Gesture.on('release', dragReleaseFn, $element); sideMenuCtrl.setContent({ onDrag: function(e) {}, diff --git a/js/ext/angular/src/service/ionicGesture.js b/js/ext/angular/src/service/ionicGesture.js index 157833f37e..ba2126afe9 100644 --- a/js/ext/angular/src/service/ionicGesture.js +++ b/js/ext/angular/src/service/ionicGesture.js @@ -2,8 +2,8 @@ angular.module('ionic.service.gesture', []) .factory('Gesture', [function() { return { - on: function(eventType, cb, element) { - return window.ionic.onGesture(eventType, cb, element); + on: function(eventType, cb, $element) { + return window.ionic.onGesture(eventType, cb, $element[0]); } }; }]);