From da4f295d006e49b0d10dc90e306f6cba1640dd68 Mon Sep 17 00:00:00 2001 From: Alexander Kryklia Date: Fri, 12 Jul 2013 18:20:54 +0300 Subject: [PATCH 1/2] Add TabsEditingDescriptor for VideoAlpha Updates comment Make Model descriptor class property. Fix tests --- cms/static/coffee/fixtures/tabs-edit.html | 33 +++++ cms/static/coffee/spec/tabs/edit.coffee | 95 ++++++++++++ cms/templates/widgets/tabs-aggregator.html | 21 +++ .../widgets/tabs/metadata-edit-tab.html | 24 +++ .../widgets/videoalpha/codemirror-edit.html | 33 +++++ .../widgets/videoalpha/subtitles.html | 0 .../test_files/test_tabseditingdescriptor.css | 4 + .../test_tabseditingdescriptor.scss | 4 + .../xmodule/xmodule/css/tabs/codemirror.scss | 19 +++ common/lib/xmodule/xmodule/css/tabs/tabs.scss | 137 ++++++++++++++++++ .../css/videoalpha/common_tabs_edit.scss | 0 common/lib/xmodule/xmodule/editing_module.py | 43 ++++++ .../js/src/tabs/tabs-aggregator.coffee | 125 ++++++++++++++++ .../xmodule/tests/test_editing_module.py | 64 ++++++++ .../xmodule/xmodule/tests/test_videoalpha.py | 34 ++++- .../lib/xmodule/xmodule/videoalpha_module.py | 22 ++- 16 files changed, 654 insertions(+), 4 deletions(-) create mode 100644 cms/static/coffee/fixtures/tabs-edit.html create mode 100644 cms/static/coffee/spec/tabs/edit.coffee create mode 100644 cms/templates/widgets/tabs-aggregator.html create mode 100644 cms/templates/widgets/tabs/metadata-edit-tab.html create mode 100644 cms/templates/widgets/videoalpha/codemirror-edit.html create mode 100644 cms/templates/widgets/videoalpha/subtitles.html create mode 100644 common/lib/xmodule/test_files/test_tabseditingdescriptor.css create mode 100644 common/lib/xmodule/test_files/test_tabseditingdescriptor.scss create mode 100644 common/lib/xmodule/xmodule/css/tabs/codemirror.scss create mode 100644 common/lib/xmodule/xmodule/css/tabs/tabs.scss create mode 100644 common/lib/xmodule/xmodule/css/videoalpha/common_tabs_edit.scss create mode 100644 common/lib/xmodule/xmodule/js/src/tabs/tabs-aggregator.coffee create mode 100644 common/lib/xmodule/xmodule/tests/test_editing_module.py diff --git a/cms/static/coffee/fixtures/tabs-edit.html b/cms/static/coffee/fixtures/tabs-edit.html new file mode 100644 index 000000000000..c83a1456226c --- /dev/null +++ b/cms/static/coffee/fixtures/tabs-edit.html @@ -0,0 +1,33 @@ +
+
+
+ +
+
+ +
+
+ Transcripts +
+
+ Subtitles +
+
+
+ +
+
+
+ +
+
+ diff --git a/cms/static/coffee/spec/tabs/edit.coffee b/cms/static/coffee/spec/tabs/edit.coffee new file mode 100644 index 000000000000..734e398c743d --- /dev/null +++ b/cms/static/coffee/spec/tabs/edit.coffee @@ -0,0 +1,95 @@ +describe "TabsEditingDescriptor", -> + beforeEach -> + @isInactiveClass = "is-inactive" + @isCurrent = "current" + loadFixtures 'tabs-edit.html' + @descriptor = new TabsEditingDescriptor($('.base_wrapper')) + @html_id = 'test_id' + @tab_0_switch = jasmine.createSpy('tab_0_switch'); + @tab_0_modelUpdate = jasmine.createSpy('tab_0_modelUpdate'); + @tab_1_switch = jasmine.createSpy('tab_1_switch'); + @tab_1_modelUpdate = jasmine.createSpy('tab_1_modelUpdate'); + TabsEditingDescriptor.Model.addModelUpdate(@html_id, 'Tab 0 Editor', @tab_0_modelUpdate) + TabsEditingDescriptor.Model.addOnSwitch(@html_id, 'Tab 0 Editor', @tab_0_switch) + TabsEditingDescriptor.Model.addModelUpdate(@html_id, 'Tab 1 Transcripts', @tab_1_modelUpdate) + TabsEditingDescriptor.Model.addOnSwitch(@html_id, 'Tab 1 Transcripts', @tab_1_switch) + + spyOn($.fn, 'hide').andCallThrough() + spyOn($.fn, 'show').andCallThrough() + spyOn(TabsEditingDescriptor.Model, 'initialize') + spyOn(TabsEditingDescriptor.Model, 'updateValue') + + afterEach -> + TabsEditingDescriptor.Model.modules= {} + + describe "constructor", -> + it "first tab should be visible", -> + expect(@descriptor.$tabs.first()).toHaveClass(@isCurrent) + expect(@descriptor.$content.first()).not.toHaveClass(@isInactiveClass) + + describe "onSwitchEditor", -> + it "switching tabs changes styles", -> + @descriptor.$tabs.eq(1).trigger("click") + expect(@descriptor.$tabs.eq(0)).not.toHaveClass(@isCurrent) + expect(@descriptor.$content.eq(0)).toHaveClass(@isInactiveClass) + expect(@descriptor.$tabs.eq(1)).toHaveClass(@isCurrent) + expect(@descriptor.$content.eq(1)).not.toHaveClass(@isInactiveClass) + expect(@tab_1_switch).toHaveBeenCalled() + + it "if click on current tab, nothing should happen", -> + spyOn($.fn, 'trigger').andCallThrough() + currentTab = @descriptor.$tabs.filter('.' + @isCurrent) + @descriptor.$tabs.eq(0).trigger("click") + expect(@descriptor.$tabs.filter('.' + @isCurrent)).toEqual(currentTab) + expect($.fn.trigger.calls.length).toEqual(1) + + it "onSwitch function call", -> + @descriptor.$tabs.eq(1).trigger("click") + expect(TabsEditingDescriptor.Model.updateValue).toHaveBeenCalled() + expect(@tab_1_switch).toHaveBeenCalled() + + describe "save", -> + it "function for current tab should be called", -> + @descriptor.$tabs.eq(1).trigger("click") + data = @descriptor.save().data + expect(@tab_1_modelUpdate).toHaveBeenCalled() + + it "detach click event", -> + spyOn($.fn, "off") + @descriptor.save() + expect($.fn.off).toHaveBeenCalledWith( + 'click', + '.editor-tabs .tab', + @descriptor.onSwitchEditor + ) + + describe "editor/settings header", -> + it "is hidden", -> + expect(@descriptor.element.find(".component-edit-header").css('display')).toEqual('none') + +describe "TabsEditingDescriptor special save cases", -> + beforeEach -> + @isInactiveClass = "is-inactive" + @isCurrent = "current" + loadFixtures 'tabs-edit.html' + @descriptor = new window.TabsEditingDescriptor($('.base_wrapper')) + @html_id = 'test_id' + + describe "save", -> + it "case: no init", -> + data = @descriptor.save().data + expect(data).toEqual(null) + + it "case: no function in model update", -> + TabsEditingDescriptor.Model.initialize(@html_id) + data = @descriptor.save().data + expect(data).toEqual(null) + + it "case: no function in model update, but value presented", -> + @tab_0_modelUpdate = jasmine.createSpy('tab_0_modelUpdate').andReturn(1) + TabsEditingDescriptor.Model.addModelUpdate(@html_id, 'Tab 0 Editor', @tab_0_modelUpdate) + @descriptor.$tabs.eq(1).trigger("click") + expect(@tab_0_modelUpdate).toHaveBeenCalled() + data = @descriptor.save().data + expect(data).toEqual(1) + diff --git a/cms/templates/widgets/tabs-aggregator.html b/cms/templates/widgets/tabs-aggregator.html new file mode 100644 index 000000000000..d5953005b530 --- /dev/null +++ b/cms/templates/widgets/tabs-aggregator.html @@ -0,0 +1,21 @@ +<%! from django.utils.translation import ugettext as _ %> +
+
+
+ + +
+
+ % for tab in tabs: +
+ <%include file="${tab['template']}" args="tabName=tab['name']"/> +
+ % endfor +
+
+
+ diff --git a/cms/templates/widgets/tabs/metadata-edit-tab.html b/cms/templates/widgets/tabs/metadata-edit-tab.html new file mode 100644 index 000000000000..4fc8314afd52 --- /dev/null +++ b/cms/templates/widgets/tabs/metadata-edit-tab.html @@ -0,0 +1,24 @@ +<%namespace name='static' file='../../static_content.html'/> +<% + import json +%> + +## js templates + + + + + + + + +