WordPress.org

Ready to get started?Download WordPress

Forums

widgets admin page and js inside widget... (2 posts)

  1. vimes1984
    Member
    Posted 12 months ago #

    Ok so here's the question:
    I have registered a custom widget inside of my functions.php, the widget has custom js inside it the code is as follows:

    /*
    *
    *Ajax loaded gallery for sidebar
    *Note tis will not work cross browser.
    *
    *
    */
    /**
     * Plugin Name: A gallery Widget
     * Description: A widget that displays an ajax loaded gallery.
     * Version: 0.1
     */
    
    add_action( 'widgets_init', 'my_widget' );
    
    function my_widget() {
      register_widget( 'MY_Widget' );
    }
    
    class MY_Widget extends WP_Widget {
    
      function MY_Widget() {
        $widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays the chosen gallery images and link from lundhs ', 'example') );
    
        $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );
    
        $this->WP_Widget( 'example-widget', __('Reference Projects', 'example'), $widget_ops, $control_ops );
      }
    
      function widget( $args, $instance ) {
        extract( $args );
    
        //Our variables from the widget settings.
        $titlewidget = apply_filters('widget_title', $instance['titlewidget'] );
        $introtext = $instance['introtext'];
        $title = $instance['title'];
        $name = $instance['name'];
        $img = $instance['img'];
        $show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false;
    
        echo $before_widget;
    
    ?>
    <?php
    if($titlewidget)
      ?>
    
    <h4 class="widget-title"><?php echo $titlewidget;?></h4>
    <?php
    if($introtext)
    ?>
    <p> <?php echo $introtext; ?></p>
        <div class="row">
    <?php
    //display gallery img
    if ( $img)
      ?>
    <a class="columns four" href="<?php echo $name; ?>">
         <img class="imggallery" src="<?php echo $img; ?>">
       </a>
        <?php
      // Display the gallery name and link
        if ( $title )
          ?>
         <a class="columns eight imggallery_link" href="<?php echo $name; ?>"><?php echo $title; ?></a>
    
    </div>
    
    <?php
        echo $after_widget;
      }
    
      //Update the widget 
    
      function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
    
        //Strip tags from title and name to remove HTML
        $instance['titlewidget'] = strip_tags( $new_instance['titlewidget'] );
        $instance['introtext'] = strip_tags( $new_instance['introtext'] );
        $instance['title'] = strip_tags( $new_instance['title'] );
        $instance['name'] = strip_tags( $new_instance['name'] );
        $instance['show_info'] = $new_instance['show_info'];
        $instance['img'] = $new_instance['img'];
    
        return $instance;
      }
    
      function form( $instance ) {
    
        //Set up some default widget settings.
        $defaults = array( 'title' => __('Example', 'example'), 'introtext' => __('introtext', 'example'), 'titlewidget' => __('Reference Project', 'example'), 'img' => __('img', 'example'), 'name' => __('link goes here', 'example'), 'show_info' => true );
        $instance = wp_parse_args( (array) $instance, $defaults ); ?>
    <script type="text/javascript">
    (function($) {
    
    //load on page load
      $(".area").load("/galleries/ #projects > li a");
    
    //load on widget title click
                $('.widget-top').live("click", function() {
                 $(".area").load("http://nettsidemal.no/lundhsas/galleries/ #projects > li a");
                });
    
    //stop default href from working
                $('.area a').unbind().live("click", function() {
                                 event.preventDefault();
                                 return;
                 });
    //load into input boxes
    $(".area a").live("click", function() {
          var title = $(this).attr('title');
          $(".title").val(title);
          var link = $(this).attr('href');
          $(".link").val(link);
          var img = $("img", this).attr('src');
          $(".img").val(img);
          var imgexample = $("img", this).attr('src');
          $(".gallery_one").attr("src", imgexample);
        });
    }(jQuery));
    </script>
    <style type="text/css">
    .area img{
        max-width: 100px;
        max-height: 100px;
        display: inline-block;
    }
    .area a{
        max-width: 100px;
        max-height: 100px;
        display: inline-block;
    }
    .gallery_one_image_wrap{
      width: 100%;
    height: 150px;
    }
    .gallery_one{
    max-width: 80%;
    max-height: 150px;
    width: 80%;
    margin: auto;
    padding-left: 10%;
    padding-right: 10%;
    }
    </style>
    <script type="text/javascript">
    (function($) {
            var addDiv = jQuery('.addinput');
            var i = jQuery('.addinput p').size() + 1;
    
        jQuery('.addNew').live('click', function() {
            jQuery.append('<p><input type="text" class="p_new' + i +'" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><a href="#" class="remNew">Remove</a> </p>');
            i + 1;
    
            return false;
        });
    
        jQuery('.remNew').live('click', function() {
              if( i > 1 ) {
              jQuery(this).parents('p').remove();
              i - 1;
              }
        return false;
        });
    }(jQuery));
    
    </script>
       <h3>Gallery selector for Lundhs</h3>
        <p>
        <label for="<?php echo $this->get_field_id( 'titlewidget' ); ?>"><?php _e('Widget Title:', 'example'); ?></label>
          <input type="text" class="titlewidget" name="<?php echo $this->get_field_name( 'titlewidget' ); ?>" value="<?php echo $instance['titlewidget']; ?>" style="width:100%;" />
        </p>
        <p>
        <label for="<?php echo $this->get_field_id( 'introtext' ); ?>"><?php _e('Intro text:', 'example'); ?></label>
          <input type="text" class="introtext" name="<?php echo $this->get_field_name( 'introtext' ); ?>" value="<?php echo $instance['introtext']; ?>" style="width:100%;" />
        </p>
          <h4 style="text-align: center;">First Pick your images</a>
        <div class="area"></div>
    
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
        <h3>Your current front end projects</h3>
        <h4>Reference project one</h4>
        <div class="gallery_one_image_wrap">
        <img class="gallery_one" src="<?php echo $instance['img']; ?>" /><br/>
        </div>
        <p>
          <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'example'); ?></label>
          <input type="text" class="title" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
        </p>
        <p>
          <label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e('The link:', 'example'); ?></label>
          <input type="text" class="link" id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" />
        </p>
    
        //img Input.
        <p>
          <label for="<?php echo $this->get_field_id( 'img' ); ?>"><?php _e('The Link to the image:', 'example'); ?></label>
          <input type="text" class="img" id="<?php echo $this->get_field_id( 'img' ); ?>" name="<?php echo $this->get_field_name( 'img' ); ?>" value="<?php echo $instance['img']; ?>" style="width:100%;" />
        </p>
    <div class="addinput">
    <p>
    <a href="#" class="addNew">Add new project</a>
    </p>
    </div>
      <?php
      }
    }

    the problem arises because the js runs twice once in the inactive widgets on the left and once in the active widget in the sidebar.
    How do i go about forcing the JS to run only in the active widget.
    Moving the js to a separate .js file and enqueing really isn't an option for me because i am going to have to use php values in the next step.
    Any help is appreciated.
    Chris

  2. bcworkz
    Member
    Posted 12 months ago #

    You should be able to use is_active_sidebar() to do what you want.

    Incidentally, you can use wp_localize_script() to pass PHP values to javascript that has been enqueued. I'm not sure it helps you current problem, but it's nice for keeping javascript completely separate from PHP in general.

Reply

You must log in to post.

About this Topic