summaryrefslogtreecommitdiff
path: root/public/assets/javascripts/ui/editor/Collaborators.js
blob: b57510d65dc97279d1d45532526a3e06fade7f4c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
var Collaborators = ModalFormView.extend({
	el: ".mediaDrawer.collaborators",
	
	template: $("#collaborator-template").html(),

  indexAction: function(){ return "/api/collaborator/" + this.parent.data.slug + "/index" },
	createAction: function(){ return "/api/collaborator/" + this.parent.data.slug + "/create" },
	destroyAction: function(){ return "/api/collaborator/" + this.parent.data.slug + "/destroy" },
	
	events: {
	  "mousedown": "stopPropagation",
	  "keydown [name=email]": "enterSubmit",
	  "click [data-role=destroy-collaborator]": "destroy",
	},
	
	show: function(){
	  this.action = this.createAction
	  this.$("#collaborator-url-rapper").hide()
	  
		if (! this.loaded) {
			this.load()
		}
		else {
			this.__super__.show.call(this)
		}
	},
	
	load: function(){
		$.get(this.indexAction(), this.populate.bind(this))
	},

  populate: function(collaborators){
    this.loaded = true
    collaborators.forEach(function(collab){
      var $el = $( this.template )
      $el.data("collaborator-id", collab._id)

      if (collab.user) {
        $el.find(".email").remove()
        
        $el.find(".user")
           .attr("href", "/profile/" + collab.user.username)
        
        $el.find(".avatar")
           .css("background-image", "url(" + collab.user.photo + ")")
        
        $el.find(".username")
           .html( collab.user.displayName )
        
        if (collab.owner) {
          $el.find("button").remove()
        }
        else {
          $el.find(".role").remove()
        }
      }
      else {
        $el.find(".user").remove()
        $el.find(".role").remove()
        $el.find(".email").html( collab.email )
      }
      
      $("#collaborator-list").append($el)
    }.bind(this))
    
    this.__super__.show.call(this)
  },
  
	enterSubmit: function (e) {
		e.stopPropagation()
		var base = this
		if (e.keyCode == 13) {
			setTimeout(function(){
			  base.save(e)
			  base.reset()
			}, 100)
		}
	},
	
	validate: function(){
	  var errors = []
	  
    var email = this.$("[name=email]").val()		
		if (! email.length) {
			errors.push("Please enter an email address");
		}
		else if (email.indexOf("@") === -1) {
			errors.push("Please enter a valid email address");
		}
		
		return errors
	},
  
  success: function(data){
    this.reset()
    this.populate([data])
    // weird! this.$("#collaborator-url") not working here, but works without this
    setTimeout(function(){
      $("#collaborator-url").val("http://vvalls.com/join/" + data.nonce)
    }, 100)
    this.$("#collaborator-dummy-email").html(data.email)
    this.$("#collaborator-url-rapper").slideDown(300)
  },

  destroy: function(e){
    var base = this
    var $el = $(e.currentTarget).closest("li")
    
    if ($el.find(".user").length) {
      var name = $el.find(".username").html()
      ConfirmModal.confirm("Are you sure you want to remove " + name + " from this project?", _destroy)
    }
    else {
      _destroy()
    }
    
    function _destroy () {
      var _id = $el.data("collaborator-id")
      $el.remove()
      $.ajax({
        type: "DELETE",
        url: base.destroyAction(),
        data: { _id: _id, _csrf: $("[name=_csrf]").val() },
      })
    }
  },

})