jeremyjbowers/bookmarklets.html

## bookmarklets.html
<!DOCTYPE html>
<html lang="en">
    <head><meta charset="utf-8"></head>
    <body>
        <!-- This is the Underscore.js template for each of our links. -->
        <!-- I didn't HAVE to make this a template. But I wanted to show -->
        <!-- how you might do this if you were doing it by our standards. -->
        <!-- Inside this script tag, you can write HTML with some little things, -->
        <!-- <%= foo %> means to print the Javascript variable "foo". -->
        <!-- <% %> means you would like to write some Javascript to be evaluated but not printed. -->
        <!-- So if you wanted to print the name of a network, you'd do: -->
        <!--      <%= network.network_name %> -->
        <!-- If you wanted to do a for loop inside the template, you'd do: -->
        <!--      <% _.each(NETWORKS, function(i, network){ console.log(network) }); %> -->
        <!-- This is useful for many reasons. We can talk about those later. -->
        <script type="text/html" class="template-link">
            <li><a href="javascript:<%= javascript_string %>">
                <%= network.network_name %>
            </a></li>
        </script>

        <!-- Include jQuery and Underscore.js -->
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
        <script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>

        <!-- This is the meat of our script. Notice it goes at the bottom. -->
        <script type="text/javascript">

        // Let's define a pair of global variables as constants.
        // This will be your networks and shows.
        // Note that both of these are just arrays of Javascript objects.
        NETWORKS = [
            {
                network_name: "Facebook",
                network_param: "?utm_medium=facebook"
            }, {
                network_name: "Twitter",
                network_param: "?utm_medium=twitter"
            }
        ];

        SHOWS = [
            {
                show_slug: "atc",
                show_name: "All Things Considered",
                show_param: "&utm_source=thirteenseven&utm_campaign=artsculture"
            },{
                show_slug: "a-blog-supreme",
                show_name: "A Blog Supreme",
                show_param: "&utm_source=jazz&utm_campaign=music"
            }
        ];

        // Now, let's do our actual scripting.
        // I've enclosed this in a $(document).ready() function so as not to execute before
        // the DOM has finished rendering. That's not important for this app so much but it's
        // definitely a best practice.
        $(document).ready(function(){

            // Okay, so let's do our stuff.
            // First, we want a nav to be able to page down to my particular show.
            // So append a div and a ul for the nav to the body.
            $('body').append('<div id="nav"><h1>Navigate</h1><ul></ul></div>');

            // Set up a variable where the nav's ul is.
            var $nav_el = $('#nav ul');

            // Okay, now let's loop over the shows.
            // For each show, let's append a link to the nav (for navigating) and then also
            // append some HTML to the body for the actual bookmarklets and such.
            $.each(SHOWS, function(i, show) {

                // Here's the bit for the nav.
                $nav_el.append('<li><a href="#' + show.show_slug + '">'+ show.show_name + '</a></li>');

                // Let's make a div with the id of our show's slug.
                $('body').append('<div id="' + show.show_slug + '"></div>');

                // And then let's cache the element for this thing.
                var $show_el = $('#' + show.show_slug);

                // Now, let's append an H2 to that element. We want this to look stylish.
                $show_el.append('<h2>' + show.show_name + '</h2>');

                // Next, let's loop over all the social networks and add a bookmarklet to
                // this show for each one.
                $.each(NETWORKS, function(i, network){

                    // Since we're using a template for the actual bookmarklet, let's parse it.
                    var parsed_template = _.template($('script.template-link').html());

                    // Make our bookmarklet as a string. This is the actual Javascript that the
                    // browser will execute as a bookmarklet.
                    var javascript_string = "var show='" + show.show_param + "';work='" + network.network_param + "';var today=new Date();var dd=today.getDate();var mm=today.getMonth()+1;var yyyy=today.getFullYear();if(dd<10){dd='0'+dd}if(mm<10){mm='0'+mm}today=mm+'/'+dd+'/'+yyyy;window.location=(window.location+work+show+'&utm_content='+today);";

                    // Next, let's compile our template with some variables we need to make the
                    // template work. We need to know the network, the show and that long
                    // Javascript string that is the bookmarklet.
                    var compiled_template = parsed_template({
                        'javascript_string': javascript_string,
                        'network': network,
                        'show': show
                    });

                    // Finally, we need to append that compiled template to the DOM.
                    // Let's stick it inside of that show element we defined earlier.
                    $show_el.append(compiled_template);

                });
            });
        });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head><meta charset="utf-8"></head>
	<body>
	<!-- This is the Underscore.js template for each of our links. -->
	<!-- I didn't HAVE to make this a template. But I wanted to show -->
	<!-- how you might do this if you were doing it by our standards. -->
	<!-- Inside this script tag, you can write HTML with some little things, -->
	<!-- <%= foo %> means to print the Javascript variable "foo". -->
	<!-- <% %> means you would like to write some Javascript to be evaluated but not printed. -->
	<!-- So if you wanted to print the name of a network, you'd do: -->
	<!-- <%= network.network_name %> -->
	<!-- If you wanted to do a for loop inside the template, you'd do: -->
	<!-- <% _.each(NETWORKS, function(i, network){ console.log(network) }); %> -->
	<!-- This is useful for many reasons. We can talk about those later. -->
	<script type="text/html" class="template-link">
	<li><a href="javascript:<%= javascript_string %>">
	<%= network.network_name %>
	</a></li>
	</script>

	<!-- Include jQuery and Underscore.js -->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
	<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>

	<!-- This is the meat of our script. Notice it goes at the bottom. -->
	<script type="text/javascript">

	// Let's define a pair of global variables as constants.
	// This will be your networks and shows.
	// Note that both of these are just arrays of Javascript objects.
	NETWORKS = [
	{
	network_name: "Facebook",
	network_param: "?utm_medium=facebook"
	}, {
	network_name: "Twitter",
	network_param: "?utm_medium=twitter"
	}
	];

	SHOWS = [
	{
	show_slug: "atc",
	show_name: "All Things Considered",
	show_param: "&utm_source=thirteenseven&utm_campaign=artsculture"
	},{
	show_slug: "a-blog-supreme",
	show_name: "A Blog Supreme",
	show_param: "&utm_source=jazz&utm_campaign=music"
	}
	];

	// Now, let's do our actual scripting.
	// I've enclosed this in a $(document).ready() function so as not to execute before
	// the DOM has finished rendering. That's not important for this app so much but it's
	// definitely a best practice.
	$(document).ready(function(){

	// Okay, so let's do our stuff.
	// First, we want a nav to be able to page down to my particular show.
	// So append a div and a ul for the nav to the body.
	$('body').append('<div id="nav"><h1>Navigate</h1><ul></ul></div>');

	// Set up a variable where the nav's ul is.
	var $nav_el = $('#nav ul');

	// Okay, now let's loop over the shows.
	// For each show, let's append a link to the nav (for navigating) and then also
	// append some HTML to the body for the actual bookmarklets and such.
	$.each(SHOWS, function(i, show) {

	// Here's the bit for the nav.
	$nav_el.append('<li><a href="#' + show.show_slug + '">'+ show.show_name + '</a></li>');

	// Let's make a div with the id of our show's slug.
	$('body').append('<div id="' + show.show_slug + '"></div>');

	// And then let's cache the element for this thing.
	var $show_el = $('#' + show.show_slug);

	// Now, let's append an H2 to that element. We want this to look stylish.
	$show_el.append('<h2>' + show.show_name + '</h2>');

	// Next, let's loop over all the social networks and add a bookmarklet to
	// this show for each one.
	$.each(NETWORKS, function(i, network){

	// Since we're using a template for the actual bookmarklet, let's parse it.
	var parsed_template = _.template($('script.template-link').html());

	// Make our bookmarklet as a string. This is the actual Javascript that the
	// browser will execute as a bookmarklet.
	var javascript_string = "var show='" + show.show_param + "';work='" + network.network_param + "';var today=new Date();var dd=today.getDate();var mm=today.getMonth()+1;var yyyy=today.getFullYear();if(dd<10){dd='0'+dd}if(mm<10){mm='0'+mm}today=mm+'/'+dd+'/'+yyyy;window.location=(window.location+work+show+'&utm_content='+today);";

	// Next, let's compile our template with some variables we need to make the
	// template work. We need to know the network, the show and that long
	// Javascript string that is the bookmarklet.
	var compiled_template = parsed_template({
	'javascript_string': javascript_string,
	'network': network,
	'show': show
	});

	// Finally, we need to append that compiled template to the DOM.
	// Let's stick it inside of that show element we defined earlier.
	$show_el.append(compiled_template);

	});
	});
	});
	</script>
	</body>
	</html>