sticky.js 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. module.exports =
  2. /** *** */ (function (modules) { // webpackBootstrap
  3. /** *** */ // The module cache
  4. /** *** */ const installedModules = {}
  5. /** *** */
  6. /** *** */ // The require function
  7. /** *** */ function __webpack_require__(moduleId) {
  8. /** *** */
  9. /** *** */ // Check if module is in cache
  10. /** *** */ if (installedModules[moduleId]) {
  11. /** *** */ return installedModules[moduleId].exports
  12. /** *** */ }
  13. /** *** */ // Create a new module (and put it into the cache)
  14. /** *** */ const module = installedModules[moduleId] = {
  15. /** *** */ i: moduleId,
  16. /** *** */ l: false,
  17. /** *** */ exports: {}
  18. /** *** */}
  19. /** *** */
  20. /** *** */ // Execute the module function
  21. /** *** */ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)
  22. /** *** */
  23. /** *** */ // Flag the module as loaded
  24. /** *** */ module.l = true
  25. /** *** */
  26. /** *** */ // Return the exports of the module
  27. /** *** */ return module.exports
  28. /** *** */ }
  29. /** *** */
  30. /** *** */
  31. /** *** */ // expose the modules object (__webpack_modules__)
  32. /** *** */ __webpack_require__.m = modules
  33. /** *** */
  34. /** *** */ // expose the module cache
  35. /** *** */ __webpack_require__.c = installedModules
  36. /** *** */
  37. /** *** */ // define getter function for harmony exports
  38. /** *** */ __webpack_require__.d = function (exports, name, getter) {
  39. /** *** */ if (!__webpack_require__.o(exports, name)) {
  40. /** *** */ Object.defineProperty(exports, name, {enumerable: true, get: getter})
  41. /** *** */ }
  42. /** *** */ }
  43. /** *** */
  44. /** *** */ // define __esModule on exports
  45. /** *** */ __webpack_require__.r = function (exports) {
  46. /** *** */ if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  47. /** *** */ Object.defineProperty(exports, Symbol.toStringTag, {value: 'Module'})
  48. /** *** */ }
  49. /** *** */ Object.defineProperty(exports, '__esModule', {value: true})
  50. /** *** */ }
  51. /** *** */
  52. /** *** */ // create a fake namespace object
  53. /** *** */ // mode & 1: value is a module id, require it
  54. /** *** */ // mode & 2: merge all properties of value into the ns
  55. /** *** */ // mode & 4: return value when already ns object
  56. /** *** */ // mode & 8|1: behave like require
  57. /** *** */ __webpack_require__.t = function (value, mode) {
  58. /** *** */ if (mode & 1) value = __webpack_require__(value)
  59. /** *** */ if (mode & 8) return value
  60. /** *** */ if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value
  61. /** *** */ const ns = Object.create(null)
  62. /** *** */ __webpack_require__.r(ns)
  63. /** *** */ Object.defineProperty(ns, 'default', {enumerable: true, value})
  64. /** *** */ if (mode & 2 && typeof value !== 'string') for (const key in value) __webpack_require__.d(ns, key, function (key) { return value[key] }.bind(null, key))
  65. /** *** */ return ns
  66. /** *** */ }
  67. /** *** */
  68. /** *** */ // getDefaultExport function for compatibility with non-harmony modules
  69. /** *** */ __webpack_require__.n = function (module) {
  70. /** *** */ const getter = module && module.__esModule
  71. /** *** */ ? function getDefault() { return module.default }
  72. /** *** */ : function getModuleExports() { return module }
  73. /** *** */ __webpack_require__.d(getter, 'a', getter)
  74. /** *** */ return getter
  75. /** *** */ }
  76. /** *** */
  77. /** *** */ // Object.prototype.hasOwnProperty.call
  78. /** *** */ __webpack_require__.o = function (object, property) { return Object.prototype.hasOwnProperty.call(object, property) }
  79. /** *** */
  80. /** *** */ // __webpack_public_path__
  81. /** *** */ __webpack_require__.p = ''
  82. /** *** */
  83. /** *** */
  84. /** *** */ // Load entry module and return exports
  85. /** *** */ return __webpack_require__(__webpack_require__.s = 8)
  86. /** *** */ }({
  87. /***/ 8:
  88. /***/ (function (module, exports, __webpack_require__) {
  89. const selectQuery = __webpack_require__(9)
  90. const target = '.weui-sticky'
  91. Component({
  92. options: {
  93. addGlobalClass: true,
  94. pureDataPattern: /^_/,
  95. multipleSlots: true
  96. },
  97. behaviors: [selectQuery],
  98. properties: {
  99. offsetTop: {
  100. type: Number,
  101. value: 0
  102. },
  103. zIndex: {
  104. type: Number,
  105. value: 99
  106. },
  107. disabled: {
  108. type: Boolean,
  109. value: false
  110. },
  111. container: {
  112. type: null
  113. }
  114. },
  115. data: {
  116. fixed: false,
  117. height: 0,
  118. _attached: false,
  119. _containerHeight: 0
  120. },
  121. observers: {
  122. disabled(newVal) {
  123. if (!this._attached) return
  124. newVal ? this.disconnectObserver() : this.initObserver()
  125. },
  126. container(newVal) {
  127. if (typeof newVal !== 'function' || !this.data.height) return
  128. this.observerContainer()
  129. }
  130. },
  131. lifetimes: {
  132. attached() {
  133. this.data._attached = true
  134. if (!this.data.disabled) this.initObserver()
  135. },
  136. detached() {
  137. this.data._attached = false
  138. this.disconnectObserver()
  139. }
  140. },
  141. methods: {
  142. getContainerRect() {
  143. const nodesRef = this.data.container()
  144. return new Promise(function (resolve) {
  145. return nodesRef.boundingClientRect(resolve).exec()
  146. })
  147. },
  148. initObserver() {
  149. const _this = this
  150. this.disconnectObserver()
  151. this.getRect(target).then(function (rect) {
  152. _this.setData({
  153. height: rect.height
  154. })
  155. _this.observerContent()
  156. _this.observerContainer()
  157. })
  158. },
  159. disconnectObserver(observerName) {
  160. if (observerName) {
  161. const observer = this[observerName]
  162. observer && observer.disconnect()
  163. } else {
  164. this.contentObserver && this.contentObserver.disconnect()
  165. this.containerObserver && this.containerObserver.disconnect()
  166. }
  167. },
  168. observerContent() {
  169. const _this2 = this
  170. const offsetTop = this.data.offsetTop
  171. this.disconnectObserver('contentObserver')
  172. const contentObserver = this.createIntersectionObserver({
  173. thresholds: [1],
  174. initialRatio: 1
  175. })
  176. contentObserver.relativeToViewport({
  177. top: -offsetTop
  178. })
  179. contentObserver.observe(target, function (res) {
  180. if (_this2.data.disabled) return
  181. _this2.setFixed(res.boundingClientRect.top)
  182. })
  183. this.contentObserver = contentObserver
  184. },
  185. observerContainer() {
  186. const _this3 = this
  187. const _data = this.data
  188. const container = _data.container
  189. const height = _data.height
  190. const offsetTop = _data.offsetTop
  191. if (typeof container !== 'function') return
  192. this.disconnectObserver('containerObserver')
  193. this.getContainerRect().then(function (rect) {
  194. _this3.getRect(target).then(function (contentRect) {
  195. const _contentTop = contentRect.top
  196. const _containerTop = rect.top
  197. const _containerHeight = rect.height
  198. const _relativeTop = _contentTop - _containerTop
  199. const containerObserver = _this3.createIntersectionObserver({
  200. thresholds: [1],
  201. initialRatio: 1
  202. })
  203. containerObserver.relativeToViewport({
  204. top: _containerHeight - height - offsetTop - _relativeTop
  205. })
  206. containerObserver.observe(target, function (res) {
  207. if (_this3.data.disabled) return
  208. _this3.setFixed(res.boundingClientRect.top)
  209. })
  210. _this3.data._relativeTop = _relativeTop
  211. _this3.data._containerHeight = _containerHeight
  212. _this3.containerObserver = containerObserver
  213. })
  214. })
  215. },
  216. setFixed(top) {
  217. const _data2 = this.data
  218. const height = _data2.height
  219. const _containerHeight = _data2._containerHeight
  220. const _relativeTop = _data2._relativeTop
  221. const offsetTop = _data2.offsetTop
  222. const fixed = _containerHeight && height ? top >= height + offsetTop + _relativeTop - _containerHeight && top < offsetTop : top < offsetTop
  223. this.triggerEvent('scroll', {
  224. scrollTop: top,
  225. isFixed: fixed
  226. })
  227. this.setData({fixed})
  228. }
  229. }
  230. })
  231. /***/ }),
  232. /***/ 9:
  233. /***/ (function (module, exports, __webpack_require__) {
  234. module.exports = Behavior({
  235. methods: {
  236. getRect(selector) {
  237. const _this = this
  238. return new Promise(function (resolve, reject) {
  239. _this.createSelectorQuery().select(selector).boundingClientRect(function (rect) {
  240. if (rect) {
  241. resolve(rect)
  242. } else {
  243. reject(new Error('can not find selector: ' + selector))
  244. }
  245. }).exec()
  246. })
  247. },
  248. getAllRects(selector) {
  249. const _this2 = this
  250. return new Promise(function (resolve, reject) {
  251. _this2.createSelectorQuery().selectAll(selector).boundingClientRect(function (rects) {
  252. if (rects && rects.lenght > 0) {
  253. resolve(rects)
  254. } else {
  255. reject(new Error('can not find selector: ' + selector))
  256. }
  257. }).exec()
  258. })
  259. }
  260. }
  261. })
  262. /***/ })
  263. /** *** */}))