scinote-web/app/assets/javascripts/my_modules/results.js.erb

//= require assets
//= require comments

(function(global) {
  'use strict';

  global.Results = (function() {
    var ResultTypeEnum = Object.freeze({
      FILE: 0,
      TABLE: 1,
      TEXT: 2,
      COMMENT: 3
    });

    function init() {
      initHandsOnTables($(document));
      _expandAllResults();
      _initTutorial();
      applyCollapseLinkCallBack();

      Comments.bindNewElement();
      Comments.initialize();

      Comments.initCommentOptions('ul.content-comments');
      Comments.initEditComments('#results');
      Comments.initDeleteComments('#results');

      $(function () {
        $('#results-collapse-btn').click(function () {
          $('.result .panel-collapse').collapse('hide');
          $(document).find('span.collapse-result-icon').each(function()  {
            $(this).addClass('glyphicon-collapse-down');
            $(this).removeClass('glyphicon-collapse-up');
          });
        });

        $('#results-expand-btn').click(_expandAllResults);
      });

      // This checks if the ctarget param exist in the rendered url and opens the
      // comment tab
      if( getParam('ctarget') ){
        var target = '#'+ getParam('ctarget');
        $(target).find('a.comment-tab-link').click();
      }
    }

    function initHandsOnTables(root) {
      root.find('div.hot-table').each(function()  {
        var $container = $(this).find('.step-result-hot-table');
        var contents = $(this).find('.hot-contents');

        $container.handsontable({
          width: '100%',
          startRows: 5,
          startCols: 5,
          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');
        var data = JSON.parse(contents.attr('value'));
        hot.loadData(data.data);
      });
    }

    function applyCollapseLinkCallBack() {
      $('.result-panel-collapse-link')
        .on('ajax:success', function() {
          var collapseIcon = $(this).find('.collapse-result-icon');
          var collapsed = $(this).hasClass('collapsed');
          // Toggle collapse button
          collapseIcon.toggleClass('glyphicon-collapse-up', !collapsed);
          collapseIcon.toggleClass('glyphicon-collapse-down', collapsed);
        });
    }

    // Toggle editing buttons
    function toggleResultEditButtons(show) {
      if(show) {
        $('#results-toolbar').show();
        $('.edit-result-button').show();
      } else {
        $('.edit-result-button').hide();
        $('#results-toolbar').hide();
      }
    }

    // Expand all results
    function _expandAllResults() {
      $('.result .panel-collapse').collapse('show');
      $(document).find('span.collapse-result-icon').each(function()  {
        $(this).addClass('glyphicon-collapse-up');
        $(this).removeClass('glyphicon-collapse-down');
      });
      $(document).find('div.step-result-hot-table').each(function()  {
        _renderTable(this);
      });
    }

    function expandResult(result) {
      $('.panel-collapse', result).collapse('show');
      $(result).find('span.collapse-result-icon').each(function()  {
        $(this).addClass('glyphicon-collapse-up');
        $(this).removeClass('glyphicon-collapse-down');
      });
      _renderTable($(result).find('div.step-result-hot-table'));
      animateSpinner(null, false);
      setupAssetsLoading();
    }

    function _renderTable(table) {
      $(table).handsontable('render');
      // Yet another dirty hack to solve HandsOnTable problems
      if (parseInt($(table).css('height'), 10) <
            parseInt($(table).css('max-height'), 10) - 30) {
        $(table).find('.ht_master .wtHolder').css({ 'height': '100%',
                                                     'width': '100%' });
      }
    }

    /**
     * Initializes tutorial
     */
    function _initTutorial() {
      var stepNum = parseInt(Cookies.get('current_tutorial_step'), 10);
      if (stepNum >= 15 && stepNum <= 16) {
        var samplesTab = $('#module-samples-nav-tab');

        var nextPage = samplesTab.find('a').attr('href');
        var steps = [{
          element: $('#results-toolbar')[0],
          intro: I18n.t('tutorial.module_results_html')
        }, {
          element: samplesTab[0],
          intro: I18n.t('tutorial.module_results_click_samples_html'),
          position: 'left'
        }];
        initPageTutorialSteps(15, 16, nextPage, function() {}, function() {},
         steps);
      }
    }

    function processResult(ev, resultTypeEnum, editMode) {
      var $form = $(ev.target.form);
      $form.clearFormErrors();

      switch(resultTypeEnum) {
        case ResultTypeEnum.FILE:
          _handleResultFileSubmit($form, ev);
          break;
        case ResultTypeEnum.TABLE:
          var $nameInput = $form.find('#result_name');
          var nameValid = textValidator(ev, $nameInput, 0,
            <%= Constants::NAME_MAX_LENGTH %>);
          break;
        case ResultTypeEnum.TEXT:
          var $nameInput = $form.find('#result_name');
          var nameValid = textValidator(ev, $nameInput, 0,
            <%= Constants::NAME_MAX_LENGTH %>);
          var $descrTextarea = $form.find("#result_result_text_attributes_text");
          var $tinyMCEInput = TinyMCE.getContent();
          textValidator(ev, $descrTextarea, 1, <%= Constants::TEXT_MAX_LENGTH %>, false, $tinyMCEInput);
          break;
        case ResultTypeEnum.COMMENT:
          var $commentInput = $form.find('#comment_message');
          var commentValid = textValidator(ev, $commentInput, 1,
            <%= Constants::TEXT_MAX_LENGTH %>);
          break;
      }
    }

    // create custom ajax request in order to fix issuses with remote: true from
    function _handleResultFileSubmit(form, ev) {
      ev.preventDefault();
      ev.stopPropagation();
      animateSpinner();
      var data = new FormData();
      var file = document.getElementById('result_asset_attributes_file')
                         .files[0];
      data.append('result[name]', form.find('#result_name').val());
      data.append('result[asset_attributes][id]',
                  form.find('#result_asset_attributes_id').val());
      if( file ) {
        data.append('result[asset_attributes][file]', file);
      }

      $.ajax({
        type: 'PUT',
        url: form.attr('action'),
        data: data,
        success: function(data) {
          animateSpinner(null, false);
          $('.edit_result').parent().remove();
          $(data.html).prependTo('#results').promise().done(function() {
            $.each($('#results').find('.result'),
                   function() {
              initFormSubmitLinks($(this));
              ResutlAssets.applyEditResultAssetCallback();
              applyCollapseLinkCallBack();
              toggleResultEditButtons(true);
              initPreviewModal();
              Comments.initialize();
              ResutlAssets.initNewResultAsset();
              expandResult($(this));
            });

          });
          $('#results-toolbar').show();
        },
        error: function(XHR) {
          animateSpinner(null, false)
          $('.edit_result').renderFormErrors('result',
                                             XHR.responseJSON['errors']);

        },
        processData: false,
        contentType: false,
      });
    }

    // init cancel button
    function initCancelFormButton(form, callback) {
      $(form).find('.cancel-new').click(function(event) {
        event.preventDefault();
        event.stopPropagation();
        event.stopImmediatePropagation();
        $(form).remove();
        toggleResultEditButtons(true);
        callback();
      });
    }

    function archive(e, element) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      var el = $(element);
      if(confirm(el.data('confirm-text'))) {
        animateSpinner();
        $('#' + el.data('form-id')).submit();
      }
    }

    var publicAPI = Object.freeze({
      init: init,
      initHandsOnTables: initHandsOnTables,
      applyCollapseLinkCallBack: applyCollapseLinkCallBack,
      toggleResultEditButtons: toggleResultEditButtons,
      expandResult: expandResult,
      processResult: processResult,
      ResultTypeEnum: ResultTypeEnum,
      initCancelFormButton: initCancelFormButton,
      archive: archive
    });

    return publicAPI;
  })();

  $(document).ready(function(){
    Results.init();
  });
})(window);