Skip to content

E
edx-platform
Commit caedc92d by Andy Armstrong Committed by GitHub
Options

Merge pull request #12796 from eduNEXT/fmo/coffee_to_js_module_edit 

Converting cms module_edit.coffee to js
parents 2c41d79c 82db66d9
Showing with 113 additions and 238 deletions
cms/static/cms/js/spec/main.js
......@@ -228,7 +228,6 @@
'coffee/spec/models/upload_spec',
'coffee/spec/views/course_info_spec',
'coffee/spec/views/metadata_edit_spec',
'coffee/spec/views/module_edit_spec',
'coffee/spec/views/textbook_spec',
'coffee/spec/views/upload_spec',
'js/spec/video/transcripts/utils_spec',
......@@ -250,6 +249,7 @@
'js/spec/views/assets_spec',
'js/spec/views/baseview_spec',
'js/spec/views/container_spec',
'js/spec/views/module_edit_spec',
'js/spec/views/paged_container_spec',
'js/spec/views/group_configuration_spec',
'js/spec/views/unit_outline_spec',
......
cms/static/coffee/spec/views/module_edit_spec.coffee deleted 100644 → 0
define ["jquery", "common/js/components/utils/view_utils", "js/spec_helpers/edit_helpers",
"coffee/src/views/module_edit", "js/models/module_info", "xmodule"],
($, ViewUtils, edit_helpers, ModuleEdit, ModuleModel) ->
describe "ModuleEdit", ->
beforeEach ->
@stubModule = new ModuleModel
id: "stub-id"
setFixtures """
<ul>
<li class="component" id="stub-id" data-locator="stub-id">
<div class="component-editor">
<div class="module-editor">
${editor}
</div>
<a href="#" class="save-button">Save</a>
<a href="#" class="cancel-button">Cancel</a>
</div>
<div class="component-actions">
<a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
<a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a>
</div>
<span class="drag-handle action"></span>
<section class="xblock xblock-student_view xmodule_display xmodule_stub" data-type="StubModule">
<div id="stub-module-content"/>
</section>
</li>
</ul>
"""
edit_helpers.installEditTemplates(true);
spyOn($, 'ajax').and.returnValue(@moduleData)
@moduleEdit = new ModuleEdit(
el: $(".component")
model: @stubModule
onDelete: jasmine.createSpy()
)
describe "class definition", ->
it "sets the correct tagName", ->
expect(@moduleEdit.tagName).toEqual("li")
it "sets the correct className", ->
expect(@moduleEdit.className).toEqual("component")
describe "methods", ->
describe "initialize", ->
beforeEach ->
spyOn(ModuleEdit.prototype, 'render')
@moduleEdit = new ModuleEdit(
el: $(".component")
model: @stubModule
onDelete: jasmine.createSpy()
)
it "renders the module editor", ->
expect(ModuleEdit.prototype.render).toHaveBeenCalled()
describe "render", ->
beforeEach ->
spyOn(@moduleEdit, 'loadDisplay')
spyOn(@moduleEdit, 'delegateEvents')
spyOn($.fn, 'append')
spyOn(ViewUtils, 'loadJavaScript').and.returnValue($.Deferred().resolve().promise());
window.MockXBlock = (runtime, element) ->
return { }
window.loadedXBlockResources = undefined
@moduleEdit.render()
$.ajax.calls.mostRecent().args[0].success(
html: '<div>Response html</div>'
resources: [
['hash1', {kind: 'text', mimetype: 'text/css', data: 'inline-css'}],
['hash2', {kind: 'url', mimetype: 'text/css', data: 'css-url'}],
['hash3', {kind: 'text', mimetype: 'application/javascript', data: 'inline-js'}],
['hash4', {kind: 'url', mimetype: 'application/javascript', data: 'js-url'}],
['hash5', {placement: 'head', mimetype: 'text/html', data: 'head-html'}],
['hash6', {placement: 'not-head', mimetype: 'text/html', data: 'not-head-html'}],
]
)
afterEach ->
window.MockXBlock = null
it "loads the module preview via ajax on the view element", ->
expect($.ajax).toHaveBeenCalledWith(
url: "/xblock/#{@moduleEdit.model.id}/student_view"
type: "GET"
cache: false
headers:
Accept: 'application/json'
success: jasmine.any(Function)
)
expect($.ajax).not.toHaveBeenCalledWith(
url: "/xblock/#{@moduleEdit.model.id}/studio_view"
type: "GET"
headers:
Accept: 'application/json'
success: jasmine.any(Function)
)
expect(@moduleEdit.loadDisplay).toHaveBeenCalled()
expect(@moduleEdit.delegateEvents).toHaveBeenCalled()
it "loads the editing view via ajax on demand", ->
edit_helpers.installEditTemplates(true);
expect($.ajax).not.toHaveBeenCalledWith(
url: "/xblock/#{@moduleEdit.model.id}/studio_view"
type: "GET"
cache : false
headers:
Accept: 'application/json'
success: jasmine.any(Function)
)
@moduleEdit.clickEditButton({'preventDefault': jasmine.createSpy('event.preventDefault')})
mockXBlockEditorHtml = readFixtures('mock/mock-xblock-editor.underscore')
$.ajax.calls.mostRecent().args[0].success(
html: mockXBlockEditorHtml
resources: [
['hash1', {kind: 'text', mimetype: 'text/css', data: 'inline-css'}],
['hash2', {kind: 'url', mimetype: 'text/css', data: 'css-url'}],
['hash3', {kind: 'text', mimetype: 'application/javascript', data: 'inline-js'}],
['hash4', {kind: 'url', mimetype: 'application/javascript', data: 'js-url'}],
['hash5', {placement: 'head', mimetype: 'text/html', data: 'head-html'}],
['hash6', {placement: 'not-head', mimetype: 'text/html', data: 'not-head-html'}],
]
)
expect($.ajax).toHaveBeenCalledWith(
url: "/xblock/#{@moduleEdit.model.id}/studio_view"
type: "GET"
cache: false
headers:
Accept: 'application/json'
success: jasmine.any(Function)
)
expect(@moduleEdit.delegateEvents).toHaveBeenCalled()
it "loads inline css from fragments", ->
expect($('head').append).toHaveBeenCalledWith("<style type='text/css'>inline-css</style>")
it "loads css urls from fragments", ->
expect($('head').append).toHaveBeenCalledWith("<link rel='stylesheet' href='css-url' type='text/css'>")
it "loads inline js from fragments", ->
expect($('head').append).toHaveBeenCalledWith("<script>inline-js</script>")
it "loads js urls from fragments", ->
expect(ViewUtils.loadJavaScript).toHaveBeenCalledWith("js-url")
it "loads head html", ->
expect($('head').append).toHaveBeenCalledWith("head-html")
it "doesn't load body html", ->
expect($.fn.append).not.toHaveBeenCalledWith('not-head-html')
it "doesn't reload resources", ->
count = $('head').append.calls.count()
$.ajax.calls.mostRecent().args[0].success(
html: '<div>Response html 2</div>'
resources: [
['hash1', {kind: 'text', mimetype: 'text/css', data: 'inline-css'}],
]
)
expect($('head').append.calls.count()).toBe(count)
describe "loadDisplay", ->
beforeEach ->
spyOn(XBlock, 'initializeBlock')
@moduleEdit.loadDisplay()
it "loads the .xmodule-display inside the module editor", ->
expect(XBlock.initializeBlock).toHaveBeenCalled()
expect(XBlock.initializeBlock.calls.mostRecent().args[0].get(0)).toBe($('.xblock-student_view').get(0))
cms/static/coffee/src/views/module_edit.coffee deleted 100644 → 0
define ["jquery", "underscore", "gettext", "xblock/runtime.v1",
"js/views/xblock", "js/views/modals/edit_xblock"],
($, _, gettext, XBlock, XBlockView, EditXBlockModal) ->
class ModuleEdit extends XBlockView
tagName: 'li'
className: 'component'
editorMode: 'editor-mode'
events:
"click .edit-button": 'clickEditButton'
"click .delete-button": 'onDelete'
initialize: ->
@onDelete = @options.onDelete
@render()
loadDisplay: ->
# Not all components render an inline student view, e.g. child containers which
# instead render a link to a separate container page.
xblockElement = @$el.find('.xblock-student_view')
if xblockElement.length > 0
XBlock.initializeBlock(xblockElement)
createItem: (parent, payload, callback=->) ->
payload.parent_locator = parent
$.postJSON(
@model.urlRoot + '/'
payload
(data) =>
@model.set(id: data.locator)
@$el.data('locator', data.locator)
@$el.data('courseKey', data.courseKey)
@render()
).success(callback)
loadView: (viewName, target, callback) ->
if @model.id
$.ajax(
url: "#{decodeURIComponent(@model.url())}/#{viewName}"
type: 'GET'
cache: false
headers:
Accept: 'application/json'
success: (fragment) =>
@renderXBlockFragment(fragment, target).done(callback)
)
render: -> @loadView('student_view', @$el, =>
@loadDisplay()
@delegateEvents()
)
clickEditButton: (event) ->
event.preventDefault()
modal = new EditXBlockModal();
modal.edit(this.$el, self.model, { refresh: _.bind(@render, this) })
cms/static/js/views/module_edit.js 0 → 100644
(function() {
'use strict';
var __hasProp = {}.hasOwnProperty,
__extends = function(child, parent) {
var key;
for (key in parent) {
if (__hasProp.call(parent, key)) {
child[key] = parent[key];
}
}
function Ctor() {
this.constructor = child;
}
Ctor.prototype = parent.prototype;
child.prototype = new Ctor();
child.__super__ = parent.prototype;
return child;
};
define(['jquery', 'underscore', 'gettext', 'xblock/runtime.v1', 'js/views/xblock', 'js/views/modals/edit_xblock'],
function($, _, gettext, XBlock, XBlockView, EditXBlockModal) {
var ModuleEdit = (function(_super) {
__extends(ModuleEdit, _super);
function ModuleEdit() {
return ModuleEdit.__super__.constructor.apply(this, arguments);
}
ModuleEdit.prototype.tagName = 'li';
ModuleEdit.prototype.className = 'component';
ModuleEdit.prototype.editorMode = 'editor-mode';
ModuleEdit.prototype.events = {
'click .edit-button': 'clickEditButton',
'click .delete-button': 'onDelete'
};
ModuleEdit.prototype.initialize = function() {
this.onDelete = this.options.onDelete;
return this.render();
};
ModuleEdit.prototype.loadDisplay = function() {
var xblockElement;
xblockElement = this.$el.find('.xblock-student_view');
if (xblockElement.length > 0) {
return XBlock.initializeBlock(xblockElement);
}
};
ModuleEdit.prototype.createItem = function(parent, payload, callback) {
var _this = this;
if (_.isNull(callback)) {
callback = function() {};
}
payload.parent_locator = parent;
return $.postJSON(this.model.urlRoot + '/', payload, function(data) {
_this.model.set({
id: data.locator
});
_this.$el.data('locator', data.locator);
_this.$el.data('courseKey', data.courseKey);
return _this.render();
}).success(callback);
};
ModuleEdit.prototype.loadView = function(viewName, target, callback) {
var _this = this;
if (this.model.id) {
return $.ajax({
url: '' + (decodeURIComponent(this.model.url())) + '/' + viewName,
type: 'GET',
cache: false,
headers: {
Accept: 'application/json'
},
success: function(fragment) {
return _this.renderXBlockFragment(fragment, target).done(callback);
}
});
}
};
ModuleEdit.prototype.render = function() {
var _this = this;
return this.loadView('student_view', this.$el, function() {
_this.loadDisplay();
return _this.delegateEvents();
});
};
ModuleEdit.prototype.clickEditButton = function(event) {
var modal;
event.preventDefault();
modal = new EditXBlockModal();
return modal.edit(this.$el, this.model, {
refresh: _.bind(this.render, this)
});
};
return ModuleEdit;
})(XBlockView);
return ModuleEdit;
});
}).call(this);
cms/static/js/views/tabs.js
......@@ -19,7 +19,7 @@
};
define(['underscore', 'jquery', 'jquery.ui', 'backbone', 'common/js/components/views/feedback_prompt',
'common/js/components/views/feedback_notification', 'coffee/src/views/module_edit',
'common/js/components/views/feedback_notification', 'js/views/module_edit',
'js/models/module_info', 'js/utils/module'],
function(_, $, ui, Backbone, PromptView, NotificationView, ModuleEditView, ModuleModel, ModuleUtils) {
var TabsEdit;
......
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