Inoreader Masonry Extended View

Changes The Extended View to a nice card view which is nice

  1. // ==UserScript==
  2. // @name Inoreader Masonry Extended View
  3. // @description Changes The Extended View to a nice card view which is nice
  4. // @namespace http://www.inoreader.com/
  5. // @version 0.6
  6. // @copyright Zoltan Wacha
  7. // @include http://*.inoreader.com/*
  8. // @include https://*.inoreader.com/*
  9. // @require http://code.jquery.com/jquery-latest.js
  10. // @grant GM_addStyle
  11. // ==/UserScript==
  12.  
  13.  
  14. GM_addStyle ( "\
  15. .reader_pane_view_style_1 .article_card {\
  16. float: left; \
  17. }\
  18. .reader_pane_view_style_1 .article_card .article_footer_buttons{\
  19. font-size: 0; \
  20. }\
  21. " );
  22.  
  23. document.getElementById('reader_pane').addEventListener('DOMNodeInserted', gmAddedChecker, false);
  24. document.getElementById('reader_pane').addEventListener('scroll', gmMain, false);
  25.  
  26. function gmAddedChecker() {
  27. if($('#reader_pane').hasClass('reader_pane_view_style_1'))
  28. {
  29. if(!$('#reader_pane #z_m_lastoid').length > 0)
  30. {
  31. $('<div id="z_m_lastoid" style="display:none;">0</div>').prependTo('#reader_pane');
  32. }
  33. var lastoid = $('#z_m_lastoid').text();
  34. $lastelem = $('#reader_pane .article_card:last');
  35. if($lastelem.data('oid') != lastoid)
  36. {
  37. //console.log('run added');
  38. lastoid = $lastelem.data('oid');
  39. $('#z_m_lastoid').text(lastoid);
  40. gmMain();
  41. }
  42. }
  43. }
  44.  
  45. function gmMain() {
  46. if($('#reader_pane').hasClass('reader_pane_view_style_1'))
  47. {
  48. if(!$('#reader_pane #z_m_originaltop').length > 0)
  49. {
  50. $('<div id="z_m_originaltop" style="display:none;">'+$('#reader_pane .article_card:first').position().top+'</div>').prependTo('#reader_pane');
  51. }
  52. var originaltop = parseInt($('#z_m_originaltop').text());
  53. if(!$('#reader_pane #z_m_articlesheightsum').length > 0)
  54. {
  55. $('<div id="z_m_articlesheightsum" style="display:none;">-1</div>').prependTo('#reader_pane');
  56. }
  57. var articlesheightsum_prev = parseInt($('#z_m_articlesheightsum').text());
  58. var articlesheight_current = 0;
  59. {
  60. $('#reader_pane .article_card').each( function(index) {
  61. articlesheight_current = articlesheight_current + $(this).outerHeight();
  62. });
  63. if(articlesheightsum_prev != articlesheight_current && !$('#z_m_articlesheightsum').hasClass('running'))
  64. {
  65. //console.log('run change');
  66. $('#z_m_articlesheightsum').text(articlesheight_current);
  67. $('#z_m_articlesheightsum').addClass('running');
  68. if($('div#sinner_container').length > 0)
  69. {
  70. $sideadwidth = $('div#sinner_container').outerWidth();
  71. }
  72. else
  73. {
  74. $sideadwidth = 0;
  75. }
  76. column1top = originaltop;
  77. column2top = originaltop;
  78. $('#reader_pane .article_card').each( function(index) {
  79. if(column1top <= column2top)
  80. {
  81. $(this).css('left', 0);
  82. $(this).css('top',column1top);
  83. $(this).css('width','calc(50% - ' + (35 + ($sideadwidth / 2)) + 'px)');
  84. column1top = column1top + $(this).outerHeight() + 12;
  85. $(this).children('.article_full_contents').children('.article_content').children('div').css('width', '');
  86. }
  87. else
  88. {
  89. $(this).css('left', 'calc(50% - ' + (0 + ($sideadwidth / 2)) + 'px)');
  90. $(this).css('top',column2top);
  91. $(this).css('width','calc(50% - ' + (35 + ($sideadwidth / 2)) + 'px)');
  92. column2top = column2top + $(this).outerHeight() + 12;
  93. $(this).children('.article_full_contents').children('.article_content').children('div').css('width', '');
  94. }
  95. $(this).css('position','absolute');
  96. });
  97. $('#no_more_div').css('top',Math.max(column1top,column2top));
  98. $('#no_more_div').css('position','absolute');
  99. $('#no_more_div').css('width','100%');
  100. $('#z_m_articlesheightsum').removeClass('running');
  101. }
  102. }
  103. }
  104. }