lato_media 2.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d98dcf681865bedf65da24fa84faf6de698dafcf
+  data.tar.gz: 1b59c4832da05d4f69385656040ebf2f8ec78be3
+SHA512:
+  metadata.gz: c11d7f15b2b5f721605dcb39120f7ccedef89355a81f0fefb49f777d3ae7894762763961758dc740d60751f967e168ad932c2f5e7a5e9da6728a0f67c8d6d7f0
+  data.tar.gz: 5622ff9d9ccea5382d9da718d7d3e7c1d6176db3b029a49a82d131b28dae3847dfb79018a598fc66936ba04359818f498aa04ed15ce1007f660c5ae7a317eb54

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2017 Gregorio Galante
+
+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,27 @@
+# Lato Media
+
+## Installation
+
+Add the lato_media gem on your Gemfile
+
+```ruby
+gem 'lato_media'
+```
+
+Install the gem
+
+```console
+bundle install
+```
+
+Copy the migrations
+
+```console
+rails lato_media:install:migrations
+```
+
+Exec migrations
+
+```console
+bundle exec rake db:migrate
+```

data/Rakefile

@@ -0,0 +1,5 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end

data/app/assets/config/lato_media_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts/lato_media .js
+//= link_directory ../stylesheets/lato_media .css

data/app/assets/javascripts/lato_media/application.js

@@ -0,0 +1,18 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require_tree ./initializers
+//= require_tree ./interfaces
+
+$(window).load(function () {
+  MediaInputsInitializer.init()
+})

data/app/assets/javascripts/lato_media/initializers/Inputs.js

@@ -0,0 +1,62 @@
+var MediaInputsInitializer = (function () {
+
+  function initializeMedia () {
+    $('.inputs-media .inputs-media__input').change(function () {
+      // get utils data
+      var id = $(this).attr('id')
+      var media = $('#inputs-media-' + id)
+      var input = $(media).find('.inputs-media__input')
+      var action = $(media).find('.inputs-media__reload')
+      var value = $(input).attr('value')
+      // generate new url
+      var url = action.attr('href')
+      url = _updateQueryStringParameter(url, 'id', id)
+      url = _updateQueryStringParameter(url, 'value', value)
+      // update url and send request
+      $(action).attr('href', url)
+      $(action).trigger('click')
+    })
+  }
+
+  function initializeGallery () {
+    $('.inputs-gallery .inputs-gallery__input').change(function () {
+      // get utils data
+      var id = $(this).attr('id')
+      var gallery = $('#inputs-gallery-' + id)
+      var input = $(gallery).find('.inputs-gallery__input')
+      var action = $(gallery).find('.inputs-gallery__reload')
+      var value = $(input).attr('value')
+      // generate new url
+      var url = action.attr('href')
+      url = _updateQueryStringParameter(url, 'id', id)
+      url = _updateQueryStringParameter(url, 'value', value)
+      // update url and send request
+      $(action).attr('href', url)
+      $(action).trigger('click')
+    })
+  }
+
+  // This function updates uri params.
+  function _updateQueryStringParameter(uri, key, value) {
+    var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
+    var separator = uri.indexOf('?') !== -1 ? "&" : "?";
+    if (uri.match(re)) {
+      return uri.replace(re, '$1' + key + "=" + value + '$2');
+    }
+    else {
+      return uri + separator + key + "=" + value;
+    }
+  }
+
+  // Init:
+
+  function init () {
+    initializeMedia()
+    initializeGallery()
+  }
+
+  return {
+    init: init
+  }
+
+})()

data/app/assets/javascripts/lato_media/interfaces/MediaSelector.js

@@ -0,0 +1,128 @@
+var MediaSelector = (function () {
+
+  // This is the main function used to active the media selector.
+  // The inputId is the input used by the selector to save the selected data.
+  // The maxItems is a possible option used to set how many images can be selected.
+  function open (inputId, maxItems, event) {
+    if (!maxItems) { maxItems = 1 }
+    if (event) { event.preventDefault() }
+    // listen events on modal
+    _listenLoadIndexAction(inputId, maxItems)
+    _listenCancelButtonAction(inputId)
+    _listenListButtonAction(inputId)
+    _listenAddButtonAction(inputId)
+    // load index for media selector
+    _reloadIndex()
+    // open the modal
+    Modal.open('media__media_selector')
+  }
+
+  // This function closes the media selector and remove all event watcher on it.
+  function close (event) {
+    if (event) { event.preventDefault() }
+    // remove event listener
+    $('#media__media_selector').unbind('loadIndexAction')
+    $('#media__media_selector_cancel_button').unbind('click')
+    // close the modal
+    Modal.close('media__media_selector')
+  }
+
+  // This function reload the index list for the medias.
+  function _reloadIndex () {
+    $('#media__media_selector_load_index').trigger('click')
+  }
+
+  // This functions listens the dom cha on the media selector and run the correct actions.
+  function _listenLoadIndexAction (inputId, maxItems) {
+    $('#media__media_selector').bind('loadIndexAction', function () {
+      // update active medias
+      _updateActiveMedias(inputId)
+      // listen medias click action
+      var medias = $('#media__media_selector .partials__media-selector-index-list .elements-preview')
+      $(medias).click(function () {
+        var mediaId = $(this).attr('data-media-id')
+        // update input with selected medias
+        _updateInput(mediaId, inputId, maxItems)
+        // update view for selected media
+        _updateActiveMedias(inputId)
+      })
+    })
+  }
+
+  // This function listens the click on cancel button to clear the input.
+  function _listenCancelButtonAction (inputId) {
+    $('#media__media_selector_cancel_button').bind('click', function (e) {
+      e.preventDefault()
+      var input = $('#' + inputId)
+      $(input).val('')
+      $(input).trigger('change')
+      close()
+    })
+  }
+
+  // This function listens the click on add button to update the input.
+  function _listenAddButtonAction (inputId) {
+    $('#media__media_selector_add_button').bind('click', function (e) {
+      e.preventDefault()
+      $('#media__media_selector_load_form').trigger('click')
+    })
+  }
+
+  // This function listens the click on add button to update the input.
+  function _listenListButtonAction (inputId) {
+    $('#media__media_selector_list_button').bind('click', function (e) {
+      e.preventDefault()
+      $('#media__media_selector_load_index').trigger('click')
+    })
+  }
+
+  // This function update the input with a specific id to add / remove a media.
+  function _updateInput (mediaId, inputId, maxItems) {
+    // find input informations
+    var input = $('#' + inputId)
+    var inputValue = $(input).val()
+    var selectedMedias = inputValue ? inputValue.split(',') : []
+    // update selected medias
+    var mediaIndex = selectedMedias.indexOf(mediaId)
+    if (mediaIndex > -1) {
+      selectedMedias.splice(mediaIndex, 1)
+    } else {
+      if (maxItems > 1 && selectedMedias.length >= maxItems) {
+        alert('You can not select other medias')
+        return
+      }
+      if (maxItems > 1) {
+        selectedMedias.push(mediaId)
+      } else {
+        selectedMedias = [mediaId]
+      }
+    }
+    // update input value
+    $(input).val(selectedMedias.join())
+    $(input).trigger("change") // manually trigger change event
+  }
+
+  // This function update the style to show active medias.
+  function _updateActiveMedias (inputId) {
+    // find inputs informations
+    var input = $('#' + inputId)
+    var inputValue = $(input).val()
+    var selectedMedias = inputValue.split(',')
+    // update style
+    var medias = $('#media__media_selector .partials__media-selector-index-list .elements-preview')
+    $(medias).each(function () {
+      var mediaId = $(this).attr('data-media-id')
+      if (selectedMedias.indexOf(mediaId) > -1) {
+        $(this).addClass('elements-preview--active')
+      } else {
+        $(this).removeClass('elements-preview--active')
+      }
+    })
+  }
+
+  return {
+    open: open,
+    close: close
+  }
+
+})()

data/app/assets/stylesheets/lato_media/application.scss

@@ -0,0 +1,17 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ */
+
+@import "theme";
+@import "cells/cells";
+@import "partials/partials";
+@import "pages/pages";

data/app/assets/stylesheets/lato_media/cells/_cells.scss

@@ -0,0 +1,2 @@
+@import "elements/elements";
+@import "inputs/inputs";

data/app/assets/stylesheets/lato_media/cells/elements/_elements.scss

@@ -0,0 +1,2 @@
+@import "preview";
+@import "previews";

data/app/assets/stylesheets/lato_media/cells/elements/_preview.scss

@@ -0,0 +1,67 @@
+.elements-preview {
+  border: solid 1px $color_grey;
+  display: block;
+  outline: 0;
+  overflow: hidden;
+
+  &:focus {
+    border-color: $color_main; 
+  }
+}
+
+.elements-preview__container {
+  position: relative;
+  padding-bottom: 100%;
+}
+
+.elements-preview__label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: absolute;
+  left: 50%;
+  bottom: 10px;
+  right: auto;
+  transform: translate(-50%, 0);
+  max-width: 70%;
+  background: rgba($color_white, 0.85);
+  box-shadow: 0px 11px 20px rgba(41, 59, 90, 0.08);
+  padding: 5px;
+  border-radius: 5px;
+}
+
+.elements-preview__icon-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: $color_white;
+}
+
+.elements-preview__icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 50px;
+}
+
+.elements-preview__image {
+
+}
+
+.elements-preview__not-found {
+
+}
+
+.elements-preview__image-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}

data/app/assets/stylesheets/lato_media/cells/elements/_previews.scss

@@ -0,0 +1,23 @@
+.elements-previews {
+  outline: 0;
+}
+
+.elements-previews__list {
+  border-radius: 10px;
+  border: solid 1px $color_grey;
+}
+
+.elements-previews__not-found {
+  border-radius: 10px;
+  border: solid 1px $color_grey;
+  position: relative;
+  width: 100%;
+  height: 200px;
+
+  span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

data/app/assets/stylesheets/lato_media/cells/inputs/_gallery.scss

@@ -0,0 +1,13 @@
+.inputs-gallery {
+
+  &:hover {
+    .elements-previews__list, .elements-previews__not-found {
+      background-color: rgba($color_main, 0.25);
+      transition: all 0.25s;
+    }
+  }
+}
+
+.inputs-gallery__reload {
+  display: none;
+}

data/app/assets/stylesheets/lato_media/cells/inputs/_inputs.scss

@@ -0,0 +1,2 @@
+@import "media";
+@import "gallery";

data/app/assets/stylesheets/lato_media/cells/inputs/_media.scss

@@ -0,0 +1,25 @@
+.inputs-media {
+  
+  &:hover {
+    .elements-preview__container {
+      background-color: $color_main;
+    }
+
+    .elements-preview__image-background, .elements-preview__icon-container {
+      transition: all 0.25s;
+      opacity: 0.75;
+    }
+  }
+}
+
+.inputs-media__preview {
+
+}
+
+.inputs-media__input {
+  display: none;
+}
+
+.inputs-media__reload {
+  display: none;
+}

data/app/assets/stylesheets/lato_media/pages/_medias.scss

@@ -0,0 +1,20 @@
+.medias__medias-index {
+
+}
+
+.medias__dropzone {
+  form {
+    min-height: 350px;
+  }
+}
+
+.medias__dropzone-modal-actions {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: $color_white;
+  text-align: right;
+  padding: 15px;
+  border-top: solid 2px $color_grey;
+}

data/app/assets/stylesheets/lato_media/pages/_pages.scss

@@ -0,0 +1 @@
+@import "medias";

data/app/assets/stylesheets/lato_media/partials/_media_selector.scss

@@ -0,0 +1,53 @@
+.partials__media-selector {
+
+}
+
+.partials__media-selector-actions {
+  display: none;
+}
+
+.partials__media-selector-index-container {
+  padding-bottom: 70px;
+}
+
+.partials__media-selector-index {
+
+}
+
+.partials__media-selector-index-list {
+
+  .elements-preview {
+    cursor: pointer;
+  }
+  
+  .elements-preview--active {
+    border-color: $color_main;
+    background-color: $color_main;
+
+    .elements-preview__image-background, .elements-preview__icon-container {
+      opacity: 0.5;
+    }
+  }
+
+}
+
+.partials__media-selector-index-pagination {
+  margin-top: 10px;
+}
+
+.partials__media-selector-buttons {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: $color_white;
+  text-align: right;
+  padding: 15px;
+  border-top: solid 2px $color_grey;
+}
+
+.partials__media-selector-form {
+  form {
+    min-height: 350px;
+  }
+}

data/app/assets/stylesheets/lato_media/partials/_partials.scss

@@ -0,0 +1 @@
+@import "media_selector";

data/app/assets/stylesheets/lato_media/theme.scss.erb

@@ -0,0 +1,12 @@
+<%
+  colors = core__get_colors
+%>
+
+$color_white: <%= colors[:white] %>;
+$color_black: <%= colors[:black] %>;
+$color_grey: <%= colors[:grey] %>;
+$color_main: <%= colors[:main] %>;
+$color_active: <%= colors[:active] %>;
+$color_danger: <%= colors[:danger] %>;
+$color_warning: <%= colors[:warning] %>;
+$color_success: <%= colors[:success] %>;

data/app/cells/lato_media/elements/preview/cell.rb

@@ -0,0 +1,44 @@
+module LatoMedia
+
+  class Elements::Preview::Cell < LatoCore::Cell
+
+    view_paths << "#{LatoMedia::Engine.root}/app/cells"
+
+    @@requested_args = [:media]
+
+    @@default_args = {
+      class: '',
+      size: 'large',
+      height: nil,
+      url: nil,
+      remote: false,
+      onclick: ''
+    }
+
+    def initialize(args = {})
+      @args = validate_args(
+        args: args,
+        requested_args: @@requested_args,
+        default_args: @@default_args
+      )
+
+      set_conditions
+    end
+
+    def show
+      render 'show.html'
+    end
+
+    private
+
+    def set_conditions
+      if @args[:media].image?
+        @icon = ''
+      else
+        @icon = 'file-o'
+      end
+    end
+
+  end
+
+end

data/app/cells/lato_media/elements/preview/views/general.html.erb

@@ -0,0 +1,14 @@
+<div
+  class="elements-preview__container elements-preview__not-found"
+  <% if @args[:height] %>
+    style="height: <%= @args[:height] %>px; padding-bottom : 0;"
+  <% end %>
+>
+  <div class="elements-preview__icon-container">
+    <div class="elements-preview__icon">
+      <i class="fa fa-<%= @icon %>" aria-hidden="true"></i>
+    </div>
+  </div>
+
+  <div class="elements-preview__label"><%= @args[:media].title %></div>
+</div>

data/app/cells/lato_media/elements/preview/views/image.html.erb

@@ -0,0 +1,10 @@
+<div
+  class="elements-preview__container elements-preview__image"
+  <% if @args[:height] %>
+    style="height: <%= @args[:height] %>px; padding-bottom : 0;"
+  <% end %>
+>
+  <div class="elements-preview__image-background" style="background-image: url(<%= @args[:media].attachment.url(@args[:size]) %>)"></div>
+
+  <div class="elements-preview__label"><%= @args[:media].title %></div>
+</div>

data/app/cells/lato_media/elements/preview/views/not_found.html.erb

@@ -0,0 +1,15 @@
+<div
+  class="elements-preview__container elements-preview__not-found"
+  <% if @args[:height] %>
+    style="height: <%= @args[:height] %>px; padding-bottom : 0;"
+  <% end %>
+>
+
+  <div class="elements-preview__icon-container">
+    <div class="elements-preview__icon">
+      <i class="fa fa-ban" aria-hidden="true"></i>
+    </div>
+  </div>
+
+  <div class="elements-preview__label"><%= LANGUAGES[:lato_media][:mixed][:file_not_present] %></div>
+</div>

data/app/cells/lato_media/elements/preview/views/show.html.erb

@@ -0,0 +1,33 @@
+<% if @args[:url] %>
+  <a
+    href="<%= @args[:url] %>"
+    class="elements-preview <%= @args[:class] %>"
+    onclick="<%= @args[:onclick] %>"
+    data-media-id="<%= @args[:media].id %>"
+    <% if @args[:remote] %>
+      data-remote="true"
+    <% end %>
+  >
+<% else %>
+  <div
+    class="elements-preview <%= @args[:class] %>"
+    onclick="<%= @args[:onclick] %>"
+    data-media-id="<%= @args[:media].id %>"
+  >
+<% end %>
+
+  <% if @args[:media].exists? %>
+    <% if @args[:media].image? %>
+      <%= render './image.html' %>
+    <% else %>
+      <%= render './general.html' %>
+    <% end %>
+  <% else %>
+    <%= render './not_found.html' %>
+  <% end %>
+
+<% if @args[:url] %>
+  </a>
+<% else %>
+  </div>
+<% end %>