-
Notifications
You must be signed in to change notification settings - Fork 0
/
infinito.js
191 lines (160 loc) · 5.95 KB
/
infinito.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
/**
* jquery.clever-infinite-scroll.js
* Working with jQuery 2.1.4
Modify By Pablo Diaz to make work with json data.
The difference between the original and this modification is,
that it allows to obtain the data type json,
reducing the size of the requested data to the server.
And after in your js you can add the html.
*/
(function(root, factory){
"use strict";
if (typeof define === "function" && define.amd) {
define(["jquery"], factory);
} else if (typeof exports === "object") {
factory(require("jquery"));
} else {
factory(root.jQuery);
}
})(this, function($) {
"use strict";
/**
* Elements it reffers. Each page must has those selectors.
* The structure must be same as article1.html
* #contentsWrapper, .content, #next
*/
$.fn.cleverInfiniteScroll = function(options) {
/**
* Settings
*/
var windowHeight = (typeof window.outerHeight !== "undefined") ? Math.max(window.outerHeight, $(window).height()) : $(window).height(),
defaults = {
contentsWrapperSelector: "#contentsWrapper",
contentSelector: ".container-tarj-product-destc",
nextSelector: "#next",
loadImage: "",
offset: windowHeight,
}, settings = $.extend(defaults, options);
/**
* Private methods
*/
var generateHiddenSpans = function(_title, _path) {
return "<span class='hidden-title' style='display:none'>" + _title + "</span><span class='hidden-url' style='display:none'>" + _path + "</span>";
},
setTitleAndHistory = function(_title, _path) {
// Set history
history.pushState(null, _title, _path);
// Set title
$("title").html(_title);
},
changeTitleAndURL = function(_value) {
// value is an element of a content user is seeing
// Get title and path of the article page from hidden span elements
var title = $(_value).children(".hidden-title:first").text(),
path = $(_value).children(".hidden-url:first").text();
if($("title").text() !== title) {
// If it has changed
$(settings.contentSelector).removeClass("active");
$(_value).addClass("active");
setTitleAndHistory(title, path);
}
};
/**
* Initialize
*/
// Get current page's title and URL.
var title = $("title").text(),
path = $(location).attr("href"),
documentHeight = $(document).height(),
threshold = settings.offset,
$contents = $(settings.contentSelector), seguir=true;
// Set hidden span elements and history
$(settings.contentSelector + ":last").append(generateHiddenSpans(title, path));
$(settings.contentSelector).addClass("active");
setTitleAndHistory(title, path);
/**
* scroll
*/
var lastScroll = 0, currentScroll;
$(window).scroll(function() {
// Detect where you are
window.clearTimeout($.data("this", "scrollTimer"));
$.data(this, "scrollTimer", window.setTimeout(function() {
// Get current scroll position
currentScroll = $(window).scrollTop();
// Detect whether it's scrolling up or down by comparing current scroll location and last scroll location
if(currentScroll > lastScroll) {
// If it's scrolling down
$contents.each(function(key, value) {
if($(value).offset().top + $(value).height() > currentScroll) {
// Change title and URL
changeTitleAndURL(value);
// Quit each loop
return false;
}
});
} else if(currentScroll < lastScroll) {
// If it's scrolling up
$contents.each(function(key, value) {
if($(value).offset().top + $(value).height() - windowHeight / 2 > currentScroll) {
// Change title and URL
changeTitleAndURL(value);
// Quit each loop
return false;
}
});
}
// Renew last scroll position
lastScroll = currentScroll;
}, 200));
var $url = [$(settings.nextSelector).attr("href")];
if($(window).scrollTop() + windowHeight + threshold >= documentHeight) {
$(settings.nextSelector).remove();
if($url[0] !== undefined) {
// If the page has link, call ajax
if(settings.loadImage !== "") {
$(settings.contentsWrapperSelector).append("<img src='" + settings.loadImage + "' id='cis-load-img'>");
}
page++;
var Uajax='http://ejemplo.eu/productos/ajax/page/'+page;
$.get(Uajax, function(data) {
for(var i in data)
{
if(i==3){
var $html='<article class="col-sm-6 col-md-3 wrapper-tarj-product-destc tarj-product-destc-bottom">\
<div class="thumbnail"> <img src="http://ejemplo.com/'+data[i].img_name+'" alt="..." class="img-responsive">\
<div class="caption">\
<p class="col-md-12">'+data[i].nombre+'</p>\
</div>\
</div>\
</article>';
}else{
var $html='<article class="col-sm-6 col-md-3 wrapper-tarj-product-destc tarj-product-destc">\
<div class="thumbnail"> <img src="http://ejemplo.com/'+data[i].img_name+'" alt="..." class="img-responsive">\
<div class="caption">\
<p class="col-md-12">'+data[i].nombre+'</p>\
</div>\
</div>\
</article>';
}
$(settings.contentSelector).append($html);
}
if(data.texto!=false){
$(settings.contentsWrapperSelector).append('<a href="next" id="next">next</a>');
}
documentHeight = $(document).height();
$("#cis-load-img").remove();
}, 'json');
}
}
}); //scroll
return (this);
}; //$.fn.cleverInfiniteScroll
});
/*llamado a la función */
$('#contentsWrapper').cleverInfiniteScroll({
contentsWrapperSelector: '#contentsWrapper',
contentSelector: '.container-tarj-product-destc',
nextSelector: '#next',
loadImage: 'ajax-loader.gif'
});