extract mapmaker step 1

This commit is contained in:
Connor Turland 2015-01-22 18:29:17 -05:00
parent b2fce96974
commit a91c9951e3
14 changed files with 678 additions and 18325 deletions

Binary file not shown.

View file

@ -20,9 +20,6 @@
//= require ./src/Metamaps.Router
//= require ./src/Metamaps.Backbone
//= require ./src/Metamaps.Views
//= require ./src/JIT
//= require ./src/Metamaps
//= require ./src/Metamaps.JIT
//= require_directory ./shims
//= require_directory ./require
//= require_directory ./famous

View file

@ -0,0 +1,117 @@
if (typeof Metamaps === 'undefined') Metamaps = {};
Metamaps.Account = {
listenersInitialized: false,
init: function () {
var self = Metamaps.Account;
},
initListeners: function(){
var self = Metamaps.Account;
$('#user_image').change(self.showImagePreview);
self.listenersInitialized = true;
},
toggleChangePicture: function(){
var self = Metamaps.Account;
$('.userImageMenu').toggle();
if (!self.listenersInitialized) self.initListeners();
},
openChangePicture: function(){
var self = Metamaps.Account;
$('.userImageMenu').show();
if (!self.listenersInitialized) self.initListeners();
},
closeChangePicture: function(){
var self = Metamaps.Account;
$('.userImageMenu').hide();
},
showLoading: function(){
var self = Metamaps.Account;
var loader = new CanvasLoader('accountPageLoading');
loader.setColor('#4FC059'); // 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
$('#accountPageLoading').show();
},
showImagePreview: function(){
var self = Metamaps.Account;
var file = $('#user_image')[0].files[0];
var reader = new FileReader();
reader.onload = function(e) {
var $canvas = $('<canvas>').attr({
width: 84,
height: 84
});
var context = $canvas[0].getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
$('.userImageDiv canvas').remove();
$('.userImageDiv img').hide();
var imgWidth = imageObj.width;
var imgHeight = imageObj.height;
var dimensionToMatch = imgWidth > imgHeight ? imgHeight : imgWidth;
// draw cropped image
var nonZero = Math.abs(imgHeight - imgWidth) / 2;
var sourceX = dimensionToMatch === imgWidth ? 0 : nonZero;
var sourceY = dimensionToMatch === imgHeight ? 0 : nonZero;
var sourceWidth = dimensionToMatch;
var sourceHeight = dimensionToMatch;
var destX = 0;
var destY = 0;
var destWidth = 84;
var destHeight = 84;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
$('.userImageDiv').prepend($canvas);
};
imageObj.src = reader.result;
};
if (file) {
reader.readAsDataURL(file);
$('.userImageMenu').hide();
$('#remove_image').val('0');
}
},
removePicture: function(){
var self = Metamaps.Account;
$('.userImageDiv canvas').remove();
$('.userImageDiv img').attr('src', '/assets/user.png').show();
$('.userImageMenu').hide();
var input = $('#user_image');
input.replaceWith(input.val('').clone(true));
$('#remove_image').val('1');
},
changeName: function(){
$('.accountName').hide();
$('.changeName').show();
},
showPass: function(){
$(".toHide").show();
$(".changePass").hide();
},
hidePass: function(){
$(".toHide").hide();
$(".changePass").show();
$('#current_password').val('');
$('#user_password').val('');
$('#user_password_confirmation').val('');
}
};

View file

@ -0,0 +1,48 @@
if (typeof Metamaps === 'undefined') Metamaps = {};
Metamaps.Admin = {
selectMetacodes: [],
allMetacodes: [],
init: function () {
var self = Metamaps.Admin;
$('#metacodes_value').val(self.selectMetacodes.toString());
},
selectAll: function () {
var self = Metamaps.Admin;
$('.editMetacodes li').removeClass('toggledOff');
self.selectMetacodes = self.allMetacodes.slice(0);
$('#metacodes_value').val(self.selectMetacodes.toString());
},
deselectAll: function () {
var self = Metamaps.Admin;
$('.editMetacodes li').addClass('toggledOff');
self.selectMetacodes = [];
$('#metacodes_value').val(0);
},
liClickHandler: function () {
var self = Metamaps.Admin;
if ($(this).attr('class') != 'toggledOff') {
$(this).addClass('toggledOff');
var value_to_remove = $(this).attr('id');
self.selectMetacodes.splice(self.selectMetacodes.indexOf(value_to_remove), 1);
$('#metacodes_value').val(self.selectMetacodes.toString());
}
else if ($(this).attr('class') == 'toggledOff') {
$(this).removeClass('toggledOff');
self.selectMetacodes.push($(this).attr('id'));
$('#metacodes_value').val(self.selectMetacodes.toString());
}
},
validate: function () {
var self = Metamaps.Admin;
if (self.selectMetacodes.length == 0) {
alert('Would you pretty please select at least one metacode for the set?');
return false;
}
}
};

File diff suppressed because it is too large Load diff

View file

@ -1,3 +1,5 @@
if (typeof Metamaps === 'undefined') Metamaps = {};
Metamaps.Backbone = {};
Metamaps.Backbone.Map = Backbone.Model.extend({
urlRoot: '/maps',
@ -174,7 +176,7 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
},
getMaps: function () {
var self = this;
var Metamaps.Backbone = this;
if (this.page != "loadedAll") {
var numBefore = this.length;
@ -183,18 +185,18 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
data: { page: this.page },
success: function (collection, response, options) {
// you can pass additional options to the event you trigger here as well
if (collection.length - numBefore < 20) self.page = "loadedAll";
else self.page += 1;
self.trigger('successOnFetch');
if (collection.length - numBefore < 20) Metamaps.Backbone.page = "loadedAll";
else Metamaps.Backbone.page += 1;
Metamaps.Backbone.trigger('successOnFetch');
},
error: function (collection, response, options) {
// you can pass additional options to the event you trigger here as well
self.trigger('errorOnFetch');
Metamaps.Backbone.trigger('errorOnFetch');
}
});
}
else {
self.trigger('successOnFetch');
Metamaps.Backbone.trigger('successOnFetch');
}
}
});
@ -217,4 +219,445 @@ Metamaps.Backbone.Mapper = Backbone.Model.extend({
Metamaps.Backbone.MapperCollection = Backbone.Collection.extend({
model: Metamaps.Backbone.Mapper,
url: '/users'
});
});
Metamaps.Backbone.Metacode = Backbone.Model.extend({
initialize: function () {
var image = new Image();
image.crossOrigin = "Anonymous";
image.src = this.get('icon');
this.set('image',image);
},
prepareLiForFilter: function () {
var li = '';
li += '<li data-id="' + this.id.toString() + '">';
li += '<img src="' + this.get('icon') + '" data-id="' + this.id.toString() + '"';
li += ' alt="' + this.get('name') + '" />';
li += '<p>' + this.get('name').toLowerCase() + '</p></li>';
return li;
}
});
Metamaps.Backbone.MetacodeCollection = Backbone.Collection.extend({
model: this.Metacode,
url: '/metacodes',
comparator: function (a, b) {
a = a.get('name').toLowerCase();
b = b.get('name').toLowerCase();
return a > b ? 1 : a < b ? -1 : 0;
}
});
Metamaps.Backbone.Topic = Backbone.Model.extend({
urlRoot: '/topics',
blacklist: ['node', 'created_at', 'updated_at', 'user_name', 'user_image', 'map_count', 'synapse_count'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist);
},
save: function (key, val, options) {
var attrs;
// Handle both `"key", value` and `{key: value}` -style arguments.
if (key == null || typeof key === 'object') {
attrs = key;
options = val;
} else {
(attrs = {})[key] = val;
}
var newOptions = options || {};
var s = newOptions.success;
var permBefore = this.get('permission');
newOptions.success = function (model, response, opt) {
if (s) s(model, response, opt);
model.trigger('saved');
if (permBefore === 'private' && model.get('permission') !== 'private') {
model.trigger('noLongerPrivate');
}
else if (permBefore !== 'private' && model.get('permission') === 'private') {
model.trigger('nowPrivate');
}
};
return Backbone.Model.prototype.save.call(this, attrs, newOptions);
},
initialize: function () {
if (this.isNew()) {
this.set({
"user_id": Metamaps.Active.Mapper.id,
"desc": '',
"link": '',
"permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons'
});
}
this.on('changeByOther', this.updateCardView);
this.on('change', this.updateNodeView);
this.on('saved', this.savedEvent);
this.on('nowPrivate', function(){
var removeTopicData = {
topicid: this.id
};
$(document).trigger(Metamaps.JIT.events.removeTopic, [removeTopicData]);
});
this.on('noLongerPrivate', function(){
var newTopicData = {
mappingid: this.getMapping().id,
topicid: this.id
};
$(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData]);
});
this.on('change:metacode_id', Metamaps.Filter.checkMetacodes, this);
},
authorizeToEdit: function (mapper) {
if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
else return false;
},
authorizePermissionChange: function (mapper) {
if (mapper && this.get('user_id') === mapper.get('id')) return true;
else return false;
},
getDate: function () {
},
getMetacode: function () {
return Metamaps.Metacodes.get(this.get('metacode_id'));
},
getMapping: function () {
if (!Metamaps.Active.Map) return false;
return Metamaps.Mappings.findWhere({
map_id: Metamaps.Active.Map.id,
topic_id: this.isNew() ? this.cid : this.id
});
},
createNode: function () {
var mapping;
var node = {
adjacencies: [],
id: this.isNew() ? this.cid : this.id,
name: this.get('name')
};
if (Metamaps.Active.Map) {
mapping = this.getMapping();
node.data = {
$mapping: null,
$mappingID: mapping.id
};
}
return node;
},
updateNode: function () {
var mapping;
var node = this.get('node');
node.setData('topic', this);
if (Metamaps.Active.Map) {
mapping = this.getMapping();
node.setData('mapping', mapping);
}
return node;
},
savedEvent: function() {
Metamaps.Realtime.sendTopicChange(this);
},
updateViews: function() {
var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic;
var node = this.get('node');
// update topic card, if this topic is the one open there
if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) {
Metamaps.TopicCard.showCard(node);
}
// update the node on the map
if (onPageWithTopicCard && node) {
node.name = this.get('name');
Metamaps.Visualize.mGraph.plot();
}
},
updateCardView: function() {
var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic;
var node = this.get('node');
// update topic card, if this topic is the one open there
if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) {
Metamaps.TopicCard.showCard(node);
}
},
updateNodeView: function() {
var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic;
var node = this.get('node');
// update the node on the map
if (onPageWithTopicCard && node) {
node.name = this.get('name');
Metamaps.Visualize.mGraph.plot();
}
}
});
Metamaps.Backbone.TopicCollection = Backbone.Collection.extend({
model: Metamaps.Backbone.Topic,
url: '/topics'
});
Metamaps.Backbone.Synapse = Backbone.Model.extend({
urlRoot: '/synapses',
blacklist: ['edge', 'created_at', 'updated_at'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist);
},
save: function (key, val, options) {
var attrs;
// Handle both `"key", value` and `{key: value}` -style arguments.
if (key == null || typeof key === 'object') {
attrs = key;
options = val;
} else {
(attrs = {})[key] = val;
}
var newOptions = options || {};
var s = newOptions.success;
var permBefore = this.get('permission');
newOptions.success = function (model, response, opt) {
if (s) s(model, response, opt);
model.trigger('saved');
if (permBefore === 'private' && model.get('permission') !== 'private') {
model.trigger('noLongerPrivate');
}
else if (permBefore !== 'private' && model.get('permission') === 'private') {
model.trigger('nowPrivate');
}
};
return Backbone.Model.prototype.save.call(this, attrs, newOptions);
},
initialize: function () {
if (this.isNew()) {
this.set({
"user_id": Metamaps.Active.Mapper.id,
"permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons',
"category": "from-to"
});
}
this.on('changeByOther', this.updateCardView);
this.on('change', this.updateEdgeView);
this.on('saved', this.savedEvent);
this.on('noLongerPrivate', function(){
var newSynapseData = {
mappingid: this.getMapping().id,
synapseid: this.id
};
$(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData]);
});
this.on('nowPrivate', function(){
$(document).trigger(Metamaps.JIT.events.removeSynapse, [{
synapseid: this.id
}]);
});
this.on('change:desc', Metamaps.Filter.checkSynapses, this);
},
prepareLiForFilter: function () {
var li = '';
li += '<li data-id="' + this.get('desc') + '">';
li += '<img src="/assets/synapse16.png"';
li += ' alt="synapse icon" />';
li += '<p>' + this.get('desc') + '</p></li>';
return li;
},
authorizeToEdit: function (mapper) {
if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
else return false;
},
authorizePermissionChange: function (mapper) {
if (mapper && this.get('user_id') === mapper.get('id')) return true;
else return false;
},
getTopic1: function () {
return Metamaps.Topics.get(this.get('node1_id'));
},
getTopic2: function () {
return Metamaps.Topics.get(this.get('node2_id'));
},
getDirection: function () {
return [
this.getTopic1().get('node').id,
this.getTopic2().get('node').id
];
},
getMapping: function () {
if (!Metamaps.Active.Map) return false;
return Metamaps.Mappings.findWhere({
map_id: Metamaps.Active.Map.id,
synapse_id: this.isNew() ? this.cid : this.id
});
},
createEdge: function () {
var mapping, mappingID;
var synapseID = this.isNew() ? this.cid : this.id;
var edge = {
nodeFrom: this.get('node1_id'),
nodeTo: this.get('node2_id'),
data: {
$synapses: [],
$synapseIDs: [synapseID],
}
};
if (Metamaps.Active.Map) {
mapping = this.getMapping();
mappingID = mapping.isNew() ? mapping.cid : mapping.id;
edge.data.$mappings = [];
edge.data.$mappingIDs = [mappingID];
}
return edge;
},
updateEdge: function () {
var mapping;
var edge = this.get('edge');
edge.getData('synapses').push(this);
if (Metamaps.Active.Map) {
mapping = this.getMapping();
edge.getData('mappings').push(mapping);
}
return edge;
},
savedEvent: function() {
Metamaps.Realtime.sendSynapseChange(this);
},
updateViews: function() {
this.updateCardView();
this.updateEdgeView();
},
updateCardView: function() {
var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic;
var edge = this.get('edge');
// update synapse card, if this synapse is the one open there
if (onPageWithSynapseCard && edge == Metamaps.SynapseCard.openSynapseCard) {
Metamaps.SynapseCard.showCard(edge);
}
},
updateEdgeView: function() {
var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic;
var edge = this.get('edge');
// update the edge on the map
if (onPageWithSynapseCard && edge) {
Metamaps.Visualize.mGraph.plot();
}
}
});
Metamaps.Backbone.SynapseCollection = Backbone.Collection.extend({
model: Metamaps.Backbone.Synapse,
url: '/synapses'
});
Metamaps.Backbone.Mapping = Backbone.Model.extend({
urlRoot: '/mappings',
blacklist: ['created_at', 'updated_at'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist);
},
initialize: function () {
if (this.isNew()) {
this.set({
"user_id": Metamaps.Active.Mapper.id,
"map_id": Metamaps.Active.Map ? Metamaps.Active.Map.id : null
});
}
},
getMap: function () {
return Metamaps.Map.get(this.get('map_id'));
},
getTopic: function () {
if (this.get('category') === 'Topic') return Metamaps.Topic.get(this.get('topic_id'));
else return false;
},
getSynapse: function () {
if (this.get('category') === 'Synapse') return Metamaps.Synapse.get(this.get('synapse_id'));
else return false;
}
});
Metamaps.Backbone.MappingCollection = Backbone.Collection.extend({
model: Metamaps.Backbone.Mapping,
url: '/mappings'
});
//attach collection event listeners
Metamaps.Backbone.attachCollectionEvents = function () {
Metamaps.Topics.on("add remove", function(topic){
Metamaps.Map.InfoBox.updateNumbers();
Metamaps.Filter.checkMetacodes();
Metamaps.Filter.checkMappers();
});
Metamaps.Synapses.on("add remove", function(synapse){
Metamaps.Map.InfoBox.updateNumbers();
Metamaps.Filter.checkSynapses();
Metamaps.Filter.checkMappers();
});
if (Metamaps.Active.Map) {
Metamaps.Mappings.on("add remove", function(mapping){
Metamaps.Map.InfoBox.updateNumbers();
Metamaps.Filter.checkSynapses();
Metamaps.Filter.checkMetacodes();
Metamaps.Filter.checkMappers();
});
}
}
Metamaps.Backbone.init = function () {
Metamaps.Metacodes = Metamaps.Metacodes ? new Metamaps.Backbone.MetacodeCollection(Metamaps.Metacodes) : new Metamaps.Backbone.MetacodeCollection();
Metamaps.Topics = Metamaps.Topics ? new Metamaps.Backbone.TopicCollection(Metamaps.Topics) : new Metamaps.Backbone.TopicCollection();
Metamaps.Synapses = Metamaps.Synapses ? new Metamaps.Backbone.SynapseCollection(Metamaps.Synapses) : new Metamaps.Backbone.SynapseCollection();
Metamaps.Mappers = Metamaps.Mappers ? new Metamaps.Backbone.MapperCollection(Metamaps.Mappers) : new Metamaps.Backbone.MapperCollection();
// this is for topic view
Metamaps.Creators = Metamaps.Creators ? new Metamaps.Backbone.MapperCollection(Metamaps.Creators) : new Metamaps.Backbone.MapperCollection();
if (Metamaps.Active.Map) {
Metamaps.Mappings = Metamaps.Mappings ? new Metamaps.Backbone.MappingCollection(Metamaps.Mappings) : new Metamaps.Backbone.MappingCollection();
Metamaps.Active.Map = new Metamaps.Backbone.Map(Metamaps.Active.Map);
}
if (Metamaps.Active.Topic) Metamaps.Active.Topic = new Metamaps.Backbone.Topic(Metamaps.Active.Topic);
Metamaps.Backbone.attachCollectionEvents();
};

View file

@ -1,39 +1,4 @@
var Metamaps = {}; // this variable declaration defines a Javascript object that will contain all the variables and functions used by us, broken down into 'sub-modules' that look something like this
/*
* unless you are on a page with the Javascript InfoVis Toolkit (Topic or Map) the only section in the metamaps
* object will be these
GlobalUI
Active
Maps
Mappers
Backbone
* all these get added when you are on a page with the Javascript Infovis Toolkit
Settings
Touch
Mouse
Selected
Metacodes
Topics
Synapses
Mappings
Create
TopicCard
SynapseCard
Visualize
Util
Realtime
Control
Filter
Listeners
Organize
Map
Mapper
Topic
Synapse
JIT
*/
if (typeof Metamaps === 'undefined') Metamaps = {};
Metamaps.Active = {
Map: null,
@ -42,31 +7,6 @@ Metamaps.Active = {
};
Metamaps.Maps = {};
$(document).ready(function () {
for (var prop in Metamaps) {
// this runs the init function within each sub-object on the Metamaps one
if (Metamaps.hasOwnProperty(prop) &&
Metamaps[prop].hasOwnProperty('init') &&
typeof (Metamaps[prop].init) == 'function'
) {
Metamaps[prop].init();
}
}
// initialize the famous ui
var callFamous = function(){
if (Metamaps.Famous) {
Metamaps.Famous.build();
}
else {
setTimeout(callFamous, 100);
}
}
callFamous();
});
Metamaps.GlobalUI = {
notifyTimeout: null,
lightbox: null,
@ -76,6 +16,7 @@ Metamaps.GlobalUI = {
self.Search.init();
self.CreateMap.init();
self.Account.init();
self.CheatSheet.init();
//bind lightbox clicks
$('.openLightbox').click(function (event) {
@ -362,6 +303,31 @@ Metamaps.GlobalUI.Account = {
}
};
Mapmaker.GlobalUI.CheatSheet = {
init: function () {
// tab the cheatsheet
$('#cheatSheet').tabs();
$('#quickReference').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#quickReference .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left");
// id = the id of a vimeo video
var switchVideo = function (element, id) {
$('.tutorialItem').removeClass("active");
$(element).addClass("active");
$('#tutorialVideo').attr('src','//player.vimeo.com/video/'+id);
};
$('#gettingStarted').click(function() {
//switchVideo(this,'88334167');
});
$('#upYourSkillz').click(function() {
//switchVideo(this,'100118167');
});
$('#advancedMapping').click(function() {
//switchVideo(this,'88334167');
});
}
};
Metamaps.GlobalUI.Search = {

File diff suppressed because it is too large Load diff

View file

@ -1,3 +1,5 @@
if (typeof Metamaps === 'undefined') Metamaps = {};
(function () {
Metamaps.currentPage = "";

View file

@ -1,3 +1,5 @@
if (typeof Metamaps === 'undefined') Metamaps = {};
(function () {
Metamaps.Views = {};

File diff suppressed because it is too large Load diff

View file

@ -1,3 +1,4 @@
<%= javascript_include_tag "pages/Metamaps.Admin" %>
<%= link_to 'Metacode Sets', metacode_sets_path, { :class => 'button', 'data-bypass' => 'true' }%>
<%= link_to 'New Set', new_metacode_set_path, { :class => 'button', 'data-bypass' => 'true' }%>
<%= link_to 'Metacodes', metacodes_path, { :class => 'button', 'data-bypass' => 'true' }%>

View file

@ -13,6 +13,7 @@
<meta name="viewport" content="width=device-width, user-scalable=no">
<%= stylesheet_link_tag "application", :media => "all" %>
<script type="text/javascript" src="//website.com/mapmaker.js"></script>
<%= javascript_include_tag "application" %>
<!-- typekit for vinyl font -->
@ -64,6 +65,34 @@
});
</script>
<![endif]-->
<script>
$(document).ready(function () {
for (var prop in Metamaps) {
// this runs the init function within each sub-object on the Metamaps one
if (Metamaps.hasOwnProperty(prop) &&
Metamaps[prop].hasOwnProperty('init') &&
typeof (Metamaps[prop].init) == 'function'
) {
Metamaps[prop].init();
}
}
// initialize the famous ui
var callFamous = function(){
if (Metamaps.Famous) {
Metamaps.Famous.build();
}
else {
setTimeout(callFamous, 100);
}
}
callFamous();
});
</script>
</head>
<body data-env="<%= Rails.env %>" class="<%= authenticated? ? "authenticated" : "unauthenticated" %>">

View file

@ -5,6 +5,8 @@
#%>
<% content_for :title, @user.name + "'s Settings | Metamaps" %>
<%= javascript_include_tag "pages/Metamaps.Admin" %>
<div id="yield">
<%= form_for @user, url: user_url, :html =>{ :multipart => true, :class => "edit_user centerGreyForm"} do |form| %>
<h3>Edit Account</h3>