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

feat(splitView): expose side menu on large viewport

Browse Source 
Ability to keep a left menu exposed on larger viewports, such as a
landscape tablet. Added the `expose-aside-menu` attribute directive.
This commit is contained in:
Adam Bradley
2014-08-26 15:00:42 -05:00
parent 853fad19b1
commit b69aa5485f
11 changed files with 217 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
test/html/sideMenu.html
View File

@@ -15,7 +15,7 @@
<ion-side-menu-content edge-drag-threshold="true" drag-content="!$root.disableDrag">
<header class="bar bar-header bar-positive">
<button class="button button-icon ion-navicon" ng-click="toggleLeft()"></button>
<button class="button button-icon ion-navicon" ng-click="toggleLeft()" ng-hide="$exposeAside.active"></button>
<h1 class="title">Slide me</h1>
<button class="button button-icon ion-navicon" ng-click="toggleRight()"></button>
</header>
@@ -32,7 +32,7 @@
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="left" width="$root.menuWidth || 270" ng-controller="LeftCtrl">
<ion-side-menu side="left" width="$root.menuWidth || 275" ng-controller="LeftCtrl" expose-aside-when="(min-width:750px) and (max-width:1200px)">
<header class="bar bar-header bar-assertive">
<h1 class="title">Left</h1>
</header>

49
test/unit/angular/directive/sideMenu.unit.js
View File

@@ -24,6 +24,55 @@ describe('Ionic Angular Side Menu', function() {
expect(deregisterSpy).toHaveBeenCalled();
}));
it('should set $exposeAside.active', inject(function($compile, $rootScope) {
var el = $compile('<ion-side-menus><ion-side-menu></><ion-side-menu-content></ion-side-menu-content></ion-side-menus>')($rootScope.$new());
$rootScope.$apply();
var sideMenuController = el.controller('ionSideMenus');
expect(sideMenuController.isAsideExposed()).toBe(false);
expect(el.scope().$exposeAside).toBeUndefined();
sideMenuController.exposeAside(true);
expect(el.scope().$exposeAside.active).toEqual(true);
expect(sideMenuController.isAsideExposed()).toBe(true);
sideMenuController.exposeAside(false);
expect(el.scope().$exposeAside.active).toEqual(false);
expect(sideMenuController.isAsideExposed()).toBe(false);
}));
it('should emit $ionicexposeAside', inject(function($compile, $rootScope) {
var el = $compile('<ion-side-menus><ion-side-menu></><ion-side-menu-content></ion-side-menu-content></ion-side-menus>')($rootScope.$new());
$rootScope.$apply();
var sideMenuController = el.controller('ionSideMenus');
spyOn(el.scope(), "$emit")
sideMenuController.exposeAside(true);
expect(el.scope().$emit).toHaveBeenCalledWith("$ionicExposeAside", true);
sideMenuController.exposeAside(false);
expect(el.scope().$emit).toHaveBeenCalledWith("$ionicExposeAside", false);
}));
it('should set exposed menu', inject(function($compile, $rootScope) {
var el = $compile('<ion-side-menus><ion-side-menu></><ion-side-menu-content></ion-side-menu-content></ion-side-menus>')($rootScope.$new());
$rootScope.$apply();
var sideMenuController = el.controller('ionSideMenus');
var content = sideMenuController.content;
expect(content.offsetX).toEqual(0);
expect(content.getTranslateX()).toEqual(0);
expect(content.element.style.width).toEqual('');
sideMenuController.exposeAside(true);
expect(content.offsetX).toEqual(275);
expect(content.getTranslateX()).toEqual(0);
expect(content.element.getAttribute('style').indexOf('translate3d(275px, 0px, 0px)') > -1).toEqual(true);
expect(content.element.style.width).toNotEqual('');
sideMenuController.exposeAside(false);
expect(content.element.getAttribute('style').indexOf('translate3d(0px, 0px, 0px)') > -1).toEqual(true);
expect(content.getTranslateX()).toEqual(0);
expect(content.offsetX).toEqual(0);
expect(content.element.style.width).toEqual('');
}));
it('should canDragContent', inject(function($compile, $rootScope) {
var el = $compile('<ion-side-menus><div ion-side-menu-content></div></ion-side-menus>')($rootScope.$new());
$rootScope.$apply();