imgix-optimizer 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +3 -0
  3. data/.travis.yml +5 -0
  4. data/Gemfile +4 -0
  5. data/Gemfile.lock +19 -0
  6. data/LICENSE +7 -0
  7. data/README.md +123 -0
  8. data/Rakefile +1 -0
  9. data/dist/imgix-optimizer-0.0.1.min.js +1 -0
  10. data/dist/imgix-optimizer.js +643 -0
  11. data/dist/index.html +65 -0
  12. data/dist/main.css +10 -0
  13. data/imgix-optimizer.gemspec +17 -0
  14. data/lib/imgix-optimizer/rails/engine.rb +6 -0
  15. data/lib/imgix-optimizer/rails.rb +6 -0
  16. data/lib/imgix-optimizer/version.rb +8 -0
  17. data/lib/imgix-optimizer.rb +5 -0
  18. data/package-lock.json +1680 -0
  19. data/package.json +26 -0
  20. data/rollup.config.dev.js +6 -0
  21. data/rollup.config.js +50 -0
  22. data/src/imgix_bg_image.js +291 -0
  23. data/src/imgix_image.js +143 -0
  24. data/src/main.js +9 -0
  25. data/src/optimizer.js +43 -0
  26. data/test/test.js +53 -0
  27. data/vendor/assets/javascripts/.keep +0 -0
  28. data/vendor/assets/javascripts/imgix-optimizer.js +643 -0
  29. metadata +84 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: 2cf0b225f936707a5dee891582fa0326612e57be2b52a93ea62a1f41889dc886
4
+ data.tar.gz: c788a064547ad745c515075892215c2a1e0ef23b9bafc3d808abd27278f1f40b
5
+ SHA512:
6
+ metadata.gz: a69cdd2078232de4b9b2debf52b343f95a23aa011593d2316ced49a3126b910259d1f3139252b023abf8ed2ee7d29147192d73f52cc601a5736b39ddaf0af138
7
+ data.tar.gz: 485e65a87de57ad14e2cae98bfe15eef809046ea4d4189cd1743d4e65a6d80495c06aaac0e012bd6f69a22a8a0f6d4d58c448c472cf4344ddc2d19f6ab43fb61
data/.gitignore ADDED
@@ -0,0 +1,3 @@
1
+ .DS_Store
2
+ node_modules
3
+ pkg
data/.travis.yml ADDED
@@ -0,0 +1,5 @@
1
+ language: node_js
2
+ node_js:
3
+ - '9'
4
+ - '8'
5
+ - '6'
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in imgix-optimizer.gemspec
4
+ gemspec
data/Gemfile.lock ADDED
@@ -0,0 +1,19 @@
1
+ PATH
2
+ remote: .
3
+ specs:
4
+ imgix-optimizer (0.0.1)
5
+
6
+ GEM
7
+ remote: https://rubygems.org/
8
+ specs:
9
+ rake (12.3.1)
10
+
11
+ PLATFORMS
12
+ ruby
13
+
14
+ DEPENDENCIES
15
+ imgix-optimizer!
16
+ rake
17
+
18
+ BUNDLED WITH
19
+ 1.16.2
data/LICENSE ADDED
@@ -0,0 +1,7 @@
1
+ Copyright (c) 2018 [Ample](https://github.com/ample)
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4
+
5
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6
+
7
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,123 @@
1
+ imgix Optimizer
2
+ ==========
3
+
4
+ imgix Optimizer helps you optimize your application's performance by intelligently loading your image assets through [imgix](https://www.imgix.com/).
5
+
6
+ The optimizer's primary responsibility is to take small "placeholder" images you have loaded onto the page and load the appropriately-sized version after the page has been first painted.
7
+
8
+ Requirements
9
+ ----------
10
+
11
+ This JavaScript libary relies on two other libraries:
12
+
13
+ - [jQuery](https://jquery.com/)
14
+ - [imgix.js](https://www.imgix.com/imgix-js)
15
+
16
+ This also assumes your project is already configured to [work with imgix](https://docs.imgix.com/setup).
17
+
18
+ Installation
19
+ ----------
20
+
21
+ Once your requirements are in place, you can install the script as an NPM package or a ruby gem.
22
+
23
+ ### NPM Package
24
+
25
+ Use the `npm` command-line utility to install this package and its dependencies:
26
+
27
+ $ npm i imgix-optimizer --save
28
+
29
+ ### Ruby Gem
30
+
31
+ If working with a Ruby project, add the gem to your Gemfile:
32
+
33
+ ```rb
34
+ gem 'imgix-optimizer'
35
+ ```
36
+
37
+ And then install with Bundler:
38
+
39
+ $ bundle install
40
+
41
+ Usage
42
+ ----------
43
+
44
+ Once your requirements are in place and the package is installed you can load the script on your page. The optimizer script should be loaded _after_ its dependencies.
45
+
46
+ ```html
47
+ <body>
48
+ <!-- ... -->
49
+
50
+ <!-- Dependencies -->
51
+ <script src="jquery.js"></script>
52
+ <script src="imgix.js"></script>
53
+
54
+ <!-- imgix Optimizer -->
55
+ <script src="imgix-optimizer.js"></script>
56
+ </body>
57
+ ```
58
+
59
+ _Note: `src` attribute in the example is just an example -- your source paths and filenames are likely different._
60
+
61
+ Once the scripts are loaded you can initialize the optimizer. This will loop through all images you have designated to be optimized and perform its magic. (See below for designating images.)
62
+
63
+ ```js
64
+ new Imgix.Optimizer();
65
+ ```
66
+
67
+ ### Optimizing Images
68
+
69
+ There are two steps in setting up an image to be optimized:
70
+
71
+ 1. Set the placeholder.
72
+ 2. Add data attribute.
73
+
74
+ These two steps differ depending on whether the image is presented as a background image or inline.
75
+
76
+ #### Placeholder Image
77
+
78
+ One major benefit of imgix is that images can be resized on the fly simply by adding a few parameters. For example, I can take an image with a source of `https://images.unsplash.com/photo-1487222444179-52db5bc15efe` and present a `100px x 100px` cropped version of itself with the `w`, `h`, and `fit` parameters, such that a new source of `https://images.unsplash.com/photo-1487222444179-52db5bc15efe?w=100&h=100&fit=crop` yields this:
79
+
80
+ ![](https://images.unsplash.com/photo-1487222444179-52db5bc15efe?w=100&h=100&fit=crop)
81
+
82
+ Given this flexibility, we can add pixelated placeholder images by loading really small images and stretching them to fill their space. And when we say small, we mean _small_. Your placeholder image does not need to be larger than `20px` unless you have a specific need in which you are looking for more definition in the initial load (although that will slow your page load time down).
83
+
84
+ So, for example, if you'd like to load a square placeholder image using the above source, you might make it `10px x 10px`, like so:
85
+
86
+ ```html
87
+ <img src="https://images.unsplash.com/photo-1487222444179-52db5bc15efe?w=100&h=100&fit=crop" class="my-placeholder">
88
+ ```
89
+
90
+ ```css
91
+ .my-placeholder {
92
+ width: 250px;
93
+ }
94
+ ```
95
+
96
+ **The trick is that your placeholder image should be stretched to the size at which you ultimately want it displayed using CSS.**
97
+
98
+ Here's an example of what that might look like:
99
+
100
+ <img src="https://images.unsplash.com/photo-1487222444179-52db5bc15efe?w=10&h=10&fit=crop" style="width: 250px;">
101
+
102
+ #### Inline Images
103
+
104
+ For inline images, set the source directly as the placeholder image and add the `data-optimize-img` attribute.
105
+
106
+ ```html
107
+ <img src="//images.unsplash.com/photo-1487222444179-52db5bc15efe?w=10&h=10&fit=crop" data-optimize-img>
108
+ ```
109
+
110
+ _Hint: As mentioned, make sure you're setting the width of this image to match that of what the full-size image would be such that it stretches this placeholder and enables a smooth transition._
111
+
112
+ #### Background Images
113
+
114
+ For background images, the placeholder image should be the `background-image` CSS property and the data attribute is `data-optimize-bg-img`.
115
+
116
+ ```html
117
+ <div style="background-image: url('//images.unsplash.com/photo-1487222444179-52db5bc15efe?w=10&h=10&fit=crop')" data-optimize-bg-img></div>
118
+ ```
119
+
120
+ License
121
+ ----------
122
+
123
+ This project is distributed under the [MIT license](LICENSE).
data/Rakefile ADDED
@@ -0,0 +1 @@
1
+ require "bundler/gem_tasks"
data/dist/imgix-optimizer-0.0.1.min.js ADDED
@@ -0,0 +1 @@
1
+ !function(){"use strict";var t=function(e,i){if(!(e instanceof i))throw new TypeError("Cannot call a class as a function")},e=function(){function l(e,i){for(var t=0;t<i.length;t++){var l=i[t];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,l.key,l)}}return function(e,i,t){return i&&l(e.prototype,i),t&&l(e,t),e}}(),l=function(){function i(e){t(this,i),this.timeToFade=500,this.el=$(e),"none"!=this.el.css("background-image")&&(this.initEl(),this.initOptimization(),this.initEventListeners())}return e(i,[{key:"initOptimization",value:function(){var e=this;$("<img>").on("load",function(){return e.renderTmpPlaceholderEl()}).attr("src",this.placeholderImgUrl)}},{key:"initEl",value:function(){this.setPlaceholderImgUrl(),this.setContainerTmpCss(),this.setElTmpCss()}},{key:"setPlaceholderImgUrl",value:function(){this.placeholderImgUrl=this.el.css("background-image").replace("url(","").replace(")","").replace(/\"/gi,"").replace(/\'/gi,"").split(", ")[0]}},{key:"setContainerTmpCss",value:function(){this.el.parent().css("position","relative")}},{key:"setElTmpCss",value:function(){"absolute"!=this.el.css("position")&&this.el.css("position","relative")}},{key:"renderTmpPlaceholderEl",value:function(){this.initTmpPlaceholderEl(),this.setTmpPlaceholderElCss(),this.addTmpPlaceholderElToDom(),this.renderFullSizeImg()}},{key:"initTmpPlaceholderEl",value:function(){this.tmpPlaceholderEl=this.el.clone(),this.tmpPlaceholderEl.html("")}},{key:"setTmpPlaceholderElCss",value:function(){this.tmpPlaceholderEl.css({position:"absolute",top:this.el.position().top,left:this.el.position().left,width:this.el.outerWidth(),height:this.el.outerHeight(),backgroundColor:"transparent"})}},{key:"addTmpPlaceholderElToDom",value:function(){this.tmpPlaceholderEl.insertBefore(this.el)}},{key:"renderFullSizeImg",value:function(){this.removeElBgImg(),this.initTmpFullSizeEl(),this.setTmpFullSizeElImg(),this.addTmpFullSizeElToDom(),this.initTransition()}},{key:"removeElBgImg",value:function(){this.elBgColor=this.el.css("background-color"),this.el.css("background-color","transparent"),this.el.css("background-image","")}},{key:"initTmpFullSizeEl",value:function(){this.tmpFullSizeEl=this.tmpPlaceholderEl.clone()}},{key:"setFullSizeImgUrl",value:function(){var e=this.placeholderImgUrl.split("?"),i=e[e.length-1].split("&"),t={};for(var l in i.map(function(e){return t[e.split("=")[0]]=e.split("=")[1]}),this.el.width()>=this.el.height()?(t.w=this.el.width(),delete t.h):(t.h=this.el.height(),delete t.w),i=[],t)i.push(l+"="+t[l]);return this.fullSizeImgUrl=e[0]+"?"+i.join("&")}},{key:"setTmpFullSizeElImg",value:function(){this.setFullSizeImgUrl(),this.tmpFullSizeEl.css("background-image",'url("'+this.fullSizeImgUrl+'")')}},{key:"addTmpFullSizeElToDom",value:function(){this.tmpFullSizeEl.insertBefore(this.tmpPlaceholderEl)}},{key:"initTransition",value:function(){$("<img>").on("load",$.proxy(this.transitionImg,this)).attr("src",this.fullSizeImgUrl)}},{key:"transitionImg",value:function(){var e=this;this.fadeOutTmpPlaceholderEl(),setTimeout(function(){e.updateElImg(),e.replaceElTmpCss(),e.removeTmpEls()},this.timeToFade)}},{key:"fadeOutTmpPlaceholderEl",value:function(){this.tmpPlaceholderEl.fadeTo(this.timeToFade,0)}},{key:"updateElImg",value:function(){this.setFullSizeImgUrl(),this.el.css("background-image","url('"+this.fullSizeImgUrl+"')")}},{key:"replaceElTmpCss",value:function(){this.el.css("background-color",this.elBgColor)}},{key:"removeTmpEls",value:function(){this.tmpPlaceholderEl.remove(),this.tmpFullSizeEl.remove(),this.tmpPlaceholderEl=void 0,this.tmpFullSizeEl=void 0}},{key:"initEventListeners",value:function(){var i=this;this.initResizeEnd(),$(window).on("resizeEnd",function(e){return i.updateElImg()})}},{key:"initResizeEnd",value:function(){$(window).resize(function(){this.resizeTo&&clearTimeout(this.resizeTo),this.resizeTo=setTimeout(function(){$(this).trigger("resizeEnd")},500)})}}]),i}(),o=function(){function i(e){t(this,i),this.timeToFade=500,this.placeholderImg=$(e),this.initOptimization()}return e(i,[{key:"initOptimization",value:function(){$("<img>").on("load",$.proxy(this.renderFullSizeImg,this)).attr("src",this.placeholderImg.attr("src"))}},{key:"renderFullSizeImg",value:function(){this.initFullSizeImg(),this.setFullSizeImgTempCss(),this.setFullSizeImgSrc(),this.addFullSizeImgToDom(),this.initTransition()}},{key:"initFullSizeImg",value:function(){this.fullSizeImg=this.placeholderImg.clone()}},{key:"setFullSizeImgTempCss",value:function(){this.fullSizeImg.css({position:"absolute",top:this.placeholderImg.position().top,left:this.placeholderImg.position().left,width:this.placeholderImg.width(),height:this.placeholderImg.height()})}},{key:"setFullSizeImgSrc",value:function(){var e=this.placeholderImg.attr("src").replace(/(\?|\&)(w=)(\d+)/i,"$1$2"+this.placeholderImg.width()).replace(/(\?|\&)(h=)(\d+)/i,"$1$2"+this.placeholderImg.height());this.fullSizeImg.attr("ix-src",e),this.fullSizeImg.addClass("img-responsive tmp-img-placeholder"),this.fullSizeImg.removeAttr("data-optimize-img")}},{key:"addFullSizeImgToDom",value:function(){this.fullSizeImg.insertBefore(this.placeholderImg)}},{key:"initTransition",value:function(){var e=this;this.fullSizeImg.on("load",function(){return e.transitionImg()}),imgix.init()}},{key:"transitionImg",value:function(){var e=this;if(!this.placeholderImg)return!0;this.fadeOutPlaceholder(),setTimeout(function(){e.removeFullSizeImgProperties(),e.removeImg()},this.timeToFade)}},{key:"fadeOutPlaceholder",value:function(){this.placeholderImg.fadeTo(this.timeToFade,0)}},{key:"removeFullSizeImgProperties",value:function(){this.fullSizeImg.removeAttr("style"),this.fullSizeImg.removeClass("tmp-img-placeholder")}},{key:"removeImg",value:function(){this.placeholderImg&&(this.placeholderImg.remove(),this.placeholderImg=void 0)}}]),i}(),i=function(){function i(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};t(this,i),this.initOptions(e),this.optimizeImages(),this.optimizeBgImages()}return e(i,[{key:"initOptions",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};this.options=e;var i={parent:"body"};for(var t in i)i.hasOwnProperty(t)&&!this.options[t]&&(this.options[t]=i[t])}},{key:"optimizeImages",value:function(){$(this.options.parent+" img[data-optimize-img]").each(function(e,i){new o(i)})}},{key:"optimizeBgImages",value:function(){return $(this.options.parent+" [data-optimize-bg-img]").each(function(e,i){new l(i)}),!0}}]),i}();window.Imgix=window.Imgix||{},Imgix.ImgixBgImage=l,Imgix.ImgixImage=o,Imgix.Optimizer=i}();