From 6fcf6aec262df4ffc2f6bdb60212f6955506b373 Mon Sep 17 00:00:00 2001 From: Imshann <851188611@qq.com> Date: Tue, 18 Jan 2022 17:23:23 +0800 Subject: [PATCH] feat(popover): 优化组件 --- build/Common/Common.js | 13 +++++++++++++ build/Popover/Popover.js | 297 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------------------------------------------------------------- dist/ng-antd.js | 15 +++++++++++++-- example/popover.html | 45 +++++++++++---------------------------------- src/Common/Common.js | 108 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------- src/Popover/Popover.js | 43 ++++++++++++++++++++----------------------- 6 files changed, 270 insertions(+), 251 deletions(-) diff --git a/build/Common/Common.js b/build/Common/Common.js index 77ea110..5387d98 100644 --- a/build/Common/Common.js +++ b/build/Common/Common.js @@ -59,5 +59,18 @@ angular.module("esNgAntd").service("esNgAntd", [ document.body.appendChild(div); $compile(div)(scope); }; + + this.getOffset = function (ele) { + if (!ele || ele.nodeType != 1) { + return; + } + + let rect = ele.getBoundingClientRect(); + let doc = ele.ownerDocument.documentElement; + return { + top: rect.top + window.pageYOffset - doc.clientTop, + left: rect.left + window.pageXOffset - doc.clientLeft, + }; + }; }, ]); diff --git a/build/Popover/Popover.js b/build/Popover/Popover.js index 0bffe97..6577d6c 100644 --- a/build/Popover/Popover.js +++ b/build/Popover/Popover.js @@ -1,46 +1,33 @@ import template from "./Popover.html"; -angular.module("esNgAntd").directive("esPopover", function ($compile) { - return { - controllerAs: "esPopover", - restrict: "E", - transclude: true, - replace: true, - scope: { - title: "@", - content: "@", - context: "=", - placement: "@", - getPopupContainer: "&", - }, - template: template, - controller: function ($scope, $element) { - this.getContext = function () { - return $scope; - }; - - $scope.state = { - visible: false, - content: $scope.content ? $scope.content : "", - clickTarget: null, - }; - - $scope.myEvent = function () { - setTimeout(() => { - $scope.state.visible = false; - $scope.$apply(); - document.body.removeEventListener("click", $scope.myEvent); - }, 0); - }; - - $scope.handleClick = function () { - if ($scope.state.visible === false) { - // 气泡层（显示） - $scope.state.visible = true; // j - - $scope.handlePosition(); // 事件绑定 - - document.body.addEventListener("click", $scope.myEvent); - } else { +import style from "antd/lib/popover/style/index.css"; +angular + .module("esNgAntd") + .directive("esPopover", function ($compile, esNgAntd) { + return { + controllerAs: "esPopover", + restrict: "E", + transclude: true, + replace: true, + scope: { + title: "@", + content: "@", + context: "=", + placement: "@", + getPopupContainer: "&", + }, + template: template, + controller: function ($scope, $element, $attrs) { + this.getContext = function () { + return $scope; + }; + + $scope.state = { + visible: false, + content: $scope.content ? $scope.content : "", + clickTarget: null, + }; + + $scope.myEvent = function () { setTimeout(() => { $scope.state.visible = false; $scope.$apply(); @@ -49,126 +36,142 @@ angular.module("esNgAntd").directive("esPopover", function ($compile) { $scope.myEvent ); }, 0); - } - }; + }; + + $scope.handleClick = function () { + if ($scope.state.visible === false) { + // 气泡层（显示） + $scope.state.visible = true; // 处理位置 + + $scope.handlePosition(); // 事件绑定 + + document.body.addEventListener("click", $scope.myEvent); + } else { + setTimeout(() => { + $scope.state.visible = false; + $scope.$apply(); + document.body.removeEventListener( + "click", + $scope.myEvent + ); + }, 0); + } + }; - $scope.showPopover = function () { - let popover = $scope.state.popover; - popover.classList.remove("ant-popover-hidden"); - }; + $scope.handlePosition = function () { + setTimeout(function () { + let popover = + $scope.state.popover.querySelector(".ant-popover"); - $scope.handlePosition = function () { - setTimeout(function () { - let popover = - $scope.state.popover.querySelector(".ant-popover"); - - if ($scope.placement === "top") { - popover.style["top"] = $scope.getTop(); - } else if ($scope.placement === "bottom") { - popover.style["top"] = $scope.getTop(); - } + if ($scope.placement === "top") { + popover.style["top"] = $scope.getTop(); + } else if ($scope.placement === "bottom") { + popover.style["top"] = $scope.getTop(); + } - popover.style.left = $scope.getLeft() + "px"; - }, 0); - }; + popover.style.left = $scope.getLeft() + "px"; + }, 0); + }; - $scope.getLeft = function () { - let parent = $scope.getPopupContainer(); - let popover = - $scope.state.popover.querySelector(".ant-popover"); - let target = $scope.state.target; + $scope.getLeft = function () { + let parent = $scope.getPopupContainer(); + let popover = + $scope.state.popover.querySelector(".ant-popover"); + let target = $scope.state.target; - if (parent) { - return -(popover.clientWidth / 2 - target.clientWidth / 2); - } else { - return ( - $(target).offset().left - - (popover.clientWidth / 2 - target.clientWidth / 2) - ); - } - }; - - $scope.getTop = function () { - let parent = $scope.getPopupContainer(); - let popover = - $scope.state.popover.querySelector(".ant-popover"); - let target = $scope.state.target; - - if (parent) { - if ($scope.placement === "top") { - return -popover.clientHeight + "px"; - } else if ($scope.placement === "bottom") { - } - } else { - if ($scope.placement === "top") { - return ( - $(target).offset().top - - popover.clientHeight - - 4 + - "px" + if (parent) { + return -( + popover.clientWidth / 2 - + target.clientWidth / 2 ); - } else if ($scope.placement === "bottom") { + } else { + let offset = esNgAntd.getOffset(target); return ( - $(target).offset().top + - target.clientHeight + - 4 + - "px" + offset.left - + (popover.clientWidth / 2 - target.clientWidth / 2) ); } - } - }; - }, - link: function ($scope, $element, $attrs, $controllers, $transclude) { - $scope.state.target = $element[0]; - let title = $scope.title - ? `
${$scope.title}
` - : ""; - let content = `
-
+ }; + + $scope.getTop = function () { + let parent = $scope.getPopupContainer(); + let popover = + $scope.state.popover.querySelector(".ant-popover"); + let target = $scope.state.target; + + if (parent) { + if ($scope.placement === "top") { + return -popover.clientHeight + "px"; + } else if ($scope.placement === "bottom") { + } + } else { + let offset = esNgAntd.getOffset(target); + + if ($scope.placement === "top") { + return offset.top - popover.clientHeight - 4 + "px"; + } else if ($scope.placement === "bottom") { + return offset.top + target.clientHeight + 4 + "px"; + } + } + }; + }, + link: function ( + $scope, + $element, + $attrs, + $controllers, + $transclude + ) { + esNgAntd.createStyle("ant-popover", style); + $scope.state.target = $element[0]; + let title = $scope.title + ? `
${$scope.title}
` + : ""; + let content = `
+
-
+
+ +
${title} -
- ${$scope.state.content.replace( - /\$scope/g, - "context" - )} -
+
`; - let div = document.createElement("div"); - - if (typeof $scope.getPopupContainer() === "function") { - $scope.state.popupContainer = $scope.getPopupContainer()(); - } - - if (!$scope.state.popupContainer) { - div.style.position = "absolute"; - div.style.top = "0px"; - div.style.left = "0px"; - div.style.width = "100%"; - div.innerHTML = content; - document.body.appendChild(div); - } else { - div.innerHTML = content; - $scope.state.popupContainer.appendChild(div); - } - - div.addEventListener("click", function (event) { - event.stopPropagation(); - }); - $scope.state.target.addEventListener("click", (e) => { - e.stopPropagation(); - }); - $compile(div)($scope); - $scope.state.popover = div; - }, - }; -}); + let div = document.createElement("div"); + + if (typeof $scope.getPopupContainer() === "function") { + $scope.state.popupContainer = $scope.getPopupContainer()(); + } + + if (!$scope.state.popupContainer) { + div.style.position = "absolute"; + div.style.top = "0px"; + div.style.left = "0px"; + div.style.width = "100%"; + div.innerHTML = content; + document.body.appendChild(div); + } else { + $scope.state.popupContainer.appendChild(div); + } + + div.addEventListener("click", function (event) { + event.stopPropagation(); + }); + $scope.state.target.addEventListener("click", (e) => { + e.stopPropagation(); + }); + $compile(div)($scope); + div.querySelector(".ant-popover-inner-content").innerHTML = + $scope.state.content; + $compile(div.querySelector(".ant-popover-inner-content"))( + $scope.$parent + ); + $scope.state.popover = div; + }, + }; + }); diff --git a/dist/ng-antd.js b/dist/ng-antd.js index bae7b50..e98415a 100644 --- a/dist/ng-antd.js +++ b/dist/ng-antd.js @@ -104,7 +104,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Col /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -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?"); +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?"); /***/ }), @@ -291,7 +291,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Pag /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -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 ? `
${$scope.title}
`\n : \"\";\n let content = `
\n
\n
\n
\n
\n
\n ${title}\n
\n ${$scope.state.content.replace(\n /\\$scope/g,\n \"context\"\n )}\n
\n
\n
\n
\n
\n
`;\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?"); +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 ? `
${$scope.title}
`\n : \"\";\n let content = `
\n
\n
\n
\n \n
\n
\n
\n ${title}\n
\n
\n
\n
\n
\n
`;\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?"); /***/ }), @@ -9302,6 +9302,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ }), +/***/ "./node_modules/antd/lib/popover/style/index.css": +/*!*******************************************************!*\ + !*** ./node_modules/antd/lib/popover/style/index.css ***! + \*******************************************************/ +/***/ ((module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +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?"); + +/***/ }), + /***/ "./node_modules/antd/lib/radio/style/index.css": /*!*****************************************************!*\ !*** ./node_modules/antd/lib/radio/style/index.css ***! diff --git a/example/popover.html b/example/popover.html index 8d9c126..13b8157 100644 --- a/example/popover.html +++ b/example/popover.html @@ -4,59 +4,36 @@ - - -
+
- - + + Hover me - +
- + - \ No newline at end of file diff --git a/src/Common/Common.js b/src/Common/Common.js index 8fdd3b7..c749b63 100644 --- a/src/Common/Common.js +++ b/src/Common/Common.js @@ -1,54 +1,72 @@ import baseStyle from "antd/lib/style/index.css"; -angular.module("esNgAntd").service("esNgAntd", ["$compile", function ($compile) { - this.styleSheets = null; +angular.module("esNgAntd").service("esNgAntd", [ + "$compile", + function ($compile) { + this.styleSheets = null; - this.createStyle = function (key, style) { - if (!document.querySelector("#antd")) { - let styleElement = document.createElement("style"); - styleElement.setAttribute("id", "antd"); - styleElement.setAttribute("type", "text/css"); - styleElement.innerHTML = baseStyle.toString(); - document.head.appendChild(styleElement); - } - if (!document.querySelector("#" + key)) { - let styleElement = document.createElement("style"); - styleElement.setAttribute("id", key); - styleElement.setAttribute("type", "text/css"); - styleElement.innerHTML = style.toString(); - document.head.appendChild(styleElement); - if (this.styleSheets) { - this.disableStyle(key); + this.createStyle = function (key, style) { + if (!document.querySelector("#antd")) { + let styleElement = document.createElement("style"); + styleElement.setAttribute("id", "antd"); + styleElement.setAttribute("type", "text/css"); + styleElement.innerHTML = baseStyle.toString(); + document.head.appendChild(styleElement); } - } - }; + if (!document.querySelector("#" + key)) { + let styleElement = document.createElement("style"); + styleElement.setAttribute("id", key); + styleElement.setAttribute("type", "text/css"); + styleElement.innerHTML = style.toString(); + document.head.appendChild(styleElement); + if (this.styleSheets) { + this.disableStyle(key); + } + } + }; - this.disableStyle = function (name) { - for (let i = 0; i < this.styleSheets.cssRules.length; i++) { - let rule = this.styleSheets.cssRules[i]; - if (rule.selectorText && rule.selectorText.indexOf(name) !== -1) { - rule.selectorText = rule.selectorText.replace( - /\.ant\-/g, - ".disabled-ant-" - ); - console.log(rule.selectorText); + this.disableStyle = function (name) { + for (let i = 0; i < this.styleSheets.cssRules.length; i++) { + let rule = this.styleSheets.cssRules[i]; + if ( + rule.selectorText && + rule.selectorText.indexOf(name) !== -1 + ) { + rule.selectorText = rule.selectorText.replace( + /\.ant\-/g, + ".disabled-ant-" + ); + console.log(rule.selectorText); + } } - } - }; + }; - this.conflict = function (filename) { - for (let i = 0; i < document.styleSheets.length; i++) { - const element = document.styleSheets[i]; - if (element.href && element.href.indexOf(filename) !== -1) { - this.styleSheets = element; + this.conflict = function (filename) { + for (let i = 0; i < document.styleSheets.length; i++) { + const element = document.styleSheets[i]; + if (element.href && element.href.indexOf(filename) !== -1) { + this.styleSheets = element; + } } - } - }; + }; + + this.createLayer = function (content, scope) { + let div = document.createElement("div"); + div.innerHTML = content; + document.body.appendChild(div); + $compile(div)(scope); + }; - this.createLayer = function (content, scope) { - let div = document.createElement("div"); - div.innerHTML = content; - document.body.appendChild(div); - $compile(div)(scope); - }; -}]); + this.getOffset = function (ele) { + if (!ele || ele.nodeType != 1) { + return; + } + let rect = ele.getBoundingClientRect(); + let doc = ele.ownerDocument.documentElement; + return { + top: rect.top + window.pageYOffset - doc.clientTop, + left: rect.left + window.pageXOffset - doc.clientLeft, + }; + }; + }, +]); diff --git a/src/Popover/Popover.js b/src/Popover/Popover.js index f4d8685..6066379 100644 --- a/src/Popover/Popover.js +++ b/src/Popover/Popover.js @@ -1,6 +1,12 @@ import template from "./Popover.html"; +import style from "antd/lib/popover/style/index.css"; class Popover { + + template = template; + + useModules = ["$compile", "esNgAntd"]; + props = { title: String, content: String, @@ -15,11 +21,8 @@ class Popover { clickTarget: null, }; - template = template; - - useModules = ["$compile"]; - constructor() { + esNgAntd.createStyle("ant-popover", style); this.state.target = $element[0]; let title = this.props.title ? `
${this.props.title}
` @@ -27,18 +30,15 @@ class Popover { let content = `
+ }'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')">
-
+
+ +
${title} -
- ${this.state.content.replace( - /\$scope/g, - "context" - )} -
+
@@ -56,7 +56,6 @@ class Popover { div.innerHTML = content; document.body.appendChild(div); } else { - div.innerHTML = content; this.state.popupContainer.appendChild(div); } div.addEventListener("click", function (event) { @@ -66,6 +65,8 @@ class Popover { e.stopPropagation(); }); $compile(div)($scope); + div.querySelector(".ant-popover-inner-content").innerHTML = this.state.content; + $compile(div.querySelector(".ant-popover-inner-content"))($scope.$parent) this.state.popover = div; } @@ -81,7 +82,7 @@ class Popover { if (this.state.visible === false) { // 气泡层（显示） this.state.visible = true; - // j + // 处理位置 this.handlePosition(); // 事件绑定 document.body.addEventListener("click", this.myEvent); @@ -94,11 +95,6 @@ class Popover { } } - showPopover() { - let popover = this.state.popover; - popover.classList.remove("ant-popover-hidden"); - } - handlePosition() { setTimeout(function () { let popover = this.state.popover.querySelector(".ant-popover"); @@ -118,9 +114,9 @@ class Popover { if (parent) { return -(popover.clientWidth / 2 - target.clientWidth / 2); } else { + let offset = esNgAntd.getOffset(target); return ( - $(target).offset().left - - (popover.clientWidth / 2 - target.clientWidth / 2) + offset.left - (popover.clientWidth / 2 - target.clientWidth / 2) ); } } @@ -135,10 +131,11 @@ class Popover { } else if (this.props.placement === "bottom") { } } else { + let offset = esNgAntd.getOffset(target); if (this.props.placement === "top") { - return $(target).offset().top - popover.clientHeight - 4 + "px"; + return offset.top - popover.clientHeight - 4 + "px"; } else if (this.props.placement === "bottom") { - return $(target).offset().top + target.clientHeight + 4 + "px"; + return offset.top + target.clientHeight + 4 + "px"; } } } -- libgit2 0.21.2