oxen_media 0.0.6 → 0.3.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c7273afa8eefee9afc142d6c7c766d95949469fe
-  data.tar.gz: 4ec25f27d0c7d62d86f1e6c65def1b56897d7fd1
+  metadata.gz: 969f6e62d5ffc5306313af425df4ad912e833635
+  data.tar.gz: 38d1dab4be570218ac019416769bbc0b0bfd6db4
 SHA512:
-  metadata.gz: 1341019df0518f36be9fb803a97797cfcb87ab20da2d2bc0365ec356bb6a000ef5da8df6ba3c4e03fdf51c85da98dee892aaca3a72006f91c9f62ec3464b4df6
-  data.tar.gz: 2ec4a44ac2bb5b7bf1431f4f1866d224242978cf0f0a4f6806c1f8efb0529c69792e8cbce951ff04aa86ec2239a104c380302bac2c11e80bb626a1be1937c736
+  metadata.gz: f36442f070349750f997d8579c6900551572c0ca1dbf22b29d81544efad8ef441ff8f337ff11c1d7e645e2204d4f4a2d4a04efe24beb4f2de5915dcda71e6a25
+  data.tar.gz: 97ae113d18282e2d85dd2e9a61f6a1c875c1058c2f2369d1ec252d28f5058151b9d3643ecd7ff7c26527d572362bc035f943d98703d2b93f74c70891955925c2

data/app/assets/javascripts/components/dropzone.js.jsx.coffee

@@ -0,0 +1,298 @@
+{ div, input } = React.DOM
+
+BLANK_FUNCTION = () ->
+
+
+class @DropZone extends React.Component
+  constructor: (props) ->
+    super props
+    @state =
+      entity: props.entity
+      key: props.key
+      record: props.record
+      reader: null
+      shared: new App.Shared()
+      url: props.url
+
+      # filesID: {}
+
+  @propTypes =
+    # record: React.PropTypes.node
+    entity: React.PropTypes.string
+    key: React.PropTypes.number
+    id: React.PropTypes.string
+    classes: React.PropTypes.string
+    url: React.PropTypes.string
+    onDragStart: React.PropTypes.func
+    onDragEnter: React.PropTypes.func
+    onDrop: React.PropTypes.func
+    disabled: React.PropTypes.bool
+
+  @defaultProps: ->
+    disabled: true
+    entity: 'stock_item'
+    record: ''
+    classes: ''
+    id: 'dropzone'
+    key: 0
+    onDragStart: BLANK_FUNCTION
+    onDragEnter: BLANK_FUNCTION
+    onDrop: BLANK_FUNCTION
+
+  # reader = () ->
+  #
+  # currentFile: (f) =>
+  #   #
+  #   # if (i>-1)
+  #   #   # remove element
+  #   #   ids = @state.filesID.slice()    # copy array
+  #   #   ids.splice(i, 1)                # remove element
+  #   #   @setState filesID: ids          # update state
+  #   # else
+  #   #   @setState filesID:
+
+  progressPercentElement = ''
+
+  abortRead: () =>
+    @reader.abort()
+
+  preventDefaultClick: (e) =>
+    e.preventDefault()
+    e.stopPropagation()
+
+  onDragStart: (e) =>
+    @preventDefaultClick(e)
+
+  onDragOver: (e) =>
+    @preventDefaultClick(e)
+    # if(this.containerAcceptsDropData(e.dataTransfer.types)) { e.preventDefault(); }
+    # var over = parseInt(e.currentTarget.dataset.key);
+    # if(e.clientY - e.currentTarget.offsetTop > e.currentTarget.offsetHeight / 2) { over++; }
+    # if(over !== this.state.hoverOver) { this.setState({ hoverOver: over }); }
+    e.dataTransfer.dropEffect = 'copy';
+    return false;
+
+  onDragEnter: (e) =>
+    @preventDefaultClick(e)
+    $('#drop_zone_upload_bay').addClass('hovering_files')
+
+  onDragLeave: (e) =>
+    @preventDefaultClick(e)
+    $('#drop_zone_upload_bay').removeClass('hovering_files')
+
+  onDrop: (e) =>
+    @preventDefaultClick(e)
+    dt = e.dataTransfer
+    @handleFiles(dt.files)
+
+  clickDropZone: (e) =>
+    $('#file_browser').trigger('click')
+
+  changeDropZone: (e) =>
+    dt = e.target
+    @handleFiles(dt.files)
+
+
+  # .drop_zone.delimiter
+  #   .drop_zone.upload_bay.stitched
+  #     .drop_zone.file_browser
+  #       %input{ type: "file", multiple: true, id: "file_browser" }
+  #     .drop_zone.user_notice
+  #       %span
+  #         træk dine filer her; eller tryk og vælg
+  #   .drop_zone.file_hangar
+  #
+  # :coffeescript
+  #   $('.drop_zone.user_notice').on 'dragenter', (e) =>
+  #     $('.drop_zone.upload_bay').addClass 'hovering_files'
+  #   $('.drop_zone.user_notice').on 'dragleave', (e) =>
+  #     $('.drop_zone.upload_bay').removeClass 'hovering_files'
+  #   $('.drop_zone.user_notice').on 'click', (e) =>
+  #     $('#file_browser').trigger 'click'
+
+  render: ->
+
+    photos = React.createElement( Photos, url: @props.url, pollInterval: 2000, id: 'existing_photos', classes: 'drop_zone existing_file_hangar', entity: @props.entity )
+
+    if @props.disabled
+      div
+        className: 'drop_zone file_hangar row'
+        id: 'photos'
+        photos
+    else
+      try
+
+        div
+          className: 'drop_zone delimiter'
+          div
+            className: 'drop_zone upload_bay row stitched'
+            id: 'drop_zone_upload_bay'
+            onClick: @clickDropZone
+            div
+              className: 'drop_zone file_browser'
+              input
+                className: "file_browser"
+                type: "file"
+                id: "file_browser"
+                name: "files"
+                multiple: 'true'
+                onChange: @changeDropZone
+            div
+              className: 'drop_zone user_notice'
+              onDragOver: @onDragOver
+              onDragEnter: @onDragEnter
+              onDragLeave: @onDragLeave
+              # onClick: @clickDropZone
+              onDrop: @onDrop
+              'træk dine billeder herover og slip dem; eller klik her og vælg dem!'
+            div
+              className: "progress"
+              id: "progress_bar"
+              div
+                className: "percent"
+                '0%'
+          div
+            className: 'drop_zone file_hangar row'
+            id: 'photos'
+            photos
+
+      catch
+        div
+          className: ''
+          @state.err
+
+  handleFiles: (files) =>
+    @bindDeleteActions()
+    count = 0
+    for file in files
+      count=count+1
+      # Only process image files.
+      continue if (!file.type.match('image.*'))
+
+      file.id=Date.now() + count
+
+      # place file in the dropzone
+      @placeFileInDOM(file)
+
+      # start uploading it
+      # @uploadFile(file)
+
+
+  bindDeleteActions: =>
+    $(document.body).unbind('click.delete_photo')
+    $(document.body).on 'click.delete_photo', 'i.delete.file_upload', @handleDelete
+
+  handleDelete: (e) =>
+    e.preventDefault()
+    id=$(e.target).closest('a').next('input').val()
+
+    jqxhr = $.ajax
+      method: 'DELETE'
+      url: "/photos/" + id + ".js"
+      dataType: 'html'
+    jqxhr.done (r) =>
+      $(e.target).closest('.card').fadeOut 'slow', () =>  #animate({ "opacity": "0" }, "slow" )
+        $(e.target).closest('.card').remove()
+    jqxhr.fail (e,msg) =>
+      swal "Fejl!", "Det var ikke muligt at slette billedet - fejlen er:\n" + msg, "error"
+
+  uploadFile: (f) =>
+
+    formData = new FormData()
+    formData.append 'photo[image]', f
+    $('#drop_zone_upload_bay').removeClass('hovering_files').addClass('loading_files')
+    jqxhr = $.ajax
+      url : '/photos.js'
+      type : 'POST'
+      data : formData
+      processData: false
+      contentType: false
+      dataType: 'html'
+
+    .done (r) =>
+      $('#drop_zone_upload_bay').removeClass('loading_files')
+      $('#photos_'+f.id+'_id').val(r.replace(/\s/g, ""))
+
+    .fail (e,msg) =>
+      $('#photos_'+f.id+'_id').closest('.card').remove()
+      $('#drop_zone_upload_bay').removeClass('loading_files')
+      $('#drop_zone_upload_bay').addClass('error_loading_files')
+      setTimeout(@removeLoadError,2000)
+      swal "Fejl!", "Der opstod desværre en fejl - beskrivelsen er:\n" + msg, "error"
+
+  errorHandler: (evt) =>
+    switch evt.target.error.code
+      when evt.target.error.NOT_FOUND_ERR     then alert('File Not Found!')
+      when evt.target.error.NOT_READABLE_ERR  then alert('File is not readable')
+      when evt.target.error.ABORT_ERR         then console.log 'aborted!! line 227 in dropzone.js.jsx.coffee'
+      else alert('An error occurred reading this file.')
+
+  removeLoadError: (e) =>
+    $('#drop_zone_upload_bay').removeClass('error_loading_files')
+
+  showProgress: (p) =>
+    progressPercentElement = document.querySelector('.percent')
+    progressPercentElement.style.width = p + '%'
+    progressPercentElement.textContent = p + '%'
+    if p>99
+      @state.shared.fadeItOut document.getElementById('progress_bar')
+
+  updateProgress: (e) =>
+    # e is an ProgressEvent.
+    percentLoaded = 0
+    if (e.lengthComputable)
+      percentLoaded = Math.round((e.loaded / e.total) * 100)
+      # Increase the progress bar length.
+      @showProgress(percentLoaded) if (percentLoaded < 100)
+      @showProgress(100) if (percentLoaded > 99)
+
+
+  placeFileInDOM: (file) =>
+    # Reset progress indicator on new file selection.
+    # @updateProgress ''
+
+    @reader = new FileReader()
+    # @currentFile(file)
+
+    @reader.onerror = @errorHandler
+    @reader.onprogress = @updateProgress
+    @reader.onabort = (e) =>
+      alert('File read cancelled')
+
+    @reader.onloadstart = (e) =>
+      document.getElementById('progress_bar').className = 'loading'
+
+    @reader.onload = (e) =>
+
+      # Render thumbnail.
+      img = document.createElement('div')
+      img.className = "col sl12 m6 l3"
+      img.innerHTML = [ '<div class="card">',
+        '<div class="card-image waves-effect waves-block waves-light">',
+          '<div class="progress fileupload-progress fade" style="display: none">',
+            '<div class="determinate" style="width: 0%"></div>',
+          '</div>',
+          '<img class="thumb" src="', e.target.result, '" title="', escape(file.name), '"/>',
+          '<div class="row">',
+            '<div class="col s2">',
+              '<a class="delete file-upload" href="#!">',
+                '<i class="material-icons small delete file_upload red-text">',
+                  'delete',
+                '</i> </a>',
+            '</div>',
+            '<div class="col s10">',
+              window.build_drop_zone_photo file, @props.entity
+            '</div>',
+          '</div>',
+        '</div>'
+        ].join('')
+
+      document.getElementById('photos').appendChild(img, null)
+      @uploadFile file
+
+      # Ensure that the progress bar displays 100% at the end.
+      @showProgress(100)
+
+
+    # Read in the image file as a data URL.
+    @reader.readAsDataURL(file)

data/app/assets/javascripts/components/photocard.js.jsx.coffee

@@ -0,0 +1,77 @@
+{ div, img, input, a, i, label } = React.DOM
+
+class @PhotoCard extends React.Component
+  constructor: (props) ->
+    super props
+    @state =
+      key: props.key
+      entity: props.entity
+      record: props.record
+
+  @propTypes =
+    # record: React.PropTypes.node
+    key: React.PropTypes.number
+    entity: React.PropTypes.string
+
+  @defaultProps: ->
+    record: ''
+    key: 0
+    entity: 'stock_item'
+
+  show_on_new: () =>
+    if @props.record.id == 0
+      ''
+    else
+      'hide'
+
+  handleDelete: (e) =>
+    e.preventDefault()
+    jqxhr = $.ajax
+      method: 'DELETE'
+      url: "/photos/#{ @state.record.id }"
+      dataType: 'html'
+    jqxhr.done () =>
+      $(e.target).closest('.card').fadeOut 'slow', () =>  #animate({ "opacity": "0" }, "slow" )
+        @props.deleteRecord @state.record
+    jqxhr.fail (e,msg) =>
+      swal "Fejl!", "Det var ikke muligt at slette billedet - fejlen er:\n" + msg, "error"
+
+  render: ->
+
+    div
+      className: "col s12 m6 l3"
+      div
+        className: "card"
+        div
+          className: "card-image waves-effect waves-block waves-light"
+          div
+            className: "progress fileupload-progress fade"
+            style: display: 'none'
+            div
+              className: "determinate"
+              style: width: '0%'
+          img
+            className: "activator"
+            id: @props.key
+            src: @props.record.image.url
+          div
+            className: "row"
+            div
+              className: "col s2"
+              a
+                className: "delete file-upload"
+                href: "#!"
+                i
+                  className: "material-icons small file_upload red-text"
+                  onClick: @handleDelete
+                  'delete'
+            div
+              className: "col s10"
+              input
+                className: "files_uploaded"
+                id: "photos_#{@props.record.id}_id"
+                type: "hidden"
+                name: "#{@props.entity}[ps][#{@props.record.id}][id]"
+                value: "#{@props.record.id}"
+              @props.record.purpose || ""
+              @props.record.title || ""

data/app/assets/javascripts/components/photos.js.jsx.coffee

@@ -0,0 +1,68 @@
+{ div, a, i } = React.DOM
+
+class @Photos extends React.Component
+  constructor: (props) ->
+    super props
+    @state =
+      url: props.url
+      err: 'Indlæser billeder...'
+      entity: props.entity
+
+  @propTypes =
+    url: React.PropTypes.string
+    id: React.PropTypes.string
+    classes: React.PropTypes.string
+    entity: React.PropTypes.string
+
+  @defaultProps: ->
+    records: []
+    url: ''
+    id: 'oldphotos'
+    classes: 'drop_zone old_files_hangar'
+    entity: 'stock_item'
+
+  componentDidMount: ->
+    @loadPhotosFromServer()
+    # setInterval(@loadPhotosFromServer, @props.pollInterval); # use polling, can be other eg. WebSockets
+
+  addRecord: (record) ->
+    records = React.addons.update(@state.records, { $push: [record] })
+    @setState records: records
+
+  deleteRecord: (record) =>
+    index = @state.records.indexOf record
+    records = React.addons.update(@state.records, { $splice: [[index, 1]] })
+    @setState records: records
+
+  render: ->
+    try
+      cards = []
+      for record in @state.records
+        cards.push React.createElement PhotoCard, { key: record.id, record: record, deleteRecord: @deleteRecord, entity: @props.entity }
+
+      div
+        className: @props.classes
+        id: @props.id
+        div
+          cards
+
+    catch
+      div
+        className: ''
+        @state.err
+
+  loadPhotosFromServer: ->
+    $.ajax
+      url: @state.url,
+      dataType: 'json',
+      cache: false,
+      success: (data) =>
+        @setState {records: data}
+      error: (xhr, status, err) =>
+        @setState { err: err.toString() }
+
+  #  $.ajax {
+  #    url: @props.url,
+  #    dataType: 'json',
+  #    type: 'POST',
+  #    data: comment,

data/app/assets/javascripts/oxen_media.js

@@ -1,3 +1 @@
-//= require_tree ./oxen_media
-//= require jsrender.min
-//= require jquery.jcrop
+//= require_tree ./components

data/app/assets/stylesheets/oxen_media/drop_zone.css

@@ -0,0 +1,86 @@
+/* dropzone styling */
+.thumb {
+  width: 100%;
+}
+
+#progress_bar {
+  margin: 50px 40px 0px 30px;
+  padding: 3px;
+  border: 1px solid grey;
+  font-size: 7px;
+  clear: both;
+  opacity: 0;
+  -moz-transition: opacity 1s linear;
+  -o-transition: opacity 1s linear;
+  -webkit-transition: opacity 1s linear;
+}
+#progress_bar.loading {
+  opacity: 1.0;
+}
+#progress_bar .percent {
+  background-color: #99ccff;
+  height: auto;
+  width: 0;
+}
+
+.drop_zone.delimiter {
+  height: 150px;
+  width: 100%;
+  padding: 0px;
+  margin: 0px;
+  position: relative
+}
+.drop_zone.upload_bay {
+  width: 100%;
+  height: 80px;
+  position: relative;
+  padding: 0px;
+  margin: 0px;
+  background-color: #26a69a;
+  border-radius: 8px;
+}
+.drop_zone.user_notice {
+  position: absolute;
+  top: 0px;
+  border: 0px;
+  width: 100%;
+  height: 100%;
+  padding: 30px;
+}
+.drop_zone.file_browser {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  opacity: 0;
+}
+.drop_zone.file_hangar {
+  min-height: 100px;
+  height: 100%;
+  background-color: transparent;
+}
+.hovering_files {
+  background-color: #0ABFBC !important;
+}
+.loading_files {
+  background-color: #f57c00 !important;
+}
+.error_loading_files {
+  background-color: red !important;
+}
+.stitched {
+   padding: 20px;
+   margin: 10px;
+   color: #fff;
+   font-size: 12px;
+   font-weight: 400;
+   line-height: 1.3em;
+   border: 1px dashed #fff;
+   border-radius: 8px;
+      box-shadow: 0 0 0 4px #26a69a, 2px 2px 6px 4px rgba(1, 1, 1, 0.25);
+   font-weight: normal;
+}
+.drop_zone .card .row {
+  margin-bottom: 0px
+}
+/* end of dropzone styling */

data/app/assets/stylesheets/oxen_media.css

@@ -0,0 +1,3 @@
+/*
+ *= require_tree ./oxen_media
+ */

data/app/controllers/photos_controller.rb

@@ -0,0 +1,26 @@
+class PhotosController < AbstractResourcesController
+
+  private
+
+    def resource_params
+      params.require(:photo).permit( :id, :image )
+    end
+
+    #
+    #
+    # find all resources
+    def find_all_resources options
+      return false unless policy_scope(resource_class)
+      policy_scope(resource_class)
+    end
+    #
+    #
+    # find queried resources collection - implement on each controller to customize
+    def find_resources_queried options={}
+      lot = parent? ? parent.send(resource_name) : resource_class
+      res = case params[:subtype]
+      when nil; Photo.search policy_scope(lot), params[:q]
+      end
+    end
+
+end

data/app/models/ox_photo.rb

@@ -0,0 +1,17 @@
+class OxPhoto < AbstractResource
+  self.table_name = "photos"
+
+  has_paper_trail
+  #photo belongs to album
+  # belongs_to	:stock_item
+  # belongs_to :account
+
+  #validations
+  # validates 	:stock_item, presence: true
+
+  include Rails.application.routes.url_helpers
+
+  # Photo uploader using carrierwave
+  mount_uploader :image, PhotoUploader
+
+end

data/app/policies/ox_photo_policy.rb

@@ -0,0 +1,3 @@
+class OxPhotoPolicy < AbstractResourcePolicy
+
+end

data/app/uploaders/photo_uploader.rb

@@ -0,0 +1,53 @@
+# encoding: utf-8
+
+class PhotoUploader < CarrierWave::Uploader::Base
+
+  # Include RMagick or MiniMagick support:
+  # include CarrierWave::RMagick
+  include CarrierWave::MiniMagick
+
+  # Choose what kind of storage to use for this uploader:
+  storage :file
+  #storage :fog
+  # Override the directory where uploaded files will be stored.
+  # This is a sensible default for uploaders that are meant to be mounted:
+  def store_dir
+    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
+  end
+
+  # Provide a default URL as a default if there hasn't been a file uploaded:
+  def default_url
+    # For Rails 3.1+ asset pipeline compatibility:
+    # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
+
+    #{}"/images/fallback/" + [version_name, "default.png"].compact.join('_')
+    'default_photo.png' #rails will look at 'app/assets/images/default_avatar.png'
+  end
+
+  # Process files as they are uploaded:
+  # process :scale => [200, 300]
+  #
+  # def scale(width, height)
+  #   # do something
+  # end
+
+  # Create different versions of your uploaded files:
+  version :large_photo do
+    # returns a 150x150 image
+    process :resize_to_fill => [150, 150]
+  end
+  version :medium_photo do
+    # returns a 50x50 image
+    process :resize_to_fill => [50, 50]
+  end
+  version :small_photo do
+    # returns a 35x35 image
+    process :resize_to_fill => [35, 35]
+  end
+
+  # Add a white list of extensions which are allowed to be uploaded.
+  # For images you might use something like this:
+  def extension_white_list
+    %w(jpg jpeg gif png)
+  end
+end

data/app/views/photos/_photo.html.haml

@@ -0,0 +1,11 @@
+.col.s12.m6.l3
+  .card
+    .card-image
+      = image_tag photo.image_url
+      %span.card-title{  style: "padding: 0px"}
+        %a.start.file-upload{ href: '#!'}
+          %i.material-icons.medium.file_upload.green-text file_upload
+        /%a.cancel.file-upload{ href: '#!'}
+        /  %i.material-icons.cancel.orange-text cancel
+        %a.delete.file-upload{ href: '#!'}
+          %i.material-icons.medium.delete.red-text delete

data/app/views/photos/create.js.haml

@@ -0,0 +1 @@
+= resource.id

data/app/views/photos/index.json.jbuilder

@@ -0,0 +1,5 @@
+json.array!(resources) do |photo|
+  raise 'Implement index.json.jbuilder on your Model!'
+  json.extract! photo, :id, :account_id #, :stock_item_id, :title, :image, :lng_lat
+  json.url photo_url(photo, format: :json)
+end

data/lib/oxen_media/version.rb

@@ -1,3 +1,3 @@
 module OxenMedia
-  VERSION = "0.0.6"
+  VERSION = "0.3.4"
 end

data/lib/oxen_media.rb

@@ -1,6 +1,6 @@
 require "oxen_media/version"
 require "oxen_media/engine"
-require "carrierwave/crop"
+# require "carrierwave/crop"
 require "carrierwave"
 
 module OxenMedia