236 lines
11 KiB
TypeScript
236 lines
11 KiB
TypeScript
import Vue from 'vue';
|
|
import { BBCodeElement } from './core';
|
|
import {InlineDisplayMode, InlineImage} from '../interfaces';
|
|
import * as Utils from '../site/utils';
|
|
import {analyzeUrlTag, CoreBBCodeParser} from './core';
|
|
import {BBCodeCustomTag, BBCodeSimpleTag, BBCodeTextTag} from './parser';
|
|
import UrlTagView from './UrlTagView.vue';
|
|
import {default as IconView} from '../bbcode/IconView.vue';
|
|
|
|
const usernameRegex = /^[a-zA-Z0-9_\-\s]+$/;
|
|
|
|
export class StandardBBCodeParser extends CoreBBCodeParser {
|
|
inlines: {[key: string]: InlineImage | undefined} | undefined;
|
|
|
|
cleanup: Vue[] = [];
|
|
|
|
createInline(inline: InlineImage): HTMLElement {
|
|
const p1 = inline.hash.substr(0, 2);
|
|
const p2 = inline.hash.substr(2, 2);
|
|
const outerEl = this.createElement('div');
|
|
const el = this.createElement('img');
|
|
el.className = 'inline-image';
|
|
el.title = el.alt = inline.name;
|
|
el.src = `${Utils.staticDomain}images/charinline/${p1}/${p2}/${inline.hash}.${inline.extension}`;
|
|
outerEl.appendChild(el);
|
|
return outerEl;
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
const hrTag = new BBCodeSimpleTag('hr', 'hr', [], []);
|
|
hrTag.noClosingTag = true;
|
|
this.addTag(hrTag);
|
|
this.addTag(new BBCodeCustomTag('quote', (parser, parent, param) => {
|
|
if(param !== '')
|
|
parser.warning('Unexpected paramter on quote tag.');
|
|
const element = parser.createElement('blockquote');
|
|
const innerElement = parser.createElement('div');
|
|
innerElement.className = 'quoteHeader';
|
|
innerElement.appendChild(document.createTextNode('Quote:'));
|
|
element.appendChild(innerElement);
|
|
parent.appendChild(element);
|
|
return element;
|
|
}));
|
|
this.addTag(new BBCodeSimpleTag('left', 'span', ['leftText']));
|
|
this.addTag(new BBCodeSimpleTag('right', 'span', ['rightText']));
|
|
this.addTag(new BBCodeSimpleTag('center', 'span', ['centerText']));
|
|
this.addTag(new BBCodeSimpleTag('justify', 'span', ['justifyText']));
|
|
this.addTag(new BBCodeSimpleTag('big', 'span', ['bigText'], ['url', 'i', 'u', 'b', 'color', 's']));
|
|
this.addTag(new BBCodeSimpleTag('small', 'span', ['smallText'], ['url', 'i', 'u', 'b', 'color', 's']));
|
|
this.addTag(new BBCodeSimpleTag('sub', 'span', ['smallText'], ['url', 'i', 'u', 'b', 'color', 's']));
|
|
this.addTag(new BBCodeSimpleTag('indent', 'div', ['indentText']));
|
|
this.addTag(new BBCodeSimpleTag('heading', 'h2', [], ['collapse', 'justify', 'center', 'left', 'right', 'url', 'i', 'u', 'b', 'color', 's', 'big', 'sub']));
|
|
this.addTag(new BBCodeSimpleTag('row', 'div', ['row']));
|
|
this.addTag(new BBCodeCustomTag('col', (parser, parent, param) => {
|
|
const col = parser.createElement('div');
|
|
col.className = param === '1' ? 'col-lg-3 col-md-4 col-12' : param === '2' ? 'col-lg-4 col-md-6 col-12' :
|
|
param === '3' ? 'col-lg-6 col-md-8 col-12' : 'col-md';
|
|
parent.appendChild(col);
|
|
return col;
|
|
}));
|
|
this.addTag(new BBCodeCustomTag('collapse', (parser, parent, param) => {
|
|
if(param === '') { //tslint:disable-line:curly
|
|
parser.warning('title parameter is required.');
|
|
// HACK: Compatability fix with old site. Titles are not trimmed on old site, so empty collapse titles need to be allowed.
|
|
//return null;
|
|
}
|
|
const outer = parser.createElement('div');
|
|
outer.className = 'card bg-light bbcode-collapse';
|
|
const headerText = parser.createElement('div');
|
|
headerText.className = 'card-header bbcode-collapse-header';
|
|
const icon = parser.createElement('i');
|
|
icon.className = 'fas fa-chevron-down';
|
|
icon.style.marginRight = '10px';
|
|
// HACK: to allow [hr] in header part
|
|
if (param.startsWith('[hr]')) { headerText.appendChild(parser.createElement('hr')); param = param.slice(4) }
|
|
headerText.appendChild(icon);
|
|
const splitParam = param.split('[hr]')
|
|
for (let iii = 0; iii < splitParam.length; iii++) {
|
|
const element = splitParam[iii];
|
|
headerText.appendChild(document.createTextNode(element));
|
|
if (iii < splitParam.length-1) headerText.appendChild(parser.createElement('hr'))
|
|
}
|
|
outer.appendChild(headerText);
|
|
const body = parser.createElement('div');
|
|
body.className = 'bbcode-collapse-body';
|
|
body.style.height = '0';
|
|
outer.appendChild(body);
|
|
const inner = parser.createElement('div');
|
|
inner.className = 'card-body';
|
|
body.appendChild(inner);
|
|
let timeout: number;
|
|
headerText.addEventListener('click', () => {
|
|
const isCollapsed = parseInt(body.style.height!, 10) === 0;
|
|
if(isCollapsed) timeout = window.setTimeout(() => body.style.height = '', 200);
|
|
else {
|
|
clearTimeout(timeout);
|
|
body.style.transition = 'initial';
|
|
setImmediate(() => {
|
|
body.style.transition = '';
|
|
body.style.height = '0';
|
|
});
|
|
}
|
|
body.style.height = `${body.scrollHeight}px`;
|
|
icon.className = `fas fa-chevron-${isCollapsed ? 'up' : 'down'}`;
|
|
});
|
|
parent.appendChild(outer);
|
|
return inner;
|
|
}));
|
|
this.addTag(new BBCodeTextTag('user', (parser, parent, param, content) => {
|
|
if(param !== '')
|
|
parser.warning('Unexpected parameter on user tag.');
|
|
if(!usernameRegex.test(content))
|
|
return;
|
|
const a = parser.createElement('a');
|
|
a.href = `${Utils.siteDomain}c/${content}`;
|
|
a.target = '_blank';
|
|
a.className = 'character-link';
|
|
a.appendChild(document.createTextNode(content));
|
|
parent.appendChild(a);
|
|
return a;
|
|
}));
|
|
this.addTag(new BBCodeTextTag('icon', (parser, parent, param, content) => {
|
|
if(param !== '')
|
|
parser.warning('Unexpected parameter on icon tag.');
|
|
if(!usernameRegex.test(content))
|
|
return;
|
|
|
|
const root = parser.createElement('span');
|
|
const el = parser.createElement('span');
|
|
parent.appendChild(root);
|
|
root.appendChild(el);
|
|
const view = new IconView({ el, propsData: { character: content }});
|
|
|
|
this.cleanup.push(view);
|
|
return root;
|
|
|
|
// const a = parser.createElement('a');
|
|
// a.href = `${Utils.siteDomain}c/${content}`;
|
|
// a.target = '_blank';
|
|
// const img = parser.createElement('img');
|
|
// img.src = `${Utils.staticDomain}images/avatar/${content.toLowerCase()}.png`;
|
|
// img.className = 'character-avatar icon';
|
|
// img.title = img.alt = content;
|
|
// a.appendChild(img);
|
|
// parent.appendChild(a);
|
|
// return a;
|
|
}));
|
|
this.addTag(new BBCodeTextTag('eicon', (parser, parent, param, content) => {
|
|
if(param !== '')
|
|
parser.warning('Unexpected parameter on eicon tag.');
|
|
|
|
if(!usernameRegex.test(content))
|
|
return;
|
|
let extension = '.gif';
|
|
if(!Utils.settings.animateEicons)
|
|
extension = '.png';
|
|
const img = parser.createElement('img');
|
|
img.src = `${Utils.staticDomain}images/eicon/${content.toLowerCase()}${extension}`;
|
|
img.className = 'character-avatar icon';
|
|
img.title = img.alt = content;
|
|
parent.appendChild(img);
|
|
return img;
|
|
}));
|
|
this.addTag(new BBCodeTextTag('img', (p, parent, param, content) => {
|
|
const parser = <StandardBBCodeParser>p;
|
|
if(typeof parser.inlines === 'undefined') {
|
|
parser.warning('This page does not support inline images.');
|
|
return undefined;
|
|
}
|
|
const displayMode = Utils.settings.inlineDisplayMode;
|
|
if(!/^\d+$/.test(param)) {
|
|
parser.warning('img tag parameters must be numbers.');
|
|
return undefined;
|
|
}
|
|
const inline = parser.inlines[param];
|
|
if(typeof inline !== 'object') {
|
|
parser.warning(`Could not find an inline image with id ${param} It will not be visible.`);
|
|
return undefined;
|
|
}
|
|
inline.name = content;
|
|
let element: HTMLElement;
|
|
if(displayMode === InlineDisplayMode.DISPLAY_NONE || (displayMode === InlineDisplayMode.DISPLAY_SFW && inline.nsfw)) {
|
|
const el = element = parser.createElement('a');
|
|
el.className = 'unloadedInline';
|
|
el.href = '#';
|
|
el.dataset.inlineId = param;
|
|
el.onclick = () => {
|
|
(<HTMLElement[]>Array.prototype.slice.call(document.getElementsByClassName('unloadedInline'))).forEach((e) => {
|
|
const showInline = parser.inlines![e.dataset.inlineId!];
|
|
if(typeof showInline !== 'object') return;
|
|
e.parentElement!.replaceChild(parser.createInline(showInline), e);
|
|
});
|
|
return false;
|
|
};
|
|
const prefix = inline.nsfw ? '[NSFW Inline] ' : '[Inline] ';
|
|
el.appendChild(document.createTextNode(prefix));
|
|
parent.appendChild(el);
|
|
} else parent.appendChild(element = parser.createInline(inline));
|
|
return element;
|
|
}));
|
|
|
|
this.addTag(new BBCodeTextTag(
|
|
'url',
|
|
(parser, parent, _, content) => {
|
|
const tagData = analyzeUrlTag(parser, _, content);
|
|
const root = parser.createElement('span');
|
|
|
|
parent.appendChild(root);
|
|
|
|
// root.appendChild(el);
|
|
|
|
if (!tagData.success) {
|
|
root.textContent = tagData.textContent;
|
|
return;
|
|
}
|
|
|
|
const view = new UrlTagView({el: root, propsData: {url: tagData.url, text: tagData.textContent, domain: tagData.domain}});
|
|
this.cleanup.push(view);
|
|
|
|
return root;
|
|
}));
|
|
}
|
|
|
|
|
|
parseEverything(input: string): BBCodeElement {
|
|
const elm = <BBCodeElement>super.parseEverything(input);
|
|
if(this.cleanup.length > 0)
|
|
elm.cleanup = ((cleanup: Vue[]) => () => {
|
|
for(const component of cleanup) component.$destroy();
|
|
})(this.cleanup);
|
|
this.cleanup = [];
|
|
return elm;
|
|
}
|
|
}
|