From 7bdf9d815a1f8489f878e9f75926aa8f6b502a92 Mon Sep 17 00:00:00 2001 From: "Mr. Stallion" Date: Sun, 23 Jun 2019 16:15:21 -0500 Subject: [PATCH] Expand / minimize custom tags; better character image view; better guestbook view; mouseover preview on character profile links --- bbcode/core.ts | 1 + bbcode/standard.ts | 40 ++++- chat/ChatView.vue | 5 +- chat/ConversationView.vue | 5 +- chat/ImagePreview.vue | 4 + chat/image-preview-mutator.ts | 62 ++++--- chat/profile_api.ts | 4 +- electron/Index.vue | 4 +- electron/matcher.ts | 121 ++++++++++++++ scss/_bbcode.scss | 13 ++ site/character_page/character_page.vue | 222 ++++++++++++++++++++++--- site/character_page/guestbook_post.vue | 2 +- site/character_page/images.vue | 8 +- site/character_page/infotag.vue | 45 ++++- site/character_page/infotags.vue | 4 +- site/character_page/kink.vue | 15 +- site/character_page/kinks.vue | 22 ++- site/character_page/sidebar.vue | 14 +- 18 files changed, 516 insertions(+), 75 deletions(-) create mode 100644 electron/matcher.ts diff --git a/bbcode/core.ts b/bbcode/core.ts index a0fd2b5..3a9ad3f 100644 --- a/bbcode/core.ts +++ b/bbcode/core.ts @@ -72,6 +72,7 @@ export class CoreBBCodeParser extends BBCodeParser { parent.appendChild(el); return el; })); + this.addTag(new BBCodeTextTag('url', (parser, parent, param, content) => { const tagData = analyzeUrlTag(parser, param, content); const element = parser.createElement('span'); diff --git a/bbcode/standard.ts b/bbcode/standard.ts index fb43895..5291ea5 100644 --- a/bbcode/standard.ts +++ b/bbcode/standard.ts @@ -1,7 +1,11 @@ +import Vue from 'vue'; +import { BBCodeElement } from '../chat/bbcode'; import {InlineImage} from '../interfaces'; -import {CoreBBCodeParser} from './core'; +import { analyzeUrlTag, CoreBBCodeParser } from './core'; import {InlineDisplayMode} from './interfaces'; import {BBCodeCustomTag, BBCodeSimpleTag, BBCodeTextTag} from './parser'; +import UrlTagView from '../chat/UrlTagView.vue'; + interface StandardParserSettings { siteDomain: string @@ -16,6 +20,8 @@ export class StandardBBCodeParser extends CoreBBCodeParser { allowInlines = true; 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); @@ -187,6 +193,38 @@ export class StandardBBCodeParser extends CoreBBCodeParser { } 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'); + // const el = 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 = 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; } } diff --git a/chat/ChatView.vue b/chat/ChatView.vue index 0b3f014..b284afa 100644 --- a/chat/ChatView.vue +++ b/chat/ChatView.vue @@ -90,6 +90,7 @@ + @@ -114,6 +115,7 @@ import {getStatusIcon} from './user_view'; import UserList from './UserList.vue'; import UserMenu from './UserMenu.vue'; + import ImagePreview from './ImagePreview.vue'; const unreadClasses = { [Conversation.UnreadState.None]: '', @@ -125,7 +127,8 @@ components: { 'user-list': UserList, channels: ChannelList, 'status-switcher': StatusSwitcher, 'character-search': CharacterSearch, settings: SettingsView, conversation: ConversationView, 'report-dialog': ReportDialog, sidebar: Sidebar, - 'user-menu': UserMenu, 'recent-conversations': RecentConversations + 'user-menu': UserMenu, 'recent-conversations': RecentConversations, + 'image-preview': ImagePreview } }) export default class ChatView extends Vue { diff --git a/chat/ConversationView.vue b/chat/ConversationView.vue index bc03297..2a0f425 100644 --- a/chat/ConversationView.vue +++ b/chat/ConversationView.vue @@ -136,7 +136,6 @@ - @@ -151,7 +150,6 @@ import { characterImage, getByteLength, getKey } from "./common"; import ConversationSettings from './ConversationSettings.vue'; import core from './core'; - import ImagePreview from './ImagePreview.vue'; import {Channel, channelModes, Character, Conversation, Settings} from './interfaces'; import l from './localize'; import Logs from './Logs.vue'; @@ -164,8 +162,7 @@ @Component({ components: { user: UserView, 'bbcode-editor': Editor, 'manage-channel': ManageChannel, settings: ConversationSettings, - logs: Logs, 'message-view': MessageView, bbcode: BBCodeView, 'command-help': CommandHelp, - 'image-preview': ImagePreview + logs: Logs, 'message-view': MessageView, bbcode: BBCodeView, 'command-help': CommandHelp } }) export default class ConversationView extends Vue { diff --git a/chat/ImagePreview.vue b/chat/ImagePreview.vue index aff0580..98ee3ed 100644 --- a/chat/ImagePreview.vue +++ b/chat/ImagePreview.vue @@ -267,4 +267,8 @@ background-repeat: no-repeat; // background-color: black; } + + .image-preview-wrapper { + z-index: 10000; + } diff --git a/chat/image-preview-mutator.ts b/chat/image-preview-mutator.ts index 9095c21..4afd784 100644 --- a/chat/image-preview-mutator.ts +++ b/chat/image-preview-mutator.ts @@ -38,7 +38,10 @@ export class ImagePreviewMutator { this.add('e-hentai.org', this.getBaseJsMutatorScript('#img, video')); this.add('gelbooru.com', this.getBaseJsMutatorScript('#image, video')); this.add('chan.sankakucomplex.com', this.getBaseJsMutatorScript('#image, video')); + this.add('danbooru.donmai.us', this.getBaseJsMutatorScript('#image, video')); this.add('gfycat.com', this.getBaseJsMutatorScript('video')); + this.add('gfycatporn.com', this.getBaseJsMutatorScript('video')); + this.add('www.youtube.com', this.getBaseJsMutatorScript('video')); // this fixes videos only -- images are fine as is this.add('i.imgur.com', this.getBaseJsMutatorScript('video')); @@ -46,9 +49,9 @@ export class ImagePreviewMutator { this.add( 'imgur.com', ` - const imageCount = $('.post-image-container').length; + const imageCount = $('.post-container video, .post-container img').length; - ${this.getBaseJsMutatorScript('.image.post-image img, .image.post-image video')} + ${this.getBaseJsMutatorScript('.post-container video, .post-container img', true)} if(imageCount > 1) $('#flistWrapper').append('
+' + (imageCount - 1) + '
'); @@ -65,28 +68,41 @@ export class ImagePreviewMutator { ); } - getBaseJsMutatorScript(imageSelector: string): string { + getBaseJsMutatorScript(imageSelector: string, skipElementRemove = false): string { return `const body = document.querySelector('body'); - const img = document.querySelector('${imageSelector}'); - const el = document.createElement('div'); - el.id = 'flistWrapper'; - - el.style = 'width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100000; ' - + 'background-color: black; background-size: contain; background-repeat: no-repeat; background-position: top left;'; - - img.remove(); - el.append(img); - body.append(el); - body.style = 'padding: 0; margin: 0; overflow: hidden; width: 100%; height: 100%'; - img.style = 'object-position: top left; object-fit: contain; width: 100%; height: 100%;' - - if (img.play) { img.muted = true; img.play(); } - - let removeList = []; - body.childNodes.forEach((el) => { if(el.id !== 'flistWrapper') { removeList.push(el); } }); - removeList.forEach((el) => el.remove()); - removeList = []; - + const img = document.querySelector('${imageSelector}'); + const el = document.createElement('div'); + el.id = 'flistWrapper'; + + el.style = 'width: 100% !important; height: 100% !important; position: absolute !important;' + + 'top: 0 !important; left: 0 !important; z-index: 100000 !important;' + + 'background-color: black !important; background-size: contain !important;' + + 'background-repeat: no-repeat !important; background-position: top left !important;' + + 'opacity: 1 !important; padding: 0 !important; border: 0 !important; margin: 0 !important;'; + + img.remove(); + el.append(img); + body.append(el); + body.class = ''; + + body.style = 'border: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important;' + + 'width: 100% !important; height: 100% !important; opacity: 1 !important;' + + 'top: 0 !important; left: 0 !important;'; + + img.style = 'object-position: top left !important; object-fit: contain !important;' + + 'width: 100% !important; height: 100% !important; opacity: 1 !important;' + + 'margin: 0 !imporant; border: 0 !important; padding: 0 !important;'; + + img.class = ''; + el.class = ''; + + if (img.play) { img.muted = true; img.play(); } + + + let removeList = []; + body.childNodes.forEach((el) => { if(el.id !== 'flistWrapper') { removeList.push(el); } }); + ${skipElementRemove ? '' : 'removeList.forEach((el) => el.remove());'} + removeList = []; `; } diff --git a/chat/profile_api.ts b/chat/profile_api.ts index e22b096..1453c39 100644 --- a/chat/profile_api.ts +++ b/chat/profile_api.ts @@ -2,12 +2,13 @@ import Axios from 'axios'; import Vue from 'vue'; import Editor from '../bbcode/Editor.vue'; import {InlineDisplayMode} from '../bbcode/interfaces'; -import {initParser, standardParser} from '../bbcode/standard'; +import { initParser, standardParser } from '../bbcode/standard'; import CharacterLink from '../components/character_link.vue'; import CharacterSelect from '../components/character_select.vue'; import {setCharacters} from '../components/character_select/character_list'; import DateDisplay from '../components/date_display.vue'; import SimplePager from '../components/simple_pager.vue'; + import { Character as CharacterInfo, CharacterImage, CharacterImageOld, CharacterInfotag, CharacterSettings, KinkChoice } from '../interfaces'; @@ -180,6 +181,7 @@ async function kinksGet(id: number): Promise { }); } + export function init(characters: {[key: string]: number}): void { Utils.setDomains(parserSettings.siteDomain, parserSettings.staticDomain); initParser(parserSettings); diff --git a/electron/Index.vue b/electron/Index.vue index 64ae8b3..de1bb96 100644 --- a/electron/Index.vue +++ b/electron/Index.vue @@ -152,11 +152,11 @@ parent.send('switch-tab', this.character); }); - if (process.env.NODE_ENV !== 'production') { + /*if (process.env.NODE_ENV !== 'production') { const dt = require('@vue/devtools'); dt.connect(); - } + }*/ } diff --git a/electron/matcher.ts b/electron/matcher.ts new file mode 100644 index 0000000..7d589be --- /dev/null +++ b/electron/matcher.ts @@ -0,0 +1,121 @@ + +/* + +export enum TagId { + Age = 1, + Orientation = 2, + Gender = 3, + Build = 13, + FurryPreference = 49, + BdsmRole = 15, + Position = 41, + BodyType = 51, + ApparentAge = 64, + RelationshipStatus = 42, + Species = 9, + LanguagePreference = 49 +} + + + +export enum Orientation { + Straight = 4, + Gay = 5, + Bisexual = 6, + Asexual = 7, + Unsure = 8, + BiMalePreference = 89, + BiFemalePreference = 90, + Pansexual = 127, + BiCurious = 128 +} + + + + + +orientationCompatibilityMap[Orientation.Straight] = [ + [Orientation.Straight, 1], + [Orientation.Gay, -1], + [Orientation.Bisexual, 1], + [Orientation.Asexual, 0], + [Orientation.Unsure, 0], + [Orientation.BiMalePreference, (c: CharacterInfo) => (isMale(c) ? 1 : 0.5)], + [Orientation.BiFemalePreference, (c: CharacterInfo) => (isFemale(c) ? 1 : 0.5)], + [Orientation.Pansexual, 1], + [Orientation.BiCurious, 0] +]; + +orientationCompatibilityMap[Orientation.Gay] = [ + [Orientation.Straight, -1], + [Orientation.Gay, 1], + [Orientation.Bisexual, 1], + [Orientation.Asexual, 0], + [Orientation.Unsure, 0], + [Orientation.BiMalePreference, (c: CharacterInfo) => (isMale(c) ? 1 : 0.5)], + [Orientation.BiFemalePreference, (c: CharacterInfo) => (isFemale(c) ? 1 : 0.5)], + [Orientation.Pansexual, 1], + [Orientation.BiCurious, (c: CharacterInfo, t) => isSameGender(c, t) ? 0.5 : 1] +]; + +orientationCompatibilityMap[Orientation.Bisexual] = [ + [Orientation.Straight, 1], + [Orientation.Gay, 1], + [Orientation.Bisexual, 1], + [Orientation.Asexual, 0], + [Orientation.Unsure, 0], + [Orientation.BiMalePreference, (c: CharacterInfo) => (isMale(c) ? 1 : 0.5)], + [Orientation.BiFemalePreference, (c: CharacterInfo) => (isFemale(c) ? 1 : 0.5)], + [Orientation.Pansexual, 1], + [Orientation.BiCurious, 0] +]; + +orientationCompatibilityMap[Orientation.Asexual] = []; +orientationCompatibilityMap[Orientation.Unsure] = []; + +orientationCompatibilityMap[Orientation.BiMalePreference] = [ + [Orientation.Straight, -1], + [Orientation.Gay, 1], + [Orientation.Bisexual, 1], + [Orientation.Asexual, 0], + [Orientation.Unsure, 0], + [Orientation.BiMalePreference, (c: CharacterInfo) => (isMale(c) ? 1 : 0.5)], + [Orientation.BiFemalePreference, (c: CharacterInfo) => (isFemale(c) ? 1 : 0.5)], + [Orientation.Pansexual, 1], + [Orientation.BiCurious, 0] +]; + + + +*/ + + + +export class Matcher { + + static readonly TAGID_AGE = 1; + + static readonly TAGID_ORIENTATION = 2; + + static readonly TAGID_GENDER = 3; + + static readonly TAGID_FURRY_PREFERENCE = 49; + + static readonly TAGID_BUILD = 13; + + static readonly TAGID_BDSM_ROLE = 15; + static readonly TAGID_POSITION = 41; + + static readonly TAGID_BODY_TYPE = 51; + static readonly TAGID_APPARENT_AGE = 64; + + static readonly TAGID_RELATIONSHIP = 42; + + static readonly TAGID_SPECIES = 9; + static readonly TAGID_LANGUAGE_PREFERENCE = 49; + + + + +} + diff --git a/scss/_bbcode.scss b/scss/_bbcode.scss index 034c590..c10537f 100644 --- a/scss/_bbcode.scss +++ b/scss/_bbcode.scss @@ -132,3 +132,16 @@ div.indentText { .user-link { text-shadow: none; } + + +.bbcode { + .fa-link { + color: white; + margin-right: 2px; + } + + a.user-link { + color: white; + } +} + diff --git a/site/character_page/character_page.vue b/site/character_page/character_page.vue index e21c617..555d9bd 100644 --- a/site/character_page/character_page.vue +++ b/site/character_page/character_page.vue @@ -5,7 +5,7 @@
{{error}}
- +
@@ -82,6 +82,7 @@ import InfotagsView from './infotags.vue'; import CharacterKinksView from './kinks.vue'; import Sidebar from './sidebar.vue'; + import core from '../../chat/core'; interface ShowableVueTab extends Vue { show?(): void @@ -116,6 +117,8 @@ error = ''; tab = '0'; + selfCharacter: Character | undefined; + @Hook('beforeMount') beforeMount(): void { this.shared.authenticated = this.authenticated; @@ -123,7 +126,7 @@ @Hook('mounted') async mounted(): Promise { - if(this.character === undefined) await this._getCharacter(); + await this.load(false); } @Watch('tab') @@ -136,9 +139,34 @@ @Watch('name') async onCharacterSet(): Promise { this.tab = '0'; - return this._getCharacter(); + return this.load(); } + + async load(mustLoad = true) { + this.loading = true; + + try { + const due: Promise[] = []; + + if ((this.selfCharacter === undefined) && (Utils.Settings.defaultCharacter >= 0)) { + due.push(this.loadSelfCharacter()); + } + + if((mustLoad === true) || (this.character === undefined)) { + due.push(this._getCharacter()); + } + + await Promise.all(due); + } catch(e) { + this.error = Utils.isJSONError(e) ? e.response.data.error : (e).message; + Utils.ajaxError(e, 'Failed to load character information.'); + } + + this.loading = false; + } + + memo(memo: {id: number, memo: string}): void { Vue.set(this.character!, 'memo', memo); } @@ -147,29 +175,73 @@ Vue.set(this.character!, 'bookmarked', state); } + + protected async loadSelfCharacter(): Promise { + console.log('SELF'); + + const ownChar = core.characters.ownCharacter; + + this.selfCharacter = await methods.characterData(ownChar.name, -1); + + console.log('SELF LOADED'); + + return this.selfCharacter; + } + + private async _getCharacter(): Promise { this.error = ''; this.character = undefined; if(this.name === undefined || this.name.length === 0) return; - try { - this.loading = true; - await methods.fieldsGet(); - this.character = await methods.characterData(this.name, this.characterid); - standardParser.allowInlines = true; - standardParser.inlines = this.character.character.inlines; - } catch(e) { - this.error = Utils.isJSONError(e) ? e.response.data.error : (e).message; - Utils.ajaxError(e, 'Failed to load character information.'); - } - this.loading = false; + await methods.fieldsGet(); + this.character = await methods.characterData(this.name, this.characterid); + standardParser.allowInlines = true; + standardParser.inlines = this.character.character.inlines; } } \ No newline at end of file diff --git a/site/character_page/guestbook_post.vue b/site/character_page/guestbook_post.vue index 8b7c02f..3731570 100644 --- a/site/character_page/guestbook_post.vue +++ b/site/character_page/guestbook_post.vue @@ -12,7 +12,7 @@ (unapproved) - , posted posted