From 0dbec8fff1f2dff6c69c50d25f64477569f017c2 Mon Sep 17 00:00:00 2001 From: mistic100 Date: Tue, 29 Mar 2022 21:24:59 +0200 Subject: [PATCH] Fix #662 & Fix #661 menu and download buttons visibility --- docs/.vuepress/config.js | 2 +- docs/plugins/plugin-video.md | 4 +- src/adapters/shared/AbstractVideoAdapter.js | 2 +- src/buttons/AbstractButton.js | 3 -- src/buttons/DescriptionButton.js | 2 +- src/buttons/DownloadButton.js | 22 ++++++--- src/buttons/MenuButton.js | 6 +-- src/components/NavbarCaption.js | 55 +++++++++++---------- 8 files changed, 50 insertions(+), 46 deletions(-) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 5c2222f82..6dec9204c 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -90,7 +90,7 @@ module.exports = { 'plugin-resolution', 'plugin-settings', 'plugin-stereo', - ['plugin-video', 'Video (NEW)'], + ['plugin-video', 'VideoPlugin (NEW)'], 'plugin-virtual-tour', 'plugin-visible-range', ], diff --git a/docs/plugins/plugin-video.md b/docs/plugins/plugin-video.md index abe93ffc9..c5710511d 100644 --- a/docs/plugins/plugin-video.md +++ b/docs/plugins/plugin-video.md @@ -19,7 +19,7 @@ Once enabled it will add various elements to the viewer: - Progressbar above the navbar - Play button in the center of the viewer -It also supports advanced autorotate with times `keypoints`. +It also supports advanced autorotate with timed `keypoints`. ```js const viewer = new PhotoSphereViewer.Viewer({ @@ -79,7 +79,7 @@ const viewer = new PhotoSphereViewer.Viewer({ #### `keypoints` - type: `Array<{ position, time }>` -Defines timed keypoints that will be used with by the autorotate button. +Defines timed keypoints that will be used by the autorotate button. ```js keypoints: [ diff --git a/src/adapters/shared/AbstractVideoAdapter.js b/src/adapters/shared/AbstractVideoAdapter.js index 96a505591..46f1a4d02 100644 --- a/src/adapters/shared/AbstractVideoAdapter.js +++ b/src/adapters/shared/AbstractVideoAdapter.js @@ -23,7 +23,7 @@ export class AbstractVideoAdapter extends AbstractAdapter { static supportsTransition = false; static supportsPreload = false; - static supportsDownload = true; + static supportsDownload = false; constructor(psv, options) { super(psv); diff --git a/src/buttons/AbstractButton.js b/src/buttons/AbstractButton.js index 8e22dd00a..cc319438c 100644 --- a/src/buttons/AbstractButton.js +++ b/src/buttons/AbstractButton.js @@ -132,9 +132,6 @@ export class AbstractButton extends AbstractComponent { if (!supportedOrObject) { this.hide(); } - else { - this.show(); - } } } diff --git a/src/buttons/DescriptionButton.js b/src/buttons/DescriptionButton.js index e8e5f26e4..ca389011f 100644 --- a/src/buttons/DescriptionButton.js +++ b/src/buttons/DescriptionButton.js @@ -104,7 +104,7 @@ export class DescriptionButton extends AbstractButton { refreshUi(refresh = false) { if (refresh) { const caption = this.psv.navbar.getButton(NavbarCaption.id, false); - const captionHidden = caption && !caption.prop.contentVisible; + const captionHidden = caption && !caption.isVisible(); const hasDescription = !!this.psv.config.description; if (captionHidden || hasDescription) { diff --git a/src/buttons/DownloadButton.js b/src/buttons/DownloadButton.js index 9d1a098aa..f958d6051 100644 --- a/src/buttons/DownloadButton.js +++ b/src/buttons/DownloadButton.js @@ -1,5 +1,5 @@ -import { AbstractButton } from './AbstractButton'; import download from '../icons/download.svg'; +import { AbstractButton } from './AbstractButton'; /** * @summary Navigation bar download button class @@ -18,13 +18,6 @@ export class DownloadButton extends AbstractButton { super(navbar, 'psv-button--hover-scale psv-download-button', true); } - /** - * @override - */ - isSupported() { - return this.psv.adapter.constructor.supportsDownload || !!this.psv.config.downloadUrl; - } - /** * @override * @description Asks the browser to download the panorama source file @@ -41,4 +34,17 @@ export class DownloadButton extends AbstractButton { }, 100); } + /** + * @override + */ + refreshUi() { + const supported = this.psv.adapter.constructor.supportsDownload || this.psv.config.downloadUrl; + if (supported && !this.prop.visible) { + this.show(); + } + else if (!supported && this.prop.visible) { + this.hide(); + } + } + } diff --git a/src/buttons/MenuButton.js b/src/buttons/MenuButton.js index b70b8b565..f0f556f4e 100644 --- a/src/buttons/MenuButton.js +++ b/src/buttons/MenuButton.js @@ -50,7 +50,7 @@ export class MenuButton extends AbstractButton { this.psv.on(EVENTS.OPEN_PANEL, this); this.psv.on(EVENTS.CLOSE_PANEL, this); - this.hide(); + super.hide(); } /** @@ -129,9 +129,7 @@ export class MenuButton extends AbstractButton { } __hideMenu() { - if (this.psv.panel) { - this.psv.panel.hide(IDS.MENU); - } + this.psv.panel.hide(IDS.MENU); } } diff --git a/src/components/NavbarCaption.js b/src/components/NavbarCaption.js index 7159e012e..28e34605f 100644 --- a/src/components/NavbarCaption.js +++ b/src/components/NavbarCaption.js @@ -22,18 +22,14 @@ export class NavbarCaption extends AbstractComponent { * @property {string} id * @property {boolean} collapsable * @property {number} width - * @property {string} caption - * @property {boolean} contentVisible - if the content is visible in the navbar - * @property {number} contentWidth - with of the caption content + * @property {number} contentWidth - width of the caption content */ this.prop = { ...this.prop, - id : this.constructor.id, - collapsable : false, - width : 0, - caption : '', - contentVisible: true, - contentWidth : 0, + id : this.constructor.id, + collapsable : false, + width : 0, + contentWidth: 0, }; /** @@ -62,17 +58,10 @@ export class NavbarCaption extends AbstractComponent { * @param {string} html */ setCaption(html) { - this.prop.caption = html || ''; - this.content.innerHTML = this.prop.caption; - - if (html) { - this.prop.contentWidth = this.content.offsetWidth; - this.refreshUi('caption change'); - } - else if (!this.prop.contentVisible) { - this.prop.contentVisible = true; - this.__refreshButton(); - } + this.show(); + this.content.innerHTML = html; + this.prop.contentWidth = html ? this.content.offsetWidth : 0; + this.refreshUi(); } /** @@ -81,17 +70,31 @@ export class NavbarCaption extends AbstractComponent { */ refreshUi() { const availableWidth = this.container.offsetWidth; - if (availableWidth >= this.prop.contentWidth && !this.prop.contentVisible) { - this.content.style.display = ''; - this.prop.contentVisible = true; + if (availableWidth >= this.prop.contentWidth) { + this.show(); } - else if (availableWidth < this.prop.contentWidth && this.prop.contentVisible) { - this.content.style.display = 'none'; - this.prop.contentVisible = false; + else if (availableWidth < this.prop.contentWidth) { + this.hide(); } this.__refreshButton(); } + /** + * @override + */ + hide() { + this.content.style.display = 'none'; + this.prop.visible = false; + } + + /** + * @override + */ + show() { + this.content.style.display = ''; + this.prop.visible = true; + } + /** * @private */