Use jquery for UI.

website/extensions/example/example.js

@@ -5,6 +5,7 @@ ExampleExtension = function ()
 
 ExampleExtension.prototype.IsEnabled = function ()
 {
+
 	return true;
 };
 
@@ -12,13 +13,9 @@ ExampleExtension.prototype.Init = function (extensionInterface)
 {
 	this.ext = extensionInterface;
 	var buttonsDiv = this.ext.GetButtonsDiv ()
-	var buttonImage = document.createElement ('img');
-	buttonImage.className = 'topbutton';
-	buttonImage.src = 'extensions/example/example.png';
-	buttonImage.title = 'Example button.';
+	var buttonImage = $('<img>').addClass ('topbutton').attr ('src', 'extensions/example/example.png').attr ('title', 'Example button.').appendTo (buttonsDiv);
 	var myThis = this;
-	buttonImage.onclick = function () {
+	buttonImage.click (function () {
 		alert (JSON.stringify (myThis.ext.GetModelJson ()));
-	};
-	buttonsDiv.appendChild (buttonImage);
+	});
 };

website/include/floatingdialog.js

@@ -1,51 +1,38 @@
 FloatingDialog = function ()
 {
 	this.dialogDiv = null;
-	this.mouseClick = this.MouseClick.bind (this);
 };
 
 FloatingDialog.prototype.Open = function (parameters)
 {
 	function AddButton (dialog, parent, button)
 	{
-		var buttonDiv = document.createElement ('div');
-		buttonDiv.className = 'dialogbutton';
-		buttonDiv.innerHTML = button.text;
-		buttonDiv.onclick = function () {
+		var buttonDiv = $('<div>').addClass ('dialogbutton').html (button.text).appendTo (parent);
+		buttonDiv.click (function () {
 			button.callback (dialog);
-		};
-		parent.appendChild (buttonDiv);	
+		});
 	}
 
 	if (this.dialogDiv !== null) {
-		this.dialogDiv.Close ();
+		this.Close ();
 	}
 
-	this.dialogDiv = document.createElement ('div');
-	this.dialogDiv.className = 'dialog';
-	
-	var titleDiv = document.createElement ('div');
-	titleDiv.className = 'dialogtitle';
-	titleDiv.innerHTML = parameters.title;
-	this.dialogDiv.appendChild (titleDiv);
-	
-	var contentDiv = document.createElement ('div');
-	contentDiv.className = 'dialogcontent';
-	contentDiv.innerHTML = parameters.text;
-	this.dialogDiv.appendChild (contentDiv);
-
-	var buttonsDiv = document.createElement ('div');
-	buttonsDiv.className = 'dialogbuttons';
-	this.dialogDiv.appendChild (buttonsDiv);
+	this.dialogDiv = $('<div>').addClass ('dialog');
+	$('<div>').addClass ('dialogtitle').html (parameters.title).appendTo (this.dialogDiv);
+	$('<div>').addClass ('dialogcontent').html (parameters.text).appendTo (this.dialogDiv);
+	var buttonsDiv = $('<div>').addClass ('dialogbuttons').appendTo (this.dialogDiv);
 
 	var i, button;
 	for (i = 0; i < parameters.buttons.length; i++) {
 		button = parameters.buttons[i];
 		AddButton (this, buttonsDiv, button);
 	}
-	document.body.appendChild (this.dialogDiv);
+	this.dialogDiv.appendTo ($('body'));
 
-	document.addEventListener ('click', this.mouseClick, true);
+	var myThis = this;
+	$('body').click (function (event) {
+		myThis.MouseClick (event);
+	});
 	this.Resize ();
 };
 
@@ -55,9 +42,9 @@ FloatingDialog.prototype.Close = function ()
 		return;
 	}
 	
-	document.body.removeChild (this.dialogDiv);
-	document.removeEventListener ('click', this.mouseClick, true);
+	this.dialogDiv.remove ();
 	this.dialogDiv = null;
+	$('body').unbind ('click');
 };
 
 FloatingDialog.prototype.Resize = function ()
@@ -66,8 +53,8 @@ FloatingDialog.prototype.Resize = function ()
 		return;
 	}
 	
-	this.dialogDiv.style.left = ((document.body.clientWidth - this.dialogDiv.clientWidth) / 2.0) + 'px';
-	this.dialogDiv.style.top = ((document.body.clientHeight - this.dialogDiv.clientHeight) / 3.0) + 'px';
+	this.dialogDiv.css ('left', ((document.body.clientWidth - this.dialogDiv.width ()) / 2.0) + 'px');
+	this.dialogDiv.css ('top', ((document.body.clientHeight - this.dialogDiv.height ()) / 3.0) + 'px');
 };
 
 FloatingDialog.prototype.MouseClick = function (clickEvent)
@@ -79,7 +66,7 @@ FloatingDialog.prototype.MouseClick = function (clickEvent)
 	var dialogClicked = false;
 	var target = clickEvent.target;
 	while (target !== null) {
-		if (target === this.dialogDiv) {
+		if (target === this.dialogDiv.get ()[0]) {
 			dialogClicked = true;
 		}
 		target = target.parentElement;

website/include/importerapp.js

@@ -31,16 +31,13 @@ ImporterApp.prototype.Init = function ()
 			document.body.removeChild (document.body.lastChild);
 		}
 
-		var div = document.createElement ('div');
-		div.className = 'nosupport';
-		div.innerHTML = [
+		var div = $('<div>').addClass ('nosupport').appendTo ($('body'));
+		div.html ([
 			'<div id="nosupport">',
 			this.GetWelcomeText (),
 			'<div class="nosupporterror">You need a browser which supports the following technologies: WebGL, WebGLRenderingContext, File, FileReader, FileList, Blob, URL.</div>',
 			'</div>'
-		].join ('');
-		document.body.appendChild (div);
-		
+		].join (''));
 		return;
 	}
 	
@@ -175,7 +172,7 @@ ImporterApp.prototype.GenerateMenu = function ()
 	{
 		var group = menu.AddGroup (name, {
 			openCloseButton : {
-				visible : false,
+				isOpen : false,
 				open : 'images/opened.png',
 				close : 'images/closed.png',
 				title : 'Show/Hide ' + name
@@ -211,7 +208,7 @@ ImporterApp.prototype.GenerateMenu = function ()
 	{
 		importerMenu.AddSubItem (materialsGroup, material.name, {
 			openCloseButton : {
-				visible : false,
+				isOpen : false,
 				open : 'images/info.png',
 				close : 'images/info.png',
 				onOpen : function (content, material) {
@@ -232,7 +229,7 @@ ImporterApp.prototype.GenerateMenu = function ()
 	{
 		importerMenu.AddSubItem (meshesGroup, mesh.name, {
 			openCloseButton : {
-				visible : false,
+				isOpen : false,
 				open : 'images/info.png',
 				close : 'images/info.png',
 				onOpen : function (content, mesh) {
@@ -268,13 +265,13 @@ ImporterApp.prototype.GenerateMenu = function ()
 				userData : mesh
 			},
 			userButton : {
-				visible : true,
+				isOpen : true,
 				onCreate : function (image) {
-					image.src = 'images/visible.png';
+					image.attr ('src', 'images/visible.png');
 				},
 				onClick : function (image, meshIndex) {
 					var visible = importerApp.ShowHideMesh (meshIndex);
-					image.src = visible ? 'images/visible.png' : 'images/hidden.png';
+					image.attr ('src', visible ? 'images/visible.png' : 'images/hidden.png');
 				},
 				title : 'Show/Hide Mesh',
 				userData : meshIndex
@@ -283,7 +280,7 @@ ImporterApp.prototype.GenerateMenu = function ()
 	}
 	
 	var jsonData = this.viewer.GetJsonData ();
-	var menu = document.getElementById ('menu');
+	var menu = $('#menu');
 	var importerMenu = new ImporterMenu (menu);
 
 	var filesGroup = AddDefaultGroup (importerMenu, 'Files');

website/include/importermenu.js

@@ -1,60 +1,37 @@
 InfoTable = function (parent)
 {
-	this.table = document.createElement ('table');
-	this.table.className = 'infotable';
-
-	while (parent.lastChild) {
-		parent.removeChild (parent.lastChild);
-	}
-	parent.appendChild (this.table);
+	this.table = $('<table>').addClass ('infotable').appendTo (parent);
 };
 
 InfoTable.prototype.AddRow = function (name, value)
 {
-	var tableRow = document.createElement ('tr');
-	
-	var nameColumn = document.createElement ('td');
-	nameColumn.innerHTML = name;
-	tableRow.appendChild (nameColumn);
-
-	var valueColumn = document.createElement ('td');
-	valueColumn.innerHTML = value;
-	tableRow.appendChild (valueColumn);
-
-	this.table.appendChild (tableRow);
+	var tableRow = $('<tr>').appendTo (this.table);
+	$('<td>').html (name).appendTo (tableRow);
+	$('<td>').html (value).appendTo (tableRow);
 };
 
 InfoTable.prototype.AddColorRow = function (name, color)
 {
-	var tableRow = document.createElement ('tr');
-	
-	var nameColumn = document.createElement ('td');
-	nameColumn.innerHTML = name;
-	tableRow.appendChild (nameColumn);
+	var tableRow = $('<tr>').appendTo (this.table);
+	$('<td>').html (name).appendTo (tableRow);
 
 	var valueColumn = document.createElement ('td');
-	tableRow.appendChild (valueColumn);
+	var valueColumn = $('<td>').appendTo (tableRow);
 	
-	var colorDiv = document.createElement ('div');
-	colorDiv.className = 'colorbutton';
-	colorDiv.title = '(' + color[0] + ', ' + color[1] + ', ' + color[2] + ')';
+	var colorDiv = $('<div>').addClass ('colorbutton').appendTo (valueColumn);
+	colorDiv.attr ('title', '(' + color[0] + ', ' + color[1] + ', ' + color[2] + ')');
 	var hexColor = JSM.RGBComponentsToHexColor (color[0] * 255.0, color[1] * 255.0, color[2] * 255.0);
 	var colorString = hexColor.toString (16);
 	while (colorString.length < 6) {
 		colorString = '0' + colorString;
 	}
-	colorDiv.style.background = '#' + colorString;
-	valueColumn.appendChild (colorDiv);
-	
-	this.table.appendChild (tableRow);
+	colorDiv.css ('background', '#' + colorString);
 };
 
 ImporterMenu = function (parent)
 {
 	this.parent = parent;
-	while (this.parent.lastChild) {
-		this.parent.removeChild (this.parent.lastChild);
-	}
+	this.parent.empty ();
 };
 
 ImporterMenu.prototype.AddGroup = function (name, parameters)
@@ -73,130 +50,89 @@ ImporterMenu.prototype.AddSubItem = function (parent, name, parameters)
 		return name;
 	}
 
-	var menuItem = document.createElement ('div');
-	menuItem.className = 'menuitem';
+	var menuItem = $('<div>').addClass ('menuitem').appendTo (parent);
 
-	var menuText = null;
-	menuText = document.createElement ('div');
-	menuText.className = 'menuitem';
-	menuText.innerHTML = GetTruncatedName (name);
-	menuText.title = name;
-
-	var menuContent = null;
-	var openCloseImage = null;
-	var userImage = null;
-		
+	var menuContent = null;		
 	if (parameters !== undefined && parameters !== null) {
 		if (parameters.openCloseButton !== undefined && parameters.openCloseButton !== null) {
-			menuContent = document.createElement ('div');
-			menuContent.className = 'menugroup';
-			menuContent.style.display = parameters.openCloseButton.visible ? 'block' : 'none';
+			menuContent = $('<div>').addClass ('menugroup').appendTo (parent);
+			var isOpen = parameters.openCloseButton.isOpen;
+			if (!isOpen) {
+				menuContent.hide ();
+			}
 			
-			openCloseImage = document.createElement ('img');
-			openCloseImage.className = 'menubutton';
-			openCloseImage.title = parameters.openCloseButton.title;
-			openCloseImage.src = parameters.openCloseButton.visible ? parameters.openCloseButton.open : parameters.openCloseButton.close;
-			openCloseImage.onclick = function () {
-				if (menuContent.style.display == 'none') {
-					menuContent.style.display = 'block';
-					openCloseImage.src = parameters.openCloseButton.open;
+			var openCloseImage = $('<img>').addClass ('menubutton').attr ('title', parameters.openCloseButton.title).appendTo (menuItem);
+			openCloseImage.attr ('src', isOpen ? parameters.openCloseButton.open : parameters.openCloseButton.close);
+			openCloseImage.click (function () {
+				isOpen = !isOpen;
+				if (isOpen) {
 					if (parameters.openCloseButton.onOpen !== undefined && parameters.openCloseButton.onOpen !== null) {
 						parameters.openCloseButton.onOpen (menuContent, parameters.openCloseButton.userData);
 					}
 				} else {
-					menuContent.style.display = 'none';
-					openCloseImage.src = parameters.openCloseButton.close;
 					if (parameters.openCloseButton.onClose !== undefined && parameters.openCloseButton.onClose !== null) {
 						parameters.openCloseButton.onClose (menuContent, parameters.openCloseButton.userData);
 					}
 				}
-			};
-			
-			menuText.onclick = openCloseImage.onclick;
-			menuText.style.cursor = 'pointer';
+				menuContent.toggle ();
+				openCloseImage.attr ('src', isOpen ? parameters.openCloseButton.open : parameters.openCloseButton.close);
+			});
 		}
 
 		if (parameters.userButton !== undefined && parameters.userButton !== null) {
-			userImage = document.createElement ('img');
-			userImage.className = 'menubutton';
-			userImage.title = parameters.userButton.title;
+			var userImage = $('<img>').addClass ('menubutton').attr ('title', parameters.userButton.title).appendTo (menuItem);
 			if (parameters.userButton.onCreate !== undefined && parameters.userButton.onCreate !== null) {
 				parameters.userButton.onCreate (userImage, parameters.userButton.userData);
 			}
-			userImage.onclick = function () {
+			userImage.click (function () {
 				if (parameters.userButton.onClick !== undefined && parameters.userButton.onClick !== null) {
 					parameters.userButton.onClick (userImage, parameters.userButton.userData);
 				}
-			};
+			});
 		}
 	}
 
-	if (openCloseImage !== null) {
-		menuItem.appendChild (openCloseImage);
-	}
-	if (userImage !== null) {
-		menuItem.appendChild (userImage);
-	}
-	menuItem.appendChild (menuText);
-
-	parent.appendChild (menuItem);
-	if (menuContent !== null) {
-		parent.appendChild (menuContent);
-	}
-
+	$('<div>').addClass ('menuitem').html (GetTruncatedName (name)).attr ('title', name).appendTo (menuItem);
 	return menuContent;
 };
 
 ImporterButtons = function (parent)
 {
-	this.buttonsDiv = document.createElement ('div');
-	this.buttonsDiv.className = 'buttons';
-	parent.appendChild (this.buttonsDiv);
+	this.buttonsDiv = $('<div>').addClass ('buttons').appendTo (parent);
 };
 
 ImporterButtons.prototype.AddLogo = function (title, onClick)
 {
-	var logoDiv = document.createElement ('div');
-	logoDiv.className = 'logo';
-	logoDiv.innerHTML = title;
-	logoDiv.onclick = onClick;
-	this.buttonsDiv.appendChild (logoDiv);
+	var logoDiv = $('<div>').addClass ('logo').html (title).appendTo (this.buttonsDiv);
+	logoDiv.click (onClick);
 };
 
 ImporterButtons.prototype.AddButton = function (image, title, onClick)
 {
-	var buttonImage = document.createElement ('img');
-	buttonImage.className = 'topbutton';
-	buttonImage.src = image;
-	buttonImage.title = title;
-	buttonImage.onclick = onClick;
-	this.buttonsDiv.appendChild (buttonImage);
+	var buttonImage = $('<img>').addClass ('topbutton').attr ('src', image).attr ('title', 'title').appendTo (this.buttonsDiv);
+	buttonImage.click (function () {
+		onClick ();
+	});
 };
 
 ImporterButtons.prototype.AddToggleButton = function (image, toggleImage, title, onClick)
 {
-	var buttonImage = document.createElement ('img');
+	var buttonImage = $('<img>').addClass ('topbutton').attr ('src', image).attr ('title', 'title').appendTo (this.buttonsDiv);
 	var isOn = true;
-	buttonImage.className = 'topbutton';
-	buttonImage.src = image;
-	buttonImage.title = title;
-	buttonImage.onclick = function () {
+	buttonImage.click (function () {
 		isOn = !isOn;
 		if (isOn) {
-			buttonImage.src = image;
+			buttonImage.attr ('src', image);
 		} else {
-			buttonImage.src = toggleImage;
+			buttonImage.attr ('src', toggleImage);
 		}
 		onClick ();
-	};
-	this.buttonsDiv.appendChild (buttonImage);
+	});
 };
 
 ExtensionButtons = function (parent)
 {
-	this.buttonsDiv = document.createElement ('div');
-	this.buttonsDiv.className = 'rightbuttons';
-	parent.appendChild (this.buttonsDiv);
+	this.buttonsDiv = $('<div>').addClass ('rightbuttons').appendTo (parent);
 };
 
 ExtensionButtons.prototype.GetButtonsDiv = function ()

website/index.html

@@ -6,6 +6,9 @@
 <head>
 
 	<meta http-equiv="content-type" content="text/html;charset=utf-8">
+
+	<script type="text/javascript" src="jquery/jquery-1.12.4.js"></script>
+
 	<link rel="stylesheet" type="text/css" href="include/importerapp.css">
 	<link rel="stylesheet" type="text/css" href="include/floatingdialog.css">