glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

added ability to change metacode. updated bottom left menu with icon, upper right menu with hover states

Browse source
This commit is contained in:
Connor Turland 2014-02-09 18:54:45 -05:00
parent bfdf706f15
commit ac12c2a9ae
12 changed files with 153 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/images/MMCCicon_maximize_arrow_black.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 284 B

BIN
app/assets/images/MMCCicon_minimize_arrow_black.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 264 B

BIN
app/assets/images/beta_gen002.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

77
app/assets/javascripts/Jit/onCreateLabelHandler.js
View file

@ -27,11 +27,11 @@ function generateShowcardHTML() {
</span> \
<div class="links"> \
<div \
class="linkItem icon" \
title="click and drag to move card"> \
class="linkItem icon"> \
<div class="metacodeTitle">$_metacode_$</div> \
<div class="metacodeImage" \
style="background-image:url($_imgsrc_$);"></div> \
style="background-image:url($_imgsrc_$);" \
title="click and drag to move card"></div> \
</div> \
<div class="linkItem contributor"></div> \
<div class="linkItem mapCount">$_map_count_$</div> \
@ -40,6 +40,7 @@ function generateShowcardHTML() {
<a href="/topics/$_id_$" class="linkItem topicPopout" title="Open Topic in New Tab" target="_blank"></a>\
<div class="clearfloat"></div> \
</div> \
<div class="metacodeSelect">$_metacode_select_$</div> \
<div class="scroll"> \
<div class="desc"> \
<span class="best_in_place best_in_place_desc" \
@ -84,28 +85,6 @@ function replaceVariables(html, node) {
close_a_tag = '';
}
//create metacode_choices array from imgArray
var metacodes = new Array();
for (var key in imgArray) {
if (imgArray.hasOwnProperty(key)) {
if (key != node.getData("metacode")) {
metacodes.push(key);
}
}
}
//Arrange it how we want it
metacodes.sort();
metacodes.unshift(node.getData("metacode"));
var metacode_choices = "'[";
for (var i in metacodes) {
metacode_choices += '["' + metacodes[i] + '","' + metacodes[i] + '"],';
}
//remove trailing comma and add ]
metacode_choices = metacode_choices.slice(0, -1);
metacode_choices += "]'";
var desc_nil = "<span class='gray'>Click to add description...</span>";
var link_nil = "<span class='gray'>Click to add link...</span>";
@ -152,7 +131,7 @@ function replaceVariables(html, node) {
html = html.replace(/\$_name_\$/g, node.name);
html = html.replace(/\$_userid_\$/g, node.getData("userid"));
html = html.replace(/\$_username_\$/g, node.getData("username"));
html = html.replace(/\$_metacode_choices_\$/g, metacode_choices);
html = html.replace(/\$_metacode_select_\$/g, $('#metacodeOptions').html());
html = html.replace(/\$_go_link_\$/g, go_link);
html = html.replace(/\$_a_tag_\$/g, a_tag);
html = html.replace(/\$_close_a_tag_\$/g, close_a_tag);
@ -213,28 +192,42 @@ function populateShowCard(node) {
showCard.appendChild(perm);
}
var selectingMetacode = false;
// attach the listener that shows the metacode title when you hover over the image
$('.showcard .metacodeImage').hover(function(){
$('.showcard .metacodeImage').mouseenter(function(){
$('.showcard .icon').css('z-index','3');
$('.showcard .metacodeTitle').show();
},
function() {
$('.showcard .metacodeTitle').hide();
$('.showcard .icon').css('z-index','1');
});
$('.showcard .linkItem.icon').mouseleave(function() {
if ( !selectingMetacode ) {
$('.showcard .metacodeTitle').hide();
$('.showcard .icon').css('z-index','1');
}
});
$('.showcard .metacodeTitle').click(function() {
if (!selectingMetacode) {
selectingMetacode = true;
$(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
$('.metacodeSelect').show();
// add the scroll bar to the list of metacode select options if it isn't already there
if ( !$('.metacodeSelect ul').hasClass('mCustomScrollbar') ) {
$('.metacodeSelect ul').mCustomScrollbar();
$('.metacodeSelect li').click(function() {
selectingMetacode = false;
var metacodeName = $(this).find('.mSelectName').text();
updateMetacode(node, metacodeName);
});
}
} else {
selectingMetacode = false;
$(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
$('.metacodeSelect').hide();
}
});
//bind best_in_place ajax callbacks
$(showCard).find('.best_in_place_metacode').bind("ajax:success", function() {
var metacode = $(this).html();
//changing img alt, img src for top card (topic view page)
//and on-canvas card. Also changing image of node
$(showCard).find('img.icon').attr('alt', metacode);
$(showCard).find('img.icon').attr('src', imgArray[metacode].src);
node.setData("metacode", metacode);
Mconsole.plot();
});
$(showCard).find('.best_in_place_name').bind("ajax:success", function() {
var name = $(this).html();
node.name = name;

31
app/assets/javascripts/application.js
View file

@ -482,13 +482,6 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
addHoverForSettings();
//bind best_in_place ajax callbacks
$('.best_in_place_metacode').bind("ajax:success", function() {
var metacode = $(this).html();
//changing img alt, img src for top card (topic view page)
//and on-canvas card. Also changing image of node
$(this).parents('.CardOnGraph').find('img.icon').attr('alt', metacode);
$(this).parents('.CardOnGraph').find('img.icon').attr('src', imgArray[metacode].src);
});
$('.best_in_place_desc').bind("ajax:success", function() {
$(this).parents('.CardOnGraph').find('.scroll').mCustomScrollbar("update");
});
@ -678,6 +671,30 @@ function fetchRelatives(node) {
});
}
// @param node = JIT node object
// @param metacode = STRING like "Idea", "Action", etc.
function updateMetacode(node, metacode) {
var mdata = { "topic": { "metacode": metacode } };
$.ajax({
type: "PUT",
dataType: 'json',
url: "/topics/" + node.id,
data: mdata,
success: function(data) {
$('.CardOnGraph').find('.metacodeTitle').text(metacode);
$('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + imgArray[metacode].src + ')');
node.setData("metacode", metacode);
Mconsole.plot();
$('.metacodeTitle').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
$('.metacodeSelect').hide();
setTimeout(function() { $('.metacodeTitle').hide(); $('.showcard .icon').css('z-index','1'); }, 500);
},
error: function(){
alert('failed to update metacode');
}
});
}
function MconsoleReset() {
var tX = Mconsole.canvas.translateOffsetX;

16
app/assets/stylesheets/application.css
View file

@ -642,6 +642,9 @@ background: #0F1519 url('MMCCicon_save_new_map.png') no-repeat center center;
background-size: 28px 28px;
cursor:pointer;
}
.sidebarForkIcon:hover {
background-color: black;
}
.sidebarForkBox {
position:absolute;
display:none;
@ -677,6 +680,9 @@ background: #0F1519 url('MMCCicon_save_layout.png') no-repeat center center;
background-size: 22px 22px;
cursor:pointer;
}
.sidebarSaveIcon:hover {
background-color: black;
}
.sidebarSaveBox {
position:absolute;
display:none;
@ -713,6 +719,9 @@ background: #0F1519 url('MMCCicon_filter2.png') no-repeat center center;
background-size: 28px 28px;
cursor:pointer;
}
.sidebarFilterIcon:hover {
background-color: black;
}
/* we set a few of these params off screen to begin with, so that when we initialize the scroll bar it works, but then
we hide the element and position it correctly */
@ -803,6 +812,9 @@ background: #0F1519 url('MMCCicon_realtime_junto.png') no-repeat 0px 1px;
background-size: 36px 36px;
cursor:pointer;
}
.sidebarCollaborateIcon:hover, .sidebarCollaborateIcon.blue:hover{
background-color: black;
}
.sidebarCollaborateIcon.blue {
background: #0F1519 url('MMCCicon_realtime_blue.png') no-repeat center center;
background-size: 26px 25px;
@ -1955,7 +1967,7 @@ background-size: 22px 20px;
border:none;
bottom:36px;
left:-1px;
height:124px;
height:123px;
z-index:12;
width:121px;
color: white;
@ -1965,7 +1977,7 @@ background-size: 22px 20px;
overflow: hidden;
padding: 0 0 0 30px;
margin: 0;
background: #0F1519;/*url('black_bg.png'); */
background: #0F1519 url(beta_gen002.png) no-repeat 6px 12px;
border-left:1px solid #000;
border-right:1px solid #000;
}

53
app/assets/stylesheets/base.css
View file

@ -203,8 +203,18 @@ padding-left: 24px;
width: 90%;
padding-left: 10%;
padding-top: 4px;
background-color: crimson;
background-color: #64BC61;
}
.permission.canEdit .metacodeTitle {
cursor:pointer;
background-image: url(MMCCicon_maximize_arrow_black.png);
background-repeat:no-repeat;
background-position: right center;
}
.permission.canEdit .metacodeTitle.minimize {
background-image: url(MMCCicon_minimize_arrow_black.png);
}
.CardOnGraph .metacodeImage {
cursor:move;
width:50px;
@ -217,6 +227,47 @@ padding-left: 24px;
background-repeat:no-repeat;
}
#metacodeOptions {
display:none;
}
.CardOnGraph .metacodeSelect {
display:none;
width:100%;
z-index: 2;
position: absolute;
background: #EAEAEA;
height: 150px;
}
.CardOnGraph .metacodeSelect ul {
font-style: italic;
font-family: 'vinyl';
text-transform: uppercase;
position: absolute;
line-height: 36px;
font-size: 20px;
display:block;
width: 100%;
margin:0;
padding: 0;
list-style:none;
height:150px;
overflow:hidden;
}
.CardOnGraph .metacodeSelect ul li {
background-color: #EAEAEA;
width:100%;
border-bottom:1px solid #AAAAAA;
cursor:pointer;
}
.CardOnGraph .metacodeSelect ul li:hover {
background-color: #F8F8F8;
}
.CardOnGraph .metacodeSelect ul li img, .CardOnGraph .metacodeSelect ul li .mSelectName {
float:left;
}
.CardOnGraph .link {
position:absolute;

92
app/assets/stylesheets/topics.css.scss
View file

@ -2,95 +2,3 @@
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.nodeOptions {
display:none;
position: absolute;
top: -5px;
right: -17px;
}
.onCanvas .removeFromMap {
display:none !important;
}
.unauthenticated .deleteTopic {
display:none !important;
}
.removeFromCanvas {
display: block;
width: 17px;
height: 16px;
background: url('removeFromCanvas.png') no-repeat 2px 0;
}
.removeFromMap {
display: block;
width: 17px;
height: 16px;
background: url('removeFromMap.png') no-repeat 2px 0;
}
.centerOn {
display: block;
width: 17px;
height: 23px;
background: url("centerOn.png") no-repeat 2px 3px;
margin-top: 4px;
}
.deleteTopic {
display: block;
width: 17px;
height: 16px;
background: url('delete.png') no-repeat 2px 0;
}
.topic {
float:left;
margin:30px 0 30px 50px;
}
.topic .delete {
position: absolute;
top: -14px;
left: 0px;
background: none;
border: 0;
color: white;
border: none;
font-size: 14px;
margin: 0;
padding: 0;
cursor:pointer;
}
.topic .scroll {
display:block;
}
.topic .type {position: absolute;
color: white;
top: -22px;
right: 0;
font-weight: bold;
font-size: 20px;
line-height: 24px;}
.topic .icon { position:absolute; top:135px; left:-25px; }
.topic .title { font-size:22px; line-height:27px; display:block; border-bottom:2px solid #000; padding-bottom:5px; }
.topic .desc { font-size:15px; font-family:Arial, Helvetica, sans-serif; }
.topic .desc h3 { font-style:normal; margin-top:5px; }
.topic-go-arrow {
width: 25px;
height: 25px;
padding-bottom: 2px;
float: right;
}
.gray {
color: #999999;
}

6
app/controllers/topics_controller.rb
View file

@ -142,8 +142,10 @@ class TopicsController < ApplicationController
@topic.message 'update',@current.id
end
end
respond_with @topic
respond_to do |format|
format.js { render :json => @topic.self_as_json }
end
end
# GET mappings/:map_id/:topic_id/removefrommap

16
app/views/main/_metacodeoptions.html.erb Normal file
View file

@ -0,0 +1,16 @@
<%#
# @file
# this code generates the list of icons that will drop down in the metacode select list on the topic card
#%>
<div id="metacodeOptions">
<ul>
<% Metacode.order("name").all.each do |m| %>
<li>
<img width="30" height="30" src="/assets/<%= m.icon %>" alt="<%= m.name %>" />
<span class="mSelectName"><%= m.name %></span>
<div class="clearfloat"></div>
</li>
<% end %>
</ul>
</div>

1
app/views/maps/show.html.erb
View file

@ -53,6 +53,7 @@
<% if authenticated? %>
<%= render :partial => 'newtopic' %>
<%= render :partial => 'newsynapse' %>
<%= render :partial => 'main/metacodeoptions' %>
<% # for saving layouts %>
<% if @map.permission == "commons" || @map.user == user %>

14
app/views/topics/show.html.erb
View file

@ -46,6 +46,12 @@
</div>
<div class="clearfloat"></div>
<% if authenticated? %>
<%= render :partial => 'topics/new' %>
<%= render :partial => 'synapses/new' %>
<%= render :partial => 'main/metacodeoptions' %>
<% end %>
<script>
$(document).ready(function() {
function bindWandHover() {
@ -172,10 +178,4 @@
$(window).load(function() {
initialize("centered");
});
</script>
<% if authenticated? %>
<%= render :partial => 'topics/new' %>
<%= render :partial => 'synapses/new' %>
<% end %>
</script>