kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-07-12 18:19:25 +00:00
Code Issues Projects Releases Wiki Activity

Added position config

Browse Source
This commit is contained in:
Paul-Vincent Roll 2016-04-02 23:54:15 +02:00
parent 3cd882f618
commit 882e9731ac
3 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
modules/default/alert/README.md
View File

@ -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>

13
modules/default/alert/alert.js
View File

@ -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);
}

8
modules/default/alert/ns-default.css
View File

@ -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;
clear: both;
display: table;
top: auto;
left: 30px;
word-wrap:break-word;
max-width: 100%;
border-radius: 5px;
}