npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mobile-text-selection

v0.2.0

Published

h5文本长按选择, 屏蔽了系统的弹窗.兼容ios和安卓. mobile terminal custom text selection, compatible width ios and android. long press pop-up window provided by the system are forbidden.

Downloads

18

Readme

mobile-text-selection 介绍

移动端 h5 长按选择文本的工具, 屏蔽了安卓和 ios 系统选中文本后的弹窗。

返回选中的文本、起始点和终点的坐标

mobile terminal custom text selection, compatible width ios and android. long press pop-up window provided by the system are forbidden.

安装

npm i mobile-text-selection

使用

import TextSelection from "mobile-text-selection";

// 自定义游标(右侧)
const customCursorDom = document.createElement("div");
customCursorDom.style.backgroundColor = "#1788bd";
customCursorDom.style.borderRadius = "0 50% 50% 50%";
customCursorDom.style.width = "50px";
customCursorDom.style.height = "50px";

const textWrapper = document.getElementById("textWrapper");
const textSelection = new TextSelection({
  container: textWrapper, // 容器 必须要传哦
  cursorDom: customDom, // 自定义游标dom 只传右侧就可以 可以不传 不传就是默认游标 如果传了 那么下面cursorColor就失效了
  cursorColor: "#1788bd", // 左右指针颜色 可以不传  "red" || "#333333" || "rgba(125,125,125)"
  rectsColor: "rgba(23,136,189,0.35)", // 选中文字的颜色 可以不传  "#333333aa" || "rgba(125,125,125, 0.5)" 需要是个透明色哦
  longTapDuration: 400, // 长按的时间 可以不传 默认是600
  magnifierWidth: 100, // 放大镜宽度 可以不传 默认100px 如果不想显示放大镜就把宽高都改成0
  magnifierHeight: 50, // 放大镜高度 可以不传 默认50px
  magnifierOffset: 50, // 放大镜向上偏移的距离 可以不传 默认50px
  magnifierBackgroundColor: '#fff', // 放大镜背景色 可以不传 默认和container背景一样(该配置项从 v0.1.2 起生效) 感谢@zangzimi
  menu: [ // 菜单 可以不传 默认是[]
    {
      key: "copy", // 必须要传
      icon: img.cloneNode(), // 图片dom 可以不传 默认没有
      text: "复制", // 文本
      click: (params) => { // 回调 params: {text: string}
        alert(`点击了复制: ${JSON.stringify(params)}`);
      },
    }
  ],
  menuColor: "#ffffff", // 菜单文字颜色 可以不传 默认#ffffff
  menuBackgroundColor: "#000000", // 菜单背景色 可以不传 默认#000000
  selectCb: () => {}, // 从0.1.3开始替换为onStart了  参数跟onStart一样
  finishCb: () => {}, // 从0.1.3开始替换为onFinish了  参数跟onFinish一样
  onStart: () => {}, // 开始选择的回调 可以不传
  onCancel: () => {}, // 失焦的回调 可以不传
  onFinish: ({
    text, // 选中的文字
    startX, //  相对于容器 前指针右侧第一个字的左上角的x坐标
    startY, //  相对于容器 前指针右侧第一个字的左上角的y坐标
    endX, //  相对于容器 后指针左侧第一个字的右上角的x坐标
    endY, // 相对于容器 后指针左侧第一个字的右上角的y坐标
  }) => {}, // 选完的回调 也可以不传
  tokenizer: (str) => {
    // 需要分词的文字
    // 需要返回分词起始位置和长度
    return [index, length];
  }, // 分词 可以不传
});
// 初始化
textSelection.init();

// 隐藏
textSelection.blur();

// 销毁
textSelection.destroy();

浏览器直接引入可见example/demo.html

Demo

demo (codesandbox)

alt demo (gif)

或者见example/demo.html

第一次学着写 npm 包(紧张

参考了easy-marker

浏览器使用的话请下载dist/mobile-text-selection.umd.js

更新记录

v0.1.0:

  • 增加了放大镜功能 创建时候增加了放大镜的配置项
  • 增加了游标交换的功能
  • 修复了每行选不到最后一个字的问题..

v0.1.1

  • 修复了放在 iframe 里游标不移动的情况
  • 修复了多次在同一个容器上创建 TextSelection 时候的叠加问题...
  • 阻止事件冒泡

v0.1.3

  • 增加 magnifierBackgroundColor 配置项

v0.1.4

  • 修复了container有margin的时候 放大镜内容错位的问题

v0.2.0

  • 支持游标自定义
  • 支持长按选中时调用端分词
  • 修改了回调函数名字 selectCb改成onStart finishCb改成onFinish
  • 增加失焦时候的onCancel回调
  • 增加长按结束弹出操作菜单
  • 改用rollup构建了
  • 修改 magnifierBackgroundColor配置项的默认值

待办

  • 如果容器有滚动条的话 出大问题额..
  • 游标之后可能还需要上下对称的 和字并排 像华为的浏览器里那样