js: Deprecated RapidContext.Util.registerSizeConstraints() & resizeEl…

…ements()
baraverkstad · Mar 22, 2024 · f766239 · f766239
1 parent ff9fe65
commit f766239
Show file tree

Hide file tree

Showing 16 changed files with 17 additions and 111 deletions.
diff --git a/src/plugin/system/files/app/admin/app.js b/src/plugin/system/files/app/admin/app.js
@@ -118,11 +118,6 @@ AdminApp.prototype.start = function () {
     MochiKit.Signal.connect(this.ui.procExecResult, "onexpand", this, "_showExecDataExpand");
     MochiKit.Signal.connect(this.ui.procArgForm, "onsubmit", this, "_updateProcArg");
     this.ui.procExecLoading.hide();
-    this.ui.procExecResult.resizeContent = function () {
-        var pos = MochiKit.Style.getElementPosition(this, this.parentNode);
-        var dim = MochiKit.Style.getElementDimensions(this.parentNode);
-        MochiKit.Style.setElementDimensions(this, { w: dim.w - 2, h: dim.h - pos.y - 2 });
-    };
 
     // Batch view
     MochiKit.Signal.connect(this.ui.batchDelete, "onclick", this, "_clearBatch");
@@ -726,7 +721,6 @@ AdminApp.prototype._showProcedure = function () {
     this.ui.procExec.disable();
     this.ui.procBatch.disable();
     this.ui.procExecResult.removeAll();
-    RapidContext.Util.resizeElements(this.ui.procExecResult);
     if (node != null && node.data != null) {
         var cb = (res) => this._callbackShowProcedure(node.data, res);
         this.proc.procRead(node.data).then(cb, cb);
@@ -784,7 +778,6 @@ AdminApp.prototype._callbackShowProcedure = function (procName, res) {
         this.ui.procExec.enable();
         this.ui.procBatch.enable();
         this.ui.procExecResult.removeAll();
-        RapidContext.Util.resizeElements(this.ui.procExecResult);
     }
 };
 

diff --git a/src/plugin/system/files/app/admin/ui.xml b/src/plugin/system/files/app/admin/ui.xml
@@ -301,7 +301,7 @@
         <Tree id="procTree" w="100%" h="100%-2.2em" />
       </div>
       <div w="66.666%" h="100%" class="inline-block vertical-top">
-        <Form id="procForm" class="w-100 h-100">
+        <Form id="procForm" class="flex-col w-100 h-100">
           <h3>
             Procedure Details:
             <Icon id="procAdd" class="fa fa-plus-square color-success ml-1" title="Add procedure" />
@@ -356,7 +356,7 @@
             <Button id="procExec" disabled="true" icon="fa fa-play">Execute</Button>
             <Button id="procBatch" disabled="true" icon="fa fa-lg fa-clock-o">Execute Batch</Button>
           </div>
-          <Tree id="procExecResult" w="100%-2" h="10%" style="margin-top: 6px;">
+          <Tree id="procExecResult" w="100%-2" h="10%" class="flex-fill" style="margin-top: 6px;">
           </Tree>
         </Form>
       </div>

diff --git a/src/plugin/system/files/app/start/app.js b/src/plugin/system/files/app/start/app.js
@@ -161,11 +161,10 @@ StartApp.prototype._initDashboardApp = function (app) {
     var pane = new RapidContext.Widget.Pane(attrs);
     this.ui.inlinePane.insertBefore(pane, this.ui.inlinePane.firstChild);
     if (app.startPage == "left" || app.startPage == "right") {
-        RapidContext.Util.registerSizeConstraints(pane, "50%-3rem-3px");
+        pane.style.width = "calc(50% - 3rem - 3px)";
     } else {
-        RapidContext.Util.registerSizeConstraints(pane, "100%-3rem-3px");
+        pane.style.width = "calc(100% - 3rem - 3px)";
     }
-    RapidContext.Util.resizeElements(pane);
     this.startApp(app.className, pane);
 };
 
@@ -245,7 +244,7 @@ StartApp.prototype.initAppPane = function (pane, opts) {
             "class": "position-relative"
         };
         pane = new RapidContext.Widget.Pane(attrs);
-        RapidContext.Util.registerSizeConstraints(pane, "100%", "100%");
+        pane.style.width = pane.style.height = "100%";
         this.ui.tabContainer.addAll(pane);
         if (!opts.background) {
             this.ui.tabContainer.selectChild(pane);

diff --git a/src/plugin/system/files/css/widget.css b/src/plugin/system/files/css/widget.css
@@ -376,6 +376,8 @@ button > .widgetIcon.fa,
 .widgetTabContainerContent {
     position: relative;
     top: -1px;
+    width: calc(100% - 20px);
+    height: calc(100% - 40px);
     border-top: 1px solid #ddd;
     padding: 10px 10px 0 10px;
     clear: both;

diff --git a/src/plugin/system/files/index.tmpl b/src/plugin/system/files/index.tmpl
@@ -59,7 +59,8 @@
     <script src="%JS_FILES%" defer></script>
     <title>%TITLE%</title>
   </head>
-  <body class="overflow-hidden" style="padding: 10px;" data-app="%APP_ID%">
+  <body class="overflow-hidden" data-app="%APP_ID%"
+        style="width: calc(100% - 20px); height: calc(100% - 20px); padding: 10px;">
     <div id="error" class="hidden" style="margin: 15% auto; width: 50em; text-align: center;">
       <div id="error-unsupported" class="hidden">
         <h1>Browser not supported</h1>

diff --git a/src/plugin/system/files/js/RapidContext.Util.js b/src/plugin/system/files/js/RapidContext.Util.js
@@ -104,7 +104,7 @@ RapidContext.Util.blurAll = function (node) {
  * @param {number|string|function} [width] the width constraint
  * @param {number|string|function} [height] the height constraint
  *
- * @see RapidContext.Util.resizeElements
+ * @deprecated Use CSS width and height with calc() instead.
  *
  * @example
  * RapidContext.Util.registerSizeConstraints(node, "50%-20", "100%");
@@ -122,6 +122,7 @@ RapidContext.Util.registerSizeConstraints = function (node, width, height) {
         val = val.replace(/(\d)( |$)/g, "$1px$2");
         return val;
     }
+    console.warn("deprecated: call to RapidContext.Util.registerSizeConstraints(), use CSS calc() instead");
     node = MochiKit.DOM.getElement(node);
     if (typeof(width) == "number" || typeof(width) == "string") {
         node.style.width = toCSS(String(width));
@@ -157,7 +158,7 @@ RapidContext.Util.registerSizeConstraints = function (node, width, height) {
  *
  * @param {...Node} node the HTML DOM nodes to resize
  *
- * @see RapidContext.Util.registerSizeConstraints
+ * @deprecated Use CSS width and height with calc() instead.
  *
  * @example
  * RapidContext.Util.resizeElements(node);
@@ -168,6 +169,7 @@ RapidContext.Util.registerSizeConstraints = function (node, width, height) {
  * ==> Assigns a no-op child resize handler to elem
  */
 RapidContext.Util.resizeElements = function (/* ... */) {
+    console.warn("deprecated: call to RapidContext.Util.resizeElements(), use CSS calc() instead");
     Array.from(arguments).forEach(function (arg) {
         var node = MochiKit.DOM.getElement(arg);
         if (node && node.nodeType === 1 && node.parentNode && node.sizeConstraints) {

diff --git a/src/plugin/system/files/js/RapidContext_App.js b/src/plugin/system/files/js/RapidContext_App.js
@@ -41,14 +41,9 @@ if (typeof(RapidContext.App) == "undefined") {
  *         either completed or failed
  */
 RapidContext.App.init = function (app) {
-    // Setup libraries
+    // Initialize UI
     RapidContext.Log.context("RapidContext.App.init()");
     console.info("Initializing RapidContext");
-
-    // Setup UI
-    RapidContext.Util.registerSizeConstraints(document.body, "100%-20", "100%-20");
-    var resizer = () => RapidContext.Util.resizeElements(document.body);
-    MochiKit.Signal.connect(window, "onresize", resizer);
     document.body.innerHTML = "";
     document.body.append(new RapidContext.Widget.Overlay({ message: "Loading..." }));
 
@@ -233,7 +228,6 @@ RapidContext.App.startApp = function (app, container) {
         let arr = Array.from(ui.documentElement.childNodes);
         parent.append(...arr.map((o) => RapidContext.UI.create(o)).filter(Boolean));
         parent.querySelectorAll("[id]").forEach((el) => ids[el.attributes.id.value] = el);
-        RapidContext.Util.resizeElements(parent);
     }
     function launch(launcher, ui) {
         RapidContext.Log.context("RapidContext.App.startApp(" + launcher.id + ")");
@@ -284,7 +278,6 @@ RapidContext.App.startApp = function (app, container) {
         var ui = start.initAppPane(null, opts);
         ui.root.removeAll();
         ui.root.addAll(elems);
-        RapidContext.Util.resizeElements(ui.root);
     }
     return new RapidContext.Async(function (resolve, reject) {
         var launcher = RapidContext.App.findApp(app);

diff --git a/src/plugin/system/files/js/RapidContext_Widget_Dialog.js b/src/plugin/system/files/js/RapidContext_Widget_Dialog.js
@@ -46,7 +46,6 @@ RapidContext.Widget = RapidContext.Widget || { Classes: {} };
  * let h1 = MochiKit.DOM.H1({}, "Hello, world!");
  * let attrs = { title: "Hello", modal: true };
  * let helloDialog = RapidContext.Widget.Dialog(attrs, h1);
- * RapidContext.Util.registerSizeConstraints(helloDialog, "200", "75");
  *
  * @example <caption>User Interface XML</caption>
  * <Dialog id="helloDialog" title="Hello" modal="true" w="200" h="75">
@@ -66,7 +65,6 @@ RapidContext.Widget.Dialog = function (attrs/*, ... */) {
     let o = DIV({}, title, close, resize, content);
     RapidContext.Widget._widgetMixin(o, RapidContext.Widget.Dialog);
     o.classList.add("widgetDialog");
-    o.resizeContent = o._resizeContent;
     o._setHidden(true);
     o.setAttrs(Object.assign({ modal: false, system: false, center: true }, attrs));
     o.addAll(Array.from(arguments).slice(1));
@@ -330,7 +328,6 @@ RapidContext.Widget.Dialog.prototype.resizeTo = function (w, h) {
     };
     this.style.width = dim.w + "px";
     this.style.height = dim.h + "px";
-    delete this.sizeConstraints; // FIXME: Remove with RapidContext.Util.registerSizeConstraints
     this.center = false;
     this._resizeContent();
     this.emit("resize", { detail: dim });
@@ -358,7 +355,6 @@ RapidContext.Widget.Dialog.prototype.resizeToContent = function () {
  */
 RapidContext.Widget.Dialog.prototype._resizeContent = function () {
     if (!this.isHidden()) {
-        RapidContext.Util.resizeElements(this.lastChild);
         if (this.center) {
             this.moveToCenter();
         }

diff --git a/src/plugin/system/files/js/RapidContext_Widget_Pane.js b/src/plugin/system/files/js/RapidContext_Widget_Pane.js
@@ -164,7 +164,6 @@ RapidContext.Widget.Pane.prototype._handleEnter = function (opts) {
     }
     if (RapidContext.Data.bool(opts.show)) {
         this.show();
-        RapidContext.Util.resizeElements(this);
     }
     this.emit("enter");
 };

diff --git a/src/plugin/system/files/js/RapidContext_Widget_TabContainer.js b/src/plugin/system/files/js/RapidContext_Widget_TabContainer.js
@@ -59,9 +59,6 @@ RapidContext.Widget.TabContainer = function (attrs/*, ... */) {
     let o = RapidContext.UI.DIV(attrs, labels, container);
     RapidContext.Widget._widgetMixin(o, RapidContext.Widget.TabContainer);
     o.classList.add("widgetTabContainer");
-    RapidContext.Util.registerSizeConstraints(container, "100% - 20", "100% - 40");
-    o.resizeContent = o._resizeContent;
-    container.resizeContent = () => {};
     o._selectedIndex = -1;
     o.setAttrs(attrs);
     o.addAll(Array.from(arguments).slice(1));
@@ -115,7 +112,7 @@ RapidContext.Widget.TabContainer.prototype.addChildNode = function (child) {
     if (!RapidContext.Widget.isWidget(child, "Pane")) {
         child = RapidContext.Widget.Pane(null, child);
     }
-    RapidContext.Util.registerSizeConstraints(child, "100%", "100%");
+    child.style.width = child.style.height = "100%";
     child.hide();
     let text = RapidContext.UI.SPAN({}, child.pageTitle);
     let icon = null;
@@ -215,18 +212,3 @@ RapidContext.Widget.TabContainer.prototype.selectChild = function (indexOrChild)
         children[this._selectedIndex]._handleEnter();
     }
 };
-
-/**
- * Resizes the currently selected child. This method need not be called
- * directly, but is automatically called whenever a parent node is
- * resized. It optimizes the resize chain by only resizing those DOM
- * child nodes that are visible, i.e. the currently selected tab
- * container child.
- */
-RapidContext.Widget.TabContainer.prototype._resizeContent = function () {
-    RapidContext.Util.resizeElements(this.lastChild);
-    let child = this.selectedChild();
-    if (child != null) {
-        RapidContext.Util.resizeElements(child);
-    }
-};
diff --git a/src/plugin/system/files/js/RapidContext_Widget_Table.js b/src/plugin/system/files/js/RapidContext_Widget_Table.js
@@ -46,7 +46,6 @@ RapidContext.Widget = RapidContext.Widget || { Classes: {} };
  * let col2 = RapidContext.Widget.TableColumn(attrs2);
  * let col3 = RapidContext.Widget.TableColumn(attrs3);
  * let exampleTable = RapidContext.Widget.Table({}, col1, col2, col3);
- * RapidContext.Util.registerSizeConstraints(exampleTable, "50%", "100%");
  *
  * @example <caption>User Interface XML</caption>
  * <Table id="exampleTable" w="50%" h="100%">
@@ -62,7 +61,6 @@ RapidContext.Widget.Table = function (attrs/*, ...*/) {
     let o = RapidContext.UI.DIV({}, table);
     RapidContext.Widget._widgetMixin(o, RapidContext.Widget.Table);
     o.classList.add("widgetTable");
-    o.resizeContent = o._resizeContent;
     o._data = [];
     o._rows = [];
     o._keyField = null;
@@ -639,21 +637,3 @@ RapidContext.Widget.Table.prototype._unmarkSelection = function (index) {
         tbody.childNodes[idx].classList.remove("selected");
     }
 };
-
-/**
- * Called when table content should be resized. This method is also called when
- * the widget is made visible in a container after being hidden.
- */
-RapidContext.Widget.Table.prototype._resizeContent = function () {
-    // Work-around to restore scrollTop for WebKit browsers
-    if (this.scrollTop == 0 && this._selected.length > 0) {
-        let index = this._selected[0];
-        let tbody = this.firstChild.lastChild;
-        let tr = tbody.childNodes[index];
-        let h = this.clientHeight;
-        let y = tr.offsetTop + tr.offsetHeight;
-        this.scrollTop = Math.round(y - h / 2);
-    }
-    let thead = this.firstChild.firstChild;
-    RapidContext.Util.resizeElements(thead);
-};
diff --git a/src/plugin/system/files/js/RapidContext_Widget_TableColumn.js b/src/plugin/system/files/js/RapidContext_Widget_TableColumn.js
@@ -59,7 +59,6 @@ RapidContext.Widget = RapidContext.Widget || { Classes: {} };
  * let col2 = RapidContext.Widget.TableColumn(attrs2);
  * let col3 = RapidContext.Widget.TableColumn(attrs3);
  * let exampleTable = RapidContext.Widget.Table({}, col1, col2, col3);
- * RapidContext.Util.registerSizeConstraints(exampleTable, "50%", "100%");
  *
  * @example <caption>User Interface XML</caption>
  * <Table id="exampleTable" w="50%" h="100%">

diff --git a/src/plugin/system/files/js/RapidContext_Widget_TextArea.js b/src/plugin/system/files/js/RapidContext_Widget_TextArea.js
@@ -56,7 +56,6 @@ RapidContext.Widget.TextArea = function (attrs/*, ...*/) {
     var o = MochiKit.DOM.TEXTAREA({ value: text });
     RapidContext.Widget._widgetMixin(o, RapidContext.Widget.TextArea);
     o.addClass("widgetTextArea");
-    o.resizeContent = o._resizeContent;
     o.setAttrs(Object.assign({}, attrs, { value: text }));
     o.on("input", o._handleChange);
     return o;
@@ -147,15 +146,6 @@ RapidContext.Widget.TextArea.prototype._handleChange = function (evt) {
     var detail = { before: this.storedValue || "", after: this.value, cause: cause };
     this.emit("change", { detail: detail, bubbles: true });
     this.storedValue = this.value;
-    this._resizeContent();
-};
-
-/**
- * Resizes the text area if auto-sized. This method is automatically
- * called when a dialog is shown (or resized), and is also called if
- * the input is modified.
- */
-RapidContext.Widget.TextArea.prototype._resizeContent = function () {
     if (this.autosize) {
         this.style.height = "auto";
         if (this.scrollHeight > 10) {

diff --git a/src/plugin/system/files/js/RapidContext_Widget_Tree.js b/src/plugin/system/files/js/RapidContext_Widget_Tree.js
@@ -50,7 +50,6 @@ RapidContext.Widget.Tree = function (attrs/*, ...*/) {
     var o = MochiKit.DOM.DIV(attrs);
     RapidContext.Widget._widgetMixin(o, RapidContext.Widget.Tree);
     o.classList.add("widgetTree");
-    o.resizeContent = o._resizeContent;
     o.selectedPath = null;
     o.setAttrs(attrs);
     o.addAll(Array.from(arguments).slice(1));
@@ -298,17 +297,3 @@ RapidContext.Widget.Tree.prototype.addPath = function (path) {
     }
     return node;
 };
-
-/**
- * Called when tree content should be resized. This method is also called when
- * the widget is made visible in a container after being hidden.
- */
-RapidContext.Widget.Tree.prototype._resizeContent = function () {
-    // Work-around to restore scrollTop for WebKit browsers
-    if (this.scrollTop == 0 && this.selectedPath) {
-        var node = this.selectedChild();
-        var h = this.clientHeight;
-        var y = node.offsetTop + node.offsetHeight;
-        this.scrollTop = Math.round(y - h / 2);
-    }
-};
diff --git a/src/plugin/system/files/js/RapidContext_Widget_Wizard.js b/src/plugin/system/files/js/RapidContext_Widget_Wizard.js
@@ -42,7 +42,6 @@ RapidContext.Widget = RapidContext.Widget || { Classes: {} };
  * let attrs = { style: { width: "100%", height: "100%" } };
  * let exampleWizard = RapidContext.Widget.Wizard(attrs, page1, page2);
  * let exampleDialog = RapidContext.Widget.Dialog({ title: "Example Dialog" }, exampleWizard);
- * RapidContext.Util.registerSizeConstraints(exampleDialog, "80%", "50%");
  *
  * @example <caption>User Interface XML</caption>
  * <Dialog id="exampleDialog" title="Example Dialog" w="80%" h="50%">
@@ -60,7 +59,6 @@ RapidContext.Widget.Wizard = function (attrs/*, ... */) {
     let o = MochiKit.DOM.DIV(attrs);
     RapidContext.Widget._widgetMixin(o, RapidContext.Widget.Wizard);
     o.addClass("widgetWizard");
-    o.resizeContent = o._resizeContent;
     o._selectedIndex = -1;
     o.append(MochiKit.DOM.H3({ "class": "widgetWizardTitle" }));
     let bCancel = RapidContext.Widget.Button(
@@ -147,7 +145,8 @@ RapidContext.Widget.Wizard.prototype.addChildNode = function (child) {
     if (!RapidContext.Widget.isWidget(child, "Pane")) {
         child = RapidContext.Widget.Pane(null, child);
     }
-    RapidContext.Util.registerSizeConstraints(child, "100%", "100%-65");
+    child.style.width = "100%";
+    child.style.height = "calc(100% - 65px)";
     child.hide();
     this.append(child);
     child.style.position = "absolute";
@@ -331,16 +330,3 @@ RapidContext.Widget.Wizard.prototype.done = function () {
     }
     this.emit("close");
 };
-
-/**
- * Resizes the current wizard page. This method need not be called
- * directly, but is automatically called whenever a parent node is
- * resized. It optimizes the resize chain by only resizing those DOM
- * child nodes that are visible.
- */
-RapidContext.Widget.Wizard.prototype._resizeContent = function () {
-    let page = this.activePage();
-    if (page != null) {
-        RapidContext.Util.resizeElements(page);
-    }
-};
diff --git a/src/plugin/test/files/app/example/app.js b/src/plugin/test/files/app/example/app.js
@@ -115,7 +115,6 @@ window.ExampleApp = class {
             tr.append(TD({ "class": "end" }));
             this.ui.iconTable.append(tr);
         }
-        this.ui.iconTable.resizeContent = () => {};
     }
 
     // Handles show all icon backgrounds checkbox