@@ -79,20 +79,19 @@ return /******/ (function(modules) { // webpackBootstrap
79
79
80
80
"use strict" ;
81
81
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 ; } ) ;
84
83
/*!
85
84
* Vue Clazy Load
86
85
* Component-based lazy (CLazy) load images in Vue.js 2
87
86
* @author Matheus Grieger
88
- * @version 0.3 .0
87
+ * @version 0.4 .0
89
88
*/
90
89
var ClazyLoadComponent = {
91
90
name : 'ClazyLoad' ,
92
91
props : {
93
92
/**
94
93
* HTML/Component tag name to be used in place of the component
95
- * @type {Object }
94
+ * @type {String }
96
95
* @default div
97
96
*/
98
97
tag : {
@@ -101,7 +100,7 @@ var ClazyLoadComponent = {
101
100
} ,
102
101
/**
103
102
* Image source URL
104
- * @type {Object }
103
+ * @type {String }
105
104
* @required
106
105
*/
107
106
src : {
@@ -110,12 +109,12 @@ var ClazyLoadComponent = {
110
109
} ,
111
110
/**
112
111
* IntersectionObserver root element
113
- * @type {Object }
112
+ * @type {String }
114
113
*/
115
114
element : String ,
116
115
/**
117
116
* IntersectionObserver threshold
118
- * @type {Object }
117
+ * @type {Array, Number }
119
118
*/
120
119
threshold : {
121
120
type : [ Array , Number ] ,
@@ -125,7 +124,7 @@ var ClazyLoadComponent = {
125
124
} ,
126
125
/**
127
126
* InserectionObserver visibility ratio
128
- * @type {Object }
127
+ * @type {Number }
129
128
*/
130
129
ratio : {
131
130
type : Number ,
@@ -137,7 +136,7 @@ var ClazyLoadComponent = {
137
136
} ,
138
137
/**
139
138
* IntersectionObserver root margin
140
- * @type {Object }
139
+ * @type {String }
141
140
*/
142
141
margin : {
143
142
type : String ,
@@ -150,6 +149,34 @@ var ClazyLoadComponent = {
150
149
* @type {String }
151
150
*/
152
151
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 : {
153
180
type : String ,
154
181
default : null
155
182
}
@@ -169,6 +196,9 @@ var ClazyLoadComponent = {
169
196
load : function load ( ) {
170
197
var _this = this ;
171
198
199
+ // emits 'loading' event upwards
200
+ this . $emit ( 'loading' ) ;
201
+
172
202
// disconnect observer
173
203
// so it doesn't load more than once
174
204
this . observer . disconnect ( ) ;
@@ -237,11 +267,13 @@ var ClazyLoadComponent = {
237
267
}
238
268
} ,
239
269
render : function render ( h ) {
270
+ // class to be added to element indicating load state
271
+ var elementClass = this . loaded ? this . loadedClass : this . loadingClass ;
272
+
240
273
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
245
277
} , [ this . loaded ? this . $slots . default || this . $slots . image // allows for "default" slot
246
278
: this . $slots . placeholder ] ) ;
247
279
} ,
@@ -263,11 +295,8 @@ var ClazyLoad = {
263
295
// Full component and install
264
296
/* harmony default export */ __webpack_exports__ [ "default" ] = ( ClazyLoad ) ;
265
297
266
- // Install function only (Vue.use)
267
- var install = ClazyLoad . install ;
268
-
269
298
// Component object
270
- var component = ClazyLoadComponent ;
299
+ var VueClazyLoad = ClazyLoadComponent ;
271
300
272
301
/***/ } )
273
302
/******/ ] ) ;
0 commit comments