관리-도구

편집 파일: control.js

import "./control.scss";

/* global kirkiControlLoader */
/* eslint max-depth: 0 */
/* eslint no-useless-escape: 0 */
var RepeaterRow = function (rowIndex, container, label, control) {
  var self = this;
  this.rowIndex = rowIndex;
  this.container = container;
  this.label = label;
  this.header = this.container.find(".repeater-row-header");

this.header.on("click", function () {
    self.toggleMinimize();
  });

this.container.on("click", ".repeater-row-remove", function () {
    self.remove();
  });

this.header.on("mousedown", function () {
    self.container.trigger("row:start-dragging");
  });

this.container.on("keyup change", "input, select, textarea", function (e) {
    self.container.trigger("row:update", [
      self.rowIndex,
      jQuery(e.target).data("field"),
      e.target,
    ]);
  });

this.setRowIndex = function (rowNum) {
    this.rowIndex = rowNum;
    this.container.attr("data-row", rowNum);
    this.container.data("row", rowNum);
    this.updateLabel();
  };

this.toggleMinimize = function () {
    // Store the previous state.
    this.container.toggleClass("minimized");
    this.header
      .find(".dashicons")
      .toggleClass("dashicons-arrow-up")
      .toggleClass("dashicons-arrow-down");
  };

this.remove = function () {
    this.container.slideUp(300, function () {
      jQuery(this).detach();
    });
    this.container.trigger("row:remove", [this.rowIndex]);
  };

this.updateLabel = function () {
    var rowLabelField, rowLabel, rowLabelSelector;

if ("field" === this.label.type) {
      rowLabelField = this.container.find(
        '.repeater-field [data-field="' + this.label.field + '"]'
      );
      if (_.isFunction(rowLabelField.val)) {
        rowLabel = rowLabelField.val();
        if ("" !== rowLabel) {
          if (!_.isUndefined(control.params.fields[this.label.field])) {
            if (!_.isUndefined(control.params.fields[this.label.field].type)) {
              if ("select" === control.params.fields[this.label.field].type) {
                if (
                  !_.isUndefined(
                    control.params.fields[this.label.field].choices
                  ) &&
                  !_.isUndefined(
                    control.params.fields[this.label.field].choices[
                      rowLabelField.val()
                    ]
                  )
                ) {
                  rowLabel =
                    control.params.fields[this.label.field].choices[
                      rowLabelField.val()
                    ];
                }
              } else if (
                "radio" === control.params.fields[this.label.field].type ||
                "radio-image" === control.params.fields[this.label.field].type
              ) {
                rowLabelSelector =
                  control.selector +
                  ' [data-row="' +
                  this.rowIndex +
                  '"] .repeater-field [data-field="' +
                  this.label.field +
                  '"]:checked';
                rowLabel = jQuery(rowLabelSelector).val();
              }
            }
          }
          this.header.find(".repeater-row-label").text(rowLabel);
          return;
        }
      }
    }
    this.header
      .find(".repeater-row-label")
      .text(this.label.value + " " + (this.rowIndex + 1));
  };
  this.updateLabel();
};

wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
  // When we're finished loading continue processing
  ready: function () {
    var control = this;

// Init the control.
    if (
      !_.isUndefined(window.kirkiControlLoader) &&
      _.isFunction(kirkiControlLoader)
    ) {
      kirkiControlLoader(control);
    } else {
      control.initKirkiControl();
    }
  },

initKirkiControl: function (control) {
    var limit, theNewRow, settingValue;
    control = control || this;

// The current value set in Control Class (set in Kirki_Customize_Repeater_Control::to_json() function)
    settingValue = control.params.value;

// The hidden field that keeps the data saved (though we never update it)
    control.settingField = control.container
      .find("[data-customize-setting-link]")
      .first();

// Set the field value for the first time, we'll fill it up later
    control.setValue([], false);

// The DIV that holds all the rows
    control.repeaterFieldsContainer = control.container
      .find(".repeater-fields")
      .first();

// Set number of rows to 0
    control.currentIndex = 0;

// Save the rows objects
    control.rows = [];

// Default limit choice
    limit = false;
    if (!_.isUndefined(control.params.choices.limit)) {
      limit =
        0 >= control.params.choices.limit
          ? false
          : parseInt(control.params.choices.limit, 10);
    }

control.container.on("click", "button.repeater-add", function (e) {
      e.preventDefault();
      if (!limit || control.currentIndex < limit) {
        theNewRow = control.addRow();
        theNewRow.toggleMinimize();
        control.initColorPicker();
        control.initSelect(theNewRow);
      } else {
        jQuery(control.selector + " .limit").addClass("highlight");
      }
    });

control.container.on("click", ".repeater-row-remove", function () {
      control.currentIndex--;
      if (!limit || control.currentIndex < limit) {
        jQuery(control.selector + " .limit").removeClass("highlight");
      }
    });

control.container.on(
      "click keypress",
      ".repeater-field-image .upload-button,.repeater-field-cropped_image .upload-button,.repeater-field-upload .upload-button",
      function (e) {
        e.preventDefault();
        control.$thisButton = jQuery(this);
        control.openFrame(e);
      }
    );

control.container.on(
      "click keypress",
      ".repeater-field-image .remove-button,.repeater-field-cropped_image .remove-button",
      function (e) {
        e.preventDefault();
        control.$thisButton = jQuery(this);
        control.removeImage(e);
      }
    );

control.container.on(
      "click keypress",
      ".repeater-field-upload .remove-button",
      function (e) {
        e.preventDefault();
        control.$thisButton = jQuery(this);
        control.removeFile(e);
      }
    );

/**
     * Function that loads the Mustache template
     */
    control.repeaterTemplate = _.memoize(function () {
      var compiled,
        /*
         * Underscore's default ERB-style templates are incompatible with PHP
         * when asp_tags is enabled, so WordPress uses Mustache-inspired templating syntax.
         *
         * @see trac ticket #22344.
         */
        options = {
          evaluate: /<#([\s\S]+?)#>/g,
          interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
          escape: /\{\{([^\}]+?)\}\}(?!\})/g,
          variable: "data",
        };

return function (data) {
        compiled = _.template(
          control.container
            .find(".customize-control-repeater-content")
            .first()
            .html(),
          null,
          options
        );
        return compiled(data);
      };
    });

// When we load the control, the fields have not been filled up
    // This is the first time that we create all the rows
    if (settingValue.length) {
      _.each(settingValue, function (subValue) {
        theNewRow = control.addRow(subValue);
        control.initColorPicker();
        control.initSelect(theNewRow, subValue);
      });
    }

control.repeaterFieldsContainer.sortable({
      handle: ".repeater-row-header",
      update: function () {
        control.sort();
      },
    });
  },

/**
   * Open the media modal.
   *
   * @param {Object} event - The JS event.
   * @returns {void}
   */
  openFrame: function (event) {
    if (wp.customize.utils.isKeydownButNotEnterEvent(event)) {
      return;
    }

if (
      this.$thisButton
        .closest(".repeater-field")
        .hasClass("repeater-field-cropped_image")
    ) {
      this.initCropperFrame();
    } else {
      this.initFrame();
    }

this.frame.open();
  },

initFrame: function () {
    var libMediaType = this.getMimeType();

this.frame = wp.media({
      states: [
        new wp.media.controller.Library({
          library: wp.media.query({ type: libMediaType }),
          multiple: false,
          date: false,
        }),
      ],
    });

// When a file is selected, run a callback.
    this.frame.on("select", this.onSelect, this);
  },

/**
   * Create a media modal select frame, and store it so the instance can be reused when needed.
   * This is mostly a copy/paste of Core api.CroppedImageControl in /wp-admin/js/customize-control.js
   *
   * @returns {void}
   */
  initCropperFrame: function () {
    // We get the field id from which this was called
    var currentFieldId = this.$thisButton
        .siblings("input.hidden-field")
        .attr("data-field"),
      attrs = ["width", "height", "flex_width", "flex_height"], // A list of attributes to look for
      libMediaType = this.getMimeType();

// Make sure we got it
    if (_.isString(currentFieldId) && "" !== currentFieldId) {
      // Make fields is defined and only do the hack for cropped_image
      if (
        _.isObject(this.params.fields[currentFieldId]) &&
        "cropped_image" === this.params.fields[currentFieldId].type
      ) {
        //Iterate over the list of attributes
        attrs.forEach(
          function (el) {
            // If the attribute exists in the field
            if (!_.isUndefined(this.params.fields[currentFieldId][el])) {
              // Set the attribute in the main object
              this.params[el] = this.params.fields[currentFieldId][el];
            }
          }.bind(this)
        );
      }
    }

this.frame = wp.media({
      button: {
        text: "Select and Crop",
        close: false,
      },
      states: [
        new wp.media.controller.Library({
          library: wp.media.query({ type: libMediaType }),
          multiple: false,
          date: false,
          suggestedWidth: this.params.width,
          suggestedHeight: this.params.height,
        }),
        new wp.media.controller.CustomizeImageCropper({
          imgSelectOptions: this.calculateImageSelectOptions,
          control: this,
        }),
      ],
    });

this.frame.on("select", this.onSelectForCrop, this);
    this.frame.on("cropped", this.onCropped, this);
    this.frame.on("skippedcrop", this.onSkippedCrop, this);
  },

onSelect: function () {
    var attachment = this.frame.state().get("selection").first().toJSON();

if (
      this.$thisButton
        .closest(".repeater-field")
        .hasClass("repeater-field-upload")
    ) {
      this.setFileInRepeaterField(attachment);
    } else {
      this.setImageInRepeaterField(attachment);
    }
  },

/**
   * After an image is selected in the media modal, switch to the cropper
   * state if the image isn't the right size.
   */

onSelectForCrop: function () {
    var attachment = this.frame.state().get("selection").first().toJSON();

if (
      this.params.width === attachment.width &&
      this.params.height === attachment.height &&
      !this.params.flex_width &&
      !this.params.flex_height
    ) {
      this.setImageInRepeaterField(attachment);
    } else {
      this.frame.setState("cropper");
    }
  },

/**
   * After the image has been cropped, apply the cropped image data to the setting.
   *
   * @param {object} croppedImage Cropped attachment data.
   * @returns {void}
   */
  onCropped: function (croppedImage) {
    this.setImageInRepeaterField(croppedImage);
  },

/**
   * Returns a set of options, computed from the attached image data and
   * control-specific data, to be fed to the imgAreaSelect plugin in
   * wp.media.view.Cropper.
   *
   * @param {wp.media.model.Attachment} attachment - The attachment from the WP API.
   * @param {wp.media.controller.Cropper} controller - Media controller.
   * @returns {Object} - Options.
   */
  calculateImageSelectOptions: function (attachment, controller) {
    var control = controller.get("control"),
      flexWidth = !!parseInt(control.params.flex_width, 10),
      flexHeight = !!parseInt(control.params.flex_height, 10),
      realWidth = attachment.get("width"),
      realHeight = attachment.get("height"),
      xInit = parseInt(control.params.width, 10),
      yInit = parseInt(control.params.height, 10),
      ratio = xInit / yInit,
      xImg = realWidth,
      yImg = realHeight,
      x1,
      y1,
      imgSelectOptions;

controller.set(
      "canSkipCrop",
      !control.mustBeCropped(
        flexWidth,
        flexHeight,
        xInit,
        yInit,
        realWidth,
        realHeight
      )
    );

if (xImg / yImg > ratio) {
      yInit = yImg;
      xInit = yInit * ratio;
    } else {
      xInit = xImg;
      yInit = xInit / ratio;
    }

x1 = (xImg - xInit) / 2;
    y1 = (yImg - yInit) / 2;

imgSelectOptions = {
      handles: true,
      keys: true,
      instance: true,
      persistent: true,
      imageWidth: realWidth,
      imageHeight: realHeight,
      x1: x1,
      y1: y1,
      x2: xInit + x1,
      y2: yInit + y1,
    };

if (false === flexHeight && false === flexWidth) {
      imgSelectOptions.aspectRatio = xInit + ":" + yInit;
    }
    if (false === flexHeight) {
      imgSelectOptions.maxHeight = yInit;
    }
    if (false === flexWidth) {
      imgSelectOptions.maxWidth = xInit;
    }

return imgSelectOptions;
  },

/**
   * Return whether the image must be cropped, based on required dimensions.
   *
   * @param {bool} flexW - The flex-width.
   * @param {bool} flexH - The flex-height.
   * @param {int}  dstW - Initial point distance in the X axis.
   * @param {int}  dstH - Initial point distance in the Y axis.
   * @param {int}  imgW - Width.
   * @param {int}  imgH - Height.
   * @returns {bool} - Whether the image must be cropped or not based on required dimensions.
   */
  mustBeCropped: function (flexW, flexH, dstW, dstH, imgW, imgH) {
    return !(
      (true === flexW && true === flexH) ||
      (true === flexW && dstH === imgH) ||
      (true === flexH && dstW === imgW) ||
      (dstW === imgW && dstH === imgH) ||
      imgW <= dstW
    );
  },

/**
   * If cropping was skipped, apply the image data directly to the setting.
   *
   * @returns {void}
   */
  onSkippedCrop: function () {
    var attachment = this.frame.state().get("selection").first().toJSON();
    this.setImageInRepeaterField(attachment);
  },

/**
   * Updates the setting and re-renders the control UI.
   *
   * @param {object} attachment - The attachment object.
   * @returns {void}
   */
  setImageInRepeaterField: function (attachment) {
    var $targetDiv = this.$thisButton.closest(
      ".repeater-field-image,.repeater-field-cropped_image"
    );

$targetDiv
      .find(".kirki-image-attachment")
      .html('<img src="' + attachment.url + '">')
      .hide()
      .slideDown("slow");

$targetDiv.find(".hidden-field").val(attachment.id);
    this.$thisButton.text(this.$thisButton.data("alt-label"));
    $targetDiv.find(".remove-button").show();

//This will activate the save button
    $targetDiv.find("input, textarea, select").trigger("change");
    this.frame.close();
  },

/**
   * Updates the setting and re-renders the control UI.
   *
   * @param {object} attachment - The attachment object.
   * @returns {void}
   */
  setFileInRepeaterField: function (attachment) {
    var $targetDiv = this.$thisButton.closest(".repeater-field-upload");

$targetDiv
      .find(".kirki-file-attachment")
      .html(
        '<span class="file"><span class="dashicons dashicons-media-default"></span> ' +
          attachment.filename +
          "</span>"
      )
      .hide()
      .slideDown("slow");

$targetDiv.find(".hidden-field").val(attachment.id);
    this.$thisButton.text(this.$thisButton.data("alt-label"));
    $targetDiv.find(".upload-button").show();
    $targetDiv.find(".remove-button").show();

//This will activate the save button
    $targetDiv.find("input, textarea, select").trigger("change");
    this.frame.close();
  },

getMimeType: function () {
    // We get the field id from which this was called
    var currentFieldId = this.$thisButton
      .siblings("input.hidden-field")
      .attr("data-field");

// Make sure we got it
    if (_.isString(currentFieldId) && "" !== currentFieldId) {
      // Make fields is defined and only do the hack for cropped_image
      if (
        _.isObject(this.params.fields[currentFieldId]) &&
        "upload" === this.params.fields[currentFieldId].type
      ) {
        // If the attribute exists in the field
        if (!_.isUndefined(this.params.fields[currentFieldId].mime_type)) {
          // Set the attribute in the main object
          return this.params.fields[currentFieldId].mime_type;
        }
      }
    }
    return "image";
  },

removeImage: function (event) {
    var $targetDiv, $uploadButton;

if (wp.customize.utils.isKeydownButNotEnterEvent(event)) {
      return;
    }

$targetDiv = this.$thisButton.closest(
      ".repeater-field-image,.repeater-field-cropped_image,.repeater-field-upload"
    );
    $uploadButton = $targetDiv.find(".upload-button");

$targetDiv.find(".kirki-image-attachment").slideUp("fast", function () {
      jQuery(this).show().html(jQuery(this).data("placeholder"));
    });
    $targetDiv.find(".hidden-field").val("");
    $uploadButton.text($uploadButton.data("label"));
    this.$thisButton.hide();

$targetDiv.find("input, textarea, select").trigger("change");
  },

removeFile: function (event) {
    var $targetDiv, $uploadButton;

if (wp.customize.utils.isKeydownButNotEnterEvent(event)) {
      return;
    }

$targetDiv = this.$thisButton.closest(".repeater-field-upload");
    $uploadButton = $targetDiv.find(".upload-button");

$targetDiv.find(".kirki-file-attachment").slideUp("fast", function () {
      jQuery(this).show().html(jQuery(this).data("placeholder"));
    });
    $targetDiv.find(".hidden-field").val("");
    $uploadButton.text($uploadButton.data("label"));
    this.$thisButton.hide();

$targetDiv.find("input, textarea, select").trigger("change");
  },

/**
   * Get the current value of the setting
   *
   * @returns {Object} - Returns the value.
   */
  getValue: function () {
    // The setting is saved in JSON
    return JSON.parse(decodeURI(this.setting.get()));
  },

/**
   * Set a new value for the setting
   *
   * @param {Object} newValue - The new value.
   * @param {bool} refresh - If we want to refresh the previewer or not
   * @param {bool} filtering - If we want to filter or not.
   * @returns {void}
   */
  setValue: function (newValue, refresh, filtering) {
    // We need to filter the values after the first load to remove data requrired for diplay but that we don't want to save in DB
    var filteredValue = newValue,
      filter = [];

if (filtering) {
      jQuery.each(this.params.fields, function (index, value) {
        if (
          "image" === value.type ||
          "cropped_image" === value.type ||
          "upload" === value.type
        ) {
          filter.push(index);
        }
      });
      jQuery.each(newValue, function (index, value) {
        jQuery.each(filter, function (ind, field) {
          if (!_.isUndefined(value[field]) && !_.isUndefined(value[field].id)) {
            filteredValue[index][field] = value[field].id;
          }
        });
      });
    }

this.setting.set(encodeURI(JSON.stringify(filteredValue)));

if (refresh) {
      // Trigger the change event on the hidden field so
      // previewer refresh the website on Customizer
      this.settingField.trigger("change");
    }
  },

/**
   * Add a new row to repeater settings based on the structure.
   *
   * @param {Object} data - (Optional) Object of field => value pairs (undefined if you want to get the default values)
   * @returns {Object} - Returns the new row.
   */
  addRow: function (data) {
    var control = this,
      template = control.repeaterTemplate(), // The template for the new row (defined on Kirki_Customize_Repeater_Control::render_content() ).
      settingValue = this.getValue(), // Get the current setting value.
      newRowSetting = {}, // Saves the new setting data.
      templateData, // Data to pass to the template
      newRow,
      i;

if (template) {
      // The control structure is going to define the new fields
      // We need to clone control.params.fields. Assigning it
      // ould result in a reference assignment.
      templateData = jQuery.extend(true, {}, control.params.fields);

// But if we have passed data, we'll use the data values instead
      if (data) {
        for (i in data) {
          if (data.hasOwnProperty(i) && templateData.hasOwnProperty(i)) {
            templateData[i].default = data[i];
          }
        }
      }

templateData.index = this.currentIndex;

// Append the template content
      template = template(templateData);

// Create a new row object and append the element
      newRow = new RepeaterRow(
        control.currentIndex,
        jQuery(template).appendTo(control.repeaterFieldsContainer),
        control.params.row_label,
        control
      );

newRow.container.on("row:remove", function (e, rowIndex) {
        control.deleteRow(rowIndex);
      });

newRow.container.on(
        "row:update",
        function (e, rowIndex, fieldName, element) {
          control.updateField.call(control, e, rowIndex, fieldName, element); // eslint-disable-line no-useless-call
          newRow.updateLabel();
        }
      );

// Add the row to rows collection
      this.rows[this.currentIndex] = newRow;

for (i in templateData) {
        if (templateData.hasOwnProperty(i)) {
          newRowSetting[i] = templateData[i].default;
        }
      }

settingValue[this.currentIndex] = newRowSetting;
      this.setValue(settingValue, true);

this.currentIndex++;

return newRow;
    }
  },

sort: function () {
    var control = this,
      $rows = this.repeaterFieldsContainer.find(".repeater-row"),
      newOrder = [],
      settings = control.getValue(),
      newRows = [],
      newSettings = [];

$rows.each(function (i, element) {
      newOrder.push(jQuery(element).data("row"));
    });

jQuery.each(newOrder, function (newPosition, oldPosition) {
      newRows[newPosition] = control.rows[oldPosition];
      newRows[newPosition].setRowIndex(newPosition);

newSettings[newPosition] = settings[oldPosition];
    });

control.rows = newRows;
    control.setValue(newSettings);
  },

/**
   * Delete a row in the repeater setting
   *
   * @param {int} index - Position of the row in the complete Setting Array
   * @returns {void}
   */
  deleteRow: function (index) {
    var currentSettings = this.getValue(),
      row,
      prop;

if (currentSettings[index]) {
      // Find the row
      row = this.rows[index];
      if (row) {
        // Remove the row settings
        delete currentSettings[index];

// Remove the row from the rows collection
        delete this.rows[index];

// Update the new setting values
        this.setValue(currentSettings, true);
      }
    }

// Remap the row numbers
    for (prop in this.rows) {
      if (this.rows.hasOwnProperty(prop) && this.rows[prop]) {
        this.rows[prop].updateLabel();
      }
    }
  },

/**
   * Update a single field inside a row.
   * Triggered when a field has changed
   *
   * @param {Object} e - Event Object
   * @param {int} rowIndex - The row's index as an integer.
   * @param {string} fieldId - The field ID.
   * @param {string|Object} element - The element's identifier, or jQuery Object of the element.
   * @returns {void}
   */
  updateField: function (e, rowIndex, fieldId, element) {
    var type, row, currentSettings;

if (!this.rows[rowIndex]) {
      return;
    }

if (!this.params.fields[fieldId]) {
      return;
    }

type = this.params.fields[fieldId].type;
    row = this.rows[rowIndex];
    currentSettings = this.getValue();

element = jQuery(element);

if (_.isUndefined(currentSettings[row.rowIndex][fieldId])) {
      return;
    }

if ("checkbox" === type) {
      currentSettings[row.rowIndex][fieldId] = element.is(":checked");
    } else {
      // Update the settings
      currentSettings[row.rowIndex][fieldId] = element.val();
    }
    this.setValue(currentSettings, true);
  },

/**
   * Init the color picker on color fields
   * Called after AddRow
   *
   * @returns {void}
   */
  initColorPicker: function () {
    var control = this;
    var colorPicker = control.container.find(".kirki-classic-color-picker");
    var fieldId = colorPicker.data("field");
    var options = {};

// We check if the color palette parameter is defined.
    if (
      !_.isUndefined(fieldId) &&
      !_.isUndefined(control.params.fields[fieldId]) &&
      !_.isUndefined(control.params.fields[fieldId].palettes) &&
      _.isObject(control.params.fields[fieldId].palettes)
    ) {
      options.palettes = control.params.fields[fieldId].palettes;
    }

// When the color picker value is changed we update the value of the field
    options.change = function (event, ui) {
      var currentPicker = jQuery(event.target);
      var row = currentPicker.closest(".repeater-row");
      var rowIndex = row.data("row");
      var currentSettings = control.getValue();
      var value = ui.color._alpha < 1 ? ui.color.to_s() : ui.color.toString();

currentSettings[rowIndex][currentPicker.data("field")] = value;
      control.setValue(currentSettings, true);

// By default if the alpha is 1, the input will be rgb.
			// We setTimeout to 50ms to prevent race value set.
			setTimeout(function() {
				event.target.value = value;
			}, 50);
    };

// Init the color picker
    if (colorPicker.length && 0 !== colorPicker.length) {
      colorPicker.wpColorPicker(options);
    }
  },

/**
   * Init the dropdown-pages field.
   * Called after AddRow
   *
   * @param {object} theNewRow the row that was added to the repeater
   * @param {object} data the data for the row if we're initializing a pre-existing row
   * @returns {void}
   */
  initSelect: function (theNewRow, data) {
    var control = this,
      dropdown = theNewRow.container.find(".repeater-field select"),
      dataField;

if (0 === dropdown.length) {
      return;
    }

dataField = dropdown.data("field");
    multiple = jQuery(dropdown).data("multiple");

data = data || {};
    data[dataField] = data[dataField] || "";

jQuery(dropdown).val(data[dataField] || jQuery(dropdown).val());

this.container.on("change", ".repeater-field select", function (event) {
      var currentDropdown = jQuery(event.target),
        row = currentDropdown.closest(".repeater-row"),
        rowIndex = row.data("row"),
        currentSettings = control.getValue();

currentSettings[rowIndex][currentDropdown.data("field")] =
        jQuery(this).val();
      control.setValue(currentSettings);
    });
  },
});