feat: refactor widget initialization and enhance logging for color pi…

…cker and save functionality

src/plugins/test.js

@@ -1,77 +1,97 @@
-// Create a basic widget template
-console.log('Creating widget...');
-const widget = document.createElement('div');
-widget.style.position = 'fixed';
-widget.style.top = '10px';
-widget.style.right = '10px';
-widget.style.width = '200px';
-widget.style.height = '100px';
-widget.style.backgroundColor = 'white';
-widget.style.border = '1px solid #ccc';
-widget.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
-widget.style.zIndex = '1000';
-widget.style.display = 'none'; // Initially hidden
+(function() {
+    console.log('test.js is coming..');
 
-// Create a color picker
-const colorPicker = document.createElement('input');
-colorPicker.type = 'color';
-colorPicker.value = '#ffffff'; // Default color
-widget.appendChild(colorPicker);
+    // Function to initialize the widget
+    function initializeWidget() {
+        // Create a basic widget template
+        const widget = document.createElement('div');
+        widget.style.position = 'fixed';
+        widget.style.top = '10px';
+        widget.style.right = '10px';
+        widget.style.width = '200px';
+        widget.style.height = '100px';
+        widget.style.backgroundColor = 'white';
+        widget.style.border = '1px solid #ccc';
+        widget.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
+        widget.style.zIndex = '1000';
+        widget.style.display = 'none'; // Initially hidden
 
-// Create a save button
-const saveButton = document.createElement('button');
-saveButton.innerText = 'Save Changes';
-widget.appendChild(saveButton);
+        // Create a color picker
+        const colorPicker = document.createElement('input');
+        colorPicker.type = 'color';
+        colorPicker.value = '#ffffff'; // Default color
+        widget.appendChild(colorPicker);
+        console.log('Color picker created.');
 
-// Append widget to body
-document.body.appendChild(widget);
+        // Create a save button
+        const saveButton = document.createElement('button');
+        saveButton.innerText = 'Save Changes';
+        widget.appendChild(saveButton);
+        console.log('Save button created.');
 
-// Make the widget draggable
-widget.onmousedown = function(event) {
-    let shiftX = event.clientX - widget.getBoundingClientRect().left;
-    let shiftY = event.clientY - widget.getBoundingClientRect().top;
+        // Append widget to body
+        document.body.appendChild(widget);
+        console.log('Widget appended to the body.');
 
-    function moveAt(pageX, pageY) {
-        widget.style.left = pageX - shiftX + 'px';
-        widget.style.top = pageY - shiftY + 'px';
-    }
+        // Make the widget draggable
+        widget.onmousedown = function(event) {
+            let shiftX = event.clientX - widget.getBoundingClientRect().left;
+            let shiftY = event.clientY - widget.getBoundingClientRect().top;
 
-    function onMouseMove(event) {
-        moveAt(event.pageX, event.pageY);
-    }
+            function moveAt(pageX, pageY) {
+                widget.style.left = pageX - shiftX + 'px';
+                widget.style.top = pageY - shiftY + 'px';
+                console.log(`Widget moved to: (${widget.style.left}, ${widget.style.top})`);
+            }
 
-    document.addEventListener('mousemove', onMouseMove);
+            function onMouseMove(event) {
+                moveAt(event.pageX, event.pageY);
+            }
 
-    widget.onmouseup = function() {
-        document.removeEventListener('mousemove', onMouseMove);
-        widget.onmouseup = null;
-    };
-};
+            document.addEventListener('mousemove', onMouseMove);
 
-widget.ondragstart = function() {
-    return false;
-};
+            widget.onmouseup = function() {
+                document.removeEventListener('mousemove', onMouseMove);
+                widget.onmouseup = null;
+                console.log('Mouse up - stop moving the widget.');
+            };
+        };
 
-// Show widget on element click
-document.addEventListener('click', (event) => {
-    if (event.target.closest('.some-element')) { // Replace with your target element
-        widget.style.display = 'block';
-    }
-});
+        widget.ondragstart = function() {
+            return false;
+        };
 
-// Save changes to localStorage
-saveButton.addEventListener('click', () => {
-    const bgColor = colorPicker.value;
-    document.body.style.backgroundColor = bgColor; // Apply change
-    localStorage.setItem('bgColor', bgColor); // Save to localStorage
-    console.log(`Background color changed to: ${bgColor}`);
-});
+        // Show widget on element click
+        document.addEventListener('click', (event) => {
+            if (event.target.closest('.your-target-element')) { // Replace with your target element
+                widget.style.display = 'block';
+                console.log('Widget displayed.');
+            }
+        });
 
-// Load saved changes on page load
-window.addEventListener('load', () => {
-    const savedColor = localStorage.getItem('bgColor');
-    if (savedColor) {
-        document.body.style.backgroundColor = savedColor;
-        colorPicker.value = savedColor; // Set color picker to saved color
+        // Load saved changes on page load
+        const savedColor = localStorage.getItem('bgColor');
+        if (savedColor) {
+            document.body.style.backgroundColor = savedColor;
+            colorPicker.value = savedColor; // Set color picker to saved color
+            console.log(`Loaded saved background color: ${savedColor}`);
+        } else {
+            console.log('No saved background color found.');
+        }
+
+        // Save changes to localStorage
+        saveButton.addEventListener('click', () => {
+            try {
+                const bgColor = colorPicker.value;
+                document.body.style.backgroundColor = bgColor; // Apply change
+                localStorage.setItem('bgColor', bgColor); // Save to localStorage
+                console.log(`Background color changed to: ${bgColor}`);
+            } catch (error) {
+                console.error('Error saving background color:', error);
+            }
+        });
     }
-});
+
+    // eslint-disable-next-line no-undef
+    squarespace.on('ready', initializeWidget);
+})();