alter_form_images 0.0.1
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.
- checksums.yaml +7 -0
- data/lib/alter_form_images/engine.rb +6 -0
- data/lib/alter_form_images/form_builder_methods.rb +31 -0
- data/lib/alter_form_images/version.rb +3 -0
- data/lib/alter_form_images.rb +10 -0
- data/vendor/assets/images/alter_default_image.png +0 -0
- data/vendor/assets/javascripts/alter_form_images.coffee +38 -0
- data/vendor/assets/javascripts/holder.js +404 -0
- data/vendor/assets/javascripts/preimage.js +65 -0
- data/vendor/assets/stylesheets/alter_form_images.scss +14 -0
- metadata +123 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 2ebab974d0bc61c094e650f227bd0851dab66201
|
4
|
+
data.tar.gz: 2311ad38455c6cd624d2a36837a1955901d53f26
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 1c69da6829c0ec391ff74d555d15e4da81d0ce6d6fd08f7d70d60a62c8e2172e4d1ee8d613e2c7c60f70e6172d37a9ab2e3687f7ae74b22c045037e31e1f9735
|
7
|
+
data.tar.gz: 55b4539f7901b0a0ed9e241b147a13e9ecef5e3bca87f2062ca14d13d39368fb16035904217828fb1d52ba718faf72f12a974acac0c648294d0bdf5c2534a437
|
@@ -0,0 +1,31 @@
|
|
1
|
+
module AlterFormImages
|
2
|
+
module FormBuilderMethods
|
3
|
+
|
4
|
+
def image_fields_for(method, options={})
|
5
|
+
options = default_opts_image_fields options
|
6
|
+
@template.content_tag :div, class: 'alter-image-block' do
|
7
|
+
img_image_fields(options) + input_image_fields(options, method)
|
8
|
+
end
|
9
|
+
end
|
10
|
+
|
11
|
+
private
|
12
|
+
|
13
|
+
def img_image_fields(options)
|
14
|
+
@template.image_tag(options[:default_image], class: 'alter-image-preview', style: "width: #{options[:width]}px; height: #{options[:height]}px;")
|
15
|
+
end
|
16
|
+
|
17
|
+
def input_image_fields(options, method)
|
18
|
+
@template.file_field_tag("#{@object_name}[#{method}]", class: 'alter-image-input')
|
19
|
+
end
|
20
|
+
|
21
|
+
def default_opts_image_fields(options)
|
22
|
+
opts = {
|
23
|
+
width: 100,
|
24
|
+
height: 100,
|
25
|
+
default_image: 'alter_default_image.png'
|
26
|
+
}
|
27
|
+
options.merge(opts)
|
28
|
+
end
|
29
|
+
|
30
|
+
end
|
31
|
+
end
|
@@ -0,0 +1,10 @@
|
|
1
|
+
require "alter_form_images/version"
|
2
|
+
require "alter_form_images/engine"
|
3
|
+
|
4
|
+
module AlterFormImages
|
5
|
+
autoload :FormBuilderMethods, 'alter_form_images/form_builder_methods'
|
6
|
+
end
|
7
|
+
|
8
|
+
ActionView::Helpers::FormBuilder.instance_eval do
|
9
|
+
include AlterFormImages::FormBuilderMethods
|
10
|
+
end
|
Binary file
|
@@ -0,0 +1,38 @@
|
|
1
|
+
#= require holder
|
2
|
+
#= require preimage
|
3
|
+
|
4
|
+
(($, window) ->
|
5
|
+
|
6
|
+
# Define the plugin class
|
7
|
+
class AlterFormImages
|
8
|
+
|
9
|
+
defaults:
|
10
|
+
paramA: 'foo'
|
11
|
+
paramB: 'bar'
|
12
|
+
|
13
|
+
constructor: (el, options) ->
|
14
|
+
@options = $.extend({}, @defaults, options)
|
15
|
+
@$el = $(el)
|
16
|
+
@$el.find(".alter-image-input").preimage()
|
17
|
+
$("img", @$el).click (e) ->
|
18
|
+
# e.stopPropagation()
|
19
|
+
e.stopImmediatePropagation()
|
20
|
+
$(@).parents(".alter-image-block").find('.alter-image-input').trigger('click')
|
21
|
+
return false
|
22
|
+
|
23
|
+
# Define the plugin
|
24
|
+
$.fn.extend AlterFormImages: (option, args...) ->
|
25
|
+
@each ->
|
26
|
+
$this = $(this)
|
27
|
+
data = $this.data('AlterFormImages')
|
28
|
+
|
29
|
+
if !data
|
30
|
+
$this.data 'AlterFormImages', (data = new AlterFormImages(this, option))
|
31
|
+
if typeof option == 'string'
|
32
|
+
data[option].apply(data, args)
|
33
|
+
|
34
|
+
) window.jQuery, window
|
35
|
+
|
36
|
+
$ ->
|
37
|
+
$(".alter-image-block").AlterFormImages()
|
38
|
+
return
|
@@ -0,0 +1,404 @@
|
|
1
|
+
/*
|
2
|
+
|
3
|
+
Holder - 2.1 - client side image placeholders
|
4
|
+
(c) 2012-2013 Ivan Malopinsky / http://imsky.co
|
5
|
+
|
6
|
+
Provided under the MIT License.
|
7
|
+
Commercial use requires attribution.
|
8
|
+
|
9
|
+
*/
|
10
|
+
|
11
|
+
var Holder = Holder || {};
|
12
|
+
(function (app, win) {
|
13
|
+
|
14
|
+
var preempted = false,
|
15
|
+
fallback = false,
|
16
|
+
canvas = document.createElement('canvas');
|
17
|
+
|
18
|
+
if (!canvas.getContext) {
|
19
|
+
fallback = true;
|
20
|
+
} else {
|
21
|
+
if (canvas.toDataURL("image/png")
|
22
|
+
.indexOf("data:image/png") < 0) {
|
23
|
+
//Android doesn't support data URI
|
24
|
+
fallback = true;
|
25
|
+
} else {
|
26
|
+
var ctx = canvas.getContext("2d");
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
var dpr = 1, bsr = 1;
|
31
|
+
|
32
|
+
if(!fallback){
|
33
|
+
dpr = window.devicePixelRatio || 1,
|
34
|
+
bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
|
35
|
+
}
|
36
|
+
|
37
|
+
var ratio = dpr / bsr;
|
38
|
+
|
39
|
+
//getElementsByClassName polyfill
|
40
|
+
document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s})
|
41
|
+
|
42
|
+
//getComputedStyle polyfill
|
43
|
+
window.getComputedStyle||(window.getComputedStyle=function(e){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this})
|
44
|
+
|
45
|
+
//http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
|
46
|
+
function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}}
|
47
|
+
|
48
|
+
//https://gist.github.com/991057 by Jed Schmidt with modifications
|
49
|
+
function selector(a){
|
50
|
+
a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);
|
51
|
+
var ret=[]; b!==null&&(b.length?ret=b:b.length===0?ret=b:ret=[b]); return ret;
|
52
|
+
}
|
53
|
+
|
54
|
+
//shallow object property extend
|
55
|
+
function extend(a,b){var c={};for(var d in a)c[d]=a[d];for(var e in b)c[e]=b[e];return c}
|
56
|
+
|
57
|
+
//hasOwnProperty polyfill
|
58
|
+
if (!Object.prototype.hasOwnProperty)
|
59
|
+
/*jshint -W001, -W103 */
|
60
|
+
Object.prototype.hasOwnProperty = function(prop) {
|
61
|
+
var proto = this.__proto__ || this.constructor.prototype;
|
62
|
+
return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
|
63
|
+
}
|
64
|
+
/*jshint +W001, +W103 */
|
65
|
+
|
66
|
+
function text_size(width, height, template) {
|
67
|
+
height = parseInt(height, 10);
|
68
|
+
width = parseInt(width, 10);
|
69
|
+
var bigSide = Math.max(height, width)
|
70
|
+
var smallSide = Math.min(height, width)
|
71
|
+
var scale = 1 / 12;
|
72
|
+
var newHeight = Math.min(smallSide * 0.75, 0.75 * bigSide * scale);
|
73
|
+
return {
|
74
|
+
height: Math.round(Math.max(template.size, newHeight))
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
function draw(ctx, dimensions, template, ratio, literal) {
|
79
|
+
var ts = text_size(dimensions.width, dimensions.height, template);
|
80
|
+
var text_height = ts.height;
|
81
|
+
var width = dimensions.width * ratio,
|
82
|
+
height = dimensions.height * ratio;
|
83
|
+
var font = template.font ? template.font : "sans-serif";
|
84
|
+
canvas.width = width;
|
85
|
+
canvas.height = height;
|
86
|
+
ctx.textAlign = "center";
|
87
|
+
ctx.textBaseline = "middle";
|
88
|
+
ctx.fillStyle = template.background;
|
89
|
+
ctx.fillRect(0, 0, width, height);
|
90
|
+
ctx.fillStyle = template.foreground;
|
91
|
+
ctx.font = "bold " + text_height + "px " + font;
|
92
|
+
var text = template.text ? template.text : (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
|
93
|
+
if (literal) {
|
94
|
+
text = template.literalText;
|
95
|
+
}
|
96
|
+
var text_width = ctx.measureText(text).width;
|
97
|
+
if (text_width / width >= 0.75) {
|
98
|
+
text_height = Math.floor(text_height * 0.75 * (width / text_width));
|
99
|
+
}
|
100
|
+
//Resetting font size if necessary
|
101
|
+
ctx.font = "bold " + (text_height * ratio) + "px " + font;
|
102
|
+
ctx.fillText(text, (width / 2), (height / 2), width);
|
103
|
+
return canvas.toDataURL("image/png");
|
104
|
+
}
|
105
|
+
|
106
|
+
function render(mode, el, holder, src) {
|
107
|
+
var dimensions = holder.dimensions,
|
108
|
+
theme = holder.theme,
|
109
|
+
text = holder.text ? decodeURIComponent(holder.text) : holder.text;
|
110
|
+
var dimensions_caption = dimensions.width + "x" + dimensions.height;
|
111
|
+
theme = (text ? extend(theme, {
|
112
|
+
text: text
|
113
|
+
}) : theme);
|
114
|
+
theme = (holder.font ? extend(theme, {
|
115
|
+
font: holder.font
|
116
|
+
}) : theme);
|
117
|
+
el.setAttribute("data-src", src);
|
118
|
+
theme.literalText = dimensions_caption;
|
119
|
+
holder.originalTheme = holder.theme;
|
120
|
+
holder.theme = theme;
|
121
|
+
|
122
|
+
if (mode == "image") {
|
123
|
+
el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
|
124
|
+
if (fallback || !holder.auto) {
|
125
|
+
el.style.width = dimensions.width + "px";
|
126
|
+
el.style.height = dimensions.height + "px";
|
127
|
+
}
|
128
|
+
if (fallback) {
|
129
|
+
el.style.backgroundColor = theme.background;
|
130
|
+
} else {
|
131
|
+
el.setAttribute("src", draw(ctx, dimensions, theme, ratio));
|
132
|
+
}
|
133
|
+
} else if (mode == "background") {
|
134
|
+
if (!fallback) {
|
135
|
+
el.style.backgroundImage = "url(" + draw(ctx, dimensions, theme, ratio) + ")";
|
136
|
+
el.style.backgroundSize = dimensions.width + "px " + dimensions.height + "px";
|
137
|
+
}
|
138
|
+
} else if (mode == "fluid") {
|
139
|
+
el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
|
140
|
+
if (dimensions.height.slice(-1) == "%") {
|
141
|
+
el.style.height = dimensions.height
|
142
|
+
} else {
|
143
|
+
el.style.height = dimensions.height + "px"
|
144
|
+
}
|
145
|
+
if (dimensions.width.slice(-1) == "%") {
|
146
|
+
el.style.width = dimensions.width
|
147
|
+
} else {
|
148
|
+
el.style.width = dimensions.width + "px"
|
149
|
+
}
|
150
|
+
if (el.style.display == "inline" || el.style.display === "") {
|
151
|
+
el.style.display = "block";
|
152
|
+
}
|
153
|
+
if (fallback) {
|
154
|
+
el.style.backgroundColor = theme.background;
|
155
|
+
} else {
|
156
|
+
el.holderData = holder;
|
157
|
+
fluid_images.push(el);
|
158
|
+
fluid_update(el);
|
159
|
+
}
|
160
|
+
}
|
161
|
+
}
|
162
|
+
|
163
|
+
function fluid_update(element) {
|
164
|
+
var images;
|
165
|
+
if (element.nodeType == null) {
|
166
|
+
images = fluid_images;
|
167
|
+
} else {
|
168
|
+
images = [element]
|
169
|
+
}
|
170
|
+
for (var i in images) {
|
171
|
+
var el = images[i]
|
172
|
+
if (el.holderData) {
|
173
|
+
var holder = el.holderData;
|
174
|
+
el.setAttribute("src", draw(ctx, {
|
175
|
+
height: el.clientHeight,
|
176
|
+
width: el.clientWidth
|
177
|
+
}, holder.theme, ratio, !! holder.literal));
|
178
|
+
}
|
179
|
+
}
|
180
|
+
}
|
181
|
+
|
182
|
+
function parse_flags(flags, options) {
|
183
|
+
var ret = {
|
184
|
+
theme: settings.themes.gray
|
185
|
+
};
|
186
|
+
var render = false;
|
187
|
+
for (sl = flags.length, j = 0; j < sl; j++) {
|
188
|
+
var flag = flags[j];
|
189
|
+
if (app.flags.dimensions.match(flag)) {
|
190
|
+
render = true;
|
191
|
+
ret.dimensions = app.flags.dimensions.output(flag);
|
192
|
+
} else if (app.flags.fluid.match(flag)) {
|
193
|
+
render = true;
|
194
|
+
ret.dimensions = app.flags.fluid.output(flag);
|
195
|
+
ret.fluid = true;
|
196
|
+
} else if (app.flags.literal.match(flag)) {
|
197
|
+
ret.literal = true;
|
198
|
+
} else if (app.flags.colors.match(flag)) {
|
199
|
+
ret.theme = app.flags.colors.output(flag);
|
200
|
+
} else if (options.themes[flag]) {
|
201
|
+
//If a theme is specified, it will override custom colors
|
202
|
+
ret.theme = options.themes[flag];
|
203
|
+
} else if (app.flags.font.match(flag)) {
|
204
|
+
ret.font = app.flags.font.output(flag);
|
205
|
+
} else if (app.flags.auto.match(flag)) {
|
206
|
+
ret.auto = true;
|
207
|
+
} else if (app.flags.text.match(flag)) {
|
208
|
+
ret.text = app.flags.text.output(flag);
|
209
|
+
}
|
210
|
+
}
|
211
|
+
return render ? ret : false;
|
212
|
+
}
|
213
|
+
var fluid_images = [];
|
214
|
+
var settings = {
|
215
|
+
domain: "holder.js",
|
216
|
+
images: "img",
|
217
|
+
bgnodes: ".holderjs",
|
218
|
+
themes: {
|
219
|
+
"gray": {
|
220
|
+
background: "#eee",
|
221
|
+
foreground: "#aaa",
|
222
|
+
size: 12
|
223
|
+
},
|
224
|
+
"social": {
|
225
|
+
background: "#3a5a97",
|
226
|
+
foreground: "#fff",
|
227
|
+
size: 12
|
228
|
+
},
|
229
|
+
"industrial": {
|
230
|
+
background: "#434A52",
|
231
|
+
foreground: "#C2F200",
|
232
|
+
size: 12
|
233
|
+
}
|
234
|
+
},
|
235
|
+
stylesheet: ""
|
236
|
+
};
|
237
|
+
app.flags = {
|
238
|
+
dimensions: {
|
239
|
+
regex: /^(\d+)x(\d+)$/,
|
240
|
+
output: function (val) {
|
241
|
+
var exec = this.regex.exec(val);
|
242
|
+
return {
|
243
|
+
width: +exec[1],
|
244
|
+
height: +exec[2]
|
245
|
+
}
|
246
|
+
}
|
247
|
+
},
|
248
|
+
fluid: {
|
249
|
+
regex: /^([0-9%]+)x([0-9%]+)$/,
|
250
|
+
output: function (val) {
|
251
|
+
var exec = this.regex.exec(val);
|
252
|
+
return {
|
253
|
+
width: exec[1],
|
254
|
+
height: exec[2]
|
255
|
+
}
|
256
|
+
}
|
257
|
+
},
|
258
|
+
colors: {
|
259
|
+
regex: /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i,
|
260
|
+
output: function (val) {
|
261
|
+
var exec = this.regex.exec(val);
|
262
|
+
return {
|
263
|
+
size: settings.themes.gray.size,
|
264
|
+
foreground: "#" + exec[2],
|
265
|
+
background: "#" + exec[1]
|
266
|
+
}
|
267
|
+
}
|
268
|
+
},
|
269
|
+
text: {
|
270
|
+
regex: /text\:(.*)/,
|
271
|
+
output: function (val) {
|
272
|
+
return this.regex.exec(val)[1];
|
273
|
+
}
|
274
|
+
},
|
275
|
+
font: {
|
276
|
+
regex: /font\:(.*)/,
|
277
|
+
output: function (val) {
|
278
|
+
return this.regex.exec(val)[1];
|
279
|
+
}
|
280
|
+
},
|
281
|
+
auto: {
|
282
|
+
regex: /^auto$/
|
283
|
+
},
|
284
|
+
literal: {
|
285
|
+
regex: /^literal$/
|
286
|
+
}
|
287
|
+
}
|
288
|
+
for (var flag in app.flags) {
|
289
|
+
if (!app.flags.hasOwnProperty(flag)) continue;
|
290
|
+
app.flags[flag].match = function (val) {
|
291
|
+
return val.match(this.regex)
|
292
|
+
}
|
293
|
+
}
|
294
|
+
app.add_theme = function (name, theme) {
|
295
|
+
name != null && theme != null && (settings.themes[name] = theme);
|
296
|
+
return app;
|
297
|
+
};
|
298
|
+
app.add_image = function (src, el) {
|
299
|
+
var node = selector(el);
|
300
|
+
if (node.length) {
|
301
|
+
for (var i = 0, l = node.length; i < l; i++) {
|
302
|
+
var img = document.createElement("img")
|
303
|
+
img.setAttribute("data-src", src);
|
304
|
+
node[i].appendChild(img);
|
305
|
+
}
|
306
|
+
}
|
307
|
+
return app;
|
308
|
+
};
|
309
|
+
app.run = function (o) {
|
310
|
+
var options = extend(settings, o),
|
311
|
+
images = [],
|
312
|
+
imageNodes = [],
|
313
|
+
bgnodes = [];
|
314
|
+
if (typeof (options.images) == "string") {
|
315
|
+
imageNodes = selector(options.images);
|
316
|
+
} else if (window.NodeList && options.images instanceof window.NodeList) {
|
317
|
+
imageNodes = options.images;
|
318
|
+
} else if (window.Node && options.images instanceof window.Node) {
|
319
|
+
imageNodes = [options.images];
|
320
|
+
}
|
321
|
+
if (typeof (options.bgnodes) == "string") {
|
322
|
+
bgnodes = selector(options.bgnodes);
|
323
|
+
} else if (window.NodeList && options.elements instanceof window.NodeList) {
|
324
|
+
bgnodes = options.bgnodes;
|
325
|
+
} else if (window.Node && options.bgnodes instanceof window.Node) {
|
326
|
+
bgnodes = [options.bgnodes];
|
327
|
+
}
|
328
|
+
preempted = true;
|
329
|
+
for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]);
|
330
|
+
var holdercss = document.getElementById("holderjs-style");
|
331
|
+
if (!holdercss) {
|
332
|
+
holdercss = document.createElement("style");
|
333
|
+
holdercss.setAttribute("id", "holderjs-style");
|
334
|
+
holdercss.type = "text/css";
|
335
|
+
document.getElementsByTagName("head")[0].appendChild(holdercss);
|
336
|
+
}
|
337
|
+
if (!options.nocss) {
|
338
|
+
if (holdercss.styleSheet) {
|
339
|
+
holdercss.styleSheet.cssText += options.stylesheet;
|
340
|
+
} else {
|
341
|
+
holdercss.appendChild(document.createTextNode(options.stylesheet));
|
342
|
+
}
|
343
|
+
}
|
344
|
+
var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)");
|
345
|
+
for (var l = bgnodes.length, i = 0; i < l; i++) {
|
346
|
+
var src = window.getComputedStyle(bgnodes[i], null)
|
347
|
+
.getPropertyValue("background-image");
|
348
|
+
var flags = src.match(cssregex);
|
349
|
+
var bgsrc = bgnodes[i].getAttribute("data-background-src");
|
350
|
+
if (flags) {
|
351
|
+
var holder = parse_flags(flags[1].split("/"), options);
|
352
|
+
if (holder) {
|
353
|
+
render("background", bgnodes[i], holder, src);
|
354
|
+
}
|
355
|
+
} else if (bgsrc != null) {
|
356
|
+
var holder = parse_flags(bgsrc.substr(bgsrc.lastIndexOf(options.domain) + options.domain.length + 1)
|
357
|
+
.split("/"), options);
|
358
|
+
if (holder) {
|
359
|
+
render("background", bgnodes[i], holder, src);
|
360
|
+
}
|
361
|
+
}
|
362
|
+
}
|
363
|
+
for (l = images.length, i = 0; i < l; i++) {
|
364
|
+
var attr_data_src, attr_src;
|
365
|
+
attr_src = attr_data_src = src = null;
|
366
|
+
try {
|
367
|
+
attr_src = images[i].getAttribute("src");
|
368
|
+
attr_datasrc = images[i].getAttribute("data-src");
|
369
|
+
} catch (e) {}
|
370
|
+
if (attr_datasrc == null && !! attr_src && attr_src.indexOf(options.domain) >= 0) {
|
371
|
+
src = attr_src;
|
372
|
+
} else if ( !! attr_datasrc && attr_datasrc.indexOf(options.domain) >= 0) {
|
373
|
+
src = attr_datasrc;
|
374
|
+
}
|
375
|
+
if (src) {
|
376
|
+
var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1)
|
377
|
+
.split("/"), options);
|
378
|
+
if (holder) {
|
379
|
+
if (holder.fluid) {
|
380
|
+
render("fluid", images[i], holder, src)
|
381
|
+
} else {
|
382
|
+
render("image", images[i], holder, src);
|
383
|
+
}
|
384
|
+
}
|
385
|
+
}
|
386
|
+
}
|
387
|
+
return app;
|
388
|
+
};
|
389
|
+
contentLoaded(win, function () {
|
390
|
+
if (window.addEventListener) {
|
391
|
+
window.addEventListener("resize", fluid_update, false);
|
392
|
+
window.addEventListener("orientationchange", fluid_update, false);
|
393
|
+
} else {
|
394
|
+
window.attachEvent("onresize", fluid_update)
|
395
|
+
}
|
396
|
+
preempted || app.run();
|
397
|
+
});
|
398
|
+
if (typeof define === "function" && define.amd) {
|
399
|
+
define([], function () {
|
400
|
+
return app;
|
401
|
+
});
|
402
|
+
}
|
403
|
+
|
404
|
+
})(Holder, window);
|
@@ -0,0 +1,65 @@
|
|
1
|
+
(function( $ ){
|
2
|
+
var settings = {
|
3
|
+
'scale': 'contain', // cover
|
4
|
+
'prefix': 'prev_',
|
5
|
+
'types': ['image/gif', 'image/png', 'image/jpeg'],
|
6
|
+
'mime': {'jpe': 'image/jpeg', 'jpeg': 'image/jpeg', 'jpg': 'image/jpeg', 'gif': 'image/gif', 'png': 'image/png', 'x-png': 'image/png', 'tif': 'image/tiff', 'tiff': 'image/tiff'}
|
7
|
+
};
|
8
|
+
|
9
|
+
var methods = {
|
10
|
+
init : function( options ) {
|
11
|
+
settings = $.extend(settings, options);
|
12
|
+
return this.each(function() {
|
13
|
+
$(this).bind('change', methods.change);
|
14
|
+
});
|
15
|
+
},
|
16
|
+
|
17
|
+
destroy : function( ) {
|
18
|
+
return this.each(function() { $(this).unbind('change') })
|
19
|
+
},
|
20
|
+
|
21
|
+
change : function(event) {
|
22
|
+
|
23
|
+
var imageContainer = $(this).parents('.alter-image-block').find('.alter-image-preview');
|
24
|
+
var fileNameContainer = $(this).parents('.alter-image-block').find('.file-name');
|
25
|
+
|
26
|
+
|
27
|
+
if ($(this).parent().attr('class') == 'field_with_errors') {
|
28
|
+
$(this).parent().replaceWith($(this));
|
29
|
+
}
|
30
|
+
|
31
|
+
if(window.FileReader){
|
32
|
+
for(i=0; i<this.files.length; i++) {
|
33
|
+
if(!$.inArray(this.files[i].type, settings['types']) == -1) {
|
34
|
+
window.alert("File of not allowed type");
|
35
|
+
return false;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
for(i=0; i<this.files.length; i++){
|
40
|
+
var fileName = this.files[i].name;
|
41
|
+
var reader = new FileReader();
|
42
|
+
reader.onload = function (e) {
|
43
|
+
imageContainer.attr('src', e.target.result);
|
44
|
+
|
45
|
+
if(fileNameContainer) fileNameContainer.html(fileName);
|
46
|
+
};
|
47
|
+
reader.readAsDataURL(this.files[i]);
|
48
|
+
}
|
49
|
+
}
|
50
|
+
}
|
51
|
+
};
|
52
|
+
|
53
|
+
$.fn.preimage = function( method ) {
|
54
|
+
if ( methods[method] ) {
|
55
|
+
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
56
|
+
} else if ( typeof method === 'object' || ! method ) {
|
57
|
+
return methods.init.apply( this, arguments );
|
58
|
+
} else {
|
59
|
+
$.error( 'Method ' + method + ' does not exist on jQuery.preimage' );
|
60
|
+
}
|
61
|
+
|
62
|
+
};
|
63
|
+
|
64
|
+
})( jQuery );
|
65
|
+
|
metadata
ADDED
@@ -0,0 +1,123 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: alter_form_images
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- sergio1990
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2013-12-01 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: jquery-rails
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - '>='
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '0'
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - '>='
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '0'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: coffee-rails
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - '>='
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '0'
|
34
|
+
type: :runtime
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - '>='
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '0'
|
41
|
+
- !ruby/object:Gem::Dependency
|
42
|
+
name: sass-rails
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
44
|
+
requirements:
|
45
|
+
- - '>='
|
46
|
+
- !ruby/object:Gem::Version
|
47
|
+
version: '0'
|
48
|
+
type: :runtime
|
49
|
+
prerelease: false
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
51
|
+
requirements:
|
52
|
+
- - '>='
|
53
|
+
- !ruby/object:Gem::Version
|
54
|
+
version: '0'
|
55
|
+
- !ruby/object:Gem::Dependency
|
56
|
+
name: bundler
|
57
|
+
requirement: !ruby/object:Gem::Requirement
|
58
|
+
requirements:
|
59
|
+
- - ~>
|
60
|
+
- !ruby/object:Gem::Version
|
61
|
+
version: '1.3'
|
62
|
+
type: :development
|
63
|
+
prerelease: false
|
64
|
+
version_requirements: !ruby/object:Gem::Requirement
|
65
|
+
requirements:
|
66
|
+
- - ~>
|
67
|
+
- !ruby/object:Gem::Version
|
68
|
+
version: '1.3'
|
69
|
+
- !ruby/object:Gem::Dependency
|
70
|
+
name: rake
|
71
|
+
requirement: !ruby/object:Gem::Requirement
|
72
|
+
requirements:
|
73
|
+
- - '>='
|
74
|
+
- !ruby/object:Gem::Version
|
75
|
+
version: '0'
|
76
|
+
type: :development
|
77
|
+
prerelease: false
|
78
|
+
version_requirements: !ruby/object:Gem::Requirement
|
79
|
+
requirements:
|
80
|
+
- - '>='
|
81
|
+
- !ruby/object:Gem::Version
|
82
|
+
version: '0'
|
83
|
+
description: More perfect decision for loading image in form with preview
|
84
|
+
email:
|
85
|
+
- sergeg1990@gmail.com
|
86
|
+
executables: []
|
87
|
+
extensions: []
|
88
|
+
extra_rdoc_files: []
|
89
|
+
files:
|
90
|
+
- lib/alter_form_images/engine.rb
|
91
|
+
- lib/alter_form_images/form_builder_methods.rb
|
92
|
+
- lib/alter_form_images/version.rb
|
93
|
+
- lib/alter_form_images.rb
|
94
|
+
- vendor/assets/images/alter_default_image.png
|
95
|
+
- vendor/assets/javascripts/alter_form_images.coffee
|
96
|
+
- vendor/assets/javascripts/holder.js
|
97
|
+
- vendor/assets/javascripts/preimage.js
|
98
|
+
- vendor/assets/stylesheets/alter_form_images.scss
|
99
|
+
homepage: https://github.com/sergio1990/alter_form_images
|
100
|
+
licenses:
|
101
|
+
- MIT
|
102
|
+
metadata: {}
|
103
|
+
post_install_message:
|
104
|
+
rdoc_options: []
|
105
|
+
require_paths:
|
106
|
+
- lib
|
107
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
108
|
+
requirements:
|
109
|
+
- - '>='
|
110
|
+
- !ruby/object:Gem::Version
|
111
|
+
version: '0'
|
112
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
113
|
+
requirements:
|
114
|
+
- - '>='
|
115
|
+
- !ruby/object:Gem::Version
|
116
|
+
version: '0'
|
117
|
+
requirements: []
|
118
|
+
rubyforge_project:
|
119
|
+
rubygems_version: 2.0.6
|
120
|
+
signing_key:
|
121
|
+
specification_version: 4
|
122
|
+
summary: More perfect decision for loading image in form with preview
|
123
|
+
test_files: []
|