Skip to content

Instantly share code, notes, and snippets.

@takasek takasek/wf_text_counter.js
Last active Aug 29, 2015

Embed
What would you like to do?
Text counter for WorkFlowy
(function() {
var g = window.textCounter_g;
if (g) {
$("#textCountDart, #textCounter").remove();
clearInterval(g.textCounting);
window.textCounter_g = null;
return;
}
g = window.textCounter_g = {};
var countText = function() {
if (!g.$textCountee) return;
var text = g.$textCountee.find(".name>.content").text();
$("#textCounter").html(text.substring(0,10)+(text.length>10?"":"") + " : " + text.length);
};
var styles = {
"font-size" : "13px",
color : $("#helpButton").css("color"),
"background-image" : $("#header").css("background-image"),
"background-color" : $("#header").css("background-color"),
float : "right"
};
styles["padding"] = "8px 20px 8px 0px";
$('<div id="textCounter">←Click to count!</div>').css(styles).appendTo($("#header"));
styles["padding"] = "8px 0px 8px 10px";
$('<div id="textCountDart">🎯</div>').css(styles).click(function(){
var $content = $(getSelection().focusNode.parentNode);
if (!$content) return;
g.$textCountee = $content.parents().filter(".project").first();
countText();
}).appendTo($("#header"));
g.textCounting = setInterval(countText,1000);
})();
@takasek

This comment has been minimized.

Copy link
Owner Author

commented Aug 13, 2015

なにこれ

アウトラインプロセッサ WorkFlowyに文字カウント機能を追加するJavaScriptです。
WorkFlowyをブラウザから使うことを前提としています。
ブラウザで使う理由は、彩郎さんのブログ「単純作業に愛をこめて」の記事参照。
「WorkFlowy専用Firefox」によって、パソコンからのWorkFlowyを、さらに強力なツールに育て上げる(Windows&Mac)

どう使うの

実行すると、

2015-08-13 14 17 46

こんな項目がヘッダに追加されます。
カウント対象にしたいトピックにカーソルがある状態で 🎯 をクリックすると、

2015-08-13 14 18 34

そのトピックが対象として指定され、文字数カウントが表示されます。
紐付く子トピックも一緒にカウント対象になります。
noteはカウント対象外です。

カウンタの更新は、ほぼリアルタイムです。1秒ごとに更新されます。
(文章が更新されたイベントに追随できればもっと素早くなってベターなんですが、イベントの取り方がよくわかんなかったので…)

カウント対象は、🎯 のクリックで任意のトピックに変更可能です。

FAQ

ブックマークレットにしたいんだけど

http://www.eonet.ne.jp/~wdf/software/bookmarklet_creator.html
などのサイトで上のコードを入れればブックマークレット化できます。

マロ。さんも文字数カウンタ開発されてるけど、どう違うの?

WorkFlowyの文字数カウントブックマークレット|マロ。|note

※彩郎さんによる、キャプチャつきの詳しい紹介
WorkFlowyの文字数を数えるブックマークレット「WorkFlowy_WordCount」

設計思想が違うので、お好みのほうを、あるいは共存してもお使いいただけるかと思います。

  • takasek版:
    • カウントするトピックを柔軟に指定したい!
    • 表示領域はヘッダに収まる範囲がいい!
  • マロ。さん版
    • フォーカスしているトピックの第1階層をセクションと捉え、セクションごとにカウントを一覧したい!

なんか重い…

スクリプト実行後、もう一度スクリプトを実行すると、カウンタが消えます。
カウント処理は毎秒走ってるので、パフォーマンスが気になるなら、使わなくていいトピック内では消したほうが良いかもしれませんね。

あるいは、コード内の setInterval(countText,1000) の数字をもっと大きい数にすれば、負荷は軽くなります。ミリ秒指定です。

他、なにかあれば

https://twitter.com/takasek まで。

@takasek

This comment has been minimized.

Copy link
Owner Author

commented Aug 13, 2015

更新しました。Revision:5。

  • ヘッダに充分な横幅がない場合、カウンタが折り返されてしまう。その際に文字色が背景に溶け込まないよう、背景色を設定。
  • カウント対象からnoteを除外。
    • note内もカウントしたい人は、3行目のfind()内を ".name>.content"から ".content"にすればOKです。
@takasek

This comment has been minimized.

Copy link
Owner Author

commented Aug 13, 2015

更新しました。Revision:7。

  • スクリプトを再度実行するとカウンタが消えるようにしました。
  • カウントの間隔を2秒→1秒にしました。
@takasek

This comment has been minimized.

Copy link
Owner Author

commented Aug 13, 2015

Revision:9。
コメントで紹介したブックマークレット作成サービスを使ってブックマークレット化するとうまく動かなくなっていたので、修正しました。

@takasek

This comment has been minimized.

Copy link
Owner Author

commented Aug 13, 2015

更新しました。Revision:10。
カウンタ表示領域の背景色・文字色が決め打ちになっていたので、テーマによっては見た目がおかしくなることがあった。この問題を解決。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.