{"_id":"@buuug7/simplify-drawer","_rev":"3-89a038da29e21dd2c5fee3003f8f7e44","name":"@buuug7/simplify-drawer","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@buuug7/simplify-drawer","version":"0.1.0","author":{"name":"buuug7","email":"youpp@126.com"},"license":"ISC","_id":"@buuug7/simplify-drawer@0.1.0","maintainers":[{"name":"buuug7","email":"youpp@126.com"}],"homepage":"https://github.com/buuug7/simplify#readme","bugs":{"url":"https://github.com/buuug7/simplify/issues"},"dist":{"shasum":"8e590ee3e12718b2392525846d99ebfde0a17c2c","tarball":"https://registry.npmjs.org/@buuug7/simplify-drawer/-/simplify-drawer-0.1.0.tgz","fileCount":5,"integrity":"sha512-+nQCjIqIOYIeIQHzJWpab+Kjf1rWUVies0t5ltwLhR8P/3qafaWsbcmzSLQ3mz5w15HD7byhERPY1Kn6GIEGIA==","signatures":[{"sig":"MEYCIQD5oraKrrOvgoDFER576qcRkj2BCXZJZ9X77QX7DocDdAIhANvWoUOBBHoMuQ3hozs/lEQCZgLwNkR9/WZupUejLFCw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6gCNCRA9TVsSAnZWagAATT4QAJSGKkwFKAwoFGb1UZ9Z\nMq5GsodD1rV9FWEMNo0BLcXZmbuHNcwl9NPb8k/6sDXi1+PlVPaDrQJCUl1S\nFlOngUNDX5GfipnCP15q5D2Md4cQQj5j/8Wwg5IfClLkeWuOvIVQRHL3xdLy\n7odjtuiDStKE7pp4I5nw4QfpQvqqgFk+2szIO/oHSh3XYvw8HKLwX5VE142X\nvBwGPyQwAbTmAjFG3VhYmndmmvZyrvk40JpATEUXuzzb5PSHe39MEnuo3r6D\nhUWYM6IURzIyCh78olbf22q3PFYrKT75VdqsHGbVJS9C2nblSyn/Ioe2ZrYu\nLeXWcWwzy3kmLFboOgUHiYWYcQlocv2jQJguYb8wQF9LnyDkrX7qRHeHraNK\nxDhJ5f28oAMkC0832o9o1snobA739ZvVS+WdhwONlLobvhkSSpu4f9SZU6C4\npM6op/qLLK6UXdKKW9aAVNvqyAG8UJr/+qbWPKq3wLkbIO8z8HB/rK42w/9V\nNFrIdgkqTAo0VKkgT/vKMc5pQvp/R+hMPFkdoN6P7kWk9Q7r4Y46TEwc5mMX\nbDUrT1Jn2Gh1lHSD6op8jIOvkYPTOgZf/10PpBB7AZEKtNNdH3i4niwY7TLb\np0EGX8yDNd+uoueApuz3ttQwCJc7qkGMjfc766jjXAkpD/vtzgQRaXF7Sqzf\nlStQ\r\n=3bwM\r\n-----END PGP SIGNATURE-----\r\n"},"style":"index.css","gitHead":"274eec9f410aaed993ec7ce18228a687d42b5950","scripts":{},"_npmUser":{"name":"buuug7","email":"youpp@126.com"},"repository":{"url":"git+https://github.com/buuug7/simplify.git","type":"git","directory":"package/mask"},"_npmVersion":"7.18.1","description":"simplify drawer package","directories":{},"_nodeVersion":"14.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/simplify-drawer_0.1.0_1625948300766_0.22355114205620596","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@buuug7/simplify-drawer","version":"0.1.1","description":"simplify drawer package","style":"index.css","author":{"name":"buuug7","email":"youpp@126.com"},"license":"ISC","repository":{"type":"git","url":"git+https://github.com/buuug7/simplify.git","directory":"package/mask"},"publishConfig":{"access":"public"},"gitHead":"274eec9f410aaed993ec7ce18228a687d42b5950","scripts":{},"_id":"@buuug7/simplify-drawer@0.1.1","bugs":{"url":"https://github.com/buuug7/simplify/issues"},"homepage":"https://github.com/buuug7/simplify#readme","_integrity":"sha512-SJRtNpcDaJdB2WmzM71CAzSk70vRNIdjlXdGAbScXShdCoUCzx8Lo1XM/Z8y+4t3Ouv0JJyfVhOzQy64b/sLrw==","_resolved":"C:\\Users\\buuug7\\AppData\\Local\\Temp\\6c9db72015cc0b3cbedf1f810c77a2f3\\buuug7-simplify-drawer-0.1.1.tgz","_from":"file:buuug7-simplify-drawer-0.1.1.tgz","_nodeVersion":"20.19.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-SJRtNpcDaJdB2WmzM71CAzSk70vRNIdjlXdGAbScXShdCoUCzx8Lo1XM/Z8y+4t3Ouv0JJyfVhOzQy64b/sLrw==","shasum":"229aaf6d9aa12413c56047eb6aa2105cbc234639","tarball":"https://registry.npmjs.org/@buuug7/simplify-drawer/-/simplify-drawer-0.1.1.tgz","fileCount":7,"unpackedSize":14168,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCfolPscWYdsrkQRGC7DWsCkdA4UxcAiY7oXLxl231rHwIgDnYipqmBKCUdHwMy0dVeuZoALPgY6f6RrOx7bjNx3rA="}]},"_npmUser":{"name":"buuug7","email":"youpp@126.com"},"directories":{},"maintainers":[{"name":"buuug7","email":"youpp@126.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/simplify-drawer_0.1.1_1777962758656_0.7222353418537764"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-10T20:18:20.703Z","modified":"2026-05-05T06:32:38.917Z","0.1.0":"2021-07-10T20:18:20.899Z","0.1.1":"2026-05-05T06:32:38.808Z"},"bugs":{"url":"https://github.com/buuug7/simplify/issues"},"author":{"name":"buuug7","email":"youpp@126.com"},"license":"ISC","homepage":"https://github.com/buuug7/simplify#readme","repository":{"type":"git","url":"git+https://github.com/buuug7/simplify.git","directory":"package/mask"},"description":"simplify drawer package","maintainers":[{"name":"buuug7","email":"youpp@126.com"}],"readme":"# simplify drawer\r\n\r\n <p>\r\n    <a href=\"https://www.npmjs.com/package/@buuug7/simplify-drawer?minimal=true\">\r\n        <img src=\"https://img.shields.io/npm/v/@buuug7/simplify-drawer.svg\" alt=\"npm version\">\r\n  \t</a>\r\n  \t<a href=\"https://npmcharts.com/compare/@buuug7/simplify-drawer?minimal=true\">\r\n  \t    <img src=\"https://img.shields.io/npm/dm/@buuug7/simplify-drawer.svg\" alt=\"npm downloads\"> \r\n  \t</a>\r\n  \t<a href=\"#\">\r\n  \t   <img src=\"https://img.shields.io/bundlephobia/min/@buuug7/simplify-drawer.svg\" alt=\"minified size\"/>\r\n  \t</a>\r\n </p>\r\n\r\n## Install\r\n\r\ninstall `@buuug7/simplify-drawer` package via npm, and then import from `@buuug7/simplify-drawer/index.css` file.\r\n\r\n```\r\nnpm install @buuug7/simplify-drawer\r\n```\r\n\r\n[Demo examples](https://buuug7.github.io/simplify/drawer/index.html)\r\n\r\n## Usage\r\n\r\n\r\n\r\n```html\r\n<button id=\"show-drawer-1\" class=\"btn\" data-drawer=\"#drawer-1\">\r\n  show drawer\r\n</button>\r\n\r\n<div class=\"drawer\" id=\"drawer-1\">\r\n  <div class=\"header\">\r\n    <h4 class=\"title\">simplify drawer</h4>\r\n    <button class=\"btn btn-close\">close</button>\r\n  </div>\r\n  <div class=\"body\">\r\n    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi architecto\r\n    beatae consectetur dolorem, doloremque dolores ducimus eaque earum, ex ipsam\r\n    itaque iusto neque, quaerat quasi quisquam rem sit sunt voluptatem.\r\n  </div>\r\n</div>\r\n```\r\n\r\ninteract with javascript, mask is from `@buuug7/simplify-mask` package\r\n\r\n```javascript\r\ninitDrawer(\"#show-drawer-1\");\r\n\r\nfunction initDrawer(selector) {\r\n  const showDrawerBtn = document.querySelector(selector);\r\n  let mask;\r\n  showDrawerBtn.addEventListener(\"click\", () => {\r\n    drawer.classList.remove(\"hide\");\r\n    drawer.classList.add(\"show\");\r\n    mask = showMask();\r\n  });\r\n\r\n  const drawer = document.querySelector(showDrawerBtn.dataset.drawer);\r\n  const close = drawer.querySelector(\".btn-close\");\r\n\r\n  close.addEventListener(\"click\", () => {\r\n    drawer.classList.add(\"hide\");\r\n  });\r\n\r\n  drawer.addEventListener(\"transitionend\", (e) => {\r\n    const target = e.target;\r\n    const contains = target.classList.contains(\"hide\");\r\n    if (contains) {\r\n      drawer.classList.remove(\"hide\");\r\n      drawer.classList.remove(\"show\");\r\n      mask.close();\r\n    }\r\n  });\r\n  return drawer;\r\n}\r\n\r\nfunction showMask() {\r\n  const mask = document.createElement(\"div\");\r\n  mask.className = \"mask\";\r\n  document.body.appendChild(mask);\r\n  document.body.style.overflow = \"hidden\";\r\n  setTimeout(() => {\r\n    mask.classList.add(\"show\");\r\n  }, 0);\r\n\r\n  const close = (() => {\r\n    // remove mask after transition end\r\n    mask.addEventListener(\"transitionend\", (e) => {\r\n      const target = e.target;\r\n      const contains = target.classList.contains(\"hide\");\r\n      if (contains) {\r\n        document.body.removeChild(mask);\r\n        document.body.style.overflow = \"auto\";\r\n      }\r\n    });\r\n\r\n    return () => {\r\n      mask.classList.remove(\"show\");\r\n      mask.classList.add(\"hide\");\r\n    };\r\n  })();\r\n\r\n  return { instance: mask, close };\r\n}\r\n\r\n```\r\n","readmeFilename":"README.md"}