f1fb38ed83
* fix: multi lines and spaces issues * fix: eslint operator-linebreak issue * fix: eslint quotes issue * fix: remaining quotes issues * fix: eslint object curly newline issue * fix: eslint object curly spacing issue * fix: eslint brace-style issues * fix: react jsx indent and props issues * fix: eslint trailing spaces issues * fix: eslint linbreak style issue * fix: eslint space unary operator issue * fix: eslint line around directives issue * fix: void and typeof space unary ops issue
77 lines
3.3 KiB
JavaScript
77 lines
3.3 KiB
JavaScript
define(['jquery', 'underscore', 'js/views/baseview', 'gettext', 'edx-ui-toolkit/js/utils/html-utils'],
|
|
function($, _, BaseView, gettext, HtmlUtils) {
|
|
'use strict';
|
|
|
|
/**
|
|
* View for xblock validation messages as displayed in Studio.
|
|
*/
|
|
var XBlockValidationView = BaseView.extend({
|
|
|
|
// Takes XBlockValidationModel as a model
|
|
initialize: function(options) {
|
|
BaseView.prototype.initialize.call(this);
|
|
this.template = this.loadTemplate('xblock-validation-messages');
|
|
this.root = options.root;
|
|
},
|
|
|
|
render: function() {
|
|
var attributes = {
|
|
validation: this.model,
|
|
additionalClasses: this.getAdditionalClasses(),
|
|
getIcon: this.getIcon.bind(this),
|
|
getDisplayName: this.getDisplayName.bind(this)
|
|
};
|
|
this.$el.html(HtmlUtils.HTML(this.template(attributes)).toString());
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns the icon css class based on the message type.
|
|
* @param messageType
|
|
* @returns string representation of css class that will render the correct icon, or null if unknown type
|
|
*/
|
|
getIcon: function(messageType) {
|
|
if (messageType === this.model.ERROR) {
|
|
return 'fa-exclamation-circle';
|
|
} else if (messageType === this.model.WARNING || messageType === this.model.NOT_CONFIGURED) {
|
|
return 'fa-exclamation-triangle';
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Returns a display name for a message (useful for screen readers), based on the message type.
|
|
* @param messageType
|
|
* @returns string display name (translated)
|
|
*/
|
|
getDisplayName: function(messageType) {
|
|
if (messageType === this.model.WARNING || messageType === this.model.NOT_CONFIGURED) {
|
|
// Translators: This message will be added to the front of messages of type warning,
|
|
// e.g. "Warning: this component has not been configured yet".
|
|
return gettext('Warning');
|
|
} else if (messageType === this.model.ERROR) {
|
|
// Translators: This message will be added to the front of messages of type error,
|
|
// e.g. "Error: required field is missing".
|
|
return gettext('Error');
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Returns additional css classes that can be added to HTML containing the validation messages.
|
|
* Useful for rendering NOT_CONFIGURED in a special way.
|
|
*
|
|
* @returns string of additional css classes (or empty string)
|
|
*/
|
|
getAdditionalClasses: function() {
|
|
if (this.root && this.model.get('summary').type === this.model.NOT_CONFIGURED
|
|
&& this.model.get('messages').length === 0) {
|
|
return 'no-container-content';
|
|
}
|
|
return '';
|
|
}
|
|
});
|
|
|
|
return XBlockValidationView;
|
|
});
|