filemagic 0.3.5.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 622c2455083055c9ed35ef59900f50eadd0d56da
+  data.tar.gz: 1b975571e667dd3c1c8b3ca0c82919dab8c863a0
+SHA512:
+  metadata.gz: d25b0ab3868e25ec7c53e6293f942121679f1bad0e57668240f7810951ea3bead53a3db8ce216f0aceb3c05887921b317d7ad1466db6960fd8b7d1bf16c39445
+  data.tar.gz: 60d797ba967709541e13ec7dcecdd0b65b3bbf4a36575a35ebc22fd7ab297c129c44d0c3d589583d78ad82fe219c7fffd7efc05d74e80bcc400c7992d41dbd71

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2015 William Kurosawa
+
+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/Rakefile

@@ -0,0 +1,37 @@
+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    = 'Filemagic'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+load 'rails/tasks/statistics.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/javascripts/filemagic.js

@@ -0,0 +1,14 @@
+//= require filemagic/react
+//= require filemagic/react-dom
+//= require filemagic/lodash
+//= require filemagic/canvas-to-blob
+
+//= require filemagic/load-image
+
+//= require filemagic/jquery.ui
+//= require filemagic/jquery.ui.widget
+//= require filemagic/jquery.iframe-transport
+//= require filemagic/jquery.fileupload
+//= require filemagic/classnames
+
+//= require filemagic/initializer

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

@@ -0,0 +1,15 @@
+// TODO: Remove this file?
+
+// 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.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require_tree .

data/app/assets/javascripts/filemagic/canvas-to-blob.js

@@ -0,0 +1,95 @@
+/*
+ * JavaScript Canvas to Blob 2.0.5
+ * https://github.com/blueimp/JavaScript-Canvas-to-Blob
+ *
+ * Copyright 2012, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ *
+ * Based on stackoverflow user Stoive's code snippet:
+ * http://stackoverflow.com/q/4998908
+ */
+
+/*jslint nomen: true, regexp: true */
+/*global window, atob, Blob, ArrayBuffer, Uint8Array, define */
+
+(function (window) {
+    'use strict';
+    var CanvasPrototype = window.HTMLCanvasElement &&
+            window.HTMLCanvasElement.prototype,
+        hasBlobConstructor = window.Blob && (function () {
+            try {
+                return Boolean(new Blob());
+            } catch (e) {
+                return false;
+            }
+        }()),
+        hasArrayBufferViewSupport = hasBlobConstructor && window.Uint8Array &&
+            (function () {
+                try {
+                    return new Blob([new Uint8Array(100)]).size === 100;
+                } catch (e) {
+                    return false;
+                }
+            }()),
+        BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
+            window.MozBlobBuilder || window.MSBlobBuilder,
+        dataURLtoBlob = (hasBlobConstructor || BlobBuilder) && window.atob &&
+            window.ArrayBuffer && window.Uint8Array && function (dataURI) {
+                var byteString,
+                    arrayBuffer,
+                    intArray,
+                    i,
+                    mimeString,
+                    bb;
+                if (dataURI.split(',')[0].indexOf('base64') >= 0) {
+                    // Convert base64 to raw binary data held in a string:
+                    byteString = atob(dataURI.split(',')[1]);
+                } else {
+                    // Convert base64/URLEncoded data component to raw binary data:
+                    byteString = decodeURIComponent(dataURI.split(',')[1]);
+                }
+                // Write the bytes of the string to an ArrayBuffer:
+                arrayBuffer = new ArrayBuffer(byteString.length);
+                intArray = new Uint8Array(arrayBuffer);
+                for (i = 0; i < byteString.length; i += 1) {
+                    intArray[i] = byteString.charCodeAt(i);
+                }
+                // Separate out the mime component:
+                mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+                // Write the ArrayBuffer (or ArrayBufferView) to a blob:
+                if (hasBlobConstructor) {
+                    return new Blob(
+                        [hasArrayBufferViewSupport ? intArray : arrayBuffer],
+                        {type: mimeString}
+                    );
+                }
+                bb = new BlobBuilder();
+                bb.append(arrayBuffer);
+                return bb.getBlob(mimeString);
+            };
+    if (window.HTMLCanvasElement && !CanvasPrototype.toBlob) {
+        if (CanvasPrototype.mozGetAsFile) {
+            CanvasPrototype.toBlob = function (callback, type, quality) {
+                if (quality && CanvasPrototype.toDataURL && dataURLtoBlob) {
+                    callback(dataURLtoBlob(this.toDataURL(type, quality)));
+                } else {
+                    callback(this.mozGetAsFile('blob', type));
+                }
+            };
+        } else if (CanvasPrototype.toDataURL && dataURLtoBlob) {
+            CanvasPrototype.toBlob = function (callback, type, quality) {
+                callback(dataURLtoBlob(this.toDataURL(type, quality)));
+            };
+        }
+    }
+    if (typeof define === 'function' && define.amd) {
+        define(function () {
+            return dataURLtoBlob;
+        });
+    } else {
+        window.dataURLtoBlob = dataURLtoBlob;
+    }
+}(this));

data/app/assets/javascripts/filemagic/classnames.js

@@ -0,0 +1,44 @@
+/*
+  Copyright (c) 2015 Jed Watson.
+  
+  Licensed under the MIT License (MIT), see
+  https://github.com/JedWatson/classnames/blob/master/LICENSE
+*/
+
+function classNames() {
+	var classes = '';
+	var arg;
+
+	for (var i = 0; i < arguments.length; i++) {
+		arg = arguments[i];
+		if (!arg) {
+			continue;
+		}
+
+		if ('string' === typeof arg || 'number' === typeof arg) {
+			classes += ' ' + arg;
+		} else if (Object.prototype.toString.call(arg) === '[object Array]') {
+			classes += ' ' + classNames.apply(null, arg);
+		} else if ('object' === typeof arg) {
+			for (var key in arg) {
+				if (!arg.hasOwnProperty(key) || !arg[key]) {
+					continue;
+				}
+				classes += ' ' + key;
+			}
+		}
+	}
+	return classes.substr(1);
+}
+
+// safely export classNames for node / browserify
+if (typeof module !== 'undefined' && module.exports) {
+	module.exports = classNames;
+}
+
+// safely export classNames for RequireJS
+if (typeof define !== 'undefined' && define.amd) {
+	define('classnames', [], function() {
+		return classNames;
+	});
+}

data/app/assets/javascripts/filemagic/components/uploader.es6

@@ -0,0 +1,385 @@
+class Uploader extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      status: 'empty',
+      progress: 0,
+      inputValue: {},
+      filename: '',
+      removeImage: false
+    };
+  }
+
+  componentWillMount() {
+    this.setDimension();
+    this.setFilenamePosition();
+
+    let defaultAttributeName = `${this.props.object}[${this.props.attribute}]`;
+    this.attributeName = !this.props.customAttributeName ? defaultAttributeName : this.props.customAttributeName;
+    this.attributeId = `${this.props.object}_${this.props.attribute}`;
+
+    this.isFileField = this.props.isFileField
+
+    let actualFile = this.props.previewUrl;
+    if (actualFile && !this.isFileField) {
+      this.showPreview(actualFile);
+    }
+
+    if (this.isFileField) {
+      this.setFilename(actualFile);
+    }
+
+    this.actions = this.props.actions
+  }
+
+  componentDidMount() {
+    var element = ReactDOM.findDOMNode(this.refs.fmUploaderContainer);
+
+    $(document).bind('dragover', this.dragOverDocument.bind(this));
+    $(element).bind('dragover', this.dragOver.bind(this));
+    $(element).bind('dragleave', this.dragLeave.bind(this));
+
+    $(element).fileupload({
+      url: this.props.url,
+      beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
+      type: 'POST',
+      formData: this.getFormData.bind(this),
+      add: this.add.bind(this),
+      progress: this.progress.bind(this),
+      done: this.done.bind(this),
+      dropZone: $(element)
+    });
+
+    var previewStatus = (this.props.previewUrl) ? 'filled' : 'empty';
+    this.setState({ status: previewStatus });
+  }
+
+  componentDidUpdate() {
+    if (this.state.status == 'loading') {
+      this.disableSubmitButton()
+    } else if(this.state.status == 'filled'){
+      this.enableSubmitButton()
+    }
+  }
+
+  disableSubmitButton() {
+    var submitButton = $("input:submit[name='commit']")
+    submitButton.prop("disabled", true);
+  }
+
+  enableSubmitButton() {
+    var submitButton = $("input:submit[name='commit']")
+    submitButton.prop("disabled", false);
+  }
+
+  getFormData() {
+    var result = [];
+
+    Object.keys(this.props.fields).forEach(function(key) {
+      result.push({name: key, value: this.props.fields[key]});
+    }.bind(this));
+
+    result.push({name: this.props.as, value: this.file});
+
+    return result;
+  }
+
+  add(e, data) {
+    this.setState({progress: 0, status: 'loading'});
+    this.file = data.files[0];
+
+    this.showPreview(this.file);
+
+    data.submit();
+  }
+
+  showPreview(file) {
+
+    let width, height
+
+    if (this.hasRepositionAction()){
+      var imageHeight = this.props.imageSize["height"]
+      let imageWidth = this.props.imageSize["width"]
+      let previewWidth = parseInt($('.fm-uploader-wrapper')[0].offsetWidth)
+      let coeficient = previewWidth / imageWidth
+
+      width = previewWidth
+      height = imageHeight * coeficient
+    } else {
+      width = this.previewWidth
+      height = this.previewHeight
+    }
+
+    let loadingImage = loadImage(file, this.appendPreview.bind(this), {
+      maxWidth: width,
+      maxHeight: height,
+      minWidth: 100,
+      minHeight: 100,
+      canvas: true,
+      crop: true,
+      orientation: true
+    });
+
+    loadingImage.addEventListener('load', () => {
+      this.canvas = $(ReactDOM.findDOMNode(this.refs.preview).childNodes);
+
+      let offsetY = this.props.offsetY || (this.previewHeight/2 - imageHeight/2)
+
+      this.canvas.css("top", offsetY);
+
+      this.setDimensionMetadata(loadingImage.naturalWidth, loadingImage.naturalHeight);
+      this.initilializeDraggables();
+    });
+
+  }
+
+  removePreview(){
+    this.refs.preview.innerHTML = ""
+  }
+
+  setDimensionMetadata(width, height){
+    this.width = width
+    this.height = height
+  }
+
+  setOffsetMetadata(offsetX, offsetY){
+    this.offsetX = offsetX
+    this.offsetY = offsetY
+  }
+
+  progress(e, data) {
+    var progress = parseInt(data.loaded / data.total * 100, 10);
+    this.setState({ progress: progress });
+  }
+
+  appendPreview(image) {
+    var element = ReactDOM.findDOMNode(this.refs.preview);
+
+    $(element).html('');
+    $(image).hide();
+    $(element).append($(image).fadeIn());
+
+  }
+
+  done(e, data) {
+    let width = 0, height = 0
+
+    if (this.width && this.height) {
+      width = this.width
+      height = this.height
+    }
+
+    this.setState({
+      status: 'filled',
+      inputValue: {
+        "id": this.props.id || data.result.id,
+        "filename": this.file.name,
+        "content_type": this.file.type,
+        "size": this.file.size,
+        "width": width,
+        "height": height,
+        "offset_x": this.offset_x || '+0',
+        "offset_y": this.offset_y || '+0',
+      }
+    });
+
+    if (this.isFileField) {
+      this.setFilename(this.state.inputValue);
+    }
+
+    this.setState({removeImage: false})
+  }
+
+  dragOverDocument(event) {
+    if (this.state.status != 'dragenter') {
+      this.setState({ status: 'dragover' });
+    }
+  }
+
+  dragOver(event) {
+    this.setState({ status: 'dragenter' });
+  }
+
+  dragLeave(event) {
+    this.setState({ status: 'dragover' });
+  }
+
+  setDimension() {
+    var previewSize = this.props.previewSize;
+    var defaultDimension = {width: '400px', height: '200px'};
+
+    this.uploaderDimension = _.isEmpty(previewSize) ? defaultDimension : previewSize;
+
+    if (_.isEmpty(previewSize)){
+
+      this.uploaderDimension = defaultDimension;
+      this.previewHeight = parseInt(defaultDimension.height);
+      this.previewWidth = parseInt(defaultDimension.width);
+
+    } else {
+
+      this.previewHeight = parseInt(previewSize.height);
+      this.previewWidth = parseInt(previewSize.width);
+      this.uploaderDimension = previewSize;
+
+      if (previewSize.width == '100%') {
+        var container = $('.fm-uploader-wrapper')[0];
+        this.previewWidth = parseInt(container.offsetWidth);
+      }
+
+    }
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return !_.isEqual(this.state, nextState);
+  }
+
+  setFilename(actualFile){
+    var fileUrl = actualFile;
+    var filename = fileUrl.substr(fileUrl.lastIndexOf('/') + 1);
+    var extension = filename.substr(filename.lastIndexOf('.') + 1);
+
+    if(filename.length > 15) filename = filename.substring(0,15) + '...';
+
+    this.setState({filename: filename});
+  }
+
+  setFilenamePosition(){
+    this.filenamePosition = {top: (this.previewHeight / 3) + 'px'}
+  }
+
+  removeImage(){
+    let confirmRemove = confirm('Tem certeza de que quer remover a imagem?')
+    if (confirmRemove) {
+      this.setState({ status: 'empty',
+        progress: 0,
+        inputValue: {},
+        filename: ''
+      })
+
+      this.removePreview()
+
+      this.setState({removeImage: true})
+    }
+  }
+
+  hasRepositionAction(){
+    return _.includes(this.props.actions, "reposition")
+  }
+
+  initilializeDraggables() {
+
+    this.canvas.draggable({
+      axis: "y",
+      opacity: 0.35,
+      drag: this.drag.bind(this),
+      stop: this.stopRepositioning.bind(this),
+      cursor: "ns-resize",
+    })
+    this.canvas.draggable("disable")
+  }
+
+  startReposition() {
+    this.setState({status: 'repositioning'});
+    this.canvas.draggable("enable");
+  }
+
+  drag(event, ui) {
+    let inputValue = this.state.inputValue;
+    inputValue.offset_y = ui.position.top;
+    this.setState({inputValue: inputValue});
+  }
+
+  stopRepositioning() {
+    this.setState({status: 'filled'})
+    this.canvas.draggable("disable");
+  }
+
+  render () {
+    var uploaderClasses = classNames('fm-uploader', {
+      'fm-uploader__img--empty': this.state.status == 'empty',
+      'fm-uploader__img--dragover': this.state.status == 'dragover',
+      'fm-uploader__img--dragenter': this.state.status == 'dragenter',
+      'fm-uploader__img--loading': this.state.status == 'loading',
+      'fm-uploader__img--filled': this.state.status == 'filled',
+      'fm-uploader__img--repositioning': this.state.status == 'repositioning'
+    });
+
+    var filename;
+
+    if (this.isFileField && this.state.status == 'filled') {
+      filename = <span className="fm-uploader__filename" style={this.filenamePosition}>{this.state.filename}</span>
+    }
+
+    let removeImageCheckbox;
+    if (this.state.removeImage) {
+      let removeName = `${this.props.object}[remove_${this.props.attribute}]`
+      let removeId = `${this.props.object}remove_${this.props.attribute}`
+      removeImageCheckbox = <input type="hidden" value="1" name={removeName} id={removeId}/>
+    }
+
+    var uploaderActionClasses = classNames('fm-uploader__actions', {
+      'fm-uploader__actions--empty': this.state.status == 'empty',
+      'fm-uploader__actions--filled': this.state.status == 'filled',
+      'hide': this.state.status == 'loading'
+    });
+
+    var addNewButtonClasses = classNames('actions__btn-add');
+
+    var addNewMessage = this.state.status == 'empty' ? 'Adicionar imagem' : 'Nova imagem';
+
+    let buttonRemove
+    if (_.includes(this.props.actions, "remove")) {
+      buttonRemove =
+        <div className="actions__btn-remove" onClick={this.removeImage.bind(this)}>
+          <a className="actions__caption">Remover imagem</a>
+        </div>
+    }
+
+    let buttonEdit
+    if (this.hasRepositionAction()) {
+      buttonEdit =
+        <div className="actions__btn-edit" onClick={this.startReposition.bind(this)}>
+          <a className="actions__caption">Editar imagem</a>
+        </div>
+    }
+
+    return(
+    <div className={uploaderClasses} style={this.uploaderDimension} ref="fmUploaderContainer">
+
+      {filename}
+
+      {removeImageCheckbox}
+
+      <input value={JSON.stringify(this.state.inputValue)} type="hidden" name={this.attributeName} />
+
+
+      <div className={uploaderActionClasses}>
+
+        {buttonRemove}
+
+        <input type="file" id={this.attributeId} ref="uploaderInput"/>
+        <label className={addNewButtonClasses} htmlFor={this.attributeId}>
+          <a className="actions__caption">{addNewMessage}</a>
+        </label>
+
+        {buttonEdit}
+
+      </div>
+
+      <div className="fm-uploader__preview" ref="preview"></div>
+      <div className="fm-uploader__drag-text">
+        <span>Arraste a imagem aqui</span>
+      </div>
+
+      <div className="fm-uploader__loader-wrapper" data-progress={this.state.progress}>
+        <svg viewBox="0 0 32 32" className="fm-uploader__loader">
+          <circle fillOpacity={0} r="50%" cx="50%" cy="50%" style={{strokeDasharray:this.state.progress + ' 100'}} />
+        </svg>
+        <div className="fm-uploader__loader-text">{this.state.progress}%</div>
+      </div>
+
+    </div>
+    );
+  }
+}