CODEWITHSUNDEEP
javascriptjquerywordpress
Alexander
Alexander

Reputation: 143

How to make optimize this jQuery code?

I'm looking for a help how to simplify my jQuery code and avoid repetitions. I know it can be achieved using OOP, but I don't have enough knowledge how to do this properly. Is there a way to avoid body.on('click') repetitions?

Here is my JavaScript code: (Updated)

jQuery( document ).ready( function($) {

  /* WordPress Media Uploader
  -------------------------------------------------------*/
  function upload(type) {

    if ( mediaUploader ) {
      mediaUploader.open();
    }

    var mediaUploader = wp.media.frames.file_frame = wp.media({
      title: 'Select an Image',
      button: {
        text: 'Use This Image'
      },
      multiple: false
    });

    mediaUploader.on('select', function() {
      var attachment = mediaUploader.state().get('selection').first().toJSON();
      console.log(attachment);
      $('.deo-' + type + '-hidden-input').val(attachment.url);
      $('.deo-' + type + '-media').attr('src', attachment.url);
    });

    mediaUploader.open();

  }

  $('body').on('click', '.deo-image-upload-button', function() {
    upload('image');
  });

  $('body').on('click', '.deo-signature-upload-button', function() {
    upload('signature');
  });

  $('body').on('click', '.deo-image-delete-button', function(e) {
    $('.deo-image-hidden-input').val('');
    $('.deo-image-media').attr('src', '');
  });

  $('body').on('click', '.deo-signature-delete-button', function(e) {
    $('.deo-signature-hidden-input').val('');
    $('.deo-signature-media').attr('src', '');
  });

});

Upvotes: 0

Views: 53

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

I used attribute selectors to "merge" the similar functions.

It is not tested, but should work.

jQuery( document ).ready( function($) {

  /* WordPress Media Uploader
  -------------------------------------------------------*/
  var imgSign = "";
  var attachment;

  mediaUploader.on('select', function() {
    attachment = mediaUploader.state().get('selection').first().toJSON();
    console.log(attachment);
    $('.deo-'+imgSign+'-hidden-input').val(attachment.url);
    $('.deo-'+imgSign+'-media').attr('src', attachment.url);
  });

  // Image or signature click
  $('body').on('click', '[class*="-upload-button"]', function(e) {
    e.preventDefault();

    $(this).hasClass("deo-image-upload-button") ? imgSign = "image" : imgSign = "signature";

    if ( mediaUploader ) {
      mediaUploader.open();
    }

    // Empty attachements.
    attachment = "";
    var mediaUploader = wp.media.frames.file_frame = wp.media({
      title: 'Select an Image',
      button: {
        text: 'Use This Image'
      },
      multiple: false
    });



    mediaUploader.open();
  });

  // Image or signature delete
  $('body').on('click', '[class*="-delete-button"]', function(e) {
    $(this).hasClass("deo-image-delete-button") ? imgSign = "image" : imgSign = "signature";
    $('.deo-'+imgSign+'-hidden-input').val('');
    $('.deo-'+imgSign+'-media').attr('src', '');
  });

});

I don't know about mediaUploader.open();... Is it really usefull to call it that often?

Upvotes: 1

Talha Abrar
Talha Abrar

Reputation: 882

You can minimize on click event like this, 

 $('body').on('click', '.deo-image-upload-button, .deo-signature-upload-button, .deo-image-delete-button, .deo-signature-delete-button', function() {
    if ($(this).hasClass('deo-image-upload-button')) {
      upload('image');
    } else if ($(this).hasClass('deo-signature-upload-button')) {
      upload('signature');
    } else if ($(this).hasClass('deo-image-delete-button')) {
      $('.deo-image-hidden-input').val('');
      $('.deo-image-media').attr('src', '');
    } else if ($(this).hasClass('deo-signature-delete-button')) {
      $('.deo-signature-hidden-input').val('');
      $('.deo-signature-media').attr('src', '');
    }
  });

here is a Fiddle for you to test

Upvotes: 1

Related Questions