Some javascript refactoring

Fernando Brito
1 parent 06cb3f6f
Showing 7 changed files with 80 additions and 73 deletions Show diff stats
app/assets/javascripts/v_libras/requests/new.js
app/assets/javascripts/v_libras/requests/workflow.js
app/views/layouts/application.html.erb
app/views/v_libras/requests/_position_step.haml
app/views/v_libras/requests/_service_step.haml
app/views/v_libras/requests/_size_step.haml
app/views/v_libras/requests/_video_step.haml
@@ -25,18 +25,18 @@ $(function () {
         var totalSteps = $("#vlibras-wizard .content section").size();
         if ((priorIndex === 0) && (currentIndex === 1)) {
-            VLibrasVideo.stop();
-            VLibrasSubAudio.play();
+            $("#video-step").find("video")[0].pause();
+            $("#service-step").find("video")[0].play();
         }
         if ((priorIndex === 1) && (currentIndex === 2)) {
-            VLibrasSubAudio.stop();
-            VLibrasPosition.play();
+            $("#service-step").find("video")[0].pause();
+            $("#position-step").find("video")[0].play();
         }
         if ((priorIndex === 2) && (currentIndex === 3)) {
-            VLibrasPosition.stop();
-            VLibrasSize.play();
+            $("#position-step").find("video")[0].pause();
+            $("#size-step").find("video")[0].play();
         }
         if ((currentIndex + 1) === totalSteps) {
@@ -107,7 +107,7 @@ $(function () {
         $('html, body').animate({
             scrollTop: $("#subtitle-upload").offset().top
-        }, 1000);
+        }, 600);
         return false;
     });
@@ -33,19 +33,20 @@ var VLibrasLocalization = function() {
         var interval = setInterval(function() {
             var time = Math.round( _video[0].currentTime * 10 ) / 10;
-            if (time !== time_helper){
-                $('.footnote').text(time);
-
+            if (time !== time_helper) {
                 for (var i = 0; i < _options.buttons.length; i++)
                     _createButton(i, time);
                 time_helper = time;
             }
-        }, 500);
+        }, 200);
     }
     function _createButton(index, time) {
-        if ((time > _options.buttons[index].start) && (_options.buttons[index].shown != true)) {
+        if ((time >= _options.buttons[index].start) && (_options.buttons[index].shown != true)) {
+            _options.buttons[index].shown = true;
+            console.debug("[VLibrasLocalization] showing " + _options.buttons[index]);
+
             var image = null;
             if (_options.buttons[index].clickable === true) {
@@ -62,14 +63,13 @@ var VLibrasLocalization = function() {
             image.css('left', _options.buttons[index].x);
             image.hide().appendTo(_video_wrapper).fadeIn(_options.buttons[index].delay);
-
-            _options.buttons[index].shown = true;
         }
-        if ((time > _options.buttons[index].end) && (_options.buttons[index].hidden != true)) {
-            $('#' + _options.buttons[index].id).fadeOut(_options.buttons[index].delay);
-
+        if ((time >= _options.buttons[index].end) && (_options.buttons[index].hidden != true) && (_options.buttons[index].shown === true)) {
+            console.debug("[VLibrasLocalization] hiding " + _options.buttons[index]);
             _options.buttons[index].hidden = true;
+
+            $('#' + _options.buttons[index].id).fadeOut(_options.buttons[index].delay);
         }
     }
@@ -90,7 +90,7 @@ var VLibrasLocalization = function() {
         },
         stop: function() {
-            /* _video[0].pause() */;
+            _video[0].pause();
         }
     }
 };
 \ No newline at end of file
@@ -5,6 +5,8 @@
   <%= javascript_include_tag "application" %>
   <%= yield :js %>
+  <%= yield :javascript_code %>
+
   <%= yield :css %>
   <%= stylesheet_link_tag    "application", :media => "all" %>
@@ -46,5 +48,6 @@
 <link href="//vjs.zencdn.net/4.6/video-js.css" rel="stylesheet">
 <script src="//vjs.zencdn.net/4.6/video.js"></script>
+
 </body>
 </html>
@@ -3,21 +3,22 @@
   = html5_video_tag(['/system/videos/workflow/localizacao.webm', '/system/videos/workflow/localizacao.mp4'], 'id-4', 'video-wizard')
-:javascript
-  $(function () {
-    var optionsPosition = {
-        video: { width: 940, height: 530 },
-        buttons: [ { id: 'b_loc_1', path: '/system/images/loc/p_1.png', clickable: false, start: 7.6, end: 8.5, x: 670, y: 340, delay: 300, value: null },
-                   { id: 'b_loc_2', path: '/system/images/loc/p_2.png', clickable: false, start: 10, end: 10.5, x: 160, y: 340, delay: 300, value: null },
-                   { id: 'b_loc_3', path: '/system/images/loc/p_3.png', clickable: false, start: 12, end: 12.5, x: 210, y: 40, delay: 300, value: null },
-                   { id: 'b_loc_4', path: '/system/images/loc/p_4.png', clickable: false, start: 14, end: 14.5, x: 650, y: 80, delay: 300, value: null },
-                   { id: 'b_loc_5', path: '/system/images/loc/p_4.png', clickable: true, start: 19.1, end: null, x: 30, y: 30, delay: 300, value: "superior-esquerdo" },
-                   { id: 'b_loc_6', path: '/system/images/loc/p_3.png', clickable: true, start: 19.1, end: null, x: 680, y: 30, delay: 300, value: "superior-direito" },
-                   { id: 'b_loc_7', path: '/system/images/loc/p_1.png', clickable: true, start: 19.1, end: null, x: 568, y: 410, delay: 300, value: "inferior-direito" },
-                   { id: 'b_loc_8', path: '/system/images/loc/p_2.png', clickable: true, start: 19.1, end: null, x: -310, y: 410, delay: 300, value: "inferior-esquerdo" }
-        ]
-    };
+- content_for :javascript_code do
+  :javascript
+    $(function () {
+      var optionsPosition = {
+          video: { width: 940, height: 530 },
+          buttons: [ { id: 'b_loc_1', path: '/system/images/loc/p_1.png', clickable: false, start: 7.6, end: 8.5, x: 670, y: 340, delay: 300, value: null },
+                     { id: 'b_loc_2', path: '/system/images/loc/p_2.png', clickable: false, start: 10, end: 10.5, x: 160, y: 340, delay: 300, value: null },
+                     { id: 'b_loc_3', path: '/system/images/loc/p_3.png', clickable: false, start: 12, end: 12.5, x: 210, y: 40, delay: 300, value: null },
+                     { id: 'b_loc_4', path: '/system/images/loc/p_4.png', clickable: false, start: 14, end: 14.5, x: 650, y: 80, delay: 300, value: null },
+                     { id: 'b_loc_5', path: '/system/images/loc/p_4.png', clickable: true, start: 19.1, end: 9999, x: 30, y: 30, delay: 300, value: "superior-esquerdo" },
+                     { id: 'b_loc_6', path: '/system/images/loc/p_3.png', clickable: true, start: 19.1, end: 9999, x: 680, y: 30, delay: 300, value: "superior-direito" },
+                     { id: 'b_loc_7', path: '/system/images/loc/p_1.png', clickable: true, start: 19.1, end: 9999, x: 568, y: 410, delay: 300, value: "inferior-direito" },
+                     { id: 'b_loc_8', path: '/system/images/loc/p_2.png', clickable: true, start: 19.1, end: 9999, x: -310, y: 410, delay: 300, value: "inferior-esquerdo" }
+          ]
+      };
-    var VLibrasPosition = new VLibrasLocalization();
-    VLibrasPosition.init("#position-step", optionsPosition);
-  });
 \ No newline at end of file
+      var VLibrasPosition = new VLibrasLocalization();
+      VLibrasPosition.init("#position-step", optionsPosition);
+    });
 \ No newline at end of file
@@ -11,18 +11,19 @@
       = file_field_tag 'subtitle', :id => 'subtitle-upload'
-:javascript
-  $(function () {
-    var optionsService = {
-        video: { width: 940, height: 530 },
-        buttons: [ { id: 'b_aS_1', path: '/system/images/sub_audio/p_1.png', clickable: false, start: 20, end: 21, x: 700, y: 390, delay: 300, value: null },
-                   { id: 'b_aS_2', path: '/system/images/sub_audio/p_2.png', clickable: false, start: 24.5, end: 25.5, x: 150, y: 410, delay: 300, value: null },
-                   { id: 'btn-video-legenda', path: '/system/images/sub_audio/p_1.png', clickable: true, start: 26, end: null, x: 790, y: 410, delay: 300 },
-                   { id: 'btn-video', path: '/system/images/sub_audio/p_2.png', clickable: true, start: 26, end: null, x: -80, y: 410, delay: 300 }
-        ]
-    };
+- content_for :javascript_code do
+  :javascript
+    $(function () {
+      var optionsService = {
+          video: { width: 940, height: 530 },
+          buttons: [ { id: 'b_aS_1', path: '/system/images/sub_audio/p_1.png', clickable: false, start: 20, end: 21, x: 700, y: 390, delay: 300, value: null },
+                     { id: 'b_aS_2', path: '/system/images/sub_audio/p_2.png', clickable: false, start: 24.5, end: 25.5, x: 150, y: 410, delay: 300, value: null },
+                     { id: 'btn-video-legenda', path: '/system/images/sub_audio/p_1.png', clickable: true, start: 26, end: 9999, x: 790, y: 410, delay: 300 },
+                     { id: 'btn-video', path: '/system/images/sub_audio/p_2.png', clickable: true, start: 26, end: 9999, x: -80, y: 410, delay: 300 }
+          ]
+      };
-    var VLibrasSubAudio = new VLibrasLocalization();
-    VLibrasSubAudio.init("#service-step", optionsService);
-  });
+      var VLibrasSubAudio = new VLibrasLocalization();
+      VLibrasSubAudio.init("#service-step", optionsService);
+    });
@@ -3,20 +3,21 @@
   = html5_video_tag(['/system/videos/workflow/tamanho.webm', '/system/videos/workflow/tamanho.mp4'], 'id-3', 'video-wizard')
-:javascript
-  $(function () {
-    var optionsSize = {
-        video: { width: 940, height: 530 },
-        buttons: [ { id: 'b_size_1', path: '/system/images/size/p_1.png', clickable: false, start: 6.8, end: 7.8, x: 770, y: 400, delay: 300, value: null },
-                   { id: 'b_size_2', path: '/system/images/size/p_2.png', clickable: false, start: 8.2, end: 9.2, x: 714, y: 355, delay: 300, value: null },
-                   { id: 'b_size_3', path: '/system/images/size/p_3.png', clickable: false, start: 9.7, end: 10.7, x: 658, y: 310, delay: 300, value: null},
-                   { id: 'b_size_4', path: '/system/images/size/p_1.png', clickable: true, start: 11.3, end: null, x: 780, y: 320, delay: 300, value: "pequeno" },
-                   { id: 'b_size_5', path: '/system/images/size/p_2.png', clickable: true, start: 11.3, end: null, x: 610, y: 320, delay: 300, value: "medio" },
-                   { id: 'b_size_6', path: '/system/images/size/p_3.png', clickable: true, start: 11.3, end: null, x: 384, y: 320, delay: 300, value: "grande" }
-        ]
-    };
+- content_for :javascript_code do
+  :javascript
+    $(function () {
+      var optionsSize = {
+          video: { width: 940, height: 530 },
+          buttons: [ { id: 'b_size_1', path: '/system/images/size/p_1.png', clickable: false, start: 6.8, end: 7.8, x: 770, y: 400, delay: 300, value: null },
+                     { id: 'b_size_2', path: '/system/images/size/p_2.png', clickable: false, start: 8.2, end: 9.2, x: 714, y: 355, delay: 300, value: null },
+                     { id: 'b_size_3', path: '/system/images/size/p_3.png', clickable: false, start: 9.7, end: 10.7, x: 658, y: 310, delay: 300, value: null},
+                     { id: 'b_size_4', path: '/system/images/size/p_1.png', clickable: true, start: 11.3, end: 9999, x: 780, y: 320, delay: 300, value: "pequeno" },
+                     { id: 'b_size_5', path: '/system/images/size/p_2.png', clickable: true, start: 11.3, end: 9999, x: 610, y: 320, delay: 300, value: "medio" },
+                     { id: 'b_size_6', path: '/system/images/size/p_3.png', clickable: true, start: 11.3, end: 9999, x: 384, y: 320, delay: 300, value: "grande" }
+          ]
+      };
-    var VLibrasSize = new VLibrasLocalization();
-    VLibrasSize.init("#size-step", optionsSize);
-  });
+      var VLibrasSize = new VLibrasLocalization();
+      VLibrasSize.init("#size-step", optionsSize);
+    });
@@ -11,15 +11,16 @@
       = file_field_tag 'video', :id => 'video-upload'
-:javascript
-  $(function () {
-    var optionsVideo = {
-        video: { width: 940, height: 530 },
-        buttons: [ ]
-    };
+- content_for :javascript_code do
+  :javascript
+    $(function () {
+      var optionsVideo = {
+          video: { width: 940, height: 530 },
+          buttons: [ '' ]
+      };
-    var VLibrasVideo = new VLibrasLocalization();
-    VLibrasVideo.init("#video-step", optionsVideo);
+      var VLibrasVideo = new VLibrasLocalization();
+      VLibrasVideo.init("#video-step", optionsVideo);
-    VLibrasVideo.play();
-  });
 \ No newline at end of file
+      VLibrasVideo.play();
+    })
 \ No newline at end of file