Added position config

modules/default/alert/README.md

@@ -33,21 +33,29 @@ The following properties can be configured:
 		<tr>
 			<td><code>effect</code></td>
 			<td>The animation effect to use.<br>
-				<br><b>Possible values:</b> <code>scale</code>, <code>slide</code>, <code>genie</code>, <code>jelly</code>, <code>flip</code>, <code>exploader</code> & <code>bouncyflip</code>
+				<br><b>Possible values:</b> <code>scale</code> <code>slide</code> <code>genie</code> <code>jelly</code> <code>flip</code> <code>exploader</code> <code>bouncyflip</code>
 				<br><b>Default value:</b> <code>slide</code>
 			</td>
 		</tr>
 		<tr>
 			<td><code>display_time</code></td>
 			<td>Time a notification is displayed.<br>
-				<br><b>Possible values:</b> any <code>int</code>
+				<br><b>Possible values:</b> <code>int</code>
+				<br><b>Default value:</b> <code>3500</code>
+			</td>
+		</tr>
+		<tr>
+		<tr>
+			<td><code>position</code></td>
+			<td>Position where the notifications should be displayed.<br>
+				<br><b>Possible values:</b> <code>left</code> <code>center</code> <code>right</code>
 				<br><b>Default value:</b> <code>3500</code>
 			</td>
 		</tr>
 		<tr>
 			<td><code>welcome_message</code></td>
 			<td>Message shown at startup.<br>
-				<br><b>Possible values:</b> any <code>string</code> & <code>false</code>
+				<br><b>Possible values:</b> <code>string</code> <code>false</code>
 				<br><b>Default value:</b> <code>Welcome, start was successfull!</code>
 			</td>
 		</tr>
@@ -73,13 +81,13 @@ self.sendNotification("SHOW_NOTIFICATION", {title: "Hello", message: "This is a
 		<tr>
 			<td><code>title</code></td>
 			<td>The title of the notification.<br>
-				<br><b>Possible values:</b> <code>text</code> or <code>html</code> as a  <code>string</code>
+				<br><b>Possible values:</b> <code>text</code> or <code>html</code>
 			</td>
 		</tr>
 		<tr>
 			<td><code>message</code></td>
 			<td>The message of the notification.<br>
-				<br><b>Possible values:</b> <code>text</code> or <code>html</code> as a  <code>string</code>
+				<br><b>Possible values:</b> <code>text</code> or <code>html</code>
 			</td>
 		</tr>
 	</tbody>
@@ -101,40 +109,40 @@ self.sendNotification("SHOW_ALERT", {title: "Hello", message: "This is a test!",
 		<tr>
 			<td><code>title</code></td>
 			<td>The title of the alert.<br>
-				<br><b>Possible values:</b> <code>text</code> or <code>html</code> as a  <code>string</code>
+				<br><b>Possible values:</b> <code>text</code> or <code>html</code>
 			</td>
 		</tr>
 		<tr>
 			<td><code>message</code></td>
 			<td>The message of the alert.<br>
-				<br><b>Possible values:</b> <code>text</code> or <code>html</code> as a  <code>string</code>
+				<br><b>Possible values:</b> <code>text</code> or <code>html</code>
 			</td>
 		</tr>
 		<tr>
 			<td><code>type</code> (optional)</td>
 			<td>The type of the alert.<br>
-				<br><b>Possible values:</b> <code>error</code>, <code>warning</code>, <code>info</code> & <code>success</code>
+				<br><b>Possible values:</b> <code>error</code> <code>warning</code> <code>info</code> <code>success</code>
 				<br><b>Default value:</b> <code>none</code>
 			</td>
 		</tr>
 		<tr>
 			<td><code>imageUrl</code> (optional)</td>
 			<td>Image to show in the alert<br>
-				<br><b>Possible values:</b> <code>url</code> as <code>string</code>
+				<br><b>Possible values:</b> <code>url</code>
 				<br><b>Default value:</b> <code>none</code>
 			</td>
 		</tr>
 		<tr>
 			<td><code>imageSize</code> (optional even with imageUrl set)</td>
 			<td>Size of the image<br>
-				<br><b>Possible values:</b> "<code>width</code>x<code>height</code>" as <code>string</code>
+				<br><b>Possible values:</b> "<code>width</code>x<code>height</code>"
 				<br><b>Default value:</b> <code>none</code>
 			</td>
 		</tr>
 		<tr>
 			<td><code>timer</code> (optional)</td>
 			<td>How long the alert should stay visible.<br>
-				<br><b>Possible values:</b> any <code>int</code>
+				<br><b>Possible values:</b> <code>int</code>
 				<br><b>Default value:</b> <code>none</code>
 				<br><b>Important:</b> If you do not use the `timer`, it is your duty to hide the alert by using <code>self.sendNotification("HIDE_ALERT");</code>!
 			</td>

modules/default/alert/alert.js

@@ -13,6 +13,8 @@ Module.register('alert',{
 		effect: "slide",
 		//time a notification is displayed
 		display_time: 3500,
+		//Position
+		position: "center",
 		//shown at startup
 		welcome_message: "Welcome, start was successfull!"
 	},
@@ -23,7 +25,7 @@ Module.register('alert',{
 		return ['ns-default.css', 'sweetalert.css'];
 	},
 	show_notification: function (message) {
-		message = "<font class='thin' style='line-height: 26px; font-size:24px' color='#4A4A4A'>" + message.title + "</font><br /><font class='light' style='font-size:28px'>" + message.message + "</font>"
+		message = "<font class='thin' style='line-height: 35px; font-size:24px' color='#4A4A4A'>" + message.title + "</font><br /><font class='light' style='font-size:28px;line-height: 30px;'>" + message.message + "</font>"
 		new NotificationFx({
 			message : message,
 			layout : "growl",
@@ -50,6 +52,14 @@ Module.register('alert',{
 	hide_alert: function () {
 		swal.close()
 	},
+	setPosition: function (pos) {
+		var sheet = document.createElement('style')
+		if (pos == "center"){sheet.innerHTML = ".ns-box {margin-left: auto; margin-right: auto;}";}
+		if (pos == "right"){sheet.innerHTML = ".ns-box {margin-left: auto;}";}
+		if (pos == "left"){sheet.innerHTML = ".ns-box {margin-right: auto;}";}
+		document.body.appendChild(sheet);
+		
+	},
 	notificationReceived: function(notification, payload, sender) {
 		if (notification === 'SHOW_NOTIFICATION') {
 			this.show_notification(payload)
@@ -65,6 +75,7 @@ Module.register('alert',{
 		if (this.config.welcome_message){
 			this.show_notification({title: "Welcome", message: this.config.welcome_message})
 		}
+		this.setPosition(this.config.position)
 		Log.info('Starting module: ' + this.name);
 	}
 

modules/default/alert/ns-default.css

@@ -5,17 +5,15 @@
 	background: #fff;
 	padding: 22px;
 	line-height: 1.4;
-	margin-top: 10px;
+	margin-bottom: 10px;
 	z-index: 1000;
 	color: black;
 	font-size: 70%;
 	position: relative;
-	float: left;
+	display: table;
-	clear: both;
 
-	top: auto;
+
-	left: 30px;
+	word-wrap:break-word;
-	
 	max-width: 100%;
 	border-radius: 5px;
 }