@hpcc-js/layout 3.5.1 → 3.5.4

package/src/Popup.ts

@@ -1,120 +1,120 @@
-import { HTMLWidget, Widget } from "@hpcc-js/common";
-
-export class Popup extends HTMLWidget {
-    _surfaceButtons;
-    _originalPosition;
-
-    constructor() {
-        super();
-        this._tag = "div";
-        this._surfaceButtons = [];
-    }
-
-    updateState(visible) {
-        visible = visible || !this.popupState();
-        this.popupState(visible).render();
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this.widget()
-            .target(domNode)
-            ;
-        this._originalPosition = this.position();
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        element
-            .style("visibility", this.popupState() ? null : "hidden")
-            .style("opacity", this.popupState() ? null : 0)
-            .style("width", this.shrinkWrap() ? this.widget().width() + "px" : this._size.width + "px")
-            .style("height", this.shrinkWrap() ? this.widget().height() + "px" : this._size.height + "px")
-            ;
-        if (this.widget().size().height === 0) {
-            this.widget().resize(this.size());
-        }
-    }
-
-    postUpdate(domNode, element) {
-        let left;
-        let top;
-        switch (this.centerPopup()) {
-            case "container":
-                if (this._placeholderElement) {
-                    left = parseInt(this._placeholderElement.style("width")) / 2 - this.widget().width() / 2;
-                    top = parseInt(this._placeholderElement.style("height")) / 2 - this.widget().height() / 2;
-                }
-                this.position("absolute");
-                break;
-
-            case "window":
-                left = window.innerWidth / 2 - this.widget().width() / 2;
-                top = window.innerHeight / 2 - this.widget().height() / 2;
-                this.position("fixed");
-                break;
-
-            default:
-                left = 0;
-                top = 0;
-                this.position(this._originalPosition);
-                break;
-        }
-
-        this.pos({ x: left, y: top });
-
-        super.postUpdate(domNode, element);
-
-        element
-            .style("position", this.position())
-            .style("left", this.left() + "px")
-            .style("right", this.right() + "px")
-            .style("top", this.top() + "px")
-            .style("bottom", this.bottom() + "px")
-            ;
-    }
-
-    exit(domNode, element) {
-        if (this.widget()) {
-            this.widget().target(null);
-        }
-        super.exit(domNode, element);
-    }
-
-    click(obj) {
-    }
-}
-Popup.prototype._class += " layout_Popup";
-
-export interface Popup {
-    popupState(): boolean;
-    popupState(_: boolean): this;
-    shrinkWrap(): boolean;
-    shrinkWrap(_: boolean): this;
-    centerPopup(): "none" | "container" | "window";
-    centerPopup(_: "none" | "container" | "window"): this;
-    top(): number;
-    top(_: number): this;
-    bottom(): number;
-    bottom(_: number): this;
-    left(): number;
-    left(_: number): this;
-    right(): number;
-    right(_: number): this;
-    position(): string;
-    position(_: string): this;
-
-    widget(): Widget;
-    widget(_: Widget): this;
-}
-
-Popup.prototype.publish("popupState", false, "boolean", "State of the popup, visible (true) or hidden (false)", null, {});
-Popup.prototype.publish("shrinkWrap", false, "boolean", "The popup parent container either shrinks to the size of its contents (true) or expands to fit thge popup's parentDiv (false)", null, {});
-Popup.prototype.publish("centerPopup", "none", "set", "Center the widget in its container element (target) or in the window", ["none", "container", "window"], {});
-Popup.prototype.publish("top", null, "number", "Top position property of popup", null, {});
-Popup.prototype.publish("bottom", null, "number", "Bottom position property of popup", null, {});
-Popup.prototype.publish("left", null, "number", "Left position property of popup", null, {});
-Popup.prototype.publish("right", null, "number", "Right position property of popup", null, {});
-Popup.prototype.publish("position", "relative", "set", "Value of the 'position' property", ["absolute", "relative", "fixed", "static", "initial", "inherit"], { tags: ["Private"] });
-
-Popup.prototype.publish("widget", null, "widget", "Widget", null, { tags: ["Private"] });
+import { HTMLWidget, Widget } from "@hpcc-js/common";
+
+export class Popup extends HTMLWidget {
+    _surfaceButtons;
+    _originalPosition;
+
+    constructor() {
+        super();
+        this._tag = "div";
+        this._surfaceButtons = [];
+    }
+
+    updateState(visible) {
+        visible = visible || !this.popupState();
+        this.popupState(visible).render();
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this.widget()
+            .target(domNode)
+            ;
+        this._originalPosition = this.position();
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        element
+            .style("visibility", this.popupState() ? null : "hidden")
+            .style("opacity", this.popupState() ? null : 0)
+            .style("width", this.shrinkWrap() ? this.widget().width() + "px" : this._size.width + "px")
+            .style("height", this.shrinkWrap() ? this.widget().height() + "px" : this._size.height + "px")
+            ;
+        if (this.widget().size().height === 0) {
+            this.widget().resize(this.size());
+        }
+    }
+
+    postUpdate(domNode, element) {
+        let left;
+        let top;
+        switch (this.centerPopup()) {
+            case "container":
+                if (this._placeholderElement) {
+                    left = parseInt(this._placeholderElement.style("width")) / 2 - this.widget().width() / 2;
+                    top = parseInt(this._placeholderElement.style("height")) / 2 - this.widget().height() / 2;
+                }
+                this.position("absolute");
+                break;
+
+            case "window":
+                left = window.innerWidth / 2 - this.widget().width() / 2;
+                top = window.innerHeight / 2 - this.widget().height() / 2;
+                this.position("fixed");
+                break;
+
+            default:
+                left = 0;
+                top = 0;
+                this.position(this._originalPosition);
+                break;
+        }
+
+        this.pos({ x: left, y: top });
+
+        super.postUpdate(domNode, element);
+
+        element
+            .style("position", this.position())
+            .style("left", this.left() + "px")
+            .style("right", this.right() + "px")
+            .style("top", this.top() + "px")
+            .style("bottom", this.bottom() + "px")
+            ;
+    }
+
+    exit(domNode, element) {
+        if (this.widget()) {
+            this.widget().target(null);
+        }
+        super.exit(domNode, element);
+    }
+
+    click(obj) {
+    }
+}
+Popup.prototype._class += " layout_Popup";
+
+export interface Popup {
+    popupState(): boolean;
+    popupState(_: boolean): this;
+    shrinkWrap(): boolean;
+    shrinkWrap(_: boolean): this;
+    centerPopup(): "none" | "container" | "window";
+    centerPopup(_: "none" | "container" | "window"): this;
+    top(): number;
+    top(_: number): this;
+    bottom(): number;
+    bottom(_: number): this;
+    left(): number;
+    left(_: number): this;
+    right(): number;
+    right(_: number): this;
+    position(): string;
+    position(_: string): this;
+
+    widget(): Widget;
+    widget(_: Widget): this;
+}
+
+Popup.prototype.publish("popupState", false, "boolean", "State of the popup, visible (true) or hidden (false)", null, {});
+Popup.prototype.publish("shrinkWrap", false, "boolean", "The popup parent container either shrinks to the size of its contents (true) or expands to fit thge popup's parentDiv (false)", null, {});
+Popup.prototype.publish("centerPopup", "none", "set", "Center the widget in its container element (target) or in the window", ["none", "container", "window"], {});
+Popup.prototype.publish("top", null, "number", "Top position property of popup", null, {});
+Popup.prototype.publish("bottom", null, "number", "Bottom position property of popup", null, {});
+Popup.prototype.publish("left", null, "number", "Left position property of popup", null, {});
+Popup.prototype.publish("right", null, "number", "Right position property of popup", null, {});
+Popup.prototype.publish("position", "relative", "set", "Value of the 'position' property", ["absolute", "relative", "fixed", "static", "initial", "inherit"], { tags: ["Private"] });
+
+Popup.prototype.publish("widget", null, "widget", "Widget", null, { tags: ["Private"] });

package/src/Surface.css

@@ -1,89 +1,89 @@
-.layout_Surface {
-    box-sizing: border-box;
-    margin: 0px;
-    border: 1px solid #e5e5e5;
-    overflow:hidden;
-    height: 100%;
-    width: 100%;
-}
-
-.layout_Surface.shadow2 {
-    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)
-}
-
-.layout_Surface > h3 {
-    margin: 0px;
-    padding: 2px;
-    background-color: #e5e5e5;
-}
-.layout_Surface .html-button-container {
-    position: absolute;
-    right: 0px;
-    top:3px;
-}
-
-.layout_Surface > div {
-    padding: 8px;
-}
-
-.layout_Surface .html-button-container .surface-button {
-    margin-right: 5px;
-}
-.layout_Surface .html-button-container .surface-button i {
-    opacity: 0.8;
-}
-
-.layout_Surface .html-button-container .surface-button:hover { opacity: 1; }
-.layout_Surface .html-button-container .surface-button:active { opacity: 0.5; }
-
-div[draggable=true].hideDragCellContent.content-icon:before{
-    content: "\f080";
-    font-family: FontAwesome;
-    position: absolute;
-    top: calc(50% - 74px);
-    left: calc(50% - 56px);
-    font-size: 100px;
-}
-div[draggable=true].hideDragCellContent.content-icon-Line:before{
-    content:"\f201";
-}
-div[draggable=true].hideDragCellContent.content-icon-Pie:before{
-    top: calc(50% - 72px);
-    left: calc(50% - 45px);
-    content:"\f200";
-}
-div[draggable=true].hideDragCellContent.content-icon-Area:before{
-    content:"\f1fe";
-}
-div[draggable=true].hideDragCellContent.content-icon-Gauge:before{
-    content:"\f0e4";
-}
-div[draggable=true].hideDragCellContent.content-icon-Table:before{
-    content:"\f0ce";
-}
-div[draggable=true].hideDragCellContent.content-icon-Form:before{
-    content:"\f11c";
-}
-div[draggable=true].hideDragCellContent.content-icon-Grid:before,
-div[draggable=true].hideDragCellContent.content-icon-Graph:before,
-div[draggable=true].hideDragCellContent.content-icon-Border:before,
-div[draggable=true].hideDragCellContent.content-icon-Tabbed:before,
-div[draggable=true].hideDragCellContent.content-icon-Accordion:before,
-div[draggable=true].hideDragCellContent.content-icon-MultiChart:before,
-div[draggable=true].hideDragCellContent.content-icon-MultiChartSurface:before{
-    content:"\f247";
-}
-div[draggable=true].hideDragCellContent.content-icon-ChoroplethStates:before,
-div[draggable=true].hideDragCellContent.content-icon-ChoroplethStatesHeat:before,
-div[draggable=true].hideDragCellContent.content-icon-ChoroplethCounties:before,
-div[draggable=true].hideDragCellContent.content-icon-ChoroplethCountries:before,
-div[draggable=true].hideDragCellContent.content-icon-GMap:before,
-div[draggable=true].hideDragCellContent.content-icon-GMapHeat:before,
-div[draggable=true].hideDragCellContent.content-icon-GMapGraph:before{
-    content:"\f278";
-}
-div[draggable=true].hideDragCellContent.content-icon-Text:before,
-div[draggable=true].hideDragCellContent.content-icon-TextBox:before,
-div[draggable=true].hideDragCellContent.content-icon-FAChar:before{
-    content:"\f278";
-}
+.layout_Surface {
+    box-sizing: border-box;
+    margin: 0px;
+    border: 1px solid #e5e5e5;
+    overflow:hidden;
+    height: 100%;
+    width: 100%;
+}
+
+.layout_Surface.shadow2 {
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)
+}
+
+.layout_Surface > h3 {
+    margin: 0px;
+    padding: 2px;
+    background-color: #e5e5e5;
+}
+.layout_Surface .html-button-container {
+    position: absolute;
+    right: 0px;
+    top:3px;
+}
+
+.layout_Surface > div {
+    padding: 8px;
+}
+
+.layout_Surface .html-button-container .surface-button {
+    margin-right: 5px;
+}
+.layout_Surface .html-button-container .surface-button i {
+    opacity: 0.8;
+}
+
+.layout_Surface .html-button-container .surface-button:hover { opacity: 1; }
+.layout_Surface .html-button-container .surface-button:active { opacity: 0.5; }
+
+div[draggable=true].hideDragCellContent.content-icon:before{
+    content: "\f080";
+    font-family: FontAwesome;
+    position: absolute;
+    top: calc(50% - 74px);
+    left: calc(50% - 56px);
+    font-size: 100px;
+}
+div[draggable=true].hideDragCellContent.content-icon-Line:before{
+    content:"\f201";
+}
+div[draggable=true].hideDragCellContent.content-icon-Pie:before{
+    top: calc(50% - 72px);
+    left: calc(50% - 45px);
+    content:"\f200";
+}
+div[draggable=true].hideDragCellContent.content-icon-Area:before{
+    content:"\f1fe";
+}
+div[draggable=true].hideDragCellContent.content-icon-Gauge:before{
+    content:"\f0e4";
+}
+div[draggable=true].hideDragCellContent.content-icon-Table:before{
+    content:"\f0ce";
+}
+div[draggable=true].hideDragCellContent.content-icon-Form:before{
+    content:"\f11c";
+}
+div[draggable=true].hideDragCellContent.content-icon-Grid:before,
+div[draggable=true].hideDragCellContent.content-icon-Graph:before,
+div[draggable=true].hideDragCellContent.content-icon-Border:before,
+div[draggable=true].hideDragCellContent.content-icon-Tabbed:before,
+div[draggable=true].hideDragCellContent.content-icon-Accordion:before,
+div[draggable=true].hideDragCellContent.content-icon-MultiChart:before,
+div[draggable=true].hideDragCellContent.content-icon-MultiChartSurface:before{
+    content:"\f247";
+}
+div[draggable=true].hideDragCellContent.content-icon-ChoroplethStates:before,
+div[draggable=true].hideDragCellContent.content-icon-ChoroplethStatesHeat:before,
+div[draggable=true].hideDragCellContent.content-icon-ChoroplethCounties:before,
+div[draggable=true].hideDragCellContent.content-icon-ChoroplethCountries:before,
+div[draggable=true].hideDragCellContent.content-icon-GMap:before,
+div[draggable=true].hideDragCellContent.content-icon-GMapHeat:before,
+div[draggable=true].hideDragCellContent.content-icon-GMapGraph:before{
+    content:"\f278";
+}
+div[draggable=true].hideDragCellContent.content-icon-Text:before,
+div[draggable=true].hideDragCellContent.content-icon-TextBox:before,
+div[draggable=true].hideDragCellContent.content-icon-FAChar:before{
+    content:"\f278";
+}