github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-26 18:30:50 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Refactored image picker to js component

Browse Source 
Also adjusted default cover image size
This commit is contained in:
Dan Brown 2017-12-06 17:32:29 +00:00
parent 261e57fc4e
commit 6ee35f55cc
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
7 changed files with 69 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/Book.php
View File

@ -17,14 +17,14 @@ class Book extends Entity
}
return baseUrl('/books/' . urlencode($this->slug));
}
/**
* Returns book cover image, if book cover not exists return default cover image.
* @param int $height - Height of the image
* @param int $width - Width of the image
* @param int $height - Height of the image
* @return string
*/
public function getBookCover($height = 170, $width = 300)
public function getBookCover($width = 440, $height = 250)
{
$default = baseUrl('/book_default_cover.png');
if (!$this->image_id) return $default;
@ -36,7 +36,7 @@ class Book extends Entity
}
return $cover;
}
/**
* Get the cover image of the book
* @return \Illuminate\Database\Eloquent\Relations\BelongsTo

59
resources/assets/js/components/image-picker.js Normal file
View File

@ -0,0 +1,59 @@
class ImagePicker {
constructor(elem) {
this.elem = elem;
this.imageElem = elem.querySelector('img');
this.input = elem.querySelector('input');
this.isUsingIds = elem.getAttribute('data-current-id') !== '';
this.isResizing = elem.getAttribute('data-resize-height') && elem.getAttribute('data-resize-width');
this.isResizeCropping = elem.getAttribute('data-resize-crop') !== '';
let selectButton = elem.querySelector('button[data-action="show-image-manager"]');
selectButton.addEventListener('click', this.selectImage.bind(this));
let resetButton = elem.querySelector('button[data-action="reset-image"]');
resetButton.addEventListener('click', this.reset.bind(this));
let removeButton = elem.querySelector('button[data-action="remove-image"]');
if (removeButton) {
removeButton.addEventListener('click', this.removeImage.bind(this));
}
}
selectImage() {
window.ImageManager.show(image => {
if (!this.isResizing) {
this.setImage(image);
return;
}
let requestString = '/images/thumb/' + image.id + '/' + this.elem.getAttribute('data-resize-width') + '/' + this.elem.getAttribute('data-resize-height') + '/' + (this.isResizeCropping ? 'true' : 'false');
window.$http.get(window.baseUrl(requestString)).then(resp => {
image.url = resp.data.url;
this.setImage(image);
});
});
}
reset() {
this.setImage({id: 0, url: this.elem.getAttribute('data-default-image')});
}
setImage(image) {
this.imageElem.src = image.url;
this.input.value = this.isUsingIds ? image.id : image.url;
this.imageElem.classList.remove('none');
}
removeImage() {
this.imageElem.src = this.elem.getAttribute('data-default-image');
this.imageElem.classList.add('none');
this.input.value = 'none';
}
}
module.exports = ImagePicker;

1
resources/assets/js/components/index.js
View File

@ -14,6 +14,7 @@ let componentMapping = {
'wysiwyg-editor': require('./wysiwyg-editor'),
'markdown-editor': require('./markdown-editor'),
'editor-toolbox': require('./editor-toolbox'),
'image-picker': require('./image-picker'),
};
window.components = {};

3
resources/lang/en/common.php
View File

@ -19,7 +19,7 @@ return [
'description' => 'Description',
'role' => 'Role',
'cover_image' => 'Cover image',
'cover_image_description' => 'This image should be approx 300x170px.',
'cover_image_description' => 'This image should be approx 440x250px.',
/**
* Actions
@ -49,6 +49,7 @@ return [
'toggle_details' => 'Toggle Details',
'toggle_thumbnails' => 'Toggle Thumbnails',
'details' => 'Details',
/**
* Header
*/

2
resources/views/books/form.blade.php
View File

@ -16,7 +16,7 @@
@include('components.image-picker', [
'resizeHeight' => '512',
'resizeWidth' => '512',
'showRemove' => true,
'showRemove' => false,
'defaultImage' => baseUrl('/book_default_cover.png'),
'currentImage' => @isset($model) ? $model->getBookCover() : baseUrl('/book_default_cover.png') ,
'currentId' => @isset($model) ? $model->image_id : 0,

51
resources/views/components/image-picker.blade.php
View File

@ -14,53 +14,4 @@
@endif
<input type="hidden" name="{{$name}}" id="{{$name}}" value="{{ isset($currentId) && ($currentId !== 0 && $currentId !== false) ? $currentId : $currentImage}}">
</div>
<script>
(function(){
var picker = document.querySelector('[image-picker="{{$name}}"]');
picker.addEventListener('click', function(event) {
if (event.target.nodeName.toLowerCase() !== 'button') return;
var button = event.target;
var action = button.getAttribute('data-action');
var resize = picker.getAttribute('data-resize-height') && picker.getAttribute('data-resize-width');
var usingIds = picker.getAttribute('data-current-id') !== '';
var resizeCrop = picker.getAttribute('data-resize-crop') !== '';
var imageElem = picker.querySelector('img');
var input = picker.querySelector('input');
function setImage(image) {
if (image === 'none') {
imageElem.src = picker.getAttribute('data-default-image');
imageElem.classList.add('none');
input.value = 'none';
return;
}
imageElem.src = image.url;
input.value = usingIds ? image.id : image.url;
imageElem.classList.remove('none');
}
if (action === 'show-image-manager') {
window.ImageManager.show((image) => {
if (!resize) {
setImage(image);
return;
}
var requestString = '/images/thumb/' + image.id + '/' + picker.getAttribute('data-resize-width') + '/' + picker.getAttribute('data-resize-height') + '/' + (resizeCrop ? 'true' : 'false');
$.get(window.baseUrl(requestString), resp => {
image.url = resp.url;
setImage(image);
});
});
} else if (action === 'reset-image') {
setImage({id: 0, url: picker.getAttribute('data-default-image')});
} else if (action === 'remove-image') {
setImage('none');
}
});
})();
</script>
</div>

1
resources/views/partials/custom-styles.blade.php
View File

@ -7,6 +7,7 @@
}
.button-base, .button, input[type="button"], input[type="submit"] {
background-color: {{ setting('app-color') }};
border-color: {{ setting('app-color') }};
}
.button-base:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover, .button:focus {
background-color: {{ setting('app-color') }};