j1-template 2021.1.25 → 2021.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/themes/j1/layouts/content_generator_news_panel_posts.html +1 -1
  3. data/assets/data/panel.html +6 -5
  4. data/assets/themes/j1/adapter/js/infiniteScroll.js +15 -1
  5. data/assets/themes/j1/adapter/js/j1scroll.js +207 -0
  6. data/assets/themes/j1/modules/infiniteScroll/js/infiniteScroll.js +6 -0
  7. data/assets/themes/j1/modules/j1Scroll/css/theme/uno.css +150 -0
  8. data/assets/themes/j1/modules/j1Scroll/css/theme/uno.min.css +15 -0
  9. data/assets/themes/j1/modules/j1Scroll/js/j1scroll.js +188 -0
  10. data/assets/themes/j1/modules/showOnScroll/js/showOnScroll.js +13 -0
  11. data/lib/j1/version.rb +3 -3
  12. data/lib/starter_web/Gemfile +1 -1
  13. data/lib/starter_web/_config.yml +1 -1
  14. data/lib/starter_web/_data/resources.yml +26 -0
  15. data/lib/starter_web/_includes/attributes.asciidoc +1 -1
  16. data/lib/starter_web/_plugins/lunr_index.rb +1 -1
  17. data/lib/starter_web/collections/posts/public/series/_posts/2020-01-01-post-test-series.adoc +1 -1
  18. data/lib/starter_web/collections/posts/public/series/_posts/2020-01-02-post-test-series.adoc +1 -1
  19. data/lib/starter_web/collections/posts/public/series/_posts/2020-01-03-post-test-series.adoc +1 -1
  20. data/lib/starter_web/collections/posts/public/series/_posts/2020-01-04-post-test-series.adoc +1 -1
  21. data/lib/starter_web/index.html +1 -1
  22. data/lib/starter_web/package.json +1 -1
  23. data/lib/starter_web/pages/infinite-scroll-tester-5.adoc +119 -0
  24. data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
  25. data/lib/starter_web/utilsrv/package.json +1 -1
  26. metadata +7 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 633e1a971e61891dc89fdbde3b2eca03552aa93a4db7706e22cedcf0b4ee296e
4
- data.tar.gz: 855fdfaf879aab5473f35897e3bf214f6a805683cf57661c8999c022b669fa73
3
+ metadata.gz: 1703f00fa05ea4dba6a66583457e9f61a83d6eb297c45a851a36580c881c3e12
4
+ data.tar.gz: b1bccaba5d098d37ebabf850fb8a0822f0e732cb08fd4b25bc91917183cdfa0b
5
5
  SHA512:
6
- metadata.gz: 37222f305bf65d1fa148f5753a29ce8980cacd4d38e550c01e1b7ca3134c1e29aa995052bce28b5878239da740070e139ff3e8093a775bb0100e671bd8ceec7a
7
- data.tar.gz: c210ca1a7454fbb6476f3d9eec973cb083a074cca0fda6168373209bb76ba91608c7b5566cb2b4d3cb658f35cc7877ba7050a1e751224228c3766addeb681b50
6
+ metadata.gz: f312280734a292e956db13c8d631d4baa8ba41641dba6505b1d5ecdf840a1f3a9dbbd7a633f891003b73672be94212fbe2cdae2f2a5c9746cfd3db91eb7997da
7
+ data.tar.gz: 06f98ff4a16cf472d8ed71c290473a96a1e2e23c6a9f2084c8c2d8ab6f4d01445708c7901372868eae6d02058330d804dd630f0a8145480cfd2fbc3d4a2575bc
@@ -294,7 +294,7 @@
294
294
  {% endif %}
295
295
  <h3 class="card-header bg-primary notoc">{{post.title}}</h3>
296
296
  <!-- Body|Excerpt -->
297
- <div class="card-body r-text-300">
297
+ <div class="card-body r-text-300 mt-3">
298
298
  {{post.excerpt|truncatewords: truncate_words}}
299
299
  </div>
300
300
  <!-- End Body|Excerpt -->
@@ -539,7 +539,7 @@ exclude_from_search: true
539
539
  {% endif %}
540
540
  <h3 class="card-header bg-primary notoc">{{post.title}}</h3>
541
541
  <!-- Body|Excerpt -->
542
- <div class="card-body r-text-300">
542
+ <div class="card-body r-text-300 mt-4">
543
543
  {% comment %} {{post.excerpt|truncatewords: 50|replace:'...',' ...'|remove:'<div class="paragraph">'|remove:'</div>'|remove:'<p>'|remove:'</p>'}} {% endcomment %}
544
544
  {{post.excerpt|truncatewords: truncate_words}}
545
545
  </div>
@@ -640,7 +640,8 @@ exclude_from_search: true
640
640
  <!-- End recent posts -->
641
641
  {% endfor %}
642
642
 
643
- <div class="row page-load-status">
643
+ <!-- jadams: Currently not used -->
644
+ <!-- div class="row page-load-status">
644
645
  <div class="loader-ellips infinite-scroll-request">
645
646
  <span class="loader-ellips__dot"></span>
646
647
  <span class="loader-ellips__dot"></span>
@@ -648,11 +649,11 @@ exclude_from_search: true
648
649
  <span class="loader-ellips__dot"></span>
649
650
  </div>
650
651
  <p class="infinite-scroll-last">{{infinite_scroll_last}} <a href="/pages/public/blog/navigator/">Blog Navigator</a></p>
651
- </div>
652
+ </div -->
652
653
 
653
- <div class="row page-scroll-last">
654
+ <!-- div class="row page-scroll-last">
654
655
  <p class="infinite-scroll-last">{{infinite_scroll_last}} <a href="/pages/public/blog/navigator/">Blog Navigator</a></p>
655
- </div>
656
+ </div -->
656
657
 
657
658
  </div>
658
659
  <!-- END container -->
@@ -108,7 +108,7 @@ j1.adapter['infiniteScroll'] = (function (j1, window) {
108
108
 
109
109
  // Add data attribute for tablesaw to all tables of a page
110
110
  var dependencies_met_page_ready = setInterval (function (options) {
111
- var lastPage = 4;
111
+ var lastPage = 3;
112
112
 
113
113
  if ( j1.getState() === 'finished' ) {
114
114
  var logger = log4javascript.getLogger('j1.infiniteScroll');
@@ -129,6 +129,11 @@ j1.adapter['infiniteScroll'] = (function (j1, window) {
129
129
  // var article_height = document.getElementById('home_news_panel-scroll-item').clientHeight;
130
130
  // var scrollThreshold = (article_height -200) * -1;
131
131
 
132
+ // infiniteScroll options
133
+ //
134
+ // elementScroll: true,
135
+ // elementScroll: "#home_news_panel-scroll-group",
136
+
132
137
  $('#home_news_panel-scroll-group').infiniteScroll({
133
138
  path: getPosts,
134
139
  append: '#home_news_panel-scroll-item',
@@ -160,6 +165,12 @@ j1.adapter['infiniteScroll'] = (function (j1, window) {
160
165
  var log_text = `\n loaded data from path: ${path}`;
161
166
  logger.info(log_text);
162
167
 
168
+ var log_text = "\n initialize backdrops on load";
169
+ logger.info(log_text);
170
+
171
+ // initialize backdrops
172
+ j1.core.createDropCap();
173
+
163
174
  //var elm = document.getElementById("home_news_panel-scroll-group");
164
175
  //
165
176
  // var ww = $(window).width();
@@ -184,6 +195,9 @@ j1.adapter['infiniteScroll'] = (function (j1, window) {
184
195
  logger.info(log_text);
185
196
  });
186
197
 
198
+ var log_text = '\n' + 'infiniteScroll finished for init';
199
+ logger.info(log_text);
200
+
187
201
  clearInterval(dependencies_met_page_ready);
188
202
  }
189
203
  });
@@ -0,0 +1,207 @@
1
+ ---
2
+ regenerate: true
3
+ ---
4
+
5
+ {% capture cache %}
6
+
7
+ {% comment %}
8
+ # -----------------------------------------------------------------------------
9
+ # ~/assets/themes/j1/adapter/js/j1Scroll.js
10
+ # Liquid template to adapt j1Scroll
11
+ #
12
+ # Product/Info:
13
+ # https://jekyll.one
14
+ # Copyright (C) 2021 Juergen Adams
15
+ #
16
+ # J1 Template is licensed under the MIT License.
17
+ # For details, see https://jekyll.one
18
+ # -----------------------------------------------------------------------------
19
+ # Test data:
20
+ # {{ liquid_var | debug }}
21
+ # -----------------------------------------------------------------------------
22
+ {% endcomment %}
23
+
24
+ /*
25
+ # -----------------------------------------------------------------------------
26
+ # ~/assets/themes/j1/adapter/js/j1Scroll.js
27
+ # J1 Adapter for j1Scroll
28
+ #
29
+ # Product/Info:
30
+ # https://jekyll.one
31
+ #
32
+ # Copyright (C) 2021 Juergen Adams
33
+ #
34
+ # J1 Template is licensed under the MIT License.
35
+ # For details, see https://jekyll.one
36
+ # -----------------------------------------------------------------------------
37
+ # Adapter generated: {{site.time}}
38
+ # -----------------------------------------------------------------------------
39
+ */
40
+
41
+ // -----------------------------------------------------------------------------
42
+ // ESLint shimming
43
+ // -----------------------------------------------------------------------------
44
+ /* eslint indent: "off" */
45
+ // -----------------------------------------------------------------------------
46
+ 'use strict';
47
+
48
+ {% comment %} Main
49
+ -------------------------------------------------------------------------------- {% endcomment %}
50
+ j1.adapter['j1Scroll'] = (function (j1, window) {
51
+
52
+ {% comment %} Set global variables
53
+ ------------------------------------------------------------------------------ {% endcomment %}
54
+ var environment = '{{environment}}';
55
+ var user_agent = platform.ua;
56
+ var moduleOptions = {};
57
+ var _this;
58
+ var logger;
59
+ var logText;
60
+
61
+ // ---------------------------------------------------------------------------
62
+ // Helper functions
63
+ // ---------------------------------------------------------------------------
64
+ function sleep(milliseconds) {
65
+ var start = new Date().getTime();
66
+ for (var i = 0; i < 1e7; i++) {
67
+ if ((new Date().getTime() - start) > milliseconds){
68
+ break;
69
+ }
70
+ }
71
+ return;
72
+ }
73
+
74
+ // ---------------------------------------------------------------------------
75
+ // Main object
76
+ // ---------------------------------------------------------------------------
77
+ return {
78
+
79
+ // -------------------------------------------------------------------------
80
+ // Initializer
81
+ // -------------------------------------------------------------------------
82
+ init: function (options) {
83
+
84
+ // -----------------------------------------------------------------------
85
+ // globals
86
+ // -----------------------------------------------------------------------
87
+ _this = j1.adapter.j1Scroll;
88
+ logger = log4javascript.getLogger('j1.adapter.j1Scroll');
89
+
90
+ // initialize state flag
91
+ _this.setState('started');
92
+ logger.info('\n' + 'state: ' + _this.getState());
93
+ logger.info('\n' + 'module is being initialized');
94
+
95
+ // -----------------------------------------------------------------------
96
+ // Default module settings
97
+ // -----------------------------------------------------------------------
98
+ var settings = $.extend({
99
+ module_name: 'j1.adapter.j1Scroll',
100
+ generated: '{{site.time}}'
101
+ }, options);
102
+
103
+ // -----------------------------------------------------------------------
104
+ // j1Scroll initializer
105
+ // -----------------------------------------------------------------------
106
+ var log_text = '\n' + 'j1Scroll is being initialized';
107
+ logger.info(log_text);
108
+
109
+ var dependencies_met_page_ready = setInterval (function (options) {
110
+ if (j1.getState() === 'finished') {
111
+ var log_text = '\n' + 'j1Scroll is being initialized';
112
+ logger.info(log_text);
113
+
114
+ var postWrapperId = '#home_news_panel-scroll-group';
115
+ var paginatePath = '/assets/data/news_panel_posts/page';
116
+
117
+ // status: '.page-scroll-last',
118
+
119
+ $(postWrapperId).j1Scroll({
120
+ type: 'infiniteScroll',
121
+ path: paginatePath,
122
+ elementScroll: false,
123
+ scrollThreshold: 300,
124
+ checkLastPage: true,
125
+ status: true,
126
+ onInit: function(){}, // Callback after plugin has loaded
127
+ beforeContentLoaded: function(link){}, // Callback before new content is loaded
128
+ afterContentLoaded: function(html){} // Callback after new content has been loaded
129
+ });
130
+
131
+ $('.list-group').on( 'load.j1Scroll', function( event, body, path, response ) {
132
+ var logger = log4javascript.getLogger('j1.adapter.infiniteScroll');
133
+ var log_text = `\n loaded data from path: ${path}`;
134
+ logger.info(log_text);
135
+
136
+ var log_text = "\n initialize backdrops on load";
137
+ logger.info(log_text);
138
+
139
+ // initialize backdrops
140
+ j1.core.createDropCap();
141
+
142
+ });
143
+
144
+ $('.list-group').on( 'request.j1Scroll', function( event, path, fetchPromise ) {
145
+ var logger = log4javascript.getLogger('j1.adapter.infiniteScroll');
146
+ var log_text = `\n request for the next page to be loaded from path: ${path}`;
147
+ logger.info(log_text);
148
+ });
149
+
150
+ clearInterval(dependencies_met_page_ready);
151
+ }
152
+ });
153
+ }, // END init
154
+
155
+ // -------------------------------------------------------------------------
156
+ // messageHandler: MessageHandler for J1 CookieConsent module
157
+ // Manage messages send from other J1 modules
158
+ // -------------------------------------------------------------------------
159
+ messageHandler: function (sender, message) {
160
+ var json_message = JSON.stringify(message, undefined, 2);
161
+
162
+ logText = '\n' + 'received message from ' + sender + ': ' + json_message;
163
+ logger.debug(logText);
164
+
165
+ // -----------------------------------------------------------------------
166
+ // Process commands|actions
167
+ // -----------------------------------------------------------------------
168
+ if (message.type === 'command' && message.action === 'module_initialized') {
169
+ //
170
+ // Place handling of command|action here
171
+ //
172
+ logger.info('\n' + message.text);
173
+ }
174
+
175
+ //
176
+ // Place handling of other command|action here
177
+ //
178
+
179
+ return true;
180
+ }, // END messageHandler
181
+
182
+ // -------------------------------------------------------------------------
183
+ // setState()
184
+ // Sets the current (processing) state of the module
185
+ // -------------------------------------------------------------------------
186
+ setState: function (stat) {
187
+ _this.state = stat;
188
+ }, // END setState
189
+
190
+ // -------------------------------------------------------------------------
191
+ // getState()
192
+ // Returns the current (processing) state of the module
193
+ // -------------------------------------------------------------------------
194
+ getState: function () {
195
+ return _this.state;
196
+ } // END getState
197
+
198
+ }; // END return
199
+ })(j1, window);
200
+
201
+ {% endcapture %}
202
+ {% if production %}
203
+ {{ cache | minifyJS }}
204
+ {% else %}
205
+ {{ cache | strip_empty_lines }}
206
+ {% endif %}
207
+ {% assign cache = nil %}
@@ -1095,6 +1095,9 @@ Object.assign( InfiniteScroll.defaults, {
1095
1095
  // elementScroll: null,
1096
1096
  } );
1097
1097
 
1098
+ // jadams
1099
+ // create watchDog
1100
+ //
1098
1101
  InfiniteScroll.create.scrollWatch = function() {
1099
1102
  // events
1100
1103
  this.pageScrollHandler = this.onPageScroll.bind( this );
@@ -1140,6 +1143,9 @@ proto.onPageScroll = InfiniteScroll.throttle( function() {
1140
1143
  }
1141
1144
  } );
1142
1145
 
1146
+ // jadams
1147
+ // calculate distances
1148
+ //
1143
1149
  proto.getBottomDistance = function() {
1144
1150
  let bottom, scrollY;
1145
1151
  if ( this.options.elementScroll ) {
@@ -0,0 +1,150 @@
1
+ /*
2
+ # -----------------------------------------------------------------------------
3
+ # ~/assets/themes/j1/modules/infiniteScroll/css/uno.css
4
+ # Provides styles for J1 Module infiniteScroll
5
+ #
6
+ # Product/Info:
7
+ # https://jekyll.one
8
+ #
9
+ # Copyright (C) 2021 Juergen Adams
10
+ #
11
+ # J1 Template is licensed under the MIT License.
12
+ # See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
13
+ # -----------------------------------------------------------------------------
14
+ */
15
+
16
+ /* multi-color bottom line (currently not used)
17
+ -------------------------------------------------------------------------------- */
18
+ /*
19
+ h2 {
20
+ border-bottom-width: 1px;
21
+ border-bottom-style: dotted;
22
+ border-bottom-color: lightgray;
23
+ }
24
+
25
+ span {
26
+ border-bottom-width: 1px;
27
+ border-bottom-style: dotted;
28
+ border-bottom-color: brown;
29
+ display: inline-block;
30
+ margin: 0 0 -1px 0;
31
+ padding: 10px 3px;
32
+ }
33
+ */
34
+
35
+ /* groups and items
36
+ -------------------------------------------------------------------------------- */
37
+ .list-group-item {
38
+ width: 96%;
39
+ margin-right: 1% !important;
40
+ }
41
+
42
+ /* Media breakpoints */
43
+ @media only screen and (min-width: 576px) {
44
+ .list-group-item.items-auto {
45
+ width: 48.3%; }
46
+ .list-group-item.items-1 {
47
+ width: 96%; }
48
+ .list-group-item.items-2 {
49
+ width: 48.3%; }
50
+ .list-group-item.items-3 {
51
+ width: 48.3%; }
52
+ .list-group-item.items-4 {
53
+ width: 48.3%; } }
54
+
55
+ @media only screen and (min-width: 768px) {
56
+ .list-group-item.items-auto {
57
+ width: 31.333%; }
58
+ .list-group-item.items-1 {
59
+ width: 96%; }
60
+ .list-group-item.items-2 {
61
+ width: 48.3%; }
62
+ .list-group-item.items-3 {
63
+ width: 48.3%; }
64
+ .list-group-item.items-4 {
65
+ width: 48.3%; } }
66
+
67
+ @media only screen and (min-width: 992px) {
68
+ .list-group-item.items-auto {
69
+ width: 23.8%; }
70
+ .list-group-item.items-1 {
71
+ width: 96%; }
72
+ .list-group-item.items-2 {
73
+ width: 48.3%;
74
+ }
75
+ .list-group-item.items-3 {
76
+ width: 31.333%; }
77
+ .list-group-item.items-4 {
78
+ width: 23.8%; } }
79
+
80
+
81
+ /* controls
82
+ -------------------------------------------------------------------------------- */
83
+ .page-load-status, .page-scroll-last {
84
+ display: none; /* hidden by default */
85
+ padding-top: .5rem;
86
+ border-top: 1px dotted #212121;
87
+ /* text-align: center; */
88
+ color: #777;
89
+ }
90
+
91
+ span.infinite-scroll-last {
92
+ border-bottom-width: 1px;
93
+ border-bottom-style: dotted;
94
+ border-bottom-color: #212121;
95
+ display: inline-block;
96
+ margin: 0 0 -1px 0;
97
+ padding: 10px 3px;
98
+ }
99
+
100
+ /* spinner
101
+ -------------------------------------------------------------------------------- */
102
+ .loader-ellips {
103
+ font-size: 20px; /* change size here */
104
+ position: relative;
105
+ width: 4em;
106
+ height: 1em;
107
+ margin: 10px auto;
108
+ }
109
+
110
+ .loader-ellips__dot {
111
+ display: block;
112
+ width: 1em;
113
+ height: 1em;
114
+ border-radius: 0.5em;
115
+ background: #555; /* change color here */
116
+ position: absolute;
117
+ animation-duration: 0.5s;
118
+ animation-timing-function: ease;
119
+ animation-iteration-count: infinite;
120
+ }
121
+
122
+ .loader-ellips__dot:nth-child(1),
123
+ .loader-ellips__dot:nth-child(2) {
124
+ left: 0;
125
+ }
126
+ .loader-ellips__dot:nth-child(3) { left: 1.5em; }
127
+ .loader-ellips__dot:nth-child(4) { left: 3em; }
128
+
129
+ @keyframes reveal {
130
+ from { transform: scale(0.001); }
131
+ to { transform: scale(1); }
132
+ }
133
+
134
+ @keyframes slide {
135
+ to { transform: translateX(1.5em) }
136
+ }
137
+
138
+ .loader-ellips__dot:nth-child(1) {
139
+ animation-name: reveal;
140
+ }
141
+
142
+ .loader-ellips__dot:nth-child(2),
143
+ .loader-ellips__dot:nth-child(3) {
144
+ animation-name: slide;
145
+ }
146
+
147
+ .loader-ellips__dot:nth-child(4) {
148
+ animation-name: reveal;
149
+ animation-direction: reverse;
150
+ }
@@ -0,0 +1,15 @@
1
+ /*
2
+ # -----------------------------------------------------------------------------
3
+ # ~/assets/themes/j1/modules/infiniteScroll/css/uno.min.css
4
+ # Provides styles for J1 Module infiniteScroll
5
+ #
6
+ # Product/Info:
7
+ # https://jekyll.one
8
+ #
9
+ # Copyright (C) 2021 Juergen Adams
10
+ #
11
+ # J1 Template is licensed under the MIT License.
12
+ # See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
13
+ # -----------------------------------------------------------------------------
14
+ */
15
+ .list-group-item{width:96%;margin-right:1%!important}@media only screen and (min-width:576px){.list-group-item.items-auto{width:48.3%}.list-group-item.items-1{width:96%}.list-group-item.items-2{width:48.3%}.list-group-item.items-3{width:48.3%}.list-group-item.items-4{width:48.3%}}@media only screen and (min-width:768px){.list-group-item.items-auto{width:31.333%}.list-group-item.items-1{width:96%}.list-group-item.items-2{width:48.3%}.list-group-item.items-3{width:48.3%}.list-group-item.items-4{width:48.3%}}@media only screen and (min-width:992px){.list-group-item.items-auto{width:23.8%}.list-group-item.items-1{width:96%}.list-group-item.items-2{width:48.3%}.list-group-item.items-3{width:31.333%}.list-group-item.items-4{width:23.8%}}.page-load-status,.page-scroll-last{display:none;padding-top:.5rem;border-top:1px dotted #212121;color:#777}span.infinite-scroll-last{border-bottom-width:1px;border-bottom-style:dotted;border-bottom-color:#212121;display:inline-block;margin:0 0 -1px 0;padding:10px 3px}.loader-ellips{font-size:20px;position:relative;width:4em;height:1em;margin:10px auto}.loader-ellips__dot{display:block;width:1em;height:1em;border-radius:.5em;background:#555;position:absolute;animation-duration:.5s;animation-timing-function:ease;animation-iteration-count:infinite}.loader-ellips__dot:nth-child(1),.loader-ellips__dot:nth-child(2){left:0}.loader-ellips__dot:nth-child(3){left:1.5em}.loader-ellips__dot:nth-child(4){left:3em}@keyframes reveal{from{transform:scale(0.001)}to{transform:scale(1)}}@keyframes slide{to{transform:translateX(1.5em)}}.loader-ellips__dot:nth-child(1){animation-name:reveal}.loader-ellips__dot:nth-child(2),.loader-ellips__dot:nth-child(3){animation-name:slide}.loader-ellips__dot:nth-child(4){animation-name:reveal;animation-direction:reverse}
@@ -0,0 +1,188 @@
1
+ /*
2
+ # -----------------------------------------------------------------------------
3
+ # ~/assets/themes/j1/modules/j1Scroll/js/j1scroll.js
4
+ # J1 core module for j1scroll
5
+ #
6
+ # Product/Info:
7
+ # https://jekyll.one
8
+ #
9
+ # Copyright (C) 2021 Juergen Adams
10
+ #
11
+ # J1 Template is licensed under the MIT License.
12
+ # For details, see https://jekyll.one
13
+ # -----------------------------------------------------------------------------
14
+ */
15
+
16
+ // the semi-colon before function invocation is a SAFETY method against
17
+ // concatenated scripts and/or other plugins which may NOT be closed
18
+ // properly.
19
+ //
20
+ ;(function($, window, document, undefined) {
21
+
22
+ 'use strict';
23
+
24
+ // undefined is used here as the undefined global variable in ECMAScript 3 is
25
+ // mutable (ie. it can be changed by someone else). undefined isn't really being
26
+ // passed in so we can ensure the value of it is truly undefined. In ES5, undefined
27
+ // can no longer be modified.
28
+
29
+ // window and document are passed through as local variable rather than global
30
+ // as this (slightly) quickens the resolution process and can be more efficiently
31
+ // minified (especially when both are regularly referenced in your plugin).
32
+
33
+ // Create the defaults once
34
+ var pluginName = 'j1Scroll',
35
+ defaults = {
36
+ type: 'infiniteScroll',
37
+ scrollThreshold: 100,
38
+ elementScroll: false,
39
+ pNum: 2,
40
+ pMaxNum: 6,
41
+ enable: true,
42
+ };
43
+
44
+ // Plugin constructor
45
+ function Plugin (element, options) {
46
+ this.element = element;
47
+ this.settings = $.extend( {}, defaults, options);
48
+ this.settings.elementID = this.element["id"]
49
+ this._defaults = defaults;
50
+ this._name = pluginName;
51
+
52
+ // call the initializer
53
+ this.init(this.settings);
54
+ }
55
+
56
+ // Avoid Plugin.prototype conflicts
57
+ //
58
+ $.extend(Plugin.prototype, {
59
+ // -----------------------------------------------------------------------
60
+ // init: initializer
61
+ //
62
+ // -----------------------------------------------------------------------
63
+ init: function(options) {
64
+ var logger = log4javascript.getLogger('j1.core.j1Scroll');
65
+
66
+ if ( this.settings.elementScroll ) {
67
+ this.scroller = this.element;
68
+ } else {
69
+ this.scroller = window;
70
+ }
71
+
72
+ logger.info('\n' + 'initializing core module: started');
73
+ logger.info('\n' + 'state: started');
74
+
75
+ // initialize infinite scroll
76
+ if ( options.type === 'infiniteScroll') {
77
+ this.detectScroll(options);
78
+ }
79
+ },
80
+ // -----------------------------------------------------------------------
81
+ // bottomReached: detect final scroll position
82
+ //
83
+ // -----------------------------------------------------------------------
84
+ isBottomReached: function (options) {
85
+ var _this = this;
86
+ let bottom, scrollY;
87
+ var clientHeight = $('#' + options.elementID).height();
88
+
89
+ if ( _this.settings.elementScroll ) {
90
+ var $window = $(window);
91
+ var viewport_top = $window.scrollTop();
92
+ var viewport_height = $window.height();
93
+ var viewport_bottom = viewport_top + viewport_height;
94
+ var $elm = $('#' + options.elementID);
95
+ var top = $elm.offset().top + clientHeight;
96
+ var height = $elm.height();
97
+ // bottom = top + height - options.scrollThreshold
98
+ bottom = top + height;
99
+
100
+ return (top >= viewport_top && top < viewport_bottom) ||
101
+ (bottom > viewport_top && bottom <= viewport_bottom) ||
102
+ (height > viewport_height && top <= viewport_top && bottom >= viewport_bottom);
103
+ } else {
104
+ return (window.innerHeight + window.pageYOffset + options.scrollThreshold >= document.body.offsetHeight);
105
+ }
106
+ },
107
+ // -----------------------------------------------------------------------
108
+ // detectScroll: EventHandler to load new items for infinite scroll
109
+ // if final scroll position reached
110
+ // -----------------------------------------------------------------------
111
+ detectScroll: function (options) {
112
+ var _this = this;
113
+ var logger = log4javascript.getLogger('j1.core.j1Scroll.detectScroll');
114
+
115
+ logger.info('\n' + 'detectScroll: started');
116
+
117
+ window.onscroll = function (ev) {
118
+ var bottomReached = _this.isBottomReached(options);
119
+ if (bottomReached) _this.getNewPost(options);
120
+ };
121
+ },
122
+ // -----------------------------------------------------------------------
123
+ // getNewPost: load/append new items
124
+ //
125
+ // -----------------------------------------------------------------------
126
+ getNewPost: function (options) {
127
+ var _this = this;
128
+
129
+ if (options.pNum >= options.pMaxNum ) {
130
+ return;
131
+ }
132
+ if (this.enable === false) return false;
133
+ this.enable = false;
134
+ var xmlhttp = new XMLHttpRequest();
135
+ xmlhttp.onreadystatechange = function () {
136
+ if (xmlhttp.readyState == XMLHttpRequest.DONE) {
137
+ if (xmlhttp.status == 200) {
138
+ options.pNum++;
139
+ var childItems = _this.getChildItemsByAjaxHTML(options, xmlhttp.responseText);
140
+ _this.appendNewItems(childItems);
141
+ }
142
+ return _this.enable = true;
143
+ }
144
+ };
145
+ xmlhttp.open("GET", location.origin + options.path + options.pNum + '/index.html', true);
146
+ xmlhttp.send();
147
+ },
148
+ // -----------------------------------------------------------------------
149
+ // getChildItemsByAjaxHTML:
150
+ //
151
+ // -----------------------------------------------------------------------
152
+ getChildItemsByAjaxHTML: function (options, HTMLText) {
153
+ var newHTML = document.createElement('html');
154
+
155
+ newHTML.innerHTML = HTMLText;
156
+ var childItems = newHTML.querySelectorAll('#' + options.elementID + ' > *');
157
+ return childItems;
158
+ },
159
+ // -----------------------------------------------------------------------
160
+ // appendNewItems:
161
+ //
162
+ // -----------------------------------------------------------------------
163
+ appendNewItems: function (items) {
164
+ var _this = this;
165
+
166
+ items.forEach(function (item) {
167
+ _this.element.appendChild(item);
168
+ });
169
+
170
+ // initialize backdrops
171
+ j1.core.createDropCap();
172
+ }
173
+
174
+ }); // END prototype
175
+
176
+ // lightweight plugin wrapper around the constructor,
177
+ // preventing multiple instantiations
178
+ //
179
+ $.fn [pluginName] = function(options) {
180
+ return this.each(function() {
181
+ if (!$.data( this, "plugin_" + pluginName)) {
182
+ $.data(this, "plugin_" +
183
+ pluginName, new Plugin(this, options));
184
+ }
185
+ });
186
+ };
187
+
188
+ })(jQuery, window, document);
@@ -38,6 +38,19 @@ $(document).ready( function() {
38
38
  var yOffset = 500;
39
39
  var logger = log4javascript.getLogger('j1.core.showOnScroll');
40
40
 
41
+ // var eventHandler_news_panel = function (event) {
42
+ // var clientHeight = $('#home_news_panel-scroll-group').height();
43
+ // var inViewport = isInViewport ($('#home_news_panel-scroll-group'), clientHeight);
44
+ //
45
+ // if (inViewport) {
46
+ // logger.info('\n' + 'The specified container end reached: home_news_panel-scroll-group');
47
+ // //console.log('The specified container is in view.');
48
+ // // $(".home_service_panel").show(showDelay);
49
+ // // window.removeEventListener('scroll', eventHandler_news_panel);
50
+ // }
51
+ // }
52
+ // window.addEventListener('scroll', eventHandler_news_panel);
53
+
41
54
  var eventHandler_service_panel = function (event) {
42
55
  if (isInViewport ($('#home_service_panel'), yOffset)) {
43
56
  logger.info('\n' + 'The specified container is in view: home_service_panel');
data/lib/j1/version.rb CHANGED
@@ -1,3 +1,3 @@
1
- module J1
2
- VERSION = '2021.1.25'
3
- end
1
+ module J1
2
+ VERSION = '2021.1.26'
3
+ end
@@ -53,7 +53,7 @@ gem 'jekyll', '~> 4.2'
53
53
 
54
54
  # Theme Rubies, default: J1 Template (NOT used for the development system)
55
55
  #
56
- gem 'j1-template', '~> 2021.1.25'
56
+ gem 'j1-template', '~> 2021.1.26'
57
57
 
58
58
  # ------------------------------------------------------------------------------
59
59
  # PRODUCTION: Gem needed for the Jekyll and J1 prod environment
@@ -53,7 +53,7 @@ environment: production
53
53
  # ------------------------------------------------------------------------------
54
54
  # Sets the build version of J1 Template Gem
55
55
  #
56
- version: 2021.1.25
56
+ version: 2021.1.26
57
57
 
58
58
  # version
59
59
  # ------------------------------------------------------------------------------
@@ -1303,5 +1303,31 @@ resources:
1303
1303
  files: []
1304
1304
  js: [ modules/showOnScroll/js/showOnScroll ]
1305
1305
  init_function: []
1306
+
1307
+ # ----------------------------------------------------------------------------
1308
+ # j1Scroll
1309
+ # NOTE: https://github.com/jquery-boilerplate/jquery-boilerplate
1310
+ #
1311
+ - name: j1Scroll
1312
+ resource:
1313
+ id: j1scroll
1314
+ enabled: true
1315
+ comment: j1Scroll
1316
+ region: head
1317
+ layout: [ all ]
1318
+ required: ondemand # always | ondemand
1319
+ preload: false # property currently unused
1320
+ script_load: defer
1321
+ dependencies: false
1322
+ pass_init_data: false
1323
+ data:
1324
+ css: [ modules/j1Scroll/css/theme/uno ]
1325
+ files: [
1326
+ modules/j1Scroll/js/j1scroll.js,
1327
+ adapter/js/j1scroll.js
1328
+ ]
1329
+ js: []
1330
+ init_function: [ j1.adapter.j1Scroll.init ]
1331
+
1306
1332
  # ------------------------------------------------------------------------------
1307
1333
  # END config
@@ -423,7 +423,7 @@ end::tables[]
423
423
  // -----------------------------------------------------------------------------
424
424
  tag::products[]
425
425
  :j1--license: MIT License
426
- :j1--version: 2021.1.25
426
+ :j1--version: 2021.1.26
427
427
  :j1--site-name: Jekyll One
428
428
  end::products[]
429
429
 
@@ -364,6 +364,6 @@ end
364
364
 
365
365
  module Jekyll
366
366
  module J1LunrSearch
367
- VERSION = '2021.1.25'
367
+ VERSION = '2021.1.26'
368
368
  end
369
369
  end
@@ -1,5 +1,5 @@
1
1
  ---
2
- title: Test Post 1
2
+ title: Series Post 1
3
3
  tagline: testing series elements
4
4
 
5
5
  categories: [ Examples ]
@@ -1,5 +1,5 @@
1
1
  ---
2
- title: Test Post 2
2
+ title: Series Post 2
3
3
  tagline: testing series elements
4
4
 
5
5
  categories: [ Examples ]
@@ -1,5 +1,5 @@
1
1
  ---
2
- title: Test Post 3
2
+ title: Series Post 3
3
3
  tagline: testing series elements
4
4
 
5
5
  categories: [ Examples ]
@@ -1,5 +1,5 @@
1
1
  ---
2
- title: Test Post 4
2
+ title: Series Post 4
3
3
  tagline: testing series elements
4
4
 
5
5
  categories: [ Examples ]
@@ -31,7 +31,7 @@ toc: false
31
31
 
32
32
  regenerate: true
33
33
 
34
- resources: [ animate, infinitescroll, showonscroll ]
34
+ resources: [ animate, j1scroll, showonscroll ]
35
35
  resource_options:
36
36
  - attic:
37
37
  padding_top: 400
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "private": true,
3
3
  "name": "j1_starter",
4
- "version": "2021.1.25",
4
+ "version": "2021.1.26",
5
5
  "description": "J1 Template Starter Web",
6
6
  "homepage": "https://your.site",
7
7
  "author": {
@@ -0,0 +1,119 @@
1
+ ---
2
+ title: Tester
3
+ tagline: infinite scroll
4
+ date: 2020-11-03 00:00:00 +100
5
+ description: >
6
+ Welcome to the preview page focussing on the image module. This page
7
+ shows some valuable features of the J1 Template to manage your image-based
8
+ content using lightboxes, carousels (slider), and galleries.
9
+
10
+ categories: [ Testpages ]
11
+ tags: [ Example ]
12
+
13
+ comments: false
14
+ fam_menu_id: page_ctrl_simple
15
+
16
+ permalink: /pages/public/learn/scroller-5/
17
+ regenerate: false
18
+
19
+ resources: [ j1scroll, showonscroll ]
20
+ resource_options:
21
+ - attic:
22
+ padding_top: 400
23
+ padding_bottom: 50
24
+ opacity: 0.5
25
+ slides:
26
+ - url: /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
27
+ alt: Photo by Ricardo Gomez Angel on Unsplash
28
+ badge:
29
+ type: unsplash
30
+ author: Ricardo Gomez Angel
31
+ href: https://unsplash.com/@ripato/portfolio
32
+ ---
33
+
34
+ // Page Initializer
35
+ // =============================================================================
36
+ // Enable the Liquid Preprocessor
37
+ :page-liquid:
38
+
39
+ // Set (local) page attributes here
40
+ // -----------------------------------------------------------------------------
41
+ // :page--attr: <attr-value>
42
+ :images-dir: {imagesdir}/pages/roundtrip/100_present_images
43
+
44
+ // Load Liquid procedures
45
+ // -----------------------------------------------------------------------------
46
+ {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
47
+
48
+ // Load page attributes
49
+ // -----------------------------------------------------------------------------
50
+ {% include {{load_attributes}} scope="global" %}
51
+
52
+ // Page content
53
+ // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
54
+
55
+ // Include sub-documents
56
+ // -----------------------------------------------------------------------------
57
+
58
+ == Infinite scroll example 5
59
+
60
+ lorem:sentences[5]
61
+
62
+ ++++
63
+ <div class="noClass">
64
+ <ul id="home_news_panel-scroll-group" class="list-group list-group-horizontal align-items-stretch flex-wrap">
65
+ <!-- [INFO ] [j1.assets.data.panel.html ] [ write post items ] -->
66
+ <li id="home_news_panel-scroll-item" class="list-group-item items-2 p-0">
67
+ <article class="card card-same-height raised-z3 mb-3">
68
+ <img class="img-fluid img-object--cover g-height-200" src="/assets/images/modules/attics/katie-moum-1920x1280.jpg" alt="Welcome">
69
+ <h3 class="card-header bg-primary notoc">Welcome</h3>
70
+ <!-- Body|Excerpt -->
71
+ <div class="card-body r-text-300 mt-4">
72
+ <div class="paragraph dropcap">
73
+ <p class="dropcap"><span class="j1-dropcap">A</span>ll you’re doing at the end of the day is writing your content, and the J1
74
+ Template does all the tricky things: putting out HTML, Javascript, and CSS.
75
+ As a result, the site creation process gets out of your way.</p>
76
+ </div>
77
+ <div class="paragraph">
78
+ <p><strong>Sounds fun, isn’t it</strong>?</p>
79
+ </div>
80
+ </div>
81
+ <!-- End Body|Excerpt -->
82
+ <div class="card-footer r-text-200">
83
+ <div class="card-footer-text">
84
+ <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>2021 March, 28
85
+ </div>
86
+ <a class="card-link text-muted text-lowercase" href="/posts/public/featured/info/2021/03/28/welcome-to-j1/">
87
+ read · jekyll for everyone
88
+ </a>
89
+ </div>
90
+ </article>
91
+ </li>
92
+ <li id="home_news_panel-scroll-item" class="list-group-item items-2 p-0">
93
+
94
+ <article class="card card-same-height raised-z3 mb-3">
95
+ <img class="img-fluid img-object--cover g-height-200" src="/assets/images/modules/attics/runner-1920x1200.jpg" alt="J1 Template">
96
+ <h3 class="card-header bg-primary notoc">J1 Template</h3>
97
+ <!-- Body|Excerpt -->
98
+ <div class="card-body r-text-300 mt-4">
99
+ <div class="paragraph dropcap">
100
+ <p class="dropcap"><span class="j1-dropcap">T</span>he template system was initially developed to create a simple but fully
101
+ configurable website creation toolset for document servers. Document servers
102
+ provide websites or other content formats like PDF, projects, software
103
+ documentation, or similar approaches.</p>
104
+ </div>
105
+ </div>
106
+ <!-- End Body|Excerpt -->
107
+ <div class="card-footer r-text-200">
108
+ <div class="card-footer-text">
109
+ <i class="mdi mdi-calendar-blank md-grey-600 mr-1"></i>2021 March, 3
110
+ </div>
111
+ <a class="card-link text-muted text-lowercase" href="/posts/public/featured/knowledge/2021/03/03/about-j1/">
112
+ read · first version is out
113
+ </a>
114
+ </div>
115
+ </article>
116
+ </li>
117
+ </ul>
118
+ </div>
119
+ ++++
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "private": true,
3
3
  "name": "utls",
4
- "version": "2021.1.25",
4
+ "version": "2021.1.26",
5
5
  "description": "J1 Template Utility Server",
6
6
  "homepage": "https://jekyll.one",
7
7
  "author": {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "private": true,
3
3
  "name": "utls",
4
- "version": "2021.1.25",
4
+ "version": "2021.1.26",
5
5
  "description": "J1 Template Utility Server",
6
6
  "homepage": "https://jekyll.one",
7
7
  "author": {
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: j1-template
3
3
  version: !ruby/object:Gem::Version
4
- version: 2021.1.25
4
+ version: 2021.1.26
5
5
  platform: ruby
6
6
  authors:
7
7
  - juergen_jekyll_one
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2021-09-15 00:00:00.000000000 Z
11
+ date: 2021-09-18 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -384,6 +384,7 @@ files:
384
384
  - assets/themes/j1/adapter/js/framer.js
385
385
  - assets/themes/j1/adapter/js/infiniteScroll.js
386
386
  - assets/themes/j1/adapter/js/j1.js
387
+ - assets/themes/j1/adapter/js/j1scroll.js
387
388
  - assets/themes/j1/adapter/js/justifiedGallery.js
388
389
  - assets/themes/j1/adapter/js/justifiedGalleryCustomizer.js
389
390
  - assets/themes/j1/adapter/js/lightbox.js
@@ -545,6 +546,9 @@ files:
545
546
  - assets/themes/j1/modules/infiniteScroll/css/theme/uno.min.css
546
547
  - assets/themes/j1/modules/infiniteScroll/js/infiniteScroll.js
547
548
  - assets/themes/j1/modules/infiniteScroll/js/infiniteScroll.min.js
549
+ - assets/themes/j1/modules/j1Scroll/css/theme/uno.css
550
+ - assets/themes/j1/modules/j1Scroll/css/theme/uno.min.css
551
+ - assets/themes/j1/modules/j1Scroll/js/j1scroll.js
548
552
  - assets/themes/j1/modules/jquery/css/jqueryUI/theme.css
549
553
  - assets/themes/j1/modules/jquery/css/jqueryUI/theme.min.css
550
554
  - assets/themes/j1/modules/jquery/js/jquery-3.5.1.min.map
@@ -1326,6 +1330,7 @@ files:
1326
1330
  - lib/starter_web/favicon.ico
1327
1331
  - lib/starter_web/index.html
1328
1332
  - lib/starter_web/package.json
1333
+ - lib/starter_web/pages/infinite-scroll-tester-5.adoc
1329
1334
  - lib/starter_web/pages/private/readme
1330
1335
  - lib/starter_web/pages/protected/readme
1331
1336
  - lib/starter_web/pages/public/about/about_site.adoc