Support » Plugins and Hacks » Hacks » widgets admin page and js inside widget…

  • 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

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)


    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.

Viewing 1 replies (of 1 total)
  • The topic ‘widgets admin page and js inside widget…’ is closed to new replies.