knowl.js 0000664 0001750 0001750 00000023031 13412763314 013063 0 ustar profzoom profzoom /*
* 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;
var knowl_focus_stack_uid = [];
var knowl_focus_stack = [];
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
// Note that for tracking knowls, this setup is not optimal
// because it applies to open knowls and also knowls which
// were opened and then closed.
if ($output_id.length > 0) {
thisknowlid = "kuid-"+uid
// when this is an entry in a table, then it is the parents parent we need to toggle
// also need to clean this up
if($("#kuid-"+uid).parent().is("td.knowl-td")) {
$("#kuid-"+uid).parent().parent().slideToggle("fast");
}
else {
$("#kuid-"+uid).slideToggle("fast");
}
if($el.attr("replace")) {
$($el.attr("replace")).slideToggle("fast");
}
this_knowl_focus_stack_uidindex = knowl_focus_stack_uid.indexOf(uid);
if($el.hasClass("active")) {
if(this_knowl_focus_stack_uidindex != -1) {
knowl_focus_stack_uid.splice(this_knowl_focus_stack_uidindex, 1);
knowl_focus_stack.splice(this_knowl_focus_stack_uidindex, 1);
}
}
else {
knowl_focus_stack_uid.push(uid);
knowl_focus_stack.push($el);
document.getElementById(thisknowlid).focus();
}
$el.toggleClass("active");
// otherwise download it or get it from the cache
} else {
// where_it_goes is the location the knowl will appear *after*
// knowl is the variable that will hold the content of the output knowl
var where_it_goes = $el;
var knowl = "";
// addafter="#id" means to put the knowl after the element with that id
if($el.attr("addafter")) {
where_it_goes = $($el.attr("addafter"));
} else if($el.attr("replace")) {
where_it_goes = $($el.attr("replace"));
} else if($el.hasClass("kohere")) {
where_it_goes = $el;
} else {
// otherwise, typically put it after the nearest enclosing block element
// check, if the knowl is inside a td or th in a table
if($el.parent().is("td") || $el.parent().is("th") ) {
// assume we are in a td or th tag, go 2 levels up
where_it_goes = $el.parent().parent();
var cols = $el.parent().parent().children().length;
knowl = "| "+knowl+" |
";
} else if ($el.parent().is("li")) {
where_it_goes = $el.parent();
}
// not sure it is is worth making the following more elegant
else if ($el.parent().parent().is("li")) {
where_it_goes = $el.parent().parent();
// the '.is("p")' is for the first paragraph of a theorem or proof
} else if ($el.parent().css('display') == "block" || $el.parent().is("p") || $el.parent().hasClass("hidden-knowl-wrapper") || $el.parent().hasClass("kohere")) {
where_it_goes = $el.parent();
} else if ($el.parent().parent().css('display') == "block" || $el.parent().parent().is("p") || $el.parent().parent().hasClass("hidden-knowl-wrapper") || $el.parent().parent().hasClass("kohere")) {
where_it_goes = $el.parent().parent();
} else {
// is this a reasonable last case?
// if we omit the else, then if goes after $el
where_it_goes = $el.parent().parent().parent();
}
}
// now that we know where the knowl goes, insert the knowl content
if($el.attr("replace")) {
where_it_goes.before(knowl);
}
else {
where_it_goes.after(knowl);
}
// "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.hasClass('internal')) {
$output.html($el.attr("value"));
// } else if ($el.attr("class") == 'id-ref') {
} else if ($el.hasClass('id-ref')) {
//get content from element with the given id
$output.html($("#".concat($el.attr("refid"))).html());
} 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 {
// this is sloppy, because this is called again later.
MathJax.Hub.Queue(['Typeset', MathJax.Hub, $output.get(0)]);
// not sure of the use case for this:
$(".knowl-output .hidden-sagecell-sage").attr("class", "sagecell-sage");
sagecell.makeSagecell({inputLocation: ".sagecell-sage"});
}
});
};
// we have the knowl content, and put it hidden in the right place,
// so now we show it
$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");
// $(".knowl-output .hidden-sagecell-sage").attr("class", "sagecell-sage");
// sagecell.makeSagecell({inputLocation: ".sagecell-sage"});
MathJax.Hub.Queue(['Typeset', MathJax.Hub, $output.get(0)]);
MathJax.Hub.Queue([ function() {
$knowl.removeClass("processing");
$knowl.slideDown("slow");
// if replacing, then need to hide what was there
// (and also do some other things so that toggling works -- not implemented yet)
if($el.attr("replace")) {
var the_replaced_thing = $($el.attr("replace"));
the_replaced_thing.hide("slow");
}
var thisknowlid = 'kuid-'.concat(uid)
document.getElementById(thisknowlid).tabIndex=0;
document.getElementById(thisknowlid).focus();
knowl_focus_stack_uid.push(uid);
knowl_focus_stack.push($el);
$("a[knowl]").attr("href", "");
}]);
// if this is before the MathJax, big problems
$(".knowl-output .hidden-sagecell-sage").attr("class", "sagecell-sage");
sagecell.makeSagecell({inputLocation: ".sagecell-sage"});
}
}
} //~~ 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() {
$("body").on("click", "*[knowl]", 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);
});
});
// change from jQuery 3
// $(window).load(function() {
$(window).on("load", function() {
$("a[knowl]").attr("href", "");
});
//window.onload = function() {
/*
window.addEventListener("load",function(event) {
document.onkeyup = function(event)
{
var e = (!event) ? window.event : event;
switch(e.keyCode)
{
case 27: //esc
if(knowl_focus_stack.length > 0 ) {
most_recently_opened = knowl_focus_stack.pop();
knowl_focus_stack_uid.pop();
most_recently_opened.focus();
} else {
console.log("no open knowls being tracked");
break;
}
};
};
},
false);
*/
knowlstyle.css 0000664 0001750 0001750 00000004660 13356454004 014327 0 ustar profzoom profzoom /** 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 10px 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-content > p:first-child {
margin-top: 0;
}
*[knowl] {
display: inline;
border-bottom: 1px dotted #00a;
color: #00a;
cursor: pointer;
border-radius: 0;
margin: 3px 0 0 0;
}
*[knowl]:hover,
*[knowl].active {
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;
border-top-right-radius: 3px;
*/
}
div > *[knowl], p > *[knowl] {
position: relative;
}
.knowl-error {
color: red;
border-bottom: 0;
}
.knowl-output {
background: #eef;
border-top: 10px solid #ddf;
border-left: 10px solid #ddf;
border-right: 10px solid #ddf;
border-bottom: 10px solid #ddf;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
display: none;
padding: 0px;
margin-top: 10px;
margin-bottom: 0px;
margin-right: 0px;
}
.knowl-output .knowl-output {
border-width: 6px;
background: white;
border-radius: 4px;
margin-bottom: 1.25em;
}
.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: -9px;
font-size: x-small;
background: #ddf;
color: grey;
padding: 0 0 0 12px;
margin: -10px 0 0 0;
}
.knowl-output .knowl-output .knowl-footer {
bottom: -5px;
margin: -5px 0 0 0;
}
.knowl-output + .knowl-output {
margin-top: 0;
}
.knowl-footer a {
color: #006;
}
.knowl-footer a:hover {
background: none;
color: #88f;
}
.knowl-footer:after {
content: "\2002";
}
.knowl-output.processing {
display:block!important;
height:0pt;
overflow:hidden;
}
.MathJax a .MathJax_knowl:hover {
background-color: #afa;
}