Commit 1145f171aca3ef9e4b81894edf78014f53d615b4
1 parent
d8d2d2b0
优化Image相关组件
Showing
10 changed files
with
176 additions
and
210 deletions
Show diff stats
build/Icon/Icon.js
| 1 | -import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers"; | ||
| 2 | import * as iconsSvg from "@ant-design/icons-svg"; | 1 | import * as iconsSvg from "@ant-design/icons-svg"; |
| 2 | +import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers"; | ||
| 3 | angular.module("esNgAntd").directive("antdIcon", ["$compile", function ($compile) { | 3 | angular.module("esNgAntd").directive("antdIcon", ["$compile", function ($compile) { |
| 4 | return { | 4 | return { |
| 5 | template: `<span class="anticon"></span>`, | 5 | template: `<span class="anticon"></span>`, |
| @@ -9,7 +9,7 @@ angular.module("esNgAntd").directive("antdIcon", ["$compile", function ($compile | @@ -9,7 +9,7 @@ angular.module("esNgAntd").directive("antdIcon", ["$compile", function ($compile | ||
| 9 | scope: { | 9 | scope: { |
| 10 | type: "@" | 10 | type: "@" |
| 11 | }, | 11 | }, |
| 12 | - link: function ($scope) { | 12 | + link: function ($scope, $element) { |
| 13 | let template = renderIconDefinitionToSVGElement(iconsSvg[$scope.type], { | 13 | let template = renderIconDefinitionToSVGElement(iconsSvg[$scope.type], { |
| 14 | extraSVGAttrs: { | 14 | extraSVGAttrs: { |
| 15 | width: "1em", | 15 | width: "1em", |
build/Image/Image.js
| 1 | import template from "./Image.html"; | 1 | import template from "./Image.html"; |
| 2 | import style from "antd/lib/image/style/index.css"; | 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 | <div class="ant-image-preview-root"> | 44 | <div class="ant-image-preview-root"> |
| 53 | <div class="ant-image-preview-mask" ng-if="state.visible"></div> | 45 | <div class="ant-image-preview-mask" ng-if="state.visible"></div> |
| 54 | <div class="ant-image-preview-wrap" ng-show="state.visible"> | 46 | <div class="ant-image-preview-wrap" ng-show="state.visible"> |
| @@ -71,47 +63,33 @@ angular | @@ -71,47 +63,33 @@ angular | ||
| 71 | </div> | 63 | </div> |
| 72 | </div> | 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 | \ No newline at end of file | 96 | \ No newline at end of file |
build/ImagePreviewGroup/ImagePreviewGroup.js
| 1 | import template from "./ImagePreviewGroup.html"; | 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 | <div class="ant-image-preview-root${className}"> | 72 | <div class="ant-image-preview-root${className}"> |
| 91 | <div class="ant-image-preview-mask" ng-if="state.visible"></div> | 73 | <div class="ant-image-preview-mask" ng-if="state.visible"></div> |
| 92 | <div class="ant-image-preview-wrap" ng-show="state.visible"> | 74 | <div class="ant-image-preview-wrap" ng-show="state.visible"> |
| @@ -114,19 +96,13 @@ angular | @@ -114,19 +96,13 @@ angular | ||
| 114 | </div> | 96 | </div> |
| 115 | </div> | 97 | </div> |
| 116 | </div> | 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 | \ No newline at end of file | 109 | \ No newline at end of file |
dist/ng-antd.js
| @@ -159,7 +159,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _For | @@ -159,7 +159,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _For | ||
| 159 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { | 159 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 160 | 160 | ||
| 161 | "use strict"; | 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("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ant | @@ -170,7 +170,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ant | ||
| 170 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { | 170 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 171 | 171 | ||
| 172 | "use strict"; | 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,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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($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("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Ima | @@ -181,7 +181,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Ima | ||
| 181 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { | 181 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 182 | 182 | ||
| 183 | "use strict"; | 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,10 +14,10 @@ | ||
| 14 | <div class="container" style="padding: 50px"> | 14 | <div class="container" style="padding: 50px"> |
| 15 | <!-- <es-image d-src="{{url}}" width="200" height="200"></es-image> --> | 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 | </div> | 21 | </div> |
| 22 | </div> | 22 | </div> |
| 23 | <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script> | 23 | <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script> |
package.json
| @@ -12,7 +12,7 @@ | @@ -12,7 +12,7 @@ | ||
| 12 | "devDependencies": { | 12 | "devDependencies": { |
| 13 | "@ant-design/icons-svg": "^4.2.1", | 13 | "@ant-design/icons-svg": "^4.2.1", |
| 14 | "antd": "^4.18.2", | 14 | "antd": "^4.18.2", |
| 15 | - "beanboom": "^0.9.11", | 15 | + "beanboom": "^0.9.13", |
| 16 | "css-loader": "^6.5.1", | 16 | "css-loader": "^6.5.1", |
| 17 | "html-loader": "^3.0.1", | 17 | "html-loader": "^3.0.1", |
| 18 | "style-loader": "^3.3.1", | 18 | "style-loader": "^3.3.1", |
src/Icon/Icon.js
| @@ -5,7 +5,7 @@ class Icon { | @@ -5,7 +5,7 @@ class Icon { | ||
| 5 | 5 | ||
| 6 | useModules = ["$compile"]; | 6 | useModules = ["$compile"]; |
| 7 | 7 | ||
| 8 | - constructor() { | 8 | + constructor($element) { |
| 9 | let template = renderIconDefinitionToSVGElement( | 9 | let template = renderIconDefinitionToSVGElement( |
| 10 | iconsSvg[$scope.type], | 10 | iconsSvg[$scope.type], |
| 11 | { | 11 | { |
src/Image/Image.js
| @@ -2,13 +2,7 @@ import template from "./Image.html"; | @@ -2,13 +2,7 @@ import template from "./Image.html"; | ||
| 2 | import style from "antd/lib/image/style/index.css"; | 2 | import style from "antd/lib/image/style/index.css"; |
| 3 | 3 | ||
| 4 | class Image { | 4 | class Image { |
| 5 | - props = { | ||
| 6 | - src: String, | ||
| 7 | - dSrc: String, | ||
| 8 | - width: Number, | ||
| 9 | - height: Number, | ||
| 10 | - preview: Boolean | ||
| 11 | - }; | 5 | + |
| 12 | state = { | 6 | state = { |
| 13 | src: "data:image/png;base64,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", | 7 | src: "data:image/png;base64,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", |
| 14 | // 可见性 | 8 | // 可见性 |
| @@ -19,13 +13,12 @@ class Image { | @@ -19,13 +13,12 @@ class Image { | ||
| 19 | index: null, | 13 | index: null, |
| 20 | }; | 14 | }; |
| 21 | 15 | ||
| 22 | - template = template; | ||
| 23 | - | ||
| 24 | - require = ["antdImagePreviewGroup"] | 16 | + require = ["^?antdImagePreviewGroup"] |
| 25 | 17 | ||
| 26 | useModules = ["$timeout", "esNgAntd", "$compile"]; | 18 | useModules = ["$timeout", "esNgAntd", "$compile"]; |
| 27 | 19 | ||
| 28 | - constructor(antdImagePreviewGroup) { | 20 | + constructor($element, $attrs, $controllers) { |
| 21 | + let [antdImagePreviewGroup] = $controllers; | ||
| 29 | esNgAntd.createStyle("ant-image", style); | 22 | esNgAntd.createStyle("ant-image", style); |
| 30 | let src = this.state.src; | 23 | let src = this.state.src; |
| 31 | $element.children("img")[0].onerror = function () { | 24 | $element.children("img")[0].onerror = function () { |
| @@ -92,4 +85,16 @@ class Image { | @@ -92,4 +85,16 @@ class Image { | ||
| 92 | document.body.appendChild(div); | 85 | document.body.appendChild(div); |
| 93 | $compile(div)($scope); | 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 | import template from "./ImagePreviewGroup.html"; | 1 | import template from "./ImagePreviewGroup.html"; |
| 2 | 2 | ||
| 3 | class ImagePreviewGroup { | 3 | class ImagePreviewGroup { |
| 4 | - useModules = ["esNgAntd"]; | ||
| 5 | - | ||
| 6 | - props = { | ||
| 7 | - preview: Object, | ||
| 8 | - }; | ||
| 9 | 4 | ||
| 10 | - template = template; | 5 | + useModules = ["esNgAntd"]; |
| 11 | 6 | ||
| 12 | state = { | 7 | state = { |
| 13 | current: 0, | 8 | current: 0, |
| @@ -16,7 +11,11 @@ class ImagePreviewGroup { | @@ -16,7 +11,11 @@ class ImagePreviewGroup { | ||
| 16 | childrens: [], | 11 | childrens: [], |
| 17 | }; | 12 | }; |
| 18 | 13 | ||
| 19 | - constructor() { | 14 | + context = true; |
| 15 | + | ||
| 16 | + parent = this.$parent; | ||
| 17 | + | ||
| 18 | + constructor($element, $attrs) { | ||
| 20 | this.handlePreview(); | 19 | this.handlePreview(); |
| 21 | } | 20 | } |
| 22 | 21 | ||
| @@ -107,4 +106,12 @@ class ImagePreviewGroup { | @@ -107,4 +106,12 @@ class ImagePreviewGroup { | ||
| 107 | $scope | 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,10 +1320,10 @@ babel-plugin-polyfill-regenerator@^0.2.3: | ||
| 1320 | dependencies: | 1320 | dependencies: |
| 1321 | "@babel/helper-define-polyfill-provider" "^0.2.4" | 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 | dependencies: | 1327 | dependencies: |
| 1328 | "@babel/core" "^7.12.10" | 1328 | "@babel/core" "^7.12.10" |
| 1329 | "@babel/plugin-proposal-class-properties" "^7.13.0" | 1329 | "@babel/plugin-proposal-class-properties" "^7.13.0" |