From 3cca6046fa36a84070453716693c3121baa6e622 Mon Sep 17 00:00:00 2001 From: Brian Jacobel Date: Wed, 29 Jun 2016 15:06:49 -0400 Subject: [PATCH 1/2] Revert "Change topic name truncation." This reverts commit d75e63350868c3220ecc618155637fa5237b0b68. --- .../views/discussion_topic_menu_view.js | 34 +++++++++++++++---- .../view/discussion_topic_menu_view_spec.js | 25 ++++++++++++-- 2 files changed, 50 insertions(+), 9 deletions(-) diff --git a/common/static/common/js/discussion/views/discussion_topic_menu_view.js b/common/static/common/js/discussion/views/discussion_topic_menu_view.js index 95c90cc366..550f77fd82 100644 --- a/common/static/common/js/discussion/views/discussion_topic_menu_view.js +++ b/common/static/common/js/discussion/views/discussion_topic_menu_view.js @@ -16,7 +16,7 @@ initialize: function(options) { this.course_settings = options.course_settings; this.currentTopicId = options.topicId; - this.maxNameWidth = 26; + this.maxNameWidth = 100; _.bindAll(this, 'toggleTopicDropdown', 'handleTopicEvent', 'hideTopicDropdown', 'ignoreClick' ); @@ -90,6 +90,9 @@ this.dropdownButton.addClass('dropped'); this.topicMenu.show(); $(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; }, @@ -145,12 +148,29 @@ } }, + // @TODO move into utils.coffee + getNameWidth: function(name) { + var test = $('
'), + 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) { var ellipsisText = gettext('…'), partialName, path, rawName; - if (name.length < this.maxNameWidth) { + if (this.getNameWidth(name) < this.maxNameWidth) { return name; } else { path = _.map(name.split('/'), function(item){ @@ -158,15 +178,15 @@ }); while (path.length > 1) { path.shift(); - partialName = ellipsisText + '/' + path.join('/'); - if (partialName.length > this.maxNameWidth) { - return partialName; + partialName = ellipsisText + ' / ' + path.join(' / '); + if (this.getNameWidth(partialName) < this.maxNameWidth) { + return partialName; } } rawName = path[0]; name = ellipsisText + ' / ' + rawName; - while (name.length > this.maxNameWidth) { - rawName = rawName.slice(0, this.maxNameWidth); + while (this.getNameWidth(name) > this.maxNameWidth) { + rawName = rawName.slice(0, -1); name = ellipsisText + ' / ' + rawName + ' ' + ellipsisText; } } diff --git a/common/static/common/js/spec/discussion/view/discussion_topic_menu_view_spec.js b/common/static/common/js/spec/discussion/view/discussion_topic_menu_view_spec.js index 36052be60c..36a0481041 100644 --- a/common/static/common/js/spec/discussion/view/discussion_topic_menu_view_spec.js +++ b/common/static/common/js/spec/discussion/view/discussion_topic_menu_view_spec.js @@ -10,7 +10,7 @@ }, options); this.view = new DiscussionTopicMenuView(options); this.view.render().appendTo('#fixture-element'); - this.defaultTextWidth = this.completeText.length; + this.defaultTextWidth = this.view.getNameWidth(this.completeText); }; this.openMenu = function() { @@ -68,10 +68,31 @@ expect(this.completeText).toEqual(dropdownText); }); + it('completely show just sub-category', function() { + var dropdownText; + this.createTopicView(); + this.view.maxNameWidth = this.defaultTextWidth - 10; + this.view.$el.find('a.topic-title').first().click(); + dropdownText = this.view.$el.find('.js-selected-topic').text(); + expect(dropdownText.indexOf('…')).toEqual(0); + expect(dropdownText).toContain(this.selectedOptionText); + }); + + it('partially show sub-category', function() { + this.createTopicView(); + var parentWidth = this.view.getNameWidth(this.parentCategoryText), + dropdownText; + this.view.maxNameWidth = this.defaultTextWidth - parentWidth; + this.view.$el.find('a.topic-title').first().click(); + dropdownText = this.view.$el.find('.js-selected-topic').text(); + expect(dropdownText.indexOf('…')).toEqual(0); + expect(dropdownText.lastIndexOf('…')).toBeGreaterThan(0); + }); + it('broken span doesn\'t occur', function() { var dropdownText; this.createTopicView(); - this.view.maxNameWidth = this.selectedOptionText.length + 100; + this.view.maxNameWidth = this.view.getNameWidth(this.selectedOptionText) + 100; this.view.$el.find('a.topic-title').first().click(); dropdownText = this.view.$el.find('.js-selected-topic').text(); expect(dropdownText.indexOf('/ span>')).toEqual(-1); From 48726b71deb22185399c4c0b7e8ca81e0aeb0d44 Mon Sep 17 00:00:00 2001 From: Diana Huang Date: Wed, 29 Jun 2016 16:15:23 -0400 Subject: [PATCH 2/2] Make safe-linter happy. --- .../js/discussion/views/discussion_topic_menu_view.js | 8 ++++---- scripts/safelint_thresholds.json | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/common/static/common/js/discussion/views/discussion_topic_menu_view.js b/common/static/common/js/discussion/views/discussion_topic_menu_view.js index 550f77fd82..5c2bd591ff 100644 --- a/common/static/common/js/discussion/views/discussion_topic_menu_view.js +++ b/common/static/common/js/discussion/views/discussion_topic_menu_view.js @@ -150,18 +150,18 @@ // @TODO move into utils.coffee getNameWidth: function(name) { - var test = $('
'), + var $test = $('
'), width; - test.css({ + $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(); + width = $test.width(); + $test.remove(); return width; }, diff --git a/scripts/safelint_thresholds.json b/scripts/safelint_thresholds.json index a08034b570..27fe472bec 100644 --- a/scripts/safelint_thresholds.json +++ b/scripts/safelint_thresholds.json @@ -4,8 +4,8 @@ "javascript-escape": 7, "javascript-interpolate": 49, "javascript-jquery-append": 104, - "javascript-jquery-html": 276, - "javascript-jquery-insert-into-target": 27, + "javascript-jquery-html": 277, + "javascript-jquery-insert-into-target": 28, "javascript-jquery-insertion": 26, "javascript-jquery-prepend": 11, "mako-html-entities": 0,