@next-core/brick-kit 2.113.0 → 2.114.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.114.0](https://github.com/easyops-cn/next-core/compare/@next-core/brick-kit@2.113.0...@next-core/brick-kit@2.114.0) (2022-03-29)
+
+
+### Features
+
+* add MEDIA gloabl object and onMediaChange life cycle ([3192ee4](https://github.com/easyops-cn/next-core/commit/3192ee4e595e2edc78d05b68d6cf0431905296fb))
+
+
+
+
+
 # [2.113.0](https://github.com/easyops-cn/next-core/compare/@next-core/brick-kit@2.112.1...@next-core/brick-kit@2.113.0) (2022-03-29)
 
 

package/dist/index.bundle.js

@@ -2186,6 +2186,56 @@
     return tplContextMap.get(tplContextId);
   }
 
+  var MediaSize;
+
+  (function (MediaSize) {
+    MediaSize["xLarge"] = "xLarge";
+    MediaSize["large"] = "large";
+    MediaSize["medium"] = "medium";
+    MediaSize["small"] = "small";
+    MediaSize["xSmall"] = "xSmall";
+  })(MediaSize || (MediaSize = {}));
+
+  var mediaSizeBreakpointMap = new Map([[MediaSize.xLarge, "1920px"], [MediaSize.large, "1600px"], [MediaSize.medium, "1280px"], [MediaSize.small, "1024px"], [MediaSize.xSmall, 0]]);
+  var mediaEventTarget = new EventTarget$1();
+  var sizeMatchesMap = {};
+  var MEDIA = {};
+
+  function handleMatchesChange(data, size) {
+    var changed = false;
+    sizeMatchesMap[size] = data.matches;
+
+    for (var [_size] of mediaSizeBreakpointMap) {
+      if (sizeMatchesMap[_size] && MEDIA.size !== _size) {
+        MEDIA.size = _size;
+        changed = true;
+        break;
+      }
+    }
+
+    if (changed) {
+      mediaEventTarget.dispatchEvent(new CustomEvent("change", {
+        detail: MEDIA
+      }));
+    }
+  }
+
+  mediaSizeBreakpointMap.forEach((breakpoint, size) => {
+    var mediaQueryList = window.matchMedia("(min-width: ".concat(breakpoint, ")"));
+    handleMatchesChange(mediaQueryList, size);
+
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener("change", event => {
+        handleMatchesChange(event, size);
+      });
+    } else {
+      mediaQueryList.addListener(event => {
+        handleMatchesChange(event, size);
+      });
+    }
+  });
+  var getMedia = () => MEDIA;
+
   var symbolForRaw = Symbol.for("pre.evaluated.raw");
   var symbolForContext = Symbol.for("pre.evaluated.context");
   function isPreEvaluated(raw) {
@@ -2422,6 +2472,9 @@
         case "SYS":
           return getReadOnlyProxy(sys);
 
+        case "MEDIA":
+          return getReadOnlyProxy(getMedia());
+
         case "__WIDGET_FN__":
           return widgetFunctions;
 
@@ -8593,6 +8646,8 @@
 
       _defineProperty__default["default"](this, "anchorUnloadHandlers", []);
 
+      _defineProperty__default["default"](this, "mediaChangeHandlers", []);
+
       _defineProperty__default["default"](this, "messageCloseHandlers", []);
 
       _defineProperty__default["default"](this, "messageHandlers", []);
@@ -9107,6 +9162,7 @@
         onPageLeave,
         onAnchorLoad,
         onAnchorUnload,
+        onMediaChange,
         onMessage,
         onMessageClose
       } = lifeCycle !== null && lifeCycle !== void 0 ? lifeCycle : {};
@@ -9165,6 +9221,15 @@
         });
       }
 
+      if (onMediaChange) {
+        this.mediaChangeHandlers.push({
+          brick,
+          match,
+          tplContextId,
+          handler: onMediaChange
+        });
+      }
+
       if (onMessage) {
         this.messageHandlers.push({
           brick,
@@ -9220,6 +9285,12 @@
       }
     }
 
+    handleMediaChange(detail) {
+      this.dispatchLifeCycleEvent(new CustomEvent("media.change", {
+        detail: getReadOnlyProxy(detail)
+      }), this.mediaChangeHandlers);
+    }
+
     handleMessage() {
       this.messageDispatcher.create(this.messageHandlers, this.getCurrentContext());
     }
@@ -9731,6 +9802,8 @@
 
       _defineProperty__default["default"](this, "navConfig", void 0);
 
+      _defineProperty__default["default"](this, "mediaEventTargetHandler", void 0);
+
       this.kernel = kernel;
       this.featureFlags = this.kernel.getFeatureFlags();
       var history = getHistory();
@@ -10038,7 +10111,12 @@
           _this3.kernel.unsetBars({
             appChanged,
             legacy: actualLegacy
-          }); // There is a window to set theme and mode by `lifeCycle.onBeforePageLoad`.
+          });
+
+          if (_this3.mediaEventTargetHandler) {
+            mediaEventTarget.removeEventListener("change", _this3.mediaEventTargetHandler);
+            _this3.mediaEventTargetHandler = undefined;
+          } // There is a window to set theme and mode by `lifeCycle.onBeforePageLoad`.
 
 
           _this3.locationContext.handleBeforePageLoad();
@@ -10111,6 +10189,9 @@
               _this3.locationContext.handleMessage();
             }
 
+            _this3.mediaEventTargetHandler = event => _this3.locationContext.handleMediaChange(event.detail);
+
+            mediaEventTarget.addEventListener("change", _this3.mediaEventTargetHandler);
             pageTracker === null || pageTracker === void 0 ? void 0 : pageTracker(locationContext.getCurrentMatch().path); // analytics page_view event
 
             easyopsAnalytics.userAnalytics.event("page_view", _objectSpread__default["default"]({