Skip to content

E
edx-platform
Commit 420696ba by Andy Armstrong
Options

Separate out the Backbone image field

parent 9c58489b
Showing with 248 additions and 306 deletions
lms/static/js/spec/student_account/account_settings_factory_spec.js
......@@ -59,11 +59,6 @@ define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers
beforeEach(function () {
setFixtures('<div class="wrapper-account-settings"></div>');
TemplateHelpers.installTemplate('templates/fields/field_readonly');
TemplateHelpers.installTemplate('templates/fields/field_dropdown');
TemplateHelpers.installTemplate('templates/fields/field_link');
TemplateHelpers.installTemplate('templates/fields/field_text');
TemplateHelpers.installTemplate('templates/student_account/account_settings');
});
it("shows loading error when UserAccountModel fails to load", function() {
......
lms/static/js/spec/student_account/account_settings_fields_spec.js
......@@ -15,11 +15,6 @@ define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers
timerCallback;
beforeEach(function () {
TemplateHelpers.installTemplate('templates/fields/field_readonly');
TemplateHelpers.installTemplate('templates/fields/field_dropdown');
TemplateHelpers.installTemplate('templates/fields/field_link');
TemplateHelpers.installTemplate('templates/fields/field_text');
timerCallback = jasmine.createSpy('timerCallback');
jasmine.Clock.useMock();
});
......
lms/static/js/spec/student_account/account_settings_view_spec.js
......@@ -61,11 +61,6 @@ define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers
beforeEach(function () {
setFixtures('<div class="wrapper-account-settings"></div>');
TemplateHelpers.installTemplate('templates/fields/field_readonly');
TemplateHelpers.installTemplate('templates/fields/field_dropdown');
TemplateHelpers.installTemplate('templates/fields/field_link');
TemplateHelpers.installTemplate('templates/fields/field_text');
TemplateHelpers.installTemplate('templates/student_account/account_settings');
});
it("shows loading error correctly", function() {
......
lms/static/js/spec/student_profile/learner_profile_factory_spec.js
define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers',
'common/js/spec_helpers/template_helpers',
'js/spec/student_account/helpers',
'js/spec/student_profile/helpers',
'js/views/fields',
......@@ -19,12 +20,6 @@ define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers
beforeEach(function () {
loadFixtures('js/fixtures/student_profile/student_profile.html');
TemplateHelpers.installTemplate('templates/fields/field_readonly');
TemplateHelpers.installTemplate('templates/fields/field_dropdown');
TemplateHelpers.installTemplate('templates/fields/field_textarea');
TemplateHelpers.installTemplate('templates/fields/field_image');
TemplateHelpers.installTemplate('templates/fields/message_banner');
TemplateHelpers.installTemplate('templates/student_profile/learner_profile');
});
var createProfilePage = function(ownProfile, options) {
......
lms/static/js/spec/student_profile/learner_profile_view_spec.js
......@@ -123,12 +123,6 @@ define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers
beforeEach(function () {
loadFixtures('js/fixtures/student_profile/student_profile.html');
TemplateHelpers.installTemplate('templates/fields/field_readonly');
TemplateHelpers.installTemplate('templates/fields/field_dropdown');
TemplateHelpers.installTemplate('templates/fields/field_textarea');
TemplateHelpers.installTemplate('templates/fields/field_image');
TemplateHelpers.installTemplate('templates/fields/message_banner');
TemplateHelpers.installTemplate('templates/student_profile/learner_profile');
});
it("shows loading error correctly", function() {
......
lms/static/js/spec/views/fields_spec.js
define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
'js/views/fields',
'js/spec/views/fields_helpers',
define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers',
'common/js/spec_helpers/template_helpers', 'js/views/fields', 'js/spec/views/fields_helpers',
'string_utils'],
function (Backbone, $, _, AjaxHelpers, TemplateHelpers, FieldViews, FieldViewsSpecHelpers) {
'use strict';
......@@ -19,16 +18,9 @@ define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers
FieldViews.DropdownFieldView,
FieldViews.LinkFieldView,
FieldViews.TextareaFieldView
];
beforeEach(function () {
TemplateHelpers.installTemplate('templates/fields/field_readonly');
TemplateHelpers.installTemplate('templates/fields/field_dropdown');
TemplateHelpers.installTemplate('templates/fields/field_link');
TemplateHelpers.installTemplate('templates/fields/field_text');
TemplateHelpers.installTemplate('templates/fields/field_textarea');
timerCallback = jasmine.createSpy('timerCallback');
jasmine.Clock.useMock();
});
......
lms/static/js/student_account/views/account_settings_view.js
;(function (define, undefined) {
'use strict';
define([
'gettext', 'jquery', 'underscore', 'backbone'
], function (gettext, $, _, Backbone) {
'gettext', 'jquery', 'underscore', 'backbone', 'text!templates/student_account/account_settings.underscore'
], function (gettext, $, _, Backbone, accountSettingsTemplate) {
var AccountSettingsView = Backbone.View.extend({
initialize: function () {
this.template = _.template($('#account_settings-tpl').text());
_.bindAll(this, 'render', 'renderFields', 'showLoadingError');
},
render: function () {
this.$el.html(this.template({
this.$el.html(_.template(accountSettingsTemplate, {
sections: this.options.sectionsData
}));
return this;
......
lms/static/js/student_profile/views/learner_profile_fields.js
;(function (define, undefined) {
'use strict';
define([
'gettext', 'jquery', 'underscore', 'backbone', 'js/views/fields', 'backbone-super'
], function (gettext, $, _, Backbone, FieldViews) {
'gettext', 'jquery', 'underscore', 'backbone', 'js/views/fields', 'js/views/image_field', 'backbone-super'
], function (gettext, $, _, Backbone, FieldViews, ImageFieldView) {
var LearnerProfileFieldViews = {};
......@@ -42,7 +42,7 @@
}
});
LearnerProfileFieldViews.ProfileImageFieldView = FieldViews.ImageFieldView.extend({
LearnerProfileFieldViews.ProfileImageFieldView = ImageFieldView.extend({
screenReaderTitle: gettext('Profile Image'),
......
lms/static/js/student_profile/views/learner_profile_view.js
;(function (define, undefined) {
'use strict';
define([
'gettext', 'jquery', 'underscore', 'backbone'
], function (gettext, $, _, Backbone) {
'gettext', 'jquery', 'underscore', 'backbone', 'text!templates/student_profile/learner_profile.underscore'],
function (gettext, $, _, Backbone, learnerProfileTemplate) {
var LearnerProfileView = Backbone.View.extend({
initialize: function () {
this.template = _.template($('#learner_profile-tpl').text());
_.bindAll(this, 'showFullProfile', 'render', 'renderFields', 'showLoadingError');
this.listenTo(this.options.preferencesModel, "change:" + 'account_privacy', this.render);
},
......@@ -22,7 +21,7 @@
},
render: function () {
this.$el.html(this.template({
this.$el.html(_.template(learnerProfileTemplate, {
username: this.options.accountSettingsModel.get('username'),
ownProfile: this.options.ownProfile,
showFullProfile: this.showFullProfile()
......
lms/static/js/views/fields.js
......@@ -7,15 +7,13 @@
'text!templates/fields/field_link.underscore',
'text!templates/fields/field_text.underscore',
'text!templates/fields/field_textarea.underscore',
'text!templates/fields/field_image.underscore',
'backbone-super', 'jquery.fileupload'
'backbone-super'
], function (gettext, $, _, Backbone,
field_readonly_template,
field_dropdown_template,
field_link_template,
field_text_template,
field_textarea_template,
field_image_template
field_textarea_template
) {
var messageRevertDelay = 6000;
......@@ -577,225 +575,6 @@
}
});
FieldViews.ImageFieldView = FieldViews.FieldView.extend({
fieldType: 'image',
fieldTemplate: field_image_template,
uploadButtonSelector: '.upload-button-input',
titleAdd: gettext("Upload an image"),
titleEdit: gettext("Change image"),
titleRemove: gettext("Remove"),
titleUploading: gettext("Uploading"),
titleRemoving: gettext("Removing"),
titleImageAlt: '',
screenReaderTitle: gettext("Image"),
iconUpload: '<i class="icon fa fa-camera" aria-hidden="true"></i>',
iconRemove: '<i class="icon fa fa-remove" aria-hidden="true"></i>',
iconProgress: '<i class="icon fa fa-spinner fa-pulse fa-spin" aria-hidden="true"></i>',
errorMessage: gettext("An error has occurred. Refresh the page, and then try again."),
events: {
'click .u-field-upload-button': 'clickedUploadButton',
'click .u-field-remove-button': 'clickedRemoveButton',
'click .upload-submit': 'clickedUploadButton',
'focus .upload-button-input': 'showHoverState',
'blur .upload-button-input': 'hideHoverState'
},
initialize: function (options) {
this._super(options);
_.bindAll(this, 'render', 'imageChangeSucceeded', 'imageChangeFailed', 'fileSelected',
'watchForPageUnload', 'onBeforeUnload');
},
render: function () {
this.$el.html(this.template({
id: this.options.valueAttribute,
inputName: (this.options.inputName || 'file'),
imageUrl: _.result(this, 'imageUrl'),
imageAltText: _.result(this, 'imageAltText'),
uploadButtonIcon: _.result(this, 'iconUpload'),
uploadButtonTitle: _.result(this, 'uploadButtonTitle'),
removeButtonIcon: _.result(this, 'iconRemove'),
removeButtonTitle: _.result(this, 'removeButtonTitle'),
screenReaderTitle: _.result(this, 'screenReaderTitle')
}));
this.delegateEvents();
this.updateButtonsVisibility();
this.watchForPageUnload();
return this;
},
showHoverState: function () {
this.$('.u-field-upload-button').addClass('button-visible');
},
hideHoverState: function () {
this.$('.u-field-upload-button').removeClass('button-visible');
},
showErrorMessage: function (message) {
return message;
},
imageUrl: function () {
return '';
},
uploadButtonTitle: function () {
if (this.isShowingPlaceholder()) {
return _.result(this, 'titleAdd');
} else {
return _.result(this, 'titleEdit');
}
},
removeButtonTitle: function () {
return this.titleRemove;
},
isEditingAllowed: function () {
return true;
},
isShowingPlaceholder: function () {
return false;
},
setUploadButtonVisibility: function (state) {
this.$('.u-field-upload-button').css('display', state);
},
setRemoveButtonVisibility: function (state) {
this.$('.u-field-remove-button').css('display', state);
},
updateButtonsVisibility: function () {
if (!this.isEditingAllowed() || !this.options.editable) {
this.setUploadButtonVisibility('none');
}
if (this.isShowingPlaceholder() || !this.options.editable) {
this.setRemoveButtonVisibility('none');
}
},
clickedUploadButton: function () {
$(this.uploadButtonSelector).fileupload({
url: this.options.imageUploadUrl,
type: 'POST',
add: this.fileSelected,
done: this.imageChangeSucceeded,
fail: this.imageChangeFailed
});
},
clickedRemoveButton: function () {
var view = this;
this.setCurrentStatus('removing');
this.setUploadButtonVisibility('none');
this.showRemovalInProgressMessage();
$.ajax({
type: 'POST',
url: this.options.imageRemoveUrl
}).done(function () {
view.imageChangeSucceeded();
}).fail(function (jqXHR) {
view.showImageChangeFailedMessage(jqXHR.status, jqXHR.responseText);
});
},
imageChangeSucceeded: function () {
this.render();
},
imageChangeFailed: function (e, data) {
},
showImageChangeFailedMessage: function (status, responseText) {
},
fileSelected: function (e, data) {
if (_.isUndefined(data.files[0].size) || this.validateImageSize(data.files[0].size)) {
this.setCurrentStatus('uploading');
this.setRemoveButtonVisibility('none');
this.showUploadInProgressMessage();
data.submit();
}
},
validateImageSize: function (imageBytes) {
var humanReadableSize;
if (imageBytes < this.options.imageMinBytes) {
humanReadableSize = this.bytesToHumanReadable(this.options.imageMinBytes);
this.showErrorMessage(
interpolate_text(
gettext("The file must be at least {size} in size."), {size: humanReadableSize}
)
);
return false;
} else if (imageBytes > this.options.imageMaxBytes) {
humanReadableSize = this.bytesToHumanReadable(this.options.imageMaxBytes);
this.showErrorMessage(
interpolate_text(
gettext("The file must be smaller than {size} in size."), {size: humanReadableSize}
)
);
return false;
}
return true;
},
showUploadInProgressMessage: function () {
this.$('.u-field-upload-button').css('opacity', 1);
this.$('.upload-button-icon').html(this.iconProgress);
this.$('.upload-button-title').html(this.titleUploading);
},
showRemovalInProgressMessage: function () {
this.$('.u-field-remove-button').css('opacity', 1);
this.$('.remove-button-icon').html(this.iconProgress);
this.$('.remove-button-title').html(this.titleRemoving);
},
setCurrentStatus: function (status) {
this.$('.image-wrapper').attr('data-status', status);
},
getCurrentStatus: function () {
return this.$('.image-wrapper').attr('data-status');
},
watchForPageUnload: function () {
$(window).on('beforeunload', this.onBeforeUnload);
},
onBeforeUnload: function () {
var status = this.getCurrentStatus();
if (status === 'uploading') {
return gettext("Upload is in progress. To avoid errors, stay on this page until the process is complete.");
} else if (status === 'removing') {
return gettext("Removal is in progress. To avoid errors, stay on this page until the process is complete.");
}
},
bytesToHumanReadable: function (size) {
var units = [gettext('bytes'), gettext('KB'), gettext('MB')];
var i = 0;
while(size >= 1024) {
size /= 1024;
++i;
}
return size.toFixed(1)*1 + ' ' + units[i];
}
});
return FieldViews;
});
}).call(this, define || RequireJS.define);
lms/static/js/views/image_field.js 0 → 100644
;(function (define) {
'use strict';
define([
'gettext', 'jquery', 'underscore', 'backbone', 'js/views/fields',
'text!templates/fields/field_image.underscore',
'backbone-super', 'jquery.fileupload'
], function (gettext, $, _, Backbone, FieldViews, field_image_template) {
var ImageFieldView = FieldViews.FieldView.extend({
fieldType: 'image',
fieldTemplate: field_image_template,
uploadButtonSelector: '.upload-button-input',
titleAdd: gettext("Upload an image"),
titleEdit: gettext("Change image"),
titleRemove: gettext("Remove"),
titleUploading: gettext("Uploading"),
titleRemoving: gettext("Removing"),
titleImageAlt: '',
screenReaderTitle: gettext("Image"),
iconUpload: '<i class="icon fa fa-camera" aria-hidden="true"></i>',
iconRemove: '<i class="icon fa fa-remove" aria-hidden="true"></i>',
iconProgress: '<i class="icon fa fa-spinner fa-pulse fa-spin" aria-hidden="true"></i>',
errorMessage: gettext("An error has occurred. Refresh the page, and then try again."),
events: {
'click .u-field-upload-button': 'clickedUploadButton',
'click .u-field-remove-button': 'clickedRemoveButton',
'click .upload-submit': 'clickedUploadButton',
'focus .upload-button-input': 'showHoverState',
'blur .upload-button-input': 'hideHoverState'
},
initialize: function (options) {
this._super(options);
_.bindAll(this, 'render', 'imageChangeSucceeded', 'imageChangeFailed', 'fileSelected',
'watchForPageUnload', 'onBeforeUnload');
},
render: function () {
this.$el.html(this.template({
id: this.options.valueAttribute,
inputName: (this.options.inputName || 'file'),
imageUrl: _.result(this, 'imageUrl'),
imageAltText: _.result(this, 'imageAltText'),
uploadButtonIcon: _.result(this, 'iconUpload'),
uploadButtonTitle: _.result(this, 'uploadButtonTitle'),
removeButtonIcon: _.result(this, 'iconRemove'),
removeButtonTitle: _.result(this, 'removeButtonTitle'),
screenReaderTitle: _.result(this, 'screenReaderTitle')
}));
this.delegateEvents();
this.updateButtonsVisibility();
this.watchForPageUnload();
return this;
},
showHoverState: function () {
this.$('.u-field-upload-button').addClass('button-visible');
},
hideHoverState: function () {
this.$('.u-field-upload-button').removeClass('button-visible');
},
showErrorMessage: function (message) {
return message;
},
imageUrl: function () {
return '';
},
uploadButtonTitle: function () {
if (this.isShowingPlaceholder()) {
return _.result(this, 'titleAdd');
} else {
return _.result(this, 'titleEdit');
}
},
removeButtonTitle: function () {
return this.titleRemove;
},
isEditingAllowed: function () {
return true;
},
isShowingPlaceholder: function () {
return false;
},
setUploadButtonVisibility: function (state) {
this.$('.u-field-upload-button').css('display', state);
},
setRemoveButtonVisibility: function (state) {
this.$('.u-field-remove-button').css('display', state);
},
updateButtonsVisibility: function () {
if (!this.isEditingAllowed() || !this.options.editable) {
this.setUploadButtonVisibility('none');
}
if (this.isShowingPlaceholder() || !this.options.editable) {
this.setRemoveButtonVisibility('none');
}
},
clickedUploadButton: function () {
$(this.uploadButtonSelector).fileupload({
url: this.options.imageUploadUrl,
type: 'POST',
add: this.fileSelected,
done: this.imageChangeSucceeded,
fail: this.imageChangeFailed
});
},
clickedRemoveButton: function () {
var view = this;
this.setCurrentStatus('removing');
this.setUploadButtonVisibility('none');
this.showRemovalInProgressMessage();
$.ajax({
type: 'POST',
url: this.options.imageRemoveUrl
}).done(function () {
view.imageChangeSucceeded();
}).fail(function (jqXHR) {
view.showImageChangeFailedMessage(jqXHR.status, jqXHR.responseText);
});
},
imageChangeSucceeded: function () {
this.render();
},
imageChangeFailed: function (e, data) {
},
showImageChangeFailedMessage: function (status, responseText) {
},
fileSelected: function (e, data) {
if (_.isUndefined(data.files[0].size) || this.validateImageSize(data.files[0].size)) {
this.setCurrentStatus('uploading');
this.setRemoveButtonVisibility('none');
this.showUploadInProgressMessage();
data.submit();
}
},
validateImageSize: function (imageBytes) {
var humanReadableSize;
if (imageBytes < this.options.imageMinBytes) {
humanReadableSize = this.bytesToHumanReadable(this.options.imageMinBytes);
this.showErrorMessage(
interpolate_text(
gettext("The file must be at least {size} in size."), {size: humanReadableSize}
)
);
return false;
} else if (imageBytes > this.options.imageMaxBytes) {
humanReadableSize = this.bytesToHumanReadable(this.options.imageMaxBytes);
this.showErrorMessage(
interpolate_text(
gettext("The file must be smaller than {size} in size."), {size: humanReadableSize}
)
);
return false;
}
return true;
},
showUploadInProgressMessage: function () {
this.$('.u-field-upload-button').css('opacity', 1);
this.$('.upload-button-icon').html(this.iconProgress);
this.$('.upload-button-title').html(this.titleUploading);
},
showRemovalInProgressMessage: function () {
this.$('.u-field-remove-button').css('opacity', 1);
this.$('.remove-button-icon').html(this.iconProgress);
this.$('.remove-button-title').html(this.titleRemoving);
},
setCurrentStatus: function (status) {
this.$('.image-wrapper').attr('data-status', status);
},
getCurrentStatus: function () {
return this.$('.image-wrapper').attr('data-status');
},
watchForPageUnload: function () {
$(window).on('beforeunload', this.onBeforeUnload);
},
onBeforeUnload: function () {
var status = this.getCurrentStatus();
if (status === 'uploading') {
return gettext("Upload is in progress. To avoid errors, stay on this page until the process is complete.");
} else if (status === 'removing') {
return gettext("Removal is in progress. To avoid errors, stay on this page until the process is complete.");
}
},
bytesToHumanReadable: function (size) {
var units = [gettext('bytes'), gettext('KB'), gettext('MB')];
var i = 0;
while(size >= 1024) {
size /= 1024;
++i;
}
return size.toFixed(1)*1 + ' ' + units[i];
}
});
return ImageFieldView;
});
}).call(this, define || RequireJS.define);
lms/static/js/views/message_banner.js
;(function (define, undefined) {
'use strict';
define([
'gettext', 'jquery', 'underscore', 'backbone'
], function (gettext, $, _, Backbone) {
'gettext', 'jquery', 'underscore', 'backbone', 'text!templates/fields/message_banner.underscore'
], function (gettext, $, _, Backbone, messageBannerTemplate) {
var MessageBannerView = Backbone.View.extend({
......@@ -11,14 +11,13 @@
options = {};
}
this.options = _.defaults(options, {urgency: 'high', type: ''});
this.template = _.template($('#message_banner-tpl').text());
},
render: function () {
if (_.isUndefined(this.message) || _.isNull(this.message)) {
this.$el.html('');
} else {
this.$el.html(this.template(_.extend(this.options, {
this.$el.html(_.template(messageBannerTemplate, _.extend(this.options, {
message: this.message
})));
}
......
lms/templates/dashboard.html
......@@ -25,9 +25,6 @@ import json
<script type="text/template" id="${template_name}-tpl">
<%static:include path="dashboard/${template_name}.underscore" />
</script>
<script type="text/template" id="message_banner-tpl">
<%static:include path="fields/message_banner.underscore" />
</script>
% endfor
% for template_name in ["dashboard_search_item", "dashboard_search_results", "search_loading", "search_error"]:
......
lms/templates/student_account/account_settings.html
......@@ -14,19 +14,6 @@ from microsite_configuration import microsite
<%block name="pagetitle">${_("Account Settings")}</%block>
<%block name="nav_skip">#u-field-input-username</%block>
<%block name="header_extras">
<script type="text/template" id="account_settings-tpl">
<%static:include path="student_account/account_settings.underscore" />
</script>
% for template_name in ["field_dropdown", "field_link", "field_readonly", "field_text"]:
<script type="text/template" id="${template_name}-tpl">
<%static:include path="fields/${template_name}.underscore" />
</script>
% endfor
</%block>
% if duplicate_provider:
<section>
<%include file='/dashboard/_dashboard_third_party_error.html' />
......
lms/templates/student_profile/learner_profile.html
......@@ -12,20 +12,6 @@ from openedx.core.lib.json_utils import EscapedEdxJSONEncoder
<%block name="bodyclass">view-profile</%block>
<%block name="header_extras">
% for template_name in ["field_dropdown", "field_image", "field_textarea", "field_readonly", "message_banner"]:
<script type="text/template" id="${template_name}-tpl">
<%static:include path="fields/${template_name}.underscore" />
</script>
% endfor
% for template_name in ["learner_profile"]:
<script type="text/template" id="${template_name}-tpl">
<%static:include path="student_profile/${template_name}.underscore" />
</script>
% endfor
</%block>
<div class="message-banner" aria-live="polite"></div>
<div class="wrapper-profile">
<div class="ui-loading-indicator">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment