Unstyled prototype for new list editor design.

This commit is contained in:
Peter Fogg
2013-07-24 13:58:54 -04:00
parent f317244ac4
commit 08c5f955aa
14 changed files with 125 additions and 102 deletions

View File

@@ -22,3 +22,17 @@ def set_show_captions(step, setting):
world.wait_for(lambda _driver: world.css_visible('a.save-button'))
world.browser.select('Show Captions', setting)
world.css_click('a.save-button')
@step('I see the correct videoalpha settings and default values$')
def correct_videoalpha_settings(_step):
world.verify_all_setting_entries([['Display Name', 'Video Alpha', False],
['Download Track', '', False],
['Download Video', '', False],
['HTML5 Subtitles', '', False],
['Show Captions', 'True', False],
['Video Sources', '', False],
['Youtube ID', 'OEoXaMPEzfM', False],
['Youtube ID for .75x speed', '', False],
['Youtube ID for 1.25x speed', '', False],
['Youtube ID for 1.5x speed', '', False]])

View File

@@ -22,3 +22,30 @@ Feature: Video Component
Given I have created a Video component
And I have toggled captions
Then when I view the video it does show the captions
Scenario: Autoplay is disabled in Studio for Video Alpha
Given I have created a Video Alpha component
Then when I view the videoalpha it does not have autoplay enabled
Scenario: User can view Video Alpha metadata
Given I have created a Video Alpha component
And I edit and select Settings
Then I see the correct videoalpha settings and default values
Scenario: User can modify Video Alpha display name
Given I have created a Video Alpha component
And I edit and select Settings
Then I can modify the display name
And my display name change is persisted on save
@skip
Scenario: Video Alpha captions are hidden when "show captions" is false
Given I have created a Video Alpha component
And I have set "show captions" to False
Then when I view the video it does not show the captions
@skip
Scenario: Video Alpha captions are shown when "show captions" is true
Given I have created a Video Alpha component
And I have set "show captions" to True
Then when I view the video it does show the captions

View File

@@ -5,9 +5,9 @@ from lettuce import world, step
############### ACTIONS ####################
@step('when I view the video it does not have autoplay enabled')
def does_not_autoplay(_step):
assert world.css_find('.video')[0]['data-autoplay'] == 'False'
@step('when I view the (.*) it does not have autoplay enabled')
def does_not_autoplay(_step, video_type):
assert world.css_find('.%s' % video_type)[0]['data-autoplay'] == 'False'
assert world.css_has_class('.video_control', 'play')

View File

@@ -1,25 +0,0 @@
Feature: Video Alpha Component Editor
As a course author, I want to be able to create videoalpha components.
Scenario: User can view metadata
Given I have created a Video Alpha component
And I edit and select Settings
Then I see the correct videoalpha settings and default values
Scenario: User can modify display name
Given I have created a Video Alpha component
And I edit and select Settings
Then I can modify the display name
And my display name change is persisted on save
@skip
Scenario: Captions are hidden when "show captions" is false
Given I have created a Video component
And I have set "show captions" to False
Then when I view the video it does not show the captions
@skip
Scenario: Captions are shown when "show captions" is true
Given I have created a Video component
And I have set "show captions" to True
Then when I view the video it does show the captions

View File

@@ -1,18 +0,0 @@
# disable missing docstring
# pylint: disable=C0111
from lettuce import world, step
@step('I see the correct videoalpha settings and default values$')
def correct_videoalpha_settings(_step):
world.verify_all_setting_entries([['Default Speed', '', False],
['Display Name', 'Video Alpha', False],
['Download Track', '', False],
['Download Video', '', False],
['HTML5 Subtitles', '', False],
['Show Captions', 'True', False],
['Speed: .75x', '', False],
['Speed: 1.25x', '', False],
['Speed: 1.5x', '', False],
['Video Sources', '', False]])

View File

@@ -1,6 +0,0 @@
Feature: Video Alpha Component
As a course author, I want to be able to view my created videos in Studio.
Scenario: Autoplay is disabled in Studio
Given I have created a Video Alpha component
Then when I view the video alpha it does not have autoplay enabled

View File

@@ -1,10 +0,0 @@
# disable missing docstring
# pylint: disable=C0111
from lettuce import world, step
@step('when I view the video alpha it does not have autoplay enabled')
def does_not_autoplay(_step):
assert world.css_find('.videoalpha')[0]['data-autoplay'] == 'False'
assert world.css_has_class('.video_control', 'play')

View File

@@ -334,3 +334,13 @@ describe "Test Metadata Editor", ->
it "has an update model method", ->
assertUpdateModel(@listView, null, ['a new value'])
it "can add an entry", ->
expect(@listView.model.get('value').length).toEqual(2)
@listView.$el.find('.setting-add').click()
expect(@listView.$el.find('input.input').length).toEqual(3)
it "can remove an entry", ->
expect(@listView.model.get('value').length).toEqual(2)
@listView.$el.find('.setting-remove').first().click()
expect(@listView.model.get('value').length).toEqual(1)

View File

@@ -319,17 +319,46 @@ CMS.Views.Metadata.List = CMS.Views.Metadata.AbstractEditor.extend({
events : {
"click .setting-clear" : "clear",
"keypress .setting-input" : "showClearButton",
"change input" : "updateModel"
"change input" : "updateModel",
"click .setting-add" : "addEntry",
"click .setting-remove" : "removeEntry"
},
templateName: "metadata-list-entry",
getValueFromEditor: function () {
return _.map(this.$el.find('#' + this.uniqueId).val().split(/,/),
function (url) { return url.trim(); });
return _.map(
this.$el.find('li input'),
function (ele) { return ele.value.trim(); }
).filter(_.identity);
},
setValueInEditor: function (value) {
this.$el.find('.input').val(value.join(', '));
var list = this.$el.find('ol');
list.empty();
_.each(value, function(ele, index) {
var template = _.template(
'<li>' +
'<input class="input" value="<%= ele %>">' +
'<a href="#" class="setting-remove" data-index="<%= index %>">remove</a>' +
'</li>'
);
list.append($(template({'ele': ele, 'index': index})));
});
},
addEntry: function(event) {
event.preventDefault();
// We don't call updateModel here since it's bound to the
// change event
var list = this.model.get('value') || [];
this.setValueInEditor(list.concat(['']))
},
removeEntry: function(event) {
event.preventDefault();
var entry = $(event.currentTarget).siblings().val();
this.setValueInEditor(_.without(this.model.get('value'), entry));
this.updateModel();
}
});

View File

@@ -1,6 +1,9 @@
<div class="wrapper-comp-setting">
<label class="label setting-label" for="<%= uniqueId %>"><%= model.get('display_name')%></label>
<input class="input setting-input" type="text" id="<%= uniqueId %>" value='<%= model.get("value") %>'/>
<div id="<%= uniqueId %>" class="setting-list-wrapper">
<ol class="setting-input" type="text"></ol>
</div>
<a href="#" class="setting-add">add</a>
<button class="action setting-clear inactive" type="button" name="setting-clear" value="<%= gettext("Clear") %>" data-tooltip="<%= gettext("Clear") %>">
<i class="icon-undo"></i><span class="sr">"<%= gettext("Clear Value") %>"</span>
</button>