hiifong/pmd
1
0
Fork 0
forked from phoedos/pmd
Code Pull Requests Activity

[doc] Upgrade Shuffle

Browse Source
This commit is contained in:
Andreas Dangel 2020-09-19 20:21:53 +02:00
parent 2e22335c95
commit 8ac61c4fc5
17 changed files with 128 additions and 2067 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
docs/_includes/custom/panel_scroll.html
View File

@ -1,27 +0,0 @@
<script src="assets/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
// Adds a pretty animation to links to shuffle panels
$(function () {
$("a[href^='#shuffle-panel']").click(function () {
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '')
&& location.hostname === this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('#topbar-content-offset').animate({
scrollTop: $('#grid-rule').position().top
}, {
duration: 500,
complete: function () {
target.effect("highlight", {}, 1000);
}
});
return false;
}
}
});
});
</script>

25
docs/_includes/custom/shuffle_panel.html
View File

@ -1,3 +1,4 @@
{% comment %}
<!-- Argument summary: -->
<!-- tags: comma-separated tags determining the pages included in the panel -->
@ -5,7 +6,6 @@
<!-- A page is included if it has all the include tags and none of the exclude tags -->
<!-- title: Display title of the panel -->
<!-- description: Description of the panel -->
<!-- datagroups: json array containing the data groups for the shuffle logic -->
@ -13,7 +13,7 @@
<!-- fa-style (optional) : Name of the fontawesome style, e.g. "fas" (for solid), or "fab" (for brands). Default is "fas" -->
<!-- fa-icon (optional) : Name of the fontwaresome icon to use, as a css class, eg. "fa-list" -->
<!-- titlemaker (optional) : name of a variable that's evaluated to determine the displayed title of the page. Default is page.title -->
{% endcomment %}
{% assign titlemaker = include.titlemaker | default: "page.title" %}
{% assign include_tags = include.tags | split: "," %}
@ -23,21 +23,20 @@
{% assign panel_id = include.title | downcase | strip | replace: ' ', '-' | prepend: "shuffle-panel-" %}
<div class="col-xs-6 col-sm-4 col-md-4" data-groups='{{ include.datagroups }}' id="{{ panel_id }}">
<div class="panel panel-default">
<div class="card">
{% if include.fa-icon != "" and include.fa-icon != nil %}
<div class="panel-heading text-center">
<span class="fa-stack fa-5x">
<i class="fas fa-circle fa-stack-2x text-secondary"></i>
<i class="{{ include.fa-style | default: "fas" }} {{ include.fa-icon }} fa-stack-1x fa-inverse"></i>
</span>
<div class="card-header text-center">
<p class="fa-stack fa-5x">
<i class="fas fa-circle fa-stack-2x text-secondary"></i>
<i class="{{ include.fa-style | default: "fas" }} {{ include.fa-icon }} fa-stack-1x fa-inverse"></i>
</p>
</div>
{% endif %}
<div class="card-header text-center">
{{ include.title }}
</div>
<div class="panel-heading text-center">{{ include.title }}</div>
<div class="panel-body">
<div class="card-body">
<p class="landing-page cat-description">
{{ include.description }}
</p>

139
docs/_includes/initialize_shuffle.html
View File

@ -1,139 +0,0 @@
<script type="text/javascript">
$(document).ready(function() {
$('#toc').toc({ minimumHeaders: 0, listType: 'ul', showSpeed: 0, headers: 'h2,h3,h4' });
});
</script>
<!-- shuffle -->
<script>
var shuffleme = (function( $ ) {
'use strict';
var $grid = $('#grid'),
$filterOptions = $('.filter-options'),
$sizer = $grid.find('.shuffle_sizer'),
init = function() {
// None of these need to be executed synchronously
setTimeout(function() {
listen();
setupFilters();
}, 100);
// instantiate the plugin
$grid.shuffle({
itemSelector: '[class*="col-"]',
sizer: $sizer
});
},
// Set up button clicks
setupFilters = function() {
var $btns = $filterOptions.children().add('.topical-filter');
$btns.on('click', function() {
var $this = $(this),
isActive = $this.hasClass( 'active' ),
isMainTopicButton = $this.hasClass('topical-filter'),
group = isActive ? 'all' : $this.data('group');
// Hide current label, show current label in title
if ( !isActive ) {
$('.filter-options .active').add('.topical-filter.active').removeClass('active');
}
$this.toggleClass('active');
// Filter elements
$grid.shuffle( 'shuffle', group );
// scroll to the grid
if ( isMainTopicButton && !isActive ) {
$('html, body').animate({
scrollTop: $("#grid-rule").offset().top
}, 500);
}
});
$btns = null;
},
// Re layout shuffle when images load. This is only needed
// below 768 pixels because the .picture-item height is auto and therefore
// the height of the picture-item is dependent on the image
// I recommend using imagesloaded to determine when an image is loaded
// but that doesn't support IE7
listen = function() {
var debouncedLayout = $.throttle( 300, function() {
$grid.shuffle('update');
});
// Get all images inside shuffle
$grid.find('img').each(function() {
var proxyImage;
// Image already loaded
if ( this.complete && this.naturalWidth !== undefined ) {
return;
}
// If none of the checks above matched, simulate loading on detached element.
proxyImage = new Image();
$( proxyImage ).on('load', function() {
$(this).off('load');
debouncedLayout();
});
proxyImage.src = this.src;
});
// Because this method doesn't seem to be perfect.
setTimeout(function() {
debouncedLayout();
}, 500);
};
return {
init: init
};
}( jQuery ));
$(document).ready(function() {
shuffleme.init();
});
</script>
<!-- new attempt-->
<script>
$(document).ready(function() {
/* initialize shuffle plugin */
var $grid = $('#grid');
$grid.shuffle({
itemSelector: '.item' // the selector for the items in the grid
});
});</script>
<script>
$('#filter a').click(function (e) {
e.preventDefault();
// set active class
$('#filter a').removeClass('active');
$(this).addClass('active');
// get group name from clicked item
var groupName = $(this).attr('data-group');
// reshuffle grid
$grid.shuffle('shuffle', groupName );
});</script>

6
docs/assets/README.md
View File

@ -34,3 +34,9 @@ https://jqueryui.com/resources/download/jquery-ui-1.12.1.zip
## Simple Jekyll Search
https://github.com/christian-fei/Simple-Jekyll-Search
## Shuffle
https://github.com/Vestride/Shuffle
https://github.com/Vestride/Shuffle/releases/tag/v5.2.3
Example: https://vestride.github.io/Shuffle/

2
docs/assets/Shuffle-5.2.3/dist/shuffle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/assets/Shuffle-5.2.3/dist/shuffle.min.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
docs/css/customstyles.css
View File

@ -792,9 +792,6 @@ dd {margin-left:20px;}
margin:0px;
margin-bottom:6px;
}
.panel-heading {
font-weight: bold;
}
.note code, .alert code, .warning code, div#toc code, h2 code, h3 code, h4 code {
color: inherit;

13
docs/css/pmd-customstyles.css
View File

@ -1,7 +1,4 @@
.panel-body {
padding-top: 0cm;
}
.landing-page.cat-title {
margin-bottom: .5cm;
@ -12,6 +9,16 @@
margin-top: .4cm;
}
#grid > div {
margin: 10px 0px;
}
#grid .card-body {
padding-top: 0cm;
}
#grid .card-header {
font-weight: bold;
}
/* Offsets contents by the height of the nav bar */
#topbar-content-offset {
overflow: scroll;

22
docs/index.md
View File

@ -15,10 +15,9 @@ author: Jeff Jensen <jjensen@apache.org>, Andreas Dangel <andreas.dangel@adangel
{% unless site.output == "pdf" %}
<script src="js/jquery.shuffle.min.js"></script>
<script src="js/jquery.ba-throttle-debounce.min.js"></script>
{% include custom/panel_scroll.html %}
<script src="assets/Shuffle-5.2.3/dist/shuffle.min.js"></script>
<script src="assets/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="js/shuffle.js"></script>
{% endunless %}
@ -76,7 +75,6 @@ you may also use the search bar in the top right, or the sidebar on the left.
<div class="container-fluid" >
<div id="grid" class="row">
<!-- TODO the "getting started" panel is not that useful. It would be better to make a page series. -->
@ -138,21 +136,11 @@ you may also use the search bar in the top right, or the sidebar on the left.
description=""
%}
<!-- sizer -->
<div class="col-xs-6 col-sm-4 col-md-1 shuffle_sizer"></div>
</div>
<!-- sizer -->
<div class="col-xs-6 col-sm-4 col-md-1 shuffle_sizer"></div>
</div>
<!-- {% include image.html file="pmd-logo-big.png" alt="PMD Logo" %} -->
{% unless site.output == "pdf" %}
{% include initialize_shuffle.html %}
{% endunless %}
{% include links.html %}

6
docs/js/jquery-ui.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
docs/js/jquery.ba-throttle-debounce.min.js vendored
View File

@ -1,9 +0,0 @@
/*
* jQuery throttle / debounce - v1.1 - 3/7/2010
* http://benalman.com/projects/jquery-throttle-debounce-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);

7
docs/js/jquery.localScroll.min.js vendored
View File

@ -1,7 +0,0 @@
/**
* Copyright (c) 2007-2014 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
* Licensed under MIT
* @author Ariel Flesler
* @version 1.3.5
*/
;(function(a){if(typeof define==='function'&&define.amd){define(['jquery'],a)}else{a(jQuery)}}(function($){var g=location.href.replace(/#.*/,'');var h=$.localScroll=function(a){$('body').localScroll(a)};h.defaults={duration:1000,axis:'y',event:'click',stop:true,target:window};$.fn.localScroll=function(a){a=$.extend({},h.defaults,a);if(a.hash&&location.hash){if(a.target)window.scrollTo(0,0);scroll(0,location,a)}return a.lazy?this.on(a.event,'a,area',function(e){if(filter.call(this)){scroll(e,this,a)}}):this.find('a,area').filter(filter).bind(a.event,function(e){scroll(e,this,a)}).end().end();function filter(){return!!this.href&&!!this.hash&&this.href.replace(this.hash,'')==g&&(!a.filter||$(this).is(a.filter))}};h.hash=function(){};function scroll(e,a,b){var c=a.hash.slice(1),elem=document.getElementById(c)||document.getElementsByName(c)[0];if(!elem)return;if(e)e.preventDefault();var d=$(b.target);if(b.lock&&d.is(':animated')||b.onBefore&&b.onBefore(e,elem,d)===false)return;if(b.stop)d._scrollable().stop(true);if(b.hash){var f=elem.id===c?'id':'name',$a=$('<a> </a>').attr(f,c).css({position:'absolute',top:$(window).scrollTop(),left:$(window).scrollLeft()});elem[f]='';$('body').prepend($a);location.hash=a.hash;$a.remove();elem[f]=c}d.scrollTo(elem,b).trigger('notify.serialScroll',[elem])};return h}));

8
docs/js/jquery.navgoco.min.js vendored
View File

@ -1,8 +0,0 @@
/*
* jQuery Navgoco Menus Plugin v0.2.1 (2014-04-11)
* https://github.com/tefra/navgoco
*
* Copyright (c) 2014 Chris T (@tefra)
* BSD - https://github.com/tefra/navgoco/blob/master/LICENSE-BSD
*/
!function(a){"use strict";var b=function(b,c,d){return this.el=b,this.$el=a(b),this.options=c,this.uuid=this.$el.attr("id")?this.$el.attr("id"):d,this.state={},this.init(),this};b.prototype={init:function(){var b=this;b._load(),b.$el.find("ul").each(function(c){var d=a(this);d.attr("data-index",c),b.options.save&&b.state.hasOwnProperty(c)?(d.parent().addClass(b.options.openClass),d.show()):d.parent().hasClass(b.options.openClass)?(d.show(),b.state[c]=1):d.hide()});var c=a("<span></span>").prepend(b.options.caretHtml),d=b.$el.find("li > a");b._trigger(c,!1),b._trigger(d,!0),b.$el.find("li:has(ul) > a").prepend(c)},_trigger:function(b,c){var d=this;b.on("click",function(b){b.stopPropagation();var e=c?a(this).next():a(this).parent().next(),f=!1;if(c){var g=a(this).attr("href");f=void 0===g||""===g||"#"===g}if(e=e.length>0?e:!1,d.options.onClickBefore.call(this,b,e),!c||e&&f)b.preventDefault(),d._toggle(e,e.is(":hidden")),d._save();else if(d.options.accordion){var h=d.state=d._parents(a(this));d.$el.find("ul").filter(":visible").each(function(){var b=a(this),c=b.attr("data-index");h.hasOwnProperty(c)||d._toggle(b,!1)}),d._save()}d.options.onClickAfter.call(this,b,e)})},_toggle:function(b,c){var d=this,e=b.attr("data-index"),f=b.parent();if(d.options.onToggleBefore.call(this,b,c),c){if(f.addClass(d.options.openClass),b.slideDown(d.options.slide),d.state[e]=1,d.options.accordion){var g=d.state=d._parents(b);g[e]=d.state[e]=1,d.$el.find("ul").filter(":visible").each(function(){var b=a(this),c=b.attr("data-index");g.hasOwnProperty(c)||d._toggle(b,!1)})}}else f.removeClass(d.options.openClass),b.slideUp(d.options.slide),d.state[e]=0;d.options.onToggleAfter.call(this,b,c)},_parents:function(b,c){var d={},e=b.parent(),f=e.parents("ul");return f.each(function(){var b=a(this),e=b.attr("data-index");return e?void(d[e]=c?b:1):!1}),d},_save:function(){if(this.options.save){var b={};for(var d in this.state)1===this.state[d]&&(b[d]=1);c[this.uuid]=this.state=b,a.cookie(this.options.cookie.name,JSON.stringify(c),this.options.cookie)}},_load:function(){if(this.options.save){if(null===c){var b=a.cookie(this.options.cookie.name);c=b?JSON.parse(b):{}}this.state=c.hasOwnProperty(this.uuid)?c[this.uuid]:{}}},toggle:function(b){var c=this,d=arguments.length;if(1>=d)c.$el.find("ul").each(function(){var d=a(this);c._toggle(d,b)});else{var e,f={},g=Array.prototype.slice.call(arguments,1);d--;for(var h=0;d>h;h++){e=g[h];var i=c.$el.find('ul[data-index="'+e+'"]').first();if(i&&(f[e]=i,b)){var j=c._parents(i,!0);for(var k in j)f.hasOwnProperty(k)||(f[k]=j[k])}}for(e in f)c._toggle(f[e],b)}c._save()},destroy:function(){a.removeData(this.$el),this.$el.find("li:has(ul) > a").unbind("click"),this.$el.find("li:has(ul) > a > span").unbind("click")}},a.fn.navgoco=function(c){if("string"==typeof c&&"_"!==c.charAt(0)&&"init"!==c)var d=!0,e=Array.prototype.slice.call(arguments,1);else c=a.extend({},a.fn.navgoco.defaults,c||{}),a.cookie||(c.save=!1);return this.each(function(f){var g=a(this),h=g.data("navgoco");h||(h=new b(this,d?a.fn.navgoco.defaults:c,f),g.data("navgoco",h)),d&&h[c].apply(h,e)})};var c=null;a.fn.navgoco.defaults={caretHtml:"",accordion:!1,openClass:"open",save:!0,cookie:{name:"navgoco",expires:!1,path:"/"},slide:{duration:400,easing:"swing"},onClickBefore:a.noop,onClickAfter:a.noop,onToggleBefore:a.noop,onToggleAfter:a.noop}}(jQuery);

7
docs/js/jquery.scrollTo.min.js vendored
View File

@ -1,7 +0,0 @@
/**
* Copyright (c) 2007-2014 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
* Licensed under MIT
* @author Ariel Flesler
* @version 1.4.14
*/
;(function(k){'use strict';k(['jquery'],function($){var j=$.scrollTo=function(a,b,c){return $(window).scrollTo(a,b,c)};j.defaults={axis:'xy',duration:0,limit:!0};j.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(f,g,h){if(typeof g=='object'){h=g;g=0}if(typeof h=='function')h={onAfter:h};if(f=='max')f=9e9;h=$.extend({},j.defaults,h);g=g||h.duration;h.queue=h.queue&&h.axis.length>1;if(h.queue)g/=2;h.offset=both(h.offset);h.over=both(h.over);return this._scrollable().each(function(){if(f==null)return;var d=this,$elem=$(d),targ=f,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=win?$(targ):$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}var e=$.isFunction(h.offset)&&h.offset(d,targ)||h.offset;$.each(h.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=j.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(h.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=e[pos]||0;if(h.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*h.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(h.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&h.queue){if(old!=attr[key])animate(h.onAfterFirst);delete attr[key]}});animate(h.onAfter);function animate(a){$elem.animate(attr,g,h.easing,a&&function(){a.call(this,targ,h)})}}).end()};j.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return $.isFunction(a)||$.isPlainObject(a)?a:{top:a,left:a}}return j})}(typeof define==='function'&&define.amd?define:function(a,b){if(typeof module!=='undefined'&&module.exports){module.exports=b(require('jquery'))}else{b(jQuery)}}));

1588
docs/js/jquery.shuffle.min.js vendored
View File

File diff suppressed because it is too large Load Diff

240
docs/js/mydoc_scroll.html
View File

@ -1,240 +0,0 @@
---
title: Scroll layout
type: scroll
keywords: json, scrolling, scrollto, jquery plugin
tags: special_layouts
last_updated: November 30, 2015
summary: "This page demonstrates how you the integration of a script called ScrollTo, which is used here to link definitions of a JSON code sample to a list of definitions for that particular term. The scenario here is that the JSON blocks are really long, with extensive nesting and subnesting, which makes it difficult for tables below the JSON to adequately explain the term in a usable way."
---
{% if site.output == "pdf" %}
{{site.data.alerts.note}} The content on this page doesn't display well on PDF, but I included it anyway so you could see the problems this layout poses if you're including it in PDF. {{site.data.alerts.end}}
{% endif %}
{% if site.output == "web" %}
<script src="../js/jquery.scrollTo.min.js"></script>
<!-- local scroll must come after scrollTo, because localScroll is based on scrollTo, which is based on jQuery -->
<script src="../js/jquery.localScroll.min.js"></script>
<script>
$( document ).ready(function() {
$('#small-box-links').localScroll({
target:'#definition-box-container',
showSpeed: 1000,
hash: true,
easing: 'swing',
onAfter:function(){
$("#definition-box-container div a").addClass("active");
$("#definition-box-container div a").removeClass("active");
$("#definition-box-container div").removeClass("active");
$(window.location.hash).addClass("active");
}
});
});
</script>
<!-- documentation for localScroll function: http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html -->
<style type="text/css">
#definition-box-container {
border: 0px solid #dedede;
border-radius: 4px;
max-height: 500px;
overflow: scroll;
padding-left:5px;
border-radius:5px;
}
#json-box-container {
border: 1px solid #dedede;
border-radius: 4px;
max-height:500px;
overflow: scroll;
}
#small-box-links {
float: left;
}
#definition-box-container .active {
background-color: #FFFBCC;
}
div#definition-box-container div {
padding: 10px;
}
@media (min-height: 700px) {
#json-box-container {
max-height:500px;
}
#definition-box-container {
max-height: 500px;
}
}
@media (min-height: 800px) {
#json-box-container {
max-height:600px;
}
#definition-box-container {
max-height: 600px;
}
}
@media (min-height: 900px) {
#json-box-container {
max-height:700px;
}
#definition-box-container {
max-height: 700px;
}
}
@media (min-height: 1000px) {
#json-box-container {
max-height:800px;
}
#definition-box-container {
max-height: 800px;
}
}
@media (min-height: 1100px) {
#json-box-container {
max-height:900px;
}
#definition-box-container {
max-height: 900px;
}
}
</style>
<div class="container">
<div class="row">
<div id="small-box-links">
<div class="col-md-6">
<div id="json-box-container">
<pre>
{
<a href="#apples">"apples"</a>: "red fruit at the store",
<a href="#bananas">"bananas"</a>: "yellow bananas in a bunch",
<a href="#carrots">"carrots"</a>: "orange vegetables that grow in the ground",
<a href="#dingbats">"dingbats"</a>: "a type of character symbol on a computer",
<a href="#eggs">"eggs"</a>: "chickens lay them, and people eat them",
<a href="#falafel">"falafel"</a>: "a Mediterranean sandwich consisting of lots of different stuff i don't know much about",
<a href="#giraffe">"giraffe"</a>: "tall animal, has purple tongue",
<a href="#hippo">"hippo"</a>: "surprisingly dangerous amphibian",
<a href="#igloo">"igloo"</a>: "an ice shelter made by eskimos",
<a href="#jeep">"jeep</a>: "the only car that starts with a j",
<a href="#kilt">"kilt"</a>: "something worn by scottish people, not a dress",
<a href="#lamp">"lamp"</a>: "you use it to read by your bedside at night"
<a href="#manifold">"manifold"</a>: "an intake mechanism on a car, like a valve, i think",
<a href="#octopus">"octopus"</a>: "eight tentacles, shoots ink, lives in dark caves, very mysterious",
<a href="#paranoia">"paranoia"</a>: "the constant feeling that others are out to get you, conspiring against your success",
<a href="#qui">"qui"</a>: "a life force that runs through your body",
<a href="#radical">"radical"</a>: "someone who opposes the status quo in major ways",
<a href="#silly">"silly"</a>: "how I feel writing this dummy copy",
<a href="#taffy">"taffy"</a>: "the sweets children like the most and dentists hate the worst",
<a href="#umbrella">"umbrella"</a>: "an invention that has not had any advancements in 200 years",
<a href="#vampire">"vampire"</a>: "a paranormal figure that is surprisingly in vogue despite its basic nature",
<a href="#washington">"washington"</a>: "the place where tom was born",
<a href="#xylophone">"xylophone"</a>: "some kind of pinging instrument used to sound chime-like notes",
<a href="#yahoo">"yahoo"</a>: "an expression of exuberance, said under breath when something works right",
<a href="#zeta">"zeta"</a>: "the way british people pronounce z",
<a href="#alpha">"alpha"</a>: "the original letter of the alphabet, which has since come to mean the first. however, i think the original symbol of alpha is actually an ox. it is somewhat of a mystery to linquists as to the exact origin of the letter alpha, but it basically represents the dawn of the alphabet, which proved to be a huge step forward for human thought and expression.",
<a href="#beta">"beta"</a>: "the period of time when something is finished but undergoing testing by a group of people.",
<a href="#cappa">"cappa"</a>: "how italians refer to their baseball caps",
<a href="#dunno">"dunno"</a>: "informal expression for 'don't know'"
}
</pre>
</div><!-- end json-box-container-->
</div> <!-- end col-md-6-->
<div class="col-md-3">
<div id="definition-box-container">
<div id="apples"><h5>apples</h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer magna massa, euismod sed rutrum at, ullamcorper quis tellus. Vestibulum erat purus, aliquet sit amet pellentesque eget, tempus at ante. Nulla justo nisi, elementum nec nisi eget, consectetur varius tortor. </div>
<div id="bananas"><h5>bananas</h5>Curabitur quis nibh sed eros viverra tempus et quis lorem. Nulla convallis sit amet risus vitae rutrum. Nulla at faucibus lectus. Pellentesque tortor nisl, interdum ac quam non, egestas congue massa. Vestibulum non porttitor lacus. Nam tincidunt arcu lectus. Donec eget ornare neque, hendrerit ornare lectus. In ac pretium odio.</div>
<div id="carrots"><h5>carrots</h5>Vivamus pulvinar vestibulum pharetra. Vivamus vitae diam iaculis, posuere mi sed, dignissim massa. Nunc vitae aliquet urna. Proin sed pulvinar ex. Maecenas nisl lorem, rutrum sit amet hendrerit sed, posuere at odio. Sed consectetur semper tristique. Vivamus finibus varius felis at convallis. Fusce in dictum nunc.</div>
<div id="dingbats"><h5>dingbats</h5>Curabitur feugiat lorem eget elit ullamcorper tincidunt. In euismod diam aliquet tortor fermentum tempor. Fusce quam felis, commodo viverra orci vitae, scelerisque aliquet risus. </div>
<div id="eggs"><h5>eggs</h5>Duis est nunc, fringilla eu ligula et, varius dignissim dui. Vivamus in tellus vitae ipsum vehicula fermentum at congue tellus. Suspendisse fermentum, magna vitae aliquet sodales, tellus nisi rutrum arcu, vitae auctor dolor quam ac tellus. Cras posuere augue erat, in sagittis quam lacinia id.</div>
<div id="falafel"><h5>falafel</h5>Praesent auctor a enim non lacinia. Integer sodales aliquet mi vel dapibus. Donec consequat justo eget nisi lacinia, eu sodales ligula molestie. Sed sapien nulla, rhoncus at elementum a, </div>
<div id="giraffe"><h5>giraffe</h5>Nullam venenatis at lectus sed pharetra. Sed hendrerit ligula lectus, non pellentesque diam faucibus sit amet. Aliquam dictum hendrerit pellentesque. Cras eu nisl sagittis, faucibus velit sit amet, sagittis odio. Donec vulputate ex vitae purus</div>
<div id="hippo"><h5>hippo</h5>Cras nec pretium nulla. Suspendisse tempus tortor vel venenatis pulvinar. Integer varius tempor enim fringilla tincidunt. Phasellus magna turpis, auctor vitae elit eget, fringilla pellentesque est. Phasellus ut porta risus. Curabitur iaculis sapien sed venenatis auctor. Integer eu orci at lectus eleifend auctor id rutrum urna.</div>
<div id="igloo"><h5>igloo</h5>Suspendisse tempus tortor vel venenatis pulvinar. Integer varius tempor enim fringilla tincidunt. Phasellus magna turpis, auctor vitae elit eget, fringilla pellentesque est. Phasellus ut porta risus. </div>
<div id="jeep"><h5>jeep</h5>Nulla vitae metus rutrum, condimentum orci nec, maximus est. Aenean sit amet ante nec elit dignissim faucibus eget quis quam. </div>
<div id="kilt"><h5>kilt</h5>Morbi maximus, erat vel rhoncus sagittis, dolor purus dignissim ante, sit amet pharetra ex justo vitae ipsum. Nulla consequat interdum neque</div>
<div id="lamp"><h5>lamp</h5>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquam dapibus blandit. Donec porta, enim hendrerit venenatis vulputate, orci diam lacinia nibh, faucibus rutrum dolor dui ut quam.</div>
<div id="manifold"><h5>manifold</h5>Donec finibus massa vel nisi ullamcorper, vitae ornare enim euismod. Aliquam auctor quam erat. Duis interdum rutrum orci, ac interdum urna pharetra eget.</div>
<div id="octopus"><h5>octopus</h5>Nulla id egestas enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Curabitur eu lobortis ligula.</div>
<div id="paranoia"><h5>paranoia</h5>Aenean hendrerit mauris ipsum, non laoreet ipsum luctus vel. Curabitur tristique auctor elit ut pulvinar. Quisque arcu arcu, condimentum aliquam sodales nec, dignissim nec justo. Nunc tristique sem felis, pharetra euismod lorem volutpat sed. Ut porttitor metus sit amet elit rhoncus semper.</div>
<div id="qui"><h5>qui</h5>Quisque rhoncus cursus felis vel elementum. Vestibulum dignissim molestie tortor nec facilisis. Praesent a nibh condimentum, porta nulla egestas, auctor eros</div>
<div id="radical"><h5>radical</h5>Etiam hendrerit interdum tellus, at aliquet sapien egestas in. Aenean eu urna nisl. Cras vitae risus pharetra, elementum mauris nec, auctor lectus. Fusce pellentesque venenatis dictum. Proin at augue at mauris finibus semper ultricies sed eros.</div>
<div id="silly"><h5>silly</h5>Praesent pulvinar consequat posuere. Morbi egestas rhoncus felis, id fermentum metus lobortis in. Vestibulum nibh orci, euismod eget vestibulum nec, vehicula vitae tortor. Aenean ullamcorper enim nunc, eu auctor ligula auctor eget.</div>
<div id="taffy"><h5>taffy</h5>Etiam et arcu vel lacus aliquet lobortis in in massa. Nunc non mollis elit. Aenean accumsan orci quis risus aliquam, non gravida nulla molestie. Mauris pharetra libero et magna aliquam aliquam. Integer quis luctus dolor. </div>
<div id="umbrella"><h5>umbrella</h5>Fusce molestie finibus malesuada. Nullam ac egestas quam, id venenatis ligula. Pellentesque pulvinar elit et vestibulum fringilla. Cras volutpat sed quam ornare scelerisque. Vivamus volutpat ante pretium scelerisque tempus. Etiam venenatis tempor nisl dignissim sollicitudin. Curabitur ac risus vitae dolor pretium posuere vel vitae diam. Donec in odio arcu.</div>
<div id="vampire"><h5>vampire</h5>Vestibulum pretium condimentum commodo. Integer placerat leo non ipsum ultrices, ac convallis elit varius. Vestibulum ultricies, justo eu rutrum molestie, quam arcu euismod sapien, vel gravida ipsum nulla eget erat. </div>
<div id="washington"><h5>washington</h5>Nunc ac quam eu risus dictum sodales. Nam ac risus iaculis, aliquet sem eu, mollis mauris. Curabitur pretium facilisis orci ut lacinia. Sed fermentum leo a odio blandit rutrum. Phasellus at nibh vel odio interdum vulputate ac eget urna. Nam eu arcu dapibus, sodales ligula nec, volutpat ipsum. Suspendisse auctor tellus vitae libero euismod venenatis. </div>
<div id="xylophone"><h5>xylophone</h5>Sed molestie lobortis ante sit amet hendrerit. Sed pharetra nisi sed interdum pulvinar. Nunc efficitur erat non aliquam mattis. Sed id nisl mattis lacus vehicula volutpat vitae vel massa. Curabitur interdum velit odio, vitae sollicitudin nunc rutrum non. </div>
<div id="yahoo"><h5>yahoo</h5>Nunc commodo consectetur scelerisque. Proin fermentum ligula ac quam finibus tincidunt. Aenean venenatis nisi et semper semper. Nunc sodales velit ipsum, ac pellentesque augue placerat eu.</div>
<div id="zeta"><h5>zeta</h5>Nullam ac suscipit odio. Curabitur viverra arcu ut egestas sollicitudin. Fusce sodales varius lectus ut tristique. Etiam eget nunc ornare, aliquet tortor eget, consequat mauris. Integer sit amet fermentum augue. </div>
<div id="alpha"><h5>alpha</h5>Praesent nec neque ac tellus sodales eleifend nec vel ipsum. Cras et semper risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer mattis leo nisl, a tincidunt lectus tristique eget. Donec finibus lobortis viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus egestas pulvinar odio non vehicula. Morbi malesuada leo eget nisl sagittis aliquet.</div>
<div id="beta"><h5>beta</h5>Mauris a libero vel enim pharetra interdum non a quam. Sed tincidunt ut elit sed dignissim. Suspendisse vitae tellus dapibus, fermentum lacus ac, fermentum lacus. Nam ante odio, fringilla ac elementum a, mollis sed tellus.</div>
<div id="cappa"><h5>cappa</h5>Nam molestie semper nulla et molestie. Ut facilisis, ipsum sed convallis posuere, mi mauris bibendum erat, nec egestas ipsum est nec dolor. </div>
<div id="dunno"><h5>dunno</h5>Etiam et metus congue, commodo libero et, accumsan sem. Aliquam erat volutpat. Quisque tincidunt, tortor non blandit ullamcorper, orci mauris dignissim augue, eget vehicula nulla justo sed dolor. Nunc ac urna quis nisi maximus pharetra in a mauris. Proin metus mi, venenatis vitae tristique sed, fermentum at purus. Aliquam erat volutpat. Maecenas efficitur sodales nibh, ac hendrerit felis facilisis et. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div>
</div> <!-- end definition-box-container -->
</div> <!-- end col-md-3-->
</div> <!-- end small-box-links -->
</div> <!-- end row -->
</div> <!-- end container -->
{{site.data.alerts.note}} This was mostly an experiment to see if there was a better way to document a long JSON code example. I haven't actually used this approach in my own documentation.{{site.data.alerts.end}}
{% endif %}

92
docs/js/shuffle.js Normal file
View File

@ -0,0 +1,92 @@
/*
* Adjusted sample from original: https://vestride.github.io/Shuffle/js/demos/homepage.js
*/
(function() {
'use strict';
var Shuffle = window.Shuffle;
var DocShuffle = function () {
this.element = document.querySelector('#grid');
this.shuffle = new Shuffle(this.element, {
itemSelector: 'div[data-groups]',
sizer: this.element.querySelector('.shuffle_sizer'),
});
this.addFilterButtons();
this.addLinkTargetHighlighting();
};
DocShuffle.prototype.addFilterButtons = function () {
var options = document.querySelector('.filter-options');
if (!options) {
return;
}
var filterButtons = Array.from(options.children);
filterButtons.forEach(function (button) {
button.addEventListener('click', this._handleFilterClick.bind(this), false);
}, this);
};
DocShuffle.prototype._handleFilterClick = function (evt) {
var btn = evt.currentTarget;
var isActive = btn.classList.contains('active');
var btnGroup = btn.getAttribute('data-group');
this._removeActiveClassFromChildren(btn.parentNode);
var filterGroup;
if (isActive) {
btn.classList.remove('active');
filterGroup = Shuffle.ALL_ITEMS;
} else {
btn.classList.add('active');
filterGroup = btnGroup;
}
this.shuffle.filter(filterGroup);
};
DocShuffle.prototype._removeActiveClassFromChildren = function (parent) {
var children = parent.children;
for (var i = children.length - 1; i >= 0; i--) {
children[i].classList.remove('active');
}
};
// Adds a pretty animation to links to shuffle panels
// Note: needs jquery-ui
DocShuffle.prototype.addLinkTargetHighlighting = function() {
$("a[href^='#shuffle-panel']").click(function () {
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '')
&& location.hostname === this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('#topbar-content-offset').animate({
scrollTop: $('#grid-rule').position().top
}, {
duration: 500,
complete: function () {
target.effect("highlight", {}, 1000);
}
});
return false;
}
}
});
};
document.addEventListener('DOMContentLoaded', function () {
window.docShuffle = new DocShuffle();
});
})();