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

Lower the jquery dependency of dialogs.

Browse Source
This commit is contained in:
kovacsv 2021-11-26 23:02:41 +01:00
parent c1c8de4a3f
commit a89681757a
8 changed files with 160 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
source/viewer/domutils.js
View File

@ -20,9 +20,38 @@ OV.GetInnerDimensions = function (element, outerWidth, outerHeight)
};
};
OV.AddDomElement = function (parentElement, elementType)
OV.CreateDomElement = function (elementType, className, innerHTML)
{
const element = document.createElement (elementType);
let element = document.createElement (elementType);
if (className) {
element.className = className;
}
if (innerHTML) {
element.innerHTML = innerHTML;
}
return element;
};
OV.AddDomElement = function (parentElement, elementType, className, innerHTML)
{
let element = OV.CreateDomElement (elementType, className, innerHTML);
parentElement.appendChild (element);
return element;
};
OV.ClearDomElement = function (element)
{
while (element.firstChild) {
element.removeChild (element.firstChild);
}
};
OV.CreateDiv = function (className, innerHTML)
{
return OV.CreateDomElement ('div', className, innerHTML);
};
OV.AddDiv = function (parentElement, className, innerHTML)
{
return OV.AddDomElement (parentElement, 'div', className, innerHTML);
};

17
website/o3dv/css/dialogs.css
View File

@ -1,5 +1,14 @@
div.ov_modal
{
position: absolute;
}
div.ov_modal_overlay
{
width: 100%;
height: 100%;
left : 0;
top : 0;
position: absolute;
}
@ -83,6 +92,11 @@ div.ov_dialog textarea.ov_dialog_textarea
box-sizing: border-box;
}
div.ov_dialog div.ov_dialog_options
{
height: 50px;
}
div.ov_dialog div.ov_dialog_select
{
margin: 20px 0px;
@ -91,6 +105,7 @@ div.ov_dialog div.ov_dialog_select
div.ov_dialog div.ov_dialog_select div.ov_dialog_select_option
{
width: 40px;
margin-right: 5px;
float: left;
}
@ -202,7 +217,7 @@ div.ov_progress
border-radius: 5px;
}
div.ov_progress svg.ov_progress_img
div.ov_progress div.ov_progress_img svg
{
width: 80px;
height: 80px;

19
website/o3dv/js/dialogs.js
View File

@ -9,9 +9,9 @@ OV.ShowMessageDialog = function (title, message, subMessage)
}
}
]);
$('<div>').addClass ('ov_dialog_message').html (message).appendTo (contentDiv);
OV.AddDiv (contentDiv, 'ov_dialog_message', message);
if (subMessage !== null) {
$('<div>').addClass ('ov_dialog_submessage').html (subMessage).appendTo (contentDiv);
OV.AddDiv (contentDiv, 'ov_dialog_submessage', subMessage);
}
dialog.Show ();
return dialog;
@ -52,22 +52,21 @@ OV.ShowListPopup = function (items, callbacks)
OV.CalculatePopupPositionToElementBottomRight = function (elementDiv, contentDiv)
{
let offset = elementDiv.offset ();
let offset = elementDiv.getBoundingClientRect ();
return {
x : offset.left + elementDiv.outerWidth (false),
y : offset.top + elementDiv.outerHeight (false) - contentDiv.outerHeight (true)
x : offset.left + elementDiv.offsetWidth,
y : offset.top + elementDiv.offsetHeight - contentDiv.offsetHeight
};
};
OV.CalculatePopupPositionToScreen = function (globalMouseCoordinates, contentDiv)
{
let windowObj = $(window);
let windowWidth = windowObj.outerWidth ();
let windowHeight = windowObj.outerHeight ();
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let left = globalMouseCoordinates.x;
let top = globalMouseCoordinates.y;
let right = left + contentDiv.outerWidth (true);
let bottom = top + contentDiv.outerHeight (true);
let right = left + contentDiv.offsetWidth;
let bottom = top + contentDiv.offsetHeight;
if (right > windowWidth) {
left = left - (right - windowWidth);
}

48
website/o3dv/js/exportdialog.js
View File

@ -100,17 +100,15 @@ 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.';
$('<div>').html (text).addClass ('ov_dialog_section').appendTo (contentDiv);
OV.AddDiv (contentDiv, 'ov_dialog_section', text);
let buttonWidth = 40;
let optionsHeight = 50;
let exportFormatSelect = $('<div>').addClass ('ov_dialog_select').appendTo (contentDiv);
this.formatParameters.formatSettingsDiv = $('<div>').addClass ('ov_dialog_section').height (optionsHeight).appendTo (contentDiv);
let exportFormatSelect = OV.AddDiv (contentDiv, 'ov_dialog_select');
this.formatParameters.formatSettingsDiv = OV.AddDiv (contentDiv, 'ov_dialog_section ov_dialog_options');
for (let i = 0; i < this.exportFormats.length; i++) {
let exportFormat = this.exportFormats[i];
let exportFormatButton = $('<div>').addClass ('ov_button').addClass ('outline').addClass ('ov_dialog_select_option').html (exportFormat.name).width (buttonWidth).appendTo (exportFormatSelect);
let exportFormatButton = OV.AddDiv (exportFormatSelect, 'ov_button outline ov_dialog_select_option', exportFormat.name);
this.formatParameters.exportFormatButtonDivs.push (exportFormatButton);
exportFormatButton.click (() => {
exportFormatButton.addEventListener ('click', () => {
this.OnExportFormatSelect (i);
});
}
@ -122,28 +120,32 @@ OV.ExportDialog = class
OnExportFormatSelect (exportFormatIndex)
{
this.formatParameters.formatSettingsDiv.empty ();
OV.ClearDomElement (this.formatParameters.formatSettingsDiv);
for (let i = 0; i < this.formatParameters.exportFormatButtonDivs.length; i++) {
let exportFormatButtonDiv = this.formatParameters.exportFormatButtonDivs[i];
if (i === exportFormatIndex) {
exportFormatButtonDiv.removeClass ('outline');
exportFormatButtonDiv.classList.remove ('outline');
} else {
exportFormatButtonDiv.addClass ('outline');
exportFormatButtonDiv.classList.add ('outline');
}
}
let exportFormat = this.exportFormats[exportFormatIndex];
for (let i = 0; i < exportFormat.formats.length; i++) {
let format = exportFormat.formats[i];
let formatDiv = $('<div>').addClass ('ov_dialog_row').appendTo (this.formatParameters.formatSettingsDiv);
let formatLabel = $('<label>').attr ('for', format.name).appendTo (formatDiv);
let formatInput = $('<input>').addClass ('ov_radio_button').attr ('type', 'radio').attr ('id', format.name).attr ('name', 'format').appendTo (formatLabel);
$('<span>').html (format.name).appendTo (formatLabel);
let formatDiv = OV.AddDiv (this.formatParameters.formatSettingsDiv, 'ov_dialog_row');
let formatLabel = OV.AddDomElement (formatDiv, 'label');
formatLabel.setAttribute ('for', format.name);
let formatInput = OV.AddDomElement (formatLabel, 'input', 'ov_radio_button');
formatInput.setAttribute ('type', 'radio');
formatInput.setAttribute ('id', format.name);
formatInput.setAttribute ('name', 'format');
OV.AddDomElement (formatLabel, 'span', null, format.name);
if (i === 0) {
formatInput.prop ('checked', true);
formatInput.checked = true;
this.formatParameters.selectedFormat = format;
}
formatInput.change (() => {
formatInput.addEventListener ('change', () => {
this.formatParameters.selectedFormat = format;
});
}
@ -205,19 +207,19 @@ OV.ExportDialog = class
]);
let text = 'You can download your exported files here.';
$('<div>').html (text).addClass ('ov_dialog_section').appendTo (contentDiv);
OV.AddDiv (contentDiv, 'ov_dialog_section', text);
let fileListSection = $('<div>').addClass ('ov_dialog_section').appendTo (contentDiv);
let fileList = $('<div>').addClass ('ov_dialog_file_list').addClass ('ov_thin_scrollbar').appendTo (fileListSection);
let fileListSection = OV.AddDiv (contentDiv, 'ov_dialog_section');
let fileList = OV.AddDiv (fileListSection, 'ov_dialog_file_list ov_thin_scrollbar');
for (let i = 0; i < files.length; i++) {
let file = files[i];
let url = OV.CreateObjectUrl (file.GetBufferContent ());
let fileLink = $('<a>').addClass ('ov_dialog_file_link').appendTo (fileList);
fileLink.attr ('href', url);
fileLink.attr ('download', file.GetName ());
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');
$('<div>').addClass ('ov_dialog_file_link_text').html (file.GetName ()).appendTo (fileLink);
OV.AddDiv (fileLink, 'ov_dialog_file_link_text', file.GetName ());
}
dialog.Show ();

90
website/o3dv/js/modal.js
View File

@ -2,7 +2,7 @@ OV.Modal = class
{
constructor ()
{
this.modalDiv = $('<div>').css ('position', 'absolute');
this.modalDiv = OV.CreateDiv ('ov_modal');
this.overlayDiv = null;
this.resizeHandler = null;
this.positionCalculator = null;
@ -33,20 +33,17 @@ OV.Modal = class
Open ()
{
let windowObj = $(window);
let bodyObj = $(document.body);
this.overlayDiv = $('<div>').addClass ('ov_modal_overlay').appendTo (bodyObj);
this.modalDiv.appendTo (bodyObj);
this.overlayDiv = OV.AddDiv (document.body, 'ov_modal_overlay');
document.body.appendChild (this.modalDiv);
this.resizeHandler = this.Resize.bind (this);
windowObj.bind ('resize', this.resizeHandler);
window.addEventListener ('resize', this.resizeHandler);
if (this.closeable) {
this.overlayDiv.click ((ev) => {
this.overlayDiv.addEventListener ('click', (ev) => {
ev.preventDefault ();
this.Close ();
});
this.overlayDiv.contextmenu ((ev) => {
this.overlayDiv.addEventListener ('contextmenu', (ev) => {
ev.preventDefault ();
this.Close ();
});
@ -62,14 +59,14 @@ OV.Modal = class
return;
}
let windowObj = $(window);
windowObj.unbind ('resize', this.resizeHandler);
window.removeEventListener ('resize', this.resizeHandler);
if (this.closeHandler !== null) {
this.closeHandler ();
}
this.modalDiv.remove ();
this.overlayDiv.remove ();
this.overlayDiv = null;
this.resizeHandler = null;
this.isOpen = false;
@ -82,26 +79,17 @@ OV.Modal = class
Resize ()
{
let windowObj = $(window);
let windowWidth = windowObj.outerWidth ();
let windowHeight = windowObj.outerHeight ();
this.overlayDiv.width (windowWidth);
this.overlayDiv.height (windowHeight);
this.overlayDiv.offset ({
left : 0,
top : 0
});
let positionX = (windowWidth - this.modalDiv.outerWidth ()) / 2;
let positionY = (windowHeight - this.modalDiv.outerHeight ()) / 3;
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let positionX = (windowWidth - this.modalDiv.offsetWidth) / 2;
let positionY = (windowHeight - this.modalDiv.offsetHeight) / 3;
if (this.positionCalculator !== null) {
let calculatedPosition = this.positionCalculator ();
positionX = calculatedPosition.x;
positionY = calculatedPosition.y;
}
this.modalDiv.offset ({
left : positionX,
top : positionY
});
this.modalDiv.style.left = positionX + 'px';
this.modalDiv.style.top = positionY + 'px';
}
};
@ -155,16 +143,16 @@ OV.ProgressDialog = class extends OV.Dialog
Init (text)
{
let contentDiv = this.modal.GetContentDiv ();
contentDiv.addClass ('ov_progress');
contentDiv.classList.add ('ov_progress');
$('<svg><use href="assets/images/3dviewer_net_logo.svg#logo"></use></svg>').addClass ('ov_progress_img').appendTo (contentDiv);
this.textDiv = $('<div>').addClass ('ov_progress_text').appendTo (contentDiv);
OV.AddDiv (contentDiv, 'ov_progress_img', '<svg><use href="assets/images/3dviewer_net_logo.svg#logo"></use></svg>');
this.textDiv = OV.AddDiv (contentDiv, 'ov_progress_text');
this.SetText (text);
}
SetText (text)
{
this.textDiv.html (text);
this.textDiv.innerHTML = text;
}
};
@ -179,22 +167,22 @@ OV.ButtonDialog = class extends OV.Dialog
{
function AddButton (button, buttonsDiv)
{
let buttonDiv = $('<div>').addClass ('ov_button').addClass ('ov_dialog_button').html (button.name).appendTo (buttonsDiv);
let buttonDiv = OV.AddDiv (buttonsDiv, 'ov_button ov_dialog_button', button.name);
if (button.subClass) {
buttonDiv.addClass (button.subClass);
buttonDiv.classList.add (button.subClass);
}
buttonDiv.click (() => {
buttonDiv.addEventListener ('click', () => {
button.onClick ();
});
}
let contentDiv = this.modal.GetContentDiv ();
contentDiv.addClass ('ov_dialog');
contentDiv.classList.add ('ov_dialog');
$('<div>').addClass ('ov_dialog_title').html (title).appendTo (contentDiv);
let dialogContentDiv = $('<div>').addClass ('ov_dialog_content').appendTo (contentDiv);
let buttonsDiv = $('<div>').addClass ('ov_dialog_buttons').appendTo (contentDiv);
let buttonsInnerDiv = $('<div>').addClass ('ov_dialog_buttons_inner').appendTo (buttonsDiv);
OV.AddDiv (contentDiv, 'ov_dialog_title', title);
let dialogContentDiv = OV.AddDiv (contentDiv, 'ov_dialog_content');
let buttonsDiv = OV.AddDiv (contentDiv, 'ov_dialog_buttons');
let buttonsInnerDiv = OV.AddDiv (buttonsDiv, 'ov_dialog_buttons_inner');
for (let i = 0; i < buttons.length; i++) {
AddButton (buttons[i], buttonsInnerDiv);
}
@ -213,7 +201,7 @@ OV.PopupDialog = class extends OV.Dialog
Init (positionCalculator)
{
let contentDiv = this.modal.GetContentDiv ();
contentDiv.addClass ('ov_popup');
contentDiv.classList.add ('ov_popup');
this.modal.SetPositionCalculator (positionCalculator);
return contentDiv;
}
@ -230,32 +218,30 @@ OV.ListPopup = class extends OV.PopupDialog
Init (positionCalculator)
{
let contentDiv = super.Init (positionCalculator);
this.listDiv = $('<div>').addClass ('ov_popup_list').addClass ('ov_thin_scrollbar').appendTo (contentDiv);
this.listDiv = OV.AddDiv (contentDiv, 'ov_popup_list ov_thin_scrollbar');
return contentDiv;
}
AddListItem (item, callbacks)
{
let listItemDiv = $('<div>').addClass ('ov_popup_list_item').appendTo (this.listDiv);
let listItemDiv = OV.AddDiv (this.listDiv, 'ov_popup_list_item');
if (item.icon) {
OV.AddSvgIcon (listItemDiv, item.icon, 'left_inline');
}
if (item.color) {
let iconDiv = $('<div>').addClass ('ov_popup_list_item_icon').appendTo (listItemDiv);
let iconDiv = OV.AddDiv (listItemDiv, 'ov_popup_list_item_icon');
let colorCircle = OV.CreateInlineColorCircle (item.color);
colorCircle.appendTo (iconDiv);
}
$('<div>').addClass ('ov_popup_list_item_name').html (item.name).appendTo (listItemDiv);
listItemDiv.click (callbacks.onClick);
OV.AddDiv (listItemDiv, 'ov_popup_list_item_name', item.name);
listItemDiv.addEventListener ('click', callbacks.onClick);
if (OV.IsHoverEnabled () && callbacks.onHoverStart && callbacks.onHoverStop) {
listItemDiv.hover (
() => {
callbacks.onHoverStart ();
},
() => {
callbacks.onHoverStop ();
}
);
listItemDiv.addEventListener ('mouseover', () => {
callbacks.onHoverStart ();
});
listItemDiv.addEventListener ('mouseout', () => {
callbacks.onHoverStop ();
});
}
}
};

4
website/o3dv/js/navigatorpanels.js
View File

@ -72,7 +72,7 @@ OV.NavigatorMeshesPopupButton = class extends OV.NavigatorPopupButton
this.popup = OV.ShowListPopup (meshItems, {
calculatePosition : (contentDiv) => {
return OV.CalculatePopupPositionToElementBottomRight (this.button, contentDiv);
return OV.CalculatePopupPositionToElementBottomRight (this.button.get (0), contentDiv);
},
onHoverStart : (index) => {
const meshData = this.meshInfoArray[index];
@ -129,7 +129,7 @@ OV.NavigatorMaterialsPopupButton = class extends OV.NavigatorPopupButton
this.popup = OV.ShowListPopup (materialItems, {
calculatePosition : (contentDiv) => {
return OV.CalculatePopupPositionToElementBottomRight (this.button, contentDiv);
return OV.CalculatePopupPositionToElementBottomRight (this.button.get (0), contentDiv);
},
onClick : (index) => {
let usedMaterial = this.materialInfoArray[index];

9
website/o3dv/js/openurldialog.js
View File

@ -1,4 +1,3 @@
OV.ShowOpenUrlDialog = function (onOk)
{
function CorrectFileHostUrls (urls)
@ -25,7 +24,7 @@ OV.ShowOpenUrlDialog = function (onOk)
}
let dialog = new OV.ButtonDialog ();
let urlsTextArea = $('<textarea>').addClass ('ov_dialog_textarea');
let urlsTextArea = OV.CreateDomElement ('textarea', 'ov_dialog_textarea');
let contentDiv = dialog.Init ('Open Model from Url', [
{
name : 'Cancel',
@ -38,7 +37,7 @@ OV.ShowOpenUrlDialog = function (onOk)
name : 'OK',
onClick () {
let urls = [];
OV.ReadLines (urlsTextArea.val (), (line) => {
OV.ReadLines (urlsTextArea.value, (line) => {
urls.push (line);
});
dialog.Hide ();
@ -48,8 +47,8 @@ OV.ShowOpenUrlDialog = function (onOk)
}
]);
let text = 'Here you can load models based on their urls. You can add more lines if your model builds up from multiple files.';
$('<div>').html (text).addClass ('ov_dialog_section').appendTo (contentDiv);
urlsTextArea.appendTo (contentDiv);
OV.AddDiv (contentDiv, 'ov_dialog_section', text);
contentDiv.appendChild (urlsTextArea);
dialog.Show ();
urlsTextArea.focus ();
return dialog;

61
website/o3dv/js/sharingdialog.js
View File

@ -2,12 +2,16 @@ OV.ShowSharingDialog = function (importer, settings, camera)
{
function AddCheckboxLine (parentDiv, text, id, onChange)
{
let line = $('<div>').addClass ('ov_dialog_row').appendTo (parentDiv);
let label = $('<label>').attr ('for', id).appendTo (line);
let check = $('<input>').attr ('type', 'checkbox').attr ('checked', 'true').addClass ('ov_checkbox').attr ('id', id).appendTo (label);
$('<span>').html (text).appendTo (label);
check.change (() => {
onChange (check.prop ('checked'));
let line = OV.AddDiv (parentDiv, 'ov_dialog_row');
let label = OV.AddDomElement (line, 'label');
label.setAttribute ('for', id);
let check = OV.AddDomElement (label, 'input', 'ov_checkbox');
check.setAttribute ('type', 'checkbox');
check.setAttribute ('checked', 'true');
check.setAttribute ('id', id);
OV.AddDomElement (label, 'span', null, text);
check.addEventListener ('change', () => {
onChange (check.checked);
});
}
@ -41,16 +45,20 @@ OV.ShowSharingDialog = function (importer, settings, camera)
{
let copyText = 'Copy';
let copiedText = 'Copied';
let container = $('<div>').addClass ('ov_dialog_copyable_input').appendTo (parentDiv);
let input = $('<input>').addClass ('ov_dialog_text').prop ('readonly', true).appendTo (container);
let button = $('<div>').addClass ('ov_button').addClass ('outline').addClass ('ov_dialog_copyable_input_button').html (copyText).appendTo (container);
button.click (() => {
let container = OV.AddDiv (parentDiv, 'ov_dialog_copyable_input');
let input = OV.AddDomElement (container, 'input', 'ov_dialog_text');
input.readOnly = true;
let button = OV.AddDiv (container, 'ov_button outline ov_dialog_copyable_input_button', copyText);
button.addEventListener ('click', () => {
OV.CopyToClipboard (getText ());
button.fadeOut (200, () => {
button.html (copiedText).fadeIn (200);
let jqButton = $(button); // TODO
jqButton.fadeOut (200, () => {
button.innerHTML = copiedText;
jqButton.fadeIn (200);
setTimeout (() => {
button.fadeOut (200, () => {
button.html (copyText).fadeIn (200);
jqButton.fadeOut (200, () => {
button.innerHTML = copyText;
jqButton.fadeIn (200);
});
}, 2000);
});
@ -60,35 +68,36 @@ OV.ShowSharingDialog = function (importer, settings, camera)
function AddSharingLinkTab (parentDiv, sharingLinkParams)
{
let section = $('<div>').addClass ('ov_dialog_section').appendTo (parentDiv);
$('<div>').html ('Sharing Link').addClass ('ov_dialog_inner_title').appendTo (section);
let section = OV.AddDiv (parentDiv, 'ov_dialog_section');
OV.AddDiv (section, 'ov_dialog_inner_title', 'Sharing Link');
let sharingLinkInput = AddCopyableTextInput (section, () => {
return GetSharingLink (sharingLinkParams);
});
sharingLinkInput.val (GetSharingLink (sharingLinkParams));
});
sharingLinkInput.value = GetSharingLink (sharingLinkParams);
}
function AddEmbeddingCodeTab (parentDiv, settings, embeddingCodeParams)
{
let section = $('<div>').addClass ('ov_dialog_section').css ('margin-top', '20px').appendTo (parentDiv);
$('<div>').html ('Embedding Code').addClass ('ov_dialog_inner_title').appendTo (section);
let optionsSection = $('<div>').addClass ('ov_dialog_section').appendTo (section);
let section = OV.AddDiv (parentDiv, 'ov_dialog_section');
section.style.marginTop = '20px';
OV.AddDiv (section, 'ov_dialog_inner_title', 'Embedding Code');
let optionsSection = OV.AddDiv (section, 'ov_dialog_section');
let embeddingCodeInput = AddCopyableTextInput (section, () => {
return GetEmbeddingCode (embeddingCodeParams);
});
AddCheckboxLine (optionsSection, 'Use current camera position', 'embed_camera', (checked) => {
embeddingCodeParams.camera = checked ? camera : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
embeddingCodeInput.value = GetEmbeddingCode (embeddingCodeParams);
});
AddCheckboxLine (optionsSection, 'Use overridden background color', 'embed_background', (checked) => {
embeddingCodeParams.backgroundColor = checked ? settings.backgroundColor : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
embeddingCodeInput.value = GetEmbeddingCode (embeddingCodeParams);
});
AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', (checked) => {
embeddingCodeParams.defaultColor = checked ? settings.defaultColor : null;
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
embeddingCodeInput.value = GetEmbeddingCode (embeddingCodeParams);
});
embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
embeddingCodeInput.value = GetEmbeddingCode (embeddingCodeParams);
}
if (!importer.GetFileList ().IsOnlyUrlSource ()) {
@ -98,7 +107,7 @@ OV.ShowSharingDialog = function (importer, settings, camera)
null
);
}
let files = importer.GetFileList ().GetFiles ();
let modelFiles = [];
for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {