.

Author: Tanathy

README.md

@@ -155,6 +155,7 @@ While VulpiniQ is inspired by jQuery, it distinguishes itself in several key are
 | removeData | Prototype | Data Manipulation | Removes a data\-\* attribute from each node\. |
 | removeProp | Prototype | Property Manipulation | Removes a property from each node\. |
 | removeTransition | Prototype | Display | Removes the transition from each node\. |
+| replaceWith | Ext | DOM Manipulation | Replaces the selected element\(s\) with the given new content \(Q instance or DOM node\)\. |
 | scrollHeight | Prototype | Dimensions | Returns the scroll height of the first node\. Returns undefined for empty selection\. |
 | scrollLeft | Prototype | Scroll Manipulation | Gets or sets the horizontal scroll position of the first node, with an option to increment\. Returns undefined for empty selection\. |
 | scrollTop | Prototype | Scroll Manipulation | Gets or sets the vertical scroll position of the first node, with an option to increment\. Returns undefined for empty selection\. |

compiled/Library_Builder.html

@@ -859,6 +859,20 @@ Q.Ext('removeTransition', function () {
     }
     return this;
 });
+Q.Ext('replaceWith', function(newContent) {
+    const nodes = this.nodes;
+    let newNodes = (newContent instanceof Q) ? newContent.nodes : [newContent];
+    for (let i = 0, l = nodes.length; i < l; i++) {
+        const node = nodes[i];
+        if (node && node.parentNode) {
+            for (let j = 0; j < newNodes.length; j++) {
+                node.parentNode.insertBefore(newNodes[j].cloneNode(true), node);
+            }
+            node.parentNode.removeChild(node);
+        }
+    }
+    return this;
+});
 Q.Ext('scrollHeight', function () {
     var node = this.nodes[0];
     return node.scrollHeight;

compiled/VulpiniQ.full.js

@@ -859,6 +859,20 @@ Q.Ext('removeTransition', function () {
     }
     return this;
 });
+Q.Ext('replaceWith', function(newContent) {
+    const nodes = this.nodes;
+    let newNodes = (newContent instanceof Q) ? newContent.nodes : [newContent];
+    for (let i = 0, l = nodes.length; i < l; i++) {
+        const node = nodes[i];
+        if (node && node.parentNode) {
+            for (let j = 0; j < newNodes.length; j++) {
+                node.parentNode.insertBefore(newNodes[j].cloneNode(true), node);
+            }
+            node.parentNode.removeChild(node);
+        }
+    }
+    return this;
+});
 Q.Ext('scrollHeight', function () {
     var node = this.nodes[0];
     return node.scrollHeight;

compiled/VulpiniQ.full.min.js

@@ -0,0 +1,15 @@
+Q.Ext('replaceWith', function(newContent) {
+    // Replace each node in this Q instance with newContent (Q instance or DOM node)
+    const nodes = this.nodes;
+    let newNodes = (newContent instanceof Q) ? newContent.nodes : [newContent];
+    for (let i = 0, l = nodes.length; i < l; i++) {
+        const node = nodes[i];
+        if (node && node.parentNode) {
+            for (let j = 0; j < newNodes.length; j++) {
+                node.parentNode.insertBefore(newNodes[j].cloneNode(true), node);
+            }
+            node.parentNode.removeChild(node);
+        }
+    }
+    return this;
+});

compiled/VulpiniQ.js

@@ -0,0 +1,16 @@
+{
+  "Name": "replaceWith",
+  "Method": "Ext",
+  "Desc": "Replaces the selected element(s) with the given new content (Q instance or DOM node).",
+  "LongDesc": "Adds a replaceWith method to Q, which replaces each node in the Q instance with the provided new content. The new content can be a Q instance or a DOM node. This is useful for dynamic UI updates.",
+  "Type": "DOM Manipulation",
+  "Example": [
+    "Q('.old').replaceWith(Q('<div>New</div>'))",
+    "Q('#item').replaceWith(document.createElement('span'))"
+  ],
+  "Dependencies": ["Q"],
+  "Returns": "Q (for chaining)",
+  "Arguments": [
+    { "name": "newContent", "type": "Q|Element", "desc": "The new content to insert in place of the current node(s)." }
+  ]
+}

compiled/VulpiniQ.min.js

@@ -80,18 +80,22 @@ Container.prototype.Frame = function(options = {}) {
     // --- Új: azonosító és mentés opciók ---
     const frameId = options.id || null;
     const savePosition = !!options.savePosition;
-    const storageKey = options.storageKey;
+    // Rövidített storageKey, ha az alapértelmezett
+    const storageKey = (options.storageKey === 'settings.frames' || !options.storageKey) ? 'set.frame' : options.storageKey;
     const minSize = options.minSize;
     const responsive = !!options.responsive;
     const responsivesMaxCount = options.responsivesMaxCount || 5;
 
+    // Storage instance for frame settings
+    const storageInstance = new Q.Storage();
+
     // Helper: get/set/törlés a localStorage-ból Q.Storage segítségével
     function getSavedFrames() {
-        return Q.Storage(storageKey) || {};
+        return storageInstance.get(storageKey) || {};
     }
     function saveFrames(framesObj) {
         console.log('Saving frames:', framesObj);
-        Q.Storage(storageKey, framesObj);
+        storageInstance.set(storageKey, framesObj);
     }
     function clearFramePos(id) {
         const all = getSavedFrames();
@@ -114,6 +118,10 @@ Container.prototype.Frame = function(options = {}) {
         if (!saved || !Array.isArray(saved) || saved.length === 0) return null;
         for (let i = 0; i < saved.length; ++i) {
             const entry = saved[i];
+            if (entry && typeof entry.ssb === 'number' && entry.ssb === bucket) {
+                return entry;
+            }
+            // visszafelé kompatibilis régi kulcs
             if (entry && typeof entry.screenSizeBucket === 'number' && entry.screenSizeBucket === bucket) {
                 return entry;
             }
@@ -160,7 +168,18 @@ Container.prototype.Frame = function(options = {}) {
         if (savePosition && frameId) {
             const all = getSavedFrames();
             if (all[frameId]) {
-                if (responsive && Array.isArray(all[frameId].responsive)) {
+                // Új rövid kulcsok támogatása
+                if (responsive && Array.isArray(all[frameId].r)) {
+                    savedResponsiveList = all[frameId].r;
+                    const found = findSavedSizeByBucket(savedResponsiveList, currentScreenSizeBucket);
+                    if (found && Array.isArray(found.s) && found.s.length === frameDefs.length) {
+                        savedSizes = found.s;
+                    }
+                } else if (Array.isArray(all[frameId].s) && all[frameId].s.length === frameDefs.length) {
+                    savedSizes = all[frameId].s;
+                }
+                // Visszafelé kompatibilitás a régi kulcsokkal
+                else if (responsive && Array.isArray(all[frameId].responsive)) {
                     savedResponsiveList = all[frameId].responsive;
                     const found = findSavedSizeByBucket(savedResponsiveList, currentScreenSizeBucket);
                     if (found && Array.isArray(found.sizes) && found.sizes.length === frameDefs.length) {
@@ -345,28 +364,28 @@ Container.prototype.Frame = function(options = {}) {
                     if (direction === 'horizontal') {
                         const px = sec.nodes[0].getBoundingClientRect().width;
                         const parentPx = root.nodes[0].clientWidth;
-                        return (px / parentPx * 100) + '%';
+                        return (px / parentPx * 100).toFixed(2) + '%';
                     } else {
                         const px = sec.nodes[0].getBoundingClientRect().height;
                         const parentPx = root.nodes[0].clientHeight;
-                        return (px / parentPx * 100) + '%';
+                        return (px / parentPx * 100).toFixed(2) + '%';
                     }
                 });
                 const all = getSavedFrames();
                 if (responsive) {
                     let responsiveArr = (all[frameId] && Array.isArray(all[frameId].responsive)) ? all[frameId].responsive : [];
                     const screenSizeBucket = getScreenSizeBucket();
                     // Remove any entry with same bucket
-                    responsiveArr = responsiveArr.filter(entry => entry.screenSizeBucket !== screenSizeBucket);
+                    responsiveArr = responsiveArr.filter(entry => entry.ssb !== screenSizeBucket);
                     // Limit to responsivesMaxCount - 1 before push (so after push it's max)
                     if (responsiveArr.length >= responsivesMaxCount) {
                         // Remove the oldest (first) entry
                         responsiveArr.shift();
                     }
-                    responsiveArr.push({ screenSizeBucket, sizes });
-                    all[frameId] = { responsive: responsiveArr };
+                    responsiveArr.push({ ssb: screenSizeBucket, s: sizes });
+                    all[frameId] = { r: responsiveArr };
                 } else {
-                    all[frameId] = { sizes };
+                    all[frameId] = { s: sizes };
                 }
                 saveFrames(all);
             }