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

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 264 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

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 .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;

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;

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;
}

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;

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;
}

View file

@ -143,7 +143,9 @@ class TopicsController < ApplicationController
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

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>

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 %>

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() {
@ -173,9 +179,3 @@
initialize("centered");
});
</script>
<% if authenticated? %>
<%= render :partial => 'topics/new' %>
<%= render :partial => 'synapses/new' %>
<% end %>