Lower the jquery dependency of website.

This commit is contained in:
kovacsv 2021-11-27 12:14:04 +01:00
parent 289e7cfff7
commit 02e1ed850f
10 changed files with 107 additions and 90 deletions

View File

@ -3,17 +3,27 @@ OV.GetIntegerFromStyle = function (parameter)
return Math.round (parseFloat (parameter)); return Math.round (parseFloat (parameter));
}; };
OV.GetElementExternalWidth = function (style)
{
let padding = OV.GetIntegerFromStyle (style.paddingLeft) + OV.GetIntegerFromStyle (style.paddingRight);
let border = OV.GetIntegerFromStyle (style.borderLeftWidth) + OV.GetIntegerFromStyle (style.borderRightWidth);
let margin = OV.GetIntegerFromStyle (style.marginLeft) + OV.GetIntegerFromStyle (style.marginRight);
return padding + border + margin;
};
OV.GetElementExternalHeight = function (style)
{
let padding = OV.GetIntegerFromStyle (style.paddingTop) + OV.GetIntegerFromStyle (style.paddingBottom);
let border = OV.GetIntegerFromStyle (style.borderTopWidth) + OV.GetIntegerFromStyle (style.borderBottomWidth);
let margin = OV.GetIntegerFromStyle (style.marginTop) + OV.GetIntegerFromStyle (style.marginBottom);
return padding + border + margin;
};
OV.GetInnerDimensions = function (element, outerWidth, outerHeight) OV.GetInnerDimensions = function (element, outerWidth, outerHeight)
{ {
let style = getComputedStyle (element); let style = getComputedStyle (element);
let width = outerWidth - let width = outerWidth - OV.GetElementExternalWidth (style);
OV.GetIntegerFromStyle (style.borderLeftWidth) - OV.GetIntegerFromStyle (style.borderRightWidth) - let height = outerHeight - OV.GetElementExternalHeight (style);
OV.GetIntegerFromStyle (style.marginLeft) - OV.GetIntegerFromStyle (style.marginRight) -
OV.GetIntegerFromStyle (style.paddingLeft) - OV.GetIntegerFromStyle (style.paddingRight);
let height = outerHeight -
OV.GetIntegerFromStyle (style.borderTopWidth) - OV.GetIntegerFromStyle (style.borderBottomWidth) -
OV.GetIntegerFromStyle (style.marginTop) - OV.GetIntegerFromStyle (style.marginBottom) -
OV.GetIntegerFromStyle (style.paddingTop) - OV.GetIntegerFromStyle (style.paddingBottom);
return { return {
width : width, width : width,
height : height height : height
@ -58,7 +68,7 @@ OV.InsertDomElementAfter = function (newElement, existingElement)
OV.ShowDomElement = function (element) OV.ShowDomElement = function (element)
{ {
element.style.display = ''; element.style.display = 'block';
}; };
OV.HideDomElement = function (element) OV.HideDomElement = function (element)
@ -71,12 +81,6 @@ OV.IsDomElementVisible = function (element)
return element.style.display !== 'none'; return element.style.display !== 'none';
}; };
OV.GetDomElementOuterHeight = function (element)
{
let style = getComputedStyle (element);
return element.offsetHeight + OV.GetIntegerFromStyle (style.marginTop) + OV.GetIntegerFromStyle (style.marginBottom);
};
OV.SetDomElementWidth = function (element, width) OV.SetDomElementWidth = function (element, width)
{ {
element.style.width = width.toString () + 'px'; element.style.width = width.toString () + 'px';
@ -87,6 +91,30 @@ OV.SetDomElementHeight = function (element, height)
element.style.height = height.toString () + 'px'; element.style.height = height.toString () + 'px';
}; };
OV.GetDomElementOuterWidth = function (element)
{
let style = getComputedStyle (element);
return element.offsetWidth + OV.GetIntegerFromStyle (style.marginLeft) + OV.GetIntegerFromStyle (style.marginRight);
};
OV.GetDomElementOuterHeight = function (element)
{
let style = getComputedStyle (element);
return element.offsetHeight + OV.GetIntegerFromStyle (style.marginTop) + OV.GetIntegerFromStyle (style.marginBottom);
};
OV.SetDomElementOuterWidth = function (element, width)
{
let style = getComputedStyle (element);
OV.SetDomElementWidth (element, width - OV.GetElementExternalWidth (style));
};
OV.SetDomElementOuterHeight = function (element, height)
{
let style = getComputedStyle (element);
OV.SetDomElementHeight (element, height - OV.GetElementExternalHeight (style));
};
OV.CreateDiv = function (className, innerHTML) OV.CreateDiv = function (className, innerHTML)
{ {
return OV.CreateDomElement ('div', className, innerHTML); return OV.CreateDomElement ('div', className, innerHTML);

View File

@ -132,19 +132,19 @@
<!-- analytics end --> <!-- analytics end -->
<script type="text/javascript"> <script type="text/javascript">
$(window).on ('load', function () { window.addEventListener ('load', function () {
let website = new OV.Website ({ let website = new OV.Website ({
headerDiv : $('#header'), headerDiv : document.getElementById ('header'),
toolbarDiv : $('#toolbar'), toolbarDiv : document.getElementById ('toolbar'),
mainDiv : $('#main'), mainDiv : document.getElementById ('main'),
introDiv : $('#intro'), introDiv : document.getElementById ('intro'),
fileNameDiv : $('#main_file_name'), fileNameDiv : document.getElementById ('main_file_name'),
navigatorDiv : $('#main_navigator'), navigatorDiv : document.getElementById ('main_navigator'),
navigatorSplitterDiv : $('#main_navigator_splitter'), navigatorSplitterDiv : document.getElementById ('main_navigator_splitter'),
sidebarDiv : $('#main_sidebar'), sidebarDiv : document.getElementById ('main_sidebar'),
sidebarSplitterDiv : $('#main_sidebar_splitter'), sidebarSplitterDiv : document.getElementById ('main_sidebar_splitter'),
viewerDiv : $('#main_viewer'), viewerDiv : document.getElementById ('main_viewer'),
fileInput : $('#open_file'), fileInput : document.getElementById ('open_file'),
eventHandler : window.gtagEventHandler eventHandler : window.gtagEventHandler
}); });
website.Load (); website.Load ();

View File

@ -73,8 +73,8 @@ div.intro
padding: 10px; padding: 10px;
text-align: center; text-align: center;
border: 2px dashed var(--ov_border_color); border: 2px dashed var(--ov_border_color);
display: none;
overflow: auto; overflow: auto;
display: none;
} }
div.intro svg.intro_logo div.intro svg.intro_logo
@ -100,6 +100,7 @@ div.intro div.intro_big_text
div.main div.main
{ {
overflow: auto; overflow: auto;
display: none;
} }
div.main_file_name div.main_file_name

View File

@ -38,7 +38,7 @@ OV.Navigator = class
this.mainDiv = mainDiv; this.mainDiv = mainDiv;
this.splitterDiv = splitterDiv; this.splitterDiv = splitterDiv;
this.panelSet = new OV.PanelSet (mainDiv.get (0)); this.panelSet = new OV.PanelSet (mainDiv);
this.callbacks = null; this.callbacks = null;
this.selection = null; this.selection = null;
this.tempSelectedMeshId = null; this.tempSelectedMeshId = null;
@ -65,9 +65,9 @@ OV.Navigator = class
this.panelSet.Init ({ this.panelSet.Init ({
onResize : () => { onResize : () => {
if (this.panelSet.IsPanelsVisible ()) { if (this.panelSet.IsPanelsVisible ()) {
this.splitterDiv.show (); OV.ShowDomElement (this.splitterDiv);
} else { } else {
this.splitterDiv.hide (); OV.HideDomElement (this.splitterDiv);
} }
this.callbacks.onResize (); this.callbacks.onResize ();
}, },
@ -126,18 +126,18 @@ OV.Navigator = class
GetWidth () GetWidth ()
{ {
let navigatorWidth = parseInt (this.mainDiv.outerWidth (true), 10); let navigatorWidth = OV.GetDomElementOuterWidth (this.mainDiv);
let splitterWidth = 0; let splitterWidth = 0;
if (this.panelSet.IsPanelsVisible ()) { if (this.panelSet.IsPanelsVisible ()) {
splitterWidth = parseInt (this.splitterDiv.outerWidth (true), 10); splitterWidth = this.splitterDiv.offsetWidth;
} }
return navigatorWidth + splitterWidth; return navigatorWidth + splitterWidth;
} }
Resize (height) Resize (height)
{ {
this.mainDiv.outerHeight (height, true); OV.SetDomElementOuterHeight (this.mainDiv, height);
this.splitterDiv.outerHeight (height, true); OV.SetDomElementHeight (this.splitterDiv, height);
this.panelSet.Resize (); this.panelSet.Resize ();
} }
@ -264,7 +264,6 @@ OV.Navigator = class
} }
} }
this.UpdatePanels (); this.UpdatePanels ();
this.Resize ();
} }
UpdatePanels () UpdatePanels ()

View File

@ -51,17 +51,10 @@ OV.ShowSharingDialog = function (importer, settings, camera)
let button = OV.AddDiv (container, 'ov_button outline ov_dialog_copyable_input_button', copyText); let button = OV.AddDiv (container, 'ov_button outline ov_dialog_copyable_input_button', copyText);
button.addEventListener ('click', () => { button.addEventListener ('click', () => {
OV.CopyToClipboard (getText ()); OV.CopyToClipboard (getText ());
let jqButton = $(button); button.innerHTML = copiedText;
jqButton.fadeOut (200, () => { setTimeout (() => {
button.innerHTML = copiedText; button.innerHTML = copyText;
jqButton.fadeIn (200); }, 2000);
setTimeout (() => {
jqButton.fadeOut (200, () => {
button.innerHTML = copyText;
jqButton.fadeIn (200);
});
}, 2000);
});
}); });
return input; return input;
} }

View File

@ -4,7 +4,7 @@ OV.Sidebar = class
{ {
this.mainDiv = mainDiv; this.mainDiv = mainDiv;
this.splitterDiv = splitterDiv; this.splitterDiv = splitterDiv;
this.panelSet = new OV.PanelSet (mainDiv.get (0)); this.panelSet = new OV.PanelSet (mainDiv);
this.detailsPanel = new OV.DetailsSidebarPanel (this.panelSet.GetContentDiv ()); this.detailsPanel = new OV.DetailsSidebarPanel (this.panelSet.GetContentDiv ());
this.settingsPanel = new OV.SettingsSidebarPanel (this.panelSet.GetContentDiv ()); this.settingsPanel = new OV.SettingsSidebarPanel (this.panelSet.GetContentDiv ());
@ -31,9 +31,9 @@ OV.Sidebar = class
this.panelSet.Init ({ this.panelSet.Init ({
onResize : () => { onResize : () => {
if (this.panelSet.IsPanelsVisible ()) { if (this.panelSet.IsPanelsVisible ()) {
this.splitterDiv.show (); OV.ShowDomElement (this.splitterDiv);
} else { } else {
this.splitterDiv.hide (); OV.HideDomElement (this.splitterDiv);
} }
this.callbacks.onResize (); this.callbacks.onResize ();
}, },
@ -71,25 +71,25 @@ OV.Sidebar = class
Resize (height) Resize (height)
{ {
this.mainDiv.outerHeight (height, true); OV.SetDomElementOuterHeight (this.mainDiv, height);
this.splitterDiv.outerHeight (height, true); OV.SetDomElementHeight (this.splitterDiv, height);
this.panelSet.Resize (); this.panelSet.Resize ();
} }
GetWidth () GetWidth ()
{ {
let sidebarWidth = parseInt (this.mainDiv.outerWidth (true), 10); let sidebarWidth = OV.GetDomElementOuterWidth (this.mainDiv);
let splitterWidth = 0; let splitterWidth = 0;
if (this.panelSet.IsPanelsVisible ()) { if (this.panelSet.IsPanelsVisible ()) {
splitterWidth = parseInt (this.splitterDiv.outerWidth (true), 10); splitterWidth = this.splitterDiv.offsetWidth;
} }
return sidebarWidth + splitterWidth; return sidebarWidth + splitterWidth;
} }
DecreaseWidth (diff) DecreaseWidth (diff)
{ {
let oldWidth = this.mainDiv.outerWidth (true); let oldWidth = this.mainDiv.offsetWidth;
this.mainDiv.outerWidth (oldWidth - diff, true); OV.SetDomElementWidth (this.mainDiv, oldWidth - diff);
} }
Clear () Clear ()

View File

@ -15,7 +15,7 @@ OV.CreateVerticalSplitter = function (splitterDiv, callbacks)
originalPosition = null; originalPosition = null;
}; };
splitterDiv.mousedown ((ev) => { splitterDiv.addEventListener ('mousedown', (ev) => {
originalPosition = ev.clientX; originalPosition = ev.clientX;
callbacks.onSplitStart (); callbacks.onSplitStart ();

View File

@ -86,9 +86,8 @@ OV.TreeViewSingleItem = class extends OV.TreeViewItem
OV.ScrollToView (this.mainElement); OV.ScrollToView (this.mainElement);
} else { } else {
while (parent !== null) { while (parent !== null) {
parent.ShowChildren (true, () => { parent.ShowChildren (true);
OV.ScrollToView (this.mainElement); OV.ScrollToView (this.mainElement);
});
parent = parent.parent; parent = parent.parent;
} }
} }
@ -163,7 +162,7 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
} }
} }
ShowChildren (show, onComplete) ShowChildren (show)
{ {
this.isChildrenVisible = show; this.isChildrenVisible = show;
if (this.childrenDiv === null) { if (this.childrenDiv === null) {
@ -171,10 +170,10 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
} }
if (show) { if (show) {
OV.SetSvgIconImageElement (this.openCloseButton, this.openButtonIcon); OV.SetSvgIconImageElement (this.openCloseButton, this.openButtonIcon);
$(this.childrenDiv).slideDown (400, onComplete); OV.ShowDomElement (this.childrenDiv);
} else { } else {
OV.SetSvgIconImageElement (this.openCloseButton, this.closeButtonIcon); OV.SetSvgIconImageElement (this.openCloseButton, this.closeButtonIcon);
$(this.childrenDiv).slideUp (400, onComplete); OV.HideDomElement (this.childrenDiv);
} }
} }
@ -184,10 +183,10 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
this.childrenDiv = OV.CreateDiv ('ov_tree_view_children'); this.childrenDiv = OV.CreateDiv ('ov_tree_view_children');
OV.InsertDomElementAfter (this.childrenDiv, this.mainElement); OV.InsertDomElementAfter (this.childrenDiv, this.mainElement);
this.Show (this.isVisible); this.Show (this.isVisible);
this.ShowChildren (this.isChildrenVisible, null); this.ShowChildren (this.isChildrenVisible);
this.OnClick ((ev) => { this.OnClick ((ev) => {
this.isChildrenVisible = !this.isChildrenVisible; this.isChildrenVisible = !this.isChildrenVisible;
this.ShowChildren (this.isChildrenVisible, null); this.ShowChildren (this.isChildrenVisible);
}); });
} }
return this.childrenDiv; return this.childrenDiv;

View File

@ -66,7 +66,6 @@ OV.InstallTooltip = function (element, text)
return; return;
} }
let bodyObj = $(document.body);
let tooltip = null; let tooltip = null;
element.addEventListener ('mouseover', () => { element.addEventListener ('mouseover', () => {
tooltip = OV.AddDiv (document.body, 'ov_tooltip', text); tooltip = OV.AddDiv (document.body, 'ov_tooltip', text);
@ -162,7 +161,7 @@ OV.InstallVerticalSplitter = function (splitterDiv, resizedDiv, flipped, onResiz
let originalWidth = null; let originalWidth = null;
OV.CreateVerticalSplitter (splitterDiv, { OV.CreateVerticalSplitter (splitterDiv, {
onSplitStart : () => { onSplitStart : () => {
originalWidth = resizedDiv.outerWidth (true); originalWidth = OV.GetDomElementOuterWidth (resizedDiv);
}, },
onSplit : (xDiff) => { onSplit : (xDiff) => {
const minWidth = 280; const minWidth = 280;
@ -178,7 +177,7 @@ OV.InstallVerticalSplitter = function (splitterDiv, resizedDiv, flipped, onResiz
} else if (newWidth > maxWidth) { } else if (newWidth > maxWidth) {
newWidth = maxWidth; newWidth = maxWidth;
} }
resizedDiv.outerWidth (newWidth, true); OV.SetDomElementOuterWidth (resizedDiv, newWidth);
onResize (); onResize ();
} }
}); });

View File

@ -13,7 +13,7 @@ OV.Website = class
this.viewer = new OV.Viewer (); this.viewer = new OV.Viewer ();
this.hashHandler = new OV.HashHandler (); this.hashHandler = new OV.HashHandler ();
this.cookieHandler = new OV.CookieHandler (); this.cookieHandler = new OV.CookieHandler ();
this.toolbar = new OV.Toolbar (this.parameters.toolbarDiv.get (0)); this.toolbar = new OV.Toolbar (this.parameters.toolbarDiv);
this.navigator = new OV.Navigator (this.parameters.navigatorDiv, this.parameters.navigatorSplitterDiv); this.navigator = new OV.Navigator (this.parameters.navigatorDiv, this.parameters.navigatorSplitterDiv);
this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv, this.parameters.sidebarSplitterDiv); this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv, this.parameters.sidebarSplitterDiv);
this.eventHandler = new OV.EventHandler (this.parameters.eventHandler); this.eventHandler = new OV.EventHandler (this.parameters.eventHandler);
@ -47,16 +47,16 @@ OV.Website = class
this.hashHandler.SetEventListener (this.OnHashChange.bind (this)); this.hashHandler.SetEventListener (this.OnHashChange.bind (this));
this.OnHashChange (); this.OnHashChange ();
$(window).on ('resize', () => { window.addEventListener ('resize', () => {
this.Resize (); this.Resize ();
}); });
} }
Resize () Resize ()
{ {
let windowWidth = $(window).outerWidth (); let windowWidth = window.innerWidth;
let windowHeight = $(window).outerHeight (); let windowHeight = window.innerHeight;
let headerHeight = parseInt (this.parameters.headerDiv.outerHeight (true), 10); let headerHeight = this.parameters.headerDiv.offsetHeight;
let navigatorWidth = 0; let navigatorWidth = 0;
let sidebarWidth = 0; let sidebarWidth = 0;
@ -73,9 +73,7 @@ OV.Website = class
} }
let contentHeight = windowHeight - headerHeight; let contentHeight = windowHeight - headerHeight;
this.parameters.sidebarDiv.outerHeight (contentHeight, true); OV.SetDomElementOuterHeight (this.parameters.introDiv, contentHeight);
this.parameters.introDiv.outerHeight (contentHeight, true);
this.navigator.Resize (contentHeight); this.navigator.Resize (contentHeight);
this.sidebar.Resize (contentHeight); this.sidebar.Resize (contentHeight);
this.viewer.Resize (contentWidth, contentHeight); this.viewer.Resize (contentWidth, contentHeight);
@ -95,16 +93,16 @@ OV.Website = class
} }
if (uiState === OV.WebsiteUIState.Intro) { if (uiState === OV.WebsiteUIState.Intro) {
this.parameters.introDiv.show (); OV.ShowDomElement (this.parameters.introDiv);
this.parameters.mainDiv.hide (); OV.HideDomElement (this.parameters.mainDiv);
ShowOnlyOnModelElements (false); ShowOnlyOnModelElements (false);
} else if (uiState === OV.WebsiteUIState.Model) { } else if (uiState === OV.WebsiteUIState.Model) {
this.parameters.introDiv.hide (); OV.HideDomElement (this.parameters.introDiv);
this.parameters.mainDiv.show (); OV.ShowDomElement (this.parameters.mainDiv);
ShowOnlyOnModelElements (true); ShowOnlyOnModelElements (true);
} else if (uiState === OV.WebsiteUIState.Loading) { } else if (uiState === OV.WebsiteUIState.Loading) {
this.parameters.introDiv.hide (); OV.HideDomElement (this.parameters.introDiv);
this.parameters.mainDiv.hide (); OV.HideDomElement (this.parameters.mainDiv);
ShowOnlyOnModelElements (false); ShowOnlyOnModelElements (false);
} }
@ -115,7 +113,7 @@ OV.Website = class
{ {
this.HidePopups (); this.HidePopups ();
this.model = null; this.model = null;
this.parameters.fileNameDiv.empty (); this.parameters.fileNameDiv.innerHTML = '';
this.viewer.Clear (); this.viewer.Clear ();
this.navigator.Clear (); this.navigator.Clear ();
this.sidebar.Clear (); this.sidebar.Clear ();
@ -124,7 +122,7 @@ OV.Website = class
OnModelLoaded (importResult, threeObject) OnModelLoaded (importResult, threeObject)
{ {
this.model = importResult.model; this.model = importResult.model;
this.parameters.fileNameDiv.html (importResult.mainFile); this.parameters.fileNameDiv.innerHTML = importResult.mainFile;
this.viewer.SetMainObject (threeObject); this.viewer.SetMainObject (threeObject);
this.viewer.SetUpVector (importResult.upVector, false); this.viewer.SetUpVector (importResult.upVector, false);
this.navigator.FillTree (importResult); this.navigator.FillTree (importResult);
@ -237,7 +235,7 @@ OV.Website = class
OpenFileBrowserDialog () OpenFileBrowserDialog ()
{ {
this.parameters.fileInput.trigger ('click'); this.parameters.fileInput.click ();
} }
FitModelToWindow (onLoad) FitModelToWindow (onLoad)
@ -340,7 +338,7 @@ OV.Website = class
InitViewer () InitViewer ()
{ {
let canvas = OV.AddDomElement (this.parameters.viewerDiv.get (0), 'canvas'); let canvas = OV.AddDomElement (this.parameters.viewerDiv, 'canvas');
this.viewer.Init (canvas); this.viewer.Init (canvas);
this.viewer.SetBackgroundColor (this.settings.backgroundColor); this.viewer.SetBackgroundColor (this.settings.backgroundColor);
this.viewer.SetEnvironmentMap ([ this.viewer.SetEnvironmentMap ([
@ -449,7 +447,7 @@ OV.Website = class
this.dialog = OV.ShowSharingDialog (importer, this.settings, this.viewer.GetCamera ()); this.dialog = OV.ShowSharingDialog (importer, this.settings, this.viewer.GetCamera ());
}); });
this.parameters.fileInput.on ('change', (ev) => { this.parameters.fileInput.addEventListener ('change', (ev) => {
if (ev.target.files.length > 0) { if (ev.target.files.length > 0) {
this.eventHandler.HandleEvent ('model_load_started', { source : 'open_file' }); this.eventHandler.HandleEvent ('model_load_started', { source : 'open_file' });
this.LoadModelFromFileList (ev.target.files); this.LoadModelFromFileList (ev.target.files);
@ -484,15 +482,15 @@ OV.Website = class
OV.InitModelLoader (this.modelLoader, { OV.InitModelLoader (this.modelLoader, {
onStart : () => onStart : () =>
{ {
this.ClearModel ();
this.SetUIState (OV.WebsiteUIState.Loading); this.SetUIState (OV.WebsiteUIState.Loading);
this.ClearModel ();
}, },
onFinish : (importResult, threeObject) => onFinish : (importResult, threeObject) =>
{ {
this.SetUIState (OV.WebsiteUIState.Model);
this.OnModelLoaded (importResult, threeObject); this.OnModelLoaded (importResult, threeObject);
let importedExtension = OV.GetFileExtension (importResult.mainFile); let importedExtension = OV.GetFileExtension (importResult.mainFile);
this.eventHandler.HandleEvent ('model_loaded', { extension : importedExtension }); this.eventHandler.HandleEvent ('model_loaded', { extension : importedExtension });
this.SetUIState (OV.WebsiteUIState.Model);
}, },
onRender : () => onRender : () =>
{ {
@ -500,6 +498,7 @@ OV.Website = class
}, },
onError : (importError) => onError : (importError) =>
{ {
this.SetUIState (OV.WebsiteUIState.Intro);
let reason = 'unknown'; let reason = 'unknown';
if (importError.code === OV.ImportErrorCode.NoImportableFile) { if (importError.code === OV.ImportErrorCode.NoImportableFile) {
reason = 'no_importable_file'; reason = 'no_importable_file';
@ -516,7 +515,6 @@ OV.Website = class
reason : reason, reason : reason,
extensions : extensions extensions : extensions
}); });
this.SetUIState (OV.WebsiteUIState.Intro);
} }
}); });
} }