voidfiles · November 27, 2011 19:38
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
 <head>
 <title>Pre Script Loading Test</title>
 <script src="http://code.jquery.com/qunit/qunit-git.js" type="text/javascript"></script>
 <script type="text/javascript">
    var F = {};
    (function(F) {
        var registered_ids = {},
            id_to_module_map = {},
            interim_actions = {},
            cleanup_actions = {},
            clicked_ids = {},
            queueing = true;

        function register_id(id, callbacks, required_module) {
            id = id.replace('*', '.*');
            registered_ids[id] = true;
            id_to_module_map[id] = required_module;
            interim_actions[id] = callbacks.interim;
            cleanup_actions[id] = callbacks.cleanup;
        }
        function rectify_id(actual_id) {
            var key_id;
            for (key_id in registered_ids) {
                if (registered_ids.hasOwnProperty(key_id) && actual_id.search(key_id) !== -1) {
                    return key_id;
                }
            }
            return actual_id;
        }
        F.actionQueue = {
            register: function(id, callbacks, required_module) {
                var n,
                    len;
                if (id instanceof Array) {
                    for (n = 0, len = id.length; n < len; n++) {
                        register_id(id[n], callbacks, required_module);
                    }
                } else {
                    register_id(id, callbacks, required_module);
                }
            },
            queue_click: function(id) {
                var id_key = rectify_id(id);
                if (queueing && id && id_key && registered_ids[id_key]) {
                    clicked_ids[id_key] = true;
                    if (typeof interim_actions[id_key] === 'function') {
                        interim_actions[id_key].apply(this, arguments);
                    }
                    return false;
                } else if (queueing) {
                    return false;
                }
                return true;
            },
            module_loaded: function(module_name, id_to_restrict_to) {
                var id;
                queueing = false;
                for (id in id_to_module_map) {
                    if (id_to_module_map.hasOwnProperty(id) && clicked_ids[id] && id_to_module_map[id] === module_name) {
                        cleanup_actions[id](id_to_restrict_to ? id_to_restrict_to : id);
                    }
                }
            }
        };
    }(F));
    /* First time doing TDD, I don't really no where to start. */
    (function(F){
        /* I guess I am going to begin by definging a module, which is what my thing is called */
        module("actionQueue"); // I am calling it actionQueue because that is what the module is called.
        /* Now I need to write a test, which at first is going to fail.
          so, the first thing I would write code for is registering a pre-click handler for a certin ID
          pattern. I guess I could test to see that when I call the register function, 
          my callbacks get registered properly.

          but the values get assigned inside the function above which makes it hard to see if my code did anything.

          I guess, I could call register, and then immediatly call queue_click,
          and if I setup my callbacks properly I could use a function test that I got a callback.
        */
        test("register, and queue", function() {
            expect(1);
            F.actionQueue.register(
                'test-1-id',
                {
                    interim: function(){
                        ok(true, 'interim function was called');
                    },
                    cleanup: function(){}
                },
                'test-1-id-code'
            );
            /* Now call actionQueue which will make the interm function fire */
            F.actionQueue.queue_click('test-1-id');
        });

    }(F));

 </script>
 <style type="text/css" media="screen">
    body {
        width: 750px;
        margin: 0 auto;
    }
    p {
        margin: 10px 0 5px 0;
    }
    .like-button {
        padding:5px 10px 5px 5px;
        border-radius: 3px;
        background-color: #eee;
        color: #000;
        text-decoration: none;
        
    }
    .like-button .star {
        text-shadow: magenta 1px 1px, magenta 2px 2px, magenta 3px 3px;
    }
    .un-liked .star, .liked:hover .star{
        color: #fff;
    }
    .liked .star, .un-liked:hover .star {
        color: #000;
    }
    
 </style>
 </head>
 <body onclick='return F.actionQueue.queue_click(this);'>
 <h1>Testing Pre Script Loading</h1>
 <p>A simple like button</p>
 <p>
    <a href='#' id='like-button' class='like-button un-liked'>
        <span class='star'>&#9733;</span>
        <span id='like-button-text' class='text'>Like</span>
    </a>
 </p>
 <script type="text/javascript" charset="utf-8">
    // This last test needs to go after the markup.
    test("Try using a real markup.", function() {
        expect(2);
        // okay so now we have already loaded up register handler in the previous test
        // we don't need another one. Just want to test that when the module load code is called,
        // we are calling the interim funciton
        F.actionQueue.register(
            'like-button',
            {
                interim: function(id){
                    var element = document.getElementById(id);
                    element.className = 'like-button liked';
                    ok(true, 'going to update the dom');
                },
                cleanup: function(id){
                    var element = document.getElementById('like-button-text');
                    element.innerHTML = 'Done!';
                    console.log(element);
                    ok(true, 'the module has loaded');
                }
            },
            'like-handler'
        );
        // once we get the dom, we will attach and onclick handler;
        var like_button = document.getElementById('like-button');
        like_button.onclick = function(){
            F.actionQueue.queue_click(this.id);
        };
        // Then try and fire it;
        like_button.onclick();
        // Then load the module handling code
        F.actionQueue.module_loaded('like-handler');

    });
    
    test("register, and queue, and module load", function() {
        expect(1);
        // okay so now we have already loaded up register handler in the previous test
        // we don't need another one. Just want to test that when the module load code is called,
        // we are calling the interim funciton
        F.actionQueue.register(
            'test-2-id',
            {
                interim: function(){},
                cleanup: function(){
                    ok(true, 'the module has loaded');
                }
            },
            'like-handler'
        );
        /* Now call actionQueue which will make the interm function fire */
        F.actionQueue.module_loaded('like-handler');
    });
 </script>
 <div class='qunit-output'>
    <h1 id="qunit-header">QUnit example</h1>  
    <h2 id="qunit-banner"></h2>  
    <h2 id="qunit-userAgent"></h2>  
    <ol id="qunit-tests"></ol>
 </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Pre Script Loading Test</title>
	<script src="http://code.jquery.com/qunit/qunit-git.js" type="text/javascript"></script>
	<script type="text/javascript">
	var F = {};
	(function(F) {
	var registered_ids = {},
	id_to_module_map = {},
	interim_actions = {},
	cleanup_actions = {},
	clicked_ids = {},
	queueing = true;

	function register_id(id, callbacks, required_module) {
	id = id.replace('', '.');
	registered_ids[id] = true;
	id_to_module_map[id] = required_module;
	interim_actions[id] = callbacks.interim;
	cleanup_actions[id] = callbacks.cleanup;
	}
	function rectify_id(actual_id) {
	var key_id;
	for (key_id in registered_ids) {
	if (registered_ids.hasOwnProperty(key_id) && actual_id.search(key_id) !== -1) {
	return key_id;
	}
	}
	return actual_id;
	}
	F.actionQueue = {
	register: function(id, callbacks, required_module) {
	var n,
	len;
	if (id instanceof Array) {
	for (n = 0, len = id.length; n < len; n++) {
	register_id(id[n], callbacks, required_module);
	}
	} else {
	register_id(id, callbacks, required_module);
	}
	},
	queue_click: function(id) {
	var id_key = rectify_id(id);
	if (queueing && id && id_key && registered_ids[id_key]) {
	clicked_ids[id_key] = true;
	if (typeof interim_actions[id_key] === 'function') {
	interim_actions[id_key].apply(this, arguments);
	}
	return false;
	} else if (queueing) {
	return false;
	}
	return true;
	},
	module_loaded: function(module_name, id_to_restrict_to) {
	var id;
	queueing = false;
	for (id in id_to_module_map) {
	if (id_to_module_map.hasOwnProperty(id) && clicked_ids[id] && id_to_module_map[id] === module_name) {
	cleanup_actions[id](id_to_restrict_to ? id_to_restrict_to : id);
	}
	}
	}
	};
	}(F));
	/* First time doing TDD, I don't really no where to start. */
	(function(F){
	/* I guess I am going to begin by definging a module, which is what my thing is called */
	module("actionQueue"); // I am calling it actionQueue because that is what the module is called.
	/* Now I need to write a test, which at first is going to fail.
	so, the first thing I would write code for is registering a pre-click handler for a certin ID
	pattern. I guess I could test to see that when I call the register function,
	my callbacks get registered properly.

	but the values get assigned inside the function above which makes it hard to see if my code did anything.

	I guess, I could call register, and then immediatly call queue_click,
	and if I setup my callbacks properly I could use a function test that I got a callback.
	*/
	test("register, and queue", function() {
	expect(1);
	F.actionQueue.register(
	'test-1-id',
	{
	interim: function(){
	ok(true, 'interim function was called');
	},
	cleanup: function(){}
	},
	'test-1-id-code'
	);
	/* Now call actionQueue which will make the interm function fire */
	F.actionQueue.queue_click('test-1-id');
	});

	}(F));

	</script>
	<style type="text/css" media="screen">
	body {
	width: 750px;
	margin: 0 auto;
	}
	p {
	margin: 10px 0 5px 0;
	}
	.like-button {
	padding:5px 10px 5px 5px;
	border-radius: 3px;
	background-color: #eee;
	color: #000;
	text-decoration: none;

	}
	.like-button .star {
	text-shadow: magenta 1px 1px, magenta 2px 2px, magenta 3px 3px;
	}
	.un-liked .star, .liked:hover .star{
	color: #fff;
	}
	.liked .star, .un-liked:hover .star {
	color: #000;
	}

	</style>
	</head>
	<body onclick='return F.actionQueue.queue_click(this);'>
	<h1>Testing Pre Script Loading</h1>
	<p>A simple like button</p>
	<p>
	<a href='#' id='like-button' class='like-button un-liked'>
	<span class='star'>★</span>
	<span id='like-button-text' class='text'>Like</span>
	</a>
	</p>
	<script type="text/javascript" charset="utf-8">
	// This last test needs to go after the markup.
	test("Try using a real markup.", function() {
	expect(2);
	// okay so now we have already loaded up register handler in the previous test
	// we don't need another one. Just want to test that when the module load code is called,
	// we are calling the interim funciton
	F.actionQueue.register(
	'like-button',
	{
	interim: function(id){
	var element = document.getElementById(id);
	element.className = 'like-button liked';
	ok(true, 'going to update the dom');
	},
	cleanup: function(id){
	var element = document.getElementById('like-button-text');
	element.innerHTML = 'Done!';
	console.log(element);
	ok(true, 'the module has loaded');
	}
	},
	'like-handler'
	);
	// once we get the dom, we will attach and onclick handler;
	var like_button = document.getElementById('like-button');
	like_button.onclick = function(){
	F.actionQueue.queue_click(this.id);
	};
	// Then try and fire it;
	like_button.onclick();
	// Then load the module handling code
	F.actionQueue.module_loaded('like-handler');

	});

	test("register, and queue, and module load", function() {
	expect(1);
	// okay so now we have already loaded up register handler in the previous test
	// we don't need another one. Just want to test that when the module load code is called,
	// we are calling the interim funciton
	F.actionQueue.register(
	'test-2-id',
	{
	interim: function(){},
	cleanup: function(){
	ok(true, 'the module has loaded');
	}
	},
	'like-handler'
	);
	/* Now call actionQueue which will make the interm function fire */
	F.actionQueue.module_loaded('like-handler');
	});
	</script>
	<div class='qunit-output'>
	<h1 id="qunit-header">QUnit example</h1>
	<h2 id="qunit-banner"></h2>
	<h2 id="qunit-userAgent"></h2>
	<ol id="qunit-tests"></ol>
	</div>
	</body>
	</html>
No results found