wisemapping-open-source/wise-webapp/src/main/webapp/jsp/mindmapShare.jsp

268 lines
8.5 KiB
Plaintext
Raw Normal View History

<%@ include file="/jsp/init.jsp" %>
<style type="text/css">
#sharingContainer {
height: 180px;
width: 100%;
overflow-y: scroll;
border-top: 1px solid #d3d3d3;
border-bottom: 1px solid #d3d3d3;
}
#sharingContainer table {
font-size: 100%;
}
#collabEmails {
float: left;
width: 300px;
}
#roleBtn {
float: left;
margin: 0px 10px;
}
</style>
<p><strong>Who has access:</strong></p>
<div id="sharingContainer">
<table class="table" id="collabsTable">
2012-06-13 03:33:51 +02:00
<colgroup>
<col width="70%"/>
<col width="20%"/>
<col width="10%"/>
</colgroup>
</table>
</div>
<div class="well">
<div id="errorMsg" class="alert alert-error"></div>
<p>Add People: </p>
<input type="text" id="collabEmails" name="collabEmails"
placeholder="Enter collaborators emails separared by comas."/>
<div class="btn-group" id="roleBtn">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Can edit
<span class="caret"> </span>
</a>
<ul class="dropdown-menu" data-role="editor" id="shareRole">
<li><a href="#" data-role="editor">Can edit</a></li>
<li><a href="#" data-role="viewer">Can view</a></li>
</ul>
</div>
<button id="addBtn" class="btn btn-primary">Add</button>
</div>
<script type="text/javascript">
2012-06-13 03:33:51 +02:00
$("#errorMsg").hide();
var messages = {
owner: 'Is owner',
editor: 'Can edit',
viewer: 'Can view'};
function onClickShare(aElem) {
var role = $(aElem).attr('data-role');
var roleDec = messages[role];
var btnElem = $(aElem).parent().parent().parent().find(".dropdown-toggle");
btnElem.text(roleDec).append(' <span class="caret"> </span>');
return role;
}
function addCollaboration(email, role) {
var rowStr;
var tableElem = $("#collabsTable");
if (role != "owner") {
// Add row to the table ...
var rowTemplate = '\
<tr data-collab="{email}" data-role="{role}">\
<td>{email}</td>\
<td>\
<div class="btn-group">\
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#""></a>\
<ul class="dropdown-menu">\
2012-06-13 03:33:51 +02:00
<li><a href="#" data-role="editor">' + messages['editor'] + '</a></li>\
<li><a href="#" data-role="viewer">' + messages['viewer'] + '</a></li>\
</ul>\
</div>\
</td>\
<td><a href="#">x</a></td>\
</tr>';
2012-06-13 03:33:51 +02:00
rowStr = rowTemplate.replace(/{email}/g, email);
rowStr = rowStr.replace(/{role}/g, role);
var elem = tableElem.append(rowStr);
// Register change role event ...
var rowElem = $("#collabsTable tr:last");
$(rowElem.find(".dropdown-menu a").click(function() {
2012-06-13 03:33:51 +02:00
reportError(null);
var role = onClickShare(this);
rowElem.attr('data-role', role);
event.preventDefault();
}));
rowElem.find('.dropdown-menu a[data-role="' + role + '"]').click();
// Register remove event ...
rowElem.find("td:last a").click(function(event) {
2012-06-13 03:33:51 +02:00
reportError(null);
var email = rowElem.attr('data-collab');
removeCollab(email);
event.preventDefault();
});
2012-06-13 03:33:51 +02:00
} else {
rowStr = '<tr data-collab=' + email + ' data-role="' + role + '">\
<td>' + email + ' (You)</td>\
<td><button class="btn btn-secondary">' + messages[role] + '</button></td>\
<td></td>\
</tr>';
tableElem.append(rowStr);
2012-06-13 03:33:51 +02:00
}
}
var removeCollab = function(email) {
// Remove html entry ...
$('#collabsTable tr[data-collab="' + email + '"]').detach();
};
$(function() {
jQuery.ajax("service/maps/${mindmap.id}/collabs", {
async:false,
dataType: 'json',
type: 'GET',
contentType:"text/plain",
success : function(data, textStatus, jqXHR) {
// Owner roles is the first in the table ...
var collabs = data.collaborations.sort(function(a, b) {
2012-06-14 04:04:29 +02:00
return a.role <= b.role;
2012-06-13 03:33:51 +02:00
});
2012-06-13 03:33:51 +02:00
// Add all the colums in the table ...
for (var i = 0; i < collabs.length; i++) {
var collab = collabs[i];
addCollaboration(collab.email, collab.role);
2012-06-10 03:49:54 +02:00
}
2012-06-13 03:33:51 +02:00
},
error:function(jqXHR, textStatus, errorThrown) {
alert(textStatus);
}
});
});
2012-06-13 03:33:51 +02:00
$("#addBtn").click(function(event) {
var i,email;
var emailsStr = $("#collabEmails").val();
var role = $("#shareRole").attr('data-role');
2012-06-13 03:33:51 +02:00
reportError(null);
2012-06-13 03:33:51 +02:00
// Split emails ...
var valid = true;
if (emailsStr.length > 0) {
var emails = jQuery.grep(emailsStr.split(/[;|,|\s]/), function(val) {
return val.length > 0
});
2012-06-13 03:33:51 +02:00
var model = buildCollabModel();
for (i = 0; i < emails.length; i++) {
email = emails[i];
if (!isValidEmailAddress(email)) {
reportError("Invalid email address:" + email);
valid = false;
}
2012-06-13 03:33:51 +02:00
// Is there a collab with the same email ?
var useExists = jQuery.grep(model.collaborations,
function(val) {
return val.email.trim() == email.trim();
}).length > 0;
2012-06-13 03:33:51 +02:00
if (useExists) {
reportError(email + " is already in the shared list");
valid = false;
}
}
2012-06-13 03:33:51 +02:00
} else {
reportError("Emails address can not be empty");
valid = false;
}
2012-06-13 03:33:51 +02:00
if (valid) {
// Emails are valid, add them as rows ...
$("#collabEmails").val("");
for (i = 0; i < emails.length; i++) {
email = emails[i];
addCollaboration(email, role);
}
} else {
}
2012-06-13 03:33:51 +02:00
});
// Register change event ...
$("#shareRole a").click(function() {
var role = onClickShare(this);
$(this).parent().attr('data-role', role);
event.preventDefault();
});
2012-06-13 03:33:51 +02:00
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
}
function reportError(msg) {
if (msg) {
$('#errorMsg').show();
$('#errorMsg').append("<p>" + msg + "</p>");
2012-06-13 03:33:51 +02:00
} else {
$("#errorMsg").text("").hide();
}
2012-06-13 03:33:51 +02:00
}
2012-06-13 03:33:51 +02:00
function buildCollabModel() {
var collabs = $('#collabsTable tr').map(function() {
2012-06-10 03:49:54 +02:00
return {
2012-06-13 03:33:51 +02:00
email: $(this).attr('data-collab'),
role: $(this).attr('data-role')
2012-06-10 03:49:54 +02:00
};
2012-06-13 03:33:51 +02:00
});
collabs = jQuery.makeArray(collabs);
2012-06-13 03:33:51 +02:00
return {
count:collabs.length,
collaborations:collabs
};
}
2012-06-13 03:33:51 +02:00
// Hook for interaction with the main parent window ...
var submitDialogForm = function() {
var collabs = buildCollabModel();
collabs.collaborations = jQuery.grep(collabs.collaborations, function() {
return this.role != 'owner';
});
jQuery.ajax("service/maps/${mindmap.id}/collabs", {
async:false,
dataType: 'json',
type: 'PUT',
data: JSON.stringify(collabs),
contentType:"application/json",
success : function(data, textStatus, jqXHR) {
$('#share-dialog-modal').modal('hide');
},
error: function(jqXHR, textStatus, errorThrown) {
reportError(textStatus);
}
});
}
</script>