Skip to content

Instantly share code, notes, and snippets.

@jotaelesalinas
Created April 6, 2018 12:24
Show Gist options
  • Save jotaelesalinas/4c4e1b935e48dfeddad6a8563280a741 to your computer and use it in GitHub Desktop.
Save jotaelesalinas/4c4e1b935e48dfeddad6a8563280a741 to your computer and use it in GitHub Desktop.
JS snippet to pick elements and extract text and links
(function () {
var self = this;
self.version = '1.2';
self.els = {};
self.utils = {};
self.utils.addEvent = function (el, evname, f, capture) {
if ( typeof capture !== 'undefined' ) {
el.addEventListener(evname, f, capture);
} else {
el.addEventListener(evname, f);
}
};
self.utils.removeEvent = function (el, evname, f, capture) {
if ( typeof capture !== 'undefined' ) {
el.removeEventListener(evname, f, capture);
} else {
el.removeEventListener(evname, f);
}
};
self.utils.preventEvent = function (ev) {
ev.preventDefault();
ev.stopPropagation();
};
self.utils.cssTagClass = function (el) {
var tag = el.tagName;
var classes = '';
if ( el.getAttribute('class') ) {
classes = '.' + el.getAttribute('class').replace(/^\s+|\s+$/g, '').replace(/\s+/g, '.');
}
return tag + classes;
};
self.scroll = function () {
var scrolling = false;
var startScroll = function () {
scrolling = true;
window.scrollTo(0, document.body.scrollHeight);
};
var stopScroll = function () {
if ( !scrolling ) {
return;
}
clearInterval(kill_id);
self.utils.removeEvent(window, 'click', stopScroll);
scrolling = false;
};
var kill_id = setInterval(startScroll, 500);
self.utils.addEvent(window, 'click', stopScroll);
};
self.pick = function () {
var capture = function (ev) {
self.utils.preventEvent(ev);
var elements = [];
var el = ev.target;
elements.push(self.utils.cssTagClass(el));
while ( el.parentNode && el.parentNode.tagName !== 'HTML' ) {
el = el.parentNode;
elements.push(self.utils.cssTagClass(el));
}
var selector = [];
for ( var i = elements.length - 1; i >= 0; i-- ) {
selector.push(elements[i]);
}
if ( ev.ctrlKey || ev.shiftKey ) {
if ( self.els.txt_css.value.trim() === '' ) {
self.els.txt_css.value = selector.join(' > ');
} else {
self.els.txt_css.value += ', ' + selector.join(' > ');
}
} else {
self.els.txt_css.value = selector.join(' > ');
}
self.update();
endCapturing();
};
var endCapturing = function () {
self.utils.removeEvent(document, 'click', capture, true);
document.body.style.cursor = 'inherit';
};
self.utils.addEvent(document, 'click', capture, true);
document.body.style.cursor = 'crosshair !important';
};
self.ui = {};
self.ui.init = function () {
var panel_styles = {
"position": 'fixed',
"zIndex": '1000',
"top": '0',
"left": '0',
"right": '0',
"height": '25em',
"padding": '1em',
"boxShadow": 'dimgrey 0 0 .25em 0',
"backgroundColor": '#eee'
};
var panel_contents = [
['<p style="font-size: 200%; margin-bottom:.5em;"><b>Selectr v' + version + '</b></p>'],
['<p style="margin-bottom:.5em;">'],
['CSS selector: <input id="selectr-input" size="120" style="border:1px solid grey;">'],
['<br>'],
['<button id="selectr-picker">Pick an element!</button> Hint: hold Ctrl key to add to current selection.'],
['<button id="selectr-scroll">Scroll to bottom</button> (Until you click on the page.)'],
['</p>'],
['<p><textarea id="selectr-results" rows="12" style="width:98%;"></textarea></p>']
];
var panel = document.createElement('div');
for ( var prop in panel_styles ) {
panel.style[prop] = panel_styles[prop];
}
panel.innerHTML = panel_contents.join("\n");
var body = document.body;
body.style.paddingTop = '28em';
body.style.position = 'relative';
body.insertBefore(panel, body.childNodes[0]);
self.els.txt_css = document.getElementById('selectr-input');
self.els.txt_results = document.getElementById('selectr-results');
var btn_picker = document.getElementById('selectr-picker');
var btn_scroll = document.getElementById('selectr-scroll');
self.utils.addEvent(self.els.txt_css, 'keyup', self.update);
self.utils.addEvent(btn_picker, 'click', self.pick);
self.utils.addEvent(btn_scroll, 'click', self.scroll);
};
self.ui._current_selection = false;
self.ui.highlight = function (els) {
self.ui.unhighlight();
els.forEach( el => {
el.setAttribute('old-border', el.style.border);
el.style.border = '2px solid red';
} );
self.ui._current_selection = els;
};
self.ui.unhighlight = function () {
if ( self.ui._current_selection === false ) {
return;
}
self.ui._current_selection.forEach( el => el.style.border = el.getAttribute('old-border') );
self.ui._current_selection = false;
};
self.update = function () {
var value = self.els.txt_css.value.replace(/^\s+|\s+$/, '');
if ( value === '' ) {
self.els.txt_css.style.border = '1px solid grey';
self.ui.unhighlight();
return;
}
var els = document.querySelectorAll(value);
if ( els.length == 0 ) {
self.els.txt_css.style.border = '1px solid red';
self.ui.unhighlight();
return;
}
self.els.txt_css.style.border = '1px solid grey';
self.ui.highlight(els);
var data = [], row;
els.forEach( (el, idx) => {
row = [el.innerText.replace(/\s+/g, ' ')];
if ( el.getAttribute('href') ) {
row.push(el.href);
}
data.push(row);
});
self.els.txt_results.value = data.map( x => x.join("\t") ).join("\n") + "\n";
};
self.ui.init();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment