middleman-async-image 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +5 -0
- data/Gemfile +18 -0
- data/LICENSE +21 -0
- data/README.md +41 -0
- data/Rakefile +14 -0
- data/TODO.md +2 -0
- data/features/support/env.rb +4 -0
- data/lib/middleman-async-image.rb +6 -0
- data/lib/middleman-async-image/extension.rb +56 -0
- data/middleman-async-image.gemspec +25 -0
- data/vendor/assets/javascripts/async-image.js +30 -0
- data/vendor/assets/stylesheets/async-image.css +46 -0
- metadata +83 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: b79a5d5c6b42ad27c77b3ff63f5f3432e37e0fde
|
4
|
+
data.tar.gz: e5539a9e1455be03aa3cf3e9ef0fe86bc7150a65
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: d241d8f39f5c368b1c57656ff57f043f5d2e135d62d8ce36726dc3478f7a03b7e46744ff9a7ab82dc2faf73500282a0e5483e744b5df1c8ba8de97fd8ac77e5a
|
7
|
+
data.tar.gz: e583f8da7d4174173b9c947960a8bf66d9111d7fd58dadaaf3a9a331774689cd128d4ecb0a4e74dcc90c80c9de1f98f4f96e2f8515da678e37a621edac76c538
|
data/.gitignore
ADDED
data/Gemfile
ADDED
@@ -0,0 +1,18 @@
|
|
1
|
+
# If you do not have OpenSSL installed, update
|
2
|
+
# the following line to use "http://" instead
|
3
|
+
source 'https://rubygems.org'
|
4
|
+
|
5
|
+
# Specify your gem's dependencies in middleman-async-image.gemspec
|
6
|
+
gemspec
|
7
|
+
|
8
|
+
group :development do
|
9
|
+
gem 'rake'
|
10
|
+
gem 'rdoc'
|
11
|
+
gem 'yard'
|
12
|
+
end
|
13
|
+
|
14
|
+
group :test do
|
15
|
+
gem 'cucumber'
|
16
|
+
gem 'aruba'
|
17
|
+
gem 'rspec'
|
18
|
+
end
|
data/LICENSE
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
MIT License
|
2
|
+
|
3
|
+
Copyright (c) 2017 Bastien ROBERT
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,41 @@
|
|
1
|
+
# Middleman Async Image
|
2
|
+
Load your images asynchronously with Middleman : like Medium.
|
3
|
+
|
4
|
+
## Why?
|
5
|
+
Because loading images on poor connections is really ugly. Medium as a great image loader so I develop a Gem to make it same as Middleman.
|
6
|
+
|
7
|
+
## Configuration
|
8
|
+
You can set the image-dir of your choice (follow the Middleman assets directories configuration).
|
9
|
+
|
10
|
+
Simple configuration: just add `gem 'middleman-async-image'` to your __Gemfile__ and `activate :async_image` to your __config.rb__. If will work whatever your images dir.
|
11
|
+
|
12
|
+
By default, compressed images are stored in the *compress* dir in your image folder. If you want to name this dir differently : add the following configuration to your __config.rb__:
|
13
|
+
```RUBY
|
14
|
+
activate :async_image do |i|
|
15
|
+
i.compress_image_path = "THE_DIRECTORY_NAME_OF_YOUR_CHOISE"
|
16
|
+
end
|
17
|
+
```
|
18
|
+
|
19
|
+
By default again, the compression level is *low (15)*. If you want to use a different one, you can configure it as the following:
|
20
|
+
```RUBY
|
21
|
+
activate :async_image do |i|
|
22
|
+
i.quality = "medium"
|
23
|
+
end
|
24
|
+
```
|
25
|
+
List of options:
|
26
|
+
- Low: 10
|
27
|
+
- Medium: 25
|
28
|
+
- High: 35
|
29
|
+
|
30
|
+
## Contributing
|
31
|
+
|
32
|
+
1. Fork it ( https://github.com/bastienrobert/middleman-async-image/fork )
|
33
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
34
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
35
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
36
|
+
5. Create a new Pull Request
|
37
|
+
|
38
|
+
|
39
|
+
## License
|
40
|
+
|
41
|
+
See LICENSE, which applies to everything in this repository.
|
data/Rakefile
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
require 'bundler'
|
2
|
+
Bundler::GemHelper.install_tasks
|
3
|
+
|
4
|
+
require 'cucumber/rake/task'
|
5
|
+
|
6
|
+
Cucumber::Rake::Task.new(:cucumber, 'Run features that should pass') do |t|
|
7
|
+
t.cucumber_opts = '--color --tags ~@wip --strict'
|
8
|
+
end
|
9
|
+
|
10
|
+
require 'rake/clean'
|
11
|
+
|
12
|
+
task test: ['cucumber']
|
13
|
+
|
14
|
+
task default: :test
|
data/TODO.md
ADDED
@@ -0,0 +1,56 @@
|
|
1
|
+
# Require core library
|
2
|
+
require 'middleman-core'
|
3
|
+
# Require RMagick to manipulate images
|
4
|
+
require 'rubygems'
|
5
|
+
require 'rmagick'
|
6
|
+
# Require FileUtils to manage filesystem
|
7
|
+
require 'fileutils'
|
8
|
+
|
9
|
+
# Extension namespace
|
10
|
+
class AsyncImage < ::Middleman::Extension
|
11
|
+
option :compress_image_path, 'compress', 'other folder in your images, like "async"'
|
12
|
+
option :quality, 15, 'between 1 and 100'
|
13
|
+
option :scale, 0.3, 'between 0 and 1'
|
14
|
+
|
15
|
+
def initialize(app, options_hash={}, &block)
|
16
|
+
# Call super to build options from the options_hash
|
17
|
+
super
|
18
|
+
|
19
|
+
# set up your extension
|
20
|
+
# puts options.my_option
|
21
|
+
end
|
22
|
+
|
23
|
+
def compress_dir
|
24
|
+
dir = "source/#{app.config[:images_dir]}/" + AsyncImage.config[:compress_image_path]
|
25
|
+
unless Dir.exists?(dir)
|
26
|
+
FileUtils.mkdir(dir)
|
27
|
+
end
|
28
|
+
end
|
29
|
+
|
30
|
+
def after_configuration
|
31
|
+
compress_dir
|
32
|
+
puts "Async loaded images will be compress from source/" + app.config[:images_dir] + " to source/#{app.config[:images_dir]}/" + options.compress_image_path
|
33
|
+
end
|
34
|
+
|
35
|
+
helpers do
|
36
|
+
def image_async_tag(path, params={})
|
37
|
+
complete_path = "source/#{app.config[:images_dir]}/" + AsyncImage.config[:compress_image_path] + '/' + path
|
38
|
+
FileUtils.mkdir_p(complete_path.match(/(.*\/)+(.*$)/)[1])
|
39
|
+
|
40
|
+
Magick::Image::read("source/#{app.config[:images_dir]}/" + path)[0]
|
41
|
+
.scale(AsyncImage.config[:scale])
|
42
|
+
.write(complete_path){|f| f.quality = AsyncImage.config[:quality] }
|
43
|
+
print(path + ' has been compressed')
|
44
|
+
|
45
|
+
params['data-compress'] = image_path(AsyncImage.config[:compress_image_path] + '/' + path)
|
46
|
+
begin
|
47
|
+
params[:class] += ' async-image'
|
48
|
+
rescue
|
49
|
+
params['class'] += ' async-image'
|
50
|
+
end
|
51
|
+
|
52
|
+
return image_tag(path, params)
|
53
|
+
end
|
54
|
+
end
|
55
|
+
|
56
|
+
end
|
@@ -0,0 +1,25 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
3
|
+
|
4
|
+
Gem::Specification.new do |s|
|
5
|
+
s.name = "middleman-async-image"
|
6
|
+
s.version = "0.0.1"
|
7
|
+
s.platform = Gem::Platform::RUBY
|
8
|
+
s.authors = ["Bastien Robert"]
|
9
|
+
# s.email = ["email@example.com"]
|
10
|
+
# s.homepage = "http://example.com"
|
11
|
+
s.summary = "Load your images asynchronous"
|
12
|
+
# s.description = %q{A longer description of your extension}
|
13
|
+
|
14
|
+
s.files = `git ls-files`.split("\n")
|
15
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
16
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
17
|
+
s.require_paths = ["lib"]
|
18
|
+
|
19
|
+
# The version of middleman-core your extension depends on
|
20
|
+
s.add_runtime_dependency("middleman-core", [">= 4.2.1"])
|
21
|
+
s.add_dependency("rmagick", [">= 2.0.0"])
|
22
|
+
|
23
|
+
# Additional dependencies
|
24
|
+
# s.add_runtime_dependency("gem-name", "gem-version")
|
25
|
+
end
|
@@ -0,0 +1,30 @@
|
|
1
|
+
var AsyncImage = {
|
2
|
+
init: function () {
|
3
|
+
this.els = document.querySelectorAll("[data-compress]")
|
4
|
+
this.engine()
|
5
|
+
},
|
6
|
+
engine: function () {
|
7
|
+
for (var i = 0; i < this.els.length; i++) {
|
8
|
+
var el = this.els[i]
|
9
|
+
var d = el.src
|
10
|
+
this.small(el)
|
11
|
+
this.load(el, d)
|
12
|
+
}
|
13
|
+
},
|
14
|
+
load: function (el, d) {
|
15
|
+
var img = new Image()
|
16
|
+
img.src = d
|
17
|
+
img.onload = function () {
|
18
|
+
el.src = img.src
|
19
|
+
el.classList.add('async-large-loaded')
|
20
|
+
el.classList.remove('async-small-loaded')
|
21
|
+
}
|
22
|
+
},
|
23
|
+
small: function (el) {
|
24
|
+
el.src = el.dataset.compress
|
25
|
+
el.classList.add('async-small-loaded')
|
26
|
+
delete el.dataset.compress
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
AsyncImage.init()
|
@@ -0,0 +1,46 @@
|
|
1
|
+
@-moz-keyframes asyncImage {
|
2
|
+
from {
|
3
|
+
opacity: .2;
|
4
|
+
}
|
5
|
+
to {
|
6
|
+
opacity: 1;
|
7
|
+
}
|
8
|
+
}
|
9
|
+
@-webkit-keyframes asyncImage {
|
10
|
+
from {
|
11
|
+
opacity: .2;
|
12
|
+
}
|
13
|
+
to {
|
14
|
+
opacity: 1;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
@-o-keyframes asyncImage {
|
18
|
+
from {
|
19
|
+
opacity: .2;
|
20
|
+
}
|
21
|
+
to {
|
22
|
+
opacity: 1;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
@keyframes asyncImage {
|
26
|
+
from {
|
27
|
+
opacity: .2;
|
28
|
+
}
|
29
|
+
to {
|
30
|
+
opacity: 1;
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
.async-image {
|
35
|
+
transition: all .7s;
|
36
|
+
}
|
37
|
+
|
38
|
+
.async-image.async-small-loaded {
|
39
|
+
filter: blur(15px);
|
40
|
+
}
|
41
|
+
|
42
|
+
.async-image.async-small-loaded,
|
43
|
+
.async-image.async-large-loaded {
|
44
|
+
animation-name: asyncImage;
|
45
|
+
animation-duration: 1s;
|
46
|
+
}
|
metadata
ADDED
@@ -0,0 +1,83 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: middleman-async-image
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Bastien Robert
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2017-12-24 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: middleman-core
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ">="
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: 4.2.1
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - ">="
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: 4.2.1
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: rmagick
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - ">="
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: 2.0.0
|
34
|
+
type: :runtime
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - ">="
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: 2.0.0
|
41
|
+
description:
|
42
|
+
email:
|
43
|
+
executables: []
|
44
|
+
extensions: []
|
45
|
+
extra_rdoc_files: []
|
46
|
+
files:
|
47
|
+
- ".gitignore"
|
48
|
+
- Gemfile
|
49
|
+
- LICENSE
|
50
|
+
- README.md
|
51
|
+
- Rakefile
|
52
|
+
- TODO.md
|
53
|
+
- features/support/env.rb
|
54
|
+
- lib/middleman-async-image.rb
|
55
|
+
- lib/middleman-async-image/extension.rb
|
56
|
+
- middleman-async-image.gemspec
|
57
|
+
- vendor/assets/javascripts/async-image.js
|
58
|
+
- vendor/assets/stylesheets/async-image.css
|
59
|
+
homepage:
|
60
|
+
licenses: []
|
61
|
+
metadata: {}
|
62
|
+
post_install_message:
|
63
|
+
rdoc_options: []
|
64
|
+
require_paths:
|
65
|
+
- lib
|
66
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
67
|
+
requirements:
|
68
|
+
- - ">="
|
69
|
+
- !ruby/object:Gem::Version
|
70
|
+
version: '0'
|
71
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
72
|
+
requirements:
|
73
|
+
- - ">="
|
74
|
+
- !ruby/object:Gem::Version
|
75
|
+
version: '0'
|
76
|
+
requirements: []
|
77
|
+
rubyforge_project:
|
78
|
+
rubygems_version: 2.6.13
|
79
|
+
signing_key:
|
80
|
+
specification_version: 4
|
81
|
+
summary: Load your images asynchronous
|
82
|
+
test_files:
|
83
|
+
- features/support/env.rb
|