From 5c05c6bb83170ae1b6e7aa35dbd933012672801c Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Sun, 5 Oct 2014 13:58:05 -0400 Subject: [PATCH] 404 page updates, synapse card 90% --- app/assets/javascripts/src/Metamaps.JIT.js | 29 +--- app/assets/javascripts/src/Metamaps.js | 191 +++++++++++++-------- app/assets/stylesheets/application.css | 9 - app/assets/stylesheets/base.css | 174 +++++++++---------- app/controllers/synapses_controller.rb | 5 +- public/404.html | 11 +- 6 files changed, 216 insertions(+), 203 deletions(-) diff --git a/app/assets/javascripts/src/Metamaps.JIT.js b/app/assets/javascripts/src/Metamaps.JIT.js index 73ffa823..d2449fc2 100644 --- a/app/assets/javascripts/src/Metamaps.JIT.js +++ b/app/assets/javascripts/src/Metamaps.JIT.js @@ -99,6 +99,9 @@ Metamaps.JIT = { var synapse = adj.getData("synapses")[0]; // for now, just grab the first synapse + if (!synapse) return; // this means there are no corresponding synapses for + // this edge, don't render it + var directionCat = synapse.get("category"); //label placement on edges @@ -1095,7 +1098,7 @@ Metamaps.JIT = { //The test synapse was selected! - // make sure the edge hasn't been hidden temporarily + // make sure the edge hasn't been hidden from the page var node1id = synapse.get('edge').nodeFrom.id; var node2id = synapse.get('edge').nodeTo.id; var edge = Metamaps.Visualize.mGraph.graph.getAdjacence(node1id, node2id); @@ -1244,17 +1247,7 @@ Metamaps.JIT = { // delete the selected things from the database $('.rc-delete').click(function () { $('.rightclickmenu').remove(); - var n = Metamaps.Selected.Nodes.length; - var e = Metamaps.Selected.Edges.length; - var ntext = n == 1 ? "1 topic" : n + " topics"; - var etext = e == 1 ? "1 synapse" : e + " synapses"; - var text = "You have " + ntext + " and " + etext + " selected. "; - - var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on."); - if (r == true) { - Metamaps.Control.deleteSelectedEdges(); - Metamaps.Control.deleteSelectedNodes(); - } + Metamaps.Control.deleteSelected(); }); // remove the selected things from the map @@ -1388,17 +1381,7 @@ Metamaps.JIT = { // delete the selected things from the database $('.rc-delete').click(function () { $('.rightclickmenu').remove(); - var n = Metamaps.Selected.Nodes.length; - var e = Metamaps.Selected.Edges.length; - var ntext = n == 1 ? "1 topic" : n + " topics"; - var etext = e == 1 ? "1 synapse" : e + " synapses"; - var text = "You have " + ntext + " and " + etext + " selected. "; - - var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on."); - if (r == true) { - Metamaps.Control.deleteSelectedEdges(); - Metamaps.Control.deleteSelectedNodes(); - } + Metamaps.Control.deleteSelected(); }); // remove the selected things from the map diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js index a8df6bfe..7f57adc5 100644 --- a/app/assets/javascripts/src/Metamaps.js +++ b/app/assets/javascripts/src/Metamaps.js @@ -703,7 +703,7 @@ Metamaps.TopicCard = { var setMapperImage = function (mapper) { $('.contributorIcon').attr('src', mapper.get('image')); }; - Metamaps.Mapper.get(topic.get('user_id'), setMapperImage) + Metamaps.Mapper.get(topic.get('user_id'), setMapperImage); // starting embed.ly var resetFunc = function () { @@ -970,9 +970,11 @@ Metamaps.TopicCard = { */ Metamaps.SynapseCard = { openSynapseCard: null, - showCard: function (edge, e) { + showCard: function (edge, e, synapseIndex) { var self = Metamaps.SynapseCard; + var index = synapseIndex ? synapseIndex : 0; + //reset so we don't interfere with other edges, but first, save its x and y var myX = $('#edit_synapse').css('left'); var myY = $('#edit_synapse').css('top'); @@ -981,11 +983,12 @@ Metamaps.SynapseCard = { //so label is missing while editing Metamaps.Control.deselectEdge(edge); - var synapse = edge.getData('synapses')[0]; // for now, just get the first synapse + var synapse = edge.getData('synapses')[index]; // for now, just get the first synapse //create the wrapper around the form elements, including permissions //classes to make best_in_place happy var edit_div = document.createElement('div'); + edit_div.innerHTML = '
'; edit_div.setAttribute('id', 'edit_synapse'); if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) { edit_div.className = 'permission canEdit'; @@ -993,9 +996,9 @@ Metamaps.SynapseCard = { } else { edit_div.className = 'permission cannotEdit'; } - $('.main .wrapper').append(edit_div); + $('#wrapper').append(edit_div); - self.populateShowCard(synapse); + self.populateShowCard(edge, synapse); //drop it in the right spot, activate it $('#edit_synapse').css('position', 'absolute'); @@ -1018,39 +1021,42 @@ Metamaps.SynapseCard = { Metamaps.SynapseCard.openSynapseCard = null; }, - populateShowCard: function (synapse) { + populateShowCard: function (edge, synapse) { var self = Metamaps.SynapseCard; - self.add_name_form(synapse); + self.add_synapse_count(edge); + self.add_desc_form(synapse); self.add_user_info(synapse); self.add_perms_form(synapse); - if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) { - self.add_direction_form(synapse); - } + self.add_direction_form(synapse); }, + add_synapse_count: function (edge) { + var count = edge.getData("synapses").length; - add_name_form: function (synapse) { + $('#editSynUpperBar').append('
' + count + '
') + }, + add_desc_form: function (synapse) { var data_nil = 'Click to add description.'; // TODO make it so that this would work even in sandbox mode, // currently with Best_in_place it won't - //name editing form - $('#edit_synapse').append('
'); - $('#edit_synapse_name').attr('class', 'best_in_place best_in_place_desc'); - $('#edit_synapse_name').attr('data-object', 'synapse'); - $('#edit_synapse_name').attr('data-attribute', 'desc'); - $('#edit_synapse_name').attr('data-type', 'textarea'); - $('#edit_synapse_name').attr('data-nil', data_nil); - $('#edit_synapse_name').attr('data-url', '/synapses/' + synapse.id); - $('#edit_synapse_name').html(synapse.get("desc")); + //desc editing form + $('#editSynUpperBar').append('
'); + $('#edit_synapse_desc').attr('class', 'best_in_place best_in_place_desc'); + $('#edit_synapse_desc').attr('data-object', 'synapse'); + $('#edit_synapse_desc').attr('data-attribute', 'desc'); + $('#edit_synapse_desc').attr('data-type', 'textarea'); + $('#edit_synapse_desc').attr('data-nil', data_nil); + $('#edit_synapse_desc').attr('data-url', '/synapses/' + synapse.id); + $('#edit_synapse_desc').html(synapse.get("desc")); //if edge data is blank or just whitespace, populate it with data_nil - if ($('#edit_synapse_name').html().trim() == '') { - $('#edit_synapse_name').html(data_nil); + if ($('#edit_synapse_desc').html().trim() == '') { + $('#edit_synapse_desc').html(data_nil); } - $('#edit_synapse_name').bind("ajax:success", function () { + $('#edit_synapse_desc').bind("ajax:success", function () { var desc = $(this).html(); if (desc == data_nil) { synapse.set("desc", ''); @@ -1064,13 +1070,20 @@ Metamaps.SynapseCard = { add_user_info: function (synapse) { var u = '
'; + u += '' u += '
Created by ' + synapse.get("user_name") + '
'; - $('#edit_synapse').append(u); + $('#editSynLowerBar').append(u); + + // get mapper image + var setMapperImage = function (mapper) { + $('#edgeUser img').attr('src', mapper.get('image')); + }; + Metamaps.Mapper.get(synapse.get('user_id'), setMapperImage); }, add_perms_form: function (synapse) { //permissions - if owner, also allow permission editing - $('#edit_synapse').append('
'); + $('#editSynLowerBar').append('
'); // ability to change permission var selectingPermission = false; @@ -1107,10 +1120,8 @@ Metamaps.SynapseCard = { add_direction_form: function (synapse) { //directionality checkboxes - $('#edit_synapse').append(''); - $('#edit_synapse').append(''); - $('#edit_synapse').append(''); - $('#edit_synapse').append(''); + $('#editSynLowerBar').append('
'); + $('#editSynLowerBar').append('
'); var edge = synapse.get('edge'); @@ -1119,11 +1130,11 @@ Metamaps.SynapseCard = { if (edge.nodeFrom.pos.x < edge.nodeTo.pos.x || edge.nodeFrom.pos.x == edge.nodeTo.pos.x && edge.nodeFrom.pos.y < edge.nodeTo.pos.y) { - var left = edge.nodeTo; - var right = edge.nodeFrom; + var left = edge.nodeTo.getData("topic"); + var right = edge.nodeFrom.getData("topic"); } else { - var left = edge.nodeFrom; - var right = edge.nodeTo; + var left = edge.nodeFrom.getData("topic"); + var right = edge.nodeTo.getData("topic"); } /* @@ -1134,42 +1145,48 @@ Metamaps.SynapseCard = { var directionCat = synapse.get('category'); //both, none, from-to if (directionCat == 'from-to') { - var from_to = synapse.getDirection(); + var from_to = [synapse.get("node1_id"), synapse.get("node2_id")]; if (from_to[0] == left.id) { //check left checkbox - $('#edit_synapse_left').prop('checked', true); + $('#edit_synapse_left').addClass('checked'); } else { //check right checkbox - $('#edit_synapse_right').prop('checked', true); + $('#edit_synapse_right').addClass('checked'); } } else if (directionCat == 'both') { //check both checkboxes - $('#edit_synapse_left').prop('checked', true); - $('#edit_synapse_right').prop('checked', true); + $('#edit_synapse_left').addClass('checked'); + $('#edit_synapse_right').addClass('checked'); } - $('#edit_synapse_left, #edit_synapse_right').click(function () { - var leftChecked = $('#edit_synapse_left').is(':checked'); - var rightChecked = $('#edit_synapse_right').is(':checked'); - var dir = synapse.getDirection(); - var dirCat = 'none'; - if (leftChecked && rightChecked) { - dirCat = 'both'; - } else if (!leftChecked && rightChecked) { - dirCat = 'from-to'; - dir = [right.id, left.id]; - } else if (leftChecked && !rightChecked) { - dirCat = 'from-to'; - dir = [left.id, right.id]; - } + if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) { + $('#edit_synapse_left, #edit_synapse_right').click(function () { + + $(this).toggleClass('checked'); - synapse.save({ - category: dirCat, - node1_id: dir[0], - node2_id: dir[1] + var leftChecked = $('#edit_synapse_left').is('.checked'); + var rightChecked = $('#edit_synapse_right').is('.checked'); + + var dir = synapse.getDirection(); + var dirCat = 'none'; + if (leftChecked && rightChecked) { + dirCat = 'both'; + } else if (!leftChecked && rightChecked) { + dirCat = 'from-to'; + dir = [right.id, left.id]; + } else if (leftChecked && !rightChecked) { + dirCat = 'from-to'; + dir = [left.id, right.id]; + } + + synapse.save({ + category: dirCat, + node1_id: dir[0], + node2_id: dir[1] + }); + Metamaps.Visualize.mGraph.plot(); }); - Metamaps.Visualize.mGraph.plot(); - }); + } // if } //add_direction_form }; // end Metamaps.SynapseCard @@ -1501,7 +1518,7 @@ Metamaps.Realtime = { }); $('body').click(self.close); - self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); + self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); // io.connect('http://localhost:5001'); self.startActiveMap(); }, toggleBox: function (event) { @@ -2135,6 +2152,19 @@ Metamaps.Control = { Metamaps.Selected.Nodes.splice( Metamaps.Selected.Nodes.indexOf(node), 1); }, + deleteSelected: function () { + var n = Metamaps.Selected.Nodes.length; + var e = Metamaps.Selected.Edges.length; + var ntext = n == 1 ? "1 topic" : n + " topics"; + var etext = e == 1 ? "1 synapse" : e + " synapses"; + var text = "You have " + ntext + " and " + etext + " selected. "; + + var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on."); + if (r == true) { + Metamaps.Control.deleteSelectedEdges(); + Metamaps.Control.deleteSelectedNodes(); + } + }, deleteSelectedNodes: function () { // refers to deleting topics permanently var l = Metamaps.Selected.Nodes.length; for (var i = l - 1; i >= 0; i -= 1) { @@ -2262,9 +2292,18 @@ Metamaps.Control = { // TODO make it so that you select which one, of multiple possible synapses you want to delete - //var id = edge.getData("id"); - //Metamaps.Synapses.get(id).destroy(); - //Metamaps.Control.hideEdge(edge); + if (edge.getData("synapses").length - 1 === 0) { + Metamaps.Control.hideEdge(edge); + } + + var synapse = edge.getData("synapses")[0]; + var mapping = edge.getData("mappings")[0]; + synapse.destroy(); + + // the server will destroy the mapping, we just need to remove it here + Metamaps.Mappings.remove(mapping); + edge.getData("mappings").splice(0, 1); + edge.getData("synapses").splice(0, 1); }, removeSelectedEdges: function () { var l = Metamaps.Selected.Edges.length, @@ -2283,9 +2322,18 @@ Metamaps.Control = { // TODO make it so that you select which one, of multiple possible synapses you want - //var mappingid = edge.getData("mappingid"); - //Metamaps.Mappings.get(mappingid).destroy(); - //Metamaps.Control.hideEdge(edge); + if (edge.getData("mappings").length - 1 === 0) { + Metamaps.Control.hideEdge(edge); + } + + var synapse = edge.getData("synapses")[0]; + var mapping = edge.getData("mappings")[0]; + mapping.destroy(); + + Metamaps.Synapses.remove(synapse); + + edge.getData("mappings").splice(0, 1); + edge.getData("synapses").splice(0, 1); }, hideSelectedEdges: function () { var edge, @@ -2768,18 +2816,17 @@ Metamaps.Listeners = { break; case 82: //if r or R is pressed case 114: - if (e.ctrlKey){ + /*if (e.ctrlKey){ e.preventDefault(); Metamaps.Control.removeSelectedNodes(); - console.log('Once function works, selected nodes will be removed'); - } + Metamaps.Control.removeSelectedEdges(); + }*/ break; case 68: //if d or D is pressed case 100: if (e.ctrlKey){ e.preventDefault(); - Metamaps.Control.deleteSelectedNodes(); - console.log('Once function works, selected nodes will be deleted'); + Metamaps.Control.deleteSelected(); } break; case 72: //if h or H is pressed @@ -2787,7 +2834,7 @@ Metamaps.Listeners = { if (e.ctrlKey){ e.preventDefault(); Metamaps.Control.hideSelectedNodes(); - console.log('Once function works, selected nodes will be hidden'); + Metamaps.Control.hideSelectedEdges(); } break; default: @@ -3329,7 +3376,7 @@ Metamaps.Synapse = { topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id); node1 = topic1.get('node'); - topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id); + topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id); node2 = topic2.get('node'); Metamaps.Create.newSynapse.hide(); diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index f7a3ba5a..81701ed4 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -2351,15 +2351,6 @@ float: left; height: 100%; } - -#edit_synapse label, -#edit_synapse_left, -#edit_synapse_right { - display: inline-block; -} -#edit_synapse label.left { - margin-right: 0.5em; -} .templates { display: none; } diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index e59634af..b5341deb 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -219,7 +219,7 @@ background: none; .linkItem.synapseCount:hover .synapseCountIcon { background-position: 0 -32px; } -.linkItem.mapPerm { +.mapPerm { width: 32px; height: 32px; padding: 0; @@ -228,22 +228,22 @@ background: none; background-image: url(permissions32_sprite.png); background-position: 0 0; } -.linkItem.mapPerm.co { +.mapPerm.co { background-position: 0 0; } -.linkItem.mapPerm.pu { +.mapPerm.pu { background-position: -64px 0; } -.linkItem.mapPerm.pr { +.mapPerm.pr { background-position: -32px 0; } -.showcard .yourTopic .mapPerm:hover { +.yourTopic .mapPerm:hover, .yourEdge .mapPerm:hover { background-image: url(arrowperms_sprite.png); background-position-x: -32px; cursor:pointer; } -.showcard .yourTopic .mapPerm.minimize { +.yourTopic .mapPerm.minimize, .yourEdge .mapPerm.minimize { background-image: url(arrowperms_sprite.png) !important; background-position-x: 0px; cursor: pointer; @@ -555,69 +555,66 @@ font-family: 'din-regular', helvetica, sans-serif; display: inline-block; } -.permActivator { - width: 16px; - height: 16px; - background: url('settings.png') no-repeat 0 0; - overflow:hidden; - position: absolute; - left: 0px; - top: 30px; -} - -#edit_synapse .mapPerm, -#edit_synapse .permActivator { - position: static; - display: inline-block; - color: #000; -} - -#edit_synapse .mapPerm { - width: 20px; - height:20px; - background-repeat: no-repeat; - background-size: 20px 20px; - margin: 10px 12px 0 12px; -} -#edit_synapse .mapPerm.co { - background-image: url("CO32.png"); -} -#edit_synapse .mapPerm.pu { - background-image: url("PU32.png"); -} -#edit_synapse .mapPerm.pr { - background-image: url("PR32.png"); -} - -#edit_synapse .permActivator { - position: absolute; - margin-top: -1.3em; -} - #edit_synapse { - background: url("synapse32.png") no-repeat scroll 0 center / 30px 30px #FFFFFF; - border-radius: 5px; - padding: 5px 5px 5px 30px; - color: #000; + border-radius: 2px; + width: 270px; + box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16); } -#edit_synapse_name { - margin-left: 0.4em; - border-bottom: 1px solid black; - text-align:center; - max-width: 160px; +#editSynUpperBar { + background: #FFFFFF url(synapse32.png) no-repeat 8px center; + min-height: 48px; + border-bottom: 1px solid #222222; + display: table; + width: 100%; +} + +#editSynLowerBar { + background-color: #E0E0E0; + height: 48px; + position: relative; +} + +#synapseCardCount { + font-size: 18px; + display: table-cell; + vertical-align: middle; + padding-left: 44px; + width: 20px; + line-height: 18px; +} + +#edit_synapse_desc { + font-size: 14px; + font-family: 'din-regular', helvetica, sans-serif; + padding: 8px 32px 8px 4px; + display: table-cell; + vertical-align: middle; + line-height: 16px; +} + +#edit_synapse .best_in_place_desc textarea { + font-family: 'din-regular', sans-serif; + color: #424242; + font-size: 14px; + line-height: 16px; + width: 100%; + height: auto; + margin: 0; + padding: 0; + border: 0; + outline: none; + background: none; + resize: none; } #edgeUser { display:inline-block; - background-position: center center; - background-repeat: no-repeat; - background-size: 20px 20px; - height: 20px; - min-width: 20px; position: relative; - background-image: url("MMCCicon_mapper_black.png"); - margin: 10px 0 0 10px; + margin: 12px 0 0 11px; +} +#edgeUser img { + border-radius: 12px; } #edgeUser.hoverForTip:hover .tip { display:block; @@ -637,39 +634,36 @@ font-family: 'din-regular', helvetica, sans-serif; z-index: 100; } -#edit_synapse .click-to-edit { - margin-left: 0.3em; +#edit_synapse .mapPerm { + position: absolute; + top: 0px; + left: 40px; } -#edit_synapse.yourEdge .mapPerm:hover { - background-image: url(MMCCicon_maximize_arrow_black.png); - background-size: 24px 17px; - background-position: 0px 2px; - cursor:pointer; -} -#edit_synapse.yourEdge .mapPerm.minimize { - background-image: url(MMCCicon_minimize_arrow_black.png) !important; - background-size: 24px 17px; - background-position: 0px 2px; - cursor: pointer; -} -#edit_synapse .mapPerm .permissionSelect { - list-style: none; - width: 26px; - height: 52px; - position: relative; - top: 20px; - left:-3px; -} -#edit_synapse .mapPerm .permissionSelect li { - width: 26px; - height: 26px; +#edit_synapse_left, #edit_synapse_right { + position: absolute; + height: 24px; + width: 24px; + top: 12px; background-repeat: no-repeat; - background-position: center center; - background-size: 20px 20px; - background-color:white; } - +#edit_synapse_right { + background-image: url(synapsedirectionright_sprite.png); + right: 16px; +} +#edit_synapse_left { + background-image: url(synapsedirectionleft_sprite.png); + right: 56px; +} +#edit_synapse_left.checked, #edit_synapse_right.checked { + background-position-y: -48px; +} +.canEdit #edit_synapse_left, .canEdit #edit_synapse_right { + cursor: pointer; +} +.canEdit #edit_synapse_left:not(.checked):hover, .canEdit #edit_synapse_right:not(.checked):hover { + background-position-y: -24px; +} /* Map Cards */ diff --git a/app/controllers/synapses_controller.rb b/app/controllers/synapses_controller.rb index f30fa3d5..c048627c 100644 --- a/app/controllers/synapses_controller.rb +++ b/app/controllers/synapses_controller.rb @@ -54,10 +54,7 @@ class SynapsesController < ApplicationController @synapse.mappings.each do |m| m.map.touch(:updated_at) - - #push notify to anyone viewing same map in realtime (see mapping.rb to understand the 'message' action) - m.message 'destroy',@current.id - + m.delete end diff --git a/public/404.html b/public/404.html index ae2713cb..0cc86728 100644 --- a/public/404.html +++ b/public/404.html @@ -45,13 +45,14 @@ margin-bottom: 24px; } div.dialog { - width: 500px; + width: 380px; border: 0px; border-right-color: #999; border-bottom-color: #999; float: left; - margin-right: 100px; - padding-top: 150px; + margin-right: 50px; + padding-top: 70px; + padding-bottom: 70px; } .picture { width: 450px; @@ -64,12 +65,12 @@ float: left; background-position:50% 20%; background-size: 100%; - margin-top: 162px; + margin-top: 110px; } .wrapper { margin: 0 auto; - width: 1100px; + width: 900px; } .button {