Refactor attachments: use directives to show its
David Barragán Merino
parent
ada119933b
commit
9dbe70fed6
|
|
@ -0,0 +1,152 @@
|
|||
###
|
||||
# Copyright (C) 2014 Andrey Antukh <niwi@niwi.be>
|
||||
# Copyright (C) 2014 Jesús Espino Garcia <jespinog@gmail.com>
|
||||
# Copyright (C) 2014 David Barragán Merino <bameda@dbarragan.com>
|
||||
#
|
||||
# This program is free software: you can redistribute it and/or modify
|
||||
# it under the terms of the GNU Affero General Public License as
|
||||
# published by the Free Software Foundation, either version 3 of the
|
||||
# License, or (at your option) any later version.
|
||||
#
|
||||
# This program is distributed in the hope that it will be useful,
|
||||
# but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
# GNU Affero General Public License for more details.
|
||||
#
|
||||
# You should have received a copy of the GNU Affero General Public License
|
||||
# along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
#
|
||||
# File: modules/common/attachments.coffee
|
||||
###
|
||||
|
||||
taiga = @.taiga
|
||||
sizeFormat = @.taiga.sizeFormat
|
||||
|
||||
module = angular.module("taigaCommon")
|
||||
|
||||
|
||||
#############################################################################
|
||||
## Attachments Directive
|
||||
#############################################################################
|
||||
|
||||
AttachmentsDirective = ->
|
||||
link = ($scope, $el, $attrs, $model) ->
|
||||
#$ctrl = $el.controller()
|
||||
## Total attachments counter
|
||||
$scope.$watch "attachmentsCount", (attachmentsCount) ->
|
||||
$el.find("span.attachments-num").html(attachmentsCount)
|
||||
|
||||
## See deprecated attachments
|
||||
$scope.showDeprecatedAttachments = false
|
||||
|
||||
$scope.$watch "deprecatedAttachmentsCount", (deprecatedAttachmentsCount) ->
|
||||
$el.find("span.more-attachments-num").html("(#{deprecatedAttachmentsCount} deprecated)") # TODO: i18n
|
||||
|
||||
if deprecatedAttachmentsCount
|
||||
$el.find("a.more-attachments").removeClass("hidden")
|
||||
else
|
||||
$el.find("a.more-attachments").addClass("hidden")
|
||||
|
||||
$el.on "click", "a.more-attachments", ->
|
||||
event.preventDefault()
|
||||
target = angular.element(event.currentTarget)
|
||||
|
||||
$scope.showDeprecatedAttachments = not $scope.showDeprecatedAttachments
|
||||
|
||||
if $scope.showDeprecatedAttachments
|
||||
target.find("span.text").html("- hide deprecated attachments") # TODO: i18n
|
||||
$el.find("div.single-attachment.deprecated").removeClass("hidden")
|
||||
else
|
||||
target.find("span.text").html("+ show deprecated attachments") # TODO: i18n
|
||||
$el.find("div.single-attachment.deprecated").addClass("hidden")
|
||||
|
||||
## On destroy
|
||||
$scope.$on "$destroy", ->
|
||||
$el.off()
|
||||
|
||||
return {
|
||||
link: link,
|
||||
require: "ngModel"
|
||||
}
|
||||
|
||||
module.directive("tgAttachments", [AttachmentsDirective])
|
||||
|
||||
|
||||
#############################################################################
|
||||
## Attachment Directive
|
||||
#############################################################################
|
||||
|
||||
AttachmentDirective = ($log) ->
|
||||
singleAttachment = _.template("""
|
||||
<div class="attachment-name">
|
||||
<span class="icon.icon-document"></span>
|
||||
<a href="<%- url %>" title="<%- name %>" target="_blank"><%- name %></a>
|
||||
</div>
|
||||
<div class="attachment-comment">
|
||||
<span class="attachment-size">(<%- size %>)</span>
|
||||
<span><%- description %></span>
|
||||
</div>
|
||||
<a class="settings icon icon-edit" href="" title="Edit"></a>
|
||||
<a class="settings icon icon-delete" href="" title="Delete"></a>
|
||||
<a class="settings icon icon-drag-v" href="" title=""Drag"></a>
|
||||
""") #TODO: i18n
|
||||
|
||||
singleAttachmentEditable = _.template("""
|
||||
<div class="attachment-name">
|
||||
<span class="icon.icon-document"></span>
|
||||
<a href="<%- url %>" title="<%- name %>" target="_blank"><%- name %></a>
|
||||
</div>
|
||||
<div class="editable editable-attachment-comment">
|
||||
<span class="attachment-size">(<%- size %>)</span>
|
||||
<input type="text" />
|
||||
</div>
|
||||
<div class="editable editable-attachment-deprecated">
|
||||
<input type="checkbox" id="attach-<%- id %>-is-deprecated" />
|
||||
<label for="attach-<%- id %>-is-deprecated">Deprecated?</label>
|
||||
</div>
|
||||
<a class="editable icon icon-floppy" href="" title="Save"></a>
|
||||
<a class="editable icon icon-delete" href="" title="Cancel"></a>
|
||||
""") # TODO: i18n
|
||||
|
||||
link = ($scope, $el, $attrs, $model) ->
|
||||
render = (attachment, isEditable=false) ->
|
||||
ctx = {
|
||||
id: attachment.id
|
||||
name: attachment.name
|
||||
url: attachment.url
|
||||
size: sizeFormat(attachment.size)
|
||||
description: attachment.description
|
||||
isDeprecated: attachment.is_deprecated
|
||||
}
|
||||
|
||||
if isEditable
|
||||
html = singleAttachmentEditable(ctx)
|
||||
else
|
||||
html = singleAttachment(ctx)
|
||||
$el.html(html)
|
||||
|
||||
if attachment.is_deprecated
|
||||
$el.addClass("deprecated")
|
||||
if $scope.showDeprecatedAttachments
|
||||
$el.removeClass("hidden")
|
||||
else
|
||||
$el.removeClass("deprecated")
|
||||
$el.removeClass("hidden")
|
||||
|
||||
## Initialize
|
||||
if not $attrs.tgAttachment?
|
||||
return $log.error "AttachmentDirective the directive need an attachment"
|
||||
|
||||
attachment = $scope.$eval($attrs.tgAttachment)
|
||||
render(attachment)
|
||||
|
||||
## On destroy
|
||||
$scope.$on "$destroy", ->
|
||||
$el.off()
|
||||
|
||||
return {
|
||||
link: link,
|
||||
require: "ngModel"
|
||||
}
|
||||
|
||||
module.directive("tgAttachment", ["$log", AttachmentDirective])
|
||||
|
|
@ -1,36 +1,48 @@
|
|||
section.attachments
|
||||
//- NOTE: You must to define 'var attachModel' with the object model
|
||||
//- that have attachments
|
||||
|
||||
section.attachments(tg-attachments, ng-model=attachModel)
|
||||
div.attachments-header
|
||||
h3.attachments-title
|
||||
span.icon.icon-attachment
|
||||
span.attachments-num {{ attachmentsCount }}
|
||||
span.attachments-num 0
|
||||
span.attachments-text attachments
|
||||
a.button.button-gray(href="", title="Add new attachment")
|
||||
span +new file
|
||||
|
||||
div.attachment-body
|
||||
div.single-attachment(ng-repeat="attach in activeAttachments")
|
||||
div.attachment-name
|
||||
span.icon.icon-document
|
||||
a(href="{{ attach.url }}", title="{{ attach.name }}" target="_blank") {{ attach.name }}
|
||||
div.attachment-comment
|
||||
span {{ attach.description }}
|
||||
span.attachment-size ({{ attach.size }} B)
|
||||
a.settings.icon.icon-edit(href="","Edit")
|
||||
a.settings.icon.icon-drag-v(href="","Drag")
|
||||
div.hidden.single-attachment(ng-repeat="attach in attachments",
|
||||
tg-attachment="attach",
|
||||
ng-model=attachModel)
|
||||
|
||||
//-div.single-attachment.edit
|
||||
//- An attachment ('deprecated' class for deprecxated attachments)
|
||||
//-
|
||||
//-div.single-attachment
|
||||
//- div.attachment-name
|
||||
//- span.icon.icon-document
|
||||
//- a(href="", title="Attachment pefildeusuario.png") pefildeusuariopefuario.png
|
||||
//- div.attachment-comment
|
||||
//- span.attachment-size (42 B)
|
||||
//- span A sort description
|
||||
//- a.settings.icon.icon-edit(href="", "Edit")
|
||||
//- a.settings.icon.icon-delete(href="", "Delete")
|
||||
//- a.settings.icon.icon-drag-v(href="", "Drag")
|
||||
|
||||
//- An edittable attachment ('deprecated' class for deprecxated attachments)
|
||||
//-
|
||||
//-div.single-attachment
|
||||
//- div.attachment-name
|
||||
//- span.icon.icon-document
|
||||
//- a(href="", title="Attachment pefildeusuario.png") pefildeusuariopefuario.png
|
||||
//- div.editable.editable-attachment-comment
|
||||
//- span.attachment-size (42 B)
|
||||
//- input(type="text")
|
||||
//- div.editable.editable-attachment-deprecated
|
||||
//- label
|
||||
//- input(type="checkbox")
|
||||
//- span Deprecated?
|
||||
//- div.editable.attachment-delete
|
||||
//- a.icon.icon-delete(href="#")
|
||||
//- label Deprecated?
|
||||
//- input(type="checkbox")
|
||||
//- a.editable.icon.icon-floppy(href="#", "Save")
|
||||
//- a.editable.icon.icon-delete(href="#", "Cancel")
|
||||
|
||||
a.more-attachments(href="", title="show atachments history")
|
||||
span + show deprecated atachments
|
||||
span.more-attachments-num ({{ deprecatedAttachmentsCount }} more)
|
||||
a.hidden.more-attachments(href="", title="show atachments history")
|
||||
span.text + show deprecated atachments
|
||||
span.more-attachments-num (0 deprecated)
|
||||
|
|
|
|||
Loading…
Reference in New Issue