Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Passing some UI Defaults to loleaflet frame #1211

Merged
merged 3 commits into from
Nov 2, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 46 additions & 2 deletions src/document.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,46 @@ const hideLoadingIndicator = () => {
document.getElementById('proxyLoadingMessage').textContent = ''
}

const generateCSSVarTokens = () => {
/* NC versus COOL */
var cssVarMap = {
'--color-main-text': '--co-color-main-text',
'--color-main-background': '--co-body-bg',
'--color-primary-text': '--co-primary-text',
'--color-primary-element': '--co-primary-element:--co-text-accent',
'--color-primary-element-light': '--co-primary-element-light',
'--color-error': '--co-color-error',
'--color-warning': '--co-color-warning',
'--color-success': '--co-color-success',
'--border-radius': '--co-border-radius',
'--border-radius-large': '--co-border-radius-large',
'--color-background-hover': '--co-background-hover',
'--color-background-dark': '--co-background-dark',
'--color-text-light': '--co-text-light',
'--color-text-lighter': '--co-text-lighter',
'--color-loading-light': '--co-loading-light',
'--color-loading-dark': '--co-loading-dark',
'--color-box-shadow': '--co-box-shadow',
'--color-border': '--co-border',
'--color-border-dark': '--co-border-dark',
'--border-radius-pill': '--co-border-radius-pill'
}
var str = ''
for (var cssVarKey in cssVarMap) {
var cStyle = window.parent.getComputedStyle(document.documentElement).getPropertyValue(cssVarKey)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
var cStyle = window.parent.getComputedStyle(document.documentElement).getPropertyValue(cssVarKey)
var cStyle = window.getComputedStyle(document.documentElement).getPropertyValue(cssVarKey)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CSS variables are also properly loaded inside of the document frame.

if (!cStyle) {
// try suffix -dark instead
cStyle = window.parent.getComputedStyle(document.documentElement).getPropertyValue(cssVarKey + '-dark')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
cStyle = window.parent.getComputedStyle(document.documentElement).getPropertyValue(cssVarKey + '-dark')
cStyle = window.getComputedStyle(document.documentElement).getPropertyValue(cssVarKey + '-dark')

Copy link
Collaborator Author

@merttumer merttumer Nov 2, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the reply. Initially it was like this but later we discovered that it does not work on Firefox without parent. The CSS variables become empty string. The only solution I found was using window.parent.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed seems to be a firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1471231

Then let's get this in as it is and maybe see if we can work around that by not using display: none; but opacity of 0 until the frame is loaded.

}
if (!cStyle) continue // skip if it is not set
var varNames = cssVarMap[cssVarKey].split(':')
for (var i = 0; i < varNames.length; ++i) {
str += varNames[i] + '=' + cStyle + ';'
}
}
return str
}

showLoadingIndicator()

$.widget('oc.guestNamePicker', {
Expand Down Expand Up @@ -176,7 +216,9 @@ const documentsMain = {

// form to post the access token for WOPISrc
const form = '<form id="loleafletform_viewer" name="loleafletform_viewer" target="loleafletframe_viewer" action="' + urlsrc + '" method="post">'
+ '<input name="access_token" value="' + accessToken + '" type="hidden"/></form>'
+ '<input name="access_token" value="' + accessToken + '" type="hidden"/>'
+ '<input name="ui_defaults" value="TextRuler=false;TextStatusbar=true;TextSidebar=false;PresentationSidebar=false;PresentationStatusbar=true;SpreadsheetSidebar=false" type="hidden"/>'
+ '<input name="css_variables" value="' + generateCSSVarTokens() + '" type="hidden"/></form>'

// iframe that contains the Collabora Online Viewer
const frame = '<iframe id="loleafletframe_viewer" name="loleafletframe_viewer" nonce="' + btoa(getRequestToken()) + '" style="width:100%;height:100%;position:absolute;"/>'
Expand Down Expand Up @@ -225,7 +267,9 @@ const documentsMain = {

// form to post the access token for WOPISrc
var form = '<form id="loleafletform" name="loleafletform" target="loleafletframe" action="' + urlsrc + '" method="post">'
+ '<input name="access_token" value="' + accessToken + '" type="hidden"/></form>'
+ '<input name="access_token" value="' + accessToken + '" type="hidden"/>'
+ '<input name="ui_defaults" value="TextRuler=true;TextStatusbar=false;TextSidebar=false;PresentationSidebar=false;PresentationStatusbar=false;SpreadsheetSidebar=false" type="hidden"/>'
+ '<input name="css_variables" value="' + generateCSSVarTokens() + '" type="hidden"/></form>'

// iframe that contains the Collabora Online
var frame = '<iframe id="loleafletframe" name="loleafletframe" nonce="' + btoa(getRequestToken()) + '" scrolling="no" allowfullscreen style="width:100%;height:100%;position:absolute;" />'
Expand Down