-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat($ionicBody): service to simplify body ele interaction
Many services/directives have to interact with the body element, and each one has to write the same long code. The $ionicBody service provides some useful methods to clean up and reduce redundant code.
- Loading branch information
1 parent
b69aa54
commit 2c3f1c9
Showing
10 changed files
with
203 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
/** | ||
* @ngdoc service | ||
* @name $ionicBody | ||
* @module ionic | ||
* @description An angular utility service to easily and efficiently | ||
* add and remove CSS classes from the document's body element. | ||
*/ | ||
IonicModule | ||
.factory('$ionicBody', ['$document', function($document) { | ||
return { | ||
/** | ||
* @ngdoc method | ||
* @name $ionicBody#add | ||
* @description Add a class to the document's body element. | ||
* @param {string} class Each argument will be added to the body element. | ||
* @returns {$ionicBody} The $ionicBody service so methods can be chained. | ||
*/ | ||
addClass: function() { | ||
for(var x=0; x<arguments.length; x++) { | ||
$document[0].body.classList.add(arguments[x]); | ||
} | ||
return this; | ||
}, | ||
/** | ||
* @ngdoc method | ||
* @name $ionicBody#removeClass | ||
* @description Remove a class from the document's body element. | ||
* @param {string} class Each argument will be removed from the body element. | ||
* @returns {$ionicBody} The $ionicBody service so methods can be chained. | ||
*/ | ||
removeClass: function() { | ||
for(var x=0; x<arguments.length; x++) { | ||
$document[0].body.classList.remove(arguments[x]); | ||
} | ||
return this; | ||
}, | ||
/** | ||
* @ngdoc method | ||
* @name $ionicBody#enableClass | ||
* @description Similar to the `add` method, except the first parameter accepts a boolean | ||
* value determining if the class should be added or removed. Rather than writing user code, | ||
* such as "if true then add the class, else then remove the class", this method can be | ||
* given a true or false value which reduces redundant code. | ||
* @param {boolean} shouldEnableClass A true/false value if the class should be added or removed. | ||
* @param {string} class Each remaining argument would be added or removed depending on | ||
* the first argument. | ||
* @returns {$ionicBody} The $ionicBody service so methods can be chained. | ||
*/ | ||
enableClass: function(shouldEnableClass) { | ||
var args = Array.prototype.slice.call(arguments).slice(1); | ||
if(shouldEnableClass) { | ||
this.addClass.apply(this, args); | ||
} else { | ||
this.removeClass.apply(this, args); | ||
} | ||
return this; | ||
}, | ||
/** | ||
* @ngdoc method | ||
* @name $ionicBody#append | ||
* @description Append a child to the document's body. | ||
* @param {element} element The element to be appended to the body. The passed in element | ||
* can be either a jqLite element, or a DOM element. | ||
* @returns {$ionicBody} The $ionicBody service so methods can be chained. | ||
*/ | ||
append: function(ele) { | ||
$document[0].body.appendChild( ele.length ? ele[0] : ele ); | ||
return this; | ||
}, | ||
/** | ||
* @ngdoc method | ||
* @name $ionicBody#get | ||
* @description Get the document's body element. | ||
* @returns {element} Returns the document's body element. | ||
*/ | ||
get: function() { | ||
return $document[0].body; | ||
} | ||
}; | ||
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.