AlphaX/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

Added fullscreen function

Browse Source
This commit is contained in:
AlphaX-Projects 2023-04-14 16:51:39 +02:00 committed by GitHub
parent dd801ff68f
commit 670df9457d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 75 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
qortal-ui-plugins/plugins/core/qdn/browser/browser.src.js
View File

@ -244,42 +244,81 @@ class WebBrowser extends LitElement {
render() {
return html`
<div id="websitesWrapper" style="width:auto; padding:10px; background: var(--white);">
<div class="layout horizontal center">
<div class="address-bar">
<mwc-button @click=${() => this.goBack()} title="${translate(
'general.back'
)}" class="address-bar-button"><mwc-icon>arrow_back_ios</mwc-icon></mwc-button>
<mwc-button @click=${() => this.goForward()} title="${translate(
'browserpage.bchange1'
)}" class="address-bar-button"><mwc-icon>arrow_forward_ios</mwc-icon></mwc-button>
<mwc-button @click=${() => this.refresh()} title="${translate(
'browserpage.bchange2'
)}" class="address-bar-button"><mwc-icon>refresh</mwc-icon></mwc-button>
<mwc-button @click=${() => this.goBackToList()} title="${translate(
'browserpage.bchange3'
)}" class="address-bar-button"><mwc-icon>home</mwc-icon></mwc-button>
<input disabled style="width: 550px; color: var(--black);" id="address" type="text" value="${this.displayUrl
}"></input>
<mwc-button @click=${() => this.delete()} title="${translate(
'browserpage.bchange4'
)} ${this.service} ${this.name} ${translate(
'browserpage.bchange5'
)}" class="address-bar-button float-right"><mwc-icon>delete</mwc-icon></mwc-button>
${this.renderBlockUnblockButton()}
${this.renderFollowUnfollowButton()}
</div>
<div class="iframe-container">
<iframe id="browser-iframe" src="${this.url
}" sandbox="allow-scripts allow-forms allow-downloads allow-same-origin allow-modals" allow="fullscreen">
<span style="color: var(--black);">${translate(
'browserpage.bchange6'
)}</span>
</iframe>
<div id="websitesWrapper" style="width:auto; padding:10px; background: var(--white);">
<div class="layout horizontal center">
<div class="address-bar">
<mwc-button @click=${() => this.goBack()} title="${translate('general.back')}" class="address-bar-button"><mwc-icon>arrow_back_ios</mwc-icon></mwc-button>
<mwc-button @click=${() => this.goForward()} title="${translate('browserpage.bchange1')}" class="address-bar-button"><mwc-icon>arrow_forward_ios</mwc-icon></mwc-button>
<mwc-button @click=${() => this.refresh()} title="${translate('browserpage.bchange2')}" class="address-bar-button"><mwc-icon>refresh</mwc-icon></mwc-button>
<mwc-button @click=${() => this.goBackToList()} title="${translate('browserpage.bchange3')}" class="address-bar-button"><mwc-icon>home</mwc-icon></mwc-button>
<input disabled style="width: 550px; color: var(--black);" id="address" type="text" value="${this.displayUrl}"></input>
${this.renderFullScreen()}
<mwc-button @click=${() => this.delete()} title="${translate('browserpage.bchange4')} ${this.service} ${this.name} ${translate('browserpage.bchange5')}" class="address-bar-button float-right"><mwc-icon>delete</mwc-icon></mwc-button>
${this.renderBlockUnblockButton()}
${this.renderFollowUnfollowButton()}
</div>
<div class="iframe-container">
<iframe id="browser-iframe" src="${this.url}" sandbox="allow-scripts allow-forms allow-downloads allow-modals" allow="fullscreen">
<span style="color: var(--black);">${translate('browserpage.bchange6')}</span>
</iframe>
</div>
</div>
</div>
</div>
`;
`;
}
renderFullScreen() {
if (window.innerHeight == screen.height) {
return html`
<mwc-button
@click=${() => this.exitFullScreen()}
title="${translate('browserpage.bchange9')} ${this.name}"
class="address-bar-button float-right"
>
<mwc-icon>fullscreen_exit</mwc-icon>
</mwc-button>
`
} else {
return html`
<mwc-button
@click=${() => this.goFullScreen()}
title="${translate('browserpage.bchange9')} ${this.name}"
class="address-bar-button float-right"
>
<mwc-icon>fullscreen</mwc-icon>
</mwc-button>
`
}
}
goFullScreen() {
var elem = this.shadowRoot.getElementById('websitesWrapper')
if (elem.requestFullscreen) {
elem.requestFullscreen()
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen()
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen()
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen()
}
this.renderFullScreen()
}
exitFullScreen() {
if(document.exitFullscreen) {
document.exitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
this.renderFullScreen()
}
async unitJoinFee() {
@ -2168,9 +2207,11 @@ class WebBrowser extends LitElement {
goBackToList() {
if (this.service == "APP") {
this.exitFullScreen()
window.location = '../../q-app/index.html';
}
else { // Default to websites list
this.exitFullScreen()
window.location = '../index.html';
}
}