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

refactor(ionContent): remove has-* classes

Browse Source 
BREAKING CHANGE: ion-content's has-header/footer/tabs attributes
no longer work.

Use the classes 'has-header', 'has-subheader', 'has-footer', and
'has-tabs' to modify the positioning of the ion-content relative
to surrounding elements.

Before: `<ion-content has-header="true">`

After: `<ion-content class="has-header">`
This commit is contained in:
Andy Joslin
2014-03-18 08:24:05 -06:00
parent 7b410eaa61
commit 5117d5673a
2 changed files with 14 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
js/ext/angular/src/directive/ionicContent.js vendored
View File

@@ -42,14 +42,14 @@ angular.module('ionic.ui.content', ['ionic.ui.service', 'ionic.ui.scroll'])
* directive, and infinite scrolling with the {@link ionic.directive:ionInfiniteScroll}
* directive.
*
* @restrict E
* Use the classes 'has-header', 'has-subheader', 'has-footer', and 'has-tabs'
* to modify the positioning of the ion-content relative to surrounding elements.
*
* @param {boolean=} padding Whether to add padding to the content.
* of the content. Defaults to true on iOS, false on Android.
* @param {boolean=} scroll Whether to allow scrolling of content. Defaults to true.
* @param {boolean=} overflow-scroll Whether to use overflow-scrolling instead of
* Ionic scroll.
* @param {boolean=} padding Whether to add padding to the content.
* @param {boolean=} has-header Whether to offset the content for a header bar.
* @param {boolean=} has-subheader Whether to offset the content for a subheader bar.
* @param {boolean=} has-footer Whether to offset the content for a footer bar.
* @param {boolean=} has-bouncing Whether to allow scrolling to bounce past the edges
* of the content. Defaults to true on iOS, false on Android.
* @param {expression=} on-scroll Expression to evaluate when the content is scrolled.
@@ -72,10 +72,6 @@ function($parse, $timeout, $controller, $ionicBind) {
'<div class="scroll"></div>' +
'</div>',
compile: function(element, attr, transclude) {
if(attr.hasHeader == "true") { element.addClass('has-header'); }
if(attr.hasSubheader == "true") { element.addClass('has-subheader'); }
if(attr.hasFooter == "true") { element.addClass('has-footer'); }
if(attr.hasTabs == "true") { element.addClass('has-tabs'); }
if(attr.padding == "true") { element.find('div').addClass('padding'); }
return {
@@ -103,6 +99,10 @@ function($parse, $timeout, $controller, $ionicBind) {
scrollEventInterval: '@'
});
$scope.$watch($attr.padding, function(newVal) {
$element.toggleClass('padding', !!newVal);
});
if ($scope.scroll === "false") {
//do nothing
} else if(attr.overflowScroll === "true") {

24
js/ext/angular/test/directive/ionicContent.unit.js
View File

@@ -21,11 +21,6 @@ describe('Ionic Content directive', function() {
expect(element.hasClass('scroll-content')).toBe(true);
});
it('Has header', function() {
var element = compile('<ion-content has-header="true"></ion-content>')(scope);
expect(element.hasClass('has-header')).toEqual(true);
});
it('should add padding classname', function() {
var element = compile('<ion-content padding="true"></ion-content>')(scope);
expect(element.hasClass('scroll-content')).toEqual(true);
@@ -34,18 +29,9 @@ describe('Ionic Content directive', function() {
expect(scrollElement.hasClass('padding')).toEqual(true);
});
// it('Enables bouncing by default', function() {
// ionic.Platform.setPlatform('iPhone');
// var element = compile('<ion-content has-header="true"></ion-content>')(scope);
// scope.$apply();
// var newScope = element.isolateScope();
// var scrollView = scope.scrollView;
// expect(scrollView.options.bouncing).toBe(true);
// });
it('Disables bouncing when has-bouncing = false', function() {
ionic.Platform.setPlatform('iPhone');
var element = compile('<ion-content has-header="true" has-bouncing="false"></ion-content>')(scope);
var element = compile('<ion-content has-bouncing="false"></ion-content>')(scope);
scope.$apply();
var newScope = element.isolateScope();
var scrollView = scope.scrollView;
@@ -54,16 +40,16 @@ describe('Ionic Content directive', function() {
it('Disables bouncing by default on Android', function() {
ionic.Platform.setPlatform('Android');
var element = compile('<ion-content has-header="true"></ion-content>')(scope);
var element = compile('<ion-content></ion-content>')(scope);
scope.$apply();
var newScope = element.isolateScope();
var scrollView = scope.scrollView;
expect(scrollView.options.bouncing).toBe(false);
});
it('Disables bouncing by default on Android unless has-bouncing = true', function() {
it('Disables bouncing by default on Android unless', function() {
ionic.Platform.setPlatform('Android');
var element = compile('<ion-content has-header="true" has-bouncing="true"></ion-content>')(scope);
var element = compile('<ion-content has-bouncing="true"></ion-content>')(scope);
scope.$apply();
var newScope = element.isolateScope();
var scrollView = scope.scrollView;
@@ -72,7 +58,7 @@ describe('Ionic Content directive', function() {
it('Should set start x and y', function() {
var element = compile('<ion-content start-x="100" start-y="300" has-header="true"></ion-content>')(scope);
var element = compile('<ion-content start-x="100" start-y="300"></ion-content>')(scope);
scope.$apply();
var newScope = element.isolateScope();
var scrollView = scope.scrollView;