Skip to content

Instantly share code, notes, and snippets.

@oconnore

oconnore/arasbm.diff

Created Aug 30, 2013
Embed
What would you like to do?
Rebased Bugzilla 873574 to master
commit 1457958c78ae4db8c5babaeb01fce46d3ccf6c81
Author: arasbm@gmail.com
Date: Fri Aug 30 14:40:35 2013 -0400
bug-873574 - scroll indicators for alarms list - performance improved
performance improvements for alarm list scroll indicators
* limit execution of `showHideScrollIndicators` to one per 150ms
* set threshold for showing and hiding indicators relative to alarm cell height
* remove animation as it is not needed with the new threshold
diff --git a/apps/clock/js/alarm_list.js b/apps/clock/js/alarm_list.js
index 290f2ce..dac795c 100644
--- a/apps/clock/js/alarm_list.js
+++ b/apps/clock/js/alarm_list.js
@@ -7,6 +7,8 @@ var AlarmList = {
alarmList: [],
refreshingAlarms: [],
_previousAlarmCount: 0,
+ _scrollTimeoutID: 0,
+ _scrollThreshold: 0,
get alarms() {
delete this.alarms;
@@ -23,6 +25,48 @@ var AlarmList = {
return this.newAlarmButton = document.getElementById('alarm-new');
},
+ showHideScrollIndicators: function al_showHideScrollIndicators() {
+ this._scrollTimeoutID = 0;
+ var element = this.alarms;
+ var hasTop = element.classList.contains('scroll-up');
+ var hasDown = element.classList.contains('scroll-down');
+
+ if (!this._scrollThreshold) {
+ var alarmCell = document.querySelector('.alarm-cell');
+ if (alarmCell) {
+ this._scrollThreshold =
+ alarmCell.getBoundingClientRect().height * 3 / 5;
+ }
+ }
+
+ if (element.scrollTop < this._scrollThreshold) {
+ if (hasTop) {
+ element.classList.remove('scroll-up');
+ }
+ } else {
+ if (!hasTop) {
+ element.classList.add('scroll-up');
+ }
+ }
+
+ if (element.scrollTop > element.scrollTopMax - this._scrollThreshold) {
+ if (hasDown) {
+ element.classList.remove('scroll-down');
+ }
+ } else {
+ if (!hasDown) {
+ element.classList.add('scroll-down');
+ }
+ }
+ },
+
+ handleScrollEvent: function al_handleScrollEvent() {
+ if (!this._scrollTimeoutID) {
+ this._scrollTimeoutID = setTimeout(
+ this.showHideScrollIndicators.bind(this), 150);
+ }
+ },
+
handleEvent: function al_handleEvent(evt) {
var link = evt.target;
@@ -59,6 +103,8 @@ var AlarmList = {
init: function al_init() {
this.newAlarmButton.addEventListener('click', this);
this.alarms.addEventListener('click', this);
+ this.alarms.addEventListener('scroll',
+ this.handleScrollEvent.bind(this));
this.refresh();
AlarmManager.regUpdateAlarmEnableState(this.refreshItem.bind(this));
},
@@ -137,6 +183,7 @@ var AlarmList = {
var index = this.refreshingAlarms.indexOf(alarm.id);
this.refreshingAlarms.splice(index, 1);
}
+ this.showHideScrollIndicators();
},
fillList: function al_fillList(alarmDataList) {
@@ -156,6 +203,7 @@ var AlarmList = {
// prepend the rendered alarm to the alarm list
this.createItem(alarm, this.alarms);
}.bind(this));
+ this.showHideScrollIndicators();
},
getAlarmFromList: function al_getAlarmFromList(id) {
diff --git a/apps/clock/style/alarm.css b/apps/clock/style/alarm.css
index e4a349b..0d80edd 100755
--- a/apps/clock/style/alarm.css
+++ b/apps/clock/style/alarm.css
@@ -85,6 +85,7 @@ body.hidden #alarm-view {
}
/* ----------- Alarm List ---------- */
+
#alarms {
width: 90%;
height: auto;
@@ -97,6 +98,40 @@ body.hidden #alarm-view {
background-image: none;
}
+ul#alarms:before {
+ content: '';
+ pointer-events: none;
+ background: -moz-linear-gradient(bottom, rgba(16, 17, 17, 0) 0%, rgba(16, 17, 17, 1) 100%);
+ position: fixed;
+ width: 100%;
+ margin-left: -1.5em;
+ z-index: 10;
+ height: 6em;
+ margin-left: -1.5em;
+ opacity: 0;
+}
+
+ul#alarms.scroll-up:before {
+ opacity: 1;
+}
+
+ul#alarms:after {
+ content: '';
+ pointer-events: none;
+ background: -moz-linear-gradient(top, rgba(16, 17, 17, 0) 0%, rgba(16, 17, 17, 1) 100%);
+ position: fixed;
+ width: 100%;
+ height: 6em;
+ top: 100%;
+ margin-top: -6em;
+ margin-left: -1.5em;
+ opacity: 0;
+}
+
+ul#alarms.scroll-down:after {
+ opacity: 1;
+}
+
ul#alarms li.alarm-cell { /* 6rem, including a 0.13rem border */
border-top: 1px solid rgba(115, 125, 128, 0.2);
position: relative;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.