Файловый менеджер

Файловый менеджер - Редактировать - /home/beautybuzzbeyond/public_html/wp-content/plugins/kirki/kirki-packages/control-repeater/src/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); }); }, });

| ver. 1.4 | Github | . | PHP 8.0.30 | Генерация страницы: 0 | proxy | phpinfo | Настройка