Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Highlight the button of the selected sidebar panel.

Browse Source
This commit is contained in:
kovacsv 2021-07-11 08:57:18 +02:00
parent f85eebfb3f
commit 475d1d00ad
5 changed files with 62 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
website/assets/images/toolbar/details_blue.svg → website/assets/images/toolbar/details_active.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 333 B

After

Width:  |  Height:  |  Size: 333 B

2
website/assets/images/toolbar/settings.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xml:space="preserve"><path d="m14.5 17.5 3-3m-3-3 3 3m-5.5 3-3-3m3-3-3 3M1.5 3.4v5.7l5 3 5-3V3.4L6.5.5zm5 8.7V6.2m-5-2.8 5 2.8m0 0 5-2.8" fill="none" stroke="#263238" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 18 18"><path d="M14.9 7.9 17 6.1h0c-.2-.5-.4-.9-.6-1.4-.3-.4-.6-.9-.9-1.2h0l-2.6 1c-.5-.5-1.2-.9-1.9-1.2 0 0 0 0 0 0L10.6.6h0C10 .5 9.5.5 9 .5s-1 0-1.5.1h0L7 3.3c-.7.3-1.3.6-1.9 1.1h0l-2.6-1h0c-.3.5-.6.9-.9 1.4-.2.4-.4.9-.6 1.3h0l2.1 1.7c-.1.8-.1 1.6 0 2.3h0L1 11.9h0c.2.5.4.9.6 1.4.3.4.6.9.9 1.2h0l2.6-1c.5.5 1.2.9 1.9 1.2h0l.4 2.7h0c.5.1 1 .1 1.5.1s1 0 1.5-.1h0l.4-2.7c.7-.2 1.4-.6 1.9-1.1h0l2.6 1h0c.3-.4.6-.8.9-1.3.3-.4.5-.9.6-1.4h0l-2.1-1.7c.3-.8.3-1.6.2-2.3" stroke-linejoin="round" stroke-linecap="round" stroke="#263238" fill="none"/><path d="M12 9c0 1.6-1.4 3-3 3M6 9c0-1.6 1.4-3 3-3M6 9c0 1.6 1.4 3 3 3" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" stroke="#263238" fill="none"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 304 B

After

Width:  |  Height:  |  Size: 794 B

1
website/assets/images/toolbar/settings_active.svg Normal file
View File

@ -0,0 +1 @@
<svg xml:space="preserve" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M14.9 7.9 17 6.1h0c-.2-.5-.4-.9-.6-1.4-.3-.4-.6-.9-.9-1.2h0l-2.6 1c-.5-.5-1.2-.9-1.9-1.2 0 0 0 0 0 0L10.6.6h0C10 .5 9.5.5 9 .5s-1 0-1.5.1h0L7 3.3c-.7.3-1.3.6-1.9 1.1h0l-2.6-1h0c-.3.5-.6.9-.9 1.4-.2.4-.4.9-.6 1.3h0l2.1 1.7c-.1.8-.1 1.6 0 2.3h0L1 11.9h0c.2.5.4.9.6 1.4.3.4.6.9.9 1.2h0l2.6-1c.5.5 1.2.9 1.9 1.2h0l.4 2.7h0c.5.1 1 .1 1.5.1s1 0 1.5-.1h0l.4-2.7c.7-.2 1.4-.6 1.9-1.1h0l2.6 1h0c.3-.4.6-.8.9-1.3.3-.4.5-.9.6-1.4h0l-2.1-1.7c.3-.8.3-1.6.2-2.3" stroke-linejoin="round" stroke-linecap="round" stroke="#263238" fill="none" style="stroke:#3393bd;stroke-opacity:1"/><path d="M12 9c0 1.6-1.4 3-3 3M6 9c0-1.6 1.4-3 3-3M6 9c0 1.6 1.4 3 3 3" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" stroke="#263238" fill="none" style="stroke:#3393bd;stroke-opacity:1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 874 B

6
website/o3dv/toolbar.js
View File

@ -36,6 +36,12 @@ OV.ToolbarButton = class
this.buttonDiv.addClass ('selected');
}
}
SetImage (image)
{
this.image = image;
this.buttonImg.attr ('src', this.image);
}
};
OV.Toolbar = class

76
website/o3dv/website.js
View File

@ -367,57 +367,89 @@ OV.Website = class
InitSidebar ()
{
function AddSidebarButton (toolbar, imageName, imageTitle, onClick)
function AddSidebarButton (toolbar, sidebarPanel, onClick)
{
let image = 'assets/images/toolbar/' + imageName + '.svg';
let button = toolbar.AddImageButton (image, imageTitle, onClick);
let image = 'assets/images/toolbar/' + sidebarPanel.image + '.svg';
let button = toolbar.AddImageButton (image, sidebarPanel.title, onClick);
button.AddClass ('only_full_width');
button.AddClass ('right');
return button;
}
function ShowSidebar (sidebar, cookieHandler, panelId)
function UpdateSidebarButtons (sidebar, sidebarPanels)
{
const visiblePanelId = sidebar.GetVisiblePanelId ();
for (let i = 0; i < sidebarPanels.length; i++) {
let sidebarPanel = sidebarPanels[i];
if (sidebarPanel.panelId === visiblePanelId) {
let image = 'assets/images/toolbar/' + sidebarPanel.image + '_active.svg';
sidebarPanel.button.SetImage (image);
} else {
let image = 'assets/images/toolbar/' + sidebarPanel.image + '.svg';
sidebarPanel.button.SetImage (image);
}
}
}
function ShowSidebar (sidebar, cookieHandler, sidebarPanels, panelId)
{
sidebar.Show (panelId);
UpdateSidebarButtons (sidebar, sidebarPanels);
cookieHandler.SetBoolVal ('ov_show_sidebar', sidebar.IsVisible ());
}
function ToggleSidebar (sidebar, cookieHandler, panelId)
function ToggleSidebar (sidebar, cookieHandler, sidebarPanels, panelId)
{
if (sidebar.GetVisiblePanelId () !== panelId) {
ShowSidebar (sidebar, cookieHandler, panelId);
ShowSidebar (sidebar, cookieHandler, sidebarPanels, panelId);
} else {
ShowSidebar (sidebar, cookieHandler, null);
}
ShowSidebar (sidebar, cookieHandler, sidebarPanels, null);
}
}
const detailsPanelId = this.sidebar.AddPanel (new OV.DetailsSidebarPanel (this.parameters.sidebarDiv));
const settingsPanelId = this.sidebar.AddPanel (new OV.SettingsSidebarPanel (this.parameters.sidebarDiv));
this.detailsPanel = this.sidebar.GetPanel (detailsPanelId);
let obj = this;
AddSidebarButton (this.toolbar, 'details', 'Details panel', function () {
ToggleSidebar (obj.sidebar, obj.cookieHandler, detailsPanelId);
obj.Resize ();
});
this.detailsPanel = new OV.DetailsSidebarPanel (this.parameters.sidebarDiv);
let sidebarPanels = [
{
panelId : null,
panel : this.detailsPanel,
image : 'details',
title : 'Details panel',
button : null
}
];
if (OV.FeatureSet.SettingsAvailable) {
AddSidebarButton (this.toolbar, 'settings', 'Settings panel', function () {
ToggleSidebar (obj.sidebar, obj.cookieHandler, settingsPanelId);
sidebarPanels.push (
{
panelId : null,
panel : new OV.SettingsSidebarPanel (this.parameters.sidebarDiv),
image : 'settings',
title : 'Settings panel',
button : null
}
);
}
for (let id = 0; id < sidebarPanels.length; id++) {
let sidebarPanel = sidebarPanels[id];
sidebarPanel.panelId = this.sidebar.AddPanel (sidebarPanel.panel);
sidebarPanel.button = AddSidebarButton (this.toolbar, sidebarPanel, function () {
ToggleSidebar (obj.sidebar, obj.cookieHandler, sidebarPanels, sidebarPanel.panelId);
obj.Resize ();
});
});
}
this.sidebar.Init ({
onClose : function () {
ShowSidebar (obj.sidebar, obj.cookieHandler, null);
ShowSidebar (obj.sidebar, obj.cookieHandler, sidebarPanels, null);
obj.Resize ();
}
});
let show = this.cookieHandler.GetBoolVal ('ov_show_sidebar', true);
ShowSidebar (this.sidebar, this.cookieHandler, show ? detailsPanelId : null);
ShowSidebar (this.sidebar, this.cookieHandler, sidebarPanels, show ? sidebarPanels[0].panelId : null);
}
InitNavigator ()