retinajs-rails 2.1 → 2.1.1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: d7d7b055ab3b02ec01c58e348d388f2d588b8439
4
- data.tar.gz: 712146e59a0f9842d5465237a6a00509b3718151
3
+ metadata.gz: dcda49137b332b9baea53277e92bd5f65101ec9b
4
+ data.tar.gz: 426e5e7b356f3d2dff27c2ad16db33bfd871ced8
5
5
  SHA512:
6
- metadata.gz: 9276307acb3d2290994064a38f9305c5f2b86b844f726c6a124786eaff2280ed6f5243cd104a35b0a9b90be714414047b1df541a45dccb28b8047e02d92363b8
7
- data.tar.gz: 0e3a00adb827256b814320bee9e2c33893084931d066b4b25b5ac9d94aac5cba8a8223fdce707faa2f499c2bfbb363cec3ac066fefd18314f5064f377cac85f1
6
+ metadata.gz: c6e0014315a9f34eabc7c7241e720cd790eab2cf00f749c9d2105c78f067bf5b8018badd9b71703a636faccb4b80a694aadba69ba3ee9318aa213494aa39877a
7
+ data.tar.gz: dc050acf57e523618c5b11a73a0289bdb6f049b889707788b69aa1250c448cc6dbab0f51f994a69f40ac32a943782badeee03eeacf3d3294477d1f653d65f36d
data/README.md CHANGED
@@ -8,7 +8,7 @@ Retina.js is an awesome and simple plugin for rendering retina images for displa
8
8
 
9
9
  Add this line to your application's Gemfile:
10
10
 
11
- gem "retinajs-rails", "~> 2.1"
11
+ gem "retinajs-rails", "~> 2.1.1"
12
12
 
13
13
  And then execute:
14
14
 
@@ -52,21 +52,20 @@ For example:
52
52
 
53
53
  ```scss
54
54
  .logo {
55
- @include at2x('logo', 'png', 200px, 100px);
55
+ @include retina('logo.png');
56
56
  }
57
57
  ```
58
58
 
59
- will compile to:
59
+ will compile to something that resembles:
60
60
 
61
61
  ```scss
62
62
  .logo {
63
- background-image: url('/assets/logo.png');
63
+ background-image: url('logo.png');
64
64
  }
65
65
 
66
66
  @media all and (-webkit-min-device-pixel-ratio: 1.5) {
67
67
  .logo {
68
- background-image: url('/assets/logo@2x.png');
69
- background-size: 200px 100px;
68
+ background-image: url('logo@2x.png');
70
69
  }
71
70
  }
72
71
  ```
@@ -1,253 +1 @@
1
- /*!
2
- * Retina.js v2.1.0
3
- *
4
- * Copyright 2016 Axial, LLC
5
- * Released under the MIT license
6
- *
7
- * Retina.js is an open source script that makes it easy to serve
8
- * high-resolution images to devices with retina displays.
9
- */
10
- 'use strict';
11
-
12
- Object.defineProperty(exports, "__esModule", {
13
- value: true
14
- });
15
- /*
16
- * Determine whether or not `window` is available.
17
- */
18
- var hasWindow = typeof window !== 'undefined';
19
-
20
- /*
21
- * Get the device pixel ratio per our environment.
22
- * Default to 1.
23
- */
24
- var environment = hasWindow ? window.devicePixelRatio || 1 : 1;
25
-
26
- /*
27
- * Define a pattern for capturing src url suffixes.
28
- */
29
- var srcReplace = /(\.[A-z]{3,4}\/?(\?.*)?)$/;
30
- var inlineReplace = /url\(('|")?([^\)'"]+)('|")?\)/i;
31
-
32
- /*
33
- * Define our selectors for elements to target.
34
- */
35
- var selector = '[data-rjs]';
36
-
37
- /*
38
- * Define the attribute we'll use to mark an image as having been processed.
39
- */
40
- var processedAttr = 'data-rjs-processed';
41
-
42
- /**
43
- * Shortcut for turning some iterable object into an array.
44
- *
45
- * @param {Iterable} object Any iterable object.
46
- *
47
- * @return {Array}
48
- */
49
- function arrayify(object) {
50
- return Array.prototype.slice.call(object);
51
- }
52
-
53
- /**
54
- * Chooses the actual image size to fetch, (for example 2 or 3) that
55
- * will be used to create a suffix like "@2x" or "@3x".
56
- *
57
- * @param {String|Number} cap The number the user provided indicating that
58
- * they have prepared images up to this size.
59
- *
60
- * @return {Number} The number we'll be using to create a suffix.
61
- */
62
- function chooseCap(cap) {
63
- var numericCap = parseInt(cap, 10);
64
-
65
- /*
66
- * If the environment's device pixel ratio is less than what the user
67
- * provided, we'll only grab images at that size.
68
- */
69
- if (environment < numericCap) {
70
- return environment;
71
-
72
- /*
73
- * If the device pixel ratio is greater than or equal to what the
74
- * user provided, we'll use what the user provided.
75
- */
76
- } else {
77
- return numericCap;
78
- }
79
- }
80
-
81
- /**
82
- * Makes sure that, since we are going to swap out the source of an image,
83
- * the image does not change size on the page.
84
- *
85
- * @param {Element} image An image element in the DOM.
86
- *
87
- * @return {Element} The same element that was passed in.
88
- */
89
- function forceOriginalDimensions(image) {
90
- if (!image.hasAttribute('data-no-resize')) {
91
- if (image.offsetWidth === 0 && image.offsetHeight === 0) {
92
- image.setAttribute('width', image.naturalWidth);
93
- image.setAttribute('height', image.naturalHeight);
94
- } else {
95
- image.setAttribute('width', image.offsetWidth);
96
- image.setAttribute('height', image.offsetHeight);
97
- }
98
- }
99
- return image;
100
- }
101
-
102
- /**
103
- * Determines whether the retina image actually exists on the server.
104
- * If so, swaps out the retina image for the standard one. If not,
105
- * leaves the original image alone.
106
- *
107
- * @param {Element} image An image element in the DOM.
108
- * @param {String} newSrc The url to the retina image.
109
- *
110
- * @return {undefined}
111
- */
112
- function setSourceIfAvailable(image, retinaURL) {
113
- var imgType = image.nodeName.toLowerCase();
114
-
115
- /*
116
- * Create a new image element and give it a load listener. When the
117
- * load listener fires, it means the URL is correct and we will then
118
- * attach it to the user's image.
119
- */
120
- var testImage = document.createElement('img');
121
- testImage.addEventListener('load', function () {
122
- /*
123
- * If we're dealing with an image tag, force it's dimensions
124
- * and set the source attribute. If not, go after the background-image
125
- * inline style.
126
- */
127
- if (imgType === 'img') {
128
- forceOriginalDimensions(image).setAttribute('src', retinaURL);
129
- } else {
130
- image.style.backgroundImage = 'url(' + retinaURL + ')';
131
- }
132
- });
133
-
134
- /*
135
- * Attach the retina URL to our proxy image to load in the new
136
- * image resource.
137
- */
138
- testImage.setAttribute('src', retinaURL);
139
-
140
- /*
141
- * Mark our image as processed so that it won't be processed again.
142
- */
143
- image.setAttribute(processedAttr, true);
144
- }
145
-
146
- /**
147
- * Attempts to do an image url swap on a given image.
148
- *
149
- * @param {Element} image An image in the DOM.
150
- * @param {String} src The original image source attribute.
151
- * @param {String|Number} rjs The pixel density cap for images provided.
152
- *
153
- * @return {undefined}
154
- */
155
- function dynamicSwapImage(image, src) {
156
- var rjs = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2];
157
-
158
- var cap = chooseCap(rjs);
159
-
160
- /*
161
- * Don't do anything if the cap is less than 2 or there is no src.
162
- */
163
- if (src && cap > 1) {
164
- var newSrc = src.replace(srcReplace, '@' + cap + 'x$1');
165
- setSourceIfAvailable(image, newSrc);
166
- }
167
- }
168
-
169
- /**
170
- * Performs an image url swap on a given image with a provided url.
171
- *
172
- * @param {Element} image An image in the DOM.
173
- * @param {String} src The original image source attribute.
174
- * @param {String} hdsrc The path for a 2x image.
175
- *
176
- * @return {undefined}
177
- */
178
- function manualSwapImage(image, src, hdsrc) {
179
- if (environment > 1) {
180
- setSourceIfAvailable(image, hdsrc);
181
- }
182
- }
183
-
184
- /**
185
- * Collects all images matching our selector, and converts our
186
- * NodeList into an Array so that Array methods will be available to it.
187
- *
188
- * @param {Iterable} images Optional. An Array, jQuery selection, or NodeList
189
- * of elements to affect with retina.js.
190
- *
191
- * @return {Iterable} Contains all elements matching our selector.
192
- */
193
- function getImages(images) {
194
- if (!images) {
195
- return typeof document !== 'undefined' ? arrayify(document.querySelectorAll(selector)) : [];
196
- } else {
197
- return typeof images.forEach === 'function' ? images : arrayify(images);
198
- }
199
- }
200
-
201
- /**
202
- * Converts a string like "url(hello.png)" into "hello.png".
203
- *
204
- * @param {Element} img An HTML element with a background image.
205
- *
206
- * @return {String}
207
- */
208
- function cleanBgImg(img) {
209
- return img.style.backgroundImage.replace(inlineReplace, '$2');
210
- }
211
-
212
- /**
213
- * Gets all participating images and dynamically swaps out each one for its
214
- * retina equivalent taking into account the environment capabilities and
215
- * the densities for which the user has provided images.
216
- *
217
- * @param {Iterable} images Optional. An Array, jQuery selection, or NodeList
218
- * of elements to affect with retina.js. If not
219
- * provided, retina.js will grab all images on the
220
- * page.
221
- *
222
- * @return {undefined}
223
- */
224
- function retina(images) {
225
- getImages(images).forEach(function (img) {
226
- if (!img.getAttribute(processedAttr)) {
227
- var isImg = img.nodeName.toLowerCase() === 'img';
228
- var src = isImg ? img.getAttribute('src') : cleanBgImg(img);
229
- var rjs = img.getAttribute('data-rjs');
230
- var rjsIsNumber = !isNaN(parseInt(rjs, 10));
231
-
232
- /*
233
- * If the user provided a number, dynamically swap out the image.
234
- * If the user provided a url, do it manually.
235
- */
236
- if (rjsIsNumber) {
237
- dynamicSwapImage(img, src, rjs);
238
- } else {
239
- manualSwapImage(img, src, rjs);
240
- }
241
- }
242
- });
243
- }
244
-
245
- /*
246
- * If this environment has `window`, activate the plugin.
247
- */
248
- if (hasWindow) {
249
- window.addEventListener('load', retina);
250
- window.retinajs = retina;
251
- }
252
-
253
- exports.default = retina;
1
+ !function(){function t(t){return Array.prototype.slice.call(t)}function e(t){var e=parseInt(t,10);return e>f?f:e}function r(t){return t.hasAttribute("data-no-resize")||(0===t.offsetWidth&&0===t.offsetHeight?(t.setAttribute("width",t.naturalWidth),t.setAttribute("height",t.naturalHeight)):(t.setAttribute("width",t.offsetWidth),t.setAttribute("height",t.offsetHeight))),t}function n(t,e){var n=t.nodeName.toLowerCase(),i=document.createElement("img");i.addEventListener("load",function(){"img"===n?r(t).setAttribute("src",e):t.style.backgroundImage="url("+e+")"}),i.setAttribute("src",e),t.setAttribute(h,!0)}function i(t,r){var i=arguments.length<=2||void 0===arguments[2]?1:arguments[2],o=e(i);if(r&&o>1){var a=r.replace(c,"@"+o+"x$1");n(t,a)}}function o(t,e,r){f>1&&n(t,r)}function a(e){return e?"function"==typeof e.forEach?e:t(e):"undefined"!=typeof document?t(document.querySelectorAll(g)):[]}function u(t){return t.style.backgroundImage.replace(l,"$2")}function d(t){a(t).forEach(function(t){if(!t.getAttribute(h)){var e="img"===t.nodeName.toLowerCase(),r=e?t.getAttribute("src"):u(t),n=t.getAttribute("data-rjs"),a=!isNaN(parseInt(n,10));a?i(t,r,n):o(t,r,n)}})}"undefined"==typeof exports&&(exports={}),Object.defineProperty(exports,"__esModule",{value:!0});var s="undefined"!=typeof window,f=s?window.devicePixelRatio||1:1,c=/(\.[A-z]{3,4}\/?(\?.*)?)$/,l=/url\(('|")?([^\)'"]+)('|")?\)/i,g="[data-rjs]",h="data-rjs-processed";s&&(window.addEventListener("load",d),window.retinajs=d),exports["default"]=d}();
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |gem|
4
4
  gem.name = 'retinajs-rails'
5
- gem.version = '2.1'
5
+ gem.version = '2.1.1'
6
6
  gem.date = Date.today
7
7
  gem.authors = ["Joshua Jansen"]
8
8
  gem.email = ["joshuajansen88@gmail.com"]
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: retinajs-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: '2.1'
4
+ version: 2.1.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Joshua Jansen
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-07-14 00:00:00.000000000 Z
11
+ date: 2016-09-05 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description: Adds retina.js assets and image helpers to your Rails app
14
14
  email:
@@ -43,7 +43,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
43
43
  version: '0'
44
44
  requirements: []
45
45
  rubyforge_project:
46
- rubygems_version: 2.4.5.1
46
+ rubygems_version: 2.5.1
47
47
  signing_key:
48
48
  specification_version: 4
49
49
  summary: This gem adds the retina.js assets to your asset pipeline and adds helper