ds_media_library 0.1.0 → 0.2.0

data/app/assets/stylesheets/mixins/_buttons.sass

@@ -0,0 +1,57 @@
+=dsml-button( $bg: $primaryColor, $text-color: #fcfcfc, $font-size: 1.2em, $hover: true, $fa: false )
+  display: inline-block
+  font-size: $font-size
+  font-weight: 700
+  line-height: 3.0em
+  color: $text-color
+  border: 1px solid darken( $bg, 6% )
+  background-color: $bg
+  background: linear-gradient( $bg, darken( $bg, 5% ) )
+  border-radius: 2px
+  padding: 0 15px
+  cursor: pointer
+  text-align: center
+  text-decoration: none
+  margin: 0px
+  cursor: default
+  text-transform: uppercase
+  @if $hover
+    cursor: pointer
+    &:hover
+      background: darken( $bg, 4% )
+      box-shadow: darken( $bg, 10% ) 0 0 5px 0 inset
+      color:  lighten( $text-color, 6% )
+  @if $fa
+    @extend .fa-#{$fa}
+    &:before
+      @extend .fa
+      margin-right: 10px
+
+// input wrapper buttons
+
+=dsml-input-button($bg: $primaryColor, $text-color: #fcfcfc, $fa: false, $size: 1.2em, $fa-size: 1.2em)
+  +dsml-button($bg, $text-color)
+  padding: 0
+  line-height: 1
+  input, button
+    font-size: $size
+    border: none
+    background: none
+    padding: 0 20px
+    line-height: 3.0em
+    cursor: pointer
+    color: $text-color
+    font-weight: 700
+    text-transform: uppercase
+  @if $fa
+    @extend .fa
+    @extend .fa-#{$fa}
+    input, button
+      padding-left: 45px
+    &:before
+      @extend .fa
+      position: absolute
+      top: 50%
+      margin-top: -0.5em
+      left: 20px
+      font-size: $fa-size

data/app/assets/stylesheets/mixins/_icons.sass

@@ -0,0 +1,36 @@
+// Icons with hidden text
+
+=dsml-icon($fa, $size: 1.4em)
+  display: inline-block
+  margin: 0 6px
+  text-align: left
+  position: relative
+  font-size: $size
+  width: 1em
+  text-indent: -9999px
+  color: #4f4f4f
+  @extend .fa
+  @extend .fa-#{$fa}
+  &:before
+    text-indent: 0
+    position: absolute
+    top: 50%
+    right: 50%
+    margin: -0.5em -0.5em 0 0
+    z-index: 2
+  &:hover
+    &:before
+      color: $primaryColor
+
+
+// Icons with text
+
+=dsml-icon_text($fa, $font-size: 1.3em)
+  display: inline-block
+  margin: 0 20px 0 0
+  @extend .fa-#{$fa}
+  font-size: $font-size
+  &:before
+    margin-right: 4px
+    @extend .fa
+

data/app/assets/stylesheets/mixins/_notification-text.sass

@@ -0,0 +1,23 @@
+=notification-text( $color, $fa )
+  margin: 10px 0
+  position: relative
+  clear: both
+  padding: 10px 10px 10px 40px
+  border: 1px dashed $color
+  color: $color
+  font-size: 1.3em
+  font-style: italic
+  line-height: 1.4em
+  border-radius: 2px
+  @extend .fa-#{$fa}
+  &:before
+    @extend .fa
+    font-size: 1.8em
+    position: absolute
+    left: 10px
+    top: 50%
+    margin-top: -0.5em
+  ul
+    font-size: 1em
+    list-style: inside circle
+

data/app/controllers/ds_media_library/folders_controller.rb

@@ -2,9 +2,14 @@ module DSMediaLibrary
   class FoldersController < ApplicationController
     expose :folder
 
+    def index
+      helper = FormHelper::MediaLibrary.from_params(params)
+      render "ds_media_library/form_helper/show", locals: { helper: helper}, layout: false
+    end
+
     def new
       @folder = DSMediaLibrary::Folder.new
-      render "ds_media_library/resources/folder_form"
+      render "ds_media_library/manage/folders/form"
     end
 
     def create
@@ -14,7 +19,7 @@ module DSMediaLibrary
 
     def edit
       @folder = DSMediaLibrary::Folder.find(params[:id])
-      render "ds_media_library/resources/folder_form"
+      render "ds_media_library/manage/folders/form"
     end
 
     def update

data/app/controllers/ds_media_library/resources_controller.rb

@@ -5,11 +5,12 @@ module DSMediaLibrary
     def index
       @root = DSMediaLibrary::Folder.root
       @folders = folders_with_children
+      render "ds_media_library/manage/index"
     end
 
     def new
       @resource = DSNode::Resource.new
-      render :form
+      render "ds_media_library/manage/resources/form"
     end
 
     def create
@@ -20,7 +21,7 @@ module DSMediaLibrary
     end
 
     def edit
-      render :form
+      render "ds_media_library/manage/resources/form"
     end
 
     def update

data/{lib → app/helpers}/ds_media_library/form_helper.rb

@@ -3,13 +3,28 @@ require "active_support/number_helper"
 module DSMediaLibrary
   module FormHelper
     def media_library field, label: field.to_s.humanize, multiple: false, optional: false, dimensions: nil, helptext: nil, preview: true, required: false, &block
-      helper = MediaLibrary.new(object.send(field), field, label, multiple, optional, dimensions, helptext, preview, required, block)
-      @template.render "ds_media_library/form_helper", form: self, helper: helper
+      selected_ids = Array(object.send(field)).map(&:id)
+      helper = MediaLibrary.new(selected_ids, field, label, multiple, optional, dimensions, helptext, preview, required)
+      @template.render "ds_media_library/form_helper/media_library_helper", form: self, helper: helper, &block
     end
 
-    class MediaLibrary < Struct.new(:object, :field, :label, :multiple, :optional, :dimensions, :helptext, :preview, :required, :block)
-      def ids
-        Array(object).map(&:id)
+    class MediaLibrary < Struct.new(:ids, :field, :label, :multiple, :optional, :dimensions, :helptext, :preview, :required)
+      def self.from_params params
+        new(
+          Array(params[:ids] || []).map(&:to_i),
+          params[:field],
+          params[:label],
+          params[:multiple] == "true",
+          params[:optional] == "true",
+          params[:dimensions],
+          params[:helptext],
+          params[:preview] == "true",
+          params[:required] == "true",
+        )
+      end
+
+      def selected_resources
+        DSNode::Resource.find(ids)
       end
 
       def single_field
@@ -24,14 +39,6 @@ module DSMediaLibrary
         end
       end
 
-      def remove_field_name
-        if multiple
-          :"remove_#{single_field}_ids"
-        else
-          :"remove_#{field}"
-        end
-      end
-
       def field_id_name
         if multiple
           :"#{single_field}_ids"
@@ -40,6 +47,10 @@ module DSMediaLibrary
         end
       end
 
+      def field_type
+        multiple ? "checkbox" : "radio"
+      end
+
       def html_id
         "media-modal-#{field}"
       end
@@ -72,10 +83,6 @@ module DSMediaLibrary
         root.resources
       end
 
-      def original_file_name
-        object.original_file_name if object.present?
-      end
-
       private
 
       def number_with_delimiter number

data/app/views/ds_media_library/form_helper/_folder.html.slim

@@ -0,0 +1,10 @@
+li
+  input.dsml-expand-input type="checkbox" id="#{helper.field}-folder-#{folder.id}"
+  .dsml-media-container
+    label.dsml-expand-label.dsml-folder-link for="#{helper.field}-folder-#{folder.id}" = folder.name
+
+  - if folder.children.any? || folder.resources.any?
+    ul.dsml-media-nest
+      = render collection: folder.children, partial: "ds_media_library/form_helper/folder", as: :folder, locals: { helper: helper }
+      = render collection: folder.resources, partial: "ds_media_library/form_helper/resource", as: :resource, locals: { helper: helper }
+

data/app/views/ds_media_library/form_helper/_media_library_helper.html.slim

@@ -0,0 +1,46 @@
+.media-library data-media-library=helper.html_id data-media-library-ids=helper.ids required=helper.required
+  = form.label helper.file_field_name, helper.label, class: helper.label_css_class
+
+  - if helper.helptext
+    .ratio-text = helper.helptext
+
+  label.dsml-media-button for=helper.html_id Media library
+  em or
+  = form.file_field helper.file_field_name, multiple: helper.multiple
+
+  input.dsml-modal-input type="checkbox" id=helper.html_id
+  .dsml-modal-wrapper
+    .dsml-modal-bg
+    .dsml-modal-content
+      label.dsml-modal-close for=helper.html_id
+        .borders
+      .media-wrapper data-load-url=ds_media_library.folders_path(helper.to_h)
+        p Loading...
+        - helper.selected_resources.each do |resource|
+          input.hidden name="ds_media_library" type="checkbox" value=resource.id checked=true data=resource.attributes
+
+  dl.dsml-playlist-media id="dsml-selected-media-#{helper.html_id}"
+
+  script#dsml-media-preview-template type="text/x-html-template"
+    dfn.dsml-preview-form
+      .dsml-preview-wrapper
+        - if helper.preview
+          | <{{type}} src="{{url}}" controls=true />
+
+        - if helper.multiple
+          = form.check_box helper.field_id_name, { multiple: true, checked: true, id: "#{helper.field_id_name}_{{id}}" }, "{{id}}", nil
+          label for="#{helper.field_id_name}_{{id}}"
+            span Remove #{helper.label.downcase.singularize} {{index}}
+
+        - else
+          = form.check_box helper.field_id_name, { checked: true }, "{{id}}", ""
+          - if helper.optional
+            = form.label helper.field_id_name do
+              span Remove #{helper.label.downcase}
+
+        = yield if block_given?
+
+        dt
+          figcaption
+            | {{resourcesoriginalfilename}}
+

data/app/views/ds_media_library/form_helper/_resource.html.slim

@@ -0,0 +1,6 @@
+li.dsml-resource class=("hidden" if resource.hidden?)
+  .dsml-media-container
+    label.dsml-expand-label
+      input.dsml-modal-input.media-choice name="ds_media_library" type=helper.field_type value=resource.id checked=helper.ids.include?(resource.id) data=resource.attributes
+      span.dsml-media-link alt=resource.original_file_name = resource.original_file_name
+

data/app/views/ds_media_library/form_helper/show.html.slim

@@ -0,0 +1,10 @@
+.dsml-info-text Choose a media file below to associate with this field.  You can manage media in the <a href="/media_library">Media Library</a>. <br />Note that changing a file in the library will update it across all associated media fields in this app.
+
+= link_to "Open all folders", "#", class: "dsml-open-all-label", data: { "dsml-toggle-all-checkboxes" => ".dsml-expand-input" }
+
+label.hidden for="dsml-search-media" Search media library
+input.dsml-text#dsml-search-media type="text" placeholder="Type keywords to search media" data-dsml-search-media=".dsml-resource"
+ul.dsml-media-nav#dsml-media-tree
+  = render collection: helper.root_folders, partial: "ds_media_library/form_helper/folder", as: :folder, locals: { helper: helper }
+  = render collection: helper.root_resources, partial: "ds_media_library/form_helper/resource", as: :resource, locals: { helper: helper }
+

data/app/views/ds_media_library/manage/folders/_folder.html.slim

@@ -0,0 +1,14 @@
+li.dsml-folder
+  input type="checkbox" class="dsml-expand-input" id="folder-#{folder.id}"
+  .dsml-media-container
+    label.dsml-expand-label.dsml-folder-link for="folder-#{folder.id}" = folder.name
+    .dsml-media-links
+      = link_to "Edit folder", [:edit, folder], class: "dsml-edit-icon", title: "Edit folder"
+      = link_to "Delete folder", folder, method: :delete, class: "dsml-delete-icon", title: "Delete folder",
+        data: { confirm: "Are you sure you want to delete this folder? This will move any folders and resources it may contain up into its parent folder." }
+
+  - if folder.children.any? || folder.resources.any?
+    ul.dsml-media-nest
+      = render collection: folder.children, partial: "ds_media_library/manage/folders/folder"
+      = render collection: folder.resources, partial: "ds_media_library/manage/resources/resource"
+

data/app/views/ds_media_library/{resources/folder_form.html.slim → manage/folders/form.html.slim}

@@ -1,5 +1,5 @@
 = content_for :breadcrumbs do
-  ul.breadcrumb-nav
+  ul.dsml-breadcrumb-nav
     li = link_to "Media Library", :root
     li
       = folder.new_record? ? "New" : "Edit"
@@ -9,11 +9,11 @@
 = form_for folder do |form|
   fieldset
     .field
-      = form.label :parent_id, "Parent folder", class: "optional"
+      = form.label :parent_id, "Parent folder", class: "dsml-optional"
       = form.collection_select :parent_id, form.object.all_folders, :id, :name, include_blank: " -- none -- "
     .field
       = form.label :name, "Folder name"
-      = form.text_field :name, class: "name-input"
+      = form.text_field :name, class: "dsml-name-input"
 
-  = render "shared/submit", name: "folder"
+  = render "ds_media_library/manage/submit", name: "folder"
 

data/app/views/ds_media_library/manage/index.html.slim

@@ -0,0 +1,30 @@
+.dsml
+  = content_for :breadcrumbs do
+    ul.dsml-breadcrumb-nav
+      li Media Library
+
+  = form_tag nil, method: :put do
+    input type="checkbox" id="dsml-select-media"
+    .dsml-table-buttons-flex
+      .dsml-buttons-left
+        = link_to "Open all folders", "#", class: "dsml-open-all-label", data: { "dsml-toggle-all-checkboxes" => ".dsml-expand-input" }
+        label.dsml-select-media-button for="dsml-select-media" Select multiple media
+        .field.dsml-move-selected
+          label.dsml-move-selected-label for="dsml-folder-id" Move selected to:
+          select#dsml-folder-id name="folder_id"
+            - folders.each do |folder|
+              option value=folder.id
+                = "- " * folder.depth
+                = folder.name
+          button.dsml-move-button Move
+
+      .dsml-buttons-right
+        = link_to "Add new folder", [:new, :folder], class: "dsml-add-button"
+        = link_to "Add new media", [:new, :resource], class: "dsml-add-button"
+
+    label.hidden for="dsml-search-media" Search media library
+    input.dsml-text#dsml-search-media type="text" placeholder="Type keywords to search media" data-dsml-search-media=".dsml-resource"
+    ul.dsml-media-nav#dsml-media-tree
+      = render collection: root.children, partial: "ds_media_library/manage/folders/folder"
+      = render collection: root.resources, partial: "ds_media_library/manage/resources/resource"
+

data/app/views/{shared → ds_media_library/manage/resources}/_image_preview.html.slim

@@ -1,8 +1,8 @@
 - if !defined?(preview) then preview = true
 
 - if image.present?
-  dfn.preview-form
-    .preview-wrapper
+  dfn.dsml-preview-form
+    .dsml-preview-wrapper
       - if preview
         - if image.video?
           = video_tag image.url, controls: true

data/app/views/ds_media_library/manage/resources/_resource.html.slim

@@ -0,0 +1,12 @@
+li.dsml-resource class=("hidden" if resource.hidden?)
+  .dsml-media-container
+    input.dsml-move-input type="checkbox" name="resource_ids[]" id="media-#{resource.id}" value=resource.id
+    label.dsml-expand-label for="media-#{resource.id}"
+      = link_to resource.original_file_name, edit_resource_path(resource), class: resource.css_class, alt: resource.original_file_name
+      span.dsml-move-span.dsml-media-link alt=resource.original_file_name = resource.original_file_name
+
+    .dsml-media-links
+      = link_to "Edit media", edit_resource_path(resource), class: "dsml-edit-icon", title: "Edit media"
+      = link_to "Delete media", resource_path(resource), method: :delete, class: "dsml-delete-icon", title: "Delete media",
+        data: { confirm: "Are you sure you want to delete this media item? Note that this will just remove it from the media library." }
+

data/app/views/ds_media_library/{resources → manage/resources}/form.html.slim

@@ -1,5 +1,5 @@
 = content_for :breadcrumbs do
-  ul.breadcrumb-nav
+  ul.dsml-breadcrumb-nav
     li = link_to "Media Library", :root
     li
       = resource.new_record? ? "New" : "Edit"
@@ -25,7 +25,7 @@
         = form.label :file, "Upload media"
         = form.file_field :file, multiple: resource.new_record?
         - unless form.object.new_record?
-          = render "shared/image_preview", image: form.object
+          = render "ds_media_library/manage/resources/image_preview", image: form.object
 
-  = render "shared/submit", name: "media"
+  = render "ds_media_library/manage/submit", name: "media"
 

data/bin/server

@@ -1,5 +1,5 @@
 #!/usr/bin/env ruby
 require "rack"
 require_relative "../dummy/app"
-Rack::Server.start(app: Dummy::App)
+Rack::Server.start(app: Dummy::App, Host: "0.0.0.0", Port: 3000)
 

data/bin/setup

@@ -1,5 +1,4 @@
 #!/usr/bin/env bash
 set -euo pipefail
-IFS=$'\n\t'
-set -vx
+gem install bundler --conservative
 bundle check || bundle install

data/ds_media_library.gemspec

@@ -41,4 +41,5 @@ Gem::Specification.new do |spec|
   spec.add_dependency "coffee-rails"
   spec.add_dependency "jquery-rails"
   spec.add_dependency "jquery-ui-rails"
+  spec.add_dependency "font-awesome-rails"
 end

data/dummy/app.rb

@@ -1,53 +1,6 @@
 require 'bundler/setup'
 require "rails/all"
 require "ds_media_library"
-
-module Dummy; end
-
-class Dummy::App < Rails::Application
-  config.secret_key_base = "test"
-  config.eager_load = false
-  config.logger = Logger.new("/dev/stdout")
-  config.logger = Logger.new("/dev/null")
-end
-
-ENV["DATABASE_URL"] = "sqlite3:tmp/test.sqlite3"
-
-Dummy::App.initialize!
-
-class ApplicationController < ActionController::Base
-  def self.expose *methods
-    methods.each do |method|
-      attr_reader method
-      helper_method method
-    end
-  end
-
-  layout "test"
-
-  def show
-    @widget = Widget.first_or_create!
-  end
-
-  def update
-    Widget.first_or_create!.update! params.require(:widget).permit!
-    redirect_to "/", notice: "Widget updated"
-  end
-end
-
-Dummy::App.routes.draw do
-  mount DSMediaLibrary::Engine => "/media_library"
-  root to: "application#show"
-  patch "/" => "application#update"
-end
-
-# app's soft delete leaves files in place, so clean them up
-at_exit do
-  begin
-    Rails.public_path.rmtree
-  rescue Errno::ENOENT
-  end
-end
-
+require_relative "./config"
 require_relative "./database"
 require_relative "./views"

data/dummy/config.rb

@@ -0,0 +1,55 @@
+module Dummy; end
+
+class Dummy::App < Rails::Application
+  config.secret_key_base = "test"
+  config.eager_load = false
+  config.logger = Logger.new("/dev/stdout")
+
+  initializer "log level" do
+    Rails.logger.level = Logger::WARN
+  end
+end
+
+ENV["DATABASE_URL"] = "sqlite3:tmp/test.sqlite3"
+
+Dummy::App.initialize!
+
+class ApplicationController < ActionController::Base
+  def self.expose *methods
+    methods.each do |method|
+      attr_reader method
+      helper_method method
+    end
+  end
+
+  layout "test"
+
+  def show
+    @widget = Widget.first_or_create!
+  end
+
+  def update
+    widget = Widget.first_or_create!
+    widget_params = params.require(:widget).permit!
+    widget.update! widget_params
+
+    DSNode::Resource.update(params[:resources].keys, params[:resources].values) if params[:resources]
+
+    redirect_to "/", notice: "Widget updated"
+  end
+end
+
+Dummy::App.routes.draw do
+  mount DSMediaLibrary::Engine => "/media_library"
+  root to: "application#show"
+  patch "/" => "application#update"
+end
+
+# app's soft delete leaves files in place, so clean them up
+at_exit do
+  begin
+    Rails.public_path.rmtree
+  rescue Errno::ENOENT
+  end
+end
+

data/dummy/database.rb

@@ -13,6 +13,9 @@ ActiveRecord::Migration.suppress_messages do
     create_table "widgets", id: :integer, force: :cascade, options:  "ENGINE=InnoDB DEFAULT CHARSET=utf8" do |t|
       t.integer "cat_picture_id"
       t.string "dog_picture_ids"
+      t.string "baby_picture_id"
+      t.string "baby_name"
+      t.string "embarassing_picture_ids"
     end
 
     create_table "folders", id: :integer, force: :cascade, options: "ENGINE=InnoDB DEFAULT CHARSET=utf8" do |t|
@@ -44,6 +47,7 @@ ActiveRecord::Migration.suppress_messages do
       t.datetime "updated_at", null: false
       t.integer "folder_id"
       t.boolean "hidden", default: false
+      t.string "context"
     end
   end
 end
@@ -51,5 +55,7 @@ end
 class Widget < ActiveRecord::Base
   ds_resource :cat_picture
   belongs_to_many_ds_resources :dog_pictures
+  ds_resource :baby_picture
+  belongs_to_many_ds_resources :embarassing_pictures
 end