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

Updated image controller styling and added preview option

Browse Source 
The notification system was also updated so it can be used from JavaScript events such as image manager uploads.

Closes #25
This commit is contained in:
Dan Brown
2016-02-07 10:14:11 +00:00
parent 8e8d582bc6
commit 8296782149
8 changed files with 164 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
resources/assets/js/controllers.js
View File

@ -1,6 +1,6 @@
"use strict";
module.exports = function (ngApp) {
module.exports = function (ngApp, events) {
ngApp.controller('ImageManagerController', ['$scope', '$attrs', '$http', '$timeout', 'imageManagerService',
function ($scope, $attrs, $http, $timeout, imageManagerService) {
@ -17,21 +17,40 @@ module.exports = function (ngApp) {
var dataLoaded = false;
var callback = false;
/**
* Simple returns the appropriate upload url depending on the image type set.
* @returns {string}
*/
$scope.getUploadUrl = function () {
return '/images/' + $scope.imageType + '/upload';
};
/**
* Runs on image upload, Adds an image to local list of images
* and shows a success message to the user.
* @param file
* @param data
*/
$scope.uploadSuccess = function (file, data) {
$scope.$apply(() => {
$scope.images.unshift(data);
});
events.emit('success', 'Image uploaded');
};
/**
* Runs the callback and hides the image manager.
* @param returnData
*/
function callbackAndHide(returnData) {
if (callback) callback(returnData);
$scope.showing = false;
}
/**
* Image select action. Checks if a double-click was fired.
* @param image
*/
$scope.imageSelect = function (image) {
var dblClickTime = 300;
var currentTime = Date.now();
@ -48,10 +67,19 @@ module.exports = function (ngApp) {
previousClickTime = currentTime;
};
/**
* Action that runs when the 'Select image' button is clicked.
* Runs the callback and hides the image manager.
*/
$scope.selectButtonClick = function () {
callbackAndHide($scope.selectedImage);
};
/**
* Show the image manager.
* Takes a callback to execute later on.
* @param doneCallback
*/
function show(doneCallback) {
callback = doneCallback;
$scope.showing = true;
@ -62,6 +90,8 @@ module.exports = function (ngApp) {
}
}
// Connects up the image manger so it can be used externally
// such as from TinyMCE.
imageManagerService.show = show;
imageManagerService.showExternal = function (doneCallback) {
$scope.$apply(() => {
@ -70,10 +100,16 @@ module.exports = function (ngApp) {
};
window.ImageManager = imageManagerService;
/**
* Hide the image manager
*/
$scope.hide = function () {
$scope.showing = false;
};
/**
* Fetch the list image data from the server.
*/
function fetchData() {
var url = '/images/' + $scope.imageType + '/all/' + page;
$http.get(url).then((response) => {
@ -82,28 +118,33 @@ module.exports = function (ngApp) {
page++;
});
}
$scope.fetchData = fetchData;
/**
* Save the details of an image.
* @param event
*/
$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);
events.emit('success', 'Image details updated');
}, (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);
events.emit('error', message);
});
};
/**
* Delete an image from system and notify of success.
* Checks if it should force delete when an image
* has dependant pages.
* @param event
*/
$scope.deleteImage = function (event) {
event.preventDefault();
var force = $scope.dependantPages !== false;
@ -112,10 +153,7 @@ module.exports = function (ngApp) {
$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);
events.emit('success', 'Image successfully deleted');
}, (response) => {
// Pages failure
if (response.status === 400) {
@ -124,6 +162,15 @@ module.exports = function (ngApp) {
});
};
/**
* Simple date creator used to properly format dates.
* @param stringDate
* @returns {Date}
*/
$scope.getDate = function(stringDate) {
return new Date(stringDate);
};
}]);

2
resources/assets/js/directives.js
View File

@ -5,7 +5,7 @@ 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) {
module.exports = function (ngApp, events) {
/**
* Toggle Switches

49
resources/assets/js/global.js
View File

@ -1,4 +1,4 @@
"use strict";
// AngularJS - Create application and load components
var angular = require('angular');
@ -7,9 +7,31 @@ 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 Event System
var Events = {
listeners: {},
emit: function (eventName, eventData) {
if (typeof this.listeners[eventName] === 'undefined') return this;
var eventsToStart = this.listeners[eventName];
for (let i = 0; i < eventsToStart.length; i++) {
var event = eventsToStart[i];
event(eventData);
}
return this;
},
listen: function (eventName, callback) {
if (typeof this.listeners[eventName] === 'undefined') this.listeners[eventName] = [];
this.listeners[eventName].push(callback);
return this;
}
};
window.Events = Events;
var services = require('./services')(ngApp, Events);
var directives = require('./directives')(ngApp, Events);
var controllers = require('./controllers')(ngApp, Events);
//Global jQuery Config & Extensions
@ -32,8 +54,25 @@ $.expr[":"].contains = $.expr.createPseudo(function (arg) {
// Global jQuery Elements
$(function () {
var notifications = $('.notification');
var successNotification = notifications.filter('.pos');
var errorNotification = notifications.filter('.neg');
// Notification Events
window.Events.listen('success', function (text) {
successNotification.hide();
successNotification.find('span').text(text);
setTimeout(() => {
successNotification.show();
}, 1);
});
window.Events.listen('error', function (text) {
errorNotification.find('span').text(text);
errorNotification.show();
});
// Notification hiding
$('.notification').click(function () {
notifications.click(function () {
$(this).fadeOut(100);
});

7
resources/assets/js/pages/page-form.js
View File

@ -8,7 +8,6 @@ module.exports = {
statusbar: false,
menubar: false,
paste_data_images: false,
//height: 700,
extended_valid_elements: 'pre[*]',
automatic_uploads: false,
valid_children: "-div[p|pre|h1|h2|h3|h4|h5|h6|blockquote]",
@ -31,7 +30,7 @@ module.exports = {
alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-right'},
},
file_browser_callback: function (field_name, url, type, win) {
ImageManager.show(function (image) {
window.ImageManager.showExternal(function (image) {
win.document.getElementById(field_name).value = image.url;
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
@ -40,6 +39,10 @@ module.exports = {
} else {
win.document.getElementById(field_name).fireEvent("onchange");
}
var html = '<a href="' + image.url + '" target="_blank">';
html += '<img src="' + image.thumbs.display + '" alt="' + image.name + '">';
html += '</a>';
win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
});
},
paste_preprocess: function (plugin, args) {

2
resources/assets/js/services.js
View File

@ -1,6 +1,6 @@
"use strict";
module.exports = function(ngApp) {
module.exports = function(ngApp, events) {
ngApp.factory('imageManagerService', function() {
return {