javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Stuff

Browse Source
This commit is contained in:
Max Lynch
2013-12-07 15:17:07 -06:00
parent eb8dbeb0fe
commit 21702608e2
8 changed files with 84 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
dist/js/ionic-angular.js vendored
View File

@@ -305,6 +305,9 @@ angular.module('ionic.service.platform', [])
}
}, 10);
return {
setPlatform: function(p) {
platform = p;
@@ -1446,7 +1449,7 @@ angular.module('ionic.ui.radio', [])
value: '@'
},
transclude: true,
template: '<label ng-click="tapHandler($event)" class="item item-radio">\
template: '<label skip-tap-poly ng-click="tapHandler($event)" class="item item-radio">\
<input type="radio" name="group">\
<div class="item-content" ng-transclude>\
</div>\
@@ -1463,12 +1466,14 @@ angular.module('ionic.ui.radio', [])
if(!radio.length) { return; }
$scope.tapHandler = function(e) {
console.log("RADIOTAP");
radio[0].checked = true;
ngModel.$setViewValue($scope.$eval($attr.ngValue));
e.alreadyHandled = true;
};
var clickHandler = function(e) {
console.log("RADIOCLICK");
ngModel.$setViewValue($scope.$eval($attr.ngValue));
};
@@ -1544,18 +1549,15 @@ angular.module('ionic.ui.radio', [])
if(!ngModel || !radioButtons) { return; }
var setIt = function() {
console.trace('SET');
$element.addClass('active');
ngModel.$setViewValue($scope.$eval($attr.ngValue));
radioButtons.select($element);
};
$scope.tapHandler = function(e) {
setIt();
e.alreadyHandled = true;
};
var clickHandler = function(e) {
console.log('CLICK');
setIt();
};
@@ -1565,7 +1567,7 @@ angular.module('ionic.ui.radio', [])
};
});
$element.bind('click', clickHandler);
$element.bind('tap', clickHandler);
}
}
});
@@ -2174,7 +2176,7 @@ angular.module('ionic.ui.toggle', [])
replace: true,
require: '?ngModel',
scope: {},
template: '<div ng-click="toggleIt($event)" class="toggle"><input type="checkbox"><div class="track"><div class="handle"></div></div></div>',
template: '<div ng-click="toggleIt($event)" class="toggle" skip-tap-poly><input type="checkbox"><div class="track"><div class="handle"></div></div></div>',
link: function($scope, $element, $attr, ngModel) {
var checkbox, handle;

29
dist/js/ionic.js vendored
View File

@@ -1825,7 +1825,7 @@ window.ionic = {
// polyfill use to simulate native "tap"
function inputTapPolyfill(ele, e) {
if(ele.type === "radio" || ele.type === "checkbox") {
//ele.checked = !ele.checked;
ele.checked = !ele.checked;
} else if(ele.type === "submit" || ele.type === "button") {
ionic.trigger('click', {
target: ele
@@ -1839,6 +1839,7 @@ window.ionic = {
}
function tapPolyfill(e) {
console.log('TAP POLY');
// if the source event wasn't from a touch event then don't use this polyfill
if(!e.gesture || e.gesture.pointerType !== "touch" || !e.gesture.srcEvent) return;
@@ -1848,6 +1849,7 @@ window.ionic = {
// the tap stuff itself). This is in contrast to preventDefault which will
// mess up other operations like change events and such
if(e.alreadyHandled) {
console.log('POLY HANDLED');
return;
}
@@ -1855,17 +1857,35 @@ window.ionic = {
var ele = e.target;
console.log('TARGET', ele);
while(ele) {
// Skip ones that have the poly skip
if(ele.getAttribute('skip-tap-poly')) {
ele = ele.parentElement;
continue;
}
if( ele.tagName === "INPUT" || ele.tagName === "TEXTAREA" || ele.tagName === "SELECT" ) {
console.log('INPUT POLY');
return inputTapPolyfill(ele, e);
} else if( ele.tagName === "LABEL" ) {
console.log('LABEL POLY');
if(ele.control) {
return inputTapPolyfill(ele.control, e);
}
} else if( ele.tagName === "A" || ele.tagName === "BUTTON" ) {
ionic.trigger('click', {
target: ele
});
if(ele.getAttribute('href')) {
console.log('HREF POLY', ele);
ionic.trigger('click', {
target: ele
});
} else {
console.log('BUTTON POLY', ele);
ionic.trigger('tap', {
target: ele
});
}
e.stopPropagation();
e.preventDefault();
return false;
@@ -1873,6 +1893,7 @@ window.ionic = {
ele = ele.parentElement;
}
console.log('NEITHER POLY');
// they didn't tap one of the above elements
// if the currently active element is an input, and they tapped outside
// of the current input, then unset its focus (blur) so the keyboard goes away

13
js/ext/angular/src/directive/ionicRadio.js vendored
View File

@@ -14,7 +14,7 @@ angular.module('ionic.ui.radio', [])
value: '@'
},
transclude: true,
template: '<label ng-click="tapHandler($event)" class="item item-radio">\
template: '<label skip-tap-poly ng-click="tapHandler($event)" class="item item-radio">\
<input type="radio" name="group">\
<div class="item-content" ng-transclude>\
</div>\
@@ -31,12 +31,14 @@ angular.module('ionic.ui.radio', [])
if(!radio.length) { return; }
$scope.tapHandler = function(e) {
console.log("RADIOTAP");
radio[0].checked = true;
ngModel.$setViewValue($scope.$eval($attr.ngValue));
e.alreadyHandled = true;
};
var clickHandler = function(e) {
console.log("RADIOCLICK");
ngModel.$setViewValue($scope.$eval($attr.ngValue));
};
@@ -112,18 +114,15 @@ angular.module('ionic.ui.radio', [])
if(!ngModel || !radioButtons) { return; }
var setIt = function() {
console.trace('SET');
$element.addClass('active');
ngModel.$setViewValue($scope.$eval($attr.ngValue));
radioButtons.select($element);
};
$scope.tapHandler = function(e) {
setIt();
e.alreadyHandled = true;
};
var clickHandler = function(e) {
console.log('CLICK');
setIt();
};
@@ -133,7 +132,7 @@ angular.module('ionic.ui.radio', [])
};
});
$element.bind('click', clickHandler);
$element.bind('tap', clickHandler);
}
}
});

2
js/ext/angular/src/directive/ionicToggle.js vendored
View File

@@ -11,7 +11,7 @@ angular.module('ionic.ui.toggle', [])
replace: true,
require: '?ngModel',
scope: {},
template: '<div ng-click="toggleIt($event)" class="toggle"><input type="checkbox"><div class="track"><div class="handle"></div></div></div>',
template: '<div ng-click="toggleIt($event)" class="toggle" skip-tap-poly><input type="checkbox"><div class="track"><div class="handle"></div></div></div>',
link: function($scope, $element, $attr, ngModel) {
var checkbox, handle;

3
js/ext/angular/src/service/ionicPlatform.js vendored
View File

@@ -35,6 +35,9 @@ angular.module('ionic.service.platform', [])
}
}, 10);
return {
setPlatform: function(p) {
platform = p;

4
js/ext/angular/test/checkbox.html
View File

@@ -11,7 +11,9 @@
<div ng-controller="TestCtrl">
<content has-header="true" class="reveal-animation">
<p><checkbox ng-model="data.isLovely"></checkbox></p>
<div class="list">
<checkbox ng-model="data.isLovely">Thing</checkbox>
</div>
<button type="submit" class="button button-danger" ng-click="setToTrue()">Set to true</button>
<button type="submit" class="button button-danger" ng-click="setToFalse()">Set to false</button>
<button type="submit" class="button button-danger" ng-click="getValue()">Get Value</button>

16
js/ext/angular/test/radioButton.html
View File

@@ -22,11 +22,17 @@
<content has-header="true"class="reveal-animation">
<div ng-controller="TestCtrl">
<radio-buttons ng-model="data.isLovely">
<button class="button button-assertive button-radio" ng-value="'magical'">Magical</button>
<button class="button button-assertive button-radio" ng-value="'black'">Black</button>
<button class="button button-assertive button-radio" ng-value="'pinto'">Pinto</button>
</radio-buttons>
<div class="list">
<label class="item item-input">
<span class="input-label">Units</span>
<radio-buttons ng-model="data.isLovely">
<button class="button button-assertive button-radio" ng-value="'magical'">Magical</button>
<button class="button button-assertive button-radio" ng-value="'black'">Black</button>
<button class="button button-assertive button-radio" ng-value="'pinto'">Pinto</button>
</radio-buttons>
</label>
</div>
<form>
<button ng-click="cycle()" class="button button-warning">Cycle</button>

29
js/utils/poly.js
View File

@@ -31,7 +31,7 @@
// polyfill use to simulate native "tap"
function inputTapPolyfill(ele, e) {
if(ele.type === "radio" || ele.type === "checkbox") {
//ele.checked = !ele.checked;
ele.checked = !ele.checked;
} else if(ele.type === "submit" || ele.type === "button") {
ionic.trigger('click', {
target: ele
@@ -45,6 +45,7 @@
}
function tapPolyfill(e) {
console.log('TAP POLY');
// if the source event wasn't from a touch event then don't use this polyfill
if(!e.gesture || e.gesture.pointerType !== "touch" || !e.gesture.srcEvent) return;
@@ -54,6 +55,7 @@
// the tap stuff itself). This is in contrast to preventDefault which will
// mess up other operations like change events and such
if(e.alreadyHandled) {
console.log('POLY HANDLED');
return;
}
@@ -61,17 +63,35 @@
var ele = e.target;
console.log('TARGET', ele);
while(ele) {
// Skip ones that have the poly skip
if(ele.getAttribute('skip-tap-poly')) {
ele = ele.parentElement;
continue;
}
if( ele.tagName === "INPUT" || ele.tagName === "TEXTAREA" || ele.tagName === "SELECT" ) {
console.log('INPUT POLY');
return inputTapPolyfill(ele, e);
} else if( ele.tagName === "LABEL" ) {
console.log('LABEL POLY');
if(ele.control) {
return inputTapPolyfill(ele.control, e);
}
} else if( ele.tagName === "A" || ele.tagName === "BUTTON" ) {
ionic.trigger('click', {
target: ele
});
if(ele.getAttribute('href')) {
console.log('HREF POLY', ele);
ionic.trigger('click', {
target: ele
});
} else {
console.log('BUTTON POLY', ele);
ionic.trigger('tap', {
target: ele
});
}
e.stopPropagation();
e.preventDefault();
return false;
@@ -79,6 +99,7 @@
ele = ele.parentElement;
}
console.log('NEITHER POLY');
// they didn't tap one of the above elements
// if the currently active element is an input, and they tapped outside
// of the current input, then unset its focus (blur) so the keyboard goes away