Merge pull request #2153 from koenpunt/commit-diff-views

Added swipe view for image diff

app/assets/javascripts/commit/file.js.coffee

@@ -0,0 +1,7 @@
+class CommitFile
+  
+  constructor: (file) ->
+    if $('.image', file).length
+      new ImageFile(file)
+        
+this.CommitFile = CommitFile

app/assets/javascripts/commit/image-file.js.coffee

@@ -0,0 +1,128 @@
+class ImageFile
+
+  # Width where images must fits in, for 2-up this gets divided by 2
+  @availWidth = 900
+  @viewModes = ['two-up', 'swipe']
+
+  constructor: (@file) ->
+    # Determine if old and new file has same dimensions, if not show 'two-up' view
+    this.requestImageInfo $('.two-up.view .frame.deleted img', @file), (deletedWidth, deletedHeight) =>
+      this.requestImageInfo $('.two-up.view .frame.added img', @file), (width, height) =>
+        if width == deletedWidth && height == deletedHeight
+          this.initViewModes()
+        else
+          this.initView('two-up')
+
+  initViewModes: ->
+    viewMode = ImageFile.viewModes[0]
+
+    $('.view-modes', @file).removeClass 'hide'
+    $('.view-modes-menu', @file).on 'click', 'li', (event) =>
+      unless $(event.currentTarget).hasClass('active')
+        this.activateViewMode(event.currentTarget.className)
+
+    this.activateViewMode(viewMode)
+
+  activateViewMode: (viewMode) ->
+    $('.view-modes-menu li', @file)
+      .removeClass('active')
+      .filter(".#{viewMode}").addClass 'active'
+    $(".view:visible:not(.#{viewMode})", @file).fadeOut 200, =>
+      $(".view.#{viewMode}", @file).fadeIn(200)
+      this.initView viewMode
+
+  initView: (viewMode) ->
+    this.views[viewMode].call(this)
+
+  prepareFrames = (view) ->
+    maxWidth = 0
+    maxHeight = 0
+    $('.frame', view).each (index, frame) =>
+      width = $(frame).width()
+      height = $(frame).height()
+      maxWidth = if width > maxWidth then width else maxWidth
+      maxHeight = if height > maxHeight then height else maxHeight
+    .css
+      width: maxWidth
+      height: maxHeight
+    
+    [maxWidth, maxHeight]
+
+  views: 
+    'two-up': ->
+      $('.two-up.view .wrap', @file).each (index, wrap) =>
+        $('img', wrap).each ->
+          currentWidth = $(this).width()
+          if currentWidth > ImageFile.availWidth / 2
+            $(this).width ImageFile.availWidth / 2
+
+        this.requestImageInfo $('img', wrap), (width, height) ->
+          $('.image-info .meta-width', wrap).text "#{width}px"
+          $('.image-info .meta-height', wrap).text "#{height}px"
+          $('.image-info', wrap).removeClass('hide')
+
+    'swipe': ->
+      maxWidth = 0
+      maxHeight = 0
+
+      $('.swipe.view', @file).each (index, view) =>
+
+        [maxWidth, maxHeight] = prepareFrames(view)
+
+        $('.swipe-frame', view).css
+          width: maxWidth + 16
+          height: maxHeight + 28
+
+        $('.swipe-wrap', view).css
+          width: maxWidth + 1
+          height: maxHeight + 2
+
+        $('.swipe-bar', view).css
+          left: 0
+        .draggable
+          axis: 'x'
+          containment: 'parent'
+          drag: (event) ->
+            $('.swipe-wrap', view).width (maxWidth + 1) - $(this).position().left
+          stop: (event) ->
+            $('.swipe-wrap', view).width (maxWidth + 1) - $(this).position().left
+
+    'onion-skin': ->
+      maxWidth = 0
+      maxHeight = 0
+
+      dragTrackWidth = $('.drag-track', @file).width() - $('.dragger', @file).width()
+
+      $('.onion-skin.view', @file).each (index, view) =>
+
+        [maxWidth, maxHeight] = prepareFrames(view)
+
+        $('.onion-skin-frame', view).css
+          width: maxWidth + 16
+          height: maxHeight + 28
+
+        $('.swipe-wrap', view).css
+          width: maxWidth + 1
+          height: maxHeight + 2
+        
+        $('.dragger', view).css
+          left: dragTrackWidth
+        .draggable
+          axis: 'x'
+          containment: 'parent'
+          drag: (event) ->
+            $('.frame.added', view).css('opacity', $(this).position().left / dragTrackWidth)
+          stop: (event) ->
+            $('.frame.added', view).css('opacity', $(this).position().left / dragTrackWidth)
+        
+      
+
+  requestImageInfo: (img, callback) ->
+    domImg = img.get(0)
+    if domImg.complete
+      callback.call(this, domImg.naturalWidth, domImg.naturalHeight)
+    else
+      img.on 'load', =>
+        callback.call(this, domImg.naturalWidth, domImg.naturalHeight)
+
+this.ImageFile = ImageFile

app/assets/javascripts/commits.js

@@ -1,59 +0,0 @@
-var CommitsList = {
-  ref:null,
-  limit:0,
-  offset:0,
-  disable:false,
-
-  init:
-    function(ref, limit) {
-      $(".day-commits-table li.commit").live('click', function(e){
-        if(e.target.nodeName != "A") {
-          location.href = $(this).attr("url");
-          e.stopPropagation();
-          return false;
-        }
-      });
-
-      this.ref=ref;
-      this.limit=limit;
-      this.offset=limit;
-      this.initLoadMore();
-      $('.loading').show();
-    },
-
-  getOld:
-    function() {
-      $('.loading').show();
-      $.ajax({
-        type: "GET",
-        url: location.href,
-        data: "limit=" + this.limit + "&offset=" + this.offset + "&ref=" + this.ref,
-        complete: function(){ $('.loading').hide()},
-        dataType: "script"});
-    },
-
-  append:
-    function(count, html) {
-      $("#commits_list").append(html);
-      if(count > 0) {
-        this.offset += count;
-      } else { 
-        this.disable = true;
-      }
-    },
-
-  initLoadMore:
-    function() {
-      $(document).endlessScroll({
-        bottomPixels: 400,
-        fireDelay: 1000,
-        fireOnce:true,
-        ceaseFire: function() { 
-          return CommitsList.disable;
-        },
-        callback: function(i) {
-          CommitsList.getOld();
-        }
-      });
-    }
-}

app/assets/javascripts/commits.js.coffee

@@ -0,0 +1,54 @@
+class CommitsList
+  @data =
+    ref: null
+    limit: 0
+    offset: 0
+  @disable = false
+  
+  @showProgress: ->
+    $('.loading').show()
+    
+  @hideProgress: ->
+    $('.loading').hide()
+  
+  @init: (ref, limit) ->
+    $(".day-commits-table li.commit").live 'click', (event) ->
+      if event.target.nodeName != "A"
+        location.href = $(this).attr("url")
+        e.stopPropagation()
+        return false
+
+    @data.ref = ref
+    @data.limit = limit
+    @data.offset = limit
+    
+    this.initLoadMore()
+    this.showProgress();
+
+  @getOld: ->
+    this.showProgress()
+    $.ajax
+      type: "GET"
+      url: location.href
+      data: @data
+      complete: this.hideProgress
+      dataType: "script"
+
+  @append: (count, html) ->
+    $("#commits-list").append(html)
+    if count > 0
+      @data.offset += count
+    else
+      @disable = true
+  
+  @initLoadMore: -> 
+    $(document).endlessScroll
+      bottomPixels: 400
+      fireDelay: 1000
+      fireOnce: true
+      ceaseFire: =>
+        @disable
+      callback: =>
+        this.getOld()
+
+this.CommitsList = CommitsList