MiraitSystems/enju_trunk

<script>
  /**
   * 分類フィールド
   * 
   */
  var ItemFieldClassificationSelect2 = {
    // Classification select2 options
    classificationSlect2options: {
      multiple: false,
      minimumInputLength: 1,
      width: "260px",
      allowClear: true,
      placeholder: <%= raw t("classification.search_placeholder").to_json %>,
      formatNoMatches: function(term) {
        return "'" + term + "' " + <%= raw t("classification.search_nomatch").to_json %>;
      },
      formatSearching: function() {
        return <%= raw t("classification.search_searching").to_json %>;
      },
      formatInputTooShort: function(term, minLength){
        return <%= raw t("classification.search_placeholder").to_json %>;
      },
      ajax: {
        url: "/classifications/search_name.json",
        dataType: 'json',
        data: function (term, page) {
          var currentNumber = $(this).attr('id').match(/\d+/);
          var classificationTypeId = $('#classifications_' + currentNumber + '_classification_type_id').val();
          return {
            classification_type_id: classificationTypeId,
            search_phrase: term,
          };
        },
        results: function (data, page) {
            return {results: data};
        },
      },
      initSelection: function(element, callback) {
        var id = $(element).val();
        if (id != "") {
          $.ajax("/classifications/search_name.json?classification_id=" + id, {
              dataType: "json"
         }).done(function(data) { callback(data); });
        }
      },
    },
    // ClassificationType select2 options
    classificationTypeSlect2options: {
      width: "200px",
      matcher: function(term, text, opt) {
        return text.toUpperCase().indexOf(term.toUpperCase())==0
            || opt.attr("alt").toUpperCase().indexOf(term.toUpperCase())==0;
      },
    },
    currentNumber : <%= raw (@classifications.size).to_json %>,
    actionTemplate : ''
      + '<%= button_to_function t('page.add_line'), "ItemFieldClassificationSelect2.add()" %>'
      + '<%= button_to_function t('page.del_line'), "ItemFieldClassificationSelect2.remove(__count__)" %>',
    add : function () {
      var newField = $("<div/>").attr("id", "CLASSIFICATION" + this.currentNumber).attr('class', 'row2');
      var classificationTypeFieldId = $("div[id ^= 'CLASSIFICATION']:first").find("select[id $= 'classification_type_id']").attr('id');
      var classificationFieldId = $("div[id ^= 'CLASSIFICATION']:first").find("input[id $= 'classification_id']").attr('id');
      var cloneClassificationType = this.cloneField(classificationTypeFieldId);
      var cloneClassificationId = this.cloneField(classificationFieldId);
      var actionButton = this.actionTemplate.replace(/__count__/mg, this.currentNumber);
      
      newField.append(cloneClassificationType).append(cloneClassificationId).append(actionButton);

      cloneClassificationType.select2(this.classificationTypeSlect2options);
      cloneClassificationId.val('');
      cloneClassificationId.select2(this.classificationSlect2options);

      $("#classifications").append(newField);

      this.currentNumber += 1;
    },
    remove : function (trNumber) {
      if($("div[id ^= 'CLASSIFICATION']").length == 1) this.add();
      removeDivField('CLASSIFICATION', trNumber);
    },
    cloneField : function (fieldId) {
      return $('#' + fieldId).clone().attr({
          'id' : $('#' + fieldId).attr('id').replace(/_\d+_/, '_' + this.currentNumber + '_'),
          'name' : $('#' + fieldId).attr('name').replace(/\[\d+\]/, '[' + this.currentNumber + ']'),
      });
    },
  };
  
  $(document).ready(function() {
    $("select[id $= 'classification_type_id']").select2(ItemFieldClassificationSelect2.classificationTypeSlect2options);
    $("input[id $= 'classification_id']").select2(ItemFieldClassificationSelect2.classificationSlect2options);
  });

  /**
   * ClassificationType deselect
   * 
   */
  $(document).on("select2-selecting", "select[id $= 'classification_type_id']", function(e){
    var targetId = e.target.id
    var targetNumber = targetId.match(/_(\d+)_/);
    $("#classifications_" + targetNumber[1] + "_classification_id").select2('val', '');
  });

</script>

<div class="row">
  <div><%= f.label t('activerecord.models.classification') -%></div>
  <div id="classifications">
    <% @classifications.each_with_index do |classification, index| -%>
      <div id="CLASSIFICATION<%= index %>" class="row2">
        <%= select2_tag("classifications_#{index}_classification_type_id", 
                        "classifications[][classification_type_id]", 
                        @classification_types,
                        classification[:classification_type_id],
                        :width => 200, :select_attribute => :id, :display_attribute => :display_name
                        ) %>
        <%= text_field_tag "classifications[][classification_id]",
          classification[:classification_id], 
          :id => "classifications_#{index}_classification_id", 
          :class => "classification_id" %>
        <%= button_to_function t('page.add_line'), "ItemFieldClassificationSelect2.add()" %>
        <%= button_to_function t('page.del_line'), "ItemFieldClassificationSelect2.remove(#{index})" %>
      </div>
    <% end %>
  </div>
</div>