web-dev-qa-db-fra.com

Ajout de champs à l'utilitaire de téléchargement multimédia avec les écouteurs jQuery

J'ai donc le code pour ajouter avec succès un champ de sélection à mon uploader de médias (vue de galerie), ce qui est cool, mais je dois aussi ajouter des écouteurs jquery à ce champ.

J'utilise le crochet 'print_media_templates' pour ajouter mon balisage et js, et je souhaite ajouter un écouteur jQuery au champ de sélection, .js--gallery-style, qui basculerait entre les champs avec show ou autre

function add_gallery_type_option(){


  ?>
  <script type="text/html" id="tmpl-my-custom-gallery-setting">
    <label class="setting">
      <span><?php _e('Gallery Style'); ?></span>
      <select class="js--gallery-style" data-setting="gallery_style">
        <option value="default"> Grid (default) </option>
        <option value="slider"> Slider </option>
      </select>
    </label>
  </script>

  <script>

    jQuery(document).ready(function(){


      _.extend(wp.media.gallery.defaults, {
        my_custom_attr: 'default_val'
      });

      // merge default gallery settings template with yours
      wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
        template: function(view){
          return wp.media.template('gallery-settings')(view)
               + wp.media.template('my-custom-gallery-setting')(view);
        }
      });

    });

  </script>
  <?php
}
add_action('print_media_templates', 'add_gallery_type_option');

Je suis sûr que c'est assez facile, mais je n'ai pas encore appris backbone.js, donc je ne sais pas par où commencer.

jquerymedia-librarymedia-modalbackbone
2
rugbert

De Blackbone.js site web:

le rendu est la fonction principale que votre vue doit remplacer afin de remplir son élément (this.el) avec le code HTML approprié. La convention est pour rendre toujours retourner cela.

J'ai donc modifié un peu le code pour ajouter jQuery list listener.

function add_gallery_type_option(){
  ?>
  <script type="text/html" id="tmpl-my-custom-gallery-setting">
    <label class="setting">
      <span><?php _e('Gallery Style'); ?></span>
      <select class="js--gallery-style" data-setting="gallery_style">
        <option value="default"> Grid (default) </option>
        <option value="slider"> Slider </option>
      </select>
    </label>
  </script>

  <script>

    jQuery(document).ready(function(){
      _.extend(wp.media.gallery.defaults, {
        my_custom_attr: 'default_val'
      });

      // merge default gallery settings template with yours
      wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
        template: function(view){
          return wp.media.template('gallery-settings')(view)
               + wp.media.template('my-custom-gallery-setting')(view);
        },
        render: function() {
                wp.media.View.prototype.render.apply( this, arguments );

                jQuery(this.$('.js--gallery-style')).change(function(e)
                  {
                      alert(jQuery(this).val());
                  })
                return this;
            }
      });

    });

  </script>
  <?php
}
add_action('print_media_templates', 'add_gallery_type_option');
3
kalimah-apps