Merge pull request #182 from televator-apps/172-smooth-scrolling

Smooth Scrolling

Author: nbelzer

CHANGELOG.md

@@ -9,6 +9,7 @@ Changelog
 * You can enter insert mode by pressing <kbd>i</kbd> and exit the mode by pressing <kbd>esc</kbd>. Activating either mode will display the HUD.
 * In insert mode Vimari keybindings are disabled (except for <kbd>esc</kbd> which brings you back to normal mode) allowing you to interact with the underlying website.
 * Add `goToFirstInput` action on <kbd>g i</kbd> by default (by [isundaylee](https://github.com/isundaylee)).
+* Add smooth scrolling (based on sVim implementation).
 
 ### 2.0.3 (2019-09-26)
 

Vimari Extension/Info.plist

@@ -30,6 +30,10 @@
 		<string>$(PRODUCT_MODULE_NAME).SafariExtensionHandler</string>
 		<key>SFSafariContentScript</key>
 		<array>
+			<dict>
+				<key>Script</key>
+				<string>svim-scripts.js</string>
+			</dict>
 			<dict>
 				<key>Script</key>
 				<string>SafariExtensionCommunicator.js</string>

Vimari Extension/js/injected.js

@@ -44,16 +44,16 @@ var actionMap = {
         function() { extensionCommunicator.requestTabBackward() },
 
 	'scrollDown':
-		function() { window.scrollBy(0, settings.scrollSize); },
+		function() { customScrollBy(0, settings.scrollSize); },
 
 	'scrollUp':
-		function() { window.scrollBy(0, -settings.scrollSize); },
+		function() { customScrollBy(0, -settings.scrollSize); },
 
 	'scrollLeft':
-		function() { window.scrollBy(-settings.scrollSize, 0); },
+		function() { customScrollBy(-settings.scrollSize, 0); },
 
 	'scrollRight':
-		function() { window.scrollBy(settings.scrollSize, 0); },
+		function() { customScrollBy(settings.scrollSize, 0); },
 
 	'goBack':
 		function() { window.history.back(); },
@@ -71,19 +71,19 @@ var actionMap = {
 	    function() { extensionCommunicator.requestCloseTab(); },
 
 	'scrollDownHalfPage':
-		function() { window.scrollBy(0, window.innerHeight / 2); },
+		function() { customScrollBy(0, window.innerHeight / 2); },
 
 	'scrollUpHalfPage':
-		function() { window.scrollBy(0, window.innerHeight / -2); },
+		function() { customScrollBy(0, window.innerHeight / -2); },
 
 	'goToPageBottom':
-		function() { window.scrollBy(0, document.body.scrollHeight); },
+		function() { customScrollBy(0, document.body.scrollHeight); },
 
 	'goToPageTop':
-		function() { window.scrollBy(0, -document.body.scrollHeight); },
+		function() { customScrollBy(0, -document.body.scrollHeight); },
 
 	'goToFirstInput':
-		function() { goToFirstInput(); },
+		function() { goToFirstInput(); }
 };
 
 // Inspiration and general algorithm taken from sVim.
@@ -134,7 +134,7 @@ function goToFirstInput() {
   if (inputToFocus !== null) {
     inputToFocus.focus();
   }
-};
+}
 
 // Meant to be overridden, but still has to be copy/pasted from the original...
 Mousetrap.prototype.stopCallback = function(e, element, combo) {

Vimari Extension/js/lib/svim-scripts.js

@@ -0,0 +1,47 @@
+/*
+ * Code in this file is taken from sVim, it has been adjusted to
+ * work with Vimari.
+ * Assumes global variable: settings.
+ */
+
+let animationFrame = null;
+
+function customScrollBy(x, y) {
+    // If smooth scroll is off then use regular scroll
+    if (settings == undefined || settings.smoothScroll === undefined || !settings.smoothScroll) {
+        window.scrollBy(x, y);
+        return;
+    }
+    window.cancelAnimationFrame(animationFrame);
+
+    // Smooth scroll
+    let i = 0;
+    let delta = 0;
+
+    // Ease function
+    function easeOutExpo(t, b, c, d) {
+        return c * (-Math.pow(2, -10 * t / d) + 1) + b;
+    }
+
+    // Animate the scroll
+    function animLoop() {
+        const toScroll = Math.round(easeOutExpo(i, 0, y, settings.scrollDuration) - delta);
+        if (toScroll !== 0) {
+            if (y) {
+                window.scrollBy(0, toScroll);
+            } else {
+                window.scrollBy(toScroll, 0);
+            }
+        }
+
+        if (i < this.settings.scrollDuration) {
+            animationFrame = window.requestAnimationFrame(animLoop);
+        }
+
+        delta = easeOutExpo(i, 0, (x || y), settings.scrollDuration);
+        i += 1;
+    }
+
+    // Start scroll
+    animLoop();
+}

Vimari Extension/json/defaultSettings.json

@@ -5,6 +5,8 @@
   "scrollSize": 50,
   "openTabUrl": "https://duckduckgo.com/",
   "modifier": "",
+  "smoothScroll": true,
+  "scrollDuration": 25,
   "bindings": {
       "hintToggle": "f",
       "newTabHintToggle": "shift+f",

Vimari.xcodeproj/project.pbxproj

@@ -7,6 +7,7 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		659033F124E2B77400432D0E /* svim-scripts.js in Resources */ = {isa = PBXBuildFile; fileRef = 659033F024E2B77400432D0E /* svim-scripts.js */; };
 		65E444F324CC3A1B008EA1DC /* SafariExtensionCommunicator.js in Resources */ = {isa = PBXBuildFile; fileRef = 65E444F224CC3A1B008EA1DC /* SafariExtensionCommunicator.js */; };
 		B1E3C17023A65ED400A56807 /* ConfigurationModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = B1E3C16F23A65ED400A56807 /* ConfigurationModel.swift */; };
 		B1FD3B9923A588DE00677A52 /* defaultSettings.json in Resources */ = {isa = PBXBuildFile; fileRef = B1FD3B9823A588DE00677A52 /* defaultSettings.json */; };
@@ -57,6 +58,7 @@
 /* End PBXCopyFilesBuildPhase section */
 
 /* Begin PBXFileReference section */
+		659033F024E2B77400432D0E /* svim-scripts.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "svim-scripts.js"; sourceTree = "<group>"; };
 		65E444F224CC3A1B008EA1DC /* SafariExtensionCommunicator.js */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.javascript; path = SafariExtensionCommunicator.js; sourceTree = "<group>"; };
 		B1E3C16F23A65ED400A56807 /* ConfigurationModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ConfigurationModel.swift; sourceTree = "<group>"; };
 		B1FD3B9823A588DE00677A52 /* defaultSettings.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = defaultSettings.json; sourceTree = "<group>"; };
@@ -188,6 +190,7 @@
 		E380F27D233183EE00640547 /* lib */ = {
 			isa = PBXGroup;
 			children = (
+				659033F024E2B77400432D0E /* svim-scripts.js */,
 				E380F27E233183EE00640547 /* mousetrap.js */,
 				E380F27F233183EE00640547 /* vimium-scripts.js */,
 			);
@@ -297,6 +300,7 @@
 			files = (
 				E380F26C2331806500640547 /* ToolbarItemIcon.pdf in Resources */,
 				B1FD3B9923A588DE00677A52 /* defaultSettings.json in Resources */,
+				659033F124E2B77400432D0E /* svim-scripts.js in Resources */,
 				65E444F324CC3A1B008EA1DC /* SafariExtensionCommunicator.js in Resources */,
 				E380F28B233183EF00640547 /* injected.css in Resources */,
 				E380F285233183EF00640547 /* injected.js in Resources */,