Create better status bar API + Structure, add time to status bar

laskyawm-bar.css

@@ -4,6 +4,7 @@
 	position: absolute;
 	width: 100%;
 	height: 25px;
+	color: white;
 }
 .barButton {
 	color: white;
@@ -17,9 +18,17 @@
 	text-align: center;
 	display: inline-block;
 }
-#togglePowerMenu {
+#barIcons {
 	float: right;
+}
+#barIcons > * {
+	padding: 3px 0;
+	font-size: 15px;
+	float: right;
+}
+#togglePowerMenu {
 	padding: 4px 10px 5px;
+	margin: 0;
 }
 .barMenu {
 	display: none;

laskyawm-bar.js

@@ -1,5 +1,34 @@
 /* This file is licensed under the Affero General Public License. */
 
-var bar = document.createElement('div');
-bar.id = 'bar';
-document.body.appendChild(bar);
+/*global $ */
+
+(function() {
+	// Add namespace
+	var bar = window.bar = {};
+
+	// Add bar
+	var barElement = document.createElement('div');
+	barElement.id = 'bar';
+	document.body.appendChild(barElement);
+
+	// Add icon panel
+	var barIcons = window.barIcons = document.createElement('div');
+	barIcons.id = 'barIcons';
+	barElement.appendChild(barIcons);
+
+	bar.addItem = function(node) {
+		$(barIcons).append(node);
+		bar.updateWidth();
+	};
+
+	bar.removeItem = function(node) {
+		barIcons.removeChild(node);
+		bar.updateWidth();
+	};
+
+	bar.updateWidth = function() {
+		window.barIconsWidth = barIcons.offsetWidth;
+	};
+
+	bar.updateWidth();
+})(window);

laskyawm-clock.js

@@ -0,0 +1,33 @@
+/* This file is licensed under the Affero General Public License. */
+
+/*global deviceType */
+
+(function() {
+	// Don't show clock on mobile
+	if(deviceType === 'mobile') {
+		return;
+	}
+
+	// Create clock widget
+	var clock = document.createElement('span');
+	clock.id = 'barClock';
+	updateTime();
+
+	// Add to bar
+	window.bar.addItem(clock);
+
+	// Prevent freeze
+	var updateTimeout;
+
+	function updateTime() {
+		// Clear timeout
+		clearTimeout(updateTimeout);
+
+		// Get time
+		var currentTime = new Date();
+		clock.textContent = currentTime.toLocaleTimeString(navigator.language, {hour: 'numeric', minute: 'numeric'});
+
+		// Keep up-to-date
+		updateTimeout = setTimeout(updateTime, 60000 - (currentTime.getSeconds() * 1000) - currentTime.getMilliseconds());
+	}
+})();

laskyawm-power.js

@@ -1,6 +1,6 @@
 /* This file is licensed under the Affero General Public License. */
 
-/*global $, prepareUrl */
+/*global $, prepareUrl, bar */
 
 var powerMenu;
 
@@ -11,11 +11,14 @@ togglePowerMenu.type = 'image';
 togglePowerMenu.alt = 'Log Out…';
 prepareUrl('/Core/power.png', {rootParent: '/'}, function(url) {
 	togglePowerMenu.src = url;
+	togglePowerMenu.addEventListener('load', function() {
+		bar.updateWidth();
+	});
 });
 togglePowerMenu.addEventListener('click', function() {
 	$(powerMenu).toggle();
 });
-document.body.appendChild(togglePowerMenu);
+bar.addItem(togglePowerMenu);
 
 powerMenu = document.createElement('div');
 powerMenu.id = 'powerMenu';

laskyawm.html

@@ -15,4 +15,5 @@
 	<script src="laskyawm-bar.js"></script>
 	<script src="laskyawm-apps.js"></script>
 	<script src="laskyawm-power.js"></script>
+	<script src="laskyawm-clock.js"></script>
 </body>

laskyawm.js

@@ -1,6 +1,6 @@
 /* This file is licensed under the Affero General Public License. */
 
-/*global _, $, File, apps, powerMenu, getFile: true, prepareUrl: true, listenForFileChanges: true, showProgress: true, setProgress: true, hideProgress: true, openFile: true, openWindow: true, extension: true */
+/*global _, $, File, barIconsWidth, apps, powerMenu, getFile: true, prepareUrl: true, listenForFileChanges: true, showProgress: true, setProgress: true, hideProgress: true, openFile: true, openWindow: true, extension: true */
 
 var deviceType = window.matchMedia('only screen and (max-device-width: 640px)').matches ? 'mobile' : 'desktop';
 
@@ -687,8 +687,8 @@ function positionMinimized() {
 			if(left < minMinimizedLeft) {
 				minimizedLeft = minMinimizedLeft;
 				moved = true;
-			} else if(left > window.innerWidth - 350) {
-				minimizedLeft = window.innerWidth - 350;
+			} else if(left > window.innerWidth - barIconsWidth - 260) {
+				minimizedLeft = window.innerWidth - barIconsWidth - 260;
 				moved = true;
 				pushLeft = true;
 			} else {
@@ -703,7 +703,7 @@ function positionMinimized() {
 			}
 			if(moved) {
 				if(!win.realLeft) win.realLeft = win.style.left;
-				win.style.cssText += '; left: ' + (pushLeft ? window.innerWidth - 350 : minimizedLeft) + 'px !important;';
+				win.style.cssText += '; left: ' + (pushLeft ? window.innerWidth - barIconsWidth - 260 : minimizedLeft) + 'px !important;';
 			}
 			full[minimizedLeft] = win;
 		}