Skip to content
This repository was archived by the owner on Dec 28, 2018. It is now read-only.

Commit 642be30

Browse files
author
Eduardo Stuart
committed
vue image loader - first commit
Signed-off-by: Eduardo Stuart <contato@eduardostuart.com.br>
0 parents  commit 642be30

File tree

10 files changed

+442
-0
lines changed

10 files changed

+442
-0
lines changed

‎.babelrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ["es2015"],
3+
"plugins": ["transform-runtime"]
4+
}

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
.DS_Store
3+
npm-debug.log
4+
build
5+
*.sublime-project
6+
*.sublime-workspace

‎dist/vue-image-loader.js‎

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

‎examples/example.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
}

‎examples/example.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Vue.config.debug = true;
2+
3+
// Default timeout 2
4+
Vue.use(VueImageLoader,{
5+
loadInfo: 'Loading',
6+
loadError:'Ops..something went wrong',
7+
timeout:2
8+
});
9+
10+
new Vue().$mount('body');

‎examples/index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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+
<small>Images from unsplash.com</small>
18+
</div>
19+
20+
<div class="row">
21+
<div class="col-sm-4">
22+
<h5>Success</h5>
23+
<image-loader
24+
src="https://images.unsplash.com/photo-1437376576540-236661ddb41f?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy"
25+
alt="Awesome!">
26+
</image-loader>
27+
</div>
28+
<div class="col-sm-4">
29+
<h5>Error (using default timeout - 2s)</h5>
30+
<image-loader
31+
src="https://images.unsxxplash.com/photo-1437376576540-236661ddb41f?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy"
32+
alt="Awesome!">
33+
</image-loader>
34+
</div>
35+
<div class="col-sm-4">
36+
<h5>Error (using custom timeout - 10s)</h5>
37+
<image-loader
38+
:timeout="10"
39+
src="https://images.unsplaxxsh.com/photo-1437376576540-236661ddb41f?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy"
40+
alt="Awesome!">
41+
</image-loader>
42+
</div>
43+
</div>
44+
45+
</div>
46+
47+
48+
<script src="../node_modules/vue/dist/vue.js"></script>
49+
<script src="../index.js"></script>
50+
<script src="./example.js"></script>
51+
52+
</body>
53+
</html>

‎package.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "vue-image-loader",
3+
"version": "1.0.1",
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+
}

0 commit comments

Comments
 (0)