X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/30214fde74c954ee6cf4daeb562764343b546b58..refs/pull/118/head:/resources/assets/js/controllers.js diff --git a/resources/assets/js/controllers.js b/resources/assets/js/controllers.js index 76b8cc67d..8f434bf7e 100644 --- a/resources/assets/js/controllers.js +++ b/resources/assets/js/controllers.js @@ -1,9 +1,12 @@ "use strict"; +var moment = require('moment'); + module.exports = function (ngApp, events) { ngApp.controller('ImageManagerController', ['$scope', '$attrs', '$http', '$timeout', 'imageManagerService', function ($scope, $attrs, $http, $timeout, imageManagerService) { + $scope.images = []; $scope.imageType = $attrs.imageType; $scope.selectedImage = false; @@ -12,19 +15,41 @@ module.exports = function (ngApp, events) { $scope.hasMore = false; $scope.imageUpdateSuccess = false; $scope.imageDeleteSuccess = false; + $scope.uploadedTo = $attrs.uploadedTo; + $scope.view = 'all'; + + $scope.searching = false; + $scope.searchTerm = ''; + var page = 0; var previousClickTime = 0; + var previousClickImage = 0; var dataLoaded = false; var callback = false; + var preSearchImages = []; + var preSearchHasMore = false; + /** - * Simple returns the appropriate upload url depending on the image type set. + * Used by dropzone to get the endpoint to upload to. * @returns {string} */ $scope.getUploadUrl = function () { return '/images/' + $scope.imageType + '/upload'; }; + /** + * Cancel the current search operation. + */ + function cancelSearch() { + $scope.searching = false; + $scope.searchTerm = ''; + $scope.images = preSearchImages; + $scope.hasMore = preSearchHasMore; + } + $scope.cancelSearch = cancelSearch; + + /** * Runs on image upload, Adds an image to local list of images * and shows a success message to the user. @@ -56,7 +81,7 @@ module.exports = function (ngApp, events) { var currentTime = Date.now(); var timeDiff = currentTime - previousClickTime; - if (timeDiff < dblClickTime) { + if (timeDiff < dblClickTime && image.id === previousClickImage) { // If double click callbackAndHide(image); } else { @@ -65,6 +90,7 @@ module.exports = function (ngApp, events) { $scope.dependantPages = false; } previousClickTime = currentTime; + previousClickImage = image.id; }; /** @@ -107,20 +133,69 @@ module.exports = function (ngApp, events) { $scope.showing = false; }; + var baseUrl = '/images/' + $scope.imageType + '/all/' + /** * Fetch the list image data from the server. */ function fetchData() { - var url = '/images/' + $scope.imageType + '/all/' + page; + var url = baseUrl + page + '?'; + var components = {}; + if ($scope.uploadedTo) components['page_id'] = $scope.uploadedTo; + if ($scope.searching) components['term'] = $scope.searchTerm; + + + var urlQueryString = Object.keys(components).map((key) => { + return key + '=' + encodeURIComponent(components[key]); + }).join('&'); + url += urlQueryString; + $http.get(url).then((response) => { $scope.images = $scope.images.concat(response.data.images); $scope.hasMore = response.data.hasMore; page++; }); } - $scope.fetchData = fetchData; + /** + * Start a search operation + * @param searchTerm + */ + $scope.searchImages = function() { + + if ($scope.searchTerm === '') { + cancelSearch(); + return; + } + + if (!$scope.searching) { + preSearchImages = $scope.images; + preSearchHasMore = $scope.hasMore; + } + + $scope.searching = true; + $scope.images = []; + $scope.hasMore = false; + page = 0; + baseUrl = '/images/' + $scope.imageType + '/search/'; + fetchData(); + }; + + /** + * Set the current image listing view. + * @param viewName + */ + $scope.setView = function(viewName) { + cancelSearch(); + $scope.images = []; + $scope.hasMore = false; + page = 0; + $scope.view = viewName; + baseUrl = '/images/' + $scope.imageType + '/' + viewName + '/'; + fetchData(); + } + /** * Save the details of an image. * @param event @@ -213,16 +288,25 @@ module.exports = function (ngApp, events) { }]); - ngApp.controller('PageEditController', ['$scope', '$http', '$attrs', '$interval', '$timeout', function ($scope, $http, $attrs, $interval, $timeout) { + ngApp.controller('PageEditController', ['$scope', '$http', '$attrs', '$interval', '$timeout', '$sce', + function ($scope, $http, $attrs, $interval, $timeout, $sce) { $scope.editorOptions = require('./pages/page-form'); - $scope.editorHtml = ''; + $scope.editContent = ''; $scope.draftText = ''; var pageId = Number($attrs.pageId); var isEdit = pageId !== 0; var autosaveFrequency = 30; // AutoSave interval in seconds. - $scope.isDraft = Number($attrs.pageDraft) === 1; - if ($scope.isDraft) $scope.draftText = 'Editing Draft'; + var isMarkdown = $attrs.editorType === 'markdown'; + $scope.isUpdateDraft = Number($attrs.pageUpdateDraft) === 1; + $scope.isNewPageDraft = Number($attrs.pageNewDraft) === 1; + + // Set inital header draft text + if ($scope.isUpdateDraft || $scope.isNewPageDraft) { + $scope.draftText = 'Editing Draft' + } else { + $scope.draftText = 'Editing Page' + }; var autoSave = false; @@ -237,7 +321,18 @@ module.exports = function (ngApp, events) { }, 1000); } - $scope.editorChange = function () {} + // Actions specifically for the markdown editor + if (isMarkdown) { + $scope.displayContent = ''; + // Editor change event + $scope.editorChange = function (content) { + $scope.displayContent = $sce.trustAsHtml(content); + } + } + + if (!isMarkdown) { + $scope.editorChange = function() {}; + } /** * Start the AutoSave loop, Checks for content change @@ -245,17 +340,18 @@ module.exports = function (ngApp, events) { */ function startAutoSave() { currentContent.title = $('#name').val(); - currentContent.html = $scope.editorHtml; + currentContent.html = $scope.editContent; autoSave = $interval(() => { var newTitle = $('#name').val(); - var newHtml = $scope.editorHtml; + var newHtml = $scope.editContent; if (newTitle !== currentContent.title || newHtml !== currentContent.html) { currentContent.html = newHtml; currentContent.title = newTitle; - saveDraftUpdate(newTitle, newHtml); + saveDraft(); } + }, 1000 * autosaveFrequency); } @@ -264,16 +360,25 @@ module.exports = function (ngApp, events) { * @param title * @param html */ - function saveDraftUpdate(title, html) { - $http.put('/ajax/page/' + pageId + '/save-draft', { - name: title, - html: html - }).then((responseData) => { - $scope.draftText = responseData.data.message; - $scope.isDraft = true; + function saveDraft() { + var data = { + name: $('#name').val(), + html: isMarkdown ? $sce.getTrustedHtml($scope.displayContent) : $scope.editContent + }; + + if (isMarkdown) data.markdown = $scope.editContent; + + $http.put('/ajax/page/' + pageId + '/save-draft', data).then((responseData) => { + var updateTime = moment.utc(moment.unix(responseData.data.timestamp)).toDate(); + $scope.draftText = responseData.data.message + moment(updateTime).format('HH:mm'); + if (!$scope.isNewPageDraft) $scope.isUpdateDraft = true; }); } + $scope.forceDraftSave = function() { + saveDraft(); + }; + /** * Discard the current draft and grab the current page * content from the system via an AJAX request. @@ -281,10 +386,11 @@ module.exports = function (ngApp, events) { $scope.discardDraft = function () { $http.get('/ajax/page/' + pageId).then((responseData) => { if (autoSave) $interval.cancel(autoSave); - $scope.draftText = ''; - $scope.isDraft = false; + $scope.draftText = 'Editing Page'; + $scope.isUpdateDraft = false; $scope.$broadcast('html-update', responseData.data.html); - $('#name').val(currentContent.title); + $scope.$broadcast('markdown-update', responseData.data.markdown || responseData.data.html); + $('#name').val(responseData.data.name); $timeout(() => { startAutoSave(); }, 1000); @@ -294,4 +400,116 @@ module.exports = function (ngApp, events) { }]); -}; \ No newline at end of file + ngApp.controller('PageTagController', ['$scope', '$http', '$attrs', + function ($scope, $http, $attrs) { + + const pageId = Number($attrs.pageId); + $scope.tags = []; + + $scope.sortOptions = { + handle: '.handle', + items: '> tr', + containment: "parent", + axis: "y" + }; + + /** + * Push an empty tag to the end of the scope tags. + */ + function addEmptyTag() { + $scope.tags.push({ + name: '', + value: '' + }); + } + $scope.addEmptyTag = addEmptyTag; + + /** + * Get all tags for the current book and add into scope. + */ + function getTags() { + $http.get('/ajax/tags/get/page/' + pageId).then((responseData) => { + $scope.tags = responseData.data; + addEmptyTag(); + }); + } + getTags(); + + /** + * Set the order property on all tags. + */ + function setTagOrder() { + for (let i = 0; i < $scope.tags.length; i++) { + $scope.tags[i].order = i; + } + } + + /** + * When an tag changes check if another empty editable + * field needs to be added onto the end. + * @param tag + */ + $scope.tagChange = function(tag) { + let cPos = $scope.tags.indexOf(tag); + if (cPos !== $scope.tags.length-1) return; + + if (tag.name !== '' || tag.value !== '') { + addEmptyTag(); + } + }; + + /** + * When an tag field loses focus check the tag to see if its + * empty and therefore could be removed from the list. + * @param tag + */ + $scope.tagBlur = function(tag) { + let isLast = $scope.tags.length - 1 === $scope.tags.indexOf(tag); + if (tag.name === '' && tag.value === '' && !isLast) { + let cPos = $scope.tags.indexOf(tag); + $scope.tags.splice(cPos, 1); + } + }; + + /** + * Save the tags to the current page. + */ + $scope.saveTags = function() { + setTagOrder(); + let postData = {tags: $scope.tags}; + $http.post('/ajax/tags/update/page/' + pageId, postData).then((responseData) => { + $scope.tags = responseData.data.tags; + addEmptyTag(); + events.emit('success', responseData.data.message); + }) + }; + + /** + * Remove a tag from the current list. + * @param tag + */ + $scope.removeTag = function(tag) { + let cIndex = $scope.tags.indexOf(tag); + $scope.tags.splice(cIndex, 1); + }; + + }]); + +}; + + + + + + + + + + + + + + + + +