BigW Consortium Gitlab

preview_markdown.js 4.86 KB
Newer Older
1 2
/* eslint-disable func-names, space-before-function-paren, no-var, one-var, one-var-declaration-per-line, wrap-iife, no-else-return, consistent-return, object-shorthand, comma-dangle, no-param-reassign, padded-blocks, camelcase, prefer-arrow-callback, max-len */

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.
//
Fatih Acet committed
8 9 10
(function() {
  var lastTextareaPreviewed, markdownPreview, previewButtonSelector, writeButtonSelector;

11
  window.MarkdownPreview = (function() {
Fatih Acet committed
12 13
    function MarkdownPreview() {}

14
    // Minimum number of users referenced before triggering a warning
Fatih Acet committed
15 16 17 18
    MarkdownPreview.prototype.referenceThreshold = 10;

    MarkdownPreview.prototype.ajaxCache = {};

19
    MarkdownPreview.prototype.showPreview = function($form) {
Fatih Acet committed
20
      var mdText, preview;
21 22
      preview = $form.find('.js-md-preview');
      mdText = $form.find('textarea.markdown-area').val();
Fatih Acet committed
23 24
      if (mdText.trim().length === 0) {
        preview.text('Nothing to preview.');
25
        this.hideReferencedUsers($form);
Fatih Acet committed
26 27
      } else {
        preview.text('Loading...');
28 29 30
        this.renderMarkdown(mdText, (function(response) {
          preview.html(response.body);
          preview.renderGFM();
31
          this.renderReferencedUsers(response.references.users, $form);
32
        }).bind(this));
Fatih Acet committed
33 34 35 36
      }
    };

    MarkdownPreview.prototype.renderMarkdown = function(text, success) {
37
      if (!window.preview_markdown_path) {
Fatih Acet committed
38 39 40
        return;
      }
      if (text === this.ajaxCache.text) {
41 42
        success(this.ajaxCache.response);
        return;
Fatih Acet committed
43
      }
44
      $.ajax({
Fatih Acet committed
45
        type: 'POST',
46
        url: window.preview_markdown_path,
Fatih Acet committed
47 48 49 50
        data: {
          text: text
        },
        dataType: 'json',
51 52 53 54
        success: (function(response) {
          this.ajaxCache = {
            text: text,
            response: response
Fatih Acet committed
55
          };
56 57
          success(response);
        }).bind(this)
Fatih Acet committed
58 59 60
      });
    };

61 62
    MarkdownPreview.prototype.hideReferencedUsers = function($form) {
      $form.find('.referenced-users').hide();
Fatih Acet committed
63 64
    };

65
    MarkdownPreview.prototype.renderReferencedUsers = function(users, $form) {
Fatih Acet committed
66
      var referencedUsers;
67
      referencedUsers = $form.find('.referenced-users');
Fatih Acet committed
68 69 70
      if (referencedUsers.length) {
        if (users.length >= this.referenceThreshold) {
          referencedUsers.show();
71
          referencedUsers.find('.js-referenced-users-count').text(users.length);
Fatih Acet committed
72
        } else {
73
          referencedUsers.hide();
Fatih Acet committed
74 75 76 77 78 79 80
        }
      }
    };

    return MarkdownPreview;
  })();

81
  markdownPreview = new window.MarkdownPreview();
Fatih Acet committed
82 83 84 85 86 87 88 89

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

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

  lastTextareaPreviewed = null;

  $.fn.setupMarkdownPreview = function() {
90 91 92 93 94 95 96 97
    var $form = $(this);
    $form.find('textarea.markdown-area')
      .on('input', function() {
        markdownPreview.hideReferencedUsers($form);
      })
      .on('blur', function() {
        markdownPreview.showPreview($form);
      });
Fatih Acet committed
98 99 100 101 102 103 104
  };

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

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

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

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

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

}).call(this);