Fix I18n and double loading

app/assets/javascripts/protocols/steps.js.erb

@@ -315,19 +315,6 @@
     });
   }
 
-  function initAssetViewModeToggle(){
-    $('.attachments-actions').on('click', '.attachments-view-mode', function () {
-      var viewModeBtn = $(this);
-      $.post(viewModeBtn.closest('.dropdown-menu').data('view-mode-url'), {
-        assets_view_mode: viewModeBtn.data('assets-view-mode')
-      }, function(result) {
-        viewModeBtn.closest('.dropdown-menu').find('.attachments-view-mode').removeClass('selected');
-        viewModeBtn.addClass('selected');
-        viewModeBtn.closest('.step').find('.attachments').html(result.html)
-      })
-    })
-  }
-
   function initCallBacks() {
     if (typeof(applyCreateWopiFileCallback) === 'function') applyCreateWopiFileCallback();
     applyCheckboxCallBack();
@@ -336,8 +323,6 @@
     applyMoveStepCallBack();
     initDeleteStep();
     TinyMCE.highlight();
-    reorderAttachmentsInit();
-    initAssetViewModeToggle();
   }
 
   /*
@@ -620,57 +605,6 @@
     Comments.init();
   }
 
-  // Reorder attachments
-  function reorderAttachmentsInit() {
-    $('.attachments-actions').on('click', '.change-order', function(e){
-      var orderDropdown = $(this).closest('.dropdown-menu');
-      var assetsContainer = $(`.attachments[data-step-id=${orderDropdown.data('step-id')}]`)
-      var order = $(this).data('order');
-      e.preventDefault();
-      assetsContainer.data('order', order);
-      orderDropdown.find('.change-order').removeClass('selected');
-      $(this).addClass('selected');
-      assetsContainer.trigger('reorder');
-      $.post(orderDropdown.data('state-save-url'), {
-        assets: { order: order }
-      });
-    })
-
-    $('.attachments').on('reorder', function() {
-      var assets = $(`.attachments[data-step-id=${$(this).data('step-id')}] .asset`);
-      var order = $(this).data('order');
-      var sortedAssets = assets.sort(function(a, b) {
-        if (a.dataset.assetOrder == b.dataset.assetOrder) {
-          if (order == 'new') {
-            return b.dataset.assetUpdatedAt - a.dataset.assetUpdatedAt;
-          } if (order == 'old') {
-            return a.dataset.assetUpdatedAt - b.dataset.assetUpdatedAt;
-          } if (order == 'atoz') {
-            return a.dataset.assetFileName.toLowerCase() > b.dataset.assetFileName.toLowerCase() ? 1 : -1;
-          } if (order == 'ztoa') {
-            return b.dataset.assetFileName.toLowerCase() > a.dataset.assetFileName.toLowerCase() ? 1 : -1;
-          }
-        }
-
-        return a.dataset.assetOrder > b.dataset.assetOrder ? 1 : -1
-      })
-
-      $.each(sortedAssets, function(i, element){
-        element.style.order = i
-      })
-    })
-    .on('DOMSubtreeModified', function() {
-      $(this).trigger('reorder');
-    })
-    $('.attachments').trigger('reorder');
-  }
-
-  function initInlineAttachment() {
-    $(document).on('scroll', 'body', function(){
-      console.log(1)
-    })
-  }
-
     // On init
   initCallBacks();
   initHandsOnTable($(document));
@@ -690,6 +624,7 @@
 })(window);
 
 
+(function() {
   var StepInlineAttachments = (function() {
     function elementVisible(element) {
       var elementRect = element.getBoundingClientRect();
@@ -745,4 +680,65 @@ var StepInlineAttachments = (function() {
 
   })();
 
+    // Reorder attachments
+  function reorderAttachmentsInit() {
+    $('#steps').on('click', '.attachments-actions .change-order', function(e){
+      var orderDropdown = $(this).closest('.dropdown-menu');
+      var assetsContainer = $(`.attachments[data-step-id=${orderDropdown.data('step-id')}]`)
+      var order = $(this).data('order');
+      e.preventDefault();
+      assetsContainer.data('order', order);
+      orderDropdown.find('.change-order').removeClass('selected');
+      $(this).addClass('selected');
+      assetsContainer.trigger('reorder');
+      $.post(orderDropdown.data('state-save-url'), {
+        assets: { order: order }
+      });
+    })
+
+    $('#steps').on('reorder', '.attachments', function() {
+      var assets = $(`.attachments[data-step-id=${$(this).data('step-id')}] .asset`);
+      var order = $(this).data('order');
+      var sortedAssets = assets.sort(function(a, b) {
+        if (a.dataset.assetOrder == b.dataset.assetOrder) {
+          if (order == 'new') {
+            return b.dataset.assetUpdatedAt - a.dataset.assetUpdatedAt;
+          } if (order == 'old') {
+            return a.dataset.assetUpdatedAt - b.dataset.assetUpdatedAt;
+          } if (order == 'atoz') {
+            return a.dataset.assetFileName.toLowerCase() > b.dataset.assetFileName.toLowerCase() ? 1 : -1;
+          } if (order == 'ztoa') {
+            return b.dataset.assetFileName.toLowerCase() > a.dataset.assetFileName.toLowerCase() ? 1 : -1;
+          }
+        }
+
+        return a.dataset.assetOrder > b.dataset.assetOrder ? 1 : -1
+      })
+
+      $.each(sortedAssets, function(i, element){
+        element.style.order = i
+      })
+    })
+    .on('DOMSubtreeModified', function() {
+      $(this).trigger('reorder');
+    })
+    $('.attachments').trigger('reorder');
+  }
+
+  function initAssetViewModeToggle(){
+    $('#steps').on('click', '.attachments-actions .attachments-view-mode', function () {
+      var viewModeBtn = $(this);
+      $.post(viewModeBtn.closest('.dropdown-menu').data('view-mode-url'), {
+        assets_view_mode: viewModeBtn.data('assets-view-mode')
+      }, function(result) {
+        viewModeBtn.closest('.dropdown-menu').find('.attachments-view-mode').removeClass('selected');
+        viewModeBtn.addClass('selected');
+        viewModeBtn.closest('.step').find('.attachments').html(result.html)
+      })
+    })
+  }
+
   StepInlineAttachments.init();
+  reorderAttachmentsInit();
+  initAssetViewModeToggle();
+})();

app/views/steps/attachments/_list.html.erb

@@ -14,7 +14,7 @@
   <div class="actions">
     <div class="dropdown sci-dropdown">
       <button class="btn btn-light dropdown-toggle" type="button" id="dropdownAttachmentsOptions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-        <span>Manage</span>
+        <span><%= t("protocols.steps.attachments.manage") %></span>
         <span class="caret pull-right"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right dropdown-attachment-options"

config/locales/en.yml

@@ -1958,6 +1958,7 @@ en:
         uncomplete_title: "Restart step"
       attachments:
         modified_label: "Modified:"
+        manage: "Manage"
         add: "ADD"
         sort_by: "SORT BY"
         attachments_view_mode: "ALL ATTACHMENTS VIEW SIZE"