Merge branch 'feature-dynamic_resizing' into development

labjack · Jan 14, 2025 · e55698d · e55698d
2 parents 524f745 + a834230
commit e55698d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/templates/scribe_postfix.html b/templates/scribe_postfix.html
@@ -17,6 +17,23 @@
                     });
                     return false;
                 });
+
+                // notifies parent element of calculated size of SRL element.
+                // Only the height is important, do we bother with the width?
+                function notifyParentOfSize() {
+                    const width = document.body.scrollWidth;
+                    const height = document.body.scrollHeight;
+
+                    window.parent.postMessage(
+                        { type: 'resize', width, height },
+                        '*'
+                    );
+                    console.warn("notifyParentOfSize", width, height);
+                }
+
+                // Notify parent of the size initially and on window resize
+                notifyParentOfSize();
+                window.addEventListener('resize', notifyParentOfSize);
             });
         </script>
     </body>

diff --git a/templates/tag_summary_template.html b/templates/tag_summary_template.html
@@ -194,11 +194,11 @@ <h5 class="tag-title">{{ tags[0][0].title }}</h5>
       </thead>
       <tbody>
          {% for (orig_subtag, subtag) in tags %}
-         <tr class="class-summary expand" onclick="hideDetails('{{subtag.resolved[0].address}}','{{subtag.resolved[0].address}}IMG')">
+         <tr class="class-summary expand" onclick="hideDetails(event,'{{subtag.resolved[0].address}}','{{subtag.resolved[0].address}}IMG')">
             <td >
                <p class="shortdes" >
-                  <a onclick="hideDetails('{{subtag.resolved[0].address}}','{{subtag.resolved[0].address}}IMG')">
-                  <img src="https://ljsimpleregisterlookup.herokuapp.com/static/images/details_open.png" id="{{subtag.resolved[0].address}}IMG" onclick="hideDetails('{{subtag.resolved[0].address}}','{{subtag.resolved[0].address}}IMG')"></a>
+                  <a onclick="hideDetails(event,'{{subtag.resolved[0].address}}','{{subtag.resolved[0].address}}IMG')">
+                  <img src="https://ljsimpleregisterlookup.herokuapp.com/static/images/details_open.png" id="{{subtag.resolved[0].address}}IMG" onclick="hideDetails(event,'{{subtag.resolved[0].address}}','{{subtag.resolved[0].address}}IMG')"></a>
                   {{ get_full_name(orig_subtag) }} &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; 
                   <span id="{{subtag.resolved[0].address}}SPN"> {{ subtag.resolved[0].description  }}</span>
                </p>
@@ -230,22 +230,32 @@ <h5 class="tag-title">{{ tags[0][0].title }}</h5>
    </table>
 </div>
 <script>
-   function hideDetails(id, imgid) {
+   function hideDetails(event, id, imgid) {
+   event.stopPropagation(); // Prevents the event from bubbling up
    var x = document.getElementById(id);
    var buttonimg = document.getElementById(imgid);
    var span = id + "SPN";
    span = document.getElementById(span);
    if (x.style.display === "none") {
        x.style.display = "block";
        span.style.display = "none";
-       buttonimg.src = "http://ljsimpleregisterlookup.herokuapp.com/static/images/details_close.png"
+       buttonimg.src = "https://ljsimpleregisterlookup.herokuapp.com/static/images/details_close.png"
    } else {
        x.style.display = "none";
        span.style.display = "inline";
        buttonimg.src = "https://ljsimpleregisterlookup.herokuapp.com/static/images/details_open.png"
 
    }
+   // Notify parent that table has been expanded for resizing.
+   const width = document.body.scrollWidth;
+   const height = document.body.scrollHeight;
+   window.parent.postMessage(
+      { type: 'toggle-expand', width, height },
+         '*'
+      );
+      console.warn("onClick expand size changed", width, height);
    }
+   //'https://labjack.atlassian.net' // Link for postMessage endpoint domain
 </script>
 {% endif %}
 </body>