Merge pull request #32 from Retrospring/profile-headers

Parallaxed profile headers

app/assets/javascripts/application.js.erb.coffee

@@ -45,6 +45,7 @@ _ready = ->
   if typeof sweetAlertInitialize != "undefined"
     sweetAlertInitialize()
 
+  if document.getElementById('particles')?
     particleground document.getElementById('particles'),
       dotColor: '#5e35b1'
       lineColor: '#5e35b1'

app/assets/javascripts/moderation/ban.coffee

@@ -1,5 +1,7 @@
-$(document).on "DOMContentLoaded", ->
+load = ->
   parent = $ "#ban-control-super"
+  return unless parent.length > 0
+
   parent.find('#_ban').on "change", (event) ->
     $t = $ this
     if $t.is(":checked")
@@ -56,3 +58,9 @@ $(document).on "DOMContentLoaded", ->
         console.log jqxhr, status, error
         showNotification "An error occurred, a developer should check the console for details", false
       complete: (jqxhr, status) ->
+
+$(document).on "DOMContentLoaded", ->
+  load()
+
+$(document).on "page:load", ->
+  load()

app/assets/javascripts/settings.coffee

@@ -4,15 +4,28 @@
     evt.preventDefault()
     $("button[data-target=#modal-passwd]").trigger 'click'
 
+readImage = (file, callback) ->
+  fr = new FileReader()
+  fr.addEventListener "load", (e) ->
+    callback e.target.result
+  fr.readAsBinaryString file
+
+freeURL = () ->
+
+if window.URL? or window.webkitURL?
+  readImage = (file, callback) ->
+    callback (window.URL || window.webkitURL).createObjectURL file
+  freeURL = (url) ->
+    URL.revokeObjectURL url
+
 
 # Profile pic
 ($ document).on 'change', 'input#user_profile_picture[type=file]', ->
-  input = ($ this)[0]
+  input = this
 
   ($ '#profile-picture-crop-controls').slideUp 400, ->
     if input.files and input.files[0]
-      fr = new FileReader()
+      readImage input.files[0], (src) ->
-      ($ fr).on 'load', (e) ->
         cropper = ($ '#profile-picture-cropper')
         preview = ($ '#profile-picture-preview')
 
@@ -30,6 +43,9 @@
 #            marginTop: '-' + Math.round(ry * data.y) + 'px'
 
         cropper.on 'load', ->
+          if ({}.toString).call(src) == "[object URL]"
+            freeURL src
+
           side = if cropper[0].naturalWidth > cropper[0].naturalHeight
             cropper[0].naturalHeight
           else
@@ -48,17 +64,14 @@
             ($ '#profile-picture-crop-controls')[0].dataset.bound = true
           ($ '#profile-picture-crop-controls').slideDown()
 
-        cropper.attr 'src', e.target.result
+        cropper.attr 'src', src
-
-    fr.readAsDataURL(input.files[0])
 
 ($ document).on 'change', 'input#user_profile_header[type=file]', ->
-  input = ($ this)[0]
+  input = this
 
   ($ '#profile-header-crop-controls').slideUp 400, ->
     if input.files and input.files[0]
-      fr = new FileReader()
+      readImage input.files[0], (src) ->
-      ($ fr).on 'load', (e) ->
         cropper = ($ '#profile-header-cropper')
         preview = ($ '#profile-header-preview')
 
@@ -69,6 +82,9 @@
           ($ '#crop_h_h').val Math.floor(data.h / data.scale)
 
         cropper.on 'load', ->
+          if ({}.toString).call(src) == "[object URL]"
+            freeURL src
+
           cropper.guillotine
             width: 1500
             height: 350
@@ -82,6 +98,4 @@
             ($ '#profile-header-crop-controls')[0].dataset.bound = true
           ($ '#profile-header-crop-controls').slideDown()
 
-        cropper.attr 'src', e.target.result
+        cropper.attr 'src', src
-
-    fr.readAsDataURL(input.files[0])

app/assets/javascripts/user.coffee

@@ -51,3 +51,39 @@ $(document).on "click", "a[data-action=report-user]", (ev) ->
   btn = $(this)
   target = btn[0].dataset.target
   reportDialog "user", target, -> btn.button "reset"
+
+# parallax
+PARALLAX_PREFIX = undefined
+if typeof document.documentElement.style.webkitTransform == "string"
+  PARALLAX_PREFIX = "webkit"
+if typeof document.documentElement.style.mozTransform == "string"
+  PARALLAX_PREFIX = "moz"
+if typeof document.documentElement.style.oTransform == "string"
+  PARALLAX_PREFIX = "o"
+if typeof document.documentElement.style.msTransform == "string"
+  PARALLAX_PREFIX = "ms"
+if typeof document.documentElement.style.khtmlTransform == "string"
+  PARALLAX_PREFIX = "khtml"
+if typeof document.documentElement.style.transform == "string"
+  PARALLAX_PREFIX = ""
+
+HEADER_PARALLAX = undefined
+
+if PARALLAX_PREFIX?
+  PARALLAX_CSS = "transform"
+  if PARALLAX_PREFIX.length
+    PARALLAX_CSS = PARALLAX_PREFIX + PARALLAX_CSS.charAt(0).toUpperCase() + PARALLAX_CSS.slice(1)
+
+  window.HEADER_PARALLAX_INERTIA = 0.4;
+
+  HEADER_PARALLAX = ->
+    header = $("#profile--header:not(.profile--no-header) img")[0]
+    return unless header?
+    top = (document.body || document.documentElement).scrollTop * HEADER_PARALLAX_INERTIA
+    header.style[PARALLAX_CSS] = "translate3d(0px, #{top}px, 0px)";
+
+  $(window).on "scroll", (event) ->
+    HEADER_PARALLAX()
+
+$(document).ready ->
+  HEADER_PARALLAX() if HEADER_PARALLAX?