New functionality to change feed dates to relative dates (e.g. 1 day ago) where the feed items are available on page load. Contributes to #50.
This commit is contained in:
parent
623d54f307
commit
8eab9fe605
@ -1,8 +1,14 @@
|
|||||||
(function($) {
|
(function($) {
|
||||||
"use strict"; // Start of use strict
|
"use strict"; // Start of use strict
|
||||||
|
|
||||||
|
const min = 60;
|
||||||
|
const hour = min * 60;
|
||||||
|
const day = hour * 24;
|
||||||
|
const month = day * 30;
|
||||||
|
const ninemonth = month * 9;
|
||||||
|
|
||||||
// If the feed is loaded immediadely on page load (i.e. we're not using ajax), reset the layout on each image load
|
// 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() {
|
$('.feeditem img').each(function() {
|
||||||
$(this).one('load', () => {
|
$(this).one('load', () => {
|
||||||
$('.masonry').masonry()
|
$('.masonry').masonry()
|
||||||
})
|
})
|
||||||
@ -45,8 +51,8 @@
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
// If there's tag data set once the page is loaded, create a tag cloud
|
|
||||||
$(function() {
|
$(function() {
|
||||||
|
// If there's tag data set once the page is loaded, create a tag cloud
|
||||||
if(typeof tagData !== 'undefined') {
|
if(typeof tagData !== 'undefined') {
|
||||||
var cloudWords = []
|
var cloudWords = []
|
||||||
|
|
||||||
@ -60,5 +66,22 @@
|
|||||||
delay: 2
|
delay: 2
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Loop through each feeditem (assuming they're loaded when the page loads) and set the friendlytime
|
||||||
|
var nowts = Math.floor(new Date().getTime() / 1000)
|
||||||
|
$('.feeditem').each(function() {
|
||||||
|
var elapsed = nowts - $(this).attr('data-timestamp')
|
||||||
|
var friendlytime = false
|
||||||
|
|
||||||
|
if (elapsed < min) friendlytime = elapsed + ' seconds'
|
||||||
|
else if (elapsed < hour) friendlytime = Math.floor(elapsed/min) + ' minutes'
|
||||||
|
else if (elapsed < day) friendlytime = Math.floor(elapsed/hour) + ' hours'
|
||||||
|
else if (elapsed < month) friendlytime = Math.floor(elapsed/day) + ' days'
|
||||||
|
else if (elapsed < ninemonth) friendlytime = Math.floor(elapsed/month) + ' months'
|
||||||
|
|
||||||
|
if (friendlytime && friendlytime.startsWith('1 ')) friendlytime = friendlytime.slice(0, -1)
|
||||||
|
|
||||||
|
if (friendlytime) $(this).find('.friendlytime').html(friendlytime)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})(jQuery); // End of use strict
|
})(jQuery); // End of use strict
|
@ -20,8 +20,7 @@ function onStart()
|
|||||||
else $this['channelfilter'] = explode(',', $this->param('channel'));
|
else $this['channelfilter'] = explode(',', $this->param('channel'));
|
||||||
|
|
||||||
$this->addJs('https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.3/jqcloud.min.js');
|
$this->addJs('https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.3/jqcloud.min.js');
|
||||||
$this->addJs('assets/javascript/feedlayout.js');
|
$this->addJs('assets/javascript/feed.js');
|
||||||
//$this->addCss('https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.3/jqcloud.min.css');
|
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
==
|
==
|
||||||
|
@ -8,25 +8,25 @@ maxItems = 5
|
|||||||
renderPartial = "feed/template"
|
renderPartial = "feed/template"
|
||||||
==
|
==
|
||||||
<?php
|
<?php
|
||||||
function onStart()
|
function onStart()
|
||||||
{
|
{
|
||||||
$this->addJs('assets/javascript/feedlayout.js');
|
$this->addJs('assets/javascript/feed.js');
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
==
|
==
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-5 order-lg-2">
|
<div class="col-lg-5 order-lg-2">
|
||||||
<h1>Welcome</h1>
|
<h1>Welcome</h1>
|
||||||
<p>Welcome to Ja.son-Williams.ca, the little home on the web of – perhaps unsurprisingly – Jason Williams.</p>
|
<p>Welcome to Ja.son-Williams.ca, the little home on the web of – perhaps unsurprisingly – Jason Williams.</p>
|
||||||
<p>Jay is a human male originally from <a href="https://en.wikipedia.org/wiki/Swansea">Swansea, UK</a> but last spotted in <a href="https://en.wikipedia.org/wiki/Calgary">Calgary, Canada</a>. By day he's a mild-mannered bank employee and by night he's... uh... asleep, mostly.</p>
|
<p>Jay is a human male originally from <a href="https://en.wikipedia.org/wiki/Swansea">Swansea, UK</a> but last spotted in <a href="https://en.wikipedia.org/wiki/Calgary">Calgary, Canada</a>. By day he's a mild-mannered bank employee and by night he's... uh... asleep, mostly.</p>
|
||||||
<p>He doesn't keep very much stuff here, but to browse around please make a selection from the menu at the top right of the page.</p>
|
<p>He doesn't keep very much stuff here, but to browse around please make a selection from the menu at the top right of the page.</p>
|
||||||
|
|
||||||
<h2>Available Everywhere</h2>
|
<h2>Available Everywhere</h2>
|
||||||
{% partial 'social' %}
|
{% partial 'social' %}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-7 order-lg-1">
|
<div class="col-lg-7 order-lg-1">
|
||||||
<h1>Feed</h1>
|
<h1>Feed</h1>
|
||||||
{% partial 'feed/placeholder' feeditemclass='col-sm-12 col-md-6' %}
|
{% partial 'feed/placeholder' feeditemclass='col-sm-12 col-md-6' %}
|
||||||
<a class="btn btn-outline-primary d-none show-onfeedloaded" href="/feed" role="button">View More...</a>
|
<a class="btn btn-outline-primary d-none show-onfeedloaded" href="/feed" role="button">View More...</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
@ -1,8 +1,8 @@
|
|||||||
==
|
==
|
||||||
{% if feeditemclass is empty %}
|
{% if feeditemclass is empty %}
|
||||||
{% set feeditemclass = 'masonry-item' %}
|
{% set feeditemclass = 'feeditem masonry-item' %}
|
||||||
{% else %}
|
{% else %}
|
||||||
{% set feeditemclass = 'masonry-item ' ~ feeditemclass %}
|
{% set feeditemclass = 'feeditem masonry-item ' ~ feeditemclass %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if posts is empty %}
|
{% if posts is empty %}
|
||||||
@ -10,7 +10,7 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% for post in posts %}
|
{% for post in posts %}
|
||||||
<div class="{{ feeditemclass }}">
|
<div class="{{ feeditemclass }}" data-timestamp="{{ post.timestamp }}">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
{% if post.extra.img %}
|
{% if post.extra.img %}
|
||||||
<img class="card-img-top" src="{{ post.extra.img }}">
|
<img class="card-img-top" src="{{ post.extra.img }}">
|
||||||
@ -32,7 +32,7 @@
|
|||||||
<p class="card-text">{{ post.extra.address }}</p>
|
<p class="card-text">{{ post.extra.address }}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div class="feedcard-footer">
|
<div class="feedcard-footer">
|
||||||
<p class="float-right feedcard-itemtype">{{ post.friendlytime }} <i class="{{ post.channel.icon }}" style="color: {{ post.channel.colour }};"></i></p>
|
<p class="float-right feedcard-itemtype"><span class="friendlytime">{{ post.friendlytime }}</span> <i class="{{ post.channel.icon }}" style="color: {{ post.channel.colour }};"></i></p>
|
||||||
{% if post.channel.slug == 'twitter' and post.extra.opuser %}
|
{% if post.channel.slug == 'twitter' and post.extra.opuser %}
|
||||||
<p class="float-left feedcard-attribution"><i class="fas fa-retweet"></i> <a href="https://twitter.com/{{ post.extra.opuser }}">{{ post.extra.opname }}</a> <img src="{{ post.extra.opimg }}"></p>
|
<p class="float-left feedcard-attribution"><i class="fas fa-retweet"></i> <a href="https://twitter.com/{{ post.extra.opuser }}">{{ post.extra.opname }}</a> <img src="{{ post.extra.opimg }}"></p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
Loading…
Reference in New Issue
Block a user