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

Lower the jquery dependency of website.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
source/viewer/domutils.js
View File

@ -3,17 +3,27 @@ OV.GetIntegerFromStyle = function (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)
{
let style = getComputedStyle (element);
let width = outerWidth -
OV.GetIntegerFromStyle (style.borderLeftWidth) - OV.GetIntegerFromStyle (style.borderRightWidth) -
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);
let width = outerWidth - OV.GetElementExternalWidth (style);
let height = outerHeight - OV.GetElementExternalHeight (style);
return {
width : width,
height : height
@ -58,7 +68,7 @@ OV.InsertDomElementAfter = function (newElement, existingElement)
OV.ShowDomElement = function (element)
{
element.style.display = '';
element.style.display = 'block';
};
OV.HideDomElement = function (element)
@ -71,12 +81,6 @@ OV.IsDomElementVisible = function (element)
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)
{
element.style.width = width.toString () + 'px';
@ -87,6 +91,30 @@ OV.SetDomElementHeight = function (element, height)
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)
{
return OV.CreateDomElement ('div', className, innerHTML);

24
website/index.html
View File

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

3
website/o3dv/css/website.css
View File

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

15
website/o3dv/js/navigator.js
View File

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

15
website/o3dv/js/sharingdialog.js
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);
button.addEventListener ('click', () => {
OV.CopyToClipboard (getText ());
let jqButton = $(button);
jqButton.fadeOut (200, () => {
button.innerHTML = copiedText;
jqButton.fadeIn (200);
setTimeout (() => {
jqButton.fadeOut (200, () => {
button.innerHTML = copyText;
jqButton.fadeIn (200);
});
}, 2000);
});
button.innerHTML = copiedText;
setTimeout (() => {
button.innerHTML = copyText;
}, 2000);
});
return input;
}

18
website/o3dv/js/sidebar.js
View File

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

2
website/o3dv/js/splitter.js
View File

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

15
website/o3dv/js/treeview.js
View File

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

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

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

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