From aace6796f5612b79bf8c1c444be39c035fb438f5 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Mon, 19 Sep 2016 20:30:34 -0400 Subject: [PATCH] allow topic carousel to be pinned open (#643) * so that rapid topic creation can happen in succession * close when map closes --- app/assets/images/pincarousel_sprite.png | Bin 0 -> 822 bytes app/assets/javascripts/lib/cloudcarousel.js | 4 ++- app/assets/javascripts/src/JIT.js.erb | 2 +- app/assets/javascripts/src/Metamaps.Create.js | 24 ++++++++++++++-- app/assets/javascripts/src/Metamaps.Map.js | 10 +++++-- app/assets/javascripts/src/Metamaps.Topic.js | 14 ++++++--- app/assets/stylesheets/application.css.erb | 20 +++++++++++++ app/assets/stylesheets/clean.css.erb | 27 ++++++++++++++++-- app/views/maps/_newtopic.html.erb | 8 +++++- app/views/topics/_new.html.erb | 7 ++++- 10 files changed, 101 insertions(+), 15 deletions(-) create mode 100644 app/assets/images/pincarousel_sprite.png diff --git a/app/assets/images/pincarousel_sprite.png b/app/assets/images/pincarousel_sprite.png new file mode 100644 index 0000000000000000000000000000000000000000..e12956ab75962b1f78514e2615709754b35a5947 GIT binary patch literal 822 zcmV-61Ihe}P)rlDTf0sd#h>8bUl6)+ zKiup8IYd{@?|=6 z|2y_QK|k{#cY_zuFpPp>Sq=F10zU`eb<^A_m$$DA3DBS++Y?^447kLZm#GUej$xx& ze{W=2R&(wUA~TS1PdLs)0r*S{9LF7ql0fXwkwZu%0QfCLVBBuE?+XTY>Oz)luuTvy z!|%+p>^|LNuD0-5nmdGK*k}bMV@a5%^MZ3ygvXG6*EIbApszz1;tF8%Qvm;>sim{e zwgUv73m#fR0!U`xalE~#M|W@v9%6U~c;vnc06^m2gv1XF>21Lia~^?R`1=e2{$@G> z$o!LGSli(&X(n*Ao(aI`y^NNSl#hh0$d{3AyYB#`#Cb174Ivv>*G&y=eHlf7vRJ;# z*YW?Q2XeXG3f?J4s;UlQV=~;I77B%AdZ1J)#nuBG8}hoMs9o|Q1Bq@vpHHR-f?#p= z0QPnQA5Xdp@ezs1u7JmIMw+{mG^#B3!^Z>12Mh}3% zE=nIy58(e??{Dh?5b)9etJ4FLq-e6N{@Z%s51hGB8)C_ukpKVy07*qoM6N<$g0V+< AI{*Lx literal 0 HcmV?d00001 diff --git a/app/assets/javascripts/lib/cloudcarousel.js b/app/assets/javascripts/lib/cloudcarousel.js index b37abfd7..bf6259c9 100644 --- a/app/assets/javascripts/lib/cloudcarousel.js +++ b/app/assets/javascripts/lib/cloudcarousel.js @@ -179,7 +179,9 @@ jQuery.browser = browser; { // START METAMAPS CODE $('body').bind('mousewheel',this,function(event, delta) { - if (Metamaps.Create.newTopic.beingCreated && !Metamaps.Create.isSwitchingSet) { + if (Metamaps.Create.newTopic.beingCreated && + !Metamaps.Create.isSwitchingSet && + !Metamaps.Create.newTopic.pinned) { event.data.rotate(delta); return false; } diff --git a/app/assets/javascripts/src/JIT.js.erb b/app/assets/javascripts/src/JIT.js.erb index d31d850c..2cb202dc 100644 --- a/app/assets/javascripts/src/JIT.js.erb +++ b/app/assets/javascripts/src/JIT.js.erb @@ -2454,7 +2454,7 @@ Extras.Classes.Navigation = new Class({ // START METAMAPS CODE e.preventDefault(); if (e.target.id != 'infovis-canvas') return; - if (Metamaps.Create.newTopic.beingCreated) return; + if (Metamaps.Create.newTopic.beingCreated && !Metamaps.Create.newTopic.pinned) return; // END METAMAPS CODE //$.event.stop($.event.get(e, win)); diff --git a/app/assets/javascripts/src/Metamaps.Create.js b/app/assets/javascripts/src/Metamaps.Create.js index bb01d129..6f3bbb62 100644 --- a/app/assets/javascripts/src/Metamaps.Create.js +++ b/app/assets/javascripts/src/Metamaps.Create.js @@ -150,6 +150,17 @@ Metamaps.Create = { $('#topic_name').keyup(function () { Metamaps.Create.newTopic.name = $(this).val() }) + + $('.pinCarousel').click(function() { + if (Metamaps.Create.newTopic.pinned) { + $('.pinCarousel').removeClass('isPinned') + Metamaps.Create.newTopic.pinned = false + } + else { + $('.pinCarousel').addClass('isPinned') + Metamaps.Create.newTopic.pinned = true + } + }) var topicBloodhound = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), @@ -204,6 +215,7 @@ Metamaps.Create = { x: null, y: null, addSynapse: false, + pinned: false, open: function () { $('#new_topic').fadeIn('fast', function () { $('#topic_name').focus() @@ -211,10 +223,16 @@ Metamaps.Create = { Metamaps.Create.newTopic.beingCreated = true Metamaps.Create.newTopic.name = '' }, - hide: function () { - $('#new_topic').fadeOut('fast') + hide: function (force) { + if (force || !Metamaps.Create.newTopic.pinned) { + $('#new_topic').fadeOut('fast') + Metamaps.Create.newTopic.beingCreated = false + } + if (force) { + $('.pinCarousel').removeClass('isPinned') + Metamaps.Create.newTopic.pinned = false + } $('#topic_name').typeahead('val', '') - Metamaps.Create.newTopic.beingCreated = false } }, newSynapse: { diff --git a/app/assets/javascripts/src/Metamaps.Map.js b/app/assets/javascripts/src/Metamaps.Map.js index 0964ef51..1c3c638d 100644 --- a/app/assets/javascripts/src/Metamaps.Map.js +++ b/app/assets/javascripts/src/Metamaps.Map.js @@ -136,7 +136,7 @@ Metamaps.Map = { $('.rightclickmenu').remove() Metamaps.TopicCard.hideCard() Metamaps.SynapseCard.hideCard() - Metamaps.Create.newTopic.hide() + Metamaps.Create.newTopic.hide(true) // true means force (and override pinned) Metamaps.Create.newSynapse.hide() Metamaps.Filter.close() Metamaps.Map.InfoBox.close() @@ -284,7 +284,13 @@ Metamaps.Map = { } } - return { + // this is so that if someone has relied on the auto-placement feature on this map, + // it will at least start placing nodes at the first empty spot + // this will only work up to the point in the spiral at which someone manually moved a node + if (Metamaps.Mappings.findWhere({ xloc: nextX, yloc: nextY })) { + return self.getNextCoord() + } + else return { x: nextX, y: nextY } diff --git a/app/assets/javascripts/src/Metamaps.Topic.js b/app/assets/javascripts/src/Metamaps.Topic.js index da2e6be3..40a4cd42 100644 --- a/app/assets/javascripts/src/Metamaps.Topic.js +++ b/app/assets/javascripts/src/Metamaps.Topic.js @@ -325,9 +325,12 @@ Metamaps.Topic = { }) Metamaps.Topics.add(topic) + if (Metamaps.Create.newTopic.pinned) { + var nextCoords = Metamaps.Map.getNextCoord() + } var mapping = new Metamaps.Backbone.Mapping({ - xloc: Metamaps.Create.newTopic.x, - yloc: Metamaps.Create.newTopic.y, + xloc: nextCoords ? nextCoords.x : Metamaps.Create.newTopic.x, + yloc: nextCoords ? nextCoords.y : Metamaps.Create.newTopic.y, mappable_id: topic.cid, mappable_type: 'Topic', }) @@ -347,9 +350,12 @@ Metamaps.Topic = { var topic = self.get(id) + if (Metamaps.Create.newTopic.pinned) { + var nextCoords = Metamaps.Map.getNextCoord() + } var mapping = new Metamaps.Backbone.Mapping({ - xloc: Metamaps.Create.newTopic.x, - yloc: Metamaps.Create.newTopic.y, + xloc: nextCoords ? nextCoords.x : Metamaps.Create.newTopic.x, + yloc: nextCoords ? nextCoords.y : Metamaps.Create.newTopic.y, mappable_type: 'Topic', mappable_id: topic.id, }) diff --git a/app/assets/stylesheets/application.css.erb b/app/assets/stylesheets/application.css.erb index 5a4d62d3..d6d80201 100644 --- a/app/assets/stylesheets/application.css.erb +++ b/app/assets/stylesheets/application.css.erb @@ -567,6 +567,26 @@ button.button.btn-no:hover { .openMetacodeSwitcher:hover { background-position: -16px 0; } +.pinCarousel { + cursor: pointer; + display: block; + height: 16px; + width: 16px; + background-image: url(<%= asset_data_uri('pincarousel_sprite.png') %>); + position: absolute; + z-index: 2; + top: 20px; + right: 16px; +} +.pinCarousel:hover { + background-position: 0 -16px; +} +.pinCarousel.isPinned { + background-position: -16px 0; +} +.pinCarousel.isPinned:hover { + background-position: -16px -16px; +} #metacodeImg { height: 120px; } diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb index 71985408..b41f14ca 100644 --- a/app/assets/stylesheets/clean.css.erb +++ b/app/assets/stylesheets/clean.css.erb @@ -458,7 +458,7 @@ } .zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder, - .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove, .chat-button:hover .tooltips, .starMap:hover .tooltipsAbove { + .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove, .chat-button:hover .tooltips, .starMap:hover .tooltipsAbove, .openMetacodeSwitcher:hover .tooltipsAbove, .pinCarousel:not(.isPinned):hover .tooltipsAbove.helpPin, .pinCarousel.isPinned:hover .tooltipsAbove.helpUnpin { display: block; } @@ -522,6 +522,29 @@ margin-left: -34px; } +.openMetacodeSwitcher .tooltipsAbove { + left: -50px; + top: -5px; +} +.pinCarousel .tooltipsAbove { + top: -5px; +} +.pinCarousel .tooltipsAbove.helpPin { + left: -24px; +} +.pinCarousel .tooltipsAbove.helpUnpin { + left: -14px; +} +.openMetacodeSwitcher .tooltipsAbove:after { + left: 50%; +} +.pinCarousel .tooltipsAbove.helpPin:after { + left: 46%; +} +.pinCarousel .tooltipsAbove.helpUnpin:after { + left: 42%; +} + .sidebarForkIcon div:after{ left: 45%; } @@ -586,7 +609,7 @@ right: 37% !important; } -.mapInfoIcon div:after, .openCheatsheet div:after, .starMap div:after { +.mapInfoIcon div:after, .openCheatsheet div:after, .starMap div:after, .openMetacodeSwitcher div:after, .pinCarousel div:after { content: ''; position: absolute; top: 76%; diff --git a/app/views/maps/_newtopic.html.erb b/app/views/maps/_newtopic.html.erb index e5263d76..ba3d1797 100644 --- a/app/views/maps/_newtopic.html.erb +++ b/app/views/maps/_newtopic.html.erb @@ -1,5 +1,11 @@ <%= form_for Topic.new, url: topics_url, remote: true do |form| %> -
+
+
Switch Metacodes
+
+
+
Pin Open
+
Unpin
+
<% @metacodes = user_metacodes() %> <% set = get_metacodeset() %> diff --git a/app/views/topics/_new.html.erb b/app/views/topics/_new.html.erb index 49b6a9a8..4f856a81 100644 --- a/app/views/topics/_new.html.erb +++ b/app/views/topics/_new.html.erb @@ -6,7 +6,12 @@
<%= form_for Topic.new, url: topics_url, remote: true do |form| %> -
+
+
Switch Metacodes
+
+
+
Keep Open
+
<% @m = user.settings.metacodes %> <% set = @m[0].include?("metacodeset") ? MetacodeSet.find(@m[0].sub("metacodeset-","").to_i) : false %>