x_ite 4.2.17 → 4.7.7

package/src/x_ite/Browser/Core/ContextMenu.js

@@ -49,23 +49,22 @@
 
 define ([
 	"jquery",
-	"contextMenu",
 	"x_ite/Basic/X3DBaseNode",
 	"locale/gettext",
+	"contextMenu",
 	"lib/jquery.fullscreen-min",
 ],
 function ($,
-          contextMenu,
           X3DBaseNode,
           _)
 {
 "use strict";
-	
-	$("head") .append ('<style>.x_ite-private-menu-title:before { content: "' + _("X_ITE Browser") + '" }</style>');
 
 	function ContextMenu (executionContext)
 	{
 		X3DBaseNode .call (this, executionContext);
+
+		this .active = false;
 	}
 
 	ContextMenu .prototype = Object .assign (Object .create (X3DBaseNode .prototype),
@@ -87,26 +86,70 @@ function ($,
 		{
 			X3DBaseNode .prototype .initialize .call (this);
 
-			var browser = this .getBrowser ();
+			const browser = this .getBrowser ();
 
 			if (! browser .getBrowserOptions () .getContextMenu ())
 				return;
 
 			$.contextMenu ({
-				selector: ".x_ite-private-surface-" + browser .getId (), 
+				selector: ".x_ite-private-browser-" + browser .getId (),
 				build: this .build .bind (this),
+				animation: {duration: 500, show: "fadeIn", hide: "fadeOut"},
+				hideOnSecondTrigger: true,
+				events:
+				{
+					show: function (options)
+					{
+						this .active = true;
+
+						if (browser .getElement () .fullScreen ())
+						{
+							browser .getElement () .append (options .$menu);
+
+							setTimeout (function ()
+							{
+								browser .getElement () .append (options .$layer .css ({
+									position: "absolute",
+									width: "100%",
+									height: "100%",
+								}));
+							},
+							1);
+						}
+
+						// Display submenus on left side if there is no space on right side.
+
+						if (options .$menu .hasClass ("x_ite-private-menu-submenus-left"))
+						{
+							options .$menu .find (".context-menu-item > .context-menu-list") .css ({
+								"right": options .$menu .width () + "px",
+							});
+						}
+					}
+					.bind (this),
+					hide: function (options)
+					{
+						this .active = false;
+					}
+					.bind (this),
+				},
 			});
 		},
+		getActive: function ()
+		{
+			return this .active;
+		},
 		build: function (trigger, event)
 		{
-			var
+			const
 				browser          = this .getBrowser (),
 				activeLayer      = browser .getActiveLayer (),
 				currentViewpoint = activeLayer ? activeLayer .getViewpoint () : null,
 				currentViewer    = browser .viewer_ .getValue (),
-				fullscreen       = browser .getElement () .fullScreen ();
+				fullscreen       = browser .getElement () .fullScreen (),
+				leftSubMenus     = $(document) .width () - event .pageX < 370;
 
-			var menu = {
+			const menu = {
 				className: "x_ite-private-menu x_ite-private-menu-title",
 				items: {
 					"separator0": "--------",
@@ -116,13 +159,11 @@ function ($,
 						items: this .getViewpoints (),
 						callback: function (viewpoint)
 						{
-							$("body > ul.context-menu-list") .fadeOut (500);
-
 							if (! viewpoint)
 								return;
 
-							browser .bindViewpoint (viewpoint);
-							browser .getElement () .focus ();
+							browser .bindViewpoint (browser .getActiveLayer (), viewpoint);
+							browser .getSurface () .focus ();
 						}
 						.bind (this, currentViewpoint),
 					},
@@ -132,11 +173,9 @@ function ($,
 						className: "context-menu-icon x_ite-private-icon-" + currentViewer .toLowerCase () + "-viewer",
 						callback: function (viewer)
 						{
-							$("body > ul.context-menu-list") .fadeOut (500);
-
 							browser .viewer_ = viewer;
 							browser .getNotification () .string_ = _(this .getViewerName (viewer));
-							browser .getElement () .focus ();
+							browser .getSurface () .focus ();
 						}
 						.bind (this, currentViewer),
 					},
@@ -149,22 +188,20 @@ function ($,
 						type: "checkbox",
 						selected: browser .getBrowserOption ("StraightenHorizon"),
 						events: {
-							click: function ()
+							click: function (event)
 							{
-								$("body > ul.context-menu-list") .fadeOut (500);
-
-								var straightenHorizon = ! browser .getBrowserOption ("StraightenHorizon");
+								const straightenHorizon = $(event .target) .is (":checked");
 
 								browser .setBrowserOption ("StraightenHorizon", straightenHorizon);
 
 								if (straightenHorizon)
 								{
 									browser .getNotification () .string_ = _("Straighten Horizon") + ": " + _("on");
-									
-									var activeViewpoint = browser .getActiveViewpoint ();
+
+									const activeViewpoint = browser .getActiveViewpoint ();
 
 									if (activeViewpoint)
-										activeViewpoint .straighten (true);
+										activeViewpoint .straighten (browser .getActiveLayer (), true);
 								}
 								else
 								{
@@ -187,8 +224,6 @@ function ($,
 								events: {
 									click: function ()
 									{
-										$("body > ul.context-menu-list") .fadeOut (500);
-
 										browser .setBrowserOption ("PrimitiveQuality", "HIGH");
 										browser .getNotification () .string_ = _("Primitive Quality") + ": " + _("high");
 									}
@@ -203,8 +238,6 @@ function ($,
 								events: {
 									click: function ()
 									{
-										$("body > ul.context-menu-list") .fadeOut (500);
-
 										browser .setBrowserOption ("PrimitiveQuality", "MEDIUM");
 										browser .getNotification () .string_ = _("Primitive Quality") + ": " + _("medium");
 									}
@@ -219,8 +252,6 @@ function ($,
 								events: {
 									click: function ()
 									{
-										$("body > ul.context-menu-list") .fadeOut (500);
-
 										browser .setBrowserOption ("PrimitiveQuality", "LOW");
 										browser .getNotification () .string_ = _("Primitive Quality") + ": " + _("low");
 									}
@@ -241,8 +272,6 @@ function ($,
 								events: {
 									click: function ()
 									{
-										$("body > ul.context-menu-list") .fadeOut (500);
-
 										browser .setBrowserOption ("TextureQuality", "HIGH");
 										browser .getNotification () .string_ = _("Texture Quality") + ": " + _("high");
 									}
@@ -257,8 +286,6 @@ function ($,
 								events: {
 									click: function ()
 									{
-										$("body > ul.context-menu-list") .fadeOut (500);
-
 										browser .setBrowserOption ("TextureQuality", "MEDIUM");
 										browser .getNotification () .string_ = _("Texture Quality") + ": " + _("medium");
 									}
@@ -273,8 +300,6 @@ function ($,
 								events: {
 									click: function ()
 									{
-										$("body > ul.context-menu-list") .fadeOut (500);
-
 										browser .setBrowserOption ("TextureQuality", "LOW");
 										browser .getNotification () .string_ = _("Texture Quality") + ": " + _("low");
 									}
@@ -288,11 +313,9 @@ function ($,
 						type: "checkbox",
 						selected: browser .getBrowserOption ("Rubberband"),
 						events: {
-							click: function ()
+							click: function (event)
 							{
-								$("body > ul.context-menu-list") .fadeOut (500);
-
-								var rubberband = ! browser .getBrowserOption ("Rubberband");
+								const rubberband = $(event .target) .is (":checked");
 
 								browser .setBrowserOption ("Rubberband", rubberband);
 
@@ -304,46 +327,99 @@ function ($,
 							.bind (this),
 						},
 					},
-					"browser-timings": browser .getBrowserOptions () .getTimings () ? {
+					"browser-timings": {
 						name: _("Browser Timings"),
 						type: "checkbox",
-						selected: browser .getBrowserTimings () .getEnabled (),
+						selected: browser .getBrowserOption ("Timings"),
 						events: {
-							click: function ()
+							click: function (event)
 							{
-								$("body > ul.context-menu-list") .fadeOut (500);
-
-								browser .getBrowserTimings () .setEnabled (! browser .getBrowserTimings () .getEnabled ());
-								browser .getElement () .focus ();
+								browser .setBrowserOption ("Timings", $(event .target) .is (":checked"));
+								browser .getSurface () .focus ();
 							}
 							.bind (this),
 						},
-					} : undefined,
+					},
 					"fullscreen": {
 						name: fullscreen ? _("Leave Fullscreen") : _("Fullscreen"),
 						className: "context-menu-icon " + (fullscreen ? "x_ite-private-icon-leave-fullscreen" : "x_ite-private-icon-fullscreen"),
 						callback: function ()
 						{
-							$("body > ul.context-menu-list") .fadeOut (500);
-
 							browser .getElement () .toggleFullScreen ();
 						}
 						.bind (this),
 					},
 					"separator3": "--------",
+					"world-info": {
+						name: _("Show World Info"),
+						className: "context-menu-icon x_ite-private-icon-world-info",
+						callback: function ()
+						{
+							define .show ();
+
+							require (["https://cdn.jsdelivr.net/gh/showdownjs/showdown@1.9.1/dist/showdown.min.js"], function (showdown)
+							{
+								define .hide ();
+
+								browser .getElement () .find (".x_ite-private-world-info") .remove ();
+
+								const
+									converter = new showdown .Converter (),
+									priv      = browser .getElement () .find (".x_ite-private-browser"),
+									overlay   = $("<div></div>") .addClass ("x_ite-private-world-info-overlay") .appendTo (priv),
+									div       = $("<div></div>") .addClass ("x_ite-private-world-info") .appendTo (overlay),
+									worldInfo = browser .getExecutionContext () .getWorldInfos () [0],
+									title     = worldInfo .title,
+									info      = worldInfo .info;
+
+								converter .setOption ("omitExtraWLInCodeBlocks",            true);
+								converter .setOption ("simplifiedAutoLink",                 true);
+								converter .setOption ("excludeTrailingPunctuationFromURLs", true);
+								converter .setOption ("literalMidWordUnderscores",          true);
+								converter .setOption ("strikethrough",                      true);
+								converter .setOption ("openLinksInNewWindow",               false);
+
+								$("<div></div>") .addClass ("x_ite-private-world-info-top") .text ("World Info") .appendTo (div);
+
+								if (title .length)
+								{
+									$("<div></div>") .addClass ("x_ite-private-world-info-title") .text (title) .appendTo (div);
+								}
+
+								for (const line of info)
+								{
+									$("<div></div>") .addClass ("x_ite-private-world-info-info") .html (converter .makeHtml (line)) .appendTo (div);
+								}
+
+								div .find ("a") .on ("click", function (event) { event .stopPropagation (); });
+
+								// Open external link in new tab.
+								div .find ("a[href^=http]") .each (function ()
+								{
+									if (this .href .indexOf (location .hostname) !== -1)
+										return;
+
+									$(this) .attr ("target", "_blank");
+								});
+
+								overlay .on ("click", function () { overlay .remove (); });
+							})
+						},
+					},
 					"about": {
 						name: _("About X_ITE"),
 						className: "context-menu-icon x_ite-private-icon-help-about",
 						callback: function ()
 						{
-							$("body > ul.context-menu-list") .fadeOut (500);
-
-							window .open ("http://create3000.de/x_ite/");
+							window .open (browser .getProviderUrl ());
 						},
 					},
 				}
 			};
 
+			if (leftSubMenus)
+				menu .className += " x_ite-private-menu-submenus-left";
+
 			if ($.isEmptyObject (menu .items .viewpoints .items))
 			{
 				delete menu .items ["separator0"];
@@ -355,11 +431,18 @@ function ($,
 				delete menu .items ["available-viewers"];
 			}
 
-			if (!(browser .getCurrentViewer () == "EXAMINE" && browser .getActiveViewpoint () .getTypeName () !== "GeoViewpoint"))
+			if (!browser .getCurrentViewer () .match (/^(?:EXAMINE|FLY)$/) || (currentViewpoint && currentViewpoint .getTypeName () === "GeoViewpoint"))
 			{
 				delete menu .items ["straighten-horizon"];
 			}
 
+			const worldInfo = browser .getExecutionContext () .getWorldInfos () [0];
+
+			if (!worldInfo || (worldInfo .title .length === 0 && worldInfo .info .length === 0))
+			{
+				delete menu .items ["world-info"];
+			}
+
 			return menu;
 		},
 		getViewpoints: function ()
@@ -394,10 +477,8 @@ function ($,
 					name: description,
 					callback: function (viewpoint)
 					{
-						$("body > ul.context-menu-list") .fadeOut (500);
-
-						browser .bindViewpoint (viewpoint);
-						browser .getElement () .focus ();
+						browser .bindViewpoint (browser .getActiveLayer (), viewpoint);
+						browser .getSurface () .focus ();
 					}
 					.bind (this, viewpoint),
 				};
@@ -427,11 +508,9 @@ function ($,
 					className: "context-menu-icon x_ite-private-icon-" + viewer .toLowerCase () + "-viewer",
 					callback: function (viewer)
 					{
-						$("body > ul.context-menu-list") .fadeOut (500);
-						
 						browser .viewer_ = viewer;
 						browser .getNotification () .string_ = _(this .getViewerName (viewer));
-						browser .getElement () .focus ();
+						browser .getSurface () .focus ();
 					}
 					.bind (this, viewer),
 				};

package/src/x_ite/Browser/Core/Notification.js

@@ -57,7 +57,7 @@ function ($,
           X3DBaseNode)
 {
 "use strict";
-	
+
 	$.fn.textWidth = function (string)
 	{
 		var children = $(this) .children ();
@@ -94,7 +94,7 @@ function ($,
 
 			this .element = $("<div></div>")
 				.addClass ("x_ite-private-notification")
-				.appendTo (this .getBrowser () .getElement () .find (".x_ite-private-surface"))
+				.appendTo (this .getBrowser () .getSurface ())
 				.animate ({ width: 0 });
 
 			$("<span></span>") .appendTo (this .element);
@@ -111,7 +111,7 @@ function ($,
 
 			this .element .children () .text (this .string_ .getValue ());
 
-			this .element 
+			this .element
 				.stop (true, true)
 				.fadeIn (0)
 				.animate ({ width: this .element .textWidth () })

package/src/x_ite/Browser/Core/PrimitiveQuality.js

@@ -50,19 +50,15 @@
 define (function ()
 {
 "use strict";
-	
-	var i = 0;
 
-	var PrimitiveQuality =
+	let i = 0;
+
+	const PrimitiveQuality =
 	{
 		LOW:    i ++,
 		MEDIUM: i ++,
 		HIGH:   i ++,
 	};
 
-	Object .preventExtensions (PrimitiveQuality);
-	Object .freeze (PrimitiveQuality);
-	Object .seal (PrimitiveQuality);
-
 	return PrimitiveQuality;
 });

package/src/x_ite/Browser/Core/Shading.js

@@ -50,10 +50,10 @@
 define (function ()
 {
 "use strict";
-	
-	var i = 0;
 
-	var Shading =
+	let i = 0;
+
+	const Shading =
 	{
 		POINT:     i ++,
 		WIREFRAME: i ++,
@@ -62,9 +62,5 @@ define (function ()
 		PHONG:     i ++,
 	};
 
-	Object .preventExtensions (Shading);
-	Object .freeze (Shading);
-	Object .seal (Shading);
-
 	return Shading;
 });

package/src/x_ite/Browser/Core/TextureQuality.js

@@ -50,19 +50,15 @@
 define (function ()
 {
 "use strict";
-	
-	var i = 0;
 
-	var TextureQuality =
+	let i = 0;
+
+	const TextureQuality =
 	{
 		LOW:    i ++,
 		MEDIUM: i ++,
 		HIGH:   i ++,
 	};
 
-	Object .preventExtensions (TextureQuality);
-	Object .freeze (TextureQuality);
-	Object .seal (TextureQuality);
-
 	return TextureQuality;
 });