ShortNote autopagerize

  • /*
     * @title ShortNote autopagerize
     * @description 最新のノート (https://www.shortnote.jp/app/latest/) をautopagerize風
     * @include https://www.shortnote.jp/app/latest/*
     * @license reblog commons license ( cc by 3.0 )
     * @javascript_url
     */
    
    (function() {
      var start_url = location.href;
      var State = true;
      var BASE_REMAIN_HEIGHT = 400;
      var BASE_URL = 'https://www.shortnote.jp/api/notes/list/';
      var loading = false;
    
      var start = Number(start_url.replace('https://www.shortnote.jp/app/latest/', ''));
      if (isNaN(start) || start == 0) start = 1;
      var next = start + 1;
    
      // next_page_load();
    
      window.addEventListener('scroll', function() {
        if (loading) return;
        var remain = document.documentElement.scrollHeight - window.innerHeight - window.pageYOffset;
        if (State && remain < BASE_REMAIN_HEIGHT) {
          next_page_load();
        }
      }, false);
    
      function next_page_load() {
        loading = true;
        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
          if (xhr.status <= 200 && xhr.status < 300) {
            var data = JSON.parse(xhr.responseText);
            var notes = data.notes;
            for (var i = 0,length = notes.length; i < length; i++) {
              document.querySelector('#view section.ng-scope div.latest-list.note-list-table.list-group').innerHTML += createNoteHtml(notes[i]);
            }
            loading = false;
          } else {
            error();
          }
        };
        xhr.open('GET', BASE_URL + next++, true);
        xhr.send(null);
      }
    
      function error(msg) {
        return console.log('error:' + msg);
      }
    
      function createNoteHtml(note) {
        var str = '<div data-ng-repeat="note in recents" class="latest__item note__item list-group-item ng-class:{visited:note.visited} ng-scope"><!-- ngIf: note.ads --> <!-- ngIf: !note.ads --><span class="item-content ng-scope" data-ng-if="!note.ads" id="note-index-0"><span class="note-content-container"><span class="note-name-container"><span class="user-avator-container ng-isolate-scope" avator="note.user.avator" size="xs"><span class="user__avator"><span class="user__avator-inner ng-class:{\'avator-xxs\':avatorSize.xxs, \'avator-xs\':avatorSize.xs,\'avator-s\':avatorSize.s,\'avator-m\':avatorSize.m,\'avator-l\':avatorSize.l,\'avator-xl\':avatorSize.xl,\'avator-xxl\':avatorSize.xxl} avator-xs"><!-- ngIf: avatorImage -->';
        if (typeof note.user.avator !== 'undefined' && note.user.avator) {
          str += '<img data-ng-src="/data/users/' + note.user.avator.path + '?width=60&amp;height=60" data-ng-srcset="/data/users/' + note.user.avator.path + '?width=60&amp;height=60?width=120&amp;height=120 2x" width="" height="30" style="width:30px; height: 30px; margin-top:0px;margin-left:0px;" data-ng-if="avatorImage" class="ng-scope" src="/data/users/' + note.user.avator.path + '?width=60&amp;height=60" srcset="/data/users/' + note.user.avator.path + '?width=60&amp;height=60?width=120&amp;height=120 2x"><!-- end ngIf: avatorImage -->';
        }
        str += '<!-- ngIf: !avatorImage --></span></span></span><span class="note__name ng-binding" data-ng-bind="note.user.displayName">' + note.user.name + '</span> <span class="note__date"><a data-ng-href="https://www.shortnote.jp' + note.path +'" href="https://www.shortnote.jp' + note.path + '"><span class="note__modified ng-binding" data-ng-bind="note.modifiedStr">permalink</span></a> <!-- ngIf: note.pageviews --></span></span> <span class="note__excerpt note__content"><span class="note__excerpt-inner"><span data-ng-bind="note.title" class="excerpt__title ng-binding">' + note.title + '</span><span class="excerpt__excerpt ng-binding" data-ng-bind-html="note.summary"><div class="ng-scope">' + note.content + '<!-- ngIf: note.readmore --> <!-- ngIf: !note.readmore --><span class="note-item-footer ng-scope" data-ng-if="!note.readmore"><span class="footer-links"><span><div class="ng-class:{\'heart-small\':small} ng-isolate-scope heart-small" data-ng-init="init()" note="note" small="\'true\'" no-fetch="\'true\'" auto-load="\'true\'"><!-- ngIf: hasAccount --><div data-ng-if="hasAccount" class="ng-scope"><!-- ngIf: multiUser --><!-- ngIf: onlyOneUser --><div data-ng-if="onlyOneUser" class="ng-scope"><a class="btn btn-heart" data-ng-click="directHeart()"><span class="icon-heart"></span><!-- ngIf: !removeHeart --><span class="heart-label ng-scope" translate="(Heart)" data-ng-if="!removeHeart">(ハート)</span><!-- end ngIf: !removeHeart --><!-- ngIf: removeHeart --></a><!-- ngIf: heartCountExists --></div><!-- end ngIf: onlyOneUser --><!-- ngIf: noUser --></div><!-- end ngIf: hasAccount --><!-- ngIf: !hasAccount --><!-- ngIf: hearts.length --></div></span> <span data-ng-hide="note.commentIsUnavailable" class=""><a data-ng-href="https://www.shortnote.jp' + note.path + '#comments" href="https://www.shortnote.jp' + note.path + '#comments"><span class="icon-leaf"></span> <span translate="Comments" class="ng-scope">励ましのお便り</span></a></span> <span><a data-ng-href="https://www.shortnote.jp' + note.path + '#share" href="https://www.shortnote.jp' + note.path + '#share"><span class="icon-arrow-up-right"></span> <span translate="Share" class="ng-scope">シェア</span></a></span></span> <span class="footer-counts"><!-- ngIf: note.heartCount --> <!-- ngIf: note.commentCount --><span class="note__comments ng-scope" data-ng-if="note.commentCount" data-ng-hide="note.commentIsUnavailable"><span class="note__comments-inner"><span class="icon-leaf"></span> <span data-ng-bind="note.commentCount" class="ng-binding"></span></span></span><!-- end ngIf: note.commentCount --></span></span><!-- end ngIf: !note.readmore --></span></span><!-- end ngIf: !note.ads --></div>';
        return str;
      }
    
      return true;
    })();
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2014/06/13 09:33:28 - 2014-06-13
  2. 2014/06/12 16:19:36 - 2014-06-12
  3. 2014/06/09 17:24:56 - 2014-06-09
  4. 2014/06/09 16:05:40 - 2014-06-09
  5. 2014/06/09 14:58:13 - 2014-06-09
  6. 2014/06/09 14:56:56 - 2014-06-09