Add dummy settings sidebar panel.

This commit is contained in:
kovacsv 2021-07-10 13:35:18 +02:00
parent 5eaffa347e
commit 840f48b237
9 changed files with 64 additions and 93 deletions

View File

@ -73,12 +73,12 @@
"website/o3dv/openurldialog.js",
"website/o3dv/exportdialog.js",
"website/o3dv/sharingdialog.js",
"website/o3dv/settingsdialog.js",
"website/o3dv/cookiedialog.js",
"website/o3dv/modeldata.js",
"website/o3dv/navigator.js",
"website/o3dv/sidebarpanel.js",
"website/o3dv/detailssidebarpanel.js",
"website/o3dv/settingssidebarpanel.js",
"website/o3dv/sidebar.js",
"website/o3dv/hashhandler.js",
"website/o3dv/website.css",

View File

@ -87,12 +87,12 @@
<script type="text/javascript" src="o3dv/openurldialog.js"></script>
<script type="text/javascript" src="o3dv/exportdialog.js"></script>
<script type="text/javascript" src="o3dv/sharingdialog.js"></script>
<script type="text/javascript" src="o3dv/settingsdialog.js"></script>
<script type="text/javascript" src="o3dv/cookiedialog.js"></script>
<script type="text/javascript" src="o3dv/modeldata.js"></script>
<script type="text/javascript" src="o3dv/navigator.js"></script>
<script type="text/javascript" src="o3dv/sidebarpanel.js"></script>
<script type="text/javascript" src="o3dv/detailssidebarpanel.js"></script>
<script type="text/javascript" src="o3dv/settingssidebarpanel.js"></script>
<script type="text/javascript" src="o3dv/sidebar.js"></script>
<script type="text/javascript" src="o3dv/hashhandler.js"></script>
<link rel="stylesheet" type="text/css" href="o3dv/website.css">

View File

@ -87,12 +87,12 @@
<script type="text/javascript" src="o3dv/openurldialog.js"></script>
<script type="text/javascript" src="o3dv/exportdialog.js"></script>
<script type="text/javascript" src="o3dv/sharingdialog.js"></script>
<script type="text/javascript" src="o3dv/settingsdialog.js"></script>
<script type="text/javascript" src="o3dv/cookiedialog.js"></script>
<script type="text/javascript" src="o3dv/modeldata.js"></script>
<script type="text/javascript" src="o3dv/navigator.js"></script>
<script type="text/javascript" src="o3dv/sidebarpanel.js"></script>
<script type="text/javascript" src="o3dv/detailssidebarpanel.js"></script>
<script type="text/javascript" src="o3dv/settingssidebarpanel.js"></script>
<script type="text/javascript" src="o3dv/sidebar.js"></script>
<script type="text/javascript" src="o3dv/hashhandler.js"></script>
<link rel="stylesheet" type="text/css" href="o3dv/website.css">

View File

@ -3,8 +3,11 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
constructor (parentDiv)
{
super (parentDiv);
this.titleDiv = null;
this.contentDiv = null;
}
GetTitle ()
{
return 'Details';
}
AddPropertyGroup (table, propertyGroup)
@ -140,17 +143,5 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
AddTextureMap (this, table, 'Normal Map', material.normalMap);
AddTextureMap (this, table, 'Emissive Map', material.emissiveMap);
this.Resize ();
}
Resize ()
{
let titleHeight = this.titleDiv.outerHeight (true);
let height = this.parentDiv.height ();
this.contentDiv.outerHeight (height - titleHeight, true);
}
Clear ()
{
this.contentDiv.empty ();
}
};

View File

@ -1,50 +0,0 @@
OV.ShowSettingsDialog = function (viewerSettings, importSettings, onOk)
{
function AddColorRow (contentDiv, defaultColor, paramName, paramDesc)
{
let colorRow = $('<div>').addClass ('ov_dialog_table_row').appendTo (contentDiv);
$('<div>').html (paramName).addClass ('ov_dialog_table_row_name').appendTo (colorRow);
let valueColumn = $('<div>').addClass ('ov_dialog_table_row_value').appendTo (colorRow);
let colorInput = $('<input>').attr ('type', 'color').addClass ('ov_dialog_color').appendTo (valueColumn);
$('<span>').addClass ('ov_dialog_table_row_comment').html (paramDesc).appendTo (valueColumn);
colorInput.val ('#' + OV.ColorToHexString (defaultColor));
return colorInput;
}
let dialogSettings = {
backgroundColor: viewerSettings.backgroundColor,
defaultColor : importSettings.defaultColor
};
let dialog = new OV.ButtonDialog ();
let contentDiv = dialog.Init ('Settings', [
{
name : 'Cancel',
subClass : 'outline',
onClick () {
dialog.Hide ();
}
},
{
name : 'OK',
onClick () {
dialog.Hide ();
onOk (dialogSettings);
}
}
]);
let backgroundColorInput = AddColorRow (contentDiv, dialogSettings.backgroundColor, 'Background Color', '(Visualization only)');
backgroundColorInput.change (function () {
let colorStr = backgroundColorInput.val ().substr (1);
dialogSettings.backgroundColor = OV.HexStringToColor (colorStr);
});
let colorInput = AddColorRow (contentDiv, dialogSettings.defaultColor, 'Default Color', '(When no material defined)');
colorInput.change (function () {
let colorStr = colorInput.val ().substr (1);
dialogSettings.defaultColor = OV.HexStringToColor (colorStr);
});
dialog.Show ();
return dialog;
};

View File

@ -0,0 +1,17 @@
OV.SettingsSidebarPanel = class extends OV.SidebarPanel
{
constructor (parentDiv)
{
super (parentDiv);
}
GetTitle ()
{
return 'Settings';
}
InitContent ()
{
this.contentDiv.html ('Settings Content...');
}
};

View File

@ -1,6 +1,7 @@
OV.SidebarPanelId =
{
Details : 0
Details : 0,
Settings : 1
};
OV.Sidebar = class
@ -12,7 +13,8 @@ OV.Sidebar = class
this.titleDiv = null;
this.contentDiv = null;
this.panels = [
new OV.DetailsSidebarPanel (this.parentDiv)
new OV.DetailsSidebarPanel (this.parentDiv),
new OV.SettingsSidebarPanel (this.parentDiv)
];
}
@ -24,7 +26,7 @@ OV.Sidebar = class
Init (callbacks)
{
for (let i = 0; i < this.panels.length; i++) {
this.panels[i].Init ('Details', callbacks);
this.panels[i].Init (callbacks);
}
}

View File

@ -9,16 +9,27 @@ OV.SidebarPanel = class
this.visible = false;
}
Init (title, callbacks)
Init (callbacks)
{
this.titleDiv = $('<div>').addClass ('ov_sidebar_title').appendTo (this.panelDiv);
this.contentDiv = $('<div>').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv);
let titleTextDiv = $('<div>').addClass ('ov_sidebar_title_text').html (title).appendTo (this.titleDiv);
let titleTextDiv = $('<div>').addClass ('ov_sidebar_title_text').html (this.GetTitle ()).appendTo (this.titleDiv);
let titleImg = $('<img>').addClass ('ov_sidebar_title_img').attr ('src', 'assets/images/sidebar/close.svg').appendTo (this.titleDiv);
titleImg.click (function () {
callbacks.onClose ();
});
}
this.InitContent ();
}
GetTitle ()
{
return '';
}
InitContent ()
{
}
Show (show)
{
@ -33,5 +44,17 @@ OV.SidebarPanel = class
IsVisible ()
{
return this.visible;
}
}
Resize ()
{
let titleHeight = this.titleDiv.outerHeight (true);
let height = this.parentDiv.height ();
this.contentDiv.outerHeight (height - titleHeight, true);
}
Clear ()
{
this.contentDiv.empty ();
}
};

View File

@ -337,29 +337,17 @@ OV.Website = class
AddButton (this.toolbar, 'share', 'Share model', true, function () {
obj.dialog = OV.ShowSharingDialog (importer, obj.viewerSettings, obj.importSettings, obj.viewer.GetCamera ());
});
if (OV.FeatureSet.SettingsAvailable) {
AddSeparator (this.toolbar, true);
AddButton (this.toolbar, 'settings', 'Settings', true, function () {
obj.dialog = OV.ShowSettingsDialog (obj.viewerSettings, obj.importSettings, function (dialogSettings) {
obj.viewerSettings.backgroundColor = dialogSettings.backgroundColor;
obj.viewer.SetBackgroundColor (obj.viewerSettings.backgroundColor);
obj.cookieHandler.SetColorVal ('ov_background_color', obj.viewerSettings.backgroundColor);
let reload = !OV.ColorIsEqual (obj.importSettings.defaultColor, dialogSettings.defaultColor);
obj.importSettings.defaultColor = dialogSettings.defaultColor;
obj.cookieHandler.SetColorVal ('ov_default_color', obj.importSettings.defaultColor);
if (reload) {
obj.ReloadFiles ();
}
});
});
}
AddRightButton (this.toolbar, 'details', 'Details panel', true, function () {
obj.ToggleSidebar (OV.SidebarPanelId.Details);
obj.Resize ();
});
if (OV.FeatureSet.SettingsAvailable) {
AddRightButton (this.toolbar, 'settings', 'Settings panel', true, function () {
obj.ToggleSidebar (OV.SidebarPanelId.Settings);
obj.Resize ();
});
}
this.parameters.fileInput.on ('change', function (ev) {
if (ev.target.files.length > 0) {
obj.LoadModelFromFileList (ev.target.files);