display all bookmarks including no-comment @ Hatena::Bookmark

    @@ -1,249 +1,44 @@ /* - * @title display all bookmarks including no-comment @ Hatena::Bookmark - * @description コメントがないブックマークも全て表示する - * @include http://b.hatena.ne.jp/entry/* + * @question:1521455576 + * @description question:1521455576 * @license MIT http://opensource.org/licenses/MIT * @javascript_url */ -/* - Changelog - - 記事につけられたスターを表示してみる - - ブックマークした時刻も表示 - - ツイートのクリック数を表示 -*/ -/* - test case - http://b.hatena.ne.jp/entry/s/www.slideshare.net/enakai/it-51854916 - コメントなしブックマークが多い - http://b.hatena.ne.jp/entry/s/kazayo.com/gozaisho-sounan/ - コメントありブックマークが多い - http://b.hatena.ne.jp/entry/kazayo.com/gozaisho-sounan/ - コメントありの最初のブックマークよりも前に、コメントなしのブックマークがある - http://b.hatena.ne.jp/entry/ift.tt/2wV68BP - コメントありのブックマークがない -*/ -(() => { - const d_ = document; - const entry_url = encodeURIComponent(d_.documentElement.dataset['entryUrl']); - let bookmark_container; - const bookmark_template = d_.getElementById("autoloader-bookmark-item").innerHTML.replace(/^\s+/, ""); - const _2d = n => (n < 10 ? "0" : "") + n; - const date_string = (d, sep) => [ - d.getFullYear(), - _2d(d.getMonth() + 1), - _2d(d.getDate()) - ].join(sep || ""); - const datetime_string = d => [ - d.getFullYear(), - _2d(d.getMonth() + 1), - _2d(d.getDate()), - ].join("/") + " " + [ - _2d(d.getHours()), - _2d(d.getMinutes()), - _2d(d.getSeconds()), - ].join(":"); - - - // init - (() => { - // inactivate auto loader - let readmore = d_.querySelector(".js-read-more-button"); - if (readmore) { - /* - https://cdn-ak.b.st-hatena.com/js/v4/bookmark.js - BookmarkAutoLoaderView#getLabelHeight - - 要素を見えなくしちゃうと、getBoundingClientRect は、top = 0 を返すので、 - メソッドを乗っ取る - */ - readmore.getBoundingClientRect = () => { - return {top: 1000000}; - }; - } - - d_.head.appendChild(Object.assign(d_.createElement("style"), { - innerHTML: ' \ - .hatena-star-comment-button { \ - display: initial !important; \ - margin-right: 8px !important; \ - } \ - .js-bookmarks-sort-tab[data-sort="recent"] > img { \ - width: 12px; \ - margin: 0 0.5ex; \ - } \ - .entry-comment-readmore { \ - display: none; \ - } \ - .entry-info-meta { \ - display: initial; /* flex */ \ - } \ - .twitter-clicks { \ - color: gray; \ - margin-left: 1em; \ - } \ - ', - })); - - // add tab - let comment_tabs = d_.querySelector("ul.entry-comment-tab"); - let tab = comment_tabs.appendChild(Object.assign(d_.createElement("li"), { - className: "js-bookmarks-sort-tab", - innerHTML: "全てのブックマーク", - })); - tab.dataset["sort"] = "all"; - - // add panel - let sort_panel = d_.querySelector("div.js-bookmarks-sort-panels"); - bookmark_container = sort_panel.appendChild(Object.assign(d_.createElement("div"), { - className: "bookmarks-sort-panel js-bookmarks-sort-panel", - innerHTML: '<div class="js-bookmarks js-bookmarks-all"></div>', - })); - bookmark_container.dataset["sort"] = "all"; - bookmark_container = bookmark_container.firstChild; - - tab.click(); - - // entry url star - d_.querySelector(".js-entry-info").appendChild(Object.assign(d_.createElement("span"), { - id: "entry_star_count", - })); - })(); - - function append_bookmark(b, bookmark_container) { - /* - #enable_button ~ /enable_button -- not implement - #is_public ~ /is_public -- not implement - #should_nofollow ~ /should_nofollow -- not implement - anchor_path - comment_expanded - comment_page_path - created - profile_image_url - tags - user_name - user_page_path - */ - let created = new Date(b.created); - let date = datetime_string(created); - let date2 = date_string(created); - let legacyTagLinks = b.tags.map(tag => { - return '<li><a href="/' + b.user.name + '/' + encodeURIComponent(tag) + '/">' + tag + '</a></li>'; - }).join(""); - let keyword_map = { - anchor_path : '/' + b.user.name + '/' + date2 + '#bookmark-' + b.location_id, - comment_expanded : b.comment_expanded, - comment_page_path : "/entry/" + b.location_id + "/comment/" + b.user.name, - created : date, - profile_image_url : b.user.image.image_url, - tags : legacyTagLinks, - user_name : b.user.name, - user_page_path : "/" + b.user.name, - }; - let x = d_.createElement("div"); - x.innerHTML = bookmark_template.replace(/[{]{2,3}\s*([^}\s]+)\s*[}]{2,3}/g, (m, p) => { - return keyword_map[p] || ""; - }); - // remove comment permalink with no comment - if (b.comment == "") { - let comment_permalink = x.querySelector(".entry-comment-permalink"); - comment_permalink.parentNode.removeChild(comment_permalink); - } - - return bookmark_container.appendChild(x.firstChild); - } - - const xhr = new XMLHttpRequest(); - let bookmarks = []; - xhr.onload = (ev) => { - if (ev.target.status < 400) { - const resp = ev.target.response; - /* - https://cdn-ak.b.st-hatena.com/js/v4/bookmark.star.js - EntryStarView.prototype.observeBookmarkListChange - - はてなスターは MutationObserver が作ってくれるのだけれど、 - Hatena.Star.EntryLoader は、static な領域を使って処理をするので、 - load するたびにブックマークを追加すると、最後のブロックしか - スターが展開されない。 - */ - bookmarks = bookmarks.concat(resp.bookmarks); - if (resp.cursor) { - load_bookmark(resp.cursor); - } else { - let comment_tags_map = {}; - bookmarks.forEach(b => { - let e = append_bookmark(b, bookmark_container); - comment_tags_map[ b.user.name ] = e.querySelector(".entry-comment-tags"); - }); - - // hatena star - Hatena.Star.SiteConfig = { - entryNodes: { - "div.entry-info": { - uri: "h1.entry-info-title a", - title: "h1.entry-info-title a", - container: "#entry_star_count", - }, - "div.js-bookmarks-all div.js-bookmark-item": { - uri: "a.js-bookmark-anchor-path", - title: "span.js-bookmark-comment", - container: "span.js-add-star-container" - } - } - }; - new Hatena.Star.EntryLoader(); - - // Tweet clicks - function insert_clicks(n, e) { - let x = e.parentNode.insertBefore(Object.assign(d_.createElement("span"), { - innerHTML: n + " clicks", - className: "twitter-clicks", - }), e.nextSibling); - x.dataset["clicks"] = n; - return x; - } - const xhr2 = new XMLHttpRequest(); - const url = "http://b.hatena.ne.jp/api/shorturl.clicks"; - let clicks_list = []; - xhr2.onload = (ev) => { - if (ev.target.status < 400) { - let data = ev.target.response; - data.entries[0].clicks.forEach(e => { - if (e.count > 0) { - clicks_list.push(insert_clicks(e.count, comment_tags_map[ e.user ])); - } - }); - insert_clicks(clicks_list.reduce((sum, item) => { - return sum + parseInt(item.dataset["clicks"], 10); - }, 0 - ), d_.getElementById("entry_star_count")); - console.log(clicks_list.length + " clicks !!!"); - } - }; - xhr2.responseType = "json"; - xhr2.open("POST", url, true); - xhr2.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); - xhr2.send( - "entry=" + d_.documentElement.dataset['entryEid'] + "," + - bookmarks.map(b => b.user.name).join("|") - ); - - } - } - }; - xhr.responseType = "json"; - function load_bookmark(cursor) { - let url = [ - "http://b.hatena.ne.jp/api/entry/", - entry_url, - "/bookmarks?cursor=" + cursor, - "&limit=500&commented_only=0" - ].join(""); - xhr.open("GET", url, true); - xhr.send(null); - } - - load_bookmark(""); +(function() { + const d_ = document; + Array.prototype.forEach.call(d_.body.querySelectorAll("script,style,noscript"), function(e) { + e.parentNode.removeChild(e); + }); + + const text = d_.body.textContent.replace(/\s+/g, ""); + const count = text.length; + const title = d_.title; + const hx_list = d_.querySelectorAll("h1,h2,h3,h4,h5,h6"); + + const panel = d_.body.appendChild(d_.createElement("textarea")); + panel.style.position = "fixed"; + panel.style.backgroundColor = "white"; + panel.style.border = "1px solid black"; + panel.style.padding = "1ex"; + panel.style.top = "0"; + panel.style.width = "80ex"; + panel.style.height = "20em"; + function indent(tag) { + let n = parseInt(tag.replace(/^H/, "")) - 1; + let pad = ""; + for (let i = 0 ; i < n ; ++i) { + pad += "\t"; + } + return pad; + } + panel.value = [ + "【文字数】", + count, + "\n【title】", + title, + "\n【hタグ】", + Array.prototype.map.call(hx_list, function(h) {return indent(h.tagName) + h.tagName + ":" + h.textContent;}).join("\n"), + ].join("\n"); })();
  • /*
     * @question:1521455576
     * @description question:1521455576
     * @license MIT http://opensource.org/licenses/MIT
     * @javascript_url
     */
    (function() {
    	const d_ = document;
    
    	Array.prototype.forEach.call(d_.body.querySelectorAll("script,style,noscript"), function(e) {
    		e.parentNode.removeChild(e);
    	});
    
    	const text = d_.body.textContent.replace(/\s+/g, "");
    	const count = text.length;
    	const title = d_.title;
    	const hx_list = d_.querySelectorAll("h1,h2,h3,h4,h5,h6");
    
    	const panel = d_.body.appendChild(d_.createElement("textarea"));
    	panel.style.position = "fixed";
    	panel.style.backgroundColor = "white";
    	panel.style.border = "1px solid black";
    	panel.style.padding = "1ex";
    	panel.style.top = "0";
    	panel.style.width = "80ex";
    	panel.style.height = "20em";
    	function indent(tag) {
    		let n = parseInt(tag.replace(/^H/, "")) - 1;
    		let pad = "";
    		for (let i = 0 ; i < n ; ++i) {
    			pad += "\t";
    		}
    		return pad;
    	}
    	panel.value = [
    		"【文字数】",
    		count,
    		"\n【title】",
    		title,
    		"\n【hタグ】",
    		Array.prototype.map.call(hx_list, function(h) {return indent(h.tagName) + h.tagName + ":" + h.textContent;}).join("\n"),
    	].join("\n");
    })();
    
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2018/03/23 08:30:53 - 2018-03-23
  2. 2018/03/19 23:37:26 - 2018-03-19
  3. 2018/03/19 23:37:06 - 2018-03-19
  4. 2017/09/11 16:49:36 - 2017-09-11
  5. 2017/09/09 01:57:19 - 2017-09-09
  6. 2017/09/08 23:25:01 - 2017-09-08
  7. 2017/09/08 13:35:17 - 2017-09-08