compass-img-delivery 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/img-delivery/functions.rb +58 -85
- metadata +1 -1
@@ -1,31 +1,50 @@
|
|
1
1
|
require "rubygems"
|
2
2
|
require "base64"
|
3
3
|
|
4
|
-
# module Compass::ImgDelivery
|
5
4
|
|
6
|
-
|
7
|
-
# rule = <<-SCSS
|
8
|
-
# .#{basename.downcase} {
|
9
|
-
# background-image: url("data:#{mime_type};base64,#{data_uri}");
|
10
|
-
# background-repeat: no-repeat;
|
11
|
-
# }
|
12
|
-
# SCSS
|
13
|
-
# end
|
5
|
+
module Compass::ImgDelivery
|
14
6
|
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
# SCSS
|
22
|
-
# end
|
7
|
+
def scss_rule(basename, mime_type, data_uri)
|
8
|
+
rule = <<-SCSS
|
9
|
+
.#{basename.downcase} {
|
10
|
+
background-image: url("data:#{mime_type};base64,#{data_uri}");
|
11
|
+
background-repeat: no-repeat;
|
12
|
+
}
|
23
13
|
|
24
|
-
|
14
|
+
SCSS
|
15
|
+
end
|
16
|
+
|
17
|
+
def fallback_scss_rule(basename, img_dir)
|
18
|
+
rule = <<-SCSS
|
19
|
+
.#{basename.downcase} {
|
20
|
+
background-image: url("#{img_dir}/#{basename}.png");
|
21
|
+
background-repeat: no-repeat;
|
22
|
+
}
|
23
|
+
|
24
|
+
SCSS
|
25
|
+
end
|
26
|
+
|
27
|
+
def mkdir_if_not_exists(file)
|
28
|
+
if !File.exists?(file)
|
29
|
+
d = File.dirname(file)
|
30
|
+
Dir.mkdir(d) unless Dir.exists?(d)
|
31
|
+
end
|
32
|
+
end
|
33
|
+
|
34
|
+
def write_file(file, content)
|
35
|
+
File.open(file, 'w') do |f|
|
36
|
+
puts "Writing #{file}"
|
37
|
+
f.write(content)
|
38
|
+
end
|
39
|
+
end
|
40
|
+
|
41
|
+
end
|
25
42
|
|
26
43
|
|
27
44
|
module Sass::Script::Functions
|
28
45
|
|
46
|
+
include Compass::ImgDelivery
|
47
|
+
|
29
48
|
def img_delivery(images_dir = '', css_dir = '', js_dir = '')
|
30
49
|
directory_path = Compass.configuration.images_path + "#{images_dir.value}"
|
31
50
|
svg_scss_content = ""
|
@@ -35,45 +54,27 @@ module Sass::Script::Functions
|
|
35
54
|
Dir["#{directory_path}svg/*.svg"].each do |file|
|
36
55
|
basename = File.basename(file, ".svg")
|
37
56
|
outputfile = directory_path + 'png/' + basename + '.png'
|
38
|
-
svg_data_uri = svg_base64(file)
|
39
57
|
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
background-repeat: no-repeat;
|
44
|
-
}
|
58
|
+
# svg data-uri css rule
|
59
|
+
svg_data_uri = img2b64(file)
|
60
|
+
svg_scss_content << scss_rule(basename, "image/svg+xml", svg_data_uri )
|
45
61
|
|
46
|
-
|
62
|
+
# make png/ dir if not exists
|
63
|
+
mkdir_if_not_exists(outputfile)
|
47
64
|
|
48
|
-
#
|
49
|
-
# svg2png command
|
65
|
+
# create png files with svg2png command
|
50
66
|
cmd = "svg2png #{file} #{outputfile}"
|
51
67
|
puts "Writing #{outputfile}"
|
68
|
+
# exec shell command
|
52
69
|
shell = %x[ #{cmd} ]
|
53
70
|
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
background-image: #{png_data_uri};
|
58
|
-
background-repeat: no-repeat;
|
59
|
-
}
|
60
|
-
|
61
|
-
SCSS
|
71
|
+
# png data-uri css rule
|
72
|
+
png_data_uri = img2b64(outputfile)
|
73
|
+
png_scss_content << scss_rule(basename, "image/png", png_data_uri)
|
62
74
|
|
75
|
+
# png fallback css rule
|
63
76
|
fallback_img_path = "/" + Compass.configuration.images_dir + "#{images_dir.value}png"
|
64
|
-
fallback_scss_content <<
|
65
|
-
.#{basename.downcase} {
|
66
|
-
background-image: url("#{fallback_img_path}/#{basename}.png");
|
67
|
-
background-repeat: no-repeat;
|
68
|
-
}
|
69
|
-
|
70
|
-
SCSS
|
71
|
-
|
72
|
-
|
73
|
-
if !File.exists?(outputfile)
|
74
|
-
d = directory_path + 'png'
|
75
|
-
Dir.mkdir(d) unless Dir.exists?(d)
|
76
|
-
end
|
77
|
+
fallback_scss_content << fallback_scss_rule(basename, fallback_img_path)
|
77
78
|
end
|
78
79
|
|
79
80
|
# create svg.scss file
|
@@ -82,57 +83,29 @@ module Sass::Script::Functions
|
|
82
83
|
png_scss_file = css_path + '-png.css.scss'
|
83
84
|
fallback_scss_file = css_path + '-fallback.css.scss'
|
84
85
|
|
85
|
-
|
86
|
-
d = File.dirname(svg_scss_file)
|
87
|
-
Dir.mkdir(d) unless Dir.exists?(d)
|
88
|
-
end
|
86
|
+
mkdir_if_not_exists(svg_scss_file)
|
89
87
|
|
90
|
-
|
91
|
-
|
92
|
-
f.write(svg_scss_content)
|
93
|
-
end
|
88
|
+
# create svg.scss file
|
89
|
+
write_file(svg_scss_file, svg_scss_content)
|
94
90
|
|
95
91
|
# create png.scss file
|
96
|
-
|
97
|
-
puts "Writing #{png_scss_file}"
|
98
|
-
f.write(png_scss_content)
|
99
|
-
end
|
92
|
+
write_file(png_scss_file, png_scss_content)
|
100
93
|
|
101
94
|
# create fallback.scss file
|
102
|
-
|
103
|
-
puts "Writing #{fallback_scss_file}"
|
104
|
-
f.write(fallback_scss_content)
|
105
|
-
end
|
95
|
+
write_file(fallback_scss_file, fallback_scss_content)
|
106
96
|
|
107
97
|
# create js file
|
108
98
|
js_content = File.open(File.join(File.dirname(__FILE__), "../javascripts/img-delivery.js"), "rb")
|
109
99
|
js_content = js_content.read
|
110
100
|
js_path = Compass.configuration.javascripts_path + "#{js_dir.value}"
|
111
|
-
|
112
101
|
js_file = js_path + '.js'
|
113
|
-
if !File.exists?(js_file)
|
114
|
-
d = File.dirname(js_file)
|
115
|
-
Dir.mkdir(d) unless Dir.exists?(d)
|
116
|
-
end
|
117
|
-
|
118
|
-
File.open(js_file, 'w') do |f|
|
119
|
-
puts "Writing #{js_file}"
|
120
|
-
f.write(js_content)
|
121
|
-
end
|
122
102
|
|
103
|
+
mkdir_if_not_exists(js_file)
|
104
|
+
write_file(js_file, js_content)
|
123
105
|
end
|
124
106
|
|
125
|
-
def
|
126
|
-
|
127
|
-
uri = "data:image/svg+xml;base64,#{data}"
|
128
|
-
|
129
|
-
"url('#{uri}')"
|
107
|
+
def img2b64(file)
|
108
|
+
Base64.encode64(File.read(file)).gsub("\n", '')
|
130
109
|
end
|
131
110
|
|
132
|
-
def png_base64(file)
|
133
|
-
data = Base64.encode64(File.read(file)).gsub("\n", '')
|
134
|
-
uri = "data:image/png;base64,#{data}"
|
135
|
-
|
136
|
-
"url('#{uri}')"
|
137
|
-
end
|
138
111
|
end
|