mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 05:36:00 +00:00
Added mulit image-type compatability to manager & app and added scaled image selection
This commit is contained in:
Dan Brown
parent
32d5b12d27
commit
a3188d349c
@ -33,23 +33,24 @@ class ImageController extends Controller
|
||||
|
||||
|
||||
/**
|
||||
* Get all images, Paginated
|
||||
* Get all gallery images, Paginated
|
||||
* @param int $page
|
||||
* @return \Illuminate\Http\JsonResponse
|
||||
*/
|
||||
public function getAllGallery($page = 0)
|
||||
public function getAllByType($type, $page = 0)
|
||||
{
|
||||
$imgData = $this->imageRepo->getAllGallery($page);
|
||||
$imgData = $this->imageRepo->getPaginatedByType($type, $page);
|
||||
return response()->json($imgData);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Handles image uploads for use on pages.
|
||||
* @param string $type
|
||||
* @param Request $request
|
||||
* @return \Illuminate\Http\JsonResponse
|
||||
*/
|
||||
public function uploadGallery(Request $request)
|
||||
public function uploadByType($type, Request $request)
|
||||
{
|
||||
$this->checkPermission('image-create');
|
||||
$this->validate($request, [
|
||||
@ -57,10 +58,25 @@ class ImageController extends Controller
|
||||
]);
|
||||
|
||||
$imageUpload = $request->file('file');
|
||||
$image = $this->imageRepo->saveNew($imageUpload, 'gallery');
|
||||
$image = $this->imageRepo->saveNew($imageUpload, $type);
|
||||
return response()->json($image);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate a sized thumbnail for an image.
|
||||
* @param $id
|
||||
* @param $width
|
||||
* @param $height
|
||||
* @param $crop
|
||||
* @return \Illuminate\Http\JsonResponse
|
||||
*/
|
||||
public function getThumbnail($id, $width, $height, $crop)
|
||||
{
|
||||
$this->checkPermission('image-create');
|
||||
$image = $this->imageRepo->getById($id);
|
||||
$thumbnailUrl = $this->imageRepo->getThumbnail($image, $width, $height, $crop == 'false');
|
||||
return response()->json(['url' => $thumbnailUrl]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update image details
|
||||
|
||||
@ -18,7 +18,8 @@ class UserController extends Controller
|
||||
|
||||
/**
|
||||
* UserController constructor.
|
||||
* @param $user
|
||||
* @param User $user
|
||||
* @param UserRepo $userRepo
|
||||
*/
|
||||
public function __construct(User $user, UserRepo $userRepo)
|
||||
{
|
||||
|
||||
@ -57,10 +57,12 @@ Route::group(['middleware' => 'auth'], function () {
|
||||
|
||||
// Image routes
|
||||
Route::group(['prefix' => 'images'], function() {
|
||||
Route::get('/gallery/all', 'ImageController@getAllGallery');
|
||||
Route::get('/gallery/all/{page}', 'ImageController@getAllGallery');
|
||||
Route::post('/gallery/upload', 'ImageController@uploadGallery');
|
||||
// Standard get, update and deletion for all types
|
||||
Route::get('/thumb/{id}/{width}/{height}/{crop}', 'ImageController@getThumbnail');
|
||||
Route::put('/update/{imageId}', 'ImageController@update');
|
||||
Route::post('/{type}/upload', 'ImageController@uploadByType');
|
||||
Route::get('/{type}/all', 'ImageController@getAllByType');
|
||||
Route::get('/{type}/all/{page}', 'ImageController@getAllByType');
|
||||
Route::delete('/{imageId}', 'ImageController@destroy');
|
||||
});
|
||||
|
||||
|
||||
@ -52,15 +52,15 @@ class ImageRepo
|
||||
|
||||
|
||||
/**
|
||||
* Get all images for the standard gallery view that's used for
|
||||
* adding images to shared content such as pages.
|
||||
* @param int $page
|
||||
* @param int $pageSize
|
||||
* Gets a load images paginated, filtered by image type.
|
||||
* @param string $type
|
||||
* @param int $page
|
||||
* @param int $pageSize
|
||||
* @return array
|
||||
*/
|
||||
public function getAllGallery($page = 0, $pageSize = 24)
|
||||
public function getPaginatedByType($type, $page = 0, $pageSize = 24)
|
||||
{
|
||||
$images = $this->image->where('type', '=', 'gallery')
|
||||
$images = $this->image->where('type', '=', strtolower($type))
|
||||
->orderBy('created_at', 'desc')->skip($pageSize * $page)->take($pageSize + 1)->get();
|
||||
$hasMore = count($images) > $pageSize;
|
||||
|
||||
@ -191,7 +191,7 @@ class ImageRepo
|
||||
* @param bool $keepRatio
|
||||
* @return string
|
||||
*/
|
||||
private function getThumbnail(Image $image, $width = 220, $height = 220, $keepRatio = false)
|
||||
public function getThumbnail(Image $image, $width = 220, $height = 220, $keepRatio = false)
|
||||
{
|
||||
$thumbDirName = '/' . ($keepRatio ? 'scaled-' : 'thumbs-') . $width . '-' . $height . '/';
|
||||
$thumbFilePath = dirname($image->path) . $thumbDirName . basename($image->path);
|
||||
|
||||
@ -76,6 +76,22 @@
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
imageType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
resizeWidth: {
|
||||
type: String
|
||||
},
|
||||
resizeHeight: {
|
||||
type: String
|
||||
},
|
||||
resizeCrop: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
window.ImageManager = this;
|
||||
},
|
||||
@ -88,7 +104,7 @@
|
||||
methods: {
|
||||
fetchData: function () {
|
||||
var _this = this;
|
||||
this.$http.get('/images/gallery/all/' + _this.page, function (data) {
|
||||
this.$http.get('/images/' + _this.imageType + '/all/' + _this.page, function (data) {
|
||||
_this.images = _this.images.concat(data.images);
|
||||
_this.hasMore = data.hasMore;
|
||||
_this.page++;
|
||||
@ -98,7 +114,7 @@
|
||||
setupDropZone: function () {
|
||||
var _this = this;
|
||||
var dropZone = new Dropzone(_this.$els.dropZone, {
|
||||
url: '/images/gallery/upload',
|
||||
url: '/images/' + _this.imageType + '/upload',
|
||||
init: function () {
|
||||
var dz = this;
|
||||
this.on("sending", function (file, xhr, data) {
|
||||
@ -120,6 +136,24 @@
|
||||
});
|
||||
},
|
||||
|
||||
returnCallback: function (image) {
|
||||
var _this = this;
|
||||
var isResized = _this.resizeWidth && _this.resizeHeight;
|
||||
|
||||
if (!isResized) {
|
||||
_this.callback(image);
|
||||
return;
|
||||
}
|
||||
|
||||
var cropped = _this.resizeCrop ? 'true' : 'false';
|
||||
var requestString = '/images/thumb/' + image.id + '/' + _this.resizeWidth + '/' + _this.resizeHeight + '/' + cropped;
|
||||
_this.$http.get(requestString, function(data) {
|
||||
image.thumbs.custom = data.url;
|
||||
_this.callback(image);
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
imageClick: function (image) {
|
||||
var dblClickTime = 380;
|
||||
var cTime = (new Date()).getTime();
|
||||
@ -127,7 +161,7 @@
|
||||
if (this.cClickTime !== 0 && timeDiff < dblClickTime && this.selectedImage === image) {
|
||||
// DoubleClick
|
||||
if (this.callback) {
|
||||
this.callback(image);
|
||||
this.returnCallback(image);
|
||||
}
|
||||
this.hide();
|
||||
} else {
|
||||
@ -139,7 +173,7 @@
|
||||
|
||||
selectButtonClick: function () {
|
||||
if (this.callback) {
|
||||
this.callback(this.selectedImage);
|
||||
this.returnCallback(this.selectedImage);
|
||||
}
|
||||
this.hide();
|
||||
},
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
showImageManager: function(e) {
|
||||
var _this = this;
|
||||
ImageManager.show(function(image) {
|
||||
_this.image = image.url;
|
||||
_this.image = image.thumbs.custom || image.url;
|
||||
});
|
||||
},
|
||||
reset: function() {
|
||||
|
||||
@ -16,5 +16,5 @@
|
||||
@endif
|
||||
</form>
|
||||
</div>
|
||||
<image-manager></image-manager>
|
||||
<image-manager image-type="gallery"></image-manager>
|
||||
@stop
|
||||
@ -14,6 +14,6 @@
|
||||
@include('pages/form', ['model' => $page])
|
||||
</form>
|
||||
</div>
|
||||
<image-manager></image-manager>
|
||||
<image-manager image-type="gallery"></image-manager>
|
||||
|
||||
@stop
|
||||
@ -32,7 +32,7 @@
|
||||
<div class="col-md-6">
|
||||
<div class="form-group" id="logo-control">
|
||||
<label for="setting-app-logo">Application Logo</label>
|
||||
<p class="small">This image should be 43px in height. </p>
|
||||
<p class="small">This image should be 43px in height. <br>Large images will be scaled down.</p>
|
||||
<image-picker current-image="{{ Setting::get('app-logo', '') }}" default-image="/logo.png" name="setting-app-logo" image-class="logo-image"></image-picker>
|
||||
</div>
|
||||
</div>
|
||||
@ -86,6 +86,6 @@
|
||||
|
||||
</div>
|
||||
|
||||
<image-manager></image-manager>
|
||||
<image-manager image-type="system" resize-height="43" resize-width="200"></image-manager>
|
||||
|
||||
@stop
|
||||
|
||||
Loading…
Reference in New Issue
Block a user