Skip to content

Commit 0421b7b

Browse files
author
Adam Bradley
committed
Minimal classList polyfill added
1 parent 42f39bb commit 0421b7b

File tree

3 files changed

+113
-38
lines changed

3 files changed

+113
-38
lines changed

‎js/ext/angular/src/service/angularOverrides.js‎

Lines changed: 6 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,20 @@
11

22
angular.element.prototype.addClass = function(cssClasses) {
3-
var x, y, cssClass, el, splitClasses, existingClasses;
43
if (cssClasses && cssClasses != 'ng-scope' && cssClasses != 'ng-isolate-scope') {
5-
for(x=0; x<this.length; x++) {
6-
el = this[x];
7-
if(el.setAttribute) {
8-
9-
if(cssClasses.indexOf(' ') < 0) {
10-
el.classList.add(cssClasses);
11-
} else {
12-
existingClasses = (' ' + (el.getAttribute('class') || '') + ' ')
13-
.replace(/[\n\t]/g, " ");
14-
splitClasses = cssClasses.split(' ');
15-
16-
for (y=0; y<splitClasses.length; y++) {
17-
cssClass = splitClasses[y].trim();
18-
if (existingClasses.indexOf(' ' + cssClass + ' ') === -1) {
19-
existingClasses += cssClass + ' ';
20-
}
21-
}
22-
el.setAttribute('class', existingClasses.trim());
23-
}
4+
for(var x=0; x<this.length; x++) {
5+
if(this[x].setAttribute) {
6+
this[x].classList.add.apply(this[x].classList, cssClasses.split(/\s+/));
247
}
258
}
269
}
2710
return this;
2811
};
2912

3013
angular.element.prototype.removeClass = function(cssClasses) {
31-
var x, y, splitClasses, cssClass, el;
3214
if (cssClasses) {
33-
for(x=0; x<this.length; x++) {
34-
el = this[x];
35-
if(el.getAttribute) {
36-
if(cssClasses.indexOf(' ') < 0) {
37-
el.classList.remove(cssClasses);
38-
} else {
39-
splitClasses = cssClasses.split(' ');
40-
41-
for (y=0; y<splitClasses.length; y++) {
42-
cssClass = splitClasses[y];
43-
el.setAttribute('class', (
44-
(" " + (el.getAttribute('class') || '') + " ")
45-
.replace(/[\n\t]/g, " ")
46-
.replace(" " + cssClass.trim() + " ", " ")).trim()
47-
);
48-
}
49-
}
15+
for(var x=0; x<this.length; x++) {
16+
if(this[x].setAttribute) {
17+
this[x].classList.remove.apply(this[x].classList, cssClasses.split(/\s+/));
5018
}
5119
}
5220
}

‎js/ext/angular/test/poly.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<html ng-app="ionicTest">
2+
<head>
3+
<meta charset="utf-8">
4+
<title>Polyfill Tests</title>
5+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
6+
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
7+
<style>
8+
.supported,
9+
.support1.support2 {
10+
background: green;
11+
color: white;
12+
}
13+
.not-supported,
14+
.not-supported1.not-supported2 {
15+
background: red;
16+
}
17+
</style>
18+
</head>
19+
<body ng-controller="AppCtrl" class="padding">
20+
21+
<header>
22+
<h1 class="title">Polyfill Tests</h1>
23+
</header>
24+
25+
<p id="supportsClassList">
26+
Should be green if classList.add is supported
27+
</p>
28+
29+
<p id="supportsClassListArgs">
30+
Should be green if classList.add with multiple arguments is supported
31+
</p>
32+
33+
<p ng-class="ngClassTest">
34+
Should be green by using ng-class
35+
</p>
36+
37+
<script>
38+
console.error = function(){
39+
alert(arguments)
40+
}
41+
</script>
42+
43+
<script src="../../../../dist/js/ionic.bundle.js"></script>
44+
<script>
45+
46+
document.getElementById('supportsClassList').classList.add('supported');
47+
document.getElementById('supportsClassList').classList.remove('not-supported');
48+
49+
document.getElementById('supportsClassListArgs').classList.add('support1', 'support2');
50+
document.getElementById('supportsClassListArgs').classList.remove('not-supported1', 'not-supported2');
51+
52+
angular.module('ionicTest', ['ionic'])
53+
54+
.controller('AppCtrl', function($scope) {
55+
56+
$scope.ngClassTest = 'supported';
57+
58+
});
59+
60+
</script>
61+
</body>
62+
</html>
63+

‎js/utils/poly.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,50 @@
1717
}
1818
})();
1919

20+
// classList polyfill for them older Androids
21+
// https://gist.github.com/devongovett/1381839
22+
if (!("classList" in document.documentElement) && Object.defineProperty && typeof HTMLElement !== 'undefined') {
23+
Object.defineProperty(HTMLElement.prototype, 'classList', {
24+
get: function() {
25+
var self = this;
26+
function update(fn) {
27+
return function() {
28+
var x, classes = self.className.split(/\s+/);
29+
30+
for(x=0; x<arguments.length; x++) {
31+
fn(classes, classes.indexOf(arguments[x]), arguments[x]);
32+
}
33+
34+
self.className = classes.join(" ");
35+
}
36+
}
37+
38+
return {
39+
add: update(function(classes, index, value) {
40+
~index || classes.push(value);
41+
}),
42+
43+
remove: update(function(classes, index) {
44+
~index && classes.splice(index, 1);
45+
}),
46+
47+
toggle: update(function(classes, index, value) {
48+
~index ? classes.splice(index, 1) : classes.push(value);
49+
}),
50+
51+
contains: function(value) {
52+
return !!~self.className.split(/\s+/).indexOf(value);
53+
},
54+
55+
item: function(i) {
56+
return self.className.split(/\s+/)[i] || null;
57+
}
58+
};
59+
60+
}
61+
});
62+
}
63+
2064
// polyfill use to simulate native "tap"
2165
ionic.tapElement = function(target, e) {
2266
// simulate a normal click by running the element's click method then focus on it

0 commit comments

Comments
 (0)