From 675c377d9138059fdbfa83c4dd360f18a2c6c4c4 Mon Sep 17 00:00:00 2001 From: Jason Williams Date: Wed, 28 Oct 2020 17:56:43 -0600 Subject: [PATCH] Changing tag list to load content by ajax (fix #40) and updating the default sort order of backend lists (fix #49) --- .../feed/assets/javascript/loadtaglist.js | 9 ++ .../jasonwilliams/feed/components/TagList.php | 58 +++++----- .../feed/components/taglist/default.htm | 6 +- .../controllers/channels/config_list.yaml | 27 +++-- .../feed/controllers/feed/config_list.yaml | 27 +++-- .../feed/models/channels/columns.yaml | 20 ++-- .../assets/javascript/feedlayout.js | 107 +++++++++++------- www/themes/jason-williamsca/pages/feed.htm | 44 ++++--- 8 files changed, 165 insertions(+), 133 deletions(-) create mode 100644 www/plugins/jasonwilliams/feed/assets/javascript/loadtaglist.js diff --git a/www/plugins/jasonwilliams/feed/assets/javascript/loadtaglist.js b/www/plugins/jasonwilliams/feed/assets/javascript/loadtaglist.js new file mode 100644 index 0000000..ba04e9d --- /dev/null +++ b/www/plugins/jasonwilliams/feed/assets/javascript/loadtaglist.js @@ -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) } + }) +}) diff --git a/www/plugins/jasonwilliams/feed/components/TagList.php b/www/plugins/jasonwilliams/feed/components/TagList.php index 5dfbe47..b0c6e83 100644 --- a/www/plugins/jasonwilliams/feed/components/TagList.php +++ b/www/plugins/jasonwilliams/feed/components/TagList.php @@ -1,26 +1,32 @@ - '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(); - } -} + '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(); + } +} diff --git a/www/plugins/jasonwilliams/feed/components/taglist/default.htm b/www/plugins/jasonwilliams/feed/components/taglist/default.htm index 1cf10e0..9ef489b 100644 --- a/www/plugins/jasonwilliams/feed/components/taglist/default.htm +++ b/www/plugins/jasonwilliams/feed/components/taglist/default.htm @@ -1,5 +1 @@ - +
Loading...
diff --git a/www/plugins/jasonwilliams/feed/controllers/channels/config_list.yaml b/www/plugins/jasonwilliams/feed/controllers/channels/config_list.yaml index 1a8662d..83e92ea 100644 --- a/www/plugins/jasonwilliams/feed/controllers/channels/config_list.yaml +++ b/www/plugins/jasonwilliams/feed/controllers/channels/config_list.yaml @@ -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' diff --git a/www/plugins/jasonwilliams/feed/controllers/feed/config_list.yaml b/www/plugins/jasonwilliams/feed/controllers/feed/config_list.yaml index d5fc028..c2066b6 100644 --- a/www/plugins/jasonwilliams/feed/controllers/feed/config_list.yaml +++ b/www/plugins/jasonwilliams/feed/controllers/feed/config_list.yaml @@ -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' diff --git a/www/plugins/jasonwilliams/feed/models/channels/columns.yaml b/www/plugins/jasonwilliams/feed/models/channels/columns.yaml index cc0e2af..4e4513f 100644 --- a/www/plugins/jasonwilliams/feed/models/channels/columns.yaml +++ b/www/plugins/jasonwilliams/feed/models/channels/columns.yaml @@ -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 diff --git a/www/themes/jason-williamsca/assets/javascript/feedlayout.js b/www/themes/jason-williamsca/assets/javascript/feedlayout.js index 48c3bf3..43b555f 100644 --- a/www/themes/jason-williamsca/assets/javascript/feedlayout.js +++ b/www/themes/jason-williamsca/assets/javascript/feedlayout.js @@ -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 \ No newline at end of file diff --git a/www/themes/jason-williamsca/pages/feed.htm b/www/themes/jason-williamsca/pages/feed.htm index 210730f..28879d3 100644 --- a/www/themes/jason-williamsca/pages/feed.htm +++ b/www/themes/jason-williamsca/pages/feed.htm @@ -14,30 +14,26 @@ includeEmpty = 0 [TagList] == 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'); } ?> == -
-
-

Feed

-
- {% partial 'feed/template' feeditemclass='col-sm-12 col-md-6 col-xl-4' %} -
-
-
-

Channels

- {% component 'ChannelList' %} - -

Tags

-
-
-
- -{% put scripts %} - -{% endput %} \ No newline at end of file +
+
+

Feed

+
+ {% partial 'feed/template' feeditemclass='col-sm-12 col-md-6 col-xl-4' %} +
+
+
+

Channels

+ {% component 'ChannelList' %} + +

Tags

+
+
+
\ No newline at end of file