019bfd3940
- v-route automatically route to a valid frappe route - v-img-src handle img loading and error handling
45 lines
943 B
JavaScript
45 lines
943 B
JavaScript
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);
|
|
}
|
|
});
|