Skip to content

Commit

Permalink
config options dynamically
Browse files Browse the repository at this point in the history
  • Loading branch information
@maggiehe
maggiehe committed Jan 31, 2017
1 parent 1fe61a0 commit 93fecb6
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 109 deletions.
76 changes: 45 additions & 31 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,51 @@ import Lazy from './lazy'
import LazyComponent from './lazy-component'
import { assign } from './util'

export default (Vue, options = {}) => {
const lazy = new Lazy(options)
const isVueNext = Vue.version.split('.')[0] === '2'
let lazy = null
let getLazyInstance = () => {
if (!!lazy) {
return lazy
}
lazy = new Lazy({})
return lazy
}

Vue.prototype.$Lazyload = lazy
Vue.component('lazy-component', LazyComponent(lazy))
export default {
install(Vue, options = {}) {
Object.assign(getLazyInstance().options, options)
const isVueNext = Vue.version.split('.')[0] === '2'

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.prototype.$Lazyload = lazy
Vue.component('lazy-component', LazyComponent(lazy))

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)
}
})
}
},
config(options = {}) {
Object.assign(getLazyInstance().options, options)
}
}
}
183 changes: 105 additions & 78 deletions vue-lazyload.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ function find(arr, fn) {
}

var getDPR = function getDPR() {
var scale = arguments.length <= 0 || arguments[0] === undefined ? 1 : arguments[0];
var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
return inBrowser && window.devicePixelRatio || scale;
};

Expand Down Expand Up @@ -174,7 +174,7 @@ var loadImageAsync = function loadImageAsync(item, resolve, reject) {
resolve({
naturalHeight: image.naturalHeight,
naturalWidth: image.naturalWidth,
src: item.src
src: image.src
});
};

Expand All @@ -191,14 +191,14 @@ var imageCache = {};

var ReactiveListener = function () {
function ReactiveListener(_ref) {
var el = _ref.el;
var src = _ref.src;
var error = _ref.error;
var loading = _ref.loading;
var bindType = _ref.bindType;
var $parent = _ref.$parent;
var options = _ref.options;
var elRenderer = _ref.elRenderer;
var el = _ref.el,
src = _ref.src,
error = _ref.error,
loading = _ref.loading,
bindType = _ref.bindType,
$parent = _ref.$parent,
options = _ref.options,
elRenderer = _ref.elRenderer;

_classCallCheck$1(this, ReactiveListener);

Expand All @@ -216,7 +216,7 @@ var ReactiveListener = function () {

this.initState();

this.performance = {
this.performanceData = {
init: Date.now(),
loadStart: null,
loadEnd: null
Expand All @@ -240,14 +240,14 @@ var ReactiveListener = function () {
}, {
key: 'record',
value: function record(event) {
this.performance[event] = Date.now();
this.performanceData[event] = Date.now();
}
}, {
key: 'update',
value: function update(_ref2) {
var src = _ref2.src;
var loading = _ref2.loading;
var error = _ref2.error;
var src = _ref2.src,
loading = _ref2.loading,
error = _ref2.error;

this.src = src;
this.loading = loading;
Expand Down Expand Up @@ -289,6 +289,7 @@ var ReactiveListener = function () {
loadImageAsync({
src: this.src
}, function (data) {
_this.src = data.src;
_this.naturalHeight = data.naturalHeight;
_this.naturalWidth = data.naturalWidth;
_this.state.loaded = true;
Expand All @@ -307,6 +308,25 @@ var ReactiveListener = function () {
value: function render(state, notify) {
this.elRenderer(this, state, notify);
}
}, {
key: 'performance',
value: function performance() {
var state = 'loading';
var time = 0;

if (this.state.loaded) {
state = 'loaded';
time = (this.performanceData.loadEnd - this.performanceData.loadStart) / 1000;
}

if (this.state.error) state = 'error';

return {
src: this.src,
state: state,
time: time
};
}
}, {
key: 'destroy',
value: function destroy() {
Expand All @@ -333,16 +353,16 @@ var Lazy = function () {
function Lazy(_ref) {
var _this = this;

var preLoad = _ref.preLoad;
var error = _ref.error;
var loading = _ref.loading;
var attempt = _ref.attempt;
var silent = _ref.silent;
var scale = _ref.scale;
var listenEvents = _ref.listenEvents;
var hasbind = _ref.hasbind;
var filter = _ref.filter;
var adapter = _ref.adapter;
var preLoad = _ref.preLoad,
error = _ref.error,
loading = _ref.loading,
attempt = _ref.attempt,
silent = _ref.silent,
scale = _ref.scale,
listenEvents = _ref.listenEvents,
hasbind = _ref.hasbind,
filter = _ref.filter,
adapter = _ref.adapter;

_classCallCheck(this, Lazy);

Expand Down Expand Up @@ -391,12 +411,10 @@ var Lazy = function () {
return Vue.nextTick(this.lazyLoadHandler);
}

var _valueFormatter = this.valueFormatter(binding.value);

var src = _valueFormatter.src;
var loading = _valueFormatter.loading;
var error = _valueFormatter.error;

var _valueFormatter = this.valueFormatter(binding.value),
src = _valueFormatter.src,
loading = _valueFormatter.loading,
error = _valueFormatter.error;

Vue.nextTick(function () {
var tmp = getBestSelectionFromSrcset(el, _this2.options.scale);
Expand Down Expand Up @@ -441,12 +459,10 @@ var Lazy = function () {
value: function update(el, binding) {
var _this3 = this;

var _valueFormatter2 = this.valueFormatter(binding.value);

var src = _valueFormatter2.src;
var loading = _valueFormatter2.loading;
var error = _valueFormatter2.error;

var _valueFormatter2 = this.valueFormatter(binding.value),
src = _valueFormatter2.src,
loading = _valueFormatter2.loading,
error = _valueFormatter2.error;

var exist = find(this.ListenerQueue, function (item) {
return item.el === el;
Expand Down Expand Up @@ -522,12 +538,7 @@ var Lazy = function () {
var list = [];

this.ListenerQueue.map(function (item) {
if (item.performance.loadEnd) {
list.push({
src: item.src,
time: (item.performance.loadEnd - item.performance.loadStart) / 1000
});
}
list.push(item.performance());
});

return list;
Expand All @@ -536,8 +547,8 @@ var Lazy = function () {
key: 'elRenderer',
value: function elRenderer(listener, state, notify) {
if (!listener.el) return;
var el = listener.el;
var bindType = listener.bindType;
var el = listener.el,
bindType = listener.bindType;


var src = void 0;
Expand Down Expand Up @@ -661,43 +672,59 @@ var LazyComponent = (function (lazy) {
};
});

var index = (function (Vue$$1) {
var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
var lazy = null;
var getLazyInstance = function getLazyInstance() {
if (!!lazy) {
return lazy;
}
lazy = new Lazy({});
return lazy;
};

var lazy = new Lazy(options);
var isVueNext = Vue$$1.version.split('.')[0] === '2';
var index = {
install: function install(Vue$$1) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

Vue$$1.prototype.$Lazyload = lazy;
Vue$$1.component('lazy-component', LazyComponent(lazy));
Object.assign(getLazyInstance().options, options);
var isVueNext = Vue$$1.version.split('.')[0] === '2';

if (isVueNext) {
Vue$$1.directive('lazy', {
bind: lazy.add.bind(lazy),
update: lazy.update.bind(lazy),
componentUpdated: lazy.lazyLoadHandler.bind(lazy),
unbind: lazy.remove.bind(lazy)
});
} else {
Vue$$1.directive('lazy', {
bind: lazy.lazyLoadHandler.bind(lazy),
update: function 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: function unbind() {
lazy.remove(this.el);
}
});
Vue$$1.prototype.$Lazyload = lazy;
Vue$$1.component('lazy-component', LazyComponent(lazy));

if (isVueNext) {
Vue$$1.directive('lazy', {
bind: lazy.add.bind(lazy),
update: lazy.update.bind(lazy),
componentUpdated: lazy.lazyLoadHandler.bind(lazy),
unbind: lazy.remove.bind(lazy)
});
} else {
Vue$$1.directive('lazy', {
bind: lazy.lazyLoadHandler.bind(lazy),
update: function 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: function unbind() {
lazy.remove(this.el);
}
});
}
},
config: function config() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

Object.assign(getLazyInstance().options, options);
}
});
};

return index;

})));
})));

0 comments on commit 93fecb6

Please sign in to comment.