☰

Feedly Scroll Marker

Display the marker of page scroll in Feedly. / Feedlyでページスクロールしたときにマーカーを表示します。

  1. // ==UserScript==
  2. // @name    Feedly Scroll Marker
  3. // @description    Display the marker of page scroll in Feedly. / Feedlyでページスクロールしたときにマーカーを表示します。
  4. // @id    FeedlyScrollMarker
  5. // @namespace    http://userscripts.org/scripts/show/174679
  6. // @homepage    https://greasyfork.org/scripts/899-feedly-scroll-marker
  7. // @include    http://feedly.com/*
  8. // @include    https://feedly.com/*
  9. // @grant    GM_addStyle
  10. // @version    1.03
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.  
  15. try { if (typeof localStorage !== 'object') return alert('FSM Error: DOM Storage'); }
  16. catch(er) { return alert('FSM Error: DOM Storage'); }
  17. var $id = function(id) { return document.getElementById(id); }, iInit;
  18.  
  19. var init = function() {
  20.   var nScrPos = 0, nTime = 750, shift = false, iMarker, st;
  21.   var ism = document.createElement('div');
  22.   ism.id = 'fsm_scroll_marker';
  23.   document.body.appendChild(ism);
  24.   var CSS = [
  25.     '#fsm_settings { display: none; color: black; position: fixed; top: 68px; left: 68px; z-index: 90200; background: rgba(255, 255, 255, 0.98); border: 1px solid #999999; border-radius: 4px; min-width: 35em; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); }',
  26.     '#fsm_s_titlebar { background-color: #666666; border-radius: 4px 4px 0 0; padding: 2px 0 0 4px; height: 2em; }',
  27.     '#fsm_s_title a { font-size: 110%; font-weight: bold; color: white; text-decoration: none; }',
  28.     '#fsm_s_title a:hover { color: #FFFF99; }',
  29.     '#fsm_s_btn { position: absolute; top: 2px; right: 4px; }',
  30.     '#fsm_s_ok { margin-right: 0.5em; padding: 0 2em; }',
  31.     '#fsm_s_cancel { padding: 0 1ex; }',
  32.     '#fsm_s_ok, #fsm_s_cancel { font-size: 80%; }',
  33.     '#fsm_s_body { padding: 0.5em 1em; }',
  34.     '#fsm_s_body fieldset { margin: 4px 2px; background: rgba(255, 255, 255, 0); }',
  35.     '#fsm_s_body input { margin-left: 0.5em; text-align: center; width: 6ex; }',
  36.     '#fsm_s_body input[type="checkbox"] { vertical-align: middle; width: auto; }',
  37.     '#fsm_s_time { vertical-align: inherit; }',
  38.     '#fsm_scroll_marker, #fsm_scroll_marker2 { position: absolute; width: 100%; height: 4px; margin-top: -2px; background: rgba(255,0,0,0.25); display: none; }',
  39.     '#fsm_scroll_marker { z-index: 88801; }',
  40.     '#fsm_scroll_marker2 { z-index: 88802; }'
  41.   ].join('');
  42.   GM_addStyle(CSS);
  43.   
  44.   var locale_ja = [
  45.     '設定',
  46.     'キャンセル',
  47.     'マーカーを表示する時間 (ミリ秒):',
  48.     'マーカーを表示するショートカットキー'
  49.   ];
  50.   var locale_en = [
  51.     'Settings',
  52.     'Cancel',
  53.     'Time to display the marker (msec):',
  54.     'Keyboard shortcut to display the marker'
  55.   ];
  56.   var loc = (window.navigator.language === 'ja') ? locale_ja : locale_en;
  57.   
  58.   var currentMode = function() {
  59.     var e1 = $id('feedlyPageFX'), e2 = $id('timeline'),
  60.       t1 = 'presentation-', t2 = 'EntryList';
  61.     if (document.getElementsByClassName('floatingEntryScroller').length) return 'fes';
  62.     if (e1 && e1.hasChildNodes()) {
  63.       e1 = e1.firstChild;
  64.       return (e1.classList.contains(t1 + '0')) ? 'T'
  65.             : (e1.classList.contains(t1 + '4')) ? 'M2'
  66.             : (e1.classList.contains(t1 + '5')) ? 'C'
  67.             : (e1.classList.contains(t1 + '100')) ? 'F' : '';
  68.     }
  69.     if (e2) {
  70.       return (e2.classList.contains('u0' + t2)) ? 'T'
  71.             : (e2.classList.contains('u4' + t2)) ? 'M1'
  72.             : (e2.classList.contains('u5' + t2)) ? 'C'
  73.             : (e2.classList.contains('u100' + t2)) ? 'F' : '';
  74.     }
  75.     return '';
  76.   };
  77.   
  78.   var currentEntry = function(m) {
  79.     var mode = (m) ? m : currentMode();
  80.     switch (mode) {
  81.       case 'T': case 'M1':
  82.         return document.querySelector('#timeline .inlineFrame');
  83.       case 'C': case 'M2': case 'fes':
  84.         return document.querySelector('#floatingEntry .floatingEntryScroller');
  85.       case 'F':
  86.         return document.querySelector('#timeline .selectedEntry');
  87.       default:
  88.         return document.querySelector('#mainArea .inlineFrame');
  89.     }
  90.   };
  91.   
  92.   var setMarker = function() {
  93.     var mode = currentMode();
  94.     if (mode === 'C' || mode === 'M2' || mode === 'fes') {
  95.       if ($id('fsm_scroll_marker2')) ism = $id('fsm_scroll_marker2');
  96.       else {
  97.         var ism2 = document.createElement('div');
  98.         ism2.id = 'fsm_scroll_marker2';
  99.         currentEntry(mode).appendChild(ism2);
  100.         ism = ism2;
  101.       }
  102.     } else ism = $id('fsm_scroll_marker');
  103.   };
  104.   
  105.   var viewSettings = function() {
  106.     if ($id('fsm_settings').style.display === 'block') {
  107.       $id('fsm_settings').style.display = 'none';
  108.       return;
  109.     }
  110.     $id('fsm_s_time').value = st.time;
  111.     $id('fsm_s_key_page').checked = (st.key_page) ? true : false;
  112.     $id('fsm_s_key_space').checked = (st.key_space) ? true : false;
  113.     $id('fsm_settings').style.display = 'block';
  114.   };
  115.   
  116.   var loadSettings = function() {
  117.     st = {};
  118.     try {
  119.       st = JSON.parse(localStorage.getItem('FeedlyScrollMarker_settings')) || {};
  120.     } catch(er) { alert('FSM Error: Load Settings'); }
  121.     var notB = function(a) {
  122.       return (typeof a !== 'boolean') ? true : false;
  123.     };
  124.     var notN = function(a) {
  125.       return (typeof a !== 'number') ? true : false;
  126.     };
  127.     if (notN(st.time)) st.time = nTime;
  128.     if (notB(st.key_page)) st.key_page = true;
  129.     if (notB(st.key_space)) st.key_space = true;
  130.   };
  131.   
  132.   var saveSettings = function() {
  133.     try {
  134.       localStorage.setItem('FeedlyScrollMarker_settings', JSON.stringify(st));
  135.     } catch(er) { alert('FSM Error: Save Settings'); }
  136.   };
  137.   
  138.   var div = document.createElement('div');
  139.   div.id = 'fsm_settings';
  140.   document.body.appendChild(div);
  141.   $id('fsm_settings').innerHTML = '<div id="fsm_s_titlebar"><div id="fsm_s_title"><a href="https://greasyfork.org/scripts/899-feedly-scroll-marker" target="_blank">Feedly Scroll Marker ' + loc[0] + '</a></div><div id="fsm_s_btn"><input type="button" id="fsm_s_ok" value="OK"><input type="button" id="fsm_s_cancel" value="' + loc[1] + '"></div></div><div id="fsm_s_body"><label>' + loc[2] + '<input id="fsm_s_time" type="text" maxlength="4"></label><fieldset><legend>' + loc[3] + ' : </legend><label><input id="fsm_s_key_page" type="checkbox">PageUp / PageDown</label><br><label><input id="fsm_s_key_space" type="checkbox">Space / Shift+Space</label></fieldset></div>';
  142.   
  143.   var eTabs = $id('feedlyTabs'), eItem;
  144.   if (eTabs) {
  145.     eItem = document.createElement('div');
  146.     eItem.className = 'tab';
  147.     eItem.innerHTML = '<div class="header target"><div id="fsm_settings-menu" class="label primary iconless">Scroll Marker ' + loc[0] + '</div></div>';
  148.     eTabs.appendChild(eItem);
  149.   }
  150.   
  151.   document.addEventListener('keydown', function(e) {
  152.     if (!/^input|^textarea/i.test(e.target.tagName) && st.time !== 0) {
  153.       setMarker();
  154.       if (
  155.         (st.key_page && e.keyCode === 33) ||
  156.         (st.key_page && e.keyCode === 34) ||
  157.         (st.key_space && e.keyCode === 32)
  158.       ) {
  159.         var mode = currentMode();
  160.         ism.style.display = 'none';
  161.         if (mode === 'C' || mode === 'M2' || mode === 'fes') nScrPos = currentEntry(mode).scrollTop;
  162.         else nScrPos = window.scrollY;
  163.         if (e.shiftKey) shift = true;
  164.       } else if (e.keyCode === 13) {
  165.         if (currentEntry()) {
  166.           window.clearTimeout(iMarker);
  167.           ism.style.display = 'none';
  168.         }
  169.       } else if (ism.style.display !== 'none') {
  170.         window.clearTimeout(iMarker);
  171.         ism.style.display = 'none';
  172.       }
  173.     }
  174.   }, true);
  175.   
  176.   document.addEventListener('keyup', function(e) {
  177.     if (!/^input|^textarea/i.test(e.target.tagName) && st.time !== 0) {
  178.       var mode = currentMode(), sch, sst, ele;
  179.       if (mode === 'C' || mode === 'M2' || mode === 'fes') {
  180.         ele = currentEntry(mode);
  181.         sch = ele.clientHeight;
  182.         sst = ele.scrollTop;
  183.       } else {
  184.         sch = document.body.parentNode.clientHeight;
  185.         sst = document.body.parentNode.scrollTop;
  186.       }
  187.       if (
  188.         (st.key_page && e.keyCode === 33) ||
  189.         (st.key_space && e.keyCode === 32 && e.shiftKey)
  190.       ) {
  191.         if (nScrPos !== sst) {
  192.           ism.style.display = 'block';
  193.           ism.style.top = (nScrPos - (ism.scrollHeight / 2)) + 'px';
  194.           window.clearTimeout(iMarker);
  195.           if (st.time > 0) {
  196.             iMarker = window.setTimeout(function() {
  197.               window.clearTimeout(iMarker);
  198.               ism.style.display = 'none';
  199.             }, st.time);
  200.           }
  201.         }
  202.         shift = false;
  203.       } else if (
  204.         (st.key_page && e.keyCode === 34) ||
  205.         (st.key_space && e.keyCode === 32 && !e.shiftKey)
  206.       ) {
  207.         if (nScrPos !== sst) {
  208.           ism.style.display = 'block';
  209.           ism.style.top = (nScrPos + sch + (ism.scrollHeight / 2)) + 'px';
  210.           window.clearTimeout(iMarker);
  211.           if (st.time > 0) {
  212.             iMarker = window.setTimeout(function() {
  213.               window.clearTimeout(iMarker);
  214.               ism.style.display = 'none';
  215.             }, st.time);
  216.           }
  217.         }
  218.         shift = false;
  219.       }
  220.     }
  221.   }, true);
  222.   
  223.   document.addEventListener('click', function(e) {
  224.     if (e.button >= 2) return;
  225.     if (e.target.id === 'fsm_settings-menu') {
  226.       viewSettings();
  227.     } else if (e.target.id === 'fsm_s_ok') {
  228.       var time = $id('fsm_s_time').value, problem = false;
  229.       if (time === '' || /^\s+$/.test(time)) st.time = nTime;
  230.       else if (time && !isNaN(time)) st.time = Number(time);
  231.       else problem = true;
  232.       if (!problem) {
  233.         st.key_page = $id('fsm_s_key_page').checked;
  234.         st.key_space = $id('fsm_s_key_space').checked;
  235.         $id('fsm_s_ok').blur();
  236.         $id('fsm_settings').style.display = 'none';
  237.         saveSettings();
  238.       }
  239.     } else if (e.target.id === 'fsm_s_cancel') {
  240.       $id('fsm_s_cancel').blur();
  241.       $id('fsm_settings').style.display = 'none';
  242.     } else if (ism.style.display !== 'none') {
  243.       window.clearTimeout(iMarker);
  244.       ism.style.display = 'none';
  245.     }
  246.   }, false);
  247.   loadSettings();
  248. };
  249.  
  250. iInit = window.setInterval(function() {
  251.   var e = $id('feedlyTitleBar');
  252.   if (e && e.hasChildNodes()) {
  253.     window.clearInterval(iInit);
  254.     window.setTimeout(function() {
  255.       init();
  256.     }, 1000);
  257.   }
  258. }, 500);
  259.  
  260. })();