Added file loading animation

The file download is relatively quick but the there's a freeze or slowdown when dialog is
being shown -- that's why it's not a progress bar. The UI is essentially frozen while the
text is loaded into the edit dialog so there's no good way to do a progress bar.

octoprint_GcodeEditor/__init__.py

@@ -12,6 +12,7 @@ class GcodeEditorPlugin(octoprint.plugin.TemplatePlugin,
     def get_assets(self):
         return dict(
             js=["js/GcodeEditor.js"],
+            css=["css/GcodeEditor.css"]
         )
 
     def get_settings_defaults(self):

octoprint_GcodeEditor/static/css/GcodeEditor.css

@@ -0,0 +1,73 @@
+
+.loading {
+    font-size: 40px;
+    position:   fixed;
+    top:        50%;
+    left:       50%;
+    transform: translate(-50%, -50%);
+}
+
+.loading span {
+    /**
+     * Use the blink animation, which is defined above
+     */
+    animation-name: blink;
+    /**
+     * The animation should take 1.4 seconds
+     */
+    animation-duration: 1.4s;
+    /**
+     * It will repeat itself forever
+     */
+    animation-iteration-count: infinite;
+    /**
+     * This makes sure that the starting style (opacity: .2)
+     * of the animation is applied before the animation starts.
+     * Otherwise we would see a short flash or would have
+     * to set the default styling of the dots to the same
+     * as the animation. Same applies for the ending styles.
+     */
+    animation-fill-mode: both;
+}
+
+.loading span:nth-child(2) {
+    /**
+     * Starts the animation of the third dot
+     * with a delay of .2s, otherwise all dots
+     * would animate at the same time
+     */
+    animation-delay: .2s;
+}
+
+.loading span:nth-child(3) {
+    /**
+     * Starts the animation of the third dot
+     * with a delay of .4s, otherwise all dots
+     * would animate at the same time
+     */
+    animation-delay: .4s;
+}
+
+@keyframes blink {
+    /**
+     * At the start of the animation the dot
+     * has an opacity of .2
+     */
+    0% {
+      opacity: .2;
+    }
+    /**
+     * At 20% the dot is fully visible and
+     * then fades out slowly
+     */
+    20% {
+      opacity: 1;
+    }
+    /**
+     * Until it reaches an opacity of .2 and
+     * the animation can start again
+     */
+    100% {
+      opacity: .2;
+    }
+}

octoprint_GcodeEditor/static/js/GcodeEditor.js

@@ -23,7 +23,7 @@ $(function() {
         self.maxGcodeSize = ko.observable();
         self.maxGcodeSizeMobile = ko.observable();
 
-        self.saveGcode = function() {
+        self.saveGcode = ko.pureComputed(function() {
             var fName = self._sanitize(self.destinationFilename());
             var gtext = self.gcodeTextArea();
 
@@ -32,7 +32,7 @@ $(function() {
             OctoPrint.files.upload("local", file);
 
             $("#gcode_edit_dialog").modal("hide");
-        }
+        });
 
         self.canSaveGcode = ko.pureComputed(function() {
             return !(self.printerState.isPrinting() && self.printerState.filename() === self.destinationFilename());
@@ -69,6 +69,9 @@ $(function() {
                     "Pragma": "no-cache",
                     "Expires": "0",
                     "Cache-Control": "no-cache, no-store, must-revalidate"
+                },
+                beforeSend: function() {
+                    $('#loading_modal').modal("show");
                 }
             // Done
             }).done(function(data) {
@@ -84,6 +87,10 @@ $(function() {
             });
         }
 
+        $('body').on('shown', '#gcode_edit_dialog', function(e){
+            $('#loading_modal').modal("hide");
+        });
+
         function removeEditButtons() {
             $("#files div.gcode_files div.entry .action-buttons div.btn-mini.editGcode").remove();
         }
@@ -221,61 +228,61 @@ $(function() {
         }
 
         // Get root file path
-		function getRootFilePath() {
-            
+        function getRootFilePath() {
+
             // Initialize entry
             var entry = self.files.listHelper.allItems[0];
-            
+
             // Check if OctoPrint version doesn't use upload folders
             if(entry && !entry.hasOwnProperty("parent")) {
-            
+
                 // Construct root file path
                 var root = {
                     children: {}
                 };
-                
+
                 // Go throguh all entries
                 for(var index in self.files.listHelper.allItems)
-                
+
                     // Add entry to root's children
                     root.children[index] = self.files.listHelper.allItems[index];
-                
+
                 // Return root
                 return root;
             }
-            
+
             // Loop while entry has a parent
             while(entry && entry.hasOwnProperty("parent") && typeof entry["parent"] !== "undefined")
-            
+
                 // Set entry to its parent
                 entry = entry["parent"];
-            
+
             // Return entry
             return entry;
         }
 
         // Get G-code path and name
-		function getGcodePathAndName(entry, gcodeUrl) {
-			
-			// Check if entry is a folder
-			if(entry && entry.hasOwnProperty("children"))
-		
-				// Go through each entry in the folder
-				for(var child in entry.children) {
-			
-					// Check if current child is the specified G-code file
-					var value = getGcodePathAndName(entry.children[child], gcodeUrl);
-					if(typeof value !== "undefined")
-					
-						// Return upload date
-						return value;
-				}
-		
-			// Otherwise check if entry is the specified G-code file
-			else if(entry && entry.hasOwnProperty("name") && entry.refs && entry.refs.hasOwnProperty("download") && entry["refs"]["download"] === gcodeUrl)
-			
-				// Return path and name
-				return (typeof self.files.currentPath !== "undefined" ? "/" : "") + (entry.hasOwnProperty("path") ? entry["path"] : entry["name"]);
+        function getGcodePathAndName(entry, gcodeUrl) {
+
+            // Check if entry is a folder
+            if (entry && entry.hasOwnProperty("children"))
+
+                // Go through each entry in the folder
+                for(var child in entry.children) {
+
+                    // Check if current child is the specified G-code file
+                    var value = getGcodePathAndName(entry.children[child], gcodeUrl);
+                    if(typeof value !== "undefined")
+
+                        // Return upload date
+                        return value;
+                }
+
+            // Otherwise check if entry is the specified G-code file
+            else if(entry && entry.hasOwnProperty("name") && entry.refs && entry.refs.hasOwnProperty("download") && entry["refs"]["download"] === gcodeUrl)
+
+                // Return path and name
+                return (typeof self.files.currentPath !== "undefined" ? "/" : "") + (entry.hasOwnProperty("path") ? entry["path"] : entry["name"]);
         }
 
         // Encode quotes https://github.com/donovan6000/M33-Fio/blob/master/octoprint_m33fio/static/js/m33fio.js#L681

octoprint_GcodeEditor/templates/GcodeEditor.jinja2

@@ -13,7 +13,6 @@
                 <div class="controls">
                     <div class="input-append">
                         <input type="text" data-bind="value: $root.destinationFilename">
-                        <span class="add-on"></span>
                     </div>
                 </div>
             </div>
@@ -34,3 +33,7 @@
         >{{ _('Save') }}</a>
     </div>
 </div>
+
+<div class="hide" id="loading_modal">
+    <div class="loading">Loading<span>.</span><span>.</span><span>.</span></div>
+</div>

setup.py

@@ -14,7 +14,7 @@
 plugin_name = "OctoPrint-GcodeEditor"
 
 # The plugin's version. Can be overwritten within OctoPrint's internal data via __plugin_version__ in the plugin module
-plugin_version = "0.2.4"
+plugin_version = "0.2.5"
 
 # The plugin's description. Can be overwritten within OctoPrint's internal data via __plugin_description__ in the plugin
 # module