assets/js/romo-av/dropdown_video.js in romo-av-0.1.6 vs assets/js/romo-av/dropdown_video.js in romo-av-0.2.0

@@ -1,303 +1,281 @@
-$.fn.romoDropdownVideo = function() {
-  return $.map(this, function(element) {
-    return new RomoDropdownVideo(element);
-  });
-}
+var RomoDropdownVideo = RomoComponent(function(elem) {
+  this.elem = elem;
 
-var RomoDropdownVideo = function(element) {
-  this.elem = $(element);
+  this.doInit();
+  this._bindElem();
 
-  this.dropdown = this.elem.romoDropdown()[0];
-  this.doBindDropdown();
+  Romo.trigger(this.elem, 'romoDropdownVideo:ready', [this]);
+});
 
-  this.video = undefined;
-  this.doBindVideo();
-  this.elem.on('dropdown:loadBodySuccess', $.proxy(function(e, data, dropdown) {
-    this.doBindVideo();
-  }, this));
+// private
 
-  this.doInit();
-  this.elem.trigger('dropdownVideo:ready', [this]);
-}
+RomoDropdownVideo.prototype._bindElem = function() {
+  this._bindDropdown();
+  this._bindVideo();
 
-RomoDropdownVideo.prototype.doInit = function() {
-  // override as needed
+  Romo.on(this.elem, 'romoDropdown:loadBodySuccess', Romo.proxy(function(e, data, romoDropdown) {
+    this._bindVideo();
+  }, this));
 }
 
-RomoDropdownVideo.prototype.doBindDropdown = function() {
-  if (this.elem.data('romo-dropdown-clear-content') === undefined) {
-    this.elem.attr('data-romo-dropdown-clear-content', 'true');
+RomoDropdownVideo.prototype._bindDropdown = function() {
+  if (Romo.data(this.elem, 'romo-dropdown-clear-content') === undefined) {
+    Romo.setData(this.elem, 'romo-dropdown-clear-content', 'true');
   }
 
+  this.romoDropdown = new RomoDropdown(this.elem);
+
   // dropdown/video interactions
 
-  this.elem.on('dropdownVideo:video:loadedmetadata', $.proxy(function(e, videoObj, video, dropdownVideo) {
-    this.dropdown.doPlacePopupElem();
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:loadedmetadata', Romo.proxy(function(e, videoObj, romoVideo, romoDropdownVideo) {
+    this.romoDropdown.doPlacePopupElem();
   }, this));
 
-  this.elem.on('dropdownVideo:video:enterFullscreen', $.proxy(function(e, videoObj, video, dropdownVideo) {
-    // wait 1 sec then turn off dropdown body elem events - since we are in fullscreen
-    // mode, we don't care about them
-    setTimeout($.proxy(function() {
-      this.dropdown.doUnBindWindowBodyClick();
-      this.dropdown.doUnBindWindowBodyKeyUp();
-      this.dropdown.doUnBindElemKeyUp();
-    }, this), 1000);
-  }, this));
-  this.elem.on('dropdownVideo:video:exitFullscreen', $.proxy(function(e, videoObj, video, dropdownVideo) {
-    // wait 1 sec then turn on dropdown body elem events - since we are no longer
-    // in fullscreen mode, we need to care about them again
-    setTimeout($.proxy(function() {
-      this.dropdown.doBindWindowBodyClick();
-      this.dropdown.doBindWindowBodyKeyUp();
-      this.dropdown.doBindElemKeyUp();
-    }, this), 1000);
-  }, this));
-
   // event proxies
 
-  this.elem.on('dropdown:ready', $.proxy(function(e, dropdown) {
-    this.elem.trigger('dropdownVideo:dropdown:ready', [dropdown, this]);
+  Romo.on(this.elem, 'romoDropdown:ready', Romo.proxy(function(e, romoDropdown) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoDropdown:ready', [romoDropdown, this]);
   }, this));
-  this.elem.on('dropdown:toggle', $.proxy(function(e, dropdown) {
-    this.elem.trigger('dropdownVideo:dropdown:toggle', [dropdown, this]);
+  Romo.on(this.elem, 'romoDropdown:toggle', Romo.proxy(function(e, romoDropdown) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoDropdown:toggle', [romoDropdown, this]);
   }, this));
-  this.elem.on('dropdown:popupOpen', $.proxy(function(e, dropdown) {
-    this.elem.trigger('dropdownVideo:dropdown:popupOpen', [dropdown, this]);
+  Romo.on(this.elem, 'romoDropdown:popupOpen', Romo.proxy(function(e, romoDropdown) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoDropdown:popupOpen', [romoDropdown, this]);
   }, this));
-  this.elem.on('dropdown:popupClose', $.proxy(function(e, dropdown) {
-    this.elem.trigger('dropdownVideo:dropdown:popupClose', [dropdown, this]);
+  Romo.on(this.elem, 'romoDropdown:popupClose', Romo.proxy(function(e, romoDropdown) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoDropdown:popupClose', [romoDropdown, this]);
   }, this));
-  this.elem.on('dropdown:loadBodyStart', $.proxy(function(e, dropdown) {
-    this.elem.trigger('dropdownVideo:dropdown:loadBodyStart', [dropdown, this]);
+  Romo.on(this.elem, 'romoDropdown:loadBodyStart', Romo.proxy(function(e, romoDropdown) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoDropdown:loadBodyStart', [romoDropdown, this]);
   }, this));
-  this.elem.on('dropdown:loadBodySuccess', $.proxy(function(e, data, dropdown) {
-    this.elem.trigger('dropdownVideo:dropdown:loadBodySuccess', [data, dropdown, this]);
+  Romo.on(this.elem, 'romoDropdown:loadBodySuccess', Romo.proxy(function(e, data, romoDropdown) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoDropdown:loadBodySuccess', [data, romoDropdown, this]);
   }, this));
-  this.elem.on('dropdown:loadBodyError', $.proxy(function(e, xhr, dropdown) {
-    this.elem.trigger('dropdownVideo:dropdown:loadBodyError', [xhr, dropdown, this]);
+  Romo.on(this.elem, 'romoDropdown:loadBodyError', Romo.proxy(function(e, xhr, romoDropdown) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoDropdown:loadBodyError', [xhr, romoDropdown, this]);
   }, this));
-  this.elem.on('dropdown:dismiss', $.proxy(function(e, dropdown) {
-    this.elem.trigger('dropdownVideo:dropdown:dismiss', [dropdown, this]);
+  Romo.on(this.elem, 'romoDropdown:dismiss', Romo.proxy(function(e, romoDropdown) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoDropdown:dismiss', [romoDropdown, this]);
   }, this));
 }
 
-RomoDropdownVideo.prototype.doBindVideo = function() {
-  var videoElem = this.dropdown.popupElem.find('[data-romo-video-auto="dropdownVideo"]');
+RomoDropdownVideo.prototype._bindVideo = function() {
+  this.romoVideo = undefined;
 
-  this._bindVideoElemEvents(videoElem);
-  this._bindDropdownVideoTriggerEvents();
+  var videoElem = Romo.find(this.romoDropdown.popupElem, '[data-romo-video-auto="dropdownVideo"]')[0];
+  if (videoElem !== undefined) {
+    this._bindVideoElemEvents(videoElem);
+    this._bindDropdownVideoTriggerEvents();
 
-  this.video = videoElem.romoVideo()[0];
+    this.romoVideo = new RomoVideo(videoElem);
+  }
 }
 
-// private
-
 RomoDropdownVideo.prototype._bindVideoElemEvents = function(videoElem) {
   // playback events
 
-  videoElem.on('video:play', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:play', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:play', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:play', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:pause', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:pause', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:pause', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:pause', [videoObj, romoVideo, this]);
   }, this));
 
   // state events
 
-  videoElem.on('video:playing', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:playing', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:playing', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:playing', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:waiting', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:waiting', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:waiting', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:waiting', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:ended',  $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:ended', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:ended', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:ended', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:emptied', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:emptied', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:emptied', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:emptied', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:error', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:error', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:error', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:error', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:stalled', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:stalled', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:stalled', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:stalled', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:suspend', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:suspend', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:suspend', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:suspend', [videoObj, romoVideo, this]);
   }, this));
 
   // status events
 
-  videoElem.on('video:progress', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:progress', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:progress', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:progress', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:timeupdate', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:timeupdate', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:timeupdate', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:timeupdate', [videoObj, romoVideo, this]);
   }, this));
 
   // settings events
 
-  videoElem.on('video:volumechange', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:volumechange', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:volumechange', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:volumechange', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:durationchange', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:durationchange', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:durationchange', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:durationchange', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:ratechange', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:ratechange', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:ratechange', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:ratechange', [videoObj, romoVideo, this]);
   }, this));
 
   // fullscreen events
 
-  videoElem.on('video:enterFullscreen', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:enterFullscreen', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:enterFullscreen', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:enterFullscreen', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:exitFullscreen', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:exitFullscreen', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:exitFullscreen', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:exitFullscreen', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:fullscreenChange', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:fullscreenChange', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:fullscreenChange', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:fullscreenChange', [videoObj, romoVideo, this]);
   }, this));
 
   // load events
 
-  videoElem.on('video:loadstart', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:loadstart', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:loadstart', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:loadstart', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:loadedmetadata', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:loadedmetadata', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:loadedmetadata', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:loadedmetadata', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:loadeddata', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:loadeddata', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:loadeddata', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:loadeddata', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:canplay', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:canplay', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:canplay', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:canplay', [videoObj, romoVideo, this]);
   }, this));
-  videoElem.on('video:canplaythrough', $.proxy(function(e, videoObj, video) {
-    this.elem.trigger('dropdownVideo:video:canplaythrough', [videoObj, video, this]);
+  Romo.on(videoElem, 'romoVideo:canplaythrough', Romo.proxy(function(e, videoObj, romoVideo) {
+    Romo.trigger(this.elem, 'romoDropdownVideo:romoVideo:canplaythrough', [videoObj, romoVideo, this]);
   }, this));
 }
 
 RomoDropdownVideo.prototype._bindDropdownVideoTriggerEvents = function() {
   // playback triggers
 
-  this.elem.on('dropdownVideo:video:triggerPlay', $.proxy(function(e) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerPlay', []);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerPlay', Romo.proxy(function(e) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerPlay', []);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerPause', $.proxy(function(e) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerPause', []);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerPause', Romo.proxy(function(e) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerPause', []);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerTogglePlay', $.proxy(function(e) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerTogglePlay', []);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerTogglePlay', Romo.proxy(function(e) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerTogglePlay', []);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerSetPlaybackToTime', $.proxy(function(e, secondNum) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerSetPlaybackToTime', [secondNum]);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerSetPlaybackToTime', Romo.proxy(function(e, secondNum) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerSetPlaybackToTime', [secondNum]);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerSetPlaybackToFrame', $.proxy(function(e, frameNum) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerSetPlaybackToFrame', [frameNum]);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerSetPlaybackToFrame', Romo.proxy(function(e, frameNum) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerSetPlaybackToFrame', [frameNum]);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerSetPlaybackToPercent', $.proxy(function(e, percent) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerSetPlaybackToPercent', [percent]);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerSetPlaybackToPercent', Romo.proxy(function(e, percent) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerSetPlaybackToPercent', [percent]);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerModPlaybackByTime', $.proxy(function(e, secondsCount) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerModPlaybackByTime', [secondsCount]);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerModPlaybackByTime', Romo.proxy(function(e, secondsCount) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerModPlaybackByTime', [secondsCount]);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerModPlaybackByFrames', $.proxy(function(e, frameCount) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerModPlaybackByFrames', [frameCount]);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerModPlaybackByFrames', Romo.proxy(function(e, frameCount) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerModPlaybackByFrames', [frameCount]);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerModPlaybackByPercent', $.proxy(function(e, percent) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerModPlaybackByPercent', [percent]);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerModPlaybackByPercent', Romo.proxy(function(e, percent) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerModPlaybackByPercent', [percent]);
     }
   }, this));
 
   // settings triggers
 
-  this.elem.on('dropdownVideo:video:triggerMute', $.proxy(function(e) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerMute', []);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerMute', Romo.proxy(function(e) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerMute', []);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerUnmute', $.proxy(function(e) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerUnmute', []);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerUnmute', Romo.proxy(function(e) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerUnmute', []);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerToggleMute', $.proxy(function(e) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerToggleMute', []);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerToggleMute', Romo.proxy(function(e) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerToggleMute', []);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerSetVolumeToPercent', $.proxy(function(e, percent) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerSetVolumeToPercent', [percent]);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerSetVolumeToPercent', Romo.proxy(function(e, percent) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerSetVolumeToPercent', [percent]);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerModVolumeByPercent', $.proxy(function(e, percent) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerModVolumeByPercent', [percent]);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerModVolumeByPercent', Romo.proxy(function(e, percent) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerModVolumeByPercent', [percent]);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerSetPlaybackRate', $.proxy(function(e, rate) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerSetPlaybackRate', [rate]);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerSetPlaybackRate', Romo.proxy(function(e, rate) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerSetPlaybackRate', [rate]);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerModPlaybackRate', $.proxy(function(e, rate) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerModPlaybackRate', [rate]);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerModPlaybackRate', Romo.proxy(function(e, rate) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerModPlaybackRate', [rate]);
     }
   }, this));
 
   // fullscreen triggers
 
-  this.elem.on('dropdownVideo:video:triggerEnterFullscreen', $.proxy(function(e) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerEnterFullscreen', []);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerEnterFullscreen', Romo.proxy(function(e) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerEnterFullscreen', []);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerExitFullscreen', $.proxy(function(e) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerExitFullscreen', []);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerExitFullscreen', Romo.proxy(function(e) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerExitFullscreen', []);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerToggleFullscreen', $.proxy(function(e) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerToggleFullscreen', []);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerToggleFullscreen', Romo.proxy(function(e) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerToggleFullscreen', []);
     }
   }, this));
 
   // load triggers
 
-  this.elem.on('dropdownVideo:video:triggerLoad', $.proxy(function(e) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerLoad', []);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerLoad', Romo.proxy(function(e) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerLoad', []);
     }
   }, this));
-  this.elem.on('dropdownVideo:video:triggerModSource', $.proxy(function(e, source) {
-    if (this.video != undefined) {
-      this.video.elem.trigger('video:triggerModSource', [source]);
+  Romo.on(this.elem, 'romoDropdownVideo:romoVideo:triggerModSource', Romo.proxy(function(e, source) {
+    if (this.romoVideo != undefined) {
+      Romo.trigger(this.romoVideo.elem, 'romoVideo:triggerModSource', [source]);
     }
   }, this));
 }
 
-Romo.onInitUI(function(e) {
-  Romo.initUIElems(e, '[data-romo-dropdownVideo-auto="true"]').romoDropdownVideo();
-});
+// init
+
+Romo.addElemsInitSelector('[data-romo-dropdownVideo-auto="true"]', RomoDropdownVideo);