User Script: Trello Power-up

trello-power-up.user.js

// ==UserScript==
// @description Trello + sound
// @downloadURL https://gist.github.com/curtisj44/a519b52846dd9760ed59
// @grant       none
// @include     https://trello.com/*
// @name        Trello Power-up
// @namespace   trello
// @require     https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
// @version     0.3.0
// ==/UserScript==

(function () {
  "use strict";

  // var $lists;
  // var $listHeaders;

  var audio = [];

  // var cards;

  const events = [
    "attachment-added",
    "attachment-deleted",
    "board-changed",
    "card-added",
    "card-archived",
    "card-deleted",
    "card-member-added",
    "card-member-removed",
    "card-moved",
    "card-renamed",
    "card-unarchived",
    "checklist-added",
    "checklist-deleted",
    "checklist-item-added",
    "checklist-item-deleted",
    "checklist-item-moved",
    "checklist-item-checked",
    "checklist-item-unchecked",
    "comment-added",
    "comment-deleted",
    "label-added",
    "label-deleted",
    "list-added",
    "list-archived",
    // "list-moved",
    "list-renamed",
  ];

  const namespace = "trello-power-up";

  const sounds = {
    root: "https://raw.githubusercontent.com/adthul/trello_sounds/master/",

    superMarioBros: {
      extension: ".wav",
      folder: "super_mario_bros",
    },
  };

  let skipBoardAction = true;

  // var addCustomStyles = function () {
  // Could use this to custom look and feel?
  // hides attachment options I never use
  // var css = '<style>' +
  //     '.js-google-drive-attachment,' +
  //     '.js-dropbox-attachment,' +
  //     '.js-box-attachment,' +
  //     '.js-one-drive-attachment,' +
  //     '.js-add-attachment-url + hr,' +
  //     '.js-add-attachment-url + hr + .quiet {' +
  //       'display: none !important;' +
  //     '}' +
  //     '/<style>';
  // $('body').append(css);
  // };

  const preloadAudio = function () {
    console.log("preloadAudio", { events });

    events.forEach((event, index) => {
      const {
        root,
        superMarioBros: { extension, folder },
      } = sounds;

      console.log({ event, index }, `${root}${folder}/${value}${extension}`);

      // audio[value] = new Audio();
      // audio[value].src = `${root}${folder}/${value}${extension}`;
      // audio[value].preload = "auto";

      audio[value] = new Audio(`${root}${folder}/${value}${extension}`);
      // audio[value].src = `${root}${folder}/${value}${extension}`;
      // audio[value].preload = "auto";
    });

    // $.each(events, function (index, value) {
    //   console.log({ index, value }, `${root}${folder}/${value}${extension}`);

    //   const {
    //     root,
    //     superMarioBros: { extension, folder },
    //   } = sounds;

    //   audio[value] = new Audio();

    //   // audio[value].src = root + folder + "/" + value + extension;
    //   audio[value].src = `${root}${folder}/${value}${extension}`;

    //   audio[value].preload = "auto";
    // });

    console.log("-------------", { audio });
  };

  const publisher = function (event, request, settings) {
    console.log({ event, request, settings });

    var action = false,
      isBoard = settings.url.indexOf("/boards") > -1,
      isCard =
        settings.url.indexOf("/cards") > -1 &&
        settings.url.indexOf("/checkItem") === -1,
      isChecklist = settings.url.indexOf("/checklists") > -1,
      isChecklistItem = settings.url.indexOf("/checkItem") > -1,
      isList = settings.url.indexOf("/lists") > -1;

    if (!isBoard && !isCard && !isChecklist && !isChecklistItem && !isList)
      return;

    // attachment-added
    if (
      isCard &&
      settings.type === "POST" &&
      settings.url.indexOf("attachments") > -1
    ) {
      action = "attachment-added";
    }

    // attachment-deleted
    if (
      isCard &&
      settings.type === "DELETE" &&
      settings.url.indexOf("/attachments") > -1
    ) {
      action = "attachment-deleted";
    }

    // board-changed
    if (isBoard && settings.type === "POST") {
      if (skipBoardAction) {
        skipBoardAction = false;
      } else {
        action = "board-changed";
        skipBoardAction = true;
      }
    }

    // card-added
    if (
      isCard &&
      settings.type === "POST" &&
      (settings.url.match(/\//g) || []).length < 3
    ) {
      action = "card-added";
    }

    // card-archived
    if (
      isCard &&
      settings.type === "PUT" &&
      settings.data.indexOf("closed=true") > -1
    ) {
      action = "card-archived";
    }

    // card-deleted
    if (
      isCard &&
      settings.type === "DELETE" &&
      settings.url.indexOf("idLabels") === -1
    ) {
      action = "card-deleted";
    }

    // card-member-added
    if (
      isCard &&
      settings.type === "POST" &&
      settings.url.indexOf("idMembers") > -1
    ) {
      action = "card-member-added";
    }

    // card-member-removed
    if (
      isCard &&
      settings.type === "DELETE" &&
      settings.url.indexOf("idMembers") > -1
    ) {
      action = "card-member-removed";
    }

    // card-moved
    if (
      isCard &&
      settings.type === "PUT" &&
      settings.data.indexOf("closed=") === -1 &&
      settings.data.indexOf("name=") === -1
    ) {
      action = "card-moved";
    }

    // card-renamed
    if (
      isCard &&
      settings.type === "PUT" &&
      settings.data.indexOf("name=") > -1
    ) {
      action = "card-renamed";
    }

    // card-unarchived
    if (
      isCard &&
      settings.type === "PUT" &&
      settings.data.indexOf("closed=false") > -1
    ) {
      action = "card-unarchived";
    }

    // checklist-added
    if (isChecklist && settings.type === "POST") {
      action = "checklist-added";
    }

    // checklist-deleted
    if (isChecklist && settings.type === "DELETE") {
      action = "checklist-deleted";
    }

    // checklist-item-added
    if (isChecklistItem && settings.type === "POST") {
      action = "checklist-item-added";
    }

    // checklist-item-deleted
    if (isChecklistItem && settings.type === "DELETE") {
      action = "checklist-item-deleted";
    }

    // checklist-item-moved
    if (
      isChecklistItem &&
      settings.type === "PUT" &&
      settings.data.indexOf("state=") === -1
    ) {
      action = "checklist-item-moved";
    }

    // checklist-item-checked
    if (
      isChecklistItem &&
      settings.type === "PUT" &&
      settings.data.indexOf("state=complete") > -1
    ) {
      action = "checklist-item-checked";
    }

    // checklist-item-unchecked
    if (
      isChecklistItem &&
      settings.type === "PUT" &&
      settings.data.indexOf("state=incomplete") > -1
    ) {
      action = "checklist-item-unchecked";
    }

    // comment-added
    if (
      isCard &&
      settings.type === "POST" &&
      settings.url.indexOf("/actions/comments") > -1
    ) {
      action = "comment-added";
    }

    // comment-deleted
    if (settings.type === "DELETE" && settings.url.indexOf("/actions") > -1) {
      action = "comment-deleted";
    }

    // label-added
    if (
      isCard &&
      settings.type === "POST" &&
      settings.url.indexOf("/idLabels") > -1
    ) {
      action = "label-added";
    }

    // label-deleted
    if (
      isCard &&
      settings.type === "DELETE" &&
      settings.url.indexOf("idLabels") > -1
    ) {
      action = "label-deleted";
    }

    // list-added
    if (isList && settings.type === "POST") {
      action = "list-added";
    }

    // list-archived
    if (
      isList &&
      settings.type === "PUT" &&
      settings.data.indexOf("closed=true") > -1
    ) {
      action = "list-archived";
    }

    // list-moved
    if (
      isList &&
      settings.type === "PUT" &&
      settings.data.indexOf("pos=") > -1
    ) {
      action = "list-archived";
      // action = "list-moved";
    }

    // list-renamed
    if (
      isList &&
      settings.type === "PUT" &&
      settings.data.indexOf("name=") > -1
    ) {
      action = "list-renamed";
    }

    // publish the action
    if (action && !document.hidden) {
      console.log("action = [" + action + "]");
      $(document).trigger(namespace, action);
    }
  };

  const subscriber = function () {
    // TODO: this doesn't seem to work
    $(document).on(namespace, function (e, action) {
      console.log("subscriber", { action });

      audio[action].play();

      // if (action === 'card-moved') {
      //   cardMoved();
      // }
    });
  };

  // cardMoved = function () {
  //   console.info('cardMoved');

  //   // console.info($lists);

  //   // $lists.each(function (index, value) {
  //   // });

  //   // $.each($listHeaders, function (index, value) {
  //   //   cards.push($(value).text().replace(' cards', ''));
  //   // });

  //   var
  //     oldCount = cards,
  //     newCount;

  //   window.setTimeout(countCards, 250);

  //   newCount = cards;

  //   console.info('oldCount');
  //   console.log(oldCount);

  //   console.info('newCount');
  //   console.log(newCount);

  //   $.each(oldCount, function (oldIndex, oldValue) {
  //     $.each(newCount, function (newIndex, newValue) {
  //       if (oldCount[oldIndex] !== newCount[newIndex]) {
  //         console.log('this value changed');
  //         console.log(oldIndex);
  //       }

  //       // console.log(oldCount[newIndex]);
  //       // console.log(oldCount[newIndex]);
  //       // console.log(newCount[newIndex]);

  //     });
  //   });
  // },

  // countCards = function () {
  //   cards = [];

  //   $.each($listHeaders, function (index, value) {
  //     var
  //       amount,
  //       $thisHeading = $(value);

  //     // if ($thisHeading.attr('data-count')) {
  //     //   amount = $thisHeading.attr('data-count');
  //     // } else {
  //       amount = $thisHeading.text().replace(' cards', '').replace(' card', '');
  //       // $thisHeading.eq(index).attr('data-count', amount);
  //     // }

  //     cards.push(amount);
  //   });

  //   console.info(cards);
  // },

  const init = function () {
    console.log(init, $(".list").length > 0);

    if ($(".list").length > 0) {
      // $lists = $('.list');
      // $listHeaders = $('.list-header-num-cards');

      // $listHeaders.removeClass('hide').css('display', 'block');
      // countCards();

      console.log("before", { audio });
      // preloadAudio();
      console.log("after", { audio });
      subscriber();
      watcher();
    } else {
      window.setTimeout(init, 500);
    }

    // addCustomStyles();
  };

  const watcher = function () {
    console.log("watcher");

    $(document).ajaxSend(function (event, request, settings) {
      console.log("watcher ajaxSend", { event, request, settings });
      publisher(event, request, settings);
    });
  };

  $(init);
})();