Skip to content

Commit

Permalink
add: vue-lazy-container
Browse files Browse the repository at this point in the history
  • Loading branch information
awe committed Feb 10, 2018
1 parent ca05689 commit 65019a5
Show file tree
Hide file tree
Showing 14 changed files with 974 additions and 767 deletions.
12 changes: 10 additions & 2 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
{
"presets": [
["env", { "modules": false }]
[
"env",
{
"modules": false
}
]
],
"plugins": [
"external-helpers"
]
}
}
2 changes: 1 addition & 1 deletion .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ jobs:
build:
docker:
# specify the version you desire here
- image: circleci/node:7.10
- image: circleci/node:8.9.4

# Specify service dependencies here if necessary
# CircleCI maintains a library of pre-built images
Expand Down
22 changes: 21 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ CDN: [https://unpkg.com/vue-lazyload/vue-lazyload.js](https://unpkg.com/vue-lazy

# Usage

main.js
main.js:

```javascript

Expand All @@ -94,6 +94,26 @@ new Vue({
})
```

template:

```html
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
```

use `v-lazy-container` work with raw HTML

```html
<div v-lazy-container="{ selector: 'img' }">
<img data-src="//domain.com/img1.jpg">
<img data-src="//domain.com/img2.jpg">
<img data-src="//domain.com/im3.jpg">
</div>
```

## Constructor Options

|key|description|default|options|
Expand Down
5 changes: 1 addition & 4 deletions build.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,7 @@ async function build() {
const bundle = await rollup.rollup({
input: path.resolve(__dirname, 'src/index.js'),
plugins: [
babel({
exclude: 'node_modules/**',
plugins: ['external-helpers']
}),
babel({ runtimeHelpers: true }),
uglify()
]
})
Expand Down
50 changes: 50 additions & 0 deletions karma.conf.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
const DEBUG = !!process.env.DEBUG
if (!DEBUG) process.env.CHROME_BIN = require('puppeteer').executablePath()

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai'],
plugins: [
require('karma-mocha'),
require('karma-chai'),
require('karma-chrome-launcher'),
require('karma-rollup-preprocessor'),
// require('karma-coverage')
],
files: [
{ pattern: 'test/*-spec.js', watched: false }
],
exclude: [],
preprocessors: {
'test/*-spec.js': ['rollup']
},
// coverageReporter: {
// type: 'html',
// dir: 'coverage/'
// },
rollupPreprocessor: {
plugins: [
require('rollup-plugin-babel')(),
require('rollup-plugin-node-resolve')({
jsnext: true,
browser: true
}),
require('rollup-plugin-replace')({
'process.env.NODE_ENV': JSON.stringify( 'production' )
})
],
format: 'iife', // Helps prevent naming collisions.
name: 'lib', // Required for 'iife' format.
sourcemap: 'inline' // Sensible for testing.
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: DEBUG ? ['Chrome'] : ['ChromeHeadless'],
singleRun: !DEBUG,
concurrency: Infinity
})
}
32 changes: 24 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"name": "vue-lazyload",
"version": "1.1.4",
"version": "1.2.0",
"description": "Vue module for lazy-loading images in your vue.js applications.",
"main": "vue-lazyload.js",
"unpkg": "vue-lazyload.js",
"scripts": {
"start": "node build",
"compile": "babel --presets env -d lib/ src/",
"test": "npm run compile && mocha --require babel-core/register"
"build": "node build",
"test": "karma start",
"test:debug": "cross-env DEBUG=true karma start"
},
"dependencies": {},
"repository": {
Expand All @@ -24,6 +24,11 @@
"bugs": {
"url": "https://github.com/hilongjw/vue-lazyload/issues"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.26.0",
Expand All @@ -34,10 +39,21 @@
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"chai": "^4.1.2",
"karma": "^1.7.1",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.1",
"karma-expect": "^1.1.3",
"karma-mocha": "^1.3.0",
"karma-rollup-preprocessor": "^5.0.2",
"mocha": "^4.0.1",
"rollup": "^0.52.1",
"rollup-plugin-babel": "^3.0.2",
"rollup-plugin-uglify": "^2.0.1",
"vue": "^2.5.9"
"puppeteer": "^0.13.0",
"rollup": "^0.51.1",
"rollup-plugin-babel": "^2.6.1",
"rollup-plugin-commonjs": "^8.2.6",
"rollup-plugin-node-resolve": "^3.0.2",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-uglify": "^1.0.1",
"vue": "^2.5.13"
}
}
99 changes: 61 additions & 38 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,50 +1,73 @@
import Lazy from './lazy'
import LazyComponent from './lazy-component'
import LazyContainer from './lazy-container'
import { assign } from './util'

export default {
/**
* install function
* @param {Vue} Vue
* @param {object} options lazyload options
*/
install (Vue, options = {}) {
const LazyClass = Lazy(Vue)
const lazy = new LazyClass(options)
/*
* install function
* @param {Vue} Vue
* @param {object} options lazyload options
*/
install (Vue, options = {}) {
const LazyClass = Lazy(Vue)
const lazy = new LazyClass(options)
const lazyContainer = new LazyContainer({ lazy })

const isVueNext = Vue.version.split('.')[0] === '2'
const isVue2 = Vue.version.split('.')[0] === '2'

Vue.prototype.$Lazyload = lazy
Vue.prototype.$Lazyload = lazy

if (options.lazyComponent) {
Vue.component('lazy-component', LazyComponent(lazy))
if (options.lazyComponent) {
Vue.component('lazy-component', LazyComponent(lazy))
}

if (isVue2) {
Vue.directive('lazy', {
bind: lazy.add.bind(lazy),
update: lazy.update.bind(lazy),
componentUpdated: lazy.lazyLoadHandler.bind(lazy),
unbind: lazy.remove.bind(lazy)
})
Vue.directive('lazy-container', {
bind: lazyContainer.bind.bind(lazyContainer),
update: lazyContainer.update.bind(lazyContainer),
unbind: lazyContainer.unbind.bind(lazyContainer)
})
} else {
Vue.directive('lazy', {
bind: lazy.lazyLoadHandler.bind(lazy),
update (newValue, oldValue) {
assign(this.vm.$refs, this.vm.$els)
lazy.add(this.el, {
modifiers: this.modifiers || {},
arg: this.arg,
value: newValue,
oldValue: oldValue
}, {
context: this.vm
})
},
unbind () {
lazy.remove(this.el)
}
})

if (isVueNext) {
Vue.directive('lazy', {
bind: lazy.add.bind(lazy),
update: lazy.update.bind(lazy),
componentUpdated: lazy.lazyLoadHandler.bind(lazy),
unbind : lazy.remove.bind(lazy)
})
} else {
Vue.directive('lazy', {
bind: lazy.lazyLoadHandler.bind(lazy),
update (newValue, oldValue) {
assign(this.vm.$refs, this.vm.$els)
lazy.add(this.el, {
modifiers: this.modifiers || {},
arg: this.arg,
value: newValue,
oldValue: oldValue
}, {
context: this.vm
})
},
unbind () {
lazy.remove(this.el)
}
})
Vue.directive('lazy-container', {
update (newValue, oldValue) {
lazyContainer.update(this.el, {
modifiers: this.modifiers || {},
arg: this.arg,
value: newValue,
oldValue: oldValue
}, {
context: this.vm
})
},
unbind () {
lazyContainer.unbind(this.el)
}
})
}
}
}
}
88 changes: 44 additions & 44 deletions src/lazy-component.js
Original file line number Diff line number Diff line change
@@ -1,52 +1,52 @@
import { inBrowser } from './util'

export default (lazy) => {
return {
props: {
tag: {
type: String,
default: 'div'
}
return {
props: {
tag: {
type: String,
default: 'div'
}
},
render (h) {
if (this.show === false) {
return h(this.tag)
}
return h(this.tag, null, this.$slots.default)
},
data () {
return {
el: null,
state: {
loaded: false
},
render (h) {
if (this.show === false) {
return h(this.tag)
}
return h(this.tag, null, this.$slots.default)
},
data () {
return {
el: null,
state: {
loaded: false
},
rect: {},
show: false
}
},
mounted () {
this.el = this.$el
lazy.addLazyBox(this)
lazy.lazyLoadHandler()
},
beforeDestroy () {
lazy.removeComponent(this)
},
methods: {
getRect () {
this.rect = this.$el.getBoundingClientRect()
},
checkInView () {
this.getRect()
return inBrowser &&
rect: {},
show: false
}
},
mounted () {
this.el = this.$el
lazy.addLazyBox(this)
lazy.lazyLoadHandler()
},
beforeDestroy () {
lazy.removeComponent(this)
},
methods: {
getRect () {
this.rect = this.$el.getBoundingClientRect()
},
checkInView () {
this.getRect()
return inBrowser &&
(this.rect.top < window.innerHeight * lazy.options.preLoad && this.rect.bottom > 0) &&
(this.rect.left < window.innerWidth * lazy.options.preLoad && this.rect.right > 0)
},
load () {
this.show = true
this.state.loaded = true
this.$emit('show', this)
}
}
},
load () {
this.show = true
this.state.loaded = true
this.$emit('show', this)
}
}
}
}
Loading

0 comments on commit 65019a5

Please sign in to comment.