diff --git a/acf-flexible-content-modal.php b/acf-flexible-content-modal.php index f881df0..c2ebfc0 100644 --- a/acf-flexible-content-modal.php +++ b/acf-flexible-content-modal.php @@ -4,24 +4,24 @@ * Plugin Name: ACF Flexible Content Modal * Description: Make ACF Flexible Content editing the content of each layout using a Modal window. * Plugin URI: http://wordpress.org/plugins/acf-flexible-content-modal/ - * Version: 1.2.3 + * Version: 1.2.4 * Author: Edir Pedro * Author URI: http://edirpedro.com.br * License: GPL2 * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: acf-fc-modal */ - - + + // File Security Check -defined('ABSPATH') or die("No script kiddies please!"); +defined('ABSPATH') or die('No script kiddies please!'); class ACFFCM { // Unique name of the module static private $id = 'acf-fc-modal'; - + // Path static private $path = ''; @@ -30,7 +30,7 @@ class ACFFCM { */ static public function init() { global $acf; - + // Path if($acf) { if(version_compare($acf->version, '5.7.0', '<')) @@ -42,51 +42,51 @@ static public function init() { add_action('init', array(__CLASS__, 'theme_script')); add_action('admin_init', array(__CLASS__, 'admin_css'), 1, 999); add_action('admin_init', array(__CLASS__, 'admin_script'),1, 999); - + } - + /* * Process plugin activation */ static public function activate() { - + } - + /* * Process plugin deactivation */ static public function deactivate() { } - + /* * Register Admin Stylesheets */ static public function admin_css() { wp_enqueue_style('acf-fc-modal', plugins_url(self::$path . '/style.css', __FILE__), array('acf-pro-input')); } - + /* * Register Admin Scripts */ static public function admin_script() { wp_enqueue_script('acf-fc-modal', plugins_url(self::$path . '/script.js', __FILE__), array('acf-pro-input')); } - + /* * Register Theme Stylesheets */ static public function theme_css() { - + } /* * Register Theme Scripts */ static public function theme_script() { - + } - + } // Activating diff --git a/acf/5.6/script.js b/acf/5.6/script.js index ea65344..9faa7f7 100644 --- a/acf/5.6/script.js +++ b/acf/5.6/script.js @@ -1,97 +1,96 @@ - jQuery(document).ready(function() { - - try { - - // Add Elements button - var acf_fc_render = acf.fields.flexible_content.render; - acf.fields.flexible_content.render = function() { - acf_fc_modal_init(); - acf_fc_modal_handle_validation(); - return acf_fc_render.apply(this, arguments); - } - - // ACF FC Modal - acf_fc_modal_init(); - - } catch(e) {} - + + try { + + // Add Elements button + var acf_fc_render = acf.fields.flexible_content.render; + acf.fields.flexible_content.render = function() { + acf_fc_modal_init(); + acf_fc_modal_handle_validation(); + return acf_fc_render.apply(this, arguments); + } + + // ACF FC Modal + acf_fc_modal_init(); + + } catch (e) {} + }); // Init Modal function acf_fc_modal_init() { - - jQuery('.acf-flexible-content .layout:not(.acf-clone)').each(function() { - var layout = jQuery(this); - - // Ignoring if it is a nested FC - if(layout.parents('.acf-fields').length > 1) - return true; - else - layout.addClass('fc-modal'); - - // Remove Toggle button and click event - layout.find('> .acf-fc-layout-handle').off('click'); - layout.find('> .acf-fc-layout-controlls > li:last-child').remove(); // ACF 5.4 - layout.find('> .acf-fc-layout-controlls > a:last-child').remove(); // ACF 5.5 - - // Edit button - var controls = layout.find('> .acf-fc-layout-controlls'); - if(controls.is('ul')) - controls.append('
    • '); - else - controls.append(''); - layout.find('> .acf-fc-layout-controlls a.-pencil').on('click', acf_fc_modal_open); - - // Add modal elements - if(layout.find('> .acf-fc-modal-title').length == 0) { - layout.prepend('
    '); - layout.find('> .acf-fields, > .acf-table').wrapAll('
    '); - } - - }); + + jQuery('.acf-flexible-content .layout:not(.acf-clone)').each(function() { + var layout = jQuery(this); + + // Ignoring if it is a nested FC + if (layout.parents('.acf-fields').length > 1) + return true; + else + layout.addClass('fc-modal'); + + // Remove Toggle button and click event + layout.find('> .acf-fc-layout-handle').off('click'); + layout.find('> .acf-fc-layout-controls > li:last-child').remove(); // ACF 5.4 + layout.find('> .acf-fc-layout-controls > a:last-child').remove(); // ACF 5.5 + + // Edit button + var controls = layout.find('> .acf-fc-layout-controls'); + if (controls.is('ul')) + controls.append('
    • '); + else + controls.append(''); + layout.find('> .acf-fc-layout-controls a.-pencil').on('click', acf_fc_modal_open); + + // Add modal elements + if (layout.find('> .acf-fc-modal-title').length == 0) { + layout.prepend('
    '); + layout.find('> .acf-fields, > .acf-table').wrapAll('
    '); + } + + }); } // Open Modal function acf_fc_modal_open() { - var layout = jQuery(this).parents('.layout'); - if(!layout.hasClass('-modal')) { - layout.removeClass('-collapsed'); - var caption = layout.find('> .acf-fc-layout-handle').html(); - layout.find('.acf-fc-modal-title').html(caption + ''); - layout.addClass('-modal'); - jQuery("body").append("
    "); - jQuery("#acf-flexible-content-modal-overlay").click(acf_fc_modal_remove); - jQuery('body').addClass('acf-modal-open'); - } + var layout = jQuery(this).parents('.layout'); + if (!layout.hasClass('-modal')) { + layout.removeClass('-collapsed'); + var caption = layout.find('> .acf-fc-layout-handle').html(); + layout.find('.acf-fc-modal-title').html(caption + '    '); + layout.addClass('-modal'); + jQuery('body').append('
    '); + jQuery('#acf-flexible-content-modal-overlay').click(acf_fc_modal_remove); + jQuery('body').addClass('acf-modal-open'); + } } // Close Modal function acf_fc_modal_remove() { - jQuery('body').removeClass('acf-modal-open'); - jQuery('.acf-flexible-content .layout.-modal > .acf-fc-layout-handle').click(); // To reload layout title - jQuery('.acf-flexible-content .layout').removeClass('-modal'); - jQuery("#acf-flexible-content-modal-overlay").remove(); + jQuery('body').removeClass('acf-modal-open'); + jQuery('.acf-flexible-content .layout.-modal > .acf-fc-layout-handle').click(); // To reload layout title + jQuery('.acf-flexible-content .layout').removeClass('-modal'); + jQuery('#acf-flexible-content-modal-overlay').remove(); } // Indicate after validation failures function acf_fc_modal_handle_validation() { - - acf.add_action('validation_begin', function() { - jQuery('.acf-flexible-content .layout').removeClass('layout-error-messages'); - }); - - acf.add_action('add_field_error', function($field) { - $field.parents('.layout:not(.acf-clone)').addClass('layout-error-messages'); - }); - - acf.add_action('remove_field_error', function($field) { - $field.parents('.layout:not(.acf-clone)').each(function() { - var layout = jQuery(this); - if(layout.find('.acf-error').length == 0) - layout.removeClass('layout-error-messages'); - }); - }); - + + acf.add_action('validation_begin', function() { + jQuery('.acf-flexible-content .layout').removeClass('layout-error-messages'); + }); + + acf.add_action('add_field_error', function($field) { + $field.parents('.layout:not(.acf-clone)').addClass('layout-error-messages'); + }); + + acf.add_action('remove_field_error', function($field) { + $field.parents('.layout:not(.acf-clone)').each(function() { + var layout = jQuery(this); + if (layout.find('.acf-error').length == 0) + layout.removeClass('layout-error-messages'); + }); + }); + } diff --git a/acf/5.6/style.css b/acf/5.6/style.css index 591448a..08655a6 100644 --- a/acf/5.6/style.css +++ b/acf/5.6/style.css @@ -1,115 +1,119 @@ - -/* ACF Core +/* ACF Core ------------------------------------------------------------*/ -.acf-flexible-content .layout .acf-fc-modal-content > .acf-table { - border: 0 none; - box-shadow: none; +.acf-flexible-content .layout .acf-fc-modal-content>.acf-table { + border: 0 none; + box-shadow: none; } -.acf-flexible-content .layout .acf-fc-modal-content > .acf-table > tbody > tr { - background: #fff; + +.acf-flexible-content .layout .acf-fc-modal-content>.acf-table>tbody>tr { + background: #fff; } -.acf-flexible-content .layout .acf-fc-modal-content > .acf-table > thead > tr > th { - background: #F9F9F9; + +.acf-flexible-content .layout .acf-fc-modal-content>.acf-table>thead>tr>th { + background: #F9F9F9; } -.acf-repeater .acf-row.-collapsed .acf-fc-modal-content > .acf-fields > * { - display: none !important; + +.acf-repeater .acf-row.-collapsed .acf-fc-modal-content>.acf-fields>* { + display: none !important; } -.acf-repeater .acf-row.-collapsed .acf-fc-modal-content > .acf-fields > .acf-field.-collapsed-target { - display: block !important; + +.acf-repeater .acf-row.-collapsed .acf-fc-modal-content>.acf-fields>.acf-field.-collapsed-target { + display: block !important; } .acf-tooltip, .acf-fc-popup { - z-index: 10002 !important; + z-index: 10002 !important; } /* All collapsed */ -.acf-fields.-top > .acf-field-flexible-content > .acf-input > .acf-flexible-content > .values > .layout > .acf-fc-layout-handle { - border-bottom-width: 0; +.acf-fields.-top>.acf-field-flexible-content>.acf-input>.acf-flexible-content>.values>.layout>.acf-fc-layout-handle { + border-bottom-width: 0; } -.acf-fields.-top > .acf-field-flexible-content > .acf-input > .acf-flexible-content > .values > .layout > .acf-fields, -.acf-fields.-top > .acf-field-flexible-content > .acf-input > .acf-flexible-content > .values > .layout > .acf-table { - display: none; + +.acf-fields.-top>.acf-field-flexible-content>.acf-input>.acf-flexible-content>.values>.layout>.acf-fields, +.acf-fields.-top>.acf-field-flexible-content>.acf-input>.acf-flexible-content>.values>.layout>.acf-table { + display: none; } /* Modal ------------------------------------------------------------*/ body.acf-modal-open { - overflow: hidden; + overflow: hidden; } #acf-flexible-content-modal-overlay { - background: #000; - opacity: 0.7; - filter: alpha(opacity=70); - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 10000; + background: #000; + opacity: 0.7; + filter: alpha(opacity=70); + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 10000; } .acf-flexible-content .layout.-modal { - z-index: 10001; - position: fixed !important; - top: 5vh !important; - left: 0 !important; - right: 0 !important; - margin: auto; - width: 90vw; - max-width: 960px; - max-height: 90vh; - box-shadow: 0 5px 15px rgba(0,0,0,0.7); + z-index: 10001; + position: fixed !important; + top: 5vh !important; + left: 0 !important; + right: 0 !important; + margin: auto; + width: 90vw; + max-width: 960px; + max-height: 90vh; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7); } -.acf-flexible-content .layout > .acf-fc-modal-content { - display: none; +.acf-flexible-content .layout>.acf-fc-modal-content { + display: none; } -.acf-flexible-content .layout.-modal > .acf-fc-modal-content { - display: block; - overflow: auto; - max-height: calc(90vh - 38px); +.acf-flexible-content .layout.-modal>.acf-fc-modal-content { + display: block; + overflow: auto; + max-height: calc(90vh - 38px); } .acf-flexible-content .layout .acf-fc-modal-title { - display: none; - box-sizing: border-box; - height: 37px; - line-height: 37px; - padding: 0 10px; - background: #eee; - border-bottom: 1px solid #dfdfdf; + display: none; + box-sizing: border-box; + height: 37px; + line-height: 37px; + padding: 0 10px; + background: #eee; + border-bottom: 1px solid #dfdfdf; } -.acf-flexible-content .layout .acf-fc-modal-title > .acf-icon { - float: right; - top: 4px; +.acf-flexible-content .layout .acf-fc-modal-title>.acf-icon { + float: right; + top: 4px; } -.acf-flexible-content .layout .acf-fc-modal-title > .acf-fc-layout-order { - background: #ddd; +.acf-flexible-content .layout .acf-fc-modal-title>.acf-fc-layout-order { + background: #ddd; } .acf-flexible-content .layout.-modal .acf-fc-modal-title { - display: block; + display: block; } -.acf-flexible-content .layout.-modal > .acf-fc-layout-controlls, -.acf-flexible-content .layout.-modal > .acf-fc-layout-handle { - display: none; +.acf-flexible-content .layout.-modal>.acf-fc-layout-controls, +.acf-flexible-content .layout.-modal>.acf-fc-layout-handle { + display: none; } -.acf-flexible-content .layout.fc-modal > .acf-fc-layout-handle { - border: none !important; +.acf-flexible-content .layout.fc-modal>.acf-fc-layout-handle { + border: none !important; } .acf-icon.-pencil:before { - font-size: 12px; + font-size: 12px; } -.acf-flexible-content .layout.layout-error-messages > .acf-fc-layout-handle .acf-fc-layout-order { - background: #F55E4F; - color: #fff; -} \ No newline at end of file +.acf-flexible-content .layout.layout-error-messages>.acf-fc-layout-handle .acf-fc-layout-order { + background: #F55E4F; + color: #fff; +} diff --git a/composer.json b/composer.json index 0ee5b8c..1c08557 100644 --- a/composer.json +++ b/composer.json @@ -1,5 +1,6 @@ { "name": "edirpedro/acf-flexible-content-modal", + "version": "1.2.4", "type": "wordpress-plugin", "license": "MIT", "description": "Make ACF Flexible Content editing the content of each layout using a Modal window.", @@ -20,9 +21,9 @@ "advanced custom fields", "flexible content" ], - "prefer-stable": true, + "minimum-stability": "stable", "require": { "composer/installers": "^1.0", "php": ">=5.2.0" } -} \ No newline at end of file +} diff --git a/readme.md b/readme.md index bf3013c..9faa423 100644 --- a/readme.md +++ b/readme.md @@ -6,7 +6,7 @@ ## Description -The button to collapse the layout's elements will be changed to a Edit button, the fields will be opened inside a Modal windows. This will let you order the list of layouts easily and to fill the fields separately. +The button to collapse the layout's elements will be changed to a Edit button, the fields will be opened inside a Modal window. This will let you order the list of layouts easily and to fill the fields separately. You can also open the modal by double clicking on the layout. [Plugin Page](https://wordpress.org/plugins/acf-flexible-content-modal/) @@ -25,4 +25,3 @@ Modal window to fill the contents. ### How to name each flexible content layout? If you want to name each of the flexible content layout, you can use the ACF hook [acf/fields/flexible_content/layout_title](https://www.advancedcustomfields.com/resources/acf-fields-flexible_content-layout_title/). - diff --git a/readme.txt b/readme.txt index 7b123e2..0c6edf4 100644 --- a/readme.txt +++ b/readme.txt @@ -3,7 +3,7 @@ Contributors: edir Tags: acf, advanced-custom-field, flexible-content Requires at least: 4.5.2 Tested up to: 5.0.3 -Stable tag: 1.2.3 +Stable tag: 1.2.4 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html @@ -13,7 +13,7 @@ Make ACF Flexible Content editing the content of each layout using a Modal windo Make ACF Flexible Content editing the content of each layout using a Modal window. -The button to collapse the layout's elements will be replaced to a Edit button, the fields will be opened inside a Modal window. This will let you order the list of layouts easily and to fill the fields separately. +The button to collapse the layout's elements will be changed to a Edit button, the fields will be opened inside a Modal window. This will let you order the list of layouts easily and to fill the fields separately. You can also open the modal by double clicking on the layout. == Installation == @@ -33,6 +33,11 @@ If you want to name each of the flexible content layout, you can use the ACF hoo == Changelog == += 1.2.4 = +* Code cleanup +* Fixed typos in JS and CSS for ACF versions <= 5.6 +* Open modal when layout field is double clicked instead of a single click to prevent opening on re-order + = 1.2.3 = * Highlight layout field when modal is closed * Open modal when layout field is clicked diff --git a/script.js b/script.js index cdc0c53..f53a40b 100644 --- a/script.js +++ b/script.js @@ -1,175 +1,175 @@ (function($) { - - var ACFFCM = { - - modals: [], - - init: function() { - - if(typeof acf === 'undefined') { - console.error('ACF JavaScript library not found!'); - return false; - } - - // Add modal to current layouts - - acf.addAction('load_field/type=flexible_content', function(field) { - field.$el.find('.acf-flexible-content:first > .values > .layout:not(.fc-modal)').each(function() { - ACFFCM.addModal($(this)); - }); - }); - - // Add modal to new layouts - - acf.addAction('after_duplicate', function($clone, $el) { - if($el.is('.layout')) - ACFFCM.addModal($el); - }); - - // Automatically open the new layout after append it, to improve usability - - acf.addAction('append', function($el) { - if($el.is('.layout')) - $el.find('> .acf-fc-layout-controls a.-pencil').trigger('click'); - }); - - // Point error messages inside FC - - acf.addAction('invalid_field', function(field) { - ACFFCM.invalidField(field.$el); - }); - - // Remove error messages - - acf.addAction('valid_field', function(field) { - ACFFCM.validField(field.$el); - }); - - // Pressing ESC makes the modal to close - - $(document).keyup(function(e) { - if(e.keyCode == 27 && $('body').hasClass('acf-modal-open')) - ACFFCM.close(); - }); - - }, - - addModal: function($layout) { - - $layout.addClass('fc-modal'); - $layout.removeClass('-collapsed'); - - // Remove collapse button and click event - - $layout.find('> .acf-fc-layout-handle').off('click'); - $layout.find('> .acf-fc-layout-controls > a.-collapse').remove(); - - // Open modal when the collapsed layout is clicked - - $layout.find('> .acf-fc-layout-handle').on('click', ACFFCM.open); - - // Edit button - - var edit = $('    '); - edit.on('click', ACFFCM.open); - $layout.find('> .acf-fc-layout-controls').append(edit); - - // Add modal elements - - $layout.prepend('
    '); - $layout.find('> .acf-fields, > .acf-table').wrapAll('
    '); - - }, - - open: function() { - - var $layout = $(this).parents('.layout:first'); - - var caption = $layout.find('> .acf-fc-layout-handle').html(); - var a = $('').on('click', ACFFCM.close); - - $layout.find('> .acf-fc-modal-title').html(caption).append(a); - $layout.addClass('-modal'); - - ACFFCM.modals.push($layout); - - ACFFCM.overlay(true); - - }, - - close: function() { - - var $layout = ACFFCM.modals.pop(); - - // Refresh layout title - - var fc = $layout.parents('.acf-field-flexible-content:first'); - var field = acf.getInstance(fc); - field.closeLayout(field.$layout($layout.index())); - - // Close - - $layout.find('> .acf-fc-modal-title').html(' '); - $layout.removeClass('-modal').css('visibility', ''); - $layout.addClass('-highlight-closed'); - - setTimeout(function() { - $layout.removeClass('-highlight-closed'); - }, 750); - - ACFFCM.overlay(false); - - }, - - overlay: function(show) { - - if(show === true && !$('body').hasClass('acf-modal-open')) { - - var overlay = $('
    ').on('click', ACFFCM.close); - $('body').addClass('acf-modal-open').append(overlay); - - } else if(show === false && ACFFCM.modals.length == 0) { - - $('#acf-flexible-content-modal-overlay').remove(); - $('body').removeClass('acf-modal-open'); - - } - - ACFFCM.refresh(); - - }, - - refresh: function() { - - $.each(ACFFCM.modals, function() { - $(this).css('visibility', 'hidden').removeClass('-animate'); - }); - - var index = ACFFCM.modals.length - 1; - - if(index in ACFFCM.modals) - ACFFCM.modals[index].css('visibility', 'visible').addClass('-animate'); - - }, - - invalidField: function($el) { - - $el.parents('.layout').addClass('layout-error-messages'); - - }, - - validField: function($el) { - - $el.parents('.layout').each(function() { - var $layout = $(this); - if($layout.find('.acf-error').length == 0) - $layout.removeClass('layout-error-messages'); - }); - - } - - }; - - ACFFCM.init(); - -})(jQuery); \ No newline at end of file + + var ACFFCM = { + + modals: [], + + init: function() { + + if (typeof acf === 'undefined') { + console.error('ACF JavaScript library not found!'); + return false; + } + + // Add modal to current layouts + + acf.addAction('load_field/type=flexible_content', function(field) { + field.$el.find('.acf-flexible-content:first > .values > .layout:not(.fc-modal)').each(function() { + ACFFCM.addModal($(this)); + }); + }); + + // Add modal to new layouts + + acf.addAction('after_duplicate', function($clone, $el) { + if ($el.is('.layout')) + ACFFCM.addModal($el); + }); + + // Automatically open the new layout after append it, to improve usability + + acf.addAction('append', function($el) { + if ($el.is('.layout')) + $el.find('> .acf-fc-layout-controls a.-pencil').trigger('click'); + }); + + // Point error messages inside FC + + acf.addAction('invalid_field', function(field) { + ACFFCM.invalidField(field.$el); + }); + + // Remove error messages + + acf.addAction('valid_field', function(field) { + ACFFCM.validField(field.$el); + }); + + // Pressing ESC makes the modal to close + + $(document).keyup(function(e) { + if (e.keyCode == 27 && $('body').hasClass('acf-modal-open')) + ACFFCM.close(); + }); + + }, + + addModal: function($layout) { + + $layout.addClass('fc-modal'); + $layout.removeClass('-collapsed'); + + // Remove collapse button and click event + + $layout.find('> .acf-fc-layout-handle').off('click'); + $layout.find('> .acf-fc-layout-controls > a.-collapse').remove(); + + // Open modal when the collapsed layout is clicked + + $layout.find('> .acf-fc-layout-handle').on('click', ACFFCM.open); + + // Edit button + + var edit = $(''); + edit.on('click', ACFFCM.open); + $layout.find('> .acf-fc-layout-controls').append(edit); + + // Add modal elements + + $layout.prepend('
    '); + $layout.find('> .acf-fields, > .acf-table').wrapAll('
    '); + + }, + + open: function() { + + var $layout = $(this).parents('.layout:first'); + + var caption = $layout.find('> .acf-fc-layout-handle').html(); + var a = $('').on('click', ACFFCM.close); + + $layout.find('> .acf-fc-modal-title').html(caption).append(a); + $layout.addClass('-modal'); + + ACFFCM.modals.push($layout); + + ACFFCM.overlay(true); + + }, + + close: function() { + + var $layout = ACFFCM.modals.pop(); + + // Refresh layout title + + var fc = $layout.parents('.acf-field-flexible-content:first'); + var field = acf.getInstance(fc); + field.closeLayout(field.$layout($layout.index())); + + // Close + + $layout.find('> .acf-fc-modal-title').html(' '); + $layout.removeClass('-modal').css('visibility', ''); + $layout.addClass('-highlight-closed'); + + setTimeout(function() { + $layout.removeClass('-highlight-closed'); + }, 750); + + ACFFCM.overlay(false); + + }, + + overlay: function(show) { + + if (show === true && !$('body').hasClass('acf-modal-open')) { + + var overlay = $('
    ').on('click', ACFFCM.close); + $('body').addClass('acf-modal-open').append(overlay); + + } else if (show === false && ACFFCM.modals.length == 0) { + + $('#acf-flexible-content-modal-overlay').remove(); + $('body').removeClass('acf-modal-open'); + + } + + ACFFCM.refresh(); + + }, + + refresh: function() { + + $.each(ACFFCM.modals, function() { + $(this).css('visibility', 'hidden').removeClass('-animate'); + }); + + var index = ACFFCM.modals.length - 1; + + if (index in ACFFCM.modals) + ACFFCM.modals[index].css('visibility', 'visible').addClass('-animate'); + + }, + + invalidField: function($el) { + + $el.parents('.layout').addClass('layout-error-messages'); + + }, + + validField: function($el) { + + $el.parents('.layout').each(function() { + var $layout = $(this); + if ($layout.find('.acf-error').length == 0) + $layout.removeClass('layout-error-messages'); + }); + + } + + }; + + ACFFCM.init(); + +})(jQuery); diff --git a/style.css b/style.css index bd0612a..6dbf6c6 100644 --- a/style.css +++ b/style.css @@ -1,170 +1,186 @@ - -/* ACF Core +/* ACF Core ------------------------------------------------------------*/ - -.acf-flexible-content .layout .acf-fc-modal-content > .acf-table { - border: 0 none; - box-shadow: none; +.acf-flexible-content .layout .acf-fc-modal-content>.acf-table { + border: 0 none; + box-shadow: none; } -.acf-flexible-content .layout .acf-fc-modal-content > .acf-table > tbody > tr { - background: #fff; + +.acf-flexible-content .layout .acf-fc-modal-content>.acf-table>tbody>tr { + background: #fff; } -.acf-flexible-content .layout .acf-fc-modal-content > .acf-table > thead > tr > th { - background: #F9F9F9; + +.acf-flexible-content .layout .acf-fc-modal-content>.acf-table>thead>tr>th { + background: #F9F9F9; } -.acf-repeater .acf-row.-collapsed .acf-fc-modal-content > .acf-fields > * { - display: none !important; + +.acf-repeater .acf-row.-collapsed .acf-fc-modal-content>.acf-fields>* { + display: none !important; } -.acf-repeater .acf-row.-collapsed .acf-fc-modal-content > .acf-fields > .acf-field.-collapsed-target { - display: block !important; + +.acf-repeater .acf-row.-collapsed .acf-fc-modal-content>.acf-fields>.acf-field.-collapsed-target { + display: block !important; } .acf-tooltip, .acf-fc-popup { - z-index: 10002 !important; + z-index: 10002 !important; } -.acf-flexible-content .layout:hover .acf-fc-layout-controls .acf-icon.-plus, -.acf-flexible-content .layout.-hover .acf-fc-layout-controls .acf-icon.-plus, -.acf-flexible-content .layout:hover .acf-fc-layout-controls .acf-icon.-minus, +.acf-flexible-content .layout:hover .acf-fc-layout-controls .acf-icon.-plus, +.acf-flexible-content .layout.-hover .acf-fc-layout-controls .acf-icon.-plus, +.acf-flexible-content .layout:hover .acf-fc-layout-controls .acf-icon.-minus, .acf-flexible-content .layout.-hover .acf-fc-layout-controls .acf-icon.-minus { - visibility: hidden; + visibility: hidden; } -.acf-flexible-content > .values > .layout:hover > .acf-fc-layout-controls .acf-icon.-plus, -.acf-flexible-content > .values > .layout.-hover > .acf-fc-layout-controls .acf-icon.-plus, -.acf-flexible-content > .values > .layout:hover > .acf-fc-layout-controls .acf-icon.-minus, -.acf-flexible-content > .values > .layout.-hover > .acf-fc-layout-controls .acf-icon.-minus { - visibility: visible; +.acf-flexible-content>.values>.layout:hover>.acf-fc-layout-controls .acf-icon.-plus, +.acf-flexible-content>.values>.layout.-hover>.acf-fc-layout-controls .acf-icon.-plus, +.acf-flexible-content>.values>.layout:hover>.acf-fc-layout-controls .acf-icon.-minus, +.acf-flexible-content>.values>.layout.-hover>.acf-fc-layout-controls .acf-icon.-minus { + visibility: visible; } /* All collapsed */ - -.acf-fields.-top > .acf-field-flexible-content > .acf-input > .acf-flexible-content > .values > .layout > .acf-fc-layout-handle { - border-bottom-width: 0; -} -.acf-fields.-top > .acf-field-flexible-content > .acf-input > .acf-flexible-content > .values > .layout > .acf-fields, -.acf-fields.-top > .acf-field-flexible-content > .acf-input > .acf-flexible-content > .values > .layout > .acf-table { - display: none; +.acf-fields.-top>.acf-field-flexible-content>.acf-input>.acf-flexible-content>.values>.layout>.acf-fc-layout-handle { + border-bottom-width: 0; } +.acf-fields.-top>.acf-field-flexible-content>.acf-input>.acf-flexible-content>.values>.layout>.acf-fields, +.acf-fields.-top>.acf-field-flexible-content>.acf-input>.acf-flexible-content>.values>.layout>.acf-table { + display: none; +} /* Modal ------------------------------------------------------------*/ - -body.acf-modal-open { - overflow: hidden; /* popup from fc layout selector can't scroll */ +body.acf-modal-open { + overflow: hidden; + /* popup from fc layout selector can't scroll */ } #acf-flexible-content-modal-overlay { - background: #000; - opacity: 0.7; - filter: alpha(opacity=70); - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 10000; + background: #000; + opacity: 0.7; + filter: alpha(opacity=70); + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 10000; } .acf-flexible-content .layout.-modal { - z-index: 10001; - position: fixed !important; - top: 50px !important; - left: 0 !important; - right: 0 !important; - margin: auto; - width: 90vw; - max-width: 960px; - max-height: calc(100vh - 100px); - box-shadow: 0 5px 15px rgba(0,0,0,0.7); + z-index: 10001; + position: fixed !important; + top: 50px !important; + left: 0 !important; + right: 0 !important; + margin: auto; + width: 90vw; + max-width: 960px; + max-height: calc(100vh - 100px); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7); } -.acf-flexible-content .layout > .acf-fc-modal-content { - display: none; +.acf-flexible-content .layout>.acf-fc-modal-content { + display: none; } -.acf-flexible-content .layout.-modal > .acf-fc-modal-content { - display: block; - overflow: auto; - max-height: calc(100vh - 138px); +.acf-flexible-content .layout.-modal>.acf-fc-modal-content { + display: block; + overflow: auto; + max-height: calc(100vh - 138px); } .acf-flexible-content .layout .acf-fc-modal-title { - position: relative; - display: none; - box-sizing: border-box; - height: 37px; - line-height: 37px; - padding: 0 40px 0 10px; - background: #eee; - border-bottom: 1px solid #dfdfdf; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + position: relative; + display: none; + box-sizing: border-box; + height: 37px; + line-height: 37px; + padding: 0 40px 0 10px; + background: #eee; + border-bottom: 1px solid #dfdfdf; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -.acf-flexible-content .layout .acf-fc-modal-title > .-cancel { - cursor: pointer; - position: absolute; - top: 0; - right: 0; - display: block; - width: 37px; - height: 37px; - color: #666; - line-height: 37px; - text-align: center; +.acf-flexible-content .layout .acf-fc-modal-title>.-cancel { + cursor: pointer; + position: absolute; + top: 0; + right: 0; + display: block; + width: 37px; + height: 37px; + color: #666; + line-height: 37px; + text-align: center; } -.acf-flexible-content .layout .acf-fc-modal-title > .-cancel:hover { - color: #F55E4F; +.acf-flexible-content .layout .acf-fc-modal-title>.-cancel:hover { + color: #F55E4F; } -.acf-flexible-content .layout .acf-fc-modal-title > .acf-fc-layout-order { - background: #ddd; +.acf-flexible-content .layout .acf-fc-modal-title>.acf-fc-layout-order { + background: #ddd; } -.acf-flexible-content .layout.-modal > .acf-fc-modal-title { - display: block; +.acf-flexible-content .layout.-modal>.acf-fc-modal-title { + display: block; } -.acf-flexible-content .layout.-modal > .acf-fc-layout-controls, -.acf-flexible-content .layout.-modal > .acf-fc-layout-handle { - display: none; +.acf-flexible-content .layout.-modal>.acf-fc-layout-controls, +.acf-flexible-content .layout.-modal>.acf-fc-layout-handle { + display: none; } -.acf-flexible-content .layout.fc-modal > .acf-fc-layout-handle { - border: none !important; +.acf-flexible-content .layout.fc-modal>.acf-fc-layout-handle { + border: none !important; } .acf-icon.-pencil::before { - font-size: 12px; + font-size: 12px; } -.acf-flexible-content .layout.layout-error-messages > .acf-fc-layout-handle .acf-fc-layout-order { - background: #F55E4F; - color: #fff; +.acf-flexible-content .layout.layout-error-messages>.acf-fc-layout-handle .acf-fc-layout-order { + background: #F55E4F; + color: #fff; } /* Animation */ - @keyframes fcModalSlide { - from { transform: translateY(-30px); opacity: 0; } - to { transform: translateY(0px); opacity: 1; } + from { + transform: translateY(-30px); + opacity: 0; + } + + to { + transform: translateY(0px); + opacity: 1; + } } .acf-flexible-content .layout.-modal.-animate { - animation: fcModalSlide .2s ease-out; + animation: fcModalSlide .2s ease-out; } @keyframes highlightClosed { - 0% { background: #fff; } - 30% { background: rgba(0, 133, 186, 0.3); } /* WordPress blue, faded */ - 100% { background: #fff; } + 0% { + background: #fff; + } + + 30% { + background: rgba(0, 133, 186, 0.3); + } + + /* WordPress blue, faded */ + 100% { + background: #fff; + } } .acf-flexible-content .layout.-highlight-closed { - animation: highlightClosed .65s .1s ease-out; + animation: highlightClosed .65s .1s ease-out; }