Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Using the jQuery kinetic plugin, this commit adds a more responsive i…

…mage bar.
  • Loading branch information...
commit 05bb734088f915e7b901663c53c2cfab8ce1f5c3 1 parent 8b2f05e
Mike Graves authored
View
BIN  src/images/arrow-l.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  src/images/arrow-r.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
18 src/index-example.html
@@ -31,11 +31,19 @@
</div>
</div>
<div id="map"></div>
- <div id="items">
- <a href="" id="prevPageButton"><img src="http://imageserv.lib.unc.edu/geobrowse/left.png" /></a>
- <ul id="items-list">
- </ul>
- <a href="" id="nextPageButton"><img src="http://imageserv.lib.unc.edu/geobrowse/right.png" /></a>
+ <div id="imgbar-wrapper">
+ <div id="imgbar-back-button">
+ <div class="imgbar-button-background"></div>
+ <img src="images/arrow-l.png" />
+ </div>
+ <div id="imgbar-content">
+ <ul>
+ </ul>
+ </div>
+ <div id="imgbar-forward-button">
+ <div class="imgbar-button-background"></div>
+ <img src="images/arrow-r.png" />
+ </div>
</div>
</div>
</body>
View
366 src/js/PhotoStrip.js
@@ -1,211 +1,195 @@
define(["jquery"], function($){
-(function( $ ){
+(function($){
+ var requesting = false,
+ requested = 0,
+ torequest = 0,
+ barwidth = 2,
+ settings = {},
+ query,
+ $this;
- var methods = {
- init: function(options) {
- return this.each(function() {
- var $this = $(this);
- var settings = {
- solr: null
- }
- if (options) {
- $.extend(settings, options);
+ var initialize = function(options) {
+ $this = this;
+ $.extend(settings, options);
+
+ $("#imgbar-content").kinetic({
+ y: false,
+ moved: function(settings) {
+ var ulwidth = $this.find("ul").width(),
+ barwidth = $this.find("#imgbar-content").width(),
+ width = ulwidth - barwidth - settings.scrollLeft;
+ if ((width < barwidth * 2) && !requesting && (requested < torequest)) {
+ fetchThumbs();
}
- $this.data('photostrip', settings);
- $this.on("click", "#prevPageButton", function(e){
- e.preventDefault();
- $this.photostrip('moveLeft');
- }).on("click", "#nextPageButton", function(e){
- e.preventDefault();
- $this.photostrip('moveRight');
- }).on("click", "#items-list a", function(e){
- e.preventDefault();
- $this.photostrip('displayImage', $(this).attr("data-url"));
+ }
+ });
+
+ $this.on("mouseenter", function() {
+ $("#imgbar-back-button, #imgbar-forward-button").fadeIn(300);
+ }).on("mouseleave", function() {
+ $("#imgbar-back-button, #imgbar-forward-button").fadeOut(300);
+ });
+
+ $("#imgbar-forward-button").on("mousedown", function() {
+ $("#imgbar-content").kinetic("start", {velocity: 7});
+ });
+
+ $("#imgbar-back-button").on("mousedown", function() {
+ $("#imgbar-content").kinetic("start", {velocity: -7});
+ });
+
+ $(document).on("mouseup", function() {
+ $("#imgbar-content").kinetic("end");
+ });
+
+ $this.on("click", "li img", function() {
+ displayImage($(this).attr("data-url"));
+ });
+ }
+
+ var fetchThumbs = function() {
+ requesting = true;
+ $.ajax(settings.solr, {
+ data: {
+ q: query,
+ wt: 'json',
+ fl: 'thumbnail,title,url_self_s',
+ rows: 30,
+ start: requested
+ },
+ dataType: "json"
+ })
+ .done(function(resp) {
+ var dfds = [];
+ requested += 30;
+ $.each(resp.response.docs, function(index, value) {
+ var dfd = $.Deferred(),
+ img;
+
+ dfd.done(function(img) {
+ if (img) {
+ var $li = $("<li>").append(img);
+ $this.find("ul").append($li);
+ barwidth += img.width();
+ $this.find("ul").width(barwidth);
+ }
});
- $("#nextPageButton, #prevPageButton").hide();
- });
- },
- loadCluster: function(options) {
- return this.each(function() {
- var $this = $(this);
- var data = $this.data('photostrip');
- var settings = {
- counter: -5, //position in queue of first visible image
- queue: [], //queue of images
- total: 0, //total number of points in cluster
- query: null,
- solr: data.solr //retain this, all other settings overwritten
- };
- if (options) $.extend(settings, options);
- $this.data('photostrip', settings);
- $this.photostrip('moveRight');
- });
- },
-
- fillStrip: function() {
- return this.each(function() {
- var $this = $(this);
- var data = $this.data('photostrip');
- $("#items-list").empty();
- var current = data.queue.slice(data.counter, data.counter+5);
- $.each(current, function(index, value){
- $.Deferred(function(dfd) {
- $("<img/>")
- .attr({
- src: value.thumbnail,
- title: value.title,
- height: "75px"
- })
- .load(function(){
- var li = $(this)
- .appendTo("<a/>")
- .parent()
- .attr({
- href: "#",
- "data-url": value.url_self_s
- })
- .appendTo("<li/>")
- .parent();
- dfd.resolve({
- li: li
- });
- });
- })
- .then(function(options){
- options.li.appendTo("#items-list").hide();
- $(options.li).fadeIn(500);
- });
+ dfds.push(dfd);
+
+ img = $("<img/>").attr({
+ src: value.thumbnail,
+ "data-url": value.url_self_s
+ }).on("load", function(e) {
+ dfd.resolve(img);
+ return true;
+ }).on("error", function(e) {
+ /* @todo: what to do here? */
+ dfd.resolve();
+ return true;
});
- if (data.total <= 5) {
- $("#nextPageButton, #prevPageButton").hide();
- } else {
- if (data.counter+5 >= data.total) {
- $("#nextPageButton").hide();
- } else {
- $("#nextPageButton").show();
- }
- if (data.counter >= 5) {
- $("#prevPageButton").show();
- } else {
- $("#prevPageButton").hide();
- }
+
+ if (img.prop("complete") && img.prop("naturalWidth") !== undefined ) {
+ dfd.resolve(img);
+ return true;
}
- });
- },
-
- moveRight: function() {
- return this.each(function() {
- var $this = $(this);
- var data = $this.data('photostrip');
- data.start = data.start ? parseInt(data.start)+10 : 0;
- data.counter += 5;
- if (data.queue.length < data.total) {
- $.when(
- $.get(data.solr, {
- q: data.query,
- wt: 'json',
- fl: 'thumbnail,title,url_self_s',
- rows: 10,
- start: data.start},
- function(res){
- data.queue = data.queue.concat(res.response.docs);
- data.start = res.responseHeader.params.start;
- $this.data('photostrip', data);
- },
- 'json')
- ).then(function(){
- $this.photostrip('fillStrip');
- });
- } else {
- $this.photostrip('fillStrip');
+
+ if (img.prop("readyState") || img.prop("complete")) {
+ dfd.resolve(img);
}
- })
- },
-
- moveLeft: function() {
- return this.each(function() {
- var $this = $(this);
- var data = $this.data('photostrip');
- data.counter -= 5;
- $this.photostrip('fillStrip');
});
- },
-
- displayImage: function(url) {
- return this.each(function() {
- $("#wrapper, #viewer").remove();
- $.getJSON(url, function(data) {
- var description = data.description;
- var imgurl = data.image;
- var url = data.url;
- var title = data.title;
- $("body").append('<div id="wrapper"></div>'+
- '<div id="viewer">'+
- '<div id="v-image"></div>'+
- '<div id="v-links">'+
- '<div class="v-button"><a title="Close image" href=""><img src="http://imageserv.lib.unc.edu/geobrowse/cross.png" /></a></div>'+
- '<div class="v-button">'+
- '<a target="_blank" title="Open full image in new window" href="'+url+'">'+
- '<img src="http://imageserv.lib.unc.edu/geobrowse/application.png" />'+
- '</a>'+
- '</div>'+
- '</div>'+
- '<div id="v-desc">'+
- '<div><b>Title:</b> '+title+'</div>'+
- '<div><b>Description:</b> '+description+
- ' <a target="_blank" title="Open full image in new window" href="'+url+'">more...</a>'+
- '</div>'+
- '</div>'+
- '</div>');
- $("#wrapper, .v-button:first a").click(function(event) {
- event.preventDefault();
- $("#wrapper, #viewer").fadeOut(200, function(){
- $("#wrapper, #viewer").remove();
- });
- });
- $("#wrapper").fadeTo(200, 0.9);
- $.Deferred(function(dfd){
- $("<img/>")
- .attr("src", imgurl)
- .load(function(){
- var top = $(window).scrollTop() + 20;
- var winwidth = $(window).width();
- var width = this.width + 50;
- var lmargin = 20;
- if (width < winwidth) {
- lmargin = (winwidth - width) / 2;
- }
- dfd.resolve({
- img: $(this),
- top: top,
- lmargin: lmargin,
- width: width
- });
- });
- }).then(function(options){
- $("#v-image").append(options.img);
- $("#viewer").css({
- 'visibility': 'visible',
- 'width': options.width + 'px',
- 'margin-top': options.top + 'px',
- 'margin-left': options.lmargin + 'px'
- }).hide().fadeIn(300);
+ $.when.apply($, dfds).done(function() {
+ requesting = false;
+ });
+ });
+ }
+
+ var displayImage = function(url) {
+ $("#wrapper, #viewer").remove();
+ $.getJSON(url, function(data) {
+ var description = data.description;
+ var imgurl = data.image;
+ var url = data.url;
+ var title = data.title;
+ $("body").append('<div id="wrapper"></div>'+
+ '<div id="viewer">'+
+ '<div id="v-image"></div>'+
+ '<div id="v-links">'+
+ '<div class="v-button"><a title="Close image" href=""><img src="http://imageserv.lib.unc.edu/geobrowse/cross.png" /></a></div>'+
+ '<div class="v-button">'+
+ '<a target="_blank" title="Open full image in new window" href="'+url+'">'+
+ '<img src="http://imageserv.lib.unc.edu/geobrowse/application.png" />'+
+ '</a>'+
+ '</div>'+
+ '</div>'+
+ '<div id="v-desc">'+
+ '<div><b>Title:</b> '+title+'</div>'+
+ '<div><b>Description:</b> '+description+
+ ' <a target="_blank" title="Open full image in new window" href="'+url+'">more...</a>'+
+ '</div>'+
+ '</div>'+
+ '</div>');
+ $("#wrapper, .v-button:first a").click(function(event) {
+ event.preventDefault();
+ $("#wrapper, #viewer").fadeOut(200, function(){
+ $("#wrapper, #viewer").remove();
+ });
+ });
+ $("#wrapper").fadeTo(200, 0.9);
+ $.Deferred(function(dfd){
+ $("<img/>")
+ .attr("src", imgurl)
+ .load(function(){
+ var top = $(window).scrollTop() + 20;
+ var winwidth = $(window).width();
+ var width = this.width + 50;
+ var lmargin = 20;
+ if (width < winwidth) {
+ lmargin = (winwidth - width) / 2;
+ }
+ dfd.resolve({
+ img: $(this),
+ top: top,
+ lmargin: lmargin,
+ width: width
});
- })
+ });
+ }).then(function(options){
+ $("#v-image").append(options.img);
+ $("#viewer").css({
+ 'visibility': 'visible',
+ 'width': options.width + 'px',
+ 'margin-top': options.top + 'px',
+ 'margin-left': options.lmargin + 'px'
+ }).hide().fadeIn(300);
});
+ });
+ }
+
+ var methods = {
+
+ loadCluster: function(options) {
+ torequest = options.total;
+ requested = 0;
+ barwidth = 2;
+ $this.find("ul").empty();
+ query = options.query;
+ fetchThumbs();
}
};
- $.fn.photostrip = function(method) {
- if ( methods[method] ) {
- return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
- } else if ( typeof method === 'object' || ! method ) {
- return methods.init.apply( this, arguments );
+ $.fn.photostrip = function(options) {
+ if (typeof options === "string") {
+ if (options in methods) {
+ methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
+ } else {
+ $.error("Method " + options + " not available on photostrip.");
+ }
} else {
- $.error( 'Method ' + method + ' does not exist on jQuery.photostrip' );
+ initialize.call(this, options);
}
+ return this;
};
})(jQuery);
View
8 src/js/geobrowse.js
@@ -1,7 +1,7 @@
/**
* geobrowse.js - initializes geobrowse map
- *
+ *
* This module configures and initializes the map for the Geobrowse
* interface.
*/
@@ -134,7 +134,7 @@ return function(options) {
hashes.push(c[i].data.hash);
count += c[i].data.count;
}
- $("#items").photostrip('loadCluster', {
+ $("#imgbar-wrapper").photostrip('loadCluster', {
query: 'hash:('+hashes.join(" OR ")+')'+' AND '+query,
total: count
});
@@ -201,8 +201,8 @@ return function(options) {
*/
map.zoomTo(0);
}
-
+
return map;
}
-
+
});
View
388 src/js/jquery.kinetic.js
@@ -0,0 +1,388 @@
+/*!
+ jQuery.kinetic v1.5
+ Dave Taylor http://the-taylors.org/jquery.kinetic
+
+ The MIT License (MIT)
+ Copyright (c) <2011> <Dave Taylor http://the-taylors.org>
+*/
+/*global define,require */
+(function($){
+ 'use strict';
+
+ var DEFAULT_SETTINGS = { decelerate: true
+ , triggerHardware: false
+ , y: true
+ , x: true
+ , slowdown: 0.9
+ , maxvelocity: 40
+ , throttleFPS: 60
+ , movingClass: {
+ up: 'kinetic-moving-up'
+ , down: 'kinetic-moving-down'
+ , left: 'kinetic-moving-left'
+ , right: 'kinetic-moving-right'
+ }
+ , deceleratingClass: {
+ up: 'kinetic-decelerating-up'
+ , down: 'kinetic-decelerating-down'
+ , left: 'kinetic-decelerating-left'
+ , right: 'kinetic-decelerating-right'
+ }
+ },
+ SETTINGS_KEY = 'kinetic-settings',
+ ACTIVE_CLASS = 'kinetic-active';
+
+ /**
+ * Provides requestAnimationFrame in a cross browser way.
+ * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+ */
+ if ( !window.requestAnimationFrame ) {
+
+ window.requestAnimationFrame = ( function() {
+
+ return window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
+ window.setTimeout( callback, 1000 / 60 );
+ };
+
+ }());
+
+ }
+
+ // add touch checker to jQuery.support
+ $.support = $.support || {};
+ $.extend($.support, {
+ touch: "ontouchend" in document
+ });
+ var selectStart = function() { return false; };
+
+ var decelerateVelocity = function(velocity, slowdown) {
+ return Math.floor(Math.abs(velocity)) === 0 ? 0 // is velocity less than 1?
+ : velocity * slowdown; // reduce slowdown
+ };
+
+ var capVelocity = function(velocity, max) {
+ var newVelocity = velocity;
+ if (velocity > 0) {
+ if (velocity > max) {
+ newVelocity = max;
+ }
+ } else {
+ if (velocity < (0 - max)) {
+ newVelocity = (0 - max);
+ }
+ }
+ return newVelocity;
+ };
+
+ var setMoveClasses = function(settings, classes) {
+ this.removeClass(settings.movingClass.up)
+ .removeClass(settings.movingClass.down)
+ .removeClass(settings.movingClass.left)
+ .removeClass(settings.movingClass.right)
+ .removeClass(settings.deceleratingClass.up)
+ .removeClass(settings.deceleratingClass.down)
+ .removeClass(settings.deceleratingClass.left)
+ .removeClass(settings.deceleratingClass.right);
+
+ if (settings.velocity > 0) {
+ this.addClass(classes.right);
+ }
+ if (settings.velocity < 0) {
+ this.addClass(classes.left);
+ }
+ if (settings.velocityY > 0) {
+ this.addClass(classes.down);
+ }
+ if (settings.velocityY < 0) {
+ this.addClass(classes.up);
+ }
+
+ };
+
+ var stop = function($scroller, settings) {
+ if (typeof settings.stopped === 'function') {
+ settings.stopped.call($scroller, settings);
+ }
+ };
+
+ /** do the actual kinetic movement */
+ var move = function($scroller, settings) {
+ var scroller = $scroller[0];
+ // set scrollLeft
+ if (settings.x && scroller.scrollWidth > 0){
+ scroller.scrollLeft = settings.scrollLeft = scroller.scrollLeft + settings.velocity;
+ if (Math.abs(settings.velocity) > 0) {
+ settings.velocity = settings.decelerate ?
+ decelerateVelocity(settings.velocity, settings.slowdown) : settings.velocity;
+ }
+ } else {
+ settings.velocity = 0;
+ }
+
+ // set scrollTop
+ if (settings.y && scroller.scrollHeight > 0){
+ scroller.scrollTop = settings.scrollTop = scroller.scrollTop + settings.velocityY;
+ if (Math.abs(settings.velocityY) > 0) {
+ settings.velocityY = settings.decelerate ?
+ decelerateVelocity(settings.velocityY, settings.slowdown) : settings.velocityY;
+ }
+ } else {
+ settings.velocityY = 0;
+ }
+
+ setMoveClasses.call($scroller, settings, settings.deceleratingClass);
+
+ if (typeof settings.moved === 'function') {
+ settings.moved.call($scroller, settings);
+ }
+
+ if (Math.abs(settings.velocity) > 0 || Math.abs(settings.velocityY) > 0) {
+ // tick for next movement
+ window.requestAnimationFrame(function(){ move($scroller, settings); });
+ } else {
+ stop($scroller, settings);
+ }
+ };
+
+ var callOption = function(method, options) {
+ var methodFn = $.kinetic.callMethods[method]
+ , args = Array.prototype.slice.call(arguments)
+ ;
+ if (methodFn) {
+ this.each(function(){
+ var opts = args.slice(1), settings = $(this).data(SETTINGS_KEY);
+ opts.unshift(settings);
+ methodFn.apply(this, opts);
+ });
+ }
+ };
+
+ var attachListeners = function($this, settings) {
+ var element = $this[0];
+ if ($.support.touch) {
+ element.addEventListener('touchstart', settings.events.touchStart, false);
+ element.addEventListener('touchend', settings.events.inputEnd, false);
+ element.addEventListener('touchmove', settings.events.touchMove,false);
+ } else {
+ $this
+ .mousedown(settings.events.inputDown)
+ .mouseup(settings.events.inputEnd)
+ .mousemove(settings.events.inputMove);
+ }
+ $this.click(settings.events.inputClick)
+ .bind("selectstart", selectStart); // prevent selection when dragging
+ $this.bind('dragstart', settings.events.dragStart);
+ };
+ var detachListeners = function($this, settings) {
+ var element = $this[0];
+ if ($.support.touch) {
+ element.removeEventListener('touchstart', settings.events.touchStart, false);
+ element.removeEventListener('touchend', settings.events.inputEnd, false);
+ element.removeEventListener('touchmove', settings.events.touchMove,false);
+ } else {
+ $this
+ .unbind('mousedown', settings.events.inputDown)
+ .unbind('mouseup', settings.events.inputEnd)
+ .unbind('mousemove', settings.events.inputMove);
+ }
+ $this.unbind('click', settings.events.inputClick)
+ .unbind("selectstart", selectStart); // prevent selection when dragging
+ $this.unbind('dragstart', settings.events.dragStart);
+ };
+
+ var initElements = function(options) {
+ this
+ .addClass(ACTIVE_CLASS)
+ .each(function(){
+
+ var settings = $.extend({}, DEFAULT_SETTINGS, options);
+
+ var self = this
+ , $this = $(this)
+ , xpos
+ , prevXPos = false
+ , ypos
+ , prevYPos = false
+ , mouseDown = false
+ , scrollLeft
+ , scrollTop
+ , throttleTimeout = 1000 / settings.throttleFPS
+ , lastMove
+ , elementFocused
+ ;
+
+ settings.velocity = 0;
+ settings.velocityY = 0;
+
+ // make sure we reset everything when mouse up
+ var resetMouse = function() {
+ xpos = false;
+ ypos = false;
+ mouseDown = false;
+ };
+ $(document).mouseup(resetMouse).click(resetMouse);
+
+ var calculateVelocities = function() {
+ settings.velocity = capVelocity(prevXPos - xpos, settings.maxvelocity);
+ settings.velocityY = capVelocity(prevYPos - ypos, settings.maxvelocity);
+ };
+ var useTarget = function(target) {
+ if ($.isFunction(settings.filterTarget)) {
+ return settings.filterTarget.call(self, target) !== false;
+ }
+ return true;
+ };
+ var start = function(clientX, clientY) {
+ mouseDown = true;
+ settings.velocity = prevXPos = 0;
+ settings.velocityY = prevYPos = 0;
+ xpos = clientX;
+ ypos = clientY;
+ };
+ var end = function() {
+ if (xpos && prevXPos && settings.decelerate === false) {
+ settings.decelerate = true;
+ calculateVelocities();
+ xpos = prevXPos = mouseDown = false;
+ move($this, settings);
+ }
+ };
+ var inputmove = function(clientX, clientY) {
+ if (!lastMove || new Date() > new Date(lastMove.getTime() + throttleTimeout)) {
+ lastMove = new Date();
+
+ if (mouseDown && (xpos || ypos)) {
+ if (elementFocused) {
+ $(elementFocused).blur();
+ elementFocused = null;
+ $this.focus();
+ }
+ settings.decelerate = false;
+ settings.velocity = settings.velocityY = 0;
+ $this[0].scrollLeft = settings.scrollLeft = settings.x ? $this[0].scrollLeft - (clientX - xpos) : $this[0].scrollLeft;
+ $this[0].scrollTop = settings.scrollTop = settings.y ? $this[0].scrollTop - (clientY - ypos) : $this[0].scrollTop;
+ prevXPos = xpos;
+ prevYPos = ypos;
+ xpos = clientX;
+ ypos = clientY;
+
+ calculateVelocities();
+ setMoveClasses.call($this, settings, settings.movingClass);
+
+ if (typeof settings.moved === 'function') {
+ settings.moved.call($this, settings);
+ }
+ }
+ }
+ };
+
+ // Events
+ settings.events = {
+ touchStart: function(e){
+ if (useTarget(e.target)) {
+ start(e.touches[0].clientX, e.touches[0].clientY);
+ e.stopPropagation();
+ }
+ },
+ touchMove: function(e){
+ if (mouseDown) {
+ inputmove(e.touches[0].clientX, e.touches[0].clientY);
+ if (e.preventDefault) {e.preventDefault();}
+ }
+ },
+ inputDown: function(e){
+ if (useTarget(e.target)) {
+ start(e.clientX, e.clientY);
+ elementFocused = e.target;
+ if (e.target.nodeName === 'IMG'){
+ e.preventDefault();
+ }
+ e.stopPropagation();
+ }
+ },
+ inputEnd: function(e){
+ end();
+ elementFocused = null;
+ if (e.preventDefault) {e.preventDefault();}
+ },
+ inputMove: function(e) {
+ if (mouseDown){
+ inputmove(e.clientX, e.clientY);
+ if (e.preventDefault) {e.preventDefault();}
+ }
+ },
+ inputClick: function(e){
+ if (Math.abs(settings.velocity) > 0) {
+ e.preventDefault();
+ return false;
+ }
+ },
+ // prevent drag and drop images in ie
+ dragStart: function(e) {
+ if (elementFocused) {
+ return false;
+ }
+ }
+ };
+
+ attachListeners($this, settings);
+ $this.data(SETTINGS_KEY, settings).css("cursor", "move");
+
+ if (settings.triggerHardware) {
+ $this.css('-webkit-transform', 'translate3d(0,0,0)');
+ }
+ });
+ };
+
+ $.kinetic = {
+ settingsKey: SETTINGS_KEY,
+ callMethods: {
+ start: function(settings, options){
+ var $this = $(this);
+ settings = $.extend(settings, options);
+ if (settings) {
+ settings.decelerate = false;
+ move($this, settings);
+ }
+ },
+ end: function(settings, options){
+ var $this = $(this);
+ if (settings) {
+ settings.decelerate = true;
+ }
+ },
+ stop: function(settings, options){
+ settings.velocity = 0;
+ settings.velocityY = 0;
+ settings.decelerate = true;
+ },
+ detach: function(settings, options) {
+ var $this = $(this);
+ detachListeners($this, settings);
+ $this
+ .removeClass(ACTIVE_CLASS)
+ .css("cursor", "");
+ },
+ attach: function(settings, options) {
+ var $this = $(this);
+ attachListeners($this, settings);
+ $this
+ .addClass(ACTIVE_CLASS)
+ .css("cursor", "move");
+ }
+ }
+ };
+ $.fn.kinetic = function(options) {
+ if (typeof options === 'string') {
+ callOption.apply(this, arguments);
+ } else {
+ initElements.call(this, options);
+ }
+ return this;
+ };
+
+}(window.jQuery || window.Zepto));
View
39 src/js/main.js
@@ -1,12 +1,27 @@
+/**
+ * This needs to be loaded outside of RequireJS's asynchronous load to
+ * make sure the window load event is captured. OpenLayers can't be
+ * initialized until after the window load event in IE. This function
+ * allows us to safely use the window load event as a deferred within
+ * $.ready().
+ */
+(function($) {
+ var dfd = $.Deferred();
+ $(window).load(function(){
+ dfd.resolve();
+ });
+ $.fn.windowloaded = function() {
+ return dfd;
+ }
+})(jQuery);
+
+
require(["jquery", "util/solrrequest", "config", "geobrowse",
"QuadCluster", "SolrJSON", "PhotoStrip",
- "jquery.tmpl.beta1.min", "Facets"],
+ "jquery.tmpl.beta1.min", "Facets", "jquery.kinetic"],
function($, SReq, config, Geobrowse ) {
-
-
-var sreq = SReq;
-var solr = config.solr;
+
/**
* @todo: if no config.solr then throw error
*/
@@ -15,7 +30,7 @@ $(function(){
/**
* Add event handlers to map link functionality.
*/
- $("#items").photostrip({solr: solr});
+ $("#imgbar-wrapper").photostrip({solr: config.solr});
$('#linkbox a').click(function(event) {
event.preventDefault();
$(this).parent().toggle('fast');
@@ -32,7 +47,7 @@ $(function(){
/**
* Initializes the map
*/
- var q = sreq.getQuery() || "*:*";
+ var q = SReq.getQuery() || "*:*";
var params = {
'q': q,
'rows': 0,
@@ -52,9 +67,7 @@ $(function(){
data: params,
traditional: true
}),
- $.Deferred(function(dfd){
- $(window).load(dfd.resolve);
- })
+ $(document).windowloaded()
).done(function(data) {
var response = $.parseJSON(data[2].responseText);
var stats = response.stats.stats_fields;
@@ -68,10 +81,10 @@ $(function(){
*/
var opts = {
bounds: bounds,
- bbox: sreq.getParam("ll"),
- zoom: sreq.getParam("z")
+ bbox: SReq.getParam("ll"),
+ zoom: SReq.getParam("z")
};
-
+
new Geobrowse(opts);
});
});
View
71 src/style.css
@@ -98,18 +98,6 @@ img {
width: 100%;
}
-.olControlLoadingPanel {
- background-image:url(http://imageserv.lib.unc.edu/geobrowse/ajax-loader.gif);
- margin-left: 35%;
- margin-top: 225px;
- position: relative;
- width: 220px;
- height: 19px;
- background-position:center;
- background-repeat:no-repeat;
- display: none;
-}
-
.olControlLayerSwitcher .layersDiv {
background-color: #364c83 !important;
}
@@ -158,41 +146,62 @@ img {
/********************
* image bar styles *
********************/
-#items {
+#imgbar-wrapper {
height: 75px;
- display: block;
- filter:alpha(opacity=95);
- opacity: 0.95;
background-color: #222;
- text-align: center;
- z-index: 1;
margin-top: 1em;
- border: 1px solid gray;
+ border: 1px solid #666;
position: relative;
}
-#items ul {
- list-style: none;
+#imgbar-content {
+ height: 75px;
+ overflow: hidden;
+ text-align: center;
+}
+
+#imgbar-content img {
+ height: 75px;
+}
+
+#imgbar-wrapper ul, #imgbar-wrapper li {
padding: 0;
- margin: 0 35px;
+ margin: 0;
}
-#items ul li {
+#imgbar-wrapper ul {
+ list-style: none;
+}
+
+#imgbar-wrapper li {
display: inline;
- margin: 0 3px;
- padding: 0;
}
-#nextPageButton {
+#imgbar-back-button, #imgbar-forward-button {
position: absolute;
- top: 0;
- right: 0;
+ top: 0px;
+ display: none;
+ cursor: pointer;
+}
+
+#imgbar-back-button {
+ left: 0px;
}
-#prevPageButton {
+#imgbar-forward-button {
+ right: 0px;
+}
+
+.imgbar-button-background {
+ opacity: 0.75;
+ height: 75px;
+ width: 30px;
+ background-color: #111;
+}
+
+#imgbar-back-button img, #imgbar-forward-button img {
position: absolute;
- top: 0;
- left: 0;
+ top: 22px;
}
/******************************
Please sign in to comment.
Something went wrong with that request. Please try again.