closedquestion-8.x-3.x-dev/assets/js/closedquestion_so.js

/**
 *@file
 *Javascript functions for the Select&Order questions.
 */

/**
 * Generate the answer string from the draggables, for the question with the
 * given id and puts it in the answer form field for that question.
 *
 * @param elementName string
 *   The element name of the question to generate the answer string for.
 *
 * @return TRUE
 */
function cqCheckAnswerSO(elementName) {
  var ulItems = document.getElementById(elementName + "targets").getElementsByTagName("ul");
  var answer = "";
  for (i = 0; i < ulItems.length; i++) {
    var ulItem = ulItems[i];
    answer += jQuery(ulItem).attr("cqvalue");
    var liItems = ulItem.getElementsByTagName("li");
    for (j = 0; j < liItems.length; j++) {
      answer += jQuery(liItems[j]).attr("cqvalue");
    }
  }
  var answerElement = jQuery('[name="' + elementName + 'selected"]');
  answerElement.val(answer);
}

/**
 * Removes an item from the selection.
 *
 * @param item draggable
 *   The item to remove.
 */
function cqRemoveItem(item) {
  var liItem = item.parentNode;
  var ulItem = liItem.parentNode;
  ulItem.removeChild(liItem);
  var listItem = ulItem.parentNode.parentNode;
  var longid = listItem.id;
  var id = longid.substring(0, longid.length - 7);
  cqCheckAnswerSO(id);
}

/**
 * Attach the code that makes the items sortable to a Drupal behaviour.
 */
Drupal.behaviors.closedQuestionSO = {
  attach: function ($context) {

    var questionId;
    var settings = drupalSettings.closedQuestion.so;
    var questionSettings;

    for (questionId in settings) {
      questionSettings = settings[questionId];

      /* create sortable */
      jQuery('.cqDropableList:not(.cqSort-processed)', $context).sortable({
        connectWith: ".cqDropableList",
        update: function (event, ui) {
          var listItem = ui.item[0].parentNode.parentNode.parentNode;
          var longid = listItem.id;
          var id = longid.substring(0, longid.length - 7);
          cqCheckAnswerSO(id);
        },
        remove: function (event, ui) {
          var listItem = ui.item[0].parentNode.parentNode.parentNode;
          var longid = listItem.id;
          var id = longid.substring(0, longid.length - 7);
          cqCheckAnswerSO(id);
        },
        receive: function(event, ui) {
          /* Re-initiate tooltips. */
          jQuery(this).find('.cqTooltipProcessed').removeClass('cqTooltipProcessed');
          cqInitTooltips(jQuery(this));
        }
      });

      /* special settings for 'onlyorder' questions */
      if (parseInt(questionSettings.onlyOrder, 10) === 1) {
        // only order: move all options to target and hide source.
        jQuery('.cqDropableList:not(.cqSort-processed) li', $context).each(function () {
          var $li = jQuery(this);
          var $target = jQuery('.cqDropableList');

          $target.append($li).sortable('option', 'update')(null, {"item": $li});
        });
        jQuery('.cqSource').hide();
      }

      /* create draggables */
      jQuery('.cqCopyList .cqDraggable:not(.cqDrag-processed)', $context).draggable({
        connectToSortable: "ul.cqDropableList",
        helper: "clone",
        zIndex: 1000

      });

      /* do some css tweaks */
      jQuery(".cqDDList").css("list-style-type", "none");
      jQuery(".cqDraggable").css("background-image", "none");

      jQuery('.cqDraggable:not(.cqX-processed)', $context).addClass('cqX-processed').prepend("<a class='remove' onclick='cqRemoveItem(this)'>X</a>");

      jQuery('.cqDropableList:not(.cqSelect-processed)', $context).disableSelection();

      // set flags to prevent double inits
      jQuery('.cqDropableList:not(.cqSort-processed)', $context).addClass('cqSort-processed');
      jQuery('.cqCopyList .cqDraggable:not(.cqDrag-processed)', $context).addClass('cqDrag-processed');
      jQuery('.cqDropableList:not(.cqSelect-processed)', $context).addClass('cqSelect-processed')

    }
  }
};