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

Lower the jquery dependency of toolbar.

Browse Source
This commit is contained in:
kovacsv 2021-11-27 08:12:37 +01:00
parent 494b05bb8e
commit 698e383583
4 changed files with 88 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
website/o3dv/css/website.css
View File

@ -55,6 +55,7 @@ div.title div.title_right
div.title_right a
{
color: var(--ov_foreground_color);
padding: 11px 5px;
display: block;
float: left;

28
website/o3dv/js/toolbar.js
View File

@ -6,48 +6,48 @@ OV.ToolbarButton = class
this.imageTitle = imageTitle;
this.selected = false;
this.buttonDiv = $('<div>').addClass ('ov_toolbar_button');
this.buttonImg = OV.AddSvgIcon (this.buttonDiv, this.image);
this.buttonDiv = OV.CreateDiv ('ov_toolbar_button');
this.buttonImg = OV.AddSvgIconElement (this.buttonDiv, this.image);
if (onClick !== null) {
this.buttonDiv.click (onClick);
this.buttonDiv.addEventListener ('click', onClick);
}
this.buttonDiv.attr ('alt', this.imageTitle);
this.buttonDiv.setAttribute ('alt', this.imageTitle);
OV.InstallTooltip (this.buttonDiv, this.imageTitle);
}
AddDomElements (parentDiv)
{
this.buttonDiv.appendTo (parentDiv);
parentDiv.appendChild (this.buttonDiv);
}
AddClass (className)
{
this.buttonDiv.addClass (className);
this.buttonDiv.classList.add (className);
}
RemoveClass (className)
{
this.buttonDiv.removeClass (className);
this.buttonDiv.classList.remove (className);
}
AddImageClass (className)
{
this.buttonImg.addClass (className);
this.buttonImg.classList.add (className);
}
RemoveImageClass (className)
{
this.buttonImg.removeClass (className);
this.buttonImg.classList.remove (className);
}
SetSelected (selected)
{
this.selected = selected;
if (!this.selected) {
this.buttonDiv.removeClass ('selected');
if (this.selected) {
this.buttonDiv.classList.add ('selected');
} else {
this.buttonDiv.addClass ('selected');
this.buttonDiv.classList.remove ('selected');
}
}
};
@ -56,7 +56,7 @@ OV.Toolbar = class
{
constructor (parentDiv)
{
this.mainDiv = $('<div>').addClass ('ov_toolbar').appendTo (parentDiv);
this.mainDiv = OV.AddDiv (parentDiv, 'ov_toolbar');
}
AddImageButton (image, imageTitle, onClick)
@ -92,6 +92,6 @@ OV.Toolbar = class
AddSeparator ()
{
return $('<div>').addClass ('ov_toolbar_separator').appendTo (this.mainDiv);
return OV.AddDiv (this.mainDiv, 'ov_toolbar_separator');
}
};

70
website/o3dv/js/utils.js
View File

@ -36,20 +36,19 @@ OV.IsSmallHeight = function ()
return window.matchMedia ('(max-height: 800px)').matches;
};
OV.InstallTooltip = function (item, text)
OV.InstallTooltip = function (element, text)
{
function CalculateOffset (item, tooltip)
function CalculateOffset (element, tooltip)
{
let windowObj = $(window);
let windowWidth = windowObj.outerWidth (true);
let windowWidth = window.innerWidth;
let itemOffset = item.offset ();
let itemWidth = item.outerWidth (true);
let itemHeight = item.outerHeight (true);
let tooltipWidth = tooltip.outerWidth (true);
let elementOffset = element.getBoundingClientRect ();
let elementWidth = element.offsetWidth;
let elementHeight = element.offsetHeight;
let tooltipWidth = tooltip.offsetWidth;
let tooltipMargin = 10;
let left = itemOffset.left + itemWidth / 2 - tooltipWidth / 2;
let left = elementOffset.left + elementWidth / 2 - tooltipWidth / 2;
if (left + tooltipWidth > windowWidth - tooltipMargin) {
left = windowWidth - tooltipWidth - tooltipMargin;
}
@ -59,7 +58,7 @@ OV.InstallTooltip = function (item, text)
left = Math.max (left, 0);
return {
left : left,
top : itemOffset.top + itemHeight + tooltipMargin
top : elementOffset.top + elementHeight + tooltipMargin
};
}
@ -69,15 +68,15 @@ OV.InstallTooltip = function (item, text)
let bodyObj = $(document.body);
let tooltip = null;
item.hover (
() => {
tooltip = $('<div>').html (text).addClass ('ov_tooltip').appendTo (bodyObj);
tooltip.offset (CalculateOffset (item, tooltip));
},
() => {
tooltip.remove ();
}
);
element.addEventListener ('mouseover', () => {
tooltip = OV.AddDiv (document.body, 'ov_tooltip', text);
let offset = CalculateOffset (element, tooltip);
tooltip.style.left = offset.left + 'px';
tooltip.style.top = offset.top + 'px';
});
element.addEventListener ('mouseout', () => {
tooltip.remove ();
});
};
OV.CopyToClipboard = function (text)
@ -132,14 +131,37 @@ OV.SetSvgIconImage = function (icon, iconName)
iconChild.removeClass ().addClass ('icon').addClass ('icon-' + iconName);
};
OV.CreateSvgIconElement = function (iconName, className)
{
let iconDiv = OV.CreateDiv ('ov_svg_icon');
if (className) {
iconDiv.className = className;
}
OV.AddDomElement (iconDiv, 'i', 'icon icon-' + iconName);
return iconDiv;
};
OV.AddSvgIconElement = function (parentElement, iconName, className)
{
let iconDiv = OV.CreateSvgIconElement (iconName, className);
parentElement.appendChild (iconDiv);
return iconDiv;
};
OV.SetSvgIconImageElement = function (iconElement, iconName)
{
let iconDiv = iconElement.firstChild;
iconDiv.className = 'icon icon-' + iconName;
};
OV.CreateHeaderButton = function (iconName, title, link)
{
let buttonLink = $('<a>');
buttonLink.attr ('href', link);
buttonLink.attr ('target', '_blank');
buttonLink.attr ('rel', 'noopener noreferrer');
let buttonLink = OV.CreateDomElement ('a');
buttonLink.setAttribute ('href', link);
buttonLink.setAttribute ('target', '_blank');
buttonLink.setAttribute ('rel', 'noopener noreferrer');
OV.InstallTooltip (buttonLink, title);
OV.AddSvgIcon (buttonLink, iconName, 'header_button');
OV.AddSvgIconElement (buttonLink, iconName, 'header_button');
return buttonLink;
};

49
website/o3dv/js/website.js
View File

@ -13,7 +13,7 @@ OV.Website = class
this.viewer = new OV.Viewer ();
this.hashHandler = new OV.HashHandler ();
this.cookieHandler = new OV.CookieHandler ();
this.toolbar = new OV.Toolbar (this.parameters.toolbarDiv);
this.toolbar = new OV.Toolbar (this.parameters.toolbarDiv.get (0));
this.navigator = new OV.Navigator (this.parameters.navigatorDiv, this.parameters.navigatorSplitterDiv);
this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv, this.parameters.sidebarSplitterDiv);
this.eventHandler = new OV.EventHandler (this.parameters.eventHandler);
@ -355,19 +355,21 @@ OV.Website = class
InitToolbar ()
{
function AddButton (toolbar, eventHandler, imageName, imageTitle, extraClass, onClick)
function AddButton (toolbar, eventHandler, imageName, imageTitle, classNames, onClick)
{
let button = toolbar.AddImageButton (imageName, imageTitle, () => {
eventHandler.HandleEvent ('toolbar_clicked', { item : imageName });
onClick ();
});
if (extraClass !== null) {
button.AddClass (extraClass);
if (classNames !== null) {
for (let className of classNames) {
button.AddClass (className);
}
}
return button;
}
function AddRadioButton (toolbar, eventHandler, imageNames, imageTitles, selectedIndex, extraClass, onClick)
function AddRadioButton (toolbar, eventHandler, imageNames, imageTitles, selectedIndex, classNames, onClick)
{
let imageData = [];
for (let i = 0; i < imageNames.length; i++) {
@ -382,19 +384,22 @@ OV.Website = class
eventHandler.HandleEvent ('toolbar_clicked', { item : imageNames[buttonIndex] });
onClick (buttonIndex);
});
if (extraClass !== null) {
for (let i = 0; i < buttons.length; i++) {
let button = buttons[i];
button.AddClass (extraClass);
if (classNames !== null) {
for (let className of classNames) {
for (let button of buttons) {
button.AddClass (className);
}
}
}
}
function AddSeparator (toolbar, extraClass)
function AddSeparator (toolbar, classNames)
{
let separator = toolbar.AddSeparator ();
if (extraClass) {
separator.addClass (extraClass);
if (classNames !== null) {
for (let className of classNames) {
separator.classList.add (className);
}
}
}
@ -410,29 +415,29 @@ OV.Website = class
}
});
});
AddSeparator (this.toolbar, 'only_on_model');
AddButton (this.toolbar, this.eventHandler, 'fit', 'Fit model to window', 'only_on_model', () => {
AddSeparator (this.toolbar, ['only_on_model']);
AddButton (this.toolbar, this.eventHandler, 'fit', 'Fit model to window', ['only_on_model'], () => {
this.FitModelToWindow (false);
});
AddButton (this.toolbar, this.eventHandler, 'up_y', 'Set Y axis as up vector', 'only_on_model', () => {
AddButton (this.toolbar, this.eventHandler, 'up_y', 'Set Y axis as up vector', ['only_on_model'], () => {
this.viewer.SetUpVector (OV.Direction.Y, true);
});
AddButton (this.toolbar, this.eventHandler, 'up_z', 'Set Z axis as up vector', 'only_on_model', () => {
AddButton (this.toolbar, this.eventHandler, 'up_z', 'Set Z axis as up vector', ['only_on_model'], () => {
this.viewer.SetUpVector (OV.Direction.Z, true);
});
AddButton (this.toolbar, this.eventHandler, 'flip', 'Flip up vector', 'only_on_model', () => {
AddButton (this.toolbar, this.eventHandler, 'flip', 'Flip up vector', ['only_on_model'], () => {
this.viewer.FlipUpVector ();
});
AddSeparator (this.toolbar, 'only_on_model');
AddRadioButton (this.toolbar, this.eventHandler, ['fix_up_on', 'fix_up_off'], ['Fixed up vector', 'Free orbit'], 0, 'only_on_model', (buttonIndex) => {
AddSeparator (this.toolbar, ['only_on_model']);
AddRadioButton (this.toolbar, this.eventHandler, ['fix_up_on', 'fix_up_off'], ['Fixed up vector', 'Free orbit'], 0, ['only_on_model'], (buttonIndex) => {
if (buttonIndex === 0) {
this.viewer.SetFixUpVector (true);
} else if (buttonIndex === 1) {
this.viewer.SetFixUpVector (false);
}
});
AddSeparator (this.toolbar, 'only_full_width only_on_model');
AddButton (this.toolbar, this.eventHandler, 'export', 'Export model', 'only_full_width only_on_model', () => {
AddSeparator (this.toolbar, ['only_full_width', 'only_on_model']);
AddButton (this.toolbar, this.eventHandler, 'export', 'Export model', ['only_full_width', 'only_on_model'], () => {
let exportDialog = new OV.ExportDialog ({
onDialog : (dialog) => {
this.dialog = dialog;
@ -440,7 +445,7 @@ OV.Website = class
});
exportDialog.Show (this.model, this.viewer);
});
AddButton (this.toolbar, this.eventHandler, 'share', 'Share model', 'only_full_width only_on_model', () => {
AddButton (this.toolbar, this.eventHandler, 'share', 'Share model', ['only_full_width', 'only_on_model'], () => {
this.dialog = OV.ShowSharingDialog (importer, this.settings, this.viewer.GetCamera ());
});