diff --git a/lib/vtt.js b/lib/vtt.js index 6e7aa3a..a918160 100644 --- a/lib/vtt.js +++ b/lib/vtt.js @@ -558,13 +558,20 @@ function StyleBox() { // Apply styles to a div. If there is no div passed then it defaults to the // div on 'this'. -StyleBox.prototype.applyStyles = function(styles, div) { +StyleBox.prototype.applyStyles = function(styles, div, inlineStyles, onapplystyles) { div = div || this.div; - for (var prop in styles) { - if (styles.hasOwnProperty(prop)) { - div.style[prop] = styles[prop]; + + if (this.inlineStyles) { + for (var prop in styles) { + if (styles.hasOwnProperty(prop)) { + div.style[prop] = styles[prop]; + } } } + + if (typeof this.onapplystyles === 'function') { + this.onapplystyles(styles, div); + } }; StyleBox.prototype.formatStyle = function(val, unit) { @@ -573,9 +580,11 @@ StyleBox.prototype.formatStyle = function(val, unit) { // Constructs the computed display state of the cue (a div). Places the div // into the overlay which should be a block level element (usually a div). -function CueStyleBox(window, cue, styleOptions) { +function CueStyleBox(window, cue, styleOptions, inlineStyles, onapplystyles) { StyleBox.call(this); this.cue = cue; + this.inlineStyles = inlineStyles; + this.onapplystyles = onapplystyles; // Parse our cue's text into a DOM tree rooted at 'cueDiv'. This div will // have inline positioning and will function as the cue background box. @@ -595,7 +604,7 @@ function CueStyleBox(window, cue, styleOptions) { unicodeBidi: "plaintext" }; - this.applyStyles(styles, this.cueDiv); + this.applyStyles(styles, this.cueDiv, inlineStyles, onapplystyles); // Create an absolutely positioned div that will be used to position the cue // div. Note, all WebVTT cue-setting alignments are equivalent to the CSS @@ -973,7 +982,7 @@ var CUE_BACKGROUND_PADDING = "1.5%"; // Runs the processing model over the cues and regions passed to it. // @param overlay A block level element (usually a div) that the computed cues // and regions will be placed into. -WebVTT.processCues = function(window, cues, overlay) { +WebVTT.processCues = function({ window, cues, overlay, onapplystyles, inlineStyles = true } = {}) { if (!window || !cues || !overlay) { return null; } @@ -1026,7 +1035,7 @@ WebVTT.processCues = function(window, cues, overlay) { cue = cues[i]; // Compute the intial position and styles of the cue div. - styleBox = new CueStyleBox(window, cue, styleOptions); + styleBox = new CueStyleBox(window, cue, styleOptions, inlineStyles, onapplystyles); paddedOverlay.appendChild(styleBox.div); // Move the cue div to it's correct line position.