1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-30 04:23:11 +03:00

Moved all vuejs parts over to angular

This commit is contained in:
Dan Brown
2015-12-30 18:38:18 +00:00
parent 3347b3b2f5
commit 46c2e8b14e
24 changed files with 452 additions and 440 deletions

View File

@ -0,0 +1,3 @@
<div class="dropzone-container">
<div class="dz-message">Drop files or click here to upload</div>
</div>

View File

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

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

View File

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

View File

@ -0,0 +1,162 @@
"use strict";
module.exports = function(ngApp) {
ngApp.controller('ImageManagerController', ['$scope', '$attrs', '$http', '$timeout','imageManagerService',
function($scope, $attrs, $http, $timeout, imageManagerService) {
$scope.images = [];
$scope.imageType = $attrs.imageType;
$scope.selectedImage = false;
$scope.dependantPages = false;
$scope.showing = false;
$scope.hasMore = false;
$scope.imageUpdateSuccess = false;
$scope.imageDeleteSuccess = false;
var page = 0;
var previousClickTime = 0;
var dataLoaded = false;
var callback = false;
$scope.getUploadUrl = function() {
return '/images/' + $scope.imageType + '/upload';
};
$scope.uploadSuccess = function(file, data) {
$scope.$apply(() => {
$scope.images.unshift(data);
});
};
function callbackAndHide(returnData) {
if (callback) callback(returnData);
$scope.showing = false;
}
$scope.imageSelect = function (image) {
var dblClickTime = 300;
var currentTime = Date.now();
var timeDiff = currentTime - previousClickTime;
if (timeDiff < dblClickTime) {
// If double click
callbackAndHide(image);
} else {
// If single
$scope.selectedImage = image;
$scope.dependantPages = false;
}
previousClickTime = currentTime;
};
$scope.selectButtonClick = function() {
callbackAndHide($scope.selectedImage);
};
function show(doneCallback) {
callback = doneCallback;
$scope.showing = true;
// Get initial images if they have not yet been loaded in.
if (!dataLoaded) {
fetchData();
dataLoaded = true;
}
}
imageManagerService.show = show;
imageManagerService.showExternal = function(doneCallback) {
$scope.$apply(() => {
show(doneCallback);
});
};
window.ImageManager = imageManagerService;
$scope.hide = function() {
$scope.showing = false;
};
function fetchData() {
var url = '/images/' + $scope.imageType + '/all/' + page;
$http.get(url).then((response) => {
$scope.images = $scope.images.concat(response.data.images);
$scope.hasMore = response.data.hasMore;
page++;
});
}
$scope.saveImageDetails = function(event) {
event.preventDefault();
var url = '/images/update/' + $scope.selectedImage.id;
$http.put(url, this.selectedImage).then((response) => {
$scope.imageUpdateSuccess = true;
$timeout(() => {
$scope.imageUpdateSuccess = false;
}, 3000);
}, (response) => {
var errors = response.data;
var message = '';
Object.keys(errors).forEach((key) => {
message += errors[key].join('\n');
});
$scope.imageUpdateFailure = message;
$timeout(() => {
$scope.imageUpdateFailure = false;
}, 5000);
});
};
$scope.deleteImage = function(event) {
event.preventDefault();
var force = $scope.dependantPages !== false;
var url = '/images/' + $scope.selectedImage.id;
if (force) url += '?force=true';
$http.delete(url).then((response) => {
$scope.images.splice($scope.images.indexOf($scope.selectedImage), 1);
$scope.selectedImage = false;
$scope.imageDeleteSuccess = true;
$timeout(() => {
$scope.imageDeleteSuccess = false;
}, 3000);
}, (response) => {
// Pages failure
if (response.status === 400) {
$scope.dependantPages = response.data;
}
});
};
}]);
ngApp.controller('BookShowController', ['$scope', '$http', '$attrs', function($scope, $http, $attrs) {
$scope.searching = false;
$scope.searchTerm = '';
$scope.searchResults = '';
$scope.searchBook = function (e) {
e.preventDefault();
var term = $scope.searchTerm;
if (term.length == 0) return;
$scope.searching = true;
$scope.searchResults = '';
var searchUrl = '/search/book/' + $attrs.bookId;
searchUrl += '?term=' + encodeURIComponent(term);
$http.get(searchUrl).then((response) => {
$scope.searchResults = response.data;
});
};
$scope.checkSearchForm = function () {
if ($scope.searchTerm.length < 1) {
$scope.searching = false;
}
};
$scope.clearSearch = function() {
$scope.searching = false;
$scope.searchTerm = '';
};
}]);
};

View File

@ -1,11 +1,15 @@
"use strict";
var DropZone = require('dropzone');
var toggleSwitchTemplate = require('./components/toggle-switch.html');
var imagePickerTemplate = require('./components/image-picker.html');
var dropZoneTemplate = require('./components/drop-zone.html');
module.exports = function(ngApp) {
/**
* Toggle Switches
* Have basic on/off functionality.
* Has basic on/off functionality.
* Use string values of 'true' & 'false' to dictate the current state.
*/
ngApp.directive('toggleSwitch', function() {
@ -29,4 +33,127 @@ module.exports = function(ngApp) {
});
/**
* Image Picker
* Is a simple front-end interface that connects to an ImageManager if present.
*/
ngApp.directive('imagePicker', ['$http', 'imageManagerService', function($http, imageManagerService) {
return {
restrict: 'E',
template: imagePickerTemplate,
scope: {
name: '@',
resizeHeight: '@',
resizeWidth: '@',
resizeCrop: '@',
showRemove: '=',
currentImage: '@',
currentId: '@',
defaultImage: '@',
imageClass: '@'
},
link: function(scope, element, attrs) {
var usingIds = typeof scope.currentId !== 'undefined' || scope.currentId === 'false';
scope.image = scope.currentImage;
scope.value = scope.currentImage || '';
function setImage(imageModel, imageUrl) {
scope.image = imageUrl;
scope.value = usingIds ? imageModel.id : imageUrl;
}
scope.reset = function() {
setImage({id: 0}, scope.defaultImage);
};
scope.remove = function() {
scope.image = 'none';
scope.value = 'none';
};
scope.showImageManager = function() {
imageManagerService.show((image) => {
scope.updateImageFromModel(image);
});
};
scope.updateImageFromModel = function(model) {
var isResized = scope.resizeWidth && scope.resizeHeight;
if (!isResized) {
scope.$apply(() => {
setImage(model, model.url);
});
return;
}
var cropped = scope.resizeCrop ? 'true' : 'false';
var requestString = '/images/thumb/' + model.id + '/' + scope.resizeWidth + '/' + scope.resizeHeight + '/' + cropped;
$http.get(requestString).then((response) => {
setImage(model, response.data.url);
});
};
}
};
}]);
/**
* DropZone
* Used for uploading images
*/
ngApp.directive('dropZone', [function() {
return {
restrict: 'E',
template: dropZoneTemplate,
scope: {
uploadUrl: '@',
eventSuccess: '=',
eventError: '='
},
link: function(scope, element, attrs) {
var dropZone = new DropZone(element[0].querySelector('.dropzone-container'), {
url: scope.uploadUrl,
init: function() {
var dz = this;
dz.on('sending', function(file, xhr, data) {
var token = window.document.querySelector('meta[name=token]').getAttribute('content');
data.append('_token', token);
});
if (typeof scope.eventSuccess !== 'undefined') dz.on('success', scope.eventSuccess);
dz.on('success', function(file, data) {
$(file.previewElement).fadeOut(400, function () {
dz.removeFile(file);
});
});
if (typeof scope.eventError !== 'undefined') dz.on('error', scope.eventError);
dz.on('error', function (file, errorMessage, xhr) {
if (errorMessage.file) {
$(file.previewElement).find('[data-dz-errormessage]').text(errorMessage.file[0]);
}
});
}
});
}
};
}]);
ngApp.directive('dropdown', [function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var menu = element.find('ul');
element.find('[dropdown-toggle]').on('click', function() {
menu.show().addClass('anim menuIn');
element.mouseleave(function() {
menu.hide();
menu.removeClass('anim menuIn');
});
});
}
};
}]);
};

View File

@ -6,9 +6,32 @@ window.ZeroClipboard.config({
// AngularJS - Create application and load components
var angular = require('angular');
var angularResource = require('angular-resource');
var app = angular.module('bookStack', ['ngResource']);
var directives = require('./directives')(app);
var ngResource = require('angular-resource');
var ngAnimate = require('angular-animate');
var ngSanitize = require('angular-sanitize');
var ngApp = angular.module('bookStack', ['ngResource', 'ngAnimate', 'ngSanitize']);
var services = require('./services')(ngApp);
var directives = require('./directives')(ngApp);
var controllers = require('./controllers')(ngApp);
//Global jQuery Config & Extensions
// Smooth scrolling
jQuery.fn.smoothScrollTo = function() {
if(this.length === 0) return;
$('body').animate({
scrollTop: this.offset().top - 60 // Adjust to change final scroll position top margin
}, 800); // Adjust to change animations speed (ms)
return this;
};
// Making contains text expression not worry about casing
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
// Global jQuery Elements
$(function () {
@ -18,9 +41,6 @@ $(function () {
$(this).fadeOut(100);
});
// Dropdown toggles
$('[data-dropdown]').dropDown();
// Chapter page list toggles
$('.chapter-toggle').click(function(e) {
e.preventDefault();
@ -30,6 +50,11 @@ $(function () {
});
function elemExists(selector) {
return document.querySelector(selector) !== null;
}
// TinyMCE editor
if(elemExists('#html-editor')) {
var tinyMceOptions = require('./pages/page-form');

View File

@ -1,66 +0,0 @@
// Smooth scrolling
jQuery.fn.smoothScrollTo = function() {
if(this.length === 0) return;
$('body').animate({
scrollTop: this.offset().top - 60 // Adjust to change final scroll position top margin
}, 800); // Adjust to change animations speed (ms)
return this;
};
// Making contains text expression not worry about casing
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
// Show a success message after the element it's called upon.
jQuery.fn.showSuccess = function (message) {
var elem = $(this);
var success = $('<div class="text-pos" style="display:none;"><i class="zmdi zmdi-check-circle"></i>' + message + '</div>');
elem.after(success);
success.slideDown(400, function () {
setTimeout(function () {
success.slideUp(400, function () {
success.remove();
})
}, 2000);
});
};
// Show a failure messages from laravel. Searches for the name of the inputs.
jQuery.fn.showFailure = function (messageMap) {
var elem = $(this);
$.each(messageMap, function (key, messages) {
var input = elem.find('[name="' + key + '"]').last();
var fail = $('<div class="text-neg" style="display:none;"><i class="zmdi zmdi-alert-circle"></i>' + messages.join("\n") + '</div>');
input.after(fail);
fail.slideDown(400, function () {
setTimeout(function () {
fail.slideUp(400, function () {
fail.remove();
})
}, 2000);
});
});
};
// Submit the form that the called upon element sits in.
jQuery.fn.submitForm = function() {
$(this).closest('form').submit();
};
// Dropdown menu display
jQuery.fn.dropDown = function() {
var container = $(this),
menu = container.find('ul');
container.find('[data-dropdown-toggle]').on('click', function() {
menu.show().addClass('anim menuIn');
container.mouseleave(function() {
menu.hide();
menu.removeClass('anim menuIn');
});
});
};

View File

@ -1,32 +0,0 @@
module.exports = {
el: '#book-dashboard',
data: {
searching: false,
searchTerm: '',
searchResults: ''
},
methods: {
searchBook: function (e) {
e.preventDefault();
var term = this.searchTerm;
if (term.length == 0) return;
this.searching = true;
this.searchResults = '';
var searchUrl = this.$els.form.getAttribute('action');
searchUrl += '?term=' + encodeURIComponent(term);
this.$http.get(searchUrl, function (data) {
this.$set('searchResults', data);
});
},
checkSearchForm: function (e) {
if (this.searchTerm.length < 1) {
this.searching = false;
}
},
clearSearch: function(e) {
this.searching = false;
this.searchTerm = '';
}
}
};

View File

@ -98,7 +98,7 @@ module.exports = {
icon: 'image',
tooltip: 'Insert an image',
onclick: function() {
ImageManager.show(function(image) {
window.ImageManager.showExternal(function(image) {
var html = '<a href="'+image.url+'" target="_blank">';
html += '<img src="'+image.thumbs.display+'" alt="'+image.name+'">';
html += '</a>';
@ -106,6 +106,7 @@ module.exports = {
});
}
});
// Paste image-uploads
editor.on('paste', function(e) {
if(e.clipboardData) {

View File

@ -0,0 +1,12 @@
"use strict";
module.exports = function(ngApp) {
ngApp.factory('imageManagerService', function() {
return {
show: false,
showExternal: false
};
});
};