keystone_image 0.0.1

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

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

data/README.md

@@ -0,0 +1,47 @@
+## Description
+
+The Keystone Image jQuery plugin overlays a semi-transparent wireframe/design image over everything in the web browser viewport. Handy when converting a PSD from a graphic designer into a webpage to ensure pixel perfect layouts.
+
+The keystone image persists in localStorage (one image per domain). No need to re-add the image after closing the tab/browser.
+
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'keystone_image'
+
+Add this line to your application.html.erb to load up the relevant javascripts:
+    
+    <% if Rails.env == 'development' %>
+      <%= keystone_image %>
+    <% end %>
+
+That's it. If you want to, review the javascript files for available options. Override key assignments by specifying key codes. Example:
+    
+    $.keystoneImage({toogle_overlay_keycode: 90});
+
+
+## Usage
+- in the webpage, press 'q' to toggle the dropbox - drag and drop any image into it
+- press 'a' to toggle keystone image on/off
+- to move the keystone image, press ijkl keys - hold shift to move faster
+
+
+## Limitations
+
+Do not access your webpage via the file:// protocol or you might not be able to drag/drop images due to cross domain issues.
+
+
+## Compatibility
+
+Because of the usage of HTML5 Local Storage, native drag/drop, and File API, only modern browsers are supported. Tested working with:
+- jQuery 1.6.2
+- Firefox 6.0
+- Chrome 13.0.782.112
+- IE10
+
+
+## Similar in-browser plugins
+* Pixel Perfect Firefox Extension (http://www.pixelperfectplugin.com/)
+* WebDeveloper Image Overlay for Chrome (https://chrome.google.com/webstore/detail/olfihdjffmgfmmcdodcgciejhnhibalg)

data/Rakefile

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

data/app/assets/javascripts/jquery.keystone-image.js

@@ -0,0 +1,131 @@
+(function($) {
+  $.keystoneImage = function(setting_overrides) {
+    
+    /***** Configuration *****/
+    // Example char codes:
+    // http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
+    var settings = {'toggle_drop_box_keycode': 81,  // q
+                    'toogle_overlay_keycode': 65,   // a
+                    'up_keycode': 73,               // i
+                    'down_keycode': 75,             // k
+                    'left_keycode': 74,             // j
+                    'right_keycode': 76}            // l
+
+    $.extend(settings, setting_overrides);
+    
+    
+    
+    var defaults = {'keystone_image_data_url': '',
+                    'keystone_image_pos_x': 0,
+                    'keystone_image_pos_y': 0}
+  
+    $.each(defaults, function(key, value) {
+      if(localStorage[key] == null) {localStorage[key] = value;}
+    });
+    
+    
+    
+    
+    
+    /***** Build UI *****/
+    var doc = $(document);
+    var body = $('body');
+  
+    body.append('<div id="keystone_image_dropbox" style="display: none; position: fixed; z-index: 10000; top: 80px; bottom: 80px; left: 80px; right: 80px; background: rgba(0,0,255,0.9); border: 4px dashed black; color: white; text-align: center; font-size: 24px;">Keystone Image - Drag and Drop Image Here</div>');
+    var dropbox = $('#keystone_image_dropbox');
+  
+    body.append('<img id="keystone_image_overlay" style="display: none; position: absolute; z-index: 9000; opacity: 0.5; pointer-events: none;" />');
+    var image = $('#keystone_image_overlay');
+    image.attr('src', localStorage['keystone_image_data_url']);
+
+
+
+
+
+    /***** Helper Methods *****/
+    function translate_image() {
+      image.css('left', localStorage['keystone_image_pos_x'] + 'px');
+      image.css('top', localStorage['keystone_image_pos_y'] + 'px');
+    };
+    translate_image();
+    
+    function update_image_position(coord, delta) {
+      if(image.css('display')  != 'none') {
+        localStorage['keystone_image_pos_' + coord] = parseInt(localStorage['keystone_image_pos_' + coord]) + delta;
+        translate_image();
+      }
+    }
+    
+    
+    
+    
+    
+    /***** Event Handlers *****/
+    doc.keydown(function(e) {
+      var position_delta = e.shiftKey ? 30 : 1;
+      
+      switch(e.which) {
+        case settings.toggle_drop_box_keycode:
+          dropbox.fadeToggle(150);
+          break;
+        case settings.toogle_overlay_keycode:
+          image.fadeToggle(100);
+          break;
+        case settings.up_keycode:
+          update_image_position('y', -position_delta);
+          break;
+        case settings.left_keycode:
+          update_image_position('x', -position_delta);
+          break;
+        case settings.down_keycode:
+          update_image_position('y', position_delta);
+          break;
+        case settings.right_keycode:
+          update_image_position('x', position_delta);
+          break;
+        }
+    });
+    
+    function stop_event(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+    
+    function on_drop(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      
+      if(!e.dataTransfer || !e.dataTransfer.files) {
+        alert('Sorry, your browser is incompatible.');
+        return false;
+      }
+    
+      if(e.dataTransfer.files.length == 0) {
+        alert('Error: No file detected.');
+        return false;
+      }
+      
+      var valid_types = ['image/bmp', 'image/gif', 'image/jpeg', 'image/pjpeg', 'image/png', 'image/x-png'];
+      if(e.dataTransfer.files[0].type.indexOf('image/') != 0) {
+        alert('Error: Please drag in an image.');
+        return false;
+      }
+      
+      var reader = new FileReader();
+      reader.onload = function(e) {
+        image[0].src = localStorage['keystone_image_data_url'] = e.target.result;
+        dropbox.hide();
+        image.show();
+      };
+      reader.readAsDataURL(e.dataTransfer.files[0]);
+      
+      return false;
+    }
+
+    jQuery.event.props.push("dataTransfer");  
+    dropbox.bind('dragenter', stop_event);
+    dropbox.bind('dragover', stop_event);
+    dropbox.bind('dragleave', stop_event);
+    dropbox.bind('drop', on_drop);
+  }
+})(jQuery);

data/app/assets/javascripts/keystone-image-init.js

@@ -0,0 +1,3 @@
+jQuery(function() {
+  jQuery.keystoneImage();
+});

data/keystone_image.gemspec

@@ -0,0 +1,19 @@
+# -*- encoding: utf-8 -*-
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'keystone_image/version'
+
+Gem::Specification.new do |gem|
+  gem.name          = "keystone_image"
+  gem.version       = KeystoneImage::VERSION
+  gem.authors       = ["Vincent Woo"]
+  gem.email         = ["contact@undefinedrange.com"]
+  gem.description   = %q{KeystoneImage overlays a semi-transparent wireframe/design image over everything in the web browser viewport. Handy when converting a PSD from a graphic designer into a webpage to ensure pixel perfect layouts.}
+  gem.summary       = %q{KeystoneImage overlays a semi-transparent wireframe/design image over everything in the web browser viewport.}
+  gem.homepage      = "https://github.com/vwoo/keystone_image"
+
+  gem.files         = `git ls-files`.split($/)
+  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+  gem.require_paths = ["lib"]
+end

data/lib/keystone_image/version.rb

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

data/lib/keystone_image.rb

@@ -0,0 +1,16 @@
+require "keystone_image/version"
+
+module KeystoneImage
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+  
+  module Helpers
+    def keystone_image
+      javascript_include_tag('jquery.keystone-image', 'keystone-image-init', :defer => true)
+    end
+  end
+end
+
+ActionController::Base.helper(KeystoneImage::Helpers)

data/license.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Vincent Woo
+
+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.

metadata

@@ -0,0 +1,75 @@
+--- !ruby/object:Gem::Specification 
+name: keystone_image
+version: !ruby/object:Gem::Version 
+  hash: 29
+  prerelease: 
+  segments: 
+  - 0
+  - 0
+  - 1
+  version: 0.0.1
+platform: ruby
+authors: 
+- Vincent Woo
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2013-02-17 00:00:00 Z
+dependencies: []
+
+description: KeystoneImage overlays a semi-transparent wireframe/design image over everything in the web browser viewport. Handy when converting a PSD from a graphic designer into a webpage to ensure pixel perfect layouts.
+email: 
+- contact@undefinedrange.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- .gitignore
+- Gemfile
+- README.md
+- Rakefile
+- app/assets/javascripts/jquery.keystone-image.js
+- app/assets/javascripts/keystone-image-init.js
+- keystone_image.gemspec
+- lib/keystone_image.rb
+- lib/keystone_image/version.rb
+- license.txt
+homepage: https://github.com/vwoo/keystone_image
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.8.25
+signing_key: 
+specification_version: 3
+summary: KeystoneImage overlays a semi-transparent wireframe/design image over everything in the web browser viewport.
+test_files: []
+