mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-07-28 17:02:04 +03:00
Moved all vuejs parts over to angular
This commit is contained in:
Dan Brown
3
resources/assets/js/components/drop-zone.html
Normal file
3
resources/assets/js/components/drop-zone.html
Normal file
@ -0,0 +1,3 @@
|
||||
<div class="dropzone-container">
|
||||
<div class="dz-message">Drop files or click here to upload</div>
|
||||
</div>
|
||||
@ -1,209 +0,0 @@
|
||||
<template>
|
||||
<div id="image-manager">
|
||||
<div class="overlay" v-el:overlay @click="overlayClick">
|
||||
<div class="image-manager-body">
|
||||
<div class="image-manager-content">
|
||||
<div class="image-manager-list">
|
||||
<div v-for="image in images">
|
||||
<img class="anim fadeIn"
|
||||
:class="{selected: (image==selectedImage)}"
|
||||
:src="image.thumbs.gallery" :alt="image.title" :title="image.name"
|
||||
@click="imageClick(image)"
|
||||
:style="{animationDelay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'}">
|
||||
</div>
|
||||
<div class="load-more" v-show="hasMore" @click="fetchData">Load More</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="neg button image-manager-close" @click="hide">x</button>
|
||||
<div class="image-manager-sidebar">
|
||||
<h2 v-el:image-title>Images</h2>
|
||||
<hr class="even">
|
||||
<div class="dropzone-container" v-el:drop-zone>
|
||||
<div class="dz-message">Drop files or click here to upload</div>
|
||||
</div>
|
||||
<div class="image-manager-details anim fadeIn" v-show="selectedImage">
|
||||
<hr class="even">
|
||||
<form @submit="saveImageDetails" v-el:image-form>
|
||||
<div class="form-group">
|
||||
<label for="name">Image Name</label>
|
||||
<input type="text" id="name" name="name" v-model="selectedImage.name">
|
||||
</div>
|
||||
</form>
|
||||
<hr class="even">
|
||||
<div v-show="dependantPages">
|
||||
<p class="text-neg text-small">
|
||||
This image is used in the pages below, Click delete again to confirm you want to delete
|
||||
this image.
|
||||
</p>
|
||||
<ul class="text-neg">
|
||||
<li v-for="page in dependantPages">
|
||||
<a :href="page.url" target="_blank" class="text-neg">{{ page.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<form @submit="deleteImage" v-el:image-delete-form>
|
||||
<button class="button neg"><i class="zmdi zmdi-delete"></i>Delete Image</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="image-manager-bottom">
|
||||
<button class="button pos anim fadeIn" v-show="selectedImage" @click="selectButtonClick"><i
|
||||
class="zmdi zmdi-square-right"></i>Select Image
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
var Dropzone = require('dropzone');
|
||||
|
||||
module.exports = {
|
||||
data: function () {
|
||||
return {
|
||||
images: [],
|
||||
hasMore: false,
|
||||
page: 0,
|
||||
cClickTime: 0,
|
||||
selectedImage: false,
|
||||
dependantPages: false,
|
||||
deleteForm: {},
|
||||
token: document.querySelector('meta[name=token]').getAttribute('content'),
|
||||
dataLoaded: false
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
imageType: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
window.ImageManager = this;
|
||||
},
|
||||
|
||||
ready: function () {
|
||||
// Create dropzone
|
||||
this.setupDropZone();
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchData: function () {
|
||||
var url = '/images/' + this.imageType + '/all/' + this.page;
|
||||
this.$http.get(url).then((response) => {
|
||||
this.images = this.images.concat(response.data.images);
|
||||
this.hasMore = response.data.hasMore;
|
||||
this.page++;
|
||||
});
|
||||
},
|
||||
|
||||
setupDropZone: function () {
|
||||
var _this = this;
|
||||
var dropZone = new Dropzone(_this.$els.dropZone, {
|
||||
url: '/images/' + _this.imageType + '/upload',
|
||||
init: function () {
|
||||
var dz = this;
|
||||
dz.on("sending", function (file, xhr, data) {
|
||||
data.append("_token", _this.token);
|
||||
});
|
||||
dz.on("success", function (file, data) {
|
||||
_this.images.unshift(data);
|
||||
$(file.previewElement).fadeOut(400, function () {
|
||||
dz.removeFile(file);
|
||||
});
|
||||
});
|
||||
dz.on('error', function (file, errorMessage, xhr) {
|
||||
if (errorMessage.file) {
|
||||
$(file.previewElement).find('[data-dz-errormessage]').text(errorMessage.file[0]);
|
||||
}
|
||||
console.log(errorMessage);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
returnCallback: function (image) {
|
||||
this.callback(image);
|
||||
},
|
||||
|
||||
imageClick: function (image) {
|
||||
var dblClickTime = 380;
|
||||
var cTime = (new Date()).getTime();
|
||||
var timeDiff = cTime - this.cClickTime;
|
||||
if (this.cClickTime !== 0 && timeDiff < dblClickTime && this.selectedImage === image) {
|
||||
// DoubleClick
|
||||
if (this.callback) {
|
||||
this.returnCallback(image);
|
||||
}
|
||||
this.hide();
|
||||
} else {
|
||||
this.selectedImage = (this.selectedImage === image) ? false : image;
|
||||
this.dependantPages = false;
|
||||
}
|
||||
this.cClickTime = cTime;
|
||||
},
|
||||
|
||||
selectButtonClick: function () {
|
||||
if (this.callback) this.returnCallback(this.selectedImage);
|
||||
this.hide();
|
||||
},
|
||||
|
||||
show: function (callback) {
|
||||
this.callback = callback;
|
||||
this.$els.overlay.style.display = 'block';
|
||||
// Get initial images if they have not yet been loaded in.
|
||||
if (!this.dataLoaded) {
|
||||
this.fetchData(this.page);
|
||||
this.dataLoaded = true;
|
||||
}
|
||||
},
|
||||
|
||||
overlayClick: function (e) {
|
||||
if (e.target.className === 'overlay') {
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
hide: function () {
|
||||
this.$els.overlay.style.display = 'none';
|
||||
},
|
||||
|
||||
saveImageDetails: function (e) {
|
||||
e.preventDefault();
|
||||
this.selectedImage._token = this.token;
|
||||
var form = $(this.$els.imageForm);
|
||||
var url = '/images/update/' + this.selectedImage.id;
|
||||
this.$http.put(url, this.selectedImage).then((response) => {
|
||||
form.showSuccess('Image name updated');
|
||||
}, (response) => {
|
||||
form.showFailure(response.data);
|
||||
});
|
||||
},
|
||||
|
||||
deleteImage: function (e) {
|
||||
e.preventDefault();
|
||||
var _this = this;
|
||||
_this.deleteForm.force = _this.dependantPages !== false;
|
||||
_this.deleteForm._token = _this.token;
|
||||
var url = '/images/' + _this.selectedImage.id;
|
||||
this.$http.delete(url, this.deleteForm).then((response) => {
|
||||
this.images.splice(this.images.indexOf(this.selectedImage), 1);
|
||||
this.selectedImage = false;
|
||||
$(this.$els.imageTitle).showSuccess('Image Deleted');
|
||||
}, (response) => {
|
||||
// Pages failure
|
||||
if (response.status === 400) {
|
||||
_this.dependantPages = response.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
15
resources/assets/js/components/image-picker.html
Normal file
15
resources/assets/js/components/image-picker.html
Normal file
@ -0,0 +1,15 @@
|
||||
|
||||
<div class="image-picker">
|
||||
<div>
|
||||
<img ng-if="image && image !== 'none'" ng-src="{{image}}" ng-class="{{imageClass}}" alt="Image Preview">
|
||||
<img ng-if="image === '' && defaultImage" ng-src="{{defaultImage}}" ng-class="{{imageClass}}" alt="Image Preview">
|
||||
</div>
|
||||
<button class="button" type="button" ng-click="showImageManager()">Select Image</button>
|
||||
<br>
|
||||
|
||||
<button class="text-button" ng-click="reset()" type="button">Reset</button>
|
||||
<span ng-show="showRemove" class="sep">|</span>
|
||||
<button ng-show="showRemove" class="text-button neg" ng-click="remove()" type="button">Remove</button>
|
||||
|
||||
<input type="hidden" ng-attr-name="{{name}}" ng-attr-id="{{name}}" ng-attr-value="{{value}}">
|
||||
</div>
|
||||
@ -1,95 +0,0 @@
|
||||
|
||||
<template>
|
||||
<div class="image-picker">
|
||||
<div>
|
||||
<img v-if="image && image !== 'none'" :src="image" :class="imageClass" alt="Image Preview">
|
||||
<img v-if="image === '' && defaultImage" :src="defaultImage" :class="imageClass" alt="Image Preview">
|
||||
</div>
|
||||
<button class="button" type="button" @click="showImageManager">Select Image</button>
|
||||
<br>
|
||||
<button class="text-button" @click="reset" type="button">Reset</button> <span v-show="showRemove" class="sep">|</span> <button v-show="showRemove" class="text-button neg" @click="remove" type="button">Remove</button>
|
||||
<input type="hidden" :name="name" :id="name" v-model="value">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
props: {
|
||||
currentImage: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
currentId: {
|
||||
required: false,
|
||||
default: 'false',
|
||||
type: String
|
||||
},
|
||||
name: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
defaultImage: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
imageClass: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
resizeWidth: {
|
||||
type: String
|
||||
},
|
||||
resizeHeight: {
|
||||
type: String
|
||||
},
|
||||
resizeCrop: {
|
||||
type: Boolean
|
||||
},
|
||||
showRemove: {
|
||||
type: Boolean,
|
||||
default: 'true'
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
image: this.currentImage,
|
||||
value: false
|
||||
}
|
||||
},
|
||||
compiled: function() {
|
||||
this.value = this.currentId === 'false' ? this.currentImage : this.currentId;
|
||||
},
|
||||
methods: {
|
||||
setCurrentValue: function(imageModel, imageUrl) {
|
||||
this.image = imageUrl;
|
||||
this.value = this.currentId === 'false' ? imageUrl : imageModel.id;
|
||||
},
|
||||
showImageManager: function(e) {
|
||||
ImageManager.show((image) => {
|
||||
this.updateImageFromModel(image);
|
||||
});
|
||||
},
|
||||
reset: function() {
|
||||
this.setCurrentValue({id: 0}, this.defaultImage);
|
||||
},
|
||||
remove: function() {
|
||||
this.image = 'none';
|
||||
this.value = 'none';
|
||||
},
|
||||
updateImageFromModel: function(model) {
|
||||
var isResized = this.resizeWidth && this.resizeHeight;
|
||||
|
||||
if (!isResized) {
|
||||
this.setCurrentValue(model, model.url);
|
||||
return;
|
||||
}
|
||||
|
||||
var cropped = this.resizeCrop ? 'true' : 'false';
|
||||
var requestString = '/images/thumb/' + model.id + '/' + this.resizeWidth + '/' + this.resizeHeight + '/' + cropped;
|
||||
this.$http.get(requestString).then((response) => {
|
||||
this.setCurrentValue(model, response.data.url);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user