openModal: function()

in kitsune/sumo/static/sumo/js/markup.js [301:511]


  openModal: function(ev) {
    var me = this,
    // TODO: look at using a js template solution (jquery-tmpl?)
      $html = $(
          '<section class="marky">' +
          '<div class="field">' +
          '<label>' + gettext('Link text:') + '</label>' +
          '<input type="text" name="link-text" />' +
          '</div>' +
          '<div class="field">' +
          '<label>' + gettext('Link target:') + '</label>' +
          '<ol><li class="field"><div class="field radio is-condensed"><input type="radio" name="link-type" id="id_link-type-internal" value="internal" /><label for="id_link-type-internal">' +
          gettext('Support article:') + '</label></div>' +
          '<input type="text" name="internal" placeholder="' +
          gettext('Enter the name of the article') + '" /></li>' +
          '<li class="field"><div class="field radio is-condensed"><input type="radio" name="link-type" id="id_link-type-external" value="external" /><label for="id_link-type-external">' +
          gettext('External link:') + '</label></div>' +
          '<input type="text" name="external" placeholder="' +
          gettext('Enter the URL of the external link') + '" /></li>' +
          '</ol><div class="submit sumo-button-wrap align-full reverse-on-desktop"><button type="button" class="sumo-button primary-button"></button>' +
          '<a href="#cancel" class="kbox-cancel sumo-button secondary-button">' + gettext('Cancel') +
          '</a></div></section>' // whew, yuck!?
      ),
      selectedText = me.getSelectedText(),
      kbox;

    $html.find('li input[type="text"]').on('focus', function() {
      $(this).closest('li').find('input[type="radio"]').trigger("click");
    });

    // Perform a query for the sections of an article if
    // last character is a pound:
    var performSectionSearch = function(request) {
      return (request.term.indexOf('#') === request.term.length - 1);
    };

    var results = [];

    // Get the article URL by providing the article name:
    var getArticleURL = function(name) {
      for (var i = 0; i < results.length; i++) {
        if (name === results[i].label) {
          return results[i].url;
        }
      }

      return null;
    };

    var articleSearch = function(request, response) {
      results = [];
      $.ajax({
        url: '/en-US/search',
        data: {
          format: 'json',
          q: request.term,
          a: 1,
          w: 1,
          language: $('html').attr('lang')
        },
        dataType: 'json',
        success: function(data, textStatus) {
          $.map(data.results, function(val, i) {
            results.push({
              label: val.title,
              url: val.url
            });
          });
          response(results);
        }
      });
    };

    var sectionSearch = function(request, response) {
      var articleName = request.term.split('#')[0];
      var articleURL = getArticleURL(articleName);

      if (!articleURL) {
        return;
      }

      $.ajax({
        url: articleURL,
        dataType: 'text',
        success: function(data, status) {
          var headings = $("[id^='w_']", data);
          var array = [];

          if (headings.length === 0) {
            array.push({
              label: gettext('No sections found'),
              value: request.term.replace('#', ''),
              target: ''
            });
          }

          headings.each(function() {
            var element = this.nodeName;
            var level = element.substring(1);
            var label = $(this).text();
            var target = $(this).attr('id');
            var value = request.term + target;

            array.push({
              label: label,
              value: value,
              target: target
            });
          });
          response(array);
        }
      });
    };

    $html.find('input[name="internal"]').autocomplete({
      source: function(request, response) {
        if (performSectionSearch(request)) {
          sectionSearch(request, response);
        } else {
          articleSearch(request, response);
        }
      },
      select: function(event, ui) {
        if (!ui.item.target) {
          return;
        }

        var $linktext = $html.find('input[name=link-text]');
        if ($linktext.val() === '') {
          $linktext.val(ui.item.label);
        }
      }
    });

    $html.find('button').text(gettext('Insert Link')).on("click", function(e) {
      // Generate the wiki markup based on what the user has selected
      // (interval vs external links) and entered into the textboxes,
      // if anything.
      var val = $html.find('input[type="radio"]:checked').val(),
        text = $html.find('input[name=link-text]').val(),
        $internal = $html.find('input[name="internal"]'),
        $external = $html.find('input[name="external"]');
      me.reset();
      if (val === 'internal') {
        var title = $internal.val();
        if (title) {
          if (title === selectedText) {
            // The title wasn't changed, so lets keep it selected.
            me.openTag = '[[';
            me.closeTag = ']]';
            if (text) {
              me.closeTag = '|' + text + me.closeTag;
            }
          } else {
            // The title changed, so lets insert link before the cursor.
            me.openTag = '[[' + title;
            if (text) {
              me.openTag += '|' + text;
            }
            me.openTag += ']] ';
            me.closeTag = '';
            me.defaultText = '';
          }
        } else {
          me.openTag = '[[';
          me.closeTag = ']]';
          if (text) {
            me.closeTag = '|' + text + ']]';
          }
          me.defaultText = gettext('Knowledge Base Article');
        }
      } else {
        var link = $external.val();
        if (link) {
          if (link.indexOf('http') !== 0) {
            link = 'http://' + link;
          }
          me.openTag = '[' + link + ' ';
          if (text) {
            me.openTag += text + '] ';
            me.closeTag = '';
            me.defaultText = '';
          }
        } else if (text) {
          me.defaultText = text;
        }
      }

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

    if (selectedText) {
      // If there user has selected text, lets default to it being
      // the Article Title.
      $html.find('input[name="internal"]').val(selectedText).trigger("focus");
    }

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

    ev.preventDefault();
    return false;
  }