From ba766348fb24831fc7c5522679336a6050028c26 Mon Sep 17 00:00:00 2001 From: jgenero Date: Fri, 21 Oct 2022 10:47:50 +0200 Subject: [PATCH 1/3] initial commit : footnotes css + js --- .../css/footnotes_css/bigfoot-default.css | 249 +++++++ .../css/footnotes_css/bigfoot-default.scss | 619 +++++++++++++++++ app/static/js/footnotes_js/bigfoot.js | 638 ++++++++++++++++++ app/static/js/footnotes_js/bigfoot.min.js | 1 + 4 files changed, 1507 insertions(+) create mode 100644 app/static/css/footnotes_css/bigfoot-default.css create mode 100644 app/static/css/footnotes_css/bigfoot-default.scss create mode 100644 app/static/js/footnotes_js/bigfoot.js create mode 100644 app/static/js/footnotes_js/bigfoot.min.js diff --git a/app/static/css/footnotes_css/bigfoot-default.css b/app/static/css/footnotes_css/bigfoot-default.css new file mode 100644 index 0000000..9774a1e --- /dev/null +++ b/app/static/css/footnotes_css/bigfoot-default.css @@ -0,0 +1,249 @@ +.bigfoot-footnote__button { + position: relative; + z-index: 5; + top: -0.1em; + box-sizing: border-box; + -moz-box-sizing: border-box; + display: inline-block; + padding: 0.35em; + margin: 0 0.1em 0 0.2em; + border: none; + border-radius: 0.3em; + cursor: pointer; + background-color: rgba(110, 110, 110, 0.2); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + font-size: 1rem; + line-height: 0; + vertical-align: middle; + text-decoration: none; + -webkit-font-smoothing: antialiased; + -webkit-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.25s; + transition-duration: 0.25s; +} +.bigfoot-footnote__button:hover, .bigfoot-footnote__button:focus { + outline: none; + background-color: rgba(110, 110, 110, 0.5); +} +.bigfoot-footnote__button:active { + background-color: rgba(110, 110, 110, 0.5); +} +.bigfoot-footnote__button.is-active { + background-color: #6e6e6e; + -webkit-transition-delay: 0.1s; + transition-delay: 0.1s; +} +.bigfoot-footnote__button:after { + content: ''; + display: table; + clear: both; +} + +.bigfoot-footnote__button__circle { + display: inline-block; + width: 0.25em; + height: 0.25em; + margin-right: 0.25em; + float: left; +} +.bigfoot-footnote__button__circle:last-child { + margin-right: 0; +} + +.bigfoot-footnote__container { + display: inline-block; + position: relative; + text-indent: 0; +} + +@media not print { + .footnote-print-only { + display: none !important; + } +} +@media print { + .bigfoot-footnote, + .bigfoot-footnote__button { + display: none !important; + } +} +.bigfoot-footnote { + position: absolute; + z-index: 10; + top: 0; + left: 0; + display: inline-block; + box-sizing: border-box; + max-width: 90%; + margin: 1.96924em 0; + background: #fafafa; + opacity: 0; + border-radius: 0.5em; + border: 1px solid #c3c3c3; + box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); + line-height: 0; + -webkit-transition-property: opacity, -webkit-transform; + transition-property: opacity, transform; + -webkit-transition-duration: 0.25s; + transition-duration: 0.25s; + -webkit-transition-timing-function: ease; + transition-timing-function: ease; + -webkit-transform: scale(0.1) translateZ(0); + transform: scale(0.1) translateZ(0); + -webkit-transform-origin: 50% 0; + -ms-transform-origin: 50% 0; + transform-origin: 50% 0; +} +.bigfoot-footnote.is-positioned-top { + top: auto; + bottom: 0; +} +.bigfoot-footnote.is-active { + -webkit-transform: scale(1) translateZ(0); + transform: scale(1) translateZ(0); + opacity: 0.97; +} +.bigfoot-footnote.is-bottom-fixed { + position: fixed; + bottom: 0; + top: auto; + left: 0; + right: auto; + -webkit-transform: translateY(100%); + -ms-transform: translateY(100%); + transform: translateY(100%); + width: 100%; + margin: 0; + border-radius: 0; + opacity: 1; + border-width: 1px 0 0; + -webkit-transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; +} +.bigfoot-footnote.is-bottom-fixed.is-active { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); +} +.bigfoot-footnote.is-bottom-fixed .bigfoot-footnote__wrapper { + margin: 0 0 0 50%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + max-width: 100%; +} +.bigfoot-footnote.is-bottom-fixed .bigfoot-footnote__wrapper, +.bigfoot-footnote.is-bottom-fixed .bigfoot-footnote__content { + border-radius: 0; +} +.bigfoot-footnote.is-bottom-fixed .bigfoot-footnote__tooltip { + display: none; +} +.bigfoot-footnote.is-scrollable:after { + content: ''; + position: absolute; + bottom: 0.3375em; + left: 0.3375em; + z-index: 14; + display: block; + height: 0.78125em; + width: 0.625em; + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMTIgMTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4iPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFycm93IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPgogICAgICAgICAgICA8cGF0aCBkPSJNNSwwIEw1LDExLjUiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLjUsNy41IEw1LjAyNzY5Mjc5LDEyLjAyNzY5MjgiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjUsNy41IEw5LjAyNzY5Mjc5LDEyLjAyNzY5MjgiIGlkPSJMaW5lLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuMDAwMDAwLCAxMC4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTcuMDAwMDAwLCAtMTAuMDAwMDAwKSAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo="); + background-size: cover; + opacity: 0.1; + transition-properties: opacity; + -webkit-transition-duration: 0.25s; + transition-duration: 0.25s; + -webkit-transition-timing-function: ease; + transition-timing-function: ease; +} +.bigfoot-footnote.is-scrollable .bigfoot-footnote__wrapper:before, .bigfoot-footnote.is-scrollable .bigfoot-footnote__wrapper:after { + content: ''; + position: absolute; + width: 100%; + z-index: 12; + left: 0; +} +.bigfoot-footnote.is-scrollable .bigfoot-footnote__wrapper:before { + top: -1px; + height: 1.1em; + border-radius: 0.5em 0.5em 0 0; + background-image: -webkit-linear-gradient(top, #fafafa 50%, rgba(250, 250, 250, 0) 100%); + background-image: linear-gradient(to bottom, #fafafa 50%, rgba(250, 250, 250, 0) 100%); +} +.bigfoot-footnote.is-scrollable .bigfoot-footnote__wrapper:after { + bottom: -1px; + height: 1.2em; + border-radius: 0 0 0.5em 0.5em; + background-image: -webkit-linear-gradient(bottom, #fafafa 50%, rgba(250, 250, 250, 0) 100%); + background-image: linear-gradient(to top, #fafafa 50%, rgba(250, 250, 250, 0) 100%); +} +.bigfoot-footnote.is-scrollable ::-webkit-scrollbar { + display: none; +} +.bigfoot-footnote.is-fully-scrolled:after, .bigfoot-footnote.is-fully-scrolled:before { + opacity: 0; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.bigfoot-footnote__wrapper { + position: relative; + z-index: 14; + width: 22em; + display: inline-block; + box-sizing: inherit; + overflow: hidden; + margin: 0; + background-color: #fafafa; + border-radius: 0.5em; + line-height: 0; +} + +.bigfoot-footnote__content { + position: relative; + z-index: 8; + display: inline-block; + max-height: 15em; + padding: 1.1em 1.3em 1.2em; + box-sizing: inherit; + overflow: auto; + -webkit-overflow-scrolling: touch; + background: #fafafa; + border-radius: 0.5em; + -webkit-font-smoothing: subpixel-antialiased; + line-height: normal; +} +.bigfoot-footnote__content img { + max-width: 100%; +} +.bigfoot-footnote__content *:last-child { + margin-bottom: 0 !important; +} +.bigfoot-footnote__content *:first-child { + margin-top: 0 !important; +} + +.bigfoot-footnote__tooltip { + position: absolute; + z-index: 12; + box-sizing: border-box; + margin-left: -0.65em; + width: 1.3em; + height: 1.3em; + -webkit-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; +} +.is-positioned-bottom .bigfoot-footnote__tooltip { + top: -0.65em; +} +.is-positioned-top .bigfoot-footnote__tooltip { + bottom: -0.65em; +} diff --git a/app/static/css/footnotes_css/bigfoot-default.scss b/app/static/css/footnotes_css/bigfoot-default.scss new file mode 100644 index 0000000..619bc16 --- /dev/null +++ b/app/static/css/footnotes_css/bigfoot-default.scss @@ -0,0 +1,619 @@ +// bigfoot - v2.1.1 - 2015.04.04 + + +// ___ ___ ___ ___ ___ ___ +// / /\ / /\ / /\ / /\ ___ / /\ / /\ +// / /::\ / /::\ / /::\ / /::\ /__/\ / /:/_ / /::\ +// / /:/\:\ / /:/\:\ / /:/\:\ / /:/\:\ \ \:\ / /:/ /\ / /:/\:\ +// / /:/~/:// /:/ \:\ / /:/~/:// /:/ \:\ \ \:\ / /:/ /:/_ / /:/~/:/ +// /__/:/ /://__/:/ \__\:\/__/:/ /://__/:/ \__\:\ ___ \__\:\/__/:/ /:/ /\/__/:/ /:/___ +// \ \:\/:/ \ \:\ / /:/\ \:\/:/ \ \:\ / /://__/\ | |:|\ \:\/:/ /:/\ \:\/:::::/ +// \ \::/ \ \:\ /:/ \ \::/ \ \:\ /:/ \ \:\| |:| \ \::/ /:/ \ \::/~~~~ +// \ \:\ \ \:\/:/ \ \:\ \ \:\/:/ \ \:\__|:| \ \:\/:/ \ \:\ +// \ \:\ \ \::/ \ \:\ \ \::/ \__\::::/ \ \::/ \ \:\ +// \__\/ \__\/ \__\/ \__\/ ~~~~ \__\/ \__\/ +// +// These are the key variables for styling the popover. +// Just set the variable to none if you don't want that styling. + +// KEY VARIABLES +// ============================================================================= + +// STYLES +$popover-width: 22em !default; // Ideal width of the popover +$popover-max-width: 90% !default; // Best as a % to accommodate smaller viewports +$popover-max-height: 15em !default; // Maximum size of the content area +$popover-color-background: rgb(250, 250, 250) !default; // Color of the popover background +$popover-border-radius: 0.5em !default; // Radius of the corners of the popover +$popover-border: 1px solid rgb(195, 195, 195) !default; // Border of the popover/ tooltip +$popover-inactive-opacity: 0 !default; // Opacity of the popover when instantiated/ deactivating +$popover-active-opacity: 0.97 !default; // Opacity of the popover when active +$popover-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3) !default; // Sets the box shadow under the popover/ tooltip +$popover-bottom-position: auto !default; // Sets the bottom position of the popover. Use only when setting positionPopover to false in the script +$popover-left-position: auto !default; // Sets the left position of the popover. Use only when setting positionPopover to false in the script +$popover-tooltip-size: 1.3em !default; // Sets the side lengths of the tooltip +$popover-scroll-indicator-width: 0.625em !default; // The width of the scroll indicator +$popover-scroll-indicator-aspect-ratio: (15/12) !default; // The ratio of the height over the width of the scroll indicator +$popover-scroll-indicator-opacity: 0.1 !default; // The active opacity of scroll indicators +$popover-initial-transform-state: scale(0.1) translateZ(0) !default; // The inital transform state for the popover +$popover-active-transform-state: scale(1) translateZ(0) !default; // The transform state for the popover once it is fully activated + +// OPTIONAL ELEMENTS +$popover-include-tooltip: true !default; // Adds a tooltip pointing to the footnote button +$popover-include-scroll-indicator: true !default; // Adds an elipsis at the bottom of scrollable popovers +$popover-include-scrolly-fades: true !default; // Fades content in on scrollable popovers +$popover-scroll-indicator-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMTIgMTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4iPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFycm93IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPgogICAgICAgICAgICA8cGF0aCBkPSJNNSwwIEw1LDExLjUiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLjUsNy41IEw1LjAyNzY5Mjc5LDEyLjAyNzY5MjgiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjUsNy41IEw5LjAyNzY5Mjc5LDEyLjAyNzY5MjgiIGlkPSJMaW5lLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuMDAwMDAwLCAxMC4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTcuMDAwMDAwLCAtMTAuMDAwMDAwKSAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=") !default; + + +// OTHER VARIABLES +// ============================================================================= + +// POPOVER +$popover-margin-top: 0.1em !default; +$popover-padding-content-horizontal: 1.3em !default; +$popover-padding-content-top: 1.1em !default; +$popover-padding-content-bottom: 1.2em !default; +$popover-z-index: 10 !default; // Set the base so that it's above the other body children +$popover-initial-transform-origin: 50% 0 !default; + +// POPOVER CONTENT WRAPPER +$popover-content-color-background: $popover-color-background !default; +$popover-content-border-radius: $popover-border-radius !default; + +// OTHER POPOVER ELEMENTS +$popover-tooltip-background: $popover-color-background !default; +$popover-tooltip-radius: 0 !default; +$popover-scroll-indicator-bottom-position: 0.45em !default; +$popover-scrolly-fade-gradient-start-location: 50% !default; +$popover-scroll-indicator-padding: (($popover-padding-content-horizontal/2) - ($popover-scroll-indicator-width/2)) !default; + +// TRANSITIONS +$popover-transition-default-duration: 0.25s !default; +$popover-scroll-indicator-transition-properties: opacity !default; + +// Use none for areas you don't want to transition +$popover-transition-properties: opacity, transform !default; // no mixin to do proper prefixing of the transform, so I have to do it manually; see mixin below +$popover-scroll-indicator-transition-properties: opacity !default; +$popover-scroll-up-transition-delay: 0.4s !default; // Sets the delay for the transition of the scroll indicator when scrolling upwards +$popover-transition-default-timing-function: ease !default; + + + + + +// ___ ___ ___ +// _____ /__/\ ___ ___ / /\ /__/\ +// / /::\ \ \:\ / /\ / /\ / /::\ \ \:\ +// / /:/\:\ \ \:\ / /:/ / /:/ / /:/\:\ \ \:\ +// / /:/~/::\ ___ \ \:\ / /:/ / /:/ / /:/ \:\ _____\__\:\ +// /__/:/ /:/\:|/__/\ \__\:\ / /::\ / /::\ /__/:/ \__\:\/__/::::::::\ +// \ \:\/:/~/:/\ \:\ / /://__/:/\:\ /__/:/\:\\ \:\ / /:/\ \:\~~\~~\/ +// \ \::/ /:/ \ \:\ /:/ \__\/ \:\\__\/ \:\\ \:\ /:/ \ \:\ ~~~ +// \ \:\/:/ \ \:\/:/ \ \:\ \ \:\\ \:\/:/ \ \:\ +// \ \::/ \ \::/ \__\/ \__\/ \ \::/ \ \:\ +// \__\/ \__\/ \__\/ \__\/ +// +// These are the key variables for styling the button. +// Just set the variable to none if you don't want that styling. + +// KEY VARIABLES +// ============================================================================= + +$button-height: 0.95em !default; // The total height of the button +$button-width: auto !default; // The total button width (applies only if $button-apply-dimensions is true) +$button-inner-circle-size: 0.25em !default; // Total height/width of the ellipsis circles +$button-border-radius: 0.3em !default; // Border radius on the button itself +$button-left-margin: 0.2em !default; // Margin between the button and the text to its left +$button-right-margin: 0.1em !default; // Margin between the button and the text to its right +$button-vertical-adjust: -0.1em !default; // Pushes the buttons along the vertical axis to align it with text as desired +$button-inner-circle-left-margin: 1*$button-inner-circle-size !default; // Space between the ellipsis circles + +$button-color: rgb(110, 110, 110) !default; // Background color of the button +$button-hovered-color: $button-color !default; // Background color of the button when being hovered +$button-activating-color: $button-color !default; // Background color of the button when being clicked +$button-active-color: $button-color !default; // Background color of the button when active +$button-standard-opacity: 0.2 !default; // Opacity for when the button is just sittin' there +$button-hovered-opacity: 0.5 !default; // Opacity for when the button is being hovered over +$button-activating-opacity: $button-hovered-opacity !default; // Opacity for when the button is being clicked +$button-active-opacity: 1 !default; // Opacity for when the button is active +$button-active-style-delay: 0.1s !default; // Delay before applying .active styles; this can be used to match to the popover activation transition + +$button-inner-circle-color: white !default; // Background color of the ellipsis circle +$button-inner-circle-border: none !default; // Border of the ellipsis circle + + +// OTHER VARIABLES +// ============================================================================= + +$button-total-padding: $button-height - $button-inner-circle-size !default; +$button-per-side-padding: 0.5*$button-total-padding !default; +$button-transition-properties: background-color !default; + + + +// ----- + + +// ___ ___ ___ ___ +// /__/\ ___ /__/| ___ /__/\ / /\ +// | |::\ / /\ | |:| / /\ \ \:\ / /:/_ +// | |:|:\ / /:/ | |:| / /:/ \ \:\ / /:/ /\ +// __|__|:|\:\ /__/::\ __|__|:| /__/::\ _____\__\:\ / /:/ /::\ +// /__/::::| \:\\__\/\:\__/__/::::\____\__\/\:\__ /__/::::::::\/__/:/ /:/\:\ +// \ \:\~~\__\/ \ \:\/\ ~\~~\::::/ \ \:\/\\ \:\~~\~~\/\ \:\/:/~/:/ +// \ \:\ \__\::/ |~~|:|~~ \__\::/ \ \:\ ~~~ \ \::/ /:/ +// \ \:\ /__/:/ | |:| /__/:/ \ \:\ \__\/ /:/ +// \ \:\ \__\/ | |:| \__\/ \ \:\ /__/:/ +// \__\/ |__|/ \__\/ \__\/ + +@mixin print-styles { + // These styles restore the original footnote numbers and texts when the page is printed + @media not print { + .footnote-print-only { + display: none !important; + } + } + + @media print { + .bigfoot-footnote, + .bigfoot-footnote__button { + display: none !important; + } + } +} + + + +// ----- + + +// ___ ___ ___ +// _____ /__/\ ___ ___ / /\ /__/\ +// / /::\ \ \:\ / /\ / /\ / /::\ \ \:\ +// / /:/\:\ \ \:\ / /:/ / /:/ / /:/\:\ \ \:\ +// / /:/~/::\ ___ \ \:\ / /:/ / /:/ / /:/ \:\ _____\__\:\ +// /__/:/ /:/\:|/__/\ \__\:\ / /::\ / /::\ /__/:/ \__\:\/__/::::::::\ +// \ \:\/:/~/:/\ \:\ / /://__/:/\:\ /__/:/\:\\ \:\ / /:/\ \:\~~\~~\/ +// \ \::/ /:/ \ \:\ /:/ \__\/ \:\\__\/ \:\\ \:\ /:/ \ \:\ ~~~ +// \ \:\/:/ \ \:\/:/ \ \:\ \ \:\\ \:\/:/ \ \:\ +// \ \::/ \ \::/ \__\/ \__\/ \ \::/ \ \:\ +// \__\/ \__\/ \__\/ \__\/ + + + +//* +// The button that activates the footnote. By default, this will appear as a +// flat button that has an ellipse contained inside of it. + +// @state .is-active - The associated popover has been activated and is visible. + +// @since 2.1.0 +// @author Chris Sauve + +.bigfoot-footnote__button { + // POSITIONING + position: relative; + z-index: 5; + top: $button-vertical-adjust; + + // DISPLAY AND SIZING + box-sizing: border-box; + -moz-box-sizing: border-box;; + display: inline-block; + padding: $button-per-side-padding; + margin: 0 $button-right-margin 0 $button-left-margin; + + // BACKDROP + border: none; + border-radius: $button-border-radius; + cursor: pointer; + background-color: rgba($button-color, $button-standard-opacity); + backface-visibility: hidden; + + // TEXT + font-size: 1rem; + line-height: 0; + vertical-align: middle; + text-decoration: none; + -webkit-font-smoothing: antialiased; + + // TRANSITIONS + transition-property: $button-transition-properties; + transition-duration: $popover-transition-default-duration; + + &:hover, + &:focus { + outline: none; + background-color: rgba($button-hovered-color, $button-hovered-opacity); + } + + &:active { + background-color: rgba($button-activating-color, $button-activating-opacity); + } + + &.is-active { + background-color: rgba($button-active-color, $button-active-opacity); + transition-delay: $button-active-style-delay; + } + + // Clearfix + &:after { + content: ''; + display: table; + clear: both; + } +} + + + + + +// _____ ___ ___ +// / /::\ / /\ ___ / /\ +// / /:/\:\ / /::\ / /\ / /:/_ +// / /:/ \:\ / /:/\:\ / /:/ / /:/ /\ +// /__/:/ \__\:| / /:/ \:\ / /:/ / /:/ /::\ +// \ \:\ / /://__/:/ \__\:\ / /::\ /__/:/ /:/\:\ +// \ \:\ /:/ \ \:\ / /://__/:/\:\\ \:\/:/~/:/ +// \ \:\/:/ \ \:\ /:/ \__\/ \:\\ \::/ /:/ +// \ \::/ \ \:\/:/ \ \:\\__\/ /:/ +// \__\/ \ \::/ \__\/ /__/:/ +// \__\/ \__\/ + +//* +// Each of the three circles forming the ellipse within the button. + +// @since 2.1.0 +// @author Chris Sauve + +.bigfoot-footnote__button__circle { + // DISPLAY AND SIZING + display: inline-block; + width: $button-inner-circle-size; + height: $button-inner-circle-size; + margin-right: $button-inner-circle-left-margin; + float: left; + + // Gets rid of margin on the last circle + &:last-child { margin-right: 0; } +} + + + + + +// ___ ___ ___ ___ ___ +// / /\ / /\ /__/\ ___ / /\ ___ /__/\ +// / /:/ / /::\ \ \:\ / /\ / /::\ / /\ \ \:\ +// / /:/ / /:/\:\ \ \:\ / /:/ / /:/\:\ / /:/ \ \:\ +// / /:/ ___ / /:/ \:\ _____\__\:\ / /:/ / /:/~/::\ /__/::\ _____\__\:\ +// /__/:/ / /\/__/:/ \__\:\/__/::::::::\ / /::\ /__/:/ /:/\:\\__\/\:\__ /__/::::::::\ +// \ \:\ / /:/\ \:\ / /:/\ \:\~~\~~\//__/:/\:\\ \:\/:/__\/ \ \:\/\\ \:\~~\~~\/ +// \ \:\ /:/ \ \:\ /:/ \ \:\ ~~~ \__\/ \:\\ \::/ \__\::/ \ \:\ ~~~ +// \ \:\/:/ \ \:\/:/ \ \:\ \ \:\\ \:\ /__/:/ \ \:\ +// \ \::/ \ \::/ \ \:\ \__\/ \ \:\ \__\/ \ \:\ +// \__\/ \__\/ \__\/ \__\/ \__\/ + +//* +// The container for the button and popover. This is required so that the popover +// is guaranteed to have a relatively-positioned container, and to help with the +// positioning calculation. + +// @since 2.1.0 +// @author Chris Sauve + +.bigfoot-footnote__container { + display: inline-block; + position: relative; + text-indent: 0; +} + + + + + +// ___ ___ ___ +// / /\ / /\ ___ /__/\ ___ +// / /::\ / /::\ / /\ \ \:\ / /\ +// / /:/\:\ / /:/\:\ / /:/ \ \:\ / /:/ +// / /:/~/:// /:/~/:/ /__/::\ _____\__\:\ / /:/ +// /__/:/ /://__/:/ /:/___\__\/\:\__ /__/::::::::\ / /::\ +// \ \:\/:/ \ \:\/:::::/ \ \:\/\\ \:\~~\~~\//__/:/\:\ +// \ \::/ \ \::/~~~~ \__\::/ \ \:\ ~~~ \__\/ \:\ +// \ \:\ \ \:\ /__/:/ \ \:\ \ \:\ +// \ \:\ \ \:\ \__\/ \ \:\ \__\/ +// \__\/ \__\/ \__\/ + +@include print-styles; + + + +// ----- + + +// ___ ___ ___ ___ ___ ___ +// / /\ / /\ / /\ / /\ ___ / /\ / /\ +// / /::\ / /::\ / /::\ / /::\ /__/\ / /:/_ / /::\ +// / /:/\:\ / /:/\:\ / /:/\:\ / /:/\:\ \ \:\ / /:/ /\ / /:/\:\ +// / /:/~/:// /:/ \:\ / /:/~/:// /:/ \:\ \ \:\ / /:/ /:/_ / /:/~/:/ +// /__/:/ /://__/:/ \__\:\/__/:/ /://__/:/ \__\:\ ___ \__\:\/__/:/ /:/ /\/__/:/ /:/___ +// \ \:\/:/ \ \:\ / /:/\ \:\/:/ \ \:\ / /://__/\ | |:|\ \:\/:/ /:/\ \:\/:::::/ +// \ \::/ \ \:\ /:/ \ \::/ \ \:\ /:/ \ \:\| |:| \ \::/ /:/ \ \::/~~~~ +// \ \:\ \ \:\/:/ \ \:\ \ \:\/:/ \ \:\__|:| \ \:\/:/ \ \:\ +// \ \:\ \ \::/ \ \:\ \ \::/ \__\::::/ \ \::/ \ \:\ +// \__\/ \__\/ \__\/ \__\/ ~~~~ \__\/ \__\/ +// + + + +//* +// The popover for the footnote. This popover will be, by default, be sized and positioned +// by the script. However, many of the sizes can be established in this stylesheet and +// will be respected by the script. `max-width` will limit the width of the popover +// relative to the viewport. `width` (on `bigfoot-footnote__wrapper`) will set the +// absolute max width. Max height can be set via a `max-height` property +// on `bigfoot-footnote__content`. + +// By default, the popover has a light gray background, a shadow for some depth, +// rounded corners, and a tooltip pointing to the footnote button. + +// @state .is-active - The popover has been activated and is visible. +// @state .is-positioned-top - The popover is above the button. +// @state .is-positioned-bottom - The popover is below the button. +// @state .is-scrollable - The popover content is greater than the popover height. +// @state .is-fully-scrolled - The popover content is scrolled to the bottom. + +// @since 2.1.0 +// @author Chris Sauve + +.bigfoot-footnote { + // POSITIONING + position: absolute; + z-index: $popover-z-index; + top: 0; left: 0; + + // DISPLAY AND SIZING + display: inline-block; + box-sizing: border-box; + // Height is set in .footnote-content-wrapper + max-width: $popover-max-width; + // 1.414213... is to get the diagonal height of the tooltip using pythagorus, yo. + margin: ((1.4142135624 * $popover-tooltip-size / 2) + $button-height + $popover-margin-top) 0; + // fits the popover to the contents + + // BACKDROP + background: $popover-color-background; + opacity: $popover-inactive-opacity; + border-radius: $popover-border-radius; + border: $popover-border; + box-shadow: $popover-box-shadow; + + // TEXT + line-height: 0; + + // TRANSITIONS + transition-property: $popover-transition-properties; + transition-duration: $popover-transition-default-duration; + transition-timing-function: $popover-transition-default-timing-function; + + // TRANSFORMS + transform: $popover-initial-transform-state; + transform-origin: $popover-initial-transform-origin; + + &.is-positioned-top { + top: auto; + bottom: 0; + } + + &.is-active { + transform: $popover-active-transform-state; + opacity: $popover-active-opacity; + } + + &.is-bottom-fixed { + // POSITIONING + position: fixed; + bottom: 0; top: auto; + left: 0; right: auto; + transform: translateY(100%); + + // DISPLAY AND SIZING + width: 100%; + margin: 0; + + // BACKDROP + border-radius: 0; + opacity: 1; + border-width: 1px 0 0; + + // TRANSITIONS + transition: transform 0.3s ease; + + &.is-active { + transform: translateY(0); + } + + .bigfoot-footnote__wrapper { + margin: 0 0 0 50%; + transform: translateX(-50%); + max-width: 100%; + } + + .bigfoot-footnote__wrapper, + .bigfoot-footnote__content { + border-radius: 0; + } + + .bigfoot-footnote__tooltip { + display: none; + } + } + + &.is-scrollable { + // A scrollable indicator in the left margin of the popover. + &:after { + // CONTENT + content: ''; + + // POSITIONING + position: absolute; + bottom: $popover-scroll-indicator-padding; + left: $popover-scroll-indicator-padding; + z-index: ($popover-z-index + 4); + + // DISPLAY AND SIZING + display: block; + height: ($popover-scroll-indicator-width*$popover-scroll-indicator-aspect-ratio); + width: $popover-scroll-indicator-width; + + // BACKDROP + background-image: $popover-scroll-indicator-icon; + background-size: cover; + opacity: $popover-scroll-indicator-opacity; + transition-properties: $popover-scroll-indicator-transition-properties; + transition-duration: $popover-transition-default-duration; + transition-timing-function: $popover-transition-default-timing-function; + } + + .bigfoot-footnote__wrapper { + &:before, + &:after { + content: ''; + position: absolute; + width: 100%; + // Above the content + z-index: ($popover-z-index + 2); + left: 0; + } + + &:before { + top: -1px; + height: $popover-padding-content-top; + border-radius: $popover-border-radius $popover-border-radius 0 0; + background-image: linear-gradient(to bottom, $popover-color-background $popover-scrolly-fade-gradient-start-location, transparentize($popover-color-background, 1) 100%); + } + + &:after { + bottom: -1px; + height: $popover-padding-content-bottom; + border-radius: 0 0 $popover-border-radius $popover-border-radius; + background-image: linear-gradient(to top, $popover-color-background $popover-scrolly-fade-gradient-start-location, transparentize($popover-color-background, 1) 100%); + } + } + + ::-webkit-scrollbar { display: none; } + } + + &.is-fully-scrolled { + &:after, + &:before { + opacity: 0; + transition-delay: 0; + } + } +} + + + +//* +// Wraps around the footnote content. This is necessary in order to have an element +// above the tooltip and that can provide top and bottom indicators that there is +// additional content on scrollable popovers. + +// @since 2.1.0 +// @author Chris Sauve + +.bigfoot-footnote__wrapper { + // POSITIONING + position: relative; + // Above the outer tooltip, below the inner tooltip + z-index: ($popover-z-index + 4); + + // DISPLAY AND SIZING + width: $popover-width; + display: inline-block; + box-sizing: inherit; + overflow: hidden; + margin: 0; + + // BACKDROP + background-color: $popover-color-background; + border-radius: $popover-border-radius; + + // TEXT + line-height: 0; +} + + + +//* +// Contains the actual footnote content. There is very little prescription here +// on the footnote content itself, except for removing and top margin on the first +// element and bottom margin on the last child. + +// @since 2.1.0 +// @author Chris Sauve + +.bigfoot-footnote__content { + // POSITIONING + position: relative; + z-index: ($popover-z-index - 2); // Below fading bars + + // DISPLAY AND SIZING + display: inline-block; + max-height: $popover-max-height; + padding: $popover-padding-content-top $popover-padding-content-horizontal $popover-padding-content-bottom; + box-sizing: inherit; + overflow: auto; + -webkit-overflow-scrolling: touch; + + // BACKDROP + background: $popover-content-color-background; + border-radius: $popover-content-border-radius; + + // TEXT + -webkit-font-smoothing: subpixel-antialiased; + line-height: normal; + + // INTERIOR ELEMENTS + img { max-width: 100%; } + *:last-child { margin-bottom: 0 !important; } + *:first-child { margin-top: 0 !important; } +} + + + +//* +// A triangular shape pointing towards the footnote button. + +// @since 2.1.0 +// @author Chris Sauve + +.bigfoot-footnote__tooltip { + // POSITIONING + position: absolute; + // Above the footnote-main-wrapper and the outer tooltip + z-index: ($popover-z-index + 2); + + // DISPLAY AND SIZING + box-sizing: border-box; + margin-left: (-0.5 * $popover-tooltip-size); + // Smaller by one border-width's worth + width: $popover-tooltip-size; + height: $popover-tooltip-size; + transform: rotate(45deg); + + // BACKDROP + background: $popover-tooltip-background; + border: $popover-border; + box-shadow: $popover-box-shadow; + border-top-left-radius: $popover-tooltip-radius; + + .is-positioned-bottom & { + top: (-0.5 * $popover-tooltip-size); + } + + .is-positioned-top & { + bottom: (-0.5 * $popover-tooltip-size); + } +} diff --git a/app/static/js/footnotes_js/bigfoot.js b/app/static/js/footnotes_js/bigfoot.js new file mode 100644 index 0000000..7def8b2 --- /dev/null +++ b/app/static/js/footnotes_js/bigfoot.js @@ -0,0 +1,638 @@ +(function() { + (function($) { + return $.bigfoot = function(options) { + var addBreakpoint, baseFontSize, bigfoot, buttonHover, calculatePixelDimension, cleanFootnoteLinks, clickButton, createPopover, defaults, deleteEmptyOrHR, escapeKeypress, footnoteInit, getSetting, makeDefaultCallbacks, popoverStates, positionTooltip, removeBackLinks, removeBreakpoint, removePopovers, replaceWithReferenceAttributes, repositionFeet, roomCalc, settings, touchClick, unhoverFeet, updateSetting, viewportDetails; + bigfoot = void 0; + defaults = { + actionOriginalFN: "hide", + activateCallback: function() {}, + activateOnHover: false, + allowMultipleFN: false, + anchorPattern: /(fn|footnote|note)[:\-_\d]/gi, + anchorParentTagname: 'sup', + breakpoints: {}, + deleteOnUnhover: false, + footnoteParentClass: 'footnote', + footnoteTagname: 'li', + hoverDelay: 250, + numberResetSelector: void 0, + popoverDeleteDelay: 300, + popoverCreateDelay: 100, + positionContent: true, + preventPageScroll: true, + scope: false, + useFootnoteOnlyOnce: true, + contentMarkup: "", + buttonMarkup: "
" + }; + settings = $.extend(defaults, options); + popoverStates = {}; + footnoteInit = function() { + var $curResetElement, $currentLastFootnoteLink, $footnoteAnchors, $footnoteButton, $lastResetElement, $parent, $relevantFNLink, $relevantFootnote, finalFNLinks, footnoteButton, footnoteButtonSearchQuery, footnoteContent, footnoteIDNum, footnoteLinks, footnoteNum, footnotes, i, _i, _ref, _results; + footnoteButtonSearchQuery = settings.scope ? "" + settings.scope + " a[href*=\"#\"]" : "a[href*=\"#\"]"; + $footnoteAnchors = $(footnoteButtonSearchQuery).filter(function() { + var $this, relAttr; + $this = $(this); + relAttr = $this.attr("rel"); + if (relAttr === "null" || (relAttr == null)) { + relAttr = ""; + } + return ("" + ($this.attr("href")) + relAttr).match(settings.anchorPattern) && $this.closest("[class*=" + settings.footnoteParentClass + "]:not(a):not(" + settings.anchorParentTagname + ")").length < 1; + }); + footnotes = []; + footnoteLinks = []; + finalFNLinks = []; + cleanFootnoteLinks($footnoteAnchors, footnoteLinks); + $(footnoteLinks).each(function() { + var $closestFootnoteEl, relatedFN; + relatedFN = $(this).data("footnote-ref").replace(/[:.+~*\]\[]/g, "\\$&"); + if (settings.useFootnoteOnlyOnce) { + relatedFN = "" + relatedFN + ":not(.footnote-processed)"; + } + $closestFootnoteEl = $(relatedFN).closest(settings.footnoteTagname); + if ($closestFootnoteEl.length > 0) { + footnotes.push($closestFootnoteEl.first().addClass("footnote-processed")); + return finalFNLinks.push(this); + } + }); + $currentLastFootnoteLink = $("[data-footnote-identifier]:last"); + footnoteIDNum = $currentLastFootnoteLink.length < 1 ? 0 : +$currentLastFootnoteLink.data("footnote-identifier"); + _results = []; + for (i = _i = 0, _ref = footnotes.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) { + footnoteContent = removeBackLinks($(footnotes[i]).html().trim(), $(finalFNLinks[i]).data("footnote-backlink-ref")); + footnoteContent = footnoteContent.replace(/"/g, """).replace(/</g, "<sym;").replace(/>/g, ">sym;"); + footnoteIDNum += 1; + footnoteButton = ""; + $relevantFNLink = $(finalFNLinks[i]); + $relevantFootnote = $(footnotes[i]); + if (settings.numberResetSelector != null) { + $curResetElement = $relevantFNLink.closest(settings.numberResetSelector); + if ($curResetElement.is($lastResetElement)) { + footnoteNum += 1; + } else { + footnoteNum = 1; + } + $lastResetElement = $curResetElement; + } else { + footnoteNum = footnoteIDNum; + } + if (footnoteContent.indexOf("<") !== 0) { + footnoteContent = "

" + footnoteContent + "

"; + } + footnoteButton = settings.buttonMarkup.replace(/\{\{FOOTNOTENUM\}\}/g, footnoteNum).replace(/\{\{FOOTNOTEID\}\}/g, footnoteIDNum).replace(/\{\{FOOTNOTECONTENT\}\}/g, footnoteContent); + footnoteButton = replaceWithReferenceAttributes(footnoteButton, "SUP", $relevantFNLink); + footnoteButton = replaceWithReferenceAttributes(footnoteButton, "FN", $relevantFootnote); + $footnoteButton = $(footnoteButton).insertBefore($relevantFNLink); + $parent = $relevantFootnote.parent(); + switch (settings.actionOriginalFN.toLowerCase()) { + case "hide": + $relevantFNLink.addClass("footnote-print-only"); + $relevantFootnote.addClass("footnote-print-only"); + _results.push(deleteEmptyOrHR($parent)); + break; + case "delete": + $relevantFNLink.remove(); + $relevantFootnote.remove(); + _results.push(deleteEmptyOrHR($parent)); + break; + default: + _results.push($relevantFNLink.addClass("footnote-print-only")); + } + } + return _results; + }; + cleanFootnoteLinks = function($footnoteAnchors, footnoteLinks) { + var $parent, $supChild, linkHREF, linkID; + if (footnoteLinks == null) { + footnoteLinks = []; + } + $parent = void 0; + $supChild = void 0; + linkHREF = void 0; + linkID = void 0; + $footnoteAnchors.each(function() { + var $child, $this; + $this = $(this); + linkHREF = "#" + ($this.attr("href")).split("#")[1]; + $parent = $this.closest(settings.anchorParentTagname); + $child = $this.find(settings.anchorParentTagname); + if ($parent.length > 0) { + linkID = ($parent.attr("id") || "") + ($this.attr("id") || ""); + return footnoteLinks.push($parent.attr({ + "data-footnote-backlink-ref": linkID, + "data-footnote-ref": linkHREF + })); + } else if ($child.length > 0) { + linkID = ($child.attr("id") || "") + ($this.attr("id") || ""); + return footnoteLinks.push($this.attr({ + "data-footnote-backlink-ref": linkID, + "data-footnote-ref": linkHREF + })); + } else { + linkID = $this.attr("id") || ""; + return footnoteLinks.push($this.attr({ + "data-footnote-backlink-ref": linkID, + "data-footnote-ref": linkHREF + })); + } + }); + }; + deleteEmptyOrHR = function($el) { + var $parent; + $parent = void 0; + if ($el.is(":empty") || $el.children(":not(.footnote-print-only)").length === 0) { + $parent = $el.parent(); + if (settings.actionOriginalFN.toLowerCase() === "delete") { + $el.remove(); + } else { + $el.addClass("footnote-print-only"); + } + return deleteEmptyOrHR($parent); + } else if ($el.children(":not(.footnote-print-only)").length === $el.children("hr:not(.footnote-print-only)").length) { + $parent = $el.parent(); + if (settings.actionOriginalFN.toLowerCase() === "delete") { + $el.remove(); + } else { + $el.children("hr").addClass("footnote-print-only"); + $el.addClass("footnote-print-only"); + } + return deleteEmptyOrHR($parent); + } + }; + removeBackLinks = function(footnoteHTML, backlinkID) { + var regex; + if (backlinkID.indexOf(' ') >= 0) { + backlinkID = backlinkID.trim().replace(/\s+/g, "|").replace(/(.*)/g, "($1)"); + } + regex = new RegExp("(\\s| )*<\\s*a[^#<]*#" + backlinkID + "[^>]*>(.*?)<\\s*/\\s*a>", "g"); + return footnoteHTML.replace(regex, "").replace("[]", ""); + }; + replaceWithReferenceAttributes = function(string, referenceKeyword, $referenceElement) { + var refMatches, refRegex, refReplaceRegex, refReplaceText; + refRegex = new RegExp("\\{\\{" + referenceKeyword + ":([^\\}]*)\\}\\}", "g"); + refMatches = void 0; + refReplaceText = void 0; + refReplaceRegex = void 0; + refMatches = refRegex.exec(string); + while (refMatches) { + if (refMatches[1]) { + refReplaceText = $referenceElement.attr(refMatches[1]) || ""; + string = string.replace("{{" + referenceKeyword + ":" + refMatches[1] + "}}", refReplaceText); + } + refMatches = refRegex.exec(string); + } + return string; + }; + buttonHover = function(event) { + var $buttonHovered, dataIdentifier, otherPopoverSelector; + if (settings.activateOnHover) { + $buttonHovered = $(event.target).closest(".bigfoot-footnote__button"); + dataIdentifier = "[data-footnote-identifier=\"" + ($buttonHovered.attr("data-footnote-identifier")) + "\"]"; + if ($buttonHovered.hasClass("is-active")) { + return; + } + $buttonHovered.addClass("is-hover-instantiated"); + if (!settings.allowMultipleFN) { + otherPopoverSelector = ".bigfoot-footnote:not(" + dataIdentifier + ")"; + removePopovers(otherPopoverSelector); + } + createPopover(".bigfoot-footnote__button" + dataIdentifier).addClass("is-hover-instantiated"); + } + }; + touchClick = function(event) { + var $nearButton, $nearFootnote, $target; + $target = $(event.target); + $nearButton = $target.closest(".bigfoot-footnote__button"); + $nearFootnote = $target.closest(".bigfoot-footnote"); + if ($nearButton.length > 0) { + event.preventDefault(); + clickButton($nearButton); + } else if ($nearFootnote.length < 1) { + if ($(".bigfoot-footnote").length > 0) { + removePopovers(); + } + } + }; + clickButton = function($button) { + var dataIdentifier; + $button.blur(); + dataIdentifier = "data-footnote-identifier=\"" + ($button.attr("data-footnote-identifier")) + "\""; + if ($button.hasClass("changing")) { + return; + } else if (!$button.hasClass("is-active")) { + $button.addClass("changing"); + setTimeout((function() { + return $button.removeClass("changing"); + }), settings.popoverCreateDelay); + createPopover(".bigfoot-footnote__button[" + dataIdentifier + "]"); + $button.addClass("is-click-instantiated"); + if (!settings.allowMultipleFN) { + removePopovers(".bigfoot-footnote:not([" + dataIdentifier + "])"); + } + } else { + if (!settings.allowMultipleFN) { + removePopovers(); + } else { + removePopovers(".bigfoot-footnote[" + dataIdentifier + "]"); + } + } + }; + createPopover = function(selector) { + var $buttons, $popoversCreated; + $buttons = void 0; + if (typeof selector !== "string" && settings.allowMultipleFN) { + $buttons = selector; + } else if (typeof selector !== "string") { + $buttons = selector.first(); + } else if (settings.allowMultipleFN) { + $buttons = $(selector).closest(".bigfoot-footnote__button"); + } else { + $buttons = $(selector + ":first").closest(".bigfoot-footnote__button"); + } + $popoversCreated = $(); + $buttons.each(function() { + var $content, $contentContainer, $this, content; + $this = $(this); + content = void 0; + try { + content = settings.contentMarkup.replace(/\{\{FOOTNOTENUM\}\}/g, $this.attr("data-footnote-number")).replace(/\{\{FOOTNOTEID\}\}/g, $this.attr("data-footnote-identifier")).replace(/\{\{FOOTNOTECONTENT\}\}/g, $this.attr("data-bigfoot-footnote")).replace(/\>sym\;/g, ">").replace(/\<sym\;/g, "<"); + return content = replaceWithReferenceAttributes(content, "BUTTON", $this); + } finally { + $content = $(content); + try { + settings.activateCallback($content, $this); + } catch (_error) {} + $content.insertAfter($buttons); + popoverStates[$this.attr("data-footnote-identifier")] = "init"; + $content.attr("bigfoot-max-width", calculatePixelDimension($content.css("max-width"), $content)); + $content.css("max-width", 10000); + $contentContainer = $content.find(".bigfoot-footnote__content"); + $content.attr("data-bigfoot-max-height", calculatePixelDimension($contentContainer.css("max-height"), $contentContainer)); + repositionFeet(); + $this.addClass("is-active"); + $content.find(".bigfoot-footnote__content").bindScrollHandler(); + $popoversCreated = $popoversCreated.add($content); + } + }); + setTimeout((function() { + return $popoversCreated.addClass("is-active"); + }), settings.popoverCreateDelay); + return $popoversCreated; + }; + baseFontSize = function() { + var el, size; + el = document.createElement("div"); + el.style.cssText = "display:inline-block;padding:0;line-height:1;position:absolute;visibility:hidden;font-size:1em;"; + el.appendChild(document.createElement("M")); + document.body.appendChild(el); + size = el.offsetHeight; + document.body.removeChild(el); + return size; + }; + calculatePixelDimension = function(dim, $el) { + if (dim === "none") { + dim = 10000; + } else if (dim.indexOf("rem") >= 0) { + dim = parseFloat(dim) * baseFontSize(); + } else if (dim.indexOf("em") >= 0) { + dim = parseFloat(dim) * parseFloat($el.css("font-size")); + } else if (dim.indexOf("px") >= 0) { + dim = parseFloat(dim); + if (dim <= 60) { + dim = dim / parseFloat($el.parent().css("width")); + } + } else if (dim.indexOf("%") >= 0) { + dim = parseFloat(dim) / 100; + } + return dim; + }; + $.fn.bindScrollHandler = function() { + if (!settings.preventPageScroll) { + return $(this); + } + $(this).on("DOMMouseScroll mousewheel", function(event) { + var $popover, $this, delta, height, prevent, scrollHeight, scrollTop, up; + $this = $(this); + scrollTop = $this.scrollTop(); + scrollHeight = $this[0].scrollHeight; + height = parseInt($this.css("height")); + $popover = $this.closest(".bigfoot-footnote"); + if ($this.scrollTop() > 0 && $this.scrollTop() < 10) { + $popover.addClass("is-scrollable"); + } + if (!$popover.hasClass("is-scrollable")) { + return; + } + delta = event.type === "DOMMouseScroll" ? event.originalEvent.detail * -40 : event.originalEvent.wheelDelta; + up = delta > 0; + prevent = function() { + event.stopPropagation(); + event.preventDefault(); + event.returnValue = false; + return false; + }; + if (!up && -delta > scrollHeight - height - scrollTop) { + $this.scrollTop(scrollHeight); + $popover.addClass("is-fully-scrolled"); + return prevent(); + } else if (up && delta > scrollTop) { + $this.scrollTop(0); + $popover.removeClass("is-fully-scrolled"); + return prevent(); + } else { + return $popover.removeClass("is-fully-scrolled"); + } + }); + return $(this); + }; + unhoverFeet = function(e) { + if (settings.deleteOnUnhover && settings.activateOnHover) { + return setTimeout((function() { + var $target; + $target = $(e.target).closest(".bigfoot-footnote, .bigfoot-footnote__button"); + if ($(".bigfoot-footnote__button:hover, .bigfoot-footnote:hover").length < 1) { + return removePopovers(); + } + }), settings.hoverDelay); + } + }; + escapeKeypress = function(event) { + if (event.keyCode === 27) { + return removePopovers(); + } + }; + removePopovers = function(footnotes, timeout) { + var $buttonsClosed, $linkedButton, $this, footnoteID; + if (footnotes == null) { + footnotes = ".bigfoot-footnote"; + } + if (timeout == null) { + timeout = settings.popoverDeleteDelay; + } + $buttonsClosed = $(); + footnoteID = void 0; + $linkedButton = void 0; + $this = void 0; + $(footnotes).each(function() { + $this = $(this); + footnoteID = $this.attr("data-footnote-identifier"); + $linkedButton = $(".bigfoot-footnote__button[data-footnote-identifier=\"" + footnoteID + "\"]"); + if (!$linkedButton.hasClass("changing")) { + $buttonsClosed = $buttonsClosed.add($linkedButton); + $linkedButton.removeClass("is-active is-hover-instantiated is-click-instantiated").addClass("changing"); + $this.removeClass("is-active").addClass("disapearing"); + return setTimeout((function() { + $this.remove(); + delete popoverStates[footnoteID]; + return $linkedButton.removeClass("changing"); + }), timeout); + } + }); + return $buttonsClosed; + }; + repositionFeet = function(e) { + var type; + if (settings.positionContent) { + type = e ? e.type : "resize"; + $(".bigfoot-footnote").each(function() { + var $button, $contentWrapper, $mainWrap, $this, dataIdentifier, identifier, lastState, marginSize, maxHeightInCSS, maxHeightOnScreen, maxWidth, maxWidthInCSS, positionOnTop, relativeToWidth, roomLeft, totalHeight; + $this = $(this); + identifier = $this.attr("data-footnote-identifier"); + dataIdentifier = "data-footnote-identifier=\"" + identifier + "\""; + $contentWrapper = $this.find(".bigfoot-footnote__content"); + $button = $this.siblings(".bigfoot-footnote__button"); + roomLeft = roomCalc($button); + marginSize = parseFloat($this.css("margin-top")); + maxHeightInCSS = +($this.attr("data-bigfoot-max-height")); + totalHeight = 2 * marginSize + $this.outerHeight(); + maxHeightOnScreen = 10000; + positionOnTop = roomLeft.bottomRoom < totalHeight && roomLeft.topRoom > roomLeft.bottomRoom; + lastState = popoverStates[identifier]; + if (positionOnTop) { + if (lastState !== "top") { + popoverStates[identifier] = "top"; + $this.addClass("is-positioned-top").removeClass("is-positioned-bottom"); + $this.css("transform-origin", (roomLeft.leftRelative * 100) + "% 100%"); + } + maxHeightOnScreen = roomLeft.topRoom - marginSize - 15; + } else { + if (lastState !== "bottom" || lastState === "init") { + popoverStates[identifier] = "bottom"; + $this.removeClass("is-positioned-top").addClass("is-positioned-bottom"); + $this.css("transform-origin", (roomLeft.leftRelative * 100) + "% 0%"); + } + maxHeightOnScreen = roomLeft.bottomRoom - marginSize - 15; + } + $this.find(".bigfoot-footnote__content").css({ + "max-height": Math.min(maxHeightOnScreen, maxHeightInCSS) + "px" + }); + if (type === "resize") { + maxWidthInCSS = parseFloat($this.attr("bigfoot-max-width")); + $mainWrap = $this.find(".bigfoot-footnote__wrapper"); + maxWidth = maxWidthInCSS; + if (maxWidthInCSS <= 1) { + relativeToWidth = (function() { + var jq, userSpecifiedRelativeElWidth; + userSpecifiedRelativeElWidth = 10000; + if (settings.maxWidthRelativeTo) { + jq = $(settings.maxWidthRelativeTo); + if (jq.length > 0) { + userSpecifiedRelativeElWidth = jq.outerWidth(); + } + } + return Math.min(window.innerWidth, userSpecifiedRelativeElWidth); + })(); + maxWidth = relativeToWidth * maxWidthInCSS; + } + maxWidth = Math.min(maxWidth, $this.find(".bigfoot-footnote__content").outerWidth() + 1); + $mainWrap.css("max-width", maxWidth + "px"); + $this.css({ + left: (-roomLeft.leftRelative * maxWidth + parseFloat($button.css("margin-left")) + $button.outerWidth() / 2) + "px" + }); + positionTooltip($this, roomLeft.leftRelative); + } + if (parseInt($this.outerHeight()) < $this.find(".bigfoot-footnote__content")[0].scrollHeight) { + return $this.addClass("is-scrollable"); + } + }); + } + }; + positionTooltip = function($popover, leftRelative) { + var $tooltip; + if (leftRelative == null) { + leftRelative = 0.5; + } + $tooltip = $popover.find(".bigfoot-footnote__tooltip"); + if ($tooltip.length > 0) { + $tooltip.css("left", "" + (leftRelative * 100) + "%"); + } + }; + roomCalc = function($el) { + var elHeight, elLeftMargin, elWidth, leftRoom, topRoom, w; + elLeftMargin = parseFloat($el.css("margin-left")); + elWidth = parseFloat($el.outerWidth()) - elLeftMargin; + elHeight = parseFloat($el.outerHeight()); + w = viewportDetails(); + topRoom = $el.offset().top - w.scrollY + elHeight / 2; + leftRoom = $el.offset().left - w.scrollX + elWidth / 2; + return { + topRoom: topRoom, + bottomRoom: w.height - topRoom, + leftRoom: leftRoom, + rightRoom: w.width - leftRoom, + leftRelative: leftRoom / w.width, + topRelative: topRoom / w.height + }; + }; + viewportDetails = function() { + var $window; + $window = $(window); + return { + width: window.innerWidth, + height: window.innerHeight, + scrollX: $window.scrollLeft(), + scrollY: $window.scrollTop() + }; + }; + addBreakpoint = function(size, trueCallback, falseCallback, deleteDelay, removeOpen) { + var falseDefaultPositionSetting, minMax, mqListener, mql, query, s, trueDefaultPositionSetting; + if (deleteDelay == null) { + deleteDelay = settings.popoverDeleteDelay; + } + if (removeOpen == null) { + removeOpen = true; + } + mql = void 0; + minMax = void 0; + s = void 0; + if (typeof size === "string") { + s = size.toLowerCase() === "iphone" ? "<320px" : size.toLowerCase() === "ipad" ? "<768px" : size; + minMax = s.charAt(0) === ">" ? "min" : s.charAt(0) === "<" ? "max" : null; + query = minMax ? "(" + minMax + "-width: " + (s.substring(1)) + ")" : s; + mql = window.matchMedia(query); + } else { + mql = size; + } + if (mql.media && mql.media === "invalid") { + return { + added: false, + mq: mql, + listener: null + }; + } + trueDefaultPositionSetting = minMax === "min"; + falseDefaultPositionSetting = minMax === "max"; + trueCallback = trueCallback || makeDefaultCallbacks(removeOpen, deleteDelay, trueDefaultPositionSetting, function($popover) { + return $popover.addClass("is-bottom-fixed"); + }); + falseCallback = falseCallback || makeDefaultCallbacks(removeOpen, deleteDelay, falseDefaultPositionSetting, function() {}); + mqListener = function(mq) { + if (mq.matches) { + trueCallback(removeOpen, bigfoot); + } else { + falseCallback(removeOpen, bigfoot); + } + }; + mql.addListener(mqListener); + mqListener(mql); + settings.breakpoints[size] = { + added: true, + mq: mql, + listener: mqListener + }; + return settings.breakpoints[size]; + }; + makeDefaultCallbacks = function(removeOpen, deleteDelay, position, callback) { + return function(removeOpen, bigfoot) { + var $closedPopovers; + $closedPopovers = void 0; + if (removeOpen) { + $closedPopovers = bigfoot.close(); + bigfoot.updateSetting("activateCallback", callback); + } + return setTimeout((function() { + bigfoot.updateSetting("positionContent", position); + if (removeOpen) { + return bigfoot.activate($closedPopovers); + } + }), deleteDelay); + }; + }; + removeBreakpoint = function(target, callback) { + var b, breakpoint, mq, mqFound; + mq = null; + b = void 0; + mqFound = false; + if (typeof target === "string") { + mqFound = settings.breakpoints[target] !== undefined; + } else { + for (b in settings.breakpoints) { + if (settings.breakpoints.hasOwnProperty(b) && settings.breakpoints[b].mq === target) { + mqFound = true; + } + } + } + if (mqFound) { + breakpoint = settings.breakpoints[b || target]; + if (callback) { + callback({ + matches: false + }); + } else { + breakpoint.listener({ + matches: false + }); + } + breakpoint.mq.removeListener(breakpoint.listener); + delete settings.breakpoints[b || target]; + } + return mqFound; + }; + updateSetting = function(newSettings, value) { + var oldValue, prop; + oldValue = void 0; + if (typeof newSettings === "string") { + oldValue = settings[newSettings]; + settings[newSettings] = value; + } else { + oldValue = {}; + for (prop in newSettings) { + if (newSettings.hasOwnProperty(prop)) { + oldValue[prop] = settings[prop]; + settings[prop] = newSettings[prop]; + } + } + } + return oldValue; + }; + getSetting = function(setting) { + return settings[setting]; + }; + $(document).ready(function() { + footnoteInit(); + $(document).on("mouseenter", ".bigfoot-footnote__button", buttonHover); + $(document).on("touchend click", touchClick); + $(document).on("mouseout", ".is-hover-instantiated", unhoverFeet); + $(document).on("keyup", escapeKeypress); + $(window).on("scroll resize", repositionFeet); + return $(document).on("gestureend", function() { + return repositionFeet(); + }); + }); + bigfoot = { + removePopovers: removePopovers, + close: removePopovers, + createPopover: createPopover, + activate: createPopover, + repositionFeet: repositionFeet, + reposition: repositionFeet, + addBreakpoint: addBreakpoint, + removeBreakpoint: removeBreakpoint, + getSetting: getSetting, + updateSetting: updateSetting + }; + return bigfoot; + }; + })(jQuery); + +}).call(this); diff --git a/app/static/js/footnotes_js/bigfoot.min.js b/app/static/js/footnotes_js/bigfoot.min.js new file mode 100644 index 0000000..7b03600 --- /dev/null +++ b/app/static/js/footnotes_js/bigfoot.min.js @@ -0,0 +1 @@ +(function(){!function(a){return a.bigfoot=function(b){var c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C;return e=void 0,k={actionOriginalFN:"hide",activateCallback:function(){},activateOnHover:!1,allowMultipleFN:!1,anchorPattern:/(fn|footnote|note)[:\-_\d]/gi,anchorParentTagname:"sup",breakpoints:{},deleteOnUnhover:!1,footnoteParentClass:"footnote",footnoteTagname:"li",hoverDelay:250,numberResetSelector:void 0,popoverDeleteDelay:300,popoverCreateDelay:100,positionContent:!0,preventPageScroll:!0,scope:!1,useFootnoteOnlyOnce:!0,contentMarkup:'',buttonMarkup:'
'},y=a.extend(k,b),q={},n=function(){var b,c,d,e,f,g,i,j,k,m,n,o,p,q,r,t,u,w,x,z;for(n=y.scope?""+y.scope+' a[href*="#"]':'a[href*="#"]',d=a(n).filter(function(){var b,c;return b=a(this),c=b.attr("rel"),("null"===c||null==c)&&(c=""),(""+b.attr("href")+c).match(y.anchorPattern)&&b.closest("[class*="+y.footnoteParentClass+"]:not(a):not("+y.anchorParentTagname+")").length<1}),t=[],q=[],k=[],h(d,q),a(q).each(function(){var b,c;return c=a(this).data("footnote-ref").replace(/[:.+~*\]\[]/g,"\\$&"),y.useFootnoteOnlyOnce&&(c=""+c+":not(.footnote-processed)"),b=a(c).closest(y.footnoteTagname),b.length>0?(t.push(b.first().addClass("footnote-processed")),k.push(this)):void 0}),c=a("[data-footnote-identifier]:last"),p=c.length<1?0:+c.data("footnote-identifier"),z=[],u=w=0,x=t.length;x>=0?x>w:w>x;u=x>=0?++w:--w)switch(o=s(a(t[u]).html().trim(),a(k[u]).data("footnote-backlink-ref")),o=o.replace(/"/g,""").replace(/</g,"<sym;").replace(/>/g,">sym;"),p+=1,m="",i=a(k[u]),j=a(t[u]),null!=y.numberResetSelector?(b=i.closest(y.numberResetSelector),b.is(f)?r+=1:r=1,f=b):r=p,0!==o.indexOf("<")&&(o="

"+o+"

"),m=y.buttonMarkup.replace(/\{\{FOOTNOTENUM\}\}/g,r).replace(/\{\{FOOTNOTEID\}\}/g,p).replace(/\{\{FOOTNOTECONTENT\}\}/g,o),m=v(m,"SUP",i),m=v(m,"FN",j),e=a(m).insertBefore(i),g=j.parent(),y.actionOriginalFN.toLowerCase()){case"hide":i.addClass("footnote-print-only"),j.addClass("footnote-print-only"),z.push(l(g));break;case"delete":i.remove(),j.remove(),z.push(l(g));break;default:z.push(i.addClass("footnote-print-only"))}return z},h=function(b,c){var d,e,f,g;null==c&&(c=[]),d=void 0,e=void 0,f=void 0,g=void 0,b.each(function(){var b,e;return e=a(this),f="#"+e.attr("href").split("#")[1],d=e.closest(y.anchorParentTagname),b=e.find(y.anchorParentTagname),d.length>0?(g=(d.attr("id")||"")+(e.attr("id")||""),c.push(d.attr({"data-footnote-backlink-ref":g,"data-footnote-ref":f}))):b.length>0?(g=(b.attr("id")||"")+(e.attr("id")||""),c.push(e.attr({"data-footnote-backlink-ref":g,"data-footnote-ref":f}))):(g=e.attr("id")||"",c.push(e.attr({"data-footnote-backlink-ref":g,"data-footnote-ref":f})))})},l=function(a){var b;return b=void 0,a.is(":empty")||0===a.children(":not(.footnote-print-only)").length?(b=a.parent(),"delete"===y.actionOriginalFN.toLowerCase()?a.remove():a.addClass("footnote-print-only"),l(b)):a.children(":not(.footnote-print-only)").length===a.children("hr:not(.footnote-print-only)").length?(b=a.parent(),"delete"===y.actionOriginalFN.toLowerCase()?a.remove():(a.children("hr").addClass("footnote-print-only"),a.addClass("footnote-print-only")),l(b)):void 0},s=function(a,b){var c;return b.indexOf(" ")>=0&&(b=b.trim().replace(/\s+/g,"|").replace(/(.*)/g,"($1)")),c=new RegExp("(\\s| )*<\\s*a[^#<]*#"+b+"[^>]*>(.*?)<\\s*/\\s*a>","g"),a.replace(c,"").replace("[]","")},v=function(a,b,c){var d,e,f,g;for(e=new RegExp("\\{\\{"+b+":([^\\}]*)\\}\\}","g"),d=void 0,g=void 0,f=void 0,d=e.exec(a);d;)d[1]&&(g=c.attr(d[1])||"",a=a.replace("{{"+b+":"+d[1]+"}}",g)),d=e.exec(a);return a},f=function(b){var c,d,e;if(y.activateOnHover){if(c=a(b.target).closest(".bigfoot-footnote__button"),d='[data-footnote-identifier="'+c.attr("data-footnote-identifier")+'"]',c.hasClass("is-active"))return;c.addClass("is-hover-instantiated"),y.allowMultipleFN||(e=".bigfoot-footnote:not("+d+")",u(e)),j(".bigfoot-footnote__button"+d).addClass("is-hover-instantiated")}},z=function(b){var c,d,e;e=a(b.target),c=e.closest(".bigfoot-footnote__button"),d=e.closest(".bigfoot-footnote"),c.length>0?(b.preventDefault(),i(c)):d.length<1&&a(".bigfoot-footnote").length>0&&u()},i=function(a){var b;a.blur(),b='data-footnote-identifier="'+a.attr("data-footnote-identifier")+'"',a.hasClass("changing")||(a.hasClass("is-active")?y.allowMultipleFN?u(".bigfoot-footnote["+b+"]"):u():(a.addClass("changing"),setTimeout(function(){return a.removeClass("changing")},y.popoverCreateDelay),j(".bigfoot-footnote__button["+b+"]"),a.addClass("is-click-instantiated"),y.allowMultipleFN||u(".bigfoot-footnote:not(["+b+"])")))},j=function(b){var c,d;return c=void 0,c="string"!=typeof b&&y.allowMultipleFN?b:"string"!=typeof b?b.first():y.allowMultipleFN?a(b).closest(".bigfoot-footnote__button"):a(b+":first").closest(".bigfoot-footnote__button"),d=a(),c.each(function(){var b,e,f,h;f=a(this),h=void 0;try{return h=y.contentMarkup.replace(/\{\{FOOTNOTENUM\}\}/g,f.attr("data-footnote-number")).replace(/\{\{FOOTNOTEID\}\}/g,f.attr("data-footnote-identifier")).replace(/\{\{FOOTNOTECONTENT\}\}/g,f.attr("data-bigfoot-footnote")).replace(/\>sym\;/g,">").replace(/\<sym\;/g,"<"),h=v(h,"BUTTON",f)}finally{b=a(h);try{y.activateCallback(b,f)}catch(i){}b.insertAfter(c),q[f.attr("data-footnote-identifier")]="init",b.attr("bigfoot-max-width",g(b.css("max-width"),b)),b.css("max-width",1e4),e=b.find(".bigfoot-footnote__content"),b.attr("data-bigfoot-max-height",g(e.css("max-height"),e)),w(),f.addClass("is-active"),b.find(".bigfoot-footnote__content").bindScrollHandler(),d=d.add(b)}}),setTimeout(function(){return d.addClass("is-active")},y.popoverCreateDelay),d},d=function(){var a,b;return a=document.createElement("div"),a.style.cssText="display:inline-block;padding:0;line-height:1;position:absolute;visibility:hidden;font-size:1em;",a.appendChild(document.createElement("M")),document.body.appendChild(a),b=a.offsetHeight,document.body.removeChild(a),b},g=function(a,b){return"none"===a?a=1e4:a.indexOf("rem")>=0?a=parseFloat(a)*d():a.indexOf("em")>=0?a=parseFloat(a)*parseFloat(b.css("font-size")):a.indexOf("px")>=0?(a=parseFloat(a),60>=a&&(a/=parseFloat(b.parent().css("width")))):a.indexOf("%")>=0&&(a=parseFloat(a)/100),a},a.fn.bindScrollHandler=function(){return y.preventPageScroll?(a(this).on("DOMMouseScroll mousewheel",function(b){var c,d,e,f,g,h,i,j;return d=a(this),i=d.scrollTop(),h=d[0].scrollHeight,f=parseInt(d.css("height")),c=d.closest(".bigfoot-footnote"),d.scrollTop()>0&&d.scrollTop()<10&&c.addClass("is-scrollable"),c.hasClass("is-scrollable")?(e="DOMMouseScroll"===b.type?-40*b.originalEvent.detail:b.originalEvent.wheelDelta,j=e>0,g=function(){return b.stopPropagation(),b.preventDefault(),b.returnValue=!1,!1},!j&&-e>h-f-i?(d.scrollTop(h),c.addClass("is-fully-scrolled"),g()):j&&e>i?(d.scrollTop(0),c.removeClass("is-fully-scrolled"),g()):c.removeClass("is-fully-scrolled")):void 0}),a(this)):a(this)},A=function(b){return y.deleteOnUnhover&&y.activateOnHover?setTimeout(function(){var c;return c=a(b.target).closest(".bigfoot-footnote, .bigfoot-footnote__button"),a(".bigfoot-footnote__button:hover, .bigfoot-footnote:hover").length<1?u():void 0},y.hoverDelay):void 0},m=function(a){return 27===a.keyCode?u():void 0},u=function(b,c){var d,e,f,g;return null==b&&(b=".bigfoot-footnote"),null==c&&(c=y.popoverDeleteDelay),d=a(),g=void 0,e=void 0,f=void 0,a(b).each(function(){return f=a(this),g=f.attr("data-footnote-identifier"),e=a('.bigfoot-footnote__button[data-footnote-identifier="'+g+'"]'),e.hasClass("changing")?void 0:(d=d.add(e),e.removeClass("is-active is-hover-instantiated is-click-instantiated").addClass("changing"),f.removeClass("is-active").addClass("disapearing"),setTimeout(function(){return f.remove(),delete q[g],e.removeClass("changing")},c))}),d},w=function(b){var c;y.positionContent&&(c=b?b.type:"resize",a(".bigfoot-footnote").each(function(){var b,d,e,f,g,h,i,j,k,l,m,n,o,p,s,t;return f=a(this),h=f.attr("data-footnote-identifier"),g='data-footnote-identifier="'+h+'"',d=f.find(".bigfoot-footnote__content"),b=f.siblings(".bigfoot-footnote__button"),s=x(b),j=parseFloat(f.css("margin-top")),k=+f.attr("data-bigfoot-max-height"),t=2*j+f.outerHeight(),l=1e4,o=s.bottomRooms.bottomRoom,i=q[h],o?("top"!==i&&(q[h]="top",f.addClass("is-positioned-top").removeClass("is-positioned-bottom"),f.css("transform-origin",100*s.leftRelative+"% 100%")),l=s.topRoom-j-15):(("bottom"!==i||"init"===i)&&(q[h]="bottom",f.removeClass("is-positioned-top").addClass("is-positioned-bottom"),f.css("transform-origin",100*s.leftRelative+"% 0%")),l=s.bottomRoom-j-15),f.find(".bigfoot-footnote__content").css({"max-height":Math.min(l,k)+"px"}),"resize"===c&&(n=parseFloat(f.attr("bigfoot-max-width")),e=f.find(".bigfoot-footnote__wrapper"),m=n,1>=n&&(p=function(){var b,c;return c=1e4,y.maxWidthRelativeTo&&(b=a(y.maxWidthRelativeTo),b.length>0&&(c=b.outerWidth())),Math.min(window.innerWidth,c)}(),m=p*n),m=Math.min(m,f.find(".bigfoot-footnote__content").outerWidth()+1),e.css("max-width",m+"px"),f.css({left:-s.leftRelative*m+parseFloat(b.css("margin-left"))+b.outerWidth()/2+"px"}),r(f,s.leftRelative)),parseInt(f.outerHeight())0&&c.css("left",""+100*b+"%")},x=function(a){var b,c,d,e,f,g;return c=parseFloat(a.css("margin-left")),d=parseFloat(a.outerWidth())-c,b=parseFloat(a.outerHeight()),g=C(),f=a.offset().top-g.scrollY+b/2,e=a.offset().left-g.scrollX+d/2,{topRoom:f,bottomRoom:g.height-f,leftRoom:e,rightRoom:g.width-e,leftRelative:e/g.width,topRelative:f/g.height}},C=function(){var b;return b=a(window),{width:window.innerWidth,height:window.innerHeight,scrollX:b.scrollLeft(),scrollY:b.scrollTop()}},c=function(a,b,c,d,f){var g,h,i,j,k,l,m;return null==d&&(d=y.popoverDeleteDelay),null==f&&(f=!0),j=void 0,h=void 0,l=void 0,"string"==typeof a?(l="iphone"===a.toLowerCase()?"<320px":"ipad"===a.toLowerCase()?"<768px":a,h=">"===l.charAt(0)?"min":"<"===l.charAt(0)?"max":null,k=h?"("+h+"-width: "+l.substring(1)+")":l,j=window.matchMedia(k)):j=a,j.media&&"invalid"===j.media?{added:!1,mq:j,listener:null}:(m="min"===h,g="max"===h,b=b||p(f,d,m,function(a){return a.addClass("is-bottom-fixed")}),c=c||p(f,d,g,function(){}),i=function(a){a.matches?b(f,e):c(f,e)},j.addListener(i),i(j),y.breakpoints[a]={added:!0,mq:j,listener:i},y.breakpoints[a])},p=function(a,b,c,d){return function(a,e){var f;return f=void 0,a&&(f=e.close(),e.updateSetting("activateCallback",d)),setTimeout(function(){return e.updateSetting("positionContent",c),a?e.activate(f):void 0},b)}},t=function(a,b){var c,d,e,f;if(e=null,c=void 0,f=!1,"string"==typeof a)f=void 0!==y.breakpoints[a];else for(c in y.breakpoints)y.breakpoints.hasOwnProperty(c)&&y.breakpoints[c].mq===a&&(f=!0);return f&&(d=y.breakpoints[c||a],b?b({matches:!1}):d.listener({matches:!1}),d.mq.removeListener(d.listener),delete y.breakpoints[c||a]),f},B=function(a,b){var c,d;if(c=void 0,"string"==typeof a)c=y[a],y[a]=b;else{c={};for(d in a)a.hasOwnProperty(d)&&(c[d]=y[d],y[d]=a[d])}return c},o=function(a){return y[a]},a(document).ready(function(){return n(),a(document).on("mouseenter",".bigfoot-footnote__button",f),a(document).on("touchend click",z),a(document).on("mouseout",".is-hover-instantiated",A),a(document).on("keyup",m),a(window).on("scroll resize",w),a(document).on("gestureend",function(){return w()})}),e={removePopovers:u,close:u,createPopover:j,activate:j,repositionFeet:w,reposition:w,addBreakpoint:c,removeBreakpoint:t,getSetting:o,updateSetting:B}}}(jQuery)}).call(this); \ No newline at end of file From 1ac4e7f7abe2dc9cfec6651c63a7f178dbef049f Mon Sep 17 00:00:00 2001 From: jgenero Date: Fri, 21 Oct 2022 10:48:06 +0200 Subject: [PATCH 2/3] add css links + js script for footnotes --- app/templates/container.html | 11 +++++++++++ app/templates/partials/app_css_links.html | 5 ++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/app/templates/container.html b/app/templates/container.html index 571e9bd..8d9f08a 100644 --- a/app/templates/container.html +++ b/app/templates/container.html @@ -114,6 +114,17 @@ + + + diff --git a/app/templates/partials/app_css_links.html b/app/templates/partials/app_css_links.html index d7c98eb..826f9c2 100644 --- a/app/templates/partials/app_css_links.html +++ b/app/templates/partials/app_css_links.html @@ -7,4 +7,7 @@ - \ No newline at end of file + + + + \ No newline at end of file From 0e4fe763d2e1de2c0e26294ba9d9f80ed4c9c198 Mon Sep 17 00:00:00 2001 From: jgenero Date: Fri, 21 Oct 2022 11:35:08 +0200 Subject: [PATCH 3/3] js footnotes are working --- app/static/xsl/actes_princiers.xsl | 53 ++++++++++++++--------- app/templates/container.html | 8 +++- app/templates/partials/app_css_links.html | 4 +- 3 files changed, 40 insertions(+), 25 deletions(-) diff --git a/app/static/xsl/actes_princiers.xsl b/app/static/xsl/actes_princiers.xsl index 24deebe..ea2e14a 100644 --- a/app/static/xsl/actes_princiers.xsl +++ b/app/static/xsl/actes_princiers.xsl @@ -10,15 +10,18 @@
- -
- -
- +
+ + +
+
    + +
+
@@ -358,7 +361,7 @@ - + @@ -375,14 +378,19 @@ + + fnref: + + - - # + #fn: - - + + footnote + + @@ -438,14 +446,14 @@ - + - + - + . @@ -453,16 +461,21 @@ - + - + fn: - - - . - - + + footnote + + + + + . + + + \ No newline at end of file diff --git a/app/templates/container.html b/app/templates/container.html index 8d9f08a..ca152e7 100644 --- a/app/templates/container.html +++ b/app/templates/container.html @@ -107,6 +107,7 @@ + @@ -114,6 +115,11 @@ + + + - \ No newline at end of file diff --git a/app/templates/partials/app_css_links.html b/app/templates/partials/app_css_links.html index 826f9c2..58a92f4 100644 --- a/app/templates/partials/app_css_links.html +++ b/app/templates/partials/app_css_links.html @@ -1,13 +1,11 @@ - - - \ No newline at end of file + \ No newline at end of file