Skip to content

Instantly share code, notes, and snippets.

@ilazakis

ilazakis/bigfoot-default.css

Last active September 9, 2018 12:25
Show Gist options
  • Save ilazakis/550767c780cc5a6d625e to your computer and use it in GitHub Desktop.
Save ilazakis/550767c780cc5a6d625e to your computer and use it in GitHub Desktop.
Download ZIP
WP-Bigfoot, Support For Numeric Style Footnotes
Raw
bigfoot-default.css
.footnote-button { position: relative; z-index: 5; top: -0.15em; box-sizing: border-box; display: inline-block; padding: 0.34em; margin: 0 0.1em 0 0.2em; border: none; border-radius: 0.3em; cursor: pointer; opacity: 0.3; background-color: #464646; line-height: 0; vertical-align: middle; text-decoration: none; -webkit-transition-property: opacity; -moz-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -ms-transition-duration: 0.25s; transition-duration: 0.25s; }
.footnote-button:hover { opacity: 0.6; }
.footnote-button:active { opacity: 0.6; }
.footnote-button.active { opacity: 0.9; -webkit-transition-delay: 0.15s; -moz-transition-delay: 0.15s; -ms-transition-delay: 0.15s; transition-delay: 0.15s; }
.footnote-circle { display: inline-block; width: 0.32em; height: 0.32em; margin-right: 0.224em; border-radius: 100%; background-color: #e6e6e6; border: none; line-height: 0.5em; }
.footnote-circle:last-child { margin-right: 0; }
.footnote-content { position: fixed; z-index: 10; bottom: auto; left: auto; box-sizing: border-box; max-width: 90%; margin: 1.21924em auto; display: inline-block; -webkit-transform: scale(0.1) translateZ(0); -moz-transform: scale(0.1) translateZ(0); -ms-transform: scale(0.1) translateZ(0); transform: scale(0.1) translateZ(0); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; background: #fafafa; opacity: 0; border-radius: 0.5em; border: 1px solid #c3c3c3; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); -webkit-transition-property: opacity, -webkit-transform; -moz-transition-property: opacity, -moz-transform; -ms-transition-property: opacity, -ms-transform; transition-property: opacity, transform; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -ms-transition-duration: 0.25s; transition-duration: 0.25s; }
.footnote-content.active { -webkit-transform: scale(1) translateZ(0); -moz-transform: scale(1) translateZ(0); -ms-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); opacity: 0.97; }
.footnote-content.bottom { -webkit-transform-origin: top; -moz-transform-origin: top; -ms-transform-origin: top; transform-origin: top; }
.footnote-content.top { -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; }
.footnote-content.scrollable:after { content: '...'; position: fixed; bottom: 0.45em; right: 50%; z-index: 20; width: 1.5em; margin-right: -0.75em; opacity: 1; background-color: #fafafa; font-family: Georgia; font-weight: bold; font-size: 1.8em; text-align: center; color: rgba(0, 0, 0, 0.08); line-height: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -ms-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; }
.footnote-content.scrollable.fully-scrolled:after { opacity: 0; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; }
.footnote-content.scrollable .footnote-main-wrapper:before, .footnote-content.scrollable .footnote-main-wrapper:after { content: ' '; position: absolute; width: 100%; z-index: 12; }
.footnote-content.scrollable .footnote-main-wrapper:before { top: -1px; left: 0; height: 1.1em; border-radius: 0.5em 0.5em 0 0; background: #fafafa; background: -moz-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(50%, #fafafa), color-stop(100%, rgba(250, 250, 250, 0))); background: -webkit-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); background: -o-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); background: -ms-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); background: linear-gradient(to bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); }
.footnote-content.scrollable .footnote-main-wrapper:after { bottom: -1px; left: 0; height: 1.2em; border-radius: 0 0 0.5em 0.5em; background: #fafafa; background: -moz-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, #fafafa), color-stop(50%, #fafafa), color-stop(100%, rgba(250, 250, 250, 0))); background: -webkit-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); background: -o-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); background: -ms-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); background: linear-gradient(to top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); }
.footnote-content ::-webkit-scrollbar { display: none; }
.footnote-main-wrapper { position: relative; z-index: 14; box-sizing: border-box; overflow: hidden; margin: 0; max-width: 22em; background-color: #fafafa; border-radius: 0.5em; -webkit-transition-property: max-height; -moz-transition-property: max-height; -ms-transition-property: max-height; transition-property: max-height; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -ms-transition-duration: 0.25s; transition-duration: 0.25s; }
.footnote-content-wrapper { position: relative; z-index: 8; max-height: 15em; padding: 1.1em 1.3em 1.2em; box-sizing: border-box; overflow: auto; -webkit-overflow-scrolling: touch; background: #fafafa; border-radius: 0.5em; }
.footnote-content-wrapper img { max-width: 100%; }
.footnote-content-wrapper *:last-child { margin-bottom: 0; }
.footnote-content-wrapper *:first-child { margin-top: 0; }
.tooltip { position: absolute; z-index: 12; box-sizing: border-box; margin-left: -0.65em; width: 1.3em; height: 1.3em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background: #fafafa; border: 1px solid #c3c3c3; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); border-top-left-radius: 0; }
.bottom .tooltip { top: -0.65em; bottom: auto; }
.top .tooltip { bottom: -0.65em; top: auto; }
/* Lazakis */
.footnote-button span {
color: white;
font-family: "Ideal Sans SSm A, Helvetica Neue", Helvetica, Arial, sans-serif;
}
.footnote-button {
border-radius: 1em;
min-width: 32px;
text-align: center;
height: 1.3em;
top: -0.25em;
font-size: 0.75em;
font-weight: 600;
padding-top: 0.75em;
-webkit-font-smoothing: antialiased;
}
Raw
bigfoot.min.js
// _______ ________ _______ ______ ______ ______ _________
// /_______/\ /_______/\/______/\ /_____/\ /_____/\ /_____/\ /________/\
// \::: _ \ \ \__.::._\/\::::__\/__\::::_\/_\:::_ \ \\:::_ \ \\__.::.__\/
// \::(_) \/_ \::\ \ \:\ /____/\\:\/___/\\:\ \ \ \\:\ \ \ \ \::\ \
// \:: _ \ \ _\::\ \__\:\\_ _\/ \:::._\/ \:\ \ \ \\:\ \ \ \ \::\ \
// \::(_) \ \/__\::\__/\\:\_\ \ \ \:\ \ \:\_\ \ \\:\_\ \ \ \::\ \
// \_______\/\________\/ \_____\/ \_\/ \_____\/ \_____\/ \__\/
// _________________________________________________________________
// /________________________________________________________________/\
// \________________________________________________________________\/
// PURPOSE -----
// Looks through the page's markup to identify footnote links/ content.
// It then creates footnote buttons in place of the footnote links and hides the content.
// Finally, creates and positions footnotes when the generated buttons are pressed.
// IN ----------
// An optional object literal specifying script settings.
// OUT ---------
// Returns an object with the following methods:
// close: closes footnotes matching the jQuery selector passed to the function.
// activate: activates the footnote button matching the jQuery selector passed to the function.
// INFO --------
// Developed and maintained by Chris Sauve (http://pxldot.com)
// Documentation, license, and other information can be found at http://cmsauve.com/projects/bigfoot.
// TODO --------
// - Better handling of hover
// - Ability to position/ size popover relative to a containing element (rather than the window)
// - Compensate for zoom position on mobile
// KNOWN ISSUES -
// - Safari 7 doesn't properly calculate the scrollheight of the content wrapper and, as a result, will not
// properly indicate a scrollable footnote
// - Popovers that are instantiated at a smaller font size which is then resized to a larger one won't adhere
// to your chosen max-height (in CSS) since JS tries to keep it from running off the top/ bottom of the page
// but does so using pixel values tied to the sizes of the footnote content when it was originally activated.
// If anyone has any ideas on this, please let me know!
(function(e){e.bigfoot=function(t){function i(t,n){var r,i,s,o;t.each(function(){var t=e(this);s="#"+t.attr("href").split("#")[1];r=t.closest("sup");i=t.find("sup");if(r.length>0){o=(r.attr("id")||"")+(t.attr("id")||"");n.push(r.attr({"data-footnote-backlink-ref":o,"data-footnote-ref":s}))}else if(i.length>0){o=(i.attr("id")||"")+(t.attr("id")||"");n.push(t.attr({"data-footnote-backlink-ref":o,"data-footnote-ref":s}))}else{o=t.attr("id")||"";n.push(t.attr({"data-footnote-backlink-ref":o,"data-footnote-ref":s}))}})}function s(e){if(e.is(":empty")||e.children(":not(.hidden)").length==0){var t=e.parent();n.actionOriginalFN.toLowerCase()==="delete"?e.remove():e.addClass("hidden").css({display:"none"});s(t)}else if(e.children(":not(.hidden)").length==e.children("hr:not(.hidden)").length){var t=e.parent();if(n.actionOriginalFN.toLowerCase()==="delete")e.remove();else{e.children("hr").addClass("hidden").css({display:"none"});e.addClass("hidden").css({display:"none"})}s(t)}}function o(e,t){t.indexOf(" ")>=0&&(t=t.trim().replace(/ +/g,"|").replace(/(.*)/g,"($1)"));var n="(s|&nbsp;)*<s*a[^#<]*#"+t+"[^>]*>(.*?)<s*/s*a>",r=new RegExp(n,"g");return e.replace(r,"").replace("[]","")}function u(e,t,n){var r=new RegExp("{{"+t+":([^}]*)}}","g"),i,s,o;while(i=r.exec(e))if(i[1]){s=n.attr(i[1])||"";e=e.replace("{{"+t+":"+i[1]+"}}",s)}return e}function d(t,r){t=t||".footnote-content";r=r||n.popoverDeleteDelay;e(t).each(function(){var t=e('.footnote-button[data-footnote-identifier="'+e(this).attr("data-footnote-identifier")+'"]'),n=e(this);if(t.hasClass("changing"))return;t.removeClass("active hover-instantiated click-instantiated").addClass("changing");n.removeClass("active").addClass("disapearing");setTimeout(function(){n.remove();t.removeClass("changing")},r)});return e(t.replace(".footnote-content",".footnote-button"))}function m(e,t){t=t||.5;var n=e.find(".tooltip");n.length>0&&n.css({left:t*100+"%"})}function g(t){var n=parseFloat(t.outerWidth()),r=parseFloat(t.outerHeight()),i=y(),s=t.offset().top-e(window).scrollTop()+r/2,o=t.offset().left+n/2;return{topRoom:s,bottomRoom:i.height-s,leftRoom:o,rightRoom:i.width-o,leftRelative:o/i.width,topRelative:s/i.height}}function y(){var e=document.createElement("div");e.style.cssText="position: fixed;top: 0;left: 0;bottom: 0;right: 0;";document.documentElement.insertBefore(e,document.documentElement.firstChild);var t={width:e.offsetWidth,height:e.offsetHeight};document.documentElement.removeChild(e);return t}var n=e.extend({actionOriginalFN:"hide",activateOnHover:!1,allowMultipleFN:!1,appendPopoversTo:undefined,deleteOnUnhover:!1,hoverDelay:250,popoverDeleteDelay:500,popoverCreateDelay:100,positionNextToBlock:!0,positionContent:!0,preventPageScroll:!0,scope:!1,contentMarkup:'<aside class="footnote-content bottom"data-footnote-identifier="{{FOOTNOTENUM}}" alt="Footnote {{FOOTNOTENUM}}"><div class="footnote-main-wrapper"><div class="footnote-content-wrapper">{{FOOTNOTECONTENT}}</div></div><div class="tooltip"></div></aside>',buttonMarkup:'<a href="#" class="footnote-button" data-footnote-identifier="{{FOOTNOTENUM}}" alt="See Footnote {{FOOTNOTENUM}}" rel="footnote"data-footnote-content="{{FOOTNOTECONTENT}}"><span>{{FOOTNOTENUM}}</span></a>'},t),r=function(){var t;t=n.scope?n.scope+' a[href*="#"]':'a[href*="#"]';var r=e(t).filter(function(){var t=e(this),n=t.attr("rel");if(!n||n=="null")n="";return(t.attr("href")+n).match(/(fn|footnote|note)[:\-_\d]/gi)&&t.closest("[class*=footnote]:not(a):not(sup)").length<1}),a=[],f=[],l=[],c,h;i(r,f);e(f).each(function(){c=e(this).attr("data-footnote-ref").replace(":","\\:");h=e(c).closest("li");if(h.length>0){a.push(h);l.push(this)}});for(var p=0;p<a.length;p++){var d=o(e(a[p]).html().trim(),e(l[p]).data("footnote-backlink-ref")).replace(/"/g,"&quot;").replace(/&lt;/g,"&ltsym;").replace(/&gt;/g,"&gtsym;"),v=+(p+1),m="",g;d.indexOf("<")!==0&&(d="<p>"+d+"</p>");m=n.buttonMarkup.replace(/\{\{FOOTNOTENUM\}\}/g,v).replace(/\{\{FOOTNOTECONTENT\}\}/g,d);m=u(m,"SUP",e(l[p]));m=u(m,"FN",e(a[p]));g=e(m).insertAfter(e(l[p]));e(l[p]).remove();var y=e(a[p]).parent();switch(n.actionOriginalFN.toLowerCase()){case"delete":e(a[p]).remove();s(y);break;case"hide":e(a[p]).addClass("hidden").css({display:"none"});s(y)}}},a=function(t){if(n.activateOnHover){var r=e(t.target).closest(".footnote-button"),i='[data-footnote-identifier="'+r.attr("data-footnote-identifier")+'"]';if(r.hasClass("active"))return;r.addClass("hover-instantiated");if(!n.allowMultipleFN){var s=".footnote-content:not("+i+")";d(s)}c(".footnote-button"+i).addClass("hover-instantiated")}},f=function(t){var n=e(t.target),r=n.closest(".footnote-button");$nearFootnote=n.closest(".footnote-content");if(r.length>0){t.preventDefault();l(r)}else $nearFootnote.length<1&&e(".footnote-content").length>0&&d()},l=function(e){e.blur();var t='data-footnote-identifier="'+e.attr("data-footnote-identifier")+'"';if(e.hasClass("changing"))return;if(!e.hasClass("active")){e.addClass("changing");setTimeout(function(){e.removeClass("changing")},n.popoverCreateDelay);c(".footnote-button["+t+"]");e.addClass("click-instantiated");n.allowMultipleFN||d(".footnote-content:not(["+t+"])")}else n.allowMultipleFN?d(".footnote-content["+t+"]"):d()},c=function(t){t=t||".footnote-button";if(n.allowMultipleFN)var r=e(t).closest(".footnote-button");else var r=e(t+":first").closest(".footnote-button");r.each(function(){var t=e(this);try{var r=n.contentMarkup.replace(/\{\{FOOTNOTENUM\}\}/g,t.attr("data-footnote-identifier")).replace(/\{\{FOOTNOTECONTENT\}\}/g,t.attr("data-footnote-content").replace(/&gtsym;/,"&gt;").replace(/&ltsym;/,"&lt;"));r=u(r,"BUTTON",t)}finally{if(!n.appendPopoversTo){$nearestBlock=t.closest("p, div, pre, li, ul, section, article, main, aside");$siblingFootnote=$nearestBlock.siblings(".footnote-content:last");$siblingFootnote.length>0?$content=e(r).insertAfter($siblingFootnote):$content=e(r).insertAfter($nearestBlock)}else $content=e(r).appendTo(n.appendPopoversTo+":first");$content.attr("data-bigfoot-max-height",$content.height());v();t.addClass("active");$content.find(".footnote-content-wrapper").bindScrollHandler()}});var i=e(t.replace(".footnote-button",".footnote-content"));setTimeout(function(){i.addClass("active")},n.popoverCreateDelay);return i};e.fn.bindScrollHandler=function(){if(!n.preventPageScroll)return;e(this).on("DOMMouseScroll mousewheel",function(t){var n=e(this),r=n.scrollTop(),i=n[0].scrollHeight,s=parseInt(n.css("height")),o=n.closest(".footnote-content");n.scrollTop()>0&&n.scrollTop()<10&&o.addClass("scrollable");if(!o.hasClass("scrollable"))return;var u=t.type=="DOMMouseScroll"?t.originalEvent.detail*-40:t.originalEvent.wheelDelta,a=u>0,f=function(){t.stopPropagation();t.preventDefault();t.returnValue=!1;return!1};if(!a&&-u>i-s-r){n.scrollTop(i);o.addClass("fully-scrolled");return f()}if(a&&u>r){n.scrollTop(0);o.removeClass("fully-scrolled");return f()}o.removeClass("fully-scrolled")})};var h=function(t){n.deleteOnUnhover&&n.activateOnHover&&setTimeout(function(){var n=e(t.target).closest(".footnote-content, .footnote-button");e(".footnote-button:hover, .footnote-content:hover").length<1&&d()},n.hoverDelay)},p=function(e){e.keyCode==27&&d()},v=function(){n.positionContent&&e(".footnote-content").each(function(){var t=e(this),n='data-footnote-identifier="'+t.attr("data-footnote-identifier")+'"',r=t.find(".footnote-content-wrapper"),i=e(".footnote-button["+n+"]"),s=g(i),o=parseFloat(t.css("width")),u=parseFloat(t.css("margin-top")),a=+t.attr("data-bigfoot-max-height"),f=2*u+a,l=1e4;if(s.bottomRoom<f&&s.topRoom>s.bottomRoom){t.css({top:"auto",bottom:s.bottomRoom+"px"}).addClass("top").removeClass("bottom");l=s.topRoom-u-15;t.css({"transform-origin":s.leftRelative*100+"% 100%"})}else{t.css({bottom:"auto",top:s.topRoom+"px"}).addClass("bottom").removeClass("top");l=s.bottomRoom-u-15;t.css({"transform-origin":s.leftRelative*100+"% 0%"})}t.find(".footnote-content-wrapper").css({"max-height":Math.min(l,a)+"px"});t.css({left:s.leftRoom-s.leftRelative*o+"px"});m(t,s.leftRelative);parseInt(t.css("height"))<t.find(".footnote-content-wrapper")[0].scrollHeight&&t.addClass("scrollable")})},b=function(e,t){var r=n[e];n[e]=t;return r},w=function(e){return n[e]};e(document).ready(function(){r();e(document).on("mouseenter",".footnote-button",a);e(document).on("touchend click",f);e(document).on("mouseout",".hover-instantiated",h);e(document).on("keyup",p);e(window).on("scroll resize",v)});return{close:function(e,t){return d(e,t)},activate:function(e){return c(e)},reposition:function(){return v()},getSetting:function(e){return w(e)},updateSetting:function(e,t){return b(e,t)}}}})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment