essa-platform / es-ng-antd

Commit 6fcf6aec262df4ffc2f6bdb60212f6955506b373

Authored by Imshann
1 parent 2c0a9da3

feat(popover): 优化组件

Showing 6 changed files with 270 additions and 251 deletions   Show diff stats
Inline Side-by-side
build/Common/Common.js
  Show/Hide comments   View file @6fcf6ae
@@ -59,5 +59,18 @@ angular.module("esNgAntd").service("esNgAntd", [ @@ -59,5 +59,18 @@ angular.module("esNgAntd").service("esNgAntd", [
59 document.body.appendChild(div); 59 document.body.appendChild(div);
60 $compile(div)(scope); 60 $compile(div)(scope);
61 }; 61 };
  62 +
  63 + this.getOffset = function (ele) {
  64 + if (!ele || ele.nodeType != 1) {
  65 + return;
  66 + }
  67 +
  68 + let rect = ele.getBoundingClientRect();
  69 + let doc = ele.ownerDocument.documentElement;
  70 + return {
  71 + top: rect.top + window.pageYOffset - doc.clientTop,
  72 + left: rect.left + window.pageXOffset - doc.clientLeft,
  73 + };
  74 + };
62 }, 75 },
63 ]); 76 ]);
build/Popover/Popover.js
  Show/Hide comments   View file @6fcf6ae
1 import template from "./Popover.html"; 1 import template from "./Popover.html";
2 -angular.module("esNgAntd").directive("esPopover", function ($compile) {  
3 - return {  
4 - controllerAs: "esPopover",  
5 - restrict: "E",  
6 - transclude: true,  
7 - replace: true,  
8 - scope: {  
9 - title: "@",  
10 - content: "@",  
11 - context: "=",  
12 - placement: "@",  
13 - getPopupContainer: "&",  
14 - },  
15 - template: template,  
16 - controller: function ($scope, $element) {  
17 - this.getContext = function () {  
18 - return $scope;  
19 - };  
20 -  
21 - $scope.state = {  
22 - visible: false,  
23 - content: $scope.content ? $scope.content : "",  
24 - clickTarget: null,  
25 - };  
26 -  
27 - $scope.myEvent = function () {  
28 - setTimeout(() => {  
29 - $scope.state.visible = false;  
30 - $scope.$apply();  
31 - document.body.removeEventListener("click", $scope.myEvent);  
32 - }, 0);  
33 - };  
34 -  
35 - $scope.handleClick = function () {  
36 - if ($scope.state.visible === false) {  
37 - // 气泡层（显示）  
38 - $scope.state.visible = true; // j  
39 -  
40 - $scope.handlePosition(); // 事件绑定  
41 -  
42 - document.body.addEventListener("click", $scope.myEvent);  
43 - } else { 2 +import style from "antd/lib/popover/style/index.css";
  3 +angular
  4 + .module("esNgAntd")
  5 + .directive("esPopover", function ($compile, esNgAntd) {
  6 + return {
  7 + controllerAs: "esPopover",
  8 + restrict: "E",
  9 + transclude: true,
  10 + replace: true,
  11 + scope: {
  12 + title: "@",
  13 + content: "@",
  14 + context: "=",
  15 + placement: "@",
  16 + getPopupContainer: "&",
  17 + },
  18 + template: template,
  19 + controller: function ($scope, $element, $attrs) {
  20 + this.getContext = function () {
  21 + return $scope;
  22 + };
  23 +
  24 + $scope.state = {
  25 + visible: false,
  26 + content: $scope.content ? $scope.content : "",
  27 + clickTarget: null,
  28 + };
  29 +
  30 + $scope.myEvent = function () {
44 setTimeout(() => { 31 setTimeout(() => {
45 $scope.state.visible = false; 32 $scope.state.visible = false;
46 $scope.$apply(); 33 $scope.$apply();
@@ -49,126 +36,142 @@ angular.module("esNgAntd").directive("esPopover", function ($compile) { @@ -49,126 +36,142 @@ angular.module("esNgAntd").directive("esPopover", function ($compile) {
49 $scope.myEvent 36 $scope.myEvent
50 ); 37 );
51 }, 0); 38 }, 0);
52 - }  
53 - }; 39 + };
  40 +
  41 + $scope.handleClick = function () {
  42 + if ($scope.state.visible === false) {
  43 + // 气泡层（显示）
  44 + $scope.state.visible = true; // 处理位置
  45 +
  46 + $scope.handlePosition(); // 事件绑定
  47 +
  48 + document.body.addEventListener("click", $scope.myEvent);
  49 + } else {
  50 + setTimeout(() => {
  51 + $scope.state.visible = false;
  52 + $scope.$apply();
  53 + document.body.removeEventListener(
  54 + "click",
  55 + $scope.myEvent
  56 + );
  57 + }, 0);
  58 + }
  59 + };
54 60
55 - $scope.showPopover = function () {  
56 - let popover = $scope.state.popover;  
57 - popover.classList.remove("ant-popover-hidden");  
58 - }; 61 + $scope.handlePosition = function () {
  62 + setTimeout(function () {
  63 + let popover =
  64 + $scope.state.popover.querySelector(".ant-popover");
59 65
60 - $scope.handlePosition = function () {  
61 - setTimeout(function () {  
62 - let popover =  
63 - $scope.state.popover.querySelector(".ant-popover");  
64 -  
65 - if ($scope.placement === "top") {  
66 - popover.style["top"] = $scope.getTop();  
67 - } else if ($scope.placement === "bottom") {  
68 - popover.style["top"] = $scope.getTop();  
69 - } 66 + if ($scope.placement === "top") {
  67 + popover.style["top"] = $scope.getTop();
  68 + } else if ($scope.placement === "bottom") {
  69 + popover.style["top"] = $scope.getTop();
  70 + }
70 71
71 - popover.style.left = $scope.getLeft() + "px";  
72 - }, 0);  
73 - }; 72 + popover.style.left = $scope.getLeft() + "px";
  73 + }, 0);
  74 + };
74 75
75 - $scope.getLeft = function () {  
76 - let parent = $scope.getPopupContainer();  
77 - let popover =  
78 - $scope.state.popover.querySelector(".ant-popover");  
79 - let target = $scope.state.target; 76 + $scope.getLeft = function () {
  77 + let parent = $scope.getPopupContainer();
  78 + let popover =
  79 + $scope.state.popover.querySelector(".ant-popover");
  80 + let target = $scope.state.target;
80 81
81 - if (parent) {  
82 - return -(popover.clientWidth / 2 - target.clientWidth / 2);  
83 - } else {  
84 - return (  
85 - $(target).offset().left -  
86 - (popover.clientWidth / 2 - target.clientWidth / 2)  
87 - );  
88 - }  
89 - };  
90 -  
91 - $scope.getTop = function () {  
92 - let parent = $scope.getPopupContainer();  
93 - let popover =  
94 - $scope.state.popover.querySelector(".ant-popover");  
95 - let target = $scope.state.target;  
96 -  
97 - if (parent) {  
98 - if ($scope.placement === "top") {  
99 - return -popover.clientHeight + "px";  
100 - } else if ($scope.placement === "bottom") {  
101 - }  
102 - } else {  
103 - if ($scope.placement === "top") {  
104 - return (  
105 - $(target).offset().top -  
106 - popover.clientHeight -  
107 - 4 +  
108 - "px" 82 + if (parent) {
  83 + return -(
  84 + popover.clientWidth / 2 -
  85 + target.clientWidth / 2
109 ); 86 );
110 - } else if ($scope.placement === "bottom") { 87 + } else {
  88 + let offset = esNgAntd.getOffset(target);
111 return ( 89 return (
112 - $(target).offset().top +  
113 - target.clientHeight +  
114 - 4 +  
115 - "px" 90 + offset.left -
  91 + (popover.clientWidth / 2 - target.clientWidth / 2)
116 ); 92 );
117 } 93 }
118 - }  
119 - };  
120 - },  
121 - link: function ($scope, $element, $attrs, $controllers, $transclude) {  
122 - $scope.state.target = $element[0];  
123 - let title = $scope.title  
124 - ? `<div class="ant-popover-title"><span>${$scope.title}</span></div>`  
125 - : "";  
126 - let content = `<div>  
127 - <div style="outline:none" ng-class="'ant-popover ant-popover-placement-${  
128 - $scope.placement  
129 - }'+(!state.visible?' ant-popover-hidden': '')"> 94 + };
  95 +
  96 + $scope.getTop = function () {
  97 + let parent = $scope.getPopupContainer();
  98 + let popover =
  99 + $scope.state.popover.querySelector(".ant-popover");
  100 + let target = $scope.state.target;
  101 +
  102 + if (parent) {
  103 + if ($scope.placement === "top") {
  104 + return -popover.clientHeight + "px";
  105 + } else if ($scope.placement === "bottom") {
  106 + }
  107 + } else {
  108 + let offset = esNgAntd.getOffset(target);
  109 +
  110 + if ($scope.placement === "top") {
  111 + return offset.top - popover.clientHeight - 4 + "px";
  112 + } else if ($scope.placement === "bottom") {
  113 + return offset.top + target.clientHeight + 4 + "px";
  114 + }
  115 + }
  116 + };
  117 + },
  118 + link: function (
  119 + $scope,
  120 + $element,
  121 + $attrs,
  122 + $controllers,
  123 + $transclude
  124 + ) {
  125 + esNgAntd.createStyle("ant-popover", style);
  126 + $scope.state.target = $element[0];
  127 + let title = $scope.title
  128 + ? `<div class="ant-popover-title"><span>${$scope.title}</span></div>`
  129 + : "";
  130 + 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': '')">
130 <div class="ant-popover-content"> 132 <div class="ant-popover-content">
131 - <div class="ant-popover-arrow"></div> 133 + <div class="ant-popover-arrow">
  134 + <span class="ant-popover-arrow-content"></span>
  135 + </div>
132 <div class="ant-popover-inner"> 136 <div class="ant-popover-inner">
133 <div> 137 <div>
134 ${title} 138 ${title}
135 - <div class="ant-popover-inner-content">  
136 - ${$scope.state.content.replace(  
137 - /\$scope/g,  
138 - "context"  
139 - )}  
140 - </div> 139 + <div class="ant-popover-inner-content"></div>
141 </div> 140 </div>
142 </div> 141 </div>
143 </div> 142 </div>
144 </div> 143 </div>
145 </div>`; 144 </div>`;
146 - let div = document.createElement("div");  
147 -  
148 - if (typeof $scope.getPopupContainer() === "function") {  
149 - $scope.state.popupContainer = $scope.getPopupContainer()();  
150 - }  
151 -  
152 - if (!$scope.state.popupContainer) {  
153 - div.style.position = "absolute";  
154 - div.style.top = "0px";  
155 - div.style.left = "0px";  
156 - div.style.width = "100%";  
157 - div.innerHTML = content;  
158 - document.body.appendChild(div);  
159 - } else {  
160 - div.innerHTML = content;  
161 - $scope.state.popupContainer.appendChild(div);  
162 - }  
163 -  
164 - div.addEventListener("click", function (event) {  
165 - event.stopPropagation();  
166 - });  
167 - $scope.state.target.addEventListener("click", (e) => {  
168 - e.stopPropagation();  
169 - });  
170 - $compile(div)($scope);  
171 - $scope.state.popover = div;  
172 - },  
173 - };  
174 -}); 145 + let div = document.createElement("div");
  146 +
  147 + if (typeof $scope.getPopupContainer() === "function") {
  148 + $scope.state.popupContainer = $scope.getPopupContainer()();
  149 + }
  150 +
  151 + if (!$scope.state.popupContainer) {
  152 + div.style.position = "absolute";
  153 + div.style.top = "0px";
  154 + div.style.left = "0px";
  155 + div.style.width = "100%";
  156 + div.innerHTML = content;
  157 + document.body.appendChild(div);
  158 + } else {
  159 + $scope.state.popupContainer.appendChild(div);
  160 + }
  161 +
  162 + div.addEventListener("click", function (event) {
  163 + event.stopPropagation();
  164 + });
  165 + $scope.state.target.addEventListener("click", (e) => {
  166 + e.stopPropagation();
  167 + });
  168 + $compile(div)($scope);
  169 + div.querySelector(".ant-popover-inner-content").innerHTML =
  170 + $scope.state.content;
  171 + $compile(div.querySelector(".ant-popover-inner-content"))(
  172 + $scope.$parent
  173 + );
  174 + $scope.state.popover = div;
  175 + },
  176 + };
  177 + });
@@ -104,7 +104,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Col @@ -104,7 +104,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Col
104 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 104 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
105 105
106 "use strict"; 106 "use strict";
107 -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/style/index.css */ \"./node_modules/antd/lib/style/index.css\");\n\nangular.module(\"esNgAntd\").service(\"esNgAntd\", [\n \"$compile\",\n function ($compile) {\n this.styleSheets = null;\n\n this.createStyle = function (key, style) {\n if (!document.querySelector(\"#antd\")) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", \"antd\");\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"].toString();\n document.head.appendChild(styleElement);\n }\n\n if (!document.querySelector(\"#\" + key)) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", key);\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = style.toString();\n document.head.appendChild(styleElement);\n\n if (this.styleSheets) {\n this.disableStyle(key);\n }\n }\n };\n\n this.disableStyle = function (name) {\n for (let i = 0; i < this.styleSheets.cssRules.length; i++) {\n let rule = this.styleSheets.cssRules[i];\n\n if (\n rule.selectorText &&\n rule.selectorText.indexOf(name) !== -1\n ) {\n rule.selectorText = rule.selectorText.replace(\n /\\.ant\\-/g,\n \".disabled-ant-\"\n );\n console.log(rule.selectorText);\n }\n }\n };\n\n this.conflict = function (filename) {\n for (let i = 0; i < document.styleSheets.length; i++) {\n const element = document.styleSheets[i];\n\n if (element.href && element.href.indexOf(filename) !== -1) {\n this.styleSheets = element;\n }\n }\n };\n\n this.createLayer = function (content, scope) {\n let div = document.createElement(\"div\");\n div.innerHTML = content;\n document.body.appendChild(div);\n $compile(div)(scope);\n };\n },\n]);\n\n\n//# sourceURL=webpack://ng-antd/./build/Common/Common.js?"); 107 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/style/index.css */ \"./node_modules/antd/lib/style/index.css\");\n\nangular.module(\"esNgAntd\").service(\"esNgAntd\", [\n \"$compile\",\n function ($compile) {\n this.styleSheets = null;\n\n this.createStyle = function (key, style) {\n if (!document.querySelector(\"#antd\")) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", \"antd\");\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"].toString();\n document.head.appendChild(styleElement);\n }\n\n if (!document.querySelector(\"#\" + key)) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", key);\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = style.toString();\n document.head.appendChild(styleElement);\n\n if (this.styleSheets) {\n this.disableStyle(key);\n }\n }\n };\n\n this.disableStyle = function (name) {\n for (let i = 0; i < this.styleSheets.cssRules.length; i++) {\n let rule = this.styleSheets.cssRules[i];\n\n if (\n rule.selectorText &&\n rule.selectorText.indexOf(name) !== -1\n ) {\n rule.selectorText = rule.selectorText.replace(\n /\\.ant\\-/g,\n \".disabled-ant-\"\n );\n console.log(rule.selectorText);\n }\n }\n };\n\n this.conflict = function (filename) {\n for (let i = 0; i < document.styleSheets.length; i++) {\n const element = document.styleSheets[i];\n\n if (element.href && element.href.indexOf(filename) !== -1) {\n this.styleSheets = element;\n }\n }\n };\n\n this.createLayer = function (content, scope) {\n let div = document.createElement(\"div\");\n div.innerHTML = content;\n document.body.appendChild(div);\n $compile(div)(scope);\n };\n\n this.getOffset = function (ele) {\n if (!ele || ele.nodeType != 1) {\n return;\n }\n\n let rect = ele.getBoundingClientRect();\n let doc = ele.ownerDocument.documentElement;\n return {\n top: rect.top + window.pageYOffset - doc.clientTop,\n left: rect.left + window.pageXOffset - doc.clientLeft,\n };\n };\n },\n]);\n\n\n//# sourceURL=webpack://ng-antd/./build/Common/Common.js?");
108 108
109 /***/ }), 109 /***/ }),
110 110
@@ -291,7 +291,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Pag @@ -291,7 +291,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Pag
291 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 291 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
292 292
293 "use strict"; 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\nangular.module(\"esNgAntd\").directive(\"esPopover\", function ($compile) {\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) {\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(\"click\", $scope.myEvent);\n }, 0);\n };\n\n $scope.handleClick = function () {\n if ($scope.state.visible === false) {\n // 气泡层（显示）\n $scope.state.visible = true; // j\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 let popover = $scope.state.popover;\n popover.classList.remove(\"ant-popover-hidden\");\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 -(popover.clientWidth / 2 - target.clientWidth / 2);\n } else {\n return (\n $(target).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 if ($scope.placement === \"top\") {\n return (\n $(target).offset().top -\n popover.clientHeight -\n 4 +\n \"px\"\n );\n } else if ($scope.placement === \"bottom\") {\n return (\n $(target).offset().top +\n target.clientHeight +\n 4 +\n \"px\"\n );\n }\n }\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\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-${\n $scope.placement\n }'+(!state.visible?' ant-popover-hidden': '')\">\n <div class=\"ant-popover-content\">\n <div class=\"ant-popover-arrow\"></div>\n <div class=\"ant-popover-inner\">\n <div>\n ${title}\n <div class=\"ant-popover-inner-content\">\n ${$scope.state.content.replace(\n /\\$scope/g,\n \"context\"\n )}\n </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 div.innerHTML = content;\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 $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, 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?");
295 295
296 /***/ }), 296 /***/ }),
297 297
@@ -9302,6 +9302,17 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac @@ -9302,6 +9302,17 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
9302 9302
9303 /***/ }), 9303 /***/ }),
9304 9304
  9305 +/***/ "./node_modules/antd/lib/popover/style/index.css":
  9306 +/*!*******************************************************!*\
  9307 + !*** ./node_modules/antd/lib/popover/style/index.css ***!
  9308 + \*******************************************************/
  9309 +/***/ ((module, __webpack_exports__, __webpack_require__) => {
  9310 +
  9311 +"use strict";
  9312 +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/* harmony import */ var _css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */\\n/* stylelint-disable no-duplicate-selectors */\\n/* stylelint-disable */\\n/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */\\n.ant-popover {\\n box-sizing: border-box;\\n margin: 0;\\n padding: 0;\\n color: rgba(0, 0, 0, 0.85);\\n font-size: 14px;\\n font-variant: tabular-nums;\\n line-height: 1.5715;\\n list-style: none;\\n font-feature-settings: 'tnum';\\n position: absolute;\\n top: 0;\\n left: 0;\\n z-index: 1030;\\n font-weight: normal;\\n white-space: normal;\\n text-align: left;\\n cursor: auto;\\n -webkit-user-select: text;\\n -moz-user-select: text;\\n -ms-user-select: text;\\n user-select: text;\\n}\\n.ant-popover::after {\\n position: absolute;\\n background: rgba(255, 255, 255, 0.01);\\n content: '';\\n}\\n.ant-popover-hidden {\\n display: none;\\n}\\n.ant-popover-placement-top,\\n.ant-popover-placement-topLeft,\\n.ant-popover-placement-topRight {\\n padding-bottom: 10px;\\n}\\n.ant-popover-placement-right,\\n.ant-popover-placement-rightTop,\\n.ant-popover-placement-rightBottom {\\n padding-left: 10px;\\n}\\n.ant-popover-placement-bottom,\\n.ant-popover-placement-bottomLeft,\\n.ant-popover-placement-bottomRight {\\n padding-top: 10px;\\n}\\n.ant-popover-placement-left,\\n.ant-popover-placement-leftTop,\\n.ant-popover-placement-leftBottom {\\n padding-right: 10px;\\n}\\n.ant-popover-inner {\\n background-color: #fff;\\n background-clip: padding-box;\\n border-radius: 2px;\\n box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);\\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) \\\\9;\\n}\\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\\n .ant-popover {\\n /* IE10+ */\\n }\\n .ant-popover-inner {\\n box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);\\n }\\n}\\n.ant-popover-title {\\n min-width: 177px;\\n min-height: 32px;\\n margin: 0;\\n padding: 5px 16px 4px;\\n color: rgba(0, 0, 0, 0.85);\\n font-weight: 500;\\n border-bottom: 1px solid #f0f0f0;\\n}\\n.ant-popover-inner-content {\\n padding: 12px 16px;\\n color: rgba(0, 0, 0, 0.85);\\n}\\n.ant-popover-message {\\n position: relative;\\n padding: 4px 0 12px;\\n color: rgba(0, 0, 0, 0.85);\\n font-size: 14px;\\n}\\n.ant-popover-message > .anticon {\\n position: absolute;\\n top: 8.0005px;\\n color: #faad14;\\n font-size: 14px;\\n}\\n.ant-popover-message-title {\\n padding-left: 22px;\\n}\\n.ant-popover-buttons {\\n margin-bottom: 4px;\\n text-align: right;\\n}\\n.ant-popover-buttons button {\\n margin-left: 8px;\\n}\\n.ant-popover-arrow {\\n position: absolute;\\n display: block;\\n width: 8.48528137px;\\n height: 8.48528137px;\\n overflow: hidden;\\n background: transparent;\\n pointer-events: none;\\n}\\n.ant-popover-arrow-content {\\n position: absolute;\\n top: 0;\\n right: 0;\\n bottom: 0;\\n left: 0;\\n display: block;\\n width: 6px;\\n height: 6px;\\n margin: auto;\\n background-color: #fff;\\n content: '';\\n pointer-events: auto;\\n}\\n.ant-popover-placement-top .ant-popover-arrow,\\n.ant-popover-placement-topLeft .ant-popover-arrow,\\n.ant-popover-placement-topRight .ant-popover-arrow {\\n bottom: 1.51471863px;\\n}\\n.ant-popover-placement-top .ant-popover-arrow-content,\\n.ant-popover-placement-topLeft .ant-popover-arrow-content,\\n.ant-popover-placement-topRight .ant-popover-arrow-content {\\n box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);\\n transform: translateY(-4.24264069px) rotate(45deg);\\n}\\n.ant-popover-placement-top .ant-popover-arrow {\\n left: 50%;\\n transform: translateX(-50%);\\n}\\n.ant-popover-placement-topLeft .ant-popover-arrow {\\n left: 16px;\\n}\\n.ant-popover-placement-topRight .ant-popover-arrow {\\n right: 16px;\\n}\\n.ant-popover-placement-right .ant-popover-arrow,\\n.ant-popover-placement-rightTop .ant-popover-arrow,\\n.ant-popover-placement-rightBottom .ant-popover-arrow {\\n left: 1.51471863px;\\n}\\n.ant-popover-placement-right .ant-popover-arrow-content,\\n.ant-popover-placement-rightTop .ant-popover-arrow-content,\\n.ant-popover-placement-rightBottom .ant-popover-arrow-content {\\n box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);\\n transform: translateX(4.24264069px) rotate(45deg);\\n}\\n.ant-popover-placement-right .ant-popover-arrow {\\n top: 50%;\\n transform: translateY(-50%);\\n}\\n.ant-popover-placement-rightTop .ant-popover-arrow {\\n top: 12px;\\n}\\n.ant-popover-placement-rightBottom .ant-popover-arrow {\\n bottom: 12px;\\n}\\n.ant-popover-placement-bottom .ant-popover-arrow,\\n.ant-popover-placement-bottomLeft .ant-popover-arrow,\\n.ant-popover-placement-bottomRight .ant-popover-arrow {\\n top: 1.51471863px;\\n}\\n.ant-popover-placement-bottom .ant-popover-arrow-content,\\n.ant-popover-placement-bottomLeft .ant-popover-arrow-content,\\n.ant-popover-placement-bottomRight .ant-popover-arrow-content {\\n box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);\\n transform: translateY(4.24264069px) rotate(45deg);\\n}\\n.ant-popover-placement-bottom .ant-popover-arrow {\\n left: 50%;\\n transform: translateX(-50%);\\n}\\n.ant-popover-placement-bottomLeft .ant-popover-arrow {\\n left: 16px;\\n}\\n.ant-popover-placement-bottomRight .ant-popover-arrow {\\n right: 16px;\\n}\\n.ant-popover-placement-left .ant-popover-arrow,\\n.ant-popover-placement-leftTop .ant-popover-arrow,\\n.ant-popover-placement-leftBottom .ant-popover-arrow {\\n right: 1.51471863px;\\n}\\n.ant-popover-placement-left .ant-popover-arrow-content,\\n.ant-popover-placement-leftTop .ant-popover-arrow-content,\\n.ant-popover-placement-leftBottom .ant-popover-arrow-content {\\n box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);\\n transform: translateX(-4.24264069px) rotate(45deg);\\n}\\n.ant-popover-placement-left .ant-popover-arrow {\\n top: 50%;\\n transform: translateY(-50%);\\n}\\n.ant-popover-placement-leftTop .ant-popover-arrow {\\n top: 12px;\\n}\\n.ant-popover-placement-leftBottom .ant-popover-arrow {\\n bottom: 12px;\\n}\\n.ant-popover-pink .ant-popover-inner {\\n background-color: #eb2f96;\\n}\\n.ant-popover-pink .ant-popover-arrow-content {\\n background-color: #eb2f96;\\n}\\n.ant-popover-magenta .ant-popover-inner {\\n background-color: #eb2f96;\\n}\\n.ant-popover-magenta .ant-popover-arrow-content {\\n background-color: #eb2f96;\\n}\\n.ant-popover-red .ant-popover-inner {\\n background-color: #f5222d;\\n}\\n.ant-popover-red .ant-popover-arrow-content {\\n background-color: #f5222d;\\n}\\n.ant-popover-volcano .ant-popover-inner {\\n background-color: #fa541c;\\n}\\n.ant-popover-volcano .ant-popover-arrow-content {\\n background-color: #fa541c;\\n}\\n.ant-popover-orange .ant-popover-inner {\\n background-color: #fa8c16;\\n}\\n.ant-popover-orange .ant-popover-arrow-content {\\n background-color: #fa8c16;\\n}\\n.ant-popover-yellow .ant-popover-inner {\\n background-color: #fadb14;\\n}\\n.ant-popover-yellow .ant-popover-arrow-content {\\n background-color: #fadb14;\\n}\\n.ant-popover-gold .ant-popover-inner {\\n background-color: #faad14;\\n}\\n.ant-popover-gold .ant-popover-arrow-content {\\n background-color: #faad14;\\n}\\n.ant-popover-cyan .ant-popover-inner {\\n background-color: #13c2c2;\\n}\\n.ant-popover-cyan .ant-popover-arrow-content {\\n background-color: #13c2c2;\\n}\\n.ant-popover-lime .ant-popover-inner {\\n background-color: #a0d911;\\n}\\n.ant-popover-lime .ant-popover-arrow-content {\\n background-color: #a0d911;\\n}\\n.ant-popover-green .ant-popover-inner {\\n background-color: #52c41a;\\n}\\n.ant-popover-green .ant-popover-arrow-content {\\n background-color: #52c41a;\\n}\\n.ant-popover-blue .ant-popover-inner {\\n background-color: #1890ff;\\n}\\n.ant-popover-blue .ant-popover-arrow-content {\\n background-color: #1890ff;\\n}\\n.ant-popover-geekblue .ant-popover-inner {\\n background-color: #2f54eb;\\n}\\n.ant-popover-geekblue .ant-popover-arrow-content {\\n background-color: #2f54eb;\\n}\\n.ant-popover-purple .ant-popover-inner {\\n background-color: #722ed1;\\n}\\n.ant-popover-purple .ant-popover-arrow-content {\\n background-color: #722ed1;\\n}\\n.ant-popover-rtl {\\n direction: rtl;\\n text-align: right;\\n}\\n.ant-popover-rtl .ant-popover-message-title {\\n padding-right: 22px;\\n padding-left: 16px;\\n}\\n.ant-popover-rtl .ant-popover-buttons {\\n text-align: left;\\n}\\n.ant-popover-rtl .ant-popover-buttons button {\\n margin-right: 8px;\\n margin-left: 0;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://ng-antd/./node_modules/antd/lib/popover/style/index.css?");
  9313 +
  9314 +/***/ }),
  9315 +
9305 /***/ "./node_modules/antd/lib/radio/style/index.css": 9316 /***/ "./node_modules/antd/lib/radio/style/index.css":
9306 /*!*****************************************************!*\ 9317 /*!*****************************************************!*\
9307 !*** ./node_modules/antd/lib/radio/style/index.css ***! 9318 !*** ./node_modules/antd/lib/radio/style/index.css ***!
example/popover.html
  Show/Hide comments   View file @6fcf6ae
@@ -4,59 +4,36 @@ @@ -4,59 +4,36 @@
4 <head> 4 <head>
5 <meta charset="UTF-8" /> 5 <meta charset="UTF-8" />
6 <title></title> 6 <title></title>
7 - <link href="https://cdn.staticfile.org/antd/3.26.9/antd.css" rel="stylesheet" />  
8 - <style>  
9 -  
10 - </style>  
11 </head> 7 </head>
12 8
13 <body> 9 <body>
14 - <div ng-app="essa" ng-controller="mainCtrl"> 10 + <div ng-app="esNgAntd" ng-controller="mainCtrl">
15 <div class="container" style="margin: 200px"> 11 <div class="container" style="margin: 200px">
16 - <es-popover placement="bottom" content="{{content}}" context="context">  
17 - <button>Hover me</button> 12 + <es-popover placement="bottom" content="{{content}}" title="Title">
  13 + <es-button>Hover me</es-button>
18 </es-popover> 14 </es-popover>
19 - <es-popover placement="top" content="{{content}}" context="context"> 15 + <!-- <es-popover placement="top" content="{{content}}" context="context">
20 <button>Top</button> 16 <button>Top</button>
21 </es-popover> 17 </es-popover>
22 <es-popover style="position: fixed; left: 200px; top: 200px" placement="top" content="{{content}}" context="context" get-popup-container="handlePopupContainer" id="test"> 18 <es-popover style="position: fixed; left: 200px; top: 200px" placement="top" content="{{content}}" context="context" get-popup-container="handlePopupContainer" id="test">
23 <button>Fixed</button> 19 <button>Fixed</button>
24 - </es-popover> 20 + </es-popover> -->
25 </div> 21 </div>
26 </div> 22 </div>
27 <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>
28 - <script src="https://cdn.staticfile.org/jquery/3.3.0/jquery.min.js"></script> 24 + <script src="../dist/ng-antd.js"></script>
29 <script> 25 <script>
30 angular 26 angular
31 - .module("essa", []) 27 + .module("esNgAntd")
32 .controller("mainCtrl", function ($scope) { 28 .controller("mainCtrl", function ($scope) {
33 - $scope.context = $scope;  
34 - $scope.dataSource = [{  
35 - id: 1,  
36 - name: "aaa"  
37 - },  
38 - {  
39 - id: 2,  
40 - name: "bbb"  
41 - }]  
42 - $scope.handleAbc = function() {  
43 - alert(123123);  
44 - }  
45 - $scope.renderItem = function (item) {  
46 - return `<es-list-item>  
47 - <span>${item.name}</span>  
48 - <button ng-click="$scope.handleAbc()">Link</button>  
49 - </es-list-item>`;  
50 - }  
51 - $scope.content = `<es-list d-source="$scope.dataSource" render-item="$scope.renderItem(item)" context="context"></es-list>`;  
52 - // $scope.content = `<button ng-click="handleAbc()">1324123</button>`; 29 +
  30 + $scope.content = `<div><p>Content</p><p>Content</p></div>`;
53 31
54 - $scope.handlePopupContainer = function() {  
55 - return document.querySelector("#test"); 32 + $scope.handleClick = function () {
  33 + alert("I am click");
56 } 34 }
57 }); 35 });
58 </script> 36 </script>
59 - <script src="../dist/ng-antd.bundle.js"></script>  
60 </body> 37 </body>
61 38
62 </html> 39 </html>
63 \ No newline at end of file 40 \ No newline at end of file
src/Common/Common.js
  Show/Hide comments   View file @6fcf6ae
1 import baseStyle from "antd/lib/style/index.css"; 1 import baseStyle from "antd/lib/style/index.css";
2 2
3 -angular.module("esNgAntd").service("esNgAntd", ["$compile", function ($compile) {  
4 - this.styleSheets = null; 3 +angular.module("esNgAntd").service("esNgAntd", [
  4 + "$compile",
  5 + function ($compile) {
  6 + this.styleSheets = null;
5 7
6 - this.createStyle = function (key, style) {  
7 - if (!document.querySelector("#antd")) {  
8 - let styleElement = document.createElement("style");  
9 - styleElement.setAttribute("id", "antd");  
10 - styleElement.setAttribute("type", "text/css");  
11 - styleElement.innerHTML = baseStyle.toString();  
12 - document.head.appendChild(styleElement);  
13 - }  
14 - if (!document.querySelector("#" + key)) {  
15 - let styleElement = document.createElement("style");  
16 - styleElement.setAttribute("id", key);  
17 - styleElement.setAttribute("type", "text/css");  
18 - styleElement.innerHTML = style.toString();  
19 - document.head.appendChild(styleElement);  
20 - if (this.styleSheets) {  
21 - this.disableStyle(key); 8 + this.createStyle = function (key, style) {
  9 + if (!document.querySelector("#antd")) {
  10 + let styleElement = document.createElement("style");
  11 + styleElement.setAttribute("id", "antd");
  12 + styleElement.setAttribute("type", "text/css");
  13 + styleElement.innerHTML = baseStyle.toString();
  14 + document.head.appendChild(styleElement);
22 } 15 }
23 - }  
24 - }; 16 + if (!document.querySelector("#" + key)) {
  17 + let styleElement = document.createElement("style");
  18 + styleElement.setAttribute("id", key);
  19 + styleElement.setAttribute("type", "text/css");
  20 + styleElement.innerHTML = style.toString();
  21 + document.head.appendChild(styleElement);
  22 + if (this.styleSheets) {
  23 + this.disableStyle(key);
  24 + }
  25 + }
  26 + };
25 27
26 - this.disableStyle = function (name) {  
27 - for (let i = 0; i < this.styleSheets.cssRules.length; i++) {  
28 - let rule = this.styleSheets.cssRules[i];  
29 - if (rule.selectorText && rule.selectorText.indexOf(name) !== -1) {  
30 - rule.selectorText = rule.selectorText.replace(  
31 - /\.ant\-/g,  
32 - ".disabled-ant-"  
33 - );  
34 - console.log(rule.selectorText); 28 + this.disableStyle = function (name) {
  29 + for (let i = 0; i < this.styleSheets.cssRules.length; i++) {
  30 + let rule = this.styleSheets.cssRules[i];
  31 + if (
  32 + rule.selectorText &&
  33 + rule.selectorText.indexOf(name) !== -1
  34 + ) {
  35 + rule.selectorText = rule.selectorText.replace(
  36 + /\.ant\-/g,
  37 + ".disabled-ant-"
  38 + );
  39 + console.log(rule.selectorText);
  40 + }
35 } 41 }
36 - }  
37 - }; 42 + };
38 43
39 - this.conflict = function (filename) {  
40 - for (let i = 0; i < document.styleSheets.length; i++) {  
41 - const element = document.styleSheets[i];  
42 - if (element.href && element.href.indexOf(filename) !== -1) {  
43 - this.styleSheets = element; 44 + this.conflict = function (filename) {
  45 + for (let i = 0; i < document.styleSheets.length; i++) {
  46 + const element = document.styleSheets[i];
  47 + if (element.href && element.href.indexOf(filename) !== -1) {
  48 + this.styleSheets = element;
  49 + }
44 } 50 }
45 - }  
46 - }; 51 + };
  52 +
  53 + this.createLayer = function (content, scope) {
  54 + let div = document.createElement("div");
  55 + div.innerHTML = content;
  56 + document.body.appendChild(div);
  57 + $compile(div)(scope);
  58 + };
47 59
48 - this.createLayer = function (content, scope) {  
49 - let div = document.createElement("div");  
50 - div.innerHTML = content;  
51 - document.body.appendChild(div);  
52 - $compile(div)(scope);  
53 - };  
54 -}]); 60 + this.getOffset = function (ele) {
  61 + if (!ele || ele.nodeType != 1) {
  62 + return;
  63 + }
  64 + let rect = ele.getBoundingClientRect();
  65 + let doc = ele.ownerDocument.documentElement;
  66 + return {
  67 + top: rect.top + window.pageYOffset - doc.clientTop,
  68 + left: rect.left + window.pageXOffset - doc.clientLeft,
  69 + };
  70 + };
  71 + },
  72 +]);
src/Popover/Popover.js
  Show/Hide comments   View file @6fcf6ae
1 import template from "./Popover.html"; 1 import template from "./Popover.html";
  2 +import style from "antd/lib/popover/style/index.css";
2 3
3 class Popover { 4 class Popover {
  5 +
  6 + template = template;
  7 +
  8 + useModules = ["$compile", "esNgAntd"];
  9 +
4 props = { 10 props = {
5 title: String, 11 title: String,
6 content: String, 12 content: String,
@@ -15,11 +21,8 @@ class Popover { @@ -15,11 +21,8 @@ class Popover {
15 clickTarget: null, 21 clickTarget: null,
16 }; 22 };
17 23
18 - template = template;  
19 -  
20 - useModules = ["$compile"];  
21 -  
22 constructor() { 24 constructor() {
  25 + esNgAntd.createStyle("ant-popover", style);
23 this.state.target = $element[0]; 26 this.state.target = $element[0];
24 let title = this.props.title 27 let title = this.props.title
25 ? `<div class="ant-popover-title"><span>${this.props.title}</span></div>` 28 ? `<div class="ant-popover-title"><span>${this.props.title}</span></div>`
@@ -27,18 +30,15 @@ class Popover { @@ -27,18 +30,15 @@ class Popover {
27 let content = `<div> 30 let content = `<div>
28 <div style="outline:none" ng-class="'ant-popover ant-popover-placement-${ 31 <div style="outline:none" ng-class="'ant-popover ant-popover-placement-${
29 this.props.placement 32 this.props.placement
30 - }'+(!state.visible?' ant-popover-hidden': '')"> 33 + }'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')">
31 <div class="ant-popover-content"> 34 <div class="ant-popover-content">
32 - <div class="ant-popover-arrow"></div> 35 + <div class="ant-popover-arrow">
  36 + <span class="ant-popover-arrow-content"></span>
  37 + </div>
33 <div class="ant-popover-inner"> 38 <div class="ant-popover-inner">
34 <div> 39 <div>
35 ${title} 40 ${title}
36 - <div class="ant-popover-inner-content">  
37 - ${this.state.content.replace(  
38 - /\$scope/g,  
39 - "context"  
40 - )}  
41 - </div> 41 + <div class="ant-popover-inner-content"></div>
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
@@ -56,7 +56,6 @@ class Popover { @@ -56,7 +56,6 @@ class Popover {
56 div.innerHTML = content; 56 div.innerHTML = content;
57 document.body.appendChild(div); 57 document.body.appendChild(div);
58 } else { 58 } else {
59 - div.innerHTML = content;  
60 this.state.popupContainer.appendChild(div); 59 this.state.popupContainer.appendChild(div);
61 } 60 }
62 div.addEventListener("click", function (event) { 61 div.addEventListener("click", function (event) {
@@ -66,6 +65,8 @@ class Popover { @@ -66,6 +65,8 @@ class Popover {
66 e.stopPropagation(); 65 e.stopPropagation();
67 }); 66 });
68 $compile(div)($scope); 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)
69 this.state.popover = div; 70 this.state.popover = div;
70 } 71 }
71 72
@@ -81,7 +82,7 @@ class Popover { @@ -81,7 +82,7 @@ class Popover {
81 if (this.state.visible === false) { 82 if (this.state.visible === false) {
82 // 气泡层（显示） 83 // 气泡层（显示）
83 this.state.visible = true; 84 this.state.visible = true;
84 - // j 85 + // 处理位置
85 this.handlePosition(); 86 this.handlePosition();
86 // 事件绑定 87 // 事件绑定
87 document.body.addEventListener("click", this.myEvent); 88 document.body.addEventListener("click", this.myEvent);
@@ -94,11 +95,6 @@ class Popover { @@ -94,11 +95,6 @@ class Popover {
94 } 95 }
95 } 96 }
96 97
97 - showPopover() {  
98 - let popover = this.state.popover;  
99 - popover.classList.remove("ant-popover-hidden");  
100 - }  
101 -  
102 handlePosition() { 98 handlePosition() {
103 setTimeout(function () { 99 setTimeout(function () {
104 let popover = this.state.popover.querySelector(".ant-popover"); 100 let popover = this.state.popover.querySelector(".ant-popover");
@@ -118,9 +114,9 @@ class Popover { @@ -118,9 +114,9 @@ class Popover {
118 if (parent) { 114 if (parent) {
119 return -(popover.clientWidth / 2 - target.clientWidth / 2); 115 return -(popover.clientWidth / 2 - target.clientWidth / 2);
120 } else { 116 } else {
  117 + let offset = esNgAntd.getOffset(target);
121 return ( 118 return (
122 - $(target).offset().left -  
123 - (popover.clientWidth / 2 - target.clientWidth / 2) 119 + offset.left - (popover.clientWidth / 2 - target.clientWidth / 2)
124 ); 120 );
125 } 121 }
126 } 122 }
@@ -135,10 +131,11 @@ class Popover { @@ -135,10 +131,11 @@ class Popover {
135 } else if (this.props.placement === "bottom") { 131 } else if (this.props.placement === "bottom") {
136 } 132 }
137 } else { 133 } else {
  134 + let offset = esNgAntd.getOffset(target);
138 if (this.props.placement === "top") { 135 if (this.props.placement === "top") {
139 - return $(target).offset().top - popover.clientHeight - 4 + "px"; 136 + return offset.top - popover.clientHeight - 4 + "px";
140 } else if (this.props.placement === "bottom") { 137 } else if (this.props.placement === "bottom") {
141 - return $(target).offset().top + target.clientHeight + 4 + "px"; 138 + return offset.top + target.clientHeight + 4 + "px";
142 } 139 }
143 } 140 }
144 } 141 }