Skip to content

Instantly share code, notes, and snippets.

@Dkendal
Last active December 8, 2021 21:40
Show Gist options
  • Save Dkendal/ad3a58d81dcd3a58bb5afc2a3d130614 to your computer and use it in GitHub Desktop.
Save Dkendal/ad3a58d81dcd3a58bb5afc2a3d130614 to your computer and use it in GitHub Desktop.
Lite version of the builder.io chrome extension for debugging purposes.
javascript:(function() {
/* https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript */
function hashCode(str) {
let hash = 0;
let i = 0;
const len = str.length;
while ( i < len ) {
hash = ((hash << 5) - hash + str.charCodeAt(i++)) << 0;
}
return hash;
};
function posHashCode(str) {
return hashCode(str) + 2 ** 31 - 1;
};
document.querySelectorAll('[builder-model]').forEach(el => {
const model = el.getAttribute("builder-model");
const id = el.getAttribute("builder-content-id");
const hd = el.firstChild;
const ttId = `tool-tip-${model}-${id}`;
let tt = el.querySelector(`:scope > #${ttId}`);
if (!tt) {
tt = document.createElement('div');
el.prepend(tt);
}
const color = `hsl(${posHashCode(model) % 360}, 80%, 60%)`;
tt.id = ttId;
tt.innerHTML = `${model}/${id}`;
tt.style.backgroundColor = color;
tt.style.color = "black";
tt.style.padding = "5px 1px";
tt.style.position = "absolute";
tt.style.fontFamily = "monospace";
tt.style.fontSize = "14px";
tt.style.zIndex = "1";
el.style.outlineWidth = "5px";
el.style.outlineStyle = "solid";
el.style.outlineColor = color;
})
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment