☰

OneDrive Show long file name

長いファイル名をポップアップで表示

  1. // ==UserScript==
  2. // @name         OneDrive Show long file name
  3. // @namespace    http://github.com/segabito
  4. // @version      0.1.2
  5. // @description  長いファイル名をポップアップで表示
  6. // @author       segabito
  7. // @match        https://onedrive.live.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.  
  13. var __css__ = (function() {/*
  14.  
  15. .FileNamePopup {
  16.   position: fixed;
  17.   top: 7px;
  18.   left: 210px;
  19.   background-color: #ffc;
  20.   z-index: 1000;
  21.   padding: 2px 24px;
  22.   font-weight: bolder;
  23.   border: solid 1px #888;
  24.   border-radius: 8px;
  25.   box-shadow: 2px 2px 4px #333;
  26.   opacity: 0.8;
  27.   pointer-events: none;
  28. }
  29.  
  30. .FileNamePopup:empty {
  31.   display: none;
  32. }
  33.  
  34. .DetailsRow-cell.displayName:hover::after {
  35.   content: attr(aria-label);
  36.   position: fixed;
  37.   top: 7px;
  38.   left: 210px;
  39.   background-color: #fff;
  40.   z-index: 10000001;
  41.   padding: 2px 24px;
  42.   font-weight: bolder;
  43.   border: solid 1px #888;
  44.   border-radius: 8px;
  45. }
  46.  
  47.  
  48. */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1].replace(/\{\*/g, '/*').replace(/\*\}/g, '*/');
  49.     
  50.     var addStyle = function(styles, targetWindow) {
  51.       if (!targetWindow) { targetWindow = self; }
  52.       var elm = targetWindow.document.createElement('style');
  53.       elm.type = 'text/css';
  54.  
  55.       var text = styles.toString();
  56.       text = targetWindow.document.createTextNode(text);
  57.       elm.appendChild(text);
  58.       var head = targetWindow.document.getElementsByTagName('head');
  59.       head = head[0];
  60.       head.appendChild(elm);
  61.       return elm;
  62.     };
  63.  
  64.     var $popup;
  65.     
  66.     var adjustPopup = function(x, y) {
  67.         //var offset = $popup.offset();
  68.         var $window = $(window);
  69.         var screenWidth = $window.innerWidth();
  70.         var screenHeight = $window.innerHeight();
  71.         var height = $popup.outerHeight();
  72.         var top = Math.max(0, Math.min(y + 50, screenHeight - height));
  73.         var width = $popup.outerWidth();
  74.         var left = Math.max(0, Math.min(x - width / 3, screenWidth - width));
  75.         //console.log('adjustPopup: %s, %s -> %s, %s', x, y, top, left);
  76.         $popup.css({
  77.             'top': top,
  78.             'left': left
  79.         });
  80.     };
  81.     
  82.     var hidePopup = function() {
  83.         $popup.text('');
  84.     };
  85.     
  86.     var onListCellMouseover = function(e) {
  87.         var $target = $(e.target).closest('.ItemTile');
  88.         var $name = $target.find('.ItemTile-name');
  89.         var name = $name.text();
  90.         //console.log('%cfilename: %s', 'background: cyan; ', name);// $target[0], $name[0]);
  91.         if (name) {
  92.             $target.attr('title', name); 
  93.             $popup.text(name);
  94.             adjustPopup(e.clientX, e.clientY);
  95.         }
  96.     };
  97.  
  98.     var onDetailsRowMouseover = function(e) {
  99.         var $target = $(e.target).closest('.DetailsRow');
  100.         var $name = $target.find('.displayName');
  101.         var name = $name.text();
  102.         //console.log('%cfilename: %s', 'background: cyan; ', name, e);
  103.         if (name) {
  104.             $target.attr('title', name); 
  105.             $popup.text(name);
  106.             adjustPopup(e.clientX, e.clientY);
  107.         }
  108.     };
  109.     
  110.     var onItemTileMouseover = function(e) {
  111.         var $target = $(e.target).closest('.c-SetItemTile');
  112.         var $name = $target.find('.titleArea');
  113.         var name = $name.text();
  114.         //console.log('%cfilename: %s', 'background: cyan; ', name, e);
  115.         if (name) {
  116.             $target.attr('title', name); 
  117.             $popup.text(name);
  118.             adjustPopup(e.clientX, e.clientY);
  119.         }
  120.     };
  121.     
  122.     var initialize = function() {
  123.         addStyle(__css__);
  124.         $popup = $('<div class="FileNamePopup"></div>');
  125.         $body = $('body');
  126.         $body.append($popup);
  127.         $body.on('mouseover', '.List-cell .ItemTile',     onListCellMouseover);
  128.         $body.on('mouseover', '.DetailsRow .displayName', onDetailsRowMouseover);
  129.         $body.on('mouseover', '.child .c-SetItemTile',    onItemTileMouseover);
  130.         $body.on('mousedown', hidePopup);
  131.         $('.od-SuiteNav').on('mouseover', hidePopup);
  132.     };
  133.  
  134.     var initTimer = window.setInterval(function() {
  135.       if (window.$) {
  136.         window.clearInterval(initTimer);
  137.         window.setTimeout(initialize, 500);
  138.       }
  139.     }, 500);
  140.  
  141. })();