From b6fa769ba1cb1769c4a0e4716dc6b3ef28a6e085 Mon Sep 17 00:00:00 2001
From: juliandescottes <julian.descottes@gmail.com>
Date: Sat, 4 Feb 2017 14:09:27 +0100
Subject: [PATCH] temporary fix for layerlist scroll

---
 src/js/controller/LayersListController.js   |  8 +++++-
 src/js/lib/scrollifneeded/scrollifneeded.js | 27 +++++++++++++++++++++
 src/piskel-script-list.js                   |  1 +
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 src/js/lib/scrollifneeded/scrollifneeded.js

diff --git a/src/js/controller/LayersListController.js b/src/js/controller/LayersListController.js
index 4e9b6883..80663209 100644
--- a/src/js/controller/LayersListController.js
+++ b/src/js/controller/LayersListController.js
@@ -27,15 +27,21 @@
   };
 
   ns.LayersListController.prototype.renderLayerList_ = function () {
+    // Backup scroll before refresh.
+    var scrollTop = this.layersListEl.scrollTop;
+
     this.layersListEl.innerHTML = '';
     var layers = this.piskelController.getLayers();
     layers.forEach(this.addLayerItem.bind(this));
     this.updateButtonStatus_();
 
+    // Restore scroll
+    this.layersListEl.scrollTop = scrollTop;
+
     // Ensure the currently the selected layer is visible.
     var currentLayerEl = this.layersListEl.querySelector('.current-layer-item');
     if (currentLayerEl) {
-      currentLayerEl.scrollIntoView();
+      currentLayerEl.scrollIntoViewIfNeeded(false);
     }
   };
 
diff --git a/src/js/lib/scrollifneeded/scrollifneeded.js b/src/js/lib/scrollifneeded/scrollifneeded.js
new file mode 100644
index 00000000..3b39011f
--- /dev/null
+++ b/src/js/lib/scrollifneeded/scrollifneeded.js
@@ -0,0 +1,27 @@
+if (!Element.prototype.scrollIntoViewIfNeeded) {
+  Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) {
+    centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded;
+
+    var parent = this.parentNode,
+        parentComputedStyle = window.getComputedStyle(parent, null),
+        parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width')),
+        parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width')),
+        overTop = this.offsetTop - parent.offsetTop < parent.scrollTop,
+        overBottom = (this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth) > (parent.scrollTop + parent.clientHeight),
+        overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft,
+        overRight = (this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth),
+        alignWithTop = overTop && !overBottom;
+
+    if ((overTop || overBottom) && centerIfNeeded) {
+      parent.scrollTop = this.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + this.clientHeight / 2;
+    }
+
+    if ((overLeft || overRight) && centerIfNeeded) {
+      parent.scrollLeft = this.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + this.clientWidth / 2;
+    }
+
+    if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
+      this.scrollIntoView(alignWithTop);
+    }
+  };
+}
\ No newline at end of file
diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js
index e3199d2a..61d7cf2c 100644
--- a/src/piskel-script-list.js
+++ b/src/piskel-script-list.js
@@ -54,6 +54,7 @@
   // JSZip https://github.com/Stuk/jszip
   "js/lib/jszip/jszip.min.js",
 
+  "js/lib/scrollifneeded/scrollifneeded.js",
   // Smoothscroll: https://github.com/iamdustan/smoothscroll
   "js/lib/smoothscroll/smoothscroll.js",