keystone_image 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|