[Deprecated] WorkFlowyでブラウザの横幅が足りない時に起こる問題を解決する

wf_browsing_width_fitter.js

$('<style type="text/css">').appendTo('head').get(0).sheet.insertRule('.selected>.name>#controls>#controlsLeft { left: 100px; top: 45px; }', 0);
$("#header").css("min-width", "0px");
$("#logo").hide();
$("#helpButton").hide();
$(".showCompletedButton").html($(".showCompletedButton").html().replace("Completed:","✓").replace("Hidden","😪").replace("Visible","😳")).css("width", "auto");

// 以下余白
// Complete:Visible/Hidden 自体が要らないのであれば、5行目を
// $(".showCompletedButton").hide();
// に差し替えると消えます。
// Complete:Visible/Hidden という従来の表示のままでいいよ！という方は、1-4行目のみお使いください。問題なく動きます。

!DEPRECATED!

見た目の調整はJavaScriptではなくCSSで直接やるべきだと気付いたので、書き直して以下のエントリに移転しました。
WorkFlowy - 幅800px未満のブラウザ対応用パッチCSS for Stylish

残った機能は「Completeの表示非表示切替ボタン：絵文字によるシンプルな表記に変更」という部分ですが、こちらも切り出しました。
WorkFlowyのCompletedボタンをシンプルにする

Stylishを使えないユーザーのために有用だと思うので、このエントリは残しておきます。

---

なにこれ

アウトラインプロセッサ WorkFlowyのヘッダから不要なボタンを削除するスクリプトです。
つまり、これが、

こうなります。

---

WorkFlowyをブラウザから使うことを前提としています。
ブラウザで使う理由は、彩郎さんのブログ「単純作業に愛をこめて」の記事参照。
「WorkFlowy専用Firefox」によって、パソコンからのWorkFlowyを、さらに強力なツールに育て上げる（Windows&Mac）

どういうこと

アドオン「Tile Tabs」で「WorkFlowy専用Firefox」を育てるを実践した時のように、充分なブラウザ幅が確保できない場合、いくつかの問題が起こります。

問題1: トップのトピックにマウスオーバーしたときに出てくるコンテキストメニューが見切れる

WorkFlowyは、ブラウザの横幅が800px以上あることが前提のレイアウトになっているようです。
そのため、ブラウザの横幅をそれ未満にした場合、トピックにマウスオーバーしたときに出てくるコンテキストメニューが画面外に見切れて、押せなくなります。
このスクリプトは、CSSルールを上書きすることで、この問題を解決します。

問題2: ヘッダの右側にあるコントロール（プルダウン、Saveボタン等）が見切れる

問題1と同様に、ブラウザの横幅を800px未満にした場合、ヘッダ右側にあるこれらのボタンが画面外に見切れて、押せなくなります。
このスクリプトは、デフォルトのヘッダ最低横幅を書き換えることで、この問題を解決します。

問題3: 使わないコントロールが陣取ってて邪魔

拙作Text counter for WorkFlowyは、ヘッダの余白にコントロールを追加することで機能を実現していますが、充分な横幅がないと、表示領域が確保できず、コントロールがヘッダ外に押し出されてしまいます。
同じような発想で別のコントロールをヘッダに追加したい場合にも、余白はあったほうが嬉しいでしょう。
そこで、このスクリプトは、

• WorkFlowyロゴ：非表示
• Helpボタン：非表示
• Completeの表示非表示切替ボタン：絵文字によるシンプルな表記に変更

というカスタマイズを行い、ヘッダを広く取ります。

FAQ

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

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

他、なにかあれば

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

修正 Revision4
CSSルールを追加して、トップのトピックのコンテキストメニューが見切れないようにしました。
（↑にも「問題1」として説明追加しました。）

CSSのほうが適切だと気付いたので、以下のエントリに内容を分割し、このエントリは非推奨とします。

WorkFlowy - 幅800px未満のブラウザ対応用パッチCSS for Stylish
WorkFlowyのCompletedボタンをシンプルにする