Fix #61 auto hide/expand attachments according to userpref

cli/config.js

@@ -2,6 +2,12 @@
 /** @type Config */
 var CONFIG;
 
+var CONFIG_AUTO_EXPAND = {
+    NEVER: 0,
+    ALWAYS: 1,
+    NOT_IMAGE: 2
+};
+
 /** @constructor */
 function Config(configData) {
     this.deviceId = null;
@@ -17,6 +23,9 @@ function Config(configData) {
     /** @type{boolean|undefined} */
     this.scrollAvatars;
 
+    /** @type{number|undefined} */
+    this.autoExpandAttachments;
+
     // Load global configurations
     for (var i =0, nbConfig = configData.length; i < nbConfig; i++)
         if (configData[i]["service"] === null && configData[i]["device"] === null)
@@ -36,6 +45,10 @@ Config.prototype.mergeConfig = function(configData) {
         this.colorfulNames = configData["colorfulNames"];
     if (configData["scrollAvatars"] !== undefined)
         this.scrollAvatars = configData["scrollAvatars"];
+    if (configData["autoExpandAttachments"] !== undefined)
+        this.autoExpandAttachments = configData["autoExpandAttachments"];
+    if (typeof this.autoExpandAttachments === "string")
+        this.autoExpandAttachments = parseInt(this.autoExpandAttachments, 10);
 };
 
 /** @return {string|undefined} */
@@ -55,6 +68,11 @@ Config.prototype.isColorfulNames = function() {
     return this.colorfulNames === true;
 };
 
+Config.prototype.shouldExpandAttachment = function(attachmentHasImage) {
+    return this.autoExpandAttachments === CONFIG_AUTO_EXPAND.ALWAYS ||
+        ((this.autoExpandAttachments === CONFIG_AUTO_EXPAND.NOT_IMAGE || this.autoExpandAttachments === undefined) && !attachmentHasImage);
+};
+
 Config.prototype.commitNewSettings = function(newSettings) {
     for (var i in newSettings) {
         // Just to check not empty object

cli/dom.js

@@ -233,7 +233,8 @@ function addHoverButtons(hover, msg) {
 function doCreateMessageDom(msg) {
     var dom = document.createElement("div")
         ,msgBlock = document.createElement("div")
-        ,hoverReaction = document.createElement("li");
+        ,hoverReaction = document.createElement("li")
+        ,attachmentSummary = document.createElement("summary");
     dom.hover = document.createElement("ul");
 
     dom.attachments = document.createElement("ul");
@@ -241,6 +242,7 @@ function doCreateMessageDom(msg) {
     dom.ts = document.createElement("div");
     dom.textDom = document.createElement("div");
     dom.authorName = document.createElement("span");
+    dom.attachmentWrapper = document.createElement("details");
 
     dom.className = R.klass.msg.item;
     dom.ts.className = R.klass.msg.ts;
@@ -256,7 +258,10 @@ function doCreateMessageDom(msg) {
     msgBlock.appendChild(dom.authorName);
     msgBlock.appendChild(dom.textDom);
     msgBlock.appendChild(dom.ts);
-    msgBlock.appendChild(dom.attachments);
+    attachmentSummary.textContent = "attachment";
+    dom.attachmentWrapper.appendChild(attachmentSummary);
+    dom.attachmentWrapper.appendChild(dom.attachments);
+    msgBlock.appendChild(dom.attachmentWrapper);
 
     dom.edited = document.createElement("div");
     dom.edited.className = R.klass.msg.edited;

cli/lang/en.js

@@ -85,7 +85,12 @@ lang["en"] = {
         "settings-displayEmojiProviderLbl": "Emoji provider",
         "settings-displayDisplayAvatarLbl": "Display avatars",
         "settings-displayColorfulNamesLbl": "Colorful names",
-        "settings-displayScrollAvatarsLbl": "Scroll avatars"
+        "settings-displayScrollAvatarsLbl": "Scroll avatars",
+
+        "settings-displayAttachmentContentLbl": "Automaticcaly unwrap attachments ?",
+        "settings-displayAttachmentContent-never": "Never",
+        "settings-displayAttachmentContent-always": "Always",
+        "settings-displayAttachmentContent-notimg": "If they don't contain image"
     }
 };
 

cli/lang/fr.js

@@ -85,7 +85,12 @@ lang["fr"] = {
         "settings-displayEmojiProviderLbl": "Gestionnaire d'emojis",
         "settings-displayDisplayAvatarLbl": "Afficher les avatars",
         "settings-displayColorfulNamesLbl": "Afficher les nomes en couleur",
-        "settings-displayScrollAvatarsLbl": "Faire défiler les avatars lors de la lecture"
+        "settings-displayScrollAvatarsLbl": "Faire défiler les avatars lors de la lecture",
+
+        "settings-displayAttachmentContentLbl": "Afficher les pieces jointes ?",
+        "settings-displayAttachmentContent-never": "Jamais",
+        "settings-displayAttachmentContent-always": "Toujours",
+        "settings-displayAttachmentContent-notimg": "Si elles ne contiennent pas d'images"
     }
 };
 

cli/resources.js

@@ -53,7 +53,8 @@ var R = {
                 emojiProvider: "settings-displayEmojiProvider",
                 displayAvatar: "settings-displayDisplayAvatar",
                 colorfulNames: "settings-displayColorfulNames",
-                scrollAvatars: "settings-displayScrollAvatars"
+                scrollAvatars: "settings-displayScrollAvatars",
+                displayAttachments: "settings-displayAttachmentContent"
             }
         },
         favicon: "linkFavicon"

cli/uiMessage.js

@@ -154,18 +154,32 @@ var AbstractUiMessage = (function() {
     },
 
     updateAttachments = function(_this, channelId) {
-        var attachmentFrag = document.createDocumentFragment();
+        var attachmentFrag = document.createDocumentFragment(),
+            containImages = false,
+            hasAttachment = false;
 
         for (var i =0, nbAttachments = _this.attachments.length; i < nbAttachments; i++) {
             var attachment = _this.attachments[i];
             if (attachment) {
                 var domAttachment = createAttachmentDom(channelId, _this, attachment, i);
-                if (domAttachment)
+                if (domAttachment) {
                     attachmentFrag.appendChild(domAttachment);
+                    containImages |= !!attachment["image_url"];
+                    hasAttachment = true;
+                }
             }
         }
         _this.dom.attachments.textContent = '';
         _this.dom.attachments.appendChild(attachmentFrag);
+        if (hasAttachment) {
+            _this.dom.attachmentWrapper.classList.remove(R.klass.hidden);
+            if (CONFIG.shouldExpandAttachment(containImages))
+                _this.dom.attachmentWrapper["open"] = true;
+            else
+                _this.dom.attachmentWrapper["open"] = false;
+        } else {
+            _this.dom.attachmentWrapper.classList.add(R.klass.hidden);
+        }
     },
 
     updateHover = function(_this, channelId) {

cli/uiSettings.js

@@ -59,6 +59,7 @@ var Settings = (function() {
         document.getElementById(R.id.settings.display.displayAvatar).checked = CONFIG.isDisplayAvatars();
         document.getElementById(R.id.settings.display.colorfulNames).checked = CONFIG.isColorfulNames();
         document.getElementById(R.id.settings.display.scrollAvatars).checked = CONFIG.isScrollAvatars();
+        document.getElementById(R.id.settings.display.displayAttachments).value = CONFIG.autoExpandAttachments !== undefined ? CONFIG.autoExpandAttachments : CONFIG_AUTO_EXPAND.NOT_IMAGE;
 
         displayed = true;
     },
@@ -126,6 +127,10 @@ var Settings = (function() {
         if (isScrollAvatars !== CONFIG.isScrollAvatars()) {
             newSettings["scrollAvatars"] = isScrollAvatars;
         }
+        var displayAttachmentValue = document.getElementById(R.id.settings.display.displayAttachments).value;
+        if (displayAttachmentValue !== CONFIG.autoExpandAttachments) {
+            newSettings["autoExpandAttachments"] = displayAttachmentValue;
+        }
         CONFIG.commitNewSettings(newSettings);
         close();
     });

cli/workflow.js

@@ -100,6 +100,12 @@ function onConfigUpdated() {
         invalidateAllMessages();
         document.getElementById(R.id.currentRoom.content).removeEventListener('scroll', updateAuthorAvatarImsOffset);
     }
+    for (var roomId in DATA.history) {
+        DATA.history[roomId].messages.forEach(function(msg) {
+            if (msg.dom)
+                msg.updateDom();
+        });
+    }
     document.getElementById(R.id.stylesheet).innerHTML = CONFIG.compileCSS();
 }
 

srv/src/models/accountConfig.js

@@ -98,6 +98,10 @@ AccountConfig.prototype.merge = function(configBlob) {
         this.scrollAvatars = configBlob["scrollAvatars"];
         modified = true;
     }
+    if (configBlob["autoExpandAttachments"] !== undefined && configBlob["autoExpandAttachments"] !== this.autoExpandAttachments) {
+        this.autoExpandAttachments = configBlob["autoExpandAttachments"];
+        modified = true;
+    }
     return modified;
 };
 
@@ -211,7 +215,8 @@ AccountConfig.prototype.toDb = function() {
         emojiProvider: this.emojiProvider,
         displayAvatar: this.displayAvatar,
         colorfulNames: this.colorfulNames,
-        scrollAvatars: this.scrollAvatars
+        scrollAvatars: this.scrollAvatars,
+        autoExpandAttachments: this.autoExpandAttachments
     });
 };
 
@@ -222,6 +227,7 @@ AccountConfig.prototype.fromDb = function(dbObj) {
     this.displayAvatar = dbObj.displayAvatar;
     this.colorfulNames = dbObj.colorfulNames;
     this.scrollAvatars = dbObj.scrollAvatars;
+    this.autoExpandAttachments = dbObj.autoExpandAttachments;
 };
 
 module.exports.accountConfigManager = new AccountConfigManager();

srv/src/template/index.js

@@ -72,6 +72,7 @@ module.exports.exec = function(req, res) {
                           <label><span id="settings-displayDisplayAvatarLbl"></span><input type="checkbox" value="1" id="settings-displayDisplayAvatar"></label>
                           <label><span id="settings-displayColorfulNamesLbl"></span><input type="checkbox" value="1" id="settings-displayColorfulNames"></label>
                           <label><span id="settings-displayScrollAvatarsLbl"></span><input type="checkbox" value="1" id="settings-displayScrollAvatars"></label>
+                          <label><span id="settings-displayAttachmentContentLbl"></span><select id="settings-displayAttachmentContent"><option id="settings-displayAttachmentContent-never" value="0"/><option id="settings-displayAttachmentContent-always" value="1"/><option id="settings-displayAttachmentContent-notimg" value="2"/></select></label>
                       </section>
                       <section class="settings-privacy">
                           <h4 id="settings-privacy-title"></h4>