Commit 6331e072 authored by Feng Xue's avatar Feng Xue
Browse files

Add a scroll-to-top button in the study list and variable list

Fixes #734
parent 21ca1998
......@@ -11,7 +11,7 @@
}
.text-view {
padding: 0 .25em;
padding: 0 0.25em;
}
#table {
......@@ -196,3 +196,38 @@ img.mblListItemRightIcon {
#variables .mblListItem {
padding: 0 0 0 8px;
}
#gototop {
visibility: hidden;
z-index: 1;
position: fixed;
left: 10px;
bottom: 10px;
text-decoration: none;
color: #bbb;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
padding: 10px;
}
/* arrow icon (span tag) */
#gototop span {
width: 70px;
height: 70px;
display: block;
margin-bottom: 7px;
background: #ddd url(../images/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
\ No newline at end of file
......@@ -14,6 +14,7 @@
</head>
<body>
<div id="splash" class="loadingOverlay pageOverlay"><p>Loading...</p></div>
<div id="gototop"><span></span></div>
<script type="text/javascript">
var dojoConfig = (function() {
var base = location.href.split('/');
......@@ -109,15 +110,18 @@
</script>
<!-- select study view -->
<div id="studyList" data-dojo-id="studylist" data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props="selected: true">
<div id="studyList" data-dojo-id="studylist" data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props="selected: true, scrollBar: true">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed : 'top'">
<span id="cancelStudyPickerButton" data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props="transition: 'slide', transitionDir: '-1', arrow: 'left', moveTo: '#settings'" style="visibility: hidden">Cancel</span>
Select Study
</h1>
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props="fixed:'top'" class="search-box-pane mblBackground">
<input data-dojo-type="nesstartouch.SearchField" class="search-box" type="search" placeHolder="Filter studies" data-dojo-id="studySearchBox" data-dojo-props='moreignoreCase:true, queryExpr:"*${0}*", searchAttr:"label", listId: "studyListData"'>
</div>
<ul id="studyListData" class="search-enabled-list" data-dojo-type="nesstartouch.StudyList" data-dojo-props="variableHeight:true"> </ul>
</div>
<!-- study metadata view -->
......
/*global define, studySearchBox, splash, addVariableList, variableSearchBox, studySearchBox */
define(['dojo/_base/declare',
'dojo/_base/array',
'dojo/dom-style',
'dijit/registry',
"dojo/dom-style",
'dojo/when',
......@@ -13,7 +12,7 @@ define(['dojo/_base/declare',
'nesstartouch/_RestMixin',
'nesstartouch/_VariableMixin',
'dojo/query'],
function (declare, arrayUtil, domStyle, registry, style, when, Observable, Memory, RoundRectStoreList, ListItem, DeferredList, _RestMixin, _VariableMixin, query) {
function (declare, arrayUtil, registry, style, when, Observable, Memory, RoundRectStoreList, ListItem, DeferredList, _RestMixin, _VariableMixin, query) {
return declare('nesstartouch.StudyList', [RoundRectStoreList, _RestMixin, _VariableMixin], {
serviceUrl: '/study/list',
......@@ -24,14 +23,24 @@ define(['dojo/_base/declare',
this.inherited(arguments);
this.setStore(new Observable(new Memory()));
this.populate(this._onStudiesReceived);
self.bindClickEventToScrollTopButton(parent);
parent.onBeforeTransitionIn = function () {
self.init();
self.bindClickEventToScrollTopButton(parent);
};
parent.onAfterScroll = function (e) {
self.setScrollToTopButton(parent);
};
parent.onBeforeTransitionOut = function () {
self.hideScrollToTopButton(0);
};
},
init: function () {
if (window.nesstartouch.study) {
domStyle.set("cancelStudyPickerButton", "visibility", "visible");
style.set("cancelStudyPickerButton", "visibility", "visible");
}
studySearchBox.clear();
},
......
......@@ -34,11 +34,21 @@ define(['dojo/_base/declare',
},
addBindVariablesClickEvent: function () {
var that = this;
var that = this,
parent = addVariableList.getParent();
this.changePageTitle();
addVariableList.getParent().onAfterTransitionIn = function () {
parent.onAfterTransitionIn = function () {
that.bindVariablesClickEvent();
that.bindClickEventToScrollTopButton(parent);
};
parent.onAfterScroll = function (e) {
that.setScrollToTopButton(parent);
};
parent.onBeforeTransitionOut = function () {
that.hideScrollToTopButton(0);
};
},
......
/*global define, addVariableList, variableView */
define(['dojo/_base/declare',
'dojo/dom-style',
'dojo/_base/fx',
'dojo/on',
'dojo/dom',
'dojo/dom-geometry',
'dojo/_base/lang'],
function (declare) {
function (declare, domStyle, fx, on, dom, domGeometry) {
"use strict";
return declare('nesstartouch._VariableMixin', null, {
setVariableListItemProperties: function (variable, callback) {
......@@ -23,6 +28,51 @@ define(['dojo/_base/declare',
return variableObject;
},
hideScrollToTopButton: function (timeout) {
setTimeout(function () {
fx.fadeOut({
node: 'gototop',
onEnd: function (node) {
domStyle.set(node, 'visibility', 'hidden');
}
}).play();
}, timeout);
},
showScrollToTopButton: function (timeout) {
setTimeout(function () {
fx.fadeIn({
node: 'gototop',
onEnd: function (node) {
domStyle.set(node, 'visibility', 'visible');
}
}).play();
}, timeout);
},
setScrollToTopButton: function (parent) {
var self = this;
parent.adjustDestination = function (to, pos, dim) {
//if the scroll destination direction is downward
//and list height is larger than window's height, show the scroll-top button
if (to.y < 0 && dim.v.h < dim.c.h + 50) {
self.showScrollToTopButton(200);
//hide it 2.5s later
self.hideScrollToTopButton(2500);
} else {
self.hideScrollToTopButton(200);
}
};
},
bindClickEventToScrollTopButton: function (view) {
var self = this;
on(dom.byId('gototop'), 'click', function () {
view.scrollTo({x: 0, y: 0}, false);
self.hideScrollToTopButton(0);
});
},
placeVariableOnDimensionCallback: function (e) {
var listItem = addVariableList.setVariableListItemProperties(this.variable, undefined),
targetDimension = window.nesstartouch.variableType || 'none',
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment