Skip to content

Commit 5328c0b

Browse files
author
Matheus Grieger
committed
Built files
1 parent d80ea1f commit 5328c0b

File tree

2 files changed

+49
-20
lines changed

2 files changed

+49
-20
lines changed

dist/vue-clazy-load.js

Lines changed: 46 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -79,20 +79,19 @@ return /******/ (function(modules) { // webpackBootstrap
7979

8080
"use strict";
8181
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
82-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "install", function() { return install; });
83-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "component", function() { return component; });
82+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VueClazyLoad", function() { return VueClazyLoad; });
8483
/*!
8584
* Vue Clazy Load
8685
* Component-based lazy (CLazy) load images in Vue.js 2
8786
* @author Matheus Grieger
88-
* @version 0.3.0
87+
* @version 0.4.0
8988
*/
9089
var ClazyLoadComponent = {
9190
name: 'ClazyLoad',
9291
props: {
9392
/**
9493
* HTML/Component tag name to be used in place of the component
95-
* @type {Object}
94+
* @type {String}
9695
* @default div
9796
*/
9897
tag: {
@@ -101,7 +100,7 @@ var ClazyLoadComponent = {
101100
},
102101
/**
103102
* Image source URL
104-
* @type {Object}
103+
* @type {String}
105104
* @required
106105
*/
107106
src: {
@@ -110,12 +109,12 @@ var ClazyLoadComponent = {
110109
},
111110
/**
112111
* IntersectionObserver root element
113-
* @type {Object}
112+
* @type {String}
114113
*/
115114
element: String,
116115
/**
117116
* IntersectionObserver threshold
118-
* @type {Object}
117+
* @type {Array, Number}
119118
*/
120119
threshold: {
121120
type: [Array, Number],
@@ -125,7 +124,7 @@ var ClazyLoadComponent = {
125124
},
126125
/**
127126
* InserectionObserver visibility ratio
128-
* @type {Object}
127+
* @type {Number}
129128
*/
130129
ratio: {
131130
type: Number,
@@ -137,7 +136,7 @@ var ClazyLoadComponent = {
137136
},
138137
/**
139138
* IntersectionObserver root margin
140-
* @type {Object}
139+
* @type {String}
141140
*/
142141
margin: {
143142
type: String,
@@ -150,6 +149,34 @@ var ClazyLoadComponent = {
150149
* @type {String}
151150
*/
152151
crossorigin: {
152+
type: String,
153+
default: null,
154+
validator: function validator(value) {
155+
return value === 'anonymous' || value === 'use-credentials';
156+
}
157+
},
158+
/**
159+
* Class added to element when it finishes loading
160+
* @type {String}
161+
* @default loaded
162+
*/
163+
loadedClass: {
164+
type: String,
165+
default: 'loaded'
166+
},
167+
/**
168+
* Class added to element while it is loading
169+
* @type {String}
170+
*/
171+
loadingClass: {
172+
type: String,
173+
default: 'loading'
174+
},
175+
/**
176+
* Class added to element if loading failed
177+
* @type {String}
178+
*/
179+
errorClass: {
153180
type: String,
154181
default: null
155182
}
@@ -169,6 +196,9 @@ var ClazyLoadComponent = {
169196
load: function load() {
170197
var _this = this;
171198

199+
// emits 'loading' event upwards
200+
this.$emit('loading');
201+
172202
// disconnect observer
173203
// so it doesn't load more than once
174204
this.observer.disconnect();
@@ -237,11 +267,13 @@ var ClazyLoadComponent = {
237267
}
238268
},
239269
render: function render(h) {
270+
// class to be added to element indicating load state
271+
var elementClass = this.loaded ? this.loadedClass : this.loadingClass;
272+
240273
return h(this.tag, {
241-
// adds 'loaded' class if finished loading
242-
// or 'loading' class if still loading
243-
// TODO: allow custom class naming
244-
class: this.loaded ? 'loaded' : 'loading'
274+
// if loading failed adds error class if exists,
275+
// otherwhise adds elementClass defined above
276+
class: this.errored && this.errorClass ? this.errorClass : elementClass
245277
}, [this.loaded ? this.$slots.default || this.$slots.image // allows for "default" slot
246278
: this.$slots.placeholder]);
247279
},
@@ -263,11 +295,8 @@ var ClazyLoad = {
263295
// Full component and install
264296
/* harmony default export */ __webpack_exports__["default"] = (ClazyLoad);
265297

266-
// Install function only (Vue.use)
267-
var install = ClazyLoad.install;
268-
269298
// Component object
270-
var component = ClazyLoadComponent;
299+
var VueClazyLoad = ClazyLoadComponent;
271300

272301
/***/ })
273302
/******/ ]);

dist/vue-clazy-load.min.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)