keystone_image 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +6 -5
- data/app/assets/javascripts/jquery.keystone-image.js +18 -8
- data/keystone_image.gemspec +2 -0
- data/lib/keystone_image/version.rb +1 -1
- metadata +21 -6
data/README.md
CHANGED
@@ -19,13 +19,13 @@ Add this line to your application.html.erb to load up the relevant javascripts:
|
|
19
19
|
|
20
20
|
That's it. If you want to, review the javascript files for available options. Override key assignments by specifying key codes. Example:
|
21
21
|
|
22
|
-
$.keystoneImage({toogle_overlay_keycode:
|
22
|
+
$.keystoneImage({toogle_overlay_keycode: 49});
|
23
23
|
|
24
24
|
|
25
25
|
## Usage
|
26
|
-
- in the webpage, press '
|
27
|
-
- press '
|
28
|
-
- to move the keystone image,
|
26
|
+
- in the webpage, press 'alt/option + 2' to toggle the dropbox - drag and drop any image into it
|
27
|
+
- press 'alt/option + 1' to toggle keystone image on/off
|
28
|
+
- to move the keystone image, hold alt + one of 3/4/5/6 keys - hold shift to move faster
|
29
29
|
|
30
30
|
|
31
31
|
## Limitations
|
@@ -35,10 +35,11 @@ Do not access your webpage via the file:// protocol or you might not be able to
|
|
35
35
|
|
36
36
|
## Compatibility
|
37
37
|
|
38
|
-
Because of the usage of HTML5 Local Storage, native drag/drop, and File API, only modern browsers are supported.
|
38
|
+
Because of the usage of HTML5 Local Storage, native drag/drop, and File API, only modern browsers are supported. Known working with:
|
39
39
|
- jQuery 1.6.2
|
40
40
|
- Firefox 6.0
|
41
41
|
- Chrome 13.0.782.112
|
42
|
+
- Safari 6.0.2 (8536.26.17)
|
42
43
|
- IE10
|
43
44
|
|
44
45
|
|
@@ -4,12 +4,12 @@
|
|
4
4
|
/***** Configuration *****/
|
5
5
|
// Example char codes:
|
6
6
|
// http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
|
7
|
-
var settings = {'
|
8
|
-
'
|
9
|
-
'up_keycode':
|
10
|
-
'down_keycode':
|
11
|
-
'left_keycode':
|
12
|
-
'right_keycode':
|
7
|
+
var settings = {'toogle_overlay_keycode': 49, // alt/option + 1
|
8
|
+
'toggle_drop_box_keycode': 50, // alt/option + 2
|
9
|
+
'up_keycode': 51, // alt/option + 3
|
10
|
+
'down_keycode': 52, // alt/option + 4
|
11
|
+
'left_keycode': 53, // alt/option + 5
|
12
|
+
'right_keycode': 54} // alt/option + 6
|
13
13
|
|
14
14
|
$.extend(settings, setting_overrides);
|
15
15
|
|
@@ -17,7 +17,8 @@
|
|
17
17
|
|
18
18
|
var defaults = {'keystone_image_data_url': '',
|
19
19
|
'keystone_image_pos_x': 0,
|
20
|
-
'keystone_image_pos_y': 0
|
20
|
+
'keystone_image_pos_y': 0,
|
21
|
+
'keystone_image_overlay_display_status': 'f'}
|
21
22
|
|
22
23
|
$.each(defaults, function(key, value) {
|
23
24
|
if(localStorage[key] == null) {localStorage[key] = value;}
|
@@ -37,7 +38,9 @@
|
|
37
38
|
body.append('<img id="keystone_image_overlay" style="display: none; position: absolute; z-index: 9000; opacity: 0.5; pointer-events: none;" />');
|
38
39
|
var image = $('#keystone_image_overlay');
|
39
40
|
image.attr('src', localStorage['keystone_image_data_url']);
|
40
|
-
|
41
|
+
if(localStorage['keystone_image_overlay_display_status'] == 't')
|
42
|
+
image.show();
|
43
|
+
|
41
44
|
|
42
45
|
|
43
46
|
|
@@ -56,12 +59,18 @@
|
|
56
59
|
}
|
57
60
|
}
|
58
61
|
|
62
|
+
function record_overlay_display_status() {
|
63
|
+
localStorage['keystone_image_overlay_display_status'] = (image.css('display') == 'none') ? 't' : 'f';
|
64
|
+
}
|
65
|
+
|
59
66
|
|
60
67
|
|
61
68
|
|
62
69
|
|
63
70
|
/***** Event Handlers *****/
|
64
71
|
doc.keydown(function(e) {
|
72
|
+
if(!e.altKey) return;
|
73
|
+
|
65
74
|
var position_delta = e.shiftKey ? 30 : 1;
|
66
75
|
|
67
76
|
switch(e.which) {
|
@@ -69,6 +78,7 @@
|
|
69
78
|
dropbox.fadeToggle(150);
|
70
79
|
break;
|
71
80
|
case settings.toogle_overlay_keycode:
|
81
|
+
record_overlay_display_status();
|
72
82
|
image.fadeToggle(100);
|
73
83
|
break;
|
74
84
|
case settings.up_keycode:
|
data/keystone_image.gemspec
CHANGED
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: 27
|
5
5
|
prerelease:
|
6
6
|
segments:
|
7
7
|
- 0
|
8
8
|
- 0
|
9
|
-
-
|
10
|
-
version: 0.0.
|
9
|
+
- 2
|
10
|
+
version: 0.0.2
|
11
11
|
platform: ruby
|
12
12
|
authors:
|
13
13
|
- Vincent Woo
|
@@ -15,9 +15,24 @@ autorequire:
|
|
15
15
|
bindir: bin
|
16
16
|
cert_chain: []
|
17
17
|
|
18
|
-
date: 2013-02-
|
19
|
-
dependencies:
|
20
|
-
|
18
|
+
date: 2013-02-18 00:00:00 Z
|
19
|
+
dependencies:
|
20
|
+
- !ruby/object:Gem::Dependency
|
21
|
+
name: jquery-rails
|
22
|
+
prerelease: false
|
23
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
24
|
+
none: false
|
25
|
+
requirements:
|
26
|
+
- - ">="
|
27
|
+
- !ruby/object:Gem::Version
|
28
|
+
hash: 13
|
29
|
+
segments:
|
30
|
+
- 1
|
31
|
+
- 0
|
32
|
+
- 13
|
33
|
+
version: 1.0.13
|
34
|
+
type: :runtime
|
35
|
+
version_requirements: *id001
|
21
36
|
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
37
|
email:
|
23
38
|
- contact@undefinedrange.com
|