Skip to content

Instantly share code, notes, and snippets.

@nachoaguirre
Last active February 1, 2021 21:35
Show Gist options
  • Select an option

  • Save nachoaguirre/e188bf0f3420da106d861091366f8797 to your computer and use it in GitHub Desktop.

Select an option

Save nachoaguirre/e188bf0f3420da106d861091366f8797 to your computer and use it in GitHub Desktop.
common helpers
/*
fixPrecio(5000) > $5.000
*/
function fixPrecio(number, showsign=true) {
showsign = !showsign ? "" : "$";
var i = String(parseInt(number = Math.abs(Number(number) || 0)));
var j = (j = i.length) > 3 ? j % 3 : 0; return showsign + (j ? i.substr(0, j) + "." : "") + i.substr(j);
};
/****************************************/
/*
Añadir class según breakpoint al body
*/
var breakpoint = (function(body) {
let bp_cur = "";
var bp_dom = {
get: function (o) { var obj = Object.create(this); obj.element = (typeof o == "object") ? o : document.createElement(o); return obj; },
app: function (o) { var obj = bp_dom.get(o); this.element.prepend(obj.element); return obj; },
att: function (k, v) { this.element.setAttribute(k, v); return this; },
cls: function (c) { this.element.className = c; return this; },
};
var bp_szs = ['xs', 'sm', 'md', 'lg', 'xl'];
var bp_obj = {"xs": "d-block d-sm-inline", "sm": "d-sm-block d-md-inline", "md": "d-md-block d-lg-inline", "lg": "d-lg-block d-xl-inline", "xl": "d-xl-block" };
var bp_ele = bp_dom.get(body).app('div').att('style','display:none;').att('id','bp_check');
for (const [key, val] of Object.entries(bp_obj)) { bp_ele.app('span').cls(key+' '+val); }
function isBlock(size){ return (getComputedStyle(document.querySelector('#bp_check .'+size)).display == 'block'); }
function bp_checkCurrent(){ body.classList.remove(...bp_szs); for (const [key, val] of Object.entries(bp_obj)) { if( isBlock(key) ) bp_cur = key; breakpoint = key; } body.classList.add(bp_cur); }
bp_checkCurrent();
window.onresize = bp_checkCurrent;
return bp_cur;
}(document.body));
/****************************************/
/*
Chain DOM
*/
// source: https://www.orantec.uk/blog/2015/03/31/an-introduction-to-javascript-chaining
var cdom = {
element: null,
get: function (o) { var obj = Object.create(this); obj.element = (typeof o == "object") ? o : document.createElement(o); return obj; },
append: function (o) { var obj = cdom.get(o); this.element.appendChild(obj.element); return obj; },
text: function (t) { this.element.appendChild(document.createTextNode(t)); return this; },
attribute: function (k, v) { this.element.setAttribute(k, v); return this; },
css: function (c) { this.element.classList.add(c); return this; },
event: function (e, f) { this.element.addEventListener(e, f, false); return this; }
}
var overlay = cdom.get(document.body).append("DIV").css("overlay");
overlay.append("H2").text("Hello World!");
overlay.append("P").text("Click the button below to close");
overlay.append("INPUT").attribute("type", "button").attribute("value", "Close").event("click", function () { document.body.removeChild(overlay.element); });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment