feat: Add helper directives

- v-route
  automatically route to a valid frappe route
- v-img-src
  handle img loading and error handling
This commit is contained in:
Faris Ansari 2018-08-26 20:08:40 +05:30
parent bf5cc7d823
commit 019bfd3940
3 changed files with 46 additions and 3 deletions

View File

@ -15,7 +15,7 @@
</i>
</div>
<div class="hub-card-body">
<img class="hub-card-image" :src="item.image"/>
<img class="hub-card-image" v-img-src="item.image"/>
<div class="hub-card-overlay">
<div v-if="is_local" class="hub-card-overlay-body">
<div class="hub-card-overlay-button">

View File

@ -5,8 +5,7 @@
:message="empty_state_message"
:bordered="true"
:height="80"
>
</empty-state>
/>
<item-card
v-for="item in items"
:key="container_name + '_' +item[item_id_fieldname]"

View File

@ -0,0 +1,44 @@
import Vue from 'vue/dist/vue.js';
Vue.prototype.__ = window.__;
Vue.prototype.frappe = window.frappe;
Vue.directive('route', {
bind(el, binding) {
const route = binding.value;
el.classList.add('cursor-pointer');
el.addEventListener('click', () => frappe.set_route(route));
},
unbind(el) {
el.classList.remove('cursor-pointer');
}
});
const handleImage = (el, src) => {
let img = new Image();
// add loading class
el.src = '';
el.classList.add('img-loading');
img.onload = () => {
// image loaded, remove loading class
el.classList.remove('img-loading');
// set src
el.src = src;
}
img.onerror = () => {
el.classList.remove('img-loading');
el.classList.add('no-image');
el.src = null;
}
img.src = src;
}
Vue.directive('img-src', {
bind(el, binding) {
handleImage(el, binding.value);
},
update(el, binding) {
if (binding.value === binding.oldValue) return;
handleImage(el, binding.value);
}
});