github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-26 00:30:02 +08:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Page Attachments - Improved UI, Now initially complete

Browse Source 
Closes #62
This commit is contained in:
Dan Brown
2016-10-23 17:55:48 +01:00
parent 91220239e5
commit 30458405ce
11 changed files with 222 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -538,6 +538,10 @@ module.exports = function (ngApp, events) {
$scope.files = [];
$scope.editFile = false;
$scope.file = getCleanFile();
$scope.errors = {
link: {},
edit: {}
};
function getCleanFile() {
return {
@ -567,7 +571,7 @@ module.exports = function (ngApp, events) {
currentOrder = newOrder;
$http.put(`/files/sort/page/${pageId}`, {files: $scope.files}).then(resp => {
events.emit('success', resp.data.message);
}, checkError);
}, checkError('sort'));
}
/**
@ -587,7 +591,7 @@ module.exports = function (ngApp, events) {
$http.get(url).then(resp => {
$scope.files = resp.data;
currentOrder = resp.data.map(file => {return file.id}).join(':');
}, checkError);
}, checkError('get'));
}
getFiles();
@ -599,7 +603,7 @@ module.exports = function (ngApp, events) {
*/
$scope.uploadSuccess = function (file, data) {
$scope.$apply(() => {
$scope.files.unshift(data);
$scope.files.push(data);
});
events.emit('success', 'File uploaded');
};
@ -612,10 +616,10 @@ module.exports = function (ngApp, events) {
$scope.uploadSuccessUpdate = function (file, data) {
$scope.$apply(() => {
let search = filesIndexOf(data);
if (search !== -1) $scope.files[search] = file;
if (search !== -1) $scope.files[search] = data;
if ($scope.editFile) {
$scope.editFile = data;
$scope.editFile = angular.copy(data);
data.link = '';
}
});
@ -627,10 +631,14 @@ module.exports = function (ngApp, events) {
* @param file
*/
$scope.deleteFile = function(file) {
if (!file.deleting) {
file.deleting = true;
return;
}
$http.delete(`/files/${file.id}`).then(resp => {
events.emit('success', resp.data.message);
$scope.files.splice($scope.files.indexOf(file), 1);
}, checkError);
}, checkError('delete'));
};
/**
@ -641,10 +649,10 @@ module.exports = function (ngApp, events) {
$scope.attachLinkSubmit = function(file) {
file.uploaded_to = pageId;
$http.post('/files/link', file).then(resp => {
$scope.files.unshift(resp.data);
$scope.files.push(resp.data);
events.emit('success', 'Link attached');
$scope.file = getCleanFile();
}, checkError);
}, checkError('link'));
};
/**
@ -652,8 +660,9 @@ module.exports = function (ngApp, events) {
* @param fileId
*/
$scope.startEdit = function(file) {
console.log(file);
$scope.editFile = angular.copy(file);
if (!file.external) $scope.editFile.link = '';
$scope.editFile.link = (file.external) ? file.path : '';
};
/**
@ -670,16 +679,23 @@ module.exports = function (ngApp, events) {
$scope.updateFile = function(file) {
$http.put(`/files/${file.id}`, file).then(resp => {
let search = filesIndexOf(resp.data);
if (search !== -1) $scope.files[search] = file;
if (search !== -1) $scope.files[search] = resp.data;
if ($scope.editFile && !file.external) {
$scope.editFile.link = '';
}
$scope.editFile = false;
events.emit('success', 'Attachment details updated');
});
}, checkError('edit'));
};
/**
* Get the url of a file.
*/
$scope.getFileUrl = function(file) {
return window.baseUrl('/files/' + file.id);
}
/**
* Search the local files via another file object.
* Used to search via object copies.
@ -697,9 +713,16 @@ module.exports = function (ngApp, events) {
* Check for an error response in a ajax request.
* @param response
*/
function checkError(response) {
if (typeof response.data !== 'undefined' && typeof response.data.error !== 'undefined') {
events.emit('error', response.data.error);
function checkError(errorGroupName) {
$scope.errors[errorGroupName] = {};
return function(response) {
if (typeof response.data !== 'undefined' && typeof response.data.error !== 'undefined') {
events.emit('error', response.data.error);
}
if (typeof response.data !== 'undefined' && typeof response.data.validation !== 'undefined') {
$scope.errors[errorGroupName] = response.data.validation;
console.log($scope.errors[errorGroupName])
}
}
}

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

@ -33,6 +33,59 @@ module.exports = function (ngApp, events) {
};
});
/**
* Common tab controls using simple jQuery functions.
*/
ngApp.directive('tabContainer', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
const $content = element.find('[tab-content]');
const $buttons = element.find('[tab-button]');
if (attrs.tabContainer) {
let initial = attrs.tabContainer;
$buttons.filter(`[tab-button="${initial}"]`).addClass('selected');
$content.hide().filter(`[tab-content="${initial}"]`).show();
} else {
$content.hide().first().show();
$buttons.first().addClass('selected');
}
$buttons.click(function() {
let clickedTab = $(this);
$buttons.removeClass('selected');
$content.hide();
let name = clickedTab.addClass('selected').attr('tab-button');
$content.filter(`[tab-content="${name}"]`).show();
});
}
};
});
/**
* Sub form component to allow inner-form sections to act like thier own forms.
*/
ngApp.directive('subForm', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.on('keypress', e => {
if (e.keyCode === 13) {
submitEvent(e);
}
});
element.find('button[type="submit"]').click(submitEvent);
function submitEvent(e) {
e.preventDefault()
if (attrs.subForm) scope.$eval(attrs.subForm);
}
}
};
});
/**
* Image Picker
@ -489,8 +542,8 @@ module.exports = function (ngApp, events) {
link: function (scope, elem, attrs) {
// Get common elements
const $buttons = elem.find('[tab-button]');
const $content = elem.find('[tab-content]');
const $buttons = elem.find('[toolbox-tab-button]');
const $content = elem.find('[toolbox-tab-content]');
const $toggle = elem.find('[toolbox-toggle]');
// Handle toolbox toggle click
@ -502,17 +555,17 @@ module.exports = function (ngApp, events) {
function setActive(tabName, openToolbox) {
$buttons.removeClass('active');
$content.hide();
$buttons.filter(`[tab-button="${tabName}"]`).addClass('active');
$content.filter(`[tab-content="${tabName}"]`).show();
$buttons.filter(`[toolbox-tab-button="${tabName}"]`).addClass('active');
$content.filter(`[toolbox-tab-content="${tabName}"]`).show();
if (openToolbox) elem.addClass('open');
}
// Set the first tab content active on load
setActive($content.first().attr('tab-content'), false);
setActive($content.first().attr('toolbox-tab-content'), false);
// Handle tab button click
$buttons.click(function (e) {
let name = $(this).attr('tab-button');
let name = $(this).attr('toolbox-tab-button');
setActive(name, true);
});
}