Trying to hack jquery.easypin.js into ACF image fields (mostly unsuccessfully)

README.md

Try to add easypin to ACF's image fields

I've managed to add easypin to ACF's image fields, with a checkbox to enable or disable this functionality when adding a field to a field group; however once trying to edit these items on a post we lose the ability to save the image when the post is saved, and cannot update/ remove the image (via the pencil/x icons).

This is attempting to append the map coordinates to the value saved by ACF, I cannot figure out how to pass the json object of coordinates generated by easypin (front-end javascript) to ACF (back-end php) to store with the value, and editing the value in this way might be making it fail ACF's validation anyhow.

resources:

• http://atayahmet.github.io/jquery.easypin/
• https://www.advancedcustomfields.com/resources/acf-load_value/
• https://www.advancedcustomfields.com/resources/adding-custom-settings-fields/
• https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/
• https://www.advancedcustomfields.com/resources/query-posts-custom-fields/

note: within the sage theme directory, the filenames in this gist are mapped to these locations: lib-image_pins.php maps to lib/image_pins.php assets-scripts-place_image_pins.js maps to assets/scripts/place_image_pins.js

assets-scripts-place_image_pins.js

(function($){
  'use strict';

  function easypin_done (elem) {
    console.log('eastpin_don', elem);
    if($('input[name="content"]', elem).val() !== '') {
      var coords = "";
      if(localStorage) {
        coords = JSON.parse(localStorage.getItem('easypin'));
      }else {
        try {
          coords = JSON.parse(decodeURIComponent($('input[name="easypin-store"]').val()));
        } catch (e) {
          console.log(e);
        }
      }
      console.log(coords);
      $('.image_pins').attr('data-map', JSON.stringify(coords));
      return true;
    }
    return false;
  }

  acf.add_action('load', function( $el ){
    // $el will be equivalent to $('body')
    // find a specific field
    var pins = $el.find(".image_pins");
    var $instance = $("img", pins).easypin({
      init: pins.attr("data-map"),
      markerSrc: "../../app/themes/fortligonierdays/dist/images/easypin/marker.png",
      editSrc: "../../app/themes/fortligonierdays/dist/images/easypin/edit.png",
      deleteSrc: "../../app/themes/fortligonierdays/dist/images/easypin/remove.png",
      modalWidth: 300,
      done: easypin_done
    });
  });

})(jQuery);

lib-image_pins.php

<?php
use Roots\Sage\Assets;

function add_image_pins( $field ) {
  /* var_dump($field); */
  return $field;
}
add_action('acf/render_field/type=image', 'add_image_pins', 20, 1);

// add script to allow placing pins
function my_admin_enqueue_scripts() {
  wp_enqueue_script( 'acf-place-pins', Assets\asset_path('/scripts/place_image_pins.js'), array('jquery'), '1.0.0', true );
}
add_action('admin_enqueue_scripts', 'my_admin_enqueue_scripts');

function prepare_image_pins ( $field ) {
  // ensure image is "large" size, for placing pins on
  $field['preview_size'] = 'large';
  if ($field['image_pins']) {
    $field['wrapper']['class'] .= "image_pins";
    $field['wrapper']['data-map'] = $field['pin_map'];
  }
  return $field;
}
add_action('acf/prepare_field/type=image', 'prepare_image_pins', 20, 1);

function image_pins_update_value( $value, $post_id, $field  ) {
  /* var_dump('update, before:', $value, $field); */
  if ($field['image_pins']) {
    $value .= "||" . $field['wrapper']['data-map'];
  }
  /* var_dump('update, after:', $value); */
  return $value;
}

// acf/update_value - filter for every field
add_filter('acf/update_value/type=image', 'image_pins_update_value', 10, 3);

function image_pins_load_value( $value, $post_id, $field  ) {
  /* var_dump('load, before:', $value); */
  if ($field['image_pins']) {
    $parts = explode('||', $value);
    $field['pin_map'] = $parts[1];
    $value = $parts[0];
  }
  /* var_dump('load, after', $value); */
  return $value;
}

// acf/load_value - filter for every field
add_filter('acf/load_value/type=image', 'image_pins_load_value', 10, 3);

function image_pins_render_field_settings( $field ) {
  acf_render_field_setting( $field, array(
    'label'      => __('Image Pins'),
    'instructions'  => __('Place pins on image to create an image map'),
    'name'      => 'image_pins',
    'type'      => 'true_false'
  ));
}
add_action('acf/render_field_settings/type=image', 'image_pins_render_field_settings');


function my_acf_input_admin_footer() {

?>
    <div class="easy-modal" style="display:none;" modal-position="free">
        <form>
            <h3>Post Slug for Pin</h3>
            <input type="text" class="form-control" name="content" placeholder="type" />
            <br />
            <button type="button" class="btn btn-primary easy-submit">Save Content</button>
        </form>
    </div>
<?php

}

add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');


?>