jason/ja.son-williams.ca
1
0
Fork 0
Code Issues 23 Pull Requests Projects 1 Wiki Activity

Changing tag list to load content by ajax (fix #40) and updating the default sort order of backend lists (fix #49)

Browse Source
This commit is contained in:
Jason Williams
2020-10-28 17:56:43 -06:00
parent a50c117a98
commit 675c377d91
8 changed files with 165 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
www/themes/jason-williamsca/assets/javascript/feedlayout.js
View File

@@ -1,45 +1,64 @@
(function($) {
"use strict"; // Start of use strict
// If the feed is loaded immediadely on page load (i.e. we're not using ajax), reset the layout on each image load
$('.masonry img').each(function() {
$(this).one('load', () => {
$('.masonry').masonry()
})
})
// Apply masonry layout to feed cards after content (including images) has been loaded
$(window).on('feedLoaded', function() {
if (!feedItemClass) feedItemClass = 'col-sm-12 col-md-6 col-xl-4'
$('.masonry-item').addClass(feedItemClass)
$('.show-onfeedloaded').removeClass('d-none')
$('.masonry').masonry('reloadItems')
$('.masonry').masonry()
// Every time an image loads, reset the layout
$('.masonry img').each(function() {
$(this).one('load', () => {
$('.masonry').masonry()
})
})
})
// If there's tag data set once the page is loaded, create a tag cloud
$(function() {
if(typeof tagData !== 'undefined') {
var cloudWords = []
tagData.forEach((tag) => {
cloudWords.push({text: tag.tag, weight: tag.count, link: '/feed/all/' + tag.tag})
})
$('#tagcloud').jQCloud(cloudWords, {
autoResize: true,
removeOverflowing: true,
delay: 2
})
}
})
(function($) {
"use strict"; // Start of use strict
// If the feed is loaded immediadely on page load (i.e. we're not using ajax), reset the layout on each image load
$('.masonry img').each(function() {
$(this).one('load', () => {
$('.masonry').masonry()
})
})
// Apply masonry layout to feed cards after content (including images) has been loaded
$(window).on('feedLoaded', function() {
if (!feedItemClass) feedItemClass = 'col-sm-12 col-md-6 col-xl-4'
$('.masonry-item').addClass(feedItemClass)
$('.show-onfeedloaded').removeClass('d-none')
$('.masonry').masonry('reloadItems')
$('.masonry').masonry()
// Every time an image loads, reset the layout
$('.masonry img').each(function() {
$(this).one('load', () => {
$('.masonry').masonry()
})
})
})
// Render the tag cloud if/when tag data is loaded by the component
$(window).on('tagsLoaded', function(event, data) {
console.log(data.responseJSON)
var cloudWords = []
data.responseJSON.forEach((tag) => {
cloudWords.push({text: tag.tag, weight: tag.count, link: '/feed/all/' + tag.tag})
})
$('#tagcloud').html('').height($('#tagcloud').width() * 4/3)
$('#tagcloud').jQCloud(cloudWords, {
autoResize: true,
removeOverflowing: true,
delay: 2
})
})
// If there's tag data set once the page is loaded, create a tag cloud
$(function() {
if(typeof tagData !== 'undefined') {
var cloudWords = []
tagData.forEach((tag) => {
cloudWords.push({text: tag.tag, weight: tag.count, link: '/feed/all/' + tag.tag})
})
$('#tagcloud').jQCloud(cloudWords, {
autoResize: true,
removeOverflowing: true,
delay: 2
})
}
})
})(jQuery); // End of use strict

44
www/themes/jason-williamsca/pages/feed.htm
View File

@@ -14,30 +14,26 @@ includeEmpty = 0
[TagList]
==
<?php
function onStart()
{
$this->addJs('https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.3/jqcloud.min.js');
$this->addJs('assets/javascript/feedlayout.js');
//$this->addCss('https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.3/jqcloud.min.css');
function onStart()
{
$this->addJs('https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.3/jqcloud.min.js');
$this->addJs('assets/javascript/feedlayout.js');
//$this->addCss('https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.3/jqcloud.min.css');
}
?>
==
<div class="row">
<div class="col-lg-9">
<h1>Feed</h1>
<div id="feedarea" class="col-container masonry">
{% partial 'feed/template' feeditemclass='col-sm-12 col-md-6 col-xl-4' %}
</div>
</div>
<div class="col-lg-3">
<h2>Channels</h2>
{% component 'ChannelList' %}
<h2>Tags</h2>
<div id="tagcloud" style="height: 500px;"></div>
</div>
</div>
{% put scripts %}
<script type="text/javascript">const tagData = {{ tags | raw }};</script>
{% endput %}
<div class="row">
<div class="col-lg-9">
<h1>Feed</h1>
<div id="feedarea" class="col-container masonry">
{% partial 'feed/template' feeditemclass='col-sm-12 col-md-6 col-xl-4' %}
</div>
</div>
<div class="col-lg-3">
<h2>Channels</h2>
{% component 'ChannelList' %}
<h2>Tags</h2>
<div id="tagcloud"><img src="{{ 'assets/images/loading.svg' | theme }}"></div>
</div>
</div>