Allow for consumers to control whether or not styles are added to cues

Author: evanfarina

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.