ShortNote autopagerize

by yuta25 2014-06-13 [2014/06/13 09:33:28]
(Forked from darekagakaku endless scroll by taizooo)

最新のノート (https://www.shortnote.jp/app/latest/) をautopagerize風

@@ -1,38 +1,25 @@
 /*
- * @title darekagakaku endless scroll
- * @description darekagakaku nikki wo random ni autopagerize
- * @include http://darekagakaku.herokuapp.com/*
- * @license MIT License
+ * @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
  */
 
-// http://darekagakaku.herokuapp.com/ wo endless summer-ize!!!
-// via http://userscripts.org/scripts/review/47998
-
-
-(function (Ap) {
-  Ap = {};
-  Ap.next = '';
-
+(function() {
+  var start_url = location.href;
   var State = true;
-  var HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
-  var BASE_REMAIN_HEIGHT = 50;
+  var BASE_REMAIN_HEIGHT = 400;
+  var BASE_URL = 'https://www.shortnote.jp/api/notes/list/';
   var loading = false;
 
-  var now = new Date();
-  var bottom = new Date("Feburary 17, 2012"); /* http://darekagakaku.herokuapp.com/v/2012-02-17 */
+  var start = Number(start_url.replace(BASE_URL, ''));
+  if (isNaN(start) || start == 0) start = 1;
+  var next = start + 1;
 
-  //var Ap.next = get_next(document);
-  var last_element = get_next_elements(document).pop();
-  //if (!Ap.next || !last_element) {
-  if (!last_element) {
-    return error();
-  }
-  insert_point = last_element.nextSibling;
-  insert_parent = last_element.parentNode;
-
-  next_page_load();
+  // next_page_load();
 
-  window.addEventListener('scroll', function () {
+  window.addEventListener('scroll', function() {
     if (loading) return;
     var remain = document.documentElement.scrollHeight - window.innerHeight - window.pageYOffset;
     if (State && remain < BASE_REMAIN_HEIGHT) {
@@ -42,101 +29,37 @@
 
   function next_page_load() {
     loading = true;
-    //Ap.next = next.getAttribute('href');
-    Ap.next = go();
-    history.pushState("", "",  Ap.next);
-    console.log(Ap.next);
-    var x = new XMLHttpRequest();
-    x.onload = function () {
-      if (x.status <= 200 && x.status < 300) {
-        load(x);
+    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++) {
+          var noteWrap = document.createElement('div');
+          noteWrap.innerHTML = createNoteHtml(notes[i]);
+          document.querySelector('#view section.ng-scope div.latest-list.note-list-table.list-group').appendChild(noteWrap.childNodes[0]);
+        }
+        loading = false;
       } else {
         error();
       }
     };
-    x.open('GET', Ap.next, true);
-    x.send(null);
-  }
-
-  function load(x) {
-    var html = x.responseText.replace(/<script(?:[ \t\r\n][^>]*)?>[\S\s]*?<\/script[ \t\r\n]*>|<\/?(?:i?frame|html|script|object)(?:[ \t\r\n][^<>]*)?>/gi, ' ');
-    var htmlDoc;
-    if (document.implementation.createHTMLDocument) {
-      htmlDoc = document.implementation.createHTMLDocument('hogehoge')
-    } else {
-      htmlDoc = document.cloneNode(false);
-      if (htmlDoc) {
-        htmlDoc.appendChild(htmlDoc.importNode(document.documentElement, false));
-      } else {
-        htmlDoc = document.implementation.createDocument(null, 'html', null);
-      }
-    }
-    var range = document.createRange();
-    range.selectNodeContents(document.documentElement);
-    htmlDoc.documentElement.appendChild(range.createContextualFragment(html));
-    //Ap.next = get_next(htmlDoc);
-    var docs = get_next_elements(htmlDoc);
-    if (!docs.length) {
-      return error();
-    }
-    docs = docs.map(function (doc) {
-      return insert_parent.insertBefore(document.importNode(doc, true), insert_point);
-    });
-    loading = false;
-    //  if (!next) {
-    //    return terminate();
-    //  }
-  }
-
-  //function get_next(doc) {
-  //  return doc.evaluate('id("next_page_link")', doc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
-  //}
-  function get_next_elements(doc) {
-    var r = doc.evaluate('//div[@class="content"]', doc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
-    for (var i = 0, l = r.snapshotLength, res = new Array(l); i < l; i++) res[i] = r.snapshotItem(i);
-    return res;
-  }
-
-  function error() {
-    return console.log('error');
-    State = false;
-  }
-
-  function terminate() {
-    return console.log('terminate');
-    State = false;
-  }
-
-  // via http://let.hatelabo.jp/taizooo/let/gYC-xcG60rLuBA
-  function trim(num, l) {
-    if (num < 0) {
-      num = -(num);
-    }
-    if (typeof (num) != 'string') {
-      num = '' + num;
-    }
-    var s = l - num.length;
-    while (s > 0) {
-      num = '0' + num;
-      --s;
-    }
-    return num;
+    xhr.open('GET', BASE_URL + next++, true);
+    xhr.send(null);
   }
 
-  function rday(max, min) {
-    max = max.getTime();
-    min = min.getTime();
-    rd = new Date(Math.floor(Math.random() * (max - min) + min));
-    d = trim(rd.getFullYear(), 4) + "-" + trim(rd.getMonth() + 1, 2) + "-" + trim(rd.getDate(), 2);
-    return d;
+  function error(msg) {
+    return console.log('error:' + msg);
   }
 
-  function go() {
-    url = "http://darekagakaku.herokuapp.com/v/" + rday(now, bottom);
-    if (Ap.next == url) {
-      url = "http://darekagakaku.herokuapp.com/a";
+  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 -->';
     }
-    return url;
+    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"></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;
+})();

• /*
   * @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(BASE_URL, ''));
    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++) {
            var noteWrap = document.createElement('div');
            noteWrap.innerHTML = createNoteHtml(notes[i]);
            document.querySelector('#view section.ng-scope div.latest-list.note-list-table.list-group').appendChild(noteWrap.childNodes[0]);
          }
          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"></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 LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。