scroll top tool

app/app/components/document/document-sidebar-toc.js

@@ -45,27 +45,29 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 
     didInsertElement() {
         this.eventBus.subscribe('documentPageAdded', this, 'onDocumentPageAdded');
-
-		// let s = $(".document-structure");
-        // let pos = s.position();
-		//
-		// $(window).scroll(_.throttle(function() {
-		// 	let windowpos = $(window).scrollTop();
-        //     if (windowpos - 200 >= pos.top) {
-        //         s.addClass("stuck-toc");
-        //         s.css('width', s.parent().width());
-        //     } else {
-        //         s.removeClass("stuck-toc");
-        //         s.css('width', 'auto');
-        //     }
-        // }, 50));
-    },
+	},
 
     willDestroyElement() {
         this.eventBus.unsubscribe('documentPageAdded');
 		this.destroyTooltips();
     },
 
+	// positionToc() {
+	// 	let s = $(".document-structure");
+    //     let pos = s.position();
+	//
+	// 	$(window).scroll(_.throttle(function() {
+	// 		let windowpos = $(window).scrollTop();
+    //         if (windowpos - 200 >= pos.top) {
+    //             s.addClass("stuck-toc");
+    //             s.css('width', s.parent().width());
+    //         } else {
+    //             s.removeClass("stuck-toc");
+    //             s.css('width', 'auto');
+    //         }
+    //     }, 50));
+	// },
+
     onDocumentPageAdded(pageId) {
         this.send('onEntryClick', pageId);
     },

app/app/components/document/document-sidebar.js

@@ -21,6 +21,7 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
 	showViews: false,
 	showContributions: false,
 	showSections: false,
+	showScrollTool: false,
 
 	didRender() {
 		if (this.session.authenticated) {
@@ -30,9 +31,20 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
 	},
 
 	didInsertElement() {
-		let _this = this;
         this.eventBus.subscribe('resized', this, 'positionTool');
 		this.eventBus.subscribe('scrolled', this, 'positionTool');
+
+		// new Waypoint({
+		// 	element: document.getElementById('zone-header'),
+		// 	handler: function(direction) {
+		// 		console.log(direction);
+		// 		if (direction === 'up') {
+		// 			$(".scroll-tool").addClass('hide');
+		// 			console.log("hiding");
+		// 		}
+		// 	},
+		// 	offset: 50
+		// });
 	},
 
 	willDestroyElement() {
@@ -40,14 +52,15 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
 	},
 
 	positionTool() {
-		let s = $(".section-tool");
-        let pos = s.position();
+		let s = $(".scroll-tool");
 		let windowpos = $(window).scrollTop();
 
-		if (windowpos - 200 >= pos.top) {
+		if (windowpos >= 300) {
+			this.set('showScrollTool', true);
 			s.addClass("stuck-tool");
 			s.css('left', parseInt($(".zone-sidebar").css('width')) - 18 + 'px');
 		} else {
+			this.set('showScrollTool', false);
 			s.removeClass("stuck-tool");
 		}
 	},
@@ -101,6 +114,13 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
 
 		onAddSection(section) {
 			this.attrs.onAddSection(section);
+		},
+
+		scrollTop() {
+			this.set('showScrollTool', false);
+			$("html,body").animate({
+				scrollTop: 0
+			}, 500, "linear");
 		}
     }
 });

app/app/services/event-bus.js

@@ -15,7 +15,7 @@ export default Ember.Service.extend(Ember.Evented, {
 	init() {
 		let _this = this;
 
-		window.addEventListener("scroll", _.debounce(function() {
+		window.addEventListener("scroll", _.throttle(function() {
 			_this.publish('scrolled', null);
 		}, 100));
 

app/app/styles/view/document/sidebar.scss

@@ -63,6 +63,18 @@
 		z-index: 999;
 	}
 
+	.scroll-tool {
+		position: absolute;
+		top: 150px;
+		right: -18px;
+		z-index: 888;
+		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
+      	-moz-animation: fadein 1s; /* Firefox < 16 */
+       	-ms-animation: fadein 1s; /* Internet Explorer */
+        -o-animation: fadein 1s; /* Opera < 12.1 */
+        animation: fadein 1s;
+	}
+
 	.stuck-tool {
 		position: fixed !important;
 		top: 150px !important;

app/app/templates/components/document/document-sidebar.hbs

@@ -34,6 +34,12 @@
 		</div>
 	{{/if}}
 
+	{{#if showScrollTool}}
+		<div {{action 'scrollTop'}} id="scroll-tool" class="round-button round-button-mono button-white scroll-tool" data-tooltip="Back to top" data-tooltip-position="top center">
+			<i class="material-icons color-gray">vertical_align_top</i>
+		</div>
+	{{/if}}
+
 	{{#if showToc}}
 		{{document/document-sidebar-toc document=model folder=folder pages=pages page=page isEditor=isEditor
 			changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange')