imagedrop 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 6d5e8404d28349c09cf9ce8c52ec4fb56662c2be
+  data.tar.gz: afa5c785d22f0d29f6186f42281a9372fe3b4902
+SHA512:
+  metadata.gz: 5c3ee5f1bd5e62f318a43a7a4ab956e6b61a45cfe21b231c85df3c4079966fc1923f63da8b0b05f4fdcde4c75489b7f6f2414b0c1ced0d50456e9d1af5310d12
+  data.tar.gz: 29ea756d66376ee9a6432f8d452fc19b8da0eff6fdba538dc85147849930ad94afd6654e83b04f97dddec6076c900b1c7a5f5569328d8a9e837ccfb756e89e07

data/.gitignore

@@ -0,0 +1,14 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+*.bundle
+*.so
+*.o
+*.a
+mkmf.log

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in imagedrop.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2014 dave
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,103 @@
+# ImageDrop
+
+Good for avatars and such!
+
+Transforms the lowly file input field into sophisticated looking drag-and-drop targets complete with a preview image and placeholder text.
+
+Actually, it's nothing fancy, but very effective. ImageDrop employs a little CSS trickery to change the  file input field into a drop zone.
+
+A tiny bit of javascript validate the file type is an image and uses the parent div for an image preview. The javascript changes the parent's background image when a file is dropped on the input.
+
+During dragging and dropping, another div (sibling to the input) is temporarily revealed to act as a placeholder. This is also done purely with CSS.
+
+So the html structure in the form looks like this:
+
+    <div data-imagedrop>
+      <input type='file'>
+      <div>Placeholder</div>
+    </div>
+
+## Requirements/Compatibility
+
+ImageDrop uses simple CSS that is compatible with all browsers back to IE8. Correct me if I'm wrong about that. It also uses the browser's FileReader API through javascript, and that is compatible with most everything.
+
+* Jquery (whatever version)
+* Uh, that's it...
+
+## Features
+* It's small. (Just 989 characters of javascript.)
+* Works with a *lot* of browsers; [most browsers](http://caniuse.com/#search=FileReader) in fact.
+* Supports a live preview image before bugging the server about it.
+* Supports placeholder text and/or images (for drag operations).
+* Validates the file type before bugging the server with it.
+* Can be integrated into any web framework, not just Rails although this gem is mostly for Rails.
+* Plays nice with Bootstrap.
+
+## Installation
+
+Be sure to already have jquery in your project and then add this line to your application's Gemfile:
+
+    gem 'image-drop'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install image-drop
+
+In your application.js add:
+
+    //= require image-drop
+
+And your application.css add:
+
+    *= require image-drop
+    *= require image-drop_sample // optional
+
+`image-drop_sample.css.scss` is a good looking example, but it's just there to give you an idea of how you might style the ImageDrop. I guess you could call this the theme file_field. 
+
+## Usage
+
+ImageDrop was designed to be super simple to get working. To be thorough, here are step-by-step instructions.
+
+### In Rails
+
+ImageDrop expects a loose html structure. Just wrap the input field with a div. Add the `data-imagedrop` attribute to this div.
+
+The input field may have an optional sibling div to act as the placeholder text. Here is an example:
+
+    <div id='avatar' style='background-image: url(<%= asset_path @user.avatar_url %>)'>
+      <div class='placeholder'>Drop an image here</div>
+      <%= f.file_field :avatar %>
+    </div>
+
+This ERB uses the rails asset_path method to preload the avatar image should one already exist.
+
+`div.placeholder` just contains a small snippet of text. The class name is not necessary but may be so if you need to style your placeholder. The placeholder may contain any content you wish but does not accept mouse and keyboard input.
+
+Finally, initialize the image-drop by adding this to one of the js/coffeescript files in your project:
+
+    jQuery ->
+      avatar = new ImageDrop '#avatar'
+      
+### Outside of Rails
+
+The same HTML structure expectation applies whether inside or outside of Rails (so check that out above). You can extract the coffeescript file from this repo and convert it to vanilla javascript at [js2coffee.org](http://js2coffee.org) kindly written and hosted by [Rico Sta Cruz](http://ricostacruz.com/).
+
+The SCSS stylesheet, both of them, can be converted to whitebread CSS at [SASSMeister](http://sassmeister.com/) brilliantly offered by (Jed Foster)[http://jedfoster.com/] and (Dale Sande)[http://www.dalesande.com/].
+
+## Alternatives
+
+There are alternatives to ImageDrop. I wanted to keep things small and very simple. While experimenting, I found a cool way to let CSS do the heavy lifting. That may not be enough for your purposes. You might need to drop multiple files onto the same control, realtime back-end processing, or to display upload progress. Here are some:
+
+* [jQuery File Upload](http://blueimp.github.io/jQuery-File-Upload/) 
+
+## Contributing
+
+1. Fork it ( https://github.com/[my-github-username]/image-drop/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+

data/app/assets/javascript/imagedrop.js.coffee

@@ -0,0 +1,57 @@
+# imagedrop.js v0.0.2
+# http://github/IAmNaN/image-drop
+# Copyright (c) 2014 by Dave Gerton; Licensed MIT
+# 
+# Good for avatars and such.
+# 
+# Transforms simple file input fields (buttons)  into sophisticated looking
+# drag and drop targets complete with preview image and placeholder text.
+#
+# Nothing fancy, it uses css to change the the size and appearance any file
+# input control in a form and positions  preview and placeholder  divs over
+# the top.  It uses js to show or hide the preview or placeholder given the
+# current drag event.
+
+jQuery ->
+  $('*[data-imagedrop]').each ->
+    new ImageDrop $(this)
+
+class @ImageDrop
+  constructor: (element) ->
+    @element = element
+    
+    $(@element).find('input[type="file"]').change ->
+      ImageDrop.readURL this
+
+    $(@element).on 'dragenter', (event) ->
+      $(this).addClass 'dragging'
+
+    $(@element).on 'dragleave', (event) ->
+      $(this).removeClass 'dragging'
+
+    $(@element).on 'drop', (event) ->
+      $(this).removeClass 'dragging'
+
+  @readURL: (input) ->
+    if input.files and input.files[0] and ImageDrop.checkFileType(input.files[0])
+      reader = new FileReader()
+    
+      reader.target_elem = $(input).parent()
+      reader.onload = (e) ->
+      
+        $(reader.target_elem).fadeOut 'fast', ->
+          $(reader.target_elem).attr 'style', 'background-image: url(' + e.target.result + ')'
+          $(reader.target_elem).fadeTo 1
+        return
+
+      reader.readAsDataURL input.files[0]
+    return
+
+  @checkFileType: (file) ->
+    ext = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
+    fileTypes = ".jpg , .png , .bmp, .gif , .webp , .svg"
+    if (fileTypes.toLowerCase().indexOf(ext) < 0)
+      alert("That doesn't appear to be an image file.")
+      false
+    else
+      true

data/app/assets/stylesheets/imagedrop.css.scss

@@ -0,0 +1,48 @@
+// imagedrop.css v0.0.2
+// http://github/IAmNaN/image-drop
+// Copyright (c) 2014 by Dave Gerton; Licensed MIT
+// 
+// Good for avatars and such.
+// 
+// Transforms simple file input fields (buttons)  into sophisticated looking
+// drag and drop targets complete with preview image and placeholder text.
+//
+// Nothing fancy, it uses css to change the the size and appearance any file
+// input control in a form and positions  preview and placeholder  divs over
+// the top.  It uses js to show or hide the preview or placeholder given the
+// current drag event.
+//
+// Wrap the image's input field with a div. Reference this div to initialize
+// the ImageDrop (not the input field itself).   The input field may have an
+// optional sibling div to act as the placeholder text.  The placeholder may
+// contain any content you wish but cannot accept mouse or keyboard input.
+//
+// These are the basic classes needed.
+
+*[data-imagedrop] {
+  position: relative;
+  overflow: hidden;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  div {
+    position: absolute;
+    z-index: 2;
+    opacity: 0;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+  }
+  input[type='file'] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    opacity: 0;
+  }
+  &.dragging {
+    div { opacity: 1; }
+  }
+}

data/app/assets/stylesheets/imagedrop_custom.css.scss

@@ -0,0 +1,34 @@
+// imagedrop_custom.css v0.0.2
+// http://github/IAmNaN/image-drop
+// Copyright (c) 2014 by Dave Gerton; Licensed MIT
+// 
+// Good for avatars and such.
+// 
+// Transforms simple file input fields (buttons) into sophisticated looking
+// drag and drop targets complete with preview image and placeholder text.
+//
+// It is input field's the wrapper div that becomes the preview image.  The
+// background image of the div is set when a file is dropped on it. The div
+// may be styled as you like but the styles in image-drop.css should not be
+// modified as they are functional.
+//
+// This is a sample css customization file. It gives the image a 1:1 aspect
+// ratio and turns it into a circle.  It  also gives size and shadow to the
+// placeholder text.
+
+*[data-imagedrop] {
+  height: 128px;
+  width: 128px;
+  background-color: #fff;
+  border-radius: 50%;
+ div {
+    width: 100%;
+    text-align: center;
+    margin: 0;
+    font-size: 1.5em;
+    font-weight: bold;
+    color: white;
+    text-shadow: 1px 1px 2px #000;
+  }
+  & > *{ transition: opacity 0.25s; }
+}

data/imagedrop.gemspec

@@ -0,0 +1,23 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'imagedrop/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "imagedrop"
+  spec.version       = Imagedrop::VERSION
+  spec.authors       = ["Dave Gerton"]
+  spec.email         = ["dgerton@gmail.com"]
+  spec.summary       = %q{Good for avatars and such!}
+  spec.description   = %q{Transforms the lowly file input field into a sophisticated looking drag and drop target, complete with preview image and placeholder text.}
+  spec.homepage      = "https://github.com/IAmNaN/imagedrop"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  # spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  # spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.7"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

data/lib/imagedrop.rb

@@ -0,0 +1,5 @@
+require "imagedrop/engine"
+require "imagedrop/version"
+
+module Imagedrop
+end

data/lib/imagedrop/engine.rb

@@ -0,0 +1,4 @@
+module Imagedrop
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/imagedrop/version.rb

@@ -0,0 +1,3 @@
+module Imagedrop
+  VERSION = "0.0.1"
+end

metadata

@@ -0,0 +1,85 @@
+--- !ruby/object:Gem::Specification
+name: imagedrop
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Dave Gerton
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-10-25 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.7'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.7'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+description: Transforms the lowly file input field into a sophisticated looking drag
+  and drop target, complete with preview image and placeholder text.
+email:
+- dgerton@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/javascript/imagedrop.js.coffee
+- app/assets/stylesheets/imagedrop.css.scss
+- app/assets/stylesheets/imagedrop_custom.css.scss
+- imagedrop.gemspec
+- lib/imagedrop.rb
+- lib/imagedrop/engine.rb
+- lib/imagedrop/version.rb
+homepage: https://github.com/IAmNaN/imagedrop
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: Good for avatars and such!
+test_files: []