keystone_image 0.0.2 → 0.0.3
Sign up to get free protection for your applications and to get access to all the features.
data/.gitignore
CHANGED
data/README.md
CHANGED
@@ -17,15 +17,16 @@ Add this line to your application.html.erb to load up the relevant javascripts:
|
|
17
17
|
<%= keystone_image %>
|
18
18
|
<% end %>
|
19
19
|
|
20
|
-
|
20
|
+
The keystone_image view helper takes options to override the default settings listed at the top of jquery.keystone-image.js:
|
21
21
|
|
22
|
-
|
22
|
+
<%= keystone_image 'toogle_overlay_keycode' => 49, 'overlay_opacity' => 0.2 %>
|
23
23
|
|
24
24
|
|
25
25
|
## Usage
|
26
26
|
- in the webpage, press 'alt/option + 2' to toggle the dropbox - drag and drop any image into it
|
27
27
|
- press 'alt/option + 1' to toggle keystone image on/off
|
28
28
|
- to move the keystone image, hold alt + one of 3/4/5/6 keys - hold shift to move faster
|
29
|
+
- alt + 7 re-centers the keystone image
|
29
30
|
|
30
31
|
|
31
32
|
## Limitations
|
@@ -9,7 +9,9 @@
|
|
9
9
|
'up_keycode': 51, // alt/option + 3
|
10
10
|
'down_keycode': 52, // alt/option + 4
|
11
11
|
'left_keycode': 53, // alt/option + 5
|
12
|
-
'right_keycode': 54
|
12
|
+
'right_keycode': 54, // alt/option + 6
|
13
|
+
'recenter_overlay': 55, // alt/option + 7
|
14
|
+
'overlay_opacity': 0.5}
|
13
15
|
|
14
16
|
$.extend(settings, setting_overrides);
|
15
17
|
|
@@ -35,7 +37,7 @@
|
|
35
37
|
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>');
|
36
38
|
var dropbox = $('#keystone_image_dropbox');
|
37
39
|
|
38
|
-
body.append('<img id="keystone_image_overlay" style="display: none; position: absolute; z-index: 9000; opacity:
|
40
|
+
body.append('<img id="keystone_image_overlay" style="display: none; position: absolute; z-index: 9000; opacity: ' + settings.overlay_opacity + '; pointer-events: none;" />');
|
39
41
|
var image = $('#keystone_image_overlay');
|
40
42
|
image.attr('src', localStorage['keystone_image_data_url']);
|
41
43
|
if(localStorage['keystone_image_overlay_display_status'] == 't')
|
@@ -63,6 +65,28 @@
|
|
63
65
|
localStorage['keystone_image_overlay_display_status'] = (image.css('display') == 'none') ? 't' : 'f';
|
64
66
|
}
|
65
67
|
|
68
|
+
function recenter_overlay() {
|
69
|
+
var viewport = $(window);
|
70
|
+
var viewport_width = viewport.width();
|
71
|
+
var viewport_height = viewport.height();
|
72
|
+
var viewport_center_x = Math.round(viewport_width / 2);
|
73
|
+
var viewport_center_y = $(window).scrollTop() + Math.round(viewport_height / 2);
|
74
|
+
|
75
|
+
localStorage['keystone_image_pos_x'] = viewport_center_x - Math.round(image.width() / 2);
|
76
|
+
localStorage['keystone_image_pos_y'] = viewport_center_y - Math.round(image.height() / 2);
|
77
|
+
|
78
|
+
// Don't place the image beyond the top of the webpage
|
79
|
+
if(localStorage['keystone_image_pos_y'] < 0)
|
80
|
+
localStorage['keystone_image_pos_y'] = 0;
|
81
|
+
|
82
|
+
// Don't place the image beyond the bottom of the webpage
|
83
|
+
var max_pos_y = $(body).outerHeight(true) - image.height();
|
84
|
+
if(localStorage['keystone_image_pos_y'] > max_pos_y)
|
85
|
+
localStorage['keystone_image_pos_y'] = max_pos_y;
|
86
|
+
|
87
|
+
translate_image();
|
88
|
+
}
|
89
|
+
|
66
90
|
|
67
91
|
|
68
92
|
|
@@ -93,6 +117,10 @@
|
|
93
117
|
case settings.right_keycode:
|
94
118
|
update_image_position('x', position_delta);
|
95
119
|
break;
|
120
|
+
case settings.recenter_overlay:;
|
121
|
+
recenter_overlay();
|
122
|
+
image.fadeIn(100);
|
123
|
+
break;
|
96
124
|
}
|
97
125
|
});
|
98
126
|
|
@@ -102,9 +130,6 @@
|
|
102
130
|
}
|
103
131
|
|
104
132
|
function on_drop(e) {
|
105
|
-
e.stopPropagation();
|
106
|
-
e.preventDefault();
|
107
|
-
|
108
133
|
if(!e.dataTransfer || !e.dataTransfer.files) {
|
109
134
|
alert('Sorry, your browser is incompatible.');
|
110
135
|
return false;
|
@@ -125,6 +150,7 @@
|
|
125
150
|
reader.onload = function(e) {
|
126
151
|
image[0].src = localStorage['keystone_image_data_url'] = e.target.result;
|
127
152
|
dropbox.hide();
|
153
|
+
recenter_overlay();
|
128
154
|
image.show();
|
129
155
|
};
|
130
156
|
reader.readAsDataURL(e.dataTransfer.files[0]);
|
@@ -137,5 +163,6 @@
|
|
137
163
|
dropbox.bind('dragover', stop_event);
|
138
164
|
dropbox.bind('dragleave', stop_event);
|
139
165
|
dropbox.bind('drop', on_drop);
|
166
|
+
dropbox.bind('drop', stop_event);
|
140
167
|
}
|
141
168
|
})(jQuery);
|
data/keystone_image.gemspec
CHANGED
@@ -8,8 +8,8 @@ Gem::Specification.new do |gem|
|
|
8
8
|
gem.version = KeystoneImage::VERSION
|
9
9
|
gem.authors = ["Vincent Woo"]
|
10
10
|
gem.email = ["contact@undefinedrange.com"]
|
11
|
-
gem.description = %q{
|
12
|
-
gem.summary = %q{
|
11
|
+
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.}
|
12
|
+
gem.summary = %q{Keystone Image overlays a semi-transparent wireframe/design image over everything in the web browser viewport.}
|
13
13
|
gem.homepage = "https://github.com/vwoo/keystone_image"
|
14
14
|
|
15
15
|
gem.files = `git ls-files`.split($/)
|
data/lib/keystone_image.rb
CHANGED
@@ -7,8 +7,9 @@ module KeystoneImage
|
|
7
7
|
end
|
8
8
|
|
9
9
|
module Helpers
|
10
|
-
def keystone_image
|
11
|
-
javascript_include_tag('jquery.keystone-image', 'keystone-image-init', :defer => true)
|
10
|
+
def keystone_image(options={})
|
11
|
+
html = javascript_include_tag('jquery.keystone-image', 'keystone-image-init', :defer => true)
|
12
|
+
html + %Q!<meta name='keystone-image-options' content='#{options.to_json}'>!.html_safe
|
12
13
|
end
|
13
14
|
end
|
14
15
|
end
|
metadata
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: keystone_image
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
4
|
+
hash: 25
|
5
5
|
prerelease:
|
6
6
|
segments:
|
7
7
|
- 0
|
8
8
|
- 0
|
9
|
-
-
|
10
|
-
version: 0.0.
|
9
|
+
- 3
|
10
|
+
version: 0.0.3
|
11
11
|
platform: ruby
|
12
12
|
authors:
|
13
13
|
- Vincent Woo
|
@@ -15,7 +15,7 @@ autorequire:
|
|
15
15
|
bindir: bin
|
16
16
|
cert_chain: []
|
17
17
|
|
18
|
-
date: 2013-
|
18
|
+
date: 2013-03-05 00:00:00 Z
|
19
19
|
dependencies:
|
20
20
|
- !ruby/object:Gem::Dependency
|
21
21
|
name: jquery-rails
|
@@ -33,7 +33,7 @@ dependencies:
|
|
33
33
|
version: 1.0.13
|
34
34
|
type: :runtime
|
35
35
|
version_requirements: *id001
|
36
|
-
description:
|
36
|
+
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.
|
37
37
|
email:
|
38
38
|
- contact@undefinedrange.com
|
39
39
|
executables: []
|
@@ -85,6 +85,6 @@ rubyforge_project:
|
|
85
85
|
rubygems_version: 1.8.25
|
86
86
|
signing_key:
|
87
87
|
specification_version: 3
|
88
|
-
summary:
|
88
|
+
summary: Keystone Image overlays a semi-transparent wireframe/design image over everything in the web browser viewport.
|
89
89
|
test_files: []
|
90
90
|
|