2014-12-04 23:37:35 +00:00
|
|
|
import parser from './parser/javascript.js';
|
|
|
|
import Snap from 'snapsvg';
|
|
|
|
import Q from 'q';
|
|
|
|
|
|
|
|
export default class Regexper {
|
|
|
|
constructor(root) {
|
|
|
|
this.root = root;
|
|
|
|
this.form = root.querySelector('#regexp-form');
|
|
|
|
this.field = root.querySelector('#regexp-input');
|
|
|
|
this.error = root.querySelector('#error');
|
|
|
|
this.permalink = root.querySelector('a[data-glyph="link-intact"]');
|
|
|
|
this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
|
2014-12-15 19:20:04 +00:00
|
|
|
this.percentage = root.querySelector('#progress div');
|
2014-12-04 23:37:35 +00:00
|
|
|
this.svg = root.querySelector('#regexp-render svg');
|
|
|
|
|
|
|
|
this.padding = 10;
|
|
|
|
this.snap = Snap(this.svg);
|
|
|
|
}
|
|
|
|
|
|
|
|
keypressListener(event) {
|
2014-12-15 23:06:16 +00:00
|
|
|
var evt;
|
|
|
|
|
2014-12-04 23:37:35 +00:00
|
|
|
if (event.shiftKey && event.keyCode === 13) {
|
2014-12-15 23:06:16 +00:00
|
|
|
event.returnValue = false;
|
|
|
|
if (event.preventDefault) {
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
|
|
|
|
evt = document.createEvent('Event');
|
|
|
|
evt.initEvent('submit', true, true);
|
|
|
|
this.form.dispatchEvent(evt);
|
2014-12-04 23:37:35 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
submitListener(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
|
2014-12-15 23:06:16 +00:00
|
|
|
try {
|
|
|
|
this.disablePermalink = false;
|
|
|
|
location.hash = this.field.value;
|
|
|
|
}
|
|
|
|
catch(e) {
|
|
|
|
// Most likely failed to set the URL has (probably because the expression
|
|
|
|
// is too long). Turn off the permalink and just show the expression
|
|
|
|
this.disablePermalink = true;
|
|
|
|
this.showExpression(this.field.value);
|
|
|
|
}
|
2014-12-04 23:37:35 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
hashchangeListener() {
|
2014-12-06 15:36:23 +00:00
|
|
|
var expression = decodeURIComponent(location.hash.slice(1));
|
2014-12-04 23:37:35 +00:00
|
|
|
|
2014-12-15 23:06:16 +00:00
|
|
|
this.showExpression(expression);
|
|
|
|
}
|
|
|
|
|
|
|
|
showExpression(expression) {
|
2014-12-04 23:37:35 +00:00
|
|
|
if (expression !== '') {
|
|
|
|
this.field.value = expression;
|
|
|
|
|
|
|
|
this.setState('is-loading');
|
|
|
|
|
2014-12-06 15:36:23 +00:00
|
|
|
this.renderRegexp(expression.replace(/[\r\n]/g, ''))
|
2014-12-04 23:37:35 +00:00
|
|
|
.then((() => {
|
|
|
|
this.setState('has-results');
|
|
|
|
this.updateLinks();
|
2014-12-08 02:40:05 +00:00
|
|
|
}).bind(this))
|
|
|
|
.done();
|
2014-12-04 23:37:35 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2014-12-15 19:20:04 +00:00
|
|
|
updatePercentage(event) {
|
|
|
|
this.percentage.style.width = event.detail.percentage * 100 + '%';
|
|
|
|
}
|
|
|
|
|
2014-12-04 23:37:35 +00:00
|
|
|
bindListeners() {
|
|
|
|
this.field.addEventListener('keypress', this.keypressListener.bind(this));
|
|
|
|
|
|
|
|
this.form.addEventListener('submit', this.submitListener.bind(this));
|
|
|
|
|
|
|
|
window.addEventListener('hashchange', this.hashchangeListener.bind(this));
|
2014-12-15 19:20:04 +00:00
|
|
|
|
|
|
|
this.root.addEventListener('updateStatus', this.updatePercentage.bind(this));
|
2014-12-04 23:37:35 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
setState(state) {
|
2014-12-15 23:06:16 +00:00
|
|
|
this.root.className = state;
|
2014-12-04 23:37:35 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
showError(message) {
|
|
|
|
this.setState('has-error');
|
|
|
|
this.error.innerHTML = '';
|
|
|
|
this.error.appendChild(document.createTextNode(message));
|
2014-12-08 02:40:05 +00:00
|
|
|
|
|
|
|
throw message;
|
2014-12-04 23:37:35 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
updateLinks() {
|
|
|
|
var blob, url;
|
|
|
|
|
2014-12-15 23:06:16 +00:00
|
|
|
try {
|
|
|
|
blob = new Blob([this.svg.parentNode.innerHTML], { type: 'image/svg+xml' });
|
|
|
|
url = URL.createObjectURL(blob);
|
|
|
|
window.blob = blob; // Blob object has to stick around for IE
|
2014-12-04 23:37:35 +00:00
|
|
|
|
2014-12-15 23:06:16 +00:00
|
|
|
this.download.setAttribute('href', url);
|
|
|
|
}
|
|
|
|
catch(e) {
|
|
|
|
// Blobs or URLs created from them don't work here.
|
|
|
|
// Giving up on the download link
|
|
|
|
this.download.parentNode.style.display = 'none';
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.disablePermalink) {
|
|
|
|
this.permalink.parentNode.style.display = 'none';
|
|
|
|
} else {
|
|
|
|
this.permalink.parentNode.style.display = null;
|
|
|
|
this.permalink.setAttribute('href', location.toString());
|
|
|
|
}
|
2014-12-04 23:37:35 +00:00
|
|
|
}
|
|
|
|
|
2014-12-08 02:40:05 +00:00
|
|
|
renderRegexp(expression) {
|
|
|
|
var snap = Snap(this.svg),
|
2014-12-13 13:19:27 +00:00
|
|
|
padding = this.padding;
|
2014-12-04 23:37:35 +00:00
|
|
|
|
|
|
|
snap.selectAll('g').remove();
|
|
|
|
|
2014-12-10 11:18:55 +00:00
|
|
|
parser.resetGroupCounter();
|
|
|
|
|
2014-12-08 02:40:05 +00:00
|
|
|
return Q.fcall(parser.parse.bind(parser), expression)
|
2014-12-13 14:09:58 +00:00
|
|
|
.then(null, this.showError.bind(this))
|
|
|
|
.invoke('render', snap.group())
|
2014-12-08 02:40:05 +00:00
|
|
|
.then((result) => {
|
2014-12-13 14:09:58 +00:00
|
|
|
var box;
|
|
|
|
|
|
|
|
box = result.getBBox();
|
|
|
|
result.container.transform(Snap.matrix()
|
|
|
|
.translate(padding - box.x, padding - box.y));
|
|
|
|
snap.attr({
|
|
|
|
width: box.width + padding * 2,
|
|
|
|
height: box.height + padding * 2
|
2014-12-08 02:40:05 +00:00
|
|
|
});
|
|
|
|
});
|
2014-12-04 23:37:35 +00:00
|
|
|
}
|
|
|
|
}
|