SW-724 drop upload either in working area or in design lib directly 2 (mrbeam#1421)

* Make inlineStyle method accessible globally
* Add mutation observer to show spinner in WA

Author: khaledsherkawi

octoprint_mrbeam/__init__.py

@@ -611,6 +611,7 @@ def get_assets(self):
         assets = dict(
             js=[
                 "js/helpers/quick_shape_helper.js",
+                "js/helpers/element_helper.js",
                 "js/helpers/debug_rendering_helper.js",
                 "js/helpers/working_area_helper.js",
                 "js/lib/jquery.tinycolorpicker.js",

octoprint_mrbeam/static/js/helpers/element_helper.js

@@ -0,0 +1,5 @@
+(function ($) {
+    $.fn.inlineStyle = function (prop) {
+        return this.prop("style")[$.camelCase(prop)];
+    };
+})(jQuery);

octoprint_mrbeam/static/js/mother_viewmodel.js

@@ -328,6 +328,31 @@ $(function () {
             self.state._processProgressData = function () {};
         };
 
+        // Mutation Observer to show a spinner in working area when file upload is in progress
+        // since there are no events detecting the start of a the file upload process
+        const uploadProgressMutationNode = document.getElementById("gcode_upload_progress");
+        const uploadProgressMutationConfig = {
+            childList: true,
+            attributes: true,
+            subtree: true,
+        };
+        const uploadProgressMutationCallback = function (mutationsList, uploadProgressObserver) {
+            for (let mutation of mutationsList) {
+                if (OctoPrint.coreui.selectedTab === "#workingarea") {
+                    let width = $(mutation.target).inlineStyle("width");
+                    if (width === "0%") {
+                        $("body").removeClass("activitySpinnerActive");
+                    } else {
+                        $("body").addClass("activitySpinnerActive");
+                    }
+                }
+            }
+        };
+        const uploadProgressObserver = new MutationObserver(uploadProgressMutationCallback);
+        uploadProgressObserver.observe(uploadProgressMutationNode, uploadProgressMutationConfig);
+        // End of Mutation Observer
+
+
         // event fired (once for each file) after onEventFileAdded, but only on upload (not on filecopy)
         self.onEventUpload = async function (payload) {
             // if tab workingarea, place it there (assuming tabs did not change during upload)

octoprint_mrbeam/static/js/mrbeam.js

@@ -673,11 +673,6 @@ $(function () {
         const mutationCallback = function (mutationsList, observer) {
             for (let mutation of mutationsList) {
                 if (mutation.type === "childList") {
-                    (function ($) {
-                        $.fn.inlineStyle = function (prop) {
-                            return this.prop("style")[$.camelCase(prop)];
-                        };
-                    })(jQuery);
                     let modalElement = $(".modal-scrollable");
                     let backDrop = $(".modal-backdrop");
                     if (modalElement.length !== 0) {