sculp-js 0.1.1 → 1.0.1

package/lib/es/tooltip.js

@@ -0,0 +1,116 @@
+/*!
+ * sculp-js v1.0.0
+ * (c) 2023-2023 chandq
+ * Released under the MIT License.
+ */
+
+import { getStrWidthPx } from './string.js';
+
+/**
+ * @title tooltip
+ * @Desc 自定义的tooltip方法, 支持拖动悬浮提示
+ * Created by chendeqiao on 2017/5/8.
+ * @example
+ *  <span onmouseleave="handleMouseLeave('#root')" onmousemove="handleMouseEnter({rootElId: '#root', title: 'title content', event: event})"
+ * 		onmouseenter="handleMouseEnter({'#root', title: 'title content', event: event})">title content </span>
+ */
+/**
+ * 自定义title提示功能的mouseenter事件句柄
+ * @param {ITooltipParams} param1
+ * @returns {*}
+ */
+function handleMouseEnter({ rootElId = '#root', title, event }) {
+    try {
+        const $rootEl = document.querySelector(rootElId);
+        console.assert($rootEl !== null, `未找到id为 ${rootElId} 的dom元素`);
+        let $customTitle = null;
+        // 动态创建class样式，并加入到head中
+        if (!document.querySelector('.tooltip-inner1494304949567')) {
+            const tooltipWrapperClass = document.createElement('style');
+            tooltipWrapperClass.type = 'text/css';
+            tooltipWrapperClass.innerHTML = `
+        .tooltip-inner1494304949567 {
+          max-width: 250px;
+          padding: 3px 8px;
+          color: #fff;
+          text-decoration: none;
+          border-radius: 4px;
+          text-align: left;
+        }
+      `;
+            document.querySelector('head').appendChild(tooltipWrapperClass);
+        }
+        if (document.querySelector('#customTitle1494304949567')) {
+            $customTitle = document.querySelector('#customTitle1494304949567');
+            mouseenter($customTitle, title, event);
+        }
+        else {
+            const $contentContainer = document.createElement('div');
+            $contentContainer.className = 'customTitle';
+            $contentContainer.id = 'customTitle1494304949567';
+            $contentContainer.className = 'tooltip';
+            $contentContainer.style.cssText = 'z-index: 99999999; visibility: hidden;';
+            $contentContainer.innerHTML =
+                '<div class="tooltip-inner1494304949567" style="word-wrap: break-word; max-width: 44px;">皮肤</div>';
+            $rootEl.appendChild($contentContainer);
+            $customTitle = document.querySelector('#customTitle1494304949567');
+            if (title) {
+                //判断div显示的内容是否为空
+                mouseenter($customTitle, title, event);
+                $customTitle.style.visibility = 'visible';
+            }
+        }
+    }
+    catch (e) {
+        console.error(e.message);
+    }
+}
+/**
+ * 提示文案dom渲染的处理函数
+ * @param {HTMLDivElement} customTitle
+ * @param {string} title 提示的字符串
+ * @param {PointerEvent} e 事件对象
+ * @returns {*}
+ */
+function mouseenter($customTitle, title, e) {
+    let diffValueX = 200 + 50; //默认设置弹出div的宽度为250px
+    let x = 13;
+    const y = 23;
+    const $contentEle = $customTitle.children[0];
+    if (getStrWidthPx(title, 12) < 180 + 50) {
+        //【弹出div自适应字符串宽度】若显示的字符串占用宽度小于180，则设置弹出div的宽度为“符串占用宽度”+20
+        $contentEle.style.maxWidth = getStrWidthPx(title, 12) + 20 + 50 + 'px';
+        diffValueX = e.clientX + (getStrWidthPx(title, 12) + 50) - document.body.offsetWidth;
+    }
+    else {
+        $contentEle.style.maxWidth = '250px';
+        diffValueX = e.clientX + 230 - document.body.offsetWidth; //计算div水平方向显示的内容超出屏幕多少宽度
+    }
+    $contentEle.innerHTML = title; //html方法可解析内容中换行标签，text方法不能
+    if (diffValueX > 0) {
+        //水平方向超出可见区域时
+        x -= diffValueX;
+    }
+    $customTitle.style.top = e.clientY + y + 'px';
+    $customTitle.style.left = e.clientX + x + 'px';
+    $customTitle.style.maxWidth = '250px';
+    const diffValueY = $customTitle.getBoundingClientRect().top + $contentEle.offsetHeight - document.body.offsetHeight;
+    if (diffValueY > 0) {
+        //垂直方向超出可见区域时
+        $customTitle.style.top = e.clientY - diffValueY + 'px';
+    }
+}
+/**
+ * 移除提示文案dom的事件句柄
+ * @param {string} rootElId
+ * @returns {*}
+ */
+function handleMouseLeave(rootElId = '#root') {
+    const rootEl = document.querySelector(rootElId), titleEl = document.querySelector('#customTitle1494304949567');
+    if (rootEl && titleEl) {
+        rootEl.removeChild(titleEl);
+    }
+}
+const tooltipEvent = { handleMouseEnter, handleMouseLeave };
+
+export { tooltipEvent };

package/lib/es/type.js

@@ -1,9 +1,14 @@
 /*!
- * sculp-js v0.1.0
+ * sculp-js v1.0.0
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */
 
+/**
+ * 判断任意值的数据类型
+ * @param {unknown} any
+ * @returns {string}
+ */
 const typeIs = (any) => Object.prototype.toString.call(any).slice(8, -1);
 // 基本数据类型判断
 const isString = (any) => typeof any === 'string';
@@ -17,7 +22,11 @@ const isPrimitive = (any) => any === null || typeof any !== 'object';
 // 复合数据类型判断
 const isObject = (any) => typeIs(any) === 'Object';
 const isArray = (any) => Array.isArray(any);
-// eslint-disable-next-line @typescript-eslint/ban-types
+/**
+ * 判断是否为函数
+ * @param {unknown} any
+ * @returns {boolean}
+ */
 const isFunction = (any) => typeof any === 'function';
 // 对象类型判断
 const isNaN = (any) => Number.isNaN(any);

package/lib/es/unique.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v0.1.0
+ * sculp-js v1.0.0
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/es/url.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v0.1.0
+ * sculp-js v1.0.0
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */

package/lib/es/watermark.js

@@ -1,5 +1,5 @@
 /*!
- * sculp-js v0.1.0
+ * sculp-js v1.0.0
  * (c) 2023-2023 chandq
  * Released under the MIT License.
  */
@@ -11,17 +11,18 @@
  * @desc 网页加水印的工具类
  */
 /**
- * canvas 实现 watermark
+ * canvas 实现 水印, 具备防删除功能
  * @param {ICanvasWM} canvasWM
+ * @example genCanvasWM({ content: 'QQMusicFE' })
  */
-const genCanvasWM = (canvasWM) => {
+function genCanvasWM(canvasWM) {
     const { container = document.body, width = '300px', height = '200px', textAlign = 'center', textBaseline = 'middle', font = '20px PingFangSC-Medium,PingFang SC', 
     // fontWeight = 500,
     fillStyle = 'rgba(189, 177, 167, .3)', content = '请勿外传', rotate = 30, zIndex = 2147483647 } = canvasWM;
     // 仅限主页面添加水印
-    if (!location.pathname.includes('/home')) {
-        return;
-    }
+    // if (!location.pathname.includes('/home')) {
+    //   return;
+    // }
     const args = canvasWM;
     const canvas = document.createElement('canvas');
     canvas.setAttribute('width', width);
@@ -82,8 +83,6 @@ const genCanvasWM = (canvasWM) => {
         });
         mo.observe(container, { attributes: true, subtree: true, childList: true });
     }
-};
-// 调用
-// __canvasWM({ content: 'QQMusicFE' })
+}
 
 export { genCanvasWM };