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

added more resources into help lightbox

Browse source
This commit is contained in:
Connor Turland 2014-09-20 15:11:58 -04:00
parent ac867d00ab
commit 90e974164d
9 changed files with 289 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/lib/embedly.js Normal file
View file

File diff suppressed because one or more lines are too long

237
app/assets/javascripts/src/Metamaps.js
View file

@ -632,9 +632,10 @@ Metamaps.Create = {
*
*/
Metamaps.TopicCard = {
openTopicCard: null, //stores the JIT local ID of the topic with the topic card open
linkActionsString: '<div class="linkActions"><div id="linkremove">Remove</div></div>',
openTopicCard: null, //stores the topic that's currently open
authorizedToEdit: false, // stores boolean for edit permission for open topic card
init: function () {
var self = Metamaps.TopicCard;
// initialize best_in_place editing
$('.authenticated div.permission.canEdit .best_in_place').best_in_place();
@ -645,31 +646,57 @@ Metamaps.TopicCard = {
$('.showcard').draggable({
handle: ".metacodeImage"
});
},
fadeInShowCard: function (topic) {
$('.showcard').fadeIn('fast');
Metamaps.TopicCard.openTopicCard = topic.isNew() ? topic.cid : topic.id;
embedly('on', 'card.rendered', self.embedlyCardRendered);
},
/**
* Will open the Topic Card for the node that it's passed
* @param {$jit.Graph.Node} node
*/
showCard: function (node) {
var self = Metamaps.TopicCard;
var topic = node.getData('topic');
self.openTopicCard = topic;
self.authorizedToEdit = topic.authorizeToEdit(Metamaps.Active.Mapper);
//populate the card that's about to show with the right topics data
Metamaps.TopicCard.populateShowCard(topic);
Metamaps.TopicCard.fadeInShowCard(topic);
self.populateShowCard(topic);
$('.showcard').fadeIn('fast');
},
hideCard: function () {
var self = Metamaps.TopicCard;
$('.showcard').fadeOut('fast');
Metamaps.TopicCard.openTopicCard = null;
self.openTopicCard = null;
self.authorizedToEdit = false;
},
embedlyCardRendered: function (iframe) {
var self = Metamaps.TopicCard;
$('#embedlyLinkLoader').hide();
$('#embedlyLink').fadeIn('fast');
if (self.authorizedToEdit) {
$('.embeds').append('<div id="linkremove"></div>');
$('#linkremove').click(self.removeLink);
}
},
removeLink: function () {
var self = Metamaps.TopicCard;
self.openTopicCard.save({
link: null
});
$('.embeds').empty();
$('.attachments').removeClass('hidden');
$('.addAttachment').show();
$('.CardOnGraph').removeClass('hasAttachment');
},
bindShowCardListeners: function (topic) {
var self = Metamaps.TopicCard;
var showCard = document.getElementById('showcard');
var authorized = self.authorizedToEdit;
// get mapper image
var setMapperImage = function (mapper) {
$('.contributorIcon').attr('src', mapper.get('image'));
@ -687,7 +714,6 @@ Metamaps.TopicCard = {
$('.attachments').append(addLinkDiv);
$('.showcard #addLinkReset').click(resetFunc);
$('.showcard #addLinkInput input').bind("paste keyup",inputEmbedFunc);
$('#addLinkInput input').focus();
};
var resetFunc = function () {
@ -712,38 +738,31 @@ Metamaps.TopicCard = {
'data-card-description': '0',
href: text
}).html(text);
//embedlyEl.embedly({
// query: {maxwidth: 300},
// key: '7983300f4c1f48569ca242e3d6bff1e9'
//});
$('.addLink').remove();
$('.attachments').addClass('hidden');
$('.embeds').append(embedlyEl);
$('.embeds').append('<div id="embedlyLinkLoader"></div>');
var loader = new CanvasLoader('embedlyLinkLoader');
loader.setColor('#4fb5c0'); // default is '#000000'
loader.setDiameter(28); // default is 40
loader.setDensity(41); // default is 40
loader.setRange(0.9); // default is 1.3
loader.show(); // Hidden by default
embedly('card', document.getElementById('embedlyLink'));
$('.CardOnGraph').addClass('hasAttachment');
$('.attachments').append(self.linkActionsString);
bindLinkActionListeners();
}
}, 100);
};
var removeLinkFunc = function () {
topic.save({
link: null
});
$('.embeds').empty();
$('.linkActions').remove();
$('.addAttachment').show();
$('.CardOnGraph').removeClass('hasAttachment');
};
var bindLinkActionListeners = function () {
$('#linkremove').click(removeLinkFunc);
};
if (topic.get('link')) {
//$('#embedlyLink').embedly({
// query: {maxwidth: 300},
// key: '7983300f4c1f48569ca242e3d6bff1e9'
//});
// initialize the link card, if there is a link
if (topic.get('link') && topic.get('link') !== '') {
var loader = new CanvasLoader('embedlyLinkLoader');
loader.setColor('#4fb5c0'); // default is '#000000'
loader.setDiameter(28); // default is 40
loader.setDensity(41); // default is 40
loader.setRange(0.9); // default is 1.3
loader.show(); // Hidden by default
embedly('card', document.getElementById('embedlyLink'));
bindLinkActionListeners();
}
$('.showcard #addlink').click(addLinkFunc);
@ -761,38 +780,79 @@ Metamaps.TopicCard = {
}
});
$('.showcard .metacodeTitle').click(function () {
var metacodeLiClick = function () {
selectingMetacode = false;
var metacodeName = $(this).find('.mSelectName').text();
var metacode = Metamaps.Metacodes.findWhere({
name: metacodeName
});
$('.CardOnGraph').find('.metacodeTitle').html(metacodeName)
.append('<div class="expandMetacodeSelect"></div>')
.attr('class', 'metacodeTitle mbg' + metacodeName.replace(/\s/g, ''));
$('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + metacode.get('icon') + ')');
topic.save({
metacode_id: metacode.id
});
Metamaps.Visualize.mGraph.plot();
$('.metacodeSelect').hide();
$('.metacodeTitle').hide();
$('.showcard .icon').css('z-index', '1');
};
var openMetacodeSelect = function (event) {
if (!selectingMetacode) {
selectingMetacode = true;
$(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
$('.metacodeSelect').show();
$('.metacodeSelect li li').click(function () {
selectingMetacode = false;
var metacodeName = $(this).find('.mSelectName').text();
var metacode = Metamaps.Metacodes.findWhere({
name: metacodeName
});
$('.CardOnGraph').find('.metacodeTitle').text(metacodeName)
.attr('class', 'metacodeTitle mbg' + metacodeName.replace(/\s/g, ''));
$('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + metacode.get('icon') + ')');
topic.save({
metacode_id: metacode.id
});
Metamaps.Visualize.mGraph.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);
});
} else {
selectingMetacode = false;
$(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
$('.metacodeSelect').hide();
event.stopPropagation();
}
});
};
var hideMetacodeSelect = function () {
selectingMetacode = false;
$('.metacodeSelect').hide();
$('.metacodeTitle').hide();
$('.showcard .icon').css('z-index', '1');
};
if (authorized) {
$('.showcard .metacodeTitle').click(openMetacodeSelect);
$('.showcard').click(hideMetacodeSelect);
$('.metacodeSelect > ul li').click(function (event){
event.stopPropagation();
});
$('.metacodeSelect li li').click(metacodeLiClick);
var bipName = $(showCard).find('.best_in_place_name');
bipName.best_in_place();
bipName.bind("best_in_place:activate", function () {
var $el = bipName.find('textarea');
var el = $el[0];
$el.attr('maxlength', '140');
$('.showcard .title').append('<div class="titleCounter"></div>');
var callback = function (data) {
$('.titleCounter').html(data.all + '/140');
};
Countable.live(el, callback);
});
bipName.bind("best_in_place:deactivate", function () {
$('.titleCounter').remove();
});
//bind best_in_place ajax callbacks
bipName.bind("ajax:success", function () {
var name = Metamaps.Util.decodeEntities($(this).html());
topic.set("name", name);
});
$(showCard).find('.best_in_place_desc').bind("ajax:success", function () {
this.innerHTML = this.innerHTML.replace(/\r/g, '')
var desc = $(this).html();
topic.set("desc", desc);
});
}
// ability to change permission
var selectingPermission = false;
@ -825,39 +885,6 @@ Metamaps.TopicCard = {
}
});
}
if (topic.authorizeToEdit(Metamaps.Active.Mapper)) {
var bipName = $(showCard).find('.best_in_place_name');
bipName.best_in_place();
bipName.bind("best_in_place:activate", function () {
var $el = bipName.find('textarea');
var el = $el[0];
$el.attr('maxlength', '140');
$('.showcard .title').append('<div class="titleCounter"></div>');
var callback = function (data) {
$('.titleCounter').html(data.all + '/140');
};
Countable.live(el, callback);
});
bipName.bind("best_in_place:deactivate", function () {
$('.titleCounter').remove();
});
//bind best_in_place ajax callbacks
bipName.bind("ajax:success", function () {
var name = Metamaps.Util.decodeEntities($(this).html());
topic.set("name", name);
});
$(showCard).find('.best_in_place_desc').bind("ajax:success", function () {
this.innerHTML = this.innerHTML.replace(/\r/g, '')
var desc = $(this).html();
topic.set("desc", desc);
});
}
},
populateShowCard: function (topic) {
var self = Metamaps.TopicCard;
@ -902,24 +929,28 @@ Metamaps.TopicCard = {
}
var desc_nil = "Click to add description...";
var addAttachmentHidden='';
nodeValues.attachments = '';
if (topic.get('link') && topic.get('link')!=='') {
nodeValues.attachmentsHidden = '';
if (topic.get('link') && topic.get('link')!== '') {
nodeValues.embeds = '<a href="' + topic.get('link') + '" id="embedlyLink" target="_blank" data-card-chrome="0" data-card-description="0">';
nodeValues.embeds += topic.get('link');
nodeValues.embeds += '</a>';
addAttachmentHidden='hidden';
nodeValues.attachments += self.linkActionsString;
nodeValues.embeds += '</a><div id="embedlyLinkLoader"></div>';
nodeValues.attachmentsHidden = 'hidden';
nodeValues.hasAttachment = "hasAttachment";
}
else {
nodeValues.embeds = '';
nodeValues.hasAttachment = '';
}
nodeValues.attachments += '<div class="addAttachment ' +addAttachmentHidden+ '">';
nodeValues.attachments+= '<div id="addlink"><div id="linkIcon" class="attachmentIcon"></div>Attach a link</div>';
nodeValues.attachments+= '<div id="addupload"><div id="uploadIcon" class="attachmentIcon"></div>Upload a file</div></div>';
if (authorized) {
nodeValues.attachments = '<div class="addAttachment">';
nodeValues.attachments += '<div id="addlink"><div id="linkIcon" class="attachmentIcon"></div>Attach a link</div>';
nodeValues.attachments += '<div id="addupload"><div id="uploadIcon" class="attachmentIcon"></div>Upload a file</div></div>';
} else {
nodeValues.attachmentsHidden = 'hidden';
nodeValues.attachments = '';
}
nodeValues.permission = topic.get("permission");
nodeValues.mk_permission = topic.get("permission").substring(0, 2);

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

@ -273,15 +273,17 @@ input[type="submit"]:active {
}
.openMetacodeSwitcher {
display: block;
height: 20px;
width: 20px;
background-image: url('MMCCicon_metacode_set_change.png');
background-size: contain;
height: 16px;
width: 16px;
background-image: url(metacodesettings_sprite.png);
position: absolute;
z-index: 2;
top: 20px;
left: 30px;
}
.openMetacodeSwitcher:hover {
background-position: -16px 0;
}
#metacodeImg {
height: 120px;
}
@ -1195,7 +1197,7 @@ float: left;
display: none;
}
#lightbox_main {
width: 770px;
width: 800px;
height: auto;
margin: 0 auto;
z-index: 2;
@ -1223,24 +1225,22 @@ float: left;
border: solid 2px #000;
}
#lightbox_overlay #lightbox_main a#lightbox_close {
/*background-image: url(../images/barometer_close.png);*/
background-image: url(xlightbox.png);
cursor: pointer;
height: 42px;
outline-color: -moz-use-text-color;
height: 32px;
outline-style: none;
outline-width: medium;
overflow: hidden;
position: absolute;
top: -23px;
right: -22px;
width: 42px;
top: -8px;
right: -32px;
width: 32px;
z-index: 4;
border: none;
background-repeat: no-repeat;
background-position: center center;
}
#lightbox_content {
/* background: white url(metacode-watermark.png) 443px -30px no-repeat;
padding: 20px;
border-radius: 5px;*/
width: 552px;
height: 434px;
background-color: #e0e0e0;
@ -1658,6 +1658,7 @@ float: left;
}
.permText {
width: 360px;
height: 32px;
margin: 16px 20px 0;
text-align: center;
float: right;
@ -1735,6 +1736,9 @@ float: left;
#helpWrapper li:hover, #helpWrapper li.ui-state-active {
border-bottom: 2px solid #00BCD4;
}
#helpWrapper li.ui-state-active a, #helpWrapper li.ui-state-hover a {
color: #424242;
}
#helpWrapper li a {
padding: 0;
font-family: 'din-medium', helvetica, sans-serif;
@ -1743,6 +1747,9 @@ float: left;
#quickReference {
padding: 32px 0 0 0;
}
#quickReference .ui-widget-content {
color: #424242;
}
#quickReference ul {
width: 150px;
}
@ -1769,6 +1776,35 @@ float: left;
#upYourSkillz {
margin: 0 68px;
}
#moreResources {
padding: 16px 0 0 0;
font-size: 14px;
line-height: 18px;
color: #424242;
}
.resourcesColumn {
margin-top: 32px;
width: 273px;
display: inline-block;
text-align: center;
text-transform: uppercase;
}
.resourcesColumn ul {
list-style: none;
}
.resourcesColumn li {
margin-top: 16px;
}
.resourcesColumn a.button {
background-color: #00BCD4;
color: #FFF;
padding-top: 8px;
height: 24px;
}
.resourcesColumn li a {
color: #424242;
}
/* Admin Pages */
.blackBox {

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

@ -288,21 +288,29 @@ cursor: pointer;
position: absolute;
line-height: 24px;
height:24px;
font-size: 20px;
font-size: 24px;
display: none;
width: 90%;
padding: 11px 0 11px 10%;
padding: 13px 0 9px 10%;
background-color: #64BC61;
color: #000;
color: #424242;
}
.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);
.permission.canEdit .expandMetacodeSelect {
position: absolute;
top: 16px;
right: 16px;
width: 16px;
height: 16px;
background-image: url(arrowright_sprite.png);
background-repeat: no-repeat;
background-position: 0 -32px;
}
.permission.canEdit .minimize .expandMetacodeSelect {
}
.CardOnGraph .metacodeImage {
@ -332,6 +340,7 @@ cursor: pointer;
position: relative;
line-height: 14px;
font-size: 14px;
font-family: helvetica, sans-serif;
display:block;
width: 100%;
margin:0;
@ -348,8 +357,13 @@ padding: 9px 12px;
.CardOnGraph .metacodeSelect ul li:hover {
background-color: #E0E0E0;
}
.CardOnGraph .metacodeSelect ul li img, .CardOnGraph .metacodeSelect ul li .mSelectName {
float:left;
.CardOnGraph .metacodeSelect ul li img {
position: absolute;
top: 4px;
left: 8px;
}
.CardOnGraph .metacodeSelect ul li .mSelectName {
padding-left: 28px;
}
.CardOnGraph .metacodeSelect ul ul {
display:none;
@ -362,6 +376,16 @@ float:left;
.CardOnGraph .metacodeSelect li:hover ul {
display: block;
}
.CardOnGraph .metacodeSelect .expandMetacodeSet {
position: absolute;
top: 8px;
right: 8px;
width: 16px;
height: 16px;
background-image: url(arrowright_sprite.png);
background-repeat: no-repeat;
background-position: 0 -32px;
}
.CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip {
display:block;
@ -380,6 +404,13 @@ float:left;
z-index:100;
}
#embedlyLink {
display: none;
}
#embedlyLinkLoader {
margin: 0 auto;
width: 28px;
}
.CardOnGraph .attachments {
border-top: 1px solid #BDBDBD;
@ -486,23 +517,19 @@ font-family: 'din-regular', helvetica, sans-serif;
position: relative;
}
.CardOnGraph .embeds {
position: relative;
}
#linkremove {
height: 12px;
padding: 26px 0 10px;
font-size: 12px;
background-image: url(/assets/remove.png);
background-repeat: no-repeat;
background-position: center 8px;
width: 48px;
text-align: center;
background-position: center center;
width: 24px;
height: 24px;
position: absolute;
top: 0;
right: 8px;
top: 3px;
right: 0;
cursor: pointer;
color: #9E9E9E;
}
#linkremove:hover {
color: #616161;
}
.cardSettings {

7
app/views/layouts/_templates.html.erb
View file

@ -191,7 +191,10 @@
</span>
<div class="links">
<div class="linkItem icon">
<div class="metacodeTitle {{metacode_class}}">{{metacode}}</div>
<div class="metacodeTitle {{metacode_class}}">
{{metacode}}
<div class="expandMetacodeSelect"></div>
</div>
<div class="metacodeImage" style="background-image:url({{imgsrc}});" title="click and drag to move card"></div>
<div class="metacodeSelect">{{{metacode_select}}}</div>
</div>
@ -219,7 +222,7 @@
<div class="embeds">
{{{embeds}}}
</div>
<div class="attachments">
<div class="attachments {{attachmentsHidden}}">
{{{attachments}}}
</div>
<div class="clearfloat"></div>

3
app/views/layouts/application.html.erb
View file

@ -104,9 +104,6 @@
Metamaps.Loading.loader.setDensity(41); // default is 40
Metamaps.Loading.loader.setRange(0.9); // default is 1.3
Metamaps.Loading.loader.show(); // Hidden by default
// embedly
!function(a){var b="embedly-platform",c="script";if(!a.getElementById(b)){var d=a.createElement(c);d.id=b,d.src=("https:"===document.location.protocol?"https":"http")+"://cdn.embedly.com/widgets/platform.js";var e=document.getElementsByTagName(c)[0];e.parentNode.insertBefore(d,e)}}(document);
</script>
<%= render :partial => 'layouts/googleanalytics' if Rails.env.production? %>

44
app/views/shared/_cheatsheet.html.erb
View file

@ -128,5 +128,49 @@
<div class="tutorialItem" id="advancedMapping">3. ADVANCED MAPPING</div>
</div>
<div id="moreResources">
<p>For more information about Metamaps.cc, visit our Knowledge Base or skip directly to a section by clicking on one of the categories below.</p>
<div class="resourcesColumnOne resourcesColumn">
<a href="#" target="_blank" data-bypass="true" class="button">Feedback Forums</a>
<ul>
<li>
<a href="#" target="_blank" data-bypass="true">Getting Started</a>
</li>
<li>
<a href="#" target="_blank" data-bypass="true">Key Fundamentals</a>
</li>
<li>
<a href="#" target="_blank" data-bypass="true">Best Practices</a>
</li>
<li>
<a href="#" target="_blank" data-bypass="true">General Troubleshooting</a>
</li>
<li>
<a href="#" target="_blank" data-bypass="true">Applications & Use Cases</a>
</li>
</ul>
</div>
<div class="resourcesColumnTwo resourcesColumn">
<a href="#" target="_blank" data-bypass="true" class="button">KNOWLEDGE BASE</a>
<ul>
<li>
<a href="#" target="_blank" data-bypass="true">General Questions</a>
</li>
<li>
<a href="#" target="_blank" data-bypass="true">Getting Involved</a>
</li>
<li>
<a href="#" target="_blank" data-bypass="true">Organization & Governance</a>
</li>
<li>
<a href="#" target="_blank" data-bypass="true">Technical Infrastructure</a>
</li>
<li>
<a href="#" target="_blank" data-bypass="true">References & Key Theory</a>
</li>
</ul>
</div>
</div>
</div>

6
app/views/shared/_forkmap.html.erb
View file

@ -5,11 +5,7 @@
<div class="onConsole">
<%= form_for Map.new, url: maps_url, remote: true, html: { class: "new_map", id: "fork_map" } do |form|%>
<% if controller_name == "maps" %>
<h3 class="forCreateMap">Save To New Map</h3>
<% elsif controller_name == "topics" %>
<h3 class="forCreateMap">Save As New Map</h3>
<% end %>
<h3 class="forCreateMap">Save To New Map</h3>
<div class="inputGroup">
<label for="map_name">Name: </label>

6
app/views/shared/_metacodeoptions.html.erb
View file

@ -8,10 +8,11 @@
<% MetacodeSet.order("name").all.each do |set| %>
<li>
<span><%= set.name %></span>
<div class="expandMetacodeSet"></div>
<ul>
<% set.metacodes.sort { |a, b| a.name <=> b.name }.each do |m| %>
<li data-id="<%= m.id.to_s %>">
<img width="16" height="16" src="<%= m.icon %>" alt="<%= m.name %>" />
<img width="24" height="24" src="<%= m.icon %>" alt="<%= m.name %>" />
<span class="mSelectName"><%= m.name %></span>
<div class="clearfloat"></div>
</li>
@ -21,10 +22,11 @@
<% end %>
<li>
<span>All</span>
<div class="expandMetacodeSet"></div>
<ul>
<% Metacode.order("name").all.each do |m| %>
<li data-id="<%= m.id.to_s %>">
<img width="16" height="16" src="<%= m.icon %>" alt="<%= m.name %>" />
<img width="24" height="24" src="<%= m.icon %>" alt="<%= m.name %>" />
<span class="mSelectName"><%= m.name %></span>
<div class="clearfloat"></div>
</li>