Transform beforeafter block into generic image+text block
- Add toggle (isBeforeAfter) to switch between modes - Mode simple: single image + text (2 columns layout) - Mode comparison: before/after slider + text (2 columns layout) - Remove "1/2, 1/2" layout from report blueprint (keep only "1/1") - Update Vue component with 2-column grid preview - Update PHP snippet to handle both modes - Rename block to "Image avec texte" Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
a765b5d235
commit
6251d8f09f
6 changed files with 244 additions and 133 deletions
|
|
@ -1 +1 @@
|
|||
(function(){"use strict";function f(n,e,t,r,s,a,o,p){var i=typeof n=="function"?n.options:n;return e&&(i.render=e,i.staticRenderFns=t,i._compiled=!0),i._scopeId="data-v-"+a,{exports:n,options:i}}const c={__name:"BeforeAfterBlock",props:{content:Object},setup(n){const e=n,t=Vue.computed(()=>{var o;if(!((o=e.content)!=null&&o.imagebefore)||!e.content.imagebefore.length)return null;const a=e.content.imagebefore[0];return(a==null?void 0:a.url)||null}),r=Vue.computed(()=>{var o;if(!((o=e.content)!=null&&o.imageafter)||!e.content.imageafter.length)return null;const a=e.content.imageafter[0];return(a==null?void 0:a.url)||null}),s=Vue.computed(()=>t.value||r.value);return{__sfc:!0,props:e,imageBeforeUrl:t,imageAfterUrl:r,hasImages:s}}};var _=function(){var e=this,t=e._self._c,r=e._self._setupProxy;return t("div",{staticClass:"beforeafter-preview",on:{click:function(s){return e.$emit("open")}}},[r.hasImages?t("div",{staticClass:"beforeafter-preview__images"},[r.imageAfterUrl?t("img",{staticClass:"beforeafter-preview__image beforeafter-preview__image--after",attrs:{src:r.imageAfterUrl,alt:"Après"}}):e._e(),r.imageBeforeUrl?t("img",{staticClass:"beforeafter-preview__image beforeafter-preview__image--before",attrs:{src:r.imageBeforeUrl,alt:"Avant"}}):e._e(),r.imageBeforeUrl&&r.imageAfterUrl?t("div",{staticClass:"beforeafter-preview__divider"}):e._e()]):e._e(),e.content.caption?t("p",{staticClass:"beforeafter-preview__caption"},[e._v(" "+e._s(e.content.caption)+" ")]):e._e(),r.hasImages?e._e():t("div",{staticClass:"beforeafter-preview__empty"},[e._v(" Cliquer pour ajouter des images ")])])},l=[],u=f(c,_,l,!1,null,"92ee366b");const m=u.exports;window.panel.plugin("index/beforeafter",{blocks:{beforeafter:m}})})();
|
||||
(function(){"use strict";function m(a,e,t,i,s,c,r,n){var o=typeof a=="function"?a.options:a;return e&&(o.render=e,o.staticRenderFns=t,o._compiled=!0),o._scopeId="data-v-"+c,{exports:a,options:o}}const l={__name:"BeforeAfterBlock",props:{content:Object},setup(a){const e=a,t=Vue.computed(()=>{var r,n;return((r=e.content)==null?void 0:r.isbeforeafter)===!0||((n=e.content)==null?void 0:n.isbeforeafter)==="true"}),i=Vue.computed(()=>{var n;if(!((n=e.content)!=null&&n.image)||!e.content.image.length)return null;const r=e.content.image[0];return(r==null?void 0:r.url)||null}),s=Vue.computed(()=>{var n;if(!((n=e.content)!=null&&n.imagebefore)||!e.content.imagebefore.length)return null;const r=e.content.imagebefore[0];return(r==null?void 0:r.url)||null}),c=Vue.computed(()=>{var n;if(!((n=e.content)!=null&&n.imageafter)||!e.content.imageafter.length)return null;const r=e.content.imageafter[0];return(r==null?void 0:r.url)||null});return{__sfc:!0,props:e,isBeforeAfter:t,imageUrl:i,imageBeforeUrl:s,imageAfterUrl:c}}};var _=function(){var e=this,t=e._self._c,i=e._self._setupProxy;return t("div",{staticClass:"imagetext-preview",on:{click:function(s){return e.$emit("open")}}},[t("div",{staticClass:"imagetext-preview__container"},[t("div",{staticClass:"imagetext-preview__media"},[i.isBeforeAfter&&(i.imageBeforeUrl||i.imageAfterUrl)?t("div",{staticClass:"imagetext-preview__slider"},[i.imageAfterUrl?t("img",{staticClass:"imagetext-preview__image imagetext-preview__image--after",attrs:{src:i.imageAfterUrl,alt:"Après"}}):e._e(),i.imageBeforeUrl?t("img",{staticClass:"imagetext-preview__image imagetext-preview__image--before",attrs:{src:i.imageBeforeUrl,alt:"Avant"}}):e._e(),i.imageBeforeUrl&&i.imageAfterUrl?t("div",{staticClass:"imagetext-preview__divider"}):e._e()]):!i.isBeforeAfter&&i.imageUrl?t("img",{staticClass:"imagetext-preview__single-image",attrs:{src:i.imageUrl,alt:"Image"}}):t("div",{staticClass:"imagetext-preview__empty-media"},[e._v(" Aucune image ")]),e.content.caption?t("p",{staticClass:"imagetext-preview__caption"},[e._v(" "+e._s(e.content.caption)+" ")]):e._e()]),t("div",{staticClass:"imagetext-preview__text"},[e.content.text?t("div",{domProps:{innerHTML:e._s(e.content.text)}}):t("div",{staticClass:"imagetext-preview__empty-text"},[e._v(" Aucun texte ")])])])])},f=[],g=m(l,_,f,!1,null,"caec09ec");const u=g.exports;window.panel.plugin("index/beforeafter",{blocks:{beforeafter:u}})})();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue