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