Better activities. EPIC message forward functionality

tapuafrad · Mar 9, 2014 · 50ac879 · 50ac879
1 parent 7000738
commit 50ac879
Show file tree

Hide file tree

Showing 10 changed files with 174 additions and 62 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,24 +257,24 @@ 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) {
       var name = contact.name || contact.jid;
       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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',