Revize 6b1b070c

reworked StatusBar to ES6 class

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

@@ -1 +1 @@
 /**
  * Class representing the sidebar status bar. It displays number of components loaded in the diagram.
- * @constructor
  */
-function StatusBar() {
-	var rootElement;
-	var componentCounterElement;
-
-	/**
-	 * Sets a new count of components loaded in the diagram.
-	 * @param {integer} componentCount New count of components.
-	 */
-	this.setComponentCount = function(componentCount) {
-		componentCounterElement.innerHTML = '';
-		componentCounterElement.appendChild(DOM.createTextElement('loaded components: ' + componentCount));
-	};
-
+class StatusBar {
 	/**
 	 * Creates a new DOM element representing the status bar in memory.
-	 * @returns {Element} HTML DOM element.
+	 * @public
+	 * @returns {HTMLElement} HTML DOM element.
 	 */
-	this.render = function() {
-		rootElement = DOM.createHtmlElement('nav', {
-			'class': 'status-bar',
-		});
-
-		componentCounterElement = DOM.createHtmlElement('span', {
-			'class': 'component-counter',
+	render() {
+		this._componentCounterElement = DOM.h('span', {
+			class: 'component-counter',
 		});
-		rootElement.appendChild(componentCounterElement);
 
-		minimapToggleElement = DOM.createHtmlElement('span', {
-			'class': 'link',
-		});
-		minimapToggleElement.appendChild(DOM.createTextElement('toggle minimap'));
-		minimapToggleElement.addEventListener('click', toggleMinimap.bind(this));
-		rootElement.appendChild(minimapToggleElement);
+		this._rootElement = DOM.h('nav', {
+			class: 'status-bar',
+		}, [
+			this._componentCounterElement,
+			DOM.h('span', {
+				class: 'link',
+				innerText: 'toggle minimap',
+				onClick: this._toggleMinimap.bind(this),
+			}),
+		]);
+
+		return this._rootElement;
+	}
 
-		return rootElement;
-	};
+	/**
+	 * Sets a new count of components loaded in the diagram.
+	 * @public
+	 * @param {integer} count New count of components.
+	 */
+	set componentCount(count) {
+		this._componentCounterElement.innerText = 'loaded components: ' + count;
+	}
 
 	/**
 	 * Resets the information displayed in the status bar.
+	 * @public
 	 */
-	this.reset = function() {
-		componentCounterElement.innerHTML = '';
+	reset() {
+		this._componentCounterElement.innerText = '';
 	};
 
-	function toggleMinimap(e) {
+	/**
+	 * @private
+	 */
+	_toggleMinimap(e) {
 		e.preventDefault();
 
 		document.getElementById('minimapComponent').classList.toggle('hidden');

sources/src/main/webapp/js/services/graphLoader.js

@@ -183 +183 @@
 		app.viewportComponent.center();
 
 		// update status bar
-		app.sidebarComponent.statusBarComponent.setComponentCount(data.vertices.length);
+		app.sidebarComponent.statusBarComponent.componentCount = data.vertices.length;
 
 		if (Utils.isDefined(highlightedEdge)) {
             highlightedEdge.setHighlighted(true);