foo
footloose
npm i footloose
foo

footloose

The dual-pane visual file manager made by React.

by Shinji Takano

0.0.5 (see all)License:MITTypeScript:Built-In
npm i footloose
Readme

Japanese follows English. 日本語は英語の後にあります。

👟 Footloose

Footloose is the dual-pane visual file manager made by React and works on web browsers.

It's made with server and client architecture. Web and Socket servers will start up when the application runs. Web browsers are used as clients.

Footloose is made for keyboard users. It's possible to use a mouse but almost all features aren't available.

👟👟👟👟👟👟

screencast

Usage

$ npx footloose -p 3500

Access http://localhost:3500 by your browser then Footloose will be shown.

optiondescription
pPort number
mWhether to let Footloose get MIME types of binary files or not. It may slow the application depending on sizes of files in the directory. You don't need this option if MIME types aren't necessary.
cUser configuration (mentioned later)

Layout

Footloose consists of 3 frames and 2 modes.

layout

Normal mode

normal mode

gallery mode

System requirements

Currently, I check this application only on MacOS. I don't have Windows and Linux workstations so I'm not sure that Footloose will work or not on these systems. The default configuration is written assuming MacOS.

Footloose is beta version so there are some bugs maybe. Please enjoy at your own risk.

Node.js is required version 14.14.0 or later.

Keyboard Shortcuts

Footloose uses Mousetrap for managing keyboard shortcuts. Almost same rules of Mousetrap are available. It's possible to write multiple keys with , so you need to write comma if you want to express comma it self.

Keyboard shortcuts are separated by contexts. The defaults are below.

Application

key(s)description
tab, shift+tabDisabled
~Move focus among frames

Dialog (alert, prompt, confirm)

key(s)description
tab, shift+tabMove focus among elements
enterProcess
escapeCancel

Dialog (item selector. history and bookmark)

key(s)description
tab, shift+tabMove focus among areas
enterProcess
escapeCancel
up, downMove focus among items
backspace, deleteDelete a item

Directory frame

key(s)description
Number, Lowercase letters, _ - .Direct select by first letter
tab, shift+tabMove focus to a filter input
enterProcess current row
backspace, deleteMove to the parent directory
pageup, pagedownpage scoll
home, endMove cursor to top or bottom
up, downMove cursor
left, rightMove focus among directory frames (In Gallery mode, move cursor)
shift+left, shift+rightMove focus among directory frames
meta+left, meta+rightHistory back or forward
spaceSelect current row
shift+aSelect all rows
shift+ctrl+aDeselect all rows
shift+ctrl+meta+aInvert selections of all rows
shift+cCopy item(s) to the target frame
shift+mMove item(s) to the target frame
shift+zZip item(s) and save it to the target frame
shift+ctrl+zUnarchive to the target frame
shift+dDelete
shift+kMake a directory
shift+tMake a file
shift+rRename
f5Refresh
plusCopy paths of active items(s) to clipboard
_Copy a path of current directory to clipboard
shift+iWrite logs about information of current directory and active item(s)
escapeClear filter input text
shift+hShow history dialog
shift+bShow bookmark dialog
shift+ctrl+bBookmark current directory
shift+jChange directory
shift+pMake self path the same as target frame
shift+ctrl+pMake target path the same as self frame
shift+ctrl+meta+pExchange paths between frames
shift+oOpen the active item
shift+ctrl+oReveal the active item in finder
!Change position of ellipsis of long item name
shift+gSwitch to Gallery mode

Filter input

key(s)description
tab, shift+tabMove focus
escape, enterClear input
up, downMove cursor

Log frame

nothing

Task manager frame

key(s)description
tab, shift+tabMove focus

User configuration

By default, it's not possible to change design, keyboard shortcuts or something. It will be available to specify user configuration directory when start the application.

$ npx footloose -p 3500 -c /path/to/your-config-dir

The default configuration

It's very useful to clone the default configuration because it's written by TypeScript. Edit and compile it so dist directory will be published. Specify this directory to -c option. This directory is public on Footloose web server so you can access this by web browsers.

https://github.com/takanopontaro/footloose-config

There are 3 main files.

index.html

HTML of Footloose. It's not necessary to edit this file but you can edit it if you want to do.

theme.scss

Style file of Footloose. To change design of Footloose, edit this. Available SCSS.

bootstrap.js

Bootstrap of Footloose. Functions for application settings and key maps must be default exported. Note that key maps function will be executed multiple times so you have to keep idempotent.

functiondescription
getSettingsFor settings of each frames
getKeyMapsFor key maps. Executed multiple times.

getSettings is separated by contexts below.

Application

propertydescription
persistentSettingsWhether to save current directories, sorts or something to localStorage

Directory frame

propertydescription
selectedRowsOnlyWhen you try to action like copy or move, selected rows are targeted. If none of selected rows, current row is used. Set this option true if you prefer selected rows only.
openPathAppsConfiguration for opening file. For details to here.
sortsDefault sorts
filterDefault filter input text (RegExp)
pathDefault directory
previewMakerRender function for Gallery mode

Log frame

propertydescription
filterFilter function that accepts log data as only parameter. Return true to show, false to hide.

Task manager frame

propertydescription
filterFilter function that accepts task data as only parameter.

Licence

MIT © takanopontaro

👟👟👟👟👟👟

👟 Footloose

Footloose は React で作られたブラウザーベースの二画面ファイラーです。ファイラーとは、コピーや移動、リネームなど一連のファイル操作を行うソフトウェアのことで、いわゆるファイルマネージャー、Mac で言うところの Finder、Windows での Explorer にあたります。

二画面ファイラーは左右二画面を同時表示してファイル操作するという特徴があり、使い方によっては業務効率をかなり上げることができます。

Footloose はクライアント&サーバーのアーキテクチャで作られており、起動すると Web + Socket サーバーが立ち上がり、クライアントソフトウェアとしてブラウザーを使用します。キーボードによる操作を前提としており、マウスでは主要な機能はほとんど使えません。

👟👟👟👟👟👟

screencast

関連パッケージ

使い方

$ npx footloose -p 3500

ブラウザーで http://localhost:3500 にアクセスすると Footloose が表示されます。

オプション説明
pポート番号
mバイナリファイルのMIMEタイプを取得するか否か。ディレクトリー内の各ファイルのサイズによっては表示が重くなります。MIMEタイプが不要なら指定しないでOKです。
cユーザーコンフィグ(後述)

レイアウト

Footloose は以下のように、ディレクトリー、ログ、タスクマネージャーの 3 つのフレームで構成されており、基本的にはディレクトリーフレームを使用します。ファイル操作やコマンドの実行結果がログフレームに出力され、タスクマネージャーには現在実行中のコマンドが表示されます。コマンド実行結果の確認や中止もここから可能です。デフォルトでは全コマンドが表示されますが、フィルタをかけることもできます。

レイアウト

通常モード

通常モード

ギャラリーモード

ギャラリーモード

動作環境

Mac でのみ確認しています。Windows, Linux は環境が無いため未確認です。デフォルトの設定が Mac を想定したものになっているため、上手く動かない可能性が高いです。Windows には あふ という非常に素晴らしい二画面ファイラーがあり、Footloose も多大な影響を受けています。Windows の方は あふ の使用をオススメします。

現在ベータ版のため、細かい不具合がある可能性があります。特にデザインは素人のためかなりイケてません 💩 が、後述するように見た目は自分で変更可能です。

必要な Node.js のバージョンは 14.14.0 以上です。

キーボードショートカット

Footloose はキーボードショートカットの管理に Mousetrap を使用しています。Mousetrap とほぼ同じルールでショートカットの設定ができ、キーボードから Footloose の多彩なコマンドを呼び出すことでアプリケーションの操作を行っています。カンマ区切りで複数のキーを一度に登録できるため、カンマ自体を表現したいときは文字列としての comma を使用します。

ショートカットはコンテキストごとに分けられており、デフォルトで以下が設定されています。

アプリケーション

キー説明
tab, shift+tab無効
~フレーム間のフォーカス移動

ダイアログ(alert, prompt, confirm など)

キー説明
tab, shift+tabフォーム要素間のフォーカス移動
enter決定
escapeキャンセル

ダイアログ(item selector。履歴やブックマークなど)

キー説明
tab, shift+tabエリア間のフォーカス移動
enter決定
escapeキャンセル
up, down候補間のフォーカス移動
backspace, delete候補の削除

ディレクトリーフレーム

キー説明
数字, 英小文字, _ - .1 文字目によるダイレクト選択
tab, shift+tab絞り込み入力欄へのフォーカス移動
enterカレント行の実行
backspace, delete親ディレクトリーへの移動
pageup, pagedownページング
home, end先頭末尾へのカレント行の移動
up, downカレント行の移動
left, right窓間のフォーカス移動。※ギャラリー時はカーソル移動
shift+left, shift+right窓間のフォーカス移動
meta+left, meta+right履歴の行き来
spaceカレント行の選択
shift+a全行選択
shift+ctrl+a全行非選択
shift+ctrl+meta+a選択状態の反転
shift+c相手窓へコピー
shift+m相手窓へ移動
shift+zzip して相手窓へ保存
shift+ctrl+zzip ファイルを相手窓へ解凍
shift+d削除
shift+kディレクトリーの作成
shift+tファイルの作成
shift+rリネーム
f5再読み込み
plusアクティブアイテムのパスをクリップボードにコピー
_カレントディレクトリーをクリップボードにコピー
shift+iカレントディレクトリーやアクティブアイテムをログフレームに出力
escape絞り込み入力欄のクリア
shift+h履歴の表示
shift+bブックマークの表示
shift+ctrl+bカレントディレクトリーをブックマーク
shift+jディレクトリーの変更
shift+p自窓を相手窓と同じディレクトリーにする
shift+ctrl+p相手窓を自窓と同じディレクトリーにする
shift+ctrl+meta+p両窓のディレクトリーを入れ替える
shift+oアクティブアイテムを開く
shift+ctrl+oアクティブアイテムを Finder で開く
!長いアイテム名の省略位置を変える
shift+gギャラリーモードへの切り替え

絞り込み入力欄

キー説明
tab, shift+tabフォーカスの移動
escape, enter入力欄のクリア
up, downカレント行の移動

ログフレーム

なし

タスクマネージャーフレーム

キー説明
tab, shift+tabフォーカスの移動

イジェクト

デフォルトでは、見た目はおろかショートカットすら変更できませんが、イジェクトという機能を使うとそれが可能になります。…と言ってもそういうコマンドがあるわけではなく 💩 、単に Footloose を立ち上げる時に設定ファイルのあるディレクトリーを指定するだけです。

$ npx footloose -p 3500 -c /path/to/your-config-dir

デフォルトのコンフィグ

デフォルトのコンフィグをクローンすると、TypeScript なので型が付いていてとても便利です。編集&コンパイルすると dist ディレクトリーができますので、ここを -c オプションで指定するのが一番手っ取り早いでしょう。このディレクトリーは Footloose サーバーの公開ディレクトリーになるので、ブラウザーからアクセス可能になります。

https://github.com/takanopontaro/footloose-config

主なファイルは以下の 3 つです。

index.html

Footloose の HTML。基本的に変更する必要はありませんが、いじることは可能です。

theme.scss

Footloose のデザインを定義しているスタイルファイル。見た目を変える場合はこのファイルを編集します。SCSS で記述することが可能です。

bootstrap.js

Footloose の立ち上げ時に実行されるファイル。アプリケーションの設定とキーマップを定義する関数を default export します。キーマップ関数は何度も実行されるため、冪等性を保つ必要があります。

関数説明
getSettings各フレームの設定関数
getKeyMapsキーマップ定義関数。何度も実行される。

設定関数 getSettings は以下のコンテキストに分かれています。

アプリケーション

プロパティ説明
persistentSettingsカレントディレクトリーやソート状態などを localStorage に保存するか否か

ディレクトリーフレーム

プロパティ説明
selectedRowsOnlyコピーや移動をするときは、選択行があればそれを、無ければカレント行を対象にします。この設定を true にすると選択行のみを対象とするようになります
openPathAppsファイルを開く時のアプリケーションを設定します。詳しくはこちら
sortsデフォルトのソート
filterデフォルトの絞り込み正規表現文字列
pathデフォルトのディレクトリー
previewMakerギャラリーモード時のレンダー関数

ログフレーム

プロパティ説明
filterログデータを引数に取り、true なら表示、false なら非表示にするフィルタ関数

タスクマネージャーフレーム

プロパティ説明
filterタスクデータを引数に取るフィルタ関数

鋭意制作中

現在ドッグフーディングしながら随時更新中です。ドキュメントがまったく間に合っていませんが、コンフィグの書式は TypeScript のおかげでだいぶ分かるようになっています。

ライセンス

MIT © takanopontaro

No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate