├── .babelrc
├── .gitignore
├── examples
    ├── example.js
    ├── example.css
    └── index.html
├── readme.md
├── src
    ├── main.js
    └── VueImageLoader.vue
├── webpack.config.js
├── package.json
├── license.md
└── dist
    └── vue-image-loader.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015"],
3 |   "plugins": ["transform-runtime"]
4 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | npm-debug.log
4 | build
5 | *.sublime-project
6 | *.sublime-workspace


--------------------------------------------------------------------------------
/examples/example.js:
--------------------------------------------------------------------------------
 1 | Vue.config.debug = true;
 2 | 
 3 | // Default timeout 1
 4 | Vue.use(VueImageLoader,{
 5 |     loadInfo: 'Loading',
 6 |     loadError:'Ops..something went wrong',
 7 |     timeout:1
 8 | });
 9 | 
10 | new Vue().$mount('body');


--------------------------------------------------------------------------------
/examples/example.css:
--------------------------------------------------------------------------------
 1 | .image-loader{
 2 |     text-transform: uppercase;
 3 |     font-weight: bold;
 4 |     font-size: 12px;
 5 |     display:block;
 6 |     margin:0 auto;
 7 |     width:100%;
 8 |     height:200px;
 9 |     line-height: 200px;
10 |     background-color: #f8f8f8;
11 |     overflow: hidden;
12 |     text-align: center;
13 | }
14 | .image-loader > .image{
15 |     max-width: 100%;
16 |     display: block;
17 | }
18 | .inline-images {
19 |     margin:20px auto;
20 | }
21 | .inline-images .image-loader{
22 |     display: inline-block;
23 |     margin-right: 10px;
24 |     width:200px;
25 |     height:120px;
26 |     line-height: 120px;
27 | }


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Vue Image Loader
 2 | 
 3 | Async image loader plugin for Vue.js
 4 | 
 5 | ## Demo
 6 | 
 7 | [Live demo](http://eduardostuart.github.io/vue-image-loader/)
 8 | 
 9 | ## Installation
10 | 
11 | ```
12 | npm install vue-image-loader --save
13 | ```
14 | 
15 | ## Usage
16 | 
17 | ```js
18 | // Default timeout: 2 (optional)
19 | Vue.use(require('vue-image-loader'),{
20 |     timeout:2
21 | }); // or Vue.use(window.VueImageLoader)
22 | ```
23 | 
24 | 
25 | ```html
26 | <image-loader
27 |     src="myimage.gif"
28 |     alt="Awesome!">
29 | </image-loader>
30 | ```
31 | 
32 | Check /examples for more
33 | 
34 | ## License
35 | 
36 | MIT © [Eduardo Stuart](https://twitter.com/eduardostuart)
37 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import VueImageLoader from './VueImageLoader.vue'
 2 | 
 3 | export function install(Vue, options) {
 4 | 
 5 |     VueImageLoader.mixins = VueImageLoader.mixins || [];
 6 | 
 7 |     options = options || {};
 8 | 
 9 |     VueImageLoader.mixins.push({
10 |         props:{
11 |             timeout:{
12 |                 type:Number,
13 |                 default:(options.timeout || null)
14 |             }
15 |         },
16 |         data() {
17 |             return {
18 |                 loadInfo: (options.loadInfo || null),
19 |                 loadError: (options.loadError || null)
20 |             }
21 |         }
22 |     })
23 | 
24 |     Vue.component('image-loader', VueImageLoader);
25 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var version = require("./package.json").version;
 3 | var banner =
 4 |     "/**\n" +
 5 |     " * vue-image-loader v" + version + "\n" +
 6 |     " * https://github.com/eduardostuart/vue-image-loader\n" +
 7 |     " * MIT License\n" +
 8 |     " */\n";
 9 | 
10 | module.exports = {
11 |     entry: './src/main.js',
12 |     output: {
13 |         path:'./dist',
14 |         filename: 'vue-image-loader.js',
15 |         library: 'VueImageLoader',
16 |         libraryTarget: 'umd'
17 |     },
18 |     plugins: [
19 |         new webpack.BannerPlugin(banner, {raw: true})
20 |     ],
21 |     module: {
22 |         loaders: [{
23 |             test: /\.vue$/,
24 |             loader: 'vue'
25 |         }, {
26 |             test: /\.js$/,
27 |             loader: 'babel',
28 |             exclude: /node_modules/
29 |         }]
30 |     },
31 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-image-loader",
 3 |   "version": "1.0.4",
 4 |   "description": "A better way to load images with Vue.js",
 5 |   "main": "dist/vue-image-loader.js",
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server --inline --hot",
 8 |     "build": "webpack --progress --hide-modules --config webpack.config.js"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/eduardostuart/vue-image-loader.git"
13 |   },
14 |   "keywords": [
15 |     "vue",
16 |     "vue-image-loader",
17 |     "image"
18 |   ],
19 |   "author": "Eduardo Stuart",
20 |   "license": "MIT",
21 |   "devDependencies": {
22 |     "babel-core": "^6.4.5",
23 |     "babel-loader": "^6.2.1",
24 |     "babel-plugin-transform-runtime": "^6.4.3",
25 |     "babel-preset-es2015": "^6.3.13",
26 |     "babel-runtime": "^5.8.35",
27 |     "css-loader": "^0.23.1",
28 |     "vue-hot-reload-api": "^1.3.2",
29 |     "vue-html-loader": "^1.1.0",
30 |     "vue-loader": "^8.1.0",
31 |     "vue-style-loader": "^1.0.0",
32 |     "webpack": "^1.12.12",
33 |     "webpack-dev-server": "^1.14.1"
34 |   },
35 |   "dependencies": {
36 |     "vue": "^1.0.15"
37 |   }
38 | }


--------------------------------------------------------------------------------
/license.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) Eduardo Stuart <stuart.eduardo@gmail.com> (eduardostuart.com.br)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <title>Vue Image Loader -  Example</title>
 7 |     <!-- beautify demo.. you don't need to add bootstrap -->
 8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 9 |     <link rel="stylesheet" href="./example.css">
10 | </head>
11 | <body>
12 | 
13 |     <div class="container">
14 | 
15 |         <div class="page-header">
16 |             <h2>Vue Image Loader</h2>
17 |         </div>
18 | 
19 |         <div class="row">
20 |             <div class="col-sm-4">
21 |                 <h5>Using custom timeout - 10 seconds</h5>
22 |                 <image-loader
23 |                     :timeout="10"
24 |                     src="http://lorempixel.com/600/600/sports/1/"
25 |                     alt="Awesome!">
26 |                 </image-loader>
27 |             </div>
28 |             <div class="col-sm-4">
29 |                 <h5>Using default timeout - 1 second</h5>
30 |                 <image-loader
31 |                     src="http://lorempixel.com/1900/1900/sports/1/"
32 |                     alt="Awesome!">
33 |                 </image-loader>
34 |             </div>
35 |         </div>
36 | 
37 |     </div>
38 | 
39 | 
40 |     <script src="../node_modules/vue/dist/vue.js"></script>
41 |     <script src="../dist/vue-image-loader.js"></script>
42 |     <script src="./example.js"></script>
43 | 
44 | </body>
45 | </html>


--------------------------------------------------------------------------------
/src/VueImageLoader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="image-loader">
 3 |         <div class="image-loader-info" v-if="loadInfo && isLoading">{{ loadInfo }}</div>
 4 |         <div class="image-loader-error" v-if="loadError && !success">{{ loadError }}</div>
 5 |         <img v-bind='{"src":src,"alt":alt}' v-el:image class="image" v-show="!isLoading && success">
 6 |     </div>
 7 | </template>
 8 | <script>
 9 |     export default {
10 |         props:{
11 |             src:{
12 |                 type:String,
13 |                 required:true
14 |             },
15 |             alt:{
16 |                 type:String,
17 |                 default:''
18 |             }
19 |         },
20 |         data(){
21 |             return {
22 |                 isLoading:false,
23 |                 success:false
24 |             }
25 |         },
26 |         ready(){
27 |             let image = this.$els.image;
28 | 
29 |             this.isLoading = true;
30 | 
31 |             if(this.timeout !== null){
32 |                 this.defineTimeout();
33 |             }
34 | 
35 |             image.onload  = this.onLoad.bind(this);
36 |             image.onerror = image.onabort =  this.onFail.bind(this);
37 |         },
38 |         methods:{
39 |             defineTimeout(){
40 | 
41 |                 if(typeof this.timer !== 'undefined'){
42 |                     clearTimeout(this.timer);
43 |                 }
44 | 
45 |                 this.timer = setTimeout(this.checkTimeout.bind(this), this.timeout * 1000 );
46 |             },
47 |             checkTimeout(){
48 |                 if(! this.success){
49 |                     this.$dispatch('imageloader.fail',this.$els.image);
50 |                     this.$els.image.setAttribute('src','');
51 |                 }
52 |             },
53 |             onLoad(res){
54 |                 this.$dispatch('imageloader.success',this.$els.image);
55 |                 this.isLoading = false;
56 |                 this.success = true;
57 |             },
58 |             onFail(){
59 |                 this.isLoading = false;
60 |                 this.success = false;
61 |             }
62 |         }
63 |     }
64 | </script>


--------------------------------------------------------------------------------
/dist/vue-image-loader.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * vue-image-loader v1.0.4
  3 |  * https://github.com/eduardostuart/vue-image-loader
  4 |  * MIT License
  5 |  */
  6 | 
  7 | (function webpackUniversalModuleDefinition(root, factory) {
  8 | 	if(typeof exports === 'object' && typeof module === 'object')
  9 | 		module.exports = factory();
 10 | 	else if(typeof define === 'function' && define.amd)
 11 | 		define([], factory);
 12 | 	else if(typeof exports === 'object')
 13 | 		exports["VueImageLoader"] = factory();
 14 | 	else
 15 | 		root["VueImageLoader"] = factory();
 16 | })(this, function() {
 17 | return /******/ (function(modules) { // webpackBootstrap
 18 | /******/ 	// The module cache
 19 | /******/ 	var installedModules = {};
 20 | 
 21 | /******/ 	// The require function
 22 | /******/ 	function __webpack_require__(moduleId) {
 23 | 
 24 | /******/ 		// Check if module is in cache
 25 | /******/ 		if(installedModules[moduleId])
 26 | /******/ 			return installedModules[moduleId].exports;
 27 | 
 28 | /******/ 		// Create a new module (and put it into the cache)
 29 | /******/ 		var module = installedModules[moduleId] = {
 30 | /******/ 			exports: {},
 31 | /******/ 			id: moduleId,
 32 | /******/ 			loaded: false
 33 | /******/ 		};
 34 | 
 35 | /******/ 		// Execute the module function
 36 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 37 | 
 38 | /******/ 		// Flag the module as loaded
 39 | /******/ 		module.loaded = true;
 40 | 
 41 | /******/ 		// Return the exports of the module
 42 | /******/ 		return module.exports;
 43 | /******/ 	}
 44 | 
 45 | 
 46 | /******/ 	// expose the modules object (__webpack_modules__)
 47 | /******/ 	__webpack_require__.m = modules;
 48 | 
 49 | /******/ 	// expose the module cache
 50 | /******/ 	__webpack_require__.c = installedModules;
 51 | 
 52 | /******/ 	// __webpack_public_path__
 53 | /******/ 	__webpack_require__.p = "";
 54 | 
 55 | /******/ 	// Load entry module and return exports
 56 | /******/ 	return __webpack_require__(0);
 57 | /******/ })
 58 | /************************************************************************/
 59 | /******/ ([
 60 | /* 0 */
 61 | /***/ function(module, exports, __webpack_require__) {
 62 | 
 63 | 	'use strict';
 64 | 
 65 | 	Object.defineProperty(exports, "__esModule", {
 66 | 	    value: true
 67 | 	});
 68 | 	exports.install = install;
 69 | 
 70 | 	var _VueImageLoader = __webpack_require__(1);
 71 | 
 72 | 	var _VueImageLoader2 = _interopRequireDefault(_VueImageLoader);
 73 | 
 74 | 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 75 | 
 76 | 	function install(Vue, options) {
 77 | 
 78 | 	    _VueImageLoader2.default.mixins = _VueImageLoader2.default.mixins || [];
 79 | 
 80 | 	    options = options || {};
 81 | 
 82 | 	    _VueImageLoader2.default.mixins.push({
 83 | 	        props: {
 84 | 	            timeout: {
 85 | 	                type: Number,
 86 | 	                default: options.timeout || null
 87 | 	            }
 88 | 	        },
 89 | 	        data: function data() {
 90 | 	            return {
 91 | 	                loadInfo: options.loadInfo || null,
 92 | 	                loadError: options.loadError || null
 93 | 	            };
 94 | 	        }
 95 | 	    });
 96 | 
 97 | 	    Vue.component('image-loader', _VueImageLoader2.default);
 98 | 	}
 99 | 
100 | /***/ },
101 | /* 1 */
102 | /***/ function(module, exports, __webpack_require__) {
103 | 
104 | 	var __vue_script__, __vue_template__
105 | 	__vue_script__ = __webpack_require__(2)
106 | 	if (__vue_script__ &&
107 | 	    __vue_script__.__esModule &&
108 | 	    Object.keys(__vue_script__).length > 1) {
109 | 	  console.warn("[vue-loader] src/VueImageLoader.vue: named exports in *.vue files are ignored.")}
110 | 	__vue_template__ = __webpack_require__(3)
111 | 	module.exports = __vue_script__ || {}
112 | 	if (module.exports.__esModule) module.exports = module.exports.default
113 | 	if (__vue_template__) {
114 | 	(typeof module.exports === "function" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__
115 | 	}
116 | 	if (false) {(function () {  module.hot.accept()
117 | 	  var hotAPI = require("vue-hot-reload-api")
118 | 	  hotAPI.install(require("vue"), true)
119 | 	  if (!hotAPI.compatible) return
120 | 	  var id = "/Users/eduardostuart/Code/Projects/vue-image-loader/src/VueImageLoader.vue"
121 | 	  if (!module.hot.data) {
122 | 	    hotAPI.createRecord(id, module.exports)
123 | 	  } else {
124 | 	    hotAPI.update(id, module.exports, __vue_template__)
125 | 	  }
126 | 	})()}
127 | 
128 | /***/ },
129 | /* 2 */
130 | /***/ function(module, exports) {
131 | 
132 | 	'use strict';
133 | 
134 | 	Object.defineProperty(exports, "__esModule", {
135 | 	    value: true
136 | 	});
137 | 	exports.default = {
138 | 	    props: {
139 | 	        src: {
140 | 	            type: String,
141 | 	            required: true
142 | 	        },
143 | 	        alt: {
144 | 	            type: String,
145 | 	            default: ''
146 | 	        }
147 | 	    },
148 | 	    data: function data() {
149 | 	        return {
150 | 	            isLoading: false,
151 | 	            success: false
152 | 	        };
153 | 	    },
154 | 	    ready: function ready() {
155 | 	        var image = this.$els.image;
156 | 
157 | 	        this.isLoading = true;
158 | 
159 | 	        if (this.timeout !== null) {
160 | 	            this.defineTimeout();
161 | 	        }
162 | 
163 | 	        image.onload = this.onLoad.bind(this);
164 | 	        image.onerror = image.onabort = this.onFail.bind(this);
165 | 	    },
166 | 
167 | 	    methods: {
168 | 	        defineTimeout: function defineTimeout() {
169 | 
170 | 	            if (typeof this.timer !== 'undefined') {
171 | 	                clearTimeout(this.timer);
172 | 	            }
173 | 
174 | 	            this.timer = setTimeout(this.checkTimeout.bind(this), this.timeout * 1000);
175 | 	        },
176 | 	        checkTimeout: function checkTimeout() {
177 | 	            if (!this.success) {
178 | 	                this.$dispatch('imageloader.fail', this.$els.image);
179 | 	                this.$els.image.setAttribute('src', '');
180 | 	            }
181 | 	        },
182 | 	        onLoad: function onLoad(res) {
183 | 	            this.$dispatch('imageloader.success', this.$els.image);
184 | 	            this.isLoading = false;
185 | 	            this.success = true;
186 | 	        },
187 | 	        onFail: function onFail() {
188 | 	            this.isLoading = false;
189 | 	            this.success = false;
190 | 	        }
191 | 	    }
192 | 	};
193 | 
194 | /***/ },
195 | /* 3 */
196 | /***/ function(module, exports) {
197 | 
198 | 	module.exports = "\n<div class=\"image-loader\">\n    <div class=\"image-loader-info\" v-if=\"loadInfo && isLoading\">{{ loadInfo }}</div>\n    <div class=\"image-loader-error\" v-if=\"loadError && !success\">{{ loadError }}</div>\n    <img v-bind='{\"src\":src,\"alt\":alt}' v-el:image class=\"image\" v-show=\"!isLoading && success\">\n</div>\n";
199 | 
200 | /***/ }
201 | /******/ ])
202 | });
203 | ;


--------------------------------------------------------------------------------