Commit 1145f171aca3ef9e4b81894edf78014f53d615b4

Authored by Imshann
1 parent d8d2d2b0

优化Image相关组件

build/Icon/Icon.js
1   -import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers";
2 1 import * as iconsSvg from "@ant-design/icons-svg";
  2 +import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers";
3 3 angular.module("esNgAntd").directive("antdIcon", ["$compile", function ($compile) {
4 4 return {
5 5 template: `<span class="anticon"></span>`,
... ... @@ -9,7 +9,7 @@ angular.module(&quot;esNgAntd&quot;).directive(&quot;antdIcon&quot;, [&quot;$compile&quot;, function ($compile
9 9 scope: {
10 10 type: "@"
11 11 },
12   - link: function ($scope) {
  12 + link: function ($scope, $element) {
13 13 let template = renderIconDefinitionToSVGElement(iconsSvg[$scope.type], {
14 14 extraSVGAttrs: {
15 15 width: "1em",
... ...
build/Image/Image.js
1 1 import template from "./Image.html";
2 2 import style from "antd/lib/image/style/index.css";
3   -angular
4   - .module("esNgAntd")
5   - .directive("antdImage", function ($timeout, esNgAntd, $compile) {
6   - return {
7   - controllerAs: "antdImage",
8   - restrict: "E",
9   - transclude: true,
10   - replace: true,
11   - scope: {
12   - src: "@",
13   - dSrc: "@",
14   - width: "@",
15   - height: "@",
16   - preview: "@",
17   - },
18   - template: template,
19   - controller: function ($scope, $element, $attrs) {
20   - this.getContext = function () {
21   - return $scope;
22   - };
  3 +angular.module("esNgAntd").directive("antdImage", ["$timeout", "esNgAntd", "$compile", function ($timeout, esNgAntd, $compile) {
  4 + return {
  5 + template: template,
  6 + restrict: "E",
  7 + replace: true,
  8 + transclude: true,
  9 + scope: {
  10 + src: "@",
  11 + dSrc: "@",
  12 + width: "=",
  13 + height: "=",
  14 + preview: "="
  15 + },
  16 + require: ["^?antdImagePreviewGroup"],
  17 + controller: function ($scope, $element) {
  18 + $scope.state = {
  19 + src: "data:image/png;base64,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",
  20 + // 可见性
  21 + visible: false,
  22 + // 有图片?
  23 + hasImage: false,
  24 + // 索引
  25 + index: null
  26 + };
23 27  
24   - $scope.state = {
25   - src: "data:image/png;base64,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",
26   - // 可见性
27   - visible: false,
28   - // 有图片?
29   - hasImage: false,
30   - // 索引
31   - index: null,
32   - };
  28 + $scope.handleOpen = function () {
  29 + if ($scope.antdImagePreviewGroup) {
  30 + $scope.antdImagePreviewGroup.handleOpen($scope.state.index);
  31 + return;
  32 + }
33 33  
34   - $scope.handleOpen = function () {
35   - if ($scope.antdImagePreviewGroup) {
36   - $scope.antdImagePreviewGroup.handleOpen(
37   - $scope.state.index
38   - );
39   - return;
40   - }
  34 + $scope.state.visible = true;
  35 + };
41 36  
42   - $scope.state.visible = true;
43   - };
  37 + $scope.handleClose = function () {
  38 + $scope.state.visible = false;
  39 + };
44 40  
45   - $scope.handleClose = function () {
46   - $scope.state.visible = false;
47   - };
48   -
49   - $scope.handlePreview = function () {
50   - let div = document.createElement("div");
51   - div.innerHTML = `
  41 + $scope.handlePreview = function () {
  42 + let div = document.createElement("div");
  43 + div.innerHTML = `
52 44 <div class="ant-image-preview-root">
53 45 <div class="ant-image-preview-mask" ng-if="state.visible"></div>
54 46 <div class="ant-image-preview-wrap" ng-show="state.visible">
... ... @@ -71,47 +63,33 @@ angular
71 63 </div>
72 64 </div>
73 65 `;
74   - document.body.appendChild(div);
75   - $compile(div)($scope);
76   - };
77   - },
78   - require: ["?^antdImagePreviewGroup"],
79   - link: function (
80   - $scope,
81   - $element,
82   - $attrs,
83   - $controllers,
84   - $transclude
85   - ) {
86   - let [antdImagePreviewGroup] = $controllers;
87   - esNgAntd.createStyle("ant-image", style);
88   - let src = $scope.state.src;
  66 + document.body.appendChild(div);
  67 + $compile(div)($scope);
  68 + };
  69 + },
  70 + link: function ($scope, $element, $attrs, $controllers) {
  71 + let [antdImagePreviewGroup] = $controllers;
  72 + esNgAntd.createStyle("ant-image", style);
  73 + let src = $scope.state.src;
89 74  
90   - $element.children("img")[0].onerror = function () {
91   - $timeout(function () {
92   - $scope.state.hasImage = false;
93   - $scope.state.src = src;
94   - }, 0);
95   - };
  75 + $element.children("img")[0].onerror = function () {
  76 + $timeout(function () {
  77 + $scope.state.hasImage = false;
  78 + $scope.state.src = src;
  79 + }, 0);
  80 + };
96 81  
97   - if (
98   - $scope.dSrc !== "undefined" &&
99   - $scope.dSrc !== undefined &&
100   - $scope.dSrc !== null &&
101   - $scope.dSrc !== ""
102   - ) {
103   - $scope.state.hasImage = true;
104   - $scope.state.src = $scope.dSrc;
105   - }
  82 + if ($scope.dSrc !== "undefined" && $scope.dSrc !== undefined && $scope.dSrc !== null && $scope.dSrc !== "") {
  83 + $scope.state.hasImage = true;
  84 + $scope.state.src = $scope.dSrc;
  85 + }
106 86  
107   - if (antdImagePreviewGroup) {
108   - $scope.antdImagePreviewGroup =
109   - antdImagePreviewGroup.getContext();
110   - $scope.state.index =
111   - $scope.antdImagePreviewGroup.addChildren($scope);
112   - } else {
113   - $scope.handlePreview();
114   - }
115   - },
116   - };
117   - });
  87 + if (antdImagePreviewGroup) {
  88 + $scope.antdImagePreviewGroup = antdImagePreviewGroup.getContext();
  89 + $scope.state.index = $scope.antdImagePreviewGroup.addChildren($scope);
  90 + } else {
  91 + $scope.handlePreview();
  92 + }
  93 + }
  94 + };
  95 +}]);
118 96 \ No newline at end of file
... ...
build/ImagePreviewGroup/ImagePreviewGroup.js
1 1 import template from "./ImagePreviewGroup.html";
2   -angular
3   - .module("esNgAntd")
4   - .directive("antdImagePreviewGroup", function (esNgAntd) {
5   - return {
6   - controllerAs: "antdImagePreviewGroup",
7   - restrict: "E",
8   - transclude: true,
9   - replace: true,
10   - scope: {
11   - preview: "=",
12   - },
13   - template: template,
14   - controller: function ($scope, $element, $attrs) {
15   - this.getContext = function () {
16   - return $scope;
17   - };
  2 +angular.module("esNgAntd").directive("antdImagePreviewGroup", ["esNgAntd", function (esNgAntd) {
  3 + return {
  4 + template: template,
  5 + restrict: "E",
  6 + replace: true,
  7 + transclude: true,
  8 + scope: {
  9 + preview: "="
  10 + },
  11 + controller: function ($scope, $element, $attrs) {
  12 + this.getContext = function () {
  13 + return $scope;
  14 + };
18 15  
19   - $scope.state = {
20   - current: 0,
21   - visible: false,
22   - src: null,
23   - childrens: [],
24   - };
  16 + $scope.state = {
  17 + current: 0,
  18 + visible: false,
  19 + src: null,
  20 + childrens: []
  21 + };
25 22  
26   - $scope.addChildren = function (children) {
27   - $scope.state.childrens.push(children);
28   - return $scope.state.childrens.length - 1;
29   - };
  23 + $scope.addChildren = function (children) {
  24 + $scope.state.childrens.push(children);
  25 + return $scope.state.childrens.length - 1;
  26 + };
30 27  
31   - $scope.setCurrent = function (value) {
32   - $scope.state.current = value;
  28 + $scope.setCurrent = function (value) {
  29 + $scope.state.current = value;
33 30  
34   - if (
35   - typeof $scope.preview === "object" &&
36   - typeof $scope.preview.onCurrentChange === "function"
37   - ) {
38   - $scope.preview.onCurrentChange(value);
39   - }
40   - };
  31 + if (typeof $scope.preview === "object" && typeof $scope.preview.onCurrentChange === "function") {
  32 + $scope.preview.onCurrentChange(value);
  33 + }
  34 + };
41 35  
42   - $scope.setVisible = function (value) {
43   - $scope.state.visible = value;
  36 + $scope.setVisible = function (value) {
  37 + $scope.state.visible = value;
44 38  
45   - if (
46   - typeof $scope.preview === "object" &&
47   - typeof $scope.preview.onVisibleChange === "function"
48   - ) {
49   - $scope.preview.onVisibleChange(value);
50   - }
51   - };
  39 + if (typeof $scope.preview === "object" && typeof $scope.preview.onVisibleChange === "function") {
  40 + $scope.preview.onVisibleChange(value);
  41 + }
  42 + };
52 43  
53   - $scope.handleOpen = function (index) {
54   - $scope.setCurrent(index);
55   - $scope.state.src = $scope.state.childrens[index].state.src;
56   - $scope.setVisible(true);
57   - };
  44 + $scope.handleOpen = function (index) {
  45 + $scope.setCurrent(index);
  46 + $scope.state.src = $scope.state.childrens[index].state.src;
  47 + $scope.setVisible(true);
  48 + };
58 49  
59   - $scope.handleClose = function () {
60   - $scope.setVisible(false);
61   - };
  50 + $scope.handleClose = function () {
  51 + $scope.setVisible(false);
  52 + };
62 53  
63   - $scope.handlePrev = function () {
64   - $scope.setCurrent(
65   - $scope.state.current > 0 ? $scope.state.current - 1 : 0
66   - );
67   - $scope.state.src =
68   - $scope.state.childrens[$scope.state.current].state.src;
69   - };
  54 + $scope.handlePrev = function () {
  55 + $scope.setCurrent($scope.state.current > 0 ? $scope.state.current - 1 : 0);
  56 + $scope.state.src = $scope.state.childrens[$scope.state.current].state.src;
  57 + };
70 58  
71   - $scope.handleNext = function () {
72   - $scope.setCurrent(
73   - $scope.state.current < $scope.state.childrens.length - 1
74   - ? $scope.state.current + 1
75   - : $scope.state.childrens.length - 1
76   - );
77   - $scope.state.src =
78   - $scope.state.childrens[$scope.state.current].state.src;
79   - };
  59 + $scope.handleNext = function () {
  60 + $scope.setCurrent($scope.state.current < $scope.state.childrens.length - 1 ? $scope.state.current + 1 : $scope.state.childrens.length - 1);
  61 + $scope.state.src = $scope.state.childrens[$scope.state.current].state.src;
  62 + };
80 63  
81   - $scope.handlePreview = function () {
82   - let className;
  64 + $scope.handlePreview = function () {
  65 + let className;
83 66  
84   - if ($attrs.class) {
85   - className = ` ${$attrs.class}`;
86   - }
  67 + if ($attrs.class) {
  68 + className = ` ${$attrs.class}`;
  69 + }
87 70  
88   - esNgAntd.createLayer(
89   - `
  71 + esNgAntd.createLayer(`
90 72 <div class="ant-image-preview-root${className}">
91 73 <div class="ant-image-preview-mask" ng-if="state.visible"></div>
92 74 <div class="ant-image-preview-wrap" ng-show="state.visible">
... ... @@ -114,19 +96,13 @@ angular
114 96 </div>
115 97 </div>
116 98 </div>
117   - `,
118   - $scope
119   - );
120   - };
121   - },
122   - link: function (
123   - $scope,
124   - $element,
125   - $attrs,
126   - $controllers,
127   - $transclude
128   - ) {
129   - $scope.handlePreview();
130   - },
131   - };
132   - });
  99 + `, $scope);
  100 + };
  101 +
  102 + $scope.parent = $scope.$parent;
  103 + },
  104 + link: function ($scope, $element, $attrs) {
  105 + $scope.handlePreview();
  106 + }
  107 + };
  108 +}]);
133 109 \ No newline at end of file
... ...
dist/ng-antd.js
... ... @@ -159,7 +159,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _For
159 159 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
160 160  
161 161 "use strict";
162   -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ant_design_icons_svg_es_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @ant-design/icons-svg/es/helpers */ \"./node_modules/@ant-design/icons-svg/es/helpers.js\");\n/* harmony import */ var _ant_design_icons_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @ant-design/icons-svg */ \"./node_modules/@ant-design/icons-svg/es/index.js\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdIcon\", [\"$compile\", function ($compile) {\n return {\n template: `<span class=\"anticon\"></span>`,\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n type: \"@\"\n },\n link: function ($scope) {\n let template = (0,_ant_design_icons_svg_es_helpers__WEBPACK_IMPORTED_MODULE_0__.renderIconDefinitionToSVGElement)(_ant_design_icons_svg__WEBPACK_IMPORTED_MODULE_1__[$scope.type], {\n extraSVGAttrs: {\n width: \"1em\",\n height: \"1em\",\n fill: \"currentColor\"\n }\n });\n $element.append(template);\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Icon/Icon.js?");
  162 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ant_design_icons_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @ant-design/icons-svg */ \"./node_modules/@ant-design/icons-svg/es/index.js\");\n/* harmony import */ var _ant_design_icons_svg_es_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @ant-design/icons-svg/es/helpers */ \"./node_modules/@ant-design/icons-svg/es/helpers.js\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdIcon\", [\"$compile\", function ($compile) {\n return {\n template: `<span class=\"anticon\"></span>`,\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n type: \"@\"\n },\n link: function ($scope, $element) {\n let template = (0,_ant_design_icons_svg_es_helpers__WEBPACK_IMPORTED_MODULE_0__.renderIconDefinitionToSVGElement)(_ant_design_icons_svg__WEBPACK_IMPORTED_MODULE_1__[$scope.type], {\n extraSVGAttrs: {\n width: \"1em\",\n height: \"1em\",\n fill: \"currentColor\"\n }\n });\n $element.append(template);\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Icon/Icon.js?");
163 163  
164 164 /***/ }),
165 165  
... ... @@ -170,7 +170,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ant
170 170 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
171 171  
172 172 "use strict";
173   -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Image_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Image.html */ \"./build/Image/Image.html\");\n/* harmony import */ var antd_lib_image_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/image/style/index.css */ \"./node_modules/antd/lib/image/style/index.css\");\n\n\nangular\n .module(\"esNgAntd\")\n .directive(\"antdImage\", function ($timeout, esNgAntd, $compile) {\n return {\n controllerAs: \"antdImage\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n src: \"@\",\n dSrc: \"@\",\n width: \"@\",\n height: \"@\",\n preview: \"@\",\n },\n template: _Image_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n src: \"data:image/png;base64,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\",\n // 可见性\n visible: false,\n // 有图片?\n hasImage: false,\n // 索引\n index: null,\n };\n\n $scope.handleOpen = function () {\n if ($scope.antdImagePreviewGroup) {\n $scope.antdImagePreviewGroup.handleOpen(\n $scope.state.index\n );\n return;\n }\n\n $scope.state.visible = true;\n };\n\n $scope.handleClose = function () {\n $scope.state.visible = false;\n };\n\n $scope.handlePreview = function () {\n let div = document.createElement(\"div\");\n div.innerHTML = `\n <div class=\"ant-image-preview-root\">\n <div class=\"ant-image-preview-mask\" ng-if=\"state.visible\"></div>\n <div class=\"ant-image-preview-wrap\" ng-show=\"state.visible\">\n <div class=\"ant-image-preview\">\n <div class=\"ant-image-preview-content\">\n <div class=\"ant-image-preview-body\">\n <ul class=\"ant-image-preview-operations\">\n <li class=\"ant-image-preview-operations-operation\">\n <span class=\"anticon anticon-close ant-image-preview-operations-icon\" ng-click=\"handleClose()\">\n <antd-icon type=\"CloseOutlined\"></antd-icon>\n </span>\n </li> \n </ul>\n <div class=\"ant-image-preview-img-wrapper\">\n <img class=\"ant-image-preview-img\" ng-src=\"{{state.src}}\"/>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n `;\n document.body.appendChild(div);\n $compile(div)($scope);\n };\n },\n require: [\"?^antdImagePreviewGroup\"],\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n let [antdImagePreviewGroup] = $controllers;\n esNgAntd.createStyle(\"ant-image\", antd_lib_image_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n let src = $scope.state.src;\n\n $element.children(\"img\")[0].onerror = function () {\n $timeout(function () {\n $scope.state.hasImage = false;\n $scope.state.src = src;\n }, 0);\n };\n\n if (\n $scope.dSrc !== \"undefined\" &&\n $scope.dSrc !== undefined &&\n $scope.dSrc !== null &&\n $scope.dSrc !== \"\"\n ) {\n $scope.state.hasImage = true;\n $scope.state.src = $scope.dSrc;\n }\n\n if (antdImagePreviewGroup) {\n $scope.antdImagePreviewGroup =\n antdImagePreviewGroup.getContext();\n $scope.state.index =\n $scope.antdImagePreviewGroup.addChildren($scope);\n } else {\n $scope.handlePreview();\n }\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/Image/Image.js?");
  173 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Image_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Image.html */ \"./build/Image/Image.html\");\n/* harmony import */ var antd_lib_image_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/image/style/index.css */ \"./node_modules/antd/lib/image/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdImage\", [\"$timeout\", \"esNgAntd\", \"$compile\", function ($timeout, esNgAntd, $compile) {\n return {\n template: _Image_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n src: \"@\",\n dSrc: \"@\",\n width: \"=\",\n height: \"=\",\n preview: \"=\"\n },\n require: [\"^?antdImagePreviewGroup\"],\n controller: function ($scope, $element) {\n $scope.state = {\n src: \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIantdRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==\",\n // 可见性\n visible: false,\n // 有图片?\n hasImage: false,\n // 索引\n index: null\n };\n\n $scope.handleOpen = function () {\n if ($scope.antdImagePreviewGroup) {\n $scope.antdImagePreviewGroup.handleOpen($scope.state.index);\n return;\n }\n\n $scope.state.visible = true;\n };\n\n $scope.handleClose = function () {\n $scope.state.visible = false;\n };\n\n $scope.handlePreview = function () {\n let div = document.createElement(\"div\");\n div.innerHTML = `\n <div class=\"ant-image-preview-root\">\n <div class=\"ant-image-preview-mask\" ng-if=\"state.visible\"></div>\n <div class=\"ant-image-preview-wrap\" ng-show=\"state.visible\">\n <div class=\"ant-image-preview\">\n <div class=\"ant-image-preview-content\">\n <div class=\"ant-image-preview-body\">\n <ul class=\"ant-image-preview-operations\">\n <li class=\"ant-image-preview-operations-operation\">\n <span class=\"anticon anticon-close ant-image-preview-operations-icon\" ng-click=\"handleClose()\">\n <antd-icon type=\"CloseOutlined\"></antd-icon>\n </span>\n </li> \n </ul>\n <div class=\"ant-image-preview-img-wrapper\">\n <img class=\"ant-image-preview-img\" ng-src=\"{{state.src}}\"/>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n `;\n document.body.appendChild(div);\n $compile(div)($scope);\n };\n },\n link: function ($scope, $element, $attrs, $controllers) {\n let [antdImagePreviewGroup] = $controllers;\n esNgAntd.createStyle(\"ant-image\", antd_lib_image_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n let src = $scope.state.src;\n\n $element.children(\"img\")[0].onerror = function () {\n $timeout(function () {\n $scope.state.hasImage = false;\n $scope.state.src = src;\n }, 0);\n };\n\n if ($scope.dSrc !== \"undefined\" && $scope.dSrc !== undefined && $scope.dSrc !== null && $scope.dSrc !== \"\") {\n $scope.state.hasImage = true;\n $scope.state.src = $scope.dSrc;\n }\n\n if (antdImagePreviewGroup) {\n $scope.antdImagePreviewGroup = antdImagePreviewGroup.getContext();\n $scope.state.index = $scope.antdImagePreviewGroup.addChildren($scope);\n } else {\n $scope.handlePreview();\n }\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Image/Image.js?");
174 174  
175 175 /***/ }),
176 176  
... ... @@ -181,7 +181,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Ima
181 181 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
182 182  
183 183 "use strict";
184   -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ImagePreviewGroup_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ImagePreviewGroup.html */ \"./build/ImagePreviewGroup/ImagePreviewGroup.html\");\n\nangular\n .module(\"esNgAntd\")\n .directive(\"antdImagePreviewGroup\", function (esNgAntd) {\n return {\n controllerAs: \"antdImagePreviewGroup\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n preview: \"=\",\n },\n template: _ImagePreviewGroup_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n current: 0,\n visible: false,\n src: null,\n childrens: [],\n };\n\n $scope.addChildren = function (children) {\n $scope.state.childrens.push(children);\n return $scope.state.childrens.length - 1;\n };\n\n $scope.setCurrent = function (value) {\n $scope.state.current = value;\n\n if (\n typeof $scope.preview === \"object\" &&\n typeof $scope.preview.onCurrentChange === \"function\"\n ) {\n $scope.preview.onCurrentChange(value);\n }\n };\n\n $scope.setVisible = function (value) {\n $scope.state.visible = value;\n\n if (\n typeof $scope.preview === \"object\" &&\n typeof $scope.preview.onVisibleChange === \"function\"\n ) {\n $scope.preview.onVisibleChange(value);\n }\n };\n\n $scope.handleOpen = function (index) {\n $scope.setCurrent(index);\n $scope.state.src = $scope.state.childrens[index].state.src;\n $scope.setVisible(true);\n };\n\n $scope.handleClose = function () {\n $scope.setVisible(false);\n };\n\n $scope.handlePrev = function () {\n $scope.setCurrent(\n $scope.state.current > 0 ? $scope.state.current - 1 : 0\n );\n $scope.state.src =\n $scope.state.childrens[$scope.state.current].state.src;\n };\n\n $scope.handleNext = function () {\n $scope.setCurrent(\n $scope.state.current < $scope.state.childrens.length - 1\n ? $scope.state.current + 1\n : $scope.state.childrens.length - 1\n );\n $scope.state.src =\n $scope.state.childrens[$scope.state.current].state.src;\n };\n\n $scope.handlePreview = function () {\n let className;\n\n if ($attrs.class) {\n className = ` ${$attrs.class}`;\n }\n\n esNgAntd.createLayer(\n `\n <div class=\"ant-image-preview-root${className}\">\n <div class=\"ant-image-preview-mask\" ng-if=\"state.visible\"></div>\n <div class=\"ant-image-preview-wrap\" ng-show=\"state.visible\">\n <div class=\"ant-image-preview\">\n <div class=\"ant-image-preview-content\">\n <div class=\"ant-image-preview-body\">\n <ul class=\"ant-image-preview-operations\">\n <li class=\"ant-image-preview-operations-operation\">\n <span class=\"anticon anticon-close ant-image-preview-operations-icon\" ng-click=\"handleClose()\">\n <antd-icon type=\"CloseOutlined\"></antd-icon>\n </span>\n </li> \n </ul>\n <div class=\"ant-image-preview-img-wrapper\">\n <img class=\"ant-image-preview-img\" ng-src=\"{{state.src}}\"/>\n </div>\n <div ng-class=\"{'ant-image-preview-switch-left': true, 'ant-image-preview-switch-left-disabled': state.current===0}\" ng-click=\"handlePrev()\">\n <antd-icon type=\"LeftOutlined\"></antd-icon>\n </div>\n <div ng-class=\"{'ant-image-preview-switch-right': true,'ant-image-preview-switch-right-disabled': (state.childrens.length-1)===state.current}\" ng-click=\"handleNext()\">\n <antd-icon type=\"RightOutlined\"></antd-icon>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n `,\n $scope\n );\n };\n },\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n $scope.handlePreview();\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/ImagePreviewGroup/ImagePreviewGroup.js?");
  184 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ImagePreviewGroup_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ImagePreviewGroup.html */ \"./build/ImagePreviewGroup/ImagePreviewGroup.html\");\n\nangular.module(\"esNgAntd\").directive(\"antdImagePreviewGroup\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _ImagePreviewGroup_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n preview: \"=\"\n },\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n current: 0,\n visible: false,\n src: null,\n childrens: []\n };\n\n $scope.addChildren = function (children) {\n $scope.state.childrens.push(children);\n return $scope.state.childrens.length - 1;\n };\n\n $scope.setCurrent = function (value) {\n $scope.state.current = value;\n\n if (typeof $scope.preview === \"object\" && typeof $scope.preview.onCurrentChange === \"function\") {\n $scope.preview.onCurrentChange(value);\n }\n };\n\n $scope.setVisible = function (value) {\n $scope.state.visible = value;\n\n if (typeof $scope.preview === \"object\" && typeof $scope.preview.onVisibleChange === \"function\") {\n $scope.preview.onVisibleChange(value);\n }\n };\n\n $scope.handleOpen = function (index) {\n $scope.setCurrent(index);\n $scope.state.src = $scope.state.childrens[index].state.src;\n $scope.setVisible(true);\n };\n\n $scope.handleClose = function () {\n $scope.setVisible(false);\n };\n\n $scope.handlePrev = function () {\n $scope.setCurrent($scope.state.current > 0 ? $scope.state.current - 1 : 0);\n $scope.state.src = $scope.state.childrens[$scope.state.current].state.src;\n };\n\n $scope.handleNext = function () {\n $scope.setCurrent($scope.state.current < $scope.state.childrens.length - 1 ? $scope.state.current + 1 : $scope.state.childrens.length - 1);\n $scope.state.src = $scope.state.childrens[$scope.state.current].state.src;\n };\n\n $scope.handlePreview = function () {\n let className;\n\n if ($attrs.class) {\n className = ` ${$attrs.class}`;\n }\n\n esNgAntd.createLayer(`\n <div class=\"ant-image-preview-root${className}\">\n <div class=\"ant-image-preview-mask\" ng-if=\"state.visible\"></div>\n <div class=\"ant-image-preview-wrap\" ng-show=\"state.visible\">\n <div class=\"ant-image-preview\">\n <div class=\"ant-image-preview-content\">\n <div class=\"ant-image-preview-body\">\n <ul class=\"ant-image-preview-operations\">\n <li class=\"ant-image-preview-operations-operation\">\n <span class=\"anticon anticon-close ant-image-preview-operations-icon\" ng-click=\"handleClose()\">\n <antd-icon type=\"CloseOutlined\"></antd-icon>\n </span>\n </li> \n </ul>\n <div class=\"ant-image-preview-img-wrapper\">\n <img class=\"ant-image-preview-img\" ng-src=\"{{state.src}}\"/>\n </div>\n <div ng-class=\"{'ant-image-preview-switch-left': true, 'ant-image-preview-switch-left-disabled': state.current===0}\" ng-click=\"handlePrev()\">\n <antd-icon type=\"LeftOutlined\"></antd-icon>\n </div>\n <div ng-class=\"{'ant-image-preview-switch-right': true,'ant-image-preview-switch-right-disabled': (state.childrens.length-1)===state.current}\" ng-click=\"handleNext()\">\n <antd-icon type=\"RightOutlined\"></antd-icon>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n `, $scope);\n };\n\n $scope.parent = $scope.$parent;\n },\n link: function ($scope, $element, $attrs) {\n $scope.handlePreview();\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/ImagePreviewGroup/ImagePreviewGroup.js?");
185 185  
186 186 /***/ }),
187 187  
... ...
example/image.html
... ... @@ -14,10 +14,10 @@
14 14 <div class="container" style="padding: 50px">
15 15 <!-- <es-image d-src="{{url}}" width="200" height="200"></es-image> -->
16 16  
17   - <es-image-preview-group>
18   - <es-image d-src="{{url}}" width="200" height="200"></es-image>
19   - <es-image d-src="{{url}}" width="200" height="200"></es-image>
20   - </es-image-preview-group>
  17 + <antd-image-preview-group>
  18 + <antd-image d-src="{{url}}" width="200" height="200"></antd-image>
  19 + <antd-image d-src="{{url}}" width="200" height="200"></antd-image>
  20 + </antd-image-preview-group>
21 21 </div>
22 22 </div>
23 23 <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script>
... ...
package.json
... ... @@ -12,7 +12,7 @@
12 12 "devDependencies": {
13 13 "@ant-design/icons-svg": "^4.2.1",
14 14 "antd": "^4.18.2",
15   - "beanboom": "^0.9.11",
  15 + "beanboom": "^0.9.13",
16 16 "css-loader": "^6.5.1",
17 17 "html-loader": "^3.0.1",
18 18 "style-loader": "^3.3.1",
... ...
src/Icon/Icon.js
... ... @@ -5,7 +5,7 @@ class Icon {
5 5  
6 6 useModules = ["$compile"];
7 7  
8   - constructor() {
  8 + constructor($element) {
9 9 let template = renderIconDefinitionToSVGElement(
10 10 iconsSvg[$scope.type],
11 11 {
... ...
src/Image/Image.js
... ... @@ -2,13 +2,7 @@ import template from &quot;./Image.html&quot;;
2 2 import style from "antd/lib/image/style/index.css";
3 3  
4 4 class Image {
5   - props = {
6   - src: String,
7   - dSrc: String,
8   - width: Number,
9   - height: Number,
10   - preview: Boolean
11   - };
  5 +
12 6 state = {
13 7 src: "data:image/png;base64,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",
14 8 // 可见性
... ... @@ -19,13 +13,12 @@ class Image {
19 13 index: null,
20 14 };
21 15  
22   - template = template;
23   -
24   - require = ["antdImagePreviewGroup"]
  16 + require = ["^?antdImagePreviewGroup"]
25 17  
26 18 useModules = ["$timeout", "esNgAntd", "$compile"];
27 19  
28   - constructor(antdImagePreviewGroup) {
  20 + constructor($element, $attrs, $controllers) {
  21 + let [antdImagePreviewGroup] = $controllers;
29 22 esNgAntd.createStyle("ant-image", style);
30 23 let src = this.state.src;
31 24 $element.children("img")[0].onerror = function () {
... ... @@ -92,4 +85,16 @@ class Image {
92 85 document.body.appendChild(div);
93 86 $compile(div)($scope);
94 87 }
  88 +
  89 + render() {
  90 + return template;
  91 + }
95 92 }
  93 +
  94 +Image.propTypes = {
  95 + src: PropTypes.string,
  96 + dSrc: PropTypes.string,
  97 + width: PropTypes.number,
  98 + height: PropTypes.number,
  99 + preview: PropTypes.boolean,
  100 +};
... ...
src/ImagePreviewGroup/ImagePreviewGroup.js
1 1 import template from "./ImagePreviewGroup.html";
2 2  
3 3 class ImagePreviewGroup {
4   - useModules = ["esNgAntd"];
5   -
6   - props = {
7   - preview: Object,
8   - };
9 4  
10   - template = template;
  5 + useModules = ["esNgAntd"];
11 6  
12 7 state = {
13 8 current: 0,
... ... @@ -16,7 +11,11 @@ class ImagePreviewGroup {
16 11 childrens: [],
17 12 };
18 13  
19   - constructor() {
  14 + context = true;
  15 +
  16 + parent = this.$parent;
  17 +
  18 + constructor($element, $attrs) {
20 19 this.handlePreview();
21 20 }
22 21  
... ... @@ -107,4 +106,12 @@ class ImagePreviewGroup {
107 106 $scope
108 107 );
109 108 }
  109 +
  110 + render() {
  111 + return template;
  112 + }
110 113 }
  114 +
  115 +ImagePreviewGroup.propTypes = {
  116 + preview: PropTypes.object,
  117 +};
... ...
yarn.lock
... ... @@ -1320,10 +1320,10 @@ babel-plugin-polyfill-regenerator@^0.2.3:
1320 1320 dependencies:
1321 1321 "@babel/helper-define-polyfill-provider" "^0.2.4"
1322 1322  
1323   -beanboom@^0.9.11:
1324   - version "0.9.11"
1325   - resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.9.11.tgz#c7fffdde52738464b1771e697e4cb70359667469"
1326   - integrity sha512-wZFVaCz3p2WscVemcPuh316j8yWTgf78mvNeSrXNPNou1Gj3BPSutj0Z9YQ9XZSal72MbXXmF2opNb7GjZ2kxw==
  1323 +beanboom@^0.9.13:
  1324 + version "0.9.13"
  1325 + resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.9.13.tgz#4b23a5eb31ee0cc34054c00748de79ff5fae670c"
  1326 + integrity sha512-3dntTdn/v5A/5cmZHZhOBGx3+DB2+XB/OrrHTskEPtYT6kjRAPcOpfLV4UAaMcStX5zw7aFt+UjmMzLZmpbF+Q==
1327 1327 dependencies:
1328 1328 "@babel/core" "^7.12.10"
1329 1329 "@babel/plugin-proposal-class-properties" "^7.13.0"
... ...