webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-07 23:03:00 +03:00
Code Activity

Created solution for JS translations

Browse Source 
Also tidied up existing components and JS
This commit is contained in:
Dan Brown
2016-12-31 14:27:40 +00:00
parent 05316c90ba
commit c9700e38e2
26 changed files with 371 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,10 @@
<div class="image-picker" data-default-image="{{ $defaultImage }}" data-resize-height="{{ $resizeHeight }}" data-resize-width="{{ $resizeWidth }}" data-current-id="{{ $currentId or '' }}" data-resize-crop="{{ $resizeCrop or '' }}">
<div class="image-picker" image-picker="{{$name}}" data-default-image="{{ $defaultImage }}" data-resize-height="{{ $resizeHeight }}" data-resize-width="{{ $resizeWidth }}" data-current-id="{{ $currentId or '' }}" data-resize-crop="{{ $resizeCrop or '' }}">
<div>
<img @if($currentImage && $currentImage !== 'none') src="{{$currentImage}}" @else src="{{$defaultImage}}" @endif class="{{$imageClass}} @if($currentImage=== 'none') none @endif" alt="{{ trans('components.image_preview') }}">
</div>
<button class="button" type="button" data-action="show-image-manager">{{ trans('components.imagem_select_image') }}</button>
<button class="button" type="button" data-action="show-image-manager">{{ trans('components.image_select_image') }}</button>
<br>
<button class="text-button" data-action="reset-image" type="button">{{ trans('common.reset') }}</button>
@@ -13,5 +13,54 @@
<button class="text-button neg" data-action="remove-image" type="button">{{ trans('common.remove') }}</button>
@endif
<input type="hidden" name="{{$name}}" id="{{$name}}" value="{{$currentId or $currentImage or ''}}">
</div>
<input type="hidden" name="{{$name}}" id="{{$name}}" value="{{ isset($currentId) && ($currentId !== '' && $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.showExternal((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>