kittyfangs
/
fchat-rising
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better image preview fitting

This commit is contained in:
Mr. Stallion 2019-10-26 17:20:53 -05:00
parent cb85e150ca
commit 3f913fef1d
2 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
chat/ImagePreview.vue
View File

@ -41,8 +41,15 @@
[url=https://e621.net/post/show/1672753/2018-anthro-antlers-balls-bed-big_penis-black_hair]Test[/url]
[url=https://rule34.xxx/index.php?page=post&s=view&id=3213191]Test[/url]
*/
[url=https://chan.sankakucomplex.com/post/show/6163997]Test[/url]
[url=https://chan.sankakucomplex.com/post/show/5774884]Test[/url]
[url=https://www.sex.com/pin/38152484-she-likes-it-rough/]Test[/url]
[url=https://www.sex.com/pin/57537179-cock-slapping-hungry-tongue/]Test[/url]
*/
import * as _ from 'lodash';
import {Component, Hook} from '@f-list/vue-ts';

17
chat/image-preview-mutator.ts
View File

@ -178,6 +178,7 @@ export class ImagePreviewMutator {
getBaseJsMutatorScript(elSelector: string[], skipElementRemove: boolean = false): string {
return `const body = document.querySelector('body');
const html = document.querySelector('html');
const selectors = ${JSON.stringify(elSelector)};
// writing this out because sometimes .map and .reduce are overridden
@ -203,7 +204,8 @@ export class ImagePreviewMutator {
+ '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;';
+ 'opacity: 1 !important; padding: 0 !important; border: 0 !important; margin: 0 !important;'
+ 'min-width: unset !important; min-height: unset !important; max-width: unset !important; max-height: unset !important;';
try {
img.remove();
@ -223,15 +225,24 @@ export class ImagePreviewMutator {
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; position: absolute !important';
+ 'top: 0 !important; left: 0 !important; position: absolute !important;'
+ 'min-width: unset !important; min-height: unset !important; max-width: unset !important; max-height: unset !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;';
+ 'margin: 0 !imporant; border: 0 !important; padding: 0 !important;'
+ 'min-width: unset !important; min-height: unset !important; max-width: unset !important; max-height: unset !important;';
img.class = '';
el.class = '';
html.class = '';
html.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; position: absolute !important;'
+ 'min-width: unset !important; min-height: unset !important; max-width: unset !important; max-height: unset !important;';
${this.debug ? "console.log('Wrapper', el);" : ''}
document.addEventListener('DOMContentLoaded', (event) => {