react-rails-img 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: c1554ede34a6b1d68694d316e02526b9cd0479ee
+  data.tar.gz: 219be609a27b582a86d78af74eae37875ba446b6
+SHA512:
+  metadata.gz: 36c0eefb568f45b10a6e8a2c7b07c42ab228cac20bdaaa7d3ff32709d6ff39266d4e2ceb144501f5b87793715f0e4b5ccb0b82396bcff31700a31b85f3cb5d9e
+  data.tar.gz: e3fc9155fd6f91b1dd2a63bcf7a2f89bb4007e45062642ec8ccb8ffb569d83e560c65000d185d074aac377b90c5eae9811f344834996ef239d0eba34e28a48e2

data/.gitignore

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/.rspec

@@ -0,0 +1,2 @@
+--format documentation
+--color

data/.travis.yml

@@ -0,0 +1,3 @@
+language: ruby
+rvm:
+  - 2.2.2

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in react-rails-img.gemspec
+gemspec

data/README.md

@@ -0,0 +1,65 @@
+# react-rails-img
+
+Simple image helpers for the rails project using react, make it easily just like using the `<img>` tag.
+
+## Installation
+
+1. Add this line to your application's Gemfile:
+
+```ruby
+gem 'react-rails-img'
+```
+
+And then execute:
+
+    $ bundle
+
+2. Require the javascript file in `app/assets/javascripts/application.js`:
+
+  ```js
+  //= require react_rails_img
+  ```
+
+## Usage
+
+### React Component Style
+
+the asset adds a `<Img>` component
+
+1. base usage: e.g.: `<Img src="/assets/logo.png" />`
+2. with props: e.g.: `<Img src="/assets/logo.png" alt="logo" className="logo" id="logo" width=100 height=50 />`
+3. advance usage - using cssSprite: e.g.: `<Img src="/assets/css_sprite/logo.png" />`
+
+    1) this feature requires gem 'css_sprite'
+
+    2) css_sprite images should be placed in dir `assets/images/css_sprite/`
+
+    3) put the string `css_sprite` after `/assets/` in the path
+
+### JS funtion Style
+
+just similar to rails helper `image_tag`
+
+1. base usage: e.g.: `imageTag('logo.png')`
+2. with props: e.g.: `imageTag('path/logo.png', {alt: 'logo', className: 'logo', id: 'logo', width: 100, height: 50})`
+
+
+ 
+## Acknowledgements
+
+the image path will respect `Rails.env`, for development it will be sth like
+
+  `/assets/logo.png`
+ 
+and for production, it will be contains the timestamp as
+ 
+   `/assets/logo-be1f67ffd42a4c1a41bdcc547c5705a3423a2f24bfe930f00398077fe518e6c0.png`
+
+
+## Contributing
+
+1. Fork it ( https://github.com/[my-github-username]/react-rails-img/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

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "react/rails/img"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,7 @@
+#!/bin/bash
+set -euo pipefail
+IFS=$'\n\t'
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/lib/react/rails/img.rb

@@ -0,0 +1,2 @@
+require "react/rails/img/version"
+require "react/rails/img/engine"

data/lib/react/rails/img/engine.rb

@@ -0,0 +1,8 @@
+module React
+  module Rails
+    module Img
+      class Engine < ::Rails::Engine
+      end
+    end
+  end
+end 

data/lib/react/rails/img/version.rb

@@ -0,0 +1,7 @@
+module React
+  module Rails
+    module Img
+      VERSION = "0.1.1"
+    end
+  end
+end

data/react-rails-img.gemspec

@@ -0,0 +1,24 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'react/rails/img/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "react-rails-img"
+  spec.version       = React::Rails::Img::VERSION
+  spec.authors       = ["RainChen"]
+  spec.email         = ["hirainchen@gmail.com"]
+
+  spec.summary       = %q{simple image helpers for the rails project using react}
+  spec.description   = %q{simple image helpers for the rails project using react, make it easily just like using the <img> tag}
+  spec.homepage      = "https://github.com/rainchen/react-rails-img"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.9"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

data/vendor/assets/javascripts/react_rails_img.js.jsx.erb

@@ -0,0 +1,88 @@
+<%
+images = {}
+prefix = Rails.application.config.assets.prefix
+should_compute_assets_path = Rails.env.production? # for performance
+if should_compute_assets_path
+  images_dir = Rails.root.join('app/assets/images/').to_s
+  assets.each_file do |file_path|
+    if file_path.starts_with?(images_dir)
+      file_name = file_path.sub(images_dir, '')
+      file_path =
+                  if Rails.application.config.assets.digest
+                    File.join('/', prefix, Rails.application.assets[file_name].digest_path)
+                  else
+                    File.join('/', prefix, file_name)
+                  end
+      images[file_name] = file_path
+    end
+  end
+end
+%>
+// usage: <Img className="tip" src="/assets/ui-tip.png" alt="private event tip" />
+// using cssSprite: <Img src="/assets/css_sprite/where-b.png" /> =>
+//   <img class="where-b" data-reactid=".0.1.$0.3.0.1.0">, where-b.png should be placed in `assets/images/css_sprite`
+var Img = React.createClass({
+  statics: {
+    // usage: Img.assetPath('logo.png') => "/assets/logo.png"
+    assetPath: function (path) {
+      var paths = <%= images.to_json %>;
+      return paths[path] || "/assets/"+path;
+    }
+  },
+
+  propTypes: {
+    src: React.PropTypes.string
+  },
+
+  src: function(){
+    var src = this.props.src;
+    if(src.match("/assets/")){
+      src = src.replace("/assets/", '');
+    }
+    src = Img.assetPath(src);
+    return src;
+  },
+
+  isUsingCssSprite: function (src) {
+    return src.match(/css_sprite/);
+  },
+
+  useCssSprite: function (src, className) {
+    // "/assets/ui-right-w.png" => "ui-right-w"
+    var baseName = src.replace(/\/assets\/(.*)\..*$/, '$1');
+    var cssSpriteClassName = baseName.replace(/css_sprite\//, '');
+    if(className){
+      className = cssSpriteClassName + " "+className;
+    }else{
+      className = cssSpriteClassName;
+    }
+     src = Img.assetPath('css_sprite_holder.png');
+    //src = null; // disable the src
+    return {src: src, className: className};
+  },
+
+  render: function() {
+    var className = this.props.className;
+    var src = this.src();
+    // using css_sprite
+    if(this.isUsingCssSprite(src)){
+      // src should be url like "/assets/css_sprite/xxx.png"
+      var result = this.useCssSprite(this.props.src, className);
+      src = result.src;
+      className = result.className;
+    }
+    return <img src={src} id={this.props.id} alt={this.props.alt} className={className} size={this.props.size} width={this.props.width} height={this.props.height} />;
+  }
+});
+
+
+// similar to rails helper `image_tag`, e.g.: {imageTag('placeholder/active-01.png')}
+// the function will return for development:
+// /assets/placeholder/active-01.png
+// and for production
+// /assets/placeholder/active-01-be1f67ffd42a4c1a41bdcc547c5705a3423a2f24bfe930f00398077fe518e6c0.png
+function imageTag (source, options) {
+  if(!options)options = {};
+  var src = "/assets/"+source;
+  return <Img src={src} id={options.id} alt={options.alt} className={options.className} size={options.size} width={options.width} height={options.height} />;
+}

metadata

@@ -0,0 +1,86 @@
+--- !ruby/object:Gem::Specification
+name: react-rails-img
+version: !ruby/object:Gem::Version
+  version: 0.1.1
+platform: ruby
+authors:
+- RainChen
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2015-07-08 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.9'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.9'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+description: simple image helpers for the rails project using react, make it easily
+  just like using the <img> tag
+email:
+- hirainchen@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".rspec"
+- ".travis.yml"
+- Gemfile
+- README.md
+- Rakefile
+- bin/console
+- bin/setup
+- lib/react/rails/img.rb
+- lib/react/rails/img/engine.rb
+- lib/react/rails/img/version.rb
+- react-rails-img.gemspec
+- vendor/assets/javascripts/react_rails_img.js.jsx.erb
+homepage: https://github.com/rainchen/react-rails-img
+licenses:
+- MIT
+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.4.6
+signing_key: 
+specification_version: 4
+summary: simple image helpers for the rails project using react
+test_files: []