From 698e38358370e55e9f748655f13a64a53e122f7d Mon Sep 17 00:00:00 2001 From: kovacsv Date: Sat, 27 Nov 2021 08:12:37 +0100 Subject: [PATCH] Lower the jquery dependency of toolbar. --- website/o3dv/css/website.css | 1 + website/o3dv/js/toolbar.js | 28 +++++++-------- website/o3dv/js/utils.js | 70 +++++++++++++++++++++++------------- website/o3dv/js/website.js | 49 +++++++++++++------------ 4 files changed, 88 insertions(+), 60 deletions(-) diff --git a/website/o3dv/css/website.css b/website/o3dv/css/website.css index bfd0bb5..e7d5ba8 100644 --- a/website/o3dv/css/website.css +++ b/website/o3dv/css/website.css @@ -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; diff --git a/website/o3dv/js/toolbar.js b/website/o3dv/js/toolbar.js index e6eaf7d..968caf1 100644 --- a/website/o3dv/js/toolbar.js +++ b/website/o3dv/js/toolbar.js @@ -6,48 +6,48 @@ OV.ToolbarButton = class this.imageTitle = imageTitle; this.selected = false; - this.buttonDiv = $('
').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 = $('
').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 $('
').addClass ('ov_toolbar_separator').appendTo (this.mainDiv); + return OV.AddDiv (this.mainDiv, 'ov_toolbar_separator'); } }; diff --git a/website/o3dv/js/utils.js b/website/o3dv/js/utils.js index 8ac41f8..6fbfa2d 100644 --- a/website/o3dv/js/utils.js +++ b/website/o3dv/js/utils.js @@ -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 = $('
').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 = $(''); - 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; }; diff --git a/website/o3dv/js/website.js b/website/o3dv/js/website.js index e9bc945..944e28e 100644 --- a/website/o3dv/js/website.js +++ b/website/o3dv/js/website.js @@ -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 ()); });