Merge pull request #97 from jiteshjha/repository-refactoring

Preloading-images-blocks-palettes-ds_files

3 files changed, 84 insertions, 44 deletions

diff --git a/dependencies.js b/dependencies.js
index 17c2184..5edd328 100644
--- a/dependencies.js
+++ b/dependencies.js
@@ -1,23 +1,28 @@
-var dir = ["data_structures_correct"];
-var fileextension = ".";
+$.getScript('math.js');
 
-var script = document.createElement("script");
-                script.src = "math.js";
-                document.head.appendChild(script);
-$.each(dir, function(index, value) {
-    $.ajax({ // http://stackoverflow.com/a/18480589
-        url: value,
-        success: function(data) {
-            $(data).find("a:contains(" + fileextension + ")").each(function() {
-                var filename = this.href.replace(window.location.host, "");
-                filename = filename.replace("https://", value);
-                filename = filename.replace("http://", value);
-                var script = document.createElement("script");
-                script.src = filename;
-                document.head.appendChild(script);
-            });
-        }
-    });
+$.ajax({
+    type: "POST",
+
+    // Invoke filenames.php
+    url: "filenames.php",
+
+    // Receive the resultant filenames from the php script in JSON format
+    dataType: "json",
+
+    // Add url for the required folder
+    data: {
+      url: "/data_structures_correct/"
+    },
+    success: function (data) {
+
+      /*
+       * @Parameter: data will have the required filenames in the mentioned folder
+       * For each url, add the script to the body div element with getScript function
+       */
+      for (i in data) {
+          $.getScript(data[i]);
+      }
+    }
 });
 
 function AfficheBlock() {
diff --git a/filenames.php b/filenames.php
new file mode 100644
index 0000000..81ca89f
--- /dev/null
+++ b/filenames.php
@@ -0,0 +1,27 @@
+<?php
+
+/*
+ * @jiteshjha
+ * filenames.php returns the names of all the files in a given folder
+ */
+
+// Store the filenames
+$filenameArray = [];
+
+// Get the folder to be operated
+$url = $_POST['url'];
+
+// Reference: http://php.net/manual/en/function.opendir.php
+// Open the file directory and get the filehandle
+$handle = opendir(dirname(realpath(__FILE__)).$url);
+
+// For each file in the folder, push the filename to filenameArray
+while($file = readdir($handle)){
+    if($file !== '.' && $file !== '..'){
+        array_push($filenameArray, "$url$file");
+    }
+}
+
+// Return the file name array in JSON format
+echo json_encode($filenameArray);
+?>
diff --git a/index.html b/index.html
index ab55f38..9b464e8 100644
--- a/index.html
+++ b/index.html
@@ -412,13 +412,13 @@
                 // @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
                 // https://jgraph.github.io/mxgraph/docs/js-api/files/model/mxCell-js.html
                 // Uncomment this block to see XML tags work
-                /*graph.convertValueToString = function(cell)
+                graph.convertValueToString = function(cell)
                 {
                   if (mxUtils.isNode(cell.value))
                   {
                     return cell.getAttribute('label', '');
                   }
-                };*/
+                };
 
                 var cellLabelChanged = graph.cellLabelChanged;
                 graph.cellLabelChanged = function(cell, newValue, autoSize) {
@@ -2142,32 +2142,40 @@
 </body>
 <!-- It's good if this part happens after the entire page has loaded-->
 <script type="text/javascript">
+
     // Preload all images
-    var dir = ["blocks", "images"];
-    var fileextension = ".";
-    var blockImages = [];
-    $.each(dir, function(index, value) {
-        $.ajax({ // http://stackoverflow.com/a/18480589
-            url: value,
-            success: function(data) {
-                $(data).find("a:contains(" + fileextension + ")").each(function() {
-                    var filename = this.href.replace(window.location.host, "");
-                    filename = filename.replace("https://", value);
-                    filename = filename.replace("http://", value);
-                    blockImages.push(filename);
-                });
-                // Prevent multi-threading and have function within call!
-                function preload(sources) {
-                    var images = [];
-                    for (var i = 0, length = sources.length; i < length; ++i) {
-                        images[i] = new Image();
-                        images[i].src = sources[i];
-                    }
+    var directory = ["/blocks/", "/images/", "/palettes/"];
+    for(folder in directory) {
+      $.ajax({
+          type: "POST",
+
+          // Invoke filenames.php
+          url: "filenames.php",
+
+          // Receive the resultant filenames from the php script in JSON format
+          dataType: "json",
+
+          // Add url for the required folder
+          data: {
+            url: directory[folder]
+          },
+          success: function (data) {
+            function preload(sources) {
+
+                /*
+                 * @Parameter: sources will have the required filenames in the mentioned folder
+                 * For each image url, make a new image to enable preloading
+                 */
+                for (i in sources) {
+                    var image = new Image();
+                    image.src = sources[i];
                 }
-                preload(blockImages);
             }
-        });
-    });
+            preload(data);
+          }
+      });
+    }
+
     //Find out more here: http://stackoverflow.com/questions/12843418/jquery-ui-accordion-expand-collapse-all
     $(window).load(function() {
         var headers = $('#sidebarContainer .accordion-header');