Updated image controller styling and added preview option

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

View File

@ -1,6 +1,6 @@
"use strict"; "use strict";
module.exports = function (ngApp) { module.exports = function (ngApp, events) {
ngApp.controller('ImageManagerController', ['$scope', '$attrs', '$http', '$timeout', 'imageManagerService', ngApp.controller('ImageManagerController', ['$scope', '$attrs', '$http', '$timeout', 'imageManagerService',
function ($scope, $attrs, $http, $timeout, imageManagerService) { function ($scope, $attrs, $http, $timeout, imageManagerService) {
@ -17,21 +17,40 @@ module.exports = function (ngApp) {
var dataLoaded = false; var dataLoaded = false;
var callback = false; var callback = false;
/**
* Simple returns the appropriate upload url depending on the image type set.
* @returns {string}
*/
$scope.getUploadUrl = function () { $scope.getUploadUrl = function () {
return '/images/' + $scope.imageType + '/upload'; 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.uploadSuccess = function (file, data) {
$scope.$apply(() => { $scope.$apply(() => {
$scope.images.unshift(data); $scope.images.unshift(data);
}); });
events.emit('success', 'Image uploaded');
}; };
/**
* Runs the callback and hides the image manager.
* @param returnData
*/
function callbackAndHide(returnData) { function callbackAndHide(returnData) {
if (callback) callback(returnData); if (callback) callback(returnData);
$scope.showing = false; $scope.showing = false;
} }
/**
* Image select action. Checks if a double-click was fired.
* @param image
*/
$scope.imageSelect = function (image) { $scope.imageSelect = function (image) {
var dblClickTime = 300; var dblClickTime = 300;
var currentTime = Date.now(); var currentTime = Date.now();
@ -48,10 +67,19 @@ module.exports = function (ngApp) {
previousClickTime = currentTime; previousClickTime = currentTime;
}; };
/**
* Action that runs when the 'Select image' button is clicked.
* Runs the callback and hides the image manager.
*/
$scope.selectButtonClick = function () { $scope.selectButtonClick = function () {
callbackAndHide($scope.selectedImage); callbackAndHide($scope.selectedImage);
}; };
/**
* Show the image manager.
* Takes a callback to execute later on.
* @param doneCallback
*/
function show(doneCallback) { function show(doneCallback) {
callback = doneCallback; callback = doneCallback;
$scope.showing = true; $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.show = show;
imageManagerService.showExternal = function (doneCallback) { imageManagerService.showExternal = function (doneCallback) {
$scope.$apply(() => { $scope.$apply(() => {
@ -70,10 +100,16 @@ module.exports = function (ngApp) {
}; };
window.ImageManager = imageManagerService; window.ImageManager = imageManagerService;
/**
* Hide the image manager
*/
$scope.hide = function () { $scope.hide = function () {
$scope.showing = false; $scope.showing = false;
}; };
/**
* Fetch the list image data from the server.
*/
function fetchData() { function fetchData() {
var url = '/images/' + $scope.imageType + '/all/' + page; var url = '/images/' + $scope.imageType + '/all/' + page;
$http.get(url).then((response) => { $http.get(url).then((response) => {
@ -82,28 +118,33 @@ module.exports = function (ngApp) {
page++; page++;
}); });
} }
$scope.fetchData = fetchData;
/**
* Save the details of an image.
* @param event
*/
$scope.saveImageDetails = function (event) { $scope.saveImageDetails = function (event) {
event.preventDefault(); event.preventDefault();
var url = '/images/update/' + $scope.selectedImage.id; var url = '/images/update/' + $scope.selectedImage.id;
$http.put(url, this.selectedImage).then((response) => { $http.put(url, this.selectedImage).then((response) => {
$scope.imageUpdateSuccess = true; events.emit('success', 'Image details updated');
$timeout(() => {
$scope.imageUpdateSuccess = false;
}, 3000);
}, (response) => { }, (response) => {
var errors = response.data; var errors = response.data;
var message = ''; var message = '';
Object.keys(errors).forEach((key) => { Object.keys(errors).forEach((key) => {
message += errors[key].join('\n'); message += errors[key].join('\n');
}); });
$scope.imageUpdateFailure = message; events.emit('error', message);
$timeout(() => {
$scope.imageUpdateFailure = false;
}, 5000);
}); });
}; };
/**
* 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) { $scope.deleteImage = function (event) {
event.preventDefault(); event.preventDefault();
var force = $scope.dependantPages !== false; var force = $scope.dependantPages !== false;
@ -112,10 +153,7 @@ module.exports = function (ngApp) {
$http.delete(url).then((response) => { $http.delete(url).then((response) => {
$scope.images.splice($scope.images.indexOf($scope.selectedImage), 1); $scope.images.splice($scope.images.indexOf($scope.selectedImage), 1);
$scope.selectedImage = false; $scope.selectedImage = false;
$scope.imageDeleteSuccess = true; events.emit('success', 'Image successfully deleted');
$timeout(() => {
$scope.imageDeleteSuccess = false;
}, 3000);
}, (response) => { }, (response) => {
// Pages failure // Pages failure
if (response.status === 400) { 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);
};
}]); }]);

View File

@ -5,7 +5,7 @@ var toggleSwitchTemplate = require('./components/toggle-switch.html');
var imagePickerTemplate = require('./components/image-picker.html'); var imagePickerTemplate = require('./components/image-picker.html');
var dropZoneTemplate = require('./components/drop-zone.html'); var dropZoneTemplate = require('./components/drop-zone.html');
module.exports = function (ngApp) { module.exports = function (ngApp, events) {
/** /**
* Toggle Switches * Toggle Switches

View File

@ -1,4 +1,4 @@
"use strict";
// AngularJS - Create application and load components // AngularJS - Create application and load components
var angular = require('angular'); var angular = require('angular');
@ -7,9 +7,31 @@ var ngAnimate = require('angular-animate');
var ngSanitize = require('angular-sanitize'); var ngSanitize = require('angular-sanitize');
var ngApp = angular.module('bookStack', ['ngResource', 'ngAnimate', 'ngSanitize']); 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 //Global jQuery Config & Extensions
@ -32,8 +54,25 @@ $.expr[":"].contains = $.expr.createPseudo(function (arg) {
// Global jQuery Elements // Global jQuery Elements
$(function () { $(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 hiding
$('.notification').click(function () { notifications.click(function () {
$(this).fadeOut(100); $(this).fadeOut(100);
}); });

View File

@ -8,7 +8,6 @@ module.exports = {
statusbar: false, statusbar: false,
menubar: false, menubar: false,
paste_data_images: false, paste_data_images: false,
//height: 700,
extended_valid_elements: 'pre[*]', extended_valid_elements: 'pre[*]',
automatic_uploads: false, automatic_uploads: false,
valid_children: "-div[p|pre|h1|h2|h3|h4|h5|h6|blockquote]", 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'}, 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) { 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; win.document.getElementById(field_name).value = image.url;
if ("createEvent" in document) { if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents"); var evt = document.createEvent("HTMLEvents");
@ -40,6 +39,10 @@ module.exports = {
} else { } else {
win.document.getElementById(field_name).fireEvent("onchange"); 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) { paste_preprocess: function (plugin, args) {

View File

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

View File

@ -21,7 +21,6 @@
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
overflow: hidden; overflow: hidden;
max-width: 1340px;
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -44,18 +43,49 @@
right: 0; right: 0;
} }
.image-manager-list img { .image-manager-list .image {
display: block; display: block;
position: relative;
border-radius: 0; border-radius: 0;
float: left; float: left;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
width: (100%/6); width: (100%/6);
height: auto; 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; transition: all cubic-bezier(.4, 0, 1, 1) 160ms;
overflow: hidden;
&.selected { &.selected {
transform: scale3d(0.92, 0.92, 0.92); 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;
}
} }
} }

View File

@ -5,11 +5,14 @@
<div class="image-manager-content"> <div class="image-manager-content">
<div class="image-manager-list"> <div class="image-manager-list">
<div ng-repeat="image in images"> <div ng-repeat="image in images">
<img class="anim fadeIn" <div class="image anim fadeIn" ng-style="{animationDelay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'}"
ng-class="{selected: (image==selectedImage)}" ng-class="{selected: (image==selectedImage)}" ng-click="imageSelect(image)">
ng-src="@{{image.thumbs.gallery}}" ng-attr-alt="@{{image.title}}" ng-attr-title="@{{image.name}}" <img ng-src="@{{image.thumbs.gallery}}" ng-attr-alt="@{{image.title}}" ng-attr-title="@{{image.name}}">
ng-click="imageSelect(image)" <div class="image-meta">
ng-style="{animationDelay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'}"> <span class="name" ng-bind="image.name"></span>
<span class="date">Uploaded @{{ getDate(image.created_at) | date:'mediumDate' }}</span>
</div>
</div>
</div> </div>
<div class="load-more" ng-show="hasMore" ng-click="fetchData()">Load More</div> <div class="load-more" ng-show="hasMore" ng-click="fetchData()">Load More</div>
</div> </div>
@ -19,18 +22,20 @@
<div class="image-manager-sidebar"> <div class="image-manager-sidebar">
<h2>Images</h2> <h2>Images</h2>
<hr class="even">
<drop-zone upload-url="@{{getUploadUrl()}}" event-success="uploadSuccess"></drop-zone> <drop-zone upload-url="@{{getUploadUrl()}}" event-success="uploadSuccess"></drop-zone>
<div class="image-manager-details anim fadeIn" ng-show="selectedImage"> <div class="image-manager-details anim fadeIn" ng-show="selectedImage">
<hr class="even"> <hr class="even">
<form ng-submit="saveImageDetails($event)"> <form ng-submit="saveImageDetails($event)">
<div>
<a ng-href="@{{selectedImage.url}}" target="_blank" style="display: block;">
<img ng-src="@{{selectedImage.thumbs.gallery}}" ng-attr-alt="@{{selectedImage.title}}" ng-attr-title="@{{selectedImage.name}}">
</a>
</div>
<div class="form-group"> <div class="form-group">
<label for="name">Image Name</label> <label for="name">Image Name</label>
<input type="text" id="name" name="name" ng-model="selectedImage.name"> <input type="text" id="name" name="name" ng-model="selectedImage.name">
<p class="text-pos text-small" ng-show="imageUpdateSuccess"><i class="fa fa-check"></i> Image name updated</p>
<p class="text-neg text-small" ng-show="imageUpdateFailure"><i class="fa fa-times"></i> <span ng-bind="imageUpdateFailure"></span></p>
</div> </div>
</form> </form>
@ -53,8 +58,6 @@
</form> </form>
</div> </div>
<p class="text-pos" ng-show="imageDeleteSuccess"><i class="fa fa-check"></i> Image deleted</p>
<div class="image-manager-bottom"> <div class="image-manager-bottom">
<button class="button pos anim fadeIn" ng-show="selectedImage" ng-click="selectButtonClick()"> <button class="button pos anim fadeIn" ng-show="selectedImage" ng-click="selectButtonClick()">
<i class="zmdi zmdi-square-right"></i>Select Image <i class="zmdi zmdi-square-right"></i>Select Image

View File

@ -1,11 +1,8 @@
@if(Session::has('success'))
<div class="notification anim pos">
<i class="zmdi zmdi-mood"></i> <span>{{ Session::get('success') }}</span>
</div>
@endif
@if(Session::has('error')) <div class="notification anim pos" @if(!Session::has('success')) style="display:none;" @endif>
<div class="notification anim neg stopped"> <i class="zmdi zmdi-check-circle"></i> <span>{{ Session::get('success') }}</span>
<i class="zmdi zmdi-alert-circle"></i> <span>{{ Session::get('error') }}</span> </div>
</div>
@endif <div class="notification anim neg stopped" @if(!Session::has('error')) style="display:none;" @endif>
<i class="zmdi zmdi-alert-circle"></i> <span>{{ Session::get('error') }}</span>
</div>