scinote-web/app/assets/javascripts/protocols/steps.js.erb

//= require Sortable.min

(function(global) {
  'use strict';

  // Creates handsontable where needed
  function initHandsOnTable(root) {
    root.find("[data-role='hot-table']").each(function()  {
      var $container = $(this).find("[data-role='step-hot-table']");
      var contents = $(this).find('.hot-contents');

      $container.handsontable({
        startRows: <%= Constants::HANDSONTABLE_INIT_ROWS_CNT %>,
        startCols: <%= Constants::HANDSONTABLE_INIT_COLS_CNT %>,
        rowHeaders: true,
        colHeaders: true,
        fillHandle: false,
        formulas: true,
        cells: function (row, col, prop) {
          var cellProperties = {};

          if (col >= 0)
            cellProperties.readOnly = true;
          else
            cellProperties.readOnly = false;

          return cellProperties;
        }
      });
      var hot = $container.handsontable('getInstance');

      if (contents.attr("value")) {
        var data = JSON.parse(contents.attr("value"));
        if (Array.isArray(data.data)) hot.loadData(data.data);
        setTimeout(() => {
          hot.render()
        }, 0)
      }
    });
  }

  // On init

  initHandsOnTable($(document));

  $('[class*=language]').each((i, block) => {
    hljs.highlightBlock(block);
  });

  SmartAnnotation.preventPropagation('.atwho-user-popover');

  $(function () {
    $("[data-action='collapse-steps']").click(function () {
      $('.step .panel-collapse').collapse('hide');
    });
  });

  global.initHandsOnTable = initHandsOnTable;
})(window);

(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', '.attachments', 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);
        PdfPreview.initCanvas();
      })
    })
  }

  reorderAttachmentsInit();
  initAssetViewModeToggle();
});