openModal: function()

in kitsune/sumo/static/sumo/js/markup.js [543:691]

• 97 lines of code
• 4 McCabe index (conditional complexity)

  openModal: function(ev) {
    var me = this,
      $editor = $(me.textarea).closest('.editor'),
      mediaSearchUrl = $editor.data('media-search-url'),
      galleryUrl = $editor.data('media-gallery-url'),
    // TODO: look at using a js template solution (jquery-tmpl?)
    $html = $(
      '<section class="marky">' +
        '<div class="filter cf">' +
            '<form class="simple-search-form" id="gallery-modal-search"><input type="text" name="q" class="searchbox"' +
            'placeholder="' + gettext('Search Gallery') + '" />' +
            '<button type="submit" class="submit-button search-button" title="' + gettext('Search Gallery') + '">' +
            gettext('Search Gallery') + '</button>' +
          '</form>' +
          '<div class="type">' +
            '<span>' + gettext('Show:') + '</span>' +
            '<ol><li data-type="image" class="selected">' + gettext('Images') + '</li>' +
            '<li data-type="video">' + gettext('Videos') + '</li></ol>' +
          '</div>' +
          '<div class="locale-filter">' + gettext('Show media for:') + ' <select></select>' +
          '</div>' +
        '</div>' +
        '<div class="placeholder">' + '</div>' +
          '<div class="submit sumo-button-wrap reverse-on-desktop align-end">' +
            '<button class="sumo-button primary-button">' + gettext('Insert Media') + '</button>' +
            '<a href="' + galleryUrl + '#upload" class="upload sumo-button secondary-button" target="_blank">' +
            gettext('Upload Media') + '</a>' +
            '<a href="#cancel" class="kbox-cancel sumo-button push-left">' + gettext('Cancel') + '</a>' +
          '</div>' +
      '</section>'
  ),
      selectedText = me.getSelectedText(),
      mediaType = $html.find('div.type li.selected').data('type'),
      mediaQ = '',
      mediaLocale = $('html').attr('lang'),
      mediaPage = 1,
      kbox;

    // Handle Images/Videos filter
    $html.find('div.type li').on("click", function(e) {
      var $this = $(this);
      if (!$this.is('.selected')) {
        $html.find('div.type li.selected').removeClass('selected');
        $this.addClass('selected');
        mediaType = $this.data('type');
        mediaPage = 1;
        updateResults();
      }
      e.preventDefault();
      return false;
    });

    // Handle locale filter
    var $lf = $html.find('div.locale-filter select');
    $lf.html($('#_languages-select-box').html());
    $lf.on('change', function() {
      mediaPage = 1;
      mediaLocale = $(this).val();
      updateResults();
    });

    // Handle Search
    $html.find('form#gallery-modal-search').on('submit', function(e) {
      mediaQ = $html.find('input[name="q"]').val();
      mediaPage = 1;
      updateResults();
      e.preventDefault();
      return false;
    });

    // Handle Upload link
    $html.find('a.upload').on("click", function(e) {
      // Close the modal. The link itself will open gallery in new tab/window.
      kbox.close();
    });

    // Handle pagination
    $html.on('click', 'ol.pagination a', function(e) {
      mediaPage = parseInt($(this).attr('href').split('&page=')[1], 10);
      updateResults();
      e.preventDefault();
      return false;
    });

    // Handle 'Insert Media' button click
    $html.find('div.submit button').on("click", function(e) {
      // Generate the wiki markup based on what the user has selected.
      me.reset();

      var $selected = $html.find('#media-list > li.selected');
      if ($selected.length < 1) {
        alert(gettext('Please select an image or video to insert.'));
        return false;
      }

      me.openTag = '[[';
      me.openTag += (mediaType === 'image') ? 'Image' : 'Video';
      me.openTag += ':' + $selected.find('a').attr('title') + ']] ';

      me.handleClick(e);
      kbox.close();
    });

    updateResults();

    // Update the media list via ajax call.
    function updateResults(type, q) {
      $html.addClass('processing');
      $.ajax({
        url: mediaSearchUrl,
        type: 'GET',
        data: {type: mediaType, q: mediaQ, page: mediaPage,
          locale: mediaLocale},
        dataType: 'html',
        success: function(html) {
          $html.find('div.placeholder').html(html);
          $html.find('#media-list > li').on("click", function(e) {
            let $this = $(this);
            let $mediaList = $(this).parent();
            $mediaList.find('li.selected').removeClass('selected');
            $this.addClass('selected');
            e.preventDefault();
            return false;
          });
        },
        error: function() {
          var message = gettext('Oops, there was an error.');
          $html.find('div.placeholder').html('<div class="msg">' +
            message + '</div>');
        },
        complete: function() {
          $html.removeClass('processing');
        }
      });
    }

    kbox = new KBox($html, {
      title: this.name,
      destroy: true,
      modal: true,
      id: 'media-modal',
      container: $('body'),
      position: 'none'
    });
    kbox.open();

    ev.preventDefault();
    return false;
  }