From a99730a95f048290135afd812c3071e3f54c9562 Mon Sep 17 00:00:00 2001
From: Viktor Kovacs <viktorkovacs@gmail.com>
Date: Wed, 14 Apr 2021 19:51:20 +0200
Subject: [PATCH] Copy sharing url.

---
 .../images/toolbar/{embed.svg => share.svg}   |   0
 website/info/index.html                       |   6 +-
 website/o3dv/dialogs.js                       | 129 ++++++++++++------
 website/o3dv/exportdialog.js                  |   2 +-
 website/o3dv/website.css                      |  48 ++++++-
 website/o3dv/website.js                       |   4 +-
 6 files changed, 140 insertions(+), 49 deletions(-)
 rename website/assets/images/toolbar/{embed.svg => share.svg} (100%)

diff --git a/website/assets/images/toolbar/embed.svg b/website/assets/images/toolbar/share.svg
similarity index 100%
rename from website/assets/images/toolbar/embed.svg
rename to website/assets/images/toolbar/share.svg
diff --git a/website/info/index.html b/website/info/index.html
index 5a994b3..33a567a 100644
--- a/website/info/index.html
+++ b/website/info/index.html
@@ -173,7 +173,7 @@
 		<h2 id="embedding_viewer">Embedding the viewer</h2>
 		<p>
 			The website allows you to embed a 3D model in your page. It works only if your models are <a href="#loading_models_server">hosted on a web server</a>.
-			To get the embedding code, click on the embedding button (<img class="inline" src="../assets/images/toolbar/embed.svg"/>) in the toolbar.
+			To get the embedding code, click on the share model button (<img class="inline" src="../assets/images/toolbar/share.svg"/>) in the toolbar.
 		</p>
 
 		<h3 id="embed_github">Embedding models hosted on GitHub</h3>
@@ -191,7 +191,7 @@
 						https://github.com/kovacsv/Online3DViewer/blob/master/test/testfiles/3ds/texture.png
 					</div>
 				</li>
-				<li>Click on OK, and if the model is loaded, click on the embed button in the toolbar (<img class="inline" src="../assets/images/toolbar/embed.svg"/>).</li>
+				<li>Click on OK, and if the model is loaded, click on the share button in the toolbar (<img class="inline" src="../assets/images/toolbar/share.svg"/>).</li>
 			</ol>
 		</p>
 
@@ -210,7 +210,7 @@
 						https://www.dropbox.com/s/6dfk1jveevbofxm/texture.png?dl=0
 					</div>
 				</li>
-				<li>Click on OK, and if the model is loaded, click on the embed button in the toolbar (<img class="inline" src="../assets/images/toolbar/embed.svg"/>).</li>
+				<li>Click on OK, and if the model is loaded, click on the share button in the toolbar (<img class="inline" src="../assets/images/toolbar/share.svg"/>).</li>
 			</ol>
 		</p>		
 
diff --git a/website/o3dv/dialogs.js b/website/o3dv/dialogs.js
index 2cb6822..426c1b7 100644
--- a/website/o3dv/dialogs.js
+++ b/website/o3dv/dialogs.js
@@ -77,18 +77,27 @@ OV.ShowOpenUrlDialog = function (onOk)
     return dialog;
 };
 
-OV.ShowEmbeddingDialog = function (importer, importSettings, camera)
+OV.ShowSharingDialog = function (importer, importSettings, camera)
 {
-    function AddCheckboxLine (parentDiv, text, onChange)
+    function AddCheckboxLine (parentDiv, text, id, onChange)
     {
         let line = $('<div>').addClass ('ov_dialog_table_row').appendTo (parentDiv);
-        let check = $('<input>').attr ('type', 'checkbox').attr ('checked', 'true').appendTo (line);
-        $('<span>').html (text).appendTo (line);
+        let check = $('<input>').attr ('type', 'checkbox').attr ('checked', 'true').addClass ('ov_dialog_checkradio').attr ('id', id).appendTo (line);
+        $('<label>').attr ('for', id).html (text).appendTo (line);
         check.change (function () {
             onChange (check.prop ('checked'));
         });
     }
 
+    function GetSharingLink (params)
+    {
+        let builder = OV.CreateUrlBuilder ();
+        builder.AddModelUrls (params.files);
+        builder.AddColor (params.color);
+        let hashParameters = builder.GetParameterList ();
+        return 'https://3dviewer.net#' + hashParameters;
+    }
+
     function GetEmbeddingCode (params)
     {
         let builder = OV.CreateUrlBuilder ();
@@ -106,6 +115,70 @@ OV.ShowEmbeddingDialog = function (importer, importSettings, camera)
         return embeddingCode;
     }
 
+    function AddCopyableTextInput (parentDiv, getText)
+    {
+        let copyText = 'copy';
+        let copiedText = 'copied';
+        let container = $('<div>').addClass ('ov_dialog_copyable_input').appendTo (parentDiv);
+        let input = $('<input>').prop ('readonly', true).appendTo (container);
+        let button = $('<div>').addClass ('button').html (copyText).appendTo (container);
+        button.click (function () {
+            OV.CopyToClipboard (getText ());
+            button.fadeOut (200, function () {
+                button.html (copiedText).fadeIn (200);
+                setTimeout (function () {
+                    button.fadeOut (200, function () {
+                        button.html (copyText).fadeIn (200);
+                    });
+                }, 2000);
+            });
+        });
+        return input;
+    }
+
+    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 optionsSection = null;
+        if (OV.FeatureSet.SetDefaultColor) {
+            optionsSection = $('<div>').addClass ('ov_dialog_section').appendTo (section);
+        }
+        let sharingLinkInput = AddCopyableTextInput (section, function () {
+            return GetSharingLink (sharingLinkParams);
+        });
+        if (OV.FeatureSet.SetDefaultColor) {
+            AddCheckboxLine (optionsSection, 'Use overridden default color', 'share_color', function (checked) {
+                sharingLinkParams.color = checked ? importSettings.defaultColor : null;
+                sharingLinkInput.val (GetSharingLink (sharingLinkParams));
+            });
+            sharingLinkParams.color = importSettings.defaultColor;
+        }        
+        sharingLinkInput.val (GetSharingLink (sharingLinkParams));
+    }
+
+    function AddEmbeddingCodeTab (parentDiv, 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 embeddingCodeInput = AddCopyableTextInput (section, function () {
+            return GetEmbeddingCode (embeddingCodeParams);
+        });
+        AddCheckboxLine (optionsSection, 'Use current camera position', 'embed_camera', function (checked) {
+            embeddingCodeParams.camera = checked ? camera : null;
+            embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
+        });
+        if (OV.FeatureSet.SetDefaultColor) {
+            AddCheckboxLine (optionsSection, 'Use overridden default color', 'embed_color', function (checked) {
+                embeddingCodeParams.color = checked ? importSettings.defaultColor : null;
+                embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
+            });
+            embeddingCodeParams.color = importSettings.defaultColor;
+        }
+        embeddingCodeInput.val (GetEmbeddingCode (embeddingCodeParams));
+    }
+
     if (!importer.IsOnlyFileSource (OV.FileSource.Url)) {
         return OV.ShowMessageDialog (
             'Embedding Failed',
@@ -121,15 +194,19 @@ OV.ShowEmbeddingDialog = function (importer, importSettings, camera)
         modelFiles.push (file.fileUrl);
     }
 
-    let embeddingParams = {
+    let sharingLinkParams = {
+        files : modelFiles,
+        color : null
+    };
+
+    let embeddingCodeParams = {
         files : modelFiles,
         camera : camera,
         color : null
     };
 
     let dialog = new OV.ButtonDialog ();
-    let urlsTextArea = $('<textarea>').attr ('readonly', 'true').addClass ('ov_dialog_textarea');
-    let contentDiv = dialog.Init ('Embedding', [
+    let contentDiv = dialog.Init ('Share', [
         {
             name : 'Close',
             onClick () {
@@ -138,41 +215,8 @@ OV.ShowEmbeddingDialog = function (importer, importSettings, camera)
         }
     ]);
 
-    let text = 'Embedding options:';
-    $('<div>').html (text).addClass ('ov_dialog_section').appendTo (contentDiv);
-    let optionsSection = $('<div>').addClass ('ov_dialog_section').appendTo (contentDiv);
-
-    AddCheckboxLine (optionsSection, 'Use current camera position', function (checked) {
-        embeddingParams.camera = checked ? camera : null;
-        urlsTextArea.val (GetEmbeddingCode (embeddingParams));
-    });
-
-    if (OV.FeatureSet.SetDefaultColor) {
-        AddCheckboxLine (optionsSection, 'Use overridden default color', function (checked) {
-            embeddingParams.color = checked ? importSettings.defaultColor : null;
-            urlsTextArea.val (GetEmbeddingCode (embeddingParams));
-        });
-        embeddingParams.color = importSettings.defaultColor;
-    }
-
-    urlsTextArea.val (GetEmbeddingCode (embeddingParams));
-
-    urlsTextArea.appendTo (contentDiv);
-    let copyToClipboardText = 'copy to clipboard';
-    let copiedToClipboardText = 'successfully copied';
-    let innerButtonContainer = $('<div>').addClass ('ov_dialog_inner_buttons').appendTo (contentDiv);
-    let copyButton = $('<div>').addClass ('ov_dialog_inner_button').html (copyToClipboardText).appendTo (innerButtonContainer);
-    copyButton.click (function () {
-        OV.CopyToClipboard (urlsTextArea.val ());
-        copyButton.fadeOut (200, function () {
-            copyButton.html (copiedToClipboardText).fadeIn (200);
-            setTimeout (function () {
-                copyButton.fadeOut (200, function () {
-                    copyButton.html (copyToClipboardText).fadeIn (200);
-                });
-            }, 2000);
-        });
-    });
+    AddSharingLinkTab (contentDiv, sharingLinkParams);
+    AddEmbeddingCodeTab (contentDiv, embeddingCodeParams);
 
     dialog.Show ();
     return dialog;
@@ -205,6 +249,7 @@ OV.ShowSettingsDialog = function (importSettings, onOk)
     $('<div>').html ('Default Color').addClass ('ov_dialog_table_row_name').appendTo (colorRow);
     let valueColumn = $('<div>').addClass ('ov_dialog_table_row_value').appendTo (colorRow);
     let colorInput = $('<input>').attr ('type', 'color').addClass ('ov_dialog_color').appendTo (valueColumn);
+    $('<span>').addClass ('ov_dialog_table_row_comment').html ('(For surfaces with no material)').appendTo (valueColumn);
     colorInput.val ('#' + OV.ColorToHexString (dialogSettings.defaultColor));
     colorInput.change (function () {
         let colorStr = colorInput.val ().substr (1);
diff --git a/website/o3dv/exportdialog.js b/website/o3dv/exportdialog.js
index f7616b0..a586a10 100644
--- a/website/o3dv/exportdialog.js
+++ b/website/o3dv/exportdialog.js
@@ -132,7 +132,7 @@ OV.ExportDialog = class
         for (let i = 0; i < exportFormat.formats.length; i++) {
             let format = exportFormat.formats[i];
             let formatDiv = $('<div>').addClass ('ov_dialog_table_row').appendTo (this.formatParameters.formatSettingsDiv);
-            let formatInput = $('<input>').addClass ('ov_dialog_table_radio').attr ('type', 'radio').attr ('id', format.name).attr ('name', 'format').appendTo (formatDiv);
+            let formatInput = $('<input>').addClass ('ov_dialog_checkradio').attr ('type', 'radio').attr ('id', format.name).attr ('name', 'format').appendTo (formatDiv);
             $('<label>').attr ('for', format.name).html (format.name).appendTo (formatDiv);
             if (i === 0) {
                 formatInput.prop ('checked', true);
diff --git a/website/o3dv/website.css b/website/o3dv/website.css
index 30d42fc..49bbf73 100644
--- a/website/o3dv/website.css
+++ b/website/o3dv/website.css
@@ -385,6 +385,12 @@ div.ov_dialog div.ov_dialog_title
 	font-weight: bold;
 }
 
+div.ov_dialog div.ov_dialog_inner_title
+{
+	font-weight: bold;
+	margin-bottom: 10px;
+}
+
 div.ov_dialog div.ov_dialog_content
 {
 	padding: 20px 0px;
@@ -477,6 +483,7 @@ div.ov_dialog input.ov_dialog_color
 {
 	width: 36px;
 	height: 18px;
+	margin-right: 10px;
 }
 
 div.ov_dialog div.ov_dialog_file_list
@@ -506,6 +513,39 @@ div.ov_dialog div.ov_dialog_file_link_text
 	float: left;
 }
 
+div.ov_dialog div.ov_dialog_copyable_input
+{
+	padding: 3px;
+	border: 1px solid #dddddd;
+	border-radius: 5px;
+	overflow: auto;
+}
+
+div.ov_dialog div.ov_dialog_copyable_input input
+{
+	color: #666666;
+	width: 70%;
+	margin-top: 6px;
+	box-sizing: border-box;
+	outline: none;
+	float: left;
+	border: 0px;
+	box-sizing: border-box;
+}
+
+div.ov_dialog div.ov_dialog_copyable_input div.button
+{
+	color: #3393bd;
+	width: 28%;
+	text-align: center;
+	padding: 3px;
+	border: 1px solid #3393bd;
+	border-radius: 5px;
+	box-sizing: border-box;
+	cursor: pointer;
+	float: right;
+}
+
 div.ov_dialog div.ov_dialog_inner_buttons
 {
 	margin-bottom: 10px;
@@ -536,7 +576,13 @@ div.ov_dialog div.ov_dialog_table_row_value
 	float: left;
 }
 
-div.ov_dialog input.ov_dialog_table_radio
+div.ov_dialog span.ov_dialog_table_row_comment
+{
+	color: #444444;
+	font-size: 15px;
+}
+
+div.ov_dialog input.ov_dialog_checkradio
 {
 	margin-right: 10px;
 }
diff --git a/website/o3dv/website.js b/website/o3dv/website.js
index 54487ae..2108949 100644
--- a/website/o3dv/website.js
+++ b/website/o3dv/website.js
@@ -287,8 +287,8 @@ OV.Website = class
             });
             exportDialog.Show (obj.model, obj.viewer);
         });
-        AddButton (this.toolbar, 'embed', 'Get embedding code', true, function () {
-            obj.dialog = OV.ShowEmbeddingDialog (importer, obj.importSettings, obj.viewer.GetCamera ());
+        AddButton (this.toolbar, 'share', 'Share model', true, function () {
+            obj.dialog = OV.ShowSharingDialog (importer, obj.importSettings, obj.viewer.GetCamera ());
         });
         if (OV.FeatureSet.SetDefaultColor) {
             AddSeparator (this.toolbar, true);