keystone_image 0.0.2 → 0.0.3

data/.gitignore

@@ -15,3 +15,4 @@ spec/reports
 test/tmp
 test/version_tmp
 tmp
+.DS_Store

data/README.md

@@ -17,15 +17,16 @@ Add this line to your application.html.erb to load up the relevant javascripts:
       <%= 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:
+The keystone_image view helper takes options to override the default settings listed at the top of jquery.keystone-image.js:
     
-    $.keystoneImage({toogle_overlay_keycode: 49});
+    <%= keystone_image 'toogle_overlay_keycode' => 49, 'overlay_opacity' => 0.2 %>
 
 
 ## Usage
 - in the webpage, press 'alt/option + 2' to toggle the dropbox - drag and drop any image into it
 - press 'alt/option + 1' to toggle keystone image on/off
 - to move the keystone image, hold alt + one of 3/4/5/6 keys - hold shift to move faster
+- alt + 7 re-centers the keystone image
 
 
 ## Limitations

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

@@ -9,7 +9,9 @@
                     'up_keycode': 51,               // alt/option + 3
                     'down_keycode': 52,             // alt/option + 4
                     'left_keycode': 53,             // alt/option + 5
-                    'right_keycode': 54}            // alt/option + 6
+                    'right_keycode': 54,            // alt/option + 6
+                    'recenter_overlay': 55,         // alt/option + 7
+                    'overlay_opacity': 0.5}
 
     $.extend(settings, setting_overrides);
     
@@ -35,7 +37,7 @@
     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;" />');
+    body.append('<img id="keystone_image_overlay" style="display: none; position: absolute; z-index: 9000; opacity: ' + settings.overlay_opacity + '; pointer-events: none;" />');
     var image = $('#keystone_image_overlay');
     image.attr('src', localStorage['keystone_image_data_url']);
     if(localStorage['keystone_image_overlay_display_status'] == 't')
@@ -63,6 +65,28 @@
       localStorage['keystone_image_overlay_display_status'] = (image.css('display') == 'none') ? 't' : 'f';
     }
     
+    function recenter_overlay() {
+      var viewport = $(window);
+      var viewport_width = viewport.width();
+      var viewport_height = viewport.height();
+      var viewport_center_x = Math.round(viewport_width / 2);
+      var viewport_center_y = $(window).scrollTop() + Math.round(viewport_height / 2);
+      
+      localStorage['keystone_image_pos_x'] = viewport_center_x - Math.round(image.width() / 2);
+      localStorage['keystone_image_pos_y'] = viewport_center_y - Math.round(image.height() / 2);
+      
+      // Don't place the image beyond the top of the webpage
+      if(localStorage['keystone_image_pos_y'] < 0)
+        localStorage['keystone_image_pos_y'] = 0;
+      
+      // Don't place the image beyond the bottom of the webpage
+      var max_pos_y = $(body).outerHeight(true) - image.height();
+      if(localStorage['keystone_image_pos_y'] > max_pos_y)
+        localStorage['keystone_image_pos_y'] = max_pos_y;
+      
+      translate_image();
+    }
+    
     
     
     
@@ -93,6 +117,10 @@
         case settings.right_keycode:
           update_image_position('x', position_delta);
           break;
+        case settings.recenter_overlay:;
+          recenter_overlay();
+          image.fadeIn(100);
+          break;
         }
     });
     
@@ -102,9 +130,6 @@
     }
     
     function on_drop(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      
       if(!e.dataTransfer || !e.dataTransfer.files) {
         alert('Sorry, your browser is incompatible.');
         return false;
@@ -125,6 +150,7 @@
       reader.onload = function(e) {
         image[0].src = localStorage['keystone_image_data_url'] = e.target.result;
         dropbox.hide();
+        recenter_overlay();
         image.show();
       };
       reader.readAsDataURL(e.dataTransfer.files[0]);
@@ -137,5 +163,6 @@
     dropbox.bind('dragover', stop_event);
     dropbox.bind('dragleave', stop_event);
     dropbox.bind('drop', on_drop);
+    dropbox.bind('drop', stop_event);
   }
 })(jQuery);

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

@@ -1,3 +1,5 @@
 jQuery(function() {
-  jQuery.keystoneImage();
+  var raw_options = jQuery('meta[name=keystone-image-options]').attr('content');
+  var options = jQuery.parseJSON(raw_options);
+  jQuery.keystoneImage(options);
 });

data/keystone_image.gemspec

@@ -8,8 +8,8 @@ Gem::Specification.new do |gem|
   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.description   = %q{Keystone Image 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{Keystone Image 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($/)

data/lib/keystone_image/version.rb

@@ -1,3 +1,3 @@
 module KeystoneImage
-  VERSION = "0.0.2"
+  VERSION = "0.0.3"
 end

data/lib/keystone_image.rb

@@ -7,8 +7,9 @@ module KeystoneImage
   end
   
   module Helpers
-    def keystone_image
-      javascript_include_tag('jquery.keystone-image', 'keystone-image-init', :defer => true)
+    def keystone_image(options={})
+      html = javascript_include_tag('jquery.keystone-image', 'keystone-image-init', :defer => true)
+      html + %Q!<meta name='keystone-image-options' content='#{options.to_json}'>!.html_safe
     end
   end
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: keystone_image
 version: !ruby/object:Gem::Version 
-  hash: 27
+  hash: 25
   prerelease: 
   segments: 
   - 0
   - 0
-  - 2
-  version: 0.0.2
+  - 3
+  version: 0.0.3
 platform: ruby
 authors: 
 - Vincent Woo
@@ -15,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2013-02-18 00:00:00 Z
+date: 2013-03-05 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: jquery-rails
@@ -33,7 +33,7 @@ dependencies:
         version: 1.0.13
   type: :runtime
   version_requirements: *id001
-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.
+description: Keystone Image 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: []
@@ -85,6 +85,6 @@ 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.
+summary: Keystone Image overlays a semi-transparent wireframe/design image over everything in the web browser viewport.
 test_files: []