by yuta25
2014-06-13 [2014/06/13 09:33:28]
最新のノート (https://www.shortnote.jp/app/latest/) を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&height=60" data-ng-srcset="/data/users/' + note.user.avator.path + '?width=60&height=60?width=120&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&height=60" srcset="/data/users/' + note.user.avator.path + '?width=60&height=60?width=120&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;
})();