优化图片组件

Imshann
1 parent 1b6f912f
Showing 5 changed files with 85 additions and 24 deletions Show diff stats
build/ImagePreviewGroup/ImagePreviewGroup.js
package.json
src/ImagePreviewGroup/ImagePreviewGroup.js
webpack.config.js
yarn.lock
@@ -7,8 +7,11 @@ angular
             restrict: "E",
             transclude: true,
             replace: true,
+            scope: {
+                preview: "=",
+            },
             template: template,
-            controller: function ($scope, $element) {
+            controller: function ($scope, $element, $attrs) {
                 this.getContext = function () {
                     return $scope;
                 };
@@ -25,36 +28,66 @@ angular
                     return $scope.state.childrens.length - 1;
                 };
+                $scope.setCurrent = function (value) {
+                    $scope.state.current = value;
+
+                    if (
+                        typeof $scope.preview === "object" &&
+                        typeof $scope.preview.onCurrentChange === "function"
+                    ) {
+                        $scope.preview.onCurrentChange(value);
+                    }
+                };
+
+                $scope.setVisible = function (value) {
+                    $scope.state.visible = value;
+
+                    if (
+                        typeof $scope.preview === "object" &&
+                        typeof $scope.preview.onVisibleChange === "function"
+                    ) {
+                        $scope.preview.onVisibleChange(value);
+                    }
+                };
+
                 $scope.handleOpen = function (index) {
-                    $scope.state.current = index;
+                    $scope.setCurrent(index);
                     $scope.state.src = $scope.state.childrens[index].state.src;
-                    $scope.state.visible = true;
+                    $scope.setVisible(true);
                 };
                 $scope.handleClose = function () {
-                    $scope.state.visible = false;
+                    $scope.setVisible(false);
                 };
                 $scope.handlePrev = function () {
-                    $scope.state.current =
-                        $scope.state.current > 0 ? $scope.state.current - 1 : 0;
+                    $scope.setCurrent(
+                        $scope.state.current > 0 ? $scope.state.current - 1 : 0
+                    );
                     $scope.state.src =
                         $scope.state.childrens[$scope.state.current].state.src;
                 };
                 $scope.handleNext = function () {
-                    $scope.state.current =
+                    $scope.setCurrent(
                         $scope.state.current < $scope.state.childrens.length - 1
                             ? $scope.state.current + 1
-                            : $scope.state.childrens.length - 1;
+                            : $scope.state.childrens.length - 1
+                    );
                     $scope.state.src =
                         $scope.state.childrens[$scope.state.current].state.src;
                 };
                 $scope.handlePreview = function () {
+                    let className;
+
+                    if ($attrs.class) {
+                        className = ` ${$attrs.class}`;
+                    }
+
                     esNgAntd.createLayer(
                         `
-            <div class="ant-image-preview-root">
+            <div class="ant-image-preview-root${className}">
                 <div class="ant-image-preview-mask" ng-if="state.visible"></div>
                 <div class="ant-image-preview-wrap" ng-show="state.visible">
                     <div class="ant-image-preview">
@@ -11,7 +11,7 @@
     "devDependencies": {
         "@ant-design/icons-svg": "^4.2.1",
         "antd": "^4.18.2",
-        "beanboom": "0.8.5",
+        "beanboom": "0.8.7",
         "css-loader": "^6.5.1",
         "html-loader": "^3.0.1",
         "style-loader": "^3.3.1",
@@ -3,6 +3,10 @@ import template from &quot;./ImagePreviewGroup.html&quot;;
 class ImagePreviewGroup {
     useModules = ["esNgAntd"];
+    props = {
+        preview: Object,
+    };
+
     template = template;
     state = {
@@ -21,34 +25,58 @@ class ImagePreviewGroup {
         return this.state.childrens.length - 1;
     }
+    setCurrent(value) {
+        this.state.current = value;
+        if (
+            typeof this.props.preview === "object" &&
+            typeof this.props.preview.onCurrentChange === "function"
+        ) {
+            this.props.preview.onCurrentChange(value);
+        }
+    }
+
+    setVisible(value) {
+        this.state.visible = value;
+        if (
+            typeof this.props.preview === "object" &&
+            typeof this.props.preview.onVisibleChange === "function"
+        ) {
+            this.props.preview.onVisibleChange(value);
+        }
+    }
+
     handleOpen(index) {
-        this.state.current = index;
+        this.setCurrent(index);
         this.state.src = this.state.childrens[index].state.src;
-        this.state.visible = true;
+        this.setVisible(true)
     }
     handleClose() {
-        this.state.visible = false;
+        this.setVisible(false)
     }
     handlePrev() {
-        this.state.current =
-            this.state.current > 0 ? this.state.current - 1 : 0;
+        this.setCurrent(this.state.current > 0 ? this.state.current - 1 : 0);
         this.state.src = this.state.childrens[this.state.current].state.src;
     }
     handleNext() {
-        this.state.current =
+        this.setCurrent(
             this.state.current < this.state.childrens.length - 1
                 ? this.state.current + 1
-                : this.state.childrens.length - 1;
+                : this.state.childrens.length - 1
+        );
         this.state.src = this.state.childrens[this.state.current].state.src;
     }
     handlePreview() {
+        let className;
+        if ($attrs.class) {
+            className = ` ${$attrs.class}`;
+        }
         esNgAntd.createLayer(
             `
-            <div class="ant-image-preview-root">
+            <div class="ant-image-preview-root${className}">
                 <div class="ant-image-preview-mask" ng-if="state.visible"></div>
                 <div class="ant-image-preview-wrap" ng-show="state.visible">
                     <div class="ant-image-preview">
@@ -6,11 +6,11 @@ module.exports = {
     entry: "./build/index.js",
     output: {
         // bpms
-        path: "/Users/shann/Project/essa/bpms/bpms-webapp/src/main/webapp/lib/ng-antd",
+        // path: "/Users/shann/Project/essa/bpms/bpms-webapp/src/main/webapp/lib/ng-antd",
         // boss
         // path: "/Users/shann/Project/essa/boss/trunk/vendor-lib/ng-antd",
         // mvo
-        // path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd",
+        path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd",
         // local
         // path: path.resolve(__dirname, "dist"),
         filename: "ng-antd.js",
@@ -1320,10 +1320,10 @@ babel-plugin-polyfill-regenerator@^0.2.3:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.2.4"
-beanboom@0.8.5:
-  version "0.8.5"
-  resolved "https://registry.npmmirror.com/beanboom/download/beanboom-0.8.5.tgz#f661201a4ab1f082e485bae35a74395222407783"
-  integrity sha512-hVP/QBRpUGHQxqpAAZHREN64LIfhbsIH1KWTItGNkIcT6u/rGrtqqv/m3xUDV7pxOV6UTU5vVaYgkoit38KfGA==
+beanboom@0.8.7:
+  version "0.8.7"
+  resolved "https://registry.npmmirror.com/beanboom/download/beanboom-0.8.7.tgz#64c3b6b874bd8c271ee1dfd9babfaa9a621ec1d6"
+  integrity sha512-/P0cRqcxybyx/ynRd9K12n++OrVj/NTUW5lJQ6ToqbrY/JPIHvGQGZnnLyQ1thzSIKl+0jaz/pvHlRF1TYOc7Q==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-proposal-class-properties" "^7.13.0"