octopress-littlefoot 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 16dd03dc1ff93fa99090da6ba84800187cf291fa
+  data.tar.gz: 2195fd2926f8de16d25290e4be44e0ed8ec7c060
+SHA512:
+  metadata.gz: 8ff472d3d9fd385a90a18debc5b03efbb47c9fa8a0349ec450cab0bb700ffe26e1cf27d24c147376a14f05066b8862411a2b843032cc7d9e7bd3eca78b550eb2
+  data.tar.gz: ce69ee5deadb2e786f05cbe97c126735be33a4c21a79958b5acc3d9e7c591595d32660bd94a190f115aab68c12d4a489e11a0828caaf8a92f354d3a08fb936c2

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2015 Brandon Mathis
+
+MIT License
+
+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.

data/README.md

@@ -0,0 +1,55 @@
+# Octopress Littlefoot
+
+Fancy footnote popovers with native Javascript, for any Jekyll site.
+
+[![Build Status](http://img.shields.io/travis/octopress/littlefoot.svg)](https://travis-ci.org/octopress/littlefoot)
+[![Gem Version](http://img.shields.io/gem/v/octopress-littlefoot.svg)](https://rubygems.org/gems/octopress-littlefoot)
+[![License](http://img.shields.io/:license-mit-blue.svg)](http://octopress.mit-license.org)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+## Installation
+
+If you're using bundler add this gem to your site's Gemfile in the `:jekyll_plugins` group:
+
+    group :jekyll_plugins do
+      gem 'octopress-littlefoot'
+    end
+
+Then install the gem with Bundler
+
+    $ bundle
+
+To install manually without bundler:
+
+    $ gem install octopress-littlefoot
+
+Then add the gem to your Jekyll configuration.
+
+    gems:
+      - octopress-littlefoot
+
+## Setup
+
+Add `{% js_asset_tag %}` and `{% css_asset_tag %}` to your
+site's layout to automatically add Littlefoot's assets to your site
+whenever jekyll builds it.
+
+
+To add a footnote to a Markdown document, use this syntax:
+
+```markdown
+Here is some text containing a footnote.[^1]
+
+[^1]: Here is the text of the footnote itself.
+```
+
+## Contributing
+
+1. Fork it ( https://github.com/octopress/littlefoot/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/assets/config.yml

@@ -0,0 +1,10 @@
+theme: light           # light or dark
+
+# To override footnote theme colors uncomment and change the values below:
+#background: '#fff' # footnote popover background
+#text: '#444'       # popover text color
+
+button-color: inherit  # matches text color
+
+font-size: .9em
+max-width: 500px

data/assets/javascripts/littlefoot.js

@@ -0,0 +1,230 @@
+(function(){
+
+  var LittleFoot = {
+    initialize: function(){
+      self = this
+
+      document.addEventListener("DOMContentLoaded", function(event) {
+        var anchors = document.querySelectorAll("sup[id^=fnref] a")
+
+        if (anchors.length > 0) {
+
+          Array.prototype.forEach.call(anchors, function(anchor){
+            self.setup(anchor)
+          })
+
+          document.addEventListener("click", self.click.bind(self))
+
+          document.querySelector('div.footnotes').remove()
+        }
+      })
+
+    },
+
+    setup: function (anchor) {
+      // We want to add the footnote adjacent to the footnote <sup> element
+      var sup = getParent(anchor, 'sup')
+      sup.insertAdjacentHTML('afterend', this.template.wrapper(anchor));
+
+      sup.nextElementSibling.footnoteContent = this.template.footnoteContent(anchor)
+      sup.remove()
+    },
+
+    click: function (event) {
+      self = this
+
+      // Did a footnote button trigger the click event?
+      var button = getParent(event.target, '.littlefoot-button')
+
+      // Close if the click was outisde of the open footnote
+      if (!getParent(event.target, '.littlefoot-container.is-open')) {
+        self.close()
+      }
+
+      // Toggle if the click was inside the button
+      if (button) { self.toggle(button) }
+
+    },
+
+    // Watch the resize event to continually position the footnote popover
+    resize: function () {
+      self = this
+
+      // Only reposition this every 50 miliseconds to avoid constant repainting
+      window.clearTimeout(self.timeout)
+      self.timeout = window.setTimeout( function() { 
+        self.sizeFootnote()
+        self.positionFootnote()
+      }, 50)
+    },
+
+    toggle: function (el) {
+      if (this.footnote.el){
+        this.close()
+      } else {
+        this.open(el)
+      }
+    },
+
+    open: function (el) {
+      this.footnote.el = getParent(el, '.littlefoot-container')
+      var popover = this.footnote.popover()
+
+      this.footnote.el.classList.add('is-open')
+      this.sizeFootnote()
+
+      popover.classList.remove('is-hidden')
+
+      this.positionFootnote()
+      popover.classList.add('is-visible')
+      window.addEventListener("resize", self.resize.bind(self))
+    },
+
+    close: function () {
+      if (this.footnote.el) {
+        var popover = this.footnote.popover()
+        var footnote = this.footnote.el
+
+        popover.classList.remove('is-visible')
+        window.removeEventListener("resize", self.resize.bind(self))
+
+        this.footnote.el = null
+
+        setTimeout(function(){ 
+          footnote.classList.remove('is-open')
+          popover.classList.add('is-hidden') 
+        }, 250)
+      }
+    },
+
+    footnote: {
+      el: null,
+
+      popover: function() {
+        if (this.el) {
+          return this.el.querySelector('.littlefoot-popover')
+        }
+      },
+
+      panel: function() {
+        if (this.el) {
+          return this.el.querySelector('.littlefoot-footnote')
+        }
+      }
+    },
+
+    positionFootnote: function () {
+      panel = this.footnote.panel()
+      if (panel && panel.offsetWidth > 0) {
+        this.setOrientation()
+        this.setPosition()
+      }
+    },
+
+    setOrientation: function () {
+      var wrapper = this.footnote.el
+      wrapper.classList.remove('open-up', 'open-down')
+      wrapper.classList.add('open-down')
+      var pos = this.footnote.panel().getBoundingClientRect()
+
+      wrapper.classList.remove('open-up', 'open-down')
+
+
+      if (pos.bottom > window.innerHeight) {
+        wrapper.classList.add('open-up')
+      } else {
+        wrapper.classList.add('open-down')
+      }
+    },
+
+    setPosition: function () {
+      var container = this.footnote.el.parentElement
+      var contentWidth = container.offsetWidth
+      var panel = this.footnote.panel()
+      var left = this.footnote.el.offsetLeft - container.offsetLeft
+      var overlap = panel.offsetWidth + left
+
+      panel.setAttribute('style', '')
+
+      if (overlap > contentWidth) {
+        panel.setAttribute('style', 'left: -' + String(overlap - contentWidth) + 'px;')
+      }
+    },
+
+    sizeFootnote: function() {
+      var context = this.footnote.el.parentElement
+      var el = document.createElement("div")
+      //el.classList.add('littlefoot-container')
+      el.insertAdjacentHTML('beforeend', '<div class="littlefoot-test-wrapper"><div class="littlefoot-test">'+ this.footnote.el.footnoteContent+'</div></div>')
+      context.appendChild(el)
+      var size = {
+        h: el.firstChild.offsetHeight + 5,
+        w: el.firstChild.offsetWidth + 5
+      }
+      context.removeChild(el)
+
+      this.footnote.el.querySelector('.littlefoot-footnote-content').setAttribute('style', 'max-width:'+size.w+'px;')
+    },
+
+    template: {
+
+      wrapper: function (el) {
+        return ' <div class="littlefoot-container open-down">'+this.button(el)+this.popover(el)+'</div>'
+      },
+
+      button: function (el) {
+        return '<button class="littlefoot-button" title="view footnote #'+el.textContent+'">'
+            +'<svg class="littlefoot-graphic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 98"><path class="littlefoot-graphic-path" fill="#fff" d="M200 25c0-13.8-11.2-25-25-25H25C11.2 0 0 11.2 0 25v48c0 13.8 11.2 25 25 25h150c13.8 0 25-11.2 25-25V25zM50.5 64.3c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.8 15-15 15zm50 0c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.8 15-15 15zm49 0c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.8 15-15 15z"/></svg>'
+          +'</button>'
+      },
+      
+      popover: function (el) {
+        return '<aside class="littlefoot-popover is-hidden">'
+            +'<div class="littlefoot-footnote">'
+              +'<div class="littlefoot-footnote-wrapper">'
+                +'<div class="littlefoot-footnote-content">'
+                  +this.footnoteContent(el)
+                +'</div>'
+              +'</div>'
+            +'</div><div class="littlefoot-popover-triangle"></div>'
+          +'</aside>'
+      },
+
+      footnoteContent: function(anchor) {
+
+        // Find the footnote from the id in the anchor's href
+        var id = anchor.getAttribute('href').replace(':', "\\:")
+        var footnote = document.querySelector(id)
+
+        // Remove the "return to content" link
+        var link = footnote.querySelector('a[href^=\\#fnref]')
+        if (link) link.remove()
+        var containerWidth = footnote.offsetParent.parentElement.offsetWidth
+        return footnote.innerHTML
+      }
+    }
+  }
+
+  var getParent = function(start, classname) {
+    var func;
+    var element = start;
+
+    ['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'].some(function(fn) {
+      if (typeof document.body[fn] == 'function') {
+        func = fn;
+        return true;
+      }
+      return false;
+    });
+
+    while (element !== null) {
+      if (element !== null && element[func](classname)) {
+        return element;
+      }
+      element = element.parentElement;
+    }
+  }
+
+  LittleFoot.initialize()
+  window.LittleFoot = LittleFoot
+})()

data/assets/stylesheets/_utils.scss

@@ -0,0 +1,25 @@
+@mixin triangle($direction, $color, $size) {
+  @if $direction == left {
+    border-bottom: $size solid transparent;
+    border-right: $size solid $color;
+    border-top: $size solid transparent;
+  }
+  @else if $direction == right {
+    border-bottom: $size solid transparent;
+    border-left: $size solid $color;
+    border-top: $size solid transparent;
+  }
+  @else if $direction == up {
+    border-bottom: $size solid $color;
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+  }
+  @else if $direction == down {
+    border-right: $size solid transparent;
+    border-left: $size solid transparent;
+    border-top: $size solid $color;
+  }
+
+  height: 0;
+  width: 0;
+}

data/assets/stylesheets/littlefoot.scss

@@ -0,0 +1,172 @@
+@import 'utils';
+
+{% if plugin.theme == 'light' %}
+  $footnote-bg: #fff;
+  $footnote-text: #444;
+{% elsif plugin.theme == 'dark' %}
+  $footnote-bg: #444;
+  $footnote-text: #ccc;
+{% endif %}
+
+{% if plugin.background %}
+  $footnote-bg: {{ plugin.background }};
+{% endif %}
+
+{% if plugin.text %}
+  $footnote-text: {{ plugin.text }};
+{% endif %}
+
+$footnote-button: {{ plugin.button-color }};
+$footnote-font-size: {{ plugin.font-size }};
+$footnote-max-width: {{ plugin.max-width }};
+
+[class^=littlefoot] {
+  box-sizing: border-box;
+}
+
+.littlefoot-container {
+  position: relative;
+  display: inline-block;
+}
+
+.littlefoot-button {
+  border: none;
+  padding: 0;
+  background: none;
+  margin: 0;
+  outline: none;
+  cursor: pointer;
+  font-size: .75em;
+  vertical-align: middle;
+  color: $footnote-button;
+  transition: {
+    property: opacity, color;
+    duration: .25s;
+    timing-function: ease-out;
+  }
+  opacity: .3;
+  &:hover, .is-open & {
+    opacity: .5;
+  }
+}
+
+.littlefoot-graphic {
+  width: 2em;
+}
+
+.littlefoot-graphic-path {
+  fill: currentColor;
+}
+
+.littlefoot-popover {
+  position: absolute;
+  z-index: 10;
+  opacity: 0;
+  transform: scale(.8,.8);
+  transition: {
+    property: opacity, transform;
+    duration: .25s;
+    timing-function: ease-in-out;
+  }
+
+  .open-down & {
+    top: 1.6em;
+  }
+  .open-up & {
+    bottom: 1.6em;
+  }
+
+  &.is-visible {
+    opacity: 1;
+    transform: scale(1,1);
+  }
+
+  &.is-hidden {
+    display: none;
+  }
+
+}
+
+.littlefoot-popover-triangle {
+  position: absolute;
+  top: -.7em;
+  height: .7em;
+  width: 2.2em;
+  overflow: hidden;
+  &:after, &:before {
+    position: absolute;
+    left: .25em;
+    display: block;
+    width: 1em;
+    height: 1em;
+    transform: rotate(45deg);
+  }
+
+  &:after {
+    z-index: -1;
+    background: transparent;
+    box-shadow: rgba(#000, .2) 1px 1px 6px;
+  }
+
+  &:before {
+    z-index: 1;
+    background: $footnote-bg;
+  }
+
+  .is-open &:before, .is-open &:after {
+    content: "";
+  }
+
+  .open-down &:before, .open-down &:after {
+    bottom: -.5em;
+  }
+
+  .open-up &:before, .open-up &:after {
+    top: -.5em;
+  }
+}
+
+.littlefoot-footnote {
+  font-size: $footnote-font-size;
+  color: $footnote-text;
+  position: absolute;
+  left: -.5em;
+  box-shadow: rgba(#000, .2) 0 3px 8px;
+  border-radius: .5em;
+
+  .open-down & {
+    top: 0;
+  }
+  .open-up & {
+    bottom: 0;
+  }
+}
+
+.littlefoot-footnote-wrapper {
+  max-height: 250px;
+  overflow: auto;
+  background: $footnote-bg;
+  border-radius: .5em;
+}
+.littlefoot-footnote-content {
+  width: 40em;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  line-height: 1.45em;
+  padding: 0 1.4em;
+  p {
+    margin: 1em 0;
+  }
+  box-sizing: border-box;
+}
+
+.littlefoot-test {
+  @extend .littlefoot-footnote-content;
+  max-width: $footnote-max-width;
+  width: auto;
+  display: inline-block;
+}
+
+.littlefoot-test-wrapper {
+  display: inline-block;
+  font-size: $footnote-font-size;
+}

data/lib/octopress-littlefoot.rb

@@ -0,0 +1,13 @@
+require 'octopress-littlefoot/version'
+require 'octopress-ink'
+
+Octopress::Ink.add_plugin({
+  name:          "Octopress Littlefoot",
+  slug:          "littlefoot",
+  gem:           "octopress-littlefoot",
+  path:          File.expand_path(File.join(File.dirname(__FILE__), "..")),
+  type:          "plugin",
+  version:       Octopress::Littlefoot::VERSION,
+  description:   "Fancy footnote popovers with native Javascript",
+  source_url:    "https://github.com/octopress/littlefoot",
+})

data/lib/octopress-littlefoot/version.rb

@@ -0,0 +1,5 @@
+module Octopress
+  module Littlefoot
+    VERSION = "1.0.0"
+  end
+end

metadata

@@ -0,0 +1,122 @@
+--- !ruby/object:Gem::Specification
+name: octopress-littlefoot
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Brandon Mathis
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-04-27 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.7'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.7'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: clash
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: octopress-debugger
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: octopress-ink
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.0.0.pre
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.0.0.pre
+description: Fancy footnote popovers with native Javascript
+email:
+- brandon@imathis.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE.txt
+- README.md
+- assets/config.yml
+- assets/javascripts/littlefoot.js
+- assets/stylesheets/_utils.scss
+- assets/stylesheets/littlefoot.scss
+- lib/octopress-littlefoot.rb
+- lib/octopress-littlefoot/version.rb
+homepage: https://github.com/octopress/littlefoot
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: Fancy footnote popovers with native Javascript
+test_files: []