m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-22 17:23:50 +01:00
Code

kill infinite scroll

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-05-31 21:56:40 +02:00
parent d2e2832da4
commit 1af2abd77d
8 changed files with 50 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Gruntfile.js
View File

@ -105,11 +105,10 @@ module.exports = function(grunt){
'node_modules/picturefill/dist/picturefill.js'
],
'<%= config.site %>/<%= config.assets.js %>/CustomElements.min.js': [
'node_modules/webcomponentsjs/CustomElements.js'
'node_modules/webcomponents.js/CustomElements.js'
],
'<%= config.site %>/<%= config.assets.js %>/kremalicious3.min.js': [
'node_modules/jquery/dist/jquery.js',
'bower_components/jquery-infinite-scroll/jquery.infinitescroll.js',
'node_modules/masonry-layout/dist/masonry.pkgd.js',
'node_modules/imagesloaded/imagesloaded.js',
'bower_components/simple-jekyll-search/dest/jekyll-search.js',

2
_config.yml
View File

@ -23,7 +23,7 @@ author:
# --------------------
permalink: /:title/
paginate: 15
paginate: 10
paginate_path: "/page/:num"
category_dir: "/"
category_title_prefix: ""

2
_src/_includes/head.html
View File

@ -30,7 +30,7 @@
<title>
{% if paginator.previous_page %}
Page {{ paginator.page }} &brvbar; {{ page.title }}
Page {{ paginator.page }} &brvbar; {{ site.name }}
{% elsif page.title %}
{{ page.title }} &brvbar; {{ site.name }}
{% else %}

61
_src/_includes/paginator.html
View File

@ -1,51 +1,46 @@
{% if paginator.total_pages > 1 %}
<nav class="row paginator">
{% if paginator.previous_page %}
<p class="previous col2">
<i class="icon-arrow-left"></i>
<p class="paginator-previous col2">
{% if paginator.previous_page %}
<a
{% if page.category %}
{% if paginator.previous_page == 1 %}
<a href="/{{ page.category }}/" rel="prev">Previous</a>
href="/{{ page.category }}/"
{% else %}
<a href="/{{ page.category }}/page/{{ paginator.previous_page }}/" rel="prev">Previous</a>
href="/{{ page.category }}/page/{{ paginator.previous_page }}/"
{% endif %}
{% else %}
{% if paginator.previous_page == 1 %}
<a href="/" rel="prev">Previous</a>
href="/"
{% else %}
<a href="/page/{{ paginator.previous_page }}/" rel="prev">Previous</a>
href="/page/{{ paginator.previous_page }}/"
{% endif %}
{% endif %}
</p>
{% endif %}
<p class="col2 pagenumber textcenter">
<span class="page_number ">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
rel="prev"><i class="icon icon-arrow-left"></i> Previous
</a>
{% endif %}
</p>
{% if paginator.next_page %}
<p class="next col2">
<p class="col2 pagenumber textcenter">
<span class="paginator-number ">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
</p>
<p class="paginator-next col2">
{% if paginator.next_page %}
<a
{% if page.category %}
<a href="/{{ page.category }}/page/{{ paginator.next_page }}/" rel="next">Next</a>
href="/{{ page.category }}/page/{{ paginator.next_page }}/"
{% else %}
<a href="/page/{{ paginator.next_page }}/" rel="next">Next</a>
href="/page/{{ paginator.next_page }}/"
{% endif %}
<i class="icon-arrow-right"></i>
</p>
{% else %}
<p class="next col2">
The End
</p>
{% endif %}
rel="next">Next <i class="icon icon-arrow-right"></i>
</a>
{% endif %}
</p>
</nav>
{% endif %}
{% endif %}

79
_src/assets/js/app.js
View File

@ -2,7 +2,6 @@ $(ASAP = function() {
siteNavigation.init();
siteEffects.init();
infiniteScroll.init();
});
@ -156,81 +155,3 @@ var siteEffects = {
}
}
var infiniteScroll = {
infiniteScrollSetup: function() {
if ($('.page-photos').length > 0) {
var items = '#main .masonry';
} else {
var items = '#main article.hentry';
}
var $scrollContent = $('#main');
$scrollContent.infinitescroll({
loading: {
img: ''
},
itemSelector: items,
nextSelector: '.next a',
navSelector: '.paginator',
binder: $scrollContent,
behavior: 'krlc3',
}, function($scrollContent) {
// run picturefill over retrieved items
picturefill();
// run the photogrid over retrieved items
photoGrid.init();
});
},
init: function() {
this.infiniteScrollSetup();
}
}
/*
--------------------------------
Infinite Scroll Behavior
Manual mode with minimal loader
Usage: behavior: 'krlc3'
--------------------------------
*/
$.extend($.infinitescroll.prototype, {
_setup_krlc3: function infscr_setup_krlc3() {
var opts = this.options,
instance = this,
loader = $('<span class="loading"> ...</span>');
$(opts.nextSelector).parent().parent().addClass('infiniteLoader');
// Bind nextSelector link to retrieve
$(opts.nextSelector).click(function(e) {
if (e.which == 1 && !e.metaKey && !e.shiftKey) {
e.preventDefault();
instance.retrieve();
}
});
// custom start
instance.options.loading.start = function(opts) {
loader
.appendTo(opts.nextSelector)
.show(opts.loading.speed, function() {
instance.beginAjax(opts);
});
}
// custom finish
instance.options.loading.finished = function(opts) {
loader.detach();
};
}
});

39
_src/assets/styl/navigation.styl
View File

@ -91,35 +91,24 @@
.paginator
@extend .clearfix
p
position: relative
a
display: block
.icon
vertical-align: middle
i
position: absolute
left: 0
top: 0
.paginator-next
@extend .alignright
text-align: right
.next
@extend .alignright
text-align: right
.paginator-previous
@extend .alignleft
a
margin-right: 1.5em
.paginator-number
font-size: $font-size-small
color: $brand-grey-light
i
margin-left: .5em
left: auto
right: 0
.previous
@extend .alignleft
a
margin-left: 1.5em
i
margin-right: .5em
.paginator-title
@extend .h3, .heading-band
color: $brand-grey-light
margin-bottom: 0
// Infinite Loader

6
_src/index.html
View File

@ -15,6 +15,10 @@ redirect_from:
<section role="main" id="main" class="row">
{% if paginator.previous_page %}
<h1 class="paginator-title">Page {{ paginator.page }}</h1>
{% endif %}
{% for post in paginator.posts %}
{% include articles.html %}
@ -23,4 +27,4 @@ redirect_from:
</section>
{% include paginator.html %}
{% include paginator.html %}

1
bower.json
View File

@ -8,7 +8,6 @@
"description": "Blog of Matthias Kretschmann",
"license": "MIT",
"dependencies": {
"jquery-infinite-scroll": ">=2.0.2",
"simple-jekyll-search": ">=1.0.6",
"time-elements": ">=0.4.0"
},