qiniu_form 0.0.1

data/vendor/assets/javascripts/qiniu_form.js

@@ -0,0 +1,267 @@
+//= require 'jquery.ui.sortable'
+//= require 'jquery.iframe-transport'
+//= require 'jquery.file-upload'
+
+/*
+  upload file tag 结构
+
+  div class="ui-upload uploaded" data-type="#{type}" data-value="#{src}"
+    div class="ui-type-#{type} ui-upload-type"
+      div.ui-upload-tag.ui-wrap
+        span.glyphicon.glyphicon-#{type}
+
+      div.ui-upload-progress.ui-wrap
+
+      div.ui-upload-preview.ui-wrap
+
+      div.ui-upload-file.ui-wrap
+        input type="hidden" value="#{value}" name="#{name}"
+        input.file data-form-data="#{form_data}" data-name="#{name}" title="" data-url="#{url}" name="file" id="qiniu-#{uuid}" type="file"
+
+      div.ui-upload-close
+        span.glyphicon.glyphicon-remove
+ */
+(function() {
+  'use strict';
+
+  // 设置文件的预览
+  function set_tag_preview($root, data) {
+    var $preview,
+      val = data.value,
+      type = data.type;
+
+    if (!val || !type) return ;
+
+    $preview = $root.find('.ui-upload-preview');
+
+    switch (type) {
+      case 'image':
+      case 'avatar':
+        $preview.html('<img src="' + val + '"/>');
+        break;
+      case 'audio':
+        $preview.html('<audio controls src="' + val + '"></audio>');
+        break;
+      case 'video':
+        $preview.html('<video controls src="' + val + '"></video>');
+        break;
+      case 'file':
+        $preview.html('<a href="' + val + '">' + (data.filename || val) + '</a>');
+        break;
+    }
+  }
+
+  function set_tag_value($root, key) {
+    $root.removeClass('uploading').addClass('uploaded');
+    $root.find('input[type=hidden]').val(key);
+  }
+
+  function del_tag_value($root) {
+    $root
+      .removeClass('uploading').removeClass('uploaded')
+      .find('input[type=hidden]').val('');
+  }
+
+
+  // 头像选择组件
+  $(function() {
+    var $upload_root,
+        $container = $('.avatars_choose_container');
+
+    if (!$container.length) {
+      return false;
+    }
+
+    $(document).on('click', '.avatar-file .btn', function() {
+      var $btn = $(this),
+          center = {},
+          offset, size;
+
+      $upload_root = $btn.closest('.avatar-file').find('.ui-upload');
+
+      offset = $btn.offset();
+      size = {width: $btn.outerWidth(), height: $btn.outerHeight()};
+
+      center.x = size.width / 2 + offset.left;
+      center.y = size.height + offset.top;
+
+      $container.removeClass('hide');
+      $container.css({
+        top: center.y + 15,
+        left: center.x - $container.outerWidth() / 2
+      });
+
+    });
+
+    $container.on('click', 'img', function() {
+      var $img = $(this),
+          key;
+      key = $img.data('key');
+      if (key && $upload_root) {
+        set_tag_value($upload_root, key);
+        set_tag_preview($upload_root, {value: $img.attr('src'), type: 'avatar'});
+        $container.addClass('hide');
+      }
+    });
+    $container.on('click', '.close', function() {
+      $upload_root = null;
+      $container.addClass('hide');
+      return false;
+    });
+    $container.on('click', '.upload', function() {
+      if ($upload_root) {
+        $upload_root.find('.file').trigger('click');
+        return false;
+      }
+    });
+  });
+
+
+  function init_async_file_upload($elem) {
+    var $root = $elem.closest('.ui-upload'),
+      params = $root.data(),
+      $progress_bar = $root.find('.ui-upload-progress');
+
+    set_tag_preview($root, params);
+
+    $elem.fileupload({
+      dataType: 'json',
+      type: 'POST',
+      dropZone: $root,
+      pasteZone: $root,
+      add: function (e, data) {
+        var file = data.files[0];
+
+        if (file && file.name) {
+          params.filename = file.name;
+        }
+
+        if (file && params.type !== 'file' ) {
+          // 支持的文件类型，放在 types 字段中，暂时还没实现，有点乱了
+          var allow_types = params.types && params.types.split(',') || params.type.split(','),
+            type = file.type,
+            allowed = false;
+
+          // 有些有 file， 但 file.type = "" ， 可能是客户端识别不了文件的 type
+          if (type !== '') {
+            if (params.type === 'image' || params.type === 'audio' || params.type === 'video') {
+              for (var allow_type, i = 0; i < allow_types.length; ++i) {
+                allow_type = $.trim(allow_types[i]);
+                if (allow_type.indexOf('/') > 0 && allow_type === type ||
+                    allow_type.indexOf('/') < 0 && type.split('/').shift() === allow_type) {
+
+                  allowed = true;
+                }
+              }
+            } else {
+              allowed = true;
+            }
+          }
+
+          if (!allowed) {
+            window.alerts.warning('upload_file_type_not_allowed');
+            return false;
+          }
+        }
+
+        $progress_bar.css('width', '1%').text('1%').parent();
+        $root.addClass('uploading');
+
+        data.submit()
+          .fail(function () {
+            $root.removeClass('uploading');
+            window.alerts.warning('Failure. Bad connection. please try again.');
+          });
+      },
+      progress: function(e, data) {
+        var percent = parseInt(data.loaded / data.total * 100, 10) + '%';
+        if (percent === '100%') percent = '99%';
+        $progress_bar.css('width', percent).text(percent);
+      },
+      done: function (e, data) {
+        data = data.result;
+        var $file_input = $root.find('input[type=file]');
+        var download_host = $file_input.attr('data-download-host');
+        var is_url_val = $file_input.attr('data-url-value');
+        var url = download_host + '/' + data.key;
+
+        if (is_url_val) {
+          params.value = url;
+        } else {
+          params.value = data.key;
+        }
+
+        $root.trigger('uploaded', [data]);
+        set_tag_value($root, params.value);
+
+        set_tag_preview($root, params);
+      }
+    });
+  }
+
+  $.fn.qiniu_fileupload = function () {
+    this.each(function () {
+      init_async_file_upload($(this));
+    });
+  };
+
+  /*
+   七牛上传组件，它的 tag 是在后端生成的
+   所以在页面加载的时候我就把一部分 tag 放在一个隐藏的 div 内
+   然后在需要加载这些 tag 的地方放一个标签
+  */
+  var $container = $('.qiniu-file-tags');
+  $container.on('fill', function(e, placeholder_elem) {
+    var $children = $container.children(),
+        $placeholder_elem = $(placeholder_elem),
+        $append, data;
+    if (!$children.length) {
+      window.alerts.danger('qi_niu_file_tag_not_enough');
+      return ;
+    }
+
+    data = $placeholder_elem.data();
+    $append = $children.last();
+
+    $placeholder_elem.append($append);
+
+    if (data.value && data.src) {
+      set_tag_value($append, data.value);
+      set_tag_preview($append, {value: data.src, type: $append.attr('data-type')});
+
+    } else {
+      del_tag_value($append);
+    }
+
+    // 删除所有事件
+    // 默认通过 jQuery 移除某个 DOM 时，jQuery 会删除这个 DOM 里所有元素的所有事件
+    $append.off().find('input.file').qiniu_fileupload(); // 添加上传文件事件
+  });
+
+
+  $container.on('recycle', function(e, upload_elem) {
+    $container.append(upload_elem);
+  });
+
+
+  // 初始化
+  $(function() {
+    // 文件删除事件监控
+    $(document).delegate('.ui-upload-close', 'click', function() {
+      var $root = $(this).closest('.ui-upload');
+      del_tag_value($root);
+    });
+
+    // 初始化上传文件组件
+    $('.ui-upload .file').off().qiniu_fileupload();
+
+    // 部署上传文件表单
+    $('.qiniu-file-place').each(function() {
+      var $placeholder = $(this);
+      if (!$placeholder.find('.ui-upload').length) {
+        $container.trigger('fill', [this]);
+      }
+    });
+  });
+
+})();

data/vendor/assets/stylesheets/qiniu_from.scss

@@ -0,0 +1,284 @@
+$module-content-bg: #EDEDED;
+$image-file-upload-width: 150px;
+$image-file-upload-height: 100px;
+$avatar-file-upload-width: 100px;
+$avatar-file-upload-height: 100px;
+$audio-file-upload-width: 150px;
+$audio-file-upload-height: 40px;
+$file-upload-width: 150px;
+$file-upload-height: 40px;
+$video-file-upload-width: 150px;
+$video-file-upload-height: 100px;
+
+
+.avatars_choose_container {
+  position: absolute;
+  padding: 60px 49px 50px;
+  width: 400px;
+  border: 1px solid #B3B3B3;
+  border-radius: 8px;
+  background-color: $module-content-bg;
+  z-index: 1000;
+  box-shadow: 0 5px 10px rgba(0,0,0,.2);
+
+  .arrow, .arrow:after {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 10px;
+  }
+
+  .arrow {
+    position: absolute;
+    top: -11px;
+    left: 50%;
+    margin-left: -11px;
+    border-width: 11px;
+    border-top-width: 0;
+    border-bottom-color: #B3B3B3;
+
+    &:after {
+      top: 1px;
+      margin-left: -10px;
+      content: " ";
+      border-top-width: 0;
+      border-bottom-color: $module-content-bg;
+    }
+  }
+
+  .close {
+    position: absolute;
+    right: 20px;
+    top: 10px;
+    font-size: 24px;
+    font-weight: normal;
+  }
+  .nav-tabs {
+    li {
+      width: 33.3333%;
+    }
+    a {
+      border-radius: 0;
+      color: #999999;
+      width: 100%;
+      padding: 8px 0;
+      text-align: center;
+    }
+  }
+  .tab-pane {
+    margin-top: 4px;
+    font-size: 0;
+  }
+  .square {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    background-color: #EDEDED;
+    border: 1px solid $module-content-bg;
+
+    img {
+      width: 100%;
+      height: 100%;
+      vertical-align: baseline;
+      cursor: pointer;
+
+      &:hover {
+        border: 1px solid #EDEDED;
+      }
+    }
+  }
+
+}
+
+.ui-upload {
+  width: 100%;
+  overflow: visible;
+
+  .ui-upload-type {
+    display: block;
+    position: relative;
+    background: #fefefe;
+    border: 1px dashed #d3d3d3;
+    box-shadow: inset 0 1px 1px white;
+
+    &:hover {
+      background: #eee;
+      border-style: solid;
+    }
+  }
+
+
+  .ui-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  .ui-upload-tag {
+    z-index: 3;
+    color: #ccc;
+    .glyphicon {
+      font-size: 22px;
+      display: block;
+      width: 22px;
+      height: 22px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 10;
+      margin: auto;
+    }
+  }
+
+  .ui-upload-progress {
+    z-index: 2;
+    display: none;
+
+    background: #428bca;
+    text-align: center;
+    color: #ffffff;
+    font-weight: bold;
+    width: 0%;
+
+    -webkit-transition: width 0.8s ease;
+    transition: width 0.8s ease;
+  }
+
+  .ui-upload-preview {
+    z-index: 4;
+    display: none;
+  }
+
+  .ui-upload-file {
+    z-index: 5;
+    overflow: hidden;
+    .file {
+      opacity: 0;
+      -webkit-appearance: 0;
+      cursor: pointer;
+
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      filter:alpha(opacity=0);
+      opacity: 0;
+    }
+  }
+
+
+  .ui-upload-close {
+    position: absolute;
+    z-index: 10;
+    display: none;
+    right: -10px;
+    top: -10px;
+    width: 24px;
+    height: 24px;
+    border-radius: 30px;
+    box-shadow: 1px 1px 2px rgba(0,0,0,.5), -1px -1px 2px rgba(0,0,0,.5);
+    background: black;
+    border: 2px solid white;
+    text-align: center;
+    cursor: pointer;
+
+    span {
+      font-size: 12px;
+      color: white;
+    }
+  }
+
+
+  // 上传中
+  &.uploading {
+    .ui-upload-file {
+      display: none;
+    }
+
+    .ui-upload-progress {
+      display: block;
+    }
+  }
+
+  // 上传完成
+  &.uploaded {
+    .ui-upload-file, .ui-upload-tag {
+      display: none;
+    }
+
+    .ui-upload-preview {
+      display: block;
+    }
+
+    .ui-upload-type, .ui-upload-type:hover {
+      border: none;
+      background: transparent;
+    }
+
+    .ui-upload-type:hover {
+      .ui-upload-close {
+        display: block;
+      }
+    }
+
+    .ui-type-file, .ui-type-file:hover {
+      background: #eee;
+      border: 1px solid #d3d3d3;
+    }
+
+  }
+
+
+  // 指定对应容器的大小
+  // type = image
+  .ui-type-image, .ui-type-image img {
+    width: $image-file-upload-width;
+    height: $image-file-upload-height;
+  }
+
+  // type = avatar
+  .ui-type-avatar, .ui-type-avatar img {
+    width: $avatar-file-upload-width;
+    height: $avatar-file-upload-height;
+    border-radius: $avatar-file-upload-width;
+  }
+
+  // type = audio
+  .ui-type-audio, .ui-type-audio audio {
+    width: $audio-file-upload-width;
+    height: $audio-file-upload-height;
+  }
+
+
+  // type = file
+  .ui-type-file {
+    width: $file-upload-width;
+    height: $file-upload-height;
+  }
+  .ui-type-file .ui-upload-preview {
+    overflow: hidden;
+    a {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      text-indent: 20px;
+      line-height: $file-upload-height;
+    }
+  }
+
+
+  // type = video
+  .ui-type-video, .ui-type-video video {
+    width: $video-file-upload-width;
+    height: $video-file-upload-height;
+  }
+}

data/vendor/views/_qiniu_upload_field.slim

@@ -0,0 +1,32 @@
+- src = value
+
+/image/audio/video/file
+/ please don't change the default type
+/ if need change, please see connett_tools/action_view/helpers/tags/qiniu_upload_field.rb
+- type ||= 'image'
+
+div class="ui-upload #{value.blank? ? '' : 'uploaded'} file-#{name}" data-type="#{type}" data-value="#{src}"
+  div class="ui-type-#{type} ui-upload-type"
+    div.ui-upload-tag.ui-wrap
+      - case type
+      - when 'image'
+        span.glyphicon.glyphicon-picture
+      - when 'avatar'
+        span.glyphicon.glyphicon-user
+      - when 'audio'
+        span.glyphicon.glyphicon-music
+      - when 'video'
+        span.glyphicon.glyphicon-facetime-video
+      - when 'file'
+        span.glyphicon.glyphicon-file
+
+    div.ui-upload-progress.ui-wrap
+
+    div.ui-upload-preview.ui-wrap
+
+    div.ui-upload-file.ui-wrap
+      input type="hidden" value="#{value}" name="#{name}"
+      input.file data-form-data="#{form_data}" data-name="#{name}" title="" data-url="#{url}" name="file" id="qiniu-#{uuid}" type="file" data-download-host=download_host data-url-value=url_value
+
+    div.ui-upload-close
+      span.glyphicon.glyphicon-remove

metadata

@@ -0,0 +1,118 @@
+--- !ruby/object:Gem::Specification
+name: qiniu_form
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- jiangzhi.xie
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-06-10 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.6'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.6'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+- !ruby/object:Gem::Dependency
+  name: uuid
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Qiniu upload from
+email:
+- xiejiangzhi@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- lib/qiniu_form.rb
+- lib/qiniu_form/rails.rb
+- lib/qiniu_form/rails/engine.rb
+- lib/qiniu_form/version.rb
+- lib/qiniu_form/view_helpers/form_helper.rb
+- lib/qiniu_form/view_helpers/tags/qiniu_upload_field.rb
+- qiniu_form.gemspec
+- vendor/assets/javascripts/jquery.file-upload.js
+- vendor/assets/javascripts/jquery.iframe-transport.js
+- vendor/assets/javascripts/jquery.ui.sortable.js
+- vendor/assets/javascripts/qiniu_form.js
+- vendor/assets/stylesheets/qiniu_from.scss
+- vendor/views/_qiniu_upload_field.slim
+homepage: ''
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: Qiniu upload from
+test_files: []