msb-public
/
wiki
mirror of https://github.com/requarks/wiki
1
0
Code Issues Projects Releases Wiki Activity

feat: add overlay to content images via renderer

Browse Source
pull/7734/head
Carl Richter 4 years ago
parent c47005c4e3
commit bc9924c0f4
11 changed files with 158 additions and 44 deletions
Show Stats Download Patch File Download Diff File

11
client/themes/tyclipso/components/page.vue
Unescape View File

@ -352,6 +352,8 @@ Prism.plugins.toolbar.registerButton('copy-to-clipboard', (env) => {
}
})
export default {
components: {
NavSidebar,
@ -584,14 +586,7 @@ export default {
})
// remove empty divs
c.querySelectorAll('div:not([class]):not([id])').forEach(el => {
if (el.innerHTML === '') el.remove()
})
// add click listerers for images
c.querySelectorAll('p > img').forEach(el => el.addEventListener('click', () => {
window.open(el.src, '_blank')
}))
c.querySelectorAll('div:not([class]):not([id]):empty').forEach(el => el.remove())
},
copyToClipboard(hash) {
const url = window.location.origin + window.location.pathname + hash

3
client/themes/tyclipso/scss/_mixins.scss
Unescape View File

@ -0,0 +1,3 @@
@mixin elevation($z, $important: false) {
box-shadow: map-get($shadow-key-umbra, $z), map-get($shadow-key-penumbra, $z), map-get($shadow-key-ambient, $z) if($important, !important, null);
}

25
client/themes/tyclipso/scss/app.scss
Unescape View File

@ -1,6 +1,9 @@
/* THEME SPECIFIC STYLES */
@import "../../default/scss/app";
@import "settings";
@import "mixins";
@import "components";
.ty-max-width {
margin-left: auto !important;
@ -178,26 +181,4 @@
text-shadow: none !important;
}
}
// ---------------------------------
// IMAGES
// ---------------------------------
p {
> img:first-child,
> br + img {
display: block;
overflow: hidden;
margin: 12px 0;
border-radius: 4px;
box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12) !important;
transition: transform .2s ease;
cursor: pointer;
&:hover {
transform: scale(1.05);
}
}
}
}

41
client/themes/tyclipso/scss/components/_image.scss
Unescape View File

@ -0,0 +1,41 @@
.ty-image-wrapper {
@include elevation(2);
display: block;
overflow: hidden;
margin: 12px 0;
border-radius: 4px;
cursor: pointer;
position: relative;
text-decoration: none;
color: currentColor;
}
.ty-image-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(mc('theme', 'primary'), .7);
transition-property: opacity, visibility;
transition-timing-function: ease;
transition-duration: .3s;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
.v-icon {
font-size: 36px;
margin-bottom: 8px;
color: currentColor;
}
}
.ty-image-wrapper:hover .ty-image-overlay {
opacity: 1;
visibility: visible;
}

1
client/themes/tyclipso/scss/components/_index.scss
Unescape View File

@ -0,0 +1 @@
@import "image";

87
client/themes/tyclipso/scss/settings/_elevation.scss
Unescape View File

@ -0,0 +1,87 @@
$shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
$shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
$shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);
$shadow-key-umbra: (
0: (0px 0px 0px 0px $shadow-key-umbra-opacity),
1: (0px 2px 1px -1px $shadow-key-umbra-opacity),
2: (0px 3px 1px -2px $shadow-key-umbra-opacity),
3: (0px 3px 3px -2px $shadow-key-umbra-opacity),
4: (0px 2px 4px -1px $shadow-key-umbra-opacity),
5: (0px 3px 5px -1px $shadow-key-umbra-opacity),
6: (0px 3px 5px -1px $shadow-key-umbra-opacity),
7: (0px 4px 5px -2px $shadow-key-umbra-opacity),
8: (0px 5px 5px -3px $shadow-key-umbra-opacity),
9: (0px 5px 6px -3px $shadow-key-umbra-opacity),
10: (0px 6px 6px -3px $shadow-key-umbra-opacity),
11: (0px 6px 7px -4px $shadow-key-umbra-opacity),
12: (0px 7px 8px -4px $shadow-key-umbra-opacity),
13: (0px 7px 8px -4px $shadow-key-umbra-opacity),
14: (0px 7px 9px -4px $shadow-key-umbra-opacity),
15: (0px 8px 9px -5px $shadow-key-umbra-opacity),
16: (0px 8px 10px -5px $shadow-key-umbra-opacity),
17: (0px 8px 11px -5px $shadow-key-umbra-opacity),
18: (0px 9px 11px -5px $shadow-key-umbra-opacity),
19: (0px 9px 12px -6px $shadow-key-umbra-opacity),
20: (0px 10px 13px -6px $shadow-key-umbra-opacity),
21: (0px 10px 13px -6px $shadow-key-umbra-opacity),
22: (0px 10px 14px -6px $shadow-key-umbra-opacity),
23: (0px 11px 14px -7px $shadow-key-umbra-opacity),
24: (0px 11px 15px -7px $shadow-key-umbra-opacity)
);
$shadow-key-penumbra: (
0: (0px 0px 0px 0px $shadow-key-penumbra-opacity),
1: (0px 1px 1px 0px $shadow-key-penumbra-opacity),
2: (0px 2px 2px 0px $shadow-key-penumbra-opacity),
3: (0px 3px 4px 0px $shadow-key-penumbra-opacity),
4: (0px 4px 5px 0px $shadow-key-penumbra-opacity),
5: (0px 5px 8px 0px $shadow-key-penumbra-opacity),
6: (0px 6px 10px 0px $shadow-key-penumbra-opacity),
7: (0px 7px 10px 1px $shadow-key-penumbra-opacity),
8: (0px 8px 10px 1px $shadow-key-penumbra-opacity),
9: (0px 9px 12px 1px $shadow-key-penumbra-opacity),
10: (0px 10px 14px 1px $shadow-key-penumbra-opacity),
11: (0px 11px 15px 1px $shadow-key-penumbra-opacity),
12: (0px 12px 17px 2px $shadow-key-penumbra-opacity),
13: (0px 13px 19px 2px $shadow-key-penumbra-opacity),
14: (0px 14px 21px 2px $shadow-key-penumbra-opacity),
15: (0px 15px 22px 2px $shadow-key-penumbra-opacity),
16: (0px 16px 24px 2px $shadow-key-penumbra-opacity),
17: (0px 17px 26px 2px $shadow-key-penumbra-opacity),
18: (0px 18px 28px 2px $shadow-key-penumbra-opacity),
19: (0px 19px 29px 2px $shadow-key-penumbra-opacity),
20: (0px 20px 31px 3px $shadow-key-penumbra-opacity),
21: (0px 21px 33px 3px $shadow-key-penumbra-opacity),
22: (0px 22px 35px 3px $shadow-key-penumbra-opacity),
23: (0px 23px 36px 3px $shadow-key-penumbra-opacity),
24: (0px 24px 38px 3px $shadow-key-penumbra-opacity)
);
$shadow-key-ambient: (
0: (0px 0px 0px 0px $shadow-key-ambient-opacity),
1: (0px 1px 3px 0px $shadow-key-ambient-opacity),
2: (0px 1px 5px 0px $shadow-key-ambient-opacity),
3: (0px 1px 8px 0px $shadow-key-ambient-opacity),
4: (0px 1px 10px 0px $shadow-key-ambient-opacity),
5: (0px 1px 14px 0px $shadow-key-ambient-opacity),
6: (0px 1px 18px 0px $shadow-key-ambient-opacity),
7: (0px 2px 16px 1px $shadow-key-ambient-opacity),
8: (0px 3px 14px 2px $shadow-key-ambient-opacity),
9: (0px 3px 16px 2px $shadow-key-ambient-opacity),
10: (0px 4px 18px 3px $shadow-key-ambient-opacity),
11: (0px 4px 20px 3px $shadow-key-ambient-opacity),
12: (0px 5px 22px 4px $shadow-key-ambient-opacity),
13: (0px 5px 24px 4px $shadow-key-ambient-opacity),
14: (0px 5px 26px 4px $shadow-key-ambient-opacity),
15: (0px 6px 28px 5px $shadow-key-ambient-opacity),
16: (0px 6px 30px 5px $shadow-key-ambient-opacity),
17: (0px 6px 32px 5px $shadow-key-ambient-opacity),
18: (0px 7px 34px 6px $shadow-key-ambient-opacity),
19: (0px 7px 36px 6px $shadow-key-ambient-opacity),
20: (0px 8px 38px 7px $shadow-key-ambient-opacity),
21: (0px 8px 40px 7px $shadow-key-ambient-opacity),
22: (0px 8px 42px 7px $shadow-key-ambient-opacity),
23: (0px 9px 44px 8px $shadow-key-ambient-opacity),
24: (0px 9px 46px 8px $shadow-key-ambient-opacity)
);

1
client/themes/tyclipso/scss/settings/_index.scss
Unescape View File

@ -0,0 +1 @@
@import "elevation";

10
client/themes/tyclipso/theme.yml
Unescape View File

@ -27,16 +27,6 @@ props:
default: true
title: Display the Page Tags
order: 3
showTags:
type: Boolean
default: true
title: Display the Page Author and Date
order: 4
showTags:
type: Boolean
default: true
title: Display the Page Rating
order: 5
showSocialBar:
type: Boolean
default: true

8
server/modules/rendering/html-tyclipso/components/ImageOverlay.js
Unescape View File

@ -0,0 +1,8 @@
const ImageOverlay = `
<span class="ty-image-overlay">
<i aria-hidden="true" class="v-icon notranslate mdi mdi-open-in-new theme--light"></i>
<span>In neuem Tab öffnen</span>
</span>
`
module.exports = ImageOverlay

3
server/modules/rendering/html-tyclipso/definition.yml
Unescape View File

@ -1,10 +1,9 @@
key: htmlTyclipso
title: Post-Processor for tyclipso theme
title: Tyclipso Theme
description: Prepares html for the tyclipso theme
author: tyclipso
icon: mdi-auto-fix
enabledDefault: true
dependsOn: htmlCore
step: post
order: 100
props: {}

12
server/modules/rendering/html-tyclipso/renderer.js
Unescape View File

@ -1,5 +1,13 @@
const ImageOverlay = require('./components/ImageOverlay')
module.exports = {
async init(input, config) {
return input
init($, config) {
// wrap images
$('p > img').each((i, element) => {
const src = $(element).attr('src');
$(element).wrap(`<a class="ty-image-wrapper" href="${src}" target="_blank"></a>`)
$(element).parent().append(ImageOverlay)
})
}
}

Write Preview
Loading…
Cancel
Save