Permalink
Browse files

reworked slideTo to get proper direction

  • Loading branch information...
1 parent f70b71b commit d0d20be93ce74bb7671a5c290b6fe3f3cdaa6f22 @himynameisjonas committed Oct 2, 2011
Showing with 14 additions and 18 deletions.
  1. +3 −3 app/views/blog/show.html.erb
  2. +11 −15 public/javascripts/application.js
@@ -2,7 +2,7 @@
<div id="content-wrapper">
<div id="photo-wrapper">
<article>
- <%= image_tag @photo.url, :id => "photo", :class => "rotate#{rand(4)}", :'data-location-path' => "/#{@photo.id}" %>
+ <%= image_tag @photo.url, :id => "photo", :class => "rotate#{rand(4)}", :'data-image-position' => @photo.index %>
<footer>
<h1><%= @photo.title %></h1>
<time><%= @photo.taken_at.to_date.to_formatted_s(:long) %></time>
@@ -11,8 +11,8 @@
</div>
<nav id="photo-navigation">
<div class="clearfix">
- <%= link_to(image_tag("/images/previous.png"), show_path(@photo.previous), :id => "prev", :style => "background: url(#{@photo.previous.thumbnail_url});", :'data-image-id' => @photo.id, :class => "nav-link previous", :title => "previous") if @photo.previous %>
- <%= link_to(image_tag("/images/next.png"), show_path(@photo.next), :id => "next", :style => "background: url(#{@photo.next.thumbnail_url});", :'data-image-id' => @photo.id, :class => "nav-link next", :title => "ntext") if @photo.next %>
+ <%= link_to(image_tag("/images/previous.png"), show_path(@photo.previous), :id => "prev", :style => "background: url(#{@photo.previous.thumbnail_url});", :class => "nav-link previous", :title => "previous") if @photo.previous %>
+ <%= link_to(image_tag("/images/next.png"), show_path(@photo.next), :id => "next", :style => "background: url(#{@photo.next.thumbnail_url});", :class => "nav-link next", :title => "ntext") if @photo.next %>
</div>
<p>
<%= link_to("archive", archive_path) %>
@@ -7,10 +7,8 @@ $(function(){
});
$('a.nav-link').live('click', function() {
- // history.pushState({ path: this.path }, '', this.href);
- history.pushState({id: $(this).data('image-id')}, "hejhej",this.href);
- var direction = $(this).attr('id');
- slideTo(this.href, direction);
+ history.pushState(null, $("#photo-wrapper h1").text(), this.href);
+ slideTo(this.href);
return false;
});
$(document).keyup(function(event) {
@@ -24,14 +22,16 @@ $(function(){
$("a#"+direction).click();
}
});
+ var popped = ('state' in window.history), initialURL = location.href
$(window).bind('popstate', function() {
- if ($("img#photo").data("location-path") !== location.pathname) {
- slideTo(location.pathname);
- };
+ var initialPop = !popped && location.href == initialURL
+ popped = true
+ if ( initialPop ) return
+ slideTo(location.pathname);
})
});
-function slideTo (location, direction) {
+function slideTo (location) {
$.get(location, function(data) {
var photo_wrapper = $("#photo-wrapper");
var old_photo = $("article",photo_wrapper);
@@ -40,7 +40,7 @@ function slideTo (location, direction) {
var window_width = $(window).width();
var left_offset = 0 - window_width;
- if (direction == "prev") {
+ if (old_photo.find("img").data('image-position') > new_photo.find("img").data('image-position')) {
new_photo.css({
left: left_offset
});
@@ -49,7 +49,7 @@ function slideTo (location, direction) {
old_photo.remove();
new_photo.animate({left: 0}, 'slow');
});
- } else if(direction == "next") {
+ } else {
new_photo.css({
left: window_width
});
@@ -58,12 +58,8 @@ function slideTo (location, direction) {
old_photo.remove();
new_photo.animate({left: 0}, 'slow');
});
- } else {
- old_photo.slideUp("slow", function(){
- photo_wrapper.prepend(new_photo.css({display:"none"}));
- new_photo.slideDown("slow");
- });
}
$("nav").replaceWith(new_nav);
+ document.title = document.title.split("-")[0] + "- " +new_photo.find("h1").text();
});
}

0 comments on commit d0d20be

Please sign in to comment.