bootsy 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 10213f792bf2d4b2a8e5a29aa80b63b21ca14e8a
-  data.tar.gz: 8786ccb949991086a701ea862ceae43898843bc8
+  metadata.gz: d39459ba06843f6310669394df4e9e02390e83a3
+  data.tar.gz: 7a3bf0f12f9d4c8b14a4ccc6c5cb035d51d309ff
 SHA512:
-  metadata.gz: 46477141879b70d6e6e1989aafe182fb49c70946cb8df87d9b2ccea0ecb1f8111d93574435d46ef1cea1edca58ed01af99e3e8f265bd4a4c5bf64374ea453ff1
-  data.tar.gz: e4ef2cb97c4e5b54d4b56e437c8bfff94f909443bb426efaaedf8a651d5703c21b2d53e9b5af4af586d06925440ea531d961dc872cabb6451d632218a63b6962
+  metadata.gz: 2ad8bb69fa7cdb0c75624e220ee4b64ae4b343e6601f8bc290a3518e39f8d08cedddaaae3812559bfce82486cef7d2daf4717be64cbc5c7a3938bd265a5aad38
+  data.tar.gz: 7624652a602ce80baf4a2b2d724c6fe54960d072386bcc7ff8ab3b97accdaecc8f0a9e7cf3e091925a495dd65f89c076ac5de99dba44a978c402299ec7ed6b96

data/Rakefile

@@ -28,14 +28,11 @@ require 'coveralls/rake/task'
 
 Coveralls::RakeTask.new
 
-task default: [:spec,:run, 'coveralls:push']
+task default: [:spec, :cucumber, 'coveralls:push']
 
 RSpec::Core::RakeTask.new(:spec)
 
-Cucumber::Rake::Task.new(:run) do |t|
-  t.cucumber_opts = ["-t","~@pending","features --format pretty","-s"]
+Cucumber::Rake::Task.new do |t|
+  # Uncomment this line when cucumber/multi_test work with minitest.
+  # t.cucumber_opts = %w{--format pretty -s}
 end
-
-Cucumber::Rake::Task.new(:wip) do |t|
-  t.cucumber_opts = ["-t","@wip","features"]
-end

data/app/assets/javascripts/bootsy.js

@@ -2,6 +2,7 @@
 //= require bootsy/wysihtml5
 //= require bootsy/bootstrap-wysihtml5
 //= require bootsy/bootsy
+//= require bootsy/bootstrap.file-input.js
 //= require bootsy/init
 //= require bootsy/editor_options
 //= require bootsy/translations

data/app/assets/javascripts/bootsy/bootstrap-wysihtml5.js

@@ -34,8 +34,8 @@
               "<div class='btn-group'>" +
                 "<a class='btn" + size + "' data-wysihtml5-command='insertUnorderedList' title='" + locale.lists.unordered + "' tabindex='-1'><i class='icon-list'></i></a>" +
                 "<a class='btn" + size + "' data-wysihtml5-command='insertOrderedList' title='" + locale.lists.ordered + "' tabindex='-1'><i class='icon-th-list'></i></a>" +
-                "<a class='btn" + size + "' data-wysihtml5-command='Outdent' title='" + locale.lists.outdent + "' tabindex='-1'><i class='icon-indent-right'></i></a>" +
-                "<a class='btn" + size + "' data-wysihtml5-command='Indent' title='" + locale.lists.indent + "' tabindex='-1'><i class='icon-indent-left'></i></a>" +
+                "<a class='btn" + size + "' data-wysihtml5-command='Outdent' title='" + locale.lists.outdent + "' tabindex='-1'><i class='icon-indent-left'></i></a>" +
+                "<a class='btn" + size + "' data-wysihtml5-command='Indent' title='" + locale.lists.indent + "' tabindex='-1'><i class='icon-indent-right'></i></a>" +
               "</div>" +
             "</li>";
         },

data/app/assets/javascripts/bootsy/bootstrap.file-input.js

@@ -0,0 +1,122 @@
+/*
+  Bootstrap - File Input
+  ======================
+
+  This is meant to convert all file input tags into a set of elements that displays consistently in all browsers.
+
+  Converts all
+  <input type="file">
+  into Bootstrap buttons
+  <a class="btn">Browse</a>
+
+*/
+$(function() {
+
+$.fn.bootstrapFileInput = function() {
+
+  this.each(function(i,elem){
+
+    var $elem = $(elem);
+
+    // Maybe some fields don't need to be standardized.
+    if (typeof $elem.attr('data-bfi-disabled') != 'undefined') {
+      return;
+    }
+
+    // Set the word to be displayed on the button
+    var buttonWord = 'Browse';
+
+    if (typeof $elem.attr('title') != 'undefined') {
+      buttonWord = $elem.attr('title');
+    }
+
+    // Start by getting the HTML of the input element.
+    // Thanks for the tip http://stackoverflow.com/a/1299069
+    var input = $('<div>').append( $elem.eq(0).clone() ).html();
+    var className = '';
+
+    if (!!$elem.attr('class')) {
+      className = ' ' + $elem.attr('class');
+    }
+
+    // Now we're going to replace that input field with a Bootstrap button.
+    // The input will actually still be there, it will just be float above and transparent (done with the CSS).
+    $elem.replaceWith('<a class="file-input-wrapper btn' + className + '">'+buttonWord+input+'</a>');
+  })
+
+  // After we have found all of the file inputs let's apply a listener for tracking the mouse movement.
+  // This is important because the in order to give the illusion that this is a button in FF we actually need to move the button from the file input under the cursor. Ugh.
+  .promise().done( function(){
+
+    // As the cursor moves over our new Bootstrap button we need to adjust the position of the invisible file input Browse button to be under the cursor.
+    // This gives us the pointer cursor that FF denies us
+    $('.file-input-wrapper').mousemove(function(cursor) {
+
+      var input, wrapper,
+        wrapperX, wrapperY,
+        inputWidth, inputHeight,
+        cursorX, cursorY;
+
+      // This wrapper element (the button surround this file input)
+      wrapper = $(this);
+      // The invisible file input element
+      input = wrapper.find("input");
+      // The left-most position of the wrapper
+      wrapperX = wrapper.offset().left;
+      // The top-most position of the wrapper
+      wrapperY = wrapper.offset().top;
+      // The with of the browsers input field
+      inputWidth= input.width();
+      // The height of the browsers input field
+      inputHeight= input.height();
+      //The position of the cursor in the wrapper
+      cursorX = cursor.pageX;
+      cursorY = cursor.pageY;
+
+      //The positions we are to move the invisible file input
+      // The 20 at the end is an arbitrary number of pixels that we can shift the input such that cursor is not pointing at the end of the Browse button but somewhere nearer the middle
+      moveInputX = cursorX - wrapperX - inputWidth + 20;
+      // Slides the invisible input Browse button to be positioned middle under the cursor
+      moveInputY = cursorY- wrapperY - (inputHeight/2);
+
+      // Apply the positioning styles to actually move the invisible file input
+      input.css({
+        left:moveInputX,
+        top:moveInputY
+      });
+    });
+
+    $('.file-input-wrapper input[type=file]').change(function(){
+
+      var fileName;
+      fileName = $(this).val();
+
+      // Remove any previous file names
+      $(this).parent().next('.file-input-name').remove();
+      if (!!$(this).prop('files') && $(this).prop('files').length > 1) {
+        fileName = $(this)[0].files.length+' files';
+        //$(this).parent().after('<span class="file-input-name">'+$(this)[0].files.length+' files</span>');
+      }
+      else {
+        // var fakepath = 'C:\\fakepath\\';
+        // fileName = $(this).val().replace('C:\\fakepath\\','');
+        fileName = fileName.substring(fileName.lastIndexOf('\\')+1,fileName.length);
+      }
+
+      $(this).parent().after('<span class="file-input-name">'+fileName+'</span>');
+    });
+
+  });
+
+};
+
+// Add the styles before the first stylesheet
+// This ensures they can be easily overridden with developer styles
+var cssHtml = '<style>'+
+  '.file-input-wrapper { overflow: hidden; position: relative; cursor: pointer; z-index: 1; }'+
+  '.file-input-wrapper input[type=file], .file-input-wrapper input[type=file]:focus, .file-input-wrapper input[type=file]:hover { position: absolute; top: 0; left: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); z-index: 99; outline: 0; }'+
+  '.file-input-name { margin-left: 8px; }'+
+  '</style>';
+$('link[rel=stylesheet]').eq(0).before(cssHtml);
+
+});

data/app/assets/javascripts/bootsy/bootsy.js

@@ -2,9 +2,11 @@ window.Bootsy = window.Bootsy || {};
 
 window.Bootsy.Area = function ($el) {
   var self = this;
+  self.bootsyUploadInit = false; // this flag tells the refreshGallery method whether there was a new upload or not
 
   this.progressBar = function () {
-    self.imageGalleryModal.find('div.modal-body').html('<div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div>');
+    // Show loading spinner
+    $('.bootsy-spinner img').fadeIn(200);
   };
 
   this.setImageGalleryId = function (id) {
@@ -12,6 +14,16 @@ window.Bootsy.Area = function ($el) {
     $('input.bootsy_image_gallery_id').val(id);
   };
 
+  this.deleteImage = function (id) {
+    self.imageGalleryModal.find("ul.thumbnails").find("[data-id='" + id + "']").hide(200, function(){
+      $(this).remove();
+      // Put message back if 0 images
+      if ( self.imageGalleryModal.find('.thumbnails li').length == 0 ) {
+        self.imageGalleryModal.find('.alert').fadeIn(200);
+      }
+    });
+  };
+
   this.refreshGallery = function () {
     self.progressBar();
     $.ajax({
@@ -23,8 +35,48 @@ window.Bootsy.Area = function ($el) {
       },
       dataType: 'json',
       success: function (data) {
-        self.imageGalleryModal.find('div.modal-body').html(data.partial);
+        // Hide loading spinner
+        $('.bootsy-spinner img').fadeOut(200);
+        
+        // Cache the returned data
+        var $data = $(data.partial);
+
+        // Retrieve the last added li from the cached data
+        img = $data.find('ul.thumbnails > li').last();
+
+        if ( img.length ) {
+          // Thumbnails currently exist in the retrieved data, so hide the message
+          $('.alert').hide();
+        } else {
+          // Thumbnails do not exist in the retrieved data, so show the message
+          $('.thumbnails li').hide();
+          $('.alert').fadeIn(100);
+        }
+        
+        if ( self.imageGalleryModal.find('.modal-body').children().length == 0 ) {
+          // Init the modal content (only loads first time)
+          self.imageGalleryModal.find('.modal-content').html($data).hide().fadeIn(200);
+          // Nicer file input
+          $('.modal-footer #image_image_file').bootstrapFileInput();
+        } else if ( self.bootsyUploadInit == true ) {
+          self.bootsyUploadInit = false;
+          $(img).hide().appendTo(self.imageGalleryModal.find('.modal-body .thumbnails')).fadeIn(200);
+        } else {
+          // do nothing
+        }
+
         self.imageGalleryModal.find('a.refresh-btn').hide();
+        self.imageGalleryModal.find('#refresh-gallery').hide();
+        self.imageGalleryModal.find('input#upload_submit').hide();
+
+
+        // Autosubmit on image selection
+        $('.modal-footer #image_image_file').on('change', function(){
+          self.progressBar();
+          self.bootsyUploadInit = true;
+          $(this).closest('form').submit();
+        });
+
       },
       error: function (e) {
         alert(Bootsy.translations[self.locale].error);
@@ -119,6 +171,7 @@ window.Bootsy.Area = function ($el) {
       };
 
       this.imageGalleryModal = $('#bootsy_image_gallery');
+      this.imageGalleryModal.find('a.refresh-btn').hide();
 
       this.imageGalleryModal.parents('form').after(this.imageGalleryModal);
 

data/app/assets/javascripts/bootsy/locales/bootstrap-wysihtml5.pt-BR.js

@@ -47,4 +47,4 @@
             orange: "Laranja"
         }
     };
-}(jQuery));
+}(jQuery));

data/app/assets/stylesheets/bootsy/bootsy.css

@@ -129,4 +129,44 @@ blockquote:after {
 
 textarea.bootsy:required:invalid {
   color: inherit;
-}
+}
+
+/*Allow dropdown menus to show be displayed if they overflow the footer or modal*/
+#bootsy_image_gallery .modal { overflow: visible; }
+#bootsy_image_gallery .modal-body { overflow-y: visible; }
+
+/*Modal Design Styles*/
+#bootsy_image_gallery form { margin-bottom: 0px; } /*remove default bottom margin*/
+#bootsy_image_gallery .file-input-name {display: none;}  /*Hide the input file name from showing as it's not needed and ruins design*/
+/*Set a min-height on the modal body to prevent jumping up and down of modal when adding content*/
+#bootsy_image_gallery .modal-body {
+  min-height: 78px;
+  margin-bottom: 0;
+  padding-bottom: 7px;
+}
+#bootsy_image_gallery .modal-body .thumbnails {
+  margin-left: -10px;
+  margin-bottom: 0;
+}
+#bootsy_image_gallery .modal-body .thumbnails > li {
+  margin-left: 7px;
+  margin-bottom: 8px;
+}
+
+#bootsy_image_gallery .modal-body .thumbnails > li.alert {
+  width: 100%;
+  margin-right: 8px;
+}
+.bootsy-spinner {
+  display: inline-block;
+  padding-right: 5px;
+}
+.bootsy-spinner img {
+  display: none;
+}
+
+/*The below code is needed for capybara to be able to find the input, as it*/
+/*does not work*/
+.file-input-wrapper input[type=file], .file-input-wrapper input[type=file]:focus, .file-input-wrapper input[type=file]:hover {
+  opacity: .01;
+}

data/app/views/bootsy/images/_index.html.erb

@@ -1,42 +1,48 @@
-<ul class="thumbnails">
-  <% gallery.images.each do |image| %>
-    <li class="span1 dropdown">
-      <%= link_to image_tag(image.image_file.thumb.url), '#', :class => 'thumbnail', data: { toggle: 'dropdown'} %>
-      <ul class="dropdown-menu" role="menu">
-        <li class="nav-header"><%= t 'bootsy.image.size' %></li>
-        <% Bootsy.image_versions_available.each do |size| %>
-          <li class="dropdown-submenu">
-            <%= link_to '#' do %>
-              <i class="icon-picture"></i>
-              <%= t "bootsy.image.#{size}" %>
-            <% end %>
-            <ul class="dropdown-menu">
-              <% [:left, :right, :inline].each do |position| %>
-                <li>
-                  <%= link_to '#', :class => 'insert', tabindex: '-1', data: { :'image-size' => size.to_s, position: position.to_s} do %>
-                    <%= t "bootsy.image.position.#{position}" %>
-                  <% end %>
-                </li>
-              <% end %>
-            </ul>
-          </li>
-        <% end %>
-        <% if Bootsy.allow_destroy %>
-          <li class="divider"></li>
-          <li>
-            <%= link_to image, method: :delete, remote: true, data: { confirm: t('bootsy.image.confirm.destroy')}, tabindex: '-1', :class => 'destroy_btn' do %>
-              <i class="icon-trash"></i>
-              <%= t 'bootsy.action.destroy' %>
-            <% end %>
-          </li>
-        <% end %>
-      </ul>
-    </li>
+<div class="modal-body">
+  <% if gallery.images.count == 0 %>
+    <p class='alert'><%= t 'bootsy.no_images_uploaded' %></p>
   <% end %>
-</ul>
 
-<%= refresh_btn %>
+  <ul class="thumbnails">
+    <% gallery.images.each do |image| %>
+      <li class="dropdown" data-id="<%= image.id %>">
+        <%= link_to image_tag(image.image_file.thumb.url), '#', :class => 'thumbnail', data: { toggle: 'dropdown'} %>
+        <ul class="dropdown-menu" role="menu">
+          <li class="nav-header"><%= t 'bootsy.image.size' %></li>
+          <% Bootsy.image_versions_available.each do |size| %>
+            <li class="dropdown-submenu">
+              <%= link_to '#' do %>
+                <i class="icon-picture"></i>
+                <%= t "bootsy.image.#{size}" %>
+              <% end %>
+              <ul class="dropdown-menu">
+                <% [:left, :right, :inline].each do |position| %>
+                  <li>
+                    <%= link_to '#', :class => 'insert', tabindex: '-1', data: { :'image-size' => size.to_s, position: position.to_s} do %>
+                      <%= t "bootsy.image.position.#{position}" %>
+                    <% end %>
+                  </li>
+                <% end %>
+              </ul>
+            </li>
+          <% end %>
+          <% if Bootsy.allow_destroy %>
+            <li class="divider"></li>
+            <li>
+              <%= link_to image, method: :delete, remote: true, data: { confirm: t('bootsy.image.confirm.destroy')}, tabindex: '-1', :class => 'destroy_btn' do %>
+                <i class="icon-trash"></i>
+                <%= t('bootsy.action.destroy') %>
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
+      </li>
+    <% end %>
+  </ul>
 
-<hr />
+  <%= refresh_btn %>
 
-<%= render 'bootsy/images/new', {image: (defined?(image) && image.errors.any?) ? image : gallery.images.new } %>
+</div>
+<div class="modal-footer">
+  <%= render 'bootsy/images/new', {image: (defined?(image) && image.errors.any?) ? image : gallery.images.new } %>
+</div>

data/app/views/bootsy/images/_modal.html.erb

@@ -1,12 +1,13 @@
 <div class="modal hide fade" id="bootsy_image_gallery" data-no-turbolink data-bootsy-gallery-id="<%= container.bootsy_image_gallery_id %>">
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal">×</button>
-    <h2><%= t 'bootsy.image.p' %></h2>
-  </div>
-  <div class="modal-body">
+    <h3><%= t 'bootsy.image.p' %></h3>
     <%= refresh_btn %>
   </div>
-  <div class="modal-footer">
-    <a href="#" class="btn" data-dismiss="modal"><%= t 'bootsy.action.close' %></a>
+  <div class="modal-content">
+    <div class="modal-body">
+    </div>
+    <div class="modal-footer">
+    </div>
   </div>
 </div>

data/app/views/bootsy/images/_new.html.erb

@@ -1,5 +1,3 @@
-<h3><%= t 'bootsy.image.new' %></h3>
-
 <%= form_for [bootsy, resource_or_nil(image.image_gallery), image], remote: true, html: {:class => 'bootsy form-inline'} do |f| %>
   <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
   <% if image.errors.any? %>
@@ -8,7 +6,11 @@
     <% end %>
   <% end %>
 
-  <%= f.file_field :image_file %>
+  <div class="bootsy-spinner">
+    <%= image_tag "bootsy/ajax-loader.gif" %>
+  </div>
+  
+  <%= f.file_field :image_file, title: t('bootsy.action.upload') %>
 
-  <%= f.submit t('bootsy.action.load'), :class => 'btn btn-primary' %>
+  <%= f.submit t('bootsy.action.load'), id: 'upload_submit', :class => 'btn btn-primary' %>
 <% end %>

data/app/views/bootsy/images/destroy.js.erb

@@ -1 +1 @@
-Bootsy.areas[0].refreshGallery($('#bootsy_image_gallery'));
+Bootsy.areas[0].deleteImage(<%= @image.id %>);

data/config/locales/en.yml

@@ -2,9 +2,10 @@ en:
   bootsy:
     action:
       refresh: Refresh
-      destroy: Destroy
+      destroy: Delete
       close: Close
       load: Load
+      upload: Upload New Image
     image_gallery: Image Gallery
     image:
       s: Image
@@ -16,8 +17,11 @@ en:
       original: Original
       new: New image
       confirm:
-        destroy: Are you sure you want do destroy this image?
+        destroy: Are you sure you want to delete this image?
       position:
         left: Left
         right: Right
-        inline: Inline
+        inline: Inline
+    no_images_uploaded: There are currently no uploaded images.
+    js:
+      alert_unsaved: You have unsaved changes.

data/lib/bootsy/version.rb

@@ -1,3 +1,3 @@
 module Bootsy
-  VERSION = '1.0.0'
+  VERSION = '1.1.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bootsy
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.0
 platform: ruby
 authors:
 - Volmer Soares
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-07-07 00:00:00.000000000 Z
+date: 2013-08-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: mini_magick
@@ -30,42 +30,42 @@ dependencies:
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: 0.8.0
+        version: 0.9.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: 0.8.0
+        version: 0.9.0
 - !ruby/object:Gem::Dependency
   name: remotipart
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: 1.1.0
+        version: 1.2.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: 1.1.0
+        version: 1.2.1
 - !ruby/object:Gem::Dependency
   name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: '2.13'
+        version: '2.14'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: '2.13'
+        version: '2.14'
 - !ruby/object:Gem::Dependency
   name: factory_girl_rails
   requirement: !ruby/object:Gem::Requirement
@@ -86,14 +86,14 @@ dependencies:
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: '1.0'
+        version: 1.0.1
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: '1.0'
+        version: 1.0.1
 - !ruby/object:Gem::Dependency
   name: cucumber-rails
   requirement: !ruby/object:Gem::Requirement
@@ -114,28 +114,28 @@ dependencies:
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: '2.1'
+        version: '2.2'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: '2.1'
+        version: '2.2'
 - !ruby/object:Gem::Dependency
   name: selenium-webdriver
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: '2.33'
+        version: '2.35'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: '2.33'
+        version: '2.35'
 description: A beautiful WYSIWYG editor with image uploads for Rails.
 email:
 - volmerius@gmail.com
@@ -143,7 +143,9 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- app/assets/images/bootsy/ajax-loader.gif
 - app/assets/javascripts/bootsy/bootstrap-wysihtml5.js
+- app/assets/javascripts/bootsy/bootstrap.file-input.js
 - app/assets/javascripts/bootsy/bootsy.js
 - app/assets/javascripts/bootsy/editor_options.js
 - app/assets/javascripts/bootsy/init.js
@@ -207,7 +209,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.0.3
+rubygems_version: 2.0.5
 signing_key: 
 specification_version: 4
 summary: A beautiful WYSIWYG editor with image uploads for Rails.