From fb741cbd8db1eaad223142880bcb17fde4be60fa Mon Sep 17 00:00:00 2001 From: Imshann <851188611@qq.com> Date: Wed, 23 Feb 2022 17:27:50 +0800 Subject: [PATCH] 优化divider组件 --- build/Common/Common.js | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------ build/Divider/Divider.js | 2 +- dist/ng-antd.js | 4 ++-- package.json | 2 +- yarn.lock | 8 ++++---- 5 files changed, 87 insertions(+), 14 deletions(-) diff --git a/build/Common/Common.js b/build/Common/Common.js index a052ce3..b15c834 100644 --- a/build/Common/Common.js +++ b/build/Common/Common.js @@ -1,8 +1,81 @@ import baseStyle from "antd/lib/style/index.css"; -angular.module("esNgAntd").directive(function () { - return { - restrict: "E", - replace: true, - transclude: true +angular.module("esNgAntd").service("esNgAntd", ["$compile", function ($compile) { + this.styleSheets = null; + this.conflictType = 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 (this.styleSheets) { + this.disableStyle("anticon"); + } + } + + 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); + } + } }; -}); \ No newline at end of file + + 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.indexOf("ant3") === -1) { + rule.selectorText = rule.selectorText.split(",").map(function (item) { + return ".ant3 " + item; + }).join(","); + } + } + }; + + this.conflict = function (filename, type) { + this.conflictType = type; + + 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.clearAttribute = function (element, attrs) { + for (const attr of attrs) { + element.removeAttribute(attr); + } + }; + + 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 + }; + }; +}]); \ No newline at end of file diff --git a/build/Divider/Divider.js b/build/Divider/Divider.js index 6d8ab22..9675278 100644 --- a/build/Divider/Divider.js +++ b/build/Divider/Divider.js @@ -1,5 +1,5 @@ -import style from "antd/lib/divider/style/index.css"; import template from "./Divider.html"; +import style from "antd/lib/divider/style/index.css"; angular.module("esNgAntd").directive("antdDivider", ["esNgAntd", function (esNgAntd) { return { template: template, diff --git a/dist/ng-antd.js b/dist/ng-antd.js index 33faee3..5863f9c 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\").directive(function () {\n return {\n restrict: \"E\",\n replace: true,\n transclude: true\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\", [\"$compile\", function ($compile) {\n this.styleSheets = null;\n this.conflictType = 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 if (this.styleSheets) {\n this.disableStyle(\"anticon\");\n }\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 (rule.selectorText && rule.selectorText.indexOf(name) !== -1 && rule.selectorText.indexOf(\"ant3\") === -1) {\n rule.selectorText = rule.selectorText.split(\",\").map(function (item) {\n return \".ant3 \" + item;\n }).join(\",\");\n }\n }\n };\n\n this.conflict = function (filename, type) {\n this.conflictType = type;\n\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.clearAttribute = function (element, attrs) {\n for (const attr of attrs) {\n element.removeAttribute(attr);\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//# sourceURL=webpack://ng-antd/./build/Common/Common.js?"); /***/ }), @@ -115,7 +115,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Divider_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Divider.html */ \"./build/Divider/Divider.html\");\n/* harmony import */ var antd_lib_divider_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/divider/style/index.css */ \"./node_modules/antd/lib/divider/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdDivider\", function (esNgAntd) {\n return {\n controllerAs: \"antdDivider\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n template: _Divider_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-divider\", antd_lib_divider_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Divider/Divider.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Divider_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Divider.html */ \"./build/Divider/Divider.html\");\n/* harmony import */ var antd_lib_divider_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/divider/style/index.css */ \"./node_modules/antd/lib/divider/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdDivider\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _Divider_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n link: function ($scope) {\n esNgAntd.createStyle(\"ant-divider\", antd_lib_divider_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Divider/Divider.js?"); /***/ }), diff --git a/package.json b/package.json index 9718a93..b3e64f8 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "devDependencies": { "@ant-design/icons-svg": "^4.2.1", "antd": "^4.18.2", - "beanboom": "^0.9.8", + "beanboom": "^0.9.9", "css-loader": "^6.5.1", "html-loader": "^3.0.1", "style-loader": "^3.3.1", diff --git a/yarn.lock b/yarn.lock index 48bdef7..51e2801 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1320,10 +1320,10 @@ babel-plugin-polyfill-regenerator@^0.2.3: dependencies: "@babel/helper-define-polyfill-provider" "^0.2.4" -beanboom@^0.9.8: - version "0.9.8" - resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.9.8.tgz#1b6512af484e2e302da9a1d4d48428a0c2bc7763" - integrity sha512-liLptwNuZqFxsCjkmQ0AByvQ30mmKqrUYn++DoyErnxKuvfYutWeloXcd3abW3BN6eHlxycrr7ft4Ha+qlXNcw== +beanboom@^0.9.9: + version "0.9.9" + resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.9.9.tgz#a055a5d404cba9e50ada5862bec0bc7f3ae3d427" + integrity sha512-hEkZ2IcEXT50T20OeZiaGUjQwlGTY3vMAqVOfKd/HqRzZIXD05Jv6xeimoW43HnFs5QDOveK5n9kahimURvf3w== dependencies: "@babel/core" "^7.12.10" "@babel/plugin-proposal-class-properties" "^7.13.0" -- libgit2 0.21.2