From ea85e062e199e767be871fd7c3145915ed135114 Mon Sep 17 00:00:00 2001
From: Coding Sheikh <alsheykh@protonmail.com>
Date: Mon, 23 Oct 2023 20:18:32 +0300
Subject: [PATCH] fix: fix copy streamfield button with new wagtail structure

---
 .../js/copy_stream_fields.js                  | 42 ++++++++++---------
 wagtail_modeltranslation/wagtail_hooks.py     |  2 +-
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/wagtail_modeltranslation/static/wagtail_modeltranslation/js/copy_stream_fields.js b/wagtail_modeltranslation/static/wagtail_modeltranslation/js/copy_stream_fields.js
index 4acd122..b29a727 100644
--- a/wagtail_modeltranslation/static/wagtail_modeltranslation/js/copy_stream_fields.js
+++ b/wagtail_modeltranslation/static/wagtail_modeltranslation/js/copy_stream_fields.js
@@ -1,7 +1,7 @@
 /* Creates the copy buttons in the header of each stream field */
 $(document).ready(function(){
 	//All the stream fields with all his content
-	var allStreamFields = $('li.stream-field');
+	var allStreamFields = $('section.w-panel--nested');
 
 	// Setup regex to find field name and fild lang
 	var langOpts = wagtailModelTranslations.languages.join('|').replace(/-/g, '_');
@@ -17,19 +17,18 @@ $(document).ready(function(){
 		// Extract fieldName and fieldLang
 		var inputId = extractInputId(currentStreamField);
 		// extract field name and fild lang from regex, continue if not match
-		var fieldInfo = Array.from(inputId.matchAll(re)).flat();
-		if (fieldInfo.length === 0) continue;
-		var fieldName = fieldInfo[1];
-		var fieldLang = fieldInfo[2];
+		if (inputId.length === 0) continue;
+		var fieldName = inputId[0];
+		var fieldLang = inputId[1];
 
 		//The cycle to create the buttons for copy each language field
 		var copyContentString = 'Copy content from';
-		header.innerHTML += '<div class="translation-field-copy-wrapper">'+copyContentString+': </div>';
+		$(header).append('<div class="translation-field-copy-wrapper">'+copyContentString+': </div>');
 		for (var j = 0; j < wagtailModelTranslations.languages.length; j++) {
 			currentLangCode = wagtailModelTranslations.languages[j].replace('-', '_');
 			if (fieldLang != currentLangCode) {
-				var currentFieldID = fieldName + '_' + fieldLang;
-				var targetFieldID = fieldName + '_' + currentLangCode;
+				var currentFieldID = (fieldName + '_' + fieldLang).toLowerCase().replace(' ', '_');
+				var targetFieldID = (fieldName + '_' + currentLangCode).toLowerCase().replace(' ', '_');
 				$(header).children('.translation-field-copy-wrapper')[0].innerHTML += '<button class="button translation-field-copy" current-lang-code="'+ currentFieldID +'" data-lang-code="'+ targetFieldID +'">'+wagtailModelTranslations.languages[j]+'</button>';
 			};
 		};
@@ -41,26 +40,29 @@ $(document).ready(function(){
 		var lang = $(this).attr('data-lang-code');
 		var currentLang = $(this).attr('current-lang-code');
 		requestCopyField(lang, currentLang);
-	});
-});
+			});
+		});
 
 /* Get header */
 function getStreamFieldHeader(currentStreamField) {
-	return $(currentStreamField).children('.title-wrapper')[0];
+	return $(currentStreamField).children('.w-panel__header')[0];
 }
 
 function extractInputId(currentStreamField) {
 	//Search for the input field so that we can get is id to know the field's name.
-	var streamFieldDiv = $(currentStreamField).find('.field-content')[0];
-	var inputId = $(streamFieldDiv).find('input')[0].id.split('-')[0];
+	var streamFieldDiv = $(currentStreamField).find('.w-panel__heading')[0];
+	var element = $(streamFieldDiv).find('[data-panel-heading-text]')[0];
+	var textContent = $(element).text().trim();
+	// Use regex to match the desired pattern and extract "Body" and "en"
+	var match = textContent.match(/(.+)\s*\[([a-z]{2})\]/i);
 
-	if (!inputId) {
-		var streamFieldInput = $(currentStreamField).find('.field-content input')[0];
-		streamFieldInput.id = streamFieldInput.name;
-		var inputId = streamFieldInput.name.split('-')[0];
+	// If a match is found, extract the desired parts
+	if (match) {
+		var resultArray = [match[1].trim(), match[2]];
+	} else {
+		var resultArray = [];  // or handle the no-match case as needed
 	}
-
-	return inputId;
+	return resultArray;
 }
 
 /* Copy the content of originID field to the targetID field */
@@ -88,7 +90,7 @@ function requestCopyField(originID, targetID) {
 	})
 	.done(function(data) {
 		/* Put the html data in the targetID field */
-		var wrapperDiv = $("#"+targetID+"-count").parents('.input')[0];
+		var wrapperDiv = $("[name='"+targetID+"-count']").parents('.w-field__input')[0];
 		$(wrapperDiv).html(data);
 	})
 	.fail(function(error) {
diff --git a/wagtail_modeltranslation/wagtail_hooks.py b/wagtail_modeltranslation/wagtail_hooks.py
index 00efe97..1a6e47f 100644
--- a/wagtail_modeltranslation/wagtail_hooks.py
+++ b/wagtail_modeltranslation/wagtail_hooks.py
@@ -103,7 +103,7 @@ def return_translation_target_field_rendered_html(request, page_id):
 
     page = Page.objects.get(pk=page_id)
 
-    if request.is_ajax():
+    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
         origin_field_name = request.POST.get('origin_field_name')
         target_field_name = request.POST.get('target_field_name')
         origin_field_serialized = json.loads(