Changing tag list to load content by ajax (fix #49) and updating the default sort order of backend lists (fix #49)
This commit is contained in:
Jason Williams
parent
a50c117a98
commit
e576e8f566
|
|
@ -0,0 +1,9 @@
|
|||
$(() => {
|
||||
var obj = {};
|
||||
if (typeof tagPartial !== 'string') obj = { '@tags': '#taglist' }
|
||||
else obj[tagPartial] = '#taglist'
|
||||
|
||||
$.request('TagList::onAjaxDataRequested', {
|
||||
complete: (data) => { $(window).trigger('tagsLoaded', data) }
|
||||
})
|
||||
})
|
||||
|
|
@ -1,26 +1,32 @@
|
|||
<?php namespace JasonWilliams\Feed\Components;
|
||||
|
||||
use Db;
|
||||
use Cms\Classes\ComponentBase;
|
||||
use JasonWilliams\Feed\Models\Tags;
|
||||
|
||||
class TagList extends ComponentBase
|
||||
{
|
||||
public function componentDetails()
|
||||
{
|
||||
return [
|
||||
'name' => 'Tag List',
|
||||
'description' => 'Displays a list of feed tags.'
|
||||
];
|
||||
}
|
||||
|
||||
public function defineProperties()
|
||||
{
|
||||
return [];
|
||||
}
|
||||
|
||||
public function onRun()
|
||||
{
|
||||
$this->page['tags'] = Tags::groupBy('tag')->select(Db::raw('tag, count(*) as count'))->orderBy('count', 'desc')->get();
|
||||
}
|
||||
}
|
||||
<?php namespace JasonWilliams\Feed\Components;
|
||||
|
||||
use Db;
|
||||
use Cms\Classes\ComponentBase;
|
||||
use JasonWilliams\Feed\Models\Tags;
|
||||
|
||||
class TagList extends ComponentBase
|
||||
{
|
||||
public function componentDetails()
|
||||
{
|
||||
return [
|
||||
'name' => 'Tag List',
|
||||
'description' => 'Displays a list of feed tags.'
|
||||
];
|
||||
}
|
||||
|
||||
public function defineProperties()
|
||||
{
|
||||
return [];
|
||||
}
|
||||
|
||||
public function onRun()
|
||||
{
|
||||
$this->page['renderPartial'] = $this->property('tagPartial');
|
||||
$this->addJs('/plugins/jasonwilliams/feed/assets/javascript/loadtaglist.js');
|
||||
}
|
||||
|
||||
public function onAjaxDataRequested()
|
||||
{
|
||||
return Tags::groupBy('tag')->select(Db::raw('tag, count(*) as count'))->orderBy('count', 'desc')->get();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1 @@
|
|||
<ul>
|
||||
{% for tag in tags %}
|
||||
<li><a href="{{ tag.tag }}">{{ tag.tag }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div id="tagcloud">Loading...</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
title: Channels
|
||||
modelClass: jasonwilliams\feed\Models\Channels
|
||||
list: $/jasonwilliams/feed/models/channels/columns.yaml
|
||||
recordUrl: 'jasonwilliams/feed/channels/update/:id'
|
||||
noRecordsMessage: 'backend::lang.list.no_records'
|
||||
recordsPerPage: 20
|
||||
showSetup: true
|
||||
showCheckboxes: true
|
||||
toolbar:
|
||||
buttons: list_toolbar
|
||||
search:
|
||||
prompt: 'backend::lang.list.search_prompt'
|
||||
title: Channels
|
||||
modelClass: jasonwilliams\feed\Models\Channels
|
||||
list: $/jasonwilliams/feed/models/channels/columns.yaml
|
||||
recordUrl: 'jasonwilliams/feed/channels/update/:id'
|
||||
noRecordsMessage: 'backend::lang.list.no_records'
|
||||
recordsPerPage: 20
|
||||
defaultSort:
|
||||
column: id
|
||||
direction: asc
|
||||
showSetup: false
|
||||
showCheckboxes: true
|
||||
toolbar:
|
||||
buttons: list_toolbar
|
||||
search:
|
||||
prompt: 'backend::lang.list.search_prompt'
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
title: Feed
|
||||
modelClass: jasonwilliams\feed\Models\FeedItem
|
||||
list: $/jasonwilliams/feed/models/feeditem/columns.yaml
|
||||
recordUrl: 'jasonwilliams/feed/feed/update/:id'
|
||||
noRecordsMessage: 'backend::lang.list.no_records'
|
||||
recordsPerPage: 20
|
||||
showSetup: true
|
||||
showCheckboxes: true
|
||||
toolbar:
|
||||
buttons: list_toolbar
|
||||
search:
|
||||
prompt: 'backend::lang.list.search_prompt'
|
||||
title: Feed
|
||||
modelClass: jasonwilliams\feed\Models\FeedItem
|
||||
list: $/jasonwilliams/feed/models/feeditem/columns.yaml
|
||||
recordUrl: 'jasonwilliams/feed/feed/update/:id'
|
||||
noRecordsMessage: 'backend::lang.list.no_records'
|
||||
recordsPerPage: 20
|
||||
defaultSort:
|
||||
column: timestamp
|
||||
direction: desc
|
||||
showSetup: true
|
||||
showCheckboxes: true
|
||||
toolbar:
|
||||
buttons: list_toolbar
|
||||
search:
|
||||
prompt: 'backend::lang.list.search_prompt'
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
columns:
|
||||
id:
|
||||
label: 'Channel ID'
|
||||
type: number
|
||||
sortable: true
|
||||
title:
|
||||
label: Title
|
||||
type: text
|
||||
searchable: true
|
||||
sortable: false
|
||||
columns:
|
||||
id:
|
||||
label: 'Channel ID'
|
||||
type: number
|
||||
sortable: true
|
||||
title:
|
||||
label: Title
|
||||
type: text
|
||||
searchable: true
|
||||
sortable: true
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue