Display activity -- without object.

index.html

@@ -83,18 +83,69 @@
           <p id="profile-summary">
           </p>
         </section>
+        <details>
+          <summary>Show source</summary>
+          <textarea rows="30" cols="120" readonly id="profile-code-source">
+          </textarea>
+        </details>
+      </main>
+      <!-- Show Activity page -->
+      <main id="show-activity" style="display:none;">
+        <h4>Activity <span id="activity-type"></span></h4>
+        <p>Published: <span id="activity-published"></span></p>
         <section>
+          From:
+          <span id="activity-actor-icon"></span>
+          <p style="display:inline-block;">
+            <span id="activity-actor-display-name"></span><br/>
+            <a id="activity-actor-address"></a>
+          </p>
+        </section>
+        <details>
+          <summary>Audience</summary>
+          <p>To: <ul id="activity-to" class="recipient-list"></ul></p>
+          <p>Cc: <ul id="activity-cc" class="recipient-list"></ul></p>
+        </details>
+        <details>
+          <summary>Show source</summary>
+          <textarea rows="30" cols="120" readonly id="activity-code-source">
+          </textarea>
+        </details>
+        <!-- Object display -->
+        <section id="activity-object">
+          <h4>Object <span id="activity-object-type"></span></h4>
+          <p>Published: <span id="activity-object-published"></span></p>
+          <section>
+            Author:
+            <span id="activity-object-actor-icon"></span>
+            <p style="display:inline-block;">
+              <span id="activity-object-actor-display-name"></span><br/>
+              <a id="activity-object-actor-address"></a>
+            </p>
+          </section>
+          <details>
+            <summary>Audience</summary>
+            <p>To: <ul id="activity-object-to" class="recipient-list"></ul></p>
+            <p>Cc: <ul id="activity-object-cc" class="recipient-list"></ul></p>
+          </details>
+          <h5><span id="activity-object-title"></span><h5>
+          <p id="activity-object-summary"><p>
+          <p id="activity-object-content"><p>
+          <details>
+            <summary>Attachments</summary>
+            <ul id="activity-object-attachments" class="attachments"></ul>
+          </details>
+          <details>
+            <summary>Tags</summary>
+            <ul id="activity-object-tags" class="tags"></ul>
+          </details>
           <details>
             <summary>Show source</summary>
-            <textarea rows="30" cols="120" readonly id="profile-code-source">
+            <textarea rows="30" cols="120" readonly id="activity-object-code-source">
             </textarea>
           </details>
         </section>
       </main>
-      <!-- Show Message page -->
-      <main id="show-message" style="display:none;">
-        <section id="message-info"></section>
-      </main>
       <!-- Send message page -->
       <main id="send-message" style="display:none;">
         <h4>Audience</h4>

render.js

@@ -2,6 +2,7 @@ const {Actor} = require('./src/actor.js')
 const {Timeline} = require('./src/timeline.js')
 const {Message} = require('./src/message.js')
 const {ConnectedUser} = require('./src/connected-user.js')
+const {KnownActivities} = require('./src/known-activities.js')
 
 // For access of elements
 const Elem = function(id) {
@@ -19,11 +20,8 @@ const Render = {
   audienceActor: function(actor) {
     var display = '<section class="actor-display">'
     if (actor.valid) {
-      var icon = actor.info.icon
-      if (!icon) {
-        icon = Icons['unknown-user']
-      }
-      display = display + '<img src="' + actor.info.icon + '" width="32" height="32" /> '
+      const icon = actor.info.icon ? actor.info.icon : Icons['unknown-user']
+      display = display + '<img src="' + icon + '" width="32" height="32" /> '
       + '<p style="display:inline-block;"><strong>' + actor.displayName() + '</strong> <br/>'
       + '<a href="' + actor.urls.profile + '">'
       + actor.address()
@@ -153,10 +151,7 @@ const UI = {
     },
     'ask-password': function(_) {
       Elem('connect-password').value = ''
-      var icon = ConnectedUser.actor.info.icon
-      if (!icon) {
-        icon = Icons['unknown-user']
-      }
+      const icon = ConnectedUser.actor.info.icon ? ConnectedUser.actor.info.icon : Icons['unknown-user']
       Elem('ask-password-user-icon').innerHTML = '<img src="' + icon + '" width="32" height="32" />'
       Elem('ask-password-user-display-name').innerText = ConnectedUser.actor.displayName()
       Elem('ask-password-user-address').href = ConnectedUser.actor.urls.profile
@@ -164,10 +159,7 @@ const UI = {
     },
     'show-profile': function(actor) {
       // data contains the actor to display
-      var icon = actor.info.icon
-      if (!icon) {
-        icon = Icons['unknown-user']
-      }
+      const icon = actor.info.icon ? actor.info.icon : Icons['unknown-user']
       Elem('profile-icon').innerHTML = '<img src="' + icon + '" width="96" height="96" />'
       Elem('profile-display-name').innerText = actor.displayName()
       Elem('profile-address').href = actor.urls.profile
@@ -175,7 +167,38 @@ const UI = {
       Elem('profile-summary').innerHTML = actor.info.summary
       Elem('profile-code-source').value = JSON.stringify(actor.raw, null, 1)
     },
-    'show-message': function(data) {
+    'show-activity': function(activity) {
+      // data contains the activity to display
+      Elem('activity-type').innerText = activity.type
+      Elem('activity-published').innerText = activity.published ? activity.published.toLocaleString() : ''
+      const icon = activity.actor.info.icon ? activity.actor.info.icon : Icons['unknown-user']
+      Elem('activity-actor-icon').innerHTML = '<img src="' + icon + '" width="48" height="48" />'
+      Elem('activity-actor-display-name').innerText = activity.actor.displayName()
+      Elem('activity-actor-address').innerText = activity.actor.address()
+      Elem('activity-actor-address').href = activity.actor.urls.profile
+      Elem('activity-to').innerHTML = activity.to.map(
+        function(element) {
+          return '<li class="actor-display">' + Render.audienceActor(element) + '</li>'
+        }).join('')
+      Elem('activity-cc').innerHTML = activity.cc.map(
+        function(element) {
+          return '<li class="actor-display">' + Render.audienceActor(element) + '</li>'
+        }).join('')
+      Elem('activity-code-source').value = JSON.stringify(activity.raw, null, 1)
+      // Object of activity
+      // Elem('activity-object-type')
+      // Elem('activity-object-published')
+      // Elem('activity-object-actor-icon')
+      // Elem('activity-object-actor-display-name')
+      // Elem('activity-object-actor-address')
+      // Elem('activity-object-to')
+      // Elem('activity-object-cc')
+      // Elem('activity-object-title')
+      // Elem('activity-object-summary')
+      // Elem('activity-object-content')
+      // Elem('activity-object-attachments')
+      // Elem('activity-object-tags')
+      // Elem('activity-object-code-source')
     },
     'send-message': function(_) {
       Elem('send-message-to-recipient').value = ''
@@ -413,73 +436,6 @@ const UI = {
   },
   // Show contents of activities
   showActivity: function(activityId) {
-    // TODO
+    UI.showPage('show-activity', KnownActivities.get(activityId))
   }
-
-
-/*
-  renderRawData: function(rawData) {
-    var str_data = JSON.stringify(rawData, null, 1)
-    var replace_map = {
-      '&': '&amp;',
-      '<': '&lt;',
-      '>': '&gt;',
-      '"': '&quot;',
-      '\'': '&#039;'
-    }
-    str_data = str_data.replace(/[&<>"']/g, x => replace_map[x])
-    return '<section class="data-raw"><details>'
-    + '<summary>Raw data</summary>'
-    + '<textarea rows="30" cols="120" readonly>' + str_data + '</textarea>'
-    + '</details></section>'
-  },
-  renderObject: {
-    'Note': function(activity) {
-      return '<article class="activity create note">'
-        + '<section class="activity-object-field">From ' + (activity.actor ? UI.renderActorTag(activity.actor) : '')
-        + ' – ' + (activity.published ? activity.published.toLocaleString() : '') + '</section>'
-        + '<section class="activity-object-field"> To ' + (activity.to ? activity.to.map(x => UI.renderActorTag(x)).join(' ') : '' ) + '</section>'
-        + '<section class="activity-object-field"> Cc ' + (activity.cc ? activity.cc.map(x => UI.renderActorTag(x)).join(' ') : '' ) + '</section>'
-        + '<section class="activity-object-field">Subject: ' + (activity.object.summary ? activity.object.summary : '' ) + '</section>'
-        + '<section class="activity-object-field activity-object-content">' + (activity.object.content ? activity.object.content : '' ) + '</section>'
-        + UI.renderRawData(activity.raw)
-        + '</article>'
-    }
-  },
-  renderActivity: {
-    'Create': function(activity) {
-      if (UI.renderObject[activity.object.type]) {
-        return UI.renderObject[activity.object.type](activity)
-      } else {
-        return '<article class="activity create">'
-          + 'Object creation (' + activity.object.type + ').'
-          + UI.renderRawData(activity.raw)
-          + '</article>'
-      }
-    },
-    'Like': function(activity) {
-      return '<article class="activity like">'
-        + (activity.actor ? UI.renderActorTag(activity.actor) : '')
-        + " liked "
-        + (activity.object ? '<a href="' + activity.object + '">' + activity.object + '</a>' : '')
-        + UI.renderRawData(activity.raw)
-        + '</article>'
-    },
-    'Announce': function(activity) {
-      return '<article class="activity share">'
-        + (activity.actor ? UI.renderActorTag(activity.actor) : '')
-        + " shared "
-        + (activity.object ? '<a href="' + activity.object + '">' + activity.object + '</a>' : '')
-        + UI.renderRawData(activity.raw)
-        + '</article>'
-    },
-    'Delete': function(activity) {
-      return '<article class="activity delete">'
-        + (activity.actor ? UI.renderActorTag(activity.actor) : '')
-        + " deleted an object."
-        + UI.renderRawData(activity.raw)
-        + '</article>'
-    }
-  }
-  */
 }

src/timeline.js

@@ -1,4 +1,5 @@
 const {Activity} = require('./activity.js')
+const {KnownActivities} = require('./known-activities.js')
 
 // Timeline class
 // Represent a collection of activities
@@ -27,12 +28,12 @@ Timeline.prototype = {
           this.activities = []
           this.prev = answer.first.prev
           this.next = answer.first.next
-          this.parseActivities(answer.first.orderedItems, callback)
+          this.parseActivities(answer.first.orderedItems, token, callback)
         } else if (answer.type === 'OrderedCollectionPage') {
           this.activities = []
           this.prev = answer.prev
           this.next = answer.next
-          this.parseActivities(answer.orderedItems, callback)
+          this.parseActivities(answer.orderedItems, token, callback)
         } else {
           callback(false, 'Timeline: unexpected answer from server')
           console.log(answer)
@@ -49,17 +50,29 @@ Timeline.prototype = {
     request.setRequestHeader('Accept', 'application/activity+json')
     request.send()
   },
-  parseActivities: function(raw_activities, callback) {
+  parseActivities: function(raw_activities, token, callback) {
     // Get the next activity
     const raw_act = raw_activities.shift()
-    if (raw_act) {
+    if (raw_act && typeof raw_act === 'string') {
+      // link, and not the object itself => fetch the activity
+      KnownActivities.retrieve(raw_act, token, function(load_ok, activity, failure_message) {
+        if (load_ok) {
+          // Push to the list of activities
+          this.activities.push(activity)
+        }
+        this.parseActivities(raw_activities, token, callback)
+      }.bind(this))
+    } else if (raw_act) {
       const act = new Activity(raw_act)
       act.loadActors(
         function(load_ok, failure_message) {
           if (load_ok) {
+            // Push to the list of activities
             this.activities.push(act)
+            // Add the activity to the known activities
+            KnownActivities.set(act.id, act)
           }
-          this.parseActivities(raw_activities, callback)
+          this.parseActivities(raw_activities, token, callback)
         }.bind(this))
     } else {
       callback(true, undefined)