BigW Consortium Gitlab

preview_markdown.js 4.77 KB
Newer Older
1
/* eslint-disable func-names, no-var, object-shorthand, comma-dangle, prefer-arrow-callback */
2

3 4 5 6 7
// MarkdownPreview
//
// Handles toggling the "Write" and "Preview" tab clicks, rendering the preview,
// and showing a warning when more than `x` users are referenced.
//
Mike Greiling committed
8
(function () {
9 10 11 12
  var lastTextareaPreviewed;
  var markdownPreview;
  var previewButtonSelector;
  var writeButtonSelector;
Fatih Acet committed
13

Mike Greiling committed
14
  window.MarkdownPreview = (function () {
Fatih Acet committed
15 16
    function MarkdownPreview() {}

17
    // Minimum number of users referenced before triggering a warning
Fatih Acet committed
18 19 20 21
    MarkdownPreview.prototype.referenceThreshold = 10;

    MarkdownPreview.prototype.ajaxCache = {};

Mike Greiling committed
22
    MarkdownPreview.prototype.showPreview = function ($form) {
23
      var mdText;
24
      var preview = $form.find('.js-md-preview');
25 26 27 28 29
      if (preview.hasClass('md-preview-loading')) {
        return;
      }
      mdText = $form.find('textarea.markdown-area').val();

Fatih Acet committed
30 31
      if (mdText.trim().length === 0) {
        preview.text('Nothing to preview.');
32
        this.hideReferencedUsers($form);
33
      } else {
34
        preview.addClass('md-preview-loading').text('Loading...');
Mike Greiling committed
35
        this.fetchMarkdownPreview(mdText, (function (response) {
36
          preview.removeClass('md-preview-loading').html(response.body);
37
          preview.renderGFM();
38
          this.renderReferencedUsers(response.references.users, $form);
39
        }).bind(this));
Fatih Acet committed
40 41 42
      }
    };

Mike Greiling committed
43
    MarkdownPreview.prototype.fetchMarkdownPreview = function (text, success) {
44
      if (!window.preview_markdown_path) {
Fatih Acet committed
45 46 47
        return;
      }
      if (text === this.ajaxCache.text) {
48 49
        success(this.ajaxCache.response);
        return;
Fatih Acet committed
50
      }
51
      $.ajax({
Fatih Acet committed
52
        type: 'POST',
53
        url: window.preview_markdown_path,
Fatih Acet committed
54 55 56 57
        data: {
          text: text
        },
        dataType: 'json',
Mike Greiling committed
58
        success: (function (response) {
59 60 61
          this.ajaxCache = {
            text: text,
            response: response
Fatih Acet committed
62
          };
63 64
          success(response);
        }).bind(this)
Fatih Acet committed
65 66 67
      });
    };

Mike Greiling committed
68
    MarkdownPreview.prototype.hideReferencedUsers = function ($form) {
69
      $form.find('.referenced-users').hide();
Fatih Acet committed
70 71
    };

Mike Greiling committed
72
    MarkdownPreview.prototype.renderReferencedUsers = function (users, $form) {
Fatih Acet committed
73
      var referencedUsers;
74
      referencedUsers = $form.find('.referenced-users');
Fatih Acet committed
75 76 77
      if (referencedUsers.length) {
        if (users.length >= this.referenceThreshold) {
          referencedUsers.show();
78
          referencedUsers.find('.js-referenced-users-count').text(users.length);
Fatih Acet committed
79
        } else {
80
          referencedUsers.hide();
Fatih Acet committed
81 82 83 84 85
        }
      }
    };

    return MarkdownPreview;
Mike Greiling committed
86
  }());
Fatih Acet committed
87

88
  markdownPreview = new window.MarkdownPreview();
Fatih Acet committed
89 90 91 92 93 94 95

  previewButtonSelector = '.js-md-preview-button';

  writeButtonSelector = '.js-md-write-button';

  lastTextareaPreviewed = null;

Mike Greiling committed
96
  $.fn.setupMarkdownPreview = function () {
97
    var $form = $(this);
98 99 100
    $form.find('textarea.markdown-area').on('input', function () {
      markdownPreview.hideReferencedUsers($form);
    });
Fatih Acet committed
101 102
  };

Mike Greiling committed
103
  $(document).on('markdown-preview:show', function (e, $form) {
Fatih Acet committed
104 105 106 107
    if (!$form) {
      return;
    }
    lastTextareaPreviewed = $form.find('textarea.markdown-area');
108
    // toggle tabs
Fatih Acet committed
109 110
    $form.find(writeButtonSelector).parent().removeClass('active');
    $form.find(previewButtonSelector).parent().addClass('active');
111
    // toggle content
Fatih Acet committed
112 113
    $form.find('.md-write-holder').hide();
    $form.find('.md-preview-holder').show();
114
    markdownPreview.showPreview($form);
Fatih Acet committed
115 116
  });

Mike Greiling committed
117
  $(document).on('markdown-preview:hide', function (e, $form) {
Fatih Acet committed
118 119 120 121
    if (!$form) {
      return;
    }
    lastTextareaPreviewed = null;
122
    // toggle tabs
Fatih Acet committed
123 124
    $form.find(writeButtonSelector).parent().addClass('active');
    $form.find(previewButtonSelector).parent().removeClass('active');
125
    // toggle content
Fatih Acet committed
126 127
    $form.find('.md-write-holder').show();
    $form.find('textarea.markdown-area').focus();
128
    $form.find('.md-preview-holder').hide();
Fatih Acet committed
129 130
  });

Mike Greiling committed
131
  $(document).on('markdown-preview:toggle', function (e, keyboardEvent) {
Fatih Acet committed
132 133 134 135
    var $target;
    $target = $(keyboardEvent.target);
    if ($target.is('textarea.markdown-area')) {
      $(document).triggerHandler('markdown-preview:show', [$target.closest('form')]);
136
      keyboardEvent.preventDefault();
Fatih Acet committed
137 138 139
    } else if (lastTextareaPreviewed) {
      $target = lastTextareaPreviewed;
      $(document).triggerHandler('markdown-preview:hide', [$target.closest('form')]);
140
      keyboardEvent.preventDefault();
Fatih Acet committed
141 142 143
    }
  });

Mike Greiling committed
144
  $(document).on('click', previewButtonSelector, function (e) {
Fatih Acet committed
145 146 147
    var $form;
    e.preventDefault();
    $form = $(this).closest('form');
148
    $(document).triggerHandler('markdown-preview:show', [$form]);
Fatih Acet committed
149 150
  });

Mike Greiling committed
151
  $(document).on('click', writeButtonSelector, function (e) {
Fatih Acet committed
152 153 154
    var $form;
    e.preventDefault();
    $form = $(this).closest('form');
155
    $(document).triggerHandler('markdown-preview:hide', [$form]);
Fatih Acet committed
156
  });
157
}());