Revize f4a56448

Diagram can be saved as public

sources/src/main/webapp/css/main.css

@@ -901 +901 @@
 .loggedOut .loggedInOnly {
 	display: none !important;
 }
+
+/**
+ * MODAL WINDOW
+ **/
+
+.modal {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding: 20px 40px;
+    background: rgba(0,0,0,0.5);
+}
+
+.modal-content {
+	position: relative;
+	max-width: 440px;
+	min-height: 40px;
+	max-height: 100%;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 10px 20px;
+	background-color: #fff;
+	border: 1px solid #7db9e8;
+}
+
+.modal-content .close-button {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	display: block;
+	width: 20px;
+	height: 20px;
+	padding: 0;
+	background: none;
+	border: none;
+	cursor: pointer;
+}

sources/src/main/webapp/js/app.js

@@ -45 +45 @@
 	this.sidebarComponent = null;
 	/** @prop {Viewport} viewportComponent */
 	this.viewportComponent = null;
+	/** @prop {ModalWindow} modalWindowComponent */
+	this.modalWindowComponent = null;
 
 	/** @prop {array<Edge>} edgeList */
 	this.edgeList = [];
@@ -146 +148 @@
 		content.appendChild(self.sidebarComponent.render());
 		self.sidebarComponent.minimapComponent.setViewportSize(self.viewportComponent.getSize());
 
+		self.modalWindowComponent = new ModalWindow;
+		content.appendChild(self.modalWindowComponent.render());
+
 		// context menu
 		document.body.addEventListener('mousedown', function() {
 			self.closeFloatingComponents();
@@ -311 +316 @@
 		});
 
 		// save to database button
-		var saveDiagramToDatabaseButton = document.getElementById('btnSaveDiagramToDatabase');
-		if (saveDiagramToDatabaseButton) {
-			saveDiagramToDatabaseButton.addEventListener('click', function(e) {
-				var diagramId = app.utils.getQueryVariable('diagramId');
-				if (diagramId === false) diagramId = null;
-
-				var diagramName = prompt('Enter new diagram name:', self.diagram !== null ? self.diagram.name : '');
-				if (diagramName === null || diagramName === '') return false;
-
-				$.ajax({
-					'type': 'POST',
-					'url': app.API.saveDiagram,
-					'data': {
-						'diagramId': diagramId,
-						'name': diagramName,
-						'graphJson': JSON.stringify(self.graphExporter.run()),
-						'public': 0,
-					},
-					'success': function() {
-						alert('Saved.');
-					},
-					'error': function(xhr) {
-						switch (xhr.status) {
-							case 401:
-								alert('You are either not logged in or not an owner of this diagram.');
-								break;
-							default:
-								alert('Something went wrong.');
-						}
-					},
-				});
-			});
-		}
+		document.getElementById('btnSaveDiagramToDatabase').addEventListener('click', function(e) {
+			self.modalWindowComponent.open();
+		});
 
 		// window resize
 		window.addEventListener('resize', function(e) {
@@ -374 +349 @@
 			loadGraphDataPromise = getDiagramPromise.then(function(data) {
 				self.diagram = new Diagram(data);
 
+				document.title = self.NAME + ' - ' + self.diagram.name;
+
 				return $.getJSON(self.API.loadGraphData + '?diagramId=' + diagramId);
 			});
 		}

sources/src/main/webapp/js/components/modalWindow.js

@@ +1 @@
+/**
+ * Class representing a modal window.
+ * @constructor
+ */
+function ModalWindow() {
+	var rootElement;
+	var diagramForm;
+
+	/**
+	 * Opens this modal window.
+	 */
+	this.open = function() {
+		rootElement.classList.remove('hidden');
+
+		diagramForm.appendChild(app.dom.createHtmlElement('div', { class: 'err_msg' }));
+		diagramForm.appendChild(app.dom.htmlStringToElement(`<table><tbody><tr><td><label for="diagramName">Diagram name:</label></td><td><input type="text" name="diagramName" value="${app.diagram !== null ? app.diagram.name : ''}" id="diagramName" required></td></tr><tr><td><label for="diagramPublic">Is public:</label></td><td><input type="checkbox" name="diagramPublic" value="1" id="diagramPublic" ${app.diagram !== null && app.diagram.public ? 'checked' : ''}></td></tr><tr><td></td><td><button type="submit" class="button">Save</button></td></tr></tbody></table>`));
+
+		diagramForm.diagramName.focus();
+	};
+
+	/**
+	 * Closes this modal window.
+	 */
+	this.close = function() {
+		rootElement.classList.add('hidden');
+
+		diagramForm.innerHTML = '';
+	};
+
+	/**
+	 * Creates a new HTML DOM element representing the modal window in memory. Binds user interactions to local handler functions.
+	 * @returns {Element} HTML DOM element.
+	 */
+	this.render = function() {
+		rootElement = app.utils.createHtmlElement('div', {
+			'class': 'modal hidden',
+		});
+		rootElement.addEventListener('click', this.close);
+
+		var modalContent = app.utils.createHtmlElement('div', {
+			'class': 'modal-content',
+		});
+		modalContent.addEventListener('click', app.utils.stopPropagation);
+		rootElement.appendChild(modalContent);
+
+		var closeButton = app.utils.createHtmlElement('button', {
+			'class': 'close-button button',
+		});
+		closeButton.appendChild(app.utils.createTextElement('×'));
+		closeButton.addEventListener('click', closeButtonClick.bind(this));
+		modalContent.appendChild(closeButton);
+
+		diagramForm = app.dom.createHtmlElement('form', {});
+		diagramForm.addEventListener('submit', saveDiagram.bind(this));
+		modalContent.appendChild(diagramForm);
+
+		return rootElement;
+	};
+
+	/**
+	 * Close button click interaction. Closes the modal window.
+	 * @param {Event} e Click event.
+	 */
+	function closeButtonClick(e) {
+		this.close();
+	}
+
+	/**
+	 * Saves diagram.
+	 * @param {Event} e Submit event.
+	 */
+	function saveDiagram(e) {
+		e.preventDefault();
+
+		var self = this;
+
+		$.ajax({
+			'type': 'POST',
+			'url': app.API.saveDiagram,
+			'data': {
+				'id': app.diagram === null ? null : app.diagram.id,
+				'name': e.target.diagramName.value,
+				'graphJson': JSON.stringify(app.graphExporter.run()),
+				'public': (e.target.diagramPublic.checked | 0).toString(),
+			},
+			'success': function(data) {
+				app.diagram = new Diagram(data);
+
+				document.title = app.NAME + ' - ' + app.diagram.name;
+				history.replaceState({} , document.title, app.HOME_URL + 'graph?diagramId=' + app.diagram.id);
+
+				self.close();
+				alert('Saved.');
+			},
+			'error': function(xhr) {
+				switch (xhr.status) {
+					case 401:
+						alert('You are either not logged in or not an owner of this diagram.');
+						break;
+					default:
+						alert('Something went wrong.');
+				}
+			},
+		});
+	}
+}

sources/src/main/webapp/showGraph.jsp

@@ -28 +28 @@
 		<script src="js/components/group.js"></script>
 		<script src="js/components/groupVertexList.js"></script>
 		<script src="js/components/minimap.js"></script>
+		<script src="js/components/modalWindow.js"></script>
 		<script src="js/components/sidebar.js"></script>
 		<script src="js/components/sidebarExcludedNodeList.js"></script>
 		<script src="js/components/sidebarUnconnectedNodeList.js"></script>