Skip to content

Instantly share code, notes, and snippets.

@MaximeCulea
Last active August 31, 2022 09:33
Show Gist options
  • Save MaximeCulea/cc55df7f8822499162d8343e0c3698e9 to your computer and use it in GitHub Desktop.
Save MaximeCulea/cc55df7f8822499162d8343e0c3698e9 to your computer and use it in GitHub Desktop.
Transform ACF's flexible layouts list into a nice and UX popup.
/**
* 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();
@MaximeCulea
Copy link
Author

Which is doing something like this 👇
acf-custom-flexible

@MaximeCulea
Copy link
Author

MaximeCulea commented Jun 5, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment