New to ES6 plugin question


#1

I’ve been trying all day to figure out how to modify an ES6 file through a plugin. I’ve been able to create plugins that add javascript to the pages I want, so I think I understand the basics well enough.

All I’m trying to do is change javascripts/discourse/views/topic-progress.js.es6

from:

[code]_updateProgressBar: function() {
// speeds up stuff, bypass jquery slowness and extra checks
var totalWidth = this._progressWidth,
progressWidth = this.get(‘controller.streamPercentage’) * totalWidth;

this._$topicProgress.find('.bg')
  .css("border-right-width", (progressWidth === totalWidth) ? "0px" : "1px")
  .width(progressWidth);

},[/code]

to: (only change is in the last line, changing width to height)

[code]_updateProgressBar: function() {
// speeds up stuff, bypass jquery slowness and extra checks
var totalWidth = this._progressWidth,
progressWidth = this.get(‘controller.streamPercentage’) * totalWidth;

this._$topicProgress.find('.bg')
  .css("border-right-width", (progressWidth === totalWidth) ? "0px" : "1px")
  .height(progressWidth);

},[/code]

Is anybody able to help a poor soul out?


(Robin Ward) #2

You should add an initializer.

The initializer can ask the container for the view class you want and open it to redefine the method.

const TopicProgressView = container.lookupFactory('view:topic-progress');
TopicProgressView.reopen({
  _updateProgressBar: function() { /*... your implementation ...*/ }
})

Of course, any time you redefine a method like this you might break future upgrades, but this is the safest way to do it right now :smile: