Adding lazy-load version of feed component to load data using AJAX after page content has been rendered.

This commit is contained in:
Jason Williams
2020-10-23 22:54:30 +00:00
parent 2a8454d197
commit af4f1366a0
71 changed files with 1753 additions and 88 deletions

View File

@@ -7,24 +7,14 @@ description = "Contact Me Form"
<div id="{{ __SELF__ }}_forms_flash"></div>
<div class="form-group">
<!--<label for="name">Name:</label>
<input type="text" id="name" name="name" class="form-control">-->
<input type="text" id="name" name="name" class="form-control" placeholder="Your Name" required autofocus>
</div>
<div class="form-group">
<!--<label for="email">Email:</label>
<input type="text" id="email" name="email" class="form-control">-->
<input type="email" id="email" name="email" class="form-control" placeholder="Email Address" required>
</div>
<!--<div class="form-group">
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" class="form-control">
</div>-->
<div class="form-group">
<!--<label for="message">Message:</label>-->
<textarea id="message" name="message" rows="8" class="form-control" placeholder="Message"></textarea>
</div>
@@ -33,6 +23,6 @@ description = "Contact Me Form"
</div>
<button id="simpleContactSubmitButton" type="submit" class="btn btn-outline-primary">Send</button>
<button type="reset" class="btn btn-outline-danger">Cancel</button>
<button type="reset" class="btn btn-outline-secondary">Cancel</button>
</form>

View File

@@ -0,0 +1,5 @@
==
<div id="feedarea" class="col-container masonry"><img src="{{ 'assets/images/loading.svg' | theme }}"></div>
{% put scripts %}
<script type="text/javascript">const renderPartial = '{{ renderPartial }}'; var feedItemClass = '{{ feeditemclass }}'</script>
{% endput %}

View File

@@ -0,0 +1,45 @@
==
{% if feeditemclass is empty %}
{% set feeditemclass = 'masonry-item' %}
{% else %}
{% set feeditemclass = 'masonry-item ' ~ feeditemclass %}
{% endif %}
{% if posts is empty %}
<p>No feed items have been found.</p>
{% endif %}
{% for post in posts %}
<div class="{{ feeditemclass }}">
<div class="card">
{% if post.extra.img %}
<img class="card-img-top" src="{{ post.extra.img }}">
{% elseif post.extra.lat %}
<!--<div>MAP!</div>
<img class="card-img-top" src="https://api.mapbox.com/styles/v1/mapbox/light-v10/static/{{ post.extra.lng }},{{ post.extra.lat }},14,0/725x400@2x?access_token=pk.eyJ1IjoiamFzb24zMmRldiIsImEiOiJjazFsNHd5djcwMXptM2htbW8zM3MyZGxuIn0.-TtNNGFysQPQRfGR1P8DUA">-->
<img class="card-img-top" src="https://api.mapbox.com/styles/v1/jason32dev/ckgehopjc2o1y19o09aqs4x11/static/pin-l+B05C71({{ post.extra.lng }},{{ post.extra.lat }})/{{ post.extra.lng }},{{ post.extra.lat }},14,0/545x300@2x?access_token=pk.eyJ1IjoiamFzb24zMmRldiIsImEiOiJjazFsNHd5djcwMXptM2htbW8zM3MyZGxuIn0.-TtNNGFysQPQRfGR1P8DUA">
{% endif %}
<div class="card-body">
{% if post.channel.slug == 'twitter' or post.channel.slug == 'instagram' %}
{% if post.title | striptags | length < 100 %}
<h2 class="card-title">{{ post.title | raw | nl2br }}</h2>
{% elseif post.title | striptags | length < 150 %}
<p class="card-text main">{{ post.title | raw | nl2br }}</p>
{% else %}
<p class="card-text">{{ post.title | raw | nl2br }}</p>
{% endif %}
{% elseif post.channel.slug == 'foursquare' %}
{% if post.body %}<p class="card-text main">{{ post.body | raw | nl2br }}</p>{% endif %}
<h2 class="card-title mb-1">{{ post.title }}</h2>
<p class="card-text">{{ post.extra.address }}</p>
{% endif %}
<div class="feedcard-footer">
<p class="float-right feedcard-itemtype">{{ post.friendlytime }} <i class="{{ post.channel.icon }}" style="color: {{ post.channel.colour }};"></i></p>
{% 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>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}

View File

@@ -0,0 +1,32 @@
==
<textarea readonly style="width: 100%; height: 500px; font-family: 'Courier New', Courier, monospace">
-----BEGIN PGP PUBLIC KEY BLOCK-----
Version: GnuPG v2
mQENBFXSMV4BCADJvhoUfskuz9lpiSYy/1uBo0C0j++onaqN0Cwv/fcDvG2NkdV6
WMoltJwpUgc4qTwnGroa8Vnf/jXDJnpvvaf4h/zg2O47pwAFsX7eZ9+Djdc5BQhV
lD7YX2OtBM5RybnhQAiJgZEi6OFhZnPQAHD6//7E5PhPHRQIs4sezZdrepJw8Bre
8qHdM0EsUgiB/9fUmC7yXFsPDmTBpq2iVMf1qdet3Cfc7M17mSZY5RABZVErz12U
1TNx+Ecr4cY2MWRNUxpt3ncOK8c9hgcc7WoNjlfL0kc3z/3zW5dNXICYktUAiH47
0YymTywq2Aeqf7ZQpu9A5F85qwlDWrUk1V4hABEBAAG0Ikphc29uIFdpbGxpYW1z
IDxqQHNvbi13aWxsaWFtcy5jYT6JATkEEwEIACMFAlXSMV4CGwMHCwkIBwMCAQYV
CAIJCgsEFgIDAQIeAQIXgAAKCRDXYAQ92dYLDJjUB/472nPkJDBVnZi57afMLbYm
D4sBcxoMLtp4RgKV0fNLkzxvReXPsRyODKLbfkpcPLlHp3Jene/oaNyvMmO2TE/i
k87cjGzdAuYQMmo2GlxrGodx2eK1qPugBZtGkpHHttAOL3RD3TUzAO3l68SH855h
AYcrPh8emBaudvEnT36JjdWkR/k0WOhIQjRGt5SLw3cZ/Icz5tfRl0Ak/KTwroqa
W12Ttu6o0vYS3jtTRZ6w/+qH806cET2vou9GXcB4xks6op8wrpfHqyWRHwVuhLc5
1q4ieWJftIw0C4EjvTzhdoo3OoXvEYx+Riy1eW0XdklbD9ckVCvaD3M5ptAnxEGR
uQENBFXSMV4BCADhgLB/wH1+V+CmVQlbSbWKqc3Z/Nsmm+u09ENX94dKOYiuH9EU
Br2Oj7bXeRkUSooQbU7xGznokf63u4XkUA+uN+eDA/qZoIPJ5yi7hULcj37tVFbU
4bWgJKqpKHg04x+reT5KgV40xjXBqINqevwwdu4R6QO1RpCG9or9HMoaWUP5ROr4
Kp75dNPsXMNnZ7UwDhCp/s0sfGROiBT7SAQzmEBLmlBosT/ah7LXvbxUuI3K08Qe
K2dWc+yWPM3ykS4z8Sp0l4CrxfGpnL9DV+DvA3ntzA9cQ5Kt6209FsXjHRexxB3h
ZsK58E8qlcH8ZKoGtDL5NctBxASE529lX7K7ABEBAAGJAR8EGAEIAAkFAlXSMV4C
GwwACgkQ12AEPdnWCwxEoggAmM+QEtuHVH92ZWwXNda2zNUpbizHLoCBJvrf0lEM
DpWKCfrZAo3q0D85Xx9vq2QV/nFkMzv0PsIA8tJiEFtwZBmXxbm+YBWrLxDX+QM4
KyLGqxWKbLOKmxpqkRO+PmNY4EjNFeu95TeLeeBsohhGbrfKK2K+Kbw57PV9Ppwy
5gZuHRO7xpJMBzc04uVVTmnafU6Ee0scbuwCZTB9VLlDdj5/cjQOcANs/Cu6l58z
61sfQcmbk/xXXdgB0EYMdNxNTG4bjdUZOAFqviH4ve5kwff6AzdfCTK/aDPc9+5Z
jUajxravR3TUzFdhAT2D92TPpmXG0zIYpsGpNLWvQbtjJA==
=Spm3
-----END PGP PUBLIC KEY BLOCK-----</textarea>

View File

@@ -1,12 +1,5 @@
description = "Social Media Links"
==
<?php
function onStart()
{
$this->addJs('assets/javascript/tooltips.js');
}
?>
==
<div class="social-icons">
{% if not nosocial %}
<a href="https://www.linkedin.com/in/jaywll/" data-toggle="tooltip" title="LinkedIn">
@@ -25,9 +18,17 @@ function onStart()
<a href="https://www.facebook.com/jaywll/" data-toggle="tooltip" title="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://foursquare.com/jaywll" data-toggle="tooltip" title="Foursquare">
<i class="fab fa-foursquare"></i>
</a>
{% if not nocontact %}
<a href="https://foursquare.com/jaywll" data-toggle="tooltip" title="Foursquare">
<i class="fab fa-foursquare"></i>
</a>
<a href="https://www.goodreads.com/jaywll" data-toggle="tooltip" title="Goodreads">
<i class="fab fa-goodreads-g"></i>
</a>
<a href="https://www.vivino.com/users/jaywll" data-toggle="tooltip" title="Vivino">
<i class="fas fa-wine-glass-alt"></i>
</a>
{% endif %}
{% endif %}
{% endif %}
{% if not nocode %}