essa-platform / es-ng-antd

Commit ff56db901746cb29463cef91240493b445849696

Authored by Imshann
1 parent 6fcf6aec

优化

Showing 5 changed files with 98 additions and 13 deletions   Show diff stats
Inline Side-by-side
build/Popover/Popover.html
  Show/Hide comments   View file @ff56db9
1   -<div ng-style="{display:'inline-block'}" ng-click="handleClick()" ng-transclude></div>
2 1 \ No newline at end of file
  2 +<div ng-style="{display:'inline-block'}" ng-click="handleClick()" ng-mouseenter="onMouseEnter()" ng-mouseleave="onMouseLeave()" ng-transclude></div>
3 3 \ No newline at end of file
... ...
build/Popover/Popover.js
  Show/Hide comments   View file @ff56db9
... ... @@ -2,7 +2,7 @@ import template from &quot;./Popover.html&quot;;
2 2 import style from "antd/lib/popover/style/index.css";
3 3 angular
4 4 .module("esNgAntd")
5   - .directive("esPopover", function ($compile, esNgAntd) {
  5 + .directive("esPopover", function ($compile, $timeout, esNgAntd) {
6 6 return {
7 7 controllerAs: "esPopover",
8 8 restrict: "E",
... ... @@ -14,6 +14,7 @@ angular
14 14 context: "=",
15 15 placement: "@",
16 16 getPopupContainer: "&",
  17 + trigger: "@",
17 18 },
18 19 template: template,
19 20 controller: function ($scope, $element, $attrs) {
... ... @@ -25,6 +26,8 @@ angular
25 26 visible: false,
26 27 content: $scope.content ? $scope.content : "",
27 28 clickTarget: null,
  29 + trigger: $scope.trigger || "hover",
  30 + closing: false,
28 31 };
29 32  
30 33 $scope.myEvent = function () {
... ... @@ -39,6 +42,10 @@ angular
39 42 };
40 43  
41 44 $scope.handleClick = function () {
  45 + if ($scope.state.trigger !== "click") {
  46 + return;
  47 + }
  48 +
42 49 if ($scope.state.visible === false) {
43 50 // 气泡层（显示）
44 51 $scope.state.visible = true; // 处理位置
... ... @@ -58,6 +65,44 @@ angular
58 65 }
59 66 };
60 67  
  68 + $scope.showPopover = function () {
  69 + // 气泡层（显示）
  70 + $scope.state.visible = true; // 调整位置
  71 +
  72 + $scope.handlePosition();
  73 + };
  74 +
  75 + $scope.hidePopover = function () {
  76 + $scope.state.closing = true;
  77 + $timeout(function () {
  78 + if ($scope.state.closing === false) {
  79 + return;
  80 + }
  81 +
  82 + $scope.state.visible = false;
  83 + }, 100);
  84 + };
  85 +
  86 + $scope.onMouseEnter = function () {
  87 + if ($scope.state.trigger !== "hover") {
  88 + return;
  89 + }
  90 +
  91 + if ($scope.state.closing === true) {
  92 + $scope.state.closing = false;
  93 + }
  94 +
  95 + $scope.showPopover();
  96 + };
  97 +
  98 + $scope.onMouseLeave = function () {
  99 + if ($scope.state.trigger !== "hover") {
  100 + return;
  101 + }
  102 +
  103 + $scope.hidePopover();
  104 + };
  105 +
61 106 $scope.handlePosition = function () {
62 107 setTimeout(function () {
63 108 let popover =
... ... @@ -128,7 +173,7 @@ angular
128 173 ? `<div class="ant-popover-title"><span>${$scope.title}</span></div>`
129 174 : "";
130 175 let content = `<div>
131   - <div style="outline:none" ng-class="'ant-popover ant-popover-placement-${$scope.placement}'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')">
  176 + <div style="outline:none" ng-class="'ant-popover ant-popover-placement-${$scope.placement}'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')" ng-mouseleave="onMouseLeave()" ng-mouseenter="onMouseEnter()">
132 177 <div class="ant-popover-content">
133 178 <div class="ant-popover-arrow">
134 179 <span class="ant-popover-arrow-content"></span>
... ...
dist/ng-antd.js
  Show/Hide comments   View file @ff56db9
... ... @@ -291,7 +291,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Pag
291 291 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
292 292  
293 293 "use strict";
294   -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Popover_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Popover.html */ \"./build/Popover/Popover.html\");\n/* harmony import */ var antd_lib_popover_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/popover/style/index.css */ \"./node_modules/antd/lib/popover/style/index.css\");\n\n\nangular\n .module(\"esNgAntd\")\n .directive(\"esPopover\", function ($compile, esNgAntd) {\n return {\n controllerAs: \"esPopover\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n title: \"@\",\n content: \"@\",\n context: \"=\",\n placement: \"@\",\n getPopupContainer: \"&\",\n },\n template: _Popover_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 visible: false,\n content: $scope.content ? $scope.content : \"\",\n clickTarget: null,\n };\n\n $scope.myEvent = function () {\n setTimeout(() => {\n $scope.state.visible = false;\n $scope.$apply();\n document.body.removeEventListener(\n \"click\",\n $scope.myEvent\n );\n }, 0);\n };\n\n $scope.handleClick = function () {\n if ($scope.state.visible === false) {\n // 气泡层（显示）\n $scope.state.visible = true; // 处理位置\n\n $scope.handlePosition(); // 事件绑定\n\n document.body.addEventListener(\"click\", $scope.myEvent);\n } else {\n setTimeout(() => {\n $scope.state.visible = false;\n $scope.$apply();\n document.body.removeEventListener(\n \"click\",\n $scope.myEvent\n );\n }, 0);\n }\n };\n\n $scope.handlePosition = function () {\n setTimeout(function () {\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n\n if ($scope.placement === \"top\") {\n popover.style[\"top\"] = $scope.getTop();\n } else if ($scope.placement === \"bottom\") {\n popover.style[\"top\"] = $scope.getTop();\n }\n\n popover.style.left = $scope.getLeft() + \"px\";\n }, 0);\n };\n\n $scope.getLeft = function () {\n let parent = $scope.getPopupContainer();\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n let target = $scope.state.target;\n\n if (parent) {\n return -(\n popover.clientWidth / 2 -\n target.clientWidth / 2\n );\n } else {\n let offset = esNgAntd.getOffset(target);\n return (\n offset.left -\n (popover.clientWidth / 2 - target.clientWidth / 2)\n );\n }\n };\n\n $scope.getTop = function () {\n let parent = $scope.getPopupContainer();\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n let target = $scope.state.target;\n\n if (parent) {\n if ($scope.placement === \"top\") {\n return -popover.clientHeight + \"px\";\n } else if ($scope.placement === \"bottom\") {\n }\n } else {\n let offset = esNgAntd.getOffset(target);\n\n if ($scope.placement === \"top\") {\n return offset.top - popover.clientHeight - 4 + \"px\";\n } else if ($scope.placement === \"bottom\") {\n return offset.top + target.clientHeight + 4 + \"px\";\n }\n }\n };\n },\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n esNgAntd.createStyle(\"ant-popover\", antd_lib_popover_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n $scope.state.target = $element[0];\n let title = $scope.title\n ? `<div class=\"ant-popover-title\"><span>${$scope.title}</span></div>`\n : \"\";\n let content = `<div>\n <div style=\"outline:none\" ng-class=\"'ant-popover ant-popover-placement-${$scope.placement}'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')\">\n <div class=\"ant-popover-content\">\n <div class=\"ant-popover-arrow\">\n <span class=\"ant-popover-arrow-content\"></span>\n </div>\n <div class=\"ant-popover-inner\">\n <div>\n ${title}\n <div class=\"ant-popover-inner-content\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>`;\n let div = document.createElement(\"div\");\n\n if (typeof $scope.getPopupContainer() === \"function\") {\n $scope.state.popupContainer = $scope.getPopupContainer()();\n }\n\n if (!$scope.state.popupContainer) {\n div.style.position = \"absolute\";\n div.style.top = \"0px\";\n div.style.left = \"0px\";\n div.style.width = \"100%\";\n div.innerHTML = content;\n document.body.appendChild(div);\n } else {\n $scope.state.popupContainer.appendChild(div);\n }\n\n div.addEventListener(\"click\", function (event) {\n event.stopPropagation();\n });\n $scope.state.target.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n });\n $compile(div)($scope);\n div.querySelector(\".ant-popover-inner-content\").innerHTML =\n $scope.state.content;\n $compile(div.querySelector(\".ant-popover-inner-content\"))(\n $scope.$parent\n );\n $scope.state.popover = div;\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/Popover/Popover.js?");
  294 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Popover_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Popover.html */ \"./build/Popover/Popover.html\");\n/* harmony import */ var antd_lib_popover_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/popover/style/index.css */ \"./node_modules/antd/lib/popover/style/index.css\");\n\n\nangular\n .module(\"esNgAntd\")\n .directive(\"esPopover\", function ($compile, $timeout, esNgAntd) {\n return {\n controllerAs: \"esPopover\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n title: \"@\",\n content: \"@\",\n context: \"=\",\n placement: \"@\",\n getPopupContainer: \"&\",\n trigger: \"@\",\n },\n template: _Popover_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 visible: false,\n content: $scope.content ? $scope.content : \"\",\n clickTarget: null,\n trigger: $scope.trigger || \"hover\",\n closing: false,\n };\n\n $scope.myEvent = function () {\n setTimeout(() => {\n $scope.state.visible = false;\n $scope.$apply();\n document.body.removeEventListener(\n \"click\",\n $scope.myEvent\n );\n }, 0);\n };\n\n $scope.handleClick = function () {\n if ($scope.state.trigger !== \"click\") {\n return;\n }\n\n if ($scope.state.visible === false) {\n // 气泡层（显示）\n $scope.state.visible = true; // 处理位置\n\n $scope.handlePosition(); // 事件绑定\n\n document.body.addEventListener(\"click\", $scope.myEvent);\n } else {\n setTimeout(() => {\n $scope.state.visible = false;\n $scope.$apply();\n document.body.removeEventListener(\n \"click\",\n $scope.myEvent\n );\n }, 0);\n }\n };\n\n $scope.showPopover = function () {\n // 气泡层（显示）\n $scope.state.visible = true; // 调整位置\n\n $scope.handlePosition();\n };\n\n $scope.hidePopover = function () {\n $scope.state.closing = true;\n $timeout(function () {\n if ($scope.state.closing === false) {\n return;\n }\n\n $scope.state.visible = false;\n }, 100);\n };\n\n $scope.onMouseEnter = function () {\n if ($scope.state.trigger !== \"hover\") {\n return;\n }\n\n if ($scope.state.closing === true) {\n $scope.state.closing = false;\n }\n\n $scope.showPopover();\n };\n\n $scope.onMouseLeave = function () {\n if ($scope.state.trigger !== \"hover\") {\n return;\n }\n\n $scope.hidePopover();\n };\n\n $scope.handlePosition = function () {\n setTimeout(function () {\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n\n if ($scope.placement === \"top\") {\n popover.style[\"top\"] = $scope.getTop();\n } else if ($scope.placement === \"bottom\") {\n popover.style[\"top\"] = $scope.getTop();\n }\n\n popover.style.left = $scope.getLeft() + \"px\";\n }, 0);\n };\n\n $scope.getLeft = function () {\n let parent = $scope.getPopupContainer();\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n let target = $scope.state.target;\n\n if (parent) {\n return -(\n popover.clientWidth / 2 -\n target.clientWidth / 2\n );\n } else {\n let offset = esNgAntd.getOffset(target);\n return (\n offset.left -\n (popover.clientWidth / 2 - target.clientWidth / 2)\n );\n }\n };\n\n $scope.getTop = function () {\n let parent = $scope.getPopupContainer();\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n let target = $scope.state.target;\n\n if (parent) {\n if ($scope.placement === \"top\") {\n return -popover.clientHeight + \"px\";\n } else if ($scope.placement === \"bottom\") {\n }\n } else {\n let offset = esNgAntd.getOffset(target);\n\n if ($scope.placement === \"top\") {\n return offset.top - popover.clientHeight - 4 + \"px\";\n } else if ($scope.placement === \"bottom\") {\n return offset.top + target.clientHeight + 4 + \"px\";\n }\n }\n };\n },\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n esNgAntd.createStyle(\"ant-popover\", antd_lib_popover_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n $scope.state.target = $element[0];\n let title = $scope.title\n ? `<div class=\"ant-popover-title\"><span>${$scope.title}</span></div>`\n : \"\";\n let content = `<div>\n <div style=\"outline:none\" ng-class=\"'ant-popover ant-popover-placement-${$scope.placement}'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')\" ng-mouseleave=\"onMouseLeave()\" ng-mouseenter=\"onMouseEnter()\">\n <div class=\"ant-popover-content\">\n <div class=\"ant-popover-arrow\">\n <span class=\"ant-popover-arrow-content\"></span>\n </div>\n <div class=\"ant-popover-inner\">\n <div>\n ${title}\n <div class=\"ant-popover-inner-content\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>`;\n let div = document.createElement(\"div\");\n\n if (typeof $scope.getPopupContainer() === \"function\") {\n $scope.state.popupContainer = $scope.getPopupContainer()();\n }\n\n if (!$scope.state.popupContainer) {\n div.style.position = \"absolute\";\n div.style.top = \"0px\";\n div.style.left = \"0px\";\n div.style.width = \"100%\";\n div.innerHTML = content;\n document.body.appendChild(div);\n } else {\n $scope.state.popupContainer.appendChild(div);\n }\n\n div.addEventListener(\"click\", function (event) {\n event.stopPropagation();\n });\n $scope.state.target.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n });\n $compile(div)($scope);\n div.querySelector(\".ant-popover-inner-content\").innerHTML =\n $scope.state.content;\n $compile(div.querySelector(\".ant-popover-inner-content\"))(\n $scope.$parent\n );\n $scope.state.popover = div;\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/Popover/Popover.js?");
295 295  
296 296 /***/ }),
297 297  
... ... @@ -9661,7 +9661,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
9661 9661 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
9662 9662  
9663 9663 "use strict";
9664   -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<div ng-style=\\\"{display:'inline-block'}\\\" ng-click=\\\"handleClick()\\\" ng-transclude></div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Popover/Popover.html?");
  9664 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<div ng-style=\\\"{display:'inline-block'}\\\" ng-click=\\\"handleClick()\\\" ng-mouseenter=\\\"onMouseEnter()\\\" ng-mouseleave=\\\"onMouseLeave()\\\" ng-transclude></div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Popover/Popover.html?");
9665 9665  
9666 9666 /***/ }),
9667 9667  
... ...
src/Popover/Popover.html
  Show/Hide comments   View file @ff56db9
1   -<div style={{display: 'inline-block'}} onClick={this.handleClick}>{children}</div>
2 1 \ No newline at end of file
  2 +<div style={{display: 'inline-block'}} onClick={this.handleClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>{children}</div>
3 3 \ No newline at end of file
... ...
src/Popover/Popover.js
  Show/Hide comments   View file @ff56db9
... ... @@ -2,10 +2,9 @@ import template from &quot;./Popover.html&quot;;
2 2 import style from "antd/lib/popover/style/index.css";
3 3  
4 4 class Popover {
5   -
6 5 template = template;
7 6  
8   - useModules = ["$compile", "esNgAntd"];
  7 + useModules = ["$compile", "$timeout", "esNgAntd"];
9 8  
10 9 props = {
11 10 title: String,
... ... @@ -13,12 +12,15 @@ class Popover {
13 12 context: Object,
14 13 placement: String,
15 14 getPopupContainer: Function,
  15 + trigger: String,
16 16 };
17 17  
18 18 state = {
19 19 visible: false,
20 20 content: this.props.content ? this.props.content : "",
21 21 clickTarget: null,
  22 + trigger: this.props.trigger || "hover",
  23 + closing: false,
22 24 };
23 25  
24 26 constructor() {
... ... @@ -28,9 +30,7 @@ class Popover {
28 30 ? `<div class="ant-popover-title"><span>${this.props.title}</span></div>`
29 31 : "";
30 32 let content = `<div>
31   - <div style="outline:none" ng-class="'ant-popover ant-popover-placement-${
32   - this.props.placement
33   - }'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')">
  33 + <div style="outline:none" ng-class="'ant-popover ant-popover-placement-${this.props.placement}'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')" ng-mouseleave="onMouseLeave()" ng-mouseenter="onMouseEnter()">
34 34 <div class="ant-popover-content">
35 35 <div class="ant-popover-arrow">
36 36 <span class="ant-popover-arrow-content"></span>
... ... @@ -65,8 +65,11 @@ class Popover {
65 65 e.stopPropagation();
66 66 });
67 67 $compile(div)($scope);
68   - div.querySelector(".ant-popover-inner-content").innerHTML = this.state.content;
69   - $compile(div.querySelector(".ant-popover-inner-content"))($scope.$parent)
  68 + div.querySelector(".ant-popover-inner-content").innerHTML =
  69 + this.state.content;
  70 + $compile(div.querySelector(".ant-popover-inner-content"))(
  71 + $scope.$parent
  72 + );
70 73 this.state.popover = div;
71 74 }
72 75  
... ... @@ -79,6 +82,9 @@ class Popover {
79 82 }
80 83  
81 84 handleClick() {
  85 + if (this.state.trigger !== "click") {
  86 + return;
  87 + }
82 88 if (this.state.visible === false) {
83 89 // 气泡层（显示）
84 90 this.state.visible = true;
... ... @@ -95,6 +101,40 @@ class Popover {
95 101 }
96 102 }
97 103  
  104 + showPopover() {
  105 + // 气泡层（显示）
  106 + this.state.visible = true;
  107 + // 调整位置
  108 + this.handlePosition();
  109 + }
  110 +
  111 + hidePopover() {
  112 + this.state.closing = true;
  113 + $timeout(function () {
  114 + if (this.state.closing === false) {
  115 + return;
  116 + }
  117 + this.state.visible = false;
  118 + }, 100);
  119 + }
  120 +
  121 + onMouseEnter() {
  122 + if (this.state.trigger !== "hover") {
  123 + return;
  124 + }
  125 + if (this.state.closing === true) {
  126 + this.state.closing = false;
  127 + }
  128 + this.showPopover();
  129 + }
  130 +
  131 + onMouseLeave() {
  132 + if (this.state.trigger !== "hover") {
  133 + return;
  134 + }
  135 + this.hidePopover();
  136 + }
  137 +
98 138 handlePosition() {
99 139 setTimeout(function () {
100 140 let popover = this.state.popover.querySelector(".ant-popover");
... ...