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

fix: replace usage of getComputedStyle to calculate margins of content container

Browse Source
pull/7734/head
Carl Richter 4 years ago
parent 1b5c170cca
commit 29016ed13c
2 changed files with 116 additions and 113 deletions
Show Stats Download Patch File Download Diff File

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

@ -186,102 +186,103 @@
span {{$t('common:page.printFormat')}}
v-spacer
v-flex.page-col-content.ty-max-width.px-md-6.px-lg-12(xs12, lg9, xl10)
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasAnyPagePermissions')
template(v-slot:activator='{ on: onEditActivator }')
v-speed-dial(
v-model='pageEditFab'
direction='top'
open-on-hover
transition='scale-transition'
bottom
:right='!$vuetify.rtl'
:left='$vuetify.rtl'
fixed
dark
)
template(v-slot:activator)
v-btn.btn-animate-edit(
fab
color='primary'
v-model='pageEditFab'
@click='pageEdit'
v-on='onEditActivator'
:disabled='!hasWritePagesPermission'
:aria-label='$t(`common:page.editPage`)'
)
v-icon mdi-pencil
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasReadHistoryPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageHistory'
)
v-icon(size='20') mdi-history
span {{$t('common:header.history')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasReadSourcePermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageSource'
)
v-icon(size='20') mdi-code-tags
span {{$t('common:header.viewSource')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasWritePagesPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageDuplicate'
)
v-icon(size='20') mdi-content-duplicate
span {{$t('common:header.duplicate')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasManagePagesPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageMove'
)
v-icon(size='20') mdi-content-save-move-outline
span {{$t('common:header.move')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasDeletePagesPermission')
template(v-slot:activator='{ on }')
v-btn(
v-flex.ty-content-wrapper.pa-0
v-flex.page-col-content.ty-max-width.px-md-6.px-lg-12(xs12, lg9, xl10)
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasAnyPagePermissions')
template(v-slot:activator='{ on: onEditActivator }')
v-speed-dial(
v-model='pageEditFab'
direction='top'
open-on-hover
transition='scale-transition'
bottom
:right='!$vuetify.rtl'
:left='$vuetify.rtl'
fixed
dark
)
template(v-slot:activator)
v-btn.btn-animate-edit(
fab
dark
small
color='red'
v-on='on'
@click='pageDelete'
color='primary'
v-model='pageEditFab'
@click='pageEdit'
v-on='onEditActivator'
:disabled='!hasWritePagesPermission'
:aria-label='$t(`common:page.editPage`)'
)
v-icon(size='20') mdi-trash-can-outline
span {{$t('common:header.delete')}}
span {{$t('common:page.editPage')}}
v-alert.mb-5(v-if='!isPublished', color='red', outlined, icon='mdi-minus-circle', dense)
.caption {{$t('common:page.unpublishedWarning')}}
.contents(ref='container')
slot(name='contents')
.comments-container#discussion(v-if='commentsEnabled && commentsPerms.read && !printView')
.comments-header
v-icon.mr-2(dark) mdi-comment-text-outline
span {{$t('common:comments.title')}}
.comments-main
slot(name='comments')
v-icon mdi-pencil
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasReadHistoryPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageHistory'
)
v-icon(size='20') mdi-history
span {{$t('common:header.history')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasReadSourcePermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageSource'
)
v-icon(size='20') mdi-code-tags
span {{$t('common:header.viewSource')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasWritePagesPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageDuplicate'
)
v-icon(size='20') mdi-content-duplicate
span {{$t('common:header.duplicate')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasManagePagesPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
small
color='white'
light
v-on='on'
@click='pageMove'
)
v-icon(size='20') mdi-content-save-move-outline
span {{$t('common:header.move')}}
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasDeletePagesPermission')
template(v-slot:activator='{ on }')
v-btn(
fab
dark
small
color='red'
v-on='on'
@click='pageDelete'
)
v-icon(size='20') mdi-trash-can-outline
span {{$t('common:header.delete')}}
span {{$t('common:page.editPage')}}
v-alert.mb-5(v-if='!isPublished', color='red', outlined, icon='mdi-minus-circle', dense)
.caption {{$t('common:page.unpublishedWarning')}}
.contents(ref='container')
slot(name='contents')
.comments-container#discussion(v-if='commentsEnabled && commentsPerms.read && !printView')
.comments-header
v-icon.mr-2(dark) mdi-comment-text-outline
span {{$t('common:comments.title')}}
.comments-main
slot(name='comments')
nav-footer
notify
search-results

40
client/themes/tyclipso/plugins/prism.js
Unescape View File

@ -7,7 +7,7 @@ export default function initializePrism() {
'remove-trailing': true,
'remove-indent': true,
'left-trim': true,
'right-trim': true,
//'right-trim': true,
'remove-initial-line-feed': true,
'tabs-to-spaces': 2
})
@ -55,16 +55,30 @@ function expandButton() {
Prism.plugins.toolbar.registerButton('expand', env => {
let expanded = false
const codeBlock = env.element.closest('.code-toolbar')
const container = env.element.closest('.page-col-content.ty-max-width')
const applyInlineStyles = (marginLeft, width) => {
const getExpandedStyle = () => {
const contentWrapper = env.element.closest('.ty-content-wrapper')
const content = env.element.closest('.page-col-content')
const innerContent = env.element.closest('.contents')
const contentMargin = contentWrapper.offsetWidth - content.offsetWidth
const contentPadding = content.offsetWidth - innerContent.offsetWidth
return {
width: `${contentWrapper.offsetWidth - contentPadding}px`,
marginLeft: `-${(contentMargin) / 2}px`,
}
}
const updateInlineStyle = () => {
codeBlock.style.width = `${codeBlock.closest('.contents').offsetWidth}px`
codeBlock.style.marginLeft = '0px'
if (expanded) {
window.requestAnimationFrame(() => {
codeBlock.style.marginLeft = `${marginLeft}px`
codeBlock.style.width = `${width}px`
const style = getExpandedStyle()
codeBlock.style.marginLeft = style.marginLeft
codeBlock.style.width = style.width
})
} else {
setTimeout(() => {
@ -73,25 +87,13 @@ function expandButton() {
}
}
const recalculateWidth = () => {
const containerMargin = parseFloat(window.getComputedStyle(container).marginLeft)
const containerPadding = parseFloat(window.getComputedStyle(container).paddingLeft)
// compute expanded size
const expandedWidth = container.offsetWidth - containerPadding * 2 + containerMargin * 2;
// apply inline styles to code block
applyInlineStyles(-containerMargin, expandedWidth)
}
const expandButton = document.createElement('button')
expandButton.innerHTML = expandIcon
expandButton.addEventListener('click', () => {
expanded = !expanded
recalculateWidth()
updateInlineStyle()
// switch icon
expandButton.innerHTML = expanded ? collapseIcon : expandIcon
@ -99,7 +101,7 @@ function expandButton() {
document.activeElement.blur()
})
window.addEventListener('resize', recalculateWidth)
window.addEventListener('resize', updateInlineStyle)
return expandButton
})

Write Preview
Loading…
Cancel
Save