yarii-cloudinary 0.2.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: ee27d8a27036bdb708e1a7113769e2ce31ff1cdd7264af66ddb93f9aefd22b86
+  data.tar.gz: a3d3c2406eb27d7bd4ceef17be39b550adf2145a2d05fd311343c79c1ffdf672
+SHA512:
+  metadata.gz: 87de93d203977671798102933a7fc6f5053c75a9501ac68f1065b1742bde45d0e929562fc8edf9fab81646ee58ce118184a6f06761c48ab9dd4fb2ec27b628b4
+  data.tar.gz: bb980195588ace45c272b969cd59f38336f35ed7763183b2e4d83897095b0ec8ee8647e46e787840eb5a5915f4d4e60e6c5d6aa83f292bac2e49eb38c8917c4c

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Whitefusion
+
+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,34 @@
+# Yarii Cloudinary Plugin
+
+Short description and motivation. Etc.
+
+*Documentation TODO*:
+
+* `yarii_editor` upload preset needed in Cloudinary (also media needs to be tagged 'yarii_editor')
+* Add the modal to dashboard extras
+* Add the head renderer (yarii_extra_head)
+* Add the gem initializer
+* Add the route
+
+## Usage
+
+How to use my plugin.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'yarii-cloudinary'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,32 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Yariieditor'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/controllers/yarii_cloudinary/application_controller.rb

@@ -0,0 +1,6 @@
+module YariiCloudinary
+  class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception
+    include YariiEditor::ControllerAuthorization
+  end
+end

data/app/controllers/yarii_cloudinary/media_controller.rb

@@ -0,0 +1,33 @@
+module YariiCloudinary
+  class MediaController < ApplicationController
+    def index
+      cloudinary_tag = ENV.fetch('yarii_cloudinary_tag', 'yarii_editor')
+      json_images = Cloudinary::Api.resources_by_tag(cloudinary_tag, cloud_name: ENV['yarii_cloudinary_cloud_name'], api_key: ENV['yarii_cloudinary_api_key'], api_secret: ENV['yarii_cloudinary_api_secret'], max_results: 200)['resources']
+
+      @images = json_images.map do |image|
+        {
+          path: "v#{image['version']}/#{image['public_id']}",
+          id: image['public_id'],
+          format: image['format']
+        }
+      end
+
+      render layout: false
+    end
+
+    def form_thumbnail
+      render partial: 'form_thumbnail', layout: nil, formats: [:html], locals: {public_id: params[:id]}
+    end
+
+    def multiple_form_item
+      render_locals = {
+        public_id: params[:id],
+        name: params[:name],
+        index: params[:index],
+        input_classes: params[:input_classes],
+        placeholder:  params[:placeholder]
+      }
+      render partial: 'multiple_form_item', layout: nil, formats: [:html], locals: render_locals
+    end
+  end
+end

data/app/helpers/yarii_cloudinary/application_helper.rb

@@ -0,0 +1,9 @@
+module YariiCloudinary
+  module ApplicationHelper
+    include ::Webpacker::Helper
+
+    def current_webpacker_instance
+      YariiCloudinary.webpacker
+    end
+  end
+end

data/app/javascript/controllers/cloudinary_browse_media_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "stimulus"
+//import cloudinary from "cloudinary-core"
+
+export default class extends Controller {
+  connect() {
+    // Not currently used…
+/*    this.cl = new cloudinary.Cloudinary({cloud_name: this.data.get("cloud"), secure: true}); */
+    console.log("Modal exists")
+  }
+
+  selectMedia(event) {
+    this.selectedPublicId = event.currentTarget.dataset.cloudinaryId
+    const customEvent = new CustomEvent('selectCloudinaryMedia', { bubbles: true, detail: this })
+    this.element.dispatchEvent(customEvent)
+  }
+
+  closeModal() {
+    const customEvent = new CustomEvent('closeCloudinaryMedia', { bubbles: true, detail: this })
+    this.element.dispatchEvent(customEvent)
+  }
+}

data/app/javascript/controllers/cloudinary_multiple_media_controller.js

@@ -0,0 +1,164 @@
+import { Controller } from "stimulus"
+import axios from "axios"
+
+export default class extends Controller {
+  static targets = ["rows", "thumbnail", "input"]
+
+  connect() {
+    this.ids = []
+    this.currentIndex = -1
+    if (this.data.get('ids')) {
+      this.ids = this.data.get('ids').split(',')
+    }
+    this.updateIndex()
+
+    const uploadPreset = this.data.get('uploadPreset') || 'yarii_editor'
+
+    this.cloudinaryWidget = cloudinary.createUploadWidget({
+      cloudName: this.data.get('cloud'),
+      multiple: true,
+      sources: [
+        'local',
+        'url'
+      ],
+      uploadPreset: uploadPreset}, (error, result) => { 
+        if (!error && result && result.event === "success") {
+          this.widgetSuccessCallback(result.info)
+        }
+      }
+    )
+  }
+
+  updateIndex() {
+    this.latestIndex = this.ids.length - 1
+  }
+
+  async widgetSuccessCallback(result) {
+    const publicId = result.public_id
+    if (this.currentIndex == -1) {
+      // When adding new images
+      this.ids.push(publicId)
+      this.updateIndex()
+      const formItemPath = this.data.get('formItemPath').replace('/0/', `/${encodeURIComponent(publicId)}/`)
+      try {
+        const response = await axios.get(formItemPath, {params: {
+          name: `${this.data.get('name')}[]`,
+          index: this.latestIndex,
+          input_classes: this.data.get('inputClasses'),
+          placeholder: this.data.get('placeholder')
+        }})
+        const newRow = document.createElement('template')
+        newRow.innerHTML = response.data
+        this.rowsTarget.append(newRow.content.cloneNode(true))
+      } catch (error) {
+        console.log(error)
+      }
+    }
+    else {
+      const formItemPath = this.data.get('formItemPath').replace('/0/', `/${encodeURIComponent(publicId)}/`)
+      try {
+        const response = await axios.get(formItemPath, {params: {
+          name: `${this.data.get('name')}[]`,
+          index: this.currentIndex,
+          input_classes: this.data.get('inputClasses'),
+          placeholder: this.data.get('placeholder')
+        }})
+        const newRow = document.createElement('template')
+        newRow.innerHTML = response.data
+        this.rowsTarget.replaceChild(newRow.content.cloneNode(true), this.rowsTarget.querySelector(`div[data-index="${this.currentIndex}"]`))
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
+
+  open() {
+    this.currentIndex = parseInt(event.currentTarget.dataset.index, 10)
+    this.cloudinaryWidget.open()
+  }
+
+  add() {
+    this.currentIndex = -1
+    this.cloudinaryWidget.open()
+  }
+
+  remove(event) {
+    const indexToRemove = parseInt(event.currentTarget.dataset.index, 10)
+    if (confirm('Are you sure you wish to remove this media item?')) {
+      this.inputTargets[indexToRemove].value = ""
+      this.rowsTarget.querySelector(`div[data-index="${indexToRemove}"]`).classList.add('is-hidden')
+    }
+  }
+
+  async addBrowse() {
+    this.currentIndex = -1
+    const newPath = this.data.get('browsePath')
+    this.boundCallbacks = {
+      select: this.selectMediaCallback.bind(this),
+      close: this.closeMediaCallback.bind(this)
+    }
+    document.querySelector('#yarii-cloudinary--modal-wrapper').addEventListener('selectCloudinaryMedia', this.boundCallbacks.select)
+    document.querySelector('#yarii-cloudinary--modal-wrapper').addEventListener('closeCloudinaryMedia', this.boundCallbacks.close)
+
+    try {
+      const response = await axios.get(newPath)
+      document.querySelector('#yarii-cloudinary--modal-wrapper').innerHTML = response.data
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  async browse(event) {
+    this.currentIndex = parseInt(event.currentTarget.dataset.index, 10)
+    const newPath = this.data.get('browsePath')
+    this.boundCallbacks = {
+      select: this.selectMediaCallback.bind(this),
+      close: this.closeMediaCallback.bind(this)
+    }
+    document.querySelector('#yarii-cloudinary--modal-wrapper').addEventListener('selectCloudinaryMedia', this.boundCallbacks.select)
+    document.querySelector('#yarii-cloudinary--modal-wrapper').addEventListener('closeCloudinaryMedia', this.boundCallbacks.close)
+
+    try {
+      const response = await axios.get(newPath)
+      document.querySelector('#yarii-cloudinary--modal-wrapper').innerHTML = response.data
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  async selectMediaCallback(event) {
+    const browseController = event.detail
+    const publicId = browseController.selectedPublicId
+    if (this.currentIndex == -1) {
+      // when adding new images
+      this.ids.push(publicId)
+      this.updateIndex()
+      const formItemPath = this.data.get('formItemPath').replace('/0/', `/${encodeURIComponent(publicId)}/`)
+      try {
+        const response = await axios.get(formItemPath, {params: {
+          name: `${this.data.get('name')}[]`,
+          index: this.latestIndex,
+          input_classes: this.data.get('inputClasses'),
+          placeholder: this.data.get('placeholder')
+        }})
+        const newRow = document.createElement('template')
+        newRow.innerHTML = response.data
+        this.rowsTarget.append(newRow.content.cloneNode(true))
+      } catch (error) {
+        console.log(error)
+      }
+    } else {
+      const thumbnailImage = browseController.element.querySelector(`div[data-cloudinary-id="${publicId}"] figure`).innerHTML
+      this.thumbnailTargets[this.currentIndex].innerHTML = `<figure class="image is-128x128 mb-3">${thumbnailImage}</figure>`
+      this.inputTargets[this.currentIndex].value = publicId
+    }
+    browseController.closeModal()
+  }
+
+  closeMediaCallback(event) {
+    const browseController = event.detail
+    document.querySelector('#yarii-cloudinary--modal-wrapper').removeEventListener('selectCloudinaryMedia', this.boundCallbacks.select)
+    document.querySelector('#yarii-cloudinary--modal-wrapper').removeEventListener('closeCloudinaryMedia', this.boundCallbacks.close)
+    browseController.element.remove()
+  }
+}

data/app/javascript/controllers/cloudinary_single_media_controller.js

@@ -0,0 +1,73 @@
+import { Controller } from "stimulus"
+import axios from "axios"
+
+export default class extends Controller {
+  static targets = ["thumbnail", "input"]
+
+  connect() {
+    const uploadPreset = this.data.get('uploadPreset') || 'yarii_editor'
+
+    this.cloudinaryWidget = cloudinary.createUploadWidget({
+      cloudName: this.data.get('cloud'),
+      multiple: false,
+      sources: [
+        'local',
+        'url'
+      ],
+      uploadPreset: uploadPreset}, (error, result) => { 
+        if (!error && result && result.event === "success") {
+          this.widgetSuccessCallback(result.info)
+        }
+      }
+    )
+  }
+
+  async widgetSuccessCallback(result) {
+    const publicId = result.public_id
+    this.inputTarget.value = publicId
+    const formThumbnailPath = this.data.get('formThumbnailPath').replace('/0/', `/${encodeURIComponent(publicId)}/`)
+    try {
+      const response = await axios.get(formThumbnailPath)
+      this.thumbnailTarget.innerHTML = response.data
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  open() {
+    this.cloudinaryWidget.open()
+  }
+
+  async browse() {
+    const newPath = this.data.get('browsePath')
+    this.boundCallbacks = {
+      select: this.selectMediaCallback.bind(this),
+      close: this.closeMediaCallback.bind(this)
+    }
+    document.querySelector('#yarii-cloudinary--modal-wrapper').addEventListener('selectCloudinaryMedia', this.boundCallbacks.select)
+    document.querySelector('#yarii-cloudinary--modal-wrapper').addEventListener('closeCloudinaryMedia', this.boundCallbacks.close)
+
+    try {
+      const response = await axios.get(newPath)
+      document.querySelector('#yarii-cloudinary--modal-wrapper').innerHTML = response.data
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  selectMediaCallback(event) {
+    const browseController = event.detail
+    const publicId = browseController.selectedPublicId
+    const thumbnailImage = browseController.element.querySelector(`div[data-cloudinary-id="${publicId}"] figure`).innerHTML
+    this.thumbnailTarget.innerHTML = `<figure class="image is-128x128 mb-3">${thumbnailImage}</figure>`
+    this.inputTarget.value = publicId
+    browseController.closeModal()
+  }
+
+  closeMediaCallback(event) {
+    const browseController = event.detail
+    document.querySelector('#yarii-cloudinary--modal-wrapper').removeEventListener('selectCloudinaryMedia', this.boundCallbacks.select)
+    document.querySelector('#yarii-cloudinary--modal-wrapper').removeEventListener('closeCloudinaryMedia', this.boundCallbacks.close)
+    browseController.element.remove()
+  }
+}

data/app/javascript/controllers/index.js

@@ -0,0 +1,11 @@
+// Load all the controllers within this directory and all subdirectories. 
+// Controller files must be named *_controller.js.
+
+import { Application } from "stimulus"
+import { definitionsFromContext } from "stimulus/webpack-helpers"
+
+const application = Application.start()
+const context = require.context("controllers", true, /_controller\.js$/)
+application.load(definitionsFromContext(context))
+
+console.info("cloudinary II:!")

data/app/javascript/packs/application.js

@@ -0,0 +1,2 @@
+import '../../styles/index.scss'
+import "controllers"

data/app/jobs/yarii_cloudinary/application_job.rb

@@ -0,0 +1,4 @@
+module YariiCloudinary
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/styles/index.scss

@@ -0,0 +1,43 @@
+@charset "utf-8";
+
+@mixin thumbnail {
+  box-shadow: 0px 2px 5px rgba(0,0,0,0.25);
+  border: 1px solid rgba(0,0,0,0.5);
+}
+
+.yarii-cloudinary--field {
+  @media (min-width: 768px) {
+    .level-item {
+      padding-right: 10px;
+      &:last-of-type {
+        padding-right: 0px;
+      }
+    }
+  }
+  figure img {
+    @include thumbnail;
+  }
+  .button {
+    margin-right: 10px;
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+}
+
+.input.yarii-cloudinary--text-input {
+}
+
+.yarii-cloudinary--browse-cell {
+  cursor: pointer;
+  &:hover {
+    background: rgba(0,0,0,0.05);
+  }
+  figure {
+    margin-bottom: 0.5rem;
+    img {
+      @include thumbnail;
+    }
+  }
+}
+

data/app/views/yarii_cloudinary/application/yarii_cloudinary_head.erb

@@ -0,0 +1,2 @@
+<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

data/app/views/yarii_cloudinary/media/_browse_thumbnail.html.erb

@@ -0,0 +1,3 @@
+<figure class="image is-128x128 m-auto">
+  <%= cl_image_tag public_id, cloud_name: ENV['yarii_cloudinary_cloud_name'], :width => 256, :height => 256, :crop => :thumb, :format => :jpg, :quality => 60 %>
+</figure>

data/app/views/yarii_cloudinary/media/_form_thumbnail.html.erb

@@ -0,0 +1,3 @@
+<figure class="image is-128x128 mb-3">
+  <%= cl_image_tag public_id, cloud_name: ENV['yarii_cloudinary_cloud_name'], :width => 256, :height => 256, :crop => :thumb, :format => :jpg, :quality => 60 %>
+</figure>

data/app/views/yarii_cloudinary/media/_modal.html.erb

@@ -0,0 +1,4 @@
+<!-- Yarii::Cloudinary Media Modal -->
+<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>  
+<div id="yarii-cloudinary--modal-wrapper">
+</div>

data/app/views/yarii_cloudinary/media/_multiple_form_item.html.erb

@@ -0,0 +1,25 @@
+<div data-index="<%= index %>" class="level">
+  <div class="level-item is-narrow">
+    <div data-target="cloudinary-multiple-media.thumbnail">
+      <% if public_id.present? %>
+        <%= render 'yarii_cloudinary/media/form_thumbnail', public_id: public_id %>
+      <% end %>
+    </div>
+  </div>
+  <div class="level-item">
+    <%= content_tag :input, nil, name: name, value: public_id, class: input_classes, type: 'text', placeholder: placeholder, data: {target: 'cloudinary-multiple-media.input'} %>
+  </div>
+  <div class="level-item is-narrow">
+    <button data-index="<%= index %>" data-action="cloudinary-multiple-media#open" class="button is-primary">
+      <span class="icon"><i class="fa fa-upload"></i></span>
+      <span>Upload</span>
+    </button>
+    <button data-index="<%= index %>" data-action="cloudinary-multiple-media#browse" class="button is-success">
+      <span class="icon"><i class="fa fa-picture-o"></i></span>
+      <span>Browse</span>
+    </button>
+    <button data-index="<%= index %>" data-action="cloudinary-multiple-media#remove" class="button is-danger">
+      <i class="fa fa-trash"></i>
+    </button>
+  </div>
+</div>

data/app/views/yarii_cloudinary/media/index.html.erb

@@ -0,0 +1,22 @@
+<div data-controller="cloudinary-browse-media" id="yarii-cloudinary--modal" class="modal is-active">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Browse Cloudinary</p>
+      <button data-action="cloudinary-browse-media#closeModal" class="delete" aria-label="close"></button>
+    </header>
+    <section class="modal-card-body">
+      <div class="columns is-multiline is-mobile">
+        <% @images.each do |image| %>
+          <div data-action="click->cloudinary-browse-media#selectMedia" data-cloudinary-id="<%= image[:id] %>" role="button" class="yarii-cloudinary--browse-cell column is-one-third-tablet is-one-third-desktop is-half-mobile has-text-centered">
+            <%= render 'browse_thumbnail', public_id: image[:path] %>
+            <div class="image-name"><strong><%= image[:id] %></strong>.<%= image[:format] %></div>
+          </div>
+        <% end %>
+      </div>
+    </section>
+    <footer class="modal-card-foot">
+      <button data-action="cloudinary-browse-media#closeModal" class="button is-success">Done</button>
+    </footer>
+  </div>
+</div>

data/app/views/yarii_editor/editor/_cloudinary.html.erb

@@ -0,0 +1,42 @@
+<%-
+  input_classes = ['input yarii-cloudinary--text-input']
+  input_classes << className if local_assigns[:className]
+  name = name_from_variable(assigns)
+  value = value_from_variable(assigns)
+%>
+<div
+  data-controller="cloudinary-single-media"
+  data-cloudinary-single-media-cloud="<%= ENV['yarii_cloudinary_cloud_name'] %>"
+  <% if ENV['yarii_cloudinary_tag'] -%>data-cloudinary-single-media-upload-preset="<%= ENV['yarii_cloudinary_tag'] %>"<% end -%>
+  data-cloudinary-single-media-browse-path="<%= yarii_cloudinary.media_path %>"
+  data-cloudinary-single-media-form-thumbnail-path="<%= yarii_cloudinary.form_thumbnail_medium_path(0) %>"
+  class="yarii-cloudinary--field field"
+>
+  <label class="label"><%= label %></label>
+  <div class="control">
+    <div class="level">
+      <div class="level-item is-narrow">
+        <div data-target="cloudinary-single-media.thumbnail">
+          <% if value.present? %>
+            <%= render 'yarii_cloudinary/media/form_thumbnail', public_id: value %>
+          <% else %>
+            <span class="icon is-medium has-text-info"><i class="fa fa-picture-o fa-lg"></i></span>
+          <% end %>
+        </div>
+      </div>
+      <div class="level-item">
+        <%= content_tag :input, nil, name: name, value: value, class: input_classes.join(' '), type: 'text', placeholder: placeholder, data: {target: 'cloudinary-single-media.input'} %>
+      </div>
+      <div class="level-item is-narrow">
+        <button data-action="cloudinary-single-media#open" class="button is-primary">
+          <span class="icon"><i class="fa fa-upload"></i></span>
+          <span>Upload</span>
+        </button>
+        <button data-action="cloudinary-single-media#browse" class="button is-success">
+          <span class="icon"><i class="fa fa-picture-o"></i></span>
+          <span>Browse</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/yarii_editor/editor/_cloudinary_multiple.html.erb

@@ -0,0 +1,50 @@
+<%-
+  input_classes = ['input yarii-cloudinary--text-input']
+  input_classes << className if local_assigns[:className]
+  name = name_from_variable(local_assigns)
+  value = value_from_variable(local_assigns)
+%>
+<div
+  data-controller="cloudinary-multiple-media"
+  <% if value.is_a?(Array)
+    -%>data-cloudinary-multiple-media-ids="<%= value.join(',') %>"
+  <% end
+  -%>
+  data-cloudinary-multiple-media-cloud="<%= ENV['yarii_cloudinary_cloud_name'] %>"
+  <% if ENV['yarii_cloudinary_tag'] -%>data-cloudinary-multiple-media-upload-preset="<%= ENV['yarii_cloudinary_tag'] %>"<% end -%>
+  data-cloudinary-multiple-media-browse-path="<%= yarii_cloudinary.media_path %>"
+  data-cloudinary-multiple-media-form-item-path="<%= yarii_cloudinary.multiple_form_item_medium_path(0) %>"
+  data-cloudinary-multiple-media-name="<%= name %>"
+  data-cloudinary-multiple-media-input-classes="<%= input_classes.join(' ') %>"
+  data-cloudinary-multiple-media-placeholder="<%= placeholder.gsub(/"/, '&quot;') %>"
+  class="yarii-cloudinary--field field"
+>
+  <label class="label"><%= label %></label>
+  <div class="control">
+    <div data-target="cloudinary-multiple-media.rows">
+      <% if value.is_a? Array %>
+        <% value.each_with_index do |public_id, index| %>
+          <%=
+            render 'yarii_cloudinary/media/multiple_form_item',
+              name: "#{name}[]",
+              public_id: public_id,
+              index: index,
+              input_classes: input_classes.join(' '),
+              placeholder: placeholder
+          %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <div class="has-text-centered mt-6">
+      <button data-action="cloudinary-multiple-media#add" class="button is-primary">
+        <span class="icon"><i class="fa fa-upload"></i></span>
+        <span>Add via Upload</span>
+      </button>
+      <button data-action="cloudinary-multiple-media#addBrowse" class="button is-success">
+        <span class="icon"><i class="fa fa-picture-o"></i></span>
+        <span>Add via Browse</span>
+      </button>
+    </div>
+  </div>
+</div>

data/config/routes.rb

@@ -0,0 +1,8 @@
+YariiCloudinary::Engine.routes.draw do
+  resources :media do
+    member do
+      get 'form_thumbnail'
+      get 'multiple_form_item'
+    end
+  end
+end

data/config/webpack/development.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

data/config/webpack/environment.js

@@ -0,0 +1,3 @@
+const { environment } = require('@rails/webpacker')
+
+module.exports = environment

data/config/webpack/production.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'production'
+
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

data/config/webpack/staging.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'staging'
+
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

data/config/webpack/test.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

data/config/webpacker.yml

@@ -0,0 +1,110 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  source_path: app/javascript
+  source_entry_path: packs
+  public_root_path: public
+  # use a different sub-folder name
+  public_output_path: yarii-cloudinary-packs
+
+  cache_path: tmp/cache/webpacker
+  check_yarn_integrity: false
+  webpack_compile_output: false
+
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  resolved_paths: []
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
+  # Extract and emit a css file
+  extract_css: true
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
+  extensions:
+    - .mjs
+    - .js
+    - .sass
+    - .scss
+    - .css
+    - .module.sass
+    - .module.scss
+    - .module.css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+  compile: true
+
+  # Verifies that versions and hashed value of the package contents in the project's package.json
+  check_yarn_integrity: true
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
+  dev_server:
+    https: false
+    host: localhost
+    port: 3035
+    public: localhost:3035
+    hmr: false
+    # Inline should be set to true if using HMR
+    inline: true
+    overlay: true
+    compress: true
+    disable_host_check: true
+    use_local_ip: false
+    quiet: false
+    headers:
+      'Access-Control-Allow-Origin': '*'
+    watch_options:
+      ignored: '**/node_modules/**'
+
+
+test:
+  <<: *default
+  compile: true
+
+  # Compile test packs to a separate directory
+  public_output_path: packs-test
+
+staging:
+  <<: *default
+
+  # Staging, like Production, depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Extract and emit a css file
+  extract_css: true
+
+  # Cache manifest.json for performance
+  cache_manifest: true
+
+
+production:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Extract and emit a css file
+  extract_css: true
+
+  # Cache manifest.json for performance
+  cache_manifest: true

data/db/migrate/20190923000809_create_yarii_sites.rb

@@ -0,0 +1,12 @@
+class CreateYariiSites < ActiveRecord::Migration[6.0]
+  def change
+    create_table :yarii_sites do |t|
+      t.string :title
+      t.string :preview_base_url
+      t.string :published_base_url
+      t.string :content_base_path
+
+      t.timestamps
+    end
+  end
+end

data/lib/tasks/yarii_cloudinary_tasks.rake

@@ -0,0 +1,61 @@
+def ensure_log_goes_to_stdout
+  old_logger = Webpacker.logger
+  Webpacker.logger = ActiveSupport::Logger.new(STDOUT)
+  yield
+ensure
+  Webpacker.logger = old_logger
+end
+
+
+namespace :yarii_cloudinary do
+  namespace :webpacker do
+    desc "Install deps with yarn"
+    task :yarn_install do
+      Dir.chdir(File.join(__dir__, "../..")) do
+        system "yarn install --no-progress --production"
+      end
+    end
+
+    desc "Compile JavaScript packs using webpack for production with digests"
+    task compile: [:yarn_install, :environment] do
+      Webpacker.with_node_env("production") do
+        ensure_log_goes_to_stdout do
+          if YariiCloudinary.webpacker.commands.compile
+            # Successful compilation!
+            puts "YariiCloudinary Plugin -- Webpacker success"
+          else
+            # Failed compilation
+            puts "YariiCloudinary Plugin -- something's wrong with Webpacker!"
+            exit!
+          end
+        end
+      end
+    end
+  end
+end
+
+def yarn_install_available?
+  rails_major = Rails::VERSION::MAJOR
+  rails_minor = Rails::VERSION::MINOR
+
+  rails_major > 5 || (rails_major == 5 && rails_minor >= 1)
+end
+
+def enhance_assets_precompile
+  # yarn:install was added in Rails 5.1
+  deps = yarn_install_available? ? [] : ["yarii_cloudinary:webpacker:yarn_install"]
+  Rake::Task["assets:precompile"].enhance(deps) do
+    Rake::Task["yarii_cloudinary:webpacker:compile"].invoke
+  end
+end
+
+# Compile packs after we've compiled all other assets during precompilation
+skip_webpacker_precompile = %w(no false n f).include?(ENV["WEBPACKER_PRECOMPILE"])
+
+unless skip_webpacker_precompile
+  if Rake::Task.task_defined?("assets:precompile")
+    enhance_assets_precompile
+  else
+    Rake::Task.define_task("assets:precompile" => "yarii_cloudinary:webpacker:compile")
+  end
+end

data/lib/yarii-cloudinary/engine.rb

@@ -0,0 +1,12 @@
+module YariiCloudinary
+  class Engine < ::Rails::Engine
+    isolate_namespace YariiCloudinary
+
+    ROOT_PATH = Pathname.new(File.join(__dir__, "..", ".."))
+
+    config.app_middleware.use(
+      Rack::Static,
+      urls: ["/yarii-cloudinary-packs"], root: ROOT_PATH.join("public")
+    )
+  end
+end

data/lib/yarii-cloudinary/version.rb

@@ -0,0 +1,3 @@
+module YariiCloudinary
+  VERSION = '0.2.0'
+end

data/lib/yarii-cloudinary.rb

@@ -0,0 +1,15 @@
+require "yarii-cloudinary/engine"
+
+module YariiCloudinary
+  ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
+
+  class << self
+    def webpacker
+      @webpacker ||= ::Webpacker::Instance.new(
+        root_path: ROOT_PATH,
+        config_path: ROOT_PATH.join("config/webpacker.yml")
+      )
+    end
+  end
+end
+

metadata

@@ -0,0 +1,118 @@
+--- !ruby/object:Gem::Specification
+name: yarii-cloudinary
+version: !ruby/object:Gem::Version
+  version: 0.2.0
+platform: ruby
+authors:
+- Jared White
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2020-04-21 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 6.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 6.0.0
+- !ruby/object:Gem::Dependency
+  name: webpacker
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+- !ruby/object:Gem::Dependency
+  name: cloudinary
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+description: Allows images to be loaded and viewed in Yarii via the Cloudinary service
+email:
+- jared@jaredwhite.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- Rakefile
+- app/controllers/yarii_cloudinary/application_controller.rb
+- app/controllers/yarii_cloudinary/media_controller.rb
+- app/helpers/yarii_cloudinary/application_helper.rb
+- app/javascript/controllers/cloudinary_browse_media_controller.js
+- app/javascript/controllers/cloudinary_multiple_media_controller.js
+- app/javascript/controllers/cloudinary_single_media_controller.js
+- app/javascript/controllers/index.js
+- app/javascript/packs/application.js
+- app/jobs/yarii_cloudinary/application_job.rb
+- app/styles/index.scss
+- app/views/yarii_cloudinary/application/yarii_cloudinary_head.erb
+- app/views/yarii_cloudinary/media/_browse_thumbnail.html.erb
+- app/views/yarii_cloudinary/media/_form_thumbnail.html.erb
+- app/views/yarii_cloudinary/media/_modal.html.erb
+- app/views/yarii_cloudinary/media/_multiple_form_item.html.erb
+- app/views/yarii_cloudinary/media/index.html.erb
+- app/views/yarii_editor/editor/_cloudinary.html.erb
+- app/views/yarii_editor/editor/_cloudinary_multiple.html.erb
+- config/routes.rb
+- config/webpack/development.js
+- config/webpack/environment.js
+- config/webpack/production.js
+- config/webpack/staging.js
+- config/webpack/test.js
+- config/webpacker.yml
+- db/migrate/20190923000809_create_yarii_sites.rb
+- lib/tasks/yarii_cloudinary_tasks.rake
+- lib/yarii-cloudinary.rb
+- lib/yarii-cloudinary/engine.rb
+- lib/yarii-cloudinary/version.rb
+homepage: https://whitefusion.io
+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: []
+rubygems_version: 3.0.8
+signing_key: 
+specification_version: 4
+summary: Allows images to be loaded and viewed in Yarii via the Cloudinary service
+test_files: []