JavaScript
ブックマークレット
mastodon

Mastodon(マストドン)のカラム幅を調整可能にするブックマークレット

More than 1 year has passed since last update.


Mastodon?

Twitterライクな新しいSNSとして Mastodon(マストドン) が一部で話題になっています。

これのJP鯖 https://mstdn.jp/ が立っていたのをtwitterで見つけたので,好奇心からアカウントを作りローカルタイムラインを眺めていたら数時間が一瞬で溶けてしまいました。

このローカルタイムラインはサーバに登録している人全員を対象としたPublicなタイムラインで,とても流速がはやく,眺めていて楽しいです。

今はまだどういった使い方をすべきか皆試行錯誤中という雰囲気を感じますが,Twitter黎明期のネタを持ち込む人がとても多く,(今だけだとおもいますが)快適なインターネット老人会が楽しめます。

これをもう少し快適に閲覧したいと思い,表題の通りのブックマークレットを作成しました。


ブックマークレット


  • 2017/04/13現在 の実装

  • jQueryを使って各カラムの右端をドラッガブルにしました

  • Cookieで横幅を記憶しているので,次回実行したときには前回の幅が復帰します。

  • Cookie操作面倒なので,CookieのプラグインをCDNから落として来てそれを利用しています。

目新しい事はやっていません。Chromeで確認済みです。コピって使ってください。

javascript: (function(){ function makeResizable(targetClass){ var draggableState = 'col-resize'; var unDraggableState = 'default'; var isDragging = false; $(window).mousemove(function(e){ if (isDragging) { var width = e.clientX - parseInt ($('.' + targetClass).offset().left); $('.' + targetClass).css ({ width: width + 'px' }); return false; } return false; }); $('.' + targetClass).mousemove (function (e) { var right = parseInt ($(this).offset().left) + parseInt($(this).css("width")); if ((right - 10) < e.clientX) { $(this).css ({ cursor: draggableState }); return false; } $(this).css ({ cursor: unDraggableState }); return true; }); $('.' + targetClass).mousedown (function (e) { if ($(this).css('cursor') == draggableState) { $('html').css ({ cursor: draggableState }); isDragging = true; return false; } return true; }); $(window).mouseup (function (e) { var width = $('.' + targetClass).css('width'); $.cookie(targetClass, width); isDragging = false; $('html').css ({ cursor: unDraggableState }); }); } (function(callback) { var scr = document.createElement("script"); scr.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"; scr.onload = callback; document.body.appendChild(scr); })(function() { $('.column').each(function(i){ var targetClassName = 'column-' + i; $(this).addClass(targetClassName); makeResizable(targetClassName); var savedWidth = $.cookie(targetClassName); if (savedWidth) { $('.' + targetClassName).css({ width: savedWidth }); } }); }); })();

見やすくした版

javascript: (function(){

function makeResizable(targetClass){
var draggableState = 'col-resize';
var unDraggableState = 'default';

var isDragging = false;

$(window).mousemove(function(e){
if (isDragging) {
var width = e.clientX - parseInt ($('.' + targetClass).offset().left);
$('.' + targetClass).css ({ width: width + 'px' });

return false;
}
return false;
});

$('.' + targetClass).mousemove (function (e) {
var right = parseInt ($(this).offset().left) + parseInt($(this).css("width"));
if ((right - 10) < e.clientX) {
$(this).css ({ cursor: draggableState });

return false;
}
$(this).css ({ cursor: unDraggableState });
return true;
});

$('.' + targetClass).mousedown (function (e) {
if ($(this).css('cursor') == draggableState) {
$('html').css ({ cursor: draggableState });
isDragging = true;

return false;
}
return true;
});

$(window).mouseup (function (e) {
var width = $('.' + targetClass).css('width');
$.cookie(targetClass, width);

isDragging = false;
$('html').css ({ cursor: unDraggableState });
});
}

(function(callback) {
var scr = document.createElement("script");
scr.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js";
scr.onload = callback;
document.body.appendChild(scr);
})(function() {
$('.column').each(function(i){
var targetClassName = 'column-' + i;

$(this).addClass(targetClassName);
makeResizable(targetClassName);

var savedWidth = $.cookie(targetClassName);
if (savedWidth) {
$('.' + targetClassName).css({ width: savedWidth });
}
});
});
})();

本家にコミットしろって感じなのですが,対症療法的にすぐ使いたかったのでやりました。

マストドン流行ってほしい。


参考

http://qiita.com/nasum/items/8d3ddaf8c9ff4d2a470e