ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / letacommog / adelcya / wp-content / themes / betheme / muffin-options / fields / upload_multi

/**
 * Mfn_Upload_Multi - closure thats describe behaviour of Image Gallery
 *
 * @param  {Object} $     - jQuery reference
 * @return {Object} .init - Method to start the closure
 */
var Mfn_Upload_Multi = (function($) {

/**
   * Global variables
   */
  var multi_file_frame = null,
    multi_file_frame_open = null,
    multi_file_frame_select = null;

var selector = '.mfnf-upload.multi';

/**
   * Attach events to buttons. Runs whole script.
   */
  function init() {

open_media_gallery();
    attach_remove_action();
    attach_remove_all_action();

ui_sortable();

}

/**
   * UI Sortable Init
   */
  function ui_sortable() {

$('.gallery-container', selector).hover(function() {

var el = $(this),
        parent = el.closest(selector);

if ($('.image-container', el).length) {

// init sortable
        if (!el.hasClass('ui-sortable')) {
          el.sortable({
            opacity: 0.9,
            update: function() {
              fill_input(parent, find_all_ids(parent));
            }
          });
        }

// enable inactive sortable
        if (el.hasClass('ui-sortable-disabled')) {
          el.sortable('enable');
        }
      }

});
  }

/**
   * Click | Add
   */
  function open_media_gallery() {
    $('.upload-add', selector).click(function(event) {
      event.preventDefault();

// Create the media frame
      multi_file_frame = wp.media.frames.mfnGallery = wp.media({
        title: $(this).data('button'),
        multiple: 'add',
        library: {
          type: 'image',
        },
        button: {
          text: $(this).data('button')
        }
      });

// Attach hooks to the events

multi_file_frame.on('open', multi_file_frame_open);
      multi_file_frame.on('select', multi_file_frame_select);

multi_file_frame.open();
    });
  }

/**
   * WP Media Frame | Open
   */
  multi_file_frame_open = function() {

var handle = $(multi_file_frame.modal.clickedOpenerEl),
      parent = handle.closest(selector),
      library = multi_file_frame.state().get('selection'),
      images = $('.upload-input', parent).val(),
      image_ids;

if (!images) {
      return true;
    }

image_ids = images.split(',');

image_ids.forEach(function(id) {
      var attachment = wp.media.attachment(id);
      attachment.fetch();
      library.add(attachment ? [attachment] : []);
    });
  };

/**
   * WP Media Frame | Select
   */
  multi_file_frame_select = function() {

var handle = $(multi_file_frame.modal.clickedOpenerEl),
      parent = handle.closest(selector),
      gallery = $('.gallery-container', parent),
      library = multi_file_frame.state().get('selection'),
      image_urls = [],
      image_ids = [],
      image_url, output_html, joined_ids;

gallery.html('');

library.map(function(image) {

image = image.toJSON();
      image_urls.push(image.url);
      image_ids.push(image.id);

if (image.sizes.thumbnail) {
        image_url = image.sizes.thumbnail.url;
      } else {
        image_url = image.url;
      }

output_html = '<div class="image-container">' +
        '<img class="screenshot image" src="' + image_url + '" data-pic-id="' + image.id + '" />' +
        '<a href="#" class="upload-remove single dashicons dashicons-no"></a>' +
        '</div>';

gallery.append(output_html);
    });

joined_ids = image_ids.join(',').replace(/^,*/, '');
    if (joined_ids.length !== 0) {
      $('a.upload-remove.all', parent).fadeIn(300);
    }

fill_input(parent, joined_ids);

attach_remove_action();
  };

/**
   * Click | Remove single
   */
  function attach_remove_action() {
    $('a.upload-remove.single', selector).click(function(event) {
      event.preventDefault();

var handle = $(this),
        parent = handle.closest(selector),
        joined_ids;

handle.closest('.image-container').remove();

joined_ids = find_all_ids(parent);
      if (joined_ids === '') {
        $('a.upload-remove.all', parent).fadeOut(300);
      }

fill_input(parent, joined_ids);
    });
  }

/**
   * Click | Remove all
   */
  function attach_remove_all_action() {
    $('.upload-remove.all', selector).click(function(event) {
      event.preventDefault();

var handle = $(this),
        parent = handle.closest(selector);

$(this).fadeOut(300);

$('input', parent).val('');
      $('.gallery-container', parent).html('');

});
  }

/**
   * Helper method. Find all IDs of added images.
   * @method find_all_ids
   * @return {String}		joined ids separated by `;`
   */
  function find_all_ids(parent) {
    var image_ids = [],
      id;

$('.gallery-container img.screenshot', parent).each(function() {
      id = $(this).attr('data-pic-id');
      image_ids.push(id);
    });

return image_ids.join(",");
  }

/**
   * Helper method. Set the value of image_gallery input.
   * @method fill_input
   * @param  {String} joined_ids - string to be set into input
   */
  function fill_input(parent, joined_ids) {

$('.upload-input', parent)
      .val(joined_ids)
      .trigger('change');
  }

/**
   * Return
   * Method to start the closure
   */
  return {
    init: init
  };

})(jQuery);

jQuery(document).ready(function() {
  var mfn_upload_multi = Mfn_Upload_Multi.init();
});

[+] ..
[-] field_upload_multi.js [edit]
[-] field_upload_multi.php [edit]