diff --git a/website/o3dv/js/exportdialog.js b/website/o3dv/js/exportdialog.js index c6e3883..de66e28 100644 --- a/website/o3dv/js/exportdialog.js +++ b/website/o3dv/js/exportdialog.js @@ -1,4 +1,4 @@ -OV.ExportType = +OV.ExportType = { Model : 1, Image : 2 @@ -62,7 +62,7 @@ OV.ExportDialog = class exportFormatButtonDivs : [], formatSettingsDiv : null, selectedFormat : null - }; + }; } Show (model, viewer) @@ -72,7 +72,7 @@ OV.ExportDialog = class 'Export Failed', 'Please load a model before exporting.', null - ); + ); this.callbacks.onDialog (messageDialog); return; } @@ -98,10 +98,10 @@ OV.ExportDialog = class } } ]); - + let text = 'Select a format from the below list to export your model. Please note that the export can take several second.'; $('
').html (text).addClass ('ov_dialog_section').appendTo (contentDiv); - + let buttonWidth = 40; let optionsHeight = 50; let exportFormatSelect = $('
').addClass ('ov_dialog_select').appendTo (contentDiv); @@ -115,7 +115,7 @@ OV.ExportDialog = class }); } this.OnExportFormatSelect (0); - + mainDialog.Show (); this.callbacks.onDialog (mainDialog); } @@ -146,7 +146,7 @@ OV.ExportDialog = class formatInput.change (() => { this.formatParameters.selectedFormat = format; }); - } + } } ExportFormat (model, viewer) @@ -206,21 +206,21 @@ OV.ExportDialog = class let text = 'You can download your exported files here.'; $('
').html (text).addClass ('ov_dialog_section').appendTo (contentDiv); - + let fileListSection = $('
').addClass ('ov_dialog_section').appendTo (contentDiv); - let fileList = $('
').addClass ('ov_dialog_file_list').addClass ('ov_thin_scrollbar').appendTo (fileListSection); - + let fileList = $('
').addClass ('ov_dialog_file_list').addClass ('ov_thin_scrollbar').appendTo (fileListSection); + for (let i = 0; i < files.length; i++) { let file = files[i]; let url = OV.CreateObjectUrl (file.GetBufferContent ()); let fileLink = $('').addClass ('ov_dialog_file_link').appendTo (fileList); fileLink.attr ('href', url); fileLink.attr ('download', file.GetName ()); - OV.CreateSvgIcon (fileLink, 'file_download', 'ov_file_link_img'); + OV.AddSvgIcon (fileLink, 'file_download', 'ov_file_link_img'); $('
').addClass ('ov_dialog_file_link_text').html (file.GetName ()).appendTo (fileLink); } dialog.Show (); this.callbacks.onDialog (dialog); - } + } }; diff --git a/website/o3dv/js/modal.js b/website/o3dv/js/modal.js index 08cec82..ad2b8f6 100644 --- a/website/o3dv/js/modal.js +++ b/website/o3dv/js/modal.js @@ -111,7 +111,7 @@ OV.Dialog = class { this.modal = new OV.Modal (); } - + GetContentDiv () { return this.modal.GetContentDiv (); @@ -140,7 +140,7 @@ OV.Dialog = class Hide () { this.modal.Close (); - } + } }; OV.ProgressDialog = class extends OV.Dialog @@ -198,7 +198,7 @@ OV.ButtonDialog = class extends OV.Dialog for (let i = 0; i < buttons.length; i++) { AddButton (buttons[i], buttonsInnerDiv); } - + return dialogContentDiv; } }; @@ -238,7 +238,7 @@ OV.ListPopup = class extends OV.PopupDialog { let listItemDiv = $('
').addClass ('ov_popup_list_item').appendTo (this.listDiv); if (item.icon) { - OV.CreateSvgIcon (listItemDiv, item.icon, 'left_inline'); + OV.AddSvgIcon (listItemDiv, item.icon, 'left_inline'); } if (item.color) { let iconDiv = $('
').addClass ('ov_popup_list_item_icon').appendTo (listItemDiv); diff --git a/website/o3dv/js/navigator.js b/website/o3dv/js/navigator.js index b7fda40..2fb708c 100644 --- a/website/o3dv/js/navigator.js +++ b/website/o3dv/js/navigator.js @@ -112,7 +112,7 @@ OV.NavigatorInfoPanel = class { let button = $('
').addClass ('ov_navigator_info_button').appendTo (parentDiv); $('
').addClass ('ov_navigator_info_button_text').html (buttonText).appendTo (button); - OV.CreateSvgIcon (button, 'arrow_right', 'ov_navigator_info_button_icon'); + OV.AddSvgIcon (button, 'arrow_right', 'ov_navigator_info_button_icon'); button.click (() => { onClick (button); }); diff --git a/website/o3dv/js/settingssidebarpanel.js b/website/o3dv/js/settingssidebarpanel.js index 4010b65..9250fac 100644 --- a/website/o3dv/js/settingssidebarpanel.js +++ b/website/o3dv/js/settingssidebarpanel.js @@ -6,7 +6,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel this.backgroundColorInput = null; this.defaultColorInput = null; this.defaultColorWarning = null; - this.themeInput = null; + this.themeInput = null; } GetTitle () @@ -101,7 +101,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel let warningDiv = null; if (warningText !== null) { warningDiv = $('
').addClass ('ov_sidebar_settings_padded').appendTo (contentDiv); - OV.CreateSvgIcon (warningDiv, 'warning', 'left_inline light'); + OV.AddSvgIcon (warningDiv, 'warning', 'left_inline light'); $('
').addClass ('ov_sidebar_settings_warning').html (warningText).appendTo (warningDiv); } return { @@ -133,9 +133,8 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel } let contentDiv = $('
').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv); - // TODO: icon let titleDiv = $('
').addClass ('ov_sidebar_subtitle').appendTo (contentDiv); - OV.CreateSvgIcon (titleDiv, 'theme', 'ov_sidebar_subtitle_icon'); + OV.AddSvgIcon (titleDiv, 'theme', 'ov_sidebar_subtitle_icon'); $('
').html ('Appearance').appendTo (titleDiv); let buttonsDiv = $('
').addClass ('ov_sidebar_settings_padded').appendTo (contentDiv); let result = { diff --git a/website/o3dv/js/sidebarpanel.js b/website/o3dv/js/sidebarpanel.js index 9a64066..3e353c3 100644 --- a/website/o3dv/js/sidebarpanel.js +++ b/website/o3dv/js/sidebarpanel.js @@ -14,7 +14,7 @@ OV.SidebarPanel = class this.titleDiv = $('
').addClass ('ov_sidebar_title').appendTo (this.panelDiv); this.contentDiv = $('
').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv); $('
').addClass ('ov_sidebar_title_text').html (this.GetTitle ()).appendTo (this.titleDiv); - let titleImg = OV.CreateSvgIcon (this.titleDiv, 'close', 'ov_sidebar_title_img'); + let titleImg = OV.AddSvgIcon (this.titleDiv, 'close', 'ov_sidebar_title_img'); titleImg.click (() => { callbacks.onClose (); }); @@ -54,6 +54,6 @@ OV.SidebarPanel = class HidePopups () { - + } }; diff --git a/website/o3dv/js/toolbar.js b/website/o3dv/js/toolbar.js index 07d0e9e..e6eaf7d 100644 --- a/website/o3dv/js/toolbar.js +++ b/website/o3dv/js/toolbar.js @@ -4,23 +4,23 @@ OV.ToolbarButton = class { this.image = image; this.imageTitle = imageTitle; - this.onClick = onClick; - this.selected = false; - this.buttonDiv = null; - this.buttonImg = null; - } - CreateDomElement (parentDiv) - { - this.buttonDiv = $('
').addClass ('ov_toolbar_button').appendTo (parentDiv); - this.buttonImg = OV.CreateSvgIcon (this.buttonDiv, this.image); - if (this.onClick !== null) { - this.buttonDiv.click (this.onClick); + this.selected = false; + this.buttonDiv = $('
').addClass ('ov_toolbar_button'); + this.buttonImg = OV.AddSvgIcon (this.buttonDiv, this.image); + if (onClick !== null) { + this.buttonDiv.click (onClick); } + this.buttonDiv.attr ('alt', this.imageTitle); OV.InstallTooltip (this.buttonDiv, this.imageTitle); } + AddDomElements (parentDiv) + { + this.buttonDiv.appendTo (parentDiv); + } + AddClass (className) { this.buttonDiv.addClass (className); @@ -48,7 +48,7 @@ OV.ToolbarButton = class this.buttonDiv.removeClass ('selected'); } else { this.buttonDiv.addClass ('selected'); - } + } } }; @@ -62,7 +62,7 @@ OV.Toolbar = class AddImageButton (image, imageTitle, onClick) { let button = new OV.ToolbarButton (image, imageTitle, onClick); - button.CreateDomElement (this.mainDiv); + button.AddDomElements (this.mainDiv); return button; } diff --git a/website/o3dv/js/treeview.js b/website/o3dv/js/treeview.js index 3a5004a..43eca05 100644 --- a/website/o3dv/js/treeview.js +++ b/website/o3dv/js/treeview.js @@ -11,28 +11,24 @@ OV.TreeViewButton = class constructor (imagePath) { this.imagePath = imagePath; - this.domElement = null; - this.clickHandler = null; + this.mainElement = OV.CreateSvgIcon (this.imagePath, 'ov_tree_item_button'); + this.mainElement.attr ('src', this.imagePath); } SetImage (imagePath) { this.imagePath = imagePath; - OV.SetSvgIconImage (this.domElement, this.imagePath); + OV.SetSvgIconImage (this.mainElement, this.imagePath); } OnClick (clickHandler) { - this.clickHandler = clickHandler; + this.mainElement.click (clickHandler); } - CreateDomElement (parentDiv) + AddDomElements (parentDiv) { - this.domElement = OV.CreateSvgIcon (parentDiv, this.imagePath, 'ov_tree_item_button'); - this.domElement.attr ('src', this.imagePath); - if (this.clickHandler !== null) { - this.domElement.click (this.clickHandler); - } + this.mainElement.appendTo (parentDiv); } }; @@ -41,29 +37,14 @@ OV.TreeViewItem = class constructor (name) { this.name = name; - this.mainElement = null; - this.nameElement = null; - } - - GetName () - { - return this.name; - } - - SetName (name) - { - this.name = name; - } - - CreateMainElement (parentDiv) - { - this.mainElement = $('
').addClass ('ov_tree_item').attr ('title', this.name).appendTo (parentDiv); - } - - CreateNameElement () - { + this.mainElement = $('
').addClass ('ov_tree_item').attr ('title', this.name); this.nameElement = $('
').addClass ('ov_tree_item_name').html (this.name).appendTo (this.mainElement); - } + } + + AddDomElements (parentDiv) + { + this.mainElement.appendTo (parentDiv); + } }; OV.TreeViewSingleItem = class extends OV.TreeViewItem @@ -92,12 +73,6 @@ OV.TreeViewSingleItem = class extends OV.TreeViewItem { this.parent = parent; } - - CreateDomElement (parentDiv) - { - this.CreateMainElement (parentDiv); - this.CreateNameElement (); - } }; OV.TreeViewButtonItem = class extends OV.TreeViewSingleItem @@ -105,36 +80,21 @@ OV.TreeViewButtonItem = class extends OV.TreeViewSingleItem constructor (name) { super (name); - this.buttons = []; this.onNameClick = null; + + this.mainElement.addClass ('clickable'); + this.buttonsDiv = $('
').addClass ('ov_tree_item_button_container').insertBefore (this.nameElement); } OnNameClick (onNameClick) { - this.onNameClick = onNameClick; + this.nameElement.css ('cursor', 'pointer'); + this.nameElement.click (onNameClick); } AddButton (button) { - this.buttons.push (button); - } - - CreateDomElement (parentDiv) - { - this.CreateMainElement (parentDiv); - this.mainElement.addClass ('clickable'); - let buttonContainer = $('
').addClass ('ov_tree_item_button_container').appendTo (this.mainElement); - for (let i = 0; i < this.buttons.length; i++) { - let button = this.buttons[i]; - button.CreateDomElement (buttonContainer); - } - this.CreateNameElement (); - if (this.onNameClick !== null) { - this.nameElement.css ('cursor', 'pointer'); - this.nameElement.click ((ev) => { - this.onNameClick (); - }); - } + button.AddDomElements (this.buttonsDiv); } }; @@ -144,33 +104,15 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem { super (name); this.iconPath = iconPath; - this.childrenDiv = null; this.showChildren = false; - this.openCloseButton = null; + + this.childrenDiv = null; this.openButtonIcon = 'arrow_down'; this.closeButtonIcon = 'arrow_up'; - this.animated = true; - this.openCloseHandler = null; - } - GetName () - { - return this.name; - } - - SetName (name) - { - this.name = name; - } - - SetAnimated (animated) - { - this.animated = animated; - } - - SetOpenCloseHandler (openCloseHandler) - { - this.openCloseHandler = openCloseHandler; + OV.CreateSvgIcon (this.iconPath, 'ov_tree_item_icon').insertBefore (this.nameElement); + let buttonContainer = $('
').addClass ('ov_tree_item_button_container').insertBefore (this.nameElement); + this.openCloseButton = OV.AddSvgIcon (buttonContainer, this.openButtonIcon, 'ov_tree_item_button'); } ShowChildren (show, onComplete) @@ -181,24 +123,10 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem } if (show) { OV.SetSvgIconImage (this.openCloseButton, this.openButtonIcon); - if (this.animated) { - this.childrenDiv.slideDown (400, onComplete); - } else { - this.childrenDiv.show (); - if (onComplete) { - onComplete (); - } - } + this.childrenDiv.slideDown (400, onComplete); } else { OV.SetSvgIconImage (this.openCloseButton, this.closeButtonIcon); - if (this.animated) { - this.childrenDiv.slideUp (400, onComplete); - } else { - this.childrenDiv.hide (); - if (onComplete) { - onComplete (); - } - } + this.childrenDiv.slideUp (400, onComplete); } } @@ -211,33 +139,16 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem this.mainElement.click ((ev) => { this.showChildren = !this.showChildren; this.ShowChildren (this.showChildren, null); - if (this.openCloseHandler !== null) { - this.openCloseHandler (); - } }); } return this.childrenDiv; } - GetChildrenDiv () - { - return this.childrenDiv; - } - AddChild (child) { this.CreateChildrenDiv (); child.SetParent (this); - child.CreateDomElement (this.childrenDiv); - } - - CreateDomElement (parentDiv) - { - this.CreateMainElement (parentDiv); - OV.CreateSvgIcon (this.mainElement, this.iconPath, 'ov_tree_item_icon'); - let buttonContainer = $('
').addClass ('ov_tree_item_button_container').appendTo (this.mainElement); - this.openCloseButton = OV.CreateSvgIcon (buttonContainer, this.openButtonIcon, 'ov_tree_item_button'); - this.CreateNameElement (); + child.AddDomElements (this.childrenDiv); } }; @@ -250,7 +161,7 @@ OV.TreeView = class AddItem (item) { - item.CreateDomElement (this.mainDiv); + item.AddDomElements (this.mainDiv); } Clear () diff --git a/website/o3dv/js/utils.js b/website/o3dv/js/utils.js index 7a3596d..9591fd7 100644 --- a/website/o3dv/js/utils.js +++ b/website/o3dv/js/utils.js @@ -42,7 +42,7 @@ OV.InstallTooltip = function (item, text) let itemWidth = item.outerWidth (true); let itemHeight = item.outerHeight (true); let tooltipWidth = tooltip.outerWidth (true); - + let tooltipMargin = 10; let left = itemOffset.left + itemWidth / 2 - tooltipWidth / 2; if (left + tooltipWidth > windowWidth - tooltipMargin) { @@ -61,7 +61,7 @@ OV.InstallTooltip = function (item, text) if (!OV.IsHoverEnabled ()) { return; } - + let bodyObj = $(document.body); let tooltip = null; item.hover ( @@ -104,9 +104,9 @@ OV.DownloadArrayBufferAsFile = function (arrayBuffer, fileName) OV.DownloadUrlAsFile (url, fileName); }; -OV.CreateSvgIcon = function (parent, iconName, extraClass) +OV.CreateSvgIcon = function (iconName, extraClass) { - let div = $('
').addClass ('ov_svg_icon').appendTo (parent); + let div = $('
').addClass ('ov_svg_icon'); $('').addClass ('icon').addClass ('icon-' + iconName).appendTo (div); if (extraClass !== undefined && extraClass !== null) { div.addClass (extraClass); @@ -114,6 +114,13 @@ OV.CreateSvgIcon = function (parent, iconName, 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) { icon.empty (); @@ -127,7 +134,7 @@ OV.CreateHeaderButton = function (iconName, title, link) buttonLink.attr ('target', '_blank'); buttonLink.attr ('rel', 'noopener noreferrer'); OV.InstallTooltip (buttonLink, title); - OV.CreateSvgIcon (buttonLink, iconName, 'header_button'); + OV.AddSvgIcon (buttonLink, iconName, 'header_button'); return buttonLink; };