function append()

in pontoon/machinery/static/js/machinery.js [49:194]
93 lines of code
15 McCabe index (conditional complexity)

    function append(data) {
      let originalText = data.original;
      const sources = sourcesMap[data.original + data.translation],
        occurrencesTitle = 'Number of translation occurrences',
        translationText = data.translation;

      if (sources) {
        sources.append(
          '<li><a class="translation-source" href="' +
            data.url +
            '" target="_blank" rel="noopener noreferrer" title="' +
            data.title +
            '">' +
            '<span>' +
            data.source +
            '</span>' +
            (data.count
              ? '<sup title="' + occurrencesTitle + '">' + data.count + '</sup>'
              : '') +
            '</a></li>',
        );

        if (data.quality && sources.siblings('.stress').length === 0) {
          sources.prepend('<span class="stress">' + data.quality + '</span>');
        }
      } else {
        const originalTextForDiff = originalText;
        originalText = originalText ? diff(original, originalTextForDiff) : '';

        const li = $(
          '<li class="suggestion"' +
            ' title="Copy to clipboard"' +
            ' data-clipboard-text="' +
            self.doNotRender(translationText) +
            '">' +
            '<header>' +
            (data.quality
              ? '<span class="stress">' + data.quality + '</span>'
              : '') +
            '<ul class="sources">' +
            '<li data-source="' +
            data.source +
            '">' +
            '<a class="translation-source" href="' +
            data.url +
            '" target="_blank" rel="noopener noreferrer" title="' +
            data.title +
            '">' +
            '<span>' +
            data.source +
            '</span>' +
            (data.count
              ? '<sup title="' + occurrencesTitle + '">' + data.count + '</sup>'
              : '') +
            '</a>' +
            '</li>' +
            '</ul>' +
            '</header>' +
            '<p class="original">' +
            originalText +
            '</p>' +
            '<p class="translation" dir="' +
            self.locale.direction +
            '" lang="' +
            self.locale.code +
            '" data-script="' +
            self.locale.script +
            '">' +
            markPlaceables(translationText) +
            '</p>' +
            '<p class="translation-clipboard">' +
            self.doNotRender(translationText) +
            '</p>' +
            '</li>',
        );
        ul.append(li);
        sourcesMap[data.original + data.translation] = li.find('.sources');
        if (data.source === 'Translation memory') {
          preferred++;
        } else {
          remaining++;
        }
      }

      // Sort by quality
      const listitems = ul.children('li'),
        sourceMap = {
          'Translation memory': 1,
          'Google Translate': 2,
          'Systran Translate': 3,
          'Microsoft Translator': 4,
        };

      function getTranslationSource(el) {
        const sources = $(el).find('.translation-source span');

        if (sources.length > 1) {
          return Math.min.apply(
            Math,
            $.map(sources, function (elem) {
              return sourceMap[$(elem).text()];
            }),
          );
        } else {
          return sourceMap[sources.text()];
        }
      }

      listitems.sort(function (a, b) {
        const stressA = $(a).find('.stress'),
          stressB = $(b).find('.stress'),
          valA = stressA.length ? parseInt(stressA.html().split('%')[0]) : 0,
          valB = stressB.length ? parseInt(stressB.html().split('%')[0]) : 0,
          sourceA = getTranslationSource(a),
          sourceB = getTranslationSource(b);

        return valA < valB
          ? 1
          : valA > valB
            ? -1
            : sourceA > sourceB
              ? 1
              : sourceA < sourceB
                ? -1
                : 0;
      });

      ul.html(listitems);

      // Sort sources inside results.
      ul.find('.sources').each(function () {
        const $sourcesList = $(this),
          sources = $sourcesList.children('li'),
          sortedItems = sources.sort(function (a, b) {
            const sourceA = sourceMap[$(a).find('span').text()],
              sourceB = sourceMap[$(b).find('span').text()];
            return sourceA > sourceB ? 1 : sourceA < sourceB ? -1 : 0;
          });

        $sourcesList.children('li').remove();

        sortedItems.each(function () {
          $sourcesList.append(this);
        });
      });
    }