Skip to content

E
edx-platform
Commit 4bc81ac0 by Diana Huang Committed by GitHub
Options

Merge pull request #12907 from edx/diana/truncation-cleanup 

Fix issues with topic truncation.
parents 99709035 6e538e13
Showing with 68 additions and 45 deletions
common/static/common/js/discussion/views/discussion_topic_menu_view.js
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
initialize: function(options) { initialize: function(options) {
this.course_settings = options.course_settings; this.course_settings = options.course_settings;
this.currentTopicId = options.topicId; this.currentTopicId = options.topicId;
this.maxNameWidth = 100; this.maxNameWidth = 26;
_.bindAll(this, _.bindAll(this,
'toggleTopicDropdown', 'handleTopicEvent', 'hideTopicDropdown', 'ignoreClick' 'toggleTopicDropdown', 'handleTopicEvent', 'hideTopicDropdown', 'ignoreClick'
); );
...@@ -90,9 +90,6 @@ ...@@ -90,9 +90,6 @@
this.dropdownButton.addClass('dropped'); this.dropdownButton.addClass('dropped');
this.topicMenu.show(); this.topicMenu.show();
$(document.body).on('click.topicMenu', this.hideTopicDropdown); $(document.body).on('click.topicMenu', this.hideTopicDropdown);
// Set here because 1) the window might get resized and things could
// change and 2) can't set in initialize because the button is hidden
this.maxNameWidth = this.dropdownButton.width() - 40;
return this; return this;
}, },
...@@ -127,7 +124,7 @@ ...@@ -127,7 +124,7 @@
}, },
setSelectedTopicName: function(text) { setSelectedTopicName: function(text) {
return this.selectedTopic.html(this.fitName(text)); return this.selectedTopic.text(this.fitName(text));
}, },
/** /**
* Return full name for the `topicElement` if it is passed. * Return full name for the `topicElement` if it is passed.
...@@ -149,28 +146,11 @@ ...@@ -149,28 +146,11 @@
}, },
// @TODO move into utils.coffee // @TODO move into utils.coffee
getNameWidth: function(name) {
var $test = $('<div>'),
width;
$test.css({
'font-size': this.dropdownButton.css('font-size'),
'opacity': 0,
'position': 'absolute',
'left': -1000,
'top': -1000
}).html(name).appendTo(document.body);
width = $test.width();
$test.remove();
return width;
},
// @TODO move into utils.coffee
fitName: function(name) { fitName: function(name) {
var ellipsisText = gettext('…'), var ellipsisText = gettext('…'),
partialName, path, rawName; partialName, path, rawName, concatedLength;
if (this.getNameWidth(name) < this.maxNameWidth) { if (name.length < this.maxNameWidth) {
return name; return name;
} else { } else {
path = _.map(name.split('/'), function(item){ path = _.map(name.split('/'), function(item){
...@@ -178,15 +158,16 @@ ...@@ -178,15 +158,16 @@
}); });
while (path.length > 1) { while (path.length > 1) {
path.shift(); path.shift();
partialName = ellipsisText + ' / ' + path.join(' / '); partialName = ellipsisText + '/' + path.join('/');
if (this.getNameWidth(partialName) < this.maxNameWidth) { if (partialName.length < this.maxNameWidth) {
return partialName; return partialName;
} }
} }
rawName = path[0]; rawName = path[0];
name = ellipsisText + ' / ' + rawName; name = ellipsisText + ' / ' + rawName;
while (this.getNameWidth(name) > this.maxNameWidth) { if (name.length > this.maxNameWidth) {
rawName = rawName.slice(0, -1); concatedLength = ellipsisText.length + ' / '.length + ellipsisText.length;
rawName = rawName.slice(0, this.maxNameWidth - concatedLength);
name = ellipsisText + ' / ' + rawName + ' ' + ellipsisText; name = ellipsisText + ' / ' + rawName + ' ' + ellipsisText;
} }
} }
......
common/static/common/js/spec/discussion/view/discussion_topic_menu_view_spec.js
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
}, options); }, options);
this.view = new DiscussionTopicMenuView(options); this.view = new DiscussionTopicMenuView(options);
this.view.render().appendTo('#fixture-element'); this.view.render().appendTo('#fixture-element');
this.defaultTextWidth = this.view.getNameWidth(this.completeText); this.defaultTextWidth = this.completeText.length;
}; };
this.openMenu = function() { this.openMenu = function() {
...@@ -34,7 +34,13 @@ ...@@ -34,7 +34,13 @@
'subcategories': { 'subcategories': {
'Basic Question Types': { 'Basic Question Types': {
'subcategories': {}, 'subcategories': {},
'children': ['Selection From Options', 'Numerical Input'], 'children': [
'Selection From Options',
'Numerical Input',
'Very long category name',
'Very very very very long category name',
'Name with <em>HTML</em>'
],
'entries': { 'entries': {
'Selection From Options': { 'Selection From Options': {
'sort_key': null, 'sort_key': null,
...@@ -45,11 +51,40 @@ ...@@ -45,11 +51,40 @@
'sort_key': null, 'sort_key': null,
'is_cohorted': false, 'is_cohorted': false,
'id': 'c49f0dfb8fc94c9c8d9999cc95190c56' 'id': 'c49f0dfb8fc94c9c8d9999cc95190c56'
},
'Very long category name': {
'sort_key': null,
'is_cohorted': false,
'id': 'c49f0dfb8fc94c9c8d9999cc95190c59'
},
'Very very very very long category name': {
'sort_key': null,
'is_cohorted': false,
'id': 'c49f0dfb8fc94c9c8d9999cc95190e32'
},
'Name with <em>HTML</em>': {
'sort_key': null,
'is_cohorted': false,
'id': 'c49f0dfb8fc94c9c8d9999cc95190363'
}
}
},
'Example Inline Discussion': {
'subcategories': {},
'children': [
'What Are Your Goals for Creating a MOOC?',
],
'entries': {
'What Are Your Goals for Creating a MOOC?': {
'sort_key': null,
'is_cohorted': true,
'id': 'cba3e4cd91d0466b9ac50926e495b931'
} }
} }
} }
}, },
'children': ['Basic Question Types'], 'children': ['Basic Question Types', 'Example Inline Discussion'],
'entries': {} 'entries': {}
}, },
'is_cohorted': true 'is_cohorted': true
...@@ -68,31 +103,38 @@ ...@@ -68,31 +103,38 @@
expect(this.completeText).toEqual(dropdownText); expect(this.completeText).toEqual(dropdownText);
}); });
it('completely show just sub-category', function() { it('truncation happens with specific title lengths', function() {
var dropdownText; var dropdownText;
this.createTopicView(); this.createTopicView();
this.view.maxNameWidth = this.defaultTextWidth - 10; this.view.$el.find('a.topic-title')[2].click();
this.view.$el.find('a.topic-title').first().click();
dropdownText = this.view.$el.find('.js-selected-topic').text(); dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText.indexOf('…')).toEqual(0); expect(dropdownText).toEqual('…/Very long category name');
expect(dropdownText).toContain(this.selectedOptionText);
this.view.$el.find('a.topic-title')[5].click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText).toEqual('… / What Are Your Goals f …');
}); });
it('partially show sub-category', function() { it('truncation happens with longer title lengths', function() {
var dropdownText;
this.createTopicView(); this.createTopicView();
var parentWidth = this.view.getNameWidth(this.parentCategoryText), this.view.$el.find('a.topic-title')[3].click();
dropdownText; dropdownText = this.view.$el.find('.js-selected-topic').text();
this.view.maxNameWidth = this.defaultTextWidth - parentWidth; expect(dropdownText).toEqual('… / Very very very very l …');
this.view.$el.find('a.topic-title').first().click(); });
it('titles are escaped before display', function() {
var dropdownText;
this.createTopicView();
this.view.$el.find('a.topic-title')[4].click();
dropdownText = this.view.$el.find('.js-selected-topic').text(); dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText.indexOf('…')).toEqual(0); expect(dropdownText).toContain('em&gt;');
expect(dropdownText.lastIndexOf('…')).toBeGreaterThan(0);
}); });
it('broken span doesn\'t occur', function() { it('broken span doesn\'t occur', function() {
var dropdownText; var dropdownText;
this.createTopicView(); this.createTopicView();
this.view.maxNameWidth = this.view.getNameWidth(this.selectedOptionText) + 100; this.view.maxNameWidth = this.selectedOptionText.length + 100;
this.view.$el.find('a.topic-title').first().click(); this.view.$el.find('a.topic-title').first().click();
dropdownText = this.view.$el.find('.js-selected-topic').text(); dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText.indexOf('/ span>')).toEqual(-1); expect(dropdownText.indexOf('/ span>')).toEqual(-1);
......
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