github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-23 06:14:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added mulit image-type compatability to manager & app and added scaled image selection

Browse Source
This commit is contained in:
Dan Brown 2015-12-08 22:04:59 +00:00
parent 32d5b12d27
commit a3188d349c
9 changed files with 78 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/Http/Controllers/ImageController.php
View File

@ -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

3
app/Http/Controllers/UserController.php
View File

@ -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)
{

8
app/Http/routes.php
View File

@ -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');
});

14
app/Repos/ImageRepo.php
View File

@ -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);

42
resources/assets/js/components/image-manager.vue
View File

@ -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();
},

2
resources/assets/js/components/image-picker.vue
View File

@ -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() {

2
resources/views/pages/create.blade.php
View File

@ -16,5 +16,5 @@
@endif
</form>
</div>
<image-manager></image-manager>
<image-manager image-type="gallery"></image-manager>
@stop

2
resources/views/pages/edit.blade.php
View File

@ -14,6 +14,6 @@
@include('pages/form', ['model' => $page])
</form>
</div>
<image-manager></image-manager>
<image-manager image-type="gallery"></image-manager>
@stop

4
resources/views/settings/index.blade.php
View File

@ -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