Feature/fs 1343 add image tag

app/helpers/filestack_rails/application_helper.rb

@@ -1,6 +1,8 @@
+include FilestackRails::Transform
+
 module FilestackRails
   module ApplicationHelper
-    
+
     def filestack_js_include_tag
       javascript_include_tag "https://static.filestackapi.com/v3/filestack.js", type: "text/javascript"
     end
@@ -14,6 +16,22 @@ def filestack_js_init_tag
     def filestack_picker_element(content, callback, options = {})
       button_tag content, onclick: create_javascript_for_picker(callback, options), type: 'button'
     end 
+
+    def filestack_transform
+      _, apikey = get_client_and_api_key
+      get_transform(apikey)
+    end
+
+    def filestack_image(url, options = {})
+      transform_object = options[:transform]
+      options.delete(:transform)
+      if transform_object
+        transform_object.add_external_url url
+        image_tag transform_object.fs_url, options
+      else
+        image_tag url
+      end
+    end
 
     private 
 
@@ -34,5 +52,6 @@ def get_client_and_api_key
       apikey = ::Rails::application.config.filestack_rails.api_key
       [client_name, apikey]
     end
+
   end
 end

filestack_rails.gemspec

@@ -17,6 +17,7 @@ Gem::Specification.new do |s|
   s.files = Dir["{app,config,db,lib}/**/*", "MIT-LICENSE", "Rakefile", "README.md"]
 
   s.add_dependency "rails", "~> 5.1.2"
+  s.add_dependency "filestack", "~> 2.0.1"
 
   s.add_development_dependency 'coveralls'
   s.add_development_dependency 'sqlite3'

lib/filestack_rails.rb

@@ -1,4 +1,5 @@
 require "filestack_rails/configuration"
+require "filestack_rails/transform"
 require "filestack_rails/engine"
 
 module FilestackRails

lib/filestack_rails/transform.rb

@@ -0,0 +1,41 @@
+require 'filestack'
+
+class FilestackTransform
+    def initialize(apikey)
+        @transform = Transform.new(apikey:apikey)
+    end
+
+    def method_missing(method_name, **args)
+        if defined? @transform.send(method_name)
+            raise "Invalid transformation for filestack_image" unless scrub_bad_transforms(method_name)
+            @transform = @transform.send(method_name, **args)
+            self
+        else
+            super
+        end
+    end
+
+    def add_external_url(url)
+        @transform.instance_variable_set(:@external_url, url)
+    end
+
+    def fs_url
+        @transform.url
+    end
+end 
+
+module FilestackRails
+    module Transform
+
+        def get_transform(apikey)
+            FilestackTransform.new(apikey)
+        end
+
+    end
+end
+
+private 
+
+def scrub_bad_transforms(method_name)
+    !['av_convert', 'debug', 'store', 'url'].include? method_name.to_s
+end

spec/dummy/app/controllers/hello_controller.rb

@@ -1,4 +1,5 @@
 class HelloController < ApplicationController
+  include FilestackRails::ApplicationHelper
   def index
     @user = User.new
   end

spec/dummy/app/views/hello/index.html.erb

@@ -1,5 +1,6 @@
 <h1>Rails Picker Test</h1>
 <%= filestack_picker_element "pick!", "logIt", {'accept' => 'image/*', 'fromSources' => 'facebook'} %>
+<%= filestack_image 'https://tinyurl.com/yanvlakc', transform: filestack_transform.resize(width:100, height:100), id: 'unique-id' %>
 <%= form_for @user do |f| %>
     <%= f.label :picture %>
     <%= f.filestack_field :picture, 'Upload a Picture' %>

spec/helpers/application_helper_spec.rb

@@ -4,12 +4,19 @@
   include FilestackRails::ApplicationHelper
   include ActionView::Helpers
   describe '#filestack_js_include_tag' do
-    it "be a script tag" do
+    it "is a script tag" do
       regex = %r{\A<script.*></script>\z}
       expect(filestack_js_include_tag).to match(regex)
     end
 
-    it "include the correct type" do
+    it "js_initn is a script tag" do
+      init_tag = filestack_js_init_tag
+      expect(init_tag).to include('<script')
+      expect(init_tag).to include('</script>')
+      expect(init_tag).to include('filestack.init')
+    end
+
+    it "includes the correct type" do
       attribute = %{type="text/javascript"}
       expect(filestack_js_include_tag).to include(attribute)
     end
@@ -20,7 +27,7 @@
     end
   end
 
-  describe "filestack_picker_element" do 
+  describe "#filestack_picker_element" do 
     it "has the right picker element" do
       html_string = filestack_picker_element "hello!", "console.log('hello!')"
       correct_string = '<button name="button" type="button" onclick="(function(){
@@ -29,4 +36,12 @@
       expect(html_string).to eq(correct_string)
     end
   end
+
+  describe "#filestack_image" do
+    it "returns the correct tag" do 
+      image = filestack_image 'www.example.com', transform: filestack_transform.resize(width: 100, height: 100)
+      correct = '<img src="https://cdn.filestackcontent.com/API_KEY/resize=width:100,height:100/www.example.com" alt="Www.example" />'
+      expect(image).to eq(correct)
+    end
+  end
 end