mail_grabber 1.0.0.rc1 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d564e5c8027b8dd25676e1076cddefda9c055cf694df0fb8824ef836c0c8c31d
-  data.tar.gz: 4599ee2a8e4491b26df2d44005eeb11594993b889bdc3a1e277c284b6a8422bf
+  metadata.gz: 700d9bdbeeed0c02117ec588e990fb4d69e5b239aa4fec3d13fbc70acbba1230
+  data.tar.gz: 71b84af90f8496cb0a07d9b96312ec37efa3b03e5fc871d57bd11468affabfb0
 SHA512:
-  metadata.gz: 5e58191d8045ef116faffeb4574f5d875e0cf0c9a1387354d151226981d318752bc9ba675e0d8ade11629f45f69ac247f65d6bc71724f4655b00612d199c52e9
-  data.tar.gz: 3b07b4809a2d9326ff95790f02c0d2ef89252f688e9d7968784aae2d37a69bffc431c74a5495f187faafe1f5b5d3538d29f476e0cda58b95bcaf816d39b4a693
+  metadata.gz: 6aca1623fb80aa3f79ef16050d799c955352ac463cdd8dd03928b828ed5abb6a4821f19f7045ab592e79ad1524e3cd04ff59d4df2c7055064969e1ac00e9edb3
+  data.tar.gz: 981f1b1bb7f4310e3b6c703ea75e5c43a7e8626a377a80884a660c4d3f69b6d3546b21fa9acbcfea1c657379caea4aa6ed9ca4e508a7d374878efff255dadc5a

data/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change log
 
+## 1.0.0 (2021-04-02)
+
+### Changes
+
+* Update documentation.
+* Change javascript to hide HTML tab if mail does not have HTML part.
+* Refactoring the JavaScript code.
+* Change the documentation uri in the gemspec file.
+* Update .rubocop.yml.
+* Update gems.
+
+### Bug fixes
+
+* Fix 3x load message list when reload tab and infinite scroll was used.
+
+
 ## 1.0.0.rc1 (2021-03-20)
 
 * Implement MailGrabber methods and functionality. See [README.md](https://github.com/MailToolbox/mail_grabber/blob/main/README.md)

data/lib/mail_grabber/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module MailGrabber
-  VERSION = '1.0.0.rc1'
+  VERSION = '1.0.0'
 end

data/lib/mail_grabber/web/assets/javascripts/application.js

@@ -1,539 +1,148 @@
-(function() {
-  var MailGrabber = {
-    /**
-     * Change which content (message part) should show. When the page is loading
-     * the HTML content will be active and the others will be hidden. When we
-     * click on tab e.g. Plain Text then this content will active and other
-     * hidden.
-     *
-     * @param {Object} event - which part we clicked
-     */
-    changeMessageContent: function(event) {
-      var messageTabs =
-        document
-          .querySelectorAll('[data-message-tab]');
-
-      var messageContents =
-        document
-          .querySelectorAll('[data-message-content]');
-
-      var clickedTabType = event.target.dataset.messageTab;
-
-      messageTabs.forEach(function(messageTab, index) {
-        messageTab.classList.remove('active');
-        messageContents[index].classList.remove('hide');
-
-        if(messageTab.dataset.messageTab === clickedTabType) {
-          messageTab.classList.add('active');
-        }
-
-        if(messageContents[index].dataset.messageContent !== clickedTabType) {
-          messageContents[index].classList.add('hide');
-        }
-      });
-    },
-
-    /**
-     * Show default backgroud image instead of any content.
-     */
-    defaultBackground: function() {
-      var messageContent =
-        document
-          .querySelector('div[data-content-type=message-content]');
-
-      messageContent.innerHTML = '';
-
-      messageContent.style.background =
-        "url('" + messageContent.dataset.backgroundImage +
-        "') center center no-repeat";
-      messageContent.style.backgroundSize = '50%';
-      messageContent.style.opacity = '10%';
-    },
-
-    /**
-     * Delete all content (message list and message content as well),
-     * set default backgroud and the infinite scroll params when we click on
-     * the Reload or Delete tabs.
-     */
-    deleteContent: function() {
-      MailGrabber.lastMessageId = -1;
-      MailGrabber.page = 1;
-      MailGrabber.defaultBackground();
-
-      document
-        .querySelector('ul[data-content-type=message-list]')
-        .innerHTML = '';
-    },
-
-    /**
-     * Delete a message when we click on the Delete tab. It will remove all
-     * content and reload the message list.
-     *
-     * @param {Number} messageId - which message we would like to delete
-     */
-    deleteMessage: function(messageId) {
-      MailGrabber.request('DELETE', '/message/' + messageId + '.json',
-        function() {
-          MailGrabber.deleteContent();
-          MailGrabber.getMessageList();
-        }
-      );
-    },
-
-    /**
-     * Delete message list when we click on the Clear tab. It will remove
-     * everything.
-     */
-    deleteMessageList: function() {
-      MailGrabber.request('DELETE', '/messages.json', function() {
-        MailGrabber.deleteContent();
-      });
-    },
-
-    /**
-     * Get a message and render the message content, when we click on an item
-     * from the message list.
-     *
-     * @param {Number} messageId - which message we would like to see
-     */
-    getMessage: function(messageId) {
-      MailGrabber.request('GET', '/message/' + messageId + '.json',
-        function(response) {
-          MailGrabber.renderMessageContent(JSON.parse(response));
-        }
-      );
-    },
-
-    /**
-     * Get a list of the messages. Also change the params of the infinite scroll
-     * that we can know which page we are on. It checks the message ids to not
-     * load those messages which are already on the list.
-     */
-    getMessageList: function() {
-      var messageIds;
-
-      MailGrabber.request('GET', '/messages.json?page=' + MailGrabber.page +
-        '&per_page=' + MailGrabber.perPage,
-        function(response) {
-          response = JSON.parse(response);
-          messageIds = response.map(function(hash) { return hash['id'] });
-
-          if(response.length > 0) {
-            if(messageIds.indexOf(MailGrabber.lastMessageId) === -1) {
-              MailGrabber.lastMessageId = messageIds.pop();
-              MailGrabber.page++;
-              MailGrabber.renderMessageList(response);
-            } else {
-              MailGrabber.reloadMessageList();
-            }
-          }
-        }
-      );
-    },
-
-    /**
-     * Scrolling infinitely. Count the height of the list and if we reached the
-     * bottom of the list then tries to load more message.
-     *
-     * @param {Object} messageList - the message list container
-     */
-    infiniteScroll: function(messageList) {
-      var scrollHeight = messageList.scrollHeight;
-      var scrollTop = messageList.scrollTop;
-      var clientHeight = messageList.clientHeight;
-
-      if(scrollHeight - scrollTop === clientHeight) {
-        MailGrabber.getMessageList();
-      }
-    },
-
-    /**
-     * Initialize MailGrabber. Add some event listeners to the Reload and the
-     * Clear tabs then load messages and the default background.
-     */
-    init: function() {
-      document
-        .querySelector('li[data-content-type=message-reload-tab]')
-        .addEventListener('click', MailGrabber.reloadMessageList);
-
-      document
-        .querySelector('li[data-content-type=message-clear-tab]')
-        .addEventListener('click', MailGrabber.deleteMessageList);
-
-      MailGrabber.loadMessageList();
-      MailGrabber.defaultBackground();
-    },
-
-    /**
-     * Format the given date or time.
-     *
-     * @param {DateTime} dateTime - the message created at attribute
-     * @param {String} ouputType - what type we would like to see
-     *
-     * @return {String} the new format of the date or time
-     */
-    formatDateTime: function(dateTime, outputType) {
-      dateTime = new Date(dateTime);
-      var dateTimeNow = new Date();
-      // Sun Feb 21 2021 21:00:00 GMT+0100 (Central European Standard Time)
-      //  0   1  2   3      4        5         6       7        8      9
-      var dateTimeComponents = dateTime.toString().split(' ');
-      var output;
-
-      switch(outputType) {
-        case 'messageListDateOrTime':
-          if(dateTime.getDate() === dateTimeNow.getDate()) {
-            output = MailGrabber.formatTime(dateTimeComponents[4]);
-          } else if(dateTime.getFullYear() === dateTimeNow.getFullYear()) {
-            output = dateTimeComponents[1] + ' ' + dateTimeComponents[2];
-          } else {
-            output = dateTimeComponents[3] + ' ' + dateTimeComponents[1] + ' ' +
-              dateTimeComponents[2];
-          }
-
-          break;
-        default:
-          output = dateTimeComponents[3] + ' ' + dateTimeComponents[1] + ' ' +
-            dateTimeComponents[2] + ' - ' +
-            MailGrabber.formatTime(dateTimeComponents[4]);
+var MailGrabberApplication = {
+  /**
+   * Delete a message when we click on the Delete tab. It will remove all
+   * content and reload the message list.
+   *
+   * @param {Number} messageId - which message we would like to delete
+   */
+  deleteMessage: function(messageId) {
+    MailGrabberApplication.request('DELETE', '/message/' + messageId + '.json',
+      function() {
+        MailGrabberDOM.deleteContent();
+        MailGrabberApplication.getMessageList();
       }
+    );
+  },
 
-      return output;
-    },
-
-    /**
-     * Format the given number (attachment size).
-     *
-     * @param {Number} size - the size of the attachment in bytes
-     *
-     * @return {String} the formatted number with unit
-     */
-    formatSize: function(size) {
-      var exponent = (Math.log(size) / Math.log(1024)) | 0;
-      var number = +(size / Math.pow(1024, exponent)).toFixed(1);
-
-      return number + ' ' + ('KMGTPEZY'[exponent - 1] || '') + 'B';
-    },
-
-    /**
-     * Format the given time.
-     *
-     * @param {String} time
-     *
-     * @return {String} the new format of the time
-     */
-    formatTime: function(time) {
-      var timeComponents = time.split(':');
-
-      return timeComponents[0] + ':' + timeComponents[1];
-    },
-
-    /**
-     * The last message id what loaded. If it is -1 then we have no any
-     * messages.
-     */
-    lastMessageId: -1,
-
-    /**
-     * Load the message list. Also add event listener for infinite scroll.
-     */
-    loadMessageList: function() {
-      var messageList =
-        document
-          .querySelector('ul[data-content-type=message-list]');
-
-      messageList.addEventListener('scroll', function() {
-        MailGrabber.infiniteScroll(messageList);
-      });
-
-      MailGrabber.getMessageList();
-    },
-
-    /**
-     * Params that we can follow how many messages we have on the list. We are
-     * loading 15 messages in every requests.
-     */
-    page: 1,
-    perPage: 15,
-
-    /**
-     * Reload the message list. When we have new messages in the database, but
-     * we scrolled down or clicked on the Reload tab.
-     */
-    reloadMessageList: function() {
-      MailGrabber.deleteContent();
-      MailGrabber.getMessageList();
-    },
-
-    /**
-     * Render message attachment. Show the list of attachments at the top of the
-     * message content.
-     *
-     * @param {Object} messageAttachments - the message attachments container
-     * @param {Object} messagePart - a message part which we loaded
-     */
-    renderMessageAttachment: function(messageAttachments, messagePart) {
-      var messageAttachment = document.createElement('a');
-      var fileSize = document.createElement('span');
-      var messageAttachmentTemplate =
-        document
-          .querySelector(
-            'template[data-content-type=message-attachment-template]'
-          )
-          .content
-          .cloneNode(true);
-
-      messageAttachment.href =
-        'data:' + messagePart.mime_type + ';base64,' + messagePart.body;
-      messageAttachment.download = messagePart.filename;
-      messageAttachment.innerHTML = messagePart.filename;
-      messageAttachment.classList.add('color-black', 'no-text-decoration');
-
-      fileSize.innerHTML = MailGrabber.formatSize(messagePart.size);
-      fileSize.classList.add('color-gray', 'font-size-0_9', 'padding-left-10');
-
-      [messageAttachment, fileSize].forEach(function(node) {
-        messageAttachmentTemplate
-          .querySelector('li[data-content-type=message-attachment]')
-          .appendChild(node);
-      });
-
-      messageAttachments.classList.remove('hide');
-      messageAttachments.appendChild(messageAttachmentTemplate);
-    },
-
-    /**
-     * Render the HTML part of the message. If the message has inline images
-     * then it will render those images as well. An iframe will contain this
-     * content.
-     *
-     * @param {Object} iFrame - the iframe HTML tag
-     * @param {Object} messageParts - the parts of the message
-     * @param {Object} messageHtmlPart - the HTML part of the message
-     */
-    renderMessageHtmlPart: function(iFrame, messageParts, messageHtmlPart) {
-      var messageInlineAttachmentRegExp = new RegExp("cid:");
-
-      if(messageInlineAttachmentRegExp.test(messageHtmlPart)) {
-        messageHtmlPart =
-          MailGrabber.renderMessageInlineAttachments(
-            messageParts, messageHtmlPart
-          );
-      }
+  /**
+   * Delete message list when we click on the Clear tab. It will remove
+   * everything.
+   */
+  deleteMessageList: function() {
+    MailGrabberApplication.request('DELETE', '/messages.json', function() {
+      MailGrabberDOM.deleteContent();
+    });
+  },
 
-      iFrame.srcdoc = messageHtmlPart;
-      iFrame.onload = function() {
-        iFrame.height = iFrame.contentDocument.body.scrollHeight + 65;
+  /**
+   * Get a message and render the message content, when we click on an item
+   * from the message list.
+   *
+   * @param {Number} messageId - which message we would like to see
+   */
+  getMessage: function(messageId) {
+    MailGrabberApplication.request('GET', '/message/' + messageId + '.json',
+      function(response) {
+        MailGrabberMessageContent.render(JSON.parse(response));
       }
-    },
-
-    /**
-     * Render inline images of the message. Change the cid:something12345 with
-     * the encoded image content.
-     *
-     * @param {Object} messageParts - the parts of the message
-     * @param {Object} messageHtmlPart - the HTML part of the message
-     *
-     * @return {Object} messageHtmlPart - the modified HTML part of the message
-     */
-    renderMessageInlineAttachments: function(messageParts, messageHtmlPart) {
-      messageParts.forEach(function(messagePart) {
-        if(messagePart.is_attachment === 1 && messagePart.is_inline === 1) {
-          messageHtmlPart = messageHtmlPart.replace('cid:' + messagePart.cid,
-            'data:' + messagePart.mime_type + ';base64,' + messagePart.body);
-        }
-      });
-
-      return messageHtmlPart;
-    },
-
-    /**
-     * Render the content of the message (all parts, inline attachments and
-     * attachments). Also it sets up event listeners of the HTML, PlainText,
-     * Raw, Delete and Close tabs.
-     *
-     * @param {Object} response - the response the get message request
-     */
-    renderMessageContent: function(response) {
-      var message = response.message;
-      var messageParts = response.message_parts;
-      var messageContentTemplate =
-        document
-          .querySelector('template[data-content-type=message-content-template]')
-          .content
-          .cloneNode(true);
+    );
+  },
 
-      var messageContent =
-        document
-          .querySelector('div[data-content-type=message-content]');
-
-      messageContent.removeAttribute('style');
-      messageContent.innerHTML = '';
-
-      messageContentTemplate
-        .querySelector('div[data-content-type=message-subject]')
-        .innerHTML = message.subject;
-
-      messageContentTemplate
-        .querySelector('dl[data-content-type=metadata]')
-        .innerHTML = MailGrabber.renderMetadata(message);
-
-      messageContentTemplate
-        .querySelector('time[data-content-type=message-sent-at]')
-        .innerHTML = MailGrabber.formatDateTime(message.created_at);
-
-      messageContentTemplate
-        .querySelectorAll('[data-message-tab]')
-        .forEach(function(tab) {
-          tab.addEventListener('click', MailGrabber.changeMessageContent);
-        });
-
-      messageContentTemplate
-        .querySelector('li[data-content-type=message-delete-tab]')
-        .addEventListener('click', function() {
-          MailGrabber.deleteMessage(message.id);
-        });
-
-      messageContentTemplate
-        .querySelector('li[data-content-type=message-close-tab]')
-        .addEventListener('click', MailGrabber.defaultBackground);
-
-      messageParts.forEach(function(messagePart) {
-        if(messagePart.is_attachment === 0 && messagePart.is_inline === 0) {
-          switch(messagePart.mime_type) {
-            case 'text/html':
-              MailGrabber.renderMessageHtmlPart(
-                messageContentTemplate
-                  .querySelector('iframe[data-content-type=message-html-body]'),
-                messageParts,
-                messagePart.body
-              );
-
-              break;
-            case 'text/plain':
-              messageContentTemplate
-                .querySelector('pre[data-content-type=message-text-body]')
-                .innerText = messagePart.body;
-
-              break;
+  /**
+   * Get a list of the messages. Also change the params of the infinite scroll
+   * that we can know which page we are on. It checks the message ids to not
+   * load those messages which are already on the list.
+   */
+  getMessageList: function() {
+    var messageIds;
+
+    MailGrabberApplication.request('GET', '/messages.json?page=' +
+      MailGrabberVariables.page + '&per_page=' + MailGrabberVariables.perPage,
+      function(response) {
+        response = JSON.parse(response);
+        messageIds = response.map(function(hash) { return hash['id'] });
+
+        if(response.length > 0) {
+          if(messageIds.indexOf(MailGrabberVariables.lastMessageId) === -1) {
+            MailGrabberVariables.lastMessageId = messageIds.pop();
+            MailGrabberVariables.messageListReloading = false;
+            MailGrabberVariables.page++;
+            MailGrabberMessageList.render(response);
+          } else {
+            MailGrabberApplication.reloadMessageList();
           }
-        } else if(messagePart.is_attachment === 1 &&
-                  messagePart.is_inline === 0) {
-          MailGrabber.renderMessageAttachment(
-            messageContentTemplate
-              .querySelector('ul[data-content-type=message-attachments]'),
-            messagePart
-          );
         }
-      });
-
-      messageContentTemplate
-        .querySelector('pre[data-content-type=message-raw-body]')
-        .innerText = message.raw;
-
-      messageContent.appendChild(messageContentTemplate);
-    },
-
-    /**
-     * Render the list of the messages. Also add event listener when click on a
-     * message then it will load that conent.
-     *
-     * @param {Object} messages - the list of the given message.
-     */
-    renderMessageList: function(messages) {
-      var messageListTemplate;
-
-      var messageList =
-        document
-          .querySelector('ul[data-content-type=message-list]');
-
-      messages.forEach(function(message) {
-        messageListTemplate =
-          document
-            .querySelector('template[data-content-type=message-list-template]')
-            .content
-            .cloneNode(true);
-
-        messageListTemplate
-          .querySelector('li')
-          .addEventListener('click', function() {
-            MailGrabber.getMessage(message.id);
-          });
-
-        messageListTemplate
-          .querySelector('div[data-content-type=message-senders]')
-          .innerHTML = message.senders;
-
-        messageListTemplate
-          .querySelector('time[data-content-type=message-sent-at]')
-          .innerHTML =
-            MailGrabber
-              .formatDateTime(message.created_at, 'messageListDateOrTime');
-
-        messageListTemplate
-          .querySelector('div[data-content-type=message-subject]')
-          .innerHTML = message.subject;
+      }
+    );
+  },
 
-        messageList.appendChild(messageListTemplate);
-      });
-    },
+  /**
+   * Scrolling infinitely. Count the height of the list and if we reached the
+   * bottom of the list then tries to load more message.
+   *
+   * @param {Object} messageList - the message list container
+   */
+  infiniteScroll: function(messageList) {
+    var scrollHeight = messageList.scrollHeight;
+    var scrollTop = messageList.scrollTop;
+    var clientHeight = messageList.clientHeight;
+
+    if(scrollHeight - scrollTop === clientHeight &&
+        !MailGrabberVariables.messageListReloading) {
+      MailGrabberApplication.getMessageList();
+    }
+  },
 
-    /**
-     * Render senders and recipients data of the message.
-     *
-     * @param {Object} message - the requested message
-     *
-     * @return {Object} the rendered metadata
-     */
-    renderMetadata: function(message) {
-      var metadata =
-        '<dt>From:</dt><dd>' + message.senders + '</dd>' +
-        '<dt>To:</dt><dd>' + message.recipients + '</dd>';
+  /**
+   * Initialize MailGrabber. Add some event listeners to the Reload and the
+   * Clear tabs then load messages and the default background.
+   */
+  init: function() {
+    document
+      .querySelector('li[data-content-type=message-reload-tab]')
+      .addEventListener('click', MailGrabberApplication.reloadMessageList);
 
-      if(message.carbon_copy) {
-        metadata += '<dt>Cc:</dt><dd>' + message.carbon_copy + '</dd>';
-      }
+    document
+      .querySelector('li[data-content-type=message-clear-tab]')
+      .addEventListener('click', MailGrabberApplication.deleteMessageList);
 
-      if(message.blind_carbon_copy) {
-        metadata += '<dt>Bcc:</dt><dd>' + message.blind_carbon_copy + '</dd>';
-      }
+    MailGrabberApplication.loadMessageList();
+    MailGrabberDOM.defaultBackground();
+  },
 
-      return metadata;
-    },
+  /**
+   * Load the message list. Also add event listener for infinite scroll.
+   */
+  loadMessageList: function() {
+    var messageList =
+      document
+        .querySelector('ul[data-content-type=message-list]');
 
-    /**
-     * Request function to get data from the server.
-     *
-     * @param {String} method - the request method e.g. GET, POST, DELETE
-     * @param {String} path - the path which we can get/send data
-     * @param {Function} fn - the function which handle the response
-     */
-    request: function(method, path, fn) {
-      var xhr = new XMLHttpRequest();
+    messageList.addEventListener('scroll', function() {
+      MailGrabberApplication.infiniteScroll(messageList);
+    });
 
-      xhr.onload = function() {
-        if(xhr.status === 200) {
-          fn(xhr.responseText);
-        } else {
-          console.log('MailGrabberRequestError:', xhr.status, xhr.statusText);
-        }
-      };
-      xhr.open(method, MailGrabber.rootPath() + path, true);
-      xhr.send();
-    },
+    MailGrabberApplication.getMessageList();
+  },
 
-    /**
-     * Root path which returns back with the server's root path. It can be empty
-     * string or a string. It depends on how the server is running (standalone
-     * or in Ruby on Rails).
-     */
-    rootPath: function() {
-      return document.querySelector('body').dataset.rootPath;
-    }
-  };
+  /**
+   * Reload the message list. When we have new messages in the database, but
+   * we scrolled down or clicked on the Reload tab.
+   */
+  reloadMessageList: function() {
+    MailGrabberVariables.messageListReloading = true;
+    MailGrabberDOM.deleteContent();
+    MailGrabberApplication.getMessageList();
+  },
 
   /**
-   * When DOM loaded then call MailGrabber's init function.
+   * Request function to get data from the server.
+   *
+   * @param {String} method - the request method e.g. GET, POST, DELETE
+   * @param {String} path - the path which we can get/send data
+   * @param {Function} fn - the function which handle the response
    */
-  document.addEventListener('DOMContentLoaded', MailGrabber.init);
-}).call(this);
+  request: function(method, path, fn) {
+    var xhr = new XMLHttpRequest();
+
+    xhr.onload = function() {
+      if(xhr.status === 200) {
+        fn(xhr.responseText);
+      } else {
+        console.log('MailGrabberRequestError:', xhr.status, xhr.statusText);
+      }
+    };
+    xhr.open(method, MailGrabberDOM.rootPath() + path, true);
+    xhr.send();
+  }
+};

data/lib/mail_grabber/web/assets/javascripts/dom.js

@@ -0,0 +1,86 @@
+var MailGrabberDOM = {
+  /**
+   * Change which content (message part) should show. When the page is loading
+   * the HTML content will be active and the others will be hidden. When we
+   * click on tab e.g. Plain Text then this content will active and other
+   * hidden.
+   *
+   * @param {Object} event - which part we clicked
+   */
+  changeMessageContent: function(event) {
+    var messageTabs =
+      document
+        .querySelectorAll('[data-message-tab]');
+
+    var messageContents =
+      document
+        .querySelectorAll('[data-message-content]');
+
+    var clickedTabType = event.target.dataset.messageTab;
+
+    messageTabs.forEach(function(messageTab, index) {
+      messageTab.classList.remove('active');
+      messageContents[index].classList.remove('hide');
+
+      if(messageTab.dataset.messageTab === clickedTabType) {
+        messageTab.classList.add('active');
+      }
+
+      if(messageContents[index].dataset.messageContent !== clickedTabType) {
+        messageContents[index].classList.add('hide');
+      }
+    });
+  },
+
+  /**
+   * Create a clone from an element e.g. template tag.
+   *
+   * @param {String} selector - which describe how find the element
+   *
+   * @return {Object} the clone of the found element
+   */
+  cloneContent: function(selector) {
+    return document.querySelector(selector).content.cloneNode(true);
+  },
+
+  /**
+   * Show default backgroud image instead of any content.
+   */
+  defaultBackground: function() {
+    var messageContent =
+      document
+        .querySelector('div[data-content-type=message-content]');
+
+    messageContent.innerHTML = '';
+
+    messageContent.style.background =
+      "url('" + messageContent.dataset.backgroundImage +
+      "') center center no-repeat";
+    messageContent.style.backgroundSize = '50%';
+    messageContent.style.opacity = '10%';
+  },
+
+  /**
+   * Delete all content (message list and message content as well),
+   * set default backgroud and the infinite scroll params when we click on
+   * the Reload or Delete tabs.
+   */
+  deleteContent: function() {
+    MailGrabberVariables.lastMessageId = -1;
+    MailGrabberVariables.page = 1;
+    MailGrabberDOM.defaultBackground();
+
+    document
+      .querySelector('ul[data-content-type=message-list]')
+      .innerHTML = '';
+  },
+
+  /**
+   * Root path which returns back with the server's root path. It can be empty
+   * string or a string. It depends on how the server is running (standalone
+   * or in Ruby on Rails).
+   */
+  rootPath: function() {
+    return document.querySelector('body').dataset.rootPath;
+  }
+};

data/lib/mail_grabber/web/assets/javascripts/message_attachment.js

@@ -0,0 +1,36 @@
+var MailGrabberMessageAttachment = {
+  /**
+   * Render message attachment. Show the list of attachments at the top of the
+   * message content.
+   *
+   * @param {Object} messageAttachments - the message attachments container
+   * @param {Object} messagePart - a message part which we loaded
+   */
+  render: function(messageAttachments, messagePart) {
+    var messageAttachment = document.createElement('a');
+    var fileSize = document.createElement('span');
+    var messageAttachmentTemplate =
+      MailGrabberDOM
+        .cloneContent(
+          'template[data-content-type=message-attachment-template]'
+        );
+
+    messageAttachment.href =
+      'data:' + messagePart.mime_type + ';base64,' + messagePart.body;
+    messageAttachment.download = messagePart.filename;
+    messageAttachment.innerHTML = messagePart.filename;
+    messageAttachment.classList.add('color-black', 'no-text-decoration');
+
+    fileSize.innerHTML = MailGrabberUtilities.formatSize(messagePart.size);
+    fileSize.classList.add('color-gray', 'font-size-0_9', 'padding-left-10');
+
+    [messageAttachment, fileSize].forEach(function(node) {
+      messageAttachmentTemplate
+        .querySelector('li[data-content-type=message-attachment]')
+        .appendChild(node);
+    });
+
+    messageAttachments.classList.remove('hide');
+    messageAttachments.appendChild(messageAttachmentTemplate);
+  }
+};

data/lib/mail_grabber/web/assets/javascripts/message_content.js

@@ -0,0 +1,114 @@
+var MailGrabberMessageContent = {
+  /**
+   * Fill up the message content template with content.
+   *
+   * @param {Object} response - from the server with data
+   *
+   * @return {Object} the filled up template
+   */
+  fillUpTemplateWith: function(response) {
+    var message = response.message;
+    var messageParts = response.message_parts;
+    var messageContentTemplate =
+      MailGrabberDOM
+        .cloneContent('template[data-content-type=message-content-template]');
+
+    messageContentTemplate
+      .querySelector('div[data-content-type=message-subject]')
+      .innerHTML = message.subject;
+
+    MailGrabberMessageMetadata.render(
+      messageContentTemplate
+        .querySelector('dl[data-content-type=metadata]'),
+      message
+    );
+
+    messageContentTemplate
+      .querySelector('time[data-content-type=message-sent-at]')
+      .innerHTML = MailGrabberUtilities.formatDateTime(message.created_at);
+
+    messageContentTemplate
+      .querySelectorAll('[data-message-tab]')
+      .forEach(function(tab) {
+        tab.addEventListener('click', MailGrabberDOM.changeMessageContent);
+      });
+
+    messageContentTemplate
+      .querySelector('li[data-content-type=message-delete-tab]')
+      .addEventListener('click', function() {
+        MailGrabberApplication.deleteMessage(message.id);
+      });
+
+    messageContentTemplate
+      .querySelector('li[data-content-type=message-close-tab]')
+      .addEventListener('click', MailGrabberDOM.defaultBackground);
+
+    messageParts.forEach(function(messagePart) {
+      if(messagePart.is_attachment === 0 && messagePart.is_inline === 0) {
+        switch(messagePart.mime_type) {
+          case 'text/html':
+            MailGrabberVariables.messageHasHtmlPart = true;
+            MailGrabberMessageHtmlPart.render(
+              messageContentTemplate
+                .querySelector('iframe[data-content-type=message-html-body]'),
+              messageParts,
+              messagePart.body
+            );
+
+            break;
+          case 'text/plain':
+            messageContentTemplate
+              .querySelector('pre[data-content-type=message-text-body]')
+              .innerText = messagePart.body;
+
+            break;
+        }
+      } else if(messagePart.is_attachment === 1 &&
+                messagePart.is_inline === 0) {
+        MailGrabberMessageAttachment.render(
+          messageContentTemplate
+            .querySelector('ul[data-content-type=message-attachments]'),
+          messagePart
+        );
+      }
+    });
+
+    messageContentTemplate
+      .querySelector('pre[data-content-type=message-raw-body]')
+      .innerText = message.raw;
+
+    return messageContentTemplate;
+  },
+
+  /**
+   * Render the content of the message (all parts, inline attachments and
+   * attachments). Also it sets up event listeners of the HTML, PlainText,
+   * Raw, Delete and Close tabs.
+   *
+   * @param {Object} response - the response of the get message request
+   */
+  render: function(response) {
+    var messageContent =
+      document
+        .querySelector('div[data-content-type=message-content]');
+
+    messageContent.removeAttribute('style');
+    messageContent.innerHTML = '';
+
+    MailGrabberVariables.messageHasHtmlPart = false;
+
+    messageContent.appendChild(
+      MailGrabberMessageContent.fillUpTemplateWith(response)
+    );
+
+    if(!MailGrabberVariables.messageHasHtmlPart) {
+      messageContent
+        .querySelector('li[data-message-tab=text]')
+        .click();
+
+      messageContent
+        .querySelector('li[data-message-tab=html]')
+        .classList.add('hide');
+    }
+  }
+};

data/lib/mail_grabber/web/assets/javascripts/message_html_part.js

@@ -0,0 +1,26 @@
+var MailGrabberMessageHtmlPart = {
+  /**
+   * Render the HTML part of the message. If the message has inline images
+   * then it will render those images as well. An iframe will contain this
+   * content.
+   *
+   * @param {Object} iFrame - the iframe HTML tag
+   * @param {Object} messageParts - the parts of the message
+   * @param {Object} messageHtmlPart - the HTML part of the message
+   */
+  render: function(iFrame, messageParts, messageHtmlPart) {
+    var messageInlineAttachmentRegExp = new RegExp('cid:');
+
+    if(messageInlineAttachmentRegExp.test(messageHtmlPart)) {
+      messageHtmlPart =
+        MailGrabberMessageInlineAttachments.render(
+          messageParts, messageHtmlPart
+        );
+    }
+
+    iFrame.srcdoc = messageHtmlPart;
+    iFrame.onload = function() {
+      iFrame.height = iFrame.contentDocument.body.scrollHeight + 65;
+    }
+  }
+};

data/lib/mail_grabber/web/assets/javascripts/message_inline_attachments.js

@@ -0,0 +1,21 @@
+var MailGrabberMessageInlineAttachments = {
+  /**
+   * Render inline images of the message. Change the cid:something12345 with
+   * the encoded image content.
+   *
+   * @param {Object} messageParts - the parts of the message
+   * @param {Object} messageHtmlPart - the HTML part of the message
+   *
+   * @return {Object} messageHtmlPart - the modified HTML part of the message
+   */
+  render: function(messageParts, messageHtmlPart) {
+    messageParts.forEach(function(messagePart) {
+      if(messagePart.is_attachment === 1 && messagePart.is_inline === 1) {
+        messageHtmlPart = messageHtmlPart.replace('cid:' + messagePart.cid,
+          'data:' + messagePart.mime_type + ';base64,' + messagePart.body);
+      }
+    });
+
+    return messageHtmlPart;
+  }
+};

data/lib/mail_grabber/web/assets/javascripts/message_list.js

@@ -0,0 +1,54 @@
+var MailGrabberMessageList = {
+  /**
+   * Fill up the message list template with content.
+   *
+   * @param {Object} message
+   *
+   * @return {Object} the filled up template
+   */
+  fillUpTemplateWith: function(message) {
+    var messageListTemplate =
+      MailGrabberDOM
+        .cloneContent('template[data-content-type=message-list-template]');
+
+    messageListTemplate
+      .querySelector('li')
+      .addEventListener('click', function() {
+        MailGrabberApplication.getMessage(message.id);
+      });
+
+    messageListTemplate
+      .querySelector('div[data-content-type=message-senders]')
+      .innerHTML = message.senders;
+
+    messageListTemplate
+      .querySelector('time[data-content-type=message-sent-at]')
+      .innerHTML =
+        MailGrabberUtilities
+          .formatDateTime(message.created_at, 'messageListDateOrTime');
+
+    messageListTemplate
+      .querySelector('div[data-content-type=message-subject]')
+      .innerHTML = message.subject;
+
+    return messageListTemplate;
+  },
+
+  /**
+   * Render the list of the messages. Also add event listener when click on a
+   * message then it will load that conent.
+   *
+   * @param {Object} messages - the list of the given message.
+   */
+  render: function(messages) {
+    var messageList =
+      document
+        .querySelector('ul[data-content-type=message-list]');
+
+    messages.forEach(function(message) {
+      messageList.appendChild(
+        MailGrabberMessageList.fillUpTemplateWith(message)
+      );
+    });
+  }
+};

data/lib/mail_grabber/web/assets/javascripts/message_metadata.js

@@ -0,0 +1,23 @@
+var MailGrabberMessageMetadata = {
+  /**
+   * Render senders and recipients data of the message.
+   *
+   * @param {Object} messageMetadata - the metadata container
+   * @param {Object} message - the requested message
+   */
+  render: function(messageMetadata, message) {
+    var metadata =
+      '<dt>From:</dt><dd>' + message.senders + '</dd>' +
+      '<dt>To:</dt><dd>' + message.recipients + '</dd>';
+
+    if(message.carbon_copy) {
+      metadata += '<dt>Cc:</dt><dd>' + message.carbon_copy + '</dd>';
+    }
+
+    if(message.blind_carbon_copy) {
+      metadata += '<dt>Bcc:</dt><dd>' + message.blind_carbon_copy + '</dd>';
+    }
+
+    messageMetadata.innerHTML = metadata;
+  }
+};

data/lib/mail_grabber/web/assets/javascripts/utilities.js

@@ -0,0 +1,65 @@
+var MailGrabberUtilities = {
+  /**
+   * Format the given date or time.
+   *
+   * @param {DateTime} dateTime - the message created at attribute
+   * @param {String} ouputType - what type we would like to see
+   *
+   * @return {String} the new format of the date or time
+   */
+  formatDateTime: function(dateTime, outputType) {
+    dateTime = new Date(dateTime);
+    var dateTimeNow = new Date();
+    // Sun Feb 21 2021 21:00:00 GMT+0100 (Central European Standard Time)
+    //  0   1  2   3      4        5         6       7        8      9
+    var dateTimeComponents = dateTime.toString().split(' ');
+    var output;
+
+    switch(outputType) {
+      case 'messageListDateOrTime':
+        if(dateTime.getDate() === dateTimeNow.getDate()) {
+          output = MailGrabberUtilities.formatTime(dateTimeComponents[4]);
+        } else if(dateTime.getFullYear() === dateTimeNow.getFullYear()) {
+          output = dateTimeComponents[1] + ' ' + dateTimeComponents[2];
+        } else {
+          output = dateTimeComponents[3] + ' ' + dateTimeComponents[1] + ' ' +
+            dateTimeComponents[2];
+        }
+
+        break;
+      default:
+        output = dateTimeComponents[3] + ' ' + dateTimeComponents[1] + ' ' +
+          dateTimeComponents[2] + ' - ' +
+          MailGrabberUtilities.formatTime(dateTimeComponents[4]);
+    }
+
+    return output;
+  },
+
+  /**
+   * Format the given number (attachment size).
+   *
+   * @param {Number} size - the size of the attachment in bytes
+   *
+   * @return {String} the formatted number with unit
+   */
+  formatSize: function(size) {
+    var exponent = (Math.log(size) / Math.log(1024)) | 0;
+    var number = +(size / Math.pow(1024, exponent)).toFixed(1);
+
+    return number + ' ' + ('KMGTPEZY'[exponent - 1] || '') + 'B';
+  },
+
+  /**
+   * Format the given time.
+   *
+   * @param {String} time
+   *
+   * @return {String} the new format of the time
+   */
+  formatTime: function(time) {
+    var timeComponents = time.split(':');
+
+    return timeComponents[0] + ':' + timeComponents[1];
+  }
+};

data/lib/mail_grabber/web/assets/javascripts/variables.js

@@ -0,0 +1,24 @@
+var MailGrabberVariables = {
+  /**
+   * The last message id what loaded. If it is -1 then we have no any
+   * messages.
+   */
+  lastMessageId: -1,
+
+  /**
+   * The message has HTML part or not.
+   */
+  messageHasHtmlPart: false,
+
+  /**
+   * The message is list reloading or not (click on the Reload tab).
+   */
+  messageListReloading: false,
+
+  /**
+   * Params that we can follow how many messages we have on the list. We are
+   * loading 15 messages in every requests.
+   */
+  page: 1,
+  perPage: 15
+};

data/lib/mail_grabber/web/assets/javascripts/web.js

@@ -0,0 +1,6 @@
+(function() {
+  /**
+   * When DOM loaded then call MailGrabber's init function.
+   */
+  document.addEventListener('DOMContentLoaded', MailGrabberApplication.init);
+})();

data/lib/mail_grabber/web/views/index.html.erb

@@ -11,6 +11,16 @@
     <link rel="stylesheet" href="<%= root_path %>/stylesheets/application.css" type="text/css" charset="utf-8">
 
     <script src="<%= root_path %>/javascripts/application.js"></script>
+    <script src="<%= root_path %>/javascripts/dom.js"></script>
+    <script src="<%= root_path %>/javascripts/message_attachment.js"></script>
+    <script src="<%= root_path %>/javascripts/message_content.js"></script>
+    <script src="<%= root_path %>/javascripts/message_html_part.js"></script>
+    <script src="<%= root_path %>/javascripts/message_inline_attachments.js"></script>
+    <script src="<%= root_path %>/javascripts/message_list.js"></script>
+    <script src="<%= root_path %>/javascripts/message_metadata.js"></script>
+    <script src="<%= root_path %>/javascripts/utilities.js"></script>
+    <script src="<%= root_path %>/javascripts/variables.js"></script>
+    <script src="<%= root_path %>/javascripts/web.js"></script>
   </head>
 
   <body data-root-path="<%= root_path %>">

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mail_grabber
 version: !ruby/object:Gem::Version
-  version: 1.0.0.rc1
+  version: 1.0.0
 platform: ruby
 authors:
 - Norbert Szivós
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-03-20 00:00:00.000000000 Z
+date: 2021-04-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: mail
@@ -78,6 +78,16 @@ files:
 - lib/mail_grabber/web/application_router.rb
 - lib/mail_grabber/web/assets/images/mail_grabber515x500.png
 - lib/mail_grabber/web/assets/javascripts/application.js
+- lib/mail_grabber/web/assets/javascripts/dom.js
+- lib/mail_grabber/web/assets/javascripts/message_attachment.js
+- lib/mail_grabber/web/assets/javascripts/message_content.js
+- lib/mail_grabber/web/assets/javascripts/message_html_part.js
+- lib/mail_grabber/web/assets/javascripts/message_inline_attachments.js
+- lib/mail_grabber/web/assets/javascripts/message_list.js
+- lib/mail_grabber/web/assets/javascripts/message_metadata.js
+- lib/mail_grabber/web/assets/javascripts/utilities.js
+- lib/mail_grabber/web/assets/javascripts/variables.js
+- lib/mail_grabber/web/assets/javascripts/web.js
 - lib/mail_grabber/web/assets/stylesheets/application.css
 - lib/mail_grabber/web/views/_message_attachment_template.html.erb
 - lib/mail_grabber/web/views/_message_content_template.html.erb
@@ -91,7 +101,7 @@ metadata:
   source_code_uri: https://github.com/MailToolbox/mail_grabber
   changelog_uri: https://github.com/MailToolbox/mail_grabber/blob/main/CHANGELOG.md
   bug_tracker_uri: https://github.com/MailToolbox/mail_grabber/issues
-  documentation_uri: https://rubydoc.info/gems/mail_grabber
+  documentation_uri: https://rubydoc.info/github/MailToolbox/mail_grabber/main
 post_install_message:
 rdoc_options: []
 require_paths:
@@ -103,9 +113,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: 2.5.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.1.4
 signing_key: