Created
March 12, 2019 14:52
-
-
Save jpillora/91c7446b4f9c0ff6d213b142d6450256 to your computer and use it in GitHub Desktop.
Random Vue Stuff
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import defaults from "lodash.defaults"; | |
let httpBtn = { | |
bind: (el, binding) => { | |
//get options (evald expression) | |
let opts = binding.value; | |
if (typeof opts === "function") { | |
opts = {fn: opts}; | |
} | |
//provide defaults | |
defaults(opts, { | |
args: [], | |
class: { | |
success: "green", | |
error: "red", | |
loading: "loading" | |
} | |
}); | |
//get function | |
let httpFunction = opts.fn; | |
if (typeof httpFunction !== "function") { | |
return alert( | |
"http-btn expecting function, " + "got: " + binding.expression | |
); | |
} | |
let show = (text, success, timeout) => { | |
let className = success ? opts.class.success : opts.class.error; | |
let prev = el.textContent; | |
el.classList.add(className); | |
el.textContent = text; | |
setTimeout(() => { | |
el.classList.remove(className); | |
el.textContent = prev; | |
}, timeout); | |
}; | |
// | |
let submit = () => { | |
let promise = httpFunction.apply(null, opts.args); | |
if (!promise || !promise.then) { | |
return alert( | |
`http-btn expecting a promise from function (${binding.expression})` + | |
` got: ${typeof promise}` | |
); | |
} | |
el.classList.add(opts.class.loading); | |
promise.then( | |
resp => { | |
let d = resp.data; | |
if ((d && d.success) || !d) d = "Success"; | |
console.log(d); | |
show(d, true, 2000); | |
finaly(); | |
}, | |
resp => { | |
let d = resp.data; | |
if (typeof d !== "string" && d) d = d.error; | |
if (typeof d !== "string") d = resp.statusText; | |
if (!d) d = "Error"; | |
show(d, false, 2000); | |
finaly(); | |
} | |
); | |
function finaly() { | |
el.classList.remove(opts.class.loading); | |
} | |
return promise; | |
}; | |
//bind to click | |
el.onclick = () => { | |
submit(); | |
}; | |
} | |
}; | |
export default { | |
install: Vue => { | |
Vue.directive("http-btn", httpBtn); | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const isObject = o => { | |
return o && typeof o === "object"; | |
}; | |
const merge = (dest, src, path = []) => { | |
if (!isObject(dest)) { | |
return src; | |
} | |
if (!isObject(src)) { | |
return src; | |
} | |
for (let key in src) { | |
let p = path.concat(key); | |
// console.log(p.join(".")); | |
Vue.set(dest, key, merge(dest[key], src[key], p)); | |
} | |
return dest; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment