Merge branch 'master' into 46527-integration-of-price-on-request-with…

…-calculatedprice-field
onOffice-Web-Org · Jun 19, 2024 · 00ba508 · 00ba508
2 parents 7a9c4e0 + 327e1b0
commit 00ba508
Show file tree

Hide file tree

Showing 11 changed files with 351 additions and 15 deletions.
diff --git a/css/onoffice-default.css b/css/onoffice-default.css
@@ -71,4 +71,19 @@ form[data-applicant-form-id] #spinner {
 
 .message{
     display: none!important;
+}
+
+.oo-picture {
+    display: block;
+    height: 100%;
+    width: 100%;
+    line-height: 0;
+    overflow: hidden;
+}
+
+.oo-responsive-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center center;
 }
diff --git a/dist/onoffice-captchacontrol.min.js b/dist/onoffice-captchacontrol.min.js
diff --git a/js/onoffice-captchacontrol.js b/js/onoffice-captchacontrol.js
@@ -26,7 +26,9 @@ var CaptchaCallback = function () {
 			if (!formElement.checkValidity() && !_isMSIE()) {
 				formElement.reportValidity();
 			} else {
-				window.grecaptcha.execute(grecaptchaId);
+				if (window.grecaptcha && typeof window.grecaptcha.execute === 'function') {
+					window.grecaptcha.execute(grecaptchaId);
+				}
 			};
 		};
 	};

diff --git a/plugin/EstateList.php b/plugin/EstateList.php
@@ -706,6 +706,35 @@ public function getEstatePictureTitle($imageId)
 		return $this->_pEstateFiles->getEstatePictureTitle($imageId, $currentEstate);
 	}
 
+    /**
+     * @param int $imageId
+     * @param int $breakpoint
+     * @param float|null $width
+     * @param float|null $height
+     * @param bool $maxWidth
+     * @return string
+     */
+    public function getResponsiveImageSource(int $imageId, int $breakpoint, float $width = null, float $height = null, bool $maxWidth = false) {
+        $sourceTag = '<source media="(' . ($maxWidth ? 'max-width:' : 'min-width:') . $breakpoint . 'px)" srcset="';
+        $pictureOptions1 = null;
+        $pictureOptions15 = null;
+        $pictureOptions2 = null;
+        $pictureOptions3 = null;
+
+        if(isset($width) || isset($height)) {
+            $pictureOptions1 = ['width'=> isset($width) ? $width : null, 'height'=> isset($height) ? $height : null];
+            $pictureOptions15 = ['width'=> isset($width) ? round($width * 1.5) : null, 'height'=>isset($height) ? round($height * 1.5) : null];
+            $pictureOptions2 = ['width'=> isset($width) ? round($width * 2) : null, 'height'=>isset($height) ? round($height * 2) : null];
+            $pictureOptions3 = ['width'=> isset($width) ?  round($width * 3) : null, 'height'=>isset($height) ? round($height * 3) : null];
+        }
+
+        return  $sourceTag .
+            $this->getEstatePictureUrl($imageId, $pictureOptions1) . ' 1x,' .
+            $this->getEstatePictureUrl($imageId, $pictureOptions15) . ' 1.5x,' .
+            $this->getEstatePictureUrl($imageId, $pictureOptions2) . ' 2x,' .
+            $this->getEstatePictureUrl($imageId, $pictureOptions3) . ' 3x">';
+    }
+
 	/**
 	 * @param int $imageId
 	 * @return string

diff --git a/plugin/ScriptLoader/ScriptLoaderGenericConfigurationDefault.php b/plugin/ScriptLoader/ScriptLoaderGenericConfigurationDefault.php
@@ -237,7 +237,7 @@ private function renderScriptForFormPage(array $scripts, string $pluginPath, str
 			$this->checkFormType($forms, [Form::TYPE_CONTACT, Form::TYPE_OWNER, Form::TYPE_INTEREST])) {
 			$scripts[] = (new IncludeFileModel($script, 'onoffice-captchacontrol', plugins_url('/dist/onoffice-captchacontrol.min.js', $pluginPath)))
 					->setDependencies(['jquery'])
-					->setLoadInFooter(true);
+					->setLoadInFooter(false);
 		}
 
 		return $scripts;
@@ -264,7 +264,7 @@ private function checkFormType(array $forms, array $typeForm): bool
 	private function checkCaptchaActive(array $forms): bool
 	{
 		return !empty(array_filter($forms, function($form) {
-			return $form->captcha = true;
+			return (bool) $form->captcha;
 		}));
 	}
 
@@ -295,6 +295,7 @@ private function getFormsByPageContent($pageContent, string $shortcodeFormForDet
 
 		$pRecordManagerReadForm = $pContainer->get(RecordManagerReadForm::class);
 		$pRecordManagerReadForm->addColumn('form_type');
+		$pRecordManagerReadForm->addColumn('captcha');
 		$pRecordManagerReadForm->addWhere("`name` IN(" . $names . ")");
 
 		return $pRecordManagerReadForm->getRecords();

diff --git a/readme.txt b/readme.txt
@@ -76,6 +76,29 @@ Start editing inside the `onoffice-personalized` folder.
 
 == Changelog ==
 
+= 4.20 (2024-06-18) =
+
+**Added**
+
+* OpenGraph support
+* Adaptive image resolution in property list, detail view of property and similar estates
+* Notification of unsaved changes
+
+**Changed**
+
+* Filter option in property list overview and form overview
+* Some text changes
+
+**Fixed**
+
+* Sorting of multiple property lists on same page
+* Pagination of multiple property lists on same page
+* Loading forms with activated reCAPTCHA in Elementor
+
+**Removed**
+
+* Unused JS library: chosen
+
 = 4.19 (2024-04-18) =
 
 **Added**

diff --git a/templates.dist/estate/default.php b/templates.dist/estate/default.php
@@ -30,6 +30,53 @@
 
 $dontEcho = array("objekttitel", "objektbeschreibung", "lage", "ausstatt_beschr", "sonstige_angaben", "MPAreaButlerUrlWithAddress", "MPAreaButlerUrlNoAddress");
 
+/*  responsive picture properties
+ *  customizable widths and heights for individual layouts
+ */
+$image_width_xs = 382;
+$image_width_sm = 355;
+$image_width_md = 465;
+$image_width_lg = 370;
+$image_width_xl = 440;
+$image_width_xxl = 500;
+$image_width_xxxl = 600;
+$image_height_xs = null;
+$image_height_sm = null;
+$image_height_md = null;
+$image_height_lg = null;
+$image_height_xl = null;
+$image_height_xxl = null;
+$image_height_xxxl = null;
+$dimensions = [
+    '575' => [
+        'w' => $image_width_xs,
+        'h' => $image_height_xs
+    ],
+    '1600' => [
+        'w' => $image_width_xxxl,
+        'h' => $image_height_xxxl
+    ],
+    '1400' => [
+        'w' => $image_width_xxl,
+        'h' => $image_height_xxl
+    ],
+    '1200' => [
+        'w' => $image_width_xl,
+        'h' => $image_height_xl
+    ],
+    '992' => [
+        'w' => $image_width_lg,
+        'h' => $image_height_lg
+    ],
+    '768' => [
+        'w' => $image_width_md,
+        'h' => $image_height_md
+    ],
+    '576' => [
+        'w' => $image_width_sm,
+        'h' => $image_height_sm
+    ]
+];
 ?>
 
 <style>
@@ -84,10 +131,32 @@
 					$pictureValues = $pEstatesClone->getEstatePictureValues( $id );
 
 					if ( $referenz === "1" && $pEstatesClone->getViewRestrict() ) {
-						echo '<div style="background-image: url(' . esc_url( $pEstatesClone->getEstatePictureUrl( $id, [ 'height' => 350 ] ) ) . ');" class="oo-listimage estate-status">';
+						echo '<div class="oo-listimage estate-status">';
 					} else {
-						echo '<a href="' . esc_url( $pEstatesClone->getEstateLink() ) . '" style="background-image: url(' . esc_url( $pEstatesClone->getEstatePictureUrl( $id, [ 'height' => 350 ] ) ) . ');" class="oo-listimage estate-status">';
+						echo '<a class="oo-listimage estate-status" href="' . esc_url($pEstatesClone->getEstateLink()) . '">';
 					}
+                    echo '<picture class="oo-picture">';
+                    /**
+                     * getResponsiveImageSource(
+                     * @param int $imageId
+                     * @param int $mediaBreakPoint
+                     * @param float|null $imageWidth for media breakpoint, optional
+                     * @param float|null $imageHeight for media breakpoint, optional
+                     * @param bool $maxWidth, default = false)
+                     * @return string for image source on various media
+                     */
+                    echo $pEstatesClone->getResponsiveImageSource($id, 575, $dimensions['575']['w'], $dimensions['575']['h'], true);
+                    echo $pEstatesClone->getResponsiveImageSource($id, 1600, $dimensions['1600']['w'], $dimensions['1600']['h']);
+                    echo $pEstatesClone->getResponsiveImageSource($id, 1400, $dimensions['1400']['w'], $dimensions['1400']['h']);
+                    echo $pEstatesClone->getResponsiveImageSource($id, 1200, $dimensions['1200']['w'], $dimensions['1200']['h']);
+                    echo $pEstatesClone->getResponsiveImageSource($id, 992, $dimensions['992']['w'], $dimensions['992']['h']);
+                    echo $pEstatesClone->getResponsiveImageSource($id, 768, $dimensions['768']['w'], $dimensions['768']['h']);
+                    echo $pEstatesClone->getResponsiveImageSource($id, 576, $dimensions['576']['w'], $dimensions['576']['h']);
+                    echo '<img class="oo-responsive-image estate-status" ' .
+                        'src="' . esc_url($pEstatesClone->getEstatePictureUrl($id, isset($dimensions['1600']['w']) || isset($dimensions['1600']['h']) ? ['width'=> $dimensions['1600']['w'], 'height'=>$dimensions['1600']['h']] : null)) . '" ' .
+                        'alt="' . esc_html($pEstatesClone->getEstatePictureTitle($id)?? __('Image of property', 'onoffice-for-wp-websites')) . '" ' .
+                        'loading="lazy"/>';
+                    echo '</picture>';
 					if ($pictureValues['type'] === \onOffice\WPlugin\Types\ImageTypes::TITLE && $marketingStatus != '') {
 						echo '<span>'.esc_html($marketingStatus).'</span>';
 					}

diff --git a/templates.dist/estate/default_detail.php b/templates.dist/estate/default_detail.php
@@ -30,6 +30,55 @@
 
 $dontEcho = array("objekttitel", "objektbeschreibung", "lage", "ausstatt_beschr", "sonstige_angaben", "MPAreaButlerUrlWithAddress", "MPAreaButlerUrlNoAddress");
 /** @var EstateDetail $pEstates */
+
+/*  responsive picture properties
+ *  customizable widths and heights for individual layouts
+ */
+$image_width_xs = 382;
+$image_width_sm = 740;
+$image_width_md = 960;
+$image_width_lg = 870;
+$image_width_xl = 1020;
+$image_width_xxl = 1170;
+$image_width_xxxl = 1400;
+$image_height_xs = null;
+$image_height_sm = null;
+$image_height_md = null;
+$image_height_lg = null;
+$image_height_xl = null;
+$image_height_xxl = null;
+$image_height_xxxl = null;
+
+$dimensions = [
+    '575' => [
+        'w' => $image_width_xs,
+        'h' => $image_height_xs
+    ],
+    '1600' => [
+        'w' => $image_width_xxxl,
+        'h' => $image_height_xxxl
+    ],
+    '1400' => [
+        'w' => $image_width_xxl,
+        'h' => $image_height_xxl
+    ],
+    '1200' => [
+        'w' => $image_width_xl,
+        'h' => $image_height_xl
+    ],
+    '992' => [
+        'w' => $image_width_lg,
+        'h' => $image_height_lg
+    ],
+    '768' => [
+        'w' => $image_width_md,
+        'h' => $image_height_md
+    ],
+    '576' => [
+        'w' => $image_width_sm,
+        'h' => $image_height_sm
+    ]
+];
 ?>
 <style>
 	ul.oo-listparking {
@@ -55,10 +104,30 @@
 				<?php
 				$estatePictures = $pEstates->getEstatePictures();
 				foreach ($estatePictures as $id) {
-					printf(
-						'<div class="oo-detailspicture" style="background-image: url(\'%s\');"></div>' . "\n",
-						esc_url($pEstates->getEstatePictureUrl($id))
-					);
+					echo '<div class="oo-detailspicture">';
+                    echo '<picture class="oo-picture">';
+                    /**
+                     * getResponsiveImageSource(
+                     * @param int $imageId
+                     * @param int $mediaBreakPoint
+                     * @param float|null $imageWidth for media breakpoint, optional
+                     * @param float|null $imageHeight for media breakpoint, optional
+                     * @param bool $maxWidth, default = false)
+                     * @return string for image source on various media
+                     */
+                    echo $pEstates->getResponsiveImageSource($id, 575, $dimensions['575']['w'], $dimensions['575']['h'], true);
+                    echo $pEstates->getResponsiveImageSource($id, 1600, $dimensions['1600']['w'], $dimensions['1600']['h']);
+                    echo $pEstates->getResponsiveImageSource($id, 1400, $dimensions['1400']['w'], $dimensions['1400']['h']);
+                    echo $pEstates->getResponsiveImageSource($id, 1200, $dimensions['1200']['w'], $dimensions['1200']['h']);
+                    echo $pEstates->getResponsiveImageSource($id, 992, $dimensions['992']['w'], $dimensions['992']['h']);
+                    echo $pEstates->getResponsiveImageSource($id, 768, $dimensions['768']['w'], $dimensions['768']['h']);
+                    echo $pEstates->getResponsiveImageSource($id, 576, $dimensions['576']['w'], $dimensions['576']['h']);
+                    echo '<img class="oo-responsive-image estate-status" ' .
+                        'src="' . esc_url($pEstates->getEstatePictureUrl($id, isset($dimensions['1600']['w']) || isset($dimensions['1600']['h']) ? ['width'=> $dimensions['1600']['w'], 'height'=>$dimensions['1600']['h']] : null)) . '" ' .
+                        'alt="' . esc_html($pEstates->getEstatePictureTitle($id) ?? __('Image of property', 'onoffice-for-wp-websites')) . '" ' .
+                        'loading="lazy"/>';
+                    echo '</picture>';;
+					echo '</div>';
 				}
 				?>
 			</div>

diff --git a/templates.dist/estate/similar_estates.php b/templates.dist/estate/similar_estates.php
@@ -1,4 +1,53 @@
-<?php $dontEcho = array("objekttitel", "objektbeschreibung", "lage", "ausstatt_beschr", "sonstige_angaben", "MPAreaButlerUrlWithAddress", "MPAreaButlerUrlNoAddress"); ?>
+<?php $dontEcho = array("objekttitel", "objektbeschreibung", "lage", "ausstatt_beschr", "sonstige_angaben", "MPAreaButlerUrlWithAddress", "MPAreaButlerUrlNoAddress");
+
+/*  responsive picture properties
+ *  customizable widths and heights for individual layouts
+ */
+$image_width_xs = 382;
+$image_width_sm = 355;
+$image_width_md = 465;
+$image_width_lg = 370;
+$image_width_xl = 440;
+$image_width_xxl = 500;
+$image_width_xxxl = 605;
+$image_height_xs = null;
+$image_height_sm = null;
+$image_height_md = null;
+$image_height_lg = null;
+$image_height_xl = null;
+$image_height_xxl = null;
+$image_height_xxxl = null;
+$dimensions = [
+    '575' => [
+        'w' => $image_width_xs,
+        'h' => $image_height_xs
+    ],
+    '1600' => [
+        'w' => $image_width_xxxl,
+        'h' => $image_height_xxxl
+    ],
+    '1400' => [
+        'w' => $image_width_xxl,
+        'h' => $image_height_xxl
+    ],
+    '1200' => [
+        'w' => $image_width_xl,
+        'h' => $image_height_xl
+    ],
+    '992' => [
+        'w' => $image_width_lg,
+        'h' => $image_height_lg
+    ],
+    '768' => [
+        'w' => $image_width_md,
+        'h' => $image_height_md
+    ],
+    '576' => [
+        'w' => $image_width_sm,
+        'h' => $image_height_sm
+    ]
+];
+?>
 
 <style>
 	.oo-details-btn:focus {
@@ -27,10 +76,32 @@
 				foreach ( $estatePictures as $id ) {
 					$pictureValues = $pEstates->getEstatePictureValues( $id );
 					if ( $referenz === "1" && $pEstates->getViewRestrict() ) {
-						echo 'div style="background-image: url('.esc_url($pEstates->getEstatePictureUrl( $id )).');" class="oo-listimage">';
+						echo '<div class="oo-listimage">';
 					} else {
-						echo '<a href="'.$pEstates->getEstateLink().'" style="background-image: url('.esc_url($pEstates->getEstatePictureUrl( $id )).');" class="oo-listimage">';
+						echo '<a class="oo-listimage estate-status" href="' . esc_url($pEstates->getEstateLink()) . '">';
 					}
+					echo '<picture class="oo-picture">';
+                    /**
+                     * getResponsiveImageSource(
+                     * @param int $imageId
+                     * @param int $mediaBreakPoint
+                     * @param float|null $imageWidth for media breakpoint, optional
+                     * @param float|null $imageHeight for media breakpoint, optional
+                     * @param bool $maxWidth, default = false)
+                     * @return string for image source on various media
+                     */
+                    echo $pEstates->getResponsiveImageSource($id, 575, $dimensions['575']['w'], $dimensions['575']['h'], true);
+                    echo $pEstates->getResponsiveImageSource($id, 1600, $dimensions['1600']['w'], $dimensions['1600']['h']);
+                    echo $pEstates->getResponsiveImageSource($id, 1400, $dimensions['1400']['w'], $dimensions['1400']['h']);
+                    echo $pEstates->getResponsiveImageSource($id, 1200, $dimensions['1200']['w'], $dimensions['1200']['h']);
+                    echo $pEstates->getResponsiveImageSource($id, 992, $dimensions['992']['w'], $dimensions['992']['h']);
+                    echo $pEstates->getResponsiveImageSource($id, 768, $dimensions['768']['w'], $dimensions['768']['h']);
+                    echo $pEstates->getResponsiveImageSource($id, 576, $dimensions['576']['w'], $dimensions['576']['h']);
+                    echo '<img class="oo-responsive-image estate-status" ' .
+                        'src="' . esc_url($pEstates->getEstatePictureUrl($id, isset($dimensions['1600']['w']) || isset($dimensions['1600']['h']) ? ['width'=> $dimensions['1600']['w'], 'height'=>$dimensions['1600']['h']] : null)) . '" ' .
+                        'alt="' . esc_html($pEstates->getEstatePictureTitle($id) ?? __('Image of property', 'onoffice-for-wp-websites')) . '" ' .
+                        'loading="lazy"/>';
+                    echo '</picture>';
 					if ($pictureValues['type'] === \onOffice\WPlugin\Types\ImageTypes::TITLE && $marketingStatus != '') {
 						echo '<span>'.esc_html($marketingStatus).'</span>';
 					}