Skip to content

Commit b650b83

Browse files
infomofoinfomofo
committed
initial work on scroll-to-top-on-nav-click directive- not working on ios atm
1 parent 273a114 commit b650b83

File tree

11 files changed

+89
-46
lines changed

11 files changed

+89
-46
lines changed

‎app/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@
2828
<div ng-include="'views/sidenav.html'"></div>
2929
<div layout="column" layout-fill flex>
3030
<div ng-include="'views/toolbar.html'"></div>
31-
<md-content layout="column" layout-fill flex>
32-
<div layout-align="center center" ng-view="" layout-fill flex></div>
31+
<md-content layout="column" layout-fill flex ng-view layout="center center" scroll-to-top-on-nav-click>
3332
</md-content>
3433
</div>
3534
<!-- build:js(.) scripts/oldieshim.js -->
@@ -55,6 +54,7 @@
5554

5655
<!-- build:js({.tmp,app}) scripts/scripts.js -->
5756
<script src="scripts/app.js"></script>
57+
<script src="scripts/directives/scrolltotoponnavclick.js"></script>
5858
<script src="scripts/rootscope.js"></script>
5959
<script src="scripts/controllers/global.js"></script>
6060
<script src="scripts/controllers/main.js"></script>

‎app/scripts/controllers/global.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@ angular.module('yoAngularCordovaApp')
1212

1313
$scope.searchActive = false;
1414

15+
$scope.clickNav = function() {
16+
// Publish an event that can be handled by directives
17+
// console.log("nav clicked");
18+
$rootScope.$emit('NavClicked');
19+
};
20+
1521
/**
1622
* Closes the mdSidenav and handles any related behavior
1723
*/

‎app/scripts/directives/scrolltotoponnavclick.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
'use strict';
2+
3+
/**
4+
* @ngdoc directive
5+
* @name yoAngularCordovaApp.directive:scrollToTopOnNavClick
6+
* @description
7+
* # scrollToTopOnNavClick
8+
*/
9+
angular.module('yoAngularCordovaApp')
10+
.directive('scrollToTopOnNavClick', function ($rootScope, $timeout, $window) {
11+
return {
12+
restrict: 'A',
13+
link: function (scope, element, attrs) {
14+
$rootScope.$on('NavClicked', function () {
15+
$timeout(function () {
16+
//console.debug('NavClicked detected on ' + element[0].outerHTML + ' has scrollTop ' + element[0].scrollTop);
17+
element[0].scrollTop = 0;
18+
//$window.scrollTo(0,0);
19+
});
20+
});
21+
}
22+
};
23+
});

‎app/scripts/rootScope.js

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -86,15 +86,4 @@ angular.module('yoAngularCordovaApp')
8686
$location.path(url);
8787
};
8888

89-
/**
90-
* Handles the event of clicking on the nav bar- this is a common application convention that will make the active
91-
* scrollable container scroll to the top.
92-
*/
93-
$rootScope.$on('NavClicked', function() {
94-
var domElement = document.getElementById('scrollcontainer');
95-
domElement.style.overflow = 'hidden';
96-
// wait for any current momentum scrolling to finish and then jump to top
97-
//$('#scrollcontainer').animate({scrollTop: 0}, 'fast');
98-
domElement.style.overflow = '';
99-
});
10089
});

‎app/styles/main.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.noscroll {
2+
overflow: hidden;
3+
}

‎app/views/about.html

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
<md-content class="md-padding" layout="column" layout-align="center center">
1+
<div layout-margin>
22
<h1>About this app</h1>
3+
<p layout="column" layout-align="center center">
4+
<img src="images/angular.png" alt="I'm Angular"><br>
5+
This app uses angular and material design!
6+
</p>
7+
<p layout="column" layout-align="center center">
8+
<img src="images/yeoman.png" alt="I'm Yeoman"><br>
9+
This app was scaffolded initially with Yeoman!
10+
</p>
11+
<p layout="column" layout-align="center center">
12+
<i class="fa fa-4x fa-flag"></i>
13+
This app uses Font-Awesome!
14+
</p>
15+
<p layout="column" layout-align="center center">
16+
<img src="images/cordova.png" alt="I'm Cordova"><br>
17+
This app is built with the cordova framework to run on mobile devices!
18+
</p>
19+
<p layout="column" layout-align="center center">
20+
<i class="fa fa-4x fa-github"></i>
21+
This app is hosted on github, where you can find all the source code!
22+
</p>
323

4-
<p layout="column" layout-align="center center">
5-
<img src="images/angular.png" alt="I'm Angular"><br>
6-
This app uses angular and material design!
7-
</p>
8-
<p layout="column" layout-align="center center">
9-
<img src="images/yeoman.png" alt="I'm Yeoman"><br>
10-
This app was scaffolded initially with Yeoman!
11-
</p>
12-
<p layout="column" layout-align="center center">
13-
<i class="fa fa-4x fa-flag"></i>
14-
This app uses Font-Awesome!
15-
</p>
16-
<p layout="column" layout-align="center center">
17-
<img src="images/cordova.png" alt="I'm Cordova"><br>
18-
This app is built with the cordova framework to run on mobile devices!
19-
</p>
20-
<p layout="column" layout-align="center center">
21-
<i class="fa fa-4x fa-github"></i>
22-
This app is hosted on github, where you can find all the source code!
23-
</p>
24-
</md-content>
24+
</div>

‎app/views/list.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<md-toolbar class="md-primary md-tall md-hue-1 md-whiteframe-z2" style="z-index:0">
1+
<md-toolbar class="md-primary md-tall md-hue-1 md-whiteframe-z2" style="z-index:0" md-scroll-shrink="true">
22
<span flex></span>
33
<div class="md-toolbar-tools">
44
<h3>
5-
<span>List subheader</span>
5+
<span>Scroll-shrinking subheader</span>
66
</h3>
77
</div>
88
</md-toolbar>
9-
<md-content flex layout-fill class="toolbardemoScrollShrink md-padding">
9+
<md-content flex layout-fill class="toolbardemoScrollShrink md-padding" scroll-to-top-on-nav-click>
1010
<h3>List</h3>
1111
<p>This pane demonstrates a common list pane. When you scroll down the inner toolbar disappears.</p>
1212

‎app/views/main.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<md-content class="md-padding">
1+
<div layout-margin>
22
<div>
33
<h1>Hello!</h1>
44
</div>
@@ -26,10 +26,10 @@ <h4>How to use this app</h4>
2626
</p>
2727

2828
<h4>Application scaffolding and organization</h4>
29-
<p>.</p>
29+
<p>New directives, filters, routes, and controllers, as well as their respective karma tests can be added with standard yeoman generator-angular commands</p>
3030

3131
<h4>Other features</h4>
3232
<p>This app will also contain example grunt tests that can be run on an integration server, such as Travis.</p>
3333
</div>
3434

35-
</md-content>
35+
</div>

‎app/views/tabs.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
<md-content class="md-padding" flex layout="column" layout-fill>
2-
<h3>Tabs</h3>
3-
<p>Click the tab header change between tab contents</p>
1+
<div flex layout="column" layout-fill>
2+
<div layout-margin>
3+
<h3>Tabs</h3>
4+
<p>Click the tab header change between tab contents</p>
5+
</div>
46

57
<md-tabs layout="column" flex md-stretch-tabs="always">
68
<md-tab label="1">
@@ -19,4 +21,4 @@ <h1>A second tab of content</h1>
1921
</div>
2022
</md-tab>
2123
</md-tabs>
22-
</md-content>
24+
</div>

‎app/views/toolbar.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<md-toolbar class="md-primary" md-scroll-shrink="false" layout-align="center center">
1+
<md-toolbar class="md-primary" md-scroll-shrink="false" layout-align="center center" ng-click="clickNav()">
22
<h2 class="md-toolbar-tools" layout="row" layout-align="start end">
33
<div layout-align="center center">
44
<md-button ng-click="openSidenav()" class="md-accent" hide-gt-md aria-label="toggles the sidenav">

‎test/spec/directives/scrolltotoponnavclick.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
'use strict';
2+
3+
describe('Directive: scrollToTopOnNavClick', function () {
4+
5+
// load the directive's module
6+
beforeEach(module('yoAngularCordovaApp'));
7+
8+
var element,
9+
scope;
10+
11+
beforeEach(inject(function ($rootScope) {
12+
scope = $rootScope.$new();
13+
}));
14+
15+
it('should make hidden element visible', inject(function ($compile) {
16+
element = angular.element('<scroll-to-top-on-nav-click></scroll-to-top-on-nav-click>');
17+
element = $compile(element)(scope);
18+
expect(element.text()).toBe('this is the scrollToTopOnNavClick directive');
19+
}));
20+
});

0 commit comments

Comments
 (0)