Lower the jquery dependency of navigator.

source/viewer/domutils.js

@@ -1,19 +1,19 @@
+OV.GetIntegerFromStyle = function (parameter)
+{
+    return Math.round (parseFloat (parameter));
+};
+
 OV.GetInnerDimensions = function (element, outerWidth, outerHeight)
 {
-    function GetInt (parameter)
-    {
-        return Math.round (parseFloat (parameter));
-    }
-
     let style = getComputedStyle (element);
     let width = outerWidth -
-        GetInt (style.borderLeftWidth) - GetInt (style.borderRightWidth) -
+        OV.GetIntegerFromStyle (style.borderLeftWidth) - OV.GetIntegerFromStyle (style.borderRightWidth) -
-        GetInt (style.marginLeft) - GetInt (style.marginRight) -
+        OV.GetIntegerFromStyle (style.marginLeft) - OV.GetIntegerFromStyle (style.marginRight) -
-        GetInt (style.paddingLeft) - GetInt (style.paddingRight);
+        OV.GetIntegerFromStyle (style.paddingLeft) - OV.GetIntegerFromStyle (style.paddingRight);
     let height = outerHeight -
-        GetInt (style.borderTopWidth) - GetInt (style.borderBottomWidth) -
+        OV.GetIntegerFromStyle (style.borderTopWidth) - OV.GetIntegerFromStyle (style.borderBottomWidth) -
-        GetInt (style.marginTop) - GetInt (style.marginBottom) -
+        OV.GetIntegerFromStyle (style.marginTop) - OV.GetIntegerFromStyle (style.marginBottom) -
-        GetInt (style.paddingTop) - GetInt (style.paddingBottom);
+        OV.GetIntegerFromStyle (style.paddingTop) - OV.GetIntegerFromStyle (style.paddingBottom);
     return {
         width : width,
         height : height
@@ -46,16 +46,6 @@ OV.ClearDomElement = function (element)
     }
 };
 
-OV.CreateDiv = function (className, innerHTML)
-{
-    return OV.CreateDomElement ('div', className, innerHTML);
-};
-
-OV.AddDiv = function (parentElement, className, innerHTML)
-{
-    return OV.AddDomElement (parentElement, 'div', className, innerHTML);
-};
-
 OV.InsertDomElementBefore = function (newElement, existingElement)
 {
     existingElement.parentNode.insertBefore (newElement, existingElement);
@@ -75,3 +65,34 @@ OV.HideDomElement = function (element)
 {
     element.style.display = 'none';
 };
+
+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';
+};
+
+OV.SetDomElementHeight = function (element, height)
+{
+    element.style.height = height.toString () + 'px';
+};
+
+OV.CreateDiv = function (className, innerHTML)
+{
+    return OV.CreateDomElement ('div', className, innerHTML);
+};
+
+OV.AddDiv = function (parentElement, className, innerHTML)
+{
+    return OV.AddDomElement (parentElement, 'div', className, innerHTML);
+};

website/o3dv/css/navigator.css

@@ -35,12 +35,17 @@ div.ov_navigator_tree_title
 	text-overflow: ellipsis;
 	overflow: hidden;
 	padding-bottom: 10px;
+	margin-bottom: 10px;
 	border-bottom: 1px solid var(--ov_border_color);
 }
 
+div.ov_navigator_tree_title.nomargin
+{
+	margin-bottom: 0px;
+}
+
 div.ov_navigator_tree_panel
 {
-	margin-top: 10px;
 	overflow: auto;
 }
 

website/o3dv/js/exportdialog.js

@@ -218,7 +218,7 @@ OV.ExportDialog = class
             let fileLink = OV.AddDomElement (fileList, 'a', 'ov_dialog_file_link');
             fileLink.setAttribute ('href', url);
             fileLink.setAttribute ('download', file.GetName ());
-            OV.AddSvgIcon (fileLink, 'file_download', 'ov_file_link_img');
+            OV.AddSvgIconElement (fileLink, 'file_download', 'ov_file_link_img');
             OV.AddDiv (fileLink, 'ov_dialog_file_link_text', file.GetName ());
         }
 

website/o3dv/js/modal.js

@@ -226,12 +226,12 @@ OV.ListPopup = class extends OV.PopupDialog
     {
         let listItemDiv = OV.AddDiv (this.listDiv, 'ov_popup_list_item');
         if (item.icon) {
-            OV.AddSvgIcon (listItemDiv, item.icon, 'left_inline');
+            OV.AddSvgIconElement (listItemDiv, item.icon, 'left_inline');
         }
         if (item.color) {
             let iconDiv = OV.AddDiv (listItemDiv, 'ov_popup_list_item_icon');
             let colorCircle = OV.CreateInlineColorCircle (item.color);
-            colorCircle.appendTo (iconDiv);
+            iconDiv.appendChild (colorCircle);
         }
         OV.AddDiv (listItemDiv, 'ov_popup_list_item_name', item.name);
         listItemDiv.addEventListener ('click', callbacks.onClick);

website/o3dv/js/navigator.js

@@ -38,7 +38,7 @@ OV.Navigator = class
         this.mainDiv = mainDiv;
         this.splitterDiv = splitterDiv;
 
-        this.panelSet = new OV.PanelSet (mainDiv);
+        this.panelSet = new OV.PanelSet (mainDiv.get (0));
         this.callbacks = null;
         this.selection = null;
         this.tempSelectedMeshId = null;

website/o3dv/js/navigatorpanels.js

@@ -6,10 +6,10 @@ OV.NavigatorPopupButton = class
         this.callbacks = null;
         this.popup = null;
 
-        this.button = $('<div>').addClass ('ov_navigator_info_button').appendTo (this.parentDiv);
+        this.button = OV.AddDiv (this.parentDiv, 'ov_navigator_info_button');
-        this.buttonText = $('<div>').addClass ('ov_navigator_info_button_text').appendTo (this.button);
+        this.buttonText = OV.AddDiv (this.button, 'ov_navigator_info_button_text');
-        OV.AddSvgIcon (this.button, 'arrow_right', 'ov_navigator_info_button_icon');
+        OV.AddSvgIconElement (this.button, 'arrow_right', 'ov_navigator_info_button_icon');
-        this.button.click (() => {
+        this.button.addEventListener ('click', () => {
             this.OnButtonClick ();
         });
     }
@@ -49,7 +49,7 @@ OV.NavigatorMeshesPopupButton = class extends OV.NavigatorPopupButton
         }
 
         let meshesText = 'Meshes (' + this.meshInfoArray.length + ')';
-        this.buttonText.html (meshesText);
+        this.buttonText.innerHTML = meshesText;
     }
 
     OnButtonClick ()
@@ -72,7 +72,7 @@ OV.NavigatorMeshesPopupButton = class extends OV.NavigatorPopupButton
 
         this.popup = OV.ShowListPopup (meshItems, {
             calculatePosition : (contentDiv) => {
-                return OV.CalculatePopupPositionToElementBottomRight (this.button.get (0), contentDiv);
+                return OV.CalculatePopupPositionToElementBottomRight (this.button, contentDiv);
             },
             onHoverStart : (index) => {
                 const meshData = this.meshInfoArray[index];
@@ -105,7 +105,7 @@ OV.NavigatorMaterialsPopupButton = class extends OV.NavigatorPopupButton
         }
 
         let materialsText = 'Materials (' + this.materialInfoArray.length + ')';
-        this.buttonText.html (materialsText);
+        this.buttonText.innerHTML = materialsText;
     }
 
     OnButtonClick ()
@@ -129,7 +129,7 @@ OV.NavigatorMaterialsPopupButton = class extends OV.NavigatorPopupButton
 
         this.popup = OV.ShowListPopup (materialItems, {
             calculatePosition : (contentDiv) => {
-                return OV.CalculatePopupPositionToElementBottomRight (this.button.get (0), contentDiv);
+                return OV.CalculatePopupPositionToElementBottomRight (this.button, contentDiv);
             },
             onClick : (index) => {
                 let usedMaterial = this.materialInfoArray[index];
@@ -146,12 +146,13 @@ OV.NavigatorPanel = class extends OV.Panel
         super (parentDiv);
         this.callbacks = null;
 
-        this.titleDiv = $('<div>').addClass ('ov_navigator_tree_title').appendTo (this.panelDiv);
+        this.titleDiv = OV.AddDiv (this.panelDiv, 'ov_navigator_tree_title');
-        this.treeDiv = $('<div>').addClass ('ov_navigator_tree_panel').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv);
+        this.treeDiv = OV.AddDiv (this.panelDiv, 'ov_navigator_tree_panel ov_thin_scrollbar');
-        this.treeView = new OV.TreeView (this.treeDiv.get (0));
+        this.treeView = new OV.TreeView (this.treeDiv);
 
         let panelName = this.GetName ();
-        this.titleDiv.html (panelName).attr ('title', panelName);
+        this.titleDiv.innerHTML = panelName;
+        this.titleDiv.setAttribute ('title', panelName);
     }
 
     Clear ()
@@ -194,9 +195,9 @@ OV.NavigatorFilesPanel = class extends OV.NavigatorPanel
 
     Resize ()
     {
-        let titleHeight = this.titleDiv.outerHeight (true);
+        let titleHeight = OV.GetDomElementOuterHeight (this.titleDiv);
-        let height = this.parentDiv.height ();
+        let height = this.parentDiv.offsetHeight;
-        this.treeDiv.outerHeight (height - titleHeight, true);
+        OV.SetDomElementHeight (this.treeDiv, height - titleHeight);
     }
 
     Clear ()
@@ -250,7 +251,7 @@ OV.NavigatorMaterialsPanel = class extends OV.NavigatorPanel
         this.callbacks = null;
         this.materialIndexToItem = new Map ();
 
-        this.popupDiv = $('<div>').addClass ('ov_navigator_info_panel').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv);
+        this.popupDiv = OV.AddDiv (this.panelDiv, 'ov_navigator_info_panel');
         this.meshesButton = new OV.NavigatorMeshesPopupButton (this.popupDiv);
     }
 
@@ -266,10 +267,10 @@ OV.NavigatorMaterialsPanel = class extends OV.NavigatorPanel
 
     Resize ()
     {
-        let titleHeight = this.titleDiv.outerHeight (true);
+        let titleHeight = OV.GetDomElementOuterHeight (this.titleDiv);
-        let popupHeight = this.popupDiv.outerHeight (true);
+        let popupHeight = OV.GetDomElementOuterHeight (this.popupDiv);
-        let height = this.parentDiv.height ();
+        let height = this.parentDiv.offsetHeight;
-        this.treeDiv.outerHeight (height - titleHeight - popupHeight, true);
+        OV.SetDomElementHeight (this.treeDiv, height - titleHeight - popupHeight);
     }
 
     Clear ()
@@ -336,12 +337,14 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel
         this.meshInstanceIdToItem = new Map ();
         this.rootItem = null;
         this.showTree = false;
-        this.buttins = null;
+        this.buttons = null;
 
+        this.titleDiv.classList.add ('nomargin');
         this.treeView.AddClass ('tight');
-        this.buttonsDiv = $('<div>').addClass ('ov_navigator_buttons').insertBefore (this.treeDiv);
+        this.buttonsDiv = OV.CreateDiv ('ov_navigator_buttons');
+        OV.InsertDomElementBefore (this.buttonsDiv, this.treeDiv);
 
-        this.popupDiv = $('<div>').addClass ('ov_navigator_info_panel').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv);
+        this.popupDiv = OV.AddDiv (this.panelDiv, 'ov_navigator_info_panel');
         this.materialsButton = new OV.NavigatorMaterialsPopupButton (this.popupDiv);
     }
 
@@ -357,17 +360,17 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel
 
     Resize ()
     {
-        let titleHeight = this.titleDiv.outerHeight (true);
+        let titleHeight = this.titleDiv.offsetHeight;
-        let buttonsHeight = this.buttonsDiv.outerHeight (true);
+        let buttonsHeight = OV.GetDomElementOuterHeight (this.buttonsDiv);
-        let popupHeight = this.popupDiv.outerHeight (true);
+        let popupHeight = OV.GetDomElementOuterHeight (this.popupDiv);
-        let height = this.parentDiv.height ();
+        let height = this.parentDiv.offsetHeight;
-        this.treeDiv.outerHeight (height - titleHeight - buttonsHeight - popupHeight);
+        OV.SetDomElementHeight (this.treeDiv, height - titleHeight - buttonsHeight - popupHeight);
     }
 
     Clear ()
     {
         this.ClearMeshTree ();
-        this.buttonsDiv.empty ();
+        OV.ClearDomElement (this.buttonsDiv);
         this.buttons = null;
     }
 
@@ -409,14 +412,16 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel
 
     FillButtons (importResult)
     {
-        function CreateButton (parentDiv, button, extraClasses, onClick)
+        function CreateButton (parentDiv, button, className, onClick)
         {
-            button.div = $('<div>').addClass ('ov_navigator_button').attr ('alt', button.name).attr ('title', button.name).appendTo (parentDiv);
+            button.div = OV.AddDiv (parentDiv, 'ov_navigator_button');
-            if (OV.IsDefined (extraClasses)) {
+            button.div.setAttribute ('alt', button.name);
-                button.div.addClass (extraClasses);
+            button.div.setAttribute ('title', button.name);
+            if (className) {
+                button.div.classList.add (className);
             }
-            button.iconDiv = OV.AddSvgIcon (button.div, button.icon);
+            button.iconDiv = OV.AddSvgIconElement (button.div, button.icon);
-            button.div.click (() => {
+            button.div.addEventListener ('click', () => {
                 onClick ();
             });
         }
@@ -424,20 +429,20 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel
         function UpdateButtonsStatus (buttons, showTree, isHierarchical)
         {
             if (showTree) {
-                buttons.flatList.iconDiv.removeClass ('selected');
+                buttons.flatList.iconDiv.classList.remove ('selected');
-                buttons.treeView.iconDiv.addClass ('selected');
+                buttons.treeView.iconDiv.classList.add ('selected');
             } else {
-                buttons.flatList.iconDiv.addClass ('selected');
+                buttons.flatList.iconDiv.classList.add ('selected');
-                buttons.treeView.iconDiv.removeClass ('selected');
+                buttons.treeView.iconDiv.classList.remove ('selected');
             }
             if (showTree && isHierarchical) {
-                buttons.separator.show ();
+                OV.ShowDomElement (buttons.separator);
-                buttons.expandAll.div.show ();
+                OV.ShowDomElement (buttons.expandAll.div);
-                buttons.collapseAll.div.show ();
+                OV.ShowDomElement (buttons.collapseAll.div);
             } else {
-                buttons.separator.hide ();
+                OV.HideDomElement (buttons.separator);
-                buttons.expandAll.div.hide ();
+                OV.HideDomElement (buttons.expandAll.div);
-                buttons.collapseAll.div.hide ();
+                OV.HideDomElement (buttons.collapseAll.div);
             }
         }
 
@@ -528,7 +533,7 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel
             UpdateView (this, importResult, isHierarchical);
         });
 
-        this.buttons.separator = $('<div>').addClass ('ov_navigator_buttons_separator').appendTo (this.buttonsDiv);
+        this.buttons.separator = OV.AddDiv (this.buttonsDiv, 'ov_navigator_buttons_separator');
 
         CreateButton (this.buttonsDiv, this.buttons.expandAll, null, () => {
             this.rootItem.ExpandAll (true);
@@ -596,9 +601,9 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel
             let rootItem = new OV.NodeItem (null, nodeId, {
                 onVisibilityChanged : (isVisible) => {
                     if (isVisible) {
-                        OV.SetSvgIconImage (panel.buttons.showHideMeshes.iconDiv, 'visible');
+                        OV.SetSvgIconImageElement (panel.buttons.showHideMeshes.iconDiv, 'visible');
                     } else {
-                        OV.SetSvgIconImage (panel.buttons.showHideMeshes.iconDiv, 'hidden');
+                        OV.SetSvgIconImageElement (panel.buttons.showHideMeshes.iconDiv, 'hidden');
                     }
                 }
             });

website/o3dv/js/panelset.js

@@ -3,7 +3,8 @@ OV.Panel = class
     constructor (parentDiv)
     {
         this.parentDiv = parentDiv;
-        this.panelDiv = $('<div>').appendTo (parentDiv).hide ();
+        this.panelDiv = OV.AddDiv (parentDiv);
+        OV.HideDomElement (this.panelDiv);
         this.visible = false;
     }
 
@@ -12,11 +13,6 @@ OV.Panel = class
         return null;
     }
 
-    GetPanelDiv ()
-    {
-        return this.panelDiv;
-    }
-
     IsVisible ()
     {
         return this.visible;
@@ -30,9 +26,9 @@ OV.Panel = class
 
         this.visible = show;
         if (this.visible) {
-            this.panelDiv.show ();
+            OV.ShowDomElement (this.panelDiv);
         } else {
-            this.panelDiv.hide ();
+            OV.HideDomElement (this.panelDiv);
         }
     }
 
@@ -52,8 +48,8 @@ OV.PanelSet = class
     constructor (parentDiv)
     {
         this.parentDiv = parentDiv;
-        this.menuDiv = $('<div>').addClass ('ov_panel_set_menu').appendTo (parentDiv);
+        this.menuDiv = OV.AddDiv (parentDiv, 'ov_panel_set_menu');
-        this.contentDiv = $('<div>').addClass ('ov_panel_set_content').addClass ('ov_thin_scrollbar').appendTo (parentDiv);
+        this.contentDiv = OV.AddDiv (parentDiv, 'ov_panel_set_content ov_thin_scrollbar');
         this.panels = [];
         this.panelButtons = [];
         this.panelsVisible = true;
@@ -75,10 +71,11 @@ OV.PanelSet = class
     AddPanel (panel)
     {
         this.panels.push (panel);
-        let button = OV.AddSvgIcon (this.menuDiv, panel.GetIcon (), 'ov_panel_set_menu_button');
+        let button = OV.AddSvgIconElement (this.menuDiv, panel.GetIcon (), 'ov_panel_set_menu_button');
-        button.attr ('alt', panel.GetName ()).attr ('title', panel.GetName ());
+        button.setAttribute ('alt', panel.GetName ());
+        button.setAttribute ('title', panel.GetName ());
         this.panelButtons.push (button);
-        button.click (() => {
+        button.addEventListener ('click', () => {
             if (panel === this.GetVisiblePanel ()) {
                 this.ShowPanels (false);
             } else {
@@ -107,18 +104,18 @@ OV.PanelSet = class
         this.panelsVisible = show;
         this.requestedPanelsVisible = show;
         if (this.panelsVisible) {
-            this.contentDiv.show ();
+            OV.ShowDomElement (this.contentDiv);
-            this.parentDiv.outerWidth (this.menuDiv.outerWidth (true) + this.panelsPrevWidth, true);
+            OV.SetDomElementWidth (this.parentDiv, this.menuDiv.offsetWidth + this.panelsPrevWidth);
         } else {
             for (let panelButton of this.panelButtons) {
-                panelButton.removeClass ('selected');
+                panelButton.classList.remove ('selected');
             }
             for (let panel of this.panels) {
                 panel.Show (false);
             }
-            this.panelsPrevWidth = this.contentDiv.outerWidth (true);
+            this.panelsPrevWidth = this.contentDiv.offsetWidth;
-            this.parentDiv.outerWidth (this.menuDiv.outerWidth (true), true);
+            OV.SetDomElementWidth (this.parentDiv, this.menuDiv.offsetWidth);
-            this.contentDiv.hide ();
+            OV.HideDomElement (this.contentDiv);
         }
 
         this.callbacks.onShowHidePanels (this.panelsVisible);
@@ -134,10 +131,10 @@ OV.PanelSet = class
         let panelButton = this.GetPanelButton (panel);
         for (let otherPanelButton of this.panelButtons) {
             if (otherPanelButton !== panelButton) {
-                otherPanelButton.removeClass ('selected');
+                otherPanelButton.classList.remove ('selected');
             }
         }
-        panelButton.addClass ('selected');
+        panelButton.classList.add ('selected');
 
         for (let otherPanel of this.panels) {
             if (otherPanel !== panel) {
@@ -164,7 +161,7 @@ OV.PanelSet = class
     SetPanelIcon (panel, icon)
     {
         let panelButton = this.GetPanelButton (panel);
-        OV.SetSvgIconImage (panelButton, icon);
+        OV.SetSvgIconImageElement (panelButton, icon);
     }
 
     GetPanelButton (panel)
@@ -179,9 +176,9 @@ OV.PanelSet = class
             this.ShowPanels (this.requestedPanelsVisible);
             return;
         }
-        let height = this.parentDiv.height ();
+        let height = this.parentDiv.offsetHeight;
-        this.menuDiv.outerHeight (height, true);
+        OV.SetDomElementHeight (this.menuDiv, height);
-        this.contentDiv.outerHeight (height, true);
+        OV.SetDomElementHeight (this.contentDiv, height);
         if (this.panelsVisible) {
             for (let panel of this.panels) {
                 if (panel.IsVisible ()) {
@@ -193,7 +190,7 @@ OV.PanelSet = class
 
     IsParentVisible ()
     {
-        return this.parentDiv.is (':visible');
+        return OV.IsDomElementVisible (this.parentDiv);
     }
 
     Clear ()

website/o3dv/js/sidebar.js

@@ -4,7 +4,7 @@ OV.Sidebar = class
     {
         this.mainDiv = mainDiv;
         this.splitterDiv = splitterDiv;
-        this.panelSet = new OV.PanelSet (mainDiv);
+        this.panelSet = new OV.PanelSet (mainDiv.get (0));
 
         this.detailsPanel = new OV.DetailsSidebarPanel (this.panelSet.GetContentDiv ());
         this.settingsPanel = new OV.SettingsSidebarPanel (this.panelSet.GetContentDiv ());

website/o3dv/js/sidebarpanels.js

@@ -1,4 +1,3 @@
-
 OV.SidebarPanel = class extends OV.Panel
 {
     constructor (parentDiv)
@@ -6,12 +5,12 @@ OV.SidebarPanel = class extends OV.Panel
         super (parentDiv);
         this.callbacks = null;
 
-        this.titleDiv = $('<div>').addClass ('ov_sidebar_title').appendTo (this.panelDiv);
+        this.titleDiv = OV.AddDiv (this.panelDiv, 'ov_sidebar_title');
-        this.contentDiv = $('<div>').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv);
+        this.contentDiv = OV.AddDiv (this.panelDiv, 'ov_sidebar_content ov_thin_scrollbar');
-        $('<div>').addClass ('ov_sidebar_title_text').html (this.GetName ()).appendTo (this.titleDiv);
 
         let panelName = this.GetName ();
-        this.titleDiv.html (panelName).attr ('title', panelName);
+        OV.AddDiv (this.titleDiv, 'ov_sidebar_title_text', this.GetName ());
+        this.titleDiv.setAttribute ('title', panelName);
     }
 
     GetName ()
@@ -21,7 +20,7 @@ OV.SidebarPanel = class extends OV.Panel
 
     Clear ()
     {
-        this.contentDiv.empty ();
+        OV.ClearDomElement (this.contentDiv);
     }
 
     Init (callbacks)
@@ -50,7 +49,7 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
     AddObject3DProperties (object3D)
     {
         this.Clear ();
-        let table = $('<div>').addClass ('ov_property_table').appendTo (this.contentDiv);
+        let table = OV.AddDiv (this.contentDiv, 'ov_property_table');
         let boundingBox = OV.GetBoundingBox (object3D);
         let size = OV.SubCoord3D (boundingBox.max, boundingBox.min);
         this.AddProperty (table, new OV.Property (OV.PropertyType.Integer, 'Vertices', object3D.VertexCount ()));
@@ -73,7 +72,7 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
             return new OV.Property (OV.PropertyType.Number, null, volume);
         });
         if (object3D.PropertyGroupCount () > 0) {
-            let customTable = $('<div>').addClass ('ov_property_table ov_property_table_custom').appendTo (this.contentDiv);
+            let customTable = OV.AddDiv (this.contentDiv, 'ov_property_table ov_property_table_custom');
             for (let i = 0; i < object3D.PropertyGroupCount (); i++) {
                 const propertyGroup = object3D.GetPropertyGroup (i);
                 this.AddPropertyGroup (customTable, propertyGroup);
@@ -98,7 +97,7 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
         }
 
         this.Clear ();
-        let table = $('<div>').addClass ('ov_property_table').appendTo (this.contentDiv);
+        let table = OV.AddDiv (this.contentDiv, 'ov_property_table');
         let typeString = null;
         if (material.type === OV.MaterialType.Phong) {
             typeString = 'Phong';
@@ -127,16 +126,16 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
 
     AddPropertyGroup (table, propertyGroup)
     {
-        let row = $('<div>').addClass ('ov_property_table_row group').appendTo (table);
+        let row = OV.AddDiv (table, 'ov_property_table_row group', propertyGroup.name);
-        row.html (propertyGroup.name).attr ('title', propertyGroup.name);
+        row.setAttribute ('title', propertyGroup.name);
     }
 
     AddProperty (table, property)
     {
-        let row = $('<div>').addClass ('ov_property_table_row').appendTo (table);
+        let row = OV.AddDiv (table, 'ov_property_table_row');
-        let nameColum = $('<div>').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row);
+        let nameColumn = OV.AddDiv (row, 'ov_property_table_cell ov_property_table_name', property.name + ':');
-        let valueColumn = $('<div>').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row);
+        let valueColumn = OV.AddDiv (row, 'ov_property_table_cell ov_property_table_value');
-        nameColum.html (property.name + ':').attr ('title', property.name);
+        nameColumn.setAttribute ('title', property.name);
         this.DisplayPropertyValue (property, valueColumn);
         return row;
     }
@@ -144,24 +143,24 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
     AddPropertyInGroup (table, property)
     {
         let row = this.AddProperty (table, property);
-        row.addClass ('ingroup');
+        row.classList.add ('ingroup');
     }
 
     AddCalculatedProperty (table, name, calculateValue)
     {
-        let row = $('<div>').addClass ('ov_property_table_row').appendTo (table);
+        let row = OV.AddDiv (table, 'ov_property_table_row');
-        let nameColum = $('<div>').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row);
+        let nameColumn = OV.AddDiv (row, 'ov_property_table_cell ov_property_table_name', name + ':');
-        let valueColumn = $('<div>').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row);
+        let valueColumn = OV.AddDiv (row, 'ov_property_table_cell ov_property_table_value');
-        nameColum.html (name + ':').attr ('title', name);
+        nameColumn.setAttribute ('title', name);
 
-        let calculateButton = $('<div>').addClass ('ov_property_table_button').html ('Calculate...').appendTo (valueColumn);
+        let calculateButton = OV.AddDiv (valueColumn, 'ov_property_table_button', 'Calculate...');
-        calculateButton.click (() => {
+        calculateButton.addEventListener ('click', () => {
-            valueColumn.empty ();
+            OV.ClearDomElement (valueColumn);
-            valueColumn.html ('Please wait...');
+            valueColumn.innerHTML = 'Please wait...';
             OV.RunTaskAsync (() => {
                 let propertyValue = calculateValue ();
                 if (propertyValue === null) {
-                    valueColumn.html ('-');
+                    valueColumn.innerHTML = '-';
                 } else {
                     this.DisplayPropertyValue (propertyValue, valueColumn);
                 }
@@ -171,7 +170,7 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
 
     DisplayPropertyValue (property, targetDiv)
     {
-        targetDiv.empty ();
+        OV.ClearDomElement (targetDiv);
         let valueText = null;
         if (property.type === OV.PropertyType.Text) {
             valueText = property.value;
@@ -189,11 +188,12 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
         } else if (property.type === OV.PropertyType.Color) {
             let hexString = '#' + OV.ColorToHexString (property.value);
             let colorCircle = OV.CreateInlineColorCircle (property.value);
-            colorCircle.appendTo (targetDiv);
+            targetDiv.appendChild (colorCircle);
-            $('<span>').html (hexString).appendTo (targetDiv);
+            OV.AddDomElement (targetDiv, 'span', null, hexString);
         }
         if (valueText !== null) {
-            targetDiv.html (valueText).attr ('title', valueText);
+            targetDiv.innerHTML = valueText;
+            targetDiv.setAttribute ('title', valueText);
         }
     }
 };
@@ -252,21 +252,21 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
     {
         let hasDefaultMaterial = OV.HasDefaultMaterial (model);
         if (!hasDefaultMaterial) {
-            this.defaultColorInput.warning.show ();
+            OV.ShowDomElement (this.defaultColorInput.warning);
         } else {
-            this.defaultColorInput.warning.hide ();
+            OV.HideDomElement (this.defaultColorInput.warning);
         }
         this.Resize ();
     }
 
     AddColorParameter (title, description, warningText, predefinedColors, defaultValue, onChange)
     {
-        let contentDiv = $('<div>').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv);
+        let contentDiv = OV.AddDiv (this.contentDiv, 'ov_sidebar_settings_content');
-        let titleDiv = $('<div>').addClass ('ov_sidebar_subtitle').appendTo (contentDiv);
+        let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle');
-        let colorInput = $('<div>').addClass ('color-picker').appendTo (titleDiv);
+        let colorInput = OV.AddDiv (titleDiv, 'color-picker');
-        $('<span>').html (title).appendTo (titleDiv);
+        OV.AddDomElement (titleDiv, 'span', null, title);
         const pickr = Pickr.create ({
-            el : colorInput.get (0),
+            el : colorInput,
             theme : 'monolith',
             position : 'left-start',
             swatches : predefinedColors,
@@ -297,12 +297,13 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
             );
             onChange (ovColor);
         });
-        $('<div>').addClass ('ov_sidebar_settings_padded').html (description).appendTo (contentDiv);
+        OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded', description);
         let warningDiv = null;
         if (warningText !== null) {
-            warningDiv = $('<div>').addClass ('ov_sidebar_settings_padded').appendTo (contentDiv);
+            warningDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded');
-            OV.AddSvgIcon (warningDiv, 'warning', 'left_inline light');
+            let icon = OV.AddSvgIconElement (warningDiv, 'warning', 'left_inline');
-            $('<div>').addClass ('ov_sidebar_settings_warning').html (warningText).appendTo (warningDiv);
+            icon.classList.add ('light');
+            OV.AddDiv (warningDiv, 'ov_sidebar_settings_warning', warningText);
         }
         return {
             pickr : pickr,
@@ -314,11 +315,15 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
     {
         function AddRadioButton (contentDiv, themeId, themeName, onChange)
         {
-            let row = $('<div>').addClass ('ov_sidebar_settings_row').appendTo (contentDiv);
+            let row = OV.AddDiv (contentDiv, 'ov_sidebar_settings_row');
-            let label = $('<label>').attr ('for', themeId.toString ()).appendTo (row);
+            let label = OV.AddDomElement (row, 'label');
-            let radio = $('<input>').addClass ('ov_radio_button').attr ('type', 'radio').attr ('id', themeId.toString ()).attr ('name', 'theme').appendTo (label);
+            label.setAttribute ('for', themeId.toString ());
-            $('<span>').html (themeName).appendTo (label);
+            let radio = OV.AddDomElement (label, 'input', 'ov_radio_button');
-            radio.change (() => {
+            radio.setAttribute ('type', 'radio');
+            radio.setAttribute ('id', themeId.toString ());
+            radio.setAttribute ('name', 'theme');
+            OV.AddDomElement (label, 'span', null, themeName);
+            radio.addEventListener ('change', () => {
                 onChange (themeId);
             });
             return radio;
@@ -328,15 +333,16 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
         {
             for (let i = 0; i < radioButtons.length; i++) {
                 let radioButton = radioButtons[i];
-                radioButton.prop ('checked', radioButton.attr ('id') === defaultValue.toString ());
+                radioButton.checked = radioButton.getAttribute ('id') === defaultValue.toString ();
             }
         }
 
-        let contentDiv = $('<div>').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv);
+        let contentDiv = OV.AddDiv (this.contentDiv, 'ov_sidebar_settings_content');
-        let titleDiv = $('<div>').addClass ('ov_sidebar_subtitle').appendTo (contentDiv);
+        let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle');
-        OV.AddSvgIcon (titleDiv, 'theme', 'ov_sidebar_subtitle_icon');
+        OV.AddSvgIconElement (titleDiv, 'theme', 'ov_sidebar_subtitle_icon');
-        $('<div>').html ('Appearance').appendTo (titleDiv);
+        OV.AddDiv (titleDiv, null, 'Appearance');
-        let buttonsDiv = $('<div>').addClass ('ov_sidebar_settings_padded').appendTo (contentDiv);
+
+        let buttonsDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded');
         let result = {
             buttons : [],
             select: (value) => {
@@ -352,8 +358,8 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
 
     AddResetToDefaultsButton (defaultSettings)
     {
-        let resetToDefaultsButton = $('<div>').addClass ('ov_button').addClass ('outline').addClass ('ov_sidebar_button').html ('Reset to Default').appendTo (this.contentDiv);
+        let resetToDefaultsButton = OV.AddDiv (this.contentDiv, 'ov_button outline ov_sidebar_button', 'Reset to Default');
-        resetToDefaultsButton.click (() => {
+        resetToDefaultsButton.addEventListener ('click', () => {
             this.backgroundColorInput.pickr.setColor ('#' + OV.ColorToHexString (defaultSettings.backgroundColor));
             this.callbacks.onBackgroundColorChange (defaultSettings.backgroundColor);
             this.defaultColorInput.pickr.setColor ('#' + OV.ColorToHexString (defaultSettings.defaultColor));

website/o3dv/js/treeview.js

@@ -126,7 +126,8 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
         this.openButtonIcon = 'arrow_down';
         this.closeButtonIcon = 'arrow_right';
 
-        this.openCloseButton = OV.CreateSvgIcon (this.openButtonIcon, 'ov_tree_item_icon').insertBefore (this.nameElement);
+        this.openCloseButton = OV.CreateSvgIconElement (this.openButtonIcon, 'ov_tree_item_icon');
+        OV.InsertDomElementBefore (this.openCloseButton, this.nameElement);
     }
 
     AddChild (child)
@@ -169,10 +170,10 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
             return;
         }
         if (show) {
-            OV.SetSvgIconImage (this.openCloseButton, this.openButtonIcon);
+            OV.SetSvgIconImageElement (this.openCloseButton, this.openButtonIcon);
             $(this.childrenDiv).slideDown (400, onComplete);
         } else {
-            OV.SetSvgIconImage (this.openCloseButton, this.closeButtonIcon);
+            OV.SetSvgIconImageElement (this.openCloseButton, this.closeButtonIcon);
             $(this.childrenDiv).slideUp (400, onComplete);
         }
     }

website/o3dv/js/utils.js

@@ -108,29 +108,6 @@ OV.DownloadArrayBufferAsFile = function (arrayBuffer, fileName)
     OV.DownloadUrlAsFile (url, fileName);
 };
 
-OV.CreateSvgIcon = function (iconName, extraClass)
-{
-    let div = $('<div>').addClass ('ov_svg_icon');
-    $('<i>').addClass ('icon').addClass ('icon-' + iconName).appendTo (div);
-    if (extraClass !== undefined && extraClass !== null) {
-        div.addClass (extraClass);
-    }
-    return div;
-};
-
-OV.AddSvgIcon = function (parent, iconName, extraClass)
-{
-    let div = OV.CreateSvgIcon (iconName, extraClass);
-    div.appendTo (parent);
-    return div;
-};
-
-OV.SetSvgIconImage = function (icon, iconName)
-{
-    let iconChild = icon.children (':first');
-    iconChild.removeClass ().addClass ('icon').addClass ('icon-' + iconName);
-};
-
 OV.CreateSvgIconElement = function (iconName, className)
 {
     let iconDiv = OV.CreateDiv ('ov_svg_icon');
@@ -174,7 +151,10 @@ OV.CreateInlineColorCircle = function (color)
         Math.max (0, color.b - 50)
     );
     let darkerColorHexString = '#' + OV.ColorToHexString (darkerColor);
-    return $('<div>').addClass ('ov_color_circle').css ('background', hexString).css ('border', '1px solid ' + darkerColorHexString);
+    let circleDiv = OV.CreateDiv ('ov_color_circle');
+    circleDiv.style.background = hexString;
+    circleDiv.style.border = '1px solid ' + darkerColorHexString;
+    return circleDiv;
 };
 
 OV.InstallVerticalSplitter = function (splitterDiv, resizedDiv, flipped, onResize)

website/o3dv/js/website.js

@@ -340,8 +340,8 @@ OV.Website = class
 
     InitViewer ()
     {
-        let canvas = $('<canvas>').appendTo (this.parameters.viewerDiv);
+        let canvas = OV.AddDomElement (this.parameters.viewerDiv.get (0), 'canvas');
-        this.viewer.Init (canvas.get (0));
+        this.viewer.Init (canvas);
         this.viewer.SetBackgroundColor (this.settings.backgroundColor);
         this.viewer.SetEnvironmentMap ([
             'assets/envmaps/grayclouds/posx.jpg',