From 50ac8799fe13b72d96f0400ad345e7ef1e82b087 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ad=C3=A1n=20S=C3=A1nchez=20de=20Pedro=20Crespo?=
 <adansdpc@waalt.com>
Date: Sun, 9 Mar 2014 15:16:18 +0100
Subject: [PATCH] Better activities. EPIC message forward functionality

---
 chungo.js                  | 26 +++++++++--
 index.html                 | 15 ++++---
 l10n/en.ini                |  2 +
 scripts/loqui/account.js   | 29 +++++++------
 scripts/loqui/activity.js  | 88 +++++++++++++++++++++++++++-----------
 scripts/loqui/bindings.js  |  4 --
 scripts/loqui/menu.js      |  5 ++-
 scripts/loqui/message.js   |  3 ++
 scripts/loqui/providers.js |  2 +-
 style/loqui/index.css      | 62 ++++++++++++++++++++++-----
 10 files changed, 174 insertions(+), 62 deletions(-)

diff --git a/chungo.js b/chungo.js
index 76a01d51..6f5ba7ca 100644
--- a/chungo.js
+++ b/chungo.js
@@ -16,7 +16,7 @@ var Chungo = {
       
       Chungo.Router._stack = [$$('section').first().attr('id')];
       
-      setTimeout(function(){
+      setTimeout(function() {
         var sections = $$('section');
         sections.each(function () {
           $$(this).children('article').first().addClass('show');
@@ -44,8 +44,26 @@ var Chungo = {
           var image = this.dataset.image;
           $$(this).style('backgroundImage', 'url(' + image + ')');
         });
+        $$('[data-control="groupbar"]').each(function () {
+          var links = $$(this).children('[data-view-article]');
+          links.first().addClass('selected').siblings().removeClass('selected');
+          links.each(function () {
+            $$(this).on('click', function (e) {
+              $$(this).addClass('selected').siblings().removeClass('selected');
+            });  
+          });
+        });
       });
       
+      setTimeout(function () {
+        $$('header[data-title]').each(function () {
+          var title = $$(this).data('l10n-title') && '_' in window ? _($$(this).data('l10n-title')) : $$(this).data('title');
+          $$(this).append(
+            $$('<h1/>').text(title)
+          );
+        });
+      }, 1000);
+      
       $$('body').append(
         $$('<div>').addClass('chungo').append(
           $$('<div>').addClass('shader')
@@ -105,7 +123,6 @@ var Chungo = {
     _stack: [],
     
     section: function (to) {
-      console.log(to);
       if (to == 'back') {
         var from = this._stack.pop();
         var to = this._stack[this._stack.length - 1];
@@ -145,16 +162,17 @@ var Chungo = {
             .addClass('forth');
         }
       }
-      console.log(from, to);
+      console.log('SECTION', from, to);
       setTimeout(function () {
         Chungo.Aside.hide();
-      }, 300);
+      }, to != from ? 300 : 0);
     },
     
     article: function (section, article) {
       this.section(section);
       var to = $$('section#' + section).children('article#' + article);
       to.addClass('show').siblings('article').removeClass('show');
+      console.log('ARTICLE', to);
     }
     
   },
diff --git a/index.html b/index.html
index 3e968f52..ec508b36 100644
--- a/index.html
+++ b/index.html
@@ -47,14 +47,14 @@ <h1 data-l10n-id='Congrats'>Congratulations!</h1>
     </article>
   </section>
   <section id='main' data-transition='horizontal' class='fix head foot'>
-    <header data-title='Chats' data-l10n-title='Chats'>
+    <header>
       <div class='account' data-menu-onclick='me'>
         <img/>
-        <strong class="provider"></strong>
-        <span class="jid"></span>
+        <strong class='provider'></strong>
+        <span class='jid'></span>
       </div>
       <nav class='on-right'>
-        <button data-view-aside='accounts' data-title='Accounts' data-icon='menu' class='tab'></button>
+        <button data-view-aside='accounts' data-icon='menu' class='tab'></button>
       </nav>
       <nav class='on-right discreet'>
         <button data-menu-onclick='search' data-icon='search' ></button>
@@ -255,10 +255,15 @@ <h1 data-l10n-id='VideoCall'>VideoCall</h1>
     </div>
   </div>
   <section id='activity' data-transition='vertical'>
-    <header>
+    <header data-title='Activity'>
       <nav class='on-left'>
         <button data-view-section='back' data-icon='remove' class='up'></button>
       </nav>
+      <nav data-control='groupbar'>
+        <a data-l10n-id='Chats' data-view-article='chats'>Chats</a>
+        <a data-l10n-id='Contacts' data-view-article='contacts'>Contacts</a>
+        <a data-l10n-id='Groups' data-view-article='groups'>Groups</a>
+      </nav>
     </header>
     <article id='main' class='active scroll'></article>
   </section>
diff --git a/l10n/en.ini b/l10n/en.ini
index 22b61875..d621614b 100644
--- a/l10n/en.ini
+++ b/l10n/en.ini
@@ -130,6 +130,8 @@ Geolocating=Geolocating
 LocationDenied=We were not authorized to locate you. Please allow Geolocation for this app under the "App permissions" menu in the phone settings.
 LocationTimedout=The location request timed out. Maybe the GPS signal is too weak.
 LocationUnavailable=Your location is unavailable. Please check your phone Geolocation settings.
+Actionchat=New chat
+Actionfile=Send file
 
 # SHOWS
 showchat=Talkative
diff --git a/scripts/loqui/account.js b/scripts/loqui/account.js
index f54e43f1..c3cf8a13 100644
--- a/scripts/loqui/account.js
+++ b/scripts/loqui/account.js
@@ -145,7 +145,6 @@ var Account = function (core) {
   this.allRender = function () {
     this.accountRender();
     this.chatsRender();
-    //this.contactsRender();
     this.presenceRender();
     this.avatarsRender();
   }
@@ -183,13 +182,15 @@ var Account = function (core) {
   }
   
   // List all chats for this account
-  this.chatsRender = function () {
+  this.chatsRender = function (f, click, hold) {
     var account = this;
     var oldUl = $('section#main article#chats ul[data-jid="' + this.core.fullJid + '"]');
     var ul = $("<ul />");
     var media = _('AttachedFile');
     ul.data('jid', account.core.fullJid);
-    ul.attr('style', oldUl.attr('style'));
+    if (!f) {
+      ul.attr('style', oldUl.attr('style'));
+    }
     var totalUnread = 0;
     if (this.core.chats && this.core.chats.length) {
       for (var i in this.core.chats) {
@@ -210,7 +211,7 @@ var Account = function (core) {
           account.chats[i].save();
         }
         li.data('muc', chat.muc ? true : false);
-        li.bind('click', function () {
+        li.bind('click', click ? function () {click(this)} : function () {
           var ci = account.chatFind(this.dataset.jid);
           if (ci >= 0) {
             var chat = account.chats[ci];
@@ -222,7 +223,7 @@ var Account = function (core) {
             }, account);
           }
           chat.show();
-        }).bind('hold', function () {
+        }).bind('hold', hold ? function () {hold(this)} : function () {
           window.navigator.vibrate([100]);
           if (this.dataset.jid.match(/\-/)) {
             Messenger.mucProfile(this.dataset.jid);
@@ -242,7 +243,11 @@ var Account = function (core) {
       });
       ul.prepend(span);
     }
-    oldUl.replaceWith(ul);
+    if (f) {
+      f.appendChild($('<article/>').attr('id', 'chats').addClass('scroll').append(ul)[0]);
+    } else {
+      oldUl.replaceWith(ul);    
+    }
     Lungo.Element.count('aside li[data-jid="' + this.core.fullJid + '"]', totalUnread);
     if (ul.style('display') == 'block') {
       Lungo.Element.count('section#main header nav button[data-view-article="chats"]', totalUnread);
@@ -252,7 +257,8 @@ var Account = function (core) {
 
   // List all contacts for this account
   this.contactsRender = function (f, click) {
-    var ul = $("<ul />").addClass('list');
+    var article = $("<article/>").attr('id', 'contacts').addClass('scroll');
+    var ul = $("<ul/>").addClass('list');
     var frag = f;
     var account = this;
     this.core.roster.forEach(function (contact, i, roster) {
@@ -260,16 +266,15 @@ var Account = function (core) {
       var li = document.createElement('li');
       li.dataset.jid = contact.jid;
       li.innerHTML = 
-          '<span class=\'avatar\'><img /></span>'
-        + '<span class=\'name\'>' + name + '</span>'
-        + '<span class=\'show backchange\'></span>'
-        + '<span class=\'status\'></span>';
+          '<span class=\'name\'>' + name + '</span>'
+        + '<span class=\'status\'>' + contact.jid + '</span>';
       li.addEventListener('click', function (e) {
         click(this);
       });
       ul[0].appendChild(li);
     });
-    frag.appendChild(ul[0]);
+    article.append(ul);
+    frag.appendChild(article[0]);
   }
   
   // Render presence for every contact
diff --git a/scripts/loqui/activity.js b/scripts/loqui/activity.js
index c46ce094..d5f2e58d 100644
--- a/scripts/loqui/activity.js
+++ b/scripts/loqui/activity.js
@@ -1,17 +1,30 @@
 'use strict';
 
-var Activity = function (action, account, content) {
+var Activity = function (action, account, content, options) {
+
+  var options = {
+    chats: (options && 'chats' in options) ? options.chats : true,
+    groups: (options && 'groups' in options) ? options.groups : true
+  }
   
   var actions = {
     chat: function (f, account, content) {
-      account.contactsRender(f, function (t) {
+      var click = function (t) {
         var chat = account.chatGet(t.dataset.jid, $(t).children('.name').text());
         Lungo.Router.section('back');
+        account.show();
         chat.show();
-      });
+        if (content) {
+          $('#main #footbox #text').text(content).trigger('keydown');
+        }
+      }
+      if (options.chats) {
+        account.chatsRender(f, click);
+      }
+      account.contactsRender(f, click);
     },
     file: function (f, account, content) {
-      account.contactsRender(f, function (t) {
+      var click = function (t) {
         var jid = t.dataset.jid;
         var title = $(t).children('.name').text();
         var chat = account.chatGet(jid, title);
@@ -28,65 +41,90 @@ var Activity = function (action, account, content) {
             }
           }
         }
-      });
+      }
+      if (options.chats) {
+        account.chatsRender(f, click);
+      }
+      account.contactsRender(f, click);
     }
   }
   
-  var accountSelect = function (f) {
+  var accountSelect = function (f, title) {
+    var article = document.createElement('article');
+    article.id = 'accounts';
     var ul = document.createElement('ul');
     ul.classList.add('accounts');
-    
     for (var [i, account] in Iterator(App.accounts)) {
       let li = document.createElement('li');
       let ai = i;
-
       let icon = document.createElement('img');
       icon.src = 'img/providers/squares/' + account.core.provider + '.svg';
       icon.classList.add('provIcon');
-
       let provider = document.createElement('span');
       provider.textContent = account.connector.provider.longName;
       provider.classList.add('provider');
-
       let name = document.createElement('span');
       let vCard = $(account.connector.vcard);
       let address = ( vCard.length && vCard.find('FN').length ) ? vCard.find('FN').text() : account.core.user;
       name.textContent = address;
       name.classList.add('jid');
-
       li.appendChild(icon);
       li.appendChild(provider);
       li.appendChild(name);
-      
       li.addEventListener('click', function (e) {
-        Activity(action, App.accounts[ai], content);
+        Activity(action, App.accounts[ai], content, options);
       });
-      
       ul.appendChild(li);
+      article.appendChild(ul);
     }
-    f.appendChild(ul);
+    f.appendChild(article);
   }
   
+  var t = '';
   var f = document.createDocumentFragment();
+  var section = $('section#activity');
+  var article = section.children('article').empty();
+  section.children('article').remove();
   
   if (account) {
     if (action in actions) {
       actions[action](f, account, content);
+      section[0].appendChild(f);
+      section.find('h1').first().text(_('Action' + action));
+      section.addClass('extended');
+      if (options.groups) {
+        section.find('[data-view-article="groups"]').show();
+      } else {
+        section.find('[data-view-article="groups"]').hide();
+      }
+      if (options.chats) {
+        section.find('[data-view-article="chats"]').show();
+        section.find('[data-view-article="chats"]').trigger('click');
+      } else {
+        section.find('[data-view-article="chats"]').hide();
+        section.find('[data-view-article="contacts"]').trigger('click');
+      }
+    } else {
+      Tools.log('No such action!');
     }
   } else {
-    accountSelect(f);
+    accountSelect(f, t);
+    section[0].appendChild(f);
+    section.find('h1').first().text(t);
+    section.removeClass('extended');
+    Lungo.Router.article('activity', 'accounts');
   }
   
-  var article = $('section#activity article').empty();
-  article[0].appendChild(f);
   Lungo.Router.section('activity');
   
 }
 
-navigator.mozSetMessageHandler('activity', function(a) {
-  if (a.source.name === "share") {
-    console.log(a);
-    var file = a.source.data;
-    Activity('file', null, a.source.data);
-  }
-});
+if ('mozSetMessageHandler' in navigator) {
+  navigator.mozSetMessageHandler('activity', function(a) {
+    if (a.source.name === "share") {
+      console.log(a);
+      var file = a.source.data;
+      Activity('file', null, a.source.data);
+    }
+  });
+}
diff --git a/scripts/loqui/bindings.js b/scripts/loqui/bindings.js
index 0e71b997..7af45001 100644
--- a/scripts/loqui/bindings.js
+++ b/scripts/loqui/bindings.js
@@ -6,10 +6,6 @@ Lungo.init({
 
 $('document').ready(function(){
   setTimeout(function(){
-    $('[data-l10n-title]').each(function () {
-      $(this).attr('data-title', _(this.dataset.l10nTitle));
-      $(this).find('h1').text(_(this.dataset.l10nTitle));
-    });
     $('input[data-l10n-placeholder]').each(function () {
       var original = $(this).data('l10n-placeholder');
       var local = _(original);
diff --git a/scripts/loqui/menu.js b/scripts/loqui/menu.js
index 526dc952..e27650ad 100644
--- a/scripts/loqui/menu.js
+++ b/scripts/loqui/menu.js
@@ -42,7 +42,10 @@ var Menu = {
     },
     chatAdd: function (obj) {
       var account = Messenger.account();
-      Activity('chat', account);
+      Activity('chat', account, null, {
+        chats: false,
+        groups: account.supports('muc')
+      });
     },
     chatRemove: function(obj) {
       var jid = $(obj).closest('section').data('jid');
diff --git a/scripts/loqui/message.js b/scripts/loqui/message.js
index 75ec9eef..d00200e5 100644
--- a/scripts/loqui/message.js
+++ b/scripts/loqui/message.js
@@ -242,6 +242,9 @@ var Message = function (account, core, options) {
     if (onDivClick !== undefined) {
       div[0].onclick = onDivClick;
     }
+    div.on('hold', function (e) {
+      Activity('chat', null, $(this).children('.text').text());
+    });
   	return div[0];
   }
   
diff --git a/scripts/loqui/providers.js b/scripts/loqui/providers.js
index 88393809..dd3c349d 100644
--- a/scripts/loqui/providers.js
+++ b/scripts/loqui/providers.js
@@ -120,7 +120,7 @@ var Providers = {
         timeout: 300
       },
       autodomain: false,
-      features: ['multi', 'vcard', 'presence', 'easyAvatars', 'rosterMgmt', 'avatarChange', 'attention', 'csn', 'delay', 'time', 'statusChange'],
+      features: ['multi', 'vcard', 'presence', 'easyAvatars', 'rosterMgmt', 'avatarChange', 'attention', 'csn', 'delay', 'time', 'statusChange', 'muc'],
       color: '#149ED2',
       terms: {
         user: 'FullJID',
diff --git a/style/loqui/index.css b/style/loqui/index.css
index 1fd65729..95e3a621 100644
--- a/style/loqui/index.css
+++ b/style/loqui/index.css
@@ -110,6 +110,13 @@ section#success img#avatar {
 section > header {
   background-color: #312F34;
 }
+section > header > h1 {
+  position: absolute;
+  right: 1rem;
+  top: -.1rem;
+  color: white;
+  text-transform: uppercase;
+}
 section > header > nav {
   overflow: hidden;
   float: right;
@@ -150,27 +157,37 @@ section > header > nav.discreet button {
   width: 2.6rem;
 }
 
+section.extended > header {
+  background-color: #E74C3C;
+}
 section.extended article {
-  top: 5.5rem;
-  height: calc(100% - 3.7rem)!important;
+  top: 6rem;
+  height: calc(100% - 6rem)!important;
+}
+section:not(.extended) nav[data-control="groupbar"] {
+  display: none;
 }
 section nav[data-control="groupbar"] {
   position: absolute;
   top: 3rem;
   width: 100%;
-  height: 2.5rem;
-  background-color: #222;
+  height: 3rem;
+  background-color: #37353A;
   color: white;
 }
 section nav[data-control="groupbar"] a {
   float: left;
-  height: 2.5rem!important;
-  padding: .8rem .7rem;
+  margin: .7rem 0 0 .5rem;
+  padding: .2rem .5rem .3rem .5rem;
   font-size: .8em;
+  border-radius: .2rem;
 }
 [data-view-menu]:after {
   content: none;
 }
+section nav[data-control="groupbar"] a.selected {
+  background-color: #E74C3C;
+}
 section.aside {
   transform: translateX(5rem); 
 }
@@ -291,8 +308,7 @@ section#main article ul li:active,
 section#activity article ul li:active {
   background-color: #DDD;
 }
-section#main article ul li span.name,
-section#activity article ul li span.name {
+section#main article ul li span.name {
   position: absolute;
   left: 4.2rem;
   top: .6rem;
@@ -301,9 +317,17 @@ section#activity article ul li span.name {
   max-height: 1.4em;
   overflow: hidden;
 }
+section#activity article ul li span.name {
+  position: absolute;
+  left: 1rem;
+  top: .6rem;
+  color: #444;
+  max-width: calc(100% - 4.5rem);
+  max-height: 1.4em;
+  overflow: hidden;
+}
 section#main article ul li span.status,
-section#main article ul li span.lastMessage,
-section#activity article ul li span.status {
+section#main article ul li span.lastMessage {
   position: absolute;
   left: 4.2rem;
   top: 2rem;
@@ -316,6 +340,20 @@ section#activity article ul li span.status {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+section#activity article ul li span.status,
+section#activity article ul li span.lastMessage {
+  position: absolute;
+  left: 1rem;
+  top: 2rem;
+  color: #444;
+  font-weight: 100;
+  font-size: .8em;
+  max-width: calc(100% - 4.5rem);
+  max-height: 1.4em;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 section#main article ul li span.status img,
 section#main article ul li span.lastMessage img,
 section#activity article ul li span.status img {
@@ -332,6 +370,10 @@ section#main article ul li span.lastStamp {
   max-width: calc(100% - 4.7rem);
   text-align: right;
 }
+section#activity article ul li span.lastStamp,
+section#activity article ul li span.unread {
+  display: none;
+}
 section#main article ul li .show {
   display: block;
   position: absolute;