From 9f4f7bd9ccba5135d3b413514489bd1ff043c352 Mon Sep 17 00:00:00 2001
From: Liu Xiaoyi <circuitcoder0@gmail.com>
Date: Tue, 3 Mar 2020 01:21:46 +0800
Subject: [PATCH] Rolling with CSS

---
 static/css/style.scss | 51 +++++++++++++++++++++++++
 static/js/status.es6  | 88 +++++++++++++++++++------------------------
 status.html           | 12 +++---
 3 files changed, 96 insertions(+), 55 deletions(-)

diff --git a/static/css/style.scss b/static/css/style.scss
index 3bc4973..0f5a37d 100644
--- a/static/css/style.scss
+++ b/static/css/style.scss
@@ -446,3 +446,54 @@ body {
     display: none;
 }
 
+
+// Scrolling columns in status page
+.tuna-roll {
+  position: relative;
+  overflow: hidden;
+
+  > div {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+
+    animation-timing-function: ease;
+    animation-duration: .2s;
+    animation-iteration-count: 1;
+  }
+
+  @keyframes tuna-roll-enter {
+    0% {
+      transform: translateY(100%);
+    }
+
+    100% {
+      transform: none;
+    }
+  }
+
+  @keyframes tuna-roll-leave {
+    0% {
+      transform: none;
+    }
+
+    100% {
+      transform: translateY(-100%);
+    }
+  }
+
+  @for $i from 0 to 7 {
+    &[data-tuna-roll-cur="#{$i}"] {
+      > * {
+        animation-name: tuna-roll-leave;
+        transform: translateY(100%);
+      }
+      > [data-tuna-roll-seq~="#{$i}"] {
+        animation-name: tuna-roll-enter;
+        transform: none;
+      }
+    }
+  }
+}
diff --git a/static/js/status.es6 b/static/js/status.es6
index c8cc138..165d9e2 100644
--- a/static/js/status.es6
+++ b/static/js/status.es6
@@ -1,53 +1,43 @@
 ---
 ---
 $(document).ready(() => {
-	function readableFileSize(size) {
-		var units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-		var i = 0;
-		while(size >= 1024) {
-				size /= 1024;
-				++i;
-		}
-		return size.toFixed(1) + ' ' + units[i];
-	}
-	$.get("/static/status/disk.json", (d) => {
-		var used_percent = Math.round(d.used_kb * 100 / d.total_kb);
-		$('#disk-usage-bar')
-			.attr("aria-valuenow", used_percent)
-			.css("width", used_percent + "%")
-			.html("<strong>" + readableFileSize(d.used_kb * 1024) + " / " + readableFileSize(d.total_kb * 1024) + "</strong>");
-	});
-	var step = 0;
-	var resetToZeroHandler = function(e){
-		var $this = $(this);
-		$this.addClass('notrans').css("transform", "translateY(0)");
-		$this.off('transitioncancel.reset');
-		setTimeout(function(){
-			$this.removeClass('notrans');
-		}, 0);
-	}
-	var clearResetHandler = function(e){
-		var $this = $(this);
-		$this.off('transitionend.reset')
-	}
-	setInterval(function(){
-		if($('#mirror-list .hidden-md:not(.hidden-xs):not(.hidden-sm)').css('display') != 'none'){
-			return;
-		}
-		step += 1;
-		var $objs = $('tr:not(:hover):not(:active) > td[class*="rolling-"] > div');
-		$objs.each(function(){
-			var $this = $(this);
-			var index = $this.children('div[data-tuna-roll-seq~="'+step+'"]').index();
-			if(index == -1){
-				return;
-			}
-			$this.css("transform", `translateY(-${index * 100}%)`);
-		});
-		step %= 6;
-		if(step == 0){
-			$objs.one('transitionend.reset', resetToZeroHandler);
-			$objs.one('transitioncancel.reset', clearResetHandler);
-		}
-	}, 2500);
+  function readableFileSize(size) {
+    var units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    var i = 0;
+    while(size >= 1024) {
+      size /= 1024;
+      ++i;
+    }
+    return size.toFixed(1) + ' ' + units[i];
+  }
+  $.get("/static/status/disk.json", (d) => {
+    var used_percent = Math.round(d.used_kb * 100 / d.total_kb);
+    $('#disk-usage-bar')
+      .attr("aria-valuenow", used_percent)
+      .css("width", used_percent + "%")
+      .html("<strong>" + readableFileSize(d.used_kb * 1024) + " / " + readableFileSize(d.total_kb * 1024) + "</strong>");
+  });
+
+  kickstartScroll();
 });
+
+// Scrolling
+
+const SCROLL_INTERVAL = 1000;
+function kickstartScroll() {
+  console.log('Scroll start...');
+  setInterval(doScroll, SCROLL_INTERVAL);
+}
+
+function doScroll() {
+  const targets = $('#mirror-list .row:not(:hover) .tuna-roll');
+  targets.each(function() {
+    const target = $(this);
+    const cur = parseInt(target.attr('data-tuna-roll-cur'), 10);
+    const max = parseInt(target.attr('data-tuna-roll-max'), 10);
+    let next = cur + 1;
+    if(next > max) next = 0;
+
+    target.attr('data-tuna-roll-cur', next);
+  });
+}
diff --git a/status.html b/status.html
index 967dd7d..21303aa 100644
--- a/status.html
+++ b/status.html
@@ -59,15 +59,15 @@ permalink: /status/
 						<td class="col-xs-8 hidden-md hidden-lg" v-else>Syncing Now</td>
 						<td class="hidden-xs hidden-sm hidden-md hidden-lg"></td>
 						<td class="col-md-2 col-xs-3 rolling-3 text-left-md text-right-xs hidden-xs hidden-sm">​
-							<div>
+							<div class="tuna-roll" data-tuna-roll-cur="0" data-tuna-roll-max="6">
 								<template v-if="mir.last_ended_ts == mir.last_update_ts">
 									<div data-tuna-roll-seq="0 1 2 3">Last Successful Sync</div>
 								</template>
 								<template v-else>
-								<div data-tuna-roll-seq="0">Last Successful Sync</div>
-								<div data-tuna-roll-seq="1">Last Attempted Sync</div>
-								<div data-tuna-roll-seq="2">Last Successful Sync</div>
-								<div data-tuna-roll-seq="3">Last Attempted Sync</div>
+                                  <div data-tuna-roll-seq="0">Last Successful Sync</div>
+                                  <div data-tuna-roll-seq="1">Last Attempted Sync</div>
+                                  <div data-tuna-roll-seq="2">Last Successful Sync</div>
+                                  <div data-tuna-roll-seq="3">Last Attempted Sync</div>
 								</template>
 								<div data-tuna-roll-seq="4 5">Next Scheduled Sync</div>
 								<div data-tuna-roll-seq=6>Last Successful Sync</div>
@@ -75,7 +75,7 @@ permalink: /status/
 						</td>
 						<td class="hidden-xs hidden-sm hidden-md hidden-lg"></td>
 						<td class="col-md-2 col-xs-5 rolling-6 hidden-xs hidden-sm">​
-							<div>
+							<div class="tuna-roll" data-tuna-roll-cur="0" data-tuna-roll-max="6">
 								<template v-if="mir.last_ended_ts == mir.last_update_ts">
 									<div data-tuna-roll-seq="0 1">{{mir.last_update}}</div>
 									<div data-tuna-roll-seq="2 3">{{mir.last_update_ago}}</div>