{"id":20022251,"url":"https://github.com/lucifier129/pull-element","last_synced_at":"2025-04-09T15:04:19.919Z","repository":{"id":57332012,"uuid":"81542338","full_name":"Lucifier129/pull-element","owner":"Lucifier129","description":"Lightweight, high-performance and smooth pull element effect that support all directions","archived":false,"fork":false,"pushed_at":"2024-08-27T20:03:56.000Z","size":2021,"stargazers_count":173,"open_issues_count":4,"forks_count":22,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-09T15:02:56.642Z","etag":null,"topics":["pull-to-refresh","touch"],"latest_commit_sha":null,"homepage":"https://lucifier129.github.io/pull-element/demo/build","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lucifier129.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-10T08:07:41.000Z","updated_at":"2025-03-31T13:23:14.000Z","dependencies_parsed_at":"2025-04-09T15:02:57.473Z","dependency_job_id":null,"html_url":"https://github.com/Lucifier129/pull-element","commit_stats":null,"previous_names":["lucifier129/virtual-viewport"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucifier129%2Fpull-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucifier129%2Fpull-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucifier129%2Fpull-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucifier129%2Fpull-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lucifier129","download_url":"https://codeload.github.com/Lucifier129/pull-element/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055276,"owners_count":21040156,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pull-to-refresh","touch"],"created_at":"2024-11-13T08:39:42.379Z","updated_at":"2025-04-09T15:04:19.888Z","avatar_url":"https://github.com/Lucifier129.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pull-element\n\nLightweight, high-performance and smooth pull element effect that support all directions\n\n## Features\n\n- Lightweight, 6kb\n- High performance, native scrolling, 60fps\n- No dependent, just vanilla.js\n- flexible, support `top|right|down|left` all the directions\n\n[中文版文档](./README.zh-cn.md)\n\n## Installtion\n\nWith npm\n\n```shell\nnpm install --save pull-element\n```\n\nHow to import `pull-element`\n\n```javascript\n// ES2015 style\nimport PullElement from 'pull-element'\n\n// commonjs style\nvar PullElement = require('pull-element')\n```\n\nWith script tag\n\n```html\n\u003cscript src=\"pull-element.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\tvar pullElement = new PullElement({})\n\u003c/script\u003e\n```\n\n## DEMO\n\nNote: these demo were inspired by [framework7](http://framework7.io/kitchen-sink-ios/)\n\n- Playgound: [view-source](https://github.com/Lucifier129/pull-element/blob/master/demo/src/page/Playground.js)，[DEMO](https://lucifier129.github.io/pull-element/demo/build/#playground)\n- Pull To Refresh: [view-source](https://github.com/Lucifier129/pull-element/blob/master/demo/src/page/PullToRefresh.js)，[DEMO](https://lucifier129.github.io/pull-element/demo/build/#pull-to-refresh)\n- Swipe To Show Action: [view-source](https://github.com/Lucifier129/pull-element/blob/master/demo/src/page/SwipeToShowAction.js)，[DEMO](https://lucifier129.github.io/pull-element/demo/build/#swipe-to-show-action)\n- Animated Tabs: [view-source](https://github.com/Lucifier129/pull-element/blob/master/demo/src/page/AnimatedTabs.js)，[DEMO](https://lucifier129.github.io/pull-element/demo/build/#animated-tabs)\n- Swipeable Tabs: [view-source](https://github.com/Lucifier129/pull-element/blob/master/demo/src/page/SwipeableTabs.js)，[DEMO](https://lucifier129.github.io/pull-element/demo/build/#swipeable-tabs)\n- Slider Horizontal: [view-source](https://github.com/Lucifier129/pull-element/blob/master/demo/src/page/SliderHorizontal.js)，[DEMO](https://lucifier129.github.io/pull-element/demo/build/#slider-horizontal)\n- Vertical Swiper: [view-source](https://github.com/Lucifier129/pull-element/blob/master/demo/src/page/VerticalSwiper.js)，[DEMO](https://lucifier129.github.io/pull-element/demo/build/#vertical-swiper)\n- Space Between Slides: [view-source](https://github.com/Lucifier129/pull-element/blob/master/demo/src/page/SpaceBetweenSlides.js)，[DEMO](https://lucifier129.github.io/pull-element/demo/build/#space-between-slides)\n\n## API\n\n### new PullElement(options)\n\nPullElement is a constructor function, receive an argument `options` which should be an object.\n\nUse the keyword `new` to get its instance, and then call the `init` method to initialize.\n\n```javascript\nvar pullElement = new PullElement(options)\npullElement.init()\n```\n\n## Options\n\n### options.target: selector|element\n\n`target` can be a selector or a dom-element, the default value is `'body'`\n\n`target` is used to be the target who will be setted `transform|translate` style when user is touching.\n\n### options.scroller: selector|element\n\n`scroller` can be a selector or a dom-element, if it's empty, then the `target` will be the `scroller`\n\nThis option must works with other options `detectScroll|detectScrollOnStart`.\n\nIf one of `detectScroll|detectScrollOnStart` is `true`, the `target` will only translate when `scroller` reach the ending.\n\n### options.trigger: selector|element\n\n`trigger` can be a selector or a dom-element, if it's empty, then the `target` will be the `trigger`.\n\nWhen user is touching the `trigger`, it occur the pull element effect. \n\n### options.damping: number|function\n\n`damping` can be a number or a function, the default value is `1.6`.\n\nIf the duration of touch is `x`, and the `damping` is `y`, then the `translate` d is: `d = x/y`.\n\nIf `damping` is a function ,then `d` is: `d = y(x)`.\n\n### options.pullUp: boolean\n\nEnable pulling element up, the default value is `false`.\n\n### options.pullDown: boolean\n\nEnable pulling element down, the default value is `false`.\n\n### options.pullLeft: boolean\n\nEnable pulling element left, the default value is `false`.\n\n### options.pullRight: boolean\n\nEnable pulling element right, the default value is `false`.\n\n### options.detectScroll: boolean\n\nEnable detect scroller status, the default value is `false`.\n\nWhen `detectScroll` is `true`, it will start pulling element when the `scroller` reached the ending.\n\nIf this option is `true`, it will detech scroll status on both `touchstart` and `touchmove`.\n\n### options.detectScrollOnStart: boolean\n\nEnable detech scroller status on `touchstart`, the default value is `false`.\n\nIf this option is `true`, and `detectScroll` option is `false`,  it will only detech scroll status on `touchstart` event.\n\n### options.stopPropagation: boolean\n\nEnable `stopPropagation` on `touchstart`, the default value is `false`\n\nThis option is used to support nesting pull-element effect.\n\n### options.drag: boolean\n\nEnable drag effect, the default value is `fasle`\n\nThe default behavior of pulling element is only in one axis, and translate-value of the other axis will be setted to zero.\n\nIf this option is `true`, the `target` will translate in both x-axis and y-axis.\n\n### options.transitionDuration: string\n\nThe duration of transition, the default value is `0.3s`\n\nWhen user stop touching, the default behavior is that `target` animate to the origin.\n\n### options.transitionTimingFunction: string\n\nThe timing function of transition, the default value is `ease-out`\n\nWhen user stop touching, the default behavior is that `target` animate to the origin.\n\n### options.wait: boolean\n\nEnable wait for animating to the origin, the default value is `true`.\n\nWhen user stop touching, the default behavior is that `target` animate to the origin, the `trigger` will not response the touching event in this time.\n\nIf this options is `false`, user can touch the `trigger` again.\n\n### options.onPull{Direction}: function\n\nEnable and response the `Direction` of pulling, `Direction` can be one of `Up|Down|Left|Right`.\n\nThe `function` will receive one argument `data` when user pulling the elment.\n\n`data` is an object. it has two property `translateX|translateY`, both of them were calculated by `damping`.\n\nIf the `function` has called method `this.preventDefault()`, it will prevent the default behavior. In this case, `target` will not be setted `translate` style.\n\n```javascript\nvar pullElement = new PullElement({\n\tonPullUp: function(data) {\n\t\tvar translateX = data.translateX\n\t\tvar translateY = data.translateY\n\t\tthis.preventDefault()\n\t}\n})\npullElement.init()\n```\n\n### options.onPull{Direction}End: function\n\nEnable the `Direction` of pulling, and response the event of stop pulling, `Direction` can be one of `Up|Down|Left|Right`.\n\nThe `function` will receive one argument `data` when user pulling the elment.\n\n`data` is an object. it has two property `translateX|translateY`, both of them were calculated by `damping`.\n\nIf the `function` has called method `this.preventDefault()`, it will prevent the default behavior. In this case, `target` will not animate to origin.\n\n```javascript\nvar pullElement = new PullElement({\n\tonPullUpEnd: function(data) {\n\t\tvar translateX = data.translateX\n\t\tvar translateY = data.translateY\n\t\tthis.preventDefault()\n\t}\n})\npullElement.init()\n```\n\n## Methods\n\n### pullElement.init()\n\nInitialize the pull-element effect, and add touch event listeners.\n\n### pullElement.destroy()\n\nDestroy the instance of `PullElement`, and remove touch event listeners.\n\n### pullElement.enable()\n\nAdd touch event listeners.\n\n### pullElement.disable()\n\nRemove touch event listeners.\n\n### pullElement.setTranslate(translateX, translateY)\n\nSet `translate style` of `target`, `translateX` and `translateY` must be number.\n\nYou can use this method to set `translate style` directly after calling `this.preventDefault()`.\n\n### pullElement.animateTo(translateX, translateY, callback)\n\nAnimate to some where, `translateX` and `translateY` is the same type in `setTranslate`.\n\nThe third argument `callback` is a function, it will be invoked when animation has been over.\n\nIf `es6-promise` is supported, this method will return a promise, so you can use `async/await` or `then` method to handle the ending of animation.\n\n### pullElement.animateToOrigin(callback)\n\nAnimate to origin, it's equal to `this.animateTo(0, 0, callback)`, but more, see below.\n\nIf option `wait` is `true`, it will call `animateToOrigin` automatically after `pull{Direction}End`(Note: If you call `this.preventDefault` in it, you should call `this.animateToOrigin` manually to stop waiting).\n\n### pullElement.preventDefault()\n\nPrevent the default behavior. This method should only be invoked by function `onPull{Direction}` or `onPull{Direction}End`\n\nWhen this method is invoked by `onPull{Direction}`, the default behavior is `this.setTranslate(translateX, translateY)`.\n\nWhen this method is invoked by `onPull{Direction}End`, the default behavior is `this.animateToOrigin()`.\n\n## License\nLicense: MIT (See LICENSE file for details)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucifier129%2Fpull-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucifier129%2Fpull-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucifier129%2Fpull-element/lists"}