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

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

@ -7,7 +7,7 @@ export default function initializePrism() {
'remove-trailing': true, 'remove-trailing': true,
'remove-indent': true, 'remove-indent': true,
'left-trim': true, 'left-trim': true,
'right-trim': true, //'right-trim': true,
'remove-initial-line-feed': true, 'remove-initial-line-feed': true,
'tabs-to-spaces': 2 'tabs-to-spaces': 2
}) })
@ -55,16 +55,30 @@ function expandButton() {
Prism.plugins.toolbar.registerButton('expand', env => { Prism.plugins.toolbar.registerButton('expand', env => {
let expanded = false let expanded = false
const codeBlock = env.element.closest('.code-toolbar') 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.width = `${codeBlock.closest('.contents').offsetWidth}px`
codeBlock.style.marginLeft = '0px' codeBlock.style.marginLeft = '0px'
if (expanded) { if (expanded) {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
codeBlock.style.marginLeft = `${marginLeft}px` const style = getExpandedStyle()
codeBlock.style.width = `${width}px` codeBlock.style.marginLeft = style.marginLeft
codeBlock.style.width = style.width
}) })
} else { } else {
setTimeout(() => { 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') const expandButton = document.createElement('button')
expandButton.innerHTML = expandIcon expandButton.innerHTML = expandIcon
expandButton.addEventListener('click', () => { expandButton.addEventListener('click', () => {
expanded = !expanded expanded = !expanded
recalculateWidth() updateInlineStyle()
// switch icon // switch icon
expandButton.innerHTML = expanded ? collapseIcon : expandIcon expandButton.innerHTML = expanded ? collapseIcon : expandIcon
@ -99,7 +101,7 @@ function expandButton() {
document.activeElement.blur() document.activeElement.blur()
}) })
window.addEventListener('resize', recalculateWidth) window.addEventListener('resize', updateInlineStyle)
return expandButton return expandButton
}) })

Write Preview
Loading…
Cancel
Save