Rework file picker UI, add Unsplash integration (close #23)
parent
9160105136
commit
4fc40bb9f5
@ -0,0 +1,138 @@
|
|||||||
|
<?php
|
||||||
|
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||||
|
|
||||||
|
require_once __DIR__ . '/../required.php';
|
||||||
|
|
||||||
|
dieifnotloggedin();
|
||||||
|
|
||||||
|
include_once __DIR__ . "/../lib/mimetypes.php";
|
||||||
|
|
||||||
|
$base = FILE_UPLOAD_PATH;
|
||||||
|
|
||||||
|
$folder = "";
|
||||||
|
if (isset($VARS['path']) && file_exists($base . $VARS['path']) && strpos(realpath($base . $VARS['path']), FILE_UPLOAD_PATH) === 0) {
|
||||||
|
$folder = $VARS['path'];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Compared to the start of the file mimetype, if it doesn't match the file is
|
||||||
|
// skipped. A type of "image" will match "image/png", "image/jpeg", etc.
|
||||||
|
$type = [];
|
||||||
|
if (isset($VARS['type']) && $VARS['type'] != "") {
|
||||||
|
$type = explode("|", $VARS['type']);
|
||||||
|
}
|
||||||
|
|
||||||
|
$enableunsplash = ENABLE_UNSPLASH;
|
||||||
|
if (count($type) > 0 && !in_array("image", $type)) {
|
||||||
|
$enableunsplash = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($folder == "/") {
|
||||||
|
$folder = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
$fullpath = $base . $folder;
|
||||||
|
?>
|
||||||
|
<div class="mb-2">
|
||||||
|
<nav aria-label="breadcrumb" class="my-auto">
|
||||||
|
<ol class="breadcrumb m-0">
|
||||||
|
<?php
|
||||||
|
$pathparts = explode("/", "$folder");
|
||||||
|
$pstr = "";
|
||||||
|
for ($i = 0; $i < count($pathparts); $i++) {
|
||||||
|
$p = $pathparts[$i];
|
||||||
|
$pstr .= "/$p";
|
||||||
|
$pstr = "/" . ltrim($pstr, "/");
|
||||||
|
if ($i == 0) {
|
||||||
|
$p = "<span class=\"fas fa-home\"></span>";
|
||||||
|
}
|
||||||
|
if ($i == count($pathparts) - 1) {
|
||||||
|
echo "\t<li aria-current=\"page\" class=\"breadcrumb-item active\">$p</li>";
|
||||||
|
} else {
|
||||||
|
echo "\t<li class=\"breadcrumb-item\"><span class=\"filepicker-item\" data-type=\"dir\" data-path=\"$pstr\">$p</a></li>";
|
||||||
|
}
|
||||||
|
echo "\n";
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="list-group list-group-flush">
|
||||||
|
<?php
|
||||||
|
$files = scandir($fullpath);
|
||||||
|
$count = 0;
|
||||||
|
foreach ($files as $f) {
|
||||||
|
if (strpos($f, '.') !== 0) {
|
||||||
|
$count++;
|
||||||
|
$link = "$folder/$f";
|
||||||
|
$target = "_BLANK";
|
||||||
|
$isdir = false;
|
||||||
|
$icon = "fas fa-file";
|
||||||
|
if (is_dir($fullpath . "/" . $f)) {
|
||||||
|
$isdir = true;
|
||||||
|
$link = "app.php?page=files&path=$folder/$f";
|
||||||
|
$icon = "fas fa-folder";
|
||||||
|
$target = "";
|
||||||
|
} else {
|
||||||
|
$link = "public/file.php?file=$folder/$f";
|
||||||
|
$extension = pathinfo($fullpath . "/" . $f)['extension'];
|
||||||
|
// If we don't have an extension, try using the whole filename
|
||||||
|
if ($extension == "") {
|
||||||
|
$extension = $f;
|
||||||
|
}
|
||||||
|
$mimetype = "application/octet-stream";
|
||||||
|
// Lookup mimetype from extension
|
||||||
|
if (array_key_exists($extension, $EXT2MIME)) {
|
||||||
|
$mimetype = $EXT2MIME[$extension];
|
||||||
|
}
|
||||||
|
|
||||||
|
$found = true;
|
||||||
|
if (count($type) > 0) {
|
||||||
|
$found = false;
|
||||||
|
foreach ($type as $t) {
|
||||||
|
if (strpos($mimetype, $t) === 0) {
|
||||||
|
$found = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!$found) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Lookup icon from mimetype
|
||||||
|
if (array_key_exists($mimetype, $MIMEICONS)) {
|
||||||
|
$icon = $MIMEICONS[$mimetype];
|
||||||
|
} else { // Allow broad generic <format>/other icons
|
||||||
|
$mimefirst = explode("/", $mimetype, 2)[0];
|
||||||
|
if (array_key_exists($mimefirst . "/other", $MIMEICONS)) {
|
||||||
|
$icon = $MIMEICONS[$mimetype];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<div
|
||||||
|
class="list-group-item filepicker-item"
|
||||||
|
data-type="<?php echo $isdir ? "dir" : "file" ?>"
|
||||||
|
data-path="<?php echo "$folder/$f"; ?>"
|
||||||
|
data-file="<?php echo $f; ?>">
|
||||||
|
<span class="<?php echo $icon; ?> fa-fw"></span> <?php echo $f; ?>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ($count == 0) {
|
||||||
|
?>
|
||||||
|
<div class="list-group-item text-center">
|
||||||
|
<p class="text-muted">
|
||||||
|
<i class="far fa-folder-open fa-5x fa-fw"></i>
|
||||||
|
</p>
|
||||||
|
<p class="h5 text-muted">
|
||||||
|
<?php lang("nothing here"); ?>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
@ -0,0 +1,77 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
/*
|
||||||
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
require_once __DIR__ . '/../required.php';
|
||||||
|
|
||||||
|
dieifnotloggedin();
|
||||||
|
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
|
||||||
|
Crew\Unsplash\HttpClient::init([
|
||||||
|
'applicationId' => UNSPLASH_ACCESSKEY,
|
||||||
|
'secret' => UNSPLASH_SECRETKEY,
|
||||||
|
'utmSource' => UNSPLASH_UTMSOURCE
|
||||||
|
]);
|
||||||
|
|
||||||
|
$page = 1;
|
||||||
|
if (isset($_GET['page']) && is_numeric($_GET['page'])) {
|
||||||
|
$page = $_GET['page'];
|
||||||
|
}
|
||||||
|
|
||||||
|
$per_page = 15;
|
||||||
|
|
||||||
|
$results = null;
|
||||||
|
|
||||||
|
if (isset($_GET['query']) && $_GET['query'] != "") {
|
||||||
|
$results = Crew\Unsplash\Search::photos($_GET['query'], $page, $per_page, null, null);
|
||||||
|
$images = $results->getArrayObject();
|
||||||
|
} else {
|
||||||
|
$images = Crew\Unsplash\Photo::all($page, $per_page, 'popular');
|
||||||
|
}
|
||||||
|
|
||||||
|
$images->
|
||||||
|
|
||||||
|
$htmlout = "";
|
||||||
|
|
||||||
|
if (count($images) == 0) {
|
||||||
|
$htmlout = "<span>" . lang("no results", false) . "</span>";
|
||||||
|
}
|
||||||
|
|
||||||
|
$htmlout .= '<div class="card-columns">';
|
||||||
|
|
||||||
|
foreach ($images as $img) {
|
||||||
|
$imageid = $img->id;
|
||||||
|
$description = $img->description;
|
||||||
|
$thumb = $img->urls['thumb'];
|
||||||
|
$image = $img->urls['regular'];
|
||||||
|
$attribution = '<a href="' . $img->user['links']['html'] . '" target="_BLANK">' . $img->user['name'] . '</a>';
|
||||||
|
$card = <<<END
|
||||||
|
<div class="card m-1 filepicker-unsplashimg">
|
||||||
|
<img class="card-img-top" src="$thumb" alt="$description" data-path="$image" data-imageid="$imageid" />
|
||||||
|
<div class="card-img-overlay unsplash-attribution">
|
||||||
|
<p class="card-text">By $attribution</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
END;
|
||||||
|
$htmlout .= $card;
|
||||||
|
}
|
||||||
|
$htmlout .= '</div>';
|
||||||
|
|
||||||
|
$jsonout = [
|
||||||
|
'total' => null,
|
||||||
|
'pages' => null,
|
||||||
|
'page' => $page,
|
||||||
|
'html' => $htmlout
|
||||||
|
];
|
||||||
|
|
||||||
|
if (!is_null($results)) {
|
||||||
|
$jsonout['total'] = lang2("x results", ["results" => $results->getTotal()], false);
|
||||||
|
$jsonout['pages'] = $results->getTotalPages();
|
||||||
|
}
|
||||||
|
|
||||||
|
echo json_encode($jsonout);
|
@ -0,0 +1,43 @@
|
|||||||
|
/*
|
||||||
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
function loadFilePickerFolder(path, type, pickertype) {
|
||||||
|
var ty = "";
|
||||||
|
switch (type) {
|
||||||
|
case "image":
|
||||||
|
ty = "image";
|
||||||
|
break;
|
||||||
|
case "media":
|
||||||
|
ty = "audio|video";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
$.get("lib/filepicker_local.php", {
|
||||||
|
path: path,
|
||||||
|
type: ty
|
||||||
|
}, function (data) {
|
||||||
|
$("#uploadedFilesBin").html(data);
|
||||||
|
$("#uploadedFilesBin .filepicker-item").click(function () {
|
||||||
|
if ($(this).data("type") == "dir") {
|
||||||
|
loadFilePickerFolder($(this).data("path"), type, pickertype);
|
||||||
|
} else {
|
||||||
|
var path = $(this).data("path");
|
||||||
|
if (typeof pickertype != 'undefined' && pickertype == 'complex') {
|
||||||
|
$("#imageEdit").data("image", path);
|
||||||
|
$("#imageEdit #selectedimage").attr("src", "public/file.php?file=" + path);
|
||||||
|
} else {
|
||||||
|
var data = {
|
||||||
|
path: path,
|
||||||
|
meta: {}
|
||||||
|
};
|
||||||
|
json = JSON.stringify(data);
|
||||||
|
document.getElementById("editorframe").contentWindow.postMessage("picked " + json, "*");
|
||||||
|
$("#fileBrowseModal").modal('hide');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
@ -0,0 +1,110 @@
|
|||||||
|
/*
|
||||||
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*$('#fileBrowserTabs a').on('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$(this).tab('show');
|
||||||
|
});*/
|
||||||
|
|
||||||
|
var unsplash_page = 1;
|
||||||
|
var unsplash_query = "";
|
||||||
|
var unsplash_pickertype = "image";
|
||||||
|
|
||||||
|
function loadPhotos() {
|
||||||
|
// Disable the "load more" button and the search box
|
||||||
|
$("#unsplashLoadMoreBtn").attr("disabled", true);
|
||||||
|
$("#unsplashSearch").attr("disabled", true);
|
||||||
|
$("#unsplashSearchBtn").attr("disabled", true);
|
||||||
|
$.get("lib/filepicker_unsplash.php", {
|
||||||
|
page: unsplash_page,
|
||||||
|
query: unsplash_query
|
||||||
|
}, function (data) {
|
||||||
|
|
||||||
|
// Display total results
|
||||||
|
if (data.total != null) {
|
||||||
|
$("#unsplashResults").text(data.total);
|
||||||
|
} else {
|
||||||
|
$("#unsplashResults").text("");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the new results to the page
|
||||||
|
$("#unsplashPhotoBin").append(data.html);
|
||||||
|
|
||||||
|
// Re-enable the search box and button
|
||||||
|
$("#unsplashSearch").attr("disabled", false);
|
||||||
|
$("#unsplashSearchBtn").attr("disabled", false);
|
||||||
|
|
||||||
|
// Check if we have more results available or if the "load more" button
|
||||||
|
// should stay disabled
|
||||||
|
if (data.pages != null && data.page >= data.pages) {
|
||||||
|
$("#unsplashLoadMoreBtn").attr("disabled", true);
|
||||||
|
} else {
|
||||||
|
$("#unsplashLoadMoreBtn").attr("disabled", false);
|
||||||
|
}
|
||||||
|
$("#unsplashPhotoBin .filepicker-unsplashimg .card-img-top").click(function () {
|
||||||
|
var path = $(this).data("path");
|
||||||
|
if (typeof unsplash_pickertype != 'undefined' && unsplash_pickertype == 'complex') {
|
||||||
|
$("#imageEdit").data("image", path);
|
||||||
|
$("#imageEdit #selectedimage").attr("src", path);
|
||||||
|
} else {
|
||||||
|
var data = {
|
||||||
|
path: path,
|
||||||
|
meta: {}
|
||||||
|
};
|
||||||
|
json = JSON.stringify(data);
|
||||||
|
document.getElementById("editorframe").contentWindow.postMessage("picked " + json, "*");
|
||||||
|
$("#fileBrowseModal").modal('hide');
|
||||||
|
}
|
||||||
|
$.post("action.php", {
|
||||||
|
action: "unsplash_download",
|
||||||
|
imageid: $(this).data("imageid")
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function searchPhotos(query) {
|
||||||
|
unsplash_page = 1;
|
||||||
|
unsplash_query = query;
|
||||||
|
$("#unsplashPhotoBin").html("");
|
||||||
|
loadPhotos();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset the photo browser to the default view (page one of popular photos)
|
||||||
|
*/
|
||||||
|
function loadDefaultPhotos() {
|
||||||
|
unsplash_page = 1;
|
||||||
|
unsplash_query = "";
|
||||||
|
$("#unsplashPhotoBin").html("");
|
||||||
|
loadPhotos();
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadMorePhotos() {
|
||||||
|
unsplash_page++;
|
||||||
|
loadPhotos();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupUnsplash(pickertype) {
|
||||||
|
if (typeof pickertype != 'undefined' && pickertype == 'complex') {
|
||||||
|
unsplash_pickertype = "complex";
|
||||||
|
}
|
||||||
|
$("#unsplashLoadMoreBtn").click(function () {
|
||||||
|
loadMorePhotos();
|
||||||
|
});
|
||||||
|
$("#unsplashSearchBtn").click(function () {
|
||||||
|
searchPhotos($("#unsplashSearch").val());
|
||||||
|
});
|
||||||
|
$('#unsplashSearch').on("keypress", function (e) {
|
||||||
|
if (e.which == 13) {
|
||||||
|
searchPhotos($("#unsplashSearch").val());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$("#unsplashTab").on("show.bs.tab", function () {
|
||||||
|
loadDefaultPhotos();
|
||||||
|
});
|
||||||
|
loadDefaultPhotos();
|
||||||
|
}
|
Loading…
Reference in New Issue