Permalink
Browse files

appending new searches. infinite scroll not worth it

  • Loading branch information...
Brian Jacobs
Brian Jacobs committed Jun 10, 2011
1 parent 8dc28ab commit f06fd116ff6f7bb9205ab0e9fb37ca34a4e9dd1d
Showing with 1,569 additions and 47 deletions.
  1. +3 −1 index.html
  2. +51 −46 js/main.js
  3. +583 −0 patterns/chooseplan.js
  4. +932 −0 patterns/viewplan.html
View
@@ -57,6 +57,8 @@
<div id="thumbContainer" class="infinite">
</div>
+ <div id="thumbContainer2" class="infinite"></div>
+
<div class="navigation"><a href="http://localhost:81/geoimagesearch/ba-simple-proxy.php?url=http://phillyhistory.org/PhotoArchive/Thumbnails.ashx?limit%3D60%26noStore%3Dfalse%26request%3DImages%26start%3D0%26urlqs%3Dminx%253D-8413034.983992%2526maxx%253D-8321310.550067%2526miny%253D4805521.955385%2526maxy%253D4912533.794965%2526type%253Darea%2526withoutMedia%253Dfalse%2526withoutLoc%253Dfalse%2526updateDays%253D0%2526onlyWithoutLoc%253Dfalse%2526sortOrderM%253DDISTANCE%2526sortOrderP%253DDISTANCE">next</a></div>
<ul id="queryContainer">
@@ -73,7 +75,7 @@
<ul>
<!-- Hijack this link for the infinite scroll -->
- <li class="more"><a href="http://localhost:81/geoimagesearch/ba-simple-proxy.php?url=http://phillyhistory.org/PhotoArchive/Thumbnails.ashx?limit%3D60%26noStore%3Dfalse%26request%3DImages%26start%3D0%26urlqs%3Dminx%253D-8413034.983992%2526maxx%253D-8321310.550067%2526miny%253D4805521.955385%2526maxy%253D4912533.794965%2526type%253Darea%2526withoutMedia%253Dfalse%2526withoutLoc%253Dfalse%2526updateDays%253D0%2526onlyWithoutLoc%253Dfalse%2526sortOrderM%253DDISTANCE%2526sortOrderP%253DDISTANCE" title="Traditional navigation link">Next Page</a></li>
+ <li class="more"><a href="#">Next Page</a></li>
</ul>
</nav>
</footer>
View
@@ -1,3 +1,6 @@
+//TODO: render new queries into their own dynamic containers. show relevant headers. make isotope faster when appending a lot of things...
+
+
var data = {
categories: {
@@ -80,6 +83,8 @@ var btj = {
// }
});
+
+ t_thumbContainer2 = Tempo.prepare('thumbContainer2');
t_seriesContainer = Tempo.prepare('seriesContainer').notify( function(event) {
if (event.type === TempoEvent.Types.RENDER_COMPLETE) {
@@ -97,7 +102,7 @@ var btj = {
//attach usable localstorage data request value to render container for future child clicks
$.jStorage.set(renderContainer.templates.container.id, dataRequest);
-
+
// if the results dont exist already TODO: is this going to work with resubmitting new searches?
if (forcePost == true) {
@@ -165,7 +170,8 @@ var btj = {
$.each(templateData, function(i, val) {
theImg += '<div class="img"><img src="http://phillyhistory.org/PhotoArchive/'+val.url+'"></div>';
})
- $(renderContainer.templates.container).isotope( 'insert', $( theImg ) );
+
+ $(renderContainer.templates.container).isotope( 'insert', $( theImg ) )
// USE WAYPOINTS INSTEAD OF INFINITE SCROLL -- infinite scroll wants to do a get, not a post
@@ -193,33 +199,53 @@ var btj = {
renderContainer.starting();
renderContainer.render(templateData);
}
- }
+ },
+ refreshThumbs : function(options) {
+ //clear isotope
+ $(t_thumbContainer.templates.container).isotope('remove', $(t_thumbContainer.templates.container).children());
+ //rerender thumbs
+ btj.retrieveData(data.thumbnails, t_thumbContainer, 'images', true);
+
+ //TODO:add new query to tagging
+ //TODO: save thumbnailQueryHistory to localStorage
+ //console.log(data.thumbnailQuery.results[0][dataQuery])
+ },
+ appendHistory : function(dataKey, dataValue) { //TODO: allow this to accept multiple key/value pairs
+
+ //clone previous query object and alter with new query request
+ var newThumbnailQuery = $.extend(true, {}, data.thumbnailQuery.results[0]);
+ newThumbnailQuery[dataKey] = dataValue;
+ //get the additional query into the history object
+ data.thumbnailQuery.results.unshift(newThumbnailQuery);
+ }
+
}
$(function(){
//unbind infinite scroll to work onclick
//$(window).unbind('.infscr');
-
+ var queryAdditions = []
btj.prepareTemplates();
- $('#thumbContainer').isotope({
+ $('#thumbContainer, #thumbContainer2').isotope({
itemSelector : '.img',
layoutMode : 'masonry',
masonry : {
columnWidth : 120
},
animationEngine: 'best-available',
animationOptions: {
- duration: 750,
+ duration: 5000,
easing: 'linear',
- queue: false
+ queue: true
}
});
+ // USE object option notation for setting options
btj.retrieveData(data.thumbnails, t_thumbContainer, 'images', true);
@@ -238,48 +264,27 @@ $(function(){
- $('.moreResults').click(function() {
- // trigger the next infinite scroll results
- // $(document).trigger('retrieve.infscr');
+ $('.more').click(function() {
+ // start the thumbs beyond the previous fetch point
+ data.thumbnails.params.start = data.thumbnails.params.limit + data.thumbnails.params.start + 1;
+
+
+ btj.retrieveData(data.thumbnails, t_thumbContainer2, 'images', true);
+ // append more results onto current criteria
})
- $('.searchCriteria a').click(function(){
-
- //get query request from dom storage of clicked item
- var dataQuery = $.jStorage.get($(this).closest('.searchCriteria').attr('id'));
- //clone previous query object and alter with new query request
-
- var newThumbnailQuery = $.extend(true, {}, data.thumbnailQuery.results[0]);
- newThumbnailQuery[dataQuery] = $(this).html();
-
- //get the additional query into the history object
-
- data.thumbnailQuery.results.unshift(newThumbnailQuery);
-
- //add new request to the top of the query object
-
- //$.merge(data.thumbnailQuery,newThumbnailQuery)
-
-
-
-
-
- //TODO:add new query to tagging
- //TODO: save thumbnailQueryHistory to localStorage
-
- t_thumbContainer.clear();
- btj.retrieveData(data.thumbnails, t_thumbContainer, 'images', true);
-
-
-
- //console.log(data.thumbnailQuery.results[0][dataQuery])
-
-
- btj.retrieveData(data.thumbnailQuery, t_queryContainer, 0, false);
-
+ $('.searchCriteria a').click(function(){ //TODO: allow storage of number of images fetched?
+ //get query request from dom storage of clicked item, set to search history,
+ btj.appendHistory($.jStorage.get($(this).closest('.searchCriteria').attr('id')), $(this).html());
+ btj.refreshThumbs(queryAdditions);
+
+
+
+
+
// WAYPOINTS
- var $loading = $("<div class='loading'><p>Loading more items&hellip;</p></div>"),
+ /* var $loading = $("<div class='loading'><p>Loading more items&hellip;</p></div>"),
$footer = $('footer'),
opts = {
offset: '100%'
@@ -291,7 +296,7 @@ $(function(){
$('#topicsContainer a:first').click()
// $footer.waypoint(opts);
- }, opts);
+ }, opts); */
Oops, something went wrong.

0 comments on commit f06fd11

Please sign in to comment.