keystone_image 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
data/.gitignore ADDED
@@ -0,0 +1,17 @@
1
+ *.gem
2
+ *.rbc
3
+ .bundle
4
+ .config
5
+ .yardoc
6
+ Gemfile.lock
7
+ InstalledFiles
8
+ _yardoc
9
+ coverage
10
+ doc/
11
+ lib/bundler/man
12
+ pkg
13
+ rdoc
14
+ spec/reports
15
+ test/tmp
16
+ test/version_tmp
17
+ tmp
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in keystone_image.gemspec
4
+ gemspec
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,3 @@
1
+ jQuery(function() {
2
+ jQuery.keystoneImage();
3
+ });
@@ -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,3 @@
1
+ module KeystoneImage
2
+ VERSION = "0.0.1"
3
+ 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
+