From 9257818363269a2893c1a7ee61adb497f749e38f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 25 Aug 2014 18:15:40 -0400 Subject: collab stuff 90% there --- public/assets/img/logo.svg | 49 ++++++++++ .../assets/javascripts/ui/editor/Collaborators.js | 54 ++++++++--- .../assets/javascripts/ui/editor/EditorSettings.js | 12 ++- public/assets/javascripts/ui/editor/EditorView.js | 3 +- public/assets/javascripts/ui/lib/FormView.js | 12 ++- public/assets/stylesheets/app.css | 107 ++++++++++++++++++--- 6 files changed, 205 insertions(+), 32 deletions(-) create mode 100644 public/assets/img/logo.svg (limited to 'public') diff --git a/public/assets/img/logo.svg b/public/assets/img/logo.svg new file mode 100644 index 0000000..72b904a --- /dev/null +++ b/public/assets/img/logo.svg @@ -0,0 +1,49 @@ + + + +]> + + + + + + + + + + diff --git a/public/assets/javascripts/ui/editor/Collaborators.js b/public/assets/javascripts/ui/editor/Collaborators.js index bb163f8..c27dbe0 100644 --- a/public/assets/javascripts/ui/editor/Collaborators.js +++ b/public/assets/javascripts/ui/editor/Collaborators.js @@ -4,14 +4,18 @@ var Collaborators = ModalFormView.extend({ template: $("#collaborator-template").html(), - createAction: "/api/collaborator/:slug/create", - destroyAction: "/api/collaborator/:slug/destroy", + 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: { + "keydown [name=email]": "enterSubmit", "click [data-role=destroy-collaborator]": "destroy", }, show: function(){ + this.action = this.createAction + if (! this.loaded) { this.load() } @@ -21,44 +25,70 @@ var Collaborators = ModalFormView.extend({ }, load: function(){ - $.get("/api/collaborator/:slug/index", this.populate.bind(this)) + $.get(this.indexAction(), this.populate.bind(this)) }, populate: function(collaborators){ - // collaborators.forEach(function(collab){ var $el = $( this.template ) - $el.data("collaborator-id", collab.id) - + $el.data("collaborator-id", collab._id) + if (collab.user) { $el.find(".email").remove() $el.find(".user") - .attr("href", "/profile/" + collab.username) + .attr("href", "/profile/" + collab.user.username) $el.find(".avatar") - .css("background-image", "url(" + collab.photo + ")") + .css("background-image", "url(" + collab.user.photo + ")") $el.find(".username") - .html( collab.displayName ) + .html( collab.user.displayName ) + + if (collab.owner) { + $el.find("button").remove() + } + else { + $el.find(".role").remove() + } } else { - $el.remove(".user") + $el.find(".user").remove() + $el.find(".role").remove() $el.find(".email").html( collab.email ) } - $("#collaborators").append($el) + $("#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) + } + }, + success: function(data){ + this.reset() this.populate([data]) }, destroy: function(e){ - var _id = $(e.currentTarget).closest("li").data("collaborator-id") + var $el = $(e.currentTarget).closest("li") + var _id = $el.data("collaborator-id") + $el.remove() + $.ajax({ + type: "DELETE", + url: this.destroyAction(), + data: { _id: _id, _csrf: $("[name=_csrf]").val() }, + }) }, }) diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index e9239e4..e5dd844 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -9,6 +9,7 @@ var EditorSettings = FormView.extend({ events: { "keydown": 'stopPropagation', "keydown [name=name]": 'enterSubmit', + "click [data-role='show-collaborators']": 'showCollaborators', "click [data-role='save-project']": 'save', "click [data-role='clone-project']": 'clone', "click [data-role='clear-project']": 'clear', @@ -28,7 +29,8 @@ var EditorSettings = FormView.extend({ load: function(data){ this.action = data.isNew ? this.createAction : this.updateAction - + this.parent.data = data + data.rooms && Rooms.deserialize(data.rooms) data.startPosition && scene.camera.move(data.startPosition) @@ -36,7 +38,6 @@ var EditorSettings = FormView.extend({ this.$name.val( "Room " + moment().format("DD/MM/YYYY ha") ) } else { - // console.log(data) this.thumbnailIsStale() this.$id.val( data._id ) @@ -48,6 +49,11 @@ var EditorSettings = FormView.extend({ } }, + showCollaborators: function(e){ + e && e.preventDefault() + this.parent.collaborators.show() + }, + clone: function(){ var names = this.$name.val().split(" ") if ( ! isNaN(Number( names[names.length-1] )) ) { @@ -152,6 +158,8 @@ var EditorSettings = FormView.extend({ Minotaur.hide() window.history.pushState(null, document.title, "/project/" + data.slug + "/edit") + + this.parent.data = data }, }) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 5fc5147..b75a912 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -31,8 +31,9 @@ var EditorView = View.extend({ ready: function(data){ $("#map").hide() - + this.settings.load(data) + this.collaborators.show() }, readyLayout: function(data){ diff --git a/public/assets/javascripts/ui/lib/FormView.js b/public/assets/javascripts/ui/lib/FormView.js index ab33bc0..17b748a 100644 --- a/public/assets/javascripts/ui/lib/FormView.js +++ b/public/assets/javascripts/ui/lib/FormView.js @@ -33,7 +33,7 @@ var FormView = View.extend({ }, serialize: function(){ - var fd = new FormData() + var fd = new FormData(), hasCSRF = false this.$("input[name], select[name], textarea[name]").each( function(){ if (this.type == "file") { @@ -48,9 +48,14 @@ var FormView = View.extend({ } else { fd.append(this.name, this.value); + hasCSRF = hasCSRF || this.name == "_csrf" } }); + if (! hasCSRF) { + fd.append("_csrf", $("[name=_csrf]").val()) + } + return fd }, @@ -71,9 +76,12 @@ var FormView = View.extend({ return } } + + var action = typeof this.action == "function" ? this.action() : this.action + if (! action) return var request = $.ajax({ - url: this.action, + url: action, type: this.method, data: this.serialize(), dataType: "json", diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 92eed33..f59635b 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1202,13 +1202,13 @@ input[type="range"]::-webkit-slider-thumb { transform: translateY(0px); } -#startpoint { +.modalLink { text-decoration: none; } - -#startpoint:hover { +.modalLink:hover { text-decoration: underline; } + @-webkit-keyframes fade { 50% { opacity:0.6; @@ -1270,7 +1270,7 @@ input[type="range"]::-webkit-slider-thumb { width: 100%; margin-top: 10px; } -.settings .subButtons a{ +.settings .subButtons a { font-size: 12px; font-weight: 300; width: 40px; @@ -1553,12 +1553,15 @@ form li textarea { position: fixed; right: 20px; top: 20px; + z-index: 20; } .close:hover { color:lightgreen; } + + .facebook { width: 100%; display: inline-block; @@ -1652,26 +1655,100 @@ form li textarea { .share a:hover{ text-decoration:underline; } -@-webkit-keyframes borderanimation -{ + +/* COLLABORATORS */ + +.collaborators > div { + width: 600px; + margin: 0 auto; + text-align: left; + background: white; + padding: 10px; + margin: 20px auto; +} +.collaborators button { + width: auto; + position: relative; + top: -2px; +} +.collaborators form { + max-width: none; +} +.collaborators form input[type=submit] { + float: none; + width: 150px; + position: relative; + top: -2px; + font-size: 11px; + + padding: 8px; + border: 1px solid; + font-weight: 500; + background: white; + cursor: pointer; +} +.collaborators form input[type=submit]:hover { + background-color: black; + border-color: black; +} +.collaborators p { + margin: 20px 0; +} +.collaborators form input[type=text] { + font-size: 16px; + width: 300px; +} +.collaborators h2 { + margin: 20px auto 10px; +} +#collaborator-list { + margin-top: 20px; +} +#collaborator-list li { + list-style-type: none; + background: #fff; + padding-top: 4px; +} +#collaborator-list .avatar { + width: 32px; + height: 32px; + background-size: cover; + display: inline-block; + margin-right: 10px; +} +#collaborator-list .username { + position: relative; + top: -10px; +} +#collaborator-list .role { + float: right; + font-style: italic; + margin-top: 5px; + font-weight: 300; +} +#collaborator-list .email { + line-height: 31px; + position: relative; + left: 42px; + font-weight: 300; + font-style: italic; +} + +/* MARCHING ANTS ANIMATION */ + +@-webkit-keyframes borderanimation { 0%{width:600px;} 100%{width:750px;left:2px;} } - -@-webkit-keyframes borderanimationleftright -{ +@-webkit-keyframes borderanimationleftright { 0%{height:250px;} 100%{height:500px;top:2px;} } - -@keyframes borderanimation -{ +@keyframes borderanimation { 0%{width:500px;} 100%{width:750px;left:2px;} } - -@keyframes borderanimationleftright -{ +@keyframes borderanimationleftright { 0%{height:250px;} 100%{height:500px;top:2px;} } -- cgit v1.2.3-70-g09d2