From 1c0996227d681c5870fc09413261d882d17e547b Mon Sep 17 00:00:00 2001 From: Robert Lord Date: Fri, 24 Feb 2017 00:39:40 -0600 Subject: [PATCH 01/14] Add webkit-transform hack to fix chrome rendering, fixes #538 --- source/stylesheets/screen.css.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss index 1d216d36515..ca5de7713cc 100644 --- a/source/stylesheets/screen.css.scss +++ b/source/stylesheets/screen.css.scss @@ -324,6 +324,8 @@ html, body { // This is all the stuff with the light background in the left half of the page .content { + // fixes webkit rendering bug for some: see #538 + -webkit-transform: translateZ(0); // to place content above the dark box position: relative; z-index: 30; From e7f5144e4c091b57ae2be5a8357e8ec04b7477a9 Mon Sep 17 00:00:00 2001 From: Robert Lord Date: Fri, 24 Feb 2017 11:22:22 -0600 Subject: [PATCH 02/14] Make logo-margin work even if search is enabled, see #692 for details --- source/layouts/layout.erb | 2 +- source/stylesheets/_variables.scss | 2 +- source/stylesheets/screen.css.scss | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb index 7c2f3d94fee..59abe11c2bd 100644 --- a/source/layouts/layout.erb +++ b/source/layouts/layout.erb @@ -42,7 +42,7 @@ under the License.
- <%= image_tag "logo.png" %> + <%= image_tag "logo.png", class: 'logo' %> <% if language_tabs.any? %>
<% language_tabs.each do |lang| %> diff --git a/source/stylesheets/_variables.scss b/source/stylesheets/_variables.scss index ef999e56bed..b518e86ef35 100644 --- a/source/stylesheets/_variables.scss +++ b/source/stylesheets/_variables.scss @@ -54,7 +54,7 @@ $lang-select-pressed-text: #fff !default; // color of language tab text when mou //////////////////// $nav-width: 230px !default; // width of the navbar $examples-width: 50% !default; // portion of the screen taken up by code examples -$logo-margin: 20px !default; // margin between nav items and logo, ignored if search is active +$logo-margin: 0px !default; // margin below logo $main-padding: 28px !default; // padding to left and right of content & examples $nav-padding: 15px !default; // padding to left and right of navbar $nav-v-padding: 10px !default; // padding used vertically around search boxes and results diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss index ca5de7713cc..a0309cece00 100644 --- a/source/stylesheets/screen.css.scss +++ b/source/stylesheets/screen.css.scss @@ -110,8 +110,8 @@ html, body { } } - img+.tocify, .lang-selector+.tocify { - margin-top: $logo-margin; + .logo { + margin-bottom: $logo-margin; } .search-results { From 53e2f23e5c78ef78f05c7e41f6ee281ca16c091d Mon Sep 17 00:00:00 2001 From: Robert Lord Date: Fri, 24 Feb 2017 11:57:39 -0600 Subject: [PATCH 03/14] Static table of contents (#701) * Add showing/hiding submenus, fix sidebar styling, fix bug where includes wouldn't appear in ToC * Update ToC to highlight last header if page is scrolled to very bottom, fixes #280 * Set HTML title to current h1 section text, see #133 * Fix menu not opening on mobile * Add back increase toc item height on mobile * Fix padding bug * Add back in ToC sliding animation --- Gemfile | 1 + Gemfile.lock | 6 +- config.rb | 4 + lib/toc_data.rb | 30 + source/javascripts/all.js | 4 +- source/javascripts/all_nosearch.js | 15 +- source/javascripts/app/_lang.js | 14 +- source/javascripts/app/_search.js | 2 +- source/javascripts/app/_toc.js | 131 ++- source/javascripts/lib/_jquery.tocify.js | 1042 ---------------------- source/javascripts/lib/_jquery_ui.js | 566 ------------ source/layouts/layout.erb | 32 +- source/stylesheets/screen.css.scss | 52 +- 13 files changed, 202 insertions(+), 1697 deletions(-) create mode 100644 lib/toc_data.rb delete mode 100644 source/javascripts/lib/_jquery.tocify.js delete mode 100644 source/javascripts/lib/_jquery_ui.js diff --git a/Gemfile b/Gemfile index 1bff874249e..4007203cf98 100644 --- a/Gemfile +++ b/Gemfile @@ -7,3 +7,4 @@ gem 'middleman-autoprefixer', '~> 2.7.0' gem "middleman-sprockets", "~> 4.1.0" gem 'rouge', '~> 2.0.5' gem 'redcarpet', '~> 3.4.0' +gem 'nokogiri', '~> 1.6.8' diff --git a/Gemfile.lock b/Gemfile.lock index adacad9a85a..22eeabf73d8 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -79,7 +79,10 @@ GEM middleman-syntax (3.0.0) middleman-core (>= 3.2) rouge (~> 2.0) + mini_portile2 (2.1.0) minitest (5.10.1) + nokogiri (1.6.8.1) + mini_portile2 (~> 2.1.0) padrino-helpers (0.13.3.3) i18n (~> 0.6, >= 0.6.7) padrino-support (= 0.13.3.3) @@ -115,8 +118,9 @@ DEPENDENCIES middleman-autoprefixer (~> 2.7.0) middleman-sprockets (~> 4.1.0) middleman-syntax (~> 3.0.0) + nokogiri (~> 1.6.8) redcarpet (~> 3.4.0) rouge (~> 2.0.5) BUNDLED WITH - 1.14.3 + 1.14.5 diff --git a/config.rb b/config.rb index b7df3586bec..937f1cf887d 100644 --- a/config.rb +++ b/config.rb @@ -47,3 +47,7 @@ # Deploy Configuration # If you want Middleman to listen on a different port, you can set that below set :port, 4567 + +helpers do + require './lib/toc_data.rb' +end diff --git a/lib/toc_data.rb b/lib/toc_data.rb new file mode 100644 index 00000000000..841ae87e5ac --- /dev/null +++ b/lib/toc_data.rb @@ -0,0 +1,30 @@ +require 'nokogiri' + +def toc_data(page_content) + html_doc = Nokogiri::HTML::DocumentFragment.parse(page_content) + + # get a flat list of headers + headers = [] + html_doc.css('h1, h2, h3').each do |header| + headers.push({ + id: header.attribute('id').to_s, + content: header.content, + level: header.name[1].to_i, + children: [] + }) + end + + [3,2].each do |header_level| + header_to_nest = nil + headers = headers.reject do |header| + if header[:level] == header_level + header_to_nest[:children].push header if header_to_nest + true + else + header_to_nest = header if header[:level] == (header_level - 1) + false + end + end + end + headers +end \ No newline at end of file diff --git a/source/javascripts/all.js b/source/javascripts/all.js index ffaa9b01307..5f5d4067ba6 100644 --- a/source/javascripts/all.js +++ b/source/javascripts/all.js @@ -1,4 +1,2 @@ -//= require ./lib/_energize -//= require ./app/_lang +//= require ./all_nosearch //= require ./app/_search -//= require ./app/_toc diff --git a/source/javascripts/all_nosearch.js b/source/javascripts/all_nosearch.js index 818bc4e5095..b18c1d833d4 100644 --- a/source/javascripts/all_nosearch.js +++ b/source/javascripts/all_nosearch.js @@ -1,3 +1,16 @@ //= require ./lib/_energize -//= require ./app/_lang //= require ./app/_toc +//= require ./app/_lang + +$(function() { + loadToc($('#toc'), '.toc-link', '.toc-list-h2', 10); + setupLanguages($('body').data('languages')); + $('.content').imagesLoaded( function() { + window.recacheHeights(); + window.refreshToc(); + }); +}); + +window.onpopstate = function() { + activateLanguage(getLanguageFromQueryString()); +}; diff --git a/source/javascripts/app/_lang.js b/source/javascripts/app/_lang.js index 992180b7690..208f4e0521e 100644 --- a/source/javascripts/app/_lang.js +++ b/source/javascripts/app/_lang.js @@ -15,13 +15,14 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -(function (global) { +;(function () { 'use strict'; var languages = []; - global.setupLanguages = setupLanguages; - global.activateLanguage = activateLanguage; + window.setupLanguages = setupLanguages; + window.activateLanguage = activateLanguage; + window.getLanguageFromQueryString = getLanguageFromQueryString; function activateLanguage(language) { if (!language) return; @@ -36,7 +37,7 @@ under the License. $(".highlight.tab-" + language).show(); $(".lang-specific." + language).show(); - global.toc.calculateHeights(); + window.recacheHeights(); // scroll to the new location of the position if ($(window.location.hash).get(0)) { @@ -159,8 +160,5 @@ under the License. activateLanguage(language); return false; }); - window.onpopstate = function() { - activateLanguage(getLanguageFromQueryString()); - }; }); -})(window); +})(); diff --git a/source/javascripts/app/_search.js b/source/javascripts/app/_search.js index 5ace538d887..e373ac4d4f0 100644 --- a/source/javascripts/app/_search.js +++ b/source/javascripts/app/_search.js @@ -1,7 +1,7 @@ //= require ../lib/_lunr //= require ../lib/_jquery //= require ../lib/_jquery.highlight -(function () { +;(function () { 'use strict'; var content, searchResults; diff --git a/source/javascripts/app/_toc.js b/source/javascripts/app/_toc.js index 21d08000621..d4be8b2bc14 100644 --- a/source/javascripts/app/_toc.js +++ b/source/javascripts/app/_toc.js @@ -1,57 +1,106 @@ //= require ../lib/_jquery -//= require ../lib/_jquery_ui -//= require ../lib/_jquery.tocify //= require ../lib/_imagesloaded.min -(function (global) { +;(function () { 'use strict'; + var debounce = function(func, waitTime) { + var timeout = false; + return function() { + if (timeout === false) { + setTimeout(function() { + func(); + timeout = false; + }, waitTime); + timeout = true; + } + }; + }; + var closeToc = function() { $(".tocify-wrapper").removeClass('open'); $("#nav-button").removeClass('open'); }; - var makeToc = function() { - global.toc = $("#toc").tocify({ - selectors: 'h1, h2', - extendPage: false, - theme: 'none', - smoothScroll: false, - showEffectSpeed: 0, - hideEffectSpeed: 180, - ignoreSelector: '.toc-ignore', - highlightOffset: 60, - scrollTo: -1, - scrollHistory: true, - hashGenerator: function (text, element) { - return element.prop('id'); + function loadToc($toc, tocLinkSelector, tocListSelector, scrollOffset) { + var headerHeights = {}; + var pageHeight = 0; + var windowHeight = 0; + var originalTitle = document.title; + + var recacheHeights = function() { + headerHeights = {}; + pageHeight = $(document).height(); + windowHeight = $(window).height(); + + $toc.find(tocLinkSelector).each(function() { + var targetId = $(this).attr('href'); + if (targetId[0] === "#") { + headerHeights[targetId] = $(targetId).offset().top; + } + }); + }; + + var refreshToc = function() { + var currentTop = $(document).scrollTop() + scrollOffset; + + if (currentTop + windowHeight >= pageHeight) { + // at bottom of page, so just select last header by making currentTop very large + // this fixes the problem where the last header won't ever show as active if its content + // is shorter than the window height + currentTop = pageHeight + 1000; + } + + var best = null; + for (var name in headerHeights) { + if ((headerHeights[name] < currentTop && headerHeights[name] > headerHeights[best]) || best === null) { + best = name; + } } - }).data('toc-tocify'); - $("#nav-button").click(function() { - $(".tocify-wrapper").toggleClass('open'); - $("#nav-button").toggleClass('open'); - return false; - }); + var $best = $toc.find("[href='" + best + "']").first(); + if (!$best.hasClass("active")) { + $toc.find(".active").removeClass("active"); + $best.addClass("active"); + $best.parents(tocListSelector).addClass("active"); + $best.siblings(tocListSelector).addClass("active"); + $toc.find(tocListSelector).filter(":not(.active)").slideUp(150); + $toc.find(tocListSelector).filter(".active").slideDown(150); + if (window.history.pushState) { + window.history.pushState(null, "", best); + } + // TODO remove classnames + document.title = $best.data("title") + " – " + originalTitle; + } + }; - $(".page-wrapper").click(closeToc); - $(".tocify-item").click(closeToc); - }; + var makeToc = function() { + recacheHeights(); + refreshToc(); - // Hack to make already open sections to start opened, - // instead of displaying an ugly animation - function animate() { - setTimeout(function() { - toc.setOption('showEffectSpeed', 180); - }, 50); - } + $("#nav-button").click(function() { + $(".toc-wrapper").toggleClass('open'); + $("#nav-button").toggleClass('open'); + return false; + }); + $(".page-wrapper").click(closeToc); + $(".tocify-item").click(closeToc); + + // reload immediately after scrolling on toc click + $toc.find(tocLinkSelector).click(function() { + setTimeout(function() { + refreshToc(); + }, 0); + }); + + $(window).scroll(debounce(refreshToc, 200)); + $(window).resize(debounce(recacheHeights, 200)); + }; - $(function() { makeToc(); - animate(); - setupLanguages($('body').data('languages')); - $('.content').imagesLoaded( function() { - global.toc.calculateHeights(); - }); - }); -})(window); + window.recacheHeights = recacheHeights; + window.refreshToc = refreshToc; + } + + window.loadToc = loadToc; +})(); diff --git a/source/javascripts/lib/_jquery.tocify.js b/source/javascripts/lib/_jquery.tocify.js deleted file mode 100644 index 91cf637913a..00000000000 --- a/source/javascripts/lib/_jquery.tocify.js +++ /dev/null @@ -1,1042 +0,0 @@ -/* jquery Tocify - v1.8.0 - 2013-09-16 -* http://www.gregfranko.com/jquery.tocify.js/ -* Copyright (c) 2013 Greg Franko; Licensed MIT -* Modified lightly by Robert Lord to fix a bug I found, -* and also so it adds ids to headers -* also because I want height caching, since the -* height lookup for h1s and h2s was causing serious -* lag spikes below 30 fps */ - -// Immediately-Invoked Function Expression (IIFE) [Ben Alman Blog Post](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) that calls another IIFE that contains all of the plugin logic. I used this pattern so that anyone viewing this code would not have to scroll to the bottom of the page to view the local parameters that were passed to the main IIFE. -(function(tocify) { - - // ECMAScript 5 Strict Mode: [John Resig Blog Post](http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/) - "use strict"; - - // Calls the second IIFE and locally passes in the global jQuery, window, and document objects - tocify(window.jQuery, window, document); - -} - -// Locally passes in `jQuery`, the `window` object, the `document` object, and an `undefined` variable. The `jQuery`, `window` and `document` objects are passed in locally, to improve performance, since javascript first searches for a variable match within the local variables set before searching the global variables set. All of the global variables are also passed in locally to be minifier friendly. `undefined` can be passed in locally, because it is not a reserved word in JavaScript. -(function($, window, document, undefined) { - - // ECMAScript 5 Strict Mode: [John Resig Blog Post](http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/) - "use strict"; - - var tocClassName = "tocify", - tocClass = "." + tocClassName, - tocFocusClassName = "tocify-focus", - tocHoverClassName = "tocify-hover", - hideTocClassName = "tocify-hide", - hideTocClass = "." + hideTocClassName, - headerClassName = "tocify-header", - headerClass = "." + headerClassName, - subheaderClassName = "tocify-subheader", - subheaderClass = "." + subheaderClassName, - itemClassName = "tocify-item", - itemClass = "." + itemClassName, - extendPageClassName = "tocify-extend-page", - extendPageClass = "." + extendPageClassName; - - // Calling the jQueryUI Widget Factory Method - $.widget("toc.tocify", { - - //Plugin version - version: "1.8.0", - - // These options will be used as defaults - options: { - - // **context**: Accepts String: Any jQuery selector - // The container element that holds all of the elements used to generate the table of contents - context: "body", - - // **ignoreSelector**: Accepts String: Any jQuery selector - // A selector to any element that would be matched by selectors that you wish to be ignored - ignoreSelector: null, - - // **selectors**: Accepts an Array of Strings: Any jQuery selectors - // The element's used to generate the table of contents. The order is very important since it will determine the table of content's nesting structure - selectors: "h1, h2, h3", - - // **showAndHide**: Accepts a boolean: true or false - // Used to determine if elements should be shown and hidden - showAndHide: true, - - // **showEffect**: Accepts String: "none", "fadeIn", "show", or "slideDown" - // Used to display any of the table of contents nested items - showEffect: "slideDown", - - // **showEffectSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast" - // The time duration of the show animation - showEffectSpeed: "medium", - - // **hideEffect**: Accepts String: "none", "fadeOut", "hide", or "slideUp" - // Used to hide any of the table of contents nested items - hideEffect: "slideUp", - - // **hideEffectSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast" - // The time duration of the hide animation - hideEffectSpeed: "medium", - - // **smoothScroll**: Accepts a boolean: true or false - // Determines if a jQuery animation should be used to scroll to specific table of contents items on the page - smoothScroll: true, - - // **smoothScrollSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast" - // The time duration of the smoothScroll animation - smoothScrollSpeed: "medium", - - // **scrollTo**: Accepts Number (pixels) - // The amount of space between the top of page and the selected table of contents item after the page has been scrolled - scrollTo: 0, - - // **showAndHideOnScroll**: Accepts a boolean: true or false - // Determines if table of contents nested items should be shown and hidden while scrolling - showAndHideOnScroll: true, - - // **highlightOnScroll**: Accepts a boolean: true or false - // Determines if table of contents nested items should be highlighted (set to a different color) while scrolling - highlightOnScroll: true, - - // **highlightOffset**: Accepts a number - // The offset distance in pixels to trigger the next active table of contents item - highlightOffset: 40, - - // **theme**: Accepts a string: "bootstrap", "jqueryui", or "none" - // Determines if Twitter Bootstrap, jQueryUI, or Tocify classes should be added to the table of contents - theme: "bootstrap", - - // **extendPage**: Accepts a boolean: true or false - // If a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item, then the page height is increased - extendPage: true, - - // **extendPageOffset**: Accepts a number: pixels - // How close to the bottom of the page a user must scroll before the page is extended - extendPageOffset: 100, - - // **history**: Accepts a boolean: true or false - // Adds a hash to the page url to maintain history - history: true, - - // **scrollHistory**: Accepts a boolean: true or false - // Adds a hash to the page url, to maintain history, when scrolling to a TOC item - scrollHistory: false, - - // **hashGenerator**: How the hash value (the anchor segment of the URL, following the - // # character) will be generated. - // - // "compact" (default) - #CompressesEverythingTogether - // "pretty" - #looks-like-a-nice-url-and-is-easily-readable - // function(text, element){} - Your own hash generation function that accepts the text as an - // argument, and returns the hash value. - hashGenerator: "compact", - - // **highlightDefault**: Accepts a boolean: true or false - // Set's the first TOC item as active if no other TOC item is active. - highlightDefault: true - - }, - - // _Create - // ------- - // Constructs the plugin. Only called once. - _create: function() { - - var self = this; - - self.tocifyWrapper = $('.tocify-wrapper'); - self.extendPageScroll = true; - - // Internal array that keeps track of all TOC items (Helps to recognize if there are duplicate TOC item strings) - self.items = []; - - // Generates the HTML for the dynamic table of contents - self._generateToc(); - - // Caches heights and anchors - self.cachedHeights = [], - self.cachedAnchors = []; - - // Adds CSS classes to the newly generated table of contents HTML - self._addCSSClasses(); - - self.webkit = (function() { - - for(var prop in window) { - - if(prop) { - - if(prop.toLowerCase().indexOf("webkit") !== -1) { - - return true; - - } - - } - - } - - return false; - - }()); - - // Adds jQuery event handlers to the newly generated table of contents - self._setEventHandlers(); - - // Binding to the Window load event to make sure the correct scrollTop is calculated - $(window).load(function() { - - // Sets the active TOC item - self._setActiveElement(true); - - // Once all animations on the page are complete, this callback function will be called - $("html, body").promise().done(function() { - - setTimeout(function() { - - self.extendPageScroll = false; - - },0); - - }); - - }); - - }, - - // _generateToc - // ------------ - // Generates the HTML for the dynamic table of contents - _generateToc: function() { - - // _Local variables_ - - // Stores the plugin context in the self variable - var self = this, - - // All of the HTML tags found within the context provided (i.e. body) that match the top level jQuery selector above - firstElem, - - // Instantiated variable that will store the top level newly created unordered list DOM element - ul, - ignoreSelector = self.options.ignoreSelector; - - // If the selectors option has a comma within the string - if(this.options.selectors.indexOf(",") !== -1) { - - // Grabs the first selector from the string - firstElem = $(this.options.context).find(this.options.selectors.replace(/ /g,"").substr(0, this.options.selectors.indexOf(","))); - - } - - // If the selectors option does not have a comman within the string - else { - - // Grabs the first selector from the string and makes sure there are no spaces - firstElem = $(this.options.context).find(this.options.selectors.replace(/ /g,"")); - - } - - if(!firstElem.length) { - - self.element.addClass(hideTocClassName); - - return; - - } - - self.element.addClass(tocClassName); - - // Loops through each top level selector - firstElem.each(function(index) { - - //If the element matches the ignoreSelector then we skip it - if($(this).is(ignoreSelector)) { - return; - } - - // Creates an unordered list HTML element and adds a dynamic ID and standard class name - ul = $("