Last active
August 31, 2022 09:33
-
-
Save MaximeCulea/cc55df7f8822499162d8343e0c3698e9 to your computer and use it in GitHub Desktop.
Transform ACF's flexible layouts list into a nice and UX popup.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Main class for acf flexible customization | |
* | |
* 3 steps to reproduce : | |
* 1 - Copy this class into your project | |
* 2 - change classes depending on your ACF layouts | |
* 3 - make awesome screenshots | |
* | |
* @see credits to : https://hwk.fr/blog/acf-transformer-la-selection-des-layouts-du-contenu-flexible-en-modal | |
* @see final result : https://gist.github.com/MaximeCulea/cc55df7f8822499162d8343e0c3698e9#gistcomment-2562697 | |
* | |
* @author Maxime CULEA | |
*/ | |
class bea_acf_customize_flexible { | |
function __construct() { | |
add_action( 'acf/input/admin_footer', [ $this, 'flexible_content_layout_popup_class' ] ); | |
add_action( 'acf/input/admin_footer', [ $this, 'flexible_content_layout_no_popup' ] ); | |
add_action( 'acf/input/admin_footer', [ $this, 'add_background_div' ] ); | |
add_action( 'acf/input/admin_footer', [ $this, 'css' ] ); | |
} | |
// Ajouter une class à une popup en particulier | |
function flexible_content_layout_popup_class() { ?> | |
<script type="text/javascript"> | |
jQuery(document).ready(function ($) { | |
try { | |
// ACF Flexible Content: Ajouter une class à la modal de sélection de Layouts | |
var flexible_content_position = acf.fields.flexible_content.position_popup; | |
acf.fields.flexible_content.position_popup = function ($popup, $bouton) { | |
// Si le nom du champ flexible = 'mon_flexible' | |
if (this.$field.attr('data-name') == 'content') | |
$popup.addClass('acf-fc-popup-modal'); | |
// Continuer l'exécution normalement | |
return flexible_content_position.apply(this, arguments); | |
} | |
} catch (e) { | |
} | |
}); | |
</script> | |
<?php } | |
// Ne pas afficher de popup si il n’y a qu’un seul Layout | |
function flexible_content_layout_no_popup() { ?> | |
<script type="text/javascript"> | |
jQuery(document).ready(function ($) { | |
try { | |
// ACF Flexible Content: Supprimer la popup si il n'y a qu'un seul Layout | |
var flexible_content_open = acf.fields.flexible_content._open; | |
acf.fields.flexible_content._open = function (e) { | |
var $popup = $(this.$el.children('.tmpl-popup').html()); | |
// On compte le nombre de layouts | |
if ($popup.find('a').length == 1) { | |
acf.fields.flexible_content.add($popup.find('a').attr('data-layout')); | |
return false; | |
} | |
// Si plus d'un layout, continuer l'exécution normalement | |
return flexible_content_open.apply(this, arguments); | |
} | |
} catch (e) { | |
} | |
}); | |
</script> | |
<?php } | |
// Transform text into div for better display | |
function add_background_div() { ?> | |
<script type="text/javascript"> | |
jQuery(document).ready(function ($) { | |
$('a[data-name="add-layout"]').on('click', function(){ | |
setTimeout(function() { | |
$(".acf-fc-popup-modal a").each(function () { | |
var html = "<div>" + $(this).text() + "</div>"; | |
$(this).html(html); | |
}); | |
}, 0); | |
}); | |
}); | |
</script> | |
<?php } | |
function css() { | |
echo '<style type="text/css"> | |
.acf-fc-popup{ | |
width:80%; | |
max-width:1200px; | |
height:80%; | |
max-height:1200px; | |
top:50% !important; | |
left:50% !important; | |
-webkit-transform:translate(-50%, -50%); | |
-ms-transform:translate(-50%, -50%); | |
transform:translate(-50%, -50%); | |
border-radius:0; | |
position: fixed !important; | |
background: none !important; | |
padding:0; | |
-webkit-box-sizing:border-box; | |
box-sizing:border-box; | |
} | |
.acf-fc-popup *{ | |
-webkit-box-sizing:border-box; | |
box-sizing:border-box; | |
} | |
.acf-fc-popup::before, | |
.acf-fc-popup::after{ | |
border-color:transparent !important; | |
} | |
.acf-fc-popup:before{ | |
top: -100% !important; | |
right: 0 !important; | |
bottom: 0 !important; | |
left: -100% !important; | |
position: fixed; | |
background: rgba(0,0,0,0.8); | |
height: 200vh; | |
width: 200vw; | |
margin: 0 !important; | |
padding: 0; | |
content: ""; | |
} | |
.acf-fc-popup ul{ | |
overflow:auto; | |
height:100%; | |
width:100%; | |
background:#f4f4f4; | |
border:#ccc; | |
padding:15px; | |
position:relative; | |
-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.5); | |
box-shadow:0 0 8px rgba(0, 0, 0, 0.5); | |
padding-top: 93px !important; | |
} | |
.acf-fc-popup ul:before{ | |
position: absolute; | |
top: 31px; | |
content: "Ajouter une strate"; | |
font-size: 23px; | |
font-weight: 400; | |
color: #333; | |
left: 30px; | |
} | |
.acf-fc-popup ul:after{ | |
position: absolute; | |
top: 62px; | |
content: "Cliquez sur une strate pour l\'ajouter au contenu de la page."; | |
font-size: 13px; | |
color: #666; | |
left: 30px; | |
font-style: italic; | |
} | |
.acf-fc-popup ul li{ | |
width: 33.33333%; | |
padding: 1%; | |
float: left; | |
} | |
@media only screen and (max-width:960px){ | |
.acf-fc-popup ul li{ | |
width: 50%; | |
} | |
} | |
@media only screen and (max-width:782px){ | |
.acf-fc-popup{ | |
width:95%; | |
height:88%; | |
} | |
.acf-fc-popup ul li{ | |
width: 100%; | |
} | |
} | |
.acf-fc-popup ul li a{ | |
background-repeat: round; | |
width: 100%; | |
height: 150px; | |
border: 1px solid #ddd; | |
} | |
.acf-fc-popup ul li a i{ | |
font-size: 22px; | |
vertical-align: text-top; | |
margin-right: 10px; | |
} | |
.acf-fc-popup a { | |
color: #fff; | |
font-size: 18px; | |
padding: 10px 12px; | |
} | |
.acf-fc-popup a:hover { | |
background-repeat: round; | |
box-shadow: 3px 3px 2px 1px rgba(87, 87, 88, 0.1); | |
} | |
.acf-fc-popup div + .acf-fc-popup a:hover { | |
color: #eee; | |
} | |
.acf-fc-popup div { | |
background-color: white; | |
position: absolute; | |
padding: 5px 10px; | |
border-radius: 5px; | |
color: black; | |
font-size: 13px; | |
text-transform: uppercase; | |
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3); | |
} | |
/** | |
* Provide an image for each layout | |
* Images are into 366*150 or bigger 732*300 | |
*/ | |
.acf-fc-popup ul li a[data-layout=text]{ | |
background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/text.png); | |
} | |
.acf-fc-popup ul li a[data-layout=numbers]{ | |
background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/numbers.png); | |
} | |
.acf-fc-popup ul li a[data-layout=visual]{ | |
background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/visual.png); | |
} | |
.acf-fc-popup ul li a[data-layout=featured]{ | |
background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/featured.png); | |
} | |
.acf-fc-popup ul li a[data-layout=video]{ | |
background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/video.png); | |
} | |
.acf-fc-popup ul li a[data-layout=push_2]{ | |
background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/push-2.png); | |
} | |
.acf-fc-popup ul li a[data-layout=testimonies]{ | |
background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/testimonies.png); | |
} | |
.acf-fc-popup ul li a[data-layout=push_3]{ | |
background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/push-3.png); | |
} | |
.acf-fc-popup ul li a[data-layout=celebrities]{ | |
background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/celebrities.png); | |
} | |
.acf-fc-popup ul li a[data-layout=partners]{ | |
background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/partners.png); | |
} | |
.acf-fc-popup ul li a[data-layout=push_2_light]{ | |
background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/push-2-light.png); | |
} | |
.acf-fc-popup ul li a[data-layout=form]{ | |
background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/form.png); | |
} | |
</style>'; | |
} | |
} | |
new bea_acf_customize_flexible(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Now see https://wordpress.org/plugins/acf-beautiful-flexible/