keystone_image 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/README.md +47 -0
- data/Rakefile +1 -0
- data/app/assets/javascripts/jquery.keystone-image.js +131 -0
- data/app/assets/javascripts/keystone-image-init.js +3 -0
- data/keystone_image.gemspec +19 -0
- data/lib/keystone_image/version.rb +3 -0
- data/lib/keystone_image.rb +16 -0
- data/license.txt +22 -0
- metadata +75 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/README.md
ADDED
@@ -0,0 +1,47 @@
|
|
1
|
+
## Description
|
2
|
+
|
3
|
+
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.
|
4
|
+
|
5
|
+
The keystone image persists in localStorage (one image per domain). No need to re-add the image after closing the tab/browser.
|
6
|
+
|
7
|
+
|
8
|
+
## Installation
|
9
|
+
|
10
|
+
Add this line to your application's Gemfile:
|
11
|
+
|
12
|
+
gem 'keystone_image'
|
13
|
+
|
14
|
+
Add this line to your application.html.erb to load up the relevant javascripts:
|
15
|
+
|
16
|
+
<% if Rails.env == 'development' %>
|
17
|
+
<%= keystone_image %>
|
18
|
+
<% end %>
|
19
|
+
|
20
|
+
That's it. If you want to, review the javascript files for available options. Override key assignments by specifying key codes. Example:
|
21
|
+
|
22
|
+
$.keystoneImage({toogle_overlay_keycode: 90});
|
23
|
+
|
24
|
+
|
25
|
+
## Usage
|
26
|
+
- in the webpage, press 'q' to toggle the dropbox - drag and drop any image into it
|
27
|
+
- press 'a' to toggle keystone image on/off
|
28
|
+
- to move the keystone image, press ijkl keys - hold shift to move faster
|
29
|
+
|
30
|
+
|
31
|
+
## Limitations
|
32
|
+
|
33
|
+
Do not access your webpage via the file:// protocol or you might not be able to drag/drop images due to cross domain issues.
|
34
|
+
|
35
|
+
|
36
|
+
## Compatibility
|
37
|
+
|
38
|
+
Because of the usage of HTML5 Local Storage, native drag/drop, and File API, only modern browsers are supported. Tested working with:
|
39
|
+
- jQuery 1.6.2
|
40
|
+
- Firefox 6.0
|
41
|
+
- Chrome 13.0.782.112
|
42
|
+
- IE10
|
43
|
+
|
44
|
+
|
45
|
+
## Similar in-browser plugins
|
46
|
+
* Pixel Perfect Firefox Extension (http://www.pixelperfectplugin.com/)
|
47
|
+
* WebDeveloper Image Overlay for Chrome (https://chrome.google.com/webstore/detail/olfihdjffmgfmmcdodcgciejhnhibalg)
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,131 @@
|
|
1
|
+
(function($) {
|
2
|
+
$.keystoneImage = function(setting_overrides) {
|
3
|
+
|
4
|
+
/***** Configuration *****/
|
5
|
+
// Example char codes:
|
6
|
+
// http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
|
7
|
+
var settings = {'toggle_drop_box_keycode': 81, // q
|
8
|
+
'toogle_overlay_keycode': 65, // a
|
9
|
+
'up_keycode': 73, // i
|
10
|
+
'down_keycode': 75, // k
|
11
|
+
'left_keycode': 74, // j
|
12
|
+
'right_keycode': 76} // l
|
13
|
+
|
14
|
+
$.extend(settings, setting_overrides);
|
15
|
+
|
16
|
+
|
17
|
+
|
18
|
+
var defaults = {'keystone_image_data_url': '',
|
19
|
+
'keystone_image_pos_x': 0,
|
20
|
+
'keystone_image_pos_y': 0}
|
21
|
+
|
22
|
+
$.each(defaults, function(key, value) {
|
23
|
+
if(localStorage[key] == null) {localStorage[key] = value;}
|
24
|
+
});
|
25
|
+
|
26
|
+
|
27
|
+
|
28
|
+
|
29
|
+
|
30
|
+
/***** Build UI *****/
|
31
|
+
var doc = $(document);
|
32
|
+
var body = $('body');
|
33
|
+
|
34
|
+
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>');
|
35
|
+
var dropbox = $('#keystone_image_dropbox');
|
36
|
+
|
37
|
+
body.append('<img id="keystone_image_overlay" style="display: none; position: absolute; z-index: 9000; opacity: 0.5; pointer-events: none;" />');
|
38
|
+
var image = $('#keystone_image_overlay');
|
39
|
+
image.attr('src', localStorage['keystone_image_data_url']);
|
40
|
+
|
41
|
+
|
42
|
+
|
43
|
+
|
44
|
+
|
45
|
+
/***** Helper Methods *****/
|
46
|
+
function translate_image() {
|
47
|
+
image.css('left', localStorage['keystone_image_pos_x'] + 'px');
|
48
|
+
image.css('top', localStorage['keystone_image_pos_y'] + 'px');
|
49
|
+
};
|
50
|
+
translate_image();
|
51
|
+
|
52
|
+
function update_image_position(coord, delta) {
|
53
|
+
if(image.css('display') != 'none') {
|
54
|
+
localStorage['keystone_image_pos_' + coord] = parseInt(localStorage['keystone_image_pos_' + coord]) + delta;
|
55
|
+
translate_image();
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
|
60
|
+
|
61
|
+
|
62
|
+
|
63
|
+
/***** Event Handlers *****/
|
64
|
+
doc.keydown(function(e) {
|
65
|
+
var position_delta = e.shiftKey ? 30 : 1;
|
66
|
+
|
67
|
+
switch(e.which) {
|
68
|
+
case settings.toggle_drop_box_keycode:
|
69
|
+
dropbox.fadeToggle(150);
|
70
|
+
break;
|
71
|
+
case settings.toogle_overlay_keycode:
|
72
|
+
image.fadeToggle(100);
|
73
|
+
break;
|
74
|
+
case settings.up_keycode:
|
75
|
+
update_image_position('y', -position_delta);
|
76
|
+
break;
|
77
|
+
case settings.left_keycode:
|
78
|
+
update_image_position('x', -position_delta);
|
79
|
+
break;
|
80
|
+
case settings.down_keycode:
|
81
|
+
update_image_position('y', position_delta);
|
82
|
+
break;
|
83
|
+
case settings.right_keycode:
|
84
|
+
update_image_position('x', position_delta);
|
85
|
+
break;
|
86
|
+
}
|
87
|
+
});
|
88
|
+
|
89
|
+
function stop_event(e) {
|
90
|
+
e.stopPropagation();
|
91
|
+
e.preventDefault();
|
92
|
+
}
|
93
|
+
|
94
|
+
function on_drop(e) {
|
95
|
+
e.stopPropagation();
|
96
|
+
e.preventDefault();
|
97
|
+
|
98
|
+
if(!e.dataTransfer || !e.dataTransfer.files) {
|
99
|
+
alert('Sorry, your browser is incompatible.');
|
100
|
+
return false;
|
101
|
+
}
|
102
|
+
|
103
|
+
if(e.dataTransfer.files.length == 0) {
|
104
|
+
alert('Error: No file detected.');
|
105
|
+
return false;
|
106
|
+
}
|
107
|
+
|
108
|
+
var valid_types = ['image/bmp', 'image/gif', 'image/jpeg', 'image/pjpeg', 'image/png', 'image/x-png'];
|
109
|
+
if(e.dataTransfer.files[0].type.indexOf('image/') != 0) {
|
110
|
+
alert('Error: Please drag in an image.');
|
111
|
+
return false;
|
112
|
+
}
|
113
|
+
|
114
|
+
var reader = new FileReader();
|
115
|
+
reader.onload = function(e) {
|
116
|
+
image[0].src = localStorage['keystone_image_data_url'] = e.target.result;
|
117
|
+
dropbox.hide();
|
118
|
+
image.show();
|
119
|
+
};
|
120
|
+
reader.readAsDataURL(e.dataTransfer.files[0]);
|
121
|
+
|
122
|
+
return false;
|
123
|
+
}
|
124
|
+
|
125
|
+
jQuery.event.props.push("dataTransfer");
|
126
|
+
dropbox.bind('dragenter', stop_event);
|
127
|
+
dropbox.bind('dragover', stop_event);
|
128
|
+
dropbox.bind('dragleave', stop_event);
|
129
|
+
dropbox.bind('drop', on_drop);
|
130
|
+
}
|
131
|
+
})(jQuery);
|
@@ -0,0 +1,19 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'keystone_image/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |gem|
|
7
|
+
gem.name = "keystone_image"
|
8
|
+
gem.version = KeystoneImage::VERSION
|
9
|
+
gem.authors = ["Vincent Woo"]
|
10
|
+
gem.email = ["contact@undefinedrange.com"]
|
11
|
+
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.}
|
12
|
+
gem.summary = %q{KeystoneImage overlays a semi-transparent wireframe/design image over everything in the web browser viewport.}
|
13
|
+
gem.homepage = "https://github.com/vwoo/keystone_image"
|
14
|
+
|
15
|
+
gem.files = `git ls-files`.split($/)
|
16
|
+
gem.executables = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
|
17
|
+
gem.test_files = gem.files.grep(%r{^(test|spec|features)/})
|
18
|
+
gem.require_paths = ["lib"]
|
19
|
+
end
|
@@ -0,0 +1,16 @@
|
|
1
|
+
require "keystone_image/version"
|
2
|
+
|
3
|
+
module KeystoneImage
|
4
|
+
module Rails
|
5
|
+
class Engine < ::Rails::Engine
|
6
|
+
end
|
7
|
+
end
|
8
|
+
|
9
|
+
module Helpers
|
10
|
+
def keystone_image
|
11
|
+
javascript_include_tag('jquery.keystone-image', 'keystone-image-init', :defer => true)
|
12
|
+
end
|
13
|
+
end
|
14
|
+
end
|
15
|
+
|
16
|
+
ActionController::Base.helper(KeystoneImage::Helpers)
|
data/license.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2013 Vincent Woo
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
metadata
ADDED
@@ -0,0 +1,75 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: keystone_image
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
hash: 29
|
5
|
+
prerelease:
|
6
|
+
segments:
|
7
|
+
- 0
|
8
|
+
- 0
|
9
|
+
- 1
|
10
|
+
version: 0.0.1
|
11
|
+
platform: ruby
|
12
|
+
authors:
|
13
|
+
- Vincent Woo
|
14
|
+
autorequire:
|
15
|
+
bindir: bin
|
16
|
+
cert_chain: []
|
17
|
+
|
18
|
+
date: 2013-02-17 00:00:00 Z
|
19
|
+
dependencies: []
|
20
|
+
|
21
|
+
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.
|
22
|
+
email:
|
23
|
+
- contact@undefinedrange.com
|
24
|
+
executables: []
|
25
|
+
|
26
|
+
extensions: []
|
27
|
+
|
28
|
+
extra_rdoc_files: []
|
29
|
+
|
30
|
+
files:
|
31
|
+
- .gitignore
|
32
|
+
- Gemfile
|
33
|
+
- README.md
|
34
|
+
- Rakefile
|
35
|
+
- app/assets/javascripts/jquery.keystone-image.js
|
36
|
+
- app/assets/javascripts/keystone-image-init.js
|
37
|
+
- keystone_image.gemspec
|
38
|
+
- lib/keystone_image.rb
|
39
|
+
- lib/keystone_image/version.rb
|
40
|
+
- license.txt
|
41
|
+
homepage: https://github.com/vwoo/keystone_image
|
42
|
+
licenses: []
|
43
|
+
|
44
|
+
post_install_message:
|
45
|
+
rdoc_options: []
|
46
|
+
|
47
|
+
require_paths:
|
48
|
+
- lib
|
49
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
50
|
+
none: false
|
51
|
+
requirements:
|
52
|
+
- - ">="
|
53
|
+
- !ruby/object:Gem::Version
|
54
|
+
hash: 3
|
55
|
+
segments:
|
56
|
+
- 0
|
57
|
+
version: "0"
|
58
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
59
|
+
none: false
|
60
|
+
requirements:
|
61
|
+
- - ">="
|
62
|
+
- !ruby/object:Gem::Version
|
63
|
+
hash: 3
|
64
|
+
segments:
|
65
|
+
- 0
|
66
|
+
version: "0"
|
67
|
+
requirements: []
|
68
|
+
|
69
|
+
rubyforge_project:
|
70
|
+
rubygems_version: 1.8.25
|
71
|
+
signing_key:
|
72
|
+
specification_version: 3
|
73
|
+
summary: KeystoneImage overlays a semi-transparent wireframe/design image over everything in the web browser viewport.
|
74
|
+
test_files: []
|
75
|
+
|