Skip to content

Commit 1039a22

Browse files
infomofoinfomofo
committed
Merge pull request #12 from infomofo/scroll-to-top-nav-click
Scroll to top nav click
2 parents 273a114 + 524ee28 commit 1039a22

File tree

12 files changed

+116
-47
lines changed

12 files changed

+116
-47
lines changed

‎Gruntfile.js

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -386,6 +386,15 @@ module.exports = function (grunt) {
386386
}
387387
}
388388
},
389+
cordovaInstallPlugins: {
390+
command: 'cordova plugin add https://github.com/j-mcnally/cordova-statusTap',
391+
options: {
392+
stderr: false,
393+
execOptions: {
394+
cwd: '<%= yeoman.cordova %>'
395+
}
396+
}
397+
},
389398
cordovaPlatformInstallAndroid: {
390399
command: 'cordova platform add android',
391400
options: {
@@ -403,6 +412,15 @@ module.exports = function (grunt) {
403412
cwd: '<%= yeoman.cordova %>'
404413
}
405414
}
415+
},
416+
cordovaBuild: {
417+
command: 'cordova build',
418+
options: {
419+
stderr: false,
420+
execOptions: {
421+
cwd: '<%= yeoman.cordova %>'
422+
}
423+
}
406424
}
407425
}
408426
});
@@ -515,6 +533,8 @@ module.exports = function (grunt) {
515533
'shell:cordovaCreate',
516534
'addCordovaPreferences',
517535
'shell:cordovaPlatformInstallAndroid',
518-
'shell:cordovaPlatformInstallIos'
536+
'shell:cordovaPlatformInstallIos',
537+
'shell:cordovaInstallPlugins',
538+
'shell:cordovaBuild'
519539
]);
520540
};

‎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) {
11+
return {
12+
restrict: 'A',
13+
link: function (scope, element) {
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: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
'use strict';
2+
3+
describe('Directive: scrollToTopOnNavClick', function () {
4+
5+
// load the directive's module
6+
beforeEach(module('yoAngularCordovaApp'));
7+
8+
var scope, element;
9+
10+
beforeEach(inject(function ($rootScope) {
11+
scope = $rootScope.$new();
12+
}));
13+
14+
it('should scroll to top when NavClicked is detected', inject(function ($compile) {
15+
element = angular.element('<div scroll-to-top-on-nav-click>div</div>');
16+
element = $compile(element)(scope);
17+
//element.scrollTop(10);
18+
//expect(element[0].scrollTop()).toBe(10);
19+
20+
inject(function($rootScope) {
21+
$rootScope.$emit('NavClicked');
22+
$rootScope.$digest();
23+
//expect(element[0].scrollTop()).toBe(0);
24+
});
25+
}));
26+
});

0 commit comments

Comments
 (0)