From 94bcc266e9081c2649ef18518b28f36e5e3788a6 Mon Sep 17 00:00:00 2001 From: Freddy Limpens Date: Mon, 19 May 2014 12:23:35 +0200 Subject: [PATCH 1/5] bootstraping directive to deal with file list --- index.html | 1 + scripts/src/app.coffee | 2 +- scripts/src/filer/directives.coffee | 18 +++++++++++ views/file-list.html | 49 +++++++---------------------- 4 files changed, 32 insertions(+), 38 deletions(-) create mode 100644 scripts/src/filer/directives.coffee diff --git a/index.html b/index.html index d21425a..f367dcc 100644 --- a/index.html +++ b/index.html @@ -80,6 +80,7 @@ + diff --git a/scripts/src/app.coffee b/scripts/src/app.coffee index 6e15aed..8f9b887 100644 --- a/scripts/src/app.coffee +++ b/scripts/src/app.coffee @@ -1,5 +1,5 @@ angular.element(document).on('ready page:load', -> - angular.module('filer', ['filer.controllers', 'filer.services']) + angular.module('filer', ['filer.controllers', 'filer.services', 'filer.directives']) angular.module('unisson_filer', ['filer', 'ui.router', 'ngAnimate', 'restangular', 'angularFileUpload', 'angucomplete', 'angular-unisson-auth']) diff --git a/scripts/src/filer/directives.coffee b/scripts/src/filer/directives.coffee new file mode 100644 index 0000000..8e9f060 --- /dev/null +++ b/scripts/src/filer/directives.coffee @@ -0,0 +1,18 @@ +module = angular.module('filer.directives', []) + +#module.directive("leaflet", ["$http", "$log", "$location", ($http, $log, $location) -> + + +module.directive('fileListing', ()-> + + return { + restrict: "E" + scope: + filesNumber: "@filesNumber" + template: " FILE LISTING " + + link: ($scope)-> + #$scope.filesNumber = 10 + console.debug('file Listing directive started with '+$scope.filesNumber+ ' files') + } +) diff --git a/views/file-list.html b/views/file-list.html index 892ec9d..8aea902 100644 --- a/views/file-list.html +++ b/views/file-list.html @@ -4,22 +4,12 @@
@@ -51,7 +41,6 @@
-
@@ -62,25 +51,13 @@
-
- - - - + FIXME -->
- - +
@@ -89,20 +66,18 @@
  • {{tag}}
- +
- +
+
-
- + From e8e19c1bbebf831b7dbb10824472a3af6c23e281 Mon Sep 17 00:00:00 2001 From: Freddy Limpens Date: Fri, 27 Jun 2014 10:41:30 +0200 Subject: [PATCH 2/5] added attribute-only directive to watch load event on cards thumbnails before applying isotope --- scripts/src/app.coffee | 4 + scripts/src/filer/controllers.coffee | 600 +++++++++++++-------------- scripts/src/filer/directives.coffee | 42 +- scripts/src/filer/services.coffee | 6 +- views/file-card.html | 4 +- views/file-list.html | 64 ++- 6 files changed, 370 insertions(+), 350 deletions(-) diff --git a/scripts/src/app.coffee b/scripts/src/app.coffee index 8d4f178..69f5189 100644 --- a/scripts/src/app.coffee +++ b/scripts/src/app.coffee @@ -80,6 +80,10 @@ angular.element(document).on('ready page:load', -> loginServiceProvider.setBaseUrl(config.loginBaseUrl) ) + .config((loginServiceProvider) -> + loginServiceProvider.setBaseUrl(config.loginBaseUrl) + ) + .run(['$rootScope', 'loginService', ($rootScope, loginService) -> $rootScope.config = config; diff --git a/scripts/src/filer/controllers.coffee b/scripts/src/filer/controllers.coffee index 214e68c..a70c6d5 100644 --- a/scripts/src/filer/controllers.coffee +++ b/scripts/src/filer/controllers.coffee @@ -1,334 +1,334 @@ module = angular.module('filer.controllers', ['restangular', 'filer.services', 'angular-unisson-auth']) class BucketNewCtrl - constructor: (@$scope, @$state, @Buckets) -> - @$scope.createBucket = this.createBucket + constructor: (@$scope, @$state, @Buckets) -> + @$scope.createBucket = this.createBucket - createBucket: => - @Buckets.post({}).then((bucket) => - @$state.go('bucket', {bucketId: bucket.id}) - ) + createBucket: => + @Buckets.post({}).then((bucket) => + @$state.go('bucket', {bucketId: bucket.id}) + ) class BucketListCtrl - constructor: (@$scope, @Buckets) -> - @$scope.buckets = @Buckets.getList().$object + constructor: (@$scope, @Buckets) -> + @$scope.buckets = @Buckets.getList().$object class ToolbarCtrl - constructor: (@$scope, @filerService) -> - @$scope.panel = null - @$scope.filerService = @filerService + constructor: (@$scope, @filerService) -> + @$scope.panel = null + @$scope.filerService = @filerService class FileListCtrl - constructor: (@$scope, @filerService, @$timeout, @$stateParams, @Restangular, @$rootScope, @Buckets) -> - console.debug(" Starting File list for bucket : ",@$stateParams.bucketId) - @$scope.bucket = @Buckets.one(@$stateParams.bucketId).get().$object - - @$scope.files = [] - # FIXME: get current bucket from session - @$scope.selectedTags = [] - @$scope.search_form = - query: "" - @$scope.searchFilesObject = @Restangular.one('bucket/file').one('bucket', @$stateParams.bucketId) - @$scope.searchFilesObject.getList('search',{}).then((result) => - @$scope.files = result - console.debug(" brodcast") - @$scope.$broadcast('fileListComplete') - ) + constructor: (@$scope, @filerService, @$timeout, @$stateParams, @Restangular, @$rootScope, @Buckets) -> + console.debug(" Starting File list for bucket : ",@$stateParams.bucketId) + @$scope.bucket = @Buckets.one(@$stateParams.bucketId).get().$object + @$scope.files = [] + + # AUTOCOMPLETE & SEARCH SETUP + @$scope.autocompleteUrl = "#{config.rest_uri}/bucket/file/bucket/#{@$stateParams.bucketId}/search?auto=" + @$timeout(-> # needed to avoid default browser's autocomplete + angular.element("#searchField_value").attr("autocomplete", "off") + , 1000) + @$scope.selectedTags = [] + @$scope.search_form = + query: "" + @$scope.searchFilesObject = @Restangular.one('bucket/file').one('bucket', @$stateParams.bucketId) + @$scope.searchFilesObject.getList('search',{}).then((result) => + @$scope.files = result + console.debug(" brodcast") + @$scope.$broadcast('fileListComplete') + ) + # watch the selection of a tag and add them + @$scope.$watch('search_form.query', (newValue, oldValue) => + console.debug("== Tag selected !") + if @$scope.search_form.query + tag = @$scope.search_form.query.title + if @$scope.selectedTags.indexOf(tag) == -1 + @$scope.selectedTags.push(tag) + angular.element('#searchField_value').val("") + @$scope.search_form = + query : "" + # refresh search + this.searchFiles() + this.updateAutocompleteURL() + ) + + # METHODS + @$scope.updateBucket = this.updateBucket + @$scope.updateAutocompleteURL = this.updateAutocompleteURL + @$scope.searchFiles = this.searchFiles + @$scope.removeTag = this.removeTag + + # Quick hack so isotope renders when file changes + # @$scope.$on('fileListComplete', () => + # console.debug('receive File list complete') + # @$timeout(=> + # console.debug(" === runIsotope within FileLIst after timeout") + # console.debug(@$scope.isotope_container) + # @$scope.runIsotope() + # ,2000 + # ) + # ) + + + updateBucket: => + console.debug("Updating bucket : ", @$scope.bucket.name) + @$scope.bucket.patch({name: @$scope.bucket.name}).then(()=> + $("#renommage").fadeIn('slow').delay(1000).fadeOut('slow') + @$rootScope.panel = '' + ) + + updateAutocompleteURL: => + # add facet to autocomplete URL$ + facets = ["facet=" + facet for facet in @$scope.selectedTags] + facetQuery = facets.join("&") + @$scope.autocompleteUrl = "#{config.rest_uri}/bucket/file/bucket/#{@$stateParams.bucketId}/search?#{facetQuery}&auto=" + + removeTag: (tag)=> + index = @$scope.selectedTags.indexOf(tag) + @$scope.selectedTags.splice(index,1) + this.searchFiles() + this.updateAutocompleteURL() + + searchFiles: => + # leave preview mode if activated + #@$scope.exitPreview() + query = angular.element('#searchField_value').val() + console.debug("searching with: "+query) + #search URL : config.rest_uri+ /bucket/1/search?format=json&q=blabla + if query + @$scope.searchFilesObject.getList('search', {q: query, facet:@$scope.selectedTags }).then((result) => + @$scope.files = result + ) - # AUTOCOMPLETE SETUP | FIXME : get root URL from config file - @$scope.autocompleteUrl = "#{config.rest_uri}/bucket/file/bucket/#{@$stateParams.bucketId}/search?auto=" - # needed to avoid default browser's autocomplete - @$timeout(-> - angular.element("#searchField_value").attr("autocomplete", "off") - , 1000) - # Methods declaration - @$scope.updateBucket = this.updateBucket - @$scope.updateAutocompleteURL = this.updateAutocompleteURL - @$scope.searchFiles = this.searchFiles - @$scope.removeTag = this.removeTag - # Quick hack so isotope renders when file changes +class FileDetailCtrl + constructor: (@$scope, @filerService, @Restangular, @$stateParams, @$state, @$timeout, @$window) -> + console.debug("started file detail on file:" + @$stateParams.fileId) + # by child controllers (as FileCommentCtrl) before the promisse is realized + @$scope.bucketId = @$stateParams.bucketId + @$scope.file = + id: @$stateParams.fileId + being_edited_by : {} + + @$scope.fileRestObject = @Restangular.one('bucket/file', @$scope.file.id) + @$scope.fileRestObject.get().then((result)=> + @$scope.file = result + ) + + # if files is empty, wait for fileListComplete event + if @$scope.files.length <= 0 + console.debug("== waiting for files list to complete") @$scope.$on('fileListComplete', () => - console.debug('receive File list complete') - @$timeout(=> - console.debug(" === runIsotope within FileLIst after timeout") - console.debug(@$scope.isotope_container) - @$scope.runIsotope() + console.debug('receive File list complete [FileDetailCtr]') + @$timeout(() => + @$scope.setPreviewLayout() ,2000 ) ) - - # watch the selection of a tag and add them - @$scope.$watch('search_form.query', (newValue, oldValue) => - console.debug("== Tag selected !") - if @$scope.search_form.query - tag = @$scope.search_form.query.title - if @$scope.selectedTags.indexOf(tag) == -1 - @$scope.selectedTags.push(tag) - angular.element('#searchField_value').val("") - @$scope.search_form = - query : "" - # refresh search - this.searchFiles() - this.updateAutocompleteURL() - ) - updateBucket: => - console.debug("Updating bucket : ", @$scope.bucket.name) - @$scope.bucket.patch({name: @$scope.bucket.name}).then(()=> - $("#renommage").fadeIn('slow').delay(1000).fadeOut('slow') - @$rootScope.panel = '' - ) - - updateAutocompleteURL: => - # add facet to autocomplete URL$ - facets = ["facet=" + facet for facet in @$scope.selectedTags] - facetQuery = facets.join("&") - @$scope.autocompleteUrl = "#{config.rest_uri}/bucket/file/bucket/#{@$stateParams.bucketId}/search?#{facetQuery}&auto=" - - removeTag: (tag)=> - index = @$scope.selectedTags.indexOf(tag) - @$scope.selectedTags.splice(index,1) - this.searchFiles() - this.updateAutocompleteURL() - - searchFiles: => - # leave preview mode if activated - @$scope.exitPreview() - query = angular.element('#searchField_value').val() - console.debug("searching with: "+query) - #search URL : config.rest_uri+ /bucket/1/search?format=json&q=blabla - @$scope.searchFilesObject.getList('search', {q: query, facet:@$scope.selectedTags }).then((result) => - @$scope.files = result + else + console.debug("== will set eview layout now !") + @$timeout(() => + @$scope.setPreviewLayout() + ,30 ) - - -class FileDetailCtrl - constructor: (@$scope, @filerService, @Restangular, @$stateParams, @$state, @$timeout, @$window) -> - console.debug("started file detail on file:" + @$stateParams.fileId) - # by child controllers (as FileCommentCtrl) before the promisse is realized - @$scope.bucketId = @$stateParams.bucketId - @$scope.file = - id: @$stateParams.fileId - being_edited_by : {} - - @$scope.fileRestObject = @Restangular.one('bucket/file', @$scope.file.id) - @$scope.fileRestObject.get().then((result)=> - @$scope.file = result - ) - - # if files is empty, wait for fileListComplete event - if @$scope.files.length <= 0 - console.debug("== waiting for files list to complete") - @$scope.$on('fileListComplete', () => - console.debug('receive File list complete [FileDetailCtr]') - @$timeout(() => - @$scope.setPreviewLayout() - ,2000 - ) - ) - else - console.debug("== will set eview layout now !") - @$timeout(() => - @$scope.setPreviewLayout() - ,30 - ) - - ## Methods ## - # CReate preview layout FIXME (so ugly!!) - @$scope.setPreviewLayout = this.setPreviewLayout - @$scope.openForEdition = this.openForEdition - @$scope.openFile = this.openFile - @$scope.addLabels = this.addLabels - @$scope.cancelOpenForEdition = this.cancelOpenForEdition - - setPreviewLayout: ()=> - console.debug("== Setting preview layout ==") - container = angular.element('#cards-wrapper') - container.isotope('destroy') - # change class of drive-app div - angular.element("#drive-app").addClass("preview-mode") - # fetch the index of the current element - listItemPreviewed = angular.element('.previewed').parent('.element') - index = angular.element('.element').index(listItemPreviewed) - console.debug(" element index =" + index ) - # get the width of the container, here we are talking about cards-wrapper - containerWidth = angular.element('#cards-wrapper').width() - cardsNumberPerLine = parseInt(containerWidth / 252); - currentLine = parseInt(index / cardsNumberPerLine); - console.debug(" cardsNumberPerLine =" + cardsNumberPerLine ) - console.debug(" currentLine =" + currentLine ) - # get the element after which we will have to inject the preview panel - lastElement = currentLine * cardsNumberPerLine + cardsNumberPerLine - cardsNumberTotal = angular.element('.element').length - console.debug(" cardsNumberTotal =" + cardsNumberTotal ) - if lastElement > cardsNumberTotal - lastElement = cardsNumberTotal - # move the preview panel in the right place - console.debug(" last element index =" + lastElement ) - angular.element('#preview-panel-wrapper').insertAfter(angular.element('.element').eq(lastElement - 1)) - - addLabels: (fileId)=> - @$state.go('bucket.labellisation', {filesIds: fileId}) - - openFile: => - @$window.open(config.bucket_preview_uri + @$scope.file.file) - - openForEdition: (fileId)=> - console.debug("opening file "+fileId+" for edition by : ", @$scope.authVars.user) - # open file right away, otherwise considered a pop-up - @$scope.openFile() - # patch file with object {"being_edited_by": resource_uri} - @$scope.fileRestObject.patch({"being_edited_by": @$scope.authVars.user.resource_uri}).then((result)=> - console.debug(" file is now being updated " ) - @$scope.file.being_edited_by = - username: @$scope.authVars.username - ) - - cancelOpenForEdition: (fileId)=> - console.debug("Cancelling opening file "+fileId+" for edition") - # patch file with object {} - @$scope.fileRestObject.patch({"being_edited_by": {}}).then((result)=> - console.debug(" file is no longer being updated " ) - @$scope.file.being_edited_by = null - ) + ## Methods ## + @$scope.setPreviewLayout = this.setPreviewLayout + @$scope.openForEdition = this.openForEdition + @$scope.openFile = this.openFile + @$scope.addLabels = this.addLabels + @$scope.cancelOpenForEdition = this.cancelOpenForEdition + + setPreviewLayout: ()=> + console.debug("== Setting preview layout ==") + container = angular.element('#cards-wrapper') + container.isotope('destroy') + # change class of drive-app div + angular.element("#drive-app").addClass("preview-mode") + # fetch the index of the current element + listItemPreviewed = angular.element('.previewed').parent('.element') + index = angular.element('.element').index(listItemPreviewed) + console.debug(" element index =" + index ) + # get the width of the container, here we are talking about cards-wrapper + containerWidth = angular.element('#cards-wrapper').width() + cardsNumberPerLine = parseInt(containerWidth / 252); + currentLine = parseInt(index / cardsNumberPerLine); + console.debug(" cardsNumberPerLine =" + cardsNumberPerLine ) + console.debug(" currentLine =" + currentLine ) + # get the element after which we will have to inject the preview panel + lastElement = currentLine * cardsNumberPerLine + cardsNumberPerLine + cardsNumberTotal = angular.element('.element').length + console.debug(" cardsNumberTotal =" + cardsNumberTotal ) + if lastElement > cardsNumberTotal + lastElement = cardsNumberTotal + # move the preview panel in the right place + console.debug(" last element index =" + lastElement ) + angular.element('#preview-panel-wrapper').insertAfter(angular.element('.element').eq(lastElement - 1)) + + # FIXME + addLabels: (fileId)=> + @$state.go('bucket.labellisation', {filesIds: fileId}) + + openFile: => + @$window.open(config.bucket_preview_uri + @$scope.file.file) + + openForEdition: (fileId)=> + console.debug("opening file "+fileId+" for edition by : ", @$scope.authVars.user) + # open file right away, otherwise considered a pop-up + @$scope.openFile() + # patch file with object {"being_edited_by": resource_uri} + @$scope.fileRestObject.patch({"being_edited_by": @$scope.authVars.user.resource_uri}).then((result)=> + console.debug(" file is now being updated " ) + @$scope.file.being_edited_by = + username: @$scope.authVars.username + ) + + cancelOpenForEdition: (fileId)=> + console.debug("Cancelling opening file "+fileId+" for edition") + # patch file with object {} + @$scope.fileRestObject.patch({"being_edited_by": {}}).then((result)=> + console.debug(" file is no longer being updated " ) + @$scope.file.being_edited_by = null + ) class FileLabellisationCtrl # designed for multifiles, but multifile selection is still missing - constructor: (@$scope, @Restangular, @$stateParams, @$state, @$filter, @$timeout) -> - console.debug(" labellilabello started !!") - - # Populating file if provided as stateParam - @$scope.files = [] - @$scope.taggingQueue = {} - if @$stateParams.filesIds - @Restangular.one('bucket/file').one("set", @$stateParams.filesIds).getList().then((result) => - @$scope.files = result - # Populating tagging queue with current tags if any - for file in @$scope.files - do(file)=> - @$scope.taggingQueue[file.id] = file.tags + constructor: (@$scope, @Restangular, @$stateParams, @$state, @$filter, @$timeout) -> + console.debug(" labellilabello started !!") + + # Populating file if provided as stateParam + @$scope.files = [] + @$scope.taggingQueue = {} + if @$stateParams.filesIds + @Restangular.one('bucket/file').one("set", @$stateParams.filesIds).getList().then((result) => + @$scope.files = result + # Populating tagging queue with current tags if any + for file in @$scope.files + do(file)=> + @$scope.taggingQueue[file.id] = file.tags + ) + + # Populating suggested (most used) tags + @$scope.suggestedTags = [] + @$scope.tagsList = @Restangular.one('bucket/file').one('bucket', @$stateParams.bucketId) + @$scope.tagsList.getList('search',{ auto: ""}).then((result) => + @$scope.suggestedTags = result.slice(0,15) + ) + console.debug("[FileLabellisation] suggested tags : "+@$scope.suggestedTags) + + # needed to avoid default browser's autocomplete + @$timeout(()-> + angular.element("#tagSearchField_value").attr("autocomplete", "off") + ,1000 + ) + + # Watch selection of existing tag and add to suggested tags + @$scope.tagAutocompleteUrl = "#{config.rest_uri}/bucket/file/bucket/#{@$stateParams.bucketId}/search?auto=" + @$scope.tag_search_form = + query: "" + @$scope.$watch('tag_search_form.query.title', (newValue, oldValue) => + console.debug("[FileLabellisation] Suggested Tag selected : "+@$scope.tag_search_form.query.title) + if @$scope.tag_search_form.query + newTag = + name: @$scope.tag_search_form.query.title + found = @$scope.taggingQueue[@$scope.files[0].id].some((el)-> + return el.name == newTag.name ) - - # Populating suggested (most used) tags - @$scope.suggestedTags = [] - @$scope.tagsList = @Restangular.one('bucket/file').one('bucket', @$stateParams.bucketId) - @$scope.tagsList.getList('search',{ auto: ""}).then((result) => - @$scope.suggestedTags = result.slice(0,15) - ) - console.debug("[FileLabellisation] suggested tags : "+@$scope.suggestedTags) - - # needed to avoid default browser's autocomplete - @$timeout(()-> - angular.element("#tagSearchField_value").attr("autocomplete", "off") - ,1000 - ) - - # Watch selection of existing tag and add to suggested tags - @$scope.tagAutocompleteUrl = "#{config.rest_uri}/bucket/file/bucket/#{@$stateParams.bucketId}/search?auto=" - @$scope.tag_search_form = - query: "" - @$scope.$watch('tag_search_form.query.title', (newValue, oldValue) => - console.debug("[FileLabellisation] Suggested Tag selected : "+@$scope.tag_search_form.query.title) - if @$scope.tag_search_form.query - newTag = - name: @$scope.tag_search_form.query.title - found = @$scope.taggingQueue[@$scope.files[0].id].some((el)-> - return el.name == newTag.name - ) - if (!found) - @$scope.taggingQueue[@$scope.files[0].id].push(newTag) - # empty search box - angular.element('#tagSearchField_value').val("") - @$scope.tag_search_form = - query : "" - ) - - # Methods - @$scope.addToSuggestedTags = this.addToSuggestedTags - @$scope.addTag = this.addTag - @$scope.removeTag = this.removeTag - @$scope.updateTags = this.updateTags - @$scope.goHome = ()=> - @$state.go('bucket', {}, {reload:true}) - @$scope.goToFile = (id) => - @$state.go('bucket.file', {fileId: id}) - @$scope.cancel = ()=> - @$state.transitionTo(@$state.previous, @$state.previous_params) - - addToSuggestedTags: => - tagString = angular.element('#tagSearchField_value').val() - console.debug(tagString) - tag = - name: tagString + if (!found) + @$scope.taggingQueue[@$scope.files[0].id].push(newTag) + # empty search box angular.element('#tagSearchField_value').val("") - found = @$scope.taggingQueue[@$scope.files[0].id].some((el)-> - return el.name == tag.name - ) - if (!found) - @$scope.taggingQueue[@$scope.files[0].id].push(tag) - - - addTag: (fileId, tag)=> - console.debug( "++ adding tag : " + tag.name + " to file :" +fileId) - file = @$filter('filter')(@$scope.files, {id : fileId})[0] - if @$scope.taggingQueue[fileId].indexOf(tag) == -1 - @$scope.taggingQueue[fileId].push(tag) - console.debug("+new tagging queue+") - console.debug(@$scope.taggingQueue) - - removeTag: (fileId, tag)=> - console.debug( "++ removing tag : " + tag.name + " from file :" +fileId) - index = @$scope.taggingQueue[fileId].indexOf(tag) - @$scope.taggingQueue[fileId].splice(index, 1) - console.debug("+new tagging queue+") - console.debug(@$scope.taggingQueue) - - updateTags: => - console.debug("updating tags") - # loop in tagging queue, and do a PATCH - for fileId, tags of @$scope.taggingQueue - do (fileId, tags)=> - console.debug("tags for file: "+fileId) - tagsObject = - tags:tags - console.debug(tagsObject) - fileRestObject = @Restangular.one('bucket/file', fileId) - fileRestObject.patch(tagsObject).then(()=> - console.debug(" tags updated ! " ) - ) - @$scope.goHome() + @$scope.tag_search_form = + query : "" + ) + + # Methods + @$scope.addToTags = this.addToTags + @$scope.addTag = this.addTag + @$scope.removeTag = this.removeTag + @$scope.updateTags = this.updateTags + @$scope.goHome = ()=> + @$state.go('bucket', {}, {reload:true}) + @$scope.goToFile = (id) => + @$state.go('bucket.file', {fileId: id}) + @$scope.cancel = ()=> + @$state.transitionTo(@$state.previous, @$state.previous_params) + + # Add to tags from tag search string + addToTags: => + tagString = angular.element('#tagSearchField_value').val() + console.debug(tagString) + tag = + name: tagString + angular.element('#tagSearchField_value').val("") + found = @$scope.taggingQueue[@$scope.files[0].id].some((el)-> + return el.name == tag.name + ) + if (!found) + @$scope.taggingQueue[@$scope.files[0].id].push(tag) + + # Add to tags from suggested list + addTag: (fileId, tag)=> + console.debug( "++ adding tag : " + tag.name + " to file :" +fileId) + file = @$filter('filter')(@$scope.files, {id : fileId})[0] + if @$scope.taggingQueue[fileId].indexOf(tag) == -1 + @$scope.taggingQueue[fileId].push(tag) + console.debug("+new tagging queue+") + console.debug(@$scope.taggingQueue) + + removeTag: (fileId, tag)=> + console.debug( "++ removing tag : " + tag.name + " from file :" +fileId) + index = @$scope.taggingQueue[fileId].indexOf(tag) + @$scope.taggingQueue[fileId].splice(index, 1) + console.debug("+new tagging queue+") + console.debug(@$scope.taggingQueue) + + updateTags: => + console.debug("updating tags") + # loop in tagging queue, and do a PATCH + for fileId, tags of @$scope.taggingQueue + do (fileId, tags)=> + console.debug("tags for file: "+fileId) + tagsObject = + tags:tags + console.debug(tagsObject) + fileRestObject = @Restangular.one('bucket/file', fileId) + fileRestObject.patch(tagsObject).then(()=> + console.debug(" tags updated ! " ) + ) + @$scope.goHome() class FileCommentCtrl # child controller of either FileDetail or FileList, hence the dependency on @$scope.file - constructor: (@$scope, @Restangular, @$rootScope) -> - @$scope.comment_form = - text: "" - @$scope.submitForm = this.submitForm - @commentsObject = @Restangular.all('bucket/filecomment') - @commentsObject.getList({bucket_file:@$scope.file.id}).then( (result)=> - @$scope.comments = result - @$rootScope.$broadcast("new_comment") - console.debug("New comment loaded") + constructor: (@$scope, @Restangular, @$rootScope) -> + @$scope.comment_form = + text: "" + @$scope.submitForm = this.submitForm + @commentsObject = @Restangular.all('bucket/filecomment') + @commentsObject.getList({bucket_file:@$scope.file.id}).then( (result)=> + @$scope.comments = result + @$rootScope.$broadcast("new_comment") + console.debug("New comment loaded") + ) + + submitForm: => + console.debug("form soumis avec: "+@$scope.comment_form.text+" file: " +@$scope.file.resource_uri) + newComment = + bucket_file: @$scope.file.resource_uri + text: @$scope.comment_form.text + console.debug(newComment) + if newComment.text.length > 3 + @commentsObject.post(newComment).then((addedComment)=> + console.debug(" comment saved ! " ) + console.debug(@$scope.comments) + @$scope.comment_form.text="" + @$scope.comments.push(addedComment) ) - submitForm: => - console.debug("form soumis avec: "+@$scope.comment_form.text+" file: " +@$scope.file.resource_uri) - newComment = - bucket_file: @$scope.file.resource_uri - text: @$scope.comment_form.text - console.debug(newComment) - if newComment.text.length > 3 - @commentsObject.post(newComment).then((addedComment)=> - console.debug(" comment saved ! " ) - console.debug(@$scope.comments) - @$scope.comment_form.text="" - @$scope.comments.push(addedComment) - ) - module.controller("ToolbarCtrl", ['$scope', 'filerService', ToolbarCtrl]) module.controller("FileDetailCtrl", ['$scope', 'filerService', 'Restangular', '$stateParams','$state', '$timeout', '$window', FileDetailCtrl]) diff --git a/scripts/src/filer/directives.coffee b/scripts/src/filer/directives.coffee index 8e9f060..a02f838 100644 --- a/scripts/src/filer/directives.coffee +++ b/scripts/src/filer/directives.coffee @@ -2,17 +2,35 @@ module = angular.module('filer.directives', []) #module.directive("leaflet", ["$http", "$log", "$location", ($http, $log, $location) -> +module.directive('isotopeOnLoad', ($rootScope) -> + return { + restrict: 'A', + link: (scope, element, attrs) -> + console.debug("starting isotopeOnLoad directive !!") + if (typeof $rootScope.loadCounter == 'undefined') + $rootScope.loadCounter = 0 + image = element.find('img') + if image.hasClass('thumbnail') + image.bind('load', ()-> + console.debug(" signal Card loaded", $rootScope.loadCounter) + scope.$emit('$cardLoaded', $rootScope.loadCounter++) + ) + , + controller: ($scope, $timeout) -> + $scope.$parent.$on('$cardLoaded', (event, data) -> + if ($scope.$last && $scope.$index == $rootScope.loadCounter - 1) + $scope.$emit('$allCardsLoaded') + delete $rootScope.loadCounter + # run isotope on cards + $timeout -> + angular.element('#cards-wrapper').isotope( + console.log(" OO- Running isotope from directive ") + itemSelector: '.element' + layoutMode: 'masonry' + ) + ,500 + ) + } +) -module.directive('fileListing', ()-> - - return { - restrict: "E" - scope: - filesNumber: "@filesNumber" - template: " FILE LISTING " - link: ($scope)-> - #$scope.filesNumber = 10 - console.debug('file Listing directive started with '+$scope.filesNumber+ ' files') - } -) diff --git a/scripts/src/filer/services.coffee b/scripts/src/filer/services.coffee index 06f8206..81ce790 100644 --- a/scripts/src/filer/services.coffee +++ b/scripts/src/filer/services.coffee @@ -8,13 +8,12 @@ class FilerService autoUpload: false removeAfterUpload: true url: config.bucket_uri - # FIXME : so far we set headers right after addin file, to be sure login is already done - # and api key is available. There HAS to be a cleaner way - formData: [{bucket: $stateParams.bucketId}] # FIXME + formData: [{bucket: $stateParams.bucketId}] ) @$rootScope.uploader.bind('success', (event, xhr, item, response) => @$rootScope.panel = '' + # FIXME : add file to files list and then refresh isotope @$state.go('bucket.labellisation', {filesIds: response.id}) ) @@ -32,6 +31,7 @@ class FilerService @$state.transitionTo('bucket.file', toParams) @$rootScope.exitPreview = ()=> + console.debug(" Exit preview mode !") angular.element("#drive-app").removeClass("preview-mode") @$state.go('bucket') @$timeout(()=> diff --git a/views/file-card.html b/views/file-card.html index 3314fed..bb8174d 100644 --- a/views/file-card.html +++ b/views/file-card.html @@ -1,8 +1,8 @@ -
+
- {{ file.name }} + {{ file.name }} {{ file.name }}
diff --git a/views/file-list.html b/views/file-list.html index 5c0c227..3dace32 100644 --- a/views/file-list.html +++ b/views/file-list.html @@ -58,43 +58,41 @@
-

{{ bucket.name }}

-
-
- - - - -
-
- -
- -
-
-
+

{{ bucket.name }}

+
+
+ + + + +
+
+ +
+ +
+
+
-
-
    -
  • {{tag}}
    • -
- -
- -
- -
- +
+
    +
  • {{tag}} + +
    • +
+ +
+
+ +
-
-
From 4fbb8b0c92d1c6b2bec60b7c43c312db4a4a6d6b Mon Sep 17 00:00:00 2001 From: Freddy Limpens Date: Fri, 27 Jun 2014 12:27:21 +0200 Subject: [PATCH 3/5] code-cleaning on file comments (following Kanbans coding style) --- scripts/src/filer/controllers.coffee | 31 +++++++++------------------- scripts/src/filer/services.coffee | 21 +++++++++++++++++++ views/file-card.html | 4 ++-- views/file-preview.html | 12 +++++------ 4 files changed, 38 insertions(+), 30 deletions(-) diff --git a/scripts/src/filer/controllers.coffee b/scripts/src/filer/controllers.coffee index a70c6d5..e3e1186 100644 --- a/scripts/src/filer/controllers.coffee +++ b/scripts/src/filer/controllers.coffee @@ -304,37 +304,26 @@ class FileLabellisationCtrl class FileCommentCtrl # child controller of either FileDetail or FileList, hence the dependency on @$scope.file - constructor: (@$scope, @Restangular, @$rootScope) -> + constructor: (@$scope, @FileComments) -> @$scope.comment_form = + bucket_file: @$scope.file.resource_uri text: "" - @$scope.submitForm = this.submitForm - @commentsObject = @Restangular.all('bucket/filecomment') - @commentsObject.getList({bucket_file:@$scope.file.id}).then( (result)=> - @$scope.comments = result - @$rootScope.$broadcast("new_comment") - console.debug("New comment loaded") - ) + @$scope.submitNewComment = this.submitNewComment + @$scope.comments = $scope.file.comments - submitForm: => - console.debug("form soumis avec: "+@$scope.comment_form.text+" file: " +@$scope.file.resource_uri) - newComment = - bucket_file: @$scope.file.resource_uri - text: @$scope.comment_form.text - console.debug(newComment) - if newComment.text.length > 3 - @commentsObject.post(newComment).then((addedComment)=> - console.debug(" comment saved ! " ) - console.debug(@$scope.comments) - @$scope.comment_form.text="" + submitNewComment: => + if @$scope.comment_form.text.length > 3 + @FileComments.post(@$scope.comment_form).then((addedComment)=> + @$scope.comment_form.text= "" @$scope.comments.push(addedComment) - ) + ) module.controller("ToolbarCtrl", ['$scope', 'filerService', ToolbarCtrl]) module.controller("FileDetailCtrl", ['$scope', 'filerService', 'Restangular', '$stateParams','$state', '$timeout', '$window', FileDetailCtrl]) module.controller("FileLabellisationCtrl", ['$scope', 'Restangular', '$stateParams','$state', '$filter', '$timeout', FileLabellisationCtrl]) module.controller("FileListCtrl", ['$scope', 'filerService', '$timeout', '$stateParams', 'Restangular', '$rootScope', 'Buckets', FileListCtrl]) -module.controller("FileCommentCtrl", ['$scope', 'Restangular','$rootScope', FileCommentCtrl]) +module.controller("FileCommentCtrl", ['$scope', 'FileComments', FileCommentCtrl]) module.controller("BucketNewCtrl", ['$scope', '$state', 'Buckets', BucketNewCtrl]) module.controller("BucketListCtrl", ['$scope', 'Buckets', BucketListCtrl]) diff --git a/scripts/src/filer/services.coffee b/scripts/src/filer/services.coffee index 81ce790..bcfa602 100644 --- a/scripts/src/filer/services.coffee +++ b/scripts/src/filer/services.coffee @@ -77,3 +77,24 @@ services.factory('filerService', ['$rootScope', '$compile', '$fileUploader', 'Re services.factory('Buckets', (Restangular) -> return Restangular.service('bucket/bucket') ) + +services.factory('FileComments', (Restangular) -> + return Restangular.service('bucket/filecomment') +) + + +# services.factory('KanbanLists', (Restangular) -> +# return Restangular.service('flipflop/list') +# ) + +# services.factory('KanbanTasks', (Restangular) -> +# return Restangular.service('flipflop/task') +# ) + +# services.factory('KanbanCards', (Restangular) -> +# return Restangular.service('flipflop/card') +# ) + +# services.factory('KanbanCardComments', (Restangular) -> +# return Restangular.service('flipflop/cardcomment') +# ) \ No newline at end of file diff --git a/views/file-card.html b/views/file-card.html index bb8174d..53dbb59 100644 --- a/views/file-card.html +++ b/views/file-card.html @@ -28,8 +28,8 @@

{{ file.filename }}

- - + +
  diff --git a/views/file-preview.html b/views/file-preview.html index 468f54f..f81e836 100644 --- a/views/file-preview.html +++ b/views/file-preview.html @@ -67,17 +67,15 @@
  • - - {{ comment.submitter.username }} -

    - {{ comment.text }} -

    + + {{ comment.submitter.username }} +

    {{ comment.text }}

- - + +
From 25c55c3b962c190379667d4e7d1168077546c672 Mon Sep 17 00:00:00 2001 From: Freddy Limpens Date: Fri, 27 Jun 2014 14:32:05 +0200 Subject: [PATCH 4/5] refactored isotope services --- scripts/src/filer/controllers.coffee | 19 ++++++++++--------- scripts/src/filer/directives.coffee | 12 +++--------- scripts/src/filer/services.coffee | 28 ++++++++++++++++++---------- 3 files changed, 31 insertions(+), 28 deletions(-) diff --git a/scripts/src/filer/controllers.coffee b/scripts/src/filer/controllers.coffee index e3e1186..8f9aadf 100644 --- a/scripts/src/filer/controllers.coffee +++ b/scripts/src/filer/controllers.coffee @@ -14,12 +14,12 @@ class BucketListCtrl @$scope.buckets = @Buckets.getList().$object class ToolbarCtrl - constructor: (@$scope, @filerService) -> + constructor: (@$scope, @FilerService) -> @$scope.panel = null - @$scope.filerService = @filerService + @$scope.FilerService = @FilerService class FileListCtrl - constructor: (@$scope, @filerService, @$timeout, @$stateParams, @Restangular, @$rootScope, @Buckets) -> + constructor: (@$scope, @FilerService, @$timeout, @$stateParams, @Restangular, @$rootScope, @Buckets) -> console.debug(" Starting File list for bucket : ",@$stateParams.bucketId) @$scope.bucket = @Buckets.one(@$stateParams.bucketId).get().$object @$scope.files = [] @@ -104,7 +104,7 @@ class FileListCtrl class FileDetailCtrl - constructor: (@$scope, @filerService, @Restangular, @$stateParams, @$state, @$timeout, @$window) -> + constructor: (@$scope, @FilerService, @Restangular, @$stateParams, @$state, @$timeout, @$window) -> console.debug("started file detail on file:" + @$stateParams.fileId) # by child controllers (as FileCommentCtrl) before the promisse is realized @$scope.bucketId = @$stateParams.bucketId @@ -304,7 +304,7 @@ class FileLabellisationCtrl class FileCommentCtrl # child controller of either FileDetail or FileList, hence the dependency on @$scope.file - constructor: (@$scope, @FileComments) -> + constructor: (@$scope, @FileComments, @FilerService) -> @$scope.comment_form = bucket_file: @$scope.file.resource_uri text: "" @@ -316,14 +316,15 @@ class FileCommentCtrl @FileComments.post(@$scope.comment_form).then((addedComment)=> @$scope.comment_form.text= "" @$scope.comments.push(addedComment) + @FilerService.refreshIsotopeLayout() ) -module.controller("ToolbarCtrl", ['$scope', 'filerService', ToolbarCtrl]) +module.controller("ToolbarCtrl", ['$scope', 'FilerService', ToolbarCtrl]) -module.controller("FileDetailCtrl", ['$scope', 'filerService', 'Restangular', '$stateParams','$state', '$timeout', '$window', FileDetailCtrl]) +module.controller("FileDetailCtrl", ['$scope', 'FilerService', 'Restangular', '$stateParams','$state', '$timeout', '$window', FileDetailCtrl]) module.controller("FileLabellisationCtrl", ['$scope', 'Restangular', '$stateParams','$state', '$filter', '$timeout', FileLabellisationCtrl]) -module.controller("FileListCtrl", ['$scope', 'filerService', '$timeout', '$stateParams', 'Restangular', '$rootScope', 'Buckets', FileListCtrl]) -module.controller("FileCommentCtrl", ['$scope', 'FileComments', FileCommentCtrl]) +module.controller("FileListCtrl", ['$scope', 'FilerService', '$timeout', '$stateParams', 'Restangular', '$rootScope', 'Buckets', FileListCtrl]) +module.controller("FileCommentCtrl", ['$scope', 'FileComments', 'FilerService', FileCommentCtrl]) module.controller("BucketNewCtrl", ['$scope', '$state', 'Buckets', BucketNewCtrl]) module.controller("BucketListCtrl", ['$scope', 'Buckets', BucketListCtrl]) diff --git a/scripts/src/filer/directives.coffee b/scripts/src/filer/directives.coffee index a02f838..4c2ea28 100644 --- a/scripts/src/filer/directives.coffee +++ b/scripts/src/filer/directives.coffee @@ -16,19 +16,13 @@ module.directive('isotopeOnLoad', ($rootScope) -> scope.$emit('$cardLoaded', $rootScope.loadCounter++) ) , - controller: ($scope, $timeout) -> + controller: ($scope, FilerService) -> $scope.$parent.$on('$cardLoaded', (event, data) -> if ($scope.$last && $scope.$index == $rootScope.loadCounter - 1) $scope.$emit('$allCardsLoaded') delete $rootScope.loadCounter - # run isotope on cards - $timeout -> - angular.element('#cards-wrapper').isotope( - console.log(" OO- Running isotope from directive ") - itemSelector: '.element' - layoutMode: 'masonry' - ) - ,500 + # FIXME : use initIsotope service from FilerService + FilerService.initIsotope() ) } ) diff --git a/scripts/src/filer/services.coffee b/scripts/src/filer/services.coffee index bcfa602..1faaa7b 100644 --- a/scripts/src/filer/services.coffee +++ b/scripts/src/filer/services.coffee @@ -34,10 +34,7 @@ class FilerService console.debug(" Exit preview mode !") angular.element("#drive-app").removeClass("preview-mode") @$state.go('bucket') - @$timeout(()=> - @$rootScope.runIsotope() - ,300 - ) + this.initIsotope() return true @$rootScope.exitFiler = ()=> @@ -60,16 +57,27 @@ class FilerService @$rootScope.panel = '' ) - # Isotope stuff - @$rootScope.runIsotope = ()=> - @$rootScope.isotope_container = angular.element('#cards-wrapper').isotope( - console.log(" OO- Running isotope ") + # Isotope stuff + initIsotope: => + @$rootScope.isotopeContainer = angular.element('#cards-wrapper') + @$timeout(()=> + @$rootScope.isotopeContainer.isotope( + console.log(" OO- Init isotope ") itemSelector: '.element' layoutMode: 'masonry' - ) + ) + ,300 + ) + + refreshIsotopeLayout: => + @$timeout(()=> + @$rootScope.isotopeContainer.isotope('layout') + ,300 + ) + # Services -services.factory('filerService', ['$rootScope', '$compile', '$fileUploader', 'Restangular','$state', '$stateParams','$http', '$timeout',($rootScope, $compile, $fileUploader, Restangular, $state, $stateParams, $http, $timeout) -> +services.factory('FilerService', ['$rootScope', '$compile', '$fileUploader', 'Restangular','$state', '$stateParams','$http', '$timeout',($rootScope, $compile, $fileUploader, Restangular, $state, $stateParams, $http, $timeout) -> return new FilerService($rootScope, $compile, $fileUploader, Restangular, $state, $stateParams, $http, $timeout) ]) From 2d15bcfc93d455099ec5d403e64d732323c1b957 Mon Sep 17 00:00:00 2001 From: Freddy Limpens Date: Wed, 2 Jul 2014 19:07:56 +0200 Subject: [PATCH 5/5] enhanced directive + added Files service --- scripts/src/filer/controllers.coffee | 25 +++++-------------------- scripts/src/filer/directives.coffee | 13 ++++++++----- scripts/src/filer/services.coffee | 4 ++++ 3 files changed, 17 insertions(+), 25 deletions(-) diff --git a/scripts/src/filer/controllers.coffee b/scripts/src/filer/controllers.coffee index 8f9aadf..c156798 100644 --- a/scripts/src/filer/controllers.coffee +++ b/scripts/src/filer/controllers.coffee @@ -104,31 +104,23 @@ class FileListCtrl class FileDetailCtrl - constructor: (@$scope, @FilerService, @Restangular, @$stateParams, @$state, @$timeout, @$window) -> + constructor: (@$scope, @Files, @$stateParams, @$state, @$timeout, @$window) -> console.debug("started file detail on file:" + @$stateParams.fileId) - # by child controllers (as FileCommentCtrl) before the promisse is realized @$scope.bucketId = @$stateParams.bucketId @$scope.file = id: @$stateParams.fileId being_edited_by : {} - - @$scope.fileRestObject = @Restangular.one('bucket/file', @$scope.file.id) - @$scope.fileRestObject.get().then((result)=> - @$scope.file = result - ) + @$scope.file = @Files.one(@$stateParams.fileId).get().$object # if files is empty, wait for fileListComplete event if @$scope.files.length <= 0 - console.debug("== waiting for files list to complete") @$scope.$on('fileListComplete', () => - console.debug('receive File list complete [FileDetailCtr]') @$timeout(() => @$scope.setPreviewLayout() ,2000 ) ) else - console.debug("== will set eview layout now !") @$timeout(() => @$scope.setPreviewLayout() ,30 @@ -175,21 +167,14 @@ class FileDetailCtrl @$window.open(config.bucket_preview_uri + @$scope.file.file) openForEdition: (fileId)=> - console.debug("opening file "+fileId+" for edition by : ", @$scope.authVars.user) - # open file right away, otherwise considered a pop-up @$scope.openFile() - # patch file with object {"being_edited_by": resource_uri} - @$scope.fileRestObject.patch({"being_edited_by": @$scope.authVars.user.resource_uri}).then((result)=> - console.debug(" file is now being updated " ) + @Files.one(@$stateParams.fileId).patch({"being_edited_by": @$scope.authVars.user.resource_uri}).then((result)=> @$scope.file.being_edited_by = username: @$scope.authVars.username ) cancelOpenForEdition: (fileId)=> - console.debug("Cancelling opening file "+fileId+" for edition") - # patch file with object {} - @$scope.fileRestObject.patch({"being_edited_by": {}}).then((result)=> - console.debug(" file is no longer being updated " ) + @Files.one(@$stateParams.fileId).patch({"being_edited_by": {}}).then((result)=> @$scope.file.being_edited_by = null ) @@ -321,7 +306,7 @@ class FileCommentCtrl module.controller("ToolbarCtrl", ['$scope', 'FilerService', ToolbarCtrl]) -module.controller("FileDetailCtrl", ['$scope', 'FilerService', 'Restangular', '$stateParams','$state', '$timeout', '$window', FileDetailCtrl]) +module.controller("FileDetailCtrl", ['$scope', 'Files', '$stateParams','$state', '$timeout', '$window', FileDetailCtrl]) module.controller("FileLabellisationCtrl", ['$scope', 'Restangular', '$stateParams','$state', '$filter', '$timeout', FileLabellisationCtrl]) module.controller("FileListCtrl", ['$scope', 'FilerService', '$timeout', '$stateParams', 'Restangular', '$rootScope', 'Buckets', FileListCtrl]) module.controller("FileCommentCtrl", ['$scope', 'FileComments', 'FilerService', FileCommentCtrl]) diff --git a/scripts/src/filer/directives.coffee b/scripts/src/filer/directives.coffee index 4c2ea28..d35a126 100644 --- a/scripts/src/filer/directives.coffee +++ b/scripts/src/filer/directives.coffee @@ -10,11 +10,14 @@ module.directive('isotopeOnLoad', ($rootScope) -> if (typeof $rootScope.loadCounter == 'undefined') $rootScope.loadCounter = 0 image = element.find('img') - if image.hasClass('thumbnail') - image.bind('load', ()-> - console.debug(" signal Card loaded", $rootScope.loadCounter) - scope.$emit('$cardLoaded', $rootScope.loadCounter++) - ) + for img in image + do (img) -> + img = angular.element(img) + if img.hasClass('thumbnail') + img.bind('load', ()-> + console.debug(" signal Card loaded", $rootScope.loadCounter) + scope.$emit('$cardLoaded', $rootScope.loadCounter++) + ) , controller: ($scope, FilerService) -> $scope.$parent.$on('$cardLoaded', (event, data) -> diff --git a/scripts/src/filer/services.coffee b/scripts/src/filer/services.coffee index 1faaa7b..eec8984 100644 --- a/scripts/src/filer/services.coffee +++ b/scripts/src/filer/services.coffee @@ -90,6 +90,10 @@ services.factory('FileComments', (Restangular) -> return Restangular.service('bucket/filecomment') ) +services.factory('Files', (Restangular) -> + return Restangular.service('bucket/file') +) + # services.factory('KanbanLists', (Restangular) -> # return Restangular.service('flipflop/list')