Last active
November 27, 2020 19:03
-
-
Save chrono-meter/ebc6d81025e956fca7ae1fb68c2149f3 to your computer and use it in GitHub Desktop.
Sample: Call elFinder from WordPress plugin.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Class GdriveFolderViewer | |
* | |
* @see https://github.com/nao-pon/flysystem-google-drive#usage-to-with-elfinder | |
* composer require nao-pon/elfinder-flysystem-driver-ext nao-pon/flysystem-google-drive:~1.1 | |
* | |
*/ | |
class GdriveFolderViewer { | |
static function _register() { | |
add_action( 'admin_post_gdrive_folder', [ __CLASS__, 'action_view' ] ); | |
add_action( 'admin_post_gdrive_folder_cmd', [ __CLASS__, 'action_cmd' ] ); | |
} | |
static function get_file_url( $file = __FILE__ ) { | |
$file_path = str_replace( DIRECTORY_SEPARATOR, "/", str_replace( str_replace( "/", DIRECTORY_SEPARATOR, WP_CONTENT_DIR ), "", $file ) ); | |
if ( $file_path ) { | |
return content_url( $file_path ); | |
} | |
return false; | |
} | |
static function action_view() { | |
$elFinderUrl = rtrim( self::get_file_url( dirname( dirname( ( new \ReflectionClass( '\elFinder' ) )->getFileName() ) ) ), '/' ); | |
?> | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2"> | |
<title>elFinder 2.1.x source version with PHP connector</title> | |
<!-- Require JS (REQUIRED) --> | |
<!-- Rename "main.default.js" to "main.js" and edit it if you need configure elFInder options or any things --> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> | |
<script> | |
(function () { | |
"use strict"; | |
var // jQuery and jQueryUI version | |
jqver = '3.4.1', | |
uiver = '1.12.1', | |
// Detect language (optional) | |
lang = (function () { | |
var locq = window.location.search, | |
map = { | |
'pt': 'pt_BR', | |
'ug': 'ug_CN', | |
'zh': 'zh_CN' | |
}, | |
full = { | |
'zh_tw': 'zh_TW', | |
'zh_cn': 'zh_CN', | |
'fr_ca': 'fr_CA' | |
}, | |
fullLang, locm, lang; | |
if (locq && (locm = locq.match(/lang=([a-zA-Z_-]+)/))) { | |
// detection by url query (?lang=xx) | |
fullLang = locm[1]; | |
} else { | |
// detection by browser language | |
fullLang = (navigator.browserLanguage || navigator.language || navigator.userLanguage || ''); | |
} | |
fullLang = fullLang.replace('-', '_').substr(0, 5).toLowerCase(); | |
if (full[fullLang]) { | |
lang = full[fullLang]; | |
} else { | |
lang = (fullLang || 'en').substr(0, 2); | |
if (map[lang]) { | |
lang = map[lang]; | |
} | |
} | |
return lang; | |
})(), | |
// Start elFinder (REQUIRED) | |
start = function (elFinder, editors, config) { | |
// load jQueryUI CSS | |
elFinder.prototype.loadCss('//cdnjs.cloudflare.com/ajax/libs/jqueryui/' + uiver + '/themes/smoothness/jquery-ui.css'); | |
$(function () { | |
var optEditors = { | |
commandsOptions: { | |
edit: { | |
editors: Array.isArray(editors) ? editors : [] | |
} | |
} | |
}, | |
opts = {}; | |
// Interpretation of "elFinderConfig" | |
if (config && config.managers) { | |
$.each(config.managers, function (id, mOpts) { | |
opts = Object.assign(opts, config.defaultOpts || {}); | |
// editors marges to opts.commandOptions.edit | |
try { | |
mOpts.commandsOptions.edit.editors = mOpts.commandsOptions.edit.editors.concat(editors || []); | |
} catch (e) { | |
Object.assign(mOpts, optEditors); | |
} | |
// Make elFinder | |
$('#' + id).elfinder( | |
// 1st Arg - options | |
$.extend(true, {lang: lang}, opts, mOpts || {}), | |
// 2nd Arg - before boot up function | |
function (fm, extraObj) { | |
// `init` event callback function | |
fm.bind('init', function () { | |
// Optional for Japanese decoder "encoding-japanese" | |
if (fm.lang === 'ja') { | |
require( | |
['encoding-japanese'], | |
function (Encoding) { | |
if (Encoding && Encoding.convert) { | |
fm.registRawStringDecoder(function (s) { | |
return Encoding.convert(s, { | |
to: 'UNICODE', | |
type: 'string' | |
}); | |
}); | |
} | |
} | |
); | |
} | |
}); | |
} | |
); | |
}); | |
} else { | |
alert('"elFinderConfig" object is wrong.'); | |
} | |
}); | |
}, | |
// JavaScript loader (REQUIRED) | |
load = function () { | |
require( | |
[ | |
'elfinder' | |
, 'extras/editors.default.min' // load text, image editors | |
, 'elFinderConfig' | |
, 'extras/quicklook.googledocs.min' // optional preview for GoogleApps contents on the GoogleDrive volume | |
], | |
start, | |
function (error) { | |
alert(error.message); | |
} | |
); | |
}, | |
// is IE8 or :? for determine the jQuery version to use (optional) | |
old = (typeof window.addEventListener === 'undefined' && typeof document.getElementsByClassName === 'undefined') | |
|| | |
(!window.chrome && !document.unqueID && !window.opera && !window.sidebar && 'WebkitAppearance' in document.documentElement.style && document.body.style && typeof document.body.style.webkitFilter === 'undefined'); | |
// config of RequireJS (REQUIRED) | |
require.config({ | |
baseUrl: <?php echo json_encode( $elFinderUrl . '/js' ); ?>, | |
paths: { | |
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/' + (old ? '1.12.4' : jqver) + '/jquery.min', | |
'jquery-ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/' + uiver + '/jquery-ui.min', | |
'elfinder': 'elfinder.min', | |
'encoding-japanese': '//cdn.rawgit.com/polygonplanet/encoding.js/1.0.26/encoding.min' | |
}, | |
waitSeconds: 10, // optional | |
}); | |
// check elFinderConfig and fallback | |
// This part don't used if you are using elfinder.html, see elfinder.html | |
if (!require.defined('elFinderConfig')) { | |
define('elFinderConfig', { | |
baseUrl: <?php echo json_encode( $elFinderUrl ); ?>, | |
// elFinder options (REQUIRED) | |
// Documentation for client options: | |
// https://github.com/Studio-42/elFinder/wiki/Client-configuration-options | |
defaultOpts: { | |
url: <?php echo json_encode( admin_url( 'admin-post.php?action=gdrive_folder_cmd' ) ); ?>, // or connector.maximal.php : connector URL (REQUIRED) | |
lang: <?php echo json_encode( get_locale() ); ?>, | |
commandsOptions: { | |
edit: { | |
// extraOptions : { | |
// // set API key to enable Creative Cloud image editor | |
// // see https://console.adobe.io/ | |
// creativeCloudApiKey : '', | |
// // browsing manager URL for CKEditor, TinyMCE | |
// // uses self location with the empty value | |
// managerUrl : '' | |
// } | |
}, | |
quicklook: { | |
// to enable CAD-Files and 3D-Models preview with sharecad.org | |
// sharecadMimes: ['image/vnd.dwg', 'image/vnd.dxf', 'model/vnd.dwf', 'application/vnd.hp-hpgl', 'application/plt', 'application/step', 'model/iges', 'application/vnd.ms-pki.stl', 'application/sat', 'image/cgm', 'application/x-msmetafile'], | |
// to enable preview with Google Docs Viewer | |
googleDocsMimes: [ | |
'application/pdf', | |
'image/tiff', | |
'application/vnd.ms-office', | |
'application/msword', | |
'application/vnd.ms-word', | |
'application/vnd.ms-excel', | |
'application/vnd.ms-powerpoint', | |
'application/vnd.openxmlformats-officedocument.wordprocessingml.document', | |
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', | |
'application/vnd.openxmlformats-officedocument.presentationml.presentation', | |
'application/postscript', | |
'application/rtf', | |
'application/vnd.google-apps.audio', | |
'application/vnd.google-apps.document', | |
'application/vnd.google-apps.drive', | |
'application/vnd.google-apps.drawing', | |
'application/vnd.google-apps.file', | |
'application/vnd.google-apps.folder', | |
'application/vnd.google-apps.form', | |
'application/vnd.google-apps.fusiontable', | |
'application/vnd.google-apps.map', | |
'application/vnd.google-apps.photo', | |
'application/vnd.google-apps.presentation', | |
'application/vnd.google-apps.script', | |
'application/vnd.google-apps.shortcut', | |
'application/vnd.google-apps.site', | |
'application/vnd.google-apps.spreadsheet', | |
'application/vnd.google-apps.unknown', | |
'application/vnd.google-apps.video', | |
], | |
// to enable preview with Microsoft Office Online Viewer | |
// these MIME types override "googleDocsMimes" | |
// officeOnlineMimes: ['application/vnd.ms-office', 'application/msword', 'application/vnd.ms-word', 'application/vnd.ms-excel', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.oasis.opendocument.text', 'application/vnd.oasis.opendocument.spreadsheet', 'application/vnd.oasis.opendocument.presentation'], | |
}, | |
}, | |
bootCallback: function (fm, extraObj) { | |
/* any bind functions etc. */ | |
fm.bind('init', function () { | |
// any your code | |
}); | |
// for example set document.title dynamically. | |
var title = document.title; | |
fm.bind('open', function () { | |
var path = '', | |
cwd = fm.cwd(); | |
if (cwd) { | |
path = fm.path(cwd.hash) || null; | |
} | |
document.title = path ? path + ':' + title : title; | |
}).bind('destroy', function () { | |
document.title = title; | |
}); | |
} | |
}, | |
managers: { | |
'elfinder': {}, | |
}, | |
}); | |
} | |
// load JavaScripts (REQUIRED) | |
load(); | |
})(); | |
</script> | |
</head> | |
<body> | |
<!-- Element where elFinder will be created (REQUIRED) --> | |
<div id="elfinder"></div> | |
</body> | |
</html> | |
<?php | |
} | |
static function action_cmd() { | |
// todo create your \Google_Client() | |
$connector = new \elFinderConnector( new \elFinder( [ | |
'roots' => [ | |
[ | |
// require | |
'driver' => 'FlysystemExt', | |
'filesystem' => new \League\Flysystem\Filesystem( new \Hypweb\Flysystem\GoogleDrive\GoogleDriveAdapter( | |
new \Google_Service_Drive( $client ), // Client service | |
'root', // Folder ID as root ('root' or Folder ID) | |
[ 'useHasDir' => true ] // options (elFinder need hasDir method) | |
) ), | |
'fscache' => null, | |
'separator' => '/', | |
// optional | |
'alias' => 'GoogleDrive', | |
'rootCssClass' => 'elfinder-navbar-root-googledrive', | |
], | |
], | |
] ) ); | |
$connector->run(); | |
// todo save $client->getAccessToken(), because \Hypweb\Flysystem\GoogleDrive\GoogleDriveAdapter calls fetchAccessTokenWithRefreshToken | |
} | |
} | |
GdriveFolderViewer::_register(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment