upload working

6 files changed, 170 insertions, 5 deletions

diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index 75e4ddc..b528a14 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -107,8 +107,8 @@ a:visited {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 7778;
-  background-color: rgba(255,255,255,0.7);
+  z-index: 1;
+  background-color: rgba(0,0,0,0.7);
   background-image: url(http://okfocus.s3.amazonaws.com/luckyplop/slot.gif);
   background-position: center;
 }
diff --git a/public/assets/js/drag.js b/public/assets/js/drag.js
new file mode 100644
index 0000000..b73c459
--- /dev/null
+++ b/public/assets/js/drag.js
@@ -0,0 +1,61 @@
+var DragView = UploadView.extend({
+
+  el: "body",
+  
+  uploadAction: "/upload",
+  
+  selfDrag: false,
+
+  events: {
+    'dragover': 'dragover',
+    'dragstart': 'dragstart',
+    'drop': 'handleDrop',
+  },
+
+  drop: function(){
+    $("#droparea").hide()
+    $("#loading").show()
+  },
+  
+  dragover: function(e){
+    e.stopPropagation()
+    e.preventDefault()
+    if (this.selfDrag) {
+      $("#droparea").hide()
+    }
+    else {
+      $("#droparea").show()
+    }
+  },
+  
+  // set if we're dragging an image from the page, versus from another window
+  dragstart: function(e){
+    this.selfDrag = true
+  },
+
+  handleDrop: function(e){
+    var base = this
+    e.stopPropagation()
+    e.preventDefault()
+    
+    e = e.originalEvent
+    
+    if (e.dataTransfer && ! this.selfDrag) {
+      if (e.dataTransfer.files.length) {
+        this.handleFileSelect(e)
+      }
+    }
+    else {
+      this.handleFileSelect(e)
+    }
+    this.selfDrag = false
+    this.drop()
+  },
+
+  add: function(data){
+    $("#loading").hide()
+    app.view.display(data)
+    history.pushState(data, document.title, "/p/" + data.id)
+  },
+
+})
diff --git a/public/assets/js/index.js b/public/assets/js/index.js
index fefb7fc..c2275df 100644
--- a/public/assets/js/index.js
+++ b/public/assets/js/index.js
@@ -5,6 +5,7 @@ var app = (function(){
   
   app.init = function(){
     app.view = new NavView ()
+    app.upload = new DragView ()
 
     $(window).on("focus", app.focus)
     $(window).on("blur", app.blur)
diff --git a/public/assets/js/nav.js b/public/assets/js/nav.js
index bc525cf..9a4456e 100644
--- a/public/assets/js/nav.js
+++ b/public/assets/js/nav.js
@@ -10,7 +10,8 @@ var NavView = View.extend({
   
   initialize: function(){
     this.id = -1
-    this.$pip = this.$("#pip img")
+    this.$pip = this.$("#pip")
+    this.$pip_img = this.$("#pip img")
     this.$image = this.$("#luckyimage")
     
     $(window).on("keydown", this.keydown.bind(this))
@@ -81,14 +82,15 @@ var NavView = View.extend({
       history.pushState(data, document.title, "/p/" + data.id)
     }.bind(this))
   },
-  
+
   display: function(data){
     if (! data || ! data.id) {
       this.onLatest = true
       return
     }
     this.id = data.id
-    this.$pip.attr("src", data.url)
+    this.$pip.attr("href", data.url)
+    this.$pip_img.attr("src", data.url)
     this.$image.css("background-image", "url(" + data.url + ")")
   },
 
diff --git a/public/assets/js/vendor/view/uploadview.js b/public/assets/js/vendor/view/uploadview.js
new file mode 100644
index 0000000..436f4c8
--- /dev/null
+++ b/public/assets/js/vendor/view/uploadview.js
@@ -0,0 +1,99 @@
+
+var UploadView = View.extend({
+
+  // define uploadAction
+
+  events: {
+    "change [type=file]": "handleFileSelect",
+    "submit form": "preventDefault",
+  },
+  
+  initialize: function(){
+    this.$file = this.$("[type=file]")
+    this.$upload = this.$(".upload-icon")
+  },
+  
+  beforeUpload: function(){
+  },
+  
+  handleFileSelect: function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    
+    this.beforeUpload()
+
+    var files = e.dataTransfer ? e.dataTransfer.files : e.target.files
+
+    for (var i = 0, f; f = files[i]; i++) {
+      if ( ! f.type.match('image.*')) {
+        continue;
+      }
+      
+      this.upload(f)
+      // this.getImageDimensions(f)
+    }
+  },
+
+/*
+  getImageDimensions: function(f){
+    var base = this
+    
+    this.$upload.addClass('uploading')
+
+    var reader = new FileReader()
+
+    reader.onload = function(e) {
+      var image = new Image()
+      image.onload = function(){
+        var width = image.naturalWidth,
+          height = image.naturalHeight
+        base.upload(f, width, height)
+      }
+      image.src = e.target.result
+    }
+    
+    reader.readAsDataURL(f);
+  },
+*/
+
+  upload: function(f){
+    var fd = new FormData()
+    fd.append('image', f)
+//     fd.append('width', width)
+//     fd.append('height', height)
+//     fd.append('_csrf', $("[name=_csrf]").val())
+    
+    if (this.mediaTag) {
+      fd.append('tag', this.mediaTag)
+    }
+
+    var request = $.ajax({
+      url: this.uploadAction,
+      type: "post",
+      data: fd,
+      dataType: "json",
+      processData: false,
+      contentType: false,
+    })
+    request.done(this.success.bind(this))
+  },
+  
+  success: function(media){
+    if (media.error) {
+      // console.log(media.error)
+      this.$upload.removeClass('uploading')
+      this.error(media.error)
+      return
+    }
+    this.$upload.removeClass('uploading')
+    this.add(media)
+  },
+  
+  add: function(media){
+    console.log(media)
+  },
+  
+  error: function(error){
+  },
+
+})
diff --git a/public/index.html b/public/index.html
index 1d56dc9..febb353 100644
--- a/public/index.html
+++ b/public/index.html
@@ -64,8 +64,10 @@
 <script src="/assets/js/vendor/util.js"></script>
 <script src="/assets/js/vendor/view/view.js"></script>
 <script src="/assets/js/vendor/view/formview.js"></script>
+<script src="/assets/js/vendor/view/uploadview.js"></script>
 <script src="/assets/js/vendor/view/router.js"></script>
 
+<script src="/assets/js/drag.js"></script>
 <script src="/assets/js/nav.js"></script>
 <script src="/assets/js/index.js"></script>