├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── README.zh-cn.md ├── demo ├── .gitignore ├── README.md ├── build │ ├── asset-manifest.json │ ├── css │ │ ├── framework7.ios.colors.min.css │ │ ├── framework7.ios.min.css │ │ ├── kitchen-sink.css │ │ └── main.css │ ├── favicon.ico │ ├── index.html │ └── static │ │ └── js │ │ ├── main.95bb76d4.js │ │ └── main.95bb76d4.js.map ├── config │ ├── env.js │ ├── jest │ │ ├── cssTransform.js │ │ └── fileTransform.js │ ├── paths.js │ ├── polyfills.js │ ├── webpack.config.dev.js │ └── webpack.config.prod.js ├── package.json ├── public │ ├── css │ │ ├── framework7.ios.colors.min.css │ │ ├── framework7.ios.min.css │ │ ├── kitchen-sink.css │ │ └── main.css │ ├── favicon.ico │ └── index.html ├── scripts │ ├── build.js │ ├── start.js │ └── test.js └── src │ ├── component │ └── Header.js │ ├── index.js │ ├── page │ ├── AnimatedTabs.js │ ├── CustomTrigger.js │ ├── Home.js │ ├── Playground.js │ ├── PullToRefresh.js │ ├── SliderHorizontal.js │ ├── SpaceBetweenSlides.js │ ├── SwipeToShowAction.js │ ├── SwipeableTabs.js │ └── VerticalSwiper.js │ └── util │ ├── delay.js │ └── goBack.js ├── package-lock.json ├── package.json ├── pull-element.js └── pull-element.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # testing 7 | coverage 8 | 9 | # production 10 | 11 | # misc 12 | .DS_Store 13 | .env 14 | npm-debug.log 15 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.log 3 | examples 4 | test 5 | coverage 6 | _book 7 | book.json 8 | docs 9 | src 10 | jest 11 | __tests__ 12 | webpack.config.js 13 | build.js 14 | addons 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 工业聚 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # pull-element 2 | 3 | Lightweight, high-performance and smooth pull element effect that support all directions 4 | 5 | ## Features 6 | 7 | - Lightweight, 6kb 8 | - High performance, native scrolling, 60fps 9 | - No dependent, just vanilla.js 10 | - flexible, support `top|right|down|left` all the directions 11 | 12 | [中文版文档](./README.zh-cn.md) 13 | 14 | ## Installtion 15 | 16 | With npm 17 | 18 | ```shell 19 | npm install --save pull-element 20 | ``` 21 | 22 | How to import `pull-element` 23 | 24 | ```javascript 25 | // ES2015 style 26 | import PullElement from 'pull-element' 27 | 28 | // commonjs style 29 | var PullElement = require('pull-element') 30 | ``` 31 | 32 | With script tag 33 | 34 | ```html 35 | 36 | 39 | ``` 40 | 41 | ## DEMO 42 | 43 | Note: these demo were inspired by [framework7](http://framework7.io/kitchen-sink-ios/) 44 | 45 | - 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) 46 | - 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) 47 | - 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) 48 | - 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) 49 | - 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) 50 | - 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) 51 | - 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) 52 | - 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) 53 | 54 | ## API 55 | 56 | ### new PullElement(options) 57 | 58 | PullElement is a constructor function, receive an argument `options` which should be an object. 59 | 60 | Use the keyword `new` to get its instance, and then call the `init` method to initialize. 61 | 62 | ```javascript 63 | var pullElement = new PullElement(options) 64 | pullElement.init() 65 | ``` 66 | 67 | ## Options 68 | 69 | ### options.target: selector|element 70 | 71 | `target` can be a selector or a dom-element, the default value is `'body'` 72 | 73 | `target` is used to be the target who will be setted `transform|translate` style when user is touching. 74 | 75 | ### options.scroller: selector|element 76 | 77 | `scroller` can be a selector or a dom-element, if it's empty, then the `target` will be the `scroller` 78 | 79 | This option must works with other options `detectScroll|detectScrollOnStart`. 80 | 81 | If one of `detectScroll|detectScrollOnStart` is `true`, the `target` will only translate when `scroller` reach the ending. 82 | 83 | ### options.trigger: selector|element 84 | 85 | `trigger` can be a selector or a dom-element, if it's empty, then the `target` will be the `trigger`. 86 | 87 | When user is touching the `trigger`, it occur the pull element effect. 88 | 89 | ### options.damping: number|function 90 | 91 | `damping` can be a number or a function, the default value is `1.6`. 92 | 93 | If the duration of touch is `x`, and the `damping` is `y`, then the `translate` d is: `d = x/y`. 94 | 95 | If `damping` is a function ,then `d` is: `d = y(x)`. 96 | 97 | ### options.pullUp: boolean 98 | 99 | Enable pulling element up, the default value is `false`. 100 | 101 | ### options.pullDown: boolean 102 | 103 | Enable pulling element down, the default value is `false`. 104 | 105 | ### options.pullLeft: boolean 106 | 107 | Enable pulling element left, the default value is `false`. 108 | 109 | ### options.pullRight: boolean 110 | 111 | Enable pulling element right, the default value is `false`. 112 | 113 | ### options.detectScroll: boolean 114 | 115 | Enable detect scroller status, the default value is `false`. 116 | 117 | When `detectScroll` is `true`, it will start pulling element when the `scroller` reached the ending. 118 | 119 | If this option is `true`, it will detech scroll status on both `touchstart` and `touchmove`. 120 | 121 | ### options.detectScrollOnStart: boolean 122 | 123 | Enable detech scroller status on `touchstart`, the default value is `false`. 124 | 125 | If this option is `true`, and `detectScroll` option is `false`, it will only detech scroll status on `touchstart` event. 126 | 127 | ### options.stopPropagation: boolean 128 | 129 | Enable `stopPropagation` on `touchstart`, the default value is `false` 130 | 131 | This option is used to support nesting pull-element effect. 132 | 133 | ### options.drag: boolean 134 | 135 | Enable drag effect, the default value is `fasle` 136 | 137 | The default behavior of pulling element is only in one axis, and translate-value of the other axis will be setted to zero. 138 | 139 | If this option is `true`, the `target` will translate in both x-axis and y-axis. 140 | 141 | ### options.transitionDuration: string 142 | 143 | The duration of transition, the default value is `0.3s` 144 | 145 | When user stop touching, the default behavior is that `target` animate to the origin. 146 | 147 | ### options.transitionTimingFunction: string 148 | 149 | The timing function of transition, the default value is `ease-out` 150 | 151 | When user stop touching, the default behavior is that `target` animate to the origin. 152 | 153 | ### options.wait: boolean 154 | 155 | Enable wait for animating to the origin, the default value is `true`. 156 | 157 | When user stop touching, the default behavior is that `target` animate to the origin, the `trigger` will not response the touching event in this time. 158 | 159 | If this options is `false`, user can touch the `trigger` again. 160 | 161 | ### options.onPull{Direction}: function 162 | 163 | Enable and response the `Direction` of pulling, `Direction` can be one of `Up|Down|Left|Right`. 164 | 165 | The `function` will receive one argument `data` when user pulling the elment. 166 | 167 | `data` is an object. it has two property `translateX|translateY`, both of them were calculated by `damping`. 168 | 169 | If the `function` has called method `this.preventDefault()`, it will prevent the default behavior. In this case, `target` will not be setted `translate` style. 170 | 171 | ```javascript 172 | var pullElement = new PullElement({ 173 | onPullUp: function(data) { 174 | var translateX = data.translateX 175 | var translateY = data.translateY 176 | this.preventDefault() 177 | } 178 | }) 179 | pullElement.init() 180 | ``` 181 | 182 | ### options.onPull{Direction}End: function 183 | 184 | Enable the `Direction` of pulling, and response the event of stop pulling, `Direction` can be one of `Up|Down|Left|Right`. 185 | 186 | The `function` will receive one argument `data` when user pulling the elment. 187 | 188 | `data` is an object. it has two property `translateX|translateY`, both of them were calculated by `damping`. 189 | 190 | If the `function` has called method `this.preventDefault()`, it will prevent the default behavior. In this case, `target` will not animate to origin. 191 | 192 | ```javascript 193 | var pullElement = new PullElement({ 194 | onPullUpEnd: function(data) { 195 | var translateX = data.translateX 196 | var translateY = data.translateY 197 | this.preventDefault() 198 | } 199 | }) 200 | pullElement.init() 201 | ``` 202 | 203 | ## Methods 204 | 205 | ### pullElement.init() 206 | 207 | Initialize the pull-element effect, and add touch event listeners. 208 | 209 | ### pullElement.destroy() 210 | 211 | Destroy the instance of `PullElement`, and remove touch event listeners. 212 | 213 | ### pullElement.enable() 214 | 215 | Add touch event listeners. 216 | 217 | ### pullElement.disable() 218 | 219 | Remove touch event listeners. 220 | 221 | ### pullElement.setTranslate(translateX, translateY) 222 | 223 | Set `translate style` of `target`, `translateX` and `translateY` must be number. 224 | 225 | You can use this method to set `translate style` directly after calling `this.preventDefault()`. 226 | 227 | ### pullElement.animateTo(translateX, translateY, callback) 228 | 229 | Animate to some where, `translateX` and `translateY` is the same type in `setTranslate`. 230 | 231 | The third argument `callback` is a function, it will be invoked when animation has been over. 232 | 233 | If `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. 234 | 235 | ### pullElement.animateToOrigin(callback) 236 | 237 | Animate to origin, it's equal to `this.animateTo(0, 0, callback)`, but more, see below. 238 | 239 | If 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). 240 | 241 | ### pullElement.preventDefault() 242 | 243 | Prevent the default behavior. This method should only be invoked by function `onPull{Direction}` or `onPull{Direction}End` 244 | 245 | When this method is invoked by `onPull{Direction}`, the default behavior is `this.setTranslate(translateX, translateY)`. 246 | 247 | When this method is invoked by `onPull{Direction}End`, the default behavior is `this.animateToOrigin()`. 248 | 249 | ## License 250 | License: MIT (See LICENSE file for details) -------------------------------------------------------------------------------- /README.zh-cn.md: -------------------------------------------------------------------------------- 1 | # pull-element 2 | 3 | 流畅的触摸拖动元素的交互效果，无依赖、轻量且高性能，支持上下左右所有方向。 4 | 5 | ## 功能特性 6 | 7 | - 轻量，压缩后仅 6kb 8 | - 高性能，复用原生滚动行为，达到 60fps 9 | - 无依赖，原生 javascript 编写 10 | - 灵活，支持上下左右所有方向 11 | 12 | [English docs](./README.md) 13 | 14 | ## 使用方式 15 | 16 | 使用 npm 下载 17 | 18 | ```shell 19 | npm install --save pull-element 20 | ``` 21 | 22 | ```javascript 23 | // ES2015 24 | import PullElement from 'pull-element' 25 | 26 | // commonjs 27 | var PullElement = require('pull-element') 28 | ``` 29 | 30 | 使用 script 标签 31 | 32 | ```html 33 | 34 | 37 | ``` 38 | 39 | ## 使用案例 40 | 41 | 注意：以下 DEMO 受到了 [framework7](http://framework7.io/kitchen-sink-ios/) 的启发。 42 | 43 | - Playgound: [源码](https://github.com/Lucifier129/pull-element/blob/master/demo/src/page/Playground.js)，[DEMO](https://lucifier129.github.io/pull-element/demo/build/#playground) 44 | - Pull To Refresh: [源码](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) 45 | - Swipe To Show Action: [源码](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) 46 | - Animated Tabs: [源码](https://github.com/Lucifier129/pull-element/blob/master/demo/src/page/AnimatedTabs.js)，[DEMO](https://lucifier129.github.io/pull-element/demo/build/#animated-tabs) 47 | - Swipeable Tabs: [源码](https://github.com/Lucifier129/pull-element/blob/master/demo/src/page/SwipeableTabs.js)，[DEMO](https://lucifier129.github.io/pull-element/demo/build/#swipeable-tabs) 48 | - Slider Horizontal: [源码](https://github.com/Lucifier129/pull-element/blob/master/demo/src/page/SliderHorizontal.js)，[DEMO](https://lucifier129.github.io/pull-element/demo/build/#slider-horizontal) 49 | - Vertical Swiper: [源码](https://github.com/Lucifier129/pull-element/blob/master/demo/src/page/VerticalSwiper.js)，[DEMO](https://lucifier129.github.io/pull-element/demo/build/#vertical-swiper) 50 | - Space Between Slides: [源码](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) 51 | 52 | ## 用法 53 | 54 | ### new PullElement(options) 55 | 56 | PullElement 是一个构造函数，接受一个 options 配置项参数，使用 new 关键字进行实例化。 57 | 58 | 实例化后，调用 init 方法进行初始化。 59 | 60 | ```javascript 61 | var pullElement = new PullElement(options) 62 | pullElement.init() 63 | ``` 64 | 65 | ## options 参数的配置项 66 | 67 | ### options.target: selector|element 68 | 69 | 被拖动的目标，可以是选择器，也可以是元素；默认值为 'body'。 70 | 71 | target 元素就是被设置 transform|translate 效果的 dom 对象。 72 | 73 | ### options.scroller: selector|element 74 | 75 | 滚动对象，可以是选择器，也可以是元素。如果不配置，默认复用 target 元素作为 scroller。 76 | 77 | 这个选项在设置了 `detectScroll: true` 或 `detectScrollOnStart: true` 之后，才有作用。 78 | 79 | 只有滚动到边缘之后，才开始拖动元素。 80 | 81 | ### options.trigger: selector|element 82 | 83 | 触发对象，可以是选择器，也可以是元素。如果不配置，默认复用 target 元素作为 trigger。 84 | 85 | 只有触摸 trigger 区域，才会触发拖动元素的效果。 86 | 87 | ### options.damping: number|function 88 | 89 | 拖动元素的阻尼系数，可以是数字，也可以是函数，默认值为 1.6。 90 | 91 | 设用户拖动长度为 x， damping 系数为 y，则元素的拖动长度 d 的计算方式为：d = x/y。 92 | 93 | 如果 damping 为函数，则 d = y(x)。 94 | 95 | ### options.pullUp: boolean 96 | 97 | 是否开启上拉拖动效果，默认为 false。 98 | 99 | ### options.pullDown: boolean 100 | 101 | 是否开启下拉拖动效果，默认为 false。 102 | 103 | ### options.pullLeft: boolean 104 | 105 | 是否开启左拉拖动效果，默认为 false。 106 | 107 | ### options.pullRight: boolean 108 | 109 | 是否开启右拉拖动效果，默认为 false。 110 | 111 | ### options.detectScroll: boolean 112 | 113 | 是否开启监听滚动特性，默认为 false。 114 | 115 | 开启后，只有检测 scroller 元素滚动到边缘之后，才开始拖动元素。 116 | 117 | ### options.detectScrollOnStart: boolean 118 | 119 | 是否开启在 touchStart 时检测滚动状态的特性，默认为 false。 120 | 121 | detectScroll 配置既在 touchStart 时检测，也在 touchMove 时检测；当 detectScroll 为 false，detectScrollOnStart 为 true 时，将只在 touchStart 时检测滚动状态。 122 | 123 | ### options.stopPropagation: boolean 124 | 125 | 是否在 touchStart 时停止事件冒泡，默认为 false。 126 | 127 | 该配置项的作用在于，嵌套两个 pull-element 效果时，子元素可以独立，其拖动效果不影响父元素。 128 | 129 | ### options.drag: boolean 130 | 131 | 是否开启自由拖动效果，默认为 false。 132 | 133 | 开启后，target 元素的拖动不再只能是 X 轴或 Y 轴（默认行为是：其中一个轴的 translate 值被设置为 0），它将在 X 轴和 Y 轴都有偏移效果。 134 | 135 | ### options.transitionDuration: string 136 | 137 | target 元素回归原点的过渡时长，默认为 0.3s。 138 | 139 | 结束拖动，即释放 target 元素时，target 元素将默认滚动回原点。 140 | 141 | ### options.transitionTimingFunction: string 142 | 143 | target 元素回归原点的过渡函数，默认为 ease-out。 144 | 145 | 结束拖动，即释放 target 元素时，target 元素将默认滚动回原点。 146 | 147 | ### options.wait: boolean 148 | 149 | 是否在拖动结束时，等待回归原点后才允许再次拖动，默认为 true。 150 | 151 | 如果设置为 false，在过渡回原点时，也可以被重新拖动。 152 | 153 | ### options.onPull{Direction}: function 154 | 155 | 开启并响应某个方向的拖动事件，Direction 可以为 Up|Down|Left|Right。 156 | 157 | 接受一个参数：data。data 参数包含两个字段，translateX 和 translateY，分别是 X 轴和 Y 轴的偏移值，该值已经经过了 damping 的折算。 158 | 159 | 如果在该方法里调用 this.preventDefault() 方法，将阻止默认行为，即 target 元素在此次事件里不会被设置偏移。 160 | 161 | ```javascript 162 | var pullElement = new PullElement({ 163 | onPullUp: function(data) { 164 | var translateX = data.translateX 165 | var translateY = data.translateY 166 | this.preventDefault() 167 | } 168 | }) 169 | pullElement.init() 170 | ``` 171 | 172 | ### options.onPull{Direction}End: function 173 | 174 | 开启并响应某个方向的拖动结束事件，Direction 可以为 Up|Down|Left|Right。 175 | 176 | 接受一个参数：data。data 参数包含两个字段，translateX 和 translateY，分别是 X 轴和 Y 轴的偏移值，该值已经经过了 damping 的折算。 177 | 178 | 如果在该方法里调用 this.preventDefault() 方法，将阻止默认行为，即 target 元素不会自动过渡回原点。 179 | 180 | ```javascript 181 | var pullElement = new PullElement({ 182 | onPullUpEnd: function(data) { 183 | var translateX = data.translateX 184 | var translateY = data.translateY 185 | this.preventDefault() 186 | } 187 | }) 188 | pullElement.init() 189 | ``` 190 | 191 | ## 实例方法 192 | 193 | ### pullElement.init() 194 | 195 | 初始化 PullElement 实例，该方法将绑定 touch 事件。 196 | 197 | ### pullElement.destroy() 198 | 199 | 销毁 PullElement 事例，该方法将解除 touch事件。 200 | 201 | ### pullElement.enable() 202 | 203 | 开启对 touch 事件的响应能力，即绑定 touch 事件。在 init 方法里会调用。 204 | 205 | 可以用该方法主动开启 touch 绑定。 206 | 207 | ### pullElement.disable() 208 | 209 | 关闭对 touch 事件的响应能力，即解除 touch 事件。在 destroy 方法里会调用。 210 | 211 | 可以用该方法主动关闭 touch 绑定。 212 | 213 | ### pullElement.setTranslate(translateX, translateY) 214 | 215 | 设置 target 元素的偏移值，参数 translateX 和 translateY 都是 number 数值类型。 216 | 217 | 该方法用于在调用 this.preventDefault() 方法后，手动设置偏移值。 218 | 219 | ### pullElement.animateTo(translateX, translateY, callback) 220 | 221 | 以过渡的动画形式设置偏移值，前两个参数跟 setTranslate 方法一致，第三个参数为动画结束后触发的 callback 函数。 222 | 223 | 该方法在支持 promise 的浏览器里会返回 promise。 224 | 225 | ### pullElement.animateToOrigin(callback) 226 | 227 | 以过渡的动画形式回归到原点，第一个参数为动画结束后触发的 callback 函数。 228 | 229 | 该方法在支持 promise 的浏览器里会返回 promise。 230 | 231 | 注意，如果 `options.wait` 为 `true`，在 `onPull{Direction}End` 里调用 `this.preventDefault()` 后，必须在某个时机手动调用 `this.animateToOrigin()` 才可以结束等待状态，否则元素将一直在等待回归原点，不再响应 touch 事件。 232 | 233 | ### pullElement.preventDefault() 234 | 235 | 阻止默认行为。该方法必须在 onPull{Direction} 和 onPull{Direction}End 配置项里执行。 236 | 237 | 当在 onPull{Direction} 里执行时，所阻止的默认行为是 `this.setTranslate(translateX, translateY)` 238 | 239 | 当在 onPull{Direction}End 里执行时，所阻止的默认行为是 `this.animateToOrigin()` 240 | 241 | 242 | ## License 243 | License: MIT (See LICENSE file for details) -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # testing 7 | coverage 8 | 9 | # production 10 | 11 | # misc 12 | .DS_Store 13 | .env 14 | npm-debug.log 15 | -------------------------------------------------------------------------------- /demo/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.js": "static/js/main.95bb76d4.js", 3 | "main.js.map": "static/js/main.95bb76d4.js.map" 4 | } -------------------------------------------------------------------------------- /demo/build/css/kitchen-sink.css: -------------------------------------------------------------------------------- 1 | .panel{background:#222;color:#dddddd;}.popover{width:240px;}.ks-grid div[class*="col-"]{background:#fff;text-align:center;color:#000;border:1px solid #ddd;padding:5px;margin-bottom:15px;}.ks-preloaders{text-align:center;}.ks-preloader-big{width:42px;height:42px;}.statusbar-overlay{background:#000;}.statusbar-overlay.with-panel-left{background:#222426;}.statusbar-overlay.with-panel-right{background:#131313;}.page[data-page="tabbar"] .tabbar,.page[data-page="tabbar-labels"] .tabbar,.page[data-page="messages"] .tabbar,.page[data-page="tabbar"] .toolbar,.page[data-page="tabbar-labels"] .toolbar,.page[data-page="messages"] .toolbar{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;-webkit-transition:0ms;-o-transition:0ms;transition:0ms;}.page[data-page="tabbar"] .page-content{padding-bottom:44px;}.page[data-page="tabbar-labels"] .page-content{padding-bottom:50px;}@media all and (min-width: 768px) {.page[data-page="tabbar-labels"] .page-content{padding-bottom:56px;}}.tabbar a:not(.active) i.active{display:none;}.tabbar a.active i.inactive{display:none;}.ks-demo-slider{width:100%;height:100%;}.ks-demo-slider .swiper-slide,.ks-carousel-slider .swiper-slide{font-size:25px;font-weight:300;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;background:#fff;}.ks-carousel-slider .swiper-slide{box-sizing:border-box;border:1px solid #ccc;background:#fff;}.ks-carousel-slider.ks-carousel-slider-auto .swiper-slide{width:85%;}.ks-carousel-slider.ks-carousel-slider-auto .swiper-slide:nth-child(2n){width:70%;}.ks-carousel-slider.ks-carousel-slider-auto .swiper-slide:nth-child(3n){width:30%;}.page[data-page="swiper-multiple"] .swiper-container{margin:0px 0 35px;font-size:18px;height:120px;}.ks-slider-custom{height:100%;}.ks-slider-custom .swiper-container{background:#000;height:100%;}.ks-slider-custom .swiper-slide{-webkit-background-size:cover;background-size:cover;background-position:center;}.ks-slider-custom .swiper-pagination .swiper-pagination-bullet{cursor:pointer;width:10px;height:10px;background:rgba(255,255,255,0);opacity:1;border-radius:0;-webkit-transition:200ms;-moz-transition:200ms;-ms-transition:200ms;-o-transition:200ms;transition:200ms;position:relative;-webkit-transform:scale(0.9);-moz-transform:scale(0.9);transform:scale(0.9);box-sizing:border-box;border:1px solid rgba(255,255,255,0.8);}.ks-slider-custom .swiper-pagination .swiper-pagination-bullet-active{z-index:1;border:1px solid #007aff;-webkit-transform:scale(1.4);-moz-transform:scale(1.4);transform:scale(1.4);}.ks-cube-slider{width:80%;height:70%;top:15%;}.ks-coverflow-slider{height:60%;top:20%;}.ks-coverflow-slider .swiper-slide{width:65%;}.ks-cube-slider .swiper-slide,.ks-coverflow-slider .swiper-slide{background-size:cover;color:#fff;-webkit-backface-visibility:hidden;}.ks-fade-slider .swiper-slide{background-size:cover;background-position:center;}.page[data-page="swiper-gallery"]{background:#000;}.ks-swiper-gallery-top{height:70%;}.ks-swiper-gallery-thumbs{margin-top:10px;height:20%;height:-webkit-calc(30% - 20px);height:-moz-calc(30% - 20px);height:-ms-calc(30% - 20px);height:calc(30% - 20px);}.ks-swiper-gallery-thumbs .swiper-slide{width:25%;}.ks-swiper-gallery-thumbs .swiper-slide-pic{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0.35;-webkit-transition:300ms;}.ks-swiper-gallery-thumbs .swiper-slide-active .swiper-slide-pic{opacity:1;}.ks-swiper-gallery-top .swiper-slide,.ks-swiper-gallery-thumbs .swiper-slide,.ks-swiper-gallery-top .swiper-slide-pic,.ks-swiper-gallery-thumbs .swiper-slide-pic{-webkit-background-size:cover;background-size:cover;background-position:center;}.ks-parallax-slider{height:100%;}.ks-parallax-slider .swiper-parallax-bg{position:absolute;left:0;top:0;width:130%;height:100%;-webkit-background-size:cover;background-size:cover;background-position:center;}.ks-parallax-slider .swiper-slide{-webkit-box-sizing:border-box;box-sizing:border-box;padding:40px 60px;color:#fff;}.ks-parallax-slider .swiper-slide-title{font-size:41px;font-weight:300;}.ks-parallax-slider .swiper-slide-subtitle{font-size:21px;}.ks-parallax-slider .swiper-slide-text{font-size:14px;max-width:400px;line-height:1.3;}.ks-lazy-slider{height:100%;}.ks-lazy-slider .swiper-slide{position:relative;}.ks-lazy-slider .swiper-slide img{width:auto;height:auto;max-width:100%;max-height:100%;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}.page[data-page="virtual-list"] .virtual-list li{height:63px;}.custom-accordion{padding-left:0;padding-right:0;}.custom-accordion .accordion-item-toggle{padding:0px 15px;height:44px;line-height:44px;font-size:17px;color:#000;border-bottom:1px solid rgba(0,0,0,0.15);cursor:pointer;}.custom-accordion .accordion-item-toggle:active{background:rgba(0,0,0,0.15);}.custom-accordion .accordion-item-toggle span{display:inline-block;margin-left:15px;}html[dir="rtl"] .custom-accordion .accordion-item-toggle span{margin-left:0;margin-right:15px;}.custom-accordion .accordion-item:last-child .accordion-item-toggle{border-bottom:none;}.custom-accordion .icon-ks-plus,.custom-accordion .icon-ks-minus{display:inline-block;width:22px;height:22px;border:1px solid #000;border-radius:100%;line-height:20px;text-align:center;}.custom-accordion .icon-ks-minus{display:none;}.custom-accordion .accordion-item-expanded .icon-ks-minus{display:inline-block;}.custom-accordion .accordion-item-expanded .icon-ks-plus{display:none;}.custom-accordion .accordion-item-content{padding:0px 15px;}#ks-picker-date-container .picker-item{color:#999;}#ks-picker-date-container .picker-selected{color:#000;}.layout-dark #ks-picker-date-container .picker-selected{color:#fff;}@media (max-width: 767px) {#ks-picker-date-container .picker-items{font-size:21px;}#ks-picker-date-container .picker-item{height:36px;line-height:36px;padding:0 6px;}}#ks-calendar-inline-container .picker-calendar{height:280px;}img.ks-demo-lazy{display:block;width:100%;height:auto;}div.ks-demo-lazy{background:#aaa;-webkit-background-size:cover;background-size:cover;height:300px;height:60vw;}.ks-layout-theme{height:44px;border:1px solid rgba(0,0,0,0.3);cursor:pointer;}.ks-layout-theme.ks-layout-default{background:#efeff4;}.ks-layout-theme.ks-layout-dark{background:#222426;}.ks-layout-theme.ks-layout-white{background:#fff;}.ks-color-theme{height:44px;border:1px solid rgba(0,0,0,0.1);cursor:pointer;margin-bottom:10px;}.ks-card-header-pic .card-header{height:40vw;background-size:cover;background-position:center;}.ks-facebook-card .card-header{display:block;padding:10px;}.ks-facebook-card .ks-facebook-avatar{float:left;}.ks-facebook-card .ks-facebook-name{margin-left:44px;font-size:14px;font-weight:500;}.ks-facebook-card .ks-facebook-date{margin-left:44px;font-size:13px;color:#8e8e93;}.ks-facebook-card .card-footer{background:#fafafa;}.ks-facebook-card .card-footer a{color:#81848b;font-weight:500;}.ks-facebook-card .card-content img{display:block;}.ks-facebook-card .card-content-inner{padding:15px 10px;}form .f7-icons{width:29px;font-size:29px;height:29px;text-align:center;opacity:0.5;}.ks-demo-icon{text-align:center;margin-top:15px;margin-bottom:15px;color:#333;}.ks-demo-icon .icon-name{margin-top:5px;font-size:11px;color:#666;}code{background:#f3f3f3;padding:5px;} -------------------------------------------------------------------------------- /demo/build/css/main.css: -------------------------------------------------------------------------------- 1 | #root { 2 | width:100%; 3 | height:100%; 4 | } 5 | 6 | .icon.icon-red { 7 | width: 29px; 8 | height: 29px; 9 | border-radius: 6px; 10 | background-color: red; 11 | line-height: 29px; 12 | text-align: center; 13 | color: #fff; 14 | } -------------------------------------------------------------------------------- /demo/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lucifier129/pull-element/df9452c507a2e72db7c6c0c0b10c821cbf4095ab/demo/build/favicon.ico -------------------------------------------------------------------------------- /demo/build/index.html: -------------------------------------------------------------------------------- 1 | Pull-Element
-------------------------------------------------------------------------------- /demo/config/env.js: -------------------------------------------------------------------------------- 1 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be 2 | // injected into the application via DefinePlugin in Webpack configuration. 3 | 4 | var REACT_APP = /^REACT_APP_/i; 5 | 6 | function getClientEnvironment(publicUrl) { 7 | var processEnv = Object 8 | .keys(process.env) 9 | .filter(key => REACT_APP.test(key)) 10 | .reduce((env, key) => { 11 | env[key] = JSON.stringify(process.env[key]); 12 | return env; 13 | }, { 14 | // Useful for determining whether we’re running in production mode. 15 | // Most importantly, it switches React into the correct mode. 16 | 'NODE_ENV': JSON.stringify( 17 | process.env.NODE_ENV || 'development' 18 | ), 19 | // Useful for resolving the correct path to static assets in `public`. 20 | // For example, . 21 | // This should only be used as an escape hatch. Normally you would put 22 | // images into the `src` and `import` them in code to get their paths. 23 | 'PUBLIC_URL': JSON.stringify(publicUrl) 24 | }); 25 | return {'process.env': processEnv}; 26 | } 27 | 28 | module.exports = getClientEnvironment; 29 | -------------------------------------------------------------------------------- /demo/config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | // This is a custom Jest transformer turning style imports into empty objects. 2 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 3 | 4 | module.exports = { 5 | process() { 6 | return 'module.exports = {};'; 7 | }, 8 | getCacheKey(fileData, filename) { 9 | // The output is always the same. 10 | return 'cssTransform'; 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /demo/config/jest/fileTransform.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | // This is a custom Jest transformer turning file imports into filenames. 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 5 | 6 | module.exports = { 7 | process(src, filename) { 8 | return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'; 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /demo/config/paths.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var fs = require('fs'); 3 | 4 | // Make sure any symlinks in the project folder are resolved: 5 | // https://github.com/facebookincubator/create-react-app/issues/637 6 | var appDirectory = fs.realpathSync(process.cwd()); 7 | function resolveApp(relativePath) { 8 | return path.resolve(appDirectory, relativePath); 9 | } 10 | 11 | // We support resolving modules according to `NODE_PATH`. 12 | // This lets you use absolute paths in imports inside large monorepos: 13 | // https://github.com/facebookincubator/create-react-app/issues/253. 14 | 15 | // It works similar to `NODE_PATH` in Node itself: 16 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders 17 | 18 | // We will export `nodePaths` as an array of absolute paths. 19 | // It will then be used by Webpack configs. 20 | // Jest doesn’t need this because it already handles `NODE_PATH` out of the box. 21 | 22 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. 23 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims. 24 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421 25 | 26 | var nodePaths = (process.env.NODE_PATH || '') 27 | .split(process.platform === 'win32' ? ';' : ':') 28 | .filter(Boolean) 29 | .filter(folder => !path.isAbsolute(folder)) 30 | .map(resolveApp); 31 | 32 | // config after eject: we're in ./config/ 33 | module.exports = { 34 | appBuild: resolveApp('build'), 35 | appPublic: resolveApp('public'), 36 | appHtml: resolveApp('public/index.html'), 37 | appIndexJs: resolveApp('src/index.js'), 38 | appPackageJson: resolveApp('package.json'), 39 | appSrc: resolveApp('src'), 40 | yarnLockFile: resolveApp('yarn.lock'), 41 | testsSetup: resolveApp('src/setupTests.js'), 42 | appNodeModules: resolveApp('node_modules'), 43 | ownNodeModules: resolveApp('node_modules'), 44 | nodePaths: nodePaths 45 | }; 46 | -------------------------------------------------------------------------------- /demo/config/polyfills.js: -------------------------------------------------------------------------------- 1 | if (typeof Promise === 'undefined') { 2 | // Rejection tracking prevents a common issue where React gets into an 3 | // inconsistent state due to an error, but it gets swallowed by a Promise, 4 | // and the user has no idea what causes React's erratic future behavior. 5 | require('promise/lib/rejection-tracking').enable(); 6 | window.Promise = require('promise/lib/es6-extensions.js'); 7 | } 8 | 9 | // fetch() polyfill for making API calls. 10 | require('whatwg-fetch'); 11 | 12 | // Object.assign() is commonly used with React. 13 | // It will use the native implementation if it's present and isn't buggy. 14 | Object.assign = require('object-assign'); 15 | -------------------------------------------------------------------------------- /demo/config/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | var autoprefixer = require('autoprefixer'); 2 | var webpack = require('webpack'); 3 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); 5 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); 6 | var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); 7 | var getClientEnvironment = require('./env'); 8 | var paths = require('./paths'); 9 | 10 | 11 | 12 | // Webpack uses `publicPath` to determine where the app is being served from. 13 | // In development, we always serve from the root. This makes config easier. 14 | var publicPath = '/'; 15 | // `publicUrl` is just like `publicPath`, but we will provide it to our app 16 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. 17 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. 18 | var publicUrl = ''; 19 | // Get environment variables to inject into our app. 20 | var env = getClientEnvironment(publicUrl); 21 | 22 | // This is the development configuration. 23 | // It is focused on developer experience and fast rebuilds. 24 | // The production configuration is different and lives in a separate file. 25 | module.exports = { 26 | // You may want 'eval' instead if you prefer to see the compiled output in DevTools. 27 | // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343. 28 | devtool: 'cheap-module-source-map', 29 | // These are the "entry points" to our application. 30 | // This means they will be the "root" imports that are included in JS bundle. 31 | // The first two entry points enable "hot" CSS and auto-refreshes for JS. 32 | entry: [ 33 | // Include an alternative client for WebpackDevServer. A client's job is to 34 | // connect to WebpackDevServer by a socket and get notified about changes. 35 | // When you save a file, the client will either apply hot updates (in case 36 | // of CSS changes), or refresh the page (in case of JS changes). When you 37 | // make a syntax error, this client will display a syntax error overlay. 38 | // Note: instead of the default WebpackDevServer client, we use a custom one 39 | // to bring better experience for Create React App users. You can replace 40 | // the line below with these two lines if you prefer the stock client: 41 | // require.resolve('webpack-dev-server/client') + '?/', 42 | // require.resolve('webpack/hot/dev-server'), 43 | require.resolve('react-dev-utils/webpackHotDevClient'), 44 | // We ship a few polyfills by default: 45 | require.resolve('./polyfills'), 46 | // Finally, this is your app's code: 47 | paths.appIndexJs 48 | // We include the app code last so that if there is a runtime error during 49 | // initialization, it doesn't blow up the WebpackDevServer client, and 50 | // changing JS code would still trigger a refresh. 51 | ], 52 | output: { 53 | // Next line is not used in dev but WebpackDevServer crashes without it: 54 | path: paths.appBuild, 55 | // Add /* filename */ comments to generated require()s in the output. 56 | pathinfo: true, 57 | // This does not produce a real file. It's just the virtual path that is 58 | // served by WebpackDevServer in development. This is the JS bundle 59 | // containing code from all our entry points, and the Webpack runtime. 60 | filename: 'static/js/bundle.js', 61 | // This is the URL that app is served from. We use "/" in development. 62 | publicPath: publicPath 63 | }, 64 | resolve: { 65 | // This allows you to set a fallback for where Webpack should look for modules. 66 | // We read `NODE_PATH` environment variable in `paths.js` and pass paths here. 67 | // We use `fallback` instead of `root` because we want `node_modules` to "win" 68 | // if there any conflicts. This matches Node resolution mechanism. 69 | // https://github.com/facebookincubator/create-react-app/issues/253 70 | fallback: paths.nodePaths, 71 | // These are the reasonable defaults supported by the Node ecosystem. 72 | // We also include JSX as a common component filename extension to support 73 | // some tools, although we do not recommend using it, see: 74 | // https://github.com/facebookincubator/create-react-app/issues/290 75 | extensions: ['.js', '.json', '.jsx', ''], 76 | alias: { 77 | // Support React Native Web 78 | // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 79 | 'react-native': 'react-native-web', 80 | 'react': 'react-lite', 81 | 'react-dom': 'react-lite', 82 | } 83 | }, 84 | 85 | module: { 86 | // First, run the linter. 87 | // It's important to do this before Babel processes the JS. 88 | preLoaders: [ 89 | { 90 | test: /\.(js|jsx)$/, 91 | loader: 'eslint', 92 | include: paths.appSrc, 93 | } 94 | ], 95 | loaders: [ 96 | // Default loader: load all assets that are not handled 97 | // by other loaders with the url loader. 98 | // Note: This list needs to be updated with every change of extensions 99 | // the other loaders match. 100 | // E.g., when adding a loader for a new supported file extension, 101 | // we need to add the supported extension to this loader too. 102 | // Add one new line in `exclude` for each loader. 103 | // 104 | // "file" loader makes sure those assets get served by WebpackDevServer. 105 | // When you `import` an asset, you get its (virtual) filename. 106 | // In production, they would get copied to the `build` folder. 107 | // "url" loader works like "file" loader except that it embeds assets 108 | // smaller than specified limit in bytes as data URLs to avoid requests. 109 | // A missing `test` is equivalent to a match. 110 | { 111 | exclude: [ 112 | /\.html$/, 113 | /\.(js|jsx)$/, 114 | /\.css$/, 115 | /\.json$/, 116 | /\.svg$/ 117 | ], 118 | loader: 'url', 119 | query: { 120 | limit: 10000, 121 | name: 'static/media/[name].[hash:8].[ext]' 122 | } 123 | }, 124 | // Process JS with Babel. 125 | { 126 | test: /\.(js|jsx)$/, 127 | include: paths.appSrc, 128 | loader: 'babel', 129 | query: { 130 | 131 | // This is a feature of `babel-loader` for webpack (not Babel itself). 132 | // It enables caching results in ./node_modules/.cache/babel-loader/ 133 | // directory for faster rebuilds. 134 | cacheDirectory: true 135 | } 136 | }, 137 | // "postcss" loader applies autoprefixer to our CSS. 138 | // "css" loader resolves paths in CSS and adds assets as dependencies. 139 | // "style" loader turns CSS into JS modules that inject