- Start the new Notification system implementation

- Disable Chats refresh on message (notification issue)

app/assets/js/movim_utils.js

@@ -282,13 +282,3 @@ function base64_decode(data) {
 
     return dec.replace(/\0+$/, '');
 }
-
-
-window.addEventListener('load', function () {
-  Notification.requestPermission(function (status) {
-    // This allows to use Notification.permission with Chrome/Safari
-    if (Notification.permission !== status) {
-      Notification.permission = status;
-    }
-  });
-});

app/assets/js/movim_websocket.js

@@ -97,7 +97,7 @@ var MovimWebsocket = {
         if(funcalls != null) {
             for(h = 0; h < funcalls.length; h++) {
                 var funcall = funcalls[h];
-                //console.log(funcall);
+                console.log(funcall);
                 if(funcall.func != null && (typeof window[funcall.func] == 'function')) {
                     try {
                         window[funcall.func].apply(null, funcall.params);

app/views/chat.tpl

@@ -1,6 +1,7 @@
 <nav class="color dark">
     <?php $this->widget('Presence');?>
     <?php $this->widget('Navigation');?>
+    <?php $this->widget('Notification');?>
 </nav>
 
 <main>

app/widgets/Bookmark/Bookmark.php

@@ -126,7 +126,7 @@ class Bookmark extends WidgetBase
     {
         $html = $this->prepareBookmark();
         RPC::call('movim_fill', 'bookmarks', $html);
-        Notification::appendNotification($this->__('bookmarks.updated'), 'info');
+        Notification::append(null, $this->__('bookmarks.updated'));
     }
     /*
     function onMucRole($arr)
@@ -136,7 +136,7 @@ class Bookmark extends WidgetBase
     */
     function onBookmarkError($error)
     {
-        Notification::appendNotification($this->__('bookmarks.error').$error, 'error');
+        Notification::append(null, $this->__('bookmarks.error').$error);
     }
     
     function ajaxGetBookmark() 
@@ -203,7 +203,6 @@ class Bookmark extends WidgetBase
                     'autojoin'  => $form['autojoin'],
                     'nick'      => $form['nick'],
                     'jid'       => $form['jid']);   
-            movim_log(serialize($item));
             $this->ajaxSetBookmark($item);
         }
     }

app/widgets/Chat/Chat.php

@@ -18,9 +18,17 @@ class Chat extends WidgetCommon
     {
         $message = $packet->content;
 
-        // If the message is from me
         if($message->session == $message->jidto) {
             $from = $message->jidfrom;
+
+            $cd = new \Modl\ContactDAO;
+            $contact = $cd->get($from);
+            
+            if($contact != null
+            && !preg_match('#^\?OTR#', $message->body)) {
+                Notification::append('chat|'.$from, $contact->getTrueName(), $message->body, $contact->getPhoto('s'), 4);
+            }
+        // If the message is from me
         } else {
             $from = $message->jidto;
         }
@@ -191,15 +199,6 @@ class Chat extends WidgetCommon
         $view = $this->tpl();
 
         $contact = $cd->get($jid);
-        if($contact != null && $status == null
-        && $messages[0]->jidfrom == $jid
-        && !preg_match('#^\?OTR#', $messages[0]->body)) {
-            RPC::call(
-                'Chat.notify',
-                $contact->getTrueName(),
-                trim($messages[0]->body),
-                $contact->getPhoto('m'));
-        }
 
         $messages = array_reverse($messages);
         

app/widgets/Chats/Chats.php

@@ -26,7 +26,7 @@ class Chats extends WidgetCommon
         if(!array_key_exists($from, $chats)) {
             $this->ajaxOpen($from);
         } else {
-            RPC::call('movim_fill', 'chats_widget_list', $this->prepareChats());
+            //RPC::call('movim_fill', 'chats_widget_list', $this->prepareChats());
             RPC::call('Chats.refresh');
         }
     }

app/widgets/Chats/_chats.tpl

@@ -1,8 +1,6 @@
 {loop="$chats"}
     <li data-jid="{$value->jid}" {if="isset($messages[$value->jid])"}class="condensed"{/if}>
-        <!--<div class="control">
-            <i class="md md-chevron-right"></i>
-        </div>-->
+        <span data-key="chat|{$value->jid}" class="counter bottom"></span>
         <span class="icon bubble">
             <img src="{$value->getPhoto('s')}">
         </span>
@@ -21,7 +19,7 @@
     {$c->__('chatrooms.title')}
 </li>
 {loop="$conferences"}
-    <li  data-jid="{$value->conference}">
+    <li data-jid="{$value->conference}">
         <span class="icon bubble color {$value->name|stringToColor}">{$value->name|firstLetterCapitalize}</span>
         <span>{$value->name}</span>
     </li>

app/widgets/Chats/chats.js

@@ -7,15 +7,18 @@ var Chats = {
             items[i].onclick = function(e) {
                 Chat_ajaxGet(this.dataset.jid);
                 Chats.reset(items);
+                Notification_ajaxClear('chat|' + this.dataset.jid);
                 movim_add_class(this, 'active');
             }
-            i++;
+
             items[i].onmousedown = function(e) {
                 if(e.which == 2) {
                     Chats_ajaxClose(this.dataset.jid);
                     MovimTpl.hidePanel();
                 }
             }
+
+            i++;
         }
 
         if(window.innerWidth > 1024 && !MovimTpl.isPanel()) {

app/widgets/Navigation/navigation.tpl

@@ -23,7 +23,7 @@
     <a class="classic" href="{$c->route('chat')}">
         <li>
             <span class="icon"><i class="md md-forum"></i></span>
-            <span class="counter"></span>
+            <span data-key="chat" class="counter"></span>
             <span>{$c->__('page.chats')}</span>
         </li>
     </a>

app/widgets/Notification/Notification.php

@@ -1,33 +1,107 @@
 <?php
 
-/**
- * @package Widgets
- *
- * @file Notifs.php
- * This file is part of MOVIM.
- *
- * @brief The notification widget
- *
- * @author Timothée Jaussoin <edhelas@gmail.com>
- *
- * @version 1.0
- * @date 16 juin 2011
- *
- * Copyright (C)2010 MOVIM project
- *
- * See COPYING for licensing information.
- */
-
 class Notification extends WidgetCommon
 {
     function load()
     {
-        //$this->addcss('notification.css');
         $this->addjs('notification.js');
-        $this->registerEvent('pubsuberror', 'onPubsubError');
-        $this->registerEvent('moxlerror', 'onMoxlError');
+        /*$this->registerEvent('pubsuberror', 'onPubsubError');
+        $this->registerEvent('moxlerror', 'onMoxlError');*/
+    }
+
+    /**
+     * @brief Notify something
+     *
+     * @param string $key The key to group the notifications
+     * @param string $title The displayed title
+     * @param string $body The displayed body
+     * @param string $body The displayed URL
+     * @param integer $time The displayed time (in secondes)
+     * @param integer $action An action
+     * @return void
+     */    
+    static function append($key = null, $title, $body = null, $picture = null, $time = 2, $action = null)
+    {
+        // In this case we have an action confirmation
+        if($key == null) {
+            RPC::call('Notification.toast', $title);
+            return;
+        }
+        
+        $session = Session::start();
+        $notifs = $session->get('notifs');
+
+        if($notifs == null) $notifs = array();
+
+        $first = reset(explode('|', $key));
+        if(array_key_exists($first, $notifs)) {
+            $notifs[$first]++;
+        } else {
+            $notifs[$first] = 1;
+        }
+
+        RPC::call('Notification.counter', $first, $notifs[$first]);
+
+        if(array_key_exists($key, $notifs)) {
+            $notifs[$key]++;
+        } else {
+            $notifs[$key] = 1;
+        }
+
+        RPC::call('Notification.counter', $key, $notifs[$key]);
+
+        $n = new Notification;
+        RPC::call('Notification.snackbar', $n->prepareSnackbar($title, $body, $picture), $time);
+
+        $session->set('notifs', $notifs);
+    }
+
+    function ajaxClear($key)
+    {
+        $session = Session::start();
+        $notifs = $session->get('notifs');
+
+        if($notifs != null && array_key_exists($key, $notifs)) {
+            $counter = $notifs[$key];
+            unset($notifs[$key]);
+
+            RPC::call('Notification.counter', $key, '');
+
+            $first = reset(explode('|', $key));
+            if(array_key_exists($first, $notifs)) {
+                $notifs[$first] = $notifs[$first] - $counter;
+
+                if($notifs[$first] <= 0) {
+                    unset($notifs[$first]);
+                    RPC::call('Notification.counter', $first, '');
+                } else {
+                    RPC::call('Notification.counter', $first, $notifs[$first]);
+                }
+            }
+        }
+
+        $session->set('notifs', $notifs);
+    }
+
+    function ajaxGet()
+    {
+        $session = Session::start();
+        $notifs = $session->get('notifs');
+        if($notifs != null) RPC::call('Notification.refresh', $notifs);
+    }
+
+    function prepareSnackbar($title, $body = false, $picture = false)
+    {
+        $view = $this->tpl();
+        
+        $view->assign('title', $title);
+        $view->assign('body', $body);
+        $view->assign('picture', $picture);
+
+        return $view->draw('_notification', true);
     }
     
+    /*
     static function appendNotification($message, $type = 'info')
     {
         $id = md5($message.$type);
@@ -48,13 +122,13 @@ class Notification extends WidgetCommon
             default:
                 $icon = 'fa-info-circle';
                 break;
-        }
+        }*/
         
         /*$html = '
             <div class="notif notificationAnim '.$type.'" id="'.$id.'">
                 <i class="fa '.$icon.'"></i> '.$message.'
             </div>';*/
-        $html = $message;
+    /*    $html = $message;
 
         RPC::call('removeDiff', 'toast', $html, $id);
     }
@@ -65,5 +139,5 @@ class Notification extends WidgetCommon
 
     function onMoxlError($arr) {
         Notification::appendNotification($arr[1], 'error');
-    }
+    }*/
 }

app/widgets/Notification/_notification.tpl

@@ -0,0 +1,11 @@
+<ul class="{if="!isset($picture)"}simple{/if}">
+    <li class="{if="isset($body)"}condensed{/if}">
+    {if="isset($picture)"}
+        <span class="icon bubble"><img src="{$picture}"></span>
+    {/if}
+    <span>{$title}</span>
+    {if="isset($body)"}
+        <p>{$body}</p>
+    {/if}
+    </li>
+</ul>

app/widgets/Notification/notification.js

@@ -26,3 +26,69 @@ function removeDiff(id, html, id2) {
         },
         3000);
 }
+
+var Notification = {
+    refresh : function(keys) {
+        var counters = document.querySelectorAll('.counter');
+        for(i = 0; i < counters.length; i++) {
+            var n = counters[i];
+            if(n.dataset.key != null
+            && keys[n.dataset.key] != null) {
+                n.innerHTML = keys[n.dataset.key];
+            }
+        }
+    },
+    counter : function(key, counter) {
+        var counters = document.querySelectorAll('.counter');
+        for(i = 0; i < counters.length; i++) {
+            var n = counters[i];
+            if(n.dataset.key != null
+            && n.dataset.key == key) {
+                //setTimeout(function() {
+                    n.innerHTML = counter;
+                //}, 2000);
+            }
+        }
+    },
+    toast : function(html) {
+        target = document.getElementById('toast');
+        
+        if(target) {
+            target.innerHTML = html;
+        }
+        
+        setTimeout(function() {
+            target = document.getElementById('toast');
+            target.innerHTML = '';
+            },
+            3000);
+    },
+    snackbar : function(html, time) {
+        target = document.getElementById('snackbar');
+        
+        if(target) {
+            target.innerHTML = html;
+        }
+        
+        setTimeout(function() {
+            target = document.getElementById('snackbar');
+            target.innerHTML = '';
+            },
+            time*1000);
+    }
+}
+
+MovimWebsocket.attach(function() {
+    Notification_ajaxGet();
+});
+
+/*
+window.addEventListener('load', function () {
+  Notification.requestPermission(function (status) {
+    // This allows to use Notification.permission with Chrome/Safari
+    if (Notification.permission !== status) {
+      Notification.permission = status;
+    }
+  });
+});
+*/

app/widgets/Presence/Presence.php

@@ -40,7 +40,7 @@ class Presence extends WidgetBase
     {
         $html = $this->preparePresence();
         RPC::call('movim_fill', 'presence_widget', $html);
-        Notification::appendNotification($this->__('status.updated'), 'success');
+        Notification::append(null, $this->__('status.updated'));
         RPC::call('setPresenceActions');
         RPC::call('movim_remove_class', '#presence_widget', 'unfolded');
     }

system/User.php

@@ -105,8 +105,8 @@ class User {
         $s = \Sessionx::start();
         $s->destroy();
             
-        $sess = Session::start(APP_NAME);
-        Session::dispose(APP_NAME);
+        $sess = Session::start();
+        Session::dispose();
     }
 
     function getLogin()

themes/material/css/list.css

@@ -119,10 +119,6 @@ ul li > div.control > * {
     margin-left: 2rem;
 }
 
-ul li > div.control.bottom {
-    top: auto;
-    bottom: 0;
-}
 /*
 ul.thick li > div.control.bottom {
     bottom: 2rem;
@@ -154,10 +150,6 @@ ul li span.counter:empty {
 }
 
 ul li span.counter {
-    /*float: right;
-    margin-top: 1.5rem;
-     *
-     */
     position: absolute;
     right: 1rem;
     top: calc(50% - 1.5rem);
@@ -168,6 +160,10 @@ ul li span.counter {
     min-width: 2rem;
 }
 
+ul li span.counter.bottom {
+    top: calc(50%);
+}
+
 /* Bubble */
 
 ul li div.bubble {

themes/material/css/style.css

@@ -166,6 +166,14 @@ body > nav li { /* Little hack for the navbar */
         opacity: 0.5;
         pointer-events: none;
     }
+
+    body > nav:not(:hover) li span.counter {
+        left: 3.5rem;
+        top: calc(50% - 1.25rem);
+        right: auto;
+        font-size: 1.75rem;
+        padding: 0.25rem;
+    }
 }
 
 body > nav.active:before,
@@ -561,19 +569,25 @@ main section > div:first-child:nth-last-child(2) ~ div .actions.fixed > div:last
     max-height: 11rem;
     height: auto;
     color: white;
-    box-sizing: border-box;
     padding: 2rem 3rem;
+    box-sizing: border-box;
     width: 40rem;
     pointer-events: none;
     transition: opacity 0.2s ease, bottom 0.4s ease;
 }
 
+.snackbar p,
+.toast p {
+    color: white;
+}
+
 .snackbar {
     background-color: #333333;
     bottom: 3rem;
     left: 3rem;
     border-radius: 0.25rem;
     opacity: 1;
+    padding: 2rem 1rem;
 }
 
 .toast {
@@ -592,8 +606,9 @@ main section > div:first-child:nth-last-child(2) ~ div .actions.fixed > div:last
 @media screen and (max-width: 34rem) {
     .snackbar {
         width: 100%;
-        bottom: 0;
+        top: 0;
         left: 0;
+        bottom: auto;
         border-radius: 0;
     }