knowl.js0000664000175000017500000001523112520507306013062 0ustar profzoomprofzoom/* * Knowl - Feature Demo for Knowls * Copyright (C) 2011 Harald Schilly * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * 4/11/2012 Modified by David Guichard to allow inline knowl code. * Sample use: * This is an inline knowl. */ /* 8/14/14 Modified by David Farmer to allow knowl content to be * taken from the element with a given id. * * The syntax is Proof */ /* javascript code for the knowl features * global counter, used to uniquely identify each knowl-output element * that's necessary because the same knowl could be referenced several times * on the same page */ var knowl_id_counter = 0; function knowl_click_handler($el) { // the knowl attribute holds the id of the knowl var knowl_id = $el.attr("knowl"); // the uid is necessary if we want to reference the same content several times var uid = $el.attr("knowl-uid"); var output_id = '#knowl-output-' + uid; var $output_id = $(output_id); // create the element for the content, insert it after the one where the // knowl element is included (e.g. inside a

tag) (sibling in DOM) var idtag = "id='"+output_id.substring(1) + "'"; var kid = "id='kuid-"+ uid + "'"; // if we already have the content, toggle visibility if ($output_id.length > 0) { $("#kuid-"+uid).slideToggle("fast"); $el.toggleClass("active"); // otherwise download it or get it from the cache } else { var knowl = "
loading '"+knowl_id+"'
"; // check, if the knowl is inside a td or th in a table. otherwise assume its // properly sitting inside a
or

if($el.parent().is("td") || $el.parent().is("th") ) { // assume we are in a td or th tag, go 2 levels up var cols = $el.parent().parent().children().length; $el.parents().eq(1).after( // .parents().eq(1) was formerly written as .parent().parent() ""+knowl+""); } else if ($el.parent().is("li")) { $el.parent().after(knowl); } // the following is implemented stupidly, but I had to do it quickly. // someone please replace it with an appropriate loop -- DF // the '.is("p")' is for the first paragraph of a theorem or proof //also, after you close the knowl, it still has a shaded background else if ($el.parent().parent().is("li")) { $el.parent().parent().after(knowl); } else if ($el.parent().css('display') == "block" || $el.parent().is("p")) { $el.parent().after(knowl); } else if ($el.parent().parent().css('display') == "block" || $el.parent().parent().is("p")) { $el.parent().parent().after(knowl); } else { $el.parent().parent().parent().after(knowl); } //else { // // $el.parent().after(knowl); // var theparents=$el.parents(); // var ct=0; // while (theparents[ct] != "block" && ct<2) // ct++; // ct=0; // //$el.parents().eq(ct).after(knowl); // $el.parents().eq(ct).after(theparents[1]); // } // "select" where the output is and get a hold of it var $output = $(output_id); var $knowl = $("#kuid-"+uid); $output.addClass("loading"); $knowl.hide(); // DRG: inline code if ($el.attr("class") == 'internal') { $output.html($el.attr("value")); $knowl.hide(); $el.addClass("active"); if(window.MathJax == undefined) { $knowl.slideDown("slow"); } else { $knowl.addClass("processing"); MathJax.Hub.Queue(['Typeset', MathJax.Hub, $output.get(0)]); MathJax.Hub.Queue([ function() { $knowl.removeClass("processing"); $knowl.slideDown("slow"); }]); } } else if ($el.attr("class") == 'id-ref') { //get content from element with the given id $output.html($("#".concat($el.attr("refid"))).html()); $knowl.hide(); $el.addClass("active"); if(window.MathJax == undefined) { $knowl.slideDown("slow"); } else { $knowl.addClass("processing"); MathJax.Hub.Queue(['Typeset', MathJax.Hub, $output.get(0)]); MathJax.Hub.Queue([ function() { $knowl.removeClass("processing"); $knowl.slideDown("slow"); }]); } } else { // Get code from server. $output.load(knowl_id, function(response, status, xhr) { $knowl.removeClass("loading"); if (status == "error") { $el.removeClass("active"); $output.html("

ERROR: " + xhr.status + " " + xhr.statusText + '
'); $output.show(); } else if (status == "timeout") { $el.removeClass("active"); $output.html("
ERROR: timeout. " + xhr.status + " " + xhr.statusText + '
'); $output.show(); } else { $knowl.hide(); $el.addClass("active"); } // if we are using MathJax, then we reveal the knowl after it has finished rendering the contents if(window.MathJax == undefined) { $knowl.slideDown("slow"); } else { $knowl.addClass("processing"); MathJax.Hub.Queue(['Typeset', MathJax.Hub, $output.get(0)]); MathJax.Hub.Queue([ function() { $knowl.removeClass("processing"); $knowl.slideDown("slow"); }]); } }); } } } //~~ end click handler for *[knowl] elements /** register a click handler for each element with the knowl attribute * @see jquery's doc about 'live'! the handler function does the * download/show/hide magic. also add a unique ID, * necessary when the same reference is used several times. */ $(function() { // $("*[knowl]").live({ $("body").on("click", "*[knowl]", function(evt) { // click: function(evt) { evt.preventDefault(); var $knowl = $(this); if(!$knowl.attr("knowl-uid")) { $knowl.attr("knowl-uid", knowl_id_counter); knowl_id_counter++; } knowl_click_handler($knowl, evt); // } }); }); knowlstyle.css0000664000175000017500000000432612653144150014323 0ustar profzoomprofzoom/** page wide defs for knowls, the *[knowl] is a selector for * all elements, that have a knowl attribute set to any value */ .knowl-content { padding: 10px 10px 0 10px; border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; } .knowl-content h1 { margin: 0px 0px 10px 0px; } .knowl-content h2 { margin: 0px 0px 5px 0px; } /* next defninition is needed to over-ride the default, which is the default font size, which is 16pt */ .knowl p { margin-bottom: 0; margin-top: 10px; } *[knowl] { display: inline; border-bottom: 1px dotted #00a; color: #00a; cursor: pointer; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; margin: 3px 0 0 0; } *[knowl]:hover, *[knowl].active { /* border-bottom: 2px solid #aaf; */ border-bottom: 1px solid #aaf; background: #ddf; color: #006; /* no point in these being different when hovering padding: 0; margin: 0 0 0 0; border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-right-radius: 3px; -moz-border-radius-topright: 3px; */ } div > *[knowl], p > *[knowl] { position: relative; } .knowl-error { color: red; border-bottom: 0; } .knowl-output { background: #eef; border-left: 10px solid #ddf; border-right: 10px solid #ddf; border-bottom: 10px solid #ddf; border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; display: none; padding: 0px; margin-top: 10px; margin-bottom: 0px; margin-right: 0px; } .knowl-output .knowl-output, .knowl-output .knowl-output.loading { margin-left: 0; margin-right: 0; } .knowl-output.loading { color: grey; font-style: italic; font-size: small; } .knowl-output h1, .knowl-output h2 { margin: 5px 0; } .knowl-output h1 { color: #006; } .knowl-output h2 { color: #006; } .knowl-output a { display: inline; } .knowl-footer { position: relative; bottom: -10px; font-size: x-small; background: #ddf; color: grey; padding: 1px 0 1px 10px; margin: 0 0 0 0; } .knowl-footer a { color: #006; } .knowl-footer a:hover { background: none; color: #88f; } .knowl-output.processing { display:block!important; height:0pt; overflow:hidden; }