Connexions Course III with postMessage

by dandiebolt

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<link rel="stylesheet" href="http://cnx.org/extjs/resources/css/ext-all.css">
<link rel="stylesheet" href="http://cnx.org/cnx-styles/newlook/document.css">
<link rel="stylesheet" href="http://cnx.org/cnx-styles/newlook/print.css">
<script src="http://github.com/cowboy/jquery-resize/raw/v1.1/jquery.ba-resize.js"></script>
<script src="https://raw.github.com/cowboy/jquery-postmessage/master/jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js">
    MathJax.Hub.Config({
        config: ["MMLorHTML.js"],
        jax: ["input/TeX","input/MathML","output/HTML-CSS","output/NativeMML"],
        extensions: ["tex2jax.js","mml2jax.js","MathMenu.js","MathZoom.js"],
        TeX: {extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]}
    });
</script>

<!--
<input type="button" id="resizeme" value="Manually Send Resize Message After Selecting New ConneXions Module"><br/><br/>
-->
<h1>Select a ConneXions Module</h1>
<select id="module" name="module">
    <option value="m0050">The Sampling Theorem</option>
    <option value="m0051">Amplitude Quantization</option>
    <option value="m0052">Summary of Series and Parallel Combination Rules</option>
    <option value="m0053">Dependent Sources</option>
    <option value="m0054">Using Operational Amplifiers</option>
    <option value="m0055">Inverting Amplifier</option>
    <option value="m0056">Inverting Amplifiers with Impedances</option>
    <option value="m0057">Designing Circuits with Operational Amplifiers</option>
    <option value="m0058">Diode Behavior</option>
    <option value="m0059">Logarithmic Amplifier</option>
</select>

<hr/>

<h1>Module Content</h1>
<div id="here"></div>
<!--
<br/><hr/><br/>

<h1>Client Side XML Representation</h1>
<textarea id="xml" cols="70" rows="100"></textarea>
-->

JavaScript

$("body:first").parent().attr("xmlns:m","http://www.w3.org/1998/Math/MathML");

function updateModule(course) {
    var query = "";
    query += "SELECT * ";
    query += "FROM xml ";
    query += "WHERE url='http://cnx.org/content/" + course + "/latest/body' ";
    //console.log("query=" + query);
    var yql = "";
    yql += "http://query.yahooapis.com/v1/public/yql?q=";
    yql += encodeURIComponent(query);
    yql += "&format=xml";
    yql += "&callback=?";
    //console.log("yql=" + yql);
    $.getJSON(yql, function(data) {
        //console.dir(data.results[0]);
        //$course = $(data.results[0]);
        //$("#xml").val(data.results[0]);

        $("#here").html(data.results[0]);
        $("img:not([src^='http'])").each(function() {
            $(this).attr("src", "http://cnx.org/content/" + course + "/latest/" + $(this).attr("src"));
        });

        //MathJax.Hub.queue.Push(["Typeset", MathJax.Hub]);
        MathJax.Hub.Typeset("here", function() {
            //here include your additional javascript code
            var data ={
                command: "resize",
                height: $("body").outerHeight()+40
            }
            $.postMessage(
                data,
                'https://www.quickbase.com/db/bgnbbn622?a=dbpage&pageID=7',
                parent
            );
        }); 
    });
}

$("#module").change(function() {
    var course = $(this).val();
    updateModule(course);
});

updateModule($("#module option:first").val());

$("#resizeme").click(function(){

    var data ={
        command: "resize",
        height: $("body").outerHeight()+40
    }
    $.postMessage(
        data,
        'https://www.quickbase.com/db/bgnbbn622?a=dbpage&pageID=7',
        parent
    );        
});

MathJax.Hub.Queue(function () {
       
    var data ={
        command: "resize",
        height: $("body").outerHeight()+40
    }
    $.postMessage(
        data,
        'https://www.quickbase.com/db/bgnbbn622?a=dbpage&pageID=7',
       ...