Skip to content

Instantly share code, notes, and snippets.

@chrono-meter

chrono-meter/wp-elfinder-googledrive.php

Last active November 27, 2020 19:03
Show Gist options
  • Save chrono-meter/ebc6d81025e956fca7ae1fb68c2149f3 to your computer and use it in GitHub Desktop.
Save chrono-meter/ebc6d81025e956fca7ae1fb68c2149f3 to your computer and use it in GitHub Desktop.
Download ZIP
Sample: Call elFinder from WordPress plugin.
Raw
wp-elfinder-googledrive.php
<?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