Feed icons

tam710562

What?
This is a small mod that converts feed icons into website icons.

Demo

Installation
You can learn how to install here.

Javascript:

/*
 * Feed icons
 * Written by Tam710562
 */

(function () {
  'use strict';

  const gnoh = {
    createElement: function (tagName, attribute, parent, inner, options) {
      if (typeof tagName === 'undefined') {
        return;
      }
      if (typeof options === 'undefined') {
        options = {};
      }
      if (typeof options.isPrepend === 'undefined') {
        options.isPrepend = false;
      }
      const el = document.createElement(tagName);
      if (!!attribute && typeof attribute === 'object') {
        for (const key in attribute) {
          if (key === 'text') {
            el.textContent = attribute[key];
          } else if (key === 'html') {
            el.innerHTML = attribute[key];
          } else if (key === 'style' && typeof attribute[key] === 'object') {
            for (const css in attribute.style) {
              el.style[css] = attribute.style[css];
            }
          } else if (key === 'events' && typeof attribute[key] === 'object') {
            for (const event in attribute.events) {
              if (typeof attribute.events[event] === 'function') {
                el.addEventListener(event, attribute.events[event]);
              }
            }
          } else if (typeof el[key] !== 'undefined') {
            el[key] = attribute[key];
          } else {
            if (typeof attribute[key] === 'object') {
              attribute[key] = JSON.stringify(attribute[key]);
            }
            el.setAttribute(key, attribute[key]);
          }
        }
      }
      if (!!inner) {
        if (!Array.isArray(inner)) {
          inner = [inner];
        }
        for (let i = 0; i < inner.length; i++) {
          if (inner[i].nodeName) {
            el.append(inner[i]);
          } else {
            el.append(this.createElementFromHTML(inner[i]));
          }
        }
      }
      if (typeof parent === 'string') {
        parent = document.querySelector(parent);
      }
      if (!!parent) {
        if (options.isPrepend) {
          parent.prepend(el);
        } else {
          parent.append(el);
        }
      }
      return el;
    },
    createElementFromHTML: function (html) {
      return this.createElement('template', {
        html: (html || '').trim()
      }).content;
    },
    timeOut: function (callback, conditon, timeout) {
      setTimeout(function wait() {
        let result;
        if (!conditon) {
          result = document.getElementById('browser');
        } else if (typeof conditon === 'string') {
          result = document.querySelector(conditon);
        } else if (typeof conditon === 'function') {
          result = conditon();
        } else {
          return;
        }
        if (result) {
          callback(result);
        } else {
          setTimeout(wait, timeout || 300);
        }
      }, timeout || 300);
    },
    observeDOM: function (obj, callback, config) {
      const obs = new MutationObserver(function (mutations, observer) {
        if (config) {
          callback(mutations, observer);
        } else {
          if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) {
            callback(mutations, observer);
          }
        }
      });
      obs.observe(obj, config || {
        childList: true,
        subtree: true
      });
    }
  };

  let settings = {};

  function addIcon(currentIcon, url) {
    if (currentIcon) {
      const imgIcon = gnoh.createElement('img', {
        width: 16,
        height: 16,
        style: {
          flex: '0 0 auto',
          alignSelf: 'center',
          margin: 'auto 6px auto 16px'
        },
        srcset: `chrome://favicon/size/16@1x/${url} 1x,chrome://favicon/size/16@2x/${url} 2x`
      });
      currentIcon.parentNode.replaceChild(imgIcon, currentIcon);
    }
  }

  function getSettings(callback) {
    vivaldi.prefs.get('vivaldi.rss.settings', function (feedSettings) {
      settings = feedSettings.reduce(function (previousValue, currentValue) {
        previousValue[currentValue.path] = currentValue;
        return previousValue;
      }, {});
      callback();
    });
  }

  function speedFeedIcons(panelsContainer) {
    const feeds = Array.from(panelsContainer.querySelectorAll('[data-id^="FEEDS_LABELS_"]:not([data-feed-icon="true"]'));
    feeds.forEach(function (feed) {
      feed.dataset.feedIcon = true;
      try {
        const path = /FEEDS_LABELS_(.*)/.exec(feed.dataset.id)[1];
        if (settings[path]) {
          const url = new URL(settings[path].url).origin;
          if (url !== 'null') {
            addIcon(feed.querySelector('.folder-icon'), url);
          }
        } else {
          getSettings(function () {
            if (settings[path]) {
              const url = new URL(settings[path].url).origin;
              if (url !== 'null') {
                addIcon(feed.querySelector('.folder-icon'), url);
              }
            }
          });
        }
      } catch (e) {
        console.error(e)
      }
    });
  }

  gnoh.timeOut(function (panelsContainer) {
    getSettings(function () {
      gnoh.observeDOM(document, function () {
        speedFeedIcons(panelsContainer);
      });
    });
  }, '#panels-container');
})();

Changelog

13/03/2022

Create the first version.

06/04/2022

Fix getting the feed's url

luetage

@tam710562 I don’t use the feeds panel, but I tested it and it errors out in my case.

yakn99925566

@tam710562
in 5.2.2623.24 (Stable channel) (64-bit) , it might not work properly.

tam710562

@luetage @yakn99925566
Thanks for your feedback
The feed storage structure has changed since I added my feeds. Too bad I didn't test it.
I have updated the mod hope it will work

luetage

@tam710562 Thanks for the update. Works now. It also adds feed favicons in the mail panel.

Granite1

@tam710562 thank you, that works fine.

Is there a way to only show the favicons without the titles?

tam710562

@Granite1 said in Feed icons:

Is there a way to only show the favicons without the titles?

@Granite1 There are quite a few ways but I think the simplest would be to use a css.

[data-id^="FEEDS_LABELS_"] .title {
  display: none;
}

Granite1

@tam71056:

There are quite a few ways but I think the simplest would be to use a css.

Many thanks for your feedback.

I have 1 real problem with the original mod: when I press CTRL+A on the left to select all the news messages in order to delete them, then on the right all the news feed channels are also selected.

Now, I don't know if, when I then were to press the Delete key, all the channels would also be deleted.

Is this sort of mirror selection normal and nothing to worry about or is it a bug?

tam710562

@Granite1 I can't reproduce your issue.
When I press 'Ctrl+A' the news feed channels are not selected.

Granite1

@tam710562:

I can't reproduce your issue.

I uninstalled then reinstalled your javascript, relaunched Vivaldi, and now it does not misbehave anymore.
Thanks for your help and patience.