neofiles 1.0.0

data/app/assets/javascripts/neofiles/jquery.iframe-transport.js

@@ -0,0 +1,172 @@
+/*
+ * jQuery Iframe Transport Plugin 1.5
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/*jslint unparam: true, nomen: true */
+/*global define, window, document */
+
+(function (factory) {
+    'use strict';
+    if (typeof define === 'function' && define.amd) {
+        // Register as an anonymous AMD module:
+        define(['jquery'], factory);
+    } else {
+        // Browser globals:
+        factory(window.jQuery);
+    }
+}(function ($) {
+    'use strict';
+
+    // Helper variable to create unique names for the transport iframes:
+    var counter = 0;
+
+    // The iframe transport accepts three additional options:
+    // options.fileInput: a jQuery collection of file input fields
+    // options.paramName: the parameter name for the file form data,
+    //  overrides the name property of the file input field(s),
+    //  can be a string or an array of strings.
+    // options.formData: an array of objects with name and value properties,
+    //  equivalent to the return data of .serializeArray(), e.g.:
+    //  [{name: 'a', value: 1}, {name: 'b', value: 2}]
+    $.ajaxTransport('iframe', function (options) {
+        if (options.async && (options.type === 'POST' || options.type === 'GET')) {
+            var form,
+                iframe;
+            return {
+                send: function (_, completeCallback) {
+                    form = $('<form style="display:none;"></form>');
+                    form.attr('accept-charset', options.formAcceptCharset);
+                    // javascript:false as initial iframe src
+                    // prevents warning popups on HTTPS in IE6.
+                    // IE versions below IE8 cannot set the name property of
+                    // elements that have already been added to the DOM,
+                    // so we set the name along with the iframe HTML markup:
+                    iframe = $(
+                        '<iframe src="javascript:false;" name="iframe-transport-' +
+                            (counter += 1) + '"></iframe>'
+                    ).bind('load', function () {
+                        var fileInputClones,
+                            paramNames = $.isArray(options.paramName) ?
+                                    options.paramName : [options.paramName];
+                        iframe
+                            .unbind('load')
+                            .bind('load', function () {
+                                var response;
+                                // Wrap in a try/catch block to catch exceptions thrown
+                                // when trying to access cross-domain iframe contents:
+                                try {
+                                    response = iframe.contents();
+                                    // Google Chrome and Firefox do not throw an
+                                    // exception when calling iframe.contents() on
+                                    // cross-domain requests, so we unify the response:
+                                    if (!response.length || !response[0].firstChild) {
+                                        throw new Error();
+                                    }
+                                } catch (e) {
+                                    response = undefined;
+                                }
+                                // The complete callback returns the
+                                // iframe content document as response object:
+                                completeCallback(
+                                    200,
+                                    'success',
+                                    {'iframe': response}
+                                );
+                                // Fix for IE endless progress bar activity bug
+                                // (happens on form submits to iframe targets):
+                                $('<iframe src="javascript:false;"></iframe>')
+                                    .appendTo(form);
+                                form.remove();
+                            });
+                        form
+                            .prop('target', iframe.prop('name'))
+                            .prop('action', options.url)
+                            .prop('method', options.type);
+                        if (options.formData) {
+                            $.each(options.formData, function (index, field) {
+                                $('<input type="hidden"/>')
+                                    .prop('name', field.name)
+                                    .val(field.value)
+                                    .appendTo(form);
+                            });
+                        }
+                        if (options.fileInput && options.fileInput.length &&
+                                options.type === 'POST') {
+                            fileInputClones = options.fileInput.clone();
+                            // Insert a clone for each file input field:
+                            options.fileInput.after(function (index) {
+                                return fileInputClones[index];
+                            });
+                            if (options.paramName) {
+                                options.fileInput.each(function (index) {
+                                    $(this).prop(
+                                        'name',
+                                        paramNames[index] || options.paramName
+                                    );
+                                });
+                            }
+                            // Appending the file input fields to the hidden form
+                            // removes them from their original location:
+                            form
+                                .append(options.fileInput)
+                                .prop('enctype', 'multipart/form-data')
+                                // enctype must be set as encoding for IE:
+                                .prop('encoding', 'multipart/form-data');
+                        }
+                        form.submit();
+                        // Insert the file input fields at their original location
+                        // by replacing the clones with the originals:
+                        if (fileInputClones && fileInputClones.length) {
+                            options.fileInput.each(function (index, input) {
+                                var clone = $(fileInputClones[index]);
+                                $(input).prop('name', clone.prop('name'));
+                                clone.replaceWith(input);
+                            });
+                        }
+                    });
+                    form.append(iframe).appendTo(document.body);
+                },
+                abort: function () {
+                    if (iframe) {
+                        // javascript:false as iframe src aborts the request
+                        // and prevents warning popups on HTTPS in IE6.
+                        // concat is used to avoid the "Script URL" JSLint error:
+                        iframe
+                            .unbind('load')
+                            .prop('src', 'javascript'.concat(':false;'));
+                    }
+                    if (form) {
+                        form.remove();
+                    }
+                }
+            };
+        }
+    });
+
+    // The iframe transport returns the iframe content document as response.
+    // The following adds converters from iframe to text, json, html, and script:
+    $.ajaxSetup({
+        converters: {
+            'iframe text': function (iframe) {
+                return $(iframe[0].body).text();
+            },
+            'iframe json': function (iframe) {
+                return $.parseJSON($(iframe[0].body).text());
+            },
+            'iframe html': function (iframe) {
+                return $(iframe[0].body).html();
+            },
+            'iframe script': function (iframe) {
+                return $.globalEval($(iframe[0].body).text());
+            }
+        }
+    });
+
+}));

data/app/assets/javascripts/neofiles/jquery.neofiles.js.coffee

@@ -0,0 +1,191 @@
+$ ->
+  $.widget "neofiles.image",
+    options: {},
+
+    _$transferInput: null,
+    _$fileInput: null,
+    _$removeButton: null,
+    _$optionsButton: null,
+    _$descriptionHandle: null,
+
+    _savedNowmState: null,
+    _savedDescription: null,
+
+    _create: ->
+
+      $form = @element
+
+      @_$transferInput = $form.find(".neofiles-image-transfer-input")
+      @_$fileInput = $form.find(".neofiles-image-compact-file")
+      @_$removeButton = $form.find(".neofiles-image-compact-remove")
+      @_$optionsButton = $form.find(".neofiles-image-compact-options")
+      @_$descriptionHandle = $form.find(".neofiles-image-compact-description-handle")
+
+      $form.fileupload
+        dropZone: $form,
+        pasteZone: $form,
+        singleFileUploads: false,
+        limitMultiFileUploads: if @_$fileInput.attr("multiple") == "multiple" then 999 else 1,
+
+        formData: ->
+          $form.find("input, select").serializeArray()
+
+        start: =>
+          @loading()
+
+        success: (response, textStatus, jqXhr)=>
+          $form.replaceWith(response)
+          @destroy()
+
+        error: =>
+          alert("Ошибка при загрузке файла, попробуйте обновить страницу.\nТакже, проверьте тип файла, загружать можно только картинки.")
+          @notloading()
+          false
+
+      @_$removeButton.click (e)=>
+        e.preventDefault()
+        @remove()
+
+      @_$optionsButton.popover().on "shown.bs.popover", =>
+        @hideOtherActivePopovers()
+        @restoreSavedNowmState()
+
+      @_$optionsButton.click (e)=>
+        e.preventDefault()
+
+      @_$descriptionHandle.popover().on "shown.bs.popover", =>
+        @hideOtherActivePopovers()
+        @restoreSavedDescription()
+        @element.find(".neofiles-image-compact-description-input").redactor
+          toolbarFixed: false
+          minHeight: 250
+          buttons: ['bold', 'italic', 'orderedlist', 'unorderedlist', 'alignment']
+
+      @_$descriptionHandle.click (e)=>
+        e.preventDefault()
+
+      $form.find(".neofiles-image-compact-upload-icon").click =>
+        @_$fileInput.click()
+
+      $form.on "change", ".neofiles-image-compact-nowm", (e)=>
+        @saveNowmState($(e.target))
+
+      $form.on "click", ".neofiles-image-compact-description-save", (e)=>
+        @saveDescription()
+
+    imageId: ->
+      @_$transferInput.val()
+
+    loading: ->
+      @element[0].className += " neofiles-image-compact-loading"
+
+    notloading: ->
+      @element[0].className = @element[0].className.replace(/(^|\s+)neofiles-image-compact-loading/, "")
+
+    remove: ->
+      @loading()
+
+      data = {}
+      @element.find("input[type!=file][name^=neofiles], select[name^=neofiles]").serializeArray().forEach (o)->
+        data[o.name] = o.value
+
+      removeUrl = if @_$removeButton.is("a") then @_$removeButton.attr("href") else @_$removeButton.data("url")
+      $.ajax removeUrl,
+        type: "POST",
+        data: data,
+        success: (response)=>
+          @element.replaceWith(response)
+          @destroy()
+
+      @_$removeButton.trigger("neofiles.click.remove")
+
+    hideOtherActivePopovers: ->
+      self = @_$optionsButton[0]
+      $(".neofiles-image-compact .neofiles-image-compact-options").each ->
+        if @ != self
+          $(@).popover("hide")
+
+    restoreSavedNowmState: ->
+      if @_savedNowmState != null
+        @element.find(".neofiles-image-compact-nowm").prop("checked", @_savedNowmState)
+
+    restoreSavedDescription: ->
+      if @_savedDescription != null
+        @element.find(".neofiles-image-compact-description-input").val(@_savedDescription)
+
+    saveNowmState: ($checkbox)->
+      $checkbox.prop("disabled", true)
+      formData = @element.find("input, select").serializeArray()
+      formData.push name: "neofiles[no_wm]", value: if $checkbox.is(":checked") then "1" else "0"
+
+      $.ajax($checkbox.data("update-url"), type: "post", data: formData)
+      .done =>
+        @_savedNowmState = $checkbox.is(":checked")
+      .fail ->
+        $checkbox.prop("checked", !$checkbox.is(":checked"))
+        alert("Ошибка при сохранении, попробуйте еще раз позднее")
+      .always ->
+        # ответ приходит быстро, бывает не успеваешь заметить моргание disabled/enabled
+        setTimeout ->
+          $checkbox.prop("disabled", false)
+        , 300
+
+    saveDescription: ->
+      $textarea = @element.find(".neofiles-image-compact-description-input")
+      $button = @element.find(".neofiles-image-compact-description-save")
+
+      $textarea.prop("disabled", true)
+      formData = @element.find("input, select").serializeArray()
+      formData.push name: "neofiles[description]", value: $textarea.val()
+
+      $button.prop("disabled", true)
+
+      $.ajax($textarea.data("update-url"), type: "post", data: formData)
+
+      .done =>
+        setTimeout =>
+          @_savedDescription = $textarea.val()
+          text = $.trim(@_savedDescription).substr(0, 15)
+          @_$descriptionHandle.text(text || @_$descriptionHandle.data("empty"))
+          @_$descriptionHandle[if text then "removeClass" else "addClass"]("neofiles-image-compact-description-empty")
+          @_$descriptionHandle.popover("hide")
+        , 300
+
+      .fail ->
+        alert("Ошибка при сохранении, попробуйте еще раз позднее")
+
+      .always ->
+        # ответ приходит быстро, бывает не успеваешь заметить моргание disabled/enabled
+        setTimeout ->
+          $textarea.prop("disabled", false)
+          $button.prop("disabled", false)
+        , 300
+
+
+
+  $.widget "neofiles.album",
+    options: {},
+    limit: null,
+
+    _create: ->
+      $form = @element
+
+      # повесим сортировку на файлы, они сохранятся в том порядке, в котором input:hidden придут в контроллер
+      neofilesImageContainersSelector = ".neofiles-image-compact:not(.neofiles-image-compact-empty)"
+      $form.sortable
+        items: neofilesImageContainersSelector
+        handle: ".neofiles-image-compact-view"
+
+      @limit = @options.limit
+
+      if @limit
+        limit = @limit;
+        trigger = (e)->
+          ourLimit = (e.data && e.data.limit) || limit
+          if $(neofilesImageContainersSelector).length >= ourLimit
+            $(".neofiles-image-compact-empty").hide()
+          else
+            $(".neofiles-image-compact-empty").show()
+
+        $("body").on("neofiles.newimage", trigger)
+        $("body").on("neofiles.click.remove", {limit: limit + 1}, trigger)

data/app/assets/stylesheets/neofiles/index.css.scss

@@ -0,0 +1,3 @@
+/*
+ *= require ./neofiles
+ */

data/app/assets/stylesheets/neofiles/neofiles.css.scss

@@ -0,0 +1,149 @@
+.neofiles-image-compact {
+  box-sizing: border-box;
+  display: inline-block;
+  position: relative;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  margin-bottom: 10px;
+  vertical-align: top;
+  padding: 3px;
+  line-height: 1em;
+
+  .popover-content {
+    width: 250px;
+  }
+}
+.neofiles-image-compact-with-description {
+  margin-bottom: 40px;
+  min-width: 100px;
+  text-align: center;
+}
+.neofiles-image-compact-empty {
+  width: 108px;
+  height: 108px;
+}
+.neofiles-image-compact-upload-icon {
+  position: absolute;
+  box-sizing: border-box;
+  bottom: -7px;
+  left: 50%;
+  margin-left: -7px;
+  background-color: #fff;
+  border-radius: 7px;
+  opacity: .1;
+  width: 16px;
+  height: 16px;
+  text-align: center;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  .glyphicon {
+    top: 0;
+  }
+
+  .neofiles-image-compact-empty & {
+    position: static;
+    display: block;
+    width: 100%;
+    height: 100px;
+    margin: 0;
+    text-align: center;
+    padding-top: 42px;
+  }
+}
+.neofiles-image-compact-remove, .neofiles-image-compact-options {
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  padding-top: 2px;
+  right: -10px;
+  top: -10px;
+  border-radius: 10px;
+  text-align: center;
+  background-color: #ee5f5b;
+  box-shadow: 0px 2px 2px rgba(90, 50, 50, .5);
+  opacity: .2;
+
+  .glyphicon {
+    top: 1px;
+    font-size: 12px;
+    line-height: 12px;
+    color: #000;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, .3);
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}
+.neofiles-image-compact-options {
+  top: 12px;
+  background-color: #fff;
+}
+INPUT.neofiles-image-compact-file {
+  display: none !important;
+}
+.neofiles-image-compact-loading {
+  opacity: .5;
+  background: image-path('neofiles/loading.gif') no-repeat center center;
+
+  .neofiles-image-compact-upload-icon,
+  .neofiles-image-compact-remove,
+  .neofiles-image-compact-options,
+  .neofiles-image-compact-file {
+    visibility: hidden;
+  }
+}
+.neofiles-image-compact-description {
+  position: absolute;
+  bottom: -25px;
+  width: 100%;
+  font-size: 12px;
+  margin-left: -4px;
+  line-height: 14px;
+  text-align: center;
+}
+.neofiles-image-compact-description-empty {
+  color: #ccc !important;
+  border-bottom-color: #ddd !important;
+}
+.neofiles-image-compact-description-handle {
+  color: #333;
+  border-bottom: 1px dotted #777;
+  text-decoration: none !important;
+
+  &:hover {
+    border-bottom: 0;
+    text-decoration: none !important;
+  }
+}
+.popover.neofiles-image-compact-description-popover {
+  width: 430px;
+  height: 400px;
+  max-width: none;
+
+  .popover-content {
+    width: 100%;
+  }
+}
+.neofiles-image-compact-description-input {
+  width: 400px;
+  height: 250px;
+}
+
+.neofiles-album-compact {
+  margin-bottom: 10px;
+}
+.neofiles-album-compact .neofiles-image-compact {
+  margin-right: 20px;
+  margin-bottom: 20px;
+
+  &.neofiles-image-compact-with-description {
+    margin-bottom: 50px;
+  }
+}