☰

Google Classroom | Модификация интерфейса

Модификация интерфейса для Google Classroom.

当前为 2020-04-19 提交的版本，查看 最新版本。

// ==UserScript==
// @name             Google Classroom | Модификация интерфейса
// @name:ru          Google Classroom | Модификация интерфейса
// @name:en          Google Classroom | Interface modification
// @description      Модификация интерфейса для Google Classroom.
// @description:ru   Модификация интерфейса для Google Classroom.
// @description:en   Modification of the interface for the Google Classroom editor.
// @iconURL          https://ssl.gstatic.com/classroom/favicon.png
// @screenshot       https://ssl.gstatic.com/classroom/favicon.png
// @version          1.0
// @author           stomaks ([email protected])
// @developer        stomaks ([email protected])
// @domain           classroom.google.com
// @include          https://classroom.google.com/*
// @require          https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
// @grant            none
// @namespace        https://greasyfork.org/users/189193
// @license          WTFPL; http://www.wtfpl.net/txt/copying
// ==/UserScript==

(function() {
  'use strict';

  $(`head`).append(`
<style>
.joJglb {
  z-index: 980;
}

.tdS5P {
  z-index: 900;
}

.xUYklb {
  font-size: 85%;
}

.SRX5Hd {
  position: fixed;
  bottom: 45px;
  right: 45px;
  height: auto;
  width: auto;
  z-index: 900;
}

.SRX5Hd .aS18D.p0oLxb {
  min-width: inherit;
}

.SRX5Hd .GcVcmc .RdyDwe {
  display: none;
}

.SRX5Hd .aS18D.p0oLxb .Fxmcue.cd29Sd {
  padding: 20px;
  text-align: center;
}

.SRX5Hd .aS18D.p0oLxb .Ce1Y1c {
  margin: 0;
}

.Kb1iQ {
  margin: 0 0 0 auto;
}

.JPdR6b.qjTEB {
  position: fixed !important;
}

main {
  padding-bottom: 75px;
}

/* # alt */
body > [name="alt"] {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  padding: 5px 10px;
  max-width: 500px;
  background: rgba(97, 97, 97, 0.9);
  -webkit-transition: opacity 250ms 250ms cubic-bezier(.4, 0, .2, 1),
    transform 250ms 250ms cubic-bezier(.4, 0, .2, 1),
    top 250ms 0ms cubic-bezier(.4, 0, .2, 1),
    left 250ms 0ms cubic-bezier(.4, 0, .2, 1);
  transition: opacity 250ms 250ms cubic-bezier(.4, 0, .2, 1),
    transform 250ms 250ms cubic-bezier(.4, 0, .2, 1),
    top 250ms 0ms cubic-bezier(.4, 0, .2, 1),
    left 250ms 0ms cubic-bezier(.4, 0, .2, 1);
  -webkit-transform: scale3d(0, 0, 0);
  transform: scale3d(0, 0, 0);
  -webkit-transform-origin: top left;
  transform-origin: top left;
  opacity: 0;
  pointer-events: none;
  z-index: 970;
}

body > [name="alt"],
body > [name="alt"] > * {
  color: #fff;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: initial;
  letter-spacing: .5px;
}

body > [name="alt"][state="show"] {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  opacity: 1;
}

</style>`);



  $(`body`).append(`<div name="alt"></div>`);



  // Установка подсказок
  function setAlt () {
    // Для основного меню
    {
      const el = $(`div[role="menu"].OX4Vcb a[aria-label]`);

      el.each(function () {
        const el_text = $(this).attr("aria-label");

        $(this).attr("alt", el_text);
      });
    }

    // Для меню
    {
      const el = $(`aside.GP1o5c ul > li`);

      el.each(function () {
        const el_text = $(this).find(`div.YVvGBb`).text();

        $(this).attr("alt", el_text);
      });
    }

    // Для тем
    {
      const el = $(`ol.FpfvHe > li > div[data-topic-id]`);

      el.each(function () {
        const el_text = $(this).find(`> div > a`).text();

        $(this).attr("alt", el_text);
      });
    }

    // Для елементов темы
    {
      const el = $(`ol.Xzp3fc > li > div`);

      el.each(function () {
        const el_text = $(this).find(`.kByKEb > span`).text();

        $(this).attr("alt", el_text);
      });
    }

    //  Кнопка +
    {
      const el = $(`.SRX5Hd`);

      const el_text = el.find(`.GcVcmc .RdyDwe`).text();

      el.attr("alt", el_text);
    }


    setTimeout(setAlt, 1000);
  };

  setTimeout(setAlt, 1000);







  //+----------------------------------------------------------------------------------------------+
  /** Метод-утилита "getCoordinates" - Получает координаты курсора или элемента.
     *
     * @param {string|jQuery} Путь к элементу, ссылка на элемент или объект с настройками.
     *
     * @param {object} callback Данные для подписанных функций или функция обратного вызова.
     *
     * @return {object|null|function} Объект, или вызывает подписанные функции, или выполняет функцию обратного вызова.
     */
  function getCoordinates ( data, callback = null, event = window.event ) {
    let result = {};

    try {
      result.data = {};

      if ( data == null ) {
        result.data = {
          X: event.clientX || null,
          Y: event.clientY || null,
          x: event.pageX || null,
          y: event.pageY || null
        };
      } else {
        switch ( typeof data ) {
          case "string":
            data = $(data);

          case "object":
            if ( data instanceof jQuery && data.is(":visible") ) {
              result.data = {
                X: data.position().left || null,
                Y: data.position().top || null,
                x: data.offset().left || null,
                y: data.offset().top || null
              };
            }
            break;

          default: break;
        }
      }





      // Без обратного вызова
      if ( !callback ) {
        return result.data;
      }

      // Функция обратного вызова
      if ( typeof callback === "function" ) {
        return callback( result );
      }
    } catch ( error ) {
      result.error = error;
      result.data = null;
    }

    return result.data;
  };
  //+----------------------------------------------------------------------------------------------+



  function showAlt ( data, callback = null, event = window.event ) {
    let result = {};

    result.data = {};

    function _ ( x, y ) {
      let float = [];
      let temp = x / $(`body`).width() * 100;

      if ( temp <= 10 ) {
        float.push("left");
      } else if ( temp > 10 && temp < 90 ) {
        float.push("center");
      } else {
        float.push("right");
      }

      temp = y / $(`body`).height() * 100;

      if ( temp <= 10 ) {
        float.push("top");
      } else if ( temp > 10 && temp < 90 ) {
        float.push("center");
      } else {
        float.push("bottom");
      }

      return float;
    }

    // Контейнер
    switch ( typeof data ) {
      case "string":
        if ( data.length > 0 ) {
          result.data.container = $(data);
          break;
        }

      case "object":
        if ( data instanceof jQuery ) {
          result.data.container = data;
          break;
        }

      default:
        throw new TypeError(`Входящие данные не определены или имеют неверный тип данных.`);
    }

    // Подсказка
    result.data.alt = result.data.container.attr("alt");

    // Направление подсказки
    result.data.float = [];
    {
      let temp = result.data.container.attr("alt-float");

      if ( typeof temp === "string" ) {
        temp = temp.split(" ");

        result.data.float = [temp[0], temp[1]];
      }
    }

    // Определение соответствия текста в alt и в элементе
    function isAlt ( el, alt ) {
      if ( el.children().length > 0 ) {
        // Видимые в элементы
        el = el.children(`:visible:not(.content)`).filter(function() {
          return !($(this).css(`opacity`) === "0" || $(this).css(`visibility`) === "hidden");
        });
      }

      // Текст
      result.data.text = el.text().replace(/^\s+|\s+$/g, ``);

      return (typeof alt === "string" && alt.length ); // && alt !== result.data.text
    }

    if ( isAlt(result.data.container, result.data.alt) ) {
      $(`body > div[name="alt"]`)
        .attr("state", "show")
        .html( result.data.alt );



      // Получить координаты контейнера
      result.data.coordinates = getCoordinates( data );

      // Валидация направления подсказки
      {
        let isX = false;
        if ( result.data.float[0] === "left" || result.data.float[0] === "center" || result.data.float[0] === "right" ) {
          isX = true;
        }

        let isY = false;
        if ( result.data.float[1] === "top" || result.data.float[1] === "center" || result.data.float[1] === "bottom" ) {
          isY = true;
        }

        if ( !isX || !isY || result.data.float.length !== 2 ) {
          // Получить положение контейнера
          let temp = _(result.data.coordinates.x, result.data.coordinates.y);

          if ( !isX ) {
            result.data.float = [temp[0], result.data.float[1]];
          }

          if ( !isY ) {
            result.data.float = [result.data.float[0], temp[1]];
          }
        }
      }



      let app_width = $(`body`).outerWidth() || $(`body`).width();
      let app_height = $(`body`).outerHeight() || $(`body`).height();

      let alt_width = $(`body > div[name="alt"]`).outerWidth() || $(`body > div[name="alt"]`).width();
      let alt_height = $(`body > div[name="alt"]`).outerHeight() || $(`body > div[name="alt"]`).height();

      let container_width = result.data.container.outerWidth() || result.data.container.width();
      let container_height = result.data.container.outerHeight() || result.data.container.height();

      switch ( result.data.float.join(" ")  ) {
        case "left top": // ↘
          result.data.coordinates.y += container_height + 10;
          break;

        case "left center": // →
          result.data.coordinates.x += container_width + 20;
          result.data.coordinates.y += (container_height - alt_height ) / 2;
          break;

        case "left bottom": // ↗
          result.data.coordinates.x += container_width + 20;
          result.data.coordinates.y += (container_height - alt_height ) / 2;
          break;

        case "center top": // ↓
          result.data.coordinates.x += ((container_width - alt_width) / 2);
          result.data.coordinates.y += container_height + 10;
          break;

        case "center center": // •
          result.data.coordinates.x += ((container_width - alt_width) / 2);
          result.data.coordinates.y += container_height + 10;
          break;

        case "center bottom": // ↑
          result.data.coordinates.x += ((container_width - alt_width) / 2);
          result.data.coordinates.y -= alt_height + 10;
          break;

        case "right top": // ↙
          result.data.coordinates.x += container_width - alt_width;
          result.data.coordinates.y += container_height + 10;
          break;

        case "right center": // ←
          result.data.coordinates.x -= alt_width + 25;
          result.data.coordinates.y += (container_height - alt_height ) / 2;
          break;

        case "right bottom": // ↖
          result.data.coordinates.x -= alt_width + 25;
          result.data.coordinates.y += (container_height - alt_height ) / 2;
          break;
      }

      if ( result.data.coordinates.x < 20 ) {
        result.data.coordinates.x = 20;
      }
      if ( result.data.coordinates.x + 40 >= app_width ) {
        result.data.coordinates.x = app_width - (alt_width + 20);
      }

      if ( result.data.coordinates.y < 20 ) {
        result.data.coordinates.y = 20;
      }
      if ( result.data.coordinates.y + 40 >= app_height ) {
        result.data.coordinates.y = app_height - (alt_height + 20);
      }



      $(`body > div[name="alt"]`)
        .css({
        "left": result.data.coordinates.x,
        "top": result.data.coordinates.y,
        "-webkit-transform-origin": result.data.float.join(" "),
        "transform-origin": result.data.float.join(" ")
      });
    } else {
      $(`body > div[name="alt"]`)
        .attr("state", "hide");
    }
  };



  $(`html > body`)

  // Показать подсказку
    .on("mouseover focus", "*", function ( event = window.event ) {
    // Контейнер
    let el_container = $(this).find(event.target).closest(`[alt]`);

    showAlt( el_container );
  });

})();