responsive_image_tag 0.2.6 → 0.3.0
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.rdoc +26 -18
- data/VERSION +1 -1
- data/generators/responsive_image_tag/responsive_image_tag_generator.rb +11 -0
- data/lib/generators/responsive_image_tag/{jquery_generator.rb → copy_js_generator.rb} +5 -7
- data/lib/generators/responsive_image_tag/{padrino_rit.rb → padrino_copy_rit_js.rb} +6 -9
- data/lib/generators/responsive_image_tag/templates/responsive-image-tag.js +57 -0
- data/lib/responsive_image_tag.rb +2 -5
- data/responsive_image_tag.gemspec +6 -9
- data/test/test_responsive_image_tag.rb +1 -2
- metadata +19 -22
- data/generators/responsive_image_tag/jquery_responsive_image_tag_generator.rb +0 -11
- data/generators/responsive_image_tag/prototype_responsive_image_tag_generator.rb +0 -11
- data/lib/generators/responsive_image_tag/prototype_generator.rb +0 -20
- data/lib/generators/responsive_image_tag/templates/responsive-image-tag-jquery.js +0 -50
- data/lib/generators/responsive_image_tag/templates/responsive-image-tag-prototype.js +0 -50
data/README.rdoc
CHANGED
|
@@ -6,11 +6,11 @@ It's quite common today for web sites to be viewed on a wide range of devices, f
|
|
|
6
6
|
|
|
7
7
|
Wouldn't it be nice if you could serve small images to mobile clients, and large images to desktop clients? The HTML spec doesn't really allow for device-specific asset serving, but it can be done with a little dash of cleverness. The technique used here allows you to serve device-specific images, and not make two server requests (saving bandwidth and server load).
|
|
8
8
|
|
|
9
|
-
We've packaged it up as a rubygem.
|
|
9
|
+
We've packaged it up as a rubygem.
|
|
10
10
|
|
|
11
11
|
responsive_image_tag is a Rails helper which selects an image depending on the width of the current device. The <tt>screen.width</tt> is detected by javascript and then an image element is inserted in the page with a dynamically created <tt>src</tt> attribute.
|
|
12
12
|
|
|
13
|
-
It works with Rails 2 and Rails 3, and there are javascript adapters for both jQuery and Prototype. Pick your poison.
|
|
13
|
+
It works with Rails 2 and Rails 3, and there are javascript adapters for both jQuery and Prototype. Pick your poison.
|
|
14
14
|
|
|
15
15
|
== Motivation and approach
|
|
16
16
|
|
|
@@ -49,45 +49,53 @@ Put it in your Gemfile:
|
|
|
49
49
|
Then install it:
|
|
50
50
|
|
|
51
51
|
bundle install
|
|
52
|
-
|
|
52
|
+
|
|
53
53
|
There's a generator which copies a JavaScript file into place in <tt>public/javascripts</tt>.
|
|
54
54
|
|
|
55
55
|
You can run it like this:
|
|
56
56
|
|
|
57
|
-
|
|
58
|
-
=== Rails 3
|
|
59
|
-
|
|
60
|
-
rails g responsive_image_tag:jquery
|
|
61
57
|
|
|
62
|
-
|
|
58
|
+
=== Rails 3
|
|
63
59
|
|
|
64
|
-
rails g responsive_image_tag:
|
|
60
|
+
rails g responsive_image_tag:copy_js
|
|
65
61
|
|
|
66
62
|
=== Rails 2
|
|
67
63
|
|
|
68
|
-
script/generate
|
|
64
|
+
script/generate responsive_image_tag *Currently untested
|
|
65
|
+
|
|
66
|
+
=== Padrino
|
|
69
67
|
|
|
70
|
-
|
|
68
|
+
padrino g copy_rit_js
|
|
71
69
|
|
|
72
|
-
|
|
70
|
+
Options:
|
|
73
71
|
|
|
72
|
+
-d, [--js_destination] The destination path to copy the Javascript file too. Default: 'public/javascripts'
|
|
74
73
|
|
|
75
74
|
== Usage
|
|
76
75
|
|
|
77
76
|
You need to do two things. First, make sure that you include a reference to the JavaScript file in your layout:
|
|
78
77
|
|
|
79
|
-
<%= javascript_include_tag "responsive-image-tag
|
|
78
|
+
<%= javascript_include_tag "responsive-image-tag" %>
|
|
80
79
|
|
|
81
|
-
|
|
80
|
+
After that, you can use the new tag like so, in a view:
|
|
82
81
|
|
|
83
|
-
<%=
|
|
82
|
+
<%= responsive_image_tag("small.jpg", "big.jpg", :alt => "Alt text", :class => "css-class") %>
|
|
84
83
|
|
|
85
|
-
|
|
84
|
+
This will output HTML like so:
|
|
85
|
+
|
|
86
|
+
<span class="img-placeholder"></span>
|
|
87
|
+
<noscript data-fullsrc="big.jpg" data-mobilesrc="small.jpg" class="responsivize" data-alttext="Alt text" data-cssclass="css-class">
|
|
88
|
+
<img alt="Image reads deliver for today, inspire for tomorrow" class="scale-with-grid" src="big.jpg" />
|
|
89
|
+
</noscript>
|
|
90
|
+
|
|
91
|
+
$(".responsivize").responsiveImageTag();
|
|
86
92
|
|
|
87
|
-
|
|
93
|
+
Optional CSS class for the images, otherwise it will add 'responsive'.
|
|
94
|
+
|
|
95
|
+
$(".responsivize").responsiveImageTag({cssClass: "scale-with-grid"});
|
|
88
96
|
|
|
89
97
|
== Contributing to responsive_image_tag
|
|
90
|
-
|
|
98
|
+
|
|
91
99
|
* Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet
|
|
92
100
|
* Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it
|
|
93
101
|
* Fork the project
|
data/VERSION
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
0.
|
|
1
|
+
0.3.0
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
class ResponsiveImageTagGenerator < Rails::Generator::Base
|
|
2
|
+
|
|
3
|
+
SOURCE = File.join("..", "..", "..", "lib", "responsive_image_tag", "generators", "templates", "responsive-image-tag.js")
|
|
4
|
+
|
|
5
|
+
def manifest
|
|
6
|
+
record do |m|
|
|
7
|
+
m.file SOURCE, "public/javascripts/responsive-image-tag.js"
|
|
8
|
+
end
|
|
9
|
+
end
|
|
10
|
+
|
|
11
|
+
end
|
|
@@ -1,20 +1,18 @@
|
|
|
1
|
-
# encoding: utf-8
|
|
2
|
-
|
|
3
1
|
module ResponsiveImageTag
|
|
4
2
|
module Generators
|
|
5
|
-
class
|
|
3
|
+
class CopyJsGenerator < Rails::Generators::Base
|
|
6
4
|
desc 'Creates a javascript file which takes care of responsive images for you'
|
|
7
5
|
|
|
8
6
|
def self.source_root
|
|
9
7
|
File.expand_path("../templates", __FILE__)
|
|
10
8
|
end
|
|
11
9
|
|
|
12
|
-
def
|
|
13
|
-
template 'responsive-image-tag
|
|
10
|
+
def copy_javascript_file
|
|
11
|
+
template 'responsive-image-tag.js',
|
|
14
12
|
File.join(
|
|
15
|
-
'public', 'javascripts', 'responsive-image-tag
|
|
13
|
+
'public', 'javascripts', 'responsive-image-tag.js')
|
|
16
14
|
end
|
|
17
|
-
|
|
15
|
+
|
|
18
16
|
end
|
|
19
17
|
end
|
|
20
18
|
end
|
|
@@ -3,15 +3,14 @@ module Padrino
|
|
|
3
3
|
##
|
|
4
4
|
# Defines the generator for installing the Jquery Responsive Image Tag script.
|
|
5
5
|
#
|
|
6
|
-
class
|
|
7
|
-
|
|
6
|
+
class CopyRitJs < Thor::Group
|
|
8
7
|
# Add this generator to our padrino-gen
|
|
9
|
-
Padrino::Generators.add_generator(:
|
|
8
|
+
Padrino::Generators.add_generator(:copy_rit_js, self)
|
|
10
9
|
|
|
11
10
|
# Define the source template root and themes.
|
|
12
11
|
def self.source_root; File.expand_path(File.dirname(__FILE__)); end
|
|
13
12
|
# Defines the "banner" text for the CLI.
|
|
14
|
-
def self.banner; "padrino g
|
|
13
|
+
def self.banner; "padrino g copy_rit_js"; end
|
|
15
14
|
|
|
16
15
|
# Include related modules
|
|
17
16
|
include Thor::Actions
|
|
@@ -21,13 +20,11 @@ module Padrino
|
|
|
21
20
|
desc "Description:\n\n\tpadrino g rit - Creates a JavaScript file which takes care of responsive images for you"
|
|
22
21
|
|
|
23
22
|
class_option :js_destination, :aliases => "-d", :desc => "The destination path to copy the Javascript file too", :default => 'public/javascripts', :type => :string
|
|
24
|
-
class_option :js_type, :aliases => "-t", :desc => "The type of Javascript file to use [jquery or prototype]", :default => 'jquery', :type => :string
|
|
25
23
|
|
|
26
|
-
def
|
|
27
|
-
template "templates/responsive-image-tag
|
|
28
|
-
destination_root(options[:js_destination] + "/responsive-image-tag
|
|
24
|
+
def copy_javascript_file
|
|
25
|
+
template "templates/responsive-image-tag.js",
|
|
26
|
+
destination_root(options[:js_destination] + "/responsive-image-tag.js")
|
|
29
27
|
end
|
|
30
|
-
|
|
31
28
|
end
|
|
32
29
|
end
|
|
33
30
|
end
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
(function($) {
|
|
2
|
+
if(!$.responsiveImageTag){
|
|
3
|
+
$.responsiveImageTag = new Object();
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
$.responsiveImageTag = function(el, options) {
|
|
7
|
+
// To avoid scope issues, use 'base' instead of 'this'
|
|
8
|
+
// to reference this class from internal events and functions.
|
|
9
|
+
var base = this;
|
|
10
|
+
|
|
11
|
+
// Access to jQuery and DOM versions of element
|
|
12
|
+
base.$el = $(el);
|
|
13
|
+
base.el = el;
|
|
14
|
+
base.el.data('responsiveImageTag', base);
|
|
15
|
+
base.platform = "desktop";
|
|
16
|
+
base.options = $.extend({}, $.responsiveImageTag.defaultOptions, options);
|
|
17
|
+
|
|
18
|
+
//Public functions
|
|
19
|
+
base.init = function() {
|
|
20
|
+
// Test for available width in current browser window
|
|
21
|
+
// 767px, anything smaller than an ipad is considered mobile
|
|
22
|
+
if(screen.width <= 767){
|
|
23
|
+
base.platform = "mobile";
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
var $img = $("<img/>", {
|
|
27
|
+
"alt": base.$el.attr("data-alttext"),
|
|
28
|
+
"class": base.$el.attr("data-cssclass")
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
if(base.platform === "mobile"){
|
|
32
|
+
$img.attr("src", base.$el.attr("data-mobilesrc"));
|
|
33
|
+
}else{
|
|
34
|
+
$img.attr("src", base.$el.attr("data-fullsrc"));
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
base.$el.prev().append($img);
|
|
38
|
+
base.$el.hide();
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
// Call init function
|
|
42
|
+
base.init();
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
$.responsiveImageTag.defaultOptions = {
|
|
46
|
+
// Currently no options
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
$.fn.responsiveImageTag = function(options) {
|
|
50
|
+
return this.each(function() {
|
|
51
|
+
(new $.responsiveImageTag($(this), options));
|
|
52
|
+
});
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
//Private function
|
|
56
|
+
|
|
57
|
+
})(jQuery);
|
data/lib/responsive_image_tag.rb
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
begin
|
|
2
2
|
require 'padrino-gen'
|
|
3
|
-
|
|
4
|
-
Padrino::Generators.load_paths << Dir[File.dirname(__FILE__) + '/generators/responsive_image_tag/padrino_rit.rb']
|
|
3
|
+
Padrino::Generators.load_paths << Dir[File.dirname(__FILE__) + '/generators/responsive_image_tag/padrino_copy_rit_js.rb']
|
|
5
4
|
rescue LoadError
|
|
6
5
|
# Fail silently
|
|
7
6
|
puts "Error"
|
|
8
7
|
end
|
|
9
8
|
|
|
10
9
|
module ResponsiveImageTag
|
|
11
|
-
|
|
12
10
|
# Emits the special (and somewhat ugly) markup for our responsive image
|
|
13
11
|
# tag.
|
|
14
12
|
#
|
|
@@ -38,7 +36,6 @@ module ResponsiveImageTag
|
|
|
38
36
|
end
|
|
39
37
|
attrs
|
|
40
38
|
end
|
|
41
|
-
|
|
42
39
|
end
|
|
43
40
|
|
|
44
|
-
ActionView::Base.send(:include, ResponsiveImageTag) if defined?(ActionView::Base)
|
|
41
|
+
ActionView::Base.send(:include, ResponsiveImageTag) if defined?(ActionView::Base)
|
|
@@ -5,11 +5,11 @@
|
|
|
5
5
|
|
|
6
6
|
Gem::Specification.new do |s|
|
|
7
7
|
s.name = "responsive_image_tag"
|
|
8
|
-
s.version = "0.
|
|
8
|
+
s.version = "0.3.0"
|
|
9
9
|
|
|
10
10
|
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
|
|
11
11
|
s.authors = ["Dave Hrycyszyn"]
|
|
12
|
-
s.date = "2012-10-
|
|
12
|
+
s.date = "2012-10-03"
|
|
13
13
|
s.description = "Allows you to specify two images in a responsive_image_tag, and includes a javascript generator which will rewrite the DOM, requesting the correct image based on the screen size of the current client device."
|
|
14
14
|
s.email = "dave.hrycyszyn@headlondon.com"
|
|
15
15
|
s.extra_rdoc_files = [
|
|
@@ -24,14 +24,11 @@ Gem::Specification.new do |s|
|
|
|
24
24
|
"README.rdoc",
|
|
25
25
|
"Rakefile",
|
|
26
26
|
"VERSION",
|
|
27
|
-
"generators/responsive_image_tag/
|
|
28
|
-
"generators/responsive_image_tag/prototype_responsive_image_tag_generator.rb",
|
|
27
|
+
"generators/responsive_image_tag/responsive_image_tag_generator.rb",
|
|
29
28
|
"generators/responsive_image_tag/templates/README",
|
|
30
|
-
"lib/generators/responsive_image_tag/
|
|
31
|
-
"lib/generators/responsive_image_tag/
|
|
32
|
-
"lib/generators/responsive_image_tag/
|
|
33
|
-
"lib/generators/responsive_image_tag/templates/responsive-image-tag-jquery.js",
|
|
34
|
-
"lib/generators/responsive_image_tag/templates/responsive-image-tag-prototype.js",
|
|
29
|
+
"lib/generators/responsive_image_tag/copy_js_generator.rb",
|
|
30
|
+
"lib/generators/responsive_image_tag/padrino_copy_rit_js.rb",
|
|
31
|
+
"lib/generators/responsive_image_tag/templates/responsive-image-tag.js",
|
|
35
32
|
"lib/responsive_image_tag.rb",
|
|
36
33
|
"responsive_image_tag.gemspec",
|
|
37
34
|
"test/helper.rb",
|
|
@@ -72,7 +72,6 @@ class TestResponsiveImageTag < MiniTest::Unit::TestCase
|
|
|
72
72
|
assert @noscript.attributes["class"]
|
|
73
73
|
assert @noscript.attributes["class"].value = "responsivize"
|
|
74
74
|
end
|
|
75
|
-
|
|
76
75
|
end
|
|
77
76
|
|
|
78
77
|
describe "with an :alt option specified" do
|
|
@@ -115,4 +114,4 @@ class TestResponsiveImageTag < MiniTest::Unit::TestCase
|
|
|
115
114
|
|
|
116
115
|
end
|
|
117
116
|
end
|
|
118
|
-
end
|
|
117
|
+
end
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: responsive_image_tag
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.3.0
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,11 +9,11 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2012-10-
|
|
12
|
+
date: 2012-10-03 00:00:00.000000000Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: minitest
|
|
16
|
-
requirement: &
|
|
16
|
+
requirement: &2165304520 !ruby/object:Gem::Requirement
|
|
17
17
|
none: false
|
|
18
18
|
requirements:
|
|
19
19
|
- - ! '>='
|
|
@@ -21,10 +21,10 @@ dependencies:
|
|
|
21
21
|
version: '0'
|
|
22
22
|
type: :development
|
|
23
23
|
prerelease: false
|
|
24
|
-
version_requirements: *
|
|
24
|
+
version_requirements: *2165304520
|
|
25
25
|
- !ruby/object:Gem::Dependency
|
|
26
26
|
name: bundler
|
|
27
|
-
requirement: &
|
|
27
|
+
requirement: &2165303700 !ruby/object:Gem::Requirement
|
|
28
28
|
none: false
|
|
29
29
|
requirements:
|
|
30
30
|
- - ~>
|
|
@@ -32,10 +32,10 @@ dependencies:
|
|
|
32
32
|
version: 1.0.0
|
|
33
33
|
type: :development
|
|
34
34
|
prerelease: false
|
|
35
|
-
version_requirements: *
|
|
35
|
+
version_requirements: *2165303700
|
|
36
36
|
- !ruby/object:Gem::Dependency
|
|
37
37
|
name: jeweler
|
|
38
|
-
requirement: &
|
|
38
|
+
requirement: &2165302480 !ruby/object:Gem::Requirement
|
|
39
39
|
none: false
|
|
40
40
|
requirements:
|
|
41
41
|
- - ~>
|
|
@@ -43,10 +43,10 @@ dependencies:
|
|
|
43
43
|
version: 1.6.4
|
|
44
44
|
type: :development
|
|
45
45
|
prerelease: false
|
|
46
|
-
version_requirements: *
|
|
46
|
+
version_requirements: *2165302480
|
|
47
47
|
- !ruby/object:Gem::Dependency
|
|
48
48
|
name: rcov
|
|
49
|
-
requirement: &
|
|
49
|
+
requirement: &2165301480 !ruby/object:Gem::Requirement
|
|
50
50
|
none: false
|
|
51
51
|
requirements:
|
|
52
52
|
- - ! '>='
|
|
@@ -54,10 +54,10 @@ dependencies:
|
|
|
54
54
|
version: '0'
|
|
55
55
|
type: :development
|
|
56
56
|
prerelease: false
|
|
57
|
-
version_requirements: *
|
|
57
|
+
version_requirements: *2165301480
|
|
58
58
|
- !ruby/object:Gem::Dependency
|
|
59
59
|
name: actionpack
|
|
60
|
-
requirement: &
|
|
60
|
+
requirement: &2165300340 !ruby/object:Gem::Requirement
|
|
61
61
|
none: false
|
|
62
62
|
requirements:
|
|
63
63
|
- - ! '>='
|
|
@@ -65,10 +65,10 @@ dependencies:
|
|
|
65
65
|
version: '0'
|
|
66
66
|
type: :development
|
|
67
67
|
prerelease: false
|
|
68
|
-
version_requirements: *
|
|
68
|
+
version_requirements: *2165300340
|
|
69
69
|
- !ruby/object:Gem::Dependency
|
|
70
70
|
name: nokogiri
|
|
71
|
-
requirement: &
|
|
71
|
+
requirement: &2165299280 !ruby/object:Gem::Requirement
|
|
72
72
|
none: false
|
|
73
73
|
requirements:
|
|
74
74
|
- - ! '>='
|
|
@@ -76,7 +76,7 @@ dependencies:
|
|
|
76
76
|
version: '0'
|
|
77
77
|
type: :development
|
|
78
78
|
prerelease: false
|
|
79
|
-
version_requirements: *
|
|
79
|
+
version_requirements: *2165299280
|
|
80
80
|
description: Allows you to specify two images in a responsive_image_tag, and includes
|
|
81
81
|
a javascript generator which will rewrite the DOM, requesting the correct image
|
|
82
82
|
based on the screen size of the current client device.
|
|
@@ -94,14 +94,11 @@ files:
|
|
|
94
94
|
- README.rdoc
|
|
95
95
|
- Rakefile
|
|
96
96
|
- VERSION
|
|
97
|
-
- generators/responsive_image_tag/
|
|
98
|
-
- generators/responsive_image_tag/prototype_responsive_image_tag_generator.rb
|
|
97
|
+
- generators/responsive_image_tag/responsive_image_tag_generator.rb
|
|
99
98
|
- generators/responsive_image_tag/templates/README
|
|
100
|
-
- lib/generators/responsive_image_tag/
|
|
101
|
-
- lib/generators/responsive_image_tag/
|
|
102
|
-
- lib/generators/responsive_image_tag/
|
|
103
|
-
- lib/generators/responsive_image_tag/templates/responsive-image-tag-jquery.js
|
|
104
|
-
- lib/generators/responsive_image_tag/templates/responsive-image-tag-prototype.js
|
|
99
|
+
- lib/generators/responsive_image_tag/copy_js_generator.rb
|
|
100
|
+
- lib/generators/responsive_image_tag/padrino_copy_rit_js.rb
|
|
101
|
+
- lib/generators/responsive_image_tag/templates/responsive-image-tag.js
|
|
105
102
|
- lib/responsive_image_tag.rb
|
|
106
103
|
- responsive_image_tag.gemspec
|
|
107
104
|
- test/helper.rb
|
|
@@ -121,7 +118,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
121
118
|
version: '0'
|
|
122
119
|
segments:
|
|
123
120
|
- 0
|
|
124
|
-
hash:
|
|
121
|
+
hash: -1544391004788800078
|
|
125
122
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
126
123
|
none: false
|
|
127
124
|
requirements:
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
class JqueryResponsiveImageTagGenerator < Rails::Generator::Base
|
|
2
|
-
|
|
3
|
-
SOURCE = File.join("..", "..", "..", "lib", "generators", "responsive_image_tag", "templates", "responsive-image-tag-jquery.js")
|
|
4
|
-
|
|
5
|
-
def manifest
|
|
6
|
-
record do |m|
|
|
7
|
-
m.file SOURCE, "public/javascripts/responsive-image-tag-jquery.js"
|
|
8
|
-
end
|
|
9
|
-
end
|
|
10
|
-
|
|
11
|
-
end
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
class PrototypeResponsiveImageTagGenerator < Rails::Generator::Base
|
|
2
|
-
|
|
3
|
-
SOURCE = File.join("..", "..", "..", "lib", "generators", "responsive_image_tag", "templates", "responsive-image-tag-prototype.js")
|
|
4
|
-
|
|
5
|
-
def manifest
|
|
6
|
-
record do |m|
|
|
7
|
-
m.file SOURCE, "public/javascripts/responsive-image-tag-prototype.js"
|
|
8
|
-
end
|
|
9
|
-
end
|
|
10
|
-
|
|
11
|
-
end
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
# encoding: utf-8
|
|
2
|
-
|
|
3
|
-
module ResponsiveImageTag
|
|
4
|
-
module Generators
|
|
5
|
-
class PrototypeGenerator < Rails::Generators::Base
|
|
6
|
-
desc 'Creates a javascript file which takes care of responsive images for you'
|
|
7
|
-
|
|
8
|
-
def self.source_root
|
|
9
|
-
File.expand_path("../templates", __FILE__)
|
|
10
|
-
end
|
|
11
|
-
|
|
12
|
-
def create_javascript_file
|
|
13
|
-
template 'responsive-image-tag-prototype.js',
|
|
14
|
-
File.join(
|
|
15
|
-
'public', 'javascripts', 'responsive-image-tag-prototype.js')
|
|
16
|
-
end
|
|
17
|
-
|
|
18
|
-
end
|
|
19
|
-
end
|
|
20
|
-
end
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
/*jslint browser:true */
|
|
2
|
-
/*global $, $$*/
|
|
3
|
-
|
|
4
|
-
// responsiveImageTag detects all <noscript> elements on the page with a class
|
|
5
|
-
// of 'responsivize'.
|
|
6
|
-
|
|
7
|
-
// It retrieves both HTML5 data attributes and then creates an image tag with
|
|
8
|
-
// the correct source destination depending on the available screen width of
|
|
9
|
-
// the user's device. This way smaller images are sent to mobile devices or
|
|
10
|
-
// any device smaller than 768px.
|
|
11
|
-
|
|
12
|
-
// The <noscript> tags are then removed from the page.
|
|
13
|
-
var responsiveImageTag = {
|
|
14
|
-
|
|
15
|
-
replaceInitialImages:function() {
|
|
16
|
-
var platform = "desktop";
|
|
17
|
-
var responsiveImages = $(".responsivize");
|
|
18
|
-
var i,
|
|
19
|
-
noOfresponsiveImages = responsiveImages.length;
|
|
20
|
-
|
|
21
|
-
// Test for available width in current browser window
|
|
22
|
-
// 767px, anything smaller than an ipad is considered mobile
|
|
23
|
-
if(screen.width <= 767){
|
|
24
|
-
platform = "mobile";
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
//set initial source element on image
|
|
28
|
-
for(i = 0; i < noOfresponsiveImages; i = i + 1 ){
|
|
29
|
-
var noScriptElem = $(responsiveImages[i]);
|
|
30
|
-
var img = window.document.createElement("img");
|
|
31
|
-
|
|
32
|
-
img.alt = noScriptElem.attr("data-alttext");
|
|
33
|
-
img.className = noScriptElem.attr("data-cssclass");
|
|
34
|
-
|
|
35
|
-
if(platform === "mobile"){
|
|
36
|
-
img.src = noScriptElem.attr("data-mobilesrc");
|
|
37
|
-
}else{
|
|
38
|
-
img.src = noScriptElem.attr("data-fullsrc");
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
noScriptElem.prev().append(img);
|
|
42
|
-
noScriptElem.hide();
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
$(function() {
|
|
48
|
-
responsiveImageTag.replaceInitialImages();
|
|
49
|
-
});
|
|
50
|
-
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
/*jslint browser:true */
|
|
2
|
-
/*global $, $$*/
|
|
3
|
-
|
|
4
|
-
// responsiveImageTag detects all noscript elements on the page with a class
|
|
5
|
-
// of 'responsivize'.
|
|
6
|
-
|
|
7
|
-
// It retrieves both HTML5 data attributes and then creates an image tag with
|
|
8
|
-
// the correct source destination depending on the available screen width of
|
|
9
|
-
// the user'ss device. This way smaller images are sent to mobile devices or
|
|
10
|
-
// any device smaller than 768px.
|
|
11
|
-
|
|
12
|
-
// The <noscript> tags are then removed from the page.
|
|
13
|
-
var responsiveImageTag = {
|
|
14
|
-
|
|
15
|
-
replaceInitialImages:function() {
|
|
16
|
-
var platform = "desktop";
|
|
17
|
-
var responsiveImages = $$(".responsivize");
|
|
18
|
-
var i,
|
|
19
|
-
noOfresponsiveImages = responsiveImages.length;
|
|
20
|
-
|
|
21
|
-
// Test for available width in current browser window
|
|
22
|
-
// 767px, anything smaller than an ipad is considered mobile
|
|
23
|
-
if(screen.width <= 767){
|
|
24
|
-
platform = "mobile";
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
// Set initial source element on image
|
|
28
|
-
for(i = 0; i < noOfresponsiveImages; i = i + 1 ){
|
|
29
|
-
var noScriptElem = responsiveImages[i];
|
|
30
|
-
var img = window.document.createElement("img");
|
|
31
|
-
|
|
32
|
-
img.alt = noScriptElem.getAttribute("data-alttext");
|
|
33
|
-
img.className = noScriptElem.getAttribute("data-cssclass");
|
|
34
|
-
|
|
35
|
-
if(platform === "mobile"){
|
|
36
|
-
img.src = noScriptElem.getAttribute("data-mobilesrc");
|
|
37
|
-
}else{
|
|
38
|
-
img.src = noScriptElem.getAttribute("data-fullsrc");
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
noScriptElem.previous().appendChild(img);
|
|
42
|
-
noScriptElem.style.display = "none";
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
document.observe("dom:loaded", function() {
|
|
48
|
-
responsiveImageTag.replaceInitialImages();
|
|
49
|
-
});
|
|
50
|
-
|