From 2d7dd0decabb447da339e5cf7c838eeb2ced3808 Mon Sep 17 00:00:00 2001
From: "duaraghav8@gmail" <duaraghav8@gmail.com>
Date: Thu, 26 May 2016 10:42:03 +0530
Subject: [PATCH] Added scrolling in Files Bar

---
 css/stylesheet.css | 12 +++++++++++
 js/script.js       | 50 +++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/css/stylesheet.css b/css/stylesheet.css
index dc7f762..49529eb 100644
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@@ -220,6 +220,18 @@ section {
     height: 30px;
 }
 
+.files_bar_right_button {
+    height: 30px;
+    float: right;
+    position: relative;
+}
+
+.files_bar_left_button {
+    height: 30px;
+    float: left;
+    position: relative;
+}
+
 .files_bar {
     height: 30px;
 }
diff --git a/js/script.js b/js/script.js
index 3193b27..5b97fe3 100644
--- a/js/script.js
+++ b/js/script.js
@@ -151,22 +151,58 @@ var showAlgorithm = function(category, algorithm) {
     codeEditor.setValue('');
 };
 var showFiles = function(category, algorithm, files) {
-    $('.files_bar').empty();
-    var init = false;
-    for (var file in files) {
-        (function(file, explanation) {
-            var $file = $('<button>').append(file).click(function() {
+    var maxButtonCount = 3, fileNames = Object.keys (files), lastFile = -1;
+        var init = false;
+        var currentFileBarButtons = [];
+
+        function addFileButton (file, explanation) {
+            var $file = $('<button>').append(file).click(function () {
                 loadFile(category, algorithm, file, explanation);
                 $('.files_bar > button').removeClass('active');
                 $(this).addClass('active');
             });
             $('.files_bar').append($file);
+            currentFileBarButtons.push ($file);
+
             if (!init) {
                 init = true;
                 $file.click();
             }
-        })(file, files[file]);
-    }
+        }
+
+        function clearFileBar () {
+            currentFileBarButtons.forEach (function (f) {
+                f.remove ();
+            });
+        }
+
+        $('.files_bar').empty();
+
+        var $nextButton = $('<button>').append ('<b>&gt;</b>').addClass ('files_bar_right_button').click (function () {
+            if (lastFile >= fileNames.length) { return; }
+            clearFileBar ();    //first, remove the previously visible buttons
+
+            init = false;
+            fileNames.slice (lastFile+1, lastFile+1+maxButtonCount).forEach (function (file) {
+                file && addFileButton (file, files [file]);
+            });
+            lastFile += maxButtonCount;
+        });
+        $ ('.files_bar').append ($nextButton);
+
+        var $prevButton = $('<button>').append ('<b>&lt;</b>').addClass ('files_bar_left_button').click (function () {
+            if (lastFile === maxButtonCount-1) { return; }
+
+            clearFileBar ();    //first, remove the previously visible buttons
+            lastFile -= maxButtonCount;
+            init = false;
+            fileNames.slice (lastFile+1-maxButtonCount, lastFile+1).forEach (function (file) {
+                addFileButton (file, files [file]);
+            });
+        });
+        $ ('.files_bar').append ($prevButton);
+
+        $nextButton.click ();   //initialize the file bar with the First 3 Buttons
 };
 var loadAlgorithm = function(category, algorithm) {
     if (checkLoading()) return;
-- 
GitLab