Add TabsEditingDescriptor for VideoAlpha

Updates comment
Make Model descriptor class property.
Fix tests

cms/static/coffee/fixtures/tabs-edit.html

@@ -0,0 +1,33 @@
+<div class="base_wrapper">
+    <section class="editor-with-tabs">
+        <div class="wrapper-comp-editor" id="editor-tab-id" data-html_id='test_id'>
+        <div class="edit-header">
+            <ul class="editor-tabs">
+                <li  class="inner_tab_wrap"><a href="#tab-0" class="tab">Tab 0 Editor</a></li>
+                <li  class="inner_tab_wrap"><a href="#tab-1" class="tab">Tab 1 Transcripts</a></li>
+                <li  class="inner_tab_wrap" id="settings"><a href="#tab-2" class="tab">Tab 2 Settings</a></li>
+            </ul>
+           	</div>
+            <div class="tabs-wrapper">
+                <div class="component-tab" id="tab-0">
+                    <textarea name="" class="edit-box">XML Editor Text</textarea>
+                </div>
+                <div class="component-tab" id="tab-1">
+                   Transcripts
+                </div>
+                <div class="component-tab" id="tab-2">
+                    Subtitles
+                </div>
+            </div>
+            <div class="wrapper-comp-settings">
+    	  <ul>
+                <li id="editor-mode"><a>Editor</a></li>
+                <li id="settings-mode"><a>Settings</a></li>
+            </ul>
+            </div>
+        </div>
+    </section>
+
+    <div class="component-edit-header" style="display: block"/>
+</div>
+

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)
+

cms/templates/widgets/tabs-aggregator.html

@@ -0,0 +1,21 @@
+<%! from django.utils.translation import ugettext as _ %>
+<div class="wrapper-comp-editor" id="editor-tab-${html_id}" data-html_id="${html_id}">
+    <section class="editor-with-tabs">
+     <div class="edit-header">
+        <span class="component-name"></span>
+        <ul class="${'editor-tabs' if (len(tabs) != 1) else 'editor-single-tab-name' }">
+        % for tab in tabs:
+            <li class="inner_tab_wrap"><a href="#tab-${html_id}-${loop.index}" class="tab ${'current' if tab.get('current', False) else ''}">${_(tab['name'])}</a></li>
+        % endfor
+        </ul>
+      </div>
+      <div class="${'tabs-wrapper' if (len(tabs) != 1) else 'editor-single-tab' }">
+       % for tab in tabs:
+        <div class="component-tab ${'is-inactive' if not tab.get('current', False) else ''}" id="tab-${html_id}-${loop.index}" >
+            <%include file="${tab['template']}" args="tabName=tab['name']"/>
+        </div>
+        % endfor
+      </div>
+    </section>
+</div>
+

cms/templates/widgets/tabs/metadata-edit-tab.html

@@ -0,0 +1,24 @@
+<%namespace name='static' file='../../static_content.html'/>
+<%
+  import json
+%>
+
+## js templates
+<script id="metadata-editor-tpl" type="text/template">
+    <%static:include path="js/metadata-editor.underscore" />
+</script>
+
+<script id="metadata-number-entry" type="text/template">
+    <%static:include path="js/metadata-number-entry.underscore" />
+</script>
+
+<script id="metadata-string-entry" type="text/template">
+    <%static:include path="js/metadata-string-entry.underscore" />
+</script>
+
+<script id="metadata-option-entry" type="text/template">
+    <%static:include path="js/metadata-option-entry.underscore" />
+</script>
+
+<div class="wrapper-comp-settings metadata_edit" id="settings-tab" data-metadata='${json.dumps(editable_metadata_fields) | h}'/>
+

cms/templates/widgets/videoalpha/codemirror-edit.html

@@ -0,0 +1,33 @@
+<%! from django.utils.translation import ugettext as _ %>
+<%page args="tabName"/>
+<div>
+  <textarea id="xml-${html_id}" class="edit-box">${data | h}</textarea>
+</div>
+
+<script type='text/javascript'>
+  $(document).ready(function(){
+      ## Init CodeMirror editor
+      var el = $("#xml-${html_id}"),
+            xml_editor = CodeMirror.fromTextArea(el.get(0), {
+              mode: "application/xml",
+              lineNumbers: true,
+              lineWrapping: true
+            });
+
+      TabsEditingDescriptor.Model.addModelUpdate(
+        '${html_id}',
+        '${tabName}',
+        function()  { return xml_editor.getValue(); })
+
+      TabsEditingDescriptor.Model.addOnSwitch(
+        '${html_id}',
+        '${tabName}',
+        function(){
+            ## CodeMirror should get focus when tab is active
+            xml_editor.refresh();
+            xml_editor.focus();
+        }
+      )
+  });
+</script>
+