bootsy 2.1.0 → 2.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ecb062c39cbffa271dda6803ef4bcaa1a302d88d
-  data.tar.gz: c5afb0b14abb89b4ee1091b79c2907144fd597f8
+  metadata.gz: 9463b3fee7ada8af86752ace7357e85e4119395b
+  data.tar.gz: 0afa483188a2bcfe9d8faa324df42f6df0273dbd
 SHA512:
-  metadata.gz: e9cf8f084c8eadd962250214c5e7a9da48242c879bf443bfd64fd27120dbcf6ec593b71a0fcfe2934df5106a889b3fbcfb3334710b546d2724650c88531a7315
-  data.tar.gz: b172836a39271c1534adbb592757547467ff365536f58973411004bad06762a306837f8b5864e6f99762478ce6ed76eb17828c70f780609bbab24c04b08fe858
+  metadata.gz: a58b44fd911cd208badf20ac5c2938a16a958261fbd558677a8280bdb5ff4491eb7b050bd66cde7d881034af7c26717be772e2d31ef9275ee707fcbc28bba291
+  data.tar.gz: 5fa37fac75e6344089fa76a327589622642e8399fa02054bd4016af23fc3d7fe3f67b7c1704ea92109575a0512e15fac5c90cde9782f5b8c879dbc637f488680

data/MIT-LICENSE

@@ -1,4 +1,4 @@
-Copyright 2012-2014 Volmer Soares
+Copyright 2012-2015 Volmer Soares
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

data/README.md

@@ -6,7 +6,9 @@
 [![Code Climate](https://codeclimate.com/github/volmer/bootsy.png)](https://codeclimate.com/github/volmer/bootsy)
 [![Coverage Status](https://coveralls.io/repos/volmer/bootsy/badge.png?branch=master)](https://coveralls.io/r/volmer/bootsy)
 
-*Bootsy* is a WYSIWYG editor for Rails based on [Bootstrap-wysihtml5](https://github.com/jhollingworth/bootstrap-wysihtml5) with image uploads using [CarrierWave](https://github.com/carrierwaveuploader/carrierwave).
+*Bootsy* is a WYSIWYG editor for Rails based on
+[Bootstrap3-wysihtml5](https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg) with image uploads using
+[CarrierWave](https://github.com/carrierwaveuploader/carrierwave).
 
 ### Live demo
 
@@ -16,7 +18,6 @@
 
 ## Requirements
 
-* Ruby `2` or `1.9.3`;
 * ImageMagick or GraphicsMagick (for MiniMagick);
 * Rails `4`;
 * [Bootstrap `3`](http://getbootstrap.com/) fully installed in your app.
@@ -24,28 +25,32 @@
 
 ## Installation
 
-1\. Add Bootsy to your Gemfile:
-```ruby
-gem 'bootsy'
-```
+1. Add Bootsy to your Gemfile:
+  ```ruby
+  gem 'bootsy'
+  ```
 
-2\. Run the bundle command to install it:
-```console
-bundle install
-```
+2. Run the bundle command to install it:
+  ```console
+  bundle install
+  ```
 
-3\. Run the install generator:
-```console
-rails generate bootsy:install
-```
+3. Run the install generator:
+  ```console
+  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:
-```console
-rake bootsy:install:migrations
-rake db:migrate
-```
+  **Note:** If your project uses SASS or LESS and `application.css` does not exist,
+  you will be required to require bootsy manually using `*= require bootsy` or if you prefer
+  to import assets yourself `@import "bootsy";`
+
+4. Add and run migrations:
+  ```console
+  rake bootsy:install:migrations
+  rake db:migrate
+  ```
 
 
 ## Usage
@@ -110,12 +115,12 @@ You can enable and disable features as you like. For instance, if you don't want
 ```erb
 <%= f.bootsy_area :my_attribute, editor_options: { link: false, color: false } %>
 ```
-Available options are: `:font_styles`, `:emphasis`, `:lists`, `:html`, `:link`, `:image` and `:color`.
+Available options are: `:blockquote`, `:font_styles`, `:emphasis`, `:lists`, `:html`, `:link`, `:image` and `:color`.
 
 
 ### Alert of unsaved changes
 
-By default Bootsy alerts the user about unsaved changes if the page is closed or reloaded. You can disable 
+By default Bootsy alerts the user about unsaved changes if the page is closed or reloaded. You can disable
 this feature with:
 ```erb
 <%= f.bootsy_area :my_attribute, editor_options: { alert_unsaved: false } %>
@@ -123,8 +128,8 @@ this feature with:
 
 ## Uploads
 
-If you don't want to have image uploads, just call `bootsy_area` in a form builder not 
-associated to a `Bootsy::Container` model. This way users will still be able to insert 
+If you don't want to have image uploads, just call `bootsy_area` in a form builder not
+associated to a `Bootsy::Container` model. This way users will still be able to insert
 images in the text area using an external image URL.
 
 
@@ -138,12 +143,17 @@ the options as you like.
 
 ## I18n
 
-Bootsy defines some i18n keys. English translations are added by default to your 
+Bootsy defines some I18n keys. English translations are added by default to your
 `config/locales` directory as `bootsy.en.yml`. You can use it as a template
-to translate Bootsy to your language. [Here are some examples](https://github.com/volmer/bootsy/tree/master/config/locales). You also need to translate Bootstrap-wysihtml5, the underlying javascript editor. Instructions [here](https://github.com/jhollingworth/bootstrap-wysihtml5#i18n). Unless you have disabled it, it's 
-also nice to translate the alert message of unsaved changes. Just follow [this example](https://github.com/volmer/bootsy/tree/master/app/assets/bootsy/locales/bootsy.pt-BR.js).
+to translate Bootsy to your language.
+[Here are some examples](https://github.com/volmer/bootsy/tree/master/config/locales).
+
+You also need to translate Bootsy on the JavaScript side. Just follow
+[this example](https://github.com/volmer/bootsy/blob/master/app/assets/javascripts/bootsy/locales/en.js).
+Bootsy will try to guess the locale based on the `lang` attribute of the page's `<html>` tag.
+You can set the locale directly by setting a `data-bootsy-locale` attribute on your `<textarea>`.
 
 
 ## License
 
-MIT License. Copyright 2012-2014 Volmer Soares
+MIT License. Copyright 2012-2015 Volmer Soares

data/Rakefile

@@ -22,7 +22,6 @@ end
 
 Bundler::GemHelper.install_tasks
 
-require 'cucumber/rake/task'
 require 'rspec/core/rake_task'
 require 'coveralls/rake/task'
 require 'rubocop/rake_task'
@@ -32,9 +31,5 @@ RuboCop::RakeTask.new(:rubocop) do |task|
 end
 Coveralls::RakeTask.new
 RSpec::Core::RakeTask.new(:spec)
-Cucumber::Rake::Task.new do |_|
-  # Uncomment this line when cucumber/multi_test work with minitest.
-  # t.cucumber_opts = %w{--format pretty -s}
-end
 
-task default: [:rubocop, :spec, :cucumber, 'coveralls:push']
+task default: [:rubocop, :spec, 'coveralls:push']

data/app/assets/javascripts/bootsy.js

@@ -1,9 +1,10 @@
 //= require jquery.remotipart
-//= require bootsy/polyfill
-//= require bootsy/wysihtml5
-//= require bootsy/bootstrap-wysihtml5
-//= require bootsy/bootsy
-//= require bootsy/bootstrap.file-input
-//= require bootsy/init
+//= require bootsy/vendor/polyfill
+//= require bootsy/vendor/bootstrap3-wysihtml5.all
+//= require bootsy/vendor/bootstrap.file-input
+//= require bootsy/area
 //= require bootsy/editor_options
-//= require bootsy/translations
+//= require bootsy/image_template
+//= require bootsy/init
+//= require bootsy/locales/en
+//= require bootsy/modal

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

@@ -0,0 +1,91 @@
+/* global Bootsy */
+
+window.Bootsy = window.Bootsy || {};
+
+Bootsy.Area = function($el) {
+  var self = this;
+
+  this.$el = $el;
+  this.unsavedChanges = false;
+  this.locale = $el.data('bootsy-locale') || $('html').attr('lang');
+  if (!$.fn.wysihtml5.locale.hasOwnProperty(this.locale)) this.locale = 'en';
+
+  this.options = {
+    locale: this.locale,
+    alertUnsavedChanges: $el.data('bootsy-alert-unsaved'),
+    uploader: $el.data('bootsy-uploader'),
+    toolbar: {
+      'color': $el.data('bootsy-color'),
+      'emphasis': $el.data('bootsy-emphasis'),
+      'font-styles': $el.data('bootsy-font-styles'),
+      'html': $el.data('bootsy-html'),
+      'image': $el.data('bootsy-image'),
+      'link': $el.data('bootsy-link'),
+      'lists': $el.data('bootsy-lists')
+    },
+    events: {
+      load: function() {
+        self.editor = this;
+        self.onEditorLoad();
+      },
+      change: function() {
+        self.unsavedChanges = true;
+      }
+    }
+  };
+};
+
+// Alert for unsaved changes
+Bootsy.Area.prototype.unsavedChangesAlert = function () {
+  if (this.unsavedChanges) {
+    return $.fn.wysihtml5.locale[this.locale].bootsy.alertUnsaved;
+  }
+};
+
+// Clear everything
+Bootsy.Area.prototype.clear = function () {
+  this.editor.clear();
+  this.setImageGalleryId('');
+  this.modal.$el.data('gallery-loaded', false);
+};
+
+Bootsy.Area.prototype.setImageGalleryId = function(id) {
+  this.$el.data('gallery-id', id);
+  this.$el.siblings('.bootsy_image_gallery_id').val(id);
+};
+
+Bootsy.Area.prototype.onEditorLoad = function() {};
+
+Bootsy.Area.prototype.setupModal = function() {
+  this.modal = new Bootsy.Modal(
+    this.editor.toolbar.commandMapping['insertImage:null'].dialog.container, this
+  );
+};
+
+// Init components
+Bootsy.Area.prototype.init = function() {
+  if (!this.$el.data('bootsy-initialized')) {
+    if ((this.options.toolbar.image === true) && (this.options.uploader === true)) {
+      this.options.customTemplates = {
+        image: Bootsy.imageTemplate
+      };
+
+      this.onEditorLoad = this.setupModal;
+    }
+
+    this.$el.wysihtml5($.extend(true, Bootsy.options, this.options));
+
+    // Mechanism for unsaved changes alert
+    if (this.options.alertUnsavedChanges !== false) {
+      window.onbeforeunload = this.unsavedChangesAlert.bind(this);
+    }
+
+    this.$el.closest('form').submit(function() {
+      this.unsavedChanges = false;
+
+      return true;
+    }.bind(this));
+
+    this.$el.data('bootsy-initialized', true);
+  }
+};

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

@@ -5,43 +5,14 @@ $('link[rel="stylesheet"]').each(function () {
   pageStylesheets.push($(this).attr('href'));
 });
 
-window.Bootsy.options = {
+window.Bootsy.options = $.extend(true, $.fn.wysihtml5.defaultOptions, {
   parserRules: {
     classes: {
-      "wysiwyg-color-silver" : 1,
-      "wysiwyg-color-gray" : 1,
-      "wysiwyg-color-white" : 1,
-      "wysiwyg-color-maroon" : 1,
-      "wysiwyg-color-red" : 1,
-      "wysiwyg-color-purple" : 1,
-      "wysiwyg-color-fuchsia" : 1,
-      "wysiwyg-color-green" : 1,
-      "wysiwyg-color-lime" : 1,
-      "wysiwyg-color-olive" : 1,
-      "wysiwyg-color-yellow" : 1,
-      "wysiwyg-color-navy" : 1,
-      "wysiwyg-color-blue" : 1,
-      "wysiwyg-color-teal" : 1,
-      "wysiwyg-color-aqua" : 1,
-      "wysiwyg-color-orange" : 1,
       "wysiwyg-float-left": 1,
-      "wysiwyg-float-right": 1
+      "wysiwyg-float-right": 1,
+      "wysiwyg-float-inline": 1
     },
-
     tags: {
-      "b":  {},
-      "i":  {},
-      "br": {},
-      "ol": {},
-      "ul": {},
-      "li": {},
-      "h1": {},
-      "h2": {},
-      "h3": {},
-      "small": {},
-      "p": {},
-      "blockquote": {},
-      "u": 1,
       "cite": {
         "check_attributes": {
           "title": "alt"
@@ -49,30 +20,12 @@ window.Bootsy.options = {
       },
       "img": {
         "check_attributes": {
-          "width": "numbers",
-          "alt": "alt",
-          "src": "src",
-          "height": "numbers"
+          "src": "src"
         },
         "add_class": {
           "align": "align_img"
         }
       },
-
-      "a":  {
-        set_attributes: {
-          target: "_blank",
-          rel:    "nofollow"
-        },
-        check_attributes: {
-          href:   "url" // important to avoid XSS
-        }
-      },
-      "span": 1,
-      "div": 1,
-      // to allow save and edit files with code tag hacks
-      "code": 1,
-      "pre": 1,
       // this allows youtube embed codes
       "iframe": {
         set_attributes: {
@@ -87,6 +40,8 @@ window.Bootsy.options = {
       }
     }
   },
-  color: true,
+  toolbar: {
+    color: true
+  },
   stylesheets: pageStylesheets
-};
+});

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

@@ -0,0 +1,45 @@
+window.Bootsy = window.Bootsy || {};
+
+window.Bootsy.imageTemplate = function(context) {
+  var locale = context.locale;
+  var size = (context.options.toolbar.size) ? ' btn-' + context.options.toolbar.size : '';
+  var icon = '<span class="glyphicon glyphicon-picture"></span>';
+
+  if (context.options.toolbar.fa) {
+    icon = '<span class="fa fa-file-image-o"></span>';
+  }
+
+  return  '<li>' +
+    '<div class="modal fade bootsy-modal" tabindex="-1" role="dialog" data-wysihtml5-dialog="insertImage" data-no-turbolink>'+
+      '<div class="modal-dialog" role="document">'+
+        '<div class="modal-content">'+
+          '<div class="modal-header">'+
+            '<button type="button" class="close" data-dismiss="modal" data-wysihtml5-dialog-action="cancel">' +
+              '<span aria-hidden="true">&times;</span>' +
+            '</button>' +
+            '<h4 class="modal-title">' + locale.image.insert + '</h4>' +
+          '</div>' +
+
+          '<div class="modal-body">' +
+            '<div class="alert alert-info bootsy-empty-alert">' +
+              locale.bootsy.empty +
+            '</div>' +
+
+            '<div class="row bootsy-gallery"></div>' +
+
+            '<img src="<%= image_path "bootsy/gallery-loader.gif" %>" class="bootsy-gallery-loader" />' +
+
+            '<a href="#refresh-gallery" class="btn btn-default btn-sm refresh-btn">' + locale.bootsy.refresh + '</a>' +
+          '</div>' +
+          '<input type="hidden" data-wysihtml5-dialog-field="src" value="" />' +
+          '<input type="hidden" data-wysihtml5-dialog-field="className" value="" />' +
+          '<div class="modal-footer"></div>' +
+        '</div>' +
+      '</div>' +
+    '</div>' +
+
+    '<a class="btn btn-default ' + size + '" data-wysihtml5-command="insertImage" title="' + locale.image.insert + '" tabindex="-1">' +
+      icon +
+    '</a>' +
+  '</li>';
+};

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

@@ -0,0 +1,59 @@
+/**
+ * English translations for bootstrap-wysihtml5 and Bootsy
+ */
+(function($){
+  $.fn.wysihtml5.locale['en'] = {
+    font_styles: {
+      normal: 'Normal text',
+      h1: 'Heading 1',
+      h2: 'Heading 2',
+      h3: 'Heading 3',
+      h4: 'Heading 4',
+      h5: 'Heading 5',
+      h6: 'Heading 6'
+    },
+    emphasis: {
+      bold: 'Bold',
+      italic: 'Italic',
+      underline: 'Underline',
+      small: 'Small'
+    },
+    lists: {
+      unordered: 'Unordered list',
+      ordered: 'Ordered list',
+      outdent: 'Outdent',
+      indent: 'Indent'
+    },
+    link: {
+      insert: 'Insert link',
+      cancel: 'Cancel',
+      target: 'Open link in new window'
+    },
+    image: {
+      insert: 'Insert image',
+      cancel: 'Cancel'
+    },
+    html: {
+      edit: 'Edit HTML'
+    },
+    colours: {
+      black: 'Black',
+      silver: 'Silver',
+      gray: 'Grey',
+      maroon: 'Maroon',
+      red: 'Red',
+      purple: 'Purple',
+      green: 'Green',
+      olive: 'Olive',
+      navy: 'Navy',
+      blue: 'Blue',
+      orange: 'Orange'
+    },
+    bootsy: {
+      empty: 'There are currently no uploaded images.',
+      refresh: 'Refresh',
+      alertUnsaved: 'You have unsaved changes.',
+      error: 'Something went wrong. Please try again later.'
+    }
+  };
+}(jQuery));