middleman-async-image 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: b79a5d5c6b42ad27c77b3ff63f5f3432e37e0fde
+  data.tar.gz: e5539a9e1455be03aa3cf3e9ef0fe86bc7150a65
+SHA512:
+  metadata.gz: d241d8f39f5c368b1c57656ff57f043f5d2e135d62d8ce36726dc3478f7a03b7e46744ff9a7ab82dc2faf73500282a0e5483e744b5df1c8ba8de97fd8ac77e5a
+  data.tar.gz: e583f8da7d4174173b9c947960a8bf66d9111d7fd58dadaaf3a9a331774689cd128d4ecb0a4e74dcc90c80c9de1f98f4f96e2f8515da678e37a621edac76c538

data/.gitignore

@@ -0,0 +1,5 @@
+# Ignore bundler lock file
+/Gemfile.lock
+
+# Ignore pkg folder
+/pkg

data/Gemfile

@@ -0,0 +1,18 @@
+# If you do not have OpenSSL installed, update
+# the following line to use "http://" instead
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in middleman-async-image.gemspec
+gemspec
+
+group :development do
+  gem 'rake'
+  gem 'rdoc'
+  gem 'yard'
+end
+
+group :test do
+  gem 'cucumber'
+  gem 'aruba'
+  gem 'rspec'
+end

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Bastien ROBERT
+
+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:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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

@@ -0,0 +1,41 @@
+# Middleman Async Image
+Load your images asynchronously with Middleman : like Medium.
+
+## Why?
+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.
+
+## Configuration
+You can set the image-dir of your choice (follow the Middleman assets directories configuration).
+
+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.
+
+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__:
+```RUBY
+activate :async_image do |i|
+  i.compress_image_path = "THE_DIRECTORY_NAME_OF_YOUR_CHOISE"
+end
+```
+
+By default again, the compression level is *low (15)*. If you want to use a different one, you can configure it as the following:
+```RUBY
+activate :async_image do |i|
+  i.quality = "medium"
+end
+```
+List of options:
+- Low: 10
+- Medium: 25
+- High: 35
+
+## Contributing
+
+1. Fork it ( https://github.com/bastienrobert/middleman-async-image/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request
+
+
+## License
+
+See LICENSE, which applies to everything in this repository.

data/Rakefile

@@ -0,0 +1,14 @@
+require 'bundler'
+Bundler::GemHelper.install_tasks
+
+require 'cucumber/rake/task'
+
+Cucumber::Rake::Task.new(:cucumber, 'Run features that should pass') do |t|
+  t.cucumber_opts = '--color --tags ~@wip --strict'
+end
+
+require 'rake/clean'
+
+task test: ['cucumber']
+
+task default: :test

data/TODO.md

@@ -0,0 +1,2 @@
+# WIP !
+Automatic image helper will be do ASAP.

data/features/support/env.rb

@@ -0,0 +1,4 @@
+PROJECT_ROOT_PATH = File.dirname(File.dirname(File.dirname(__FILE__)))
+require 'middleman-core'
+require 'middleman-core/step_definitions'
+require File.join(PROJECT_ROOT_PATH, 'lib', 'middleman-async-image')

data/lib/middleman-async-image.rb

@@ -0,0 +1,6 @@
+require "middleman-core"
+
+Middleman::Extensions.register :async_image do
+  require "middleman-async-image/extension"
+  AsyncImage
+end

data/lib/middleman-async-image/extension.rb

@@ -0,0 +1,56 @@
+# Require core library
+require 'middleman-core'
+# Require RMagick to manipulate images
+require 'rubygems'
+require 'rmagick'
+# Require FileUtils to manage filesystem
+require 'fileutils'
+
+# Extension namespace
+class AsyncImage < ::Middleman::Extension
+  option :compress_image_path, 'compress', 'other folder in your images, like "async"'
+  option :quality, 15, 'between 1 and 100'
+  option :scale, 0.3, 'between 0 and 1'
+
+  def initialize(app, options_hash={}, &block)
+    # Call super to build options from the options_hash
+    super
+
+    # set up your extension
+    # puts options.my_option
+  end
+
+  def compress_dir
+    dir = "source/#{app.config[:images_dir]}/" + AsyncImage.config[:compress_image_path]
+    unless Dir.exists?(dir)
+      FileUtils.mkdir(dir)
+    end
+  end
+
+  def after_configuration
+    compress_dir
+    puts "Async loaded images will be compress from source/" + app.config[:images_dir] + " to source/#{app.config[:images_dir]}/" + options.compress_image_path
+  end
+
+  helpers do
+    def image_async_tag(path, params={})
+      complete_path = "source/#{app.config[:images_dir]}/" + AsyncImage.config[:compress_image_path] + '/' + path
+      FileUtils.mkdir_p(complete_path.match(/(.*\/)+(.*$)/)[1])
+
+      Magick::Image::read("source/#{app.config[:images_dir]}/" + path)[0]
+      .scale(AsyncImage.config[:scale])
+      .write(complete_path){|f| f.quality = AsyncImage.config[:quality] }
+      print(path + ' has been compressed')
+
+      params['data-compress'] = image_path(AsyncImage.config[:compress_image_path] + '/' + path)
+      begin
+        params[:class] += ' async-image'
+      rescue
+        params['class'] += ' async-image'
+      end
+
+      return image_tag(path, params)
+    end
+  end
+
+end

data/middleman-async-image.gemspec

@@ -0,0 +1,25 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+
+Gem::Specification.new do |s|
+  s.name        = "middleman-async-image"
+  s.version     = "0.0.1"
+  s.platform    = Gem::Platform::RUBY
+  s.authors     = ["Bastien Robert"]
+  # s.email       = ["email@example.com"]
+  # s.homepage    = "http://example.com"
+  s.summary     = "Load your images asynchronous"
+  # s.description = %q{A longer description of your extension}
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+
+  # The version of middleman-core your extension depends on
+  s.add_runtime_dependency("middleman-core", [">= 4.2.1"])
+  s.add_dependency("rmagick", [">= 2.0.0"])
+
+  # Additional dependencies
+  # s.add_runtime_dependency("gem-name", "gem-version")
+end

data/vendor/assets/javascripts/async-image.js

@@ -0,0 +1,30 @@
+var AsyncImage = {
+  init: function () {
+    this.els = document.querySelectorAll("[data-compress]")
+    this.engine()
+  },
+  engine: function () {
+  	for (var i = 0; i < this.els.length; i++) {
+      var el = this.els[i]
+      var d = el.src
+      this.small(el)
+      this.load(el, d)
+    }
+  },
+  load: function (el, d) {
+    var img = new Image()
+    img.src = d
+    img.onload = function () {
+      el.src = img.src
+      el.classList.add('async-large-loaded')
+      el.classList.remove('async-small-loaded')
+    }
+  },
+  small: function (el) {
+    el.src = el.dataset.compress
+    el.classList.add('async-small-loaded')
+    delete el.dataset.compress
+  }
+}
+
+AsyncImage.init()

data/vendor/assets/stylesheets/async-image.css

@@ -0,0 +1,46 @@
+@-moz-keyframes asyncImage {
+  from {
+    opacity: .2;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes asyncImage {
+  from {
+    opacity: .2;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-o-keyframes asyncImage {
+  from {
+    opacity: .2;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes asyncImage {
+  from {
+    opacity: .2;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.async-image {
+  transition: all .7s;
+}
+
+.async-image.async-small-loaded {
+  filter: blur(15px);
+}
+
+.async-image.async-small-loaded,
+.async-image.async-large-loaded {
+  animation-name: asyncImage;
+  animation-duration: 1s;
+}

metadata

@@ -0,0 +1,83 @@
+--- !ruby/object:Gem::Specification
+name: middleman-async-image
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Bastien Robert
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2017-12-24 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: middleman-core
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.2.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.2.1
+- !ruby/object:Gem::Dependency
+  name: rmagick
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.0
+description: 
+email: 
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- LICENSE
+- README.md
+- Rakefile
+- TODO.md
+- features/support/env.rb
+- lib/middleman-async-image.rb
+- lib/middleman-async-image/extension.rb
+- middleman-async-image.gemspec
+- vendor/assets/javascripts/async-image.js
+- vendor/assets/stylesheets/async-image.css
+homepage: 
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.6.13
+signing_key: 
+specification_version: 4
+summary: Load your images asynchronous
+test_files:
+- features/support/env.rb