zhongrj
2023-06-27 d74b495736f0c04522ec54274b70fed0ded2878d
public/map/controls/loader/Loader.js
New file
@@ -0,0 +1,158 @@
define([
   "dojo",
   "dojo/_base/declare",
   "dijit/_WidgetBase",
   "dojo/dom-construct",
   "dojo/dom-attr",
   "dojo/dom-geometry",
   "dojo/window",
   "dojo/dom-style",
   "dojo/query",
   "dojo/_base/lang",
   "dojo/_base/fx",
   "dojo/on",
   "dojo/fx",
], function(
   dojo,
   declare,
   _WidgetBase,
   domConstruct,
   domAttr,
   domGeometry,
   win,
   domStyle,
   query,
   lang,
   fx,
   on,
   dojofx
) {
   var RL = declare([_WidgetBase], {
      /**
       * 背景
       */
      _divbg: null,
      _divContent: null,
      _span: null,
      _refNode: null,
      /**
       * 是否已经在显示
       */
      _isShow: false,
      _effectHandler: null,
      constructor: function(params, srcNodeRef, refNode) {
         var csspath = require.toUrl("controls/loader/Loader.css");
         dojo.create("link", {
               href: csspath,
               type: 'text/css',
               rel: 'stylesheet'
            },
            document.getElementsByTagName('head')[0]);
         if (refNode) {
            this._refNode = refNode;
         } else {
            this._refNode = query("body")[0];
         }
      },
      postCreate: function() {
         this._divbg = domConstruct.create("div", {
            "class": "loader-background"
         });
         this._divContent = domConstruct.create("div", {
            "class": "loader-content"
         });
         this._span = domConstruct.create("span", {
            "class": "loader-text",
            "innerHTML": "正在加载,请稍等......"
         });
      },
      show: function(loadtext,opts) {
         if (loadtext !== undefined) {
            this._span.innerHTML = loadtext;
         } else {
            this._span.innerHTML = "正在加载,请稍等......";
         }
         if (this._isShow) {
            if (this._effectHandler) {
               this._effectHandler.stop();
               this._effectHandler = null;
            }
            return;
         }
         var left;
         var top;
         var vs = win.getBox();
         //      left = (vs.w/2)-(domStyle.get(this._divContent,"width")/2);
         //      top = (vs.h/2)-(domStyle.get(this._divContent,"height")/2);
         if (opts) {
            //var pos=,true);
            domStyle.set(this._refNode, "width", opts.w + "px");
            domStyle.set(this._refNode, "height", opts.h + "px");
            left = opts.x- (206 / 2);
            top = opts.y- (61 / 2);
         } else{
            left = (vs.w / 2) - (206 / 2);
            top = (vs.h / 2) - (61 / 2);
         }
         domStyle.set(this._divContent, "top", top.toString() + "px");
         domStyle.set(this._divContent, "left", left.toString() + "px");
         this._isShow = true;
         var refNode = this._refNode;
         domConstruct.place(this._divbg, refNode);
         domStyle.set(this._divbg, "opacity", "0.3");
         domConstruct.place(this._divContent, refNode);
         domStyle.set(this._divContent, "opacity", "0");
         domConstruct.place(this._span, this._divContent);
         fx.animateProperty({
            node: this._divbg,
            properties: {
               opacity: {
                  start: 0,
                  end: 0.3
               }
            }
         }).play();
         fx.fadeIn({
            node: this._divContent
         }).play();
         //fx.fadeOut({ node: this._span }).play();
      },
      hide: function() {
         if (this._isShow == false) {
            return;
         }
         //refNode = query("body")[0];
         var fade1 = fx.animateProperty({
            node: this._divbg,
            properties: {
               opacity: {
                  start: 0.3,
                  end: 0
               }
            }
         });
         var fade2 = fx.animateProperty({
            node: this._divContent,
            properties: {
               opacity: {
                  start: 1,
                  end: 0
               }
            }
         });
         var combine = dojofx.combine([fade1, fade2]);
         on(fade2, "End", lang.hitch(this, function() {
            domConstruct.destroy(this._divbg);
            domConstruct.destroy(this._divContent);
            this._isShow = false;
            this._effectHandler = null;
         }));
         this._effectHandler = combine.play();
      }
   });
   return RL;
});