Question

I'm working on a video player with video.js. On this side I've got elements (volume, fullscreen, play, pause...) which are prototypes. On the other side I've got my functions parse() which is going to be use by all of the canvas prototypes (they come from different elements).

parse Function :

vjs.parseHex = function(c) {
    if(c.charAt(0) == "#") {
        return c.substring(1,7);
    } else if(c.substr(0,2) == "0x") {
        return c.substring(2,8);
    } else {
        return c;
    }
},

vjs.parseRed = function(c) {
    return parseInt((this.parseHex(c)).substring(0,2),16);
},

vjs.parseGreen = function(c) {
    return parseInt((this.parseHex(c)).substring(2,4),16);
},

vjs.parseBlue = function(c) {
    return parseInt((this.parseHex(c)).substring(4,6),16);
}

An exemple of my canvas prototype :

js.VolumeBar.prototype.drawSound = function(){
  .
  .
  .
}

I want that my parse functions are accessible by all of the different prototypes. Is that possible ? If yes, how can I do that?

Thank you for helping me, Léa.

Was it helpful?

Solution

It seems that vjs is a sort of Util namespace that contains a few functions that should be used in different places. As long as that is public it can be used anywhere:

vjs = {};
vjs.parseHex = function(c) { /*...*/ }
vjs.parseRed = function(c) { /*...*/ }


js.VolumeBar.prototype.drawSound = function(){
  vjs.parseRed(stuff);
}

Keep in mind that if you pass vjs.parseRed as a callback, it will be called with a different object as this than what you expect. You could rewrite it to either

  • replace this with vjs:

    vjs.parseRed = function(c) { return parseInt((vjs.parseHex(c)).substring(0,2),16); }

  • bind the functions when you pass them as parameters:

    doAsync(vjs.parseRed.bind(vjs));

  • or just bind them when you define them:

    vjs.parseRed = function(c) { /*...*/ }.bind(vjs);

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top