phoedos/pmd
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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
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>