/* Contains all the Javascript logic of the canvas and its main features: save, export and share */
$(document).ready(function() {
/* ================================================
Miscellaneous
================================================= */
// Prevent AJAX requests from being cached
$.ajaxSetup({ cache: false });
// Declare canvas id
var canvasId = $("input[name='canvas_id']").val();
// Declare canvas owner
var canvasOwner;
// Declare current user
var username = $("input[name='username']").val();
// Total number of collaborators
var numberOfCollaborators = 0;
// The user is a collaborator. If the user is not a collaborator, that means the canvas being viewed is public.
var userIsCollaborator = false;
// Initiate tag
var tag = "";
// Declare the currently loaded tags belonging to the user
var tags = [];
// Fixes bug when added item field zooms on tag click
var tagWindowIsOpen = false;
// The text area has been changed
var textareaHasBeenChanged = false;
// The idea ID for the current comments
var currentCommentsId;
// Prevent pressing ENTER on Project Title from submitting the form
$('.proj_title').keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
/* ================================================
Remember whether the canvas is a new canvas or not
================================================= */
// Declarations
var canvasIsNew = true;
// If canvasId is set. Whether the canvas is new or not is initially determined in the $_SESSION['canvas_id'] variable.
if(canvasId) {
// Remember that the canvas is not new
canvasIsNew = false;
}
/* ================================================
Remember if the user is a collaborator
================================================= */
// If the canvas isn't new
if(canvasIsNew === false) {
// AJAX
$.ajax({
async: false,
type: "POST",
url: "php/check-is-collaborator.php",
dataType: "TEXT",
data: {
"canvas_id": canvasId,
"username": username
},
timeout: 5000,
success: function(returnData) {
// If the active user is a collaborator
if(returnData === username) {
userIsCollaborator = true;
}
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
/* ================================================
If the user is a collaborator or the canvas is new, show the items that aren't public
================================================= */
// If the user is a collaborator or the canvas is new
if(userIsCollaborator === true || canvasIsNew === true) {
// If the user hovers over the canvas title
$("input.proj_title").on("focusin mouseover", function() {
// Change the cursor to a text cursor
$(this).css("cursor", "text");
});
// If the user hovers over the tag description
$("div#tag-window textarea#tag-description").on("focusin mouseover", function() {
// Change the cursor to a text cursor
$(this).css("cursor", "text");
});
// Show the Collaborators button
$("div#collaborators-container").show();
// Hide all buttons inside every category
$("div.add_box").show();
// Show the character count in the tag window
$("div#tag-window p.chars-count").show();
// Show the buttons in the tag window
$("div#tag-window div#tag-buttons").show();
// Show the message saying that the canvas is saved automatically
$("div#saved-automatically").show();
// Show the Publish This Canvas button
$("button.publish_canvas").show();
}
/* ================================================
If the user is using Try Online, show the Collaborators button
================================================= */
// If the user isn't logged in
if(username === "") {
$("div#collaborators-container").show();
$("div#collaborators-container").css("right", "50px");
}
/* ================================================
Generate generic ID
================================================= */
// Generate a random string of a specific length to be used as canvas_id
function generateId() {
var i = 0;
var length = 10;
var characters = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var charactersLength = characters.length;
var randomString = "";
var minimum = 0;
var maximum = charactersLength - 1;
for (i = 0; i < length; i++) {
randomString += characters[Math.floor(Math.random() * (maximum - minimum + 1)) + minimum];
}
return randomString;
}
/* ================================================
Generate canvas ID
================================================= */
// Generate canvas ID
function generateCanvasId() {
if(canvasId === "") {
canvasId = generateId();
$("input[name='canvas_id']").val(canvasId);
}
}
// Generate canvas ID
if(canvasId === "") {
generateCanvasId();
}
/* ================================================
Rearrange fields numerically if 1 column is displayed
================================================= */
// Declarations
var groupOneLayout = $("#7-5-col-layout");
var groupTwoLayout = $("#2-col-layout");
var groupThreeLayout = $("#1-col-layout");
var field01 = $("#panel_01");
var field03 = $("#panel_03");
var field04 = $("#panel_04");
var field09 = $("#panel_09");
var field05 = $("#panel_05");
var field06 = $("#panel_06");
var field02 = $("#panel_02");
var field07 = $("#panel_07");
var field08 = $("#panel_08");
var field10 = $("#panel_10");
var isRearranged = false;
// Rearrange the fields to suit mobile
function rearrangeFields() {
field01.detach();
field03.detach();
field04.detach();
field09.detach();
field05.detach();
field06.detach();
field02.detach();
field07.detach();
field08.detach();
field10.detach();
groupOneLayout.append(field01);
groupOneLayout.append(field02);
groupOneLayout.append(field03);
groupOneLayout.append(field04);
groupOneLayout.append(field05);
groupOneLayout.append(field06);
groupOneLayout.append(field07);
groupOneLayout.append(field08);
groupOneLayout.append(field09);
groupOneLayout.append(field10);
}
// Rearrange the fields according to their original order
function rearrangeFieldsOriginal() {
field01.detach();
field02.detach();
field03.detach();
field04.detach();
field05.detach();
field06.detach();
field07.detach();
field08.detach();
field09.detach();
field10.detach();
groupOneLayout.append(field01);
groupOneLayout.append(field03);
groupOneLayout.append(field04);
groupOneLayout.append(field09);
groupOneLayout.append(field05);
groupOneLayout.append(field06);
groupOneLayout.append(field02);
groupTwoLayout.append(field07);
groupTwoLayout.append(field08);
groupThreeLayout.append(field10);
}
// If the web page is opened on a mobile
if($(window).width() <= 499) {
rearrangeFields();
}
// When resizing the window
$(window).on("resize", function() {
// If the user is using a mobile device
if(isRearranged === false && $(window).width() <= 499) {
// Rearrange fields
rearrangeFields();
isRearranged = true;
}
// If the user is not using a mobil device
else if(isRearranged === true && $(window).width() >= 500) {
// Restore fields
rearrangeFieldsOriginal();
isRearranged = false;
}
});
/* ================================================
If the user changes the project title
================================================= */
// If the user is a collaborator or the canvas is new
if(userIsCollaborator === true || canvasIsNew === true) {
// If the user focuses on the project title
$("input.proj_title").unbind("focusin").on("focusin", function() {
// Declarations
var oldText = $(this).val();
// If the user leaves the project title
$("input.proj_title").unbind("focusout").on("focusout", function() {
var newText = $(this).val();
// If the project title has been changed
if(newText !== oldText) {
// Save the canvas
prepareSaveCanvas();
}
});
});
}
else {
// If the user focuses on the project title
$("input.proj_title").on("focusin", function(event) {
// Blur immediately
$(this).blur();
});
}
/* ================================================
Get the owner
================================================= */
// Get the owner
function getOwner() {
// AJAX
$.ajax({
async: false,
type: "POST",
url: "php/get-owner.php",
dataType: "TEXT",
data: {
"canvas_id": canvasId
},
timeout: 5000,
success: function(returnData) {
// Remember the canvas owner
canvasOwner = returnData;
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
getOwner();
/* ================================================
Collaborators
================================================= */
// Validate email
function validateEmail(email) {
var re = /\S+@\S+\.\S+/;
return re.test(email);
}
// If the user clicks on the "Collaborators" button, show the collaborators window
$("div#collaborators button").on("click", function() {
// If the user is logged in
if($("input[name='username']").val() != "") {
// Show the collaborators window
$("div#shadow").css("display", "block");
$("div#collaborators-window").css("display", "block");
// In 1.5 seconds
window.setTimeout(function() {
// If the canvas is new
if(canvasIsNew === true) {
// Save the canvas
prepareSaveCanvas();
}
}, 1500);
}
// If the user isn't logged in
else {
// Show a dialog
$("div#shadow").css("display", "block");
$("div#dialog-log-in").css("display", "block");
}
});
// Close the collaborators window
function closeCollaboratorsWindow() {
// Close the collaborators window
$("div#shadow").css("display", "none");
$("div#collaborators-window").css("display", "none");
}
// If the user clicks on the "Close" button in the Collaborators window
$("div#collaborators-window > div.window-heading > button.close").on("click", function() {
// Close the Collaborators window
closeCollaboratorsWindow();
$("div#collaborators-window div#collaborator-email").text("Please enter an email address...");
$("div#user-is-not-member").hide();
$("div#username-already-exists").hide();
$("div#enter-valid-email").hide();
});
// If the user clicks on the "Close" button in the Remove Collaborator dialog
$("div#dialog-remove-collaborator button.close").on("click", function() {
// Close the Remove Collaborator window
$("div#shadow").css("z-index", "2");
$("div#dialog-remove-collaborator").css("display", "none");
});
// Remove the collaborator
function removeCollaborator(collaborator, currentRow) {
// AJAX
$.ajax({
timeout: 5000,
dataType: "text",
type: "post",
data: {
"canvas_id": canvasId,
"collaborator": collaborator
},
url: "php/remove-collaborator.php",
success: function() {
// If the collaborator that has been removed is the active user
if(collaborator === username) {
// Redirect the user to the dashboard
window.location.replace("php/dashboard.php");
}
// Close the Remove Collaborator window
$("div#shadow").css("z-index", "2");
$("div#dialog-remove-collaborator").css("display", "none");
updateCollaboratorsView();
// Update Collaborators
updateCollaborators();
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
// If the user clicks on the "Remove" button
function showRemoveCollaboratorDialog() {
// If the user clicks on the "Remove" button
$("div#collaborators-window td:nth-child(4) span").on("click", function() {
// Declarations
var collaborator = $(this).parent().prev().text();
var currentRow = $(this).parent().parent();
// Show the Remove Collaborator dialog
$("div#shadow").css("z-index", "3");
$("div#dialog-remove-collaborator").css("display", "block");
// If the user clicks on "Yes"
$("#dialog-remove-collaborator #button-yes").on("click", function() {
// Remove the collaborator
removeCollaborator(collaborator, currentRow);
});
// If the user clicks on "Cancel"
$("#dialog-remove-collaborator #button-cancel").on("click", function() {
// Cancel
$("div#shadow").css("z-index", "2");
$("div#dialog-remove-collaborator").css("display", "none");
});
});
}
// Show only active collaborators or show all
function updateCollaboratorsView() {
// If the user only wants to see active collaborators
if($("input[name='show-only-active']").is(":checked")) {
// For every collaborator
$("div#collaborators-window tr").each(function() {
// If the collaborator is offline
if($(this).find("td:nth-child(1)").html() === "") {
// Hide the collaborator
$(this).css("display", "none");
}
});
}
// If the user wants to see all active collaborators
else {
// For every collaborator
$("div#collaborators-window tr").each(function() {
// Show the collaborator
$(this).css("display", "table-row");
});
}
}
// If the user checks the "Show only active collaborators" checkbox
$("input[name='show-only-active']").on("change", function() {
// Show only active collaborators
updateCollaboratorsView();
});
// If the user enters the email field
$("div#collaborators-window div#collaborator-email").on("click", function() {
// Focus on the email field
$(this).focus();
// If the text is the default text
if($(this).text() === "Please enter an email address...") {
$(this).text("");
$(this).css("color", "rgb(51, 51, 51)");
}
});
// If the user leaves the email field
$("div#collaborators-window div#collaborator-email").on("focusout", function() {
// If nothing has been entered
if($(this).text() === "") {
$(this).text("Please enter an email address...");
$(this).css("color", "rgb(117, 117, 117)");
}
});
// If the user leaves the email field or pastes text in it
$("div#collaborators-window div#collaborator-email").on("paste", function(event) {
// Replace HTML with plain text
event.preventDefault();
var text = (event.originalEvent || event).clipboardData.getData("text/plain");
document.execCommand("insertText", false, text);
});
// If the user types a key inside the email field
$("div#collaborators-window div#collaborator-email").on("keydown", function(event) {
// If the user has pressed enter
if(event.keyCode === 13) {
event.preventDefault();
}
});
// If the user clicks on "Add collaborator"
$("div#collaborators-window button#add-collaborator").on("click", function() {
// Declarations
var collaborator = $("div#collaborators-window div#collaborator-email").text();
// Reset error messages
$("div#user-is-not-member").hide();
$("div#username-already-exists").hide();
$("div#enter-valid-email").hide();
// If the email address is valid
if(validateEmail(collaborator)) {
// AJAX
$.ajax({
timeout: 5000,
dataType: "text",
type: "post",
data: {
"canvas_id": canvasId,
"collaborator": collaborator
},
url: "php/add-collaborator.php",
success: function(returnData) {
// Hide error messages
$("div#username-already-exists").hide();
$("div#enter-valid-email").hide();
// If the collaborator is not already a member
if(returnData == 1) {
$("div#user-is-not-member").show();
numberOfCollaborators++;
}
// If the collaborator is already a collaborator
else if(returnData == 2) {
$("div#username-already-exists").show();
numberOfCollaborators++;
}
// If everything is okay
else if(returnData == 3) {
// Restore the default text
$("div#collaborators-window div#collaborator-email").text("Please enter an email address...");
$("div#collaborators-window div#collaborator-email").css("color", "rgb(117, 117, 117)");
// Update collaborators
updateCollaborators();
}
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
else {
// Show an error message
$("div#enter-valid-email").show();
}
});
// Add the owner as a collaborator if the currently logged in user is the owner and hasn't been added before
function addOwnerToCollaborators() {
// AJAX
$.ajax({
async: false,
type: "POST",
url: "php/add-owner-to-collaborators.php",
dataType: "TEXT",
data: {
"canvas_id": canvasId
},
timeout: 5000,
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
// addOwnerToCollaborators();
// Update collaborators
function updateCollaborators() {
// AJAX
$.ajax({
type: "POST",
url: "php/update-collaborators.php",
dataType: "JSON",
data: {
"canvas_id": canvasId,
"username": username
},
timeout: 5000,
success: function(returnData) {
// Declarations
var newHtml = "| Active | Name | Username | Remove |
|---|
";
var index = 0;
// Remember the number of collaborators
numberOfCollaborators = returnData.length;
// While there still are collaborators to append
while(index < returnData.length) {
newHtml += "| ";
// If the collaborator is active
if(returnData[index]["active"] === 1) {
newHtml += "";
}
newHtml += " | " + returnData[index]["name"] + " | " + returnData[index]["collaborator"] + " | ";
// If the collaborator isn't the owner of the canvas
if(returnData[index]["collaborator"] !== canvasOwner) {
// Add the remove icon
newHtml += "";
}
newHtml += " |
";
// Increment the index
index++;
}
// Append collaborators
$("div#collaborators-window table").html(newHtml);
// Update the button to open the collaborators window
$("div#collaborators button span").text("Collaborators (" + $("td.collaborators-active span").length + " active)");
// If the user clicks on the "Remove" button
showRemoveCollaboratorDialog();
// Show only active collaborators or show all
updateCollaboratorsView();
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
// If the canvas is new
if(canvasIsNew === false) {
// Update the collaborators
updateCollaborators();
}
// Post typing information
function postTyping(typingId) {
// AJAX
$.ajax({
type: "POST",
url: "php/post-typing.php",
dataType: "TEXT",
data: {
"canvas_id": canvasId,
"username": username,
"typing_id": typingId
},
timeout: 5000,
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
// If the user closes the window
$(window).on("beforeunload", function() {
// Reset "User is typing" notification information
postTyping("");
});
// Get typing information
function getTyping() {
// AJAX
$.ajax({
type: "POST",
url: "php/get-typing.php",
dataType: "JSON",
data: {
"canvas_id": canvasId,
"username": username
},
timeout: 5000,
success: function(returnData) {
var loopCounter = 0;
var typingDiv;
var name;
var typingId;
var typingIds = [];
// var typingDivIds = $("div.user-is-typing");
// For every user user/DIV currently being typed in
for(t in returnData) {
name = returnData[loopCounter]["name"];
typingId = returnData[loopCounter]["typingId"];
// Save the typing ID in a separate array
typingIds[loopCounter] = returnData[loopCounter]["typingId"];
if($("#" + typingId + "-typing").length === 0) {
typingDiv = "" + name + "
is typing...
";
}
// For the current idea
$("#" + typingId).after(typingDiv);
// Increment loop Counter
loopCounter++;
}
// For every "user is typing" DIV on the canvas
$("div.user-is-typing").each(function() {
// If the typing ID of the current "user is typing" DIV does not exist in the new array with collaborators currently typing
if($.inArray($(this).attr("id").substring(0, 10), typingIds) === -1) {
// Remove this "user is typing" DIV
$(this).remove();
}
});
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
// Get typing information every 1.5 seconds
window.setInterval(function() {
// If collaborators have been added
if(numberOfCollaborators > 1) {
// Get typing information
getTyping();
}
}, 1500);
/* ================================================
"Jump to" functions
================================================= */
// Declarations
var hasScrolledDown = false;
// If the user scrolls down, change "position" to "fixed"
$(window).on("scroll", function() {
// If the web page is opened on a mobile
if($(window).width() <= 499) {
// Declarations
var scrollPosition = $(window).scrollTop();
// If the user scrolls down
if(hasScrolledDown === false && scrollPosition >= 200) {
$("div.jump-to").show();
$("div.jump-to-click-area").show();
hasScrolledDown = true;
}
// If the user scrolls to the top
else if(hasScrolledDown === true && scrollPosition <= 10) {
$("div.jump-to").hide();
$("div.jump-to-click-area").hide();
hasScrolledDown = false;
}
}
// If the web page is not opened on a mobile
else {
$("div.jump-to-click-area").show();
$("div.jump-to").hide();
hasScrolledDown = false;
}
});
// If the user resizes the window
$(window).on("resize", function(event){
// If the web page is not opened on a mobile
if($(this).width() >= 500) {
// Restore the space between the header and Saved Tags
$("div.jump-to-click-area").show();
$("div.jump-to").hide();
hasScrolledDown = false;
}
});
// If the user clicks on "Jump to", show menu
$("div.jump-to-click-area").on("click", function() {
// Toggle the menu
$("div.jump-to-list").slideToggle(300);
// Rotate arrow
$("img.jump-to-img").toggleClass("jump-to-arrow-90");
$("img.jump-to-img").toggleClass("jump-to-arrow-0");
return false;
});
// If the user clicks on a menu item
$("div.jump-to ul a").on("click", function() {
// Declarations
var chosenLiIndex = $(this).parent().index();
var chosenFieldPosition;
var scrollPositionNew;
// If the user has chosen the list item 0
if(chosenLiIndex === 0) {
// Detect the scroll position of the chosen field "Saved Tags"
chosenFieldPosition = $("div.saved-tags").offset().top;
}
// If the user has chosen the list item 1-9
else if(chosenLiIndex >= 1 && chosenLiIndex <= 9) {
// Detect the scroll position of the chosen field
chosenFieldPosition = $("div.field_0" + chosenLiIndex).offset().top;
}
// If the user has chosen the list item 10 or higher
else {
// Detect the scroll position of the chosen field
chosenFieldPosition = $("div.field_" + chosenLiIndex).offset().top;
}
// If the user has scrolled down
if(hasScrolledDown === true) {
// Set the new scroll position
scrollPositionNew = chosenFieldPosition - 58;
// Toggle the menu
$("div.jump-to-list").slideToggle(300);
// Rotate arrow
$("img.jump-to-img").toggleClass("jump-to-arrow-90");
$("img.jump-to-img").toggleClass("jump-to-arrow-0");
}
// Apply the new scroll position
$(window).scrollTop(scrollPositionNew);
return false;
});
/* ================================================
Show tooltip for every category
================================================= */
// Activate the tooltips on hover
$("a[data-toggle='tooltip']").tooltip({container: "body"});
// If the user clicks on a tooltip
$("a[data-toggle='tooltip']").on("click", function() {
return false;
});
/* ================================================
Remove all tags from all fields
================================================= */
// Remove all tags from all fields
function removeTags() {
// AJAX
$.ajax({
type: "POST",
url: "php/get-tags.php",
dataType: "JSON",
data: {
"canvas_id": canvasId
},
timeout: 5000,
success: function(returnData) {
// Declarations
var loopCounter = 0;
// Remember the tags
tags = returnData;
// For every added item
$("li.added_item .expandable").each(function() {
// Replace HTML with plain text
$(this).html($(this).text());
});
// If no tags have been added
if(tags.length === 0) {
// Reset default message
$("div.saved-tags p").html("No tags could be found.");
}
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
/* ================================================
Get the tags from the database and apply them on the canvas
================================================= */
// Apply tags
function updateTags() {
// Apply tags on the canvas
window.setTimeout(function() {
// Regular expressions
RegExp.escape = function(s) {
return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
};
// Sort tags by size
tags.sort(function(a, b) {
return b.length - a.length;
});
// Replace the tag
function replace(currentIdea, textIn, textOut) {
currentIdea.html(function() {
return $(this).html().replace(textIn, textOut);
});
};
// For every added item that currently isn't being edited
$("li.added_item div.expandable").each(function() {
// Declarations
var currentIdea = $(this);
var currentIdeaText = currentIdea.html();
// For every tag
for(var tag of tags) {
// Replace the tag
tag = RegExp.escape(tag);
currentIdeaText = currentIdeaText.replace(new RegExp(tag, 'g'), '' + tag + '');
}
// Replace the HTML with plain text
currentIdea.html(currentIdeaText);
// For every tag badge
currentIdea.find("span").each(function() {
// Declarations
var span = $(this);
// If the parent is the current idea
if(!span.parent().is(currentIdea)) {
// Replace the span
span.replaceWith(span.text());
}
});
});
// If the user hovers on a nested tag, only apply the badge effect on said tag
$(".expandable span.tag-with-badge-effect").on("mouseover", function(event) {
// Stop propagation
event.stopPropagation();
// Add the badge effect
$(this).addClass("tag-with-badge-effect-hover");
});
// If the user leaves a tag, remove the badge effect
$(".expandable span.tag-with-badge-effect").on("mouseout", function() {
// Remove the badge effect
$(this).removeClass("tag-with-badge-effect-hover");
});
// If the user clicks on a nested clack, stop propagation
$(".expandable span.tag-with-badge-effect").on("click", function(event) {
// Stop propagation
event.stopPropagation();
});
// Show the tag window on tag click
showTagWindowOnTagClick();
}, 100);
// Populate "Saved Tags"
var loopCounter = 0;
var savedTags = $("div.saved-tags p");
// Sort tags alphabetically
tags.sort(function(a, b) {
if(a < b) return -1;
if(a > b) return 1;
return 0;
});
// Clear Saved Tags
savedTags.html("");
// For every tag
for(t in tags) {
// Append the tag in Saved Tags
savedTags.append("" + tags[loopCounter] + "").append(" ");
// Increment the index
loopCounter++;
}
// If Saved Tags is empty
if(savedTags.html() === "") {
// Restore the default text
savedTags.html("No tags could be found.");
}
}
// Get the tags from the database
function getTags() {
// AJAX
$.ajax({
// async: false,
type: "POST",
url: "php/get-tags.php",
dataType: "JSON",
data: {
"canvas_id": canvasId
},
timeout: 5000,
success: function(returnData) {
// Assign returnData to the tags variable
tags = returnData;
// Update tags on the canvas
updateTags();
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
/* ================================================
Tag window functions
================================================= */
// Check if the tag is new
function hideDeleteTagIfTagIsNew() {
// Declarations
var tagToAJAX = tag;
// AJAX
$.ajax({
type: "POST",
url: "php/check-if-tag-exists.php",
dataType: "text",
data: {
"tag": tagToAJAX,
"canvas_id": canvasId
},
timeout: 5000,
success: function(returnData) {
// If the current tag does not exist in the database
if(returnData === "") {
// Hide "Delete tag" button
$("div#tag-window button#delete-tag").css("display", "none");
}
// If the current tag exists in the database
else {
// Show "Delete tag" button
$("div#tag-window button#delete-tag").css("display", "inline");
}
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
// Updating the remaining characters information
function updateRemainingCharacters() {
// Declarations
var length = $("div#tag-window textarea#tag-description").val().length;
var maxLength = 200;
// Update length
length = maxLength - length;
// Show the remaining characters
$("div#tag-window span.chars").text(length);
}
// Get the description for the selected tag
function getDescriptionForSelectedTag() {
// Declarations
var tagToAJAX = tag;
// AJAX
$.ajax({
type: "POST",
url: "php/get-description-for-selected-tag.php",
dataType: "text",
data: {
"tag": tagToAJAX,
"canvas_id": canvasId
},
timeout: 5000,
success: function(returnData) {
// If the description isn't empty
if(returnData != "") {
// Update description field with the description for the selected tag
$("div#tag-window textarea#tag-description").val(returnData);
// Update remaining characters
updateRemainingCharacters();
}
// If the description is empty
else {
// Restore default text
$("div#tag-window textarea#tag-description").val("Please enter a description...");
}
textareaHasBeenChanged = true;
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
// Get similar tags by other users
function getSimilarTags() {
// Declarations
var tagToAJAX = tag;
// AJAX
$.ajax({
type: "POST",
url: "php/get-similar-tags.php",
dataType: "JSON",
data: {
"tag": tagToAJAX,
"canvas_id": canvasId,
"username": username
},
timeout: 5000,
success: function(returnData) {
// Reset similar tags if similar tags are to be showed again
$("p.similar-tags-tag").remove();
$("p.similar-tags-description").remove();
$("p.similar-tags-canvas-name").remove();
// Declarations
var htmlToAppend = "";
// If similar tags exist
if(returnData.length > 0) {
// Declarations
var index = 0;
// While there still are tags to append
while(index < returnData.length) {
htmlToAppend += "" + returnData[index]["tag"] + "
"
+ "" + returnData[index]["description"] + "
"
+ "from " + returnData[index]["canvas_name"] + "
";
// Increment index
index++;
}
// Append tags
$("div#tag-window h2.similar-tags").after(htmlToAppend);
$("p.similar-tags-description-none").css("display", "none");
}
else {
// Show the message saying that there are no similar tags to show
$("p.similar-tags-description-none").css("display", "block");
}
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
// Close the tag window
function closeTagWindow() {
// Close the tag window
tagWindowIsOpen = false;
// Update iew
$("div#shadow").css("display", "none");
$("div#tag-window").css("display", "none");
}
// If the user focuses on the tag description
$("div#tag-window textarea#tag-description").on("focusin", function(event) {
// If the user is not a collaborator
if(userIsCollaborator === false) {
// Focus out of the tag description
$(this).blur();
}
});
// Show the tag window
function showTagWindow() {
// Show the tag window
$("div#shadow").css("display", "block");
$("div#tag-window").css("display", "block");
// Update the header
$("div#tag-window h1").html(" " + tag);
// Check if the tag is new
hideDeleteTagIfTagIsNew();
// Get the description for the selected tag
getDescriptionForSelectedTag();
// Get tags by other users from the database
getSimilarTags();
// Update remaining characters in case description is loaded
updateRemainingCharacters();
// If a description hasn't been entered
if($("div#tag-window textarea#tag-description") !== "Please enter a description..." && textareaHasBeenChanged !== true) {
// Reset the remaining characters information
$("div#tag-window span.chars").text("200");
}
}
// If the user presses a key in the description textarea
$("div#tag-window textarea#tag-description").on("keyup", function() {
// Update remaining characters
updateRemainingCharacters();
});
// If the user clicks on the "Save tag" button
$("div#tag-window #save-tag").on("click", function() {
// Declarations
var description = $("div#tag-window textarea#tag-description").val();
var tagToAJAX = tag;
// If a description has been entered
if(description != "" && description != "Please enter a description...") {
// AJAX
$.ajax({
timeout: 5000,
dataType: "text",
type: "post",
data: {
"tag": tagToAJAX,
"description": description,
"canvas_id": canvasId
},
url: "php/save-tag.php",
success: function() {
textareaHasBeenChanged = true;
// Get the tags from the database and apply them on the canvas
getTags();
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
// Close the tag window
closeTagWindow();
}
});
// If the user clicks on the "Close" button
$("div#tag-window button.close").on("click", function() {
// Close the tag window
closeTagWindow();
});
// If the user clicks on the "Delete tag" button
$("div#tag-window #delete-tag").on("click", function() {
// Declarations
var tagToAJAX = tag;
// AJAX
$.ajax({
timeout: 5000,
dataType: "text",
type: "post",
data: {
"tag": tagToAJAX,
"canvas_id": canvasId
},
url: "php/delete-tag.php",
success: function() {
// Remove all tags from all fields
removeTags();
// Get the tags from the database and apply them on the canvas
getTags();
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
// Close the tag window
closeTagWindow();
});
// If the user focuses in the textarea
$("div#tag-window textarea#tag-description").on("focusin", function() {
// Declarations
var description = $("div#tag-window textarea#tag-description").val();
// If a description hasn't been entered
if(description === "Please enter a description...") {
// Empty the description textarea
$("div#tag-window textarea#tag-description").val("");
}
});
// If the user leaves the textarea
$("div#tag-window textarea#tag-description").on("focusout", function() {
// Declarations
var description = $("div#tag-window textarea#tag-description").val();
// If a description hasn't been entered
if(description === "") {
// Reset the description textarea
$("div#tag-window textarea#tag-description").val("Please enter a description...");
}
});
/* ================================================
If the user clicks on a tag, show the tag window
================================================= */
// If the user clicks on a tag
function showTagWindowOnTagClick() {
$("span.tag-with-badge-effect").on("click", function() {
// If the user is logged in
if($("input[name='username']").val() != "") {
// Declarations
tag = $(this).text();
// Remember that the tag window is open
tagWindowIsOpen = true;
// Show the tag window
showTagWindow();
}
// If the user isn't logged in
else {
// Show a dialog
$("div#shadow").css("display", "block");
$("div#dialog-log-in").css("display", "block");
}
});
}
/* ================================================
Save added idea on Enter press
================================================= */
// Save added idea on Enter press
function saveAddedIdeaOnEnterPress(li) {
// If the user presses a key
$("li.added_item textarea.expandable").unbind("keydown").on("keydown", function(event) {
// If the key is Enter
if(event.which === 13) {
// Prevent default behaviour
event.preventDefault();
// Declarations
var li = $(this).parent();
var textElement;
var textElementId = $(this).attr("id");
var textElementWidth;
var oldText = $(this).text();
// Replace textarea with a div
$(this).replaceWith(
"" + $(this).val() + "
"
);
// Reset "User is typing" notification information
if(numberOfCollaborators > 1) {
// Post typing information
postTyping("");
}
// Remember the text element
textElement = li.find(".expandable");
// Remember the width of the text element
textElementWidth = textElement.width();
// Change the cursor
$("ul.item_list div.expandable").css("cursor", "pointer");
// Update tags on the canvas
getTags();
// Zoom out animation
if(textElementWidth >= 0 && textElementWidth <= 250) {
textElement.addClass("zoom-out-regular");
}
else if(textElementWidth >= 251 && textElementWidth <= 500) {
textElement.addClass("zoom-out-less");
}
else if(textElementWidth >= 501) {
textElement.addClass("zoom-out-least");
}
textElement.css("background-color", "rgba(255, 255, 255, 0.75)");
textElement.css("-ms-transform", "scale(1)");
textElement.css("-webkit-transform", "scale(1)");
textElement.css("transform", "scale(1)");
// If no tags have been added
if(tags.length === 0) {
// Reset the text explaining that no tags have been added
$("div.saved-tags p").html("No tags could be found.");
}
// Save the canvas automatically if the user has logged in
var newText = textElement.text();
// If the text has been changed
if(oldText !== newText) {
// Save the canvas
prepareSaveCanvas();
}
// Toggle the text element on focus
toggleTextElementOnFocus();
}
});
}
/* ================================================
Toggle textarea.expandable/div.expandable on edit
================================================= */
// Toggle the HTML element of the idea on focus
function toggleTextElementOnFocus() {
// If the user clicks on an added idea
$("li.added_item .expandable").unbind("click").on("click", function(event) {
// If the tag window isn't open
if(tagWindowIsOpen === false) {
var li = $(this).parent();
var textElement;
var textElementId = $(this).attr("id");
var textElementWidth;
var oldText = $(this).text();
// Replace div with a textarea
$(this).replaceWith(
""
);
// If collaborators have been added
if(numberOfCollaborators > 1) {
// Notify collaborators that the user is currently typing
postTyping(textElementId);
}
// Remember the text element
textElement = li.find(".expandable");
// Remember the width of the text element
textElementWidth = textElement.width();
// Focus immediately on click instead of having to click on the element a second time
textElement.focus();
// Zoom in animation
if(textElementWidth >= 0 && textElementWidth <= 250) {
textElement.addClass("zoom-in-regular");
textElement.css("background-color", "rgba(255, 255, 255, 1)");
textElement.css("-ms-transform", "scale(1.02)");
textElement.css("-webkit-transform", "scale(1.02)");
textElement.css("transform", "scale(1.02)");
}
else if(textElementWidth >= 251 && textElementWidth <= 600) {
textElement.addClass("zoom-in-less");
textElement.css("background-color", "rgba(255, 255, 255, 1)");
textElement.css("-ms-transform", "scale(1.01)");
textElement.css("-webkit-transform", "scale(1.01)");
textElement.css("transform", "scale(1.01)");
}
else if(textElementWidth >= 601) {
textElement.addClass("zoom-in-least");
textElement.css("background-color", "rgba(255, 255, 255, 1)");
textElement.css("-ms-transform", "scale(1.005)");
textElement.css("-webkit-transform", "scale(1.005)");
textElement.css("transform", "scale(1.005)");
}
// Save added idea on Enter press
saveAddedIdeaOnEnterPress(li);
// Replace textarea with a div
$("li.added_item textarea.expandable").unbind("focusout").on("focusout", function(event) {
// Declarations
var li = $(this).parent();
var textElement;
var textElementId = $(this).attr("id");
var textElementWidth;
// Replace textarea with a div
$(this).replaceWith(
"" + $(this).val() + "
"
);
// Reset "User is typing" notification information
if(numberOfCollaborators > 1) {
// Post typing information
postTyping("");
}
// Remember the text element
textElement = li.find(".expandable");
// Remember the width of the text element
textElementWidth = textElement.width();
// Change the cursor
$("ul.item_list div.expandable").css("cursor", "pointer");
// Update tags on the canvas
getTags();
// Zoom out animation
if(textElementWidth >= 0 && textElementWidth <= 250) {
textElement.addClass("zoom-out-regular");
}
else if(textElementWidth >= 251 && textElementWidth <= 500) {
textElement.addClass("zoom-out-less");
}
else if(textElementWidth >= 501) {
textElement.addClass("zoom-out-least");
}
textElement.css("background-color", "rgba(255, 255, 255, 0.75)");
textElement.css("-ms-transform", "scale(1)");
textElement.css("-webkit-transform", "scale(1)");
textElement.css("transform", "scale(1)");
// If no tags have been added
if(tags.length === 0) {
// Reset the text explaining that no tags have been added
$("div.saved-tags p").html("No tags could be found.");
}
// Save the canvas automatically if the user has logged in
var newText = textElement.text();
// If the text has been changed
if(oldText !== newText) {
// Save the canvas
prepareSaveCanvas();
}
// Toggle the text element on focus
toggleTextElementOnFocus();
});
}
});
}
/* ----------------------------------------------
Limiting the number of characters the user is allowed to type
----------------------------------------------- */
// Declarations
var maxLength = 100;
$('.card').on('keyup', '.new_item', function() {
var length = $(this).val().length;
length = maxLength - length;
// Show the characters remaining only on this field
$(this).closest('.user-input').find('.chars').text(length);
});
function limitLengthOnInput() {
// Limit text on key press
$("li.added_item .expandable").unbind("keypress").on("keypress", function(event) {
// Declarations
var numberOfTags = $(this).children().filter("a").length;
var textLength = $(this).html().length;
// Subtract 43 from textLength per tag (the tag HTML is 43 characters)
$(this).each(function() {
textLength -= 43 * numberOfTags;
});
if(textLength === 100) { // Windows menu/Right cmd
event.preventDefault();
}
});
}
/* ================================================
If the user closes a dialog
================================================= */
// If the user clicks on a close button inside a dialog
$("div.dialog").not($("div.window-dialog")).find("button.close").on("click", function() {
// Close the dialog
$("div#shadow").css("display", "none");
$("div.dialog").css("display", "none");
});
/* ================================================
If the user clicks on the "Tag selected term" link
================================================= */
// Declarations
var selection = "";
// If the user selects new text
document.onselectionchange = function() {
// If the user has focused on an idea
if($("li.added_item .expandable").is(":focus")) {
// Update the tag variable
selection = window.getSelection().toString();
tag = selection.trim();
}
}
// If the user clicks on the "Tag selected term" link
$("p.tag-selected-term a").on("click", function() {
// If the user is not logged in
if($("input[name='username']").val() === "") {
// Show a dialog
$("div#shadow").css("display", "block");
$("div#dialog-log-in").css("display", "block");
}
// If the tag isn't empty
else if(canvasIsNew === true) {
// Show a dialog
$("div#shadow").css("display", "block");
$("div#dialog-please-save").css("display", "block");
}
// If no term has been selected
else if(tag === "") {
// Show a dialog
$("div#shadow").css("display", "block");
$("div#dialog-select-term").css("display", "block");
}
// If a term has been selected
else if(tag != "") {
// Show the tag window
showTagWindow();
}
// Prevent the current view to jump to the top of the screen
return false;
});
// If the user leaves the idea
$("li.added_item .expandable").on("focusout", function() {
// Reset variables
selection = "";
tag = "";
});
/* ================================================
Serialize Form to JSON
================================================= */
// Serialize Form to JSON
$.fn.serializeObject = function() {
// Declarations
var o = {};
var a = this.serializeArray();
var addedIdeaLists = $(".card ul");
$.each(a, function() {
if(o[this.name]) {
if(!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
}
else {
o[this.name] = this.value || '';
}
});
// Add added ideas to the JSON object manually
$.each(addedIdeaLists, function() {
// Declarations
var field = $(this).attr("id");
var addedItemDivs = $(this).find($(".expandable"));
var addedItemArray = [];
var numberOfAddedItem = addedItemDivs.length;
// For every idea
for(var i = 0; i < numberOfAddedItem; i++) {
addedItemArray[i] = [addedItemDivs[i].textContent, addedItemDivs[i].id];
}
// Add the idea to the array
o[field + "[]"] = addedItemArray;
});
return o;
};
/* ================================================
Getting the current date
================================================= */
// Declarations
var fullDate = new Date();
var fourDigitYear = fullDate.getFullYear();
var twoDigitMonth = fullDate.getMonth() + 1 + "";
var twoDigitDate = fullDate.getDate() + "";
var currentDate;
// If the month digit is 1 character long
if(twoDigitMonth.length == 1) {
// Add the prefix "0"
twoDigitMonth = "0" + twoDigitMonth;
}
// If the date digit is 1 character long
if(twoDigitDate.length == 1) {
// Add the prefix "0"
twoDigitDate = "0" + twoDigitDate;
}
// Save the current date
currentDate = fourDigitYear + "-" + twoDigitMonth + "-" + twoDigitDate;
// Set the current date in the date input field
$(".proj_date").val(currentDate);
/* ================================================
If the user clicks on "Log Out"
================================================= */
// If the user clicks on "Log Out"
$('#user-profile').on('click', '#logout', function() {
var url = "php/logout.php";
$.post(url, function(data, status) {
if(data == 200) {
$("#user-profile").hide();
$(".invited-members").hide();
window.location.href = "https://www.ethicscanvas.org";
}
});
});
/* ================================================
Check if the canvas is public
================================================= */
// Check if the canvas is public
function checkPublic() {
// AJAX
$.ajax({
type: "POST",
url: "php/check-public.php",
dataType: "TEXT",
data: {
"canvas_id": canvasId
},
timeout: 5000,
success: function(returnData) {
if(returnData === "0") {
$("button.publish_canvas").text("Publish for viewing/commenting");
}
else if(returnData === "1") {
$("button.publish_canvas").text("Unpublish for viewing/commenting");
}
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
/* ================================================
When the page loads, import the chosen canvas if the user has
picked one from the dashboard, otherwise load an empty canvas
================================================= */
// Import the canvas from the server
function importCanvasFirst() {
// If a canvas is chosen by the user to be loaded
if(current_canvas_id !== '') {
var url = 'json/' + current_canvas_id + '.json';
// var url= 'json/test_canvas.json';
// Get the saved JSON object in the sendJSON.text file
$.getJSON(url, function(returnedObj) {
// Display the JSON data in the HTML
var itemListHTML = '';
// Iterate through the object
$.each(returnedObj, function(key, value) {
// Project name and item field
if(key === 'field_00[]') {
$('.form-header').find('input.proj_title').val(value[0]);
$('.form-header').find('input.proj_date').val(value[1]);
}
else if(key !== 'new_item') {
// An array
if($.type(value) === "array") {
$.each(value, function(i, itm) {
// FIX DUPLICATIONS in the canvas when importing. Importing will override the canvas content clear the canvas by giving en empty content to the ul list (remove previous list items)
$('.canvas-form').find('.card').filter('.' + key.substr(0, 8)).find('ul.item_list').html('');
// Create a list item with each value item and give it text area with the name attribute as the "key" (right field name)
itemListHTML +=
'' + itm[0] + '
';
});
}
// A single value string
else {
itemListHTML +=
'' + value + '
';
}
// Append the created list items/textatreas to the right field based on the "key"*/
// The str.substr(start,length) is used to remove the [] from the end of the "key"name (for each field. also the name attributes accociated with each fields) so that we can select the right class (right field) and append the created lists to the right field so field names/key/name attribute will tuen into class names: ex: field_1[] becomes field_1
// Find the field by its class names besed on the current key name
// Append the created list of item values to that right field
$('.canvas-form').find('.card').filter('.' + key.substr(0, 8)).find('ul.item_list').append(itemListHTML);
// $('form').find('.card').filter('.field_1').find('ul.item_list').append(itemListHTML);
// !! Empty the item list after each count of "key" so that the previous item lists from the other fields (associated with the previous key) don't get added up to the item list of other fields
itemListHTML = '';
// Limit the text in the idea field if it reaches the max length
limitLengthOnInput();
// If the user is a collaborator
if(userIsCollaborator === true) {
// Show the idea buttons
$("ul.item_list span.glyphicon").show();
// Change the cursor
$("ul.item_list div.expandable").css("cursor", "pointer");
// Toggle textarea.expandable/div.expandable on focus
toggleTextElementOnFocus();
// Show "Tag selected term" link
// For every list of ideas
$(".card .item_list").each(function() {
// the list of ideas has ideas
if($(this).find("li.added_item").length) {
// Show "Tag selected term"
$(this).next().show();
}
});
}
// Get typing information
getTyping();
// Get owner
getOwner();
// Show the owner of the canvas in the Collaborators window
$("p#canvas-owner").text(canvasOwner);
// Get the tags from the database and apply them on the canvas
getTags();
// Remember that the canvas isn't new
canvasIsNew = false;
// Check if the canvas is public
checkPublic();
}
});
});
}
}
importCanvasFirst();
/* ================================================
Receiving remote updates from collaborators
================================================= */
// Import the canvas from the server
function importCanvasAgain() {
// If a canvas is chosen by the user to be loaded
if(current_canvas_id !== '') {
var url = 'json/' + current_canvas_id + '.json';
// var url= 'json/test_canvas.json';
// Get the saved JSON object in the sendJSON.text file
$.getJSON(url, function(returnedObj) {
// Display the JSON data in the HTML
var itemListHTML = '';
var ideaIdsJSON = [];
// Iterate through the object
$.each(returnedObj, function(key, value) {
// Project name and item field
if(key === 'field_00[]') {
// If the current Project Title has a different text from the text in the JSON file
if($('.form-header').find('input.proj_title').val() !== value[0]) {
// If the Project Title isn't currently being edited
if(!$('.form-header').find('input.proj_title').is(":focus")) {
$('.form-header').find('input.proj_title').val(value[0]);
}
}
$('.form-header').find('input.proj_date').val(value[1]);
}
else if(key !== 'new_item') {
// An array
if($.type(value) === "array") {
$.each(value, function(i, itm) {
// Declarations
var ideaTextJSON = itm[0];
var ideaIdJSON = itm[1];
// Add the current idea ID to the array
ideaIdsJSON.push(ideaIdJSON);
// console.log("We are now about to check if the idea \"" + $("#" + ideaIdJSON) + "\" exists on the currently viewed canvas");
// If the idea exists in the JSON file and on the currently viewed canvas (then the idea might or might not have been changed)
if($("#" + ideaIdJSON).length > 0) {
// console.log("The idea \"" + ideaIdJSON + "\" exists in both the JSON file and on the currently viewed canvas");
// console.log("We are now about to compare \"" + $("#" + ideaIdJSON).text() + "\" with \"" + ideaTextJSON + "\"");
// If the current idea has a different text from the text in the JSON file
if($("#" + ideaIdJSON).text() !== ideaTextJSON) {
// console.log("The text of \"" + ideaIdJSON + "\" has been changed by either you or a collaborator");
// If the current idea isn't currently being edited
if($("#" + ideaIdJSON).prop("tagName") === "DIV") {
// console.log("The current idea is a DIV");
// Update the current idea with the text in the JSON file
$("#" + ideaIdJSON).text(ideaTextJSON);
// Add Notification effect
// $("#" + ideaIdJSON).css("-webkit-animation-name", "update-notification");
// $("#" + ideaIdJSON).css("-webkit-animation-duration", "2s");
$("#" + ideaIdJSON).css("animation-name", "update-notification");
$("#" + ideaIdJSON).css("animation-duration", "2s");
// Remove Notification effect
window.setTimeout(function() {
// $("#" + ideaIdJSON).css("-webkit-animation-name", "");
// $("#" + ideaIdJSON).css("-webkit-animation-duration", "");
$("#" + ideaIdJSON).css("animation-name", "");
$("#" + ideaIdJSON).css("animation-duration", "");
}, 2000);
}
}
}
// If the idea exists in either the JSON file or on the currently viewed canvas, but not both
else {
// console.log("The idea exists in either the JSON file or on the currently viewed canvas, but not both");
// If the idea exists in the JSON file, but not on the currently viewed canvas (then the idea is new)
if(ideaIdJSON) {
// console.log("The idea \"" + ideaIdJSON + "\" is new");
// Create the idea
itemListHTML +=
'' + ideaTextJSON + '
';
// Append the idea to the item list
$('.canvas-form').find('.card').filter('.' + key.substr(0, 8)).find('ul.item_list').append(itemListHTML);
}
}
});
}
}
});
// If the idea doesn't exist in the JSON file, but on the currently viewed canvas (then the idea has been removed)
// Declarations
var ideasCanvas = $(".added_item .expandable");
// For every idea on the currently viewed canvas
for(var counter = 0; counter < ideasCanvas.length; counter++) {
// Declarations
var ideaIdCanvas = ideasCanvas[counter].id;
// If the current idea on the currently viewed canvas doesn't exist in the JSON file
if(ideaIdsJSON.indexOf(ideaIdCanvas) === -1) {
// If there are no ideas left
if($("#" + ideaIdCanvas).parent().parent().length === 1) {
// Hide "Tag selected term" link
$("#" + ideaIdCanvas).parent().parent().next().css("display", "none");
}
// Delete the idea
$("#" + ideaIdCanvas).parent().remove();
// console.log("The idea \"" + ideaIdCanvas + "\" has been removed");
}
}
// Limit the text in the idea field if it reaches the max length
limitLengthOnInput();
// If the user is a collaborator
if(userIsCollaborator === true) {
// Show the idea buttons
$("ul.item_list span.glyphicon").show();
// Change the cursor
$("ul.item_list div.expandable").css("cursor", "pointer");
// Toggle textarea.expandable/div.expandable on focus
toggleTextElementOnFocus();
// Show "Tag selected term" link in the destination category
// For every list of ideas
$(".card .item_list").each(function() {
// If the list of ideas has ideas
if($(this).find("li.added_item").length) {
// Show "Tag selected term"
$(this).next().show();
}
});
}
// Get the tags from the database and apply them on the canvas
getTags();
});
}
}
/* ================================================
Toggle the introduction text in fields
================================================= */
// Toggle the introduction text in fields
/*
// $(selector).toggle(speed,easing,callback)
$('.card').on('click', '.intro-toggle', function() {
var $TogglingText = $($(this).closest('.card').find('.intro'));
var $Toggler = $($(this).closest('.card').find('.intro-toggle'));
$TogglingText.toggle('slow', function() {
// Do this when toggling:
// the boolean .is(':visible') of the current toggle state
if($TogglingText.is(':visible')) {
// change the text of the toggle
$Toggler.find('.intro-toggle-text').text('Hide description');
// change the icon of the toggle
$Toggler.find('.intro-toggle-icon').switchClass("glyphicon-plus-sign", "glyphicon-minus-sign", 1000, "easeInOutQuad");
}
else {
$Toggler.find('.intro-toggle-text').text('Show description');
$Toggler.find('.intro-toggle-icon').switchClass("glyphicon-minus-sign", "glyphicon-plus-sign", 1000, "easeInOutQuad");
}
});
});
*/
/* ================================================
Auto expand user input textareas
================================================= */
// Works for textareas already existing in the HTML when the page loads -> User input
/*
$.each($('textarea[data-autoresize]'), function() {
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function(el) {
$(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};
$(this).on('keyup input', function() {
resizeTextarea(this);
}).removeAttr('data-autoresize');
});
*/
/* ================================================
Limiting the number of lines in textareas
================================================= */
// Limiting the number of lines in textareas
/*
//
$('.card').on('keypress', 'textarea[data-limit-rows=true]', function(event) {
var textarea = $(this),
text = textarea.val(),
// match() -> Searches a string for a match against a regular expression, and returns the matches, as an Array object.
numberOfLines = (text.match(/\n/g) || []).length + 1,
maxRows = parseInt(textarea.attr('rows'));
// if the number of lines have reached the max rows
if(numberOfLines === maxRows) {
return false;
}
});
*/
/* ================================================
Handling user input, ADD items
A. Add button
B. Clicking enter
================================================= */
/* ----------------------------------------------
Add new idea slide effect
----------------------------------------------- */
// When clicking on "add a new idea", Slide down and show the input field for adding a new item (from the begining, it is set to display:hidden with CSS). If clicked again, slide it up. After that, set the textarea in automatic focus
$('.card').on('click', 'a.add-idea', function(event) {
// Stop the default behavior of the link (jumping back to the start of the page)
event.preventDefault();
// Set the textarea automatically in focus
$(this).closest('.card').find('.user-input').slideToggle("slow", function() {
// When the toggle animation is complete:
// Set the text area in focus
$(this).closest('.card').find('.new_item').val('');
$(this).closest('.card').find('.chars').text(maxLength);
$(this).closest('.card').find('.new_item').focus();
});
});
/* ----------------------------------------------
A. When we click the add btn to
add the item to the list
----------------------------------------------- */
// Event deligation to handle the present and future elements that are dynamically added
$('.card').on('click', '.add_btn', function() {
var new_item = $(this).closest('.card').find('.new_item').val();
var new_item_height = $(this).closest('.card').find('.new_item').height();
// Number of items are in the list
var fieldItemCount = $(this).closest('.card').find('ul.item_list').find('li').length;
// New item added, increment the number of items
fieldItemCount++;
// Add the input value as a textarea item
// Create a name attribute in the "field_nr[]" format to be able to tag each new item with the right field attr name (based on the field they are added to). This is to format the json file for each group of dynamically added items. We get the name attribute directly from the id attribute of the ul list in each card (the one we pressed the add button in)
// If the new item input exist (is not empty), add the item
if(new_item) {
var field_attr = $(this).closest('.card').find('ul.item_list').attr('id') + '[]';
// The height of the newly added item = the height of the add new idea textarea
$(this).closest('.card').find('ul.item_list').append(
'' + new_item + '
'
);
// Fix the heights only after a new item is added
// fixHeights();
}
// Clear the new item the text area value
$(this).closest('.card').find('.new_item').val('');
// When clicking on "add idea", hide the input field for adding a new item (slideUp() doesn't work nicely here)
$(this).closest('.card').find('.user-input').hide("fast", function() {
// Animation complete
});
// Show the idea buttons
$("ul.item_list span.glyphicon").show();
// Change the cursor
$("ul.item_list div.expandable").css("cursor", "pointer");
// Limit the text in the idea field if it reaches the max length
limitLengthOnInput();
// Toggle textarea.expandable/div.expandable on edit
toggleTextElementOnFocus();
// Remove all tags from all fields
removeTags();
// Get the tags from the database and apply them on the canvas
getTags();
// If the list of ideas has ideas
if($(this).parent().parent().prev().prev().children().length > 0) {
// Show "Tag selected term" link
$(this).parent().parent().prev().css("display", "block");
}
// Save the canvas automatically if the user has logged in
prepareSaveCanvas();
});
/* ----------------------------------------------
B. Clicking enter in the add idea textarea,
will add the new item to the card
----------------------------------------------- */
$('.card').on('keypress', 'textarea[data-limit-rows=true]', function(event) {
var textarea = $(this);
var text = textarea.val();
/* The jQuery event.which -->
Returns which keyboard key was pressed: */
// If the enter is pressed, event.which === 13
if(event.which === 13 && !$("li.added_item .expandable").is(":focus")) {
var new_item = $(this).closest('.card').find('.new_item').val();
var new_item_height = $(this).closest('.card').find('.new_item').height();
// Number of items are in the list
var fieldItemCount = $(this).closest('.card').find('ul.item_list')
.find('li').length;
// New item added, increment the number of items
fieldItemCount++;
// Add the input value as a textarea item
// Create a name attribute in the "field_nr[]" format to be able to tag each new item with the right field attr name (based on the field they are added to). This is to format the json file for each group of dynamically added items. We get the name attribute directly from the id attribute of the ul list in each card (the one we pressed the add button in)
// If the new item input exist (is not empty), add the item
if(new_item) {
var field_attr = $(this).closest('.card').find('ul.item_list').attr(
'id') + '[]';
// The height of the newly added item = the height of the add new idea textarea
$(this).closest('.card').find('ul.item_list').append(
'' + new_item + '
'
);
// Fix the heights only after a new item is added
// fixHeights();
}
// Clear the new item the text area value
$(this).closest('.card').find('.new_item').val('');
// When clicking on "add idea", hide the input field for adding a new item (slideUp() doesn't work nicely here)
$(this).closest('.card').find('.user-input').hide("fast", function() {
// Animation complete
});
// Show the idea buttons
$("ul.item_list span.glyphicon").show();
// Change the cursor
$("ul.item_list div.expandable").css("cursor", "pointer");
// Limit the text in the idea field if it reaches the max length
limitLengthOnInput();
// Toggle textarea.expandable/div.expandable on edit
toggleTextElementOnFocus();
// Remove all tags from all fields
removeTags();
// Get the tags from the database and apply them on the canvas
getTags();
// If the list of ideas has ideas
if($(this).parent().parent().parent().prev().prev().children().length > 0) {
// Show "Tag selected term" link
$(this).parent().parent().parent().prev().css("display", "block");
}
// Save the canvas automatically if the user has logged in
prepareSaveCanvas();
}
});
/* ================================================
Commenting ideas
================================================= */
// Remove the comment
function deleteComment(commentId) {
// AJAX
$.ajax({
type: "POST",
url: "php/delete-comment.php",
dataType: "TEXT",
data: {
"comment_id": commentId
},
timeout: 5000,
success: function() {
// Get comments
getComments();
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
// Get comments
function getComments() {
// AJAX
$.ajax({
type: "POST",
url: "php/get-comments.php",
dataType: "JSON",
data: {
"canvas_id": canvasId,
"idea_id": currentCommentsId
},
timeout: 5000,
success: function(returnData) {
// If comments exist
if(returnData.length > 0) {
// Declarations
var newHtml = "| Comment | Delete |
|---|
";
var index = 0;
// While there still are comments to append
while(index < returnData.length) {
newHtml += " | "
// If the current collaborator who commented is the active user
if(returnData[index]["collaborator"] === username) {
// Add the remove icon
newHtml += "";
}
newHtml += " |
";
// Increment the index
index++;
}
// Fix the margin-bottom of the heading
$("h2#comments-thread-heading").css("margin-bottom", "0.4em");
// Show the table
$("table#comments-thread").show();
// Hide the default text
$("div#comments-window p#comments-none").hide();
// Remove all previous comments
$("table#comments-thread tr").remove();
// Append the comments
$("table#comments-thread").append(newHtml);
// If the user clicks on the "Remove Comment" button
$("div#comments-window td span").on("click", function() {
// Declarations
var commentId = $(this).parent().parent().prop("id");
// Remove the comment
deleteComment(commentId);
});
// If the user is a collaborator or the owner of the canvas
if(userIsCollaborator === true || canvasOwner === username) {
// Show the "Resolve Comments" button
$("div#comments-window button#comments-resolve").css("display", "block");
}
// If the user is not a collaborator
else {
// Fix the margin below the table
$("table#comments-thread").css("margin-bottom", 0);
}
}
// If there are no comments
else {
// Fix the margin-bottom of the heading
$("h2#comments-thread-heading").css("margin-bottom", "0");
// Show the table
$("table#comments-thread").hide();
// Hide the default text
$("div#comments-window p#comments-none").show();
// Remove all previous comments
$("table#comments-thread tr").remove();
// Show the "Resolve Comments" button
$("div#comments-window button#comments-resolve").hide();
}
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
// If the user clicks on the "Comment" icon, show the comments window
$(".card").on("click", "span.comment", function() {
// If the user is logged in
if($("input[name='username']").val() != "") {
// Show the move window
$("div#shadow").css("display", "block");
$("div#comments-window").css("display", "block");
// Remember the ID of the idea
currentCommentsId = $(this).parent().find("div").prop("id");
// Get commments
getComments();
updateRemainingCharacters();
}
// If the user isn't logged in
else {
// Show a dialog
$("div#shadow").css("display", "block");
$("div#dialog-log-in").css("display", "block");
}
});
// Close the comments window
function closeCommentsWindow() {
// Close the comments window
$("div#shadow").css("display", "none");
$("div#comments-window").css("display", "none");
$("div#comments-window textarea#comments-new").val("Please enter a comment...");
}
// If the user clicks on the "Close" button
$("div#comments-window button.close").on("click", function() {
// Close the comments window
closeCommentsWindow();
});
// If the user focuses in the textarea
$("div#comments-window textarea#comments-new").on("focusin", function() {
// Declarations
var comment = $("div#comments-window textarea#comments-new").val();
// If a comment hasn't been entered
if(comment === "Please enter a comment...") {
// Empty the comment textarea
$("div#comments-window textarea#comments-new").val("");
}
});
// If the user leaves the textarea
$("div#comments-window textarea#comments-new").on("focusout", function() {
// Declarations
var comment = $("div#comments-window textarea#comments-new").val();
// If a comment hasn't been entered
if(comment === "") {
// Reset the comment textarea
$("div#comments-window textarea#comments-new").val("Please enter a comment...");
}
});
// Updating the remaining characters information
function updateRemainingCharacters() {
// Declarations
var length = $("div#comments-window textarea#comments-new").val().length;
var maxLength = 200;
// Update length
length = maxLength - length;
// If the text isn't the default text
if($("div#comments-window textarea#comments-new").val() !== "Please enter a comment...")
// Show the remaining characters
$("div#comments-window span.chars").text(length);
// If the text is the default text
else {
$("div#comments-window span.chars").text(maxLength);
}
}
// If the user presses a key in the comments textarea
$("div#comments-window textarea#comments-new").on("keyup", function() {
// Update remaining characters
updateRemainingCharacters();
});
// If the user clicks on the "Post comment" button
$("div#comments-window button#comments-post").on("click", function() {
// Declarations
var comment = $("div#comments-window textarea#comments-new").val();
// If a comment has been entered
if(comment != "" && comment != "Please enter a comment...") {
// AJAX
$.ajax({
timeout: 5000,
dataType: "json",
type: "post",
data: {
"canvas_id": canvasId,
"collaborator": username,
"idea_id": currentCommentsId,
"comment": comment
},
url: "php/post-comment.php",
success: function() {
// Empty the textarea
$("div#comments-window textarea#comments-new").val("Please enter a comment...");
getComments();
// Update reamining characters
updateRemainingCharacters();
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
});
// Resolve the comments
function resolveComments() {
// AJAX
$.ajax({
type: "POST",
url: "php/resolve-comments.php",
dataType: "TEXT",
data: {
"idea_id": currentCommentsId
},
timeout: 5000,
success: function() {
// Close the Delete Comment window
$("div#shadow").css("z-index", "2");
$("div#dialog-resolve-comments").css("display", "none");
// Get comments
getComments();
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
// If the user clicks on the "Remove" button
function showResolveCommentsDialog() {
// Show the Remove comment dialog
$("div#shadow").css("z-index", "3");
$("div#dialog-resolve-comments").css("display", "block");
// If the user clicks on "Yes"
$("#dialog-resolve-comments #button-yes").on("click", function() {
// Resolve the comments
resolveComments();
});
// If the user clicks on "Cancel"
$("#dialog-resolve-comments #button-cancel").on("click", function() {
// Cancel
$("div#shadow").css("z-index", "2");
$("div#dialog-resolve-comments").css("display", "none");
});
}
// If the user clicks on the "Close" button in the Remove Collaborator dialog
$("div#dialog-resolve-comments button.close").on("click", function() {
// Close the Remove Collaborator window
$("div#shadow").css("z-index", "2");
$("div#dialog-resolve-comments").css("display", "none");
});
// If the user clicks on the "Resolve comments" button
$("div#comments-window button#comments-resolve").on("click", function() {
showResolveCommentsDialog();
});
/* ================================================
Moving ideas to a different category
================================================= */
// Declarations
var categoryDestination;
var categoryLis = $("div#move-window ul").html();
var categoryAs = $("div#move-window ul a");
var categoryOrigin;
var ideaLi;
var linkLi;
var linkText;
// Remove the link to the current category, as the idea cannot be moved to its own category where it already is
function removeLinkToOriginCategory(text) {
// If the number of the category is between 10-99
if(text.substring(6, 7) != "0") {
// Remember the origin category
categoryOrigin = text.substring(6, 9) - 1;
}
// If the number of the category is between 0-9
else {
// Remember the origin category
categoryOrigin = text.substring(7, 9) - 1;
}
// Remove A tag
linkLi = $("div#move-window ul li").get(categoryOrigin);
linkText = categoryAs.get(categoryOrigin).innerHTML;
linkLi.innerHTML = linkText;
}
// If the user clicks on the "Move" icon, show the move window
$(".card").on("click", "span.handle", function() {
// Show the move window
$("div#shadow").css("display", "block");
$("div#move-window").css("display", "block");
// Assign the idea that is going to be moved
ideaLi = $(this).parent();
// Remove the link to the current category, as the idea cannot be moved to its own category where it already is
removeLinkToOriginCategory($(this).parent().parent().attr("id"));
});
// Close the move window
function closeMoveWindow() {
// Close the move window
$("div#shadow").css("display", "none");
$("div#move-window").css("display", "none");
}
// If the user clicks on the "Close" button
$("div#move-window button.close").on("click", function() {
// Close the move window
closeMoveWindow();
});
// If the user clicks on a category, move the idea
function moveIdeaOnClick() {
$("div#move-window ul a").on("click", function() {
// If the number of the category is between 10-99
if($(this).parent().text().trim().substring(1, 2) != ".") {
// Remember the destination category
categoryDestination = $(this).parent().text().trim().substring(0, 2);
}
// If the number of the category is between 0-9
else {
// Remember the destination category
categoryDestination = $(this).parent().text().trim().substring(0, 1);
}
// If the number of the category is between 10-99
if(categoryDestination > 9) {
// Move the idea
$("ul#field_" + categoryDestination).append(ideaLi);
}
// If the number of the category is between 0-9
else {
// Move the idea
$("ul#field_0" + categoryDestination).append(ideaLi);
}
// Close the move window
closeMoveWindow();
// Save the canvas automatically if the user has logged in
prepareSaveCanvas();
// If the Move window isn't opened for the first time
if($("div#move-window li").length > $("div#move-window a").length) {
// Restore links in the move window
$("div#move-window ul").children().remove()
$("div#move-window ul").append(categoryLis);
moveIdeaOnClick();
}
// Hide "Tag selected term" link in the origin category if there are no ideas left
if($("ul#field_0" + (categoryOrigin + 1)).children().length === 0) {
// If the number of the category is between 10-99
if((categoryOrigin + 1) > 9) {
// Hide the "Tag selected term" button
$("ul#field_" + (categoryOrigin + 1)).parent().find("p.tag-selected-term").css("display", "none");
}
// If the number of the category is between 0-9
else {
// Hide the "Tag selected term" button
$("ul#field_0" + (categoryOrigin + 1)).parent().find("p.tag-selected-term").css("display", "none");
}
}
// If the user is a collaborator
if(userIsCollaborator === true) {
// Show "Tag selected term" link in the destination category
// If the number of the category is between 10-99
if((categoryOrigin + 1) > 9) {
$("ul#field_" + categoryDestination).parent().find("p.tag-selected-term").css("display", "block");
}
// If the number of the category is between 0-9
else {
$("ul#field_0" + categoryDestination).parent().find("p.tag-selected-term").css("display", "block");
}
}
});
}
moveIdeaOnClick();
/* ================================================
Moving ideas up
================================================= */
// If the user clicks on the "Up" button
$('.card').on('click', 'span.move-up', function() {
// Declarations
var ideaLiCurrent = $(this).parent();
var ideaLiPrevious = $(this).parent().prev();
// If the previous element is a list item
if(ideaLiPrevious.is("li")) {
// Move the idea
ideaLiCurrent.detach();
ideaLiPrevious.before(ideaLiCurrent);
// Save the canvas automatically if the user has logged in
prepareSaveCanvas();
}
});
/* ================================================
Moving ideas down
================================================= */
// If the user clicks on the "Down" button
$('.card').on('click', 'span.move-down', function() {
// Declarations
var ideaLiCurrent = $(this).parent();
var ideaLiNext = $(this).parent().next();
// If the previous element is a list item
if(ideaLiNext.is("li")) {
// Move the idea
ideaLiCurrent.detach();
ideaLiNext.after(ideaLiCurrent);
// Save the canvas automatically if the user has logged in
prepareSaveCanvas();
}
});
/* ================================================
Deleting ideas
================================================= */
var ideaToDelete;
function deleteIdea() {
// If there are no ideas left
if(ideaToDelete.prev().parent().parent().children().length === 1) {
// Hide "Tag selected term" link
ideaToDelete.prev().parent().parent().next().css("display", "none");
}
// Remove the list item
ideaToDelete.closest("li").remove();
// Save the canvas automatically if the user has logged in
prepareSaveCanvas();
}
function showDeleteIdeaDialog() {
// Show a dialog
$("div#shadow").css("display", "block");
$("div#dialog-delete-idea").css("display", "block");
}
// If the user clicks on "Yes" button in the Delete Comment dialog
$("div#dialog-delete-idea #button-yes").on("click", function() {
// Resolve the comments
resolveComments();
// Delete the idea
deleteIdea();
// Update view
$("div#shadow").css("display", "none");
$("div#dialog-delete-idea").css("display", "none");
});
// If the user clicks on "Cancel" button in the Delete Comment dialog
$("div#dialog-delete-idea #button-cancel").on("click", function() {
// Cancel
$("div#shadow").css("display", "none");
$("div#dialog-delete-idea").css("display", "none");
});
// If the user clicks on the "Close" button in the Delete Comment dialog
$("div#dialog-delete-idea button.close").on("click", function() {
// Close the Delete Comment window
$("div#shadow").css("display", "none");
$("div#dialog-delete-idea").css("display", "none");
});
// If the cross beside the textarea is clicked, remove that list item
$('.card').on('click', 'span.remove', function() {
ideaToDelete = $(this);
// Remember the ID of the idea
currentCommentsId = ideaToDelete.parent().find("div").prop("id");
// AJAX
$.ajax({
type: "POST",
url: "php/check-comments.php",
dataType: "JSON",
data: {
"canvas_id": canvasId,
"idea_id": currentCommentsId
},
timeout: 5000,
success: function(returnData) {
// If the idea has comments
if(returnData.length > 0) {
showDeleteIdeaDialog();
}
else {
deleteIdea();
}
},
error: function(xhr) {
console.log(xhr.statusText);
}
});
});
/* ================================================
Sortable field ideas
================================================= */
// Make items sortable in their fields and between fields
/*
$('.sortable').sortable({
connectWith: '.connectedList',
placeholder: "sort-placeholder",
// revert: true
zIndex: 300 // Or greater than any other relative/absolute/fixed elements and droppables
});
*/
/* ================================================
Sorting and Dragging events
================================================= */
// Every textarea in a item needs to get the right name attribute once they have been dropped in another field (so it ends up in the right place in the json file)
/*
// Dragging starts
$(".sortable").on("sortstart", function(event, ui) {
// WHEN WE SORT CARDS, $(this) ---> the "begining" ul with the class of .sortable
});
// Dragging ends: item dropped
$(".sortable").on("sortstop", function(event, ui) {
// get the id of the field ul (to set the name attribute of textareas)
// # mouseleave is the right event for when we release and leave a card mouseup doesn't work properly in this case
$('.card').on('mouseleave', 'li', function() {
//$(selector).attr(attribute,value)
var fieldAttr = $(this).closest('ul.item_list').attr('id');
// $(this).find('textarea').attr('name', fieldAttr + '[]');
$(this).find('li.added_item .expandable').attr('name', fieldAttr + '[]');
});
});
*/
/* ================================================
Update the project and date title of the canvas in the database
================================================= */
// Update the project and date title of the canvas in the database
function updateProjectTitleInDatabase() {
// Declarations
var projectTitle = $("div.form-header input.proj_title").val();
// AJAX
$.ajax({
async: false,
timeout: 5000,
dataType: "text",
type: "post",
data: {
"canvas_id": canvasId,
"project_title": projectTitle,
"current_date": currentDate
},
url: "php/update-project-in-database.php",
error: function(xhr) {
console.log(xhr.statusText);
}
});
}
/* ================================================
SAVING THE CANVAS:
CLICK ON #EXPORT JSON# form button
================================================= */
// Save the canvas
function saveCanvas() {
/* ----------------------------------------------
A: Saving the canvas
as a registered user
----------------------------------------------- */
// PHP variables are retieved in the header of the canvas index.php as js variables -->
var name_save_canvas = $('.form-header').find('.proj_title').val();
// var date_save_canvas = $('.form-header').find('.proj_date').val();
var date_save_canvas = currentDate;
var save_canvas_obj;
// If canvasOwner isn't empty
if(canvasOwner !== "") {
save_canvas_obj = {
'email_save_canvas': canvasOwner,
'name_save_canvas': name_save_canvas,
'date_save_canvas': date_save_canvas,
'id_save_canvas': canvasId
};
}
// If this is the first time saving the canvas
else {
console.log("The canvas is about to be saved for the first time");
save_canvas_obj = {
'email_save_canvas': email_save_canvas,
'name_save_canvas': name_save_canvas,
'date_save_canvas': date_save_canvas,
'id_save_canvas': canvasId
};
}
var save_canvas = $.param(save_canvas_obj);
// Post the JSON stringified object to the php file (the PHP script will save it in a .json file )
var save_reg_url = "php/save-canvas.php";
$.post(save_reg_url, { save_canvas: save_canvas }, function(data, status) {
// If the returned data is successful, it is the $canvas_id
var canvas_id = data;
// Send this canvas_id with the next AJAX request to the php/canvas.php file and use it as the name of the JSON file to be saved
/* ----------------------------------------------
For the second AJAX request:
B: Exporting the form data JSON to a file
and save it on the server
----------------------------------------------- */
// $('#result').text(JSON.stringify($('.canvas-form').serializeObject()));
// Make the JSON object into a JSON string
// var JSONstrObj = JSON.stringify($('.canvas-form').serializeObject());
var JSONstrObj = JSON.stringify($('.canvas-form').serializeObject());
var url = "php/canvas.php";
// Post the JSON stringified object to the php file (the php script will save it in a .json file)
// Also, send the canvas_id and use it for naming the file
$.post(url, {
JSONstrObj: JSONstrObj,
canvas_id: canvas_id
}, function(data, status) {
console.log(
'Response from PHP when sending the form JSON object: \n' +
'data:' + data + '\n status: ' + status);
// Update the project title in the database
updateProjectTitleInDatabase();
// If the canvas is saved for the first time
if(numberOfCollaborators === 0) {
// Show the Collaborators button
$(".form-header #collaborators-container").show();
// Add the owner to Collaborators in the database
addOwnerToCollaborators();
// Get the owner
getOwner();
// Update the Collaborators table
updateCollaborators();
// Update owner
$("p#canvas-owner").text(canvasOwner);
}
// Remember that the canvas isn't new
canvasIsNew = false;
}).fail(function(jqXHR) {
console.log("Error " + jqXHR.status + ' ' + jqXHR.statustext);
});
}).fail(function(jqXHR) {
console.log("Error " + jqXHR.status + ' ' + jqXHR.statustext);
});
// Prevent the card item list from reseting itself after clicking on the export button (submission). Because the type of the button is submit
return false;
}
/* ----------------------------------------------
Save the canvas if the user has logged in
----------------------------------------------- */
// Prepare to save the canvas
function prepareSaveCanvas() {
// If the viewer of the canvas is a logged in user
if($("input[name='username']").val() != "") {
// Save the canvas
saveCanvas();
}
}
// Save the canvas on load
// prepareSaveCanvas();
/* ================================================
Create and remove hidden copies of every list item.
These are needed in order to export the canvas as PDF.
================================================= */
// Create an hidden copy of every list item
function createHiddenLiCopies() {
// For every idea
$("li.added_item").each(function() {
// Declarations
var oldLiName = $(this).find(".expandable").attr("name");
var oldLiText = $(this).find(".expandable").text();
var newLi = "";
// Append the hidden copy
$(this).after(newLi);
});
}
// Remove the hidden copies of every list item
function removeHiddenLiCopies() {
window.setTimeout(function() {
$("li.hidden").remove();
}, 1000);
}
/* ================================================
HANDLING CLICK ON: Email This Canvas BUTTON
================================================= */
/*
// "Email This Canvas" button
$(".canvas-form").on("click", ".share_canvas", function(event) {
// Prevent default operation
event.preventDefault();
// Create an hidden copy of every list item
createHiddenLiCopies();
// Remove the hidden copies of every list item
removeHiddenLiCopies();
$(".share_canvas_email").slideToggle(1000, function() {
// Save the PDF as file
$.post("mpdf/canvas-save.php", function(data, status) {});
});
});
// "Send" button
$(".canvas-form").on("click", ".share_canvas_send", function() {
// Create an hidden copy of every list item
createHiddenLiCopies();
// Remove the hidden copies of every list item
removeHiddenLiCopies();
var share_email = $(".share_canvas_email").find("input").serialize();
// This sends a serialized array share_email to the PHP file. Example: the value of this array will be: share-canvas-email=eternalflame.f%40gmail.com
$.post("php/share-canvas.php", {
share_email: share_email
}, function(data, status) {
// Canvas successfully shared
if(data == 200) {
$(".canvas-form").find(".imp-exp-btn ").append("Your canvas has been shared by email
Your canvas could not be shared