diff --git a/resources/assets/js/controllers.js b/resources/assets/js/controllers.js
index 5d8990754..76def6abd 100644
--- a/resources/assets/js/controllers.js
+++ b/resources/assets/js/controllers.js
@@ -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);
+ };
+
}]);
diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
index 6ccfcf855..60abde6e9 100644
--- a/resources/assets/js/directives.js
+++ b/resources/assets/js/directives.js
@@ -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
diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js
index 5b0b6f9f0..00c5f13c2 100644
--- a/resources/assets/js/global.js
+++ b/resources/assets/js/global.js
@@ -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);
});
diff --git a/resources/assets/js/pages/page-form.js b/resources/assets/js/pages/page-form.js
index 756a9211b..290b7c653 100644
--- a/resources/assets/js/pages/page-form.js
+++ b/resources/assets/js/pages/page-form.js
@@ -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 = '';
+ html += '';
+ html += '';
+ win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
});
},
paste_preprocess: function (plugin, args) {
diff --git a/resources/assets/js/services.js b/resources/assets/js/services.js
index 684a68450..cd2759c54 100644
--- a/resources/assets/js/services.js
+++ b/resources/assets/js/services.js
@@ -1,6 +1,6 @@
"use strict";
-module.exports = function(ngApp) {
+module.exports = function(ngApp, events) {
ngApp.factory('imageManagerService', function() {
return {
diff --git a/resources/assets/sass/_image-manager.scss b/resources/assets/sass/_image-manager.scss
index babbad0c1..8b18d24f3 100644
--- a/resources/assets/sass/_image-manager.scss
+++ b/resources/assets/sass/_image-manager.scss
@@ -21,7 +21,6 @@
border-radius: 4px;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
overflow: hidden;
- max-width: 1340px;
position: fixed;
top: 0;
bottom: 0;
@@ -44,18 +43,49 @@
right: 0;
}
-.image-manager-list img {
+.image-manager-list .image {
display: block;
+ position: relative;
border-radius: 0;
float: left;
margin: 0;
cursor: pointer;
width: (100%/6);
height: auto;
- border: 1px solid #FFF;
+ border: 1px solid #DDD;
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
transition: all cubic-bezier(.4, 0, 1, 1) 160ms;
+ overflow: hidden;
&.selected {
transform: scale3d(0.92, 0.92, 0.92);
+ border: 1px solid #444;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+ }
+ img {
+ width: 100%;
+ max-width: 100%;
+ display: block;
+ }
+ .image-meta {
+ position: absolute;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+ color: #EEE;
+ background-color: rgba(0, 0, 0, 0.4);
+ font-size: 10px;
+ padding: 3px 4px;
+ span {
+ display: block;
+ }
+ }
+ @include smaller-than($xl) {
+ width: (100%/4);
+ }
+ @include smaller-than($m) {
+ .image-meta {
+ display: none;
+ }
}
}
diff --git a/resources/views/partials/image-manager.blade.php b/resources/views/partials/image-manager.blade.php
index 6dc528d23..bf7bf445c 100644
--- a/resources/views/partials/image-manager.blade.php
+++ b/resources/views/partials/image-manager.blade.php
@@ -5,11 +5,14 @@