scinote-web/app/assets/javascripts/my_modules.js

257 lines
8.1 KiB
JavaScript
Raw Normal View History

2016-02-12 23:52:43 +08:00
// Bind ajax for editing descriptions
function bindEditDescriptionAjax() {
var editDescriptionModal = $("#manage-module-description-modal");
var editDescriptionModalBody = editDescriptionModal.find(".modal-body");
var editDescriptionModalSubmitBtn = editDescriptionModal.find("[data-action='submit']");
$(".description-link")
.on("ajax:success", function (ev, data, status) {
var descriptionLink = $(".description-refresh");
// Set modal body & title
editDescriptionModalBody.html(data.html);
editDescriptionModal
.find("#manage-module-description-modal-label")
.text(data.title);
editDescriptionModalBody.find("form")
.on("ajax:success", function (ev2, data2, status2) {
// Update module's description in the tab
descriptionLink.html(data2.description_label);
// Close modal
editDescriptionModal.modal("hide");
})
.on("ajax:error", function (ev2, data2, status2) {
// Display errors if needed
$(this).renderFormErrors("my_module", data.responseJSON);
2016-02-12 23:52:43 +08:00
});
// Show modal
editDescriptionModal.modal("show");
})
.on("ajax:error", function (ev, data, status) {
// TODO
});
editDescriptionModalSubmitBtn.on("click", function () {
// Submit the form inside the modal
editDescriptionModalBody.find("form").submit();
});
editDescriptionModal.on("hidden.bs.modal", function () {
editDescriptionModalBody.find("form").off("ajax:success ajax:error");
editDescriptionModalBody.html("");
});
}
// Bind ajax for editing due dates
function bindEditDueDateAjax() {
var editDueDateModal = null;
var editDueDateModalBody = null;
var editDueDateModalTitle = null;
var editDueDateModalSubmitBtn = null;
editDueDateModal = $("#manage-module-due-date-modal");
editDueDateModalBody = editDueDateModal.find(".modal-body");
editDueDateModalTitle = editDueDateModal.find("#manage-module-due-date-modal-label");
editDueDateModalSubmitBtn = editDueDateModal.find("[data-action='submit']");
$(".due-date-link")
.on("ajax:success", function (ev, data, status) {
var dueDateLink = $('.task-due-date');
2016-02-12 23:52:43 +08:00
// Load contents
editDueDateModalBody.html(data.html);
editDueDateModalTitle.text(data.title);
// Add listener to form inside modal
editDueDateModalBody.find("form")
.on("ajax:success", function (ev2, data2, status2) {
// Update module's due date
dueDateLink.html(data2.module_header_due_date_label);
// Close modal
editDueDateModal.modal("hide");
})
.on("ajax:error", function (ev2, data2, status2) {
// Display errors if needed
$(this).renderFormErrors("my_module", data.responseJSON);
2016-02-12 23:52:43 +08:00
});
// Open modal
editDueDateModal.modal("show");
})
.on("ajax:error", function (ev, data, status) {
// TODO
});
editDueDateModalSubmitBtn.on("click", function () {
// Submit the form inside the modal
editDueDateModalBody.find("form").submit();
});
editDueDateModal.on("hidden.bs.modal", function () {
editDueDateModalBody.find("form").off("ajax:success ajax:error");
editDueDateModalBody.html("");
});
}
// Bind ajax for editing tags
function bindEditTagsAjax() {
var manageTagsModal = null;
var manageTagsModalBody = null;
// Initialize reloading of manage tags modal content after posting new
// tag.
function initAddTagForm() {
manageTagsModalBody.find(".add-tag-form")
.on("ajax:success", function (e, data) {
initTagsModalBody(data);
});
}
// Initialize edit tag & remove tag functionality from my_module links.
function initTagRowLinks() {
manageTagsModalBody.find(".edit-tag-link")
.on("click", function (e) {
var $this = $(this);
var li = $this.parents("li.list-group-item");
var editDiv = $(li.find("div.tag-edit"));
2016-07-21 19:11:15 +08:00
// Revert all rows to their original states
manageTagsModalBody.find("li.list-group-item").each(function(){
var li = $(this);
li.css("background-color", li.data("color"));
li.find(".edit-tag-form").clearFormErrors();
2016-07-21 19:11:15 +08:00
li.find("input[type=text]").val(li.data("name"));
});
2016-02-12 23:52:43 +08:00
// Hide all other edit divs, show all show divs
manageTagsModalBody.find("div.tag-edit").hide();
manageTagsModalBody.find("div.tag-show").show();
editDiv.find("input[type=text]").val(li.data("name"));
editDiv.find('.edit-tag-color').colorselector('setColor', li.data("color"));
li.find("div.tag-show").hide();
editDiv.show();
});
manageTagsModalBody.find("div.tag-edit .dropdown-colorselector > .dropdown-menu li a")
.on("click", function (e) {
// Change background of the <li>
var $this = $(this);
var li = $this.parents("li.list-group-item");
li.css("background-color", $this.data("value"));
});
manageTagsModalBody.find(".remove-tag-link")
.on("ajax:success", function (e, data) {
initTagsModalBody(data);
});
manageTagsModalBody.find(".delete-tag-form")
.on("ajax:success", function (e, data) {
initTagsModalBody(data);
});
manageTagsModalBody.find(".edit-tag-form")
.on("ajax:success", function (e, data) {
initTagsModalBody(data);
})
.on("ajax:error", function (e, data) {
$(this).renderFormErrors("tag", data.responseJSON);
2016-02-12 23:52:43 +08:00
});
manageTagsModalBody.find(".cancel-tag-link")
.on("click", function (e, data) {
var $this = $(this);
var li = $this.parents("li.list-group-item");
li.css("background-color", li.data("color"));
li.find(".edit-tag-form").clearFormErrors();
2016-02-12 23:52:43 +08:00
li.find("div.tag-edit").hide();
li.find("div.tag-show").show();
});
}
// Initialize ajax listeners and elements style on modal body. This
// function must be called when modal body is changed.
function initTagsModalBody(data) {
manageTagsModalBody.html(data.html);
manageTagsModalBody.find(".selectpicker").selectpicker();
initAddTagForm();
initTagRowLinks();
}
manageTagsModal = $("#manage-module-tags-modal");
manageTagsModalBody = manageTagsModal.find(".modal-body");
// Reload tags HTML element when modal is closed
manageTagsModal.on("hide.bs.modal", function () {
var tagsEl = $("#module-tags");
// Load HTML
$.ajax({
url: tagsEl.attr("data-module-tags-url"),
type: "GET",
dataType: "json",
success: function (data) {
tagsEl.find(".tags-refresh").html(data.html_module_header);
},
error: function (data) {
// TODO
}
});
});
// Remove modal content when modal window is closed.
manageTagsModal.on("hidden.bs.modal", function () {
manageTagsModalBody.html("");
});
// initialize my_module tab remote loading
$("a.edit-tags-link")
.on("ajax:before", function () {
manageTagsModal.modal('show');
})
.on("ajax:success", function (e, data) {
$("#manage-module-tags-modal-module").text(data.my_module.name);
initTagsModalBody(data);
});
}
// Sets callback for completing/uncompleting task
function applyTaskCompletedCallBack() {
// First, remove old event handlers, as we use turbolinks
$("[data-action='complete-task'], [data-action='uncomplete-task']")
2017-02-16 18:45:07 +08:00
.off().on('click', function() {
var button = $(this);
$.ajax({
url: button.data('link-url'),
type: 'POST',
dataType: 'json',
success: function(data) {
if (data.completed === true) {
button.attr('data-action', 'uncomplete-task');
button.find('.btn')
.removeClass('btn-primary').addClass('btn-default');
} else {
button.attr('data-action', 'complete-task');
button.find('.btn')
.removeClass('btn-default').addClass('btn-primary');
}
$('.task-due-date').html(data.module_header_due_date_label);
$('.task-state-label').html(data.module_state_label);
button.find('button').replaceWith(data.new_btn);
},
error: function() {
}
});
});
}
$(document).ready(function() {
applyTaskCompletedCallBack();
});
2016-02-12 23:52:43 +08:00
bindEditDueDateAjax();
bindEditDescriptionAjax();
bindEditTagsAjax();