{"_id":"@ctmobile/ui-swipeout","_rev":"2-2771acef5eed2c5fee7d5be3662349d2","name":"@ctmobile/ui-swipeout","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@ctmobile/ui-swipeout","version":"1.0.0","description":"支持移动端的UI组件-Swipeout","main":"lib/swipeoutlist.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","doc":"jsdoc src README.md -d doc -u doc/tutorials","buildpackage":"ctcopy ../src src && ctbuild --type buildpackage","buildumd":"ctcopy ../src src && ctbuild --type buildumd --packagename swipeout","link":"npm link @ctsj/build && npm link @ctmobile/ui-util"},"repository":{"type":"git","url":"git+https://github.com/playerljc/CTMobile-UI.git"},"keywords":["swipeout","CtMobile","CTMibole-UI","mobile","webapp","SPA","Hybrid","Cordova","Android","iOS","Material","playerljc","WebFramework"],"author":{"name":"playerljc","email":"playerljc@163.com"},"license":"MIT","bugs":{"url":"https://github.com/playerljc/CTMobile-UI/issues"},"homepage":"https://github.com/playerljc/CTMobile-UI#readme","dependencies":{"@babel/runtime":"^7.2.0","swiper":"^4.5.0"},"devDependencies":{"@ctsj/build":"^1.0.0"},"_id":"@ctmobile/ui-swipeout@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"playerljc","email":"playerljc@163.com"},"dist":{"integrity":"sha512-aY4J2qNti+mFmMzNL6Ll4wEk1T+8hRNKUzCQFVrYhLk44F+RAqy2hUmc5c40MkyT+p4fXgt27BmtUGHKmECKuw==","shasum":"135eeac5d31bb205b0adf049abb9de9973fc7082","tarball":"https://registry.npmjs.org/@ctmobile/ui-swipeout/-/ui-swipeout-1.0.0.tgz","fileCount":13,"unpackedSize":189030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMVJtCRA9TVsSAnZWagAAz6gP/j50opajniNixZgJXq1o\nEEge0yeCAKUo+98KfOZ2YxDRoldk4kvcb7P+90lf1cKYDkoVduG06rBjQbXU\nvmXQ+CWH5Htr9nMUcO0dyIRXsJgY5bQ0Z4vs2D/sptzb5+qXV1yfK4UdzCs0\nATpYfxqvfsCEfCnBAhmL3uvrJhlIhMSvNKX0ovzTRcCXdPWaglTN8TeStaDS\nLkypU7DElIug3C6vFIJSulLmXyNk+wtVgiFvxjhJL3IaAdgDCu6WomPzeNPt\nNXchFmGiyGmW1PaAWSuXUapWQcaEfHaSF+vxikbHnHmrsDHQTOokS9RNJT07\nlbsoLgMr/Hjo30OTcciqXM+cLTPlbKbmK2UsC2nbKkfT19Y5GqLJwKX+vyD3\nmVCCwexJV/6F+atLE/9t8f3RYgstrwbs6BVT4RLT7oc5VuQAxgWkLjl3pWe5\nc71/4o7Ad8rXrhZG0g5LuPlr9vAwjF+UAB//tp+t9ob45zB15I8n2vEbSz4u\ndPi2I7Ikb6rHOhTfOHZ6rocrQXVlbFDGM6IUhUWpqbCLpj9GCkYoIpolBIO7\nHtzAXYxTXfy09Fj/7D0ad+xc3saYg3rUW4oY8FMzfqdh+8RSu7nj6eBeFfvx\nIKNAe0TosNcfJhPLykfYvK4DBa3mIbB6pSnoDIU2u6Q2g8Tcv0f93jQveCmz\nH/Qp\r\n=6QG9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE14XTNCo8MOobFP3LoHrqIWDwujzKeI3mqNDlWXMzwVAiBoarZLH14kKiAiTD9Aj2xVFIlyUThYTdfWNZ1e5FNWIw=="}]},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-swipeout_1.0.0_1563513452557_0.2578902182103513"},"_hasShrinkwrap":false},"1.0.1":{"name":"@ctmobile/ui-swipeout","version":"1.0.1","description":"支持移动端的UI组件-Swipeout","main":"lib/swipeoutlist.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","doc":"jsdoc src README.md -d doc -u doc/tutorials","buildpackage":"ctcopy ../src src && ctbuild buildpackage","buildumd":"ctcopy ../src src && ctbuild buildumd -p swipeout","link":"npm link @ctsj/build"},"repository":{"type":"git","url":"git+https://github.com/playerljc/CTMobile-UI.git"},"keywords":["swipeout","CtMobile","CTMibole-UI","mobile","webapp","SPA","Hybrid","Cordova","Android","iOS","Material","playerljc","WebFramework"],"author":{"name":"playerljc","email":"playerljc@163.com"},"license":"MIT","bugs":{"url":"https://github.com/playerljc/CTMobile-UI/issues"},"homepage":"https://github.com/playerljc/CTMobile-UI#readme","dependencies":{"@babel/runtime":"^7.2.0","swiper":"^4.5.0"},"_id":"@ctmobile/ui-swipeout@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"playerljc","email":"playerljc@163.com"},"dist":{"integrity":"sha512-2C4fa9pdeHQ4TfLM64HcplcY7/uzO0u/E3TtH5N+xjrIRYVLhwfXIRdbAbEMbSvwHyuX2Ox1dn7Is2tjRBU8jg==","shasum":"5d2c2b05f5fee5ed29a0acbddad84798a1af05db","tarball":"https://registry.npmjs.org/@ctmobile/ui-swipeout/-/ui-swipeout-1.0.1.tgz","fileCount":13,"unpackedSize":190623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdiFlxCRA9TVsSAnZWagAAoaUP/RE91D8lmDD+rUULyeLo\ngFQzTA9/BVaRjMS6tNtazcErkYY5CswYUFaOrSB6n5OQzj+MgUWipQKW/US0\n/igGtM0/LqxODVRTWkemrDohqP+qooZqBFkd7dPX3bcsN7Zlm3MMqYcvuwan\ng3lQufNKBC8XtRZ5xrtLUVrlW0TOYgws7JF8fUi7K+lqpmP70n82DYXRIUvb\nZAH/7b7hJ9yyyQE+E4mEJk9Z6WQZKVa61gwxKR4RnrtF/hhRs+cmTzsFFCDX\nVZtWQ5Kzu+JSBNTMGG7/MgusWWc/QRd5sFK8qHH+xg14Fpkq7brxOPCiJbP9\nGfdFwP2tbvbN2pxaTkSk6CXxN0As+N38DPMNVztqjCBxFlshlSnZ8l3wtVSc\naA+ZwIB5ZCUeYmXwkgZnk5rYPHUKGnNykDSjM+6W+vxIHQ7QAN1POC57Xsj2\n6PME2HrSOwlxhdhrPEy1BvFC25DkDVXHrTg5Ohdcj/rTfToqhqEGH9OHjekd\n8Pk8PH3j16sLWilykuVT3G0hWHrzvDRns0u0N3B1xlppBHts/swWMHlTYh/M\nLZMA35jRFWV4Ob40v4bDJHDBeItd35Wr3hBP+Glh5L4Z1OWx8mOSLc7eoAcF\n1TesQyQM3aCx7+8YzGn3G+tDvHlQIz/snOAaVeB7inYXEcO33zASPkiZg3Yk\nQHDR\r\n=BvBR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFu0NnCfx2whtmV1IIOXsZjreT2yeXqh5TtyLacle79/AiBL+nZuN5prnCBsSq6B6WOVdswIChKvAzjk83w4+3FjrA=="}]},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-swipeout_1.0.1_1569216880626_0.7364065160123656"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-19T05:17:32.397Z","1.0.0":"2019-07-19T05:17:33.090Z","modified":"2022-04-05T02:04:11.168Z","1.0.1":"2019-09-23T05:34:40.788Z"},"maintainers":[{"name":"playerljc","email":"playerljc@163.com"}],"description":"支持移动端的UI组件-Swipeout","homepage":"https://github.com/playerljc/CTMobile-UI#readme","keywords":["swipeout","CtMobile","CTMibole-UI","mobile","webapp","SPA","Hybrid","Cordova","Android","iOS","Material","playerljc","WebFramework"],"repository":{"type":"git","url":"git+https://github.com/playerljc/CTMobile-UI.git"},"author":{"name":"playerljc","email":"playerljc@163.com"},"bugs":{"url":"https://github.com/playerljc/CTMobile-UI/issues"},"license":"MIT","readme":"# Swipeout\r\n\r\n* [基本布局](#swipeout-layout)\r\n* [初始化](#swipeout-initial)\r\n* [例子](#swipeout-demo)\r\n* [方法](#swipeout-methods)\r\n* [事件](#swipeout-events)\r\n  - [init](#swipeout-events-init)\r\n\r\n## 基本布局\r\n\r\n```\r\n\r\n<div class=\"ct-list ios media-list\">\r\n  <ul>\r\n    <li>\r\n      <div class=\"ct-swipeout swiper-container\">\r\n        <div class=\"swiper-wrapper\">\r\n          <div class=\"swiper-slide ct-swipeout-before\">\r\n            <div class=\"swipeoutBtn del\">opt1</div>\r\n            <div class=\"swipeoutBtn edit\">opt2</div>\r\n          </div>\r\n          <a class=\"swiper-slide ct-swipeout-main item-link item-content\">\r\n\r\n            <div class=\"item-inner\">\r\n              <div class=\"item-title-row\">\r\n                <div class=\"item-title\">Yellow Submarine</div>\r\n                <div class=\"item-after\">$15</div>\r\n              </div>\r\n              <div class=\"item-subtitle\">Beatles</div>\r\n              <div class=\"item-text\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut\r\n                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit\r\n                amet,\r\n                pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui\r\n                laoreet, commodo augue id, pulvinar lacus.\r\n              </div>\r\n            </div>\r\n          </a>\r\n          <div class=\"swiper-slide ct-swipeout-after\">\r\n            <div class=\"swipeoutBtn del\">opt1</div>\r\n            <div class=\"swipeoutBtn edit\">opt2</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </li>\r\n  </ul>\r\n</div>\r\n\r\n```\r\n\r\n* * - 列表根元素(一般是布局元素)\r\n  - ... .ct-swipeout.swiper-container - 滑动行\r\n    + .swiper-wrapper - 滑动行包装\r\n      * .swiper-slide.ct-swipeout-before - 滑动行左侧滑动工具\r\n      * .swiper-slide.ct-swipeout-main - 滑动行主体\r\n      * .swiper-slide.ct-swipeout-after - 滑动行右侧滑动工具\r\n\r\n## 初始化\r\n\r\n```\r\n\r\nimport SwipeoutListFactory from '@ctmobile/ui-swipeout/swipeoutlist';\r\nimport '@ctmobile/ui-swipeout/swipeout.less';\r\n\r\nconst el = document.getElementById('list');\r\nconst elInner = el.children[0];\r\n\r\nconst swiperoutList = SwipeoutListFactory.create(el,\r\n  {\r\n    listeners: {\r\n      init: (swiper) => {\r\n        console.log(swiper);\r\n        el.style.visibility = 'visible';\r\n      },\r\n      slideChangeTransitionStart: (swiper) => {\r\n        console.log(swiper);\r\n      },\r\n      slideChangeTransitionEnd: (swiper) => {\r\n        console.log(swiper);\r\n      },\r\n    },\r\n  }\r\n);\r\n```\r\n\r\n|  名称 |  说明 |\r\n| --- | --- |\r\n| {HtmlElement} - el |  整体元素 |\r\n| {object} - config |\r\n\r\n配置\r\n\r\nlisteners {Object} - 事件\r\n\r\ndirection {String} - [horizontal | vertical] 滑动方向  |\r\n\r\n## 例子\r\n\r\n#### js\r\n\r\n## normal\r\n\r\n```\r\n\r\nSwipeoutListFactory.create(listEl1,\r\n  {\r\n    listeners: {\r\n      init: (swiper) => {\r\n        console.log(swiper);\r\n        listEl1.style.visibility = 'visible';\r\n      },\r\n      slideChangeTransitionStart: (swiper) => {\r\n        console.log(swiper);\r\n      },\r\n      slideChangeTransitionEnd: (swiper) => {\r\n        console.log(swiper);\r\n      },\r\n    },\r\n  }\r\n);\r\n```\r\n\r\n## slideBeforeAll,slideAfterAll,closeAll\r\n\r\n```\r\n\r\nconst sliderSwiperoutList = SwipeoutListFactory.create(listEl2,\r\n  {\r\n    listeners: {\r\n      init: (swiper) => {\r\n        console.log(swiper);\r\n        listEl2.style.visibility = 'visible';\r\n      },\r\n      slideChangeTransitionStart: (swiper) => {\r\n        console.log(swiper);\r\n      },\r\n      slideChangeTransitionEnd: (swiper) => {\r\n        console.log(swiper);\r\n      },\r\n    },\r\n  }\r\n);\r\n\r\ndocument.getElementById('slideBeforeAllBtn').addEventListener('click', () => {\r\n  sliderSwiperoutList.slideBeforeAll();\r\n});\r\n\r\ndocument.getElementById('slideAfterAll').addEventListener('click', () => {\r\n  sliderSwiperoutList.slideAfterAll();\r\n});\r\n\r\ndocument.getElementById('closeAll').addEventListener('click', () => {\r\n  sliderSwiperoutList.closeAll();\r\n});\r\n```\r\n\r\n## deleteLine\r\n\r\n```\r\n\r\nconst deleteLineSwiperoutList = SwipeoutListFactory.create(listEl3,\r\n  {\r\n    listeners: {\r\n      init: (swiper) => {\r\n        console.log(swiper);\r\n        listEl3.style.visibility = 'visible';\r\n      },\r\n      slideChangeTransitionStart: (swiper) => {\r\n        console.log(swiper);\r\n      },\r\n      slideChangeTransitionEnd: (swiper) => {\r\n        console.log(swiper);\r\n      },\r\n    },\r\n  }\r\n);\r\n\r\nconst swiperoutBtns = listEl3.querySelectorAll('.swipeoutBtn');\r\nArray.from(swiperoutBtns).map((el) => {\r\n  el.addEventListener('click', () => {\r\n    const firstRowEl = listEl3.querySelector('.firstRow');\r\n    const swiper = deleteLineSwiperoutList.getSwiper(0);\r\n    swiper.removeAnimation(firstRowEl);\r\n  });\r\n});\r\n```\r\n\r\n## dynamic\r\n\r\n```\r\n\r\nconst dynamicSwiperoutList = SwipeoutListFactory.create(listEl4,\r\n  {\r\n    listeners: {\r\n      init: (swiper) => {\r\n        console.log(swiper);\r\n        listEl4.style.visibility = 'visible';\r\n      },\r\n      slideChangeTransitionStart: (swiper) => {\r\n        console.log(swiper);\r\n      },\r\n      slideChangeTransitionEnd: (swiper) => {\r\n        console.log(swiper);\r\n      },\r\n    },\r\n  }\r\n);\r\n\r\ndocument.getElementById('addBtn').addEventListener('click', () => {const insertEl = Dom6.createElement(`<pre>\r\n<code class=\"html\">\r\n<li>\r\n  <div class=\"ct-swipeout swiper-container\">\r\n    <div class=\"swiper-wrapper\">\r\n      <div class=\"swiper-slide ct-swipeout-before\">\r\n        <div class=\"swipeoutBtn del\">opt1</div>\r\n        <div class=\"swipeoutBtn edit\">opt2</div>\r\n      </div>\r\n      <a class=\"swiper-slide ct-swipeout-main item-link item-content\">\r\n\r\n        <div class=\"item-inner\">\r\n          <div class=\"item-title-row\">\r\n            <div class=\"item-title\">Yellow Submarine</div>\r\n            <div class=\"item-after\">$15</div>\r\n          </div>\r\n          <div class=\"item-subtitle\">Beatles</div>\r\n          <div class=\"item-text\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut\r\n            turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit\r\n            amet,\r\n            pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui\r\n            laoreet, commodo augue id, pulvinar lacus.\r\n          </div>\r\n        </div>\r\n      </a>\r\n      <div class=\"swiper-slide ct-swipeout-after\">\r\n        <div class=\"swipeoutBtn del\">opt1</div>\r\n        <div class=\"swipeoutBtn edit\">opt2</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</li>\r\n</code>\r\n</pre>`);\r\n  const ulEl = listEl4.children[0];\r\n  ulEl.appendChild(insertEl);\r\n  dynamicSwiperoutList.refresh();\r\n});\r\n```\r\n\r\n## 方法\r\n\r\n## .SwipeoutList\r\n\r\nchangeDirection( swiper, direction ) - changeDirection修改滑动方向\r\n\r\n* swiper-SwiperoutSwiper\r\n* direction-String方向\r\n\r\nslideBefore(swiper) - 滑动到之前的操作组\r\n\r\n* swiper-Swiperoutswiper\r\n\r\nslideAfter(swiper) - 滑动到之后的操作组\r\n\r\n* swiper-Swiperoutswiper\r\n\r\nclose(swiper) - 关闭所有slider\r\n\r\n* swiper-Swiperoutswiper\r\n\r\nslideBeforeAll - 所有行滑动到before操作\r\n\r\nslideAfterAll - 所有行滑动到after操作\r\n\r\nchangeDirections - 所有slider改变滑动方向\r\n\r\ncloseAll - 关闭所有滑动\r\n\r\ndestorySwiper(swiper) - 销毁指定的Swiper\r\n\r\n* swiper-SwiperoutSwiper\r\n\r\nremoveSwiper(swiper) - 删除swiper\r\n\r\n* swiper-Swiperoutswiper\r\n\r\ngetSwiper(index) - 根据索引返回Swiper\r\n\r\n* index-String索引\r\n\r\nrefresh - 刷新\r\n\r\ndestory - 销毁所有\r\n\r\n## .Swipeout\r\n\r\nchangeDirection(direction) - changeDirection修改滑动方向\r\n\r\n* direction-String方向\r\n\r\nrefresh - 刷新\r\n\r\nslideBefore - 滑动到之前的操作组\r\n\r\nslideAfter - 滑动到之后的操作组\r\n\r\nclose - 关闭所有slider\r\n\r\ndestory - 销毁指定的Swiper\r\n\r\nremove - 删除swiper\r\n\r\nremoveAnimation(el) - 动画删除行\r\n\r\n* el-HtmlElement删除元素\r\n\r\non( type, handler, ) - 注册事件\r\n\r\n* type-string 事件类型\r\n* handler-Function 事件句柄\r\n\r\noff( type, handler, ) - 注销事件\r\n\r\n* type-string 事件类型\r\n* handler-Function 事件句柄\r\n\r\nclearAll - 注销所有事件\r\n\r\n## 事件\r\n\r\n|  名称 |  说明 |\r\n| --- | --- |\r\n| init |  初始化完成 |\r\n","readmeFilename":"README.md"}