Migration of subtitlesync to ES6 module

package.json

@@ -161,6 +161,7 @@
           "src/components/settingshelper.js",
           "src/components/shortcuts.js",
           "src/components/subtitleeditor/subtitleeditor.js",
+          "src/components/subtitlesync/subtitlesync.js",
           "src/components/subtitlesettings/subtitleappearancehelper.js",
           "src/components/subtitlesettings/subtitlesettings.js",
           "src/components/syncPlay/groupSelectionMenu.js",

src/components/subtitlesync/subtitlesync.js

@@ -1,16 +1,16 @@
-define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html', 'css!./subtitlesync'], function (playbackManager, layoutManager, template, css) {
-    'use strict';
+import playbackManager from 'playbackManager';
+import layoutManager from 'layoutManager';
+import template from 'text!./subtitlesync.template.html';
+import 'css!./subtitlesync';
 
-    playbackManager = playbackManager.default || playbackManager;
+let player;
+let subtitleSyncSlider;
+let subtitleSyncTextField;
+let subtitleSyncCloseButton;
+let subtitleSyncContainer;
 
-    var player;
-    var subtitleSyncSlider;
-    var subtitleSyncTextField;
-    var subtitleSyncCloseButton;
-    var subtitleSyncContainer;
-
-    function init(instance) {
-        var parent = document.createElement('div');
+function init(instance) {
+    const parent = document.createElement('div');
     document.body.appendChild(parent);
     parent.innerHTML = template;
 
@@ -29,7 +29,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
 
     subtitleSyncContainer.classList.add('hide');
 
-        subtitleSyncTextField.updateOffset = function(offset) {
+    subtitleSyncTextField.updateOffset = function (offset) {
         this.textContent = offset + 's';
     };
 
@@ -38,10 +38,10 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
         this.hasFocus = true;
     });
 
-        subtitleSyncTextField.addEventListener('keydown', function(event) {
+    subtitleSyncTextField.addEventListener('keydown', function (event) {
         if (event.key === 'Enter') {
             // if input key is enter search for float pattern
-                var inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
+            let inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
             if (inputOffset) {
                 inputOffset = inputOffset[0];
 
@@ -71,14 +71,14 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
         event.stopPropagation();
     });
 
-        subtitleSyncTextField.blur = function() {
+    subtitleSyncTextField.blur = function () {
         // prevent textfield to blur while element has focus
         if (!this.hasFocus && this.prototype) {
             this.prototype.blur();
         }
     };
 
-        subtitleSyncSlider.updateOffset = function(percent) {
+    subtitleSyncSlider.updateOffset = function (percent) {
         // default value is 0s = 50%
         this.value = percent === undefined ? 50 : percent;
     };
@@ -92,56 +92,57 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
     });
 
     subtitleSyncSlider.getBubbleHtml = function (value) {
-            var newOffset = getOffsetFromPercentage(value);
+        const newOffset = getOffsetFromPercentage(value);
         return '<h1 class="sliderBubbleText">' +
             (newOffset > 0 ? '+' : '') + parseFloat(newOffset) + 's' +
             '</h1>';
     };
 
-        subtitleSyncCloseButton.addEventListener('click', function() {
+    subtitleSyncCloseButton.addEventListener('click', function () {
         playbackManager.disableShowingSubtitleOffset(player);
         SubtitleSync.prototype.toggle('forceToHide');
     });
 
     instance.element = parent;
-    }
+}
 
-    function getOffsetFromPercentage(value) {
+function getOffsetFromPercentage(value) {
     // convert percent to fraction
-        var offset = (value - 50) / 50;
+    let offset = (value - 50) / 50;
     // multiply by offset min/max range value (-x to +x) :
     offset *= 30;
     return offset.toFixed(1);
-    }
+}
 
-    function getPercentageFromOffset(value) {
+function getPercentageFromOffset(value) {
     // divide by offset min/max range value (-x to +x) :
-        var percentValue = value / 30;
+    let percentValue = value / 30;
     // convert fraction to percent
     percentValue *= 50;
     percentValue += 50;
     return Math.min(100, Math.max(0, percentValue.toFixed()));
-    }
+}
 
-    function SubtitleSync(currentPlayer) {
+class SubtitleSync {
+    constructor(currentPlayer) {
         player = currentPlayer;
         init(this);
     }
 
-    SubtitleSync.prototype.destroy = function() {
+    destroy() {
         SubtitleSync.prototype.toggle('forceToHide');
         if (player) {
             playbackManager.disableShowingSubtitleOffset(player);
             playbackManager.setSubtitleOffset(0, player);
         }
-        var elem = this.element;
+        const elem = this.element;
         if (elem) {
             elem.parentNode.removeChild(elem);
             this.element = null;
         }
-    };
+    }
 
-    SubtitleSync.prototype.toggle = function(action) {
+    toggle(action) {
         if (player && playbackManager.supportSubtitleOffset(player)) {
             /* eslint-disable no-fallthrough */
             switch (action) {
@@ -170,7 +171,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
             }
             /* eslint-enable no-fallthrough */
         }
-    };
+    }
+}
 
-    return SubtitleSync;
-});
+export default SubtitleSync;