Solved

Dynamic javascript plugin settings

Posted on 2013-12-19
11
641 Views
Last Modified: 2013-12-20
I am creating a wordpress plugin using code from:
http://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layout/

I have everything working but I am trying to tidy up and clean up the plugin code and noticed that I am creating the initialization / settings for every "BookBlock" I have, not just for the one that is on the page.

Each BookBlock could have different settings controling the look and feel.

bb = $( '#bb-bookblock' ).bookblock( {
        speed : 800,
        perspective : 2000,
        shadowSides : 0.8,
        shadowFlip  : 0.4,
      ...etc.
} ),

My current footer code is looping through all the BookBlocks and adding the settings.

foreach ($options['BookBlocks'] as $BookBlock) {
      speed : <?php echo $BookBlock) ['settings']['speed']; ?>,
}

I only want to show the settings for the BookBlock(s) that are loaded on that page.

The plugin is using a shortcode [BookBlock 'name']


I have and add_action wp_footer that calls the for each code above.

I appreciate any help, this is my first attempt to create a plugin / user interface to call some code.
0
Comment
Question by:wsadfilm
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39731553
what about :


<?php

	foreach ($options['BookBlocks'] as $BookBlock) {
		echo "var php_speed = " . $BookBlock['settings']['speed'] . ";";
		echo "var php_perspective = " . $BookBlock['settings']['perspective'] . ";";
		echo "var php_shadowSides = " . $BookBlock['settings']['shadowSides'] . ";";
		echo "var php_shadowFlip = " . $BookBlock['settings']['php_shadowFlip'] . ";";
	}

?>


	bb = $( '#bb-bookblock' ).bookblock({
        speed : php_speed,
        perspective : php_perspective,
        shadowSides : php_shadowSide,
        shadowFlip  : php_shadowFlip
	});

Open in new window

0
 

Author Comment

by:wsadfilm
ID: 39731640
Thanks for the reply.

I might be missing something in your suggestion.

I am not having a problem getting settings for the BookBlock, everything works.  What I am trying to do is only have the code for the BookBlocks that is on a specific page.

EXAMPLE:
Say I have 5 BookBlocks created on the site (1 for each page).  As the code is written I get:
bb = $( '#bb-bookblock-block1' ).bookblock({settings here});
bb = $( '#bb-bookblock-block2' ).bookblock({settings here });
bb = $( '#bb-bookblock-block3' ).bookblock({settings here });
and so on, for every bookblock on the page that have a bookblock shortcode included.  I am trying to figure out how to only get the script code for the specific BookBlock that is on that page.

I think my issue is with the foreach – I don’t think I should have the for loop but, but I don’t know how to pass in the ‘slug’ for the specific BookBlock I want.  

I am struggling in how to pass in the slug for the bookblock that is used on that page for the plugin to create the script code in the footer.

I am wondering if I am storing the data incorrectly in wordpress.  The plugin data is all stored in a single record in the wp_options table.  I have one record in wp_options and using arrays in the php to get.

Should I consider separating this and using a custom post instead?  But I am still not sure how to limit the wp_footer action to only have the script code the [BookBlock ‘block1’]
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39731668
Please provide a link to your page
var bb = null;
if( $( '#bb-bookblock-block1' ).length > 0 ) {
    bb = $( '#bb-bookblock-block1' ).bookblock({settings here});
}
else if( $( '#bb-bookblock-block2' ).length > 0 ) {
    bb = $( '#bb-bookblock-block2' ).bookblock({settings here});
}
else if( $( '#bb-bookblock-block3' ).length > 0 ) {
    bb = $( '#bb-bookblock-block3' ).bookblock({settings here});
}

Open in new window


or maybe you know on which page you're? In this case you may use the index of the page

$( '#bb-bookblock-block<?php echo $index; ?>' ).bookblock({settings here});

Open in new window

0
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 

Author Comment

by:wsadfilm
ID: 39731727
It is not a public site, it is a local (intranet) site, so I don’t have a link to provide.  But I will try to provide the code and step through it.

I place the shortcode [BookBlock ‘name of bookblock’] on the page I want the specific book block to show.

EXAMPLE: [BookBlock ‘BookBlock1’]

function shortcodes() {
	$options = $this->get_admin_options();
	add_shortcode('BookBlock', array($this, 'print_shortcode'));
}
function print_shortcode($atts) {
	$options = $this->get_admin_options();
	$BookBlocks = $options['BookBlocks'];
	$title = strtolower($atts[0]);
	
	foreach ($BookBlocks as $BookBlock) {
		if (strtolower($BookBlock['title']) == $title) {
			$slug = $BookBlock['slug'];
		}
	}
	//This creates the HTML needed for the page for the  specific BookBlock
	return $this->get_html($slug);
}

Open in new window

Now I need the script code to be generated on the page for the settings in the footer - this is where I am having issues in passing the name / slug so I end up with all the bookblocks instead of just the one I want.

<? php
add_action('wp_footer', array($BookBlock, 'call_plugin'));

function call_plugin($slug) {
    $options = $this - > get_admin_options();
    $BookBlock = $options['BookBlocks']['BookBlock-1']; ?> < script > (function ($, undefined) {
        $(document).ready(function () { <? php
            foreach($options['BookBlocks'] as $BookBlock) { ?> $('#BookBlock-<?php echo $BookBlock['
                slug ']; ?>').BookBlock({
                    speed: <? php echo $BookBlock['settings']['speed']; ?> ,
                    perspective: <? php echo $BookBlock['settings']['perspective']; ?> ,
                    shadowSides: <? php echo $BookBlock['settings']['shadowSides']; ?> ,
                    shadowFlip: <? php echo $BookBlock['settings']['shadowFlip']; ?> , ...etc.
                }); <? php
            } ?>
        });
    })(jQuery); < /script>
<?php
} ?>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 39731732
so could you post the generated page? (do a right click in your browser and choose view source to post it)
0
 

Author Comment

by:wsadfilm
ID: 39731820
In the example below, I only want bb1 script to show not both bb1 and bb2

<body>
  <section id="bb-head">
	<ul class="slider" id="bb-bookblock-bb1">
		<li class="bb-item" data-label="Slide1">
			<div class="bbleft">Slide 1</div>
			<div class="bbcenter">Slide 1 data and information here</div>
		</li>
		<li class="bb-item" data-label="Slide2">
			<div class="bbleft">Slide 2</div>
			<div class="bbcenter">Slide 2 data and information here</div>
		</li>
		 <li class="bb-item" data-label="Slide3">
			<div class="bbleft">Slide 3</div>
			<div class="bbcenter">Slide 3 data and information here</div>
		</li>
		<li class="bb-item" data-label="Slide4">
			<div class="bbleft">Slide 4</div>
			<div class="bbcenter">Slide 4 data and information here</div>
		</li>
	</ul>
</section>

<script>
(function ($, undefined) {
    $(document).ready(function () {    
        $('#bb-bookblock-bb1').bookblock({
            perspective: 1500,
            speed: 600,
            shadowSides: 0.5,
            interval: 5000,
            autoplay: true,
            shadowFlip: 0.5
        });
        $('#bb-bookblock-bb2').bookblock({
            perspective: 1500,
            speed: 600,
            shadowSides: 0.5,
            interval: 0,
            autoplay: false,
            shadowFlip: 0.5
        });
    });
})(jQuery);
</script>

</body>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 39731892
so do you know on which page you're ?

for example if you're on page 1 (index is 0) you just need to place an if else in your foreach

and you should reconsiderate what I suggest to you previously to isolate as much as possible javascript to your php code

in the following I only generate javascript variables, not sure all thecode is right but you get the logic

<? php
add_action('wp_footer', array($BookBlock, 'call_plugin'));

function call_plugin($slug) {

    $options = $this - > get_admin_options();
    $BookBlock = $options['BookBlocks']['BookBlock-1'];

    foreach($options['BookBlocks'] as $BookBlock) {
        if( $BookBlock[' slug '] == ("bb".$page_index) ) {
            echo "var php_speed = " . $BookBlock['settings']['speed'] . ";";
            echo "var php_perspective = " . $BookBlock['settings']['perspective'] . ";";
            echo "var php_shadowSides = " . $BookBlock['settings']['shadowSides'] . ";";
            echo "var php_shadowFlip = " . $BookBlock['settings']['php_shadowFlip'] . ";";
            echo "var slug = 'bb'" . $page_index;
        }
    }
}

?>

(function ($, undefined) {
    $(document).ready(function () {    
        $('#bb-bookblock-' + slug).bookblock({
        speed : php_speed,
        perspective : php_perspective,
        shadowSides : php_shadowSide,
        shadowFlip  : php_shadowFlip,
            interval: 5000,
            autoplay: true
        });
    });
})(jQuery);

</script>

Open in new window

0
 

Author Comment

by:wsadfilm
ID: 39732112
I don’t know how to tell which page I am on what BookBlock is on that page.  Any page could have a BookBlock.  I was creating this plugin to try and make it dynamic where the users could create their own BookBlocks and put them on any page.

Starting to think I bit off more than I could chew on this one – being new to wordpress and plugins.

Am I storing the BookBlock data correctly in wordpress – wp_options or should I look at putting it in the posts – each BookBlock being a custom post instead of them all in the one options record?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39732726
another solution :

<script type="text/javascript">
<? php
add_action('wp_footer', array($BookBlock, 'call_plugin'));

function call_plugin($slug) {

    $options = $this - > get_admin_options();
    $BookBlock = $options['BookBlocks']['BookBlock-1'];

    foreach($options['BookBlocks'] as $BookBlock) {
            $php_speed[] = $BookBlock['settings']['speed'];
            $php_perspective[] = $BookBlock['settings']['perspective'];
            $php_shadowSides[] = $BookBlock['settings']['shadowSides'];
            $php_shadowFlip[] = $BookBlock['settings']['php_shadowFlip'];
    }
    echo "var php_speed = " . json_encode($speed) . ";";
    echo "var php_perspective = " . json_encode($perspective') . ";";
    echo "var php_shadowSides = " . json_encode($shadowSides') . ";";
    echo "var php_shadowFlip = " . json_encode($php_shadowFlip') . ";";
}

?>

(function ($, undefined) {
    $(document).ready(function () { 

$('ul[id^="bb-bookblock-"]').each(function() {
     var n = $(this).attr("id") * 1 - 1;
     $(this).bookblock({
        speed : php_speed[n],
        perspective : php_perspective[n],
        shadowSides : php_shadowSide[n],
        shadowFlip  : php_shadowFlip[n],
            interval: 5000,
            autoplay: true
        });
});

    });
})(jQuery);
</script>

Open in new window

0
 

Author Comment

by:wsadfilm
ID: 39732763
Interesting approach.

Thank you for your help
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39732781
line 28 should be (remove not number char) : var n = $(this).attr("id").replace(/\D/g, "") * 1 - 1;
0

Featured Post

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses four methods for overlaying images in a container on a web page
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question