mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-21 23:46:21 +08:00
466 lines
14 KiB
Plaintext
466 lines
14 KiB
Plaintext
// Place all the behaviors and hooks related to the matching controller here.
|
|
// All this logic will automatically be available in application.js.
|
|
|
|
// TODO
|
|
// - error handling of assigning user to project, check XHR data.errors
|
|
// - error handling of removing user from project, check XHR data.errors
|
|
// - refresh project users tab after manage user modal is closed
|
|
// - refactor view handling using library, ex. backbone.js
|
|
|
|
//= require comments
|
|
(function () {
|
|
|
|
var newProjectModal = null;
|
|
var newProjectModalForm = null;
|
|
var newProjectModalBody = null;
|
|
var newProjectBtn = null;
|
|
|
|
var editProjectModal = null;
|
|
var editProjectModalTitle = null;
|
|
var editProjectModalBody = null;
|
|
var editProjectBtn = null;
|
|
|
|
var manageUsersModal = null;
|
|
var manageUsersModalBody = null;
|
|
var manageUsersModalFooter = null;
|
|
|
|
/**
|
|
* Stupid Bootstrap btn-group bug hotfix
|
|
* @param btnGroup - The button group element.
|
|
*/
|
|
function activateBtnGroup(btnGroup) {
|
|
var btns = btnGroup.find(".btn");
|
|
btns.find("input[type='radio']")
|
|
.removeAttr("checked")
|
|
.prop("checked", false);
|
|
btns.filter(".active")
|
|
.find("input[type='radio']")
|
|
.attr("checked", "checked")
|
|
.prop("checked", true);
|
|
}
|
|
|
|
/**
|
|
* Initializes page
|
|
*/
|
|
function init() {
|
|
newProjectModal = $('#new-project-modal');
|
|
newProjectModalForm = newProjectModal.find('form');
|
|
newProjectModalBody = newProjectModal.find('.modal-body');
|
|
newProjectBtn = $('#new-project-btn');
|
|
|
|
editProjectModal = $('#edit-project-modal');
|
|
editProjectModalTitle = editProjectModal.find('#edit-project-modal-label');
|
|
editProjectModalBody = editProjectModal.find('.modal-body');
|
|
editProjectBtn = editProjectModal.find(".btn[data-action='submit']");
|
|
|
|
manageUsersModal = $('#manage-users-modal');
|
|
manageUsersModalBody = manageUsersModal.find('.modal-body');
|
|
manageUsersModalFooter = manageUsersModal.find('.modal-footer');
|
|
|
|
initNewProjectModal();
|
|
initEditProjectModal();
|
|
initManageUsersModal();
|
|
Comments.initCommentOptions('ul.content-comments', true);
|
|
Comments.initEditComments('.panel-project .tab-content');
|
|
Comments.initDeleteComments('.panel-project .tab-content');
|
|
|
|
// initialize project tab remote loading
|
|
$('.panel-project .panel-footer [role=tab]')
|
|
|
|
.on('ajax:before', function(e) {
|
|
var $this = $(this);
|
|
var parentNode = $this.parents('li');
|
|
var targetId = $this.attr('aria-controls');
|
|
|
|
if (parentNode.hasClass('active')) {
|
|
// TODO move to fn
|
|
parentNode.removeClass('active');
|
|
$('#' + targetId).removeClass('active');
|
|
return false;
|
|
}
|
|
})
|
|
|
|
.on('ajax:success', function(e, data, status, xhr) {
|
|
var $this = $(this);
|
|
var targetId = $this.attr('aria-controls');
|
|
var target = $('#' + targetId);
|
|
var parentNode = $this.parents('ul').parent();
|
|
|
|
target.html(data.html);
|
|
initUsersEditLink(parentNode);
|
|
Comments.form(parentNode);
|
|
Comments.moreComments(parentNode);
|
|
|
|
// TODO move to fn
|
|
parentNode.find('.active').removeClass('active');
|
|
$this.parents('li').addClass('active');
|
|
target.addClass('active');
|
|
|
|
Comments.scrollBottom(parentNode);
|
|
})
|
|
|
|
.on('ajax:error', function() {
|
|
// TODO
|
|
});
|
|
|
|
initTutorial();
|
|
}
|
|
|
|
/**
|
|
* Initialize the JS for new project modal to work.
|
|
*/
|
|
function initNewProjectModal() {
|
|
newProjectModalForm.submit(function() {
|
|
// Stupid Bootstrap btn-group bug hotfix
|
|
activateBtnGroup(
|
|
newProjectModal
|
|
.find("form .btn-group[data-toggle='buttons']")
|
|
);
|
|
});
|
|
newProjectModal.on("hidden.bs.modal", function () {
|
|
// When closing the new project modal, clear its input vals
|
|
// and potential errors
|
|
newProjectModalForm.clearFormErrors();
|
|
|
|
// Clear input fields
|
|
newProjectModalForm.clearFormFields();
|
|
var teamSelect = newProjectModalForm.find('select#project_team_id');
|
|
teamSelect.val(0);
|
|
teamSelect.selectpicker('refresh');
|
|
|
|
var teamHidden = newProjectModalForm.find('input#project_visibility_hidden');
|
|
var teamVisible = newProjectModalForm.find('input#project_visibility_visible');
|
|
teamHidden.prop("checked", true);
|
|
teamHidden.attr("checked", "checked");
|
|
teamHidden.parent().addClass("active");
|
|
teamVisible.prop("checked", false);
|
|
teamVisible.parent().removeClass("active");
|
|
})
|
|
.on("show.bs.modal", function() {
|
|
var teamSelect = newProjectModalForm.find('select#project_team_id');
|
|
teamSelect.selectpicker('refresh');
|
|
});
|
|
|
|
newProjectModalForm
|
|
.on("ajax:beforeSend", function(){
|
|
animateSpinner(newProjectModalBody);
|
|
})
|
|
.on("ajax:success", function(data, status, jqxhr) {
|
|
// Redirect to response page
|
|
$(location).attr("href", status.url);
|
|
})
|
|
.on("ajax:error", function(jqxhr, status, error) {
|
|
$(this).renderFormErrors("project", status.responseJSON);
|
|
})
|
|
.on("ajax:complete", function(){
|
|
animateSpinner(newProjectModalBody, false);
|
|
});
|
|
|
|
newProjectBtn.click(function(e) {
|
|
// Show the modal
|
|
newProjectModal.modal("show");
|
|
return false;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Initialize the JS for edit project modal to work.
|
|
*/
|
|
function initEditProjectModal() {
|
|
// Edit button click handler
|
|
editProjectBtn.click(function() {
|
|
// Stupid Bootstrap btn-group bug hotfix
|
|
activateBtnGroup(
|
|
editProjectModalBody
|
|
.find("form .btn-group[data-toggle='buttons']")
|
|
);
|
|
|
|
// Submit the modal body's form
|
|
editProjectModalBody.find("form").submit();
|
|
});
|
|
|
|
// On hide modal handler
|
|
editProjectModal.on("hidden.bs.modal", function() {
|
|
editProjectModalBody.html("");
|
|
});
|
|
|
|
$(".panel-project a[data-action='edit']")
|
|
.on("ajax:success", function(ev, data, status) {
|
|
// Update modal title
|
|
editProjectModalTitle.html(data.title);
|
|
|
|
// Set modal body
|
|
editProjectModalBody.html(data.html);
|
|
|
|
// Add modal body's submit handler
|
|
editProjectModal.find("form")
|
|
.on("ajax:beforeSend", function(){
|
|
animateSpinner(this);
|
|
})
|
|
.on("ajax:success", function(ev2, data2, status2) {
|
|
// Project saved, replace changed project's title
|
|
var responseHtml = $(data2.html);
|
|
var id = responseHtml.attr("data-id");
|
|
var newTitle = responseHtml.find(".panel-title");
|
|
var existingTitle =
|
|
$(".panel-project[data-id='" + id + "'] .panel-title");
|
|
|
|
existingTitle.after(newTitle);
|
|
existingTitle.remove();
|
|
|
|
// Hide modal
|
|
editProjectModal.modal("hide");
|
|
})
|
|
.on("ajax:error", function(ev2, data2, status2) {
|
|
$(this).renderFormErrors("project", data2.responseJSON);
|
|
})
|
|
.on("ajax:complete", function(){
|
|
animateSpinner(this, false);
|
|
});
|
|
|
|
// Show the modal
|
|
editProjectModal.modal("show");
|
|
})
|
|
.on("ajax:error", function(ev, data, status) {
|
|
// TODO
|
|
});
|
|
}
|
|
|
|
function initManageUsersModal() {
|
|
// Reload users tab HTML element when modal is closed
|
|
manageUsersModal.on("hide.bs.modal", function () {
|
|
var projectEl = $("#" + $(this).attr("data-project-id"));
|
|
|
|
// Load HTML to refresh users list
|
|
$.ajax({
|
|
url: projectEl.attr("data-project-users-tab-url"),
|
|
type: "GET",
|
|
dataType: "json",
|
|
success: function (data) {
|
|
projectEl.find("#users-" + projectEl.attr("id")).html(data.html);
|
|
CounterBadge.updateCounterBadge(data.counter,
|
|
data.project_id,
|
|
'users');
|
|
initUsersEditLink(projectEl);
|
|
},
|
|
error: function (data) {
|
|
// TODO
|
|
}
|
|
});
|
|
});
|
|
|
|
// Remove modal content when modal window is closed.
|
|
manageUsersModal.on("hidden.bs.modal", function () {
|
|
manageUsersModalBody.html("");
|
|
manageUsersModalFooter.html("");
|
|
});
|
|
}
|
|
|
|
// Initialize users editing modal remote loading.
|
|
function initUsersEditLink($el) {
|
|
|
|
$el.find(".manage-users-link")
|
|
|
|
.on("ajax:before", function () {
|
|
var projectId = $(this).closest(".panel-default").attr("id");
|
|
manageUsersModal.attr("data-project-id", projectId);
|
|
manageUsersModal.modal('show');
|
|
})
|
|
|
|
.on("ajax:success", function (e, data) {
|
|
$("#manage-users-modal-project").text(data.project.name);
|
|
initUsersModalBody(data);
|
|
});
|
|
}
|
|
|
|
// Initialize reloading manage user modal content after posting new
|
|
// user.
|
|
|
|
function initAddUserForm() {
|
|
|
|
manageUsersModalBody.find(".add-user-form")
|
|
|
|
.on("ajax:success", function (e, data) {
|
|
initUsersModalBody(data);
|
|
if (data.status === 'error') {
|
|
$(this).addClass("has-error");
|
|
var errorBlock = $(this).find("span.help-block");
|
|
if (errorBlock .length && errorBlock.length > 0) {
|
|
errorBlock.html(data.error);
|
|
} else {
|
|
$(this).append("<span class='help-block col-xs-8'>" + data.error + "</span>");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Initialize remove user from project links.
|
|
function initRemoveUserLinks() {
|
|
|
|
manageUsersModalBody.find(".remove-user-link")
|
|
|
|
.on("ajax:success", function (e, data) {
|
|
initUsersModalBody(data);
|
|
});
|
|
}
|
|
|
|
//
|
|
function initUserRoleForms() {
|
|
|
|
manageUsersModalBody.find(".update-user-form select")
|
|
|
|
.on("change", function () {
|
|
$(this).parents("form").submit();
|
|
});
|
|
|
|
manageUsersModalBody.find(".update-user-form")
|
|
|
|
.on("ajax:success", function (e, data) {
|
|
initUsersModalBody(data);
|
|
})
|
|
|
|
.on("ajax:error", function (e, xhr, status, error) {
|
|
// TODO
|
|
});
|
|
}
|
|
|
|
// Initialize ajax listeners and elements style on modal body. This
|
|
// function must be called when modal body is changed.
|
|
function initUsersModalBody(data) {
|
|
manageUsersModalBody.html(data.html_body);
|
|
manageUsersModalFooter.html(data.html_footer);
|
|
manageUsersModalBody.find(".selectpicker").selectpicker();
|
|
initAddUserForm();
|
|
initRemoveUserLinks();
|
|
initUserRoleForms();
|
|
}
|
|
|
|
/**
|
|
* Initializes tutorial
|
|
*/
|
|
function initTutorial() {
|
|
var tutorialData = Cookies.get('tutorial_data');
|
|
if (tutorialData) {
|
|
tutorialData = JSON.parse(tutorialData);
|
|
var stepNum = parseInt(Cookies.get('current_tutorial_step'), 10);
|
|
if (isNaN(stepNum)) {
|
|
// Cookies data initialization
|
|
stepNum = 1;
|
|
Cookies.set('current_tutorial_step', stepNum);
|
|
tutorialData[0].backPagesPaths = [];
|
|
Cookies.set('tutorial_data', tutorialData);
|
|
}
|
|
var demoProjectId = tutorialData[0].project;
|
|
var demoProject = $('#' + demoProjectId);
|
|
|
|
if (stepNum >= 1 && stepNum <= 3) {
|
|
var thirdStepPos = (demoProject.offset().top > window.innerHeight / 2) ?
|
|
'top' : 'bottom';
|
|
|
|
var nextPage = $('#' + demoProjectId + '-project-canvas-link')
|
|
.attr('href');
|
|
var steps = [{
|
|
element: $('#projects-toolbar')[0],
|
|
intro: I18n.t('tutorial.tutorial_welcome_title_html'),
|
|
position: 'bottom'
|
|
}, {
|
|
element: $('#new-project-btn')[0],
|
|
intro: I18n.t('tutorial.create_project_html'),
|
|
position: 'left'
|
|
}, {
|
|
element: demoProject[0],
|
|
intro: I18n.t('tutorial.project_options_html'),
|
|
position: thirdStepPos
|
|
}];
|
|
initPageTutorialSteps(1, 3, nextPage, tutorialBeforeCb,
|
|
tutorialAfterCb, steps);
|
|
} else if (stepNum === 22) {
|
|
var protocolLink = $('#protocol-link');
|
|
|
|
var nextPage = protocolLink.attr('href');
|
|
var steps = [{
|
|
element: protocolLink[0],
|
|
intro: I18n.t('tutorial.protocols_link_html'),
|
|
position: 'left'
|
|
}];
|
|
initPageTutorialSteps(22, 22, nextPage, function() {}, function() {},
|
|
steps);
|
|
} else if (stepNum >= 25 && stepNum <= 26) {
|
|
var firstStepPos = 'right';
|
|
if (demoProject.offset().left > window.innerWidth / 2 ||
|
|
window.innerWidth < demoProject.width() + 100) {
|
|
if (demoProject.offset().top > 500 && demoProject.offset().top >
|
|
window.innerHeight / 2) {
|
|
firstStepPos = 'top';
|
|
} else {
|
|
firstStepPos = 'bottom';
|
|
}
|
|
}
|
|
|
|
var nextPage = $('#new-report-btn').attr('href');
|
|
var steps = [{
|
|
element: demoProject[0],
|
|
intro: I18n.t('tutorial.archive_project_html'),
|
|
position: firstStepPos
|
|
}, {
|
|
element: $('.avatar')[0],
|
|
intro: I18n.t('tutorial.goodbye_message'),
|
|
position: 'left'
|
|
}];
|
|
initPageTutorialSteps(25, 26, nextPage, function() {}, function() {},
|
|
steps);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Callback to be executed before tutorial starts
|
|
*/
|
|
function tutorialBeforeCb() {
|
|
$.each($('.panel'), function(i, el){
|
|
$(el)
|
|
.find('.panel-title')
|
|
.css({ 'pointer-events': 'none' });
|
|
$(el)
|
|
.find('.tab-content')
|
|
.css({ 'pointer-events': 'none' });
|
|
$(el)
|
|
.find('.form-submit-link')
|
|
.css({
|
|
'pointer-events': 'none',
|
|
'color': '<%= Constants::COLOR_ALTO %>'});
|
|
$(el)
|
|
.find("[data-action='edit']")
|
|
.css({
|
|
'pointer-events': 'none',
|
|
'color': '<%= Constants::COLOR_ALTO %>'});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Callback to be executed after tutorial exits
|
|
*/
|
|
function tutorialAfterCb() {
|
|
$.each($('.panel'), function(i, el){
|
|
$(el)
|
|
.find('.tab-content')
|
|
.css({ 'pointer-events': 'auto' });
|
|
$(el)
|
|
.find('.panel-title')
|
|
.css({ 'pointer-events': 'auto' });
|
|
$(el)
|
|
.find('.form-submit-link')
|
|
.css({
|
|
'pointer-events': 'auto',
|
|
'color': '<%= Constants::COLOR_NERO %>'});
|
|
$(el)
|
|
.find("[data-action='edit']")
|
|
.css({
|
|
'pointer-events': 'auto',
|
|
'color': '<%= Constants::COLOR_NERO %>'});
|
|
});
|
|
}
|
|
|
|
init();
|
|
}());
|