Skip to content

Instantly share code, notes, and snippets.

View netsi1964's full-sized avatar

Sten Hougaard netsi1964

View GitHub Profile
@netsi1964
netsi1964 / SVGPathMinipulation.js
Last active June 14, 2017 07:00
SVG Path manipulation
var path = document.querySelector("path");
function getPathCommands(pathElement) {
var data = pathElement.getAttribute("d");
var ofs = 0;
var indexes = data.match(/[hvmlcqtsaz]/gi).map(function(cmd, i) {
ofs += data.substr(ofs).indexOf(cmd) + 1;
return ofs - 1;
});
var commands = [];
indexes.map(function(curr, i) {
@netsi1964
netsi1964 / lorem.console.js
Created June 5, 2017 08:57
Make site lorem ipsum
var lorem = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod neque eaque fuga culpa doloribus adipisci vel explicabo! Nihil ipsa commodi quae voluptates laudantium fugit nam. Itaque veniam iure aliquid harum!'
Array.from(document.querySelectorAll("a,h1,h2,h3,h4,h5,h6")).map((ele, i) => {
var img = ele.querySelector('img');
var span = ele.querySelector('span');
if (img) {
var info = getComputedStyle(img);
img.src = 'http://dummyimage.com/'+parseInt(info.width)+'x'+parseInt(info.height)
} else {
if (span) {
span.innerText = lorem.substr(0, span.innerText.length)
@netsi1964
netsi1964 / SKETCH_basicGraphUserPlugin.js
Last active April 29, 2017 11:13
A SKETCH basic graph user plug-in
var sketch = context.api();
var document = sketch.selectedDocument;
var selection = document.selectedLayers;
var page = document.selectedPage;
var values = sketch.getStringFromUser("Enter values", "10,30,10,22,50,10,30");
var canvasWidth = parseFloat(sketch.getStringFromUser("Canvas width", "300"));
var canvasHeight = parseFloat(sketch.getStringFromUser("Canvas height", "300"));
var graphValues = values.split(",");
var min = 1000000, max = -100000, width = canvasWidth / graphValues.length;
@netsi1964
netsi1964 / flowText.js
Last active April 20, 2017 07:53
flowText - a function to add flowing text to SVG
function flowText(text, svg, width, style) {
svg.innerHTML = "";
width = width - style.padding.left;
var svgText = document.createElementNS("http://www.w3.org/2000/svg", "text");
var textNode = document.createTextNode("");
svgText.appendChild(textNode);
var testElement = svg.appendChild(svgText);
var words = text.split(" ");
@netsi1964
netsi1964 / styleKeysSVG_chrome.js
Last active February 23, 2017 06:54
CSS SVG style properties , Chrome, Win. 7
var styleKeysSVG_chrome = [
"alignContent",
"alignItems",
"alignSelf",
"alignmentBaseline",
"all",
"animation",
"animationDelay",
"animationDirection",
"animationDuration",
@netsi1964
netsi1964 / FB_syntheticEvents.js
Last active January 7, 2017 06:56
Console: Get Facebook syntheticEvents
// Works at: https://facebook.github.io/react/docs/events.html
var domNodes = document.querySelectorAll('blockquote:nth-of-type(2)~ul li a');
var documentation = {};
Array.prototype.map.call(domNodes, function(ele) {
var name = ele.getAttribute('href').replace(/\#/ig, '');
var group = [];
var groupName = ele.innerText.replace(' Events','');
var h3 = document.querySelector(`[name="${name}"]`).parentNode;
var events = h3.nextElementSibling.nextElementSibling.querySelector('.language-text').innerText;
@netsi1964
netsi1964 / ChromeGetInfoAboutDimensionsjs
Last active December 6, 2016 10:33
Chrome Get dimensions info about elements from selector
var CSSSelector = window.localStorage.getItem('CSSSelector');
CSSSelector = prompt('Enter a selector', (window.localStorage.getItem('CSSSelector').toString()!=='null') ? CSSSelector : 'body');
window.localStorage.setItem('CSSSelector', CSSSelector);
var elements = document.querySelectorAll(CSSSelector);
var q = '`';
var report = `Selector: ${q}${CSSSelector}${(elements.length>1) ? ' (FOUND '+elements.length+' OCCURANCES)' : ''}${q}\n------------\n`;
if (elements.length>0) {
var element = elements[0];
var computedRules = window.getComputedStyle(element);
report+=`${q}${q}${q}\npadding: ${computedRules['padding']}\nmargin: ${computedRules['margin']}\nwidth:${computedRules['width']}\nheight:${computedRules['height']}\nbox-sizing:${computedRules['box-sizing']}\n${q}${q}${q}\n`;
@netsi1964
netsi1964 / ChromeGetDefinedRulesjs
Last active December 6, 2016 09:56
Chrome developer tool: Get defined rules for element as MarkDown table
var computedRules = window.getComputedStyle(document.body);
var md = '| Rule | Value |\n';
md+='|---------|---:|\n';
Array.from(computedRules).sort().map(function cssRule(rule) {
md+=`| ${rule.replace(/-/g,'\-')} | ${computedRules[rule].replace(/-/g,'\-')} |\n`;
});
copy(md)
@netsi1964
netsi1964 / ChromeGetUsedClassesAsCSS.js
Created December 1, 2016 10:56
Chrome developer toolbar util: Get CSS containing used CSS classes used below a specified selector
var allClasses = {}, css = '';
var startFrom = prompt('Where should I start?', '#application');
Array.prototype.forEach.call(document.querySelectorAll(startFrom+' *[class]'), function(element) {
Array.prototype.forEach.call(element.classList, function(className) {
if (!allClasses[className]) {
allClasses[className] = 0;
}
allClasses[className]++;
})
});
@netsi1964
netsi1964 / JSONselect.js
Created November 15, 2016 07:06
A basic JSON select function
// obj: JSON object
// selector: The path to the data you want to extract
function JSONselect(obj, selector) {
var levels = selector.split('.')
var object = obj;
levels.map(function(path) {
console.log(path)
object = object[path];
})
return object;