@d3plus/core 3.0.0-alpha.0

package/es/src/components/Message.js

@@ -0,0 +1,95 @@
+function _class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+}
+import { select } from "d3-selection";
+import { stylize } from "@d3plus/dom";
+var Message = /*#__PURE__*/ function() {
+    "use strict";
+    function Message() {
+        _class_call_check(this, Message);
+        this._isVisible = false;
+    }
+    _create_class(Message, [
+        {
+            /**
+      @memberof Message
+      @desc Removes the message from the page.
+      @chainable
+  */ key: "exit",
+            value: function exit(elem, duration) {
+                elem.transition().duration(duration).style("opacity", 0).transition().remove();
+                this._isVisible = false;
+            }
+        },
+        {
+            /**
+      @memberof Message
+      @desc Removes the message from the page.
+      @chainable
+  */ key: "hide",
+            value: function hide() {
+                var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _ref_duration = _ref.duration, duration = _ref_duration === void 0 ? 600 : _ref_duration, callback = _ref.callback;
+                this.mask.call(this.exit.bind(this), duration);
+                this.elem.call(this.exit.bind(this), duration);
+                if (callback) setTimeout(callback, duration + 100);
+                this._isVisible = false;
+                return this;
+            }
+        },
+        {
+            /**
+      @memberof Message
+      @desc Draws the message given the specified configuration.
+      @param {Object} [*config*]
+      @chainable
+  */ key: "render",
+            value: function render() {
+                var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, callback = _ref.callback, _ref_container = _ref.container, container = _ref_container === void 0 ? "body" : _ref_container, _ref_duration = _ref.duration, duration = _ref_duration === void 0 ? 600 : _ref_duration, _ref_html = _ref.html, html = _ref_html === void 0 ? "Please Wait" : _ref_html, _ref_mask = _ref.mask, mask = _ref_mask === void 0 ? "rgba(0, 0, 0, 0.05)" : _ref_mask, _ref_style = _ref.style, style = _ref_style === void 0 ? {} : _ref_style;
+                var parent = select(container);
+                this.mask = parent.selectAll("div.d3plus-Mask").data(mask ? [
+                    mask
+                ] : []);
+                this.mask = this.mask.enter().append("div").attr("class", "d3plus-Mask").style("opacity", 1).merge(this.mask);
+                this.mask.exit().call(this.exit.bind(this), duration);
+                stylize(this.mask, {
+                    "background-color": String,
+                    "bottom": "0px",
+                    "left": "0px",
+                    "position": "absolute",
+                    "right": "0px",
+                    "top": "0px"
+                });
+                this.elem = parent.selectAll("div.d3plus-Message").data([
+                    html
+                ]);
+                this.elem = this.elem.enter().append("div").attr("class", "d3plus-Message").style("opacity", 1).merge(this.elem).html(String);
+                stylize(this.elem, style);
+                if (callback) setTimeout(callback, 100);
+                this._isVisible = true;
+                return this;
+            }
+        }
+    ]);
+    return Message;
+}();
+/**
+    @class Message
+    @desc Displays a message using plain HTML.
+    @private
+*/ export { Message as default };