bootsy 1.2.0 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 06d4f6c3c4baaff130fb3321a969e1090706013e
-  data.tar.gz: 75b66ce2924940d0d4b56a236adfac9de8651c0e
+  metadata.gz: 8b7b61a6335378da2590cdd884b0f7b5b7aa5840
+  data.tar.gz: c1f5549e531f7e423576602a0f611fb0ff96bb26
 SHA512:
-  metadata.gz: e50200981071659ce01e15a40ab22f19b98c0910ec187ffb07cc41830b25f997071afacf374bfbc6532455d10af75a8b9ec3582b2729f5bb3ba87deba6ff1ac4
-  data.tar.gz: 8e1dd14d053308773af5ca8db3cb7debe28ebf2619d8e7ac3f8f47063881cdcba67d79b5f8fab327246ac95f63871cb234f798c397694e122ff9044b4c2d2b80
+  metadata.gz: 6e9ff624b3d22b75b597c461b0161cbfc6346448a0e04dd2f21dc7c9b5ebb10c813ae780d8c00e2c477134c4b7cbbfe1736bad339991bc4e91db0df578ab3ecc
+  data.tar.gz: 02ac8fd962645345fac9236095a6ba41a64029706b13e467e1978318f0401356bb254100c56f78b3fbd9de2e0aaf636d15e6a2b3e8f907e2dac297fb8495c390

data/README.md

@@ -8,13 +8,15 @@
 
 *Bootsy* is a WYSIWYG solution for Rails based on [Bootstrap-wysihtml5](https://github.com/jhollingworth/bootstrap-wysihtml5) which includes image uploads via [CarrierWave](https://github.com/carrierwaveuploader/carrierwave).
 
+![image](https://f.cloud.github.com/assets/301187/1365250/e1b7ba80-3854-11e3-9bfe-8bd1e090aca8.png)
+
 
 ## Requirements
 
 * Ruby `2.0` or `1.9.3`;
 * ImageMagick or GraphicsMagick (for MiniMagick);
-* Rails `4.0` (you can get a *temporary* support for Rails `3.2` on [this branch](https://github.com/volmer/bootsy/tree/rails-3.2));
-* [Twitter Bootstrap](http://twitter.github.com/bootstrap/) properly added on your application.
+* Rails `4.0`;
+* [Bootstrap `3`](http://getbootstrap.com/) properly added to your application.
 
 
 ## Installation
@@ -31,8 +33,10 @@ bundle install
 
 3. Run the install generator:
 ```console
-rails g bootsy:install
+rails generate bootsy:install
 ```
+  It will include the javascripts and stylesheets in the assets pipeline,
+  create the `bootsy.rb` initializer and add a copy of the english translations.
 
 4. Add and run migrations (if you're using ActiveRecord):
 ```console
@@ -43,7 +47,8 @@ rake db:migrate
 
 ## Usage
 
-Just call the brand new method `bootsy_area` in your `FormBuilder` instances, the same way you'd call the basic `textarea` method. Example:
+Just call the brand new method `bootsy_area` in your `FormBuilder` instances, the
+same way you'd call the basic `textarea` method. Example:
 ```erb
 <%= form_for(@post) do |f| %>
   <%= f.label :title %>
@@ -56,7 +61,9 @@ Just call the brand new method `bootsy_area` in your `FormBuilder` instances, th
 <% end %>
 ```
 
-Bootsy will group the uploaded images as galleries and associate them to one of your models. For example, if you have a `Post` model and you want to use `bootsy_area` with it, then you should include the `Bootsy::Container` module:
+Bootsy will group the uploaded images as galleries and associate them to one of
+your models. For example, if you have a `Post` model and you want to use `bootsy_area`
+with it, then you should include the `Bootsy::Container` module:
 ```ruby
 class Post < ActiveRecord::Base
   include Bootsy::Container
@@ -65,7 +72,9 @@ class Post < ActiveRecord::Base
 end
 ```
 
-Don't forget to ensure the association of new instances of your model with Bootsy image galleries. For `strong_parameters`, you must allow the parameter `bootsy_image_gallery_id` in your controllers. Example:
+Don't forget to ensure the association of new instances of your model with Bootsy
+image galleries. For `strong_parameters`, you must allow the parameter `bootsy_image_gallery_id`
+in your controllers. Example:
 ```ruby
 private
 # Never trust parameters from the scary internet, only allow the white list through.
@@ -75,9 +84,10 @@ end
 ```
 
 
-## Bootsy with SimpleForm builders
+## Bootsy with [Simple Form](https://github.com/plataformatec/simple_form) builders
 
-Just use the brand new input type `bootsy` in your `SimpleForm::FormBuilder` instances, in the same way you would use the basic `text` input. Example:
+Just use the brand new input type `bootsy` in your `SimpleForm::FormBuilder` instances,
+in the same way you would use the basic `text` input. Example:
 ```erb
 <%= simple_form_for @post do |f| %>
   <%= f.input :title %>
@@ -91,12 +101,14 @@ Just use the brand new input type `bootsy` in your `SimpleForm::FormBuilder` ins
 
 ## Editor options
 
-It is possible to customize how the editor is displayed and its behavior by passing a hash `editor_options` to your `bootsy_area`.
+It is possible to customize how the editor is displayed and its behavior by passing
+a hash `editor_options` to your `bootsy_area`.
 
 
 ### Buttons
 
-You can enable/disable the buttons available on the editor. For example, if you want to disable the link and color buttons:
+You can enable/disable the buttons available on the editor. For example, if you
+want to disable the link and color buttons:
 ```erb
 <%= f.bootsy_area :my_attribute, editor_options: {link: false, color: false} %>
 ```
@@ -105,24 +117,36 @@ Available options are: `:font_styles`, `:emphasis`, `:lists`, `:html`, `:link`,
 
 ### Alert for usaved changes
 
-By default, Bootsy alerts for unsaved changes if the user attempts to unload the window. You can disable this behaviour by doing:
+By default, Bootsy alerts for unsaved changes if the user attempts to unload
+the window. You can disable this behaviour by doing:
 ```erb
 <%= f.bootsy_area :my_attribute, editor_options: {alert_unsaved: false} %>
 ```
 
 ## Uploader
 
-It's also possible to use Bootsy without the image upload feature. Just call `bootsy_area` in a form builder not associated to a `Bootsy::Container` model. This way users can insert images in their texts by providing an image url.
+It's also possible to use Bootsy without the image upload feature. Just call
+`bootsy_area` in a form builder not associated to a `Bootsy::Container` model.
+This way users can insert images in their texts by providing an image url.
 
 
 ## Configuration
 
-You can set the default editor options, image sizes available (small, medium, large and/or its original), its dimensions and more. Take a look at the initalizer file, `/config/initializers/bootsy.rb`.
+You can set the default editor options, image sizes available (small, medium,
+large and/or its original), its dimensions and more. Take a look at the initalizer
+file, `/config/initializers/bootsy.rb`.
 
 
 ## I18n
 
-Bootsy defines some i18n keys. The english translation is automatically added to your `config/locales` directory as `bootsy.en.yml`. You can follow that template in order to translate Bootsy to your language. You can find some examples [here](https://github.com/volmer/bootsy/tree/master/config/locales). It is also necessary to add a translation for Bootstrap-wysihtml5, the javascript editor, in your assets pipeline. Instructions [here](https://github.com/jhollingworth/bootstrap-wysihtml5#i18n). If you are using the alert for unsaved changes, you have to define a translation for it as well. Just follow [this example](https://github.com/volmer/bootsy/tree/master/app/assets/bootsy/locales/bootsy.pt-BR.js).
+Bootsy defines some i18n keys. The english translation is automatically added
+to your `config/locales` directory as `bootsy.en.yml`. You can follow that template
+in order to translate Bootsy to your language. You can find some examples
+[here](https://github.com/volmer/bootsy/tree/master/config/locales). It is also
+necessary to add a translation for Bootstrap-wysihtml5, the javascript editor, in
+your assets pipeline. Instructions [here](https://github.com/jhollingworth/bootstrap-wysihtml5#i18n).
+If you are using the alert for unsaved changes, you have to define a translation
+for it as well. Just follow [this example](https://github.com/volmer/bootsy/tree/master/app/assets/bootsy/locales/bootsy.pt-BR.js).
 
 
 ## License

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

@@ -5,14 +5,14 @@
         "font-styles": function(locale, options) {
             var size = (options && options.size) ? ' btn-'+options.size : '';
             return "<li class='dropdown'>" +
-              "<a class='btn dropdown-toggle" + size + "' data-toggle='dropdown' href='#' title='" + locale.font_styles.title + "'>" +
+              "<a class='btn btn-default dropdown-toggle" + size + "' data-toggle='dropdown' href='#' title='" + locale.font_styles.title + "'>" +
               "<i class='icon-font'></i>&nbsp;<span class='current-font'>" + locale.font_styles.normal + "</span>&nbsp;<b class='caret'></b>" +
               "</a>" +
               "<ul class='dropdown-menu'>" +
-                "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='div' tabindex='-1'>" + locale.font_styles.normal + "</a></li>" +
-                "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h1' tabindex='-1'>" + locale.font_styles.h1 + "</a></li>" +
-                "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h2' tabindex='-1'>" + locale.font_styles.h2 + "</a></li>" +
-                "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h3' tabindex='-1'>" + locale.font_styles.h3 + "</a></li>" +
+                "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='div' tabindex='-1' role='menuitem'>" + locale.font_styles.normal + "</a></li>" +
+                "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h1' tabindex='-1' role='menuitem'>" + locale.font_styles.h1 + "</a></li>" +
+                "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h2' tabindex='-1' role='menuitem'>" + locale.font_styles.h2 + "</a></li>" +
+                "<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h3' tabindex='-1' role='menuitem'>" + locale.font_styles.h3 + "</a></li>" +
               "</ul>" +
             "</li>";
         },
@@ -21,9 +21,9 @@
             var size = (options && options.size) ? ' btn-'+options.size : '';
             return "<li>" +
               "<div class='btn-group'>" +
-                "<a class='btn" + size + "' data-wysihtml5-command='bold' title='CTRL+B' tabindex='-1'>" + locale.emphasis.bold + "</a>" +
-                "<a class='btn" + size + "' data-wysihtml5-command='italic' title='CTRL+I' tabindex='-1'>" + locale.emphasis.italic + "</a>" +
-                "<a class='btn" + size + "' data-wysihtml5-command='underline' title='CTRL+U' tabindex='-1'>" + locale.emphasis.underline + "</a>" +
+                "<a class='btn btn-default " + size + "' data-wysihtml5-command='bold' title='CTRL+B' tabindex='-1'>" + locale.emphasis.bold + "</a>" +
+                "<a class='btn btn-default " + size + "' data-wysihtml5-command='italic' title='CTRL+I' tabindex='-1'>" + locale.emphasis.italic + "</a>" +
+                "<a class='btn btn-default " + size + "' data-wysihtml5-command='underline' title='CTRL+U' tabindex='-1'>" + locale.emphasis.underline + "</a>" +
               "</div>" +
             "</li>";
         },
@@ -32,10 +32,10 @@
             var size = (options && options.size) ? ' btn-'+options.size : '';
             return "<li>" +
               "<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-left'></i></a>" +
-                "<a class='btn" + size + "' data-wysihtml5-command='Indent' title='" + locale.lists.indent + "' tabindex='-1'><i class='icon-indent-right'></i></a>" +
+                "<a class='btn btn-default " + size + "' data-wysihtml5-command='insertUnorderedList' title='" + locale.lists.unordered + "' tabindex='-1'><i class='icon-list'></i></a>" +
+                "<a class='btn btn-default " + size + "' data-wysihtml5-command='insertOrderedList' title='" + locale.lists.ordered + "' tabindex='-1'><i class='icon-th-list'></i></a>" +
+                "<a class='btn btn-default " + size + "' data-wysihtml5-command='Outdent' title='" + locale.lists.outdent + "' tabindex='-1'><i class='icon-indent-left'></i></a>" +
+                "<a class='btn btn-default " + size + "' data-wysihtml5-command='Indent' title='" + locale.lists.indent + "' tabindex='-1'><i class='icon-indent-right'></i></a>" +
               "</div>" +
             "</li>";
         },
@@ -43,40 +43,48 @@
         "link": function(locale, options) {
             var size = (options && options.size) ? ' btn-'+options.size : '';
             return "<li>" +
-              "<div class='bootstrap-wysihtml5-insert-link-modal modal hide fade'>" +
-                "<div class='modal-header'>" +
-                  "<a class='close' data-dismiss='modal'>&times;</a>" +
-                  "<h3>" + locale.link.insert + "</h3>" +
-                "</div>" +
-                "<div class='modal-body'>" +
-                  "<input value='http://' class='bootstrap-wysihtml5-insert-link-url input-xlarge'>" +
-                "</div>" +
-                "<div class='modal-footer'>" +
-                  "<a href='#' class='btn' data-dismiss='modal'>" + locale.link.cancel + "</a>" +
-                  "<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.link.insert + "</a>" +
+              "<div class='bootstrap-wysihtml5-insert-link-modal modal fade' tabindex='-1' role='dialog' aria-hidden='true'>" +
+                "<div class='modal-dialog'>" +
+                  "<div class='modal-content'>" +
+                    "<div class='modal-header'>" +
+                      "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>" +
+                      "<h3 class='modal-title'>" + locale.link.insert + "</h3>" +
+                    "</div>" +
+                    "<div class='modal-body'>" +
+                      "<input value='http://' class='bootstrap-wysihtml5-insert-link-url form-control input-lg'>" +
+                    "</div>" +
+                    "<div class='modal-footer'>" +
+                      "<a href='#' class='btn btn-default' data-dismiss='modal'>" + locale.link.cancel + "</a>" +
+                      "<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.link.insert + "</a>" +
+                    "</div>" +
+                  "</div>" +
                 "</div>" +
               "</div>" +
-              "<a class='btn" + size + "' data-wysihtml5-command='createLink' title='" + locale.link.insert + "' tabindex='-1'><i class='icon-share'></i></a>" +
+              "<a class='btn btn-default " + size + "' data-wysihtml5-command='createLink' title='" + locale.link.insert + "' tabindex='-1'><i class='icon-share'></i></a>" +
             "</li>";
         },
 
         "image": function(locale, options) {
             var size = (options && options.size) ? ' btn-'+options.size : '';
             return "<li>" +
-              "<div class='bootstrap-wysihtml5-insert-image-modal modal hide fade'>" +
-                "<div class='modal-header'>" +
-                  "<a class='close' data-dismiss='modal'>&times;</a>" +
-                  "<h3>" + locale.image.insert + "</h3>" +
-                "</div>" +
-                "<div class='modal-body'>" +
-                  "<input value='http://' class='bootstrap-wysihtml5-insert-image-url input-xlarge'>" +
-                "</div>" +
-                "<div class='modal-footer'>" +
-                  "<a href='#' class='btn' data-dismiss='modal'>" + locale.image.cancel + "</a>" +
-                  "<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.image.insert + "</a>" +
+              "<div class='bootstrap-wysihtml5-insert-image-modal modal fade' tabindex='-1' role='dialog' aria-hidden='true'>" +
+                "<div class='modal-dialog'>" +
+                  "<div class='modal-content'>" +
+                    "<div class='modal-header'>" +
+                      "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>" +
+                      "<h3 class='modal-title'>" + locale.image.insert + "</h3>" +
+                    "</div>" +
+                    "<div class='modal-body'>" +
+                      "<input value='http://' class='bootstrap-wysihtml5-insert-image-url form-control input-lg'>" +
+                    "</div>" +
+                    "<div class='modal-footer'>" +
+                      "<a href='#' class='btn btn-default ' data-dismiss='modal'>" + locale.image.cancel + "</a>" +
+                      "<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.image.insert + "</a>" +
+                    "</div>" +
+                  "</div>" +
                 "</div>" +
               "</div>" +
-              "<a class='btn" + size + "' data-wysihtml5-command='insertImage' title='" + locale.image.insert + "' tabindex='-1'><i class='icon-picture'></i></a>" +
+              "<a class='btn btn-default " + size + "' data-wysihtml5-command='insertImage' title='" + locale.image.insert + "' tabindex='-1'><i class='icon-picture'></i></a>" +
             "</li>";
         },
 
@@ -84,7 +92,7 @@
             var size = (options && options.size) ? ' btn-'+options.size : '';
             return "<li>" +
               "<div class='btn-group'>" +
-                "<a class='btn" + size + "' data-wysihtml5-action='change_view' title='" + locale.html.edit + "' tabindex='-1'><i class='icon-pencil'></i></a>" +
+                "<a class='btn btn-default " + size + "' data-wysihtml5-action='change_view' title='" + locale.html.edit + "' tabindex='-1'><i class='icon-pencil'></i></a>" +
               "</div>" +
             "</li>";
         },
@@ -92,21 +100,21 @@
         "color": function(locale, options) {
             var size = (options && options.size) ? ' btn-'+options.size : '';
             return "<li class='dropdown'>" +
-              "<a class='btn dropdown-toggle" + size + "' data-toggle='dropdown' href='#' tabindex='-1' title='" + locale.colours.title + "'>" +
+              "<a class='btn btn-default dropdown-toggle" + size + "' data-toggle='dropdown' href='#' tabindex='-1' title='" + locale.colours.title + "'>" +
                 "<span class='current-color'>" + locale.colours.black + "</span>&nbsp;<b class='caret'></b>" +
               "</a>" +
               "<ul class='dropdown-menu'>" +
-                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='black'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='black'>" + locale.colours.black + "</a></li>" +
-                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='silver'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='silver'>" + locale.colours.silver + "</a></li>" +
-                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='gray'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='gray'>" + locale.colours.gray + "</a></li>" +
-                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='maroon'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='maroon'>" + locale.colours.maroon + "</a></li>" +
-                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='red'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='red'>" + locale.colours.red + "</a></li>" +
-                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='purple'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='purple'>" + locale.colours.purple + "</a></li>" +
-                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='green'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='green'>" + locale.colours.green + "</a></li>" +
-                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='olive'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='olive'>" + locale.colours.olive + "</a></li>" +
-                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='navy'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='navy'>" + locale.colours.navy + "</a></li>" +
-                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='blue'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='blue'>" + locale.colours.blue + "</a></li>" +
-                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='orange'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='orange'>" + locale.colours.orange + "</a></li>" +
+                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='black'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='black' role='menuitem'>" + locale.colours.black + "</a></li>" +
+                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='silver'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='silver' role='menuitem'>" + locale.colours.silver + "</a></li>" +
+                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='gray'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='gray' role='menuitem'>" + locale.colours.gray + "</a></li>" +
+                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='maroon'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='maroon' role='menuitem'>" + locale.colours.maroon + "</a></li>" +
+                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='red'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='red' role='menuitem'>" + locale.colours.red + "</a></li>" +
+                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='purple'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='purple' role='menuitem'>" + locale.colours.purple + "</a></li>" +
+                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='green'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='green' role='menuitem'>" + locale.colours.green + "</a></li>" +
+                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='olive'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='olive' role='menuitem'>" + locale.colours.olive + "</a></li>" +
+                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='navy'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='navy' role='menuitem'>" + locale.colours.navy + "</a></li>" +
+                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='blue'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='blue' role='menuitem'>" + locale.colours.blue + "</a></li>" +
+                "<li><div class='wysihtml5-colors' data-wysihtml5-command-value='orange'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='orange' role='menuitem'>" + locale.colours.orange + "</a></li>" +
               "</ul>" +
             "</li>";
         }
@@ -143,7 +151,7 @@
 
         createEditor: function(options) {
             options = options || {};
-            
+
             // Add the toolbar to a clone of the options object so multiple instances
             // of the WYISYWG don't break because "toolbar" is already defined
             options = $.extend(true, {}, options);
@@ -392,7 +400,7 @@
             return methods.init.apply( this, arguments );
         } else {
             $.error( 'Method ' +  method + ' does not exist on jQuery.wysihtml5' );
-        }    
+        }
     };
 
     $.fn.wysihtml5.Constructor = Wysihtml5;

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

@@ -41,7 +41,7 @@ $.fn.bootstrapFileInput = function() {
 
     // 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>');
+    $elem.replaceWith('<a class="file-input-wrapper btn btn-default ' + className + '">'+buttonWord+input+'</a>');
   })
 
   // After we have found all of the file inputs let's apply a listener for tracking the mouse movement.

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

@@ -1,221 +1,278 @@
 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
+Bootsy.Area = function($el) {
+  this.$el = $el;
+  this.modal = $el.siblings('.bootsy-modal');
+  this.locale = $el.data('bootsy-locale') || $('html').attr('lang') || 'en';
+  this.unsavedChanges = false;
 
-  this.progressBar = function () {
-    // Show loading spinner
-    $('.bootsy-spinner img').fadeIn(200);
+  this.options = {
+    locale: this.locale,
+    alertUnsavedChanges: $el.data('bootsy-alert-unsaved'),
+    image: $el.data('bootsy-image'),
+    uploader: $el.data('bootsy-uploader'),
   };
 
-  this.setImageGalleryId = function (id) {
-    self.imageGalleryModal.data('bootsy-gallery-id', id)
-    $('input.bootsy_image_gallery_id').val(id);
-  };
+  if ($el.data('bootsy-font-styles') === false) this.options['font-styles'] = false;
+  if ($el.data('bootsy-emphasis') === false) this.options.emphasis = false;
+  if ($el.data('bootsy-lists') === false) this.options.lists = false;
+  if ($el.data('bootsy-html') === true) this.options.html = true;
+  if ($el.data('bootsy-link') === false) this.options.link = false;
+  if ($el.data('bootsy-color') === false) this.options.color = false;
 
-  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);
-      }
-    });
-  };
+  // Delegate find to the modal
+  this.find = this.modal.find.bind(this.modal);
+};
+
+
+// Gallery loading
+Bootsy.Area.prototype.showGalleryLoadingAnimation = function() {
+  this.find('.bootsy-gallery-loader').fadeIn(200);
+};
+
+Bootsy.Area.prototype.hideGalleryLoadingAnimation = function() {
+  this.find('.bootsy-gallery-loader').fadeOut(200);
+};
 
-  this.refreshGallery = function () {
-    self.progressBar();
-    $.ajax({
-      url: '/bootsy/images',
-      type: 'GET',
-      cache: false,
-      data: {
-        image_gallery_id: self.imageGalleryModal.data('bootsy-gallery-id')
-      },
-      dataType: 'json',
-      success: function (data) {
-        // 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);
-        self.imageGalleryModal.find('a.refresh-btn').show();
+
+// Upload loading animation
+Bootsy.Area.prototype.showUploadLoadingAnimation = function() {
+  this.find('.bootsy-upload-loader').fadeIn(200);
+};
+
+Bootsy.Area.prototype.hideUploadLoadingAnimation = function() {
+  this.find('.bootsy-upload-loader').fadeOut(200);
+};
+
+// Alert for empty gallery
+Bootsy.Area.prototype.showEmptyAlert = function() {
+  this.find('.bootsy-empty-alert').fadeIn(200);
+};
+
+Bootsy.Area.prototype.hideEmptyAlert = function() {
+  this.find('.bootsy-empty-alert').fadeOut(200);
+};
+
+// Manual refresh button
+Bootsy.Area.prototype.showRefreshButton = function() {
+  this.find('.refresh-btn').fadeIn(200);
+};
+
+Bootsy.Area.prototype.hideRefreshButton = function() {
+  this.find('.refresh-btn').fadeOut(200);
+};
+
+
+// Set upload form
+Bootsy.Area.prototype.setUploadForm = function(html) {
+  var form;
+
+  this.find('.modal-footer').html(html);
+
+  this.hideUploadLoadingAnimation();
+
+  this.find('.bootsy-upload-form input[type="file"]').bootstrapFileInput();
+
+  this.uploadInput = this.find('.bootsy-upload-form input[type="file"]');
+
+  this.uploadInput.change(function() {
+    this.showUploadLoadingAnimation();
+
+    this.uploadInput.closest('form').submit();
+  }.bind(this));
+};
+
+
+// Set image gallery
+Bootsy.Area.prototype.setImageGallery = function() {
+  this.showGalleryLoadingAnimation();
+
+  $.ajax({
+    url: '/bootsy/images',
+    type: 'GET',
+    cache: false,
+    data: {
+      image_gallery_id: this.modal.data('gallery-id')
+    },
+    dataType: 'json',
+    success: function(data) {
+      this.hideGalleryLoadingAnimation();
+
+      $.each(data.images, function(index, value) {
+        this.addImage(value);
+      }.bind(this));
+
+      if (data.images.length == 0) {
+        this.showEmptyAlert();
       }
-    });
-  };
 
-  this.openImageGallery = function (editor) {
-    editor.currentView.element.focus(false);
-    self.caretBookmark = editor.composer.selection.getBookmark();
-    $('#bootsy_image_gallery').modal('show');
-  };
+      this.setUploadForm(data.form);
 
-  this.insertImage = function (image) {
-    $('#bootsy_image_gallery').modal('hide');
-    self.editor.currentView.element.focus();
-    if (self.caretBookmark) {
-      self.editor.composer.selection.setBookmark(self.caretBookmark);
-      self.caretBookmark = null;
-    }
-    self.editor.composer.commands.exec('insertImage', image);
-  };
+      this.modal.data('gallery-loaded', true);
+    }.bind(this),
+    error: function(e) {
+      alert(Bootsy.translations[this.locale].error);
 
-  this.on = function (eventName, callback) {
-    self.eventCallbacks[eventName].push(callback);
-  };
+      this.showRefreshButton();
+    }.bind(this)
+  });
+};
 
-  this.trigger = function (eventName) {
-    var callbacks = self.eventCallbacks[eventName];
-    for(i in callbacks) {
-      callbacks[i]();
-    }
-    self.triggeredEvents.push(eventName);
-  };
+// Delete image
+Bootsy.Area.prototype.deleteImage = function (id) {
+  var image = this.find('.bootsy-image[data-id="' + id + '"]');
 
-  this.after = function (eventName, callback) {
-    if(self.triggeredEvents.indexOf(eventName) != -1) {
-      callback();
-    }else{
-      self.on(eventName, callback);
-    }
-  };
+  this.hideGalleryLoadingAnimation();
 
-  this.alertUnsavedChanges = function () {
-    if (self.unsavedChanges) {
-      return Bootsy.translations[self.locale].alert_unsaved;
+  image.hide(200, function() {
+    image.remove();
+
+    // Put message back if 0 images
+    if (this.find('.bootsy-image').length == 0 ) {
+      this.showEmptyAlert();
     }
-  };
+  }.bind(this));
+};
 
-  this.clear = function () {
-    self.editor.clear();
-    self.setImageGalleryId('');
-  };
 
-  this.locale = $el.data('bootsy-locale') || $('html').attr('lang') || 'en';
-  this.caretBookmark = false;
-  this.unsavedChanges = false;
-  this.editor = false;
-  this.eventCallbacks = {'loaded': []};
-  this.triggeredEvents = [];
-  this.editorOptions = {locale: this.locale};
-
-  if ($el.data('bootsy-font-styles') === false) this.editorOptions['font-styles'] = false;
-  if ($el.data('bootsy-emphasis') === false) this.editorOptions.emphasis = false;
-  if ($el.data('bootsy-lists') === false) this.editorOptions.lists = false;
-  if ($el.data('bootsy-html') === true) this.editorOptions.html = true;
-  if ($el.data('bootsy-link') === false) this.editorOptions.link = false;
-  if ($el.data('bootsy-color') === false) this.editorOptions.color = false;
-
-  if ($el.data('bootsy-alert-unsaved') !== false) {
-    window.onbeforeunload = this.alertUnsavedChanges;
+// Add image to gallery
+Bootsy.Area.prototype.addImage = function(html) {
+  this.hideEmptyAlert();
+
+  $(html).hide().appendTo(this.find('.bootsy-gallery')).fadeIn(200);
+};
+
+// Insert image in the text
+Bootsy.Area.prototype.insertImage = function(image) {
+  this.modal.modal('hide');
+
+  this.editor.currentView.element.focus();
+
+  if (this.caretBookmark) {
+    this.editor.composer.selection.setBookmark(this.caretBookmark);
+    this.caretBookmark = null;
   }
 
-  $el.closest('form').submit(function (e) {
-    self.unsavedChanges = false;
-    return true;
-  });
+  this.editor.composer.commands.exec('insertImage', image);
+};
+
+// Open Bootsy modal
+Bootsy.Area.prototype.openImagesModal = function(editor) {
+  editor.currentView.element.focus(false);
+
+  this.caretBookmark = editor.composer.selection.getBookmark();
+
+  this.modal.modal('show');
+};
+
+// Alert for unsaved changes
+Bootsy.Area.prototype.unsavedChangesAlert = function () {
+  if (this.unsavedChanges) {
+    return Bootsy.translations[this.locale].alertUnsaved;
+  }
+};
+
+// Clear everything
+Bootsy.Area.prototype.clear = function () {
+  this.editor.clear();
+  this.setImageGalleryId('');
+  this.modal.data('gallery-loaded', false);
+};
+
+// Set the image gallery id
+Bootsy.Area.prototype.setImageGalleryId = function(id) {
+  this.modal.data('gallery-id', id);
+
+  this.$el.siblings('.bootsy_image_gallery_id').val(id);
+};
+
+
+// Init components
+Bootsy.Area.prototype.init = function() {
+  var insert = this.insertImage.bind(this);
+
+  if ((this.options.image === true) && (this.options.uploader === true)) {
+    this.modal.on('click', '.bootsy-image .insert', function(e) {
+      var img, imageObject;
+      var imagePrefix = '/' + $(this).attr('data-image-size') + '_';
+
+      if ($(this).data('image-size') === 'original') {
+        imagePrefix = '/';
+      }
+
+      img = $(this).parents('.bootsy-image').find('img');
 
-  if ($el.data('bootsy-image') !== false) {
-    if ($el.data('bootsy-uploader') !== false) {
-      this.editorOptions.image = false;
-      this.editorOptions.customCommand = true;
-      this.editorOptions.customCommandCallback = this.openImageGallery;
-      this.editorOptions.customTemplates = {
-        customCommand: function (locale, options) {
-          var size = (options && options.size) ? ' btn-'+options.size : '';
-          return "<li>" +
-            "<a class='btn" + size + "' data-wysihtml5-command='customCommand' title='" + locale.image.insert + "' tabindex='-1'><i class='icon-picture'></i></a>" +
-          "</li>";
-        }
+      imageObject = {
+        src: img.attr('src').replace('/thumb_', imagePrefix),
+        alt: img.attr('alt').replace('Thumb_', '')
       };
 
-      this.imageGalleryModal = $('#bootsy_image_gallery');
-      this.imageGalleryModal.find('a.refresh-btn').hide();
+      imageObject.align = $(this).data('position');
 
-      this.imageGalleryModal.parents('form').after(this.imageGalleryModal);
+      insert(imageObject);
+    });
 
-      this.imageGalleryModal.on('click', 'a[href="#refresh-gallery"]', this.refreshGallery);
+    // Let's use the uploader, not the static image modal
+    this.options.image = false;
+    this.options.customCommand = true;
+    this.options.customCommandCallback = this.openImagesModal.bind(this);
+    this.options.customTemplates = {
+      customCommand: function(locale, options) {
+        var size = (options && options.size) ? ' btn-'+options.size : '';
+
+        return  '<li>' +
+                  '<a class="btn btn-default ' + size + '" data-wysihtml5-command="customCommand" title="' + locale.image.insert + '" tabindex="-1">' +
+                    '<i class="icon-picture"></i>' +
+                  '</a>' +
+                '</li>';
+      }
+    };
 
-      this.imageGalleryModal.find('a.destroy_btn').click(this.progressBar);
+    // In order to avoid form nesting
+    this.modal.parents('form').after(this.modal);
 
-      this.imageGalleryModal.modal({show: false});
-      this.imageGalleryModal.on('shown', this.refreshGallery);
+    this.modal.on('click', 'a[href="#refresh-gallery"]', this.setImageGallery.bind(this));
 
-      this.imageGalleryModal.on('hide', function () {
-        self.progressBar();
-        self.editor.currentView.element.focus();
-      });
+    this.modal.on('ajax:before', '.destroy-btn', this.showGalleryLoadingAnimation.bind(this));
 
-      this.imageGalleryModal.on('click.dismiss.modal', '[data-dismiss="modal"]', function (e) {
-        e.stopPropagation();
-      });
+    this.modal.on('ajax:success', '.destroy-btn', function(evt, data) {
+      this.deleteImage(data.id);
+    }.bind(this));
 
-      this.imageGalleryModal.on('click', 'ul.dropdown-menu a.insert', function (e) {
-        var imagePrefix = "/"+$(this).attr('data-image-size')+"_";
-        if($(this).data('image-size') == 'original') {
-          imagePrefix = '/';
-        }
-        var img = $(this).parents('li.dropdown').find('img');
-        var obj = {
-          src: img.attr('src').replace("/thumb_", imagePrefix),
-          alt: img.attr('alt').replace("Thumb_", "")
-        };
+    this.modal.on('ajax:success', '.bootsy-upload-form', function(evt, data) {
+      this.setImageGalleryId(data.gallery_id);
+      this.addImage(data.image);
+      this.setUploadForm(data.form);
+    }.bind(this));
+  }
 
-        obj.align = $(this).data('position');
+  this.editor = this.$el.wysihtml5($.extend(Bootsy.options, this.options)).data('wysihtml5').editor;
 
-        self.insertImage(obj);
-      });
-    }
-  } else {
-    this.editorOptions.image = false;
+  // Mechanism for unsaved changes alert
+  if (this.options.alertUnsavedChanges !== false) {
+    window.onbeforeunload = this.unsavedChangesAlert.bind(this);
   }
 
-  this.editor = $el.wysihtml5($.extend(Bootsy.editorOptions, this.editorOptions)).data('wysihtml5').editor;
+  this.$el.closest('form').submit(function(e) {
+    this.unsavedChanges = false;
 
-  this.editor.on('change', function () {
-    self.unsavedChanges = true;
-  });
+    return true;
+  }.bind(this));
+
+  this.editor.on('change', function() {
+    this.unsavedChanges = true;
+  }.bind(this));
+
+  this.modal.modal({ show: false });
+
+  this.modal.on('shown.bs.modal', function() {
+    if (this.modal.data('gallery-loaded') !== true) {
+      this.setImageGallery();
+    }
+  }.bind(this));
+
+  this.modal.on('hide.bs.modal', this.editor.currentView.element.focus);
 
-  this.trigger('loaded');
+  this.hideRefreshButton();
+  this.hideEmptyAlert();
 };