☰

Compact View on Ed Discussions

Reduces amount of space used by each post tile in the list view, by compacting each post to a single line on Ed discussion forum. Also reduces some whitespace in messages panel.

当前为 2021-08-18 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name          Compact View on Ed Discussions
  3. // @namespace     waqas
  4. // @description   Reduces amount of space used by each post tile in the list view, by compacting each post to a single line on Ed discussion forum. Also reduces some whitespace in messages panel.
  5. // @match         *://edstem.org/*
  6. // @grant         GM_addStyle
  7. // @version       0.1
  8. // @author        Waqas Ilyas
  9. // @require       http://code.jquery.com/jquery-latest.js
  10. // @run-at        document-start
  11. // @licence       MIT
  12. // jshint esversion: 6
  13. // ==/UserScript==
  14. (function() {
  15.   'use strict';
  16.   
  17.   GM_addStyle(`
  18. .split-divider-wi {
  19.   padding-left: 0.5px;
  20. }
  21.  
  22. .discuss-feed-thread-wi {
  23.   padding: 2px !important;
  24. }
  25.  
  26. .dft-body-wi {
  27.   margin: 2px !important;
  28.   padding: 0 5px 0 20px !important;
  29. }
  30.  
  31. .dft-body-unseen-wi {
  32.   font-weight: bold !important;
  33.   padding: 0 5px 0 5px !important;
  34. }
  35.  
  36. .dft-category-wi {
  37.   margin: 0 2px 0 2px;
  38. }
  39.  
  40. .dft-author-wi {
  41.   font-size: 70% !important;
  42.   width: 2em;
  43.   text-align: center;
  44.   background-color: #eee;
  45.   padding: 0 2px 0 2px;
  46.   margin: 0 2px 0 2px;
  47. }
  48.  
  49. .discuss-show-full-wi {
  50.   max-width: 90% !important;
  51. }
  52.  
  53. .dft-thread-count-new-wi {
  54.   font-size: 70% !important;
  55. }
  56.   `);
  57.   
  58.   var initialWidthSet = false;
  59.   
  60.   $(window).load(function() {
  61.     var MutationObserver = window.MutationObserver;
  62.     var myObserver       = new MutationObserver (applyUpdates);
  63.     var obsConfig        = {
  64.         childList: true, attributes: true,
  65.         subtree: true,   attributeFilter: ['class']
  66.     };
  67.  
  68.     myObserver.observe (document, obsConfig);
  69.   });
  70.  
  71.   function applyUpdates() {
  72.     var selector = $('.split-divider');
  73.     if (selector.length == 0)
  74.       // HTML of our interest not available yet
  75.       return;
  76.     
  77.     selector.addClass('split-divider-wi');
  78.  
  79.     // Allow wider threads panel
  80.     if (!initialWidthSet) {
  81.       initialWidthSet = true;
  82.       var threadsPanel = $('section.dif-tf-container').get(0);
  83.       threadsPanel.parentElement.style = "flex: 0 0 650px";
  84.     }
  85.  
  86.     // Compact post tiles in the list
  87.     selector = $('a.discuss-feed-thread');
  88.     if (selector.length > 0)
  89.       selector.addClass('discuss-feed-thread-wi');
  90.  
  91.     // Hide all the footers, we will accomadate useful information into dft-body
  92.     selector = $('a.discuss-feed-thread footer');
  93.     if (selector.length > 0)
  94.       selector.hide();
  95.  
  96.     // Selector for post tiles, compact even more
  97.     var dftBodySelector = $('a.discuss-feed-thread .dft-body');
  98.     if (dftBodySelector.length > 0)
  99.       dftBodySelector.addClass('dft-body-wi');
  100.  
  101.     // Make changes to each tile
  102.     dftBodySelector.each(function(i, o) {
  103.       var dftBody = $(o);
  104.  
  105.       // Adjust padding so that unread and read posts are aligned
  106.       var unseenIcons = dftBody.find('.dft-thread-unseen-icon');
  107.       if (unseenIcons.length > 0)
  108.         dftBody.addClass('dft-body-unseen-wi');
  109.       else
  110.         dftBody.removeClass('dft-body-unseen-wi');
  111.  
  112.       // Check if the post is from an instructor
  113.       var footer = dftBody.parent().find('footer');
  114.       
  115.       // Number of new unread messages
  116.       var newRepliesSpan = footer.find('.dft-thread-count > span.dft-thread-count-new');
  117.       if (newRepliesSpan.length > 0) {
  118.         console.log(newRepliesSpan.children().length);
  119.         if (dftBody.find('.dft-thread-count-new').length == 0)
  120.           dftBody.find('.dft-thread-title').after(`
  121.             <span title="New Replies" class="dft-thread-count-new dft-thread-count-new-wi">
  122.               ${newRepliesSpan.html()}
  123.             </span>
  124.           `);
  125.       }
  126.  
  127.       // Author name
  128.       var authorSpan = footer.find('.dft-foot-fill > span.dft-thread-user');
  129.  
  130.       // Handle author's role
  131.       var roleDiv = footer.find('.dft-foot-fill > div.user-role-label');
  132.       if (dftBody.find('span.dft-author-wi').length == 0) {
  133.         var role = 'S';
  134.         var roleClass = 'url-student';
  135.         if (roleDiv.hasClass('url-admin')) {
  136.           role = 'I';
  137.           roleClass = 'url-admin';
  138.         }
  139.  
  140.         // Add an author tag, with initials
  141.         dftBody.append(`
  142.           <span title='${authorSpan.html()}' class='dft-author-wi ${roleClass}'>
  143.             ${authorSpan.html().split(' ').map((n) => n[0]).slice(0, 3).join('')}
  144.           </span>
  145.         `);
  146.       }
  147.  
  148.       // Handle category, add a tag for it
  149.       var catDiv = footer.find('.dft-foot-fill > .dft-thread-category-group');
  150.       var catColor = catDiv.get(0).style.color;
  151.       var catSpan = footer.find('.dft-foot-fill > .dft-thread-category-group > span');
  152.       var category = catSpan.html();
  153.       if (dftBody.find('span.dft-category-wi').length == 0)
  154.         dftBody.append(`
  155.           <span title='${category}'
  156.                 class='discuss-category-tag dsb-category-tag dft-category-wi'
  157.                 style='background-color: ${catColor}'></span>
  158.         `);
  159.       
  160.       // Post body, reduce whitespace
  161.       $('.discuss-show-full').addClass('discuss-show-full-wi');
  162.     });
  163.   }
  164. })();