Outsource add item/reference/screenshot button.

app/assets/javascripts/application.js

@@ -50,6 +50,9 @@
 //= require terms
 //= require tex_preview
 //= require thyme/components/component
+//= require thyme/components/add_item_button
+//= require thyme/components/add_reference_button
+//= require thyme/components/add_screenshot_button
 //= require thyme/components/annotation_category_toggle
 //= require thyme/components/annotations_toggle
 //= require thyme/components/emergency_button

app/assets/javascripts/thyme/components/add_item_button.js

@@ -0,0 +1,24 @@
+class AddItemButton extends Component {
+
+  add() {
+    const video = thymeAttributes.video;
+
+    // Event listener for addItem button
+    this.element.addEventListener('click', function() {
+      video.pause();
+      // round time down to three decimal digits
+      const time = video.currentTime;
+      const intTime = Math.floor(time);
+      const roundTime = intTime + Math.floor((time - intTime) * 1000) / 1000;
+      video.currentTime = roundTime;
+      $.ajax(Routes.add_item_path(thymeAttributes.mediumId), {
+        type: 'GET',
+        dataType: 'script',
+        data: {
+          time: video.currentTime
+        }
+      });
+    });
+  }
+
+}

app/assets/javascripts/thyme/components/add_reference_button.js

@@ -0,0 +1,24 @@
+class AddReferenceButton extends Component {
+
+  add() {
+    const video = thymeAttributes.video;
+
+    // Event listener for addItem button
+    this.element.addEventListener('click', function() {
+      video.pause();
+      // round time down to three decimal digits
+      const time = video.currentTime;
+      const intTime = Math.floor(time);
+      const roundTime = intTime + Math.floor((time - intTime) * 1000) / 1000;
+      video.currentTime = roundTime;
+      $.ajax(Routes.add_reference_path(thymeAttributes.mediumId), {
+        type: 'GET',
+        dataType: 'script',
+        data: {
+          time: video.currentTime
+        }
+      });
+    });
+  }
+
+}

app/assets/javascripts/thyme/components/add_screenshot_button.js

@@ -0,0 +1,35 @@
+class AddScreenshotButton extends Component {
+
+  constructor(element, canvasId) {
+    super(element);
+    this.canvas = document.getElementById(canvasId);
+  }
+
+  add() {
+    const video = thymeAttributes.video;
+    const canvas = this.canvas;
+
+    // Event listener for add screenshot button
+    this.element.addEventListener('click', function() {
+      video.pause();
+      // extract video screenshot from canvas
+      const context = canvas.getContext('2d');
+      context.drawImage(video, 0, 0, canvas.width, canvas.height);
+      const base64image = canvas.toDataURL('image/png');
+      // Get our file
+      const file = thymeUtility.dataURLtoBlob(base64image);
+      // Create new form data
+      const fd = new FormData;
+      // Append our Canvas image file to the form data
+      fd.append('image', file);
+      // And send it
+      $.ajax(Routes.add_screenshot_path(thymeAttributes.mediumId), {
+        type: 'POST',
+        data: fd,
+        processData: false,
+        contentType: false
+      });
+    });
+  }
+
+}

app/assets/javascripts/thyme_editor.js

@@ -31,73 +31,10 @@ $(document).on('turbolinks:load', function() {
   (new SeekBar('seek-bar')).add();
   (new VolumeBar('volume-bar')).add();
 
-  thymeUtility.setUpMaxTime('max-time');
-
-
-
-  const addItemButton = document.getElementById('add-item');
-  const addReferenceButton = document.getElementById('add-reference');
-  const addScreenshotButton = document.getElementById('add-screenshot');
-  // Screenshot Canvas
-  const canvas = document.getElementById('snapshot');
-
+  (new AddItemButton('add-item')).add();
+  (new AddReferenceButton('add-reference')).add();
+  (new AddScreenshotButton('add-screenshot', 'snapshot')).add();
 
-
-
-  // Event listener for addItem button
-  addItemButton.addEventListener('click', function() {
-    video.pause();
-    // round time down to three decimal digits
-    const time = video.currentTime;
-    const intTime = Math.floor(time);
-    const roundTime = intTime + Math.floor((time - intTime) * 1000) / 1000;
-    video.currentTime = roundTime;
-    $.ajax(Routes.add_item_path(mediumId), {
-      type: 'GET',
-      dataType: 'script',
-      data: {
-        time: video.currentTime
-      }
-    });
-  });
-
-  // Event listener for addItem button
-  addReferenceButton.addEventListener('click', function() {
-    video.pause();
-    // round time down to three decimal digits
-    const time = video.currentTime;
-    const intTime = Math.floor(time);
-    const roundTime = intTime + Math.floor((time - intTime) * 1000) / 1000;
-    video.currentTime = roundTime;
-    $.ajax(Routes.add_reference_path(mediumId), {
-      type: 'GET',
-      dataType: 'script',
-      data: {
-        time: video.currentTime
-      }
-    });
-  });
-
-  // Event listener for add screenshot button
-  addScreenshotButton.addEventListener('click', function() {
-    video.pause();
-    // extract video screenshot from canvas
-    const context = canvas.getContext('2d');
-    context.drawImage(video, 0, 0, canvas.width, canvas.height);
-    const base64image = canvas.toDataURL('image/png');
-    // Get our file
-    const file = thymeUtility.dataURLtoBlob(base64image);
-    // Create new form data
-    const fd = new FormData;
-    // Append our Canvas image file to the form data
-    fd.append('image', file);
-    // And send it
-    $.ajax(Routes.add_screenshot_path(mediumId), {
-      type: 'POST',
-      data: fd,
-      processData: false,
-      contentType: false
-    });
-  });
+  thymeUtility.setUpMaxTime('max-time');
 
 });