resolves js and css conflicts

jameelmoses · May 26, 2021 · dea3f5b · dea3f5b
1 parent f7e8d60
commit dea3f5b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 17 deletions.
diff --git a/assets/css/acf-flexible-content-preview.css b/assets/css/acf-flexible-content-preview.css
@@ -38,14 +38,14 @@
   margin: 0 !important;
 }
 .acf-fc-popup ul {
-  display: flex;
+  display: flex !important;
   flex-wrap: wrap;
   justify-content: flex-start;
   position: relative;
   width: 100%;
   height: 100%;
   background: #f4f4f4;
-  padding: 15px;
+  padding: 15px !important;
   border: #ccc;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
   overflow-y: auto;

diff --git a/assets/js/acf-flexible-content-preview.js b/assets/js/acf-flexible-content-preview.js
@@ -1,17 +1,15 @@
 // Delete the flexible content preview popup if only one layout
 jQuery(document).ready(function(jQuery) {
 
-  if ( typeof acf !== 'undefined' && typeof acf.getField === 'function' ) {
-    var flexible_content_open = acf.getField('acf-field-flexible-content');
-    flexible_content_open._open = function(e) {
-      var $popup = jQuery(this.$el.children('.tmpl-popup').html());
-      if ($popup.find('a').length == 1) {
-        // Only one layout
-        flexible_content_open.add($popup.find('a').attr('data-layout'));
-        return false;
-      }
-      return flexible_content_open.apply(this, arguments);
+  var flexible_content_open = acf.getField('acf-field-flexible-content');
+  flexible_content_open._open = function(e) {
+    var $popup = jQuery(this.$el.children('.tmpl-popup').html());
+    if ($popup.find('a').length == 1) {
+      // Only one layout
+      flexible_content_open.add($popup.find('a').attr('data-layout'));
+      return false;
     }
+    return flexible_content_open.apply(this, arguments);
   }
 
   // Transform a link into a div for styling purpose

diff --git a/assets/scss/acf-flexible-content-preview.scss b/assets/scss/acf-flexible-content-preview.scss
@@ -44,14 +44,14 @@
   }
 
   ul {
-    display: flex;
+    display: flex !important;
     flex-wrap: wrap;
     justify-content: flex-start;
     position: relative;
     width: 100%;
     height: 100%;
     background: #f4f4f4;
-    padding: 15px;
+    padding: 15px !important;
     border: #ccc;
     box-shadow: 0 0 8px rgba(#000, .5);
     overflow-y: auto;

diff --git a/classes/main.php b/classes/main.php
@@ -8,8 +8,8 @@ class Main {
 	protected function init() {
 
 		// Assets
-		add_action( 'acf/enqueue_scripts', [ $this, 'register_assets' ], 1 );
-		add_action( 'acf/enqueue_scripts', [ $this, 'enqueue_assets' ] );
+		add_action( 'acf/input/admin_enqueue_scripts', [ $this, 'register_assets' ], 1 );
+		add_action( 'acf/input/admin_enqueue_scripts', [ $this, 'enqueue_assets' ] );
 
 		// Images
 		add_action( 'acf/input/admin_footer', [ $this, 'layouts_images_style' ], 20 );
@@ -149,7 +149,7 @@ public function locate_image( $layout ) {
 	 * Register assets
 	 */
 	public function register_assets() {
-		wp_register_script( 'acf-flexible-content-preview', FCP_URL . 'assets/js/acf-flexible-content-preview.js', [ 'jquery' ], FCP_VERSION );
+		wp_register_script( 'acf-flexible-content-preview', FCP_URL . 'assets/js/acf-flexible-content-preview.js', [ 'jquery', 'acf-input' ], FCP_VERSION );
 		wp_register_style( 'acf-flexible-content-preview', FCP_URL . 'assets/css/acf-flexible-content-preview.css', [], FCP_VERSION );
 	}