diff options
| author | Chen Fangzhou <fangzhou.chen@zxthealth.com> | 2018-09-11 08:33:45 +0300 |
|---|---|---|
| committer | Chen Fangzhou <fangzhou.chen@zxthealth.com> | 2018-09-11 08:33:45 +0300 |
| commit | cb62d515608d049baedb84bb053424c5e34d6bfa (patch) | |
| tree | 6d328a537437a4caff25a5ba794d3e723a69bdc2 | |
Initial commit
47 files changed, 6945 insertions, 0 deletions
@@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright (c) 2018 YOUR_NAME_HERE + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..1a6ed2d --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +This is a port of the [Arabica theme for Ghost](https://github.com/slunsford/arabica) to Hugo. diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..ac36e06 --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,2 @@ ++++ ++++ diff --git a/layouts/404.html b/layouts/404.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/layouts/404.html diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..59f848f --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + {{ partial "head.html" . }} + <body class="{{ block "body_class" . }}{{end}}"> + {{ partial "header.html" . }} + {{ block "main" . }}{{ end }} + {{ partial "footer.html" . }} + </body> +</html> diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..bb2aa80 --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,20 @@ +{{ define "body_class" }}tag-template{{ end }} +{{ define "title" }}{{ .Title }}{{ end }} +{{ define "main" }} +{{ $paginator := .Paginate (where .Data.Pages.ByDate.Reverse "Type" "post") (index .Site.Params "archive-paginate" | default 10) }} +<main class="content" role="main"> + {{ if not $paginator.HasPrev }} + {{ if eq .Data.Plural "tags" }} + <h2 class="tag-title">{{ .Title }}</h2> + {{ end }} + {{ end }} + + <div class="extra-pagination"> + {{ partial "pagination.html" .}} + </div> + {{ range $paginator.Pages }} + {{ .Render "summary" }} + {{ end }} + {{ partial "pagination.html" . }} +</main> +{{ end }}
\ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..aebacd4 --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,13 @@ +{{ define "body_class" }}page-template{{ end }} +{{ define "main" }} +<main class="content" role="main"> + <article class="post page"> + <header class="post-header"> + <h2 class="post-title">{{ .Title }}</h2> + </header> + <section class="post-content"> + {{ .Content }} + </section> + </article> +</main> +{{ end }}
\ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..eeeb08c --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,12 @@ +{{ define "main" }} + <main class="content" role="main"> + {{ $paginator := .Paginate (where .Pages "Type" "post") }} + <div class="extra-pagination"> + {{ partial "pagination.html" . }} + </div> + {{ range $paginator.Pages }} + {{ .Render "summary" }} + {{ end }} + {{ partial "pagination.html" . }} + </main> +{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html new file mode 100644 index 0000000..30618da --- /dev/null +++ b/layouts/partials/footer.html @@ -0,0 +1,11 @@ +<footer class="site-footer"> + <section class="rss"><a class="subscribe-button icon-feed" href="/index.xml"></a></section> + {{ with .Site.Params.twitter }}<section class="twitter"><a class="icon-twitter" href="https://twitter.com/{{ . }}"> {{ . }}</a></section>{{ end }} + {{ with .Site.Params.facebook }}<section class="facebook"><a class="icon-facebook" href="https://www.facebook.com/{{ . }}"> {{ . }}</a></section>{{ end }} + <section class="copyright">© {{ now.Format "2006" }} {{ .Site.Title }}</section> + <section class="poweredby"><a href="http://thedarkroast.com/arabica">Arabica</a> theme by Sean Lunsford. Published with <a href="https://gohugo.io">Hugo</a>.</section> +</footer> +<!-- custom js --> +{{ range .Site.Params.customJS }} + <script src="{{ "/js/" | relURL }}{{ . }}"></script> +{{ end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html new file mode 100644 index 0000000..d4424f8 --- /dev/null +++ b/layouts/partials/head.html @@ -0,0 +1,39 @@ +<head> + <meta charset="utf-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + + <!-- Page Meta --> + <title> + {{ block "title" . }} + {{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} - {{ .Site.Title }}{{ end }} + {{ end }} + </title> + + <meta name="HandheldFriendly" content="True" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + {{ if .RSSLink -}} + <link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" /> + {{ end -}} + + <!-- Styles and Fonts --> + <link rel="stylesheet" type="text/css" href="{{ "assets/css/normalize.css" | relURL }}" /> + <link rel="stylesheet" type="text/css" href="{{ "assets/css/icons.css" | relURL }}" /> + <link rel="stylesheet" type="text/css" href="{{ "assets/css/screen.css" | relURL }}" /> + {{ if .Site.Params.replaceGoogleFonts }} + <link href="https://{{ .Site.Params.replaceGoogleFonts }}/css?family=Bree+Serif|Lato:100,100i,300,300i,400,400i,700,700i|Source+Code+Pro:300,400,500,700" rel="stylesheet"> + {{ else }} + <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Lato:100,100i,300,300i,400,400i,700,700i|Source+Code+Pro:300,400,500,700" rel="stylesheet"> + {{ end }} + + <!-- Bigfoot - popover footnotes --> + <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> + <script type="text/javascript" src="{{ "assets/bigfoot/dist/bigfoot.js" | relURL }}"></script> + <link rel="stylesheet" type="text/css" href="{{ "assets/bigfoot/dist/bigfoot-number.css" | relURL }}" /> + <script type="text/javascript"> + $.bigfoot(); + </script> + <!-- custom css --> + {{ range .Site.Params.customCSS }} + <link rel="stylesheet" href="{{ "/css/" | relURL }}{{ . }}"> + {{ end }} +</head> diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..a5a6c85 --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,20 @@ +<header class="main-header"> + <div class="main-header-content"> + <h1 class="blog-title"> + <a href="{{ "/" | relLangURL }}"> + {{ if .Site.Params.logoTitle }} + {{ .Site.Params.logoTitle | safeHTML }} + {{ else }} + {{ .Site.Title }} + {{ end }} + </a> + </h1> + <h2 class="blog-description">{{ .Site.Params.description }}</h2> + </div> + + <div class="nav"> + {{ range .Site.Menus.main }} + <a class="nav-" role="presentation" href="{{ .URL | absLangURL | safeURL }}">{{ .Name }}</a> + {{ end }} + </div> +</header> diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html new file mode 100644 index 0000000..ff62a01 --- /dev/null +++ b/layouts/partials/pagination.html @@ -0,0 +1,11 @@ +{{ $pag := $.Paginator }} + +<nav class="pagination" role="navigation"> + {{ if $pag.HasPrev }} + <a class="newer-posts" href="{{ $pag.Prev.URL }}">← Newer Posts</a> + {{ end }} + <span class="page-number">Page {{ $pag.PageNumber }} of {{ $pag.TotalPages }}</span> + {{ if $pag.HasNext }} + <a class="older-posts" href="{{ $pag.Next.URL }}">Older Posts →</a> + {{ end }} +</nav> diff --git a/layouts/post/single.html b/layouts/post/single.html new file mode 100644 index 0000000..5e70a0a --- /dev/null +++ b/layouts/post/single.html @@ -0,0 +1,29 @@ +{{ define "body_class" }}post-template{{ end }} +{{ define "main" }} +<main class="content" role="main"> + <article class="post"> + <header class="post-header"> + <h2 class="post-title">{{ .Title }}</h2> + <section class="post-meta"> + <time class="post-date">{{ .Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }}</time> + </section> + </header> + <section class="post-content"> + {{ .Content }} + </section> + <footer class="post-footer"> + {{ with .Params.tags -}} + <section class="tags post-meta"> + Tagged + {{ range . }} + {{- $name := . -}} + {{- with $.Site.GetPage "taxonomy" (printf "tags/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "tags/%s" ($name | urlize))) -}} + <a href="{{ .Permalink }}">{{ $name }}</a> + {{ end -}} + {{ end }} + </section> + {{- end }} + </footer> + </article> +</main> +{{ end }}
\ No newline at end of file diff --git a/layouts/post/summary.html b/layouts/post/summary.html new file mode 100644 index 0000000..2fc0ba2 --- /dev/null +++ b/layouts/post/summary.html @@ -0,0 +1,13 @@ +<article class="post"> + <header class="post-header"> + <h2 class="post-title"><a href="{{ .URL }}">{{ .Title }}</a></h2> + </header> + <section class="post-excerpt"> + <p> + {{ .Summary }} … <a class="read-more" href="{{ .URL }}">»</a> + </p> + </section> + <footer class="post-meta"> + <time class="post-date">{{ .Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }}</time> + </footer> +</article> diff --git a/static/assets/bigfoot/Gruntfile.coffee b/static/assets/bigfoot/Gruntfile.coffee new file mode 100644 index 0000000..821c8a8 --- /dev/null +++ b/static/assets/bigfoot/Gruntfile.coffee @@ -0,0 +1,109 @@ +module.exports = (grunt) -> + baseStyles = [ + 'src/scss/foundation/bigfoot-variables.scss' + 'src/scss/foundation/bigfoot-mixins.scss' + 'src/scss/base/bigfoot-button.scss' + 'src/scss/base/bigfoot-popover.scss' + ] + variants = [ + 'bottom' + 'number' + ] + + concatSet = + options: + stripBanners: true + banner: "// <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today('yyyy.mm.dd') %>\n\n\n" + separator: "\n\n\n// -----\n\n\n" + + main: + src: baseStyles + dest: 'dist/bigfoot-default.scss' + + sassSet = 'dist/bigfoot-default.css': 'dist/bigfoot-default.scss' + autoprefixSet = 'dist/bigfoot-default.css': 'dist/bigfoot-default.css' + + variants.forEach (variant) -> + css = "dist/bigfoot-#{variant}.css" + scss = css.replace('.css', '.scss') + src = scss.replace('dist/', 'src/scss/variants/') + conc = baseStyles.slice(0) + conc.push src + concatSet[variant] = + src: conc + dest: scss + + sassSet[css] = scss + autoprefixSet[css] = css + + + # 1. CONFIG + grunt.initConfig + pkg: grunt.file.readJSON('package.json') + + uglify: + build: + src: 'dist/bigfoot.js' + dest: 'dist/bigfoot.min.js' + + concat: concatSet + + coffee: + dist: + src: 'src/coffee/bigfoot.coffee' + dest: 'dist/bigfoot.js' + + sass: + dist: + options: + style: 'expanded' + + files: sassSet + + autoprefixer: + dist: + files: autoprefixSet + + watch: + options: + livereload: false + + coffee: + files: ['src/coffee/bigfoot.coffee'] + tasks: ['coffee', 'uglify'] + options: + spawn: false + + scss: + files: ['src/**/*.scss'] + tasks: [ + 'concat' + 'sass' + 'autoprefixer' + ] + options: + spawn: false + + + # 2. TASKS + require('load-grunt-tasks') grunt + + # 3. PERFORM + grunt.registerTask 'default', [ + 'coffee' + 'uglify' + 'concat' + 'sass' + 'autoprefixer' + ] + + grunt.registerTask 'styles', [ + 'concat' + 'sass' + 'autoprefixer' + ] + + grunt.registerTask 'scripts', [ + 'coffee' + 'uglify' + ] diff --git a/static/assets/bigfoot/LICENSE.md b/static/assets/bigfoot/LICENSE.md new file mode 100644 index 0000000..2af7574 --- /dev/null +++ b/static/assets/bigfoot/LICENSE.md @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2013-2014 Chris Sauve + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE.
\ No newline at end of file diff --git a/static/assets/bigfoot/README.md b/static/assets/bigfoot/README.md new file mode 100644 index 0000000..4887b55 --- /dev/null +++ b/static/assets/bigfoot/README.md @@ -0,0 +1,21 @@ +# bigfoot.js + +by [Chris Sauve](http://cmsauve.com/projects) + +Bigfoot is a jQuery plugin that creates exceptional footnotes. Simply include the code on your pages and footnotes will be detected automatically and improved in the following ways: + +- Links to footnotes will be replaced with clickable/ tappable buttons, making them substantially easier to hit. + +- Footnote content will appear in a popover directly beside the footnote button when it is clicked/ tapped, which cuts out the annoying bouncing around the page that footnotes typically result in. + +- The active popovers will be resized and repositioned to ensure that they continue to be completely visible on-screen and aesthetically pleasing: this makes it perfect for mobile devices and responsive designs. + +This project includes both the script itself and a default style to apply to the footnote button/ content that are eventually generated. There are also a variety of additional styles that illustrate some of the possibilities for styling these components. + +The script has many configurable options from having popovers instantiated on hover, to allowing multiple active footnotes, to setting specific timeouts for popover creation/ deletion. It also returns an object that allows you to activate, remove, add breakpoints, and reposition popovers properly. All of these options and return functions are shown in detail at the script's [project page](http://www.bigfootjs.com/). You can also see a [demo of the project in action](http://www.bigfootjs.com/#demo) on the same page. + +Requires jQuery 1.7+ at a minimum (for `.on()`) and jQuery 1.8+ for full functionality (1.8 automatically prefixes the `transform`/ `transition` properties). + +*Note:* Bigfoot is currently incompatible with jQuery 3.0+ (see [#54](https://github.com/lemonmade/bigfoot/issues/54)) + +Questions? Issues? Feature requests? Check out the [Github page](https://github.com/lemonmade/bigfoot) for this project. diff --git a/static/assets/bigfoot/bower.json b/static/assets/bigfoot/bower.json new file mode 100644 index 0000000..c1059c5 --- /dev/null +++ b/static/assets/bigfoot/bower.json @@ -0,0 +1,34 @@ +{ + "name": "bigfoot", + "main": "src/coffee/bigfoot.coffee", + "version": "2.1.4", + "homepage": "http://www.bigfootjs.com", + "authors": [ + "Chris Sauve <chris@pxldot.com>" + ], + "description": "A jQuery plugin for creating exceptional HTML footnotes.", + "keywords": [ + "jquery", + "plugin", + "footnotes", + "footnote", + "bigfoot", + "popover" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests", + "links", + "utils", + "Gruntfile.js", + "readme-dev.md", + "package.json" + ], + "dependencies": { + "jquery": ">= 1.8.0" + } +} diff --git a/static/assets/bigfoot/changelog.md b/static/assets/bigfoot/changelog.md new file mode 100644 index 0000000..3267eeb --- /dev/null +++ b/static/assets/bigfoot/changelog.md @@ -0,0 +1,37 @@ +# 2.0.0 +- Removed the `positionNextToBlock` option that allowed you to set where the popover would be appended to. Since the popovers now use absolute positioning, the popover element will always be appended to the `.footnote-container` element that also holds the button. Removed `appendPopoversTo` property for the same reasons. +- Added the `maxWidthRelativeTo` option. Because the popovers now use absolute positioning relative to the container of the footnote button, `max-width` declarations with percentages will not yield the result they used to (when popovers could be appended to any element). By default, max-width declarations in set in percentages will be sized by the script relative to the viewport. If you specify an element or selector for `maxWidthRelativeTo`, that element's width will instead be used to size the popover (unless the viewport is smaller than the specified element, in which case the viewport will still be used to prevent any part of the footnote from going off-screen). For example, if you specify `.main-content` for the `maxWidthRelativeTo` property, the script will measure this element's width, take the smaller of it and the viewport's width (`window.innerWidth`), and multiply the percentage value from your CSS times the result to calculate the max-width of the popover. A bit convoluted, but necessary to allow for better performance and to prevent issues where fixed positioning can't be used (i.e., zoomed in on mobile browsers). +- Updated popover styles to support the new positioning/ sizing algorythm. + +# 2.0.1 +- Fixed an issue where only the first escaped tag would be rendered properly. + +# 2.0.2 +- Fixed an issue where text-indent would cause popover elements to be misalligned. + +# 2.0.3 +- Added a second argument (`$button`) to the `activateCallback` setting to allow users to access the footnote button (most notably, the footnote's `data` attributes) in their callbacks. + +# 2.0.4 +- Fixed line height issues on the standard themes. + +# 2.1.0 +- Rewrote the script with Coffeescript and cleaned up a lot of cruft that had formed. +- Rewrote the markup for footnotes and popovers with a BEM-style syntax. +- Major re-work of the framework for creating styles, hopefully leading to more maintainable stylesheets in the future. +- Got rid of the more theme-ey footnote/ markup files in exchage for the three basics: ellipse button/ tooltip popover, number button/ tooltip popover, and ellipse button/ bottom-fixed popover. + +# 2.1.1 +- Added new options. `anchorPattern`, `anchorParentTagname`, `footnoteTagname` and `footnoteParentClass` allow Bigfoot to work with a wider range of potential HTML structures (thanks to [brunob](https://github.com/brunob) for the original implementation). +- Did some minor style changes to help me to maintain the code better. + +# 2.1.2 +- Fixed a bug with scroll calculation in IE 11 (thanks [Dave](https://github.com/lemonmade/bigfoot/issues/36)!) +- Made the button variables `!default` so that they are more easy to customize (thanks again, [Dave](https://github.com/lemonmade/bigfoot/issues/35)!) +- Added the `dist` folder back — I want people to be able to grab them if needed, and they need to be in for Bower. + +# 2.1.3 +- Removed escaped double quotes from double quoted strings to help minifiers not freak out. + +# 2.1.4 +- Adds a substitution for single quotes in original footnote contents. diff --git a/static/assets/bigfoot/dist/bigfoot-bottom.css b/static/assets/bigfoot/dist/bigfoot-bottom.css new file mode 100644 index 0000000..964e468 --- /dev/null +++ b/static/assets/bigfoot/dist/bigfoot-bottom.css @@ -0,0 +1,337 @@ +.bigfoot-footnote__button { + position: relative; + z-index: 5; + top: -0.1em; + -webkit-box-sizing: border-box; + 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; + -ms-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; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + max-width: 90%; + margin: 1.96924em 0; + background: #fafafa; + opacity: 0; + border-radius: 0.5em; + border: 1px solid #c3c3c3; + -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); + 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); + -ms-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); + -ms-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="); + -webkit-background-size: cover; + 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-gradient(linear, left top, left bottom, from(#fafafa), to(rgba(250, 250, 250, 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-gradient(linear, left bottom, left top, from(#fafafa), to(rgba(250, 250, 250, 0))); + 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; + -webkit-box-sizing: inherit; + -moz-box-sizing: inherit; + 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; + -webkit-box-sizing: inherit; + -moz-box-sizing: inherit; + 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; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + 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; + -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); + 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; +} + +.bigfoot-footnote { + 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-active { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); +} + +.bigfoot-footnote__wrapper { + margin: 0 0 0 50%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + max-width: 100%; +} + +.bigfoot-footnote__wrapper, +.bigfoot-footnote__content { + border-radius: 0; +} + +.bigfoot-footnote__tooltip { + display: none; +} + +/*# sourceMappingURL=bigfoot-bottom.css.map */
\ No newline at end of file diff --git a/static/assets/bigfoot/dist/bigfoot-bottom.css.map b/static/assets/bigfoot/dist/bigfoot-bottom.css.map new file mode 100644 index 0000000..c744d41 --- /dev/null +++ b/static/assets/bigfoot/dist/bigfoot-bottom.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["bigfoot-bottom.scss"], +"names": [], +"file": "bigfoot-bottom.css" +} diff --git a/static/assets/bigfoot/dist/bigfoot-bottom.scss b/static/assets/bigfoot/dist/bigfoot-bottom.scss new file mode 100644 index 0000000..987d7f4 --- /dev/null +++ b/static/assets/bigfoot/dist/bigfoot-bottom.scss @@ -0,0 +1,687 @@ +// bigfoot - v2.1.4 - 2016.02.11 + + +// ___ ___ ___ ___ ___ ___ +// / /\ / /\ / /\ / /\ ___ / /\ / /\ +// / /::\ / /::\ / /::\ / /::\ /__/\ / /:/_ / /::\ +// / /:/\:\ / /:/\:\ / /:/\:\ / /:/\:\ \ \:\ / /:/ /\ / /:/\:\ +// / /:/~/:// /:/ \:\ / /:/~/:// /:/ \:\ \ \:\ / /:/ /:/_ / /:/~/:/ +// /__/:/ /://__/:/ \__\:\/__/:/ /://__/:/ \__\:\ ___ \__\:\/__/:/ /:/ /\/__/:/ /:/___ +// \ \:\/:/ \ \:\ / /:/\ \:\/:/ \ \:\ / /://__/\ | |:|\ \:\/:/ /:/\ \:\/:::::/ +// \ \::/ \ \:\ /:/ \ \::/ \ \:\ /:/ \ \:\| |:| \ \::/ /:/ \ \::/~~~~ +// \ \:\ \ \:\/:/ \ \:\ \ \:\/:/ \ \:\__|:| \ \:\/:/ \ \:\ +// \ \:\ \ \::/ \ \:\ \ \::/ \__\::::/ \ \::/ \ \:\ +// \__\/ \__\/ \__\/ \__\/ ~~~~ \__\/ \__\/ +// +// 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); + } +} + + + +// ----- + + +// ___ ___ ___ +// _____ / /\ ___ ___ / /\ /__/\ +// / /::\ / /::\ / /\ / /\ / /::\ | |::\ +// / /:/\:\ / /:/\:\ / /:/ / /:/ / /:/\:\ | |:|:\ +// / /:/~/::\ / /:/ \:\ / /:/ / /:/ / /:/ \:\ __|__|:|\:\ +// /__/:/ /:/\:|/__/:/ \__\:\ / /::\ / /::\ /__/:/ \__\:\/__/::::| \:\ +// \ \:\/:/~/:/\ \:\ / /://__/:/\:\ /__/:/\:\\ \:\ / /:/\ \:\~~\__\/ +// \ \::/ /:/ \ \:\ /:/ \__\/ \:\\__\/ \:\\ \:\ /:/ \ \:\ +// \ \:\/:/ \ \:\/:/ \ \:\ \ \:\\ \:\/:/ \ \:\ +// \ \::/ \ \::/ \__\/ \__\/ \ \::/ \ \:\ +// \__\/ \__\/ \__\/ \__\/ + + + +//* +// A footnote popover that, unlike the default, is not positioned relative to +// the button, but instead is positioned at the bottom of the page. This popover +// transitions with a simple slide in from the bottom. + +// This style requires that the `positionContent` option of bigfoot is set to false. + +// @since 2.1.0 +// @author Chris Sauve + +.bigfoot-footnote { + // 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; +} diff --git a/static/assets/bigfoot/dist/bigfoot-default.css b/static/assets/bigfoot/dist/bigfoot-default.css new file mode 100644 index 0000000..544498a --- /dev/null +++ b/static/assets/bigfoot/dist/bigfoot-default.css @@ -0,0 +1,296 @@ +.bigfoot-footnote__button { + position: relative; + z-index: 5; + top: -0.1em; + -webkit-box-sizing: border-box; + 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; + -ms-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; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + max-width: 90%; + margin: 1.96924em 0; + background: #fafafa; + opacity: 0; + border-radius: 0.5em; + border: 1px solid #c3c3c3; + -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); + 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); + -ms-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); + -ms-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="); + -webkit-background-size: cover; + 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-gradient(linear, left top, left bottom, from(#fafafa), to(rgba(250, 250, 250, 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-gradient(linear, left bottom, left top, from(#fafafa), to(rgba(250, 250, 250, 0))); + 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; + -webkit-box-sizing: inherit; + -moz-box-sizing: inherit; + 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; + -webkit-box-sizing: inherit; + -moz-box-sizing: inherit; + 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; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + 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; + -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); + 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; +} + +/*# sourceMappingURL=bigfoot-default.css.map */
\ No newline at end of file diff --git a/static/assets/bigfoot/dist/bigfoot-default.css.map b/static/assets/bigfoot/dist/bigfoot-default.css.map new file mode 100644 index 0000000..9057742 --- /dev/null +++ b/static/assets/bigfoot/dist/bigfoot-default.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["bigfoot-default.scss"], +"names": [], +"file": "bigfoot-default.css" +} diff --git a/static/assets/bigfoot/dist/bigfoot-default.scss b/static/assets/bigfoot/dist/bigfoot-default.scss new file mode 100644 index 0000000..5e9132a --- /dev/null +++ b/static/assets/bigfoot/dist/bigfoot-default.scss @@ -0,0 +1,619 @@ +// bigfoot - v2.1.4 - 2016.02.11 + + +// ___ ___ ___ ___ ___ ___ +// / /\ / /\ / /\ / /\ ___ / /\ / /\ +// / /::\ / /::\ / /::\ / /::\ /__/\ / /:/_ / /::\ +// / /:/\:\ / /:/\:\ / /:/\:\ / /:/\:\ \ \:\ / /:/ /\ / /:/\:\ +// / /:/~/:// /:/ \:\ / /:/~/:// /:/ \:\ \ \:\ / /:/ /:/_ / /:/~/:/ +// /__/:/ /://__/:/ \__\:\/__/:/ /://__/:/ \__\:\ ___ \__\:\/__/:/ /:/ /\/__/:/ /:/___ +// \ \:\/:/ \ \:\ / /:/\ \:\/:/ \ \:\ / /://__/\ | |:|\ \:\/:/ /:/\ \:\/:::::/ +// \ \::/ \ \:\ /:/ \ \::/ \ \:\ /:/ \ \:\| |:| \ \::/ /:/ \ \::/~~~~ +// \ \:\ \ \:\/:/ \ \:\ \ \:\/:/ \ \:\__|:| \ \:\/:/ \ \:\ +// \ \:\ \ \::/ \ \:\ \ \::/ \__\::::/ \ \::/ \ \:\ +// \__\/ \__\/ \__\/ \__\/ ~~~~ \__\/ \__\/ +// +// 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/static/assets/bigfoot/dist/bigfoot-number.css b/static/assets/bigfoot/dist/bigfoot-number.css new file mode 100644 index 0000000..6bfc2a1 --- /dev/null +++ b/static/assets/bigfoot/dist/bigfoot-number.css @@ -0,0 +1,328 @@ +.bigfoot-footnote__button { + position: relative; + z-index: 5; + top: -0.1em; + -webkit-box-sizing: border-box; + 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; + -ms-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; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + max-width: 90%; + margin: 1.96924em 0; + background: #fafafa; + opacity: 0; + border-radius: 0.5em; + border: 1px solid #c3c3c3; + -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); + 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); + -ms-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); + -ms-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="); + -webkit-background-size: cover; + 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-gradient(linear, left top, left bottom, from(#fafafa), to(rgba(250, 250, 250, 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-gradient(linear, left bottom, left top, from(#fafafa), to(rgba(250, 250, 250, 0))); + 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; + -webkit-box-sizing: inherit; + -moz-box-sizing: inherit; + 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; + -webkit-box-sizing: inherit; + -moz-box-sizing: inherit; + 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; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + 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; + -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); + 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; +} + +.bigfoot-footnote__button { + position: relative; + height: 0.95em; + width: 1.5em; + border-radius: 0.475em; +} + +.bigfoot-footnote__button:after { + content: attr(data-footnote-number); + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + display: block; + font-size: 0.57em; + font-weight: bold; + color: rgba(110, 110, 110, 0.5); + -webkit-transition: color 0.25s ease; + transition: color 0.25s ease; +} + +.bigfoot-footnote__button:hover:after, +.bigfoot-footnote__button.is-active:after { + color: white; +} + +.bigfoot-footnote__button__circle { + display: none; +} + +/*# sourceMappingURL=bigfoot-number.css.map */
\ No newline at end of file diff --git a/static/assets/bigfoot/dist/bigfoot-number.css.map b/static/assets/bigfoot/dist/bigfoot-number.css.map new file mode 100644 index 0000000..c161d63 --- /dev/null +++ b/static/assets/bigfoot/dist/bigfoot-number.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["bigfoot-number.scss"], +"names": [], +"file": "bigfoot-number.css" +} diff --git a/static/assets/bigfoot/dist/bigfoot-number.scss b/static/assets/bigfoot/dist/bigfoot-number.scss new file mode 100644 index 0000000..81833ab --- /dev/null +++ b/static/assets/bigfoot/dist/bigfoot-number.scss @@ -0,0 +1,685 @@ +// bigfoot - v2.1.4 - 2016.02.11 + + +// ___ ___ ___ ___ ___ ___ +// / /\ / /\ / /\ / /\ ___ / /\ / /\ +// / /::\ / /::\ / /::\ / /::\ /__/\ / /:/_ / /::\ +// / /:/\:\ / /:/\:\ / /:/\:\ / /:/\:\ \ \:\ / /:/ /\ / /:/\:\ +// / /:/~/:// /:/ \:\ / /:/~/:// /:/ \:\ \ \:\ / /:/ /:/_ / /:/~/:/ +// /__/:/ /://__/:/ \__\:\/__/:/ /://__/:/ \__\:\ ___ \__\:\/__/:/ /:/ /\/__/:/ /:/___ +// \ \:\/:/ \ \:\ / /:/\ \:\/:/ \ \:\ / /://__/\ | |:|\ \:\/:/ /:/\ \:\/:::::/ +// \ \::/ \ \:\ /:/ \ \::/ \ \:\ /:/ \ \:\| |:| \ \::/ /:/ \ \::/~~~~ +// \ \:\ \ \:\/:/ \ \:\ \ \:\/:/ \ \:\__|:| \ \:\/:/ \ \:\ +// \ \:\ \ \::/ \ \:\ \ \::/ \__\::::/ \ \::/ \ \:\ +// \__\/ \__\/ \__\/ \__\/ ~~~~ \__\/ \__\/ +// +// 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); + } +} + + + +// ----- + + +// ___ ___ ___ ___ ___ +// /__/\ /__/\ /__/\ _____ / /\ / /\ +// \ \:\ \ \:\ | |::\ / /::\ / /:/_ / /::\ +// \ \:\ \ \:\ | |:|:\ / /:/\:\ / /:/ /\ / /:/\:\ +// _____\__\:\ ___ \ \:\ __|__|:|\:\ / /:/~/::\ / /:/ /:/_ / /:/~/:/ +// /__/::::::::\/__/\ \__\:\/__/::::| \:\/__/:/ /:/\:|/__/:/ /:/ /\/__/:/ /:/___ +// \ \:\~~\~~\/\ \:\ / /:/\ \:\~~\__\/\ \:\/:/~/:/\ \:\/:/ /:/\ \:\/:::::/ +// \ \:\ ~~~ \ \:\ /:/ \ \:\ \ \::/ /:/ \ \::/ /:/ \ \::/~~~~ +// \ \:\ \ \:\/:/ \ \:\ \ \:\/:/ \ \:\/:/ \ \:\ +// \ \:\ \ \::/ \ \:\ \ \::/ \ \::/ \ \:\ +// \__\/ \__\/ \__\/ \__\/ \__\/ \__\/ + + + +//* +// A button that has no ellipse, but instead shows the footnote's number on the +// page. Note that the number will be reset to 1 depending on the selector passed +// to bigfoot's `numberResetSelector` option. + +// @since 2.1.0 +// @author Chris Sauve + +.bigfoot-footnote__button { + position: relative; + height: $button-height; + width: 1.5em; + border-radius: $button-height/2; + + &:after { + // CONTENT + content: attr(data-footnote-number); + + // POSITION + position: absolute; + top: 50%; left: 50%; + transform: translate(-50%, -50%); + + // DISPLAY AND SIZING + display: block; + + // TEXT + font-size: $button-height*0.6; + font-weight: bold; + color: rgba($button-color, 0.5); + + // TRANSITIONS + transition: color $popover-transition-default-duration $popover-transition-default-timing-function; + } + + &:hover, + &.is-active { + &:after { + color: white; + } + } +} + +.bigfoot-footnote__button__circle { + display: none; +} diff --git a/static/assets/bigfoot/dist/bigfoot.js b/static/assets/bigfoot/dist/bigfoot.js new file mode 100644 index 0000000..68f7b88 --- /dev/null +++ b/static/assets/bigfoot/dist/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: "<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;").replace(/'/g, "'"); + 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); diff --git a/static/assets/bigfoot/dist/bigfoot.min.js b/static/assets/bigfoot/dist/bigfoot.min.js new file mode 100644 index 0000000..a6763a1 --- /dev/null +++ b/static/assets/bigfoot/dist/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:"<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>"},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;").replace(/'/g,"'"),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="<p>"+o+"</p>"),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.bottomRoom<t&&s.topRoom>s.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())<f.find(".bigfoot-footnote__content")[0].scrollHeight?f.addClass("is-scrollable"):void 0}))},r=function(a,b){var c;null==b&&(b=.5),c=a.find(".bigfoot-footnote__tooltip"),c.length>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 diff --git a/static/assets/bigfoot/package.json b/static/assets/bigfoot/package.json new file mode 100644 index 0000000..2528da9 --- /dev/null +++ b/static/assets/bigfoot/package.json @@ -0,0 +1,24 @@ +{ + "name": "bigfoot", + "version": "2.1.4", + "main": "src/bigfoot.coffee", + "description": "A jQuery plugin for empowering HTML footnotes.", + "homepage": "http://www.bigfootjs.com", + "devDependencies": { + "grunt": "~0.4.1", + "grunt-autoprefixer": "~0.5.0", + "grunt-contrib-coffee": "^0.10.1", + "grunt-contrib-concat": "~0.3.0", + "grunt-contrib-sass": "~0.8.0", + "grunt-contrib-uglify": "~0.2.7", + "grunt-contrib-watch": "~0.5.3", + "load-grunt-tasks": "~0.2.1" + }, + "repository": { + "type": "git", + "url": "https://github.com/pxldot/bigfoot.git" + }, + "bugs": { + "url": "https://github.com/pxldot/bigfoot/issues" + } +} diff --git a/static/assets/bigfoot/readme-dev.md b/static/assets/bigfoot/readme-dev.md new file mode 100644 index 0000000..7975ea2 --- /dev/null +++ b/static/assets/bigfoot/readme-dev.md @@ -0,0 +1 @@ +Updates to existing styles should be made in `src/scss/button.scss` and `src/scss/popover.scss`. New styles should be created as BEM-style variants on the existing button and popover styles. You will also have to update rules in `Gruntfile.js` in order to create the required `dist` files. diff --git a/static/assets/bigfoot/src/coffee/bigfoot.coffee b/static/assets/bigfoot/src/coffee/bigfoot.coffee new file mode 100644 index 0000000..ea15240 --- /dev/null +++ b/static/assets/bigfoot/src/coffee/bigfoot.coffee @@ -0,0 +1,1423 @@ +# ___ ___ ___ ___ +# _____ ___ / /\ / /\ / /\ / /\ ___ +# / /::\ / /\ / /:/_ / /:/_ / /::\ / /::\ / /\ +# / /:/\:\ / /:/ / /:/ /\ / /:/ /\/ /:/\:\ / /:/\:\ / /:/ +# / /:/~/::\/__/::\ / /:/_/::\ / /:/ /:/ /:/ \:\ / /:/ \:\ / /:/ +# /__/:/ /:/\:\__\/\:\__/__/:/__\/\:\/__/:/ /:/__/:/ \__\:\/__/:/ \__\:\/ /::\ +# \ \:\/:/~/:/ \ \:\/\ \:\ /~~/:/\ \:\/:/\ \:\ / /:/\ \:\ / /:/__/:/\:\ +# \ \::/ /:/ \__\::/\ \:\ /:/ \ \::/ \ \:\ /:/ \ \:\ /:/\__\/ \:\ +# \ \:\/:/ /__/:/ \ \:\/:/ \ \:\ \ \:\/:/ \ \:\/:/ \ \:\ +# \ \::/ \__\/ \ \::/ \ \:\ \ \::/ \ \::/ \__\/ +# \__\/ \__\/ \__\/ \__\/ \__\/ + +(($) -> + $.bigfoot = (options) -> + bigfoot = undefined + + defaults = + #* + # Determines what action will be taken on the original footnote markup: `"hide"` (using `display: none;`), `"delete"`, or `"ignore"` (leaves the original content in place). This action will also be taken on any elements containing the footnote if they are now empty. + # + # @access public + # @author Chris Sauve + # @since 0.0.1 + # @returns {String} + # @default "hide" + actionOriginalFN : "hide" + + #* + # Specifies a function to call on a footnote popover that is being instantiated (before it is added to the DOM). The function will be passed two arguments: `$popover`, which is a jQuery object containing the new popover element, and `$button`, the button that was cblicked to instantiate the popover. This option can be useful for adding additional classes or styling information before a popover appears. + # + # @access public + # @author Chris Sauve + # @since 0.0.1 + # @type {Function} + # @default function() {} + activateCallback : () -> return + + #* + # Specifies whether or not the footnote content will be activated when the associated button is hovered over. + # + # @access public + # @author Chris Sauve + # @since 0.0.1 + # @returns {Boolean} + # @default false + activateOnHover : false + + #* + # Specifies whether or not multiple footnote popovers can be active simultaneously. + # + # @access public + # @author Chris Sauve + # @since 0.0.1 + # @returns {Boolean} + # @default false + allowMultipleFN : false + + #* + # Specifies the pattern that must be matched by the anchor element's `href` attribute for it to be considered a footnote link. This is used in filtering all links down to just those with a footnote. + # + # @access public + # @author Chris Sauve + # @since 2.1.1 + # @returns {RegExp} + # @default /(fn|footnote|note)[:\-_\d]/gi + anchorPattern : /(fn|footnote|note)[:\-_\d]/gi + + #* + # The tagname of the (possible) parent of the footnote link. This is really only necessary when you want to also get rid of that element — for instance, when the link is inside a `sup` tag. This tag and the link itself will be joined together for attribute from which you can drawn in your markup for footnotes/ buttons. + # + # @access public + # @author Chris Sauve + # @since 2.1.1 + # @returns {String} + # @default 'sup' + anchorParentTagname : 'sup' + + #* + # An object containing information about breakpoints specified for your set of popovers. These breakpoints should be manipulated only by using the `bigfoot.addBreakpoint()` and `bigfoot.removeBreakpoint()` methods discussed in the [methods section](#methods). + # + # @access private + # @author Chris Sauve + # @since 0.0.1 + # @returns {Object} + # @default {} + breakpoints : {} + + #* + # Determines whether footnotes that were instantiated by hovering over the footnote button are removed once the footnote button/ footnote popover is un-hovered. + # + # @access public + # @author Chris Sauve + # @since 0.0.1 + # @returns {Boolean} + # @default false + deleteOnUnhover : false + + #* + # The class name for the containing element of the original footnote content. Typically, this will be a class on an `li` that contained the footnote. This element may be removed/ hidden, depending on the option specified for `actionOriginalFN`. This string does not have to be an exact match — the class names will simply be tested for whether they include this string. + # + # @access public + # @author Chris Sauve + # @since 2.1.1 + # @returns {String} + # @default 'footnote' + footnoteParentClass : 'footnote' + + #* + # The element that contains the footnote content. As noted above, this element may be hidden or deleted, and will be given the `footnote-processed` class once Bigfoot has finished with it. + # + # @access public + # @author Chris Sauve + # @since 2.1.1 + # @returns {RegExp} + # @default /(fn|footnote|note)[:\-_\d]/gi + footnoteTagname : 'li' + + #* + # If `deleteOnUnhover` is `true`, this specifies the amount of time (in milliseconds) that must pass after the footnote button/ content is un-hovered before the footnote is removed. + # + # @access public + # @author Chris Sauve + # @since 0.0.1 + # @returns {Number} + # @default 250 + hoverDelay : 250 + + #* + # A string representing the selector at which you would like the numbering of footnotes to restart to 1. For example, you may be using the numbered style of footnote and wish to have the numbers restart for each `<article>` on your main page with a class of `"article-container"`. In this case, you would set this option to `"article.article-container"` (or an equivalent CSS selector). Leaving the option as undefined will simply number all footnotes on a given page sequentially. + # + # @access public + # @author Chris Sauve + # @since 0.0.1 + # @returns {String} + # @default undefined + numberResetSelector : undefined + + #* + # When the footnote content is being removed this option specifes how long after the active class is removed from the footnote before the element is actually removed from the DOM. This leaves time for any transitions you would like to perform on the footnote as it is being deactivated. + # + # @access public + # @author Chris Sauve + # @since 0.0.1 + # @returns {Number} + # @default 300 + popoverDeleteDelay : 300 + + #* + # Sets a delay between the activation of the footnote button and the activation of the actual footnote content. + # + # @access public + # @author Chris Sauve + # @since 0.0.1 + # @returns {Number} + # @default 100 + popoverCreateDelay : 100 + + #* + # Specifies whether or not the footnote popovers (and the popover tooltip, if it is included in the markup) should be positioned by the script. + # + # If this option is `true`, the top of the footnote popover will be positioned at the middle (vertically) of the footnote button, while the left of the popover will be placed a distance from the (horizontal) middle of the button proportional to the footnote button's horizontal position in the window. The popover will be placed above the button if there is insufficient space on the bottom. + # + # @access public + # @author Chris Sauve + # @since 0.0.1 + # @returns {Boolean} + # @default true + positionContent : true + + #* + # Determines whether or not, when scrolling past the end of a footnote whose content is taller than the vertical space available, the scroll event will propagate to the window itself. + # + # @access public + # @author Chris Sauve + # @since 0.0.1 + # @returns {Boolean} + # @default true + preventPageScroll : true + + #* + # If any truthy value is provided, only the footnotes within the scope you define will be affected by the script. The scope should be a selector string, as you would typically use in jQuery. For example, setting a scope of `".bigfoot-active"` would work only on those elements with an ancestor that has a class of `bigfoot-active`. + # + # @access public + # @author Chris Sauve + # @since 0.0.1 + # @returns {Boolean} + # @default false + scope : false + + #* + # Determines whether or not a footnote can be used as the content for multiple footnote buttons. Many content management systems will, on a blog's main page, load every article chronologically without any adjustments to the article markup. This can cause issues if multiple footnotes have the same ID: the footnote content is identified by the fragment identifier in the `href` attribute of the footnote link, so multiple identical IDs can result in the same footnote content being used for different footnote links. This option prevents this by using a footnote as the content for at most one footnote button. + # + # @access public + # @author Chris Sauve + # @since 0.0.1 + # @returns {Boolean} + # @default true + useFootnoteOnlyOnce : true + + #* + # A string representation of the markup of the footnote content popovers. It's best not to change this too much; the script relies on the class names and hierarchy of the default markup to do its work. However, you can add information to the rendered markup by adding string literals or one or more of the following variables: + # + # - `{{FOOTNOTENUM}}`: inserts the footnote number (sequential ordering of all footnotes within an element matching the `numberResetSelector` option). + # - `{{FOOTNOTEID}}`: inserts the footnote identifier (sequential ordering of all footnotes on the page, starting from 1). + # - `{{FOOTNOTECONTENT}}`: inserts the html markup of the original footnote with all relevant characters escaped. + # - `{{BUTTON:attr}}`: inserts the attribute of the associated footnote button attribute (`attr`). For example, `{{BUTTON:id}}` will insert the `id` of the footnote button that instantiated the popover. + # + # @access public + # @author Chris Sauve + # @since 0.0.1 + # @returns {String} + # @default + # <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> + 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>" + + #* + # A string representation of the markup of the footnote button. Again, try not to remove any elements from the markup, but add as much as you like. In addition to the first two variables shown in `contentMarkup`, the following variables are available: + # + # - `{{SUP:attr}}`: Inserts the attribute from the superscript/ anchor tag pair that formed the original footnote link. + # - `{{FN:attr}}`: inserts the attribute from the original footnote container element. + # + # @access public + # @author Chris Sauve + # @since 0.0.1 + # @returns {String} + # @default + # <div class='bigfoot-footnote__container'> + # <button href="#" 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> + 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 = {} + + + + # ___ + # ___ /__/\ ___ ___ + # / /\ \ \:\ / /\ / /\ + # / /:/ \ \:\ / /:/ / /:/ + # /__/::\ _____\__\:\ /__/::\ / /:/ + # \__\/\:\__ /__/::::::::\\__\/\:\__ / /::\ + # \ \:\/\\ \:\~~\~~\/ \ \:\/\/__/:/\:\ + # \__\::/ \ \:\ ~~~ \__\::/\__\/ \:\ + # /__/:/ \ \:\ /__/:/ \ \:\ + # \__\/ \ \:\ \__\/ \__\/ + # \__\/ + + #* + # Footnote button/ content initializer (run on doc.ready). + # Finds the likely footnote links and then uses their target to find the content. + # + # @ignore + # @author Chris Sauve + # @since 0.0.1 + # @access private + # @returns {undefined} + + footnoteInit = -> + # Get all of the possible footnote links + footnoteButtonSearchQuery = if settings.scope then "#{settings.scope} a[href*='#']" else "a[href*='#']" + + # Filter down to links that: + # - have an HREF referencing a footnote, OR + # - have a rel attribute of footnote + # - aren't a descendant of a footnote (prevents backlinks) + $footnoteAnchors = $(footnoteButtonSearchQuery).filter -> + $this = $(this) + relAttr = $this.attr "rel" + relAttr = "" if relAttr == "null" || !relAttr? + "#{$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 -> + relatedFN = $(this).data "footnote-ref" + .replace /[:.+~*\]\[]/g, "\\$&" + relatedFN = "#{relatedFN}:not(.footnote-processed)" if settings.useFootnoteOnlyOnce + $closestFootnoteEl = $(relatedFN).closest(settings.footnoteTagname) + if $closestFootnoteEl.length > 0 + footnotes.push $closestFootnoteEl.first().addClass("footnote-processed") + finalFNLinks.push this + + # If there are already footnote links, look for the last one and set + # it as the beginning value for the next set of footnotes. + $currentLastFootnoteLink = $("[data-footnote-identifier]:last") + footnoteIDNum = if $currentLastFootnoteLink.length < 1 then 0 else +$currentLastFootnoteLink.data("footnote-identifier") + + # Initiates the button with the footnote content + # Also performs the desired action on the original footnotes + for i in [0...footnotes.length] + # Removes any backlinks and hackily encodes double quotes && >/< symbols to prevent conflicts + footnoteContent = removeBackLinks $(footnotes[i]).html().trim(), + $(finalFNLinks[i]).data("footnote-backlink-ref") + footnoteContent = footnoteContent.replace(/"/g, """) + .replace(/</g, "<sym;") + .replace(/>/g, ">sym;") + .replace(/'/g, "'") + footnoteIDNum += 1 + footnoteButton = "" + $relevantFNLink = $(finalFNLinks[i]) + $relevantFootnote = $(footnotes[i]) + + # Determines whether this is in the same number reset container (as defined in settings) + # as the last footnote and changes the footnote number accordingly + if settings.numberResetSelector? + $curResetElement = $relevantFNLink.closest settings.numberResetSelector + if $curResetElement.is($lastResetElement) + footnoteNum += 1 + else + footnoteNum = 1 + $lastResetElement = $curResetElement + + else + footnoteNum = footnoteIDNum + + # Add a paragraph container if the footnote was written directly in the list element + footnoteContent = "<p>#{footnoteContent}</p>" if footnoteContent.indexOf("<") isnt 0 + + # Gives default button markup unless custom one is defined + # Gets the easy replacements out of the way + footnoteButton = settings.buttonMarkup.replace /\{\{FOOTNOTENUM\}\}/g, footnoteNum + .replace /\{\{FOOTNOTEID\}\}/g, footnoteIDNum + .replace /\{\{FOOTNOTECONTENT\}\}/g, footnoteContent + + # Handles replacements of SUP/FN attribute requests + footnoteButton = replaceWithReferenceAttributes footnoteButton, "SUP", $relevantFNLink + footnoteButton = replaceWithReferenceAttributes footnoteButton, "FN", $relevantFootnote + $footnoteButton = $(footnoteButton).insertBefore $relevantFNLink + + $parent = $relevantFootnote.parent() + switch settings.actionOriginalFN.toLowerCase() + when "hide" + $relevantFNLink.addClass "footnote-print-only"; + $relevantFootnote.addClass "footnote-print-only"; + deleteEmptyOrHR $parent; + when "delete" + $relevantFNLink.remove() + $relevantFootnote.remove() + deleteEmptyOrHR $parent + else + $relevantFNLink.addClass "footnote-print-only" + + + + #* + # Groups the ID and HREF of a superscript/ anchor tag pair in data attributes. + # This resolves the issue of the href and backlink id being separated between the two elements. + # + # @param {jQuery} $footnoteAnchors - Anchors that link to footnotes. + # @param {Array} footnoteLinks ([]) - An array on which the new anchors will be pushed. + # + # @ignore + # @author Chris Sauve + # @since 0.0.1 + # @access private + # @returns {undefined} + + cleanFootnoteLinks = ($footnoteAnchors, footnoteLinks = []) -> + $parent = undefined + $supChild = undefined + linkHREF = undefined + linkID = undefined + + # Problem: backlink ID might point to containing superscript of the fn link + # Solution: Check if there is a superscript and move the href/ ID up to it. + # The combined id/ href of the sup/a pair are stored in sup using data attributes + $footnoteAnchors.each -> + $this = $(this) + linkHREF = "#" + ($this.attr("href")).split("#")[1] # just the fragment ID + $parent = $this.closest(settings.anchorParentTagname) + $child = $this.find(settings.anchorParentTagname) + + if $parent.length > 0 + # Assign the link ID to be the parent's and child's combined + linkID = ($parent.attr("id") || "") + ($this.attr("id") || "") + 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") || "") + footnoteLinks.push $this.attr( + "data-footnote-backlink-ref": linkID + "data-footnote-ref": linkHREF + ) + else + # or "" protects against undefined ID's + linkID = $this.attr("id") || "" + footnoteLinks.push $this.attr( + "data-footnote-backlink-ref": linkID + "data-footnote-ref": linkHREF + ) + return + + + + #* + # Propogates the decision of deleting/ hiding the original footnotes up the hierarchy, eliminating any empty/ fully-hidden elements containing the footnotes and any horizontal rules used to denote the start of the footnote section. + # + # @param {jQuery} $el - Container of the footnote that was deleted/ hidden. + # + # @ignore + # @author Chris Sauve + # @since 0.0.1 + # @access private + # @returns {undefined} + + deleteEmptyOrHR = ($el) -> + $parent = undefined + + # If it has no children or all children have been hidden + if $el.is(":empty") || $el.children(":not(.footnote-print-only)").length == 0 + $parent = $el.parent() + if settings.actionOriginalFN.toLowerCase() == "delete" then $el.remove() else $el.addClass "footnote-print-only" + + # Propogate up to the container element + deleteEmptyOrHR $parent + + else if $el.children(":not(.footnote-print-only)").length == $el.children("hr:not(.footnote-print-only)").length + # If the only child not hidden/ removed is a horizontal rule, remove the entire container + $parent = $el.parent() + if settings.actionOriginalFN.toLowerCase() == "delete" + $el.remove() + else + $el.children("hr").addClass "footnote-print-only" + $el.addClass "footnote-print-only" + + # Propogate up to the container element + deleteEmptyOrHR $parent + + + + #* + # Removes any links from the footnote back to the footnote link as these don't make sense when the footnote is shown inline + # + # @param {String} footnoteHTML - The string version of the new footnote. + # @param {String} backlinkID - The ID of the footnote link (that is to be removed from the footnote HTML). + # + # @ignore + # @author Chris Sauve + # @since 0.0.1 + # @access private + # @returns {String} - The new HTML string with the relevant links taken out. + + removeBackLinks = (footnoteHTML, backlinkID) -> + # First, though, take care of multiple ID's by getting rid of spaces + backlinkID = backlinkID.trim().replace(/\s+/g, "|") + .replace(/(.*)/g, "($1)") if backlinkID.indexOf(' ') >= 0 + + # Regex finds the preceding space/ nbsp, the anchor tag and contents + regex = new RegExp("(\\s| )*<\\s*a[^#<]*##{backlinkID}[^>]*>(.*?)<\\s*/\\s*a>", "g"); + footnoteHTML.replace(regex, "").replace("[]", ""); + + + + #* + # Replaces the reference attributes (encased in `{{}}`) with the relevant attributes from the desired element; for example, `{{SUP:id}}` will be replaced with the ID of the superscript element passed as `$referenceElement`. + # + # @param {String} string - String to perform replacements on. + # @param {String} referenceKeyword - The reference keyword to lookout for (i.e., `"BUTTON"` or `"SUP"`). + # @param {String} $referenceElement - The element to search in for the identified attribute(s). + # + # @ignore + # @author Chris Sauve + # @since 0.0.1 + # @access private + # @returns {String} - `string` with the replacements performed. + + replaceWithReferenceAttributes = (string, referenceKeyword, $referenceElement) -> + refRegex = new RegExp("\\{\\{#{referenceKeyword}:([^\\}]*)\\}\\}", "g") + refMatches = undefined + refReplaceText = undefined + refReplaceRegex = undefined + + # Performs the regex and does the replacement until it doesn't find any more matches + refMatches = refRegex.exec(string) + while refMatches + # refMatches[1] stores the attribute that is to be matched + if refMatches[1] + refReplaceText = $referenceElement.attr(refMatches[1]) || "" + string = string.replace("{{#{referenceKeyword}:#{refMatches[1]}}}", refReplaceText) + refMatches = refRegex.exec(string) + string + + + + + + # ___ ___ ___ ___ + # / /\ / /\ ___ ___ ___ / /\ ___ / /\ + # / /::\ / /:/ / /\/ /\ /__/\ / /::\ / /\ / /:/_ + # / /:/\:\ / /:/ / /:/ /:/ \ \:\ / /:/\:\ / /:/ / /:/ /\ + # / /:/~/::\ / /:/ ___ / /:/__/::\ \ \:\ / /:/~/::\ / /:/ / /:/ /:/_ + # /__/:/ /:/\:\/__/:/ / /\/ /::\__\/\:\__ ___ \__\:\/__/:/ /:/\:\/ /::\/__/:/ /:/ /\ + # \ \:\/:/__\/\ \:\ / /:/__/:/\:\ \ \:\/\/__/\ | |:|\ \:\/:/__\/__/:/\:\ \:\/:/ /:/ + # \ \::/ \ \:\ /:/\__\/ \:\ \__\::/\ \:\| |:| \ \::/ \__\/ \:\ \::/ /:/ + # \ \:\ \ \:\/:/ \ \:\/__/:/ \ \:\__|:| \ \:\ \ \:\ \:\/:/ + # \ \:\ \ \::/ \__\/\__\/ \__\::::/ \ \:\ \__\/\ \::/ + # \__\/ \__\/ ~~~~ \__\/ \__\/ + + #* + # To activate the popover of a hovered footnote button. Also removes other popovers, if allowMultipleFN is false. + # + # @param {Event} event - Event that contains the target of the mouseenter event. + # + # @ignore + # @author Chris Sauve + # @since 0.0.1 + # @access private + # @returns {undefined} + + buttonHover = (event) -> + if settings.activateOnHover + $buttonHovered = $(event.target).closest(".bigfoot-footnote__button") + dataIdentifier = "[data-footnote-identifier='#{$buttonHovered.attr("data-footnote-identifier")}']" + return if $buttonHovered.hasClass("is-active") + $buttonHovered.addClass "is-hover-instantiated" + + # Delete other popovers, unless overriden in the settings + unless settings.allowMultipleFN + otherPopoverSelector = ".bigfoot-footnote:not(#{dataIdentifier})" + removePopovers otherPopoverSelector + createPopover(".bigfoot-footnote__button#{dataIdentifier}").addClass "is-hover-instantiated" + + return + + + + #* + # Activates the button the was clicked/ taps. Also removes other popovers, if allowMultipleFN is false. Finally, removes all popovers if something non-fn related was clicked/ tapped. + # + # @param {Event} event - Event that contains the target of the tap/ click event. + # + # @ignore + # @author Chris Sauve + # @since 0.0.1 + # @access private + # @returns {undefined} + + touchClick = (event) -> + $target = $(event.target) + $nearButton = $target.closest(".bigfoot-footnote__button") + $nearFootnote = $target.closest(".bigfoot-footnote") + + # If a button was tapped/ clicked + if $nearButton.length > 0 + # Button was clicked + # Cancel the link, if it exists + event.preventDefault() + + # Do the button clicking + clickButton $nearButton + + # Something other than a button or popover was pressed + else if $nearFootnote.length < 1 + removePopovers() if $(".bigfoot-footnote").length > 0 + + return + + + + #* + # Handles the logic of clicking/ tapping the footnote button. That is, activates the popover if it isn't already active (+ deactivate others, if appropriate) or, deactivates the popover if it is already active. + # + # @param {jQuery} $button - Button being clicked/ pressed. + # + # @ignore + # @author Chris Sauve + # @since 0.0.1 + # @access private + # @returns {undefined} + + clickButton = ($button) -> + # Cancel focus + $button.blur() + + # Get the identifier of the footnote + dataIdentifier = "data-footnote-identifier='#{$button.attr("data-footnote-identifier")}'" + + # Only create footnote if it's not already active + # If it's activating, ignore the new activation until the popover is fully formed. + if $button.hasClass("changing") + return + + else if !$button.hasClass("is-active") + $button.addClass "changing" + setTimeout (-> + $button.removeClass "changing" + ), settings.popoverCreateDelay + + createPopover ".bigfoot-footnote__button[#{dataIdentifier}]" + $button.addClass "is-click-instantiated" + + # Delete all other footnote popovers if we are only allowing one + removePopovers ".bigfoot-footnote:not([#{dataIdentifier}])" unless settings.allowMultipleFN + + else + # A fully instantiated footnote; either remove it or all footnotes, depending on settings + unless settings.allowMultipleFN + removePopovers() + else + removePopovers ".bigfoot-footnote[#{dataIdentifier}]" + + return + + + + #* + # Instantiates the footnote popover of the buttons matching the passed selector. This includes replacing any variables in the content markup, decoding any special characters, adding the new element to the page, calling the position function, and adding the scroll handler. + # + # @param {String} selector (".bigfoot-footnote__button") - CSS selector of buttons that are to be activated. + # + # @alias activate + # @author Chris Sauve + # @since 0.0.1 + # @access public + # @returns {jQuery} - All footnotes activated by the function. + + createPopover = (selector) -> + # Activate all matching if multiple footnotes are allowed + # or only the first matching element otherwise + $buttons = undefined + + if typeof selector isnt "string" && settings.allowMultipleFN + $buttons = selector + else if typeof selector isnt "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 -> + $this = $(this) + content = undefined + + try + # Gets the easy replacements out of the way (try is there to ignore the "replacing undefined" error if it's activated too freuqnetly) + 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, "<") + + # Handles replacements of BUTTON attribute requests + content = replaceWithReferenceAttributes(content, "BUTTON", $this) + + finally + # Create content and activate user-defined callback on it + $content = $(content) + try + settings.activateCallback $content, $this + $content.insertAfter $buttons + + # Default state is init to allow the initial positioning to set transform-origin + popoverStates[$this.attr("data-footnote-identifier")] = "init" + + # Instantiate the max-width for storage and use in repositioning + # Adjust the max-width for the relevant units + $content.attr "bigfoot-max-width", calculatePixelDimension($content.css("max-width"), $content) + + # Max max-width non-restricting + $content.css "max-width", 10000 + + # Instantiate the max-height for storage and use in repositioning + # Adjust the max-height for the relevant units + $contentContainer = $content.find(".bigfoot-footnote__content") + $content.attr "data-bigfoot-max-height", calculatePixelDimension($contentContainer.css("max-height"), $contentContainer) + repositionFeet() + $this.addClass "is-active" + + # Bind the scroll handler to the popover + $content.find(".bigfoot-footnote__content").bindScrollHandler() + $popoversCreated = $popoversCreated.add($content) + + # Add active class after a delay to give it time to transition + setTimeout (-> + $popoversCreated.addClass "is-active" + ), settings.popoverCreateDelay + + $popoversCreated + + + + #* + # Calculates the base font size for `em`- and `rem`-based sizing. + + # @ignore + # @author Chris Sauve + # @since 2.0.0 + # @access private + # @returns {Number} - The base font size in pixels. + + baseFontSize = -> + 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 + + size + + + + #* + # Calculates a pixel dimension (as a regular integer) based on a string with an unknown unit. + # + # @param {String} dim - Dimension to be evaluated. + # @param {jQuery} $el - Element that is being measured. + # + # @ignore + # @author Chris Sauve + # @since 2.0.0 + # @access private + # @returns {Number} - The string representation of the actual width. + + calculatePixelDimension = (dim, $el) -> + if dim == "none" + # No value set, make it non-restricting + dim = 10000 + + else if dim.indexOf("rem") >= 0 + # Set in rem + dim = parseFloat(dim) * baseFontSize() + + else if dim.indexOf("em") >= 0 + # Set in em + dim = parseFloat(dim) * parseFloat($el.css("font-size")) + + else if dim.indexOf("px") >= 0 + # Set in px + dim = parseFloat(dim) + + # Weird issue in FF where %-based widths would be resolved + # to px before being reported. Assume that smallest possible + # expicitly-set max width is 60px, otherwise, it's the result + # of this calculation. + dim = dim / parseFloat($el.parent().css("width")) if dim <= 60 + + else if dim.indexOf("%") >= 0 + # Set in percentages + dim = parseFloat(dim) / 100 + + dim + + + + #* + # Prevents scrolling of the page when you reach the top/ bottom of scrolling a scrollable footnote popover. + # + # @runon {jQuery} - Run on popover(s) that are to have the event bound. + # + # @link http://stackoverflow.com/questions/16323770/stop-page-from-scrolling-if-hovering-div + # @ignore + # @author Chris Sauve + # @since 0.0.1 + # @access private + # @returns {jQuery} - The element on which the function was run. + + $.fn.bindScrollHandler = -> + # Don't even bother checking if option is set to false + return $(this) unless settings.preventPageScroll + + $(this).on "DOMMouseScroll mousewheel", (event) -> + $this = $(this) + scrollTop = $this.scrollTop() + scrollHeight = $this[0].scrollHeight + height = parseInt($this.css("height")) + $popover = $this.closest(".bigfoot-footnote") + + # Fix for Safari 7 not properly calculating scrollHeight() + # Just add the class as soon as there is any scrolling + $popover.addClass "is-scrollable" if $this.scrollTop() > 0 && $this.scrollTop() < 10 + + # Return if the element isn't scrollable + return unless $popover.hasClass("is-scrollable") + + # Get the change in scroll position + delta = if event.type == "DOMMouseScroll" then event.originalEvent.detail * -40 else event.originalEvent.wheelDelta + + # Decide whether the scroll was up or down + up = delta > 0 + + prevent = -> + event.stopPropagation() + event.preventDefault() + event.returnValue = false + false + + if !up && -delta > scrollHeight - height - scrollTop + # Scrolling down, but this will take us past the bottom. + $this.scrollTop scrollHeight + # Give a class for removal of scroll-related styles + $popover.addClass "is-fully-scrolled" + prevent() + + else if up && delta > scrollTop + # Scrolling up, but this will take us past the top. + $this.scrollTop 0 + $popover.removeClass "is-fully-scrolled" + prevent() + else + $popover.removeClass "is-fully-scrolled" + + $(this) + + + + + + # ___ ___ ___ ___ + # ___ /__/\ / /\ / /\ ___ ___ ___ / /\ + # / /\ \ \:\ / /::\ / /:/ / /\/ /\ /__/\ / /:/_ + # / /:/ \ \:\ / /:/\:\ / /:/ / /:/ /:/ \ \:\ / /:/ /\ + # /__/::\ _____\__\:\ / /:/~/::\ / /:/ ___ / /:/__/::\ \ \:\ / /:/ /:/_ + # \__\/\:\__/__/::::::::\/__/:/ /:/\:\/__/:/ / /\/ /::\__\/\:\__ ___ \__\:\/__/:/ /:/ /\ + # \ \:\/\ \:\~~\~~\/\ \:\/:/__\/\ \:\ / /:/__/:/\:\ \ \:\/\/__/\ | |:|\ \:\/:/ /:/ + # \__\::/\ \:\ ~~~ \ \::/ \ \:\ /:/\__\/ \:\ \__\::/\ \:\| |:| \ \::/ /:/ + # /__/:/ \ \:\ \ \:\ \ \:\/:/ \ \:\/__/:/ \ \:\__|:| \ \:\/:/ + # \__\/ \ \:\ \ \:\ \ \::/ \__\/\__\/ \__\::::/ \ \::/ + # \__\/ \__\/ \__\/ ~~~~ \__\/ + + #* + # Removes the unhovered footnote content if deleteOnUnhover is true + # + # @param {Event} event - Event that contains the target of the mouseout event. + # + # @ignore + # @author Chris Sauve + # @since 0.0.1 + # @access private + # @returns {undefined} + + unhoverFeet = (e) -> + if settings.deleteOnUnhover && settings.activateOnHover + setTimeout (-> + # If the new element is NOT a descendant of the footnote button + $target = $(e.target).closest(".bigfoot-footnote, .bigfoot-footnote__button") + removePopovers() if $(".bigfoot-footnote__button:hover, .bigfoot-footnote:hover").length < 1 + ), settings.hoverDelay + + + + #* + # Remove all popovers on keypress. + # + # @param {Event} event - Event that contains the key that was pressed. + # + # @ignore + # @author Chris Sauve + # @since 0.0.5 + # @access private + # @returns {undefined} + + escapeKeypress = (event) -> + removePopovers() if event.keyCode == 27 + + + + #* + # Removes/ adds appropriate classes to the footnote content and button after a delay (to allow for transitions) it removes the actual footnote content. + # + # @param {String} footnotes (".bigfoot-footnote") - The CSS selector of the footnotes to be removed. + # @param {Number} timeout (settings.popoverDeleteDelay) - The delay between adding the removal classes and actually removing the popover from the DOM. + # + # @alias close + # @todo Remove the associated event handlers from the removed popover. + # @author Chris Sauve + # @since 0.0.1 + # @access public + # @returns {jQuery} - The buttons whose popovers were removed by the call. + + removePopovers = (footnotes = ".bigfoot-footnote", timeout = settings.popoverDeleteDelay) -> + $buttonsClosed = $() + footnoteID = undefined + $linkedButton = undefined + $this = undefined + + $(footnotes).each -> + $this = $(this) + footnoteID = $this.attr("data-footnote-identifier") + $linkedButton = $(".bigfoot-footnote__button[data-footnote-identifier='#{footnoteID}']") + + unless $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" + + # Gets rid of the footnote after the timeout + setTimeout (-> + $this.remove() + delete popoverStates[footnoteID] + + $linkedButton.removeClass "changing" + ), timeout + + $buttonsClosed + + + + + + # ___ ___ ___ ___ ___ + # / /\ / /\ / /\ ___ ___ ___ / /\ /__/\ + # / /::\ / /::\ / /:/_ / /\ / /\/ /\ / /::\ \ \:\ + # / /:/\:\/ /:/\:\ / /:/ /\ / /:/ / /:/ /:/ / /:/\:\ \ \:\ + # / /:/~/:/ /:/ \:\ / /:/ /::\/__/::\ / /:/__/::\ / /:/ \:\ _____\__\:\ + # /__/:/ /:/__/:/ \__\:\/__/:/ /:/\:\__\/\:\__ / /::\__\/\:\__/__/:/ \__\:\/__/::::::::\ + # \ \:\/:/\ \:\ / /:/\ \:\/:/~/:/ \ \:\/\/__/:/\:\ \ \:\/\ \:\ / /:/\ \:\~~\~~\/ + # \ \::/ \ \:\ /:/ \ \::/ /:/ \__\::/\__\/ \:\ \__\::/\ \:\ /:/ \ \:\ ~~~ + # \ \:\ \ \:\/:/ \__\/ /:/ /__/:/ \ \:\/__/:/ \ \:\/:/ \ \:\ + # \ \:\ \ \::/ /__/:/ \__\/ \__\/\__\/ \ \::/ \ \:\ + # \__\/ \__\/ \__\/ \__\/ \__\/ + + #* + # Positions each footnote relative to its button. + # + # @param {Event} event - The type of event that prompted the reposition function. + # + # @todo Move repositioning to a module. + # @alias reposition + # @author Chris Sauve + # @since 0.0.1 + # @access public + # @returns {undefined} + + repositionFeet = (e) -> + if settings.positionContent + type = if e then e.type else "resize" + + $(".bigfoot-footnote").each -> + # Element Definitions + $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") + + # Spacing Information + roomLeft = roomCalc($button) + marginSize = parseFloat($this.css("margin-top")) + maxHeightInCSS = +($this.attr("data-bigfoot-max-height")) + totalHeight = 2 * marginSize + $this.outerHeight() + maxHeightOnScreen = 10000 + + # Position tooltip on top if: + # total space on bottom is not enough to hold footnote AND + # top room is larger than bottom room + positionOnTop = roomLeft.bottomRoom < totalHeight && roomLeft.topRoom > roomLeft.bottomRoom + lastState = popoverStates[identifier] + + if positionOnTop + # Previous state was bottom, switch it and change classes + unless 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 + # Previous state was top, switch it and change classes + if lastState isnt "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 + + # Sets the max height so that there is no footnote overflow + $this.find(".bigfoot-footnote__content").css "max-height": Math.min(maxHeightOnScreen, maxHeightInCSS) + "px" + + # Only perform sizing operations when the actual window was resized. + if type == "resize" + maxWidthInCSS = parseFloat($this.attr("bigfoot-max-width")) + $mainWrap = $this.find(".bigfoot-footnote__wrapper") + maxWidth = maxWidthInCSS # default to assuming pixel/em/rem value + if maxWidthInCSS <= 1 + # Max width in CSS set as a percentage + + # If a relative element has been set for max width, the actual max width + # by which to multiply the percentage is the lesser of the element's width + # and the width of the viewport + relativeToWidth = do -> + # Width of user-specified element width, set to non-constraining + # value in case it does not exist + userSpecifiedRelativeElWidth = 10000 + + if settings.maxWidthRelativeTo + jq = $(settings.maxWidthRelativeTo) + userSpecifiedRelativeElWidth = jq.outerWidth() if jq.length > 0 + + Math.min window.innerWidth, userSpecifiedRelativeElWidth + + # Applicable constraining width times the percentage in CSS + maxWidth = relativeToWidth * maxWidthInCSS + + # Set the max width to the smaller of the calculated width based on the + # percentage/ other value and the width of the actual content (prevents + # excess width for small footnotes) + maxWidth = Math.min(maxWidth, $this.find(".bigfoot-footnote__content").outerWidth() + 1) + + # Set this on the main wrapper. This allows the bigfoot-footnote div + # to be displayed as inline-block, wrapping it around the content. + $mainWrap.css "max-width", maxWidth + "px" + + # Positions the popover + $this.css left: (-roomLeft.leftRelative * maxWidth + parseFloat($button.css("margin-left")) + $button.outerWidth() / 2) + "px" + + # Position the tooltip + positionTooltip $this, roomLeft.leftRelative + + # Give scrollable class if the content hight is larger than the container + $this.addClass "is-scrollable" if parseInt($this.outerHeight()) < $this.find(".bigfoot-footnote__content")[0].scrollHeight + + return + + + + #* + # Positions the tooltip at the same relative horizontal position as the button. + # + # @param {jQuery} $popover - The popover whose tooltip is to be positioned. + # @param {Number} leftRelative (0.5) - The percentage (as a decimal) to which the popover is positioned on the left. + # + # @ignore + # @author Chris Sauve + # @since 0.0.1 + # @access private + # @returns {undefined} + + positionTooltip = ($popover, leftRelative = 0.5) -> + $tooltip = $popover.find(".bigfoot-footnote__tooltip") + + $tooltip.css("left", "#{leftRelative*100}%") if $tooltip.length > 0 + return + + + + #* + # Calculates area on the top, left, bottom and right of the element. Also calculates the relative position to the left && top of the screen. + # + # @param {jQuery} $el - The element to calculate the screen position of. + # + # @ignore + # @author Chris Sauve + # @since 0.0.1 + # @access private + # @returns {Object} - The room on all sides and the top/ left relative positions, all relative to the middle of the element. + + roomCalc = ($el) -> + 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 + + { + topRoom: topRoom + bottomRoom: w.height - topRoom + leftRoom: leftRoom + rightRoom: w.width - leftRoom + leftRelative: leftRoom / w.width + topRelative: topRoom / w.height + } + + + + #* + # Calculates the dimensions of the viewport. + # + # @ignore + # @author Chris Sauve + # @since 0.0.1 + # @access private + # @returns {Object} - The height, width, and scrollX/Y properties of the window. + + viewportDetails = () -> + $window = $(window) + + { + width: window.innerWidth + height: window.innerHeight + scrollX: $window.scrollLeft() + scrollY: $window.scrollTop() + } + + + + + # ___ ___ ___ ___ + # _____ / /\ / /\ / /\ /__/| + # / /::\ / /::\ / /:/_ / /::\ | |:| + # / /:/\:\ / /:/\:\ / /:/ /\ / /:/\:\ | |:| + # / /:/~/::\ / /:/~/:/ / /:/ /:/_ / /:/~/::\ __| |:| + # /__/:/ /:/\:/__/:/ /:/__/__/:/ /:/ /\/__/:/ /:/\:\/__/\_|:|____ + # \ \:\/:/~/:| \:\/:::::| \:\/:/ /:/\ \:\/:/__\/\ \:\/:::::/ + # \ \::/ /:/ \ \::/~~~~ \ \::/ /:/ \ \::/ \ \::/~~~~ + # \ \:\/:/ \ \:\ \ \:\/:/ \ \:\ \ \:\ + # \ \::/ \ \:\ \ \::/ \ \:\ \ \:\ + # \__\/ \__\/ \__\/ \__\/ \__\/ + + #* + # Adds a breakpoint within the HTML at which a user-defined function. will be called. The minimum requirement is that a min/ max size is provided; after that point, the footnote will stop being positioned (i.e., to allow for bottom-fixed footnotes on small screens). + # + # @param {String | MediaQueryList} size - The size at which to break, either as a simple string (like `">10em"`), a mediq query (`"(max-width: 35em)"`), or a `MediaQueryList` object. + # @param {Function} trueCallback - The function to call when the media query is matched. It will be passed the `removeOpen` option and a copy of the `bigfoot` object. + # @param {Function} falseCallback - the function to call when the media query is not matched. It will be passed the `removeOpen` option and a copy of the `bigfoot` object. + # + # + # @author Chris Sauve + # @since 0.0.6 + # @access public + # @returns {Object} - Details on whether the breakpoint was added and, if so, the `MediaQueryList` object that was created and the listener function. + + addBreakpoint = (size, trueCallback, falseCallback, deleteDelay = settings.popoverDeleteDelay, removeOpen = true) -> + # Set defaults + mql = undefined + minMax = undefined + s = undefined + + # If they passed a string representation + if typeof (size) == "string" + # Repalce special strings with corresponding widths + s = if size.toLowerCase() == "iphone" + "<320px" + else if size.toLowerCase() == "ipad" + "<768px" + else + size + + # Check on the nature of the string (simple or full media query) + minMax = if s.charAt(0) == ">" + "min" + else if s.charAt(0) == "<" + "max" + else + null + + # Create the media query + query = if minMax then "(#{minMax}-width: #{s.substring(1)})" else s + mql = window.matchMedia(query) + + else + # Assumption is that a MediaQueryList object was passed. + mql = size + + if mql.media && mql.media == "invalid" + # If a non-MQList object is passed on the media is invalid + return { + added: false + mq: mql + listener: null + } + + # Determine whether to close/ remove popovers on the true/false callbacks + trueDefaultPositionSetting = minMax == "min" + falseDefaultPositionSetting = minMax == "max" + + # Create default trueCallback + trueCallback = trueCallback || makeDefaultCallbacks(removeOpen, deleteDelay, trueDefaultPositionSetting, ($popover) -> + $popover.addClass "is-bottom-fixed" + ) + + # Create default falseCallback + falseCallback = falseCallback || makeDefaultCallbacks(removeOpen, deleteDelay, falseDefaultPositionSetting, -> + ) + + # MQ Listener function + mqListener = (mq) -> + if mq.matches + trueCallback removeOpen, bigfoot + else + falseCallback removeOpen, bigfoot + return + + # Attach listener and call it for the initial match/ non-match + mql.addListener mqListener + mqListener mql + + # Add to the breakpoints setting + settings.breakpoints[size] = + added: true + mq: mql + listener: mqListener + + settings.breakpoints[size] + + + + #* + # Creates the default callbacks to attach to the MQ events. + # + # @param {Boolean} removeOpen (true) - Whether or not to close (and reopen) footnotes that are open at the time of the breakpoint changes. + # @param {Number} deleteDelay (settings.popoverDeleteDelay) - The delay by which to wait when closing/ reopening footnotes on breakpoint changes. + # @param {Boolean} position - whether or not to position popovers when the media query is matched. + # @param {Function} callback - The function to be assigned to `settings.activateCallback` when the media query is matched (this function is called when new footnotes are created). + # + # @ignore + # @author Chris Sauve + # @since 0.0.6 + # @access private + # @returns {Function} - The default media query callback function. + + makeDefaultCallbacks = (removeOpen, deleteDelay, position, callback) -> + return (removeOpen, bigfoot) -> + $closedPopovers = undefined + + if removeOpen + $closedPopovers = bigfoot.close() + bigfoot.updateSetting "activateCallback", callback + + setTimeout (-> + bigfoot.updateSetting "positionContent", position + bigfoot.activate $closedPopovers if removeOpen + ), deleteDelay + + + + #* + # Removes a previously-created breakpoint, calling the false condition before doing so (or, a user-provided function instead). + # + # @param {String | MediaQueryList} target - The media query to remove, referenced either through the string used to create the breakpoint initially or the associated `MediaQueryList` object. + # @param {Function} callback - The (optional) function to call before removing the listener. + # + # @author Chris Sauve + # @since 0.0.6 + # @access public + # @returns {Boolean} - `true` if the media query was found and deleted, `false` otherwise. + + removeBreakpoint = (target, callback) -> + mq = null + b = undefined + mqFound = false + + if typeof (target) == "string" + mqFound = settings.breakpoints[target] isnt `undefined` + else + for b of settings.breakpoints + if settings.breakpoints.hasOwnProperty(b) && settings.breakpoints[b].mq == target + mqFound = true + if mqFound + breakpoint = settings.breakpoints[b || target] + + # Calls the non-matching callback one last time + if callback + callback matches: false + else + breakpoint.listener matches: false + + breakpoint.mq.removeListener breakpoint.listener + delete settings.breakpoints[b || target] + + mqFound + + + + + # ___ ___ ___ ___ + # / /\ ___ /__/\ / /\ / /\ + # / /::\ / /\ \ \:\ / /:/_ / /::\ + # / /:/\:\ / /:/ \__\:\ / /:/ /\ / /:/\:\ + # / /:/ \:\ / /:/ ___ / /::\ / /:/ /:/_ / /:/~/:/ + # /__/:/ \__\:\/ /::\/__/\ /:/\:\/__/:/ /:/ /\/__/:/ /:/___ + # \ \:\ / /:/__/:/\:\ \:\/:/__\/\ \:\/:/ /:/\ \:\/:::::/ + # \ \:\ /:/\__\/ \:\ \::/ \ \::/ /:/ \ \::/~~~~ + # \ \:\/:/ \ \:\ \:\ \ \:\/:/ \ \:\ + # \ \::/ \__\/\ \:\ \ \::/ \ \:\ + # \__\/ \__\/ \__\/ \__\/ + + #* + # Updates the specified setting(s) with the value(s) you pass. + # + # @param {String | Object} newSettings - The setting name as a string or an object containing setting-new value pairs. + # @param {*} value - The new value, if the first argument was a string. + # + # @author Chris Sauve + # @since 0.0.3 + # @access public + # @returns {Object | *} - The old value if a string was passed as the first argument or an object of setting-old value pairs otherwise. + + updateSetting = (newSettings, value) -> + oldValue = undefined + + if typeof (newSettings) == "string" + oldValue = settings[newSettings] + settings[newSettings] = value + + else + oldValue = {} + for prop of newSettings + if newSettings.hasOwnProperty(prop) + oldValue[prop] = settings[prop] + settings[prop] = newSettings[prop] + + oldValue + + + + #* + # Returns the value of the passed setting. + # + # @param {String} setting - The setting to retrieve. + # + # @author Chris Sauve + # @since 0.0.3 + # @access public + # @returns {*} - The value of the passed setting. + + getSetting = (setting) -> settings[setting] + + + + + + # ___ _____ + # _____ ___ /__/\ / /::\ + # / /::\ / /\ \ \:\ / /:/\:\ + # / /:/\:\ / /:/ \ \:\ / /:/ \:\ + # / /:/~/::\/__/::\ _____\__\:\/__/:/ \__\:| + # /__/:/ /:/\:\__\/\:\__/__/::::::::\ \:\ / /:/ + # \ \:\/:/~/:/ \ \:\/\ \:\~~\~~\/\ \:\ /:/ + # \ \::/ /:/ \__\::/\ \:\ ~~~ \ \:\/:/ + # \ \:\/:/ /__/:/ \ \:\ \ \::/ + # \ \::/ \__\/ \ \:\ \__\/ + # \__\/ \__\/ + + $(document).ready -> + 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 + $(document).on "gestureend", () -> + 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 diff --git a/static/assets/bigfoot/src/scss/base/bigfoot-button.scss b/static/assets/bigfoot/src/scss/base/bigfoot-button.scss new file mode 100644 index 0000000..e400229 --- /dev/null +++ b/static/assets/bigfoot/src/scss/base/bigfoot-button.scss @@ -0,0 +1,158 @@ +// ___ ___ ___ +// _____ /__/\ ___ ___ / /\ /__/\ +// / /::\ \ \:\ / /\ / /\ / /::\ \ \:\ +// / /:/\:\ \ \:\ / /:/ / /:/ / /:/\:\ \ \:\ +// / /:/~/::\ ___ \ \:\ / /:/ / /:/ / /:/ \:\ _____\__\:\ +// /__/:/ /:/\:|/__/\ \__\:\ / /::\ / /::\ /__/:/ \__\:\/__/::::::::\ +// \ \:\/:/~/:/\ \:\ / /://__/:/\:\ /__/:/\:\\ \:\ / /:/\ \:\~~\~~\/ +// \ \::/ /:/ \ \:\ /:/ \__\/ \:\\__\/ \:\\ \:\ /:/ \ \:\ ~~~ +// \ \:\/:/ \ \:\/:/ \ \:\ \ \:\\ \:\/:/ \ \:\ +// \ \::/ \ \::/ \__\/ \__\/ \ \::/ \ \:\ +// \__\/ \__\/ \__\/ \__\/ + + + +//* +// 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; diff --git a/static/assets/bigfoot/src/scss/base/bigfoot-popover.scss b/static/assets/bigfoot/src/scss/base/bigfoot-popover.scss new file mode 100644 index 0000000..df92609 --- /dev/null +++ b/static/assets/bigfoot/src/scss/base/bigfoot-popover.scss @@ -0,0 +1,286 @@ +// ___ ___ ___ ___ ___ ___ +// / /\ / /\ / /\ / /\ ___ / /\ / /\ +// / /::\ / /::\ / /::\ / /::\ /__/\ / /:/_ / /::\ +// / /:/\:\ / /:/\:\ / /:/\:\ / /:/\:\ \ \:\ / /:/ /\ / /:/\:\ +// / /:/~/:// /:/ \:\ / /:/~/:// /:/ \:\ \ \:\ / /:/ /:/_ / /:/~/:/ +// /__/:/ /://__/:/ \__\:\/__/:/ /://__/:/ \__\:\ ___ \__\:\/__/:/ /:/ /\/__/:/ /:/___ +// \ \:\/:/ \ \:\ / /:/\ \:\/:/ \ \:\ / /://__/\ | |:|\ \:\/:/ /:/\ \:\/:::::/ +// \ \::/ \ \:\ /:/ \ \::/ \ \:\ /:/ \ \:\| |:| \ \::/ /:/ \ \::/~~~~ +// \ \:\ \ \:\/:/ \ \:\ \ \:\/:/ \ \:\__|:| \ \:\/:/ \ \:\ +// \ \:\ \ \::/ \ \:\ \ \::/ \__\::::/ \ \::/ \ \:\ +// \__\/ \__\/ \__\/ \__\/ ~~~~ \__\/ \__\/ +// + + + +//* +// 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/static/assets/bigfoot/src/scss/foundation/bigfoot-mixins.scss b/static/assets/bigfoot/src/scss/foundation/bigfoot-mixins.scss new file mode 100644 index 0000000..60bda6d --- /dev/null +++ b/static/assets/bigfoot/src/scss/foundation/bigfoot-mixins.scss @@ -0,0 +1,27 @@ +// ___ ___ ___ ___ +// /__/\ ___ /__/| ___ /__/\ / /\ +// | |::\ / /\ | |:| / /\ \ \:\ / /:/_ +// | |:|:\ / /:/ | |:| / /:/ \ \:\ / /:/ /\ +// __|__|:|\:\ /__/::\ __|__|:| /__/::\ _____\__\:\ / /:/ /::\ +// /__/::::| \:\\__\/\:\__/__/::::\____\__\/\:\__ /__/::::::::\/__/:/ /:/\:\ +// \ \:\~~\__\/ \ \:\/\ ~\~~\::::/ \ \:\/\\ \:\~~\~~\/\ \:\/:/~/:/ +// \ \:\ \__\::/ |~~|:|~~ \__\::/ \ \:\ ~~~ \ \::/ /:/ +// \ \:\ /__/:/ | |:| /__/:/ \ \:\ \__\/ /:/ +// \ \:\ \__\/ | |:| \__\/ \ \:\ /__/:/ +// \__\/ |__|/ \__\/ \__\/ + +@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; + } + } +} diff --git a/static/assets/bigfoot/src/scss/foundation/bigfoot-variables.scss b/static/assets/bigfoot/src/scss/foundation/bigfoot-variables.scss new file mode 100644 index 0000000..6ef5d40 --- /dev/null +++ b/static/assets/bigfoot/src/scss/foundation/bigfoot-variables.scss @@ -0,0 +1,127 @@ +// ___ ___ ___ ___ ___ ___ +// / /\ / /\ / /\ / /\ ___ / /\ / /\ +// / /::\ / /::\ / /::\ / /::\ /__/\ / /:/_ / /::\ +// / /:/\:\ / /:/\:\ / /:/\:\ / /:/\:\ \ \:\ / /:/ /\ / /:/\:\ +// / /:/~/:// /:/ \:\ / /:/~/:// /:/ \:\ \ \:\ / /:/ /:/_ / /:/~/:/ +// /__/:/ /://__/:/ \__\:\/__/:/ /://__/:/ \__\:\ ___ \__\:\/__/:/ /:/ /\/__/:/ /:/___ +// \ \:\/:/ \ \:\ / /:/\ \:\/:/ \ \:\ / /://__/\ | |:|\ \:\/:/ /:/\ \:\/:::::/ +// \ \::/ \ \:\ /:/ \ \::/ \ \:\ /:/ \ \:\| |:| \ \::/ /:/ \ \::/~~~~ +// \ \:\ \ \:\/:/ \ \:\ \ \:\/:/ \ \:\__|:| \ \:\/:/ \ \:\ +// \ \:\ \ \::/ \ \:\ \ \::/ \__\::::/ \ \::/ \ \:\ +// \__\/ \__\/ \__\/ \__\/ ~~~~ \__\/ \__\/ +// +// 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; diff --git a/static/assets/bigfoot/src/scss/variants/bigfoot-bottom.scss b/static/assets/bigfoot/src/scss/variants/bigfoot-bottom.scss new file mode 100644 index 0000000..abed527 --- /dev/null +++ b/static/assets/bigfoot/src/scss/variants/bigfoot-bottom.scss @@ -0,0 +1,62 @@ +// ___ ___ ___ +// _____ / /\ ___ ___ / /\ /__/\ +// / /::\ / /::\ / /\ / /\ / /::\ | |::\ +// / /:/\:\ / /:/\:\ / /:/ / /:/ / /:/\:\ | |:|:\ +// / /:/~/::\ / /:/ \:\ / /:/ / /:/ / /:/ \:\ __|__|:|\:\ +// /__/:/ /:/\:|/__/:/ \__\:\ / /::\ / /::\ /__/:/ \__\:\/__/::::| \:\ +// \ \:\/:/~/:/\ \:\ / /://__/:/\:\ /__/:/\:\\ \:\ / /:/\ \:\~~\__\/ +// \ \::/ /:/ \ \:\ /:/ \__\/ \:\\__\/ \:\\ \:\ /:/ \ \:\ +// \ \:\/:/ \ \:\/:/ \ \:\ \ \:\\ \:\/:/ \ \:\ +// \ \::/ \ \::/ \__\/ \__\/ \ \::/ \ \:\ +// \__\/ \__\/ \__\/ \__\/ + + + +//* +// A footnote popover that, unlike the default, is not positioned relative to +// the button, but instead is positioned at the bottom of the page. This popover +// transitions with a simple slide in from the bottom. + +// This style requires that the `positionContent` option of bigfoot is set to false. + +// @since 2.1.0 +// @author Chris Sauve + +.bigfoot-footnote { + // 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; +} diff --git a/static/assets/bigfoot/src/scss/variants/bigfoot-number.scss b/static/assets/bigfoot/src/scss/variants/bigfoot-number.scss new file mode 100644 index 0000000..e84b521 --- /dev/null +++ b/static/assets/bigfoot/src/scss/variants/bigfoot-number.scss @@ -0,0 +1,60 @@ +// ___ ___ ___ ___ ___ +// /__/\ /__/\ /__/\ _____ / /\ / /\ +// \ \:\ \ \:\ | |::\ / /::\ / /:/_ / /::\ +// \ \:\ \ \:\ | |:|:\ / /:/\:\ / /:/ /\ / /:/\:\ +// _____\__\:\ ___ \ \:\ __|__|:|\:\ / /:/~/::\ / /:/ /:/_ / /:/~/:/ +// /__/::::::::\/__/\ \__\:\/__/::::| \:\/__/:/ /:/\:|/__/:/ /:/ /\/__/:/ /:/___ +// \ \:\~~\~~\/\ \:\ / /:/\ \:\~~\__\/\ \:\/:/~/:/\ \:\/:/ /:/\ \:\/:::::/ +// \ \:\ ~~~ \ \:\ /:/ \ \:\ \ \::/ /:/ \ \::/ /:/ \ \::/~~~~ +// \ \:\ \ \:\/:/ \ \:\ \ \:\/:/ \ \:\/:/ \ \:\ +// \ \:\ \ \::/ \ \:\ \ \::/ \ \::/ \ \:\ +// \__\/ \__\/ \__\/ \__\/ \__\/ \__\/ + + + +//* +// A button that has no ellipse, but instead shows the footnote's number on the +// page. Note that the number will be reset to 1 depending on the selector passed +// to bigfoot's `numberResetSelector` option. + +// @since 2.1.0 +// @author Chris Sauve + +.bigfoot-footnote__button { + position: relative; + height: $button-height; + width: 1.5em; + border-radius: $button-height/2; + + &:after { + // CONTENT + content: attr(data-footnote-number); + + // POSITION + position: absolute; + top: 50%; left: 50%; + transform: translate(-50%, -50%); + + // DISPLAY AND SIZING + display: block; + + // TEXT + font-size: $button-height*0.6; + font-weight: bold; + color: rgba($button-color, 0.5); + + // TRANSITIONS + transition: color $popover-transition-default-duration $popover-transition-default-timing-function; + } + + &:hover, + &.is-active { + &:after { + color: white; + } + } +} + +.bigfoot-footnote__button__circle { + display: none; +} diff --git a/static/assets/css/icons.css b/static/assets/css/icons.css new file mode 100644 index 0000000..19bc1d2 --- /dev/null +++ b/static/assets/css/icons.css @@ -0,0 +1,61 @@ +/* ========================================================================== + Icons - Sets up the icon font and respective classes (from Casper) + ========================================================================== */ + +/* Import the font file with the icons in it */ +@font-face { + font-family: "icons"; + src:url("../fonts/icons.eot"); + src:url("../fonts/icons.eot?#iefix") format("embedded-opentype"), + url("../fonts/icons.woff") format("woff"), + url("../fonts/icons.ttf") format("truetype"), + url("../fonts/icons.svg#icons") format("svg"); + font-weight: normal; + font-style: normal; +} + +/* Apply these base styles to all icons */ +[class^="icon-"]:before, [class*=" icon-"]:before { + font-family: "icons", "Open Sans", sans-serif; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + text-decoration: none !important; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Each icon is created by inserting the correct character into the + content of the :before pseudo element. Like a boss. */ +.icon-ghost:before { + content: "\e000"; +} +.icon-feed:before { + content: "\e001"; +} +.icon-twitter:before { + content: "\e002"; + font-size: 1.1em; +} +.icon-google-plus:before { + content: "\e003"; +} +.icon-facebook:before { + content: "\e004"; +} +.icon-arrow-left:before { + content: "\e005"; +} +.icon-stats:before { + content: "\e006"; +} +.icon-location:before { + content: "\e007"; + margin-left: -3px; /* Tracking fix */ +} +.icon-link:before { + content: "\e008"; +}
\ No newline at end of file diff --git a/static/assets/css/normalize.css b/static/assets/css/normalize.css new file mode 100644 index 0000000..8ffd911 --- /dev/null +++ b/static/assets/css/normalize.css @@ -0,0 +1,77 @@ +/* ========================================================================== + Normalize.css v2.1.3 | MIT License | git.io/normalize | (minified) + ========================================================================== */ + +article, aside, details, +figcaption, figure, +footer, header, hgroup, +main, nav, section, +summary { display: block; } +audio, canvas, video { display: inline-block; } +audio:not([controls]) { display: none; height: 0; } +[hidden], template { display: none; } +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +body { margin: 0; } +a { background: transparent; } +a:focus { outline: thin dotted; } +a:active, a:hover { outline: 0; } +h1 { font-size: 2em; margin: 0.67em 0; } +abbr[title] { border-bottom: 1px dotted; } +b, strong { font-weight: 700; } +dfn { font-style: italic; } +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} +mark { background: #FF0; color: #000; } +code, kbd, pre, +samp { font-family: monospace, serif; font-size: 1em; } +pre { white-space: pre-wrap; } +q { quotes: "\201C" "\201D" "\2018" "\2019"; } +small { font-size: 80%; } +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { top: -0.5em; } +sub { bottom: -0.25em; } +img { border: 0; } +svg:not(:root) { overflow: hidden; } +figure { margin: 0; } +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +legend { border: 0; padding: 0; } +button, input, select, +textarea { font-family: inherit; font-size: 100%; margin: 0; } +button, input { line-height: normal; } +button, select { text-transform: none; } +button, html input[type="button"], +input[type="reset"], input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} +button[disabled], html input[disabled] { cursor: default; } +input[type="checkbox"], +input[type="radio"] { box-sizing: border-box; padding: 0; } +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } +button::-moz-focus-inner, +input::-moz-focus-inner { border: 0; padding: 0; } +textarea { overflow: auto; vertical-align: top; } +table { border-collapse: collapse; border-spacing: 0; }
\ No newline at end of file diff --git a/static/assets/css/screen.css b/static/assets/css/screen.css new file mode 100644 index 0000000..65c9e69 --- /dev/null +++ b/static/assets/css/screen.css @@ -0,0 +1,566 @@ +/* ========================================================================== + General styles + ========================================================================== */ + +/* Font sizes used + +Base font size: 1rem = 18px + +0.702rem 13px +0.79rem 14px +0.889rem 16px +1.125rem 20px +1.266rem 23px +1.424rem 26px +1.602rem 29px +1.802rem 32px +2.887rem 52px + +http://modularscale.com/ +8:9 major second +*/ + +html { + height: 100%; + max-height: 100%; + font-size: 112.5%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +body { + -webkit-font-feature-settings: 'kern' 1; + -moz-font-feature-settings: 'kern' 1; + -ms-font-feature-settings: 'kern' 1; + -o-font-feature-settings: 'kern' 1; + font-feature-settings: 'kern' 1; + height: 100%; + max-height: 100%; + width: 80%; + max-width: 650px; + margin: 0 auto; + font-family: "Lato", sans-serif; + font-weight: 300; + font-size: 1rem; + line-height: 1.7; + color: #3A4145; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Bree Serif", serif; + font-weight: 500; + margin-bottom: 0; +} + +h1 { + font-size: 1.802rem; +} + +h2 { + font-size: 1.602rem; +} + +h3 { + font-size: 1.424rem; +} + +h4 { + font-size: 1.266rem; +} + +h5 { + font-size: 1.125rem; +} + +h6 { + font-size: 1rem; +} + +p { + margin-top: 0; +} + +code, tt, pre { + font-family: "Source Code Pro", monospace, sans-serif; + white-space: pre-wrap; + font-size: 0.79rem; + border: none; + background: none; +} + +pre { + padding: 0 2em; + line-height: 1.3em; +} + +code, tt { + font-weight: 500; +} + +pre code { + font-weight: 300; +} + +blockquote { + margin: 0 2em; + color: #9EABB3; +} + +blockquote p { + margin: 0.8em 0; + font-style: italic; +} + +blockquote cite { + font-style: normal; + font-size: 0.889rem; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: #9EABB3 1px solid; +} + +/* Links */ +.post a { + color: #FC7E0F; + text-decoration: none; +} + +.post a:hover { + text-decoration: underline; +} + +.post a:visited { + color: #9EABB3; + text-decoration: none; +} + +a.read-more, a.read-more:hover, a.read-more:visited { + color: #FC7E0F; /* #DA1F15, #F17F33 */ + text-decoration: none; +} + +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + color: #3A4145; + text-decoration: none; +} + +.post-title a { + color: #3A4145 !important; + text-decoration: none !important; +} + +/* Tables and dictionaries (straight up ripped out of the Casper stylesheet with minor modifications) */ + +table { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 1.7em 0; + width: 100%; + max-width: 100%; + background-color: transparent; +} + +th, td { + padding: 8px; + line-height: 20px; + text-align: left; + vertical-align: top; + border-top: #EFEFEF 1px solid; +} + +td h3, td h4, td h5, td h6 { + margin: 0 0 0.5rem 0; +} + +table caption + thead tr:first-child th, +table caption + thead tr:first-child td, +table colgroup + thead tr:first-child th, +table colgroup + thead tr:first-child td, +table thead:first-child tr:first-child th, +table thead:first-child tr:first-child td { + border-top: 0; +} + +table tbody + tbody { border-top: #EFEFEF 2px solid; } + +table table table { background-color: #FFF; } + +th { + color: #000; + background-color: #F6F6F6; +} + +dl dt { + float: left; + width: 180px; + overflow: hidden; + clear: left; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: 700; + margin-bottom: 1em; +} + +dl dd { + margin-left: 200px; + margin-bottom: 1em +} + +/* ========================================================================== + Blog header + ========================================================================== */ + +.main-header { + position: relative; + width: 100%; + padding: 2rem 0; + margin-bottom: 1rem; + text-align: center; + vertical-align: middle; + overflow: hidden; + display: table; +} + +.main-header-content { + height: auto; +} + +.blog-title { + margin: 0; + padding: 0; + font-family: "Lato", sans-serif; + font-weight: 300; + font-size: 2.887rem; + vertical-align: middle; + line-height: 1; +} + +.blog-title a { + font-color: inherit; +} + +.blog-description { + margin: 0; + font-size: 0.889rem; + font-family: "Lato", sans-serif; + text-transform: uppercase; + letter-spacing: 0; + color: #9EABB3; + font-weight: 300; +} + +/* ========================================================================== + Navigation + ========================================================================== */ + +.nav { + margin-top: 1rem; +} + +.nav { + text-transform: uppercase; + font-size: .889rem; +} + +.nav a { + margin: 0 0.5rem; + color: #9EABB3; + text-decoration: none; +} + +.nav a:hover { + color: #FC7E0F; +} + +a.nav-current { + color: #FC7E0F; +} + +a.nav-home, a.nav-blog { + color: #9EABB3; +} + +/* ========================================================================== + Site footer + ========================================================================== */ + +.site-footer { + position: relative; + display: table; + width: 100%; + margin-top: 3rem; + padding-bottom: 1rem; + text-align: center; + overflow: hidden; + font-size: .79rem; +} + +.site-footer a { + color: #FC7E0F; + text-decoration: none; +} + +.site-footer a:hover { + color: #9EABB3; +} + + +/* RSS - enable to replace the simple RSS icon with a round button */ + +/* +.site-footer .rss { + margin: 1rem auto; + width: 1.7rem; + height: 1.6rem; +} + +.site-footer .rss a { + display: block; + height: 100%; + width: 100%; + margin-left: -.2rem; + padding: .35rem .1rem 0.05rem .2rem; + vertical-align: middle; + border: 1px #FC7E0F solid; + border-radius: 1.2rem; +} + +.site-footer .rss a:hover { + color: #ffffff; + background: #FC7E0F; +} +*/ + +/* ========================================================================== + Posts + ========================================================================== */ + +.post { + position: relative; + margin: 2rem auto; + padding-bottom: 4rem; + word-break: break-word; + hyphens: auto; +} + +.post-header { + margin-bottom: 0.5rem; +} + +.post-title { + margin-bottom: 0; + line-height: 1; +} + +.post-meta { + text-transform: uppercase; + font-size: .79rem; +} + +.post-footer { + margin-top: 2rem; +} + +.post-footer .tags a { + color: #9EABB3; + text-decoration: none; +} + +.post-footer .tags a:hover { + color: #FC7E0F; +} + +.post-footer h4 { + margin: 2rem 0 0; +} + +.post-footer .share { + margin: 0 auto; +} + +.post-footer .share a { + font-size: 1.8rem; + display: inline-block; + margin: 1rem 1.6rem 1.6rem 0; + color: #BBC7CC; + text-decoration: none; +} + +.post-footer .share a:hover { + color: #50585D; +} + +.post img { + display: block; + max-width: 100%; /* Keep image contained in width of post */ + margin: 0 auto 0.5rem; +} + +.footnotes-sep { + display: none; +} + +/* Koenig image styles */ + +.kg-image-card { + margin-bottom: 0.5rem; +} + +.kg-image-card img { + margin-bottom: 0; +} + +.post .kg-image-wide { + max-width: 1050px; + margin: 0 -200px; +} + +@media (max-width: 1100px) { + .post .kg-image-wide { + max-width: 140%; + margin: 0 -20%; + } +} + +@media (max-width: 950px) { + .post .kg-image-wide { + max-width: 120%; /* Start calculating as percentage of viewport? */ + margin: 0 -10%; + } +} + +.post .kg-image-full { + max-width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; +} + +.kg-image-card figcaption { + font-size: 0.79rem; + text-align: center; +} + + +/* YouTube embed wrapper to scale to full-width */ + +.yt-wrapper { + position: relative; + width: 100%; + margin: 0; +} + +.yt-wrapper:before{ + content: ""; + display: block; + padding-top: 56.25%; /* 16:9 aspect ratio */ +} + +.yt-wrapper iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +/* ========================================================================== + Tags + ========================================================================== */ + +.tag-title { + font-family: "Lato", sans-serif; + font-size: 1.802rem; + font-weight: bold; + margin-top: 0; +} + +.tag-image { + max-width: 100% +} + +.tag-description { + color: #9EABB3; +} + +/* ========================================================================== + Pagination + ========================================================================== */ + +/* The main wrapper for pagination links */ +.pagination { + position: relative; + margin: 2rem auto; + font-size: .79rem; + color: #9EABB3; + text-align: center; +} + +.pagination a { + color: #9EABB3; +} + +/* Push the previous/next links out to the left/right */ +.older-posts, +.newer-posts { + position: absolute; + display: inline-block; + text-decoration: none; +} + +.older-posts { + right: 0; +} + +.page-number { + display: inline-block; + padding: 2px 0; + min-width: 100px; +} + +.newer-posts { + left: 0; +} + +.older-posts:hover, +.newer-posts:hover { + color: #FC7E0F; +} + +.extra-pagination { + display: none; +} + +.extra-pagination .pagination { + width: auto; +} + +/* On page2+ show extra pagination controls at the top of post list */ +.paged .extra-pagination { + display: block; +} + +/* ========================================================================== + 12. Media Queries - Smaller than 500px + ========================================================================== */ + +@media only screen and (max-width: 500px) { + + html { + font-size: 100%; + } + + .blog-title { + font-size: 2.281rem; + } + + .blog-description { + font-size: 0.889rem; + } +} diff --git a/static/assets/fonts/icons.eot b/static/assets/fonts/icons.eot Binary files differnew file mode 100644 index 0000000..f77bb94 --- /dev/null +++ b/static/assets/fonts/icons.eot diff --git a/static/assets/fonts/icons.svg b/static/assets/fonts/icons.svg new file mode 100644 index 0000000..383e825 --- /dev/null +++ b/static/assets/fonts/icons.svg @@ -0,0 +1,19 @@ +<?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > +<svg xmlns="http://www.w3.org/2000/svg"> +<metadata>Generated by IcoMoon</metadata> +<defs> +<font id="icons" horiz-adv-x="1024"> +<font-face units-per-em="1024" ascent="960" descent="-64" /> +<missing-glyph horiz-adv-x="1024" /> +<glyph unicode=" " d="" horiz-adv-x="512" /> +<glyph unicode="" d="M0 960v-204.8h614.4v204.8h-614.4zM0 550.4v-204.8h1024v204.8h-1024zM0 140.8v-204.8h409.6v204.8h-409.6zM614.4 140.8v-204.8h409.6v204.8h-409.6zM819.2 960v-204.8h204.8v204.8h-204.8z" /> +<glyph unicode="" d="M842.688-64c-0.8 459.232-401.504 834.528-842.688 835.392v188.608c541.312 0 1024-460.608 1024-1024h-181.312zM687.2-63.936h-181.216c0.608 112.768-56.672 238.976-147.328 333.472-90.144 95.264-249.92 155.296-358.208 154.72v188.544c338.080-7.296 679.872-326.624 686.752-676.736zM128.512 192.096c70.624 0 127.872-57.312 127.872-128 0-70.656-57.248-127.968-127.872-127.968s-127.872 57.312-127.872 127.968c0 70.688 57.248 128 127.872 128z" /> +<glyph unicode="" d="M1024 765.582c-37.676-16.708-78.164-28.002-120.66-33.080 43.372 26 76.686 67.17 92.372 116.23-40.596-24.078-85.556-41.56-133.41-50.98-38.32 40.83-92.922 66.34-153.346 66.34-116.022 0-210.088-94.058-210.088-210.078 0-16.466 1.858-32.5 5.44-47.878-174.6 8.764-329.402 92.4-433.018 219.506-18.084-31.028-28.446-67.116-28.446-105.618 0-72.888 37.088-137.192 93.46-174.866-34.438 1.092-66.832 10.542-95.154 26.278-0.020-0.876-0.020-1.756-0.020-2.642 0-101.788 72.418-186.696 168.522-206-17.626-4.8-36.188-7.372-55.348-7.372-13.538 0-26.698 1.32-39.528 3.772 26.736-83.46 104.32-144.206 196.252-145.896-71.9-56.35-162.486-89.934-260.916-89.934-16.958 0-33.68 0.994-50.116 2.94 92.972-59.61 203.402-94.394 322.042-94.394 386.422 0 597.736 320.124 597.736 597.744 0 9.108-0.206 18.168-0.61 27.18 41.056 29.62 76.672 66.62 104.836 108.748z" /> +<glyph unicode="" d="M0.806 90.336c-0.244 2.532-0.452 5.070-0.584 7.63 0.13-2.56 0.34-5.098 0.584-7.63zM235.908 394.852c92.010-2.738 153.734 92.698 137.862 213.198-15.894 120.48-103.396 217.168-195.408 219.922-92.026 2.73-153.74-89.482-137.852-210 15.882-120.468 103.352-220.374 195.398-223.12zM1024 704v85.31c0 93.88-76.782 170.69-170.658 170.69h-682.656c-92.276 0-168.012-74.232-170.564-165.926 58.362 51.386 139.324 94.316 222.874 94.316 89.304 0 357.244 0 357.244 0l-79.948-67.618h-113.268c75.13-28.804 115.156-116.124 115.156-205.722 0-75.248-41.81-139.954-100.888-185.968-57.644-44.902-68.572-63.708-68.572-101.878 0-32.578 61.746-88 94.032-110.788 94.382-66.538 124.916-128.312 124.916-231.456 0-16.428-2.042-32.83-6.066-48.96h307.742c93.874 0 170.656 76.75 170.656 170.69v533.308h-192v-191.998h-64v192h-191.998v64h191.998v192h64v-192h192zM185.886 194.064c21.614 0 41.422 0.59 61.936 0.59-27.146 26.334-48.626 58.6-48.626 98.38 0 23.608 7.564 46.336 18.134 66.52-10.782-0.77-21.79-0.994-33.126-0.994-74.356 0-137.506 24.076-184.204 63.854v-67.242l0.006-201.73c53.44 25.374 116.888 40.622 185.88 40.622zM3.42 72.742c-1.112 5.458-1.966 11.006-2.542 16.634 0.574-5.628 1.43-11.176 2.542-16.634zM455.45 7.154c-15.058 58.806-68.454 87.964-142.888 139.568-27.072 8.732-56.894 13.874-88.894 14.208-89.618 0.964-173.108-34.942-220.216-88.372 15.92-77.706 85.034-136.558 167.234-136.558h286.444c1.816 11.128 2.696 22.632 2.696 34.432 0 12.534-1.534 24.792-4.376 36.722z" /> +<glyph unicode="" d="M853.344 960h-682.66c-93.872 0-170.684-76.814-170.684-170.688v-682.626c0-93.938 76.812-170.686 170.684-170.686l682.66 0.002c93.876 0 170.656 76.746 170.656 170.688v682.622c0 93.874-76.782 170.688-170.656 170.688zM870.592 448h-166.592v-448h-192v448h-92.526v146.564h92.526v95.186c0 129.342 55.792 206.25 207.87 206.25h175.244v-158.57h-143.13c-42.482 0.070-47.752-22.152-47.752-63.512l-0.232-79.354h192l-25.408-146.564z" /> +<glyph unicode="" d="M737.229 68.198c13.722-13.875 13.722-36.25 0-50.125s-35.891-13.875-49.613 0l-400.896 404.838c-13.722 13.875-13.722 36.301 0 50.125l400.896 404.89c13.722 13.875 35.891 13.875 49.613 0s13.722-36.25 0-50.125l-365.568-379.802 365.568-379.802z" /> +<glyph unicode="" d="M870.4 908.8h-112.64c-28.262 0-40.96-22.938-40.96-51.2v-870.4h204.8v870.4c0 28.262-22.886 51.2-51.2 51.2zM563.2 601.6h-112.64c-28.262 0-40.96-22.938-40.96-51.2v-563.2h204.8v563.2c0 28.262-22.886 51.2-51.2 51.2zM256 294.4h-112.64c-28.262 0-40.96-22.886-40.96-51.2v-256h204.8v256c0 28.314-22.938 51.2-51.2 51.2z" /> +<glyph unicode="" d="M512 857.6c-141.414 0-256-114.637-256-256 0-244.429 256-563.2 256-563.2s256 318.771 256 563.2c0 141.363-114.586 256-256 256zM512 460.288c-76.339 0-138.24 61.901-138.24 138.24s61.901 138.24 138.24 138.24 138.24-61.901 138.24-138.24-61.901-138.24-138.24-138.24z" /> +<glyph unicode="" d="M402.381 207.667l-41.472-41.165c-35.942-35.584-94.362-35.635-130.253 0-17.254 17.152-26.726 39.834-26.726 64.051s9.523 46.95 26.726 64.102l152.576 151.398c31.59 31.386 91.085 77.517 134.451 34.509 19.917-19.763 52.070-19.61 71.782 0.256 19.763 19.866 19.661 52.019-0.256 71.782-73.677 73.114-182.63 59.597-277.504-34.509l-152.576-151.398c-36.557-36.352-56.73-84.685-56.73-136.141 0-51.405 20.173-99.738 56.781-136.090 37.683-37.427 87.142-56.064 136.602-56.064s99.021 18.637 136.704 56.064l41.472 41.216c19.917 19.763 20.019 51.917 0.256 71.731-19.763 19.866-51.917 19.968-71.834 0.256zM864.819 795.699c-79.155 78.541-189.798 82.79-263.117 10.086l-51.661-51.251c-19.917-19.763-20.070-51.866-0.307-71.782 19.814-19.917 51.917-20.019 71.782-0.256l51.661 51.251c37.939 37.683 87.654 22.067 120.115-10.086 17.254-17.101 26.726-39.885 26.726-64.051 0-24.218-9.523-46.95-26.726-64.051l-162.816-161.485c-74.394-73.83-109.363-39.219-124.262-24.422-19.917 19.763-52.019 19.61-71.731-0.256-19.763-19.917-19.661-52.070 0.256-71.782 34.15-33.894 73.216-50.688 114.074-50.688 50.074 0 102.963 25.19 153.242 75.11l162.765 161.485c36.608 36.301 56.781 84.634 56.781 136.038s-20.173 99.789-56.781 136.141z" /> +</font></defs></svg>
\ No newline at end of file diff --git a/static/assets/fonts/icons.ttf b/static/assets/fonts/icons.ttf Binary files differnew file mode 100644 index 0000000..76b2863 --- /dev/null +++ b/static/assets/fonts/icons.ttf diff --git a/static/assets/fonts/icons.woff b/static/assets/fonts/icons.woff Binary files differnew file mode 100644 index 0000000..22bd268 --- /dev/null +++ b/static/assets/fonts/icons.woff diff --git a/theme.toml b/theme.toml new file mode 100644 index 0000000..4c54c04 --- /dev/null +++ b/theme.toml @@ -0,0 +1,20 @@ +# theme.toml template for a Hugo theme +# See https://github.com/gohugoio/hugoThemes#themetoml for an example + +name = "Arabica" +license = "MIT" +licenselink = "https://github.com/nirocfz/arabica/blob/master/LICENSE" +description = "" +tags = [] +features = [] +min_version = "0.41" + +[author] + name = "Chen Fangzhou" + homepage = "https://fixatom.com" + +# If porting an existing theme +[original] + name = "Arabica" + homepage = "https://thedarkroast.com/" + repo = "https://github.com/slunsford/arabica" |
