Laravelメディアマネージャー

インストール
構成
特徴
イベント
使用法

インストール

composer require ctf0/media-manager
パッケージアセットを公開する
php artisan vendor:publish --provider="ctf0MediaManagerMediaManagerServiceProvider"
インストール後、 php artisan lmm:setupを実行して追加します

パッケージルートをroutes/web.phpに設定します。
パッケージアセットをwebpack.mix.jsにコンパイルする

アイテムのロック/ロック解除にはデータベース「sqlite」を使用しますが、他のものを使用したい場合は、移行を実行する必要があります。
```
 php 職人の移行
```

依存関係をインストールする

糸の追加 vue vue-ls vue-infinite-loading vue-image-compare2 vue-tippy@v2 vue2-filters vue-input-autowidth vue-notif vue-clipboard2 vue-awesome vue-touch@next vue-focuspoint-component axios Dropzone Cropperjs キーコード Lottie-Web Plyr Fuse.js music-metadata-browser idb-keyval安養
糸追加バッファプロセス --dev

この 1 つのライナーをメインの js ファイルに追加し、 npm run watch実行してjs/cssファイルをコンパイルします。

 // app.js// mix v5window.Vue = require('vue')// mix v6import Vue from 'vue'require('../assets/vendor/MediaManager/js/manager')new Vue({el: '＃アプリ'}）

問題がある場合は確認してください。
Mix v6 ノートもチェックしてください

構成

config/mediaManager.php

特徴

画像エディタ
マルチ

アップロード
移動/コピー
消去

いずれかでアップロードする

アップロードパネルを使用する
どこにでもドラッグ＆ドロップ
空の領域「アイテムコンテナ」をクリックして押し続けます
URL 「画像のみ」から

アップロードする前にファイルをプレビューする
アップロードされたファイルのrandom/original名を切り替える
非同期更新
一括選択
アクセスしたディレクトリをブックマークして、より迅速なナビゲーションを実現
項目の表示/非表示を変更する
ナビゲーション上のページの URL を更新する
オーディオファイル情報「アーティスト、アルバム、年など」を表示します。
ファイル/フォルダーを動的に非表示にする
パスへのアクセスを制限する
選択したものをダウンロード「一括選択を含む」
選択したファイルのリンクを直接コピーする
マネージャーを使う

モーダルから
任意の wysiwyg エディターを使用

「左、上、右、下、ホーム、終了」を使用して選択した項目まで自動スクロールします
アイテムのロック/ロック解除。
現在のディレクトリ内で検索するか、コレクション全体をグローバルに検索します。
フィルタリング

フォルダ
画像
オーディオ
ビデオ
テキスト/PDF
アプリケーション/アーカイブ
ロックされたアイテム
選択されたアイテム

並べ替え

名前
サイズ
最終更新日

アイテム数は

全て
選択された
検索が見つかりました

含有率バー
上書きに対する保護 (ファイル/フォルダー)
ファイル名のサニタイズ

アップロード
名前を変更する
新しいフォルダ

ノイズを回避し、ユーザーの集中力を維持するために、無効/有効ボタンは使用状況に応じて異なります
ショートカット/ジェスチャー

サイドバーが非表示の場合、 audio/videoタイプのファイルは、 「画像と同じ」プレビューカードで開きます。
application/archiveのタイプのファイルはすべてダウンロードされます。
利用可能な行がもうない場合は、 down押すと、 「ネイティブファイルマネージャーと同じ」リストの最後の項目に移動します。
プレビューカードでaudio/videoファイルを表示しているときに、 spaceを押すと、モーダルを閉じる代わりに項目が再生/一時停止されます。
dbl クリック/タップ
すべての左/右ジェスチャには、対応するジェスチャも利用可能です。
画像エディターの使用中にescを押してもモーダルは閉じませんが、 modal backgroundダブルクリックまたはタップして閉じることができます。 「誤って変更をキャンセルしないようにするため」 。

- 情報サイドバーは大画面> 1023px"でのみ利用可能です。
- 他のkeydownイベントの干渉を停止するには、マネージャーリスナーを切り替えることができます。
EventHub.fire('disable-global-keys', true/false) 。

ナビゲーション	ボタン	キーボード	クリック/タップ	触る
	アップロードパネルの切り替え（ツールバー）	あなた
	更新(ツールバー)	r	「キャッシュをクリア」を保持します	ピンチイン（アイテムコンテナ）
	移動可能リストの移動/表示(ツールバー)	m/p
	画像エディタ(ツールバー)	e
	削除(ツールバー)	d/デル
	ロック/ロック解除(ツールバー)	私	「画像以外のもの」を保持する
	可視性の変更(ツールバー)	v
	一括選択の切り替え(ツールバー)	b
	(リセット) すべて一括選択(ツールバー)	ある
	可動リスト（ショッピングカート）に追加	c/x	*
	移動・移動リスト（ショッピングカート）を表示		**
	可動リストをクリア（ショッピングカート）		所有
	サイドバー(パスバー)を切り替えます	t	*	左/右にスワイプ(サイドバー)
	確認(モーダル)	入力
	プレビュー画像/PDF/テキスト（アイテム）を切り替えます	空間	**
	メディア（アイテム）の再生/一時停止	空間	**
	非表示 (モーダル/アップロードパネル)	ESC
	リセット（検索/一括選択/フィルター/並べ替え）	ESC
	リセットアップロード showPreview	ESC
	アップロードの確認 showPreview	入力

	移動可能なリスト(アイテム)に追加			上にスワイプ
	(アイテム)を削除する			下にスワイプ
	(アイテム) の名前を変更			左にスワイプ
	画像エディター（アイテム）		所有
	現在選択されている ++ (項目)	シフト+クリック
	現在の + 選択されている(アイテム)	alt/meta + クリック
	新しいフォルダーを作成する		** (アイテムコンテナ)

次の「項目」へ		右	*	左にスワイプ(プレビュー)
前の「アイテム」に移動		左	*	右にスワイプ(プレビュー)
最初の「項目」に移動		家
最後の「項目」に移動		終わり
次の「行」に移動		下		上にスワイプ(プレビュー)
前の「行」に移動		上		下にスワイプ(プレビュー)
フォルダを開く		入力	**
前の「ディレクトリ」に移動	フォルダ名(パスバー)	バックスペース	*	右にスワイプ(アイテムコンテナ)

イベント

タイプ	イベント名	説明
JS
	モーダルショー	モーダルが表示されている場合
	モーダル非表示	モーダルが非表示になっている場合
	file_selected (モーダル内の場合)	選択したファイルのURLを取得する
	multi_file_selected (モーダル内の場合)	選択したファイルの URL を一括取得する
	folder_selected (モーダル内の場合)	選択したフォルダーのパスを取得する
ララベル
	MMFileUploaded($file_path, $mime_type, $options)	アップロードされたファイルのストレージパス、MIME タイプ、カスタムオプションを取得します
	MMFileSaved($file_path, $mime_type)	保存された (編集/リンク) 画像の完全なストレージパス、MIME タイプを取得します。
	MMFileDeleted($file_path, $is_folder)	削除されたアイテムがフォルダーの場合、削除されたファイル/フォルダーのストレージパスを取得します
	MMFileRenamed($old_path, $new_path)	名前変更されたファイル/フォルダーの「古いおよび新しい」ストレージパスを取得します
	MMFileMoved($old_path, $new_path)	ファイル/フォルダーの「古いものと新しい」ストレージパスを移動する