From 4579080dfc136b4be67d12474d2525f3ad1b735a Mon Sep 17 00:00:00 2001 From: HerrVigg Date: Sun, 6 Nov 2022 20:56:30 +0100 Subject: [PATCH] Simplify translatable UI for ACF post object (#1246) --- dist/modules/acf.js | 2 +- modules/acf/js/register.js | 16 ++++------------ modules/acf/src/fields/post_object.php | 5 ++--- 3 files changed, 7 insertions(+), 16 deletions(-) diff --git a/dist/modules/acf.js b/dist/modules/acf.js index cc199cd5..88a66d39 100644 --- a/dist/modules/acf.js +++ b/dist/modules/acf.js @@ -1 +1 @@ -(()=>{var t={817:()=>{var t=jQuery;t(window).on("load",(function(){var e=qTranslateConfig.js.get_qtx();if(e.enableLanguageSwitchingButtons("block"),window.acf_qtranslate_translate_standard_field_types){t(".acf-postbox .acf-field").find(".qtranxs-translatable").each((function(){e.removeContentHook(this)}));var a=t("#post_type").val();t.each({text:"input:text",textarea:"textarea",wysiwyg:".wp-editor-area"},(function(a,n){acf.get_fields({type:a}).each((function(){var a=t(this).closest("form").get(0),r=t(this).find(n).get(0);i(r)&&e.addContentHookC(r,a)})),acf.add_action("append_field/type="+a,(function(a){var r=a.closest("form").get(0),l=a.find(n).get(0);if(i(l)&&(e.addContentHookC(l,r),t(l).hasClass("wp-editor-area"))){var s=document.createEvent("UIEvents");s.initEvent("load",!1,!1,window),window.dispatchEvent(s)}}),100)}))}function i(t){return"acf-field-group"!==a||!!t.id.match(/acf_fields-\d+-label/)||!!t.id.match(/acf_fields-\d+-instructions/)||!!t.id.match(/acf_fields-\d+-default_value/)}}))},719:()=>{var t=jQuery;acf.registerFieldType(acf.models.FileField.extend({type:"qtranslate_file",$control:function(){return this.$(".acf-file-uploader.current-language")},$input:function(){return this.$('.acf-file-uploader.current-language input[type="hidden"]')},render:function(t){t=this.validateAttachment(t),this.$control().find("img").attr({src:t.icon,alt:t.alt,title:t.title}),this.$control().find('[data-name="title"]').text(t.title),this.$control().find('[data-name="filename"]').text(t.filename).attr("href",t.url),this.$control().find('[data-name="filesize"]').text(t.filesizeHumanReadable);var e=t.id||"";acf.val(this.$input(),e),e?this.$control().addClass("has-value"):this.$control().removeClass("has-value")}})),acf.registerFieldType(acf.models.ImageField.extend({type:"qtranslate_image",$control:function(){return this.$(".acf-image-uploader.current-language")},$input:function(){return this.$('.acf-image-uploader.current-language input[type="hidden"]')},render:function(t){t=this.validateAttachment(t),this.$control().find("img").attr({src:t.url,alt:t.alt,title:t.title});var e=t.id||"";this.val(e),e?this.$control().addClass("has-value"):this.$control().removeClass("has-value")}})),acf.registerFieldType(acf.models.PostObjectField.extend({type:"qtranslate_post_object",$input:function(){return this.$(".acf-post-object.current-language select")},initialize:function(){var e=this,a=this.$input();if(this.inherit(a),this.get("ui")){var i=this.get("ajax_action");i||(i="acf/fields/"+this.get("type")+"/query"),this.select2=[],this.$(".acf-post-object select").each((function(){var a=acf.newSelect2(t(this),{field:e,ajax:e.get("ajax"),multiple:e.get("multiple"),placeholder:e.get("placeholder"),allowNull:e.get("allow_null"),ajaxAction:i});e.select2.push(a);var n=a.$el.parents(".acf-post-object.qtranxs-translatable");n.removeClass("qtranxs-translatable"),n.find("span.select2-selection").addClass("qtranxs-translatable")}))}},onRemove:function(){if(this.select2)for(var t=0;t{var t=jQuery,e=t("body"),a=function(e){var a=t(".multi-language-field");a.find(".current-language").removeClass("current-language"),a.find('[data-language="'+e+'"]').addClass("current-language"),a.find('input[data-language="'+e+'"], textarea[data-language="'+e+'"]')};e.on("click",".qtranxs-lang-switch",(function(){var e=t(this).attr("lang");a(e)})),e.on("click",".wp-switch-editor[data-language]",(function(){var e=t(this).parent(".multi-language-field"),a=t(this).data("language");return e.find(".current-language").removeClass("current-language"),e.find('[data-language="'+a+'"]').addClass("current-language"),e.find('input[data-language="'+a+'"], textarea[data-language="'+a+'"]').focus(),t('.qtranxs-lang-switch[lang="'+a+'"]:first').trigger("click"),!1})),e.on("focusin",".multi-language-field input, .multi-language-field textarea",(function(){t(this).parent(".multi-language-field").addClass("focused")})),e.on("focusout",".multi-language-field input, .multi-language-field textarea",(function(){t(this).parent(".multi-language-field").removeClass("focused")})),e.on("click",".wp-editor-tabs .wp-switch-editor",(function(){var e=t(this).parents(".multi-language-field"),a=t(this).hasClass("switch-tmce")?"tmce":"html";e.find(".wp-editor-tabs .wp-switch-editor.switch-"+a).not(this).each((function(){var e=t(this).attr("data-wp-editor-id");e&&window.switchEditors.go(e,a)}))})),t((function(){if(qTranslateConfig.LSB){var e=qTranslateConfig.js.get_qtx().getActiveLanguage();if(e){a(e);var i=t(".multi-language-field");i.find(".current-language").removeClass("current-language"),i.find('[data-language="'+e+'"]').addClass("current-language")}}}))}},e={};function a(i){var n=e[i];if(void 0!==n)return n.exports;var r=e[i]={exports:{}};return t[i](r,r.exports,a),r.exports}a.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return a.d(e,{a:e}),e},a.d=(t,e)=>{for(var i in e)a.o(e,i)&&!a.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},a.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{"use strict";a(719),a(174),a(817)})()})(); \ No newline at end of file +(()=>{var t={817:()=>{var t=jQuery;t(window).on("load",(function(){var e=qTranslateConfig.js.get_qtx();if(e.enableLanguageSwitchingButtons("block"),window.acf_qtranslate_translate_standard_field_types){t(".acf-postbox .acf-field").find(".qtranxs-translatable").each((function(){e.removeContentHook(this)}));var a=t("#post_type").val();t.each({text:"input:text",textarea:"textarea",wysiwyg:".wp-editor-area"},(function(a,n){acf.get_fields({type:a}).each((function(){var a=t(this).closest("form").get(0),l=t(this).find(n).get(0);i(l)&&e.addContentHookC(l,a)})),acf.add_action("append_field/type="+a,(function(a){var l=a.closest("form").get(0),r=a.find(n).get(0);if(i(r)&&(e.addContentHookC(r,l),t(r).hasClass("wp-editor-area"))){var s=document.createEvent("UIEvents");s.initEvent("load",!1,!1,window),window.dispatchEvent(s)}}),100)}))}function i(t){return"acf-field-group"!==a||!!t.id.match(/acf_fields-\d+-label/)||!!t.id.match(/acf_fields-\d+-instructions/)||!!t.id.match(/acf_fields-\d+-default_value/)}}))},719:()=>{var t=jQuery;acf.registerFieldType(acf.models.FileField.extend({type:"qtranslate_file",$control:function(){return this.$(".acf-file-uploader.current-language")},$input:function(){return this.$('.acf-file-uploader.current-language input[type="hidden"]')},render:function(t){t=this.validateAttachment(t),this.$control().find("img").attr({src:t.icon,alt:t.alt,title:t.title}),this.$control().find('[data-name="title"]').text(t.title),this.$control().find('[data-name="filename"]').text(t.filename).attr("href",t.url),this.$control().find('[data-name="filesize"]').text(t.filesizeHumanReadable);var e=t.id||"";acf.val(this.$input(),e),e?this.$control().addClass("has-value"):this.$control().removeClass("has-value")}})),acf.registerFieldType(acf.models.ImageField.extend({type:"qtranslate_image",$control:function(){return this.$(".acf-image-uploader.current-language")},$input:function(){return this.$('.acf-image-uploader.current-language input[type="hidden"]')},render:function(t){t=this.validateAttachment(t),this.$control().find("img").attr({src:t.url,alt:t.alt,title:t.title});var e=t.id||"";this.val(e),e?this.$control().addClass("has-value"):this.$control().removeClass("has-value")}})),acf.registerFieldType(acf.models.PostObjectField.extend({type:"qtranslate_post_object",$input:function(){return this.$(".acf-post-object.current-language select")},initialize:function(){var e=this,a=this.$input();if(this.inherit(a),this.get("ui")){var i=this.get("ajax_action");i||(i="acf/fields/"+this.get("type")+"/query"),this.select2=[],this.$(".acf-post-object select").each((function(){var a=acf.newSelect2(t(this),{field:e,ajax:e.get("ajax"),multiple:e.get("multiple"),placeholder:e.get("placeholder"),allowNull:e.get("allow_null"),ajaxAction:i});e.select2.push(a)})),this.$(".acf-post-object span.select2-selection").addClass("qtranxs-translatable")}},onRemove:function(){if(this.select2)for(var t=0;t{var t=jQuery,e=t("body"),a=function(e){var a=t(".multi-language-field");a.find(".current-language").removeClass("current-language"),a.find('[data-language="'+e+'"]').addClass("current-language"),a.find('input[data-language="'+e+'"], textarea[data-language="'+e+'"]')};e.on("click",".qtranxs-lang-switch",(function(){var e=t(this).attr("lang");a(e)})),e.on("click",".wp-switch-editor[data-language]",(function(){var e=t(this).parent(".multi-language-field"),a=t(this).data("language");return e.find(".current-language").removeClass("current-language"),e.find('[data-language="'+a+'"]').addClass("current-language"),e.find('input[data-language="'+a+'"], textarea[data-language="'+a+'"]').focus(),t('.qtranxs-lang-switch[lang="'+a+'"]:first').trigger("click"),!1})),e.on("focusin",".multi-language-field input, .multi-language-field textarea",(function(){t(this).parent(".multi-language-field").addClass("focused")})),e.on("focusout",".multi-language-field input, .multi-language-field textarea",(function(){t(this).parent(".multi-language-field").removeClass("focused")})),e.on("click",".wp-editor-tabs .wp-switch-editor",(function(){var e=t(this).parents(".multi-language-field"),a=t(this).hasClass("switch-tmce")?"tmce":"html";e.find(".wp-editor-tabs .wp-switch-editor.switch-"+a).not(this).each((function(){var e=t(this).attr("data-wp-editor-id");e&&window.switchEditors.go(e,a)}))})),t((function(){if(qTranslateConfig.LSB){var e=qTranslateConfig.js.get_qtx().getActiveLanguage();if(e){a(e);var i=t(".multi-language-field");i.find(".current-language").removeClass("current-language"),i.find('[data-language="'+e+'"]').addClass("current-language")}}}))}},e={};function a(i){var n=e[i];if(void 0!==n)return n.exports;var l=e[i]={exports:{}};return t[i](l,l.exports,a),l.exports}a.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return a.d(e,{a:e}),e},a.d=(t,e)=>{for(var i in e)a.o(e,i)&&!a.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},a.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{"use strict";a(719),a(174),a(817)})()})(); \ No newline at end of file diff --git a/modules/acf/js/register.js b/modules/acf/js/register.js index ea6af8e8..d7362848 100644 --- a/modules/acf/js/register.js +++ b/modules/acf/js/register.js @@ -83,7 +83,6 @@ const register_fields = () => { } })); - acf.registerFieldType(acf.models.PostObjectField.extend({ type: 'qtranslate_post_object', @@ -109,7 +108,6 @@ const register_fields = () => { ajaxAction = 'acf/fields/' + this.get('type') + '/query'; } - // select2 this.select2 = []; this.$('.acf-post-object select').each(function () { const $newSelect2 = acf.newSelect2($(this), { @@ -121,19 +119,13 @@ const register_fields = () => { ajaxAction: ajaxAction, }); self.select2.push($newSelect2); - - // UI design hack to set the "qtranxs-translatable" class to the proper UI element. - // It can't be set properly in PHP because the select element doesn't exist yet. - // It's set to the post-object div element but it doesn't look nice as it contains the field name. - // So we move it down from div to the span field displaying the selected text. - const $postObjectDiv = $newSelect2.$el.parents('.acf-post-object.qtranxs-translatable'); - $postObjectDiv.removeClass('qtranxs-translatable'); - const $selectionSpan = $postObjectDiv.find('span.select2-selection'); - $selectionSpan.addClass('qtranxs-translatable'); }); + + // Set the "qtranxs-translatable" class to the proper UI element. + // It can't be done in PHP because the select element doesn't exist yet. + this.$('.acf-post-object span.select2-selection').addClass('qtranxs-translatable'); } }, - onRemove: function () { if (this.select2) { for (let i = 0; i < this.select2.length; i++) { diff --git a/modules/acf/src/fields/post_object.php b/modules/acf/src/fields/post_object.php index 92794baa..2815900c 100644 --- a/modules/acf/src/fields/post_object.php +++ b/modules/acf/src/fields/post_object.php @@ -68,9 +68,8 @@ function render_field( $field ) { } foreach ( $languages as $language ) { - // See UI hack in JS registerFieldType PostObjectField - // Set the translatable class to the main div here and move it down to the selection span later. - $class = 'acf-post-object qtranxs-translatable'; + // The select2 UI item is created later, so the "qtranxs-translatable" style class is set by JS code. + $class = 'acf-post-object'; if ( $language === $currentLanguage ) { $class .= ' current-language'; }