Merge branch 'footnotes_dev' into 'main'
Footnotes dev See merge request jgenero/actes-princiers!4main
Jean-Damien Genero
3 years ago
commit
dc6d3c1b38
@ -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;
|
||||||
|
}
|
||||||
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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: "<aside class=\"bigfoot-footnote is-positioned-bottom\" data-footnote-number=\"{{FOOTNOTENUM}}\" data-footnote-identifier=\"{{FOOTNOTEID}}\" alt=\"Footnote {{FOOTNOTENUM}}\"> <div class=\"bigfoot-footnote__wrapper\"> <div class=\"bigfoot-footnote__content\"> {{FOOTNOTECONTENT}} </div></div> <div class=\"bigfoot-footnote__tooltip\"></div> </aside>",
|
||||||
|
buttonMarkup: "<div class='bigfoot-footnote__container'> <button class=\"bigfoot-footnote__button\" id=\"{{SUP:data-footnote-backlink-ref}}\" data-footnote-number=\"{{FOOTNOTENUM}}\" data-footnote-identifier=\"{{FOOTNOTEID}}\" alt=\"See Footnote {{FOOTNOTENUM}}\" rel=\"footnote\" data-bigfoot-footnote=\"{{FOOTNOTECONTENT}}\"> <svg class=\"bigfoot-footnote__button__circle\" viewbox=\"0 0 6 6\" preserveAspectRatio=\"xMinYMin\"><circle r=\"3\" cx=\"3\" cy=\"3\" fill=\"white\"></circle></svg> <svg class=\"bigfoot-footnote__button__circle\" viewbox=\"0 0 6 6\" preserveAspectRatio=\"xMinYMin\"><circle r=\"3\" cx=\"3\" cy=\"3\" fill=\"white\"></circle></svg> <svg class=\"bigfoot-footnote__button__circle\" viewbox=\"0 0 6 6\" preserveAspectRatio=\"xMinYMin\"><circle r=\"3\" cx=\"3\" cy=\"3\" fill=\"white\"></circle></svg> </button></div>"
|
||||||
|
};
|
||||||
|
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 = "<p>" + footnoteContent + "</p>";
|
||||||
|
}
|
||||||
|
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);
|
||||||
File diff suppressed because one or more lines are too long
@ -1,10 +1,11 @@
|
|||||||
<!-- Bootstrap core CSS -->
|
<!-- Bootstrap core CSS -->
|
||||||
<link href="{{url_for('static', filename='css/bootstrap/bootstrap.min.css')}}" rel="stylesheet">
|
<link href="{{url_for('static', filename='css/bootstrap/bootstrap.min.css')}}" rel="stylesheet">
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
<!-- Custom styles for this template -->
|
||||||
<link href="{{url_for('static', filename='css/carousel.css')}}" rel="stylesheet">
|
<link href="{{url_for('static', filename='css/carousel.css')}}" rel="stylesheet">
|
||||||
|
|
||||||
|
|
||||||
<!-- Custom styles for Actes princiers project -->
|
<!-- Custom styles for Actes princiers project -->
|
||||||
<link href="{{url_for('static', filename='css/custom_style_main.css')}}" rel="stylesheet">
|
<link href="{{url_for('static', filename='css/custom_style_main.css')}}" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom styles for footnotes -->
|
||||||
|
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/footnotes_css/bigfoot-default.css')}}">
|
||||||
Loading…
Reference in New Issue