define(['underscore',
'jquery',
'backbone',
"views/SignInView",
"text!templates/editorSubmitMessage.html"],
function(_, $, Backbone, SignInView, EditorSubmitMessageTemplate){
/**
* @class EditorView
* @classdesc A basic shell of a view, primarily meant to be extended for views that allow editing capabilities.
* @classcategory Views
* @name EditorView
* @extends Backbone.View
* @constructs
*/
var EditorView = Backbone.View.extend(
/** @lends EditorView.prototype */{
/**
* References to templates for this view. HTML files are converted to Underscore.js templates
*/
editorSubmitMessageTemplate: _.template(EditorSubmitMessageTemplate),
/**
* The element this view is contained in. A jQuery selector or the element itself.
* @type {string|DOMElement}
*/
el: "#Content",
/**
* The text to use in the editor submit button
* @type {string}
*/
submitButtonText: "Save",
/**
* The text to use in the editor submit button
* @type {string}
*/
accessPolicyModalID: "editor-access-policy-modal",
/**
* The selector for the HTML element that will contain a button/link/control for
* opening the AccessPolicyView modal window. If this element doesn't exist on the page,
* then the AccessPolicyView will be inserted into the `accessPolicyViewContainer` directly, rather than a modal window.
* @type {string}
*/
accessPolicyControlContainer: ".access-policy-control-container",
/**
* The selector for the HTML element that will contain the AccessPolicyView.
* If this element doesn't exist on the page, then the AccessPolicyView will not be inserted into the page.
* If a `accessPolicyControlContainer` element is on the page, then this element will
* contain the modal window element.
* @type {string}
*/
accessPolicyViewContainer: ".access-policy-view-container",
/**
* The events this view will listen to and the associated function to call
* @type {Object}
*/
events: {
"click #save-editor" : "save",
"click .access-policy-control" : "showAccessPolicyModal",
"keypress input:not(.ignore-changes)" : "showControls",
"keypress textarea:not(.ignore-changes)" : "showControls",
"keypress [contenteditable]:not(.ignore-changes)" : "showControls",
"click .image-uploader" : "showControls",
"change .access-policy-view" : "showControls",
"click .access-policy-view .remove" : "showControls"
},
/**
* Renders this view
*/
render: function(){
//Style the body as an Editor
$("body").addClass("Editor rendering");
this.delegateEvents();
//If there is no active alternate repository, set one
if( !MetacatUI.appModel.getActiveAltRepo() && MetacatUI.appModel.get("alternateRepositories").length ){
MetacatUI.appModel.setActiveAltRepo();
}
},
/**
* Set listeners on the view's model.
* This function centralizes all the listeners so that when/if the view's
* model is replaced, the listeners can be reset.
*/
setListeners: function() {
//Stop listening first
this.stopListening(this.model, "errorSaving", this.saveError);
this.stopListening(this.model, "successSaving", this.saveSuccess);
this.stopListening(this.model, "invalid", this.showValidation);
//Set listeners
this.listenTo(this.model, "errorSaving", this.saveError);
this.listenTo(this.model, "successSaving", this.saveSuccess);
this.listenTo(this.model, "invalid", this.showValidation);
// //Set a beforeunload event only if there isn't one already
// if( !this.beforeunloadCallback ){
// var view = this;
// //When the Window is about to be closed, show a confirmation message
// this.beforeunloadCallback = function(e){
// if( !view.canClose() ){
// //Browsers don't support custom confirmation messages anymore,
// // so preventDefault() needs to be called or the return value has to be set
// e.preventDefault();
// e.returnValue = "";
// }
// return;
// }
// window.addEventListener("beforeunload", this.beforeunloadCallback);
// }
},
/**
* Show Sign In buttons
*/
showSignIn: function(){
var container = $(document.createElement("div")).addClass("container center");
this.$el.html(container);
var signInButtons = new SignInView().render().el;
$(container).append('<h1>Sign in to submit data</h1>', signInButtons);
},
/**
* Saves the model
*/
save: function(){
this.showSaving();
this.model.save();
},
/**
* Cancel all edits in the editor by simply re-rendering the view
*/
cancel: function(){
this.render();
},
/**
* Trigger a save error with a message that the save was cancelled
*/
handleSaveCancel: function(){
if(this.model.get("uploadStatus") == "e"){
this.saveError("Your submission was cancelled due to an error.");
}
},
/**
* Adds top-level control elements to this editor.
*/
renderEditorControls: function(){
//If the AccessPolicy editor is enabled, add a button for opening it
if( MetacatUI.appModel.get("allowAccessPolicyChanges")){
this.renderAccessPolicyControl();
}
},
/**
* Adds a Share button for editing the access policy
*/
renderAccessPolicyControl: function(){
//If the AccessPolicy editor is enabled, add a button for opening it
if( this.isAccessPolicyEditEnabled() ){
var isHiddenBehindControl = (this.$(this.accessPolicyControlContainer).length > 0);
//Render the AccessPolicy control, if the container element is on the page
if( isHiddenBehindControl ){
//If it isn't, then add it to the page.
//Create an anchor tag with an icon and the text "Share" and add it to the editor controls container
this.$(this.accessPolicyControlContainer).prepend( $(document.createElement("a"))
.attr("href", "#")
.addClass("access-policy-control btn")
.append(
$(document.createElement("i")).addClass("icon-group icon icon-on-left"),
"Share") );
}
//If the authorization has already been checked
if( this.model.get("isAuthorized_changePermission") === true ){
//Render the AccessPolicyView
this.renderAccessPolicy();
}
else{
//When the user's changePermission authority has been checked, edit their
// access to the AccessPolicyView
this.listenToOnce(this.model, "change:isAuthorized_changePermission", function(){
//If there is an AccessPolicy control, disable it
if( isHiddenBehindControl ){
if( this.model.get("isAuthorized_changePermission") === false ){
//Disable the button for the AccessPolicyView if the user is not authorized
this.$(".access-policy-control").attr("disabled", "disabled")
.attr("title", "You do not have access to change the " + MetacatUI.appModel.get("accessPolicyName"))
.addClass("disabled");
}
}
else{
//Render the AccessPolicyView
this.renderAccessPolicy();
}
});
//Check the user's authority to change permissions on this object
this.model.checkAuthority("changePermission");
}
}
},
/**
* Shows the AccessPolicyView for the object being edited.
*
* @param {Event} e - The click event
* @param {Backbone.Model | null} model - The model to show the view for. If
* null, defaults to the model set for the view.
*/
showAccessPolicyModal: function(e, model){
try{
// If the AccessPolicy editor is disabled in this app, or the specific
// .access-policy-control has theh class diasbled, then exit now
if (!MetacatUI.appModel.get("allowAccessPolicyChanges") ||
this.$(".access-policy-control").attr("disabled") == "disabled" ||
(e.currentTarget && $(e.currentTarget).hasClass("disabled"))) {
return;
}
this.renderAccessPolicy(model);
this.on("accessPolicyViewRendered", function(){
//Add modal classes to the access policy view
this.$(".access-policy-view").addClass("access-policy-view-modal modal")
.css("height", window.outerHeight * .7)
.modal()
.modal("show");
});
}
catch(e){
console.error("Error trying to show the AccessPolicyView: ", e);
}
},
/**
* Renders the AccessPolicyView
* @param {Backbone.Model} model - Optional. The Model to render the
* AccessPolicy of. If not passed, method uses the Editor's model
*/
renderAccessPolicy: function(model){
// Use specified model or default to the editor's model
model = model || this.model;
try{
//If the AccessPolicy editor is disabled in this app, then exit now
if( !MetacatUI.appModel.get("allowAccessPolicyChanges")){
return;
}
var thisView = this;
require(['views/AccessPolicyView'], function(AccessPolicyView){
// Create a new AccessPolicyView using the AccessPolicy collection
var accessPolicyView = new AccessPolicyView({
collection: model.get("accessPolicy")
});
// Turn on accessPolicy broadcasting for metadata models
if (model.get("type") === "Metadata") {
accessPolicyView.broadcast = true;
}
//Store a reference to the AccessPolicyView on this view
thisView.accessPolicyView = accessPolicyView;
//Add the view to the page
thisView.$(thisView.accessPolicyViewContainer).html(accessPolicyView.el);
//Render the AccessPolicyView
accessPolicyView.render();
thisView.trigger("accessPolicyViewRendered");
thisView.listenTo(accessPolicyView.collection, "add remove", thisView.showControls);
});
}
catch(e){
console.error("Error trying to render the AccessPolicyView: ", e);
}
},
/**
* Checks if the Access Policy editor is enabled in this instance of MetacatUI for
* the type of object being edited.
* @returns {boolean}
* @since 2.15.0
*/
isAccessPolicyEditEnabled: function(){
if( !MetacatUI.appModel.get("allowAccessPolicyChanges") ){
return false;
}
},
/**
* Show the editor footer controls (Save bar)
*/
showControls: function(){
var view = this;
this.$(".editor-controls").removeClass("hidden").slideDown(300, function(){
if(typeof view.handleScroll === "function"){
view.handleScroll()
}
});
},
/**
* Hide the editor footer controls (Save bar)
*/
hideControls: function(){
var view = this;
this.hideSaving();
this.$(".editor-controls").slideUp(300, function(){
if(typeof view.handleScroll === "function"){
view.handleScroll()
}
});
},
/**
* Change the styling of this view to show that the object is in the process of saving
*/
showSaving: function(){
//Change the style of the save button
this.$("#save-editor")
.html('<i class="icon icon-spinner icon-spin"></i> Submitting ...')
.addClass("btn-disabled");
//Remove all the validation messaging
this.removeValidation();
//Get all the inputs in the Editor
var allInputs = this.$("input, textarea, select, button");
//Mark the disabled inputs so we can re-disable them later
allInputs.filter(":disabled")
.not(".label-container .label-input-text")
.addClass("disabled-saving");
//Remove the latest success or error alert
this.$el.children(".alert-container").remove();
//Disable all the inputs
allInputs.prop("disabled", true);
},
/**
* Remove the styles set in showSaving()
*/
hideSaving: function(){
this.$("input, textarea, select, button")
.not(".label-container .label-input-text")
.prop("disabled", false);
this.$(".disabled-saving, input.disabled")
.not(".label-container .label-input-text")
.prop("disabled", true)
.removeClass("disabled-saving");
//When the package is saved, revert the Save button back to normal
this.$("#save-editor").html(this.submitButtonText).removeClass("btn-disabled");
},
/**
* Enable the Save button. Resets any changes made in {@link EditorView#disableControls}
* @since 2.17.1
*/
enableControls: function(){
//When the package is saved, revert the Save button back to normal
this.$("#save-editor").html(this.submitButtonText)
.removeClass("btn-disabled")
.parent()
.tooltip("destroy");
},
/**
* Disable the Save button and display a message to explain why
* @param {string} [message] - A short text message to display in the Save button
* @since 2.17.1
*/
disableControls: function(message){
//When the package is saved, revert the Save button back to normal
this.$("#save-editor").html(message || "Waiting for files to finish uploading...")
.addClass("btn-disabled")
.parent() //Add a tooltip to the parent element since tooltips won't work on a disabled button
.tooltip({
placement: "top",
trigger: "hover focus click",
html: false,
title: "Saving is disabled while files are uploading. Please wait...",
container: "body",
delay: 600
});
},
/**
* Style the view to show that it is loading
* @param {string|DOMElement} container - The element to put the loading styling in. Either a jQuery selector or the element itself.
* @param {string|DOMElement} message - The message to display next to the loading icon. Either a jQuery selector or the element itself.
*/
showLoading: function(container, message){
if(typeof container == "undefined" || !container)
var container = this.$el;
$(container).html(MetacatUI.appView.loadingTemplate({ msg: message }));
},
/**
* Remove the styles set in showLoading()
* @param {string|DOMElement} container - The element the loading message is conttained in. Either a jQuery selector or the element itself.
*/
hideLoading: function(container){
if(typeof container == "undefined" || !container)
var container = this.$el;
$(container).find(".loading").remove();
},
/**
* Called when there is no object found with this ID
*/
showNotFound: function(){
//If we haven't checked the logged-in status of the user yet, wait a bit until we show a 404 msg, in case this content is their private content
if(!MetacatUI.appUserModel.get("checked")){
this.listenToOnce(MetacatUI.appUserModel, "change:checked", this.showNotFound);
return;
}
//If the user is not logged in
else if(!MetacatUI.appUserModel.get("loggedIn")){
this.showSignIn();
return;
}
if(!this.model.get("notFound")) return;
var msg = "<h4>Nothing was found for one of the following reasons:</h4>" +
"<ul class='indent'>" +
"<li>The ID <span id='editor-view-not-found-pid'></span> does not exist.</li>" +
'<li>This may be private content. (Are you <a href="<%= MetacatUI.root %>/signin">signed in?</a>)</li>' +
"<li>The content was removed because it was invalid.</li>" +
"</ul>";
//Remove the loading messaging
this.hideLoading();
//Show the not found message
MetacatUI.appView.showAlert(msg, "alert-error", this.$("#editor-body"), null, {remove: true});
this.$("#editor-view-not-found-pid").text(this.pid);
},
/**
* Check the validity of this view's model
*/
checkValidity: function(){
if(this.model.isValid())
this.model.trigger("valid");
},
/**
* Show validation errors, if there are any
*/
showValidation: function(){
this.saveError("Unable to save. Either required information is missing or isn't filled out correctly.");
},
/**
* Removes all the validation error styling and messaging from this view
*/
removeValidation: function(){
this.$(".notification.error").removeClass("error").empty();
this.$(".validation-error-icon").hide();
},
/**
* When the object is saved successfully, tell the user
* @param {object} savedObject - the object that was successfully saved
*/
saveSuccess: function(savedObject){
var message = this.editorSubmitMessageTemplate({
messageText: "Your changes have been submitted.",
viewURL: MetacatUI.appModel.get("baseUrl"),
buttonText: "Return home"
});
MetacatUI.appView.showAlert(message, "alert-success", this.$el, null, {remove: true});
this.hideSaving();
},
/**
* When the object fails to save, tell the user
* @param {string} errorMsg - The error message resulting from a failed attempt to save
*/
saveError: function(errorMsg){
var messageContainer = $(document.createElement("div")).append(document.createElement("p")),
messageParagraph = messageContainer.find("p"),
messageClasses = "alert-error";
messageParagraph.append(errorMsg);
//If the model has an error message set on it, show it in a collapseable technical details section
if( this.model.get("errorMessage") ){
var errorId = "error" + Math.round(Math.random()*100);
messageParagraph.after($(document.createElement("p")).append($(document.createElement("a"))
.text("See technical details")
.attr("data-toggle", "collapse")
.attr("data-target", "#" + errorId)
.addClass("pointer")),
$(document.createElement("div"))
.addClass("collapse")
.attr("id", errorId)
.append($(document.createElement("pre")).text(this.model.get("errorMessage"))));
}
MetacatUI.appView.showAlert(messageContainer, messageClasses, this.$el, null, {
emailBody: errorMsg,
remove: true
});
this.hideSaving();
},
/**
* Shows the required icons for the sections and fields that must be completed in this editor.
* @param {object} requiredFields - A literal object that specified which fields should be required.
* The keys on the object map to model attributes, and the value is true if required, false if optional.
*/
renderRequiredIcons: function(requiredFields){
//If no required fields are given, exit now
if( typeof requiredFields == "undefined" ){
return;
}
_.each( Object.keys(requiredFields), function(field){
if(requiredFields[field]){
var reqEl = this.$(".required-icon[data-category='" + field + "']");
//Show the required icon for this category/field
reqEl.show();
//Show the required icon for the section
var sectionName = reqEl.parents(".section[data-section]").attr("data-section");
this.$(".required-icon[data-section='" + sectionName + "']").show();
}
}, this);
//When new inputs have been added to this Editor, re-render these required icons.
// This is helpful when new questions are added to the editor after the intial rendering.
this.off("editorInputsAdded");
this.on("editorInputsAdded", function(){
this.renderRequiredIcons(requiredFields);
}, this);
},
/**
* Gets a list of required fields for this editor, or an empty object if there are none.
* @returns {object}
* @since 2.19.0
*/
getRequiredFields: function(){
return {}
},
/**
* Checks if there are unsaved changes in this Editor that should prevent closing of this view.
* This function is also executed by the AppView, which controls the top-level navigation.
* @returns {boolean} Returns true if this view should be closed. False if it should remain opened and active.
*/
canClose: function(){
//If the user isn't logged in, we can leave this view without confirmation
if( !MetacatUI.appUserModel.get("loggedIn") )
return true;
//If there are no unsaved changes, we can leave this view without confirmation
if( !this.hasUnsavedChanges() ){
return true;
}
return false;
},
/**
* This function is called whenever the user is about to leave this view.
* @returns {string} The message that asks the user if they are sure they want to close this view
*/
getConfirmCloseMessage: function(){
//Return a confirmation message
return "Leave this page? All of your unsaved changes will be lost.";
},
/**
* Returns true if there are unsaved changes in this Editor
* This function should be extended by each subclass of EditorView to check for unsaved changes for that model type
* @returns {boolean}
*/
hasUnsavedChanges: function(){
return true;
},
/**
* Creates an HTML string to display this error message on the page. Errors can be
* strings, arrays of strings, arrays of literal objects with string values, or a literal object with strings as the values.
* @param {string|string[]|object} error A single error message in string format or a collection of error strings as an array or object
* @returns {string} The error message HTML
* @since 2.18.0
*/
getErrorListItem: function(error){
try{
let errorMessage = "";
//Strings get added to a list item HTML element
if( typeof error == "string" && error.trim().length ){
return `<li>${error}</li>`;
}
//If the error is an array, iterate over each error in the array
else if( Array.isArray(error) ){
_.each(error, function(subError){
errorMessage += this.getErrorListItem(subError);
}, this);
return errorMessage;
}
//If the error is a literal object, iterate over each key in the object
else if( typeof error == "object" ){
_.each(Object.keys(error), function(errorKey){
errorMessage += this.getErrorListItem(error[errorKey]);
}, this);
return errorMessage;
}
//Default to returning an empty string
else{
return "";
}
}
catch(e){
console.error("Failed to create the error message to show in the editor: ", e);
return "";
}
},
/**
* Perform clean-up functions when this view is about to be removed from the page or navigated away from.
*/
onClose: function(){
//Remove the listener on the Window
if( this.beforeunloadCallback ){
window.removeEventListener("beforeunload", this.beforeunloadCallback);
delete this.beforeunloadCallback;
}
//Reset the active alternate repository
MetacatUI.appModel.set("activeAlternateRepositoryId", null);
//Remove the class from the body element
$("body").removeClass("Editor rendering");
//Remove listeners
this.stopListening();
this.undelegateEvents();
}
});
return EditorView;
});