active_admin_editor 0.1.0

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2012 YOURNAME
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,39 @@
+# Active Admin Editor
+
+This is a wysiyg html editor for the [Active Admin](http://activeadmin.info/)
+interface using [wysihtml5](https://github.com/xing/wysihtml5).
+
+![screenshot](http://i.imgur.com/vfX1A.png)
+
+## Installation
+
+```ruby
+# Gemfile
+
+gem 'active_admin_editor'
+```
+
+Then add the following stylesheet to your application manifest:
+
+```
+//= require active_admin/editor/wysiwyg
+```
+
+## Usage
+This gem provides you with a custom formtastic input called `:html_editor` to build out an html editor.
+All you have to do is specify the `:as` option for your inputs.
+
+**Example**
+
+```ruby
+ActiveAdmin.register Page do
+  form do |f|
+    f.inputs do
+      f.input :title
+      f.input :content, as: :html_editor
+    end
+
+    f.buttons
+  end
+end
+```

data/Rakefile

@@ -0,0 +1,38 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'ActiveAdminEditor'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task :default => :test

data/app/assets/javascripts/active_admin/editor.js

@@ -0,0 +1,23 @@
+//= require active_admin/editor/wysihtml5.min
+//= require active_admin/editor/wysihtml5/parser_rules
+//= require active_admin/editor/quicksave
+
+(function($) {
+    $(function(){
+        var active_admin_editor, textarea_id, toolbar_id;
+        active_admin_editor = $('.active_admin_editor');
+
+        if (active_admin_editor.length > 0) {
+            textarea_id         = active_admin_editor.find('textarea').attr('id');
+            toolbar_id          = active_admin_editor.find('.active_admin_editor_toolbar').attr('id');
+
+            var editor = new wysihtml5.Editor(textarea_id, {
+                toolbar: toolbar_id,
+                stylesheets: "/assets/active_admin/editor/wysiwyg",
+                parserRules: wysihtml5ParserRules
+            });
+
+            window.editor = editor;
+        }
+    });
+})(jQuery);

data/app/assets/javascripts/active_admin/editor/quicksave.js

@@ -0,0 +1,36 @@
+(function($) {
+    $(function(){
+        var button = $('.button.quicksave');
+        button.click(function(e) {
+            e.preventDefault();
+
+            $.ajaxSetup({
+                beforeSend: function(xhr) {
+                    xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
+                }
+            });
+
+            var form = $(this).closest('form');
+            var url = form.attr('action');
+            var textarea = $(this).closest('.active_admin_editor').find('textarea');
+            var fields = textarea.attr('id').split('_');
+            var content = textarea.val();
+            var data = {
+                _method: 'PUT'
+            };
+
+            data[fields[0]] = {};
+            data[fields[0]][fields[1]] = content;
+
+            $.ajax({
+                url: url,
+                type: 'POST',
+                dataType: 'json',
+                data: data,
+                success: function(response) {
+                    console.log('saved');
+                }
+            });
+        });
+    });
+})(jQuery);

data/app/assets/stylesheets/active_admin/editor.css

@@ -0,0 +1,136 @@
+.active_admin_editor {
+    width: 76%;
+    float: left;
+}
+.active_admin_editor textarea {
+    width: 100%;
+    font-family: Georgia;
+    font-size: 1.3em;
+    height: 700px;
+    line-height: 1.5em;
+}
+
+/* wysihtml5 styles */
+.active_admin_editor .active_admin_editor_toolbar {
+    position: relative;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command] {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    background: url('editor/icons.png') top left no-repeat;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-action="change_view"] {
+    display: inline-block;
+    height: 16px;
+    line-height: 16px;
+    padding-left: 20px;
+    margin-right: 10px;
+    position: relative;
+    top: -4px;
+    background: url('editor/icons.png') top left no-repeat;
+    color: #000;
+    text-decoration: none;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command="bold"] {
+    background-position: 0 -304px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command="italic"] {
+    background-position: 0 -320px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command="createLink"] {
+    background-position: 0 -528px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command="insertImage"] {
+    background-position: 0 -576px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command="insertUnorderedList"] {
+    background-position: 0 -416px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command="insertOrderedList"] {
+    background-position: 0 -400px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command="formatBlock"] {
+    background: none;
+    width: auto;
+    padding-right: 2px;
+    position: relative;
+    top: -3px;
+    text-decoration: none;
+    font-size: 14px;
+    font-family: Georgia;
+    color: #000;
+}
+
+.active_admin_editor .active_admin_editor_toolbar .separator {
+    display: inline-block;
+    height: 1px;
+    width: 10px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar .wysihtml5-command-active {
+    background-color: #ccc;
+}
+
+.active_admin_editor .active_admin_editor_toolbar .button.quicksave {
+    float: right;
+    margin-top: -5px;
+    margin-right: -20px;
+    position: relative;
+    top: -5px;
+}
+
+/* wysihtml5 dialogs */
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-dialog] {
+    position: absolute;
+    top: 30px;
+    left: 10px;
+    width: 600px;
+    background: #fff;
+    padding: 10px;
+    border: 1px solid #c9d0d6;
+
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+
+    -moz-box-shadow: 0 0 5px #ccc;
+    -webkit-box-shadow: 0 0 5px #ccc;
+    box-shadow: 0 0 5px #ccc;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-dialog] label {
+    clear: both;
+    display: block;
+    margin: 10px 0;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-dialog] input {
+    width: 400px;
+    border: 1px solid #c9d0d6;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    font-size: 0.95em;
+    font-family: Helvetica, Arial, sans-serif;
+    outline: none;
+    padding: 8px 10px 7px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-dialog] .action-group {
+    padding-top: 20px;
+    clear: both;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-dialog-action] {
+    cursor: pointer;
+}

data/app/assets/stylesheets/active_admin/editor/wysiwyg.css

@@ -0,0 +1,130 @@
+
+.wysiwyg-font-size-smaller {
+  font-size: smaller;
+}
+
+.wysiwyg-font-size-larger {
+  font-size: larger;
+}
+
+.wysiwyg-font-size-xx-large {
+  font-size: xx-large;
+}
+
+.wysiwyg-font-size-x-large {
+  font-size: x-large;
+}
+
+.wysiwyg-font-size-large {
+  font-size: large;
+}
+
+.wysiwyg-font-size-medium {
+  font-size: medium;
+}
+
+.wysiwyg-font-size-small {
+  font-size: small;
+}
+
+.wysiwyg-font-size-x-small {
+  font-size: x-small;
+}
+
+.wysiwyg-font-size-xx-small {
+  font-size: xx-small;
+}
+
+.wysiwyg-color-black {
+  color: black;
+}
+
+.wysiwyg-color-silver {
+  color: silver;
+}
+
+.wysiwyg-color-gray {
+  color: gray;
+}
+
+.wysiwyg-color-white {
+  color: white;
+}
+
+.wysiwyg-color-maroon {
+  color: maroon;
+}
+
+.wysiwyg-color-red {
+  color: red;
+}
+
+.wysiwyg-color-purple {
+  color: purple;
+}
+
+.wysiwyg-color-fuchsia {
+  color: fuchsia;
+}
+
+.wysiwyg-color-green {
+  color: green;
+}
+
+.wysiwyg-color-lime {
+  color: lime;
+}
+
+.wysiwyg-color-olive {
+  color: olive;
+}
+
+.wysiwyg-color-yellow {
+  color: yellow;
+}
+
+.wysiwyg-color-navy {
+  color: navy;
+}
+
+.wysiwyg-color-blue {
+  color: blue;
+}
+
+.wysiwyg-color-teal {
+  color: teal;
+}
+
+.wysiwyg-color-aqua {
+  color: aqua;
+}
+
+.wysiwyg-text-align-right {
+  text-align: right;
+}
+
+.wysiwyg-text-align-center {
+  text-align: center;
+}
+
+.wysiwyg-text-align-left {
+  text-align: left;
+}
+
+.wysiwyg-float-left {
+  float: left;
+  margin: 0 8px 8px 0;
+}
+
+.wysiwyg-float-right {
+  float: right;
+  margin: 0 0 8px 8px;
+}
+
+.wysiwyg-clear-right {
+  clear: right;
+}
+
+.wysiwyg-clear-left {
+  clear: left;
+}

data/app/inputs/html_editor_input.rb

@@ -0,0 +1,79 @@
+class HtmlEditorInput < Formtastic::Inputs::TextInput
+  def toolbar
+    <<-HTML
+    <div id="#{input_html_options[:id]}-toolbar" class="active_admin_editor_toolbar">
+      <a data-wysihtml5-action="change_view">Source</a>
+      #{%Q{<a data-wysihtml5-command="bold" title="Bold"></a>} if input_html_options[:commands][:bold]}
+      #{%Q{<a data-wysihtml5-command="italic" title="Italic"></a>} if input_html_options[:commands][:italic]}
+      #{%Q{<a data-wysihtml5-command="createLink" title="Link"></a>} if input_html_options[:commands][:link]}
+      #{%Q{<a data-wysihtml5-command="insertImage" title="Image"></a>} if input_html_options[:commands][:image]}
+      #{%Q{<a data-wysihtml5-command="insertUnorderedList" title="Unordered list"></a>} if input_html_options[:commands][:ul]}
+      #{%Q{<a data-wysihtml5-command="insertOrderedList" title="Ordered list"></a>} if input_html_options[:commands][:li]}
+      <div class="separator"></div>
+      #{%Q{<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">h1</a>} if input_html_options[:commands][:h1]}
+      #{%Q{<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2">h2</a>} if input_html_options[:commands][:h2]}
+      #{%Q{<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h3">h3</a>} if input_html_options[:commands][:h3]}
+      #{%Q{<a class="button quicksave" href="#">Save</a>} if input_html_options[:quicksave]}
+
+      <div data-wysihtml5-dialog="createLink" style="display: none">
+        <label>
+          Link:
+          <input data-wysihtml5-dialog-field="href" value="http://">
+        </label>
+        <div class="action-group">
+          <a data-wysihtml5-dialog-action="save" class="button">OK</a>
+          <a data-wysihtml5-dialog-action="cancel">Cancel</a>
+        </div>
+      </div>
+      
+      <div data-wysihtml5-dialog="insertImage" style="display: none">
+        <label>
+          Image:
+          <input data-wysihtml5-dialog-field="src" value="http://">
+        </label>
+        <label>
+          Align:
+          <select data-wysihtml5-dialog-field="className">
+            <option value="">default</option>
+            <option value="wysiwyg-float-left">left</option>
+            <option value="wysiwyg-float-right">right</option>
+          </select>
+        </label>
+        <div class="action-group">
+          <a data-wysihtml5-dialog-action="save" class="button">OK</a>
+          <a data-wysihtml5-dialog-action="cancel">Cancel</a>
+        </div>
+      </div>
+      
+    </div>
+    HTML
+  end
+
+  def input_html_options
+    {
+      quicksave: false,
+      commands: {
+        bold: true,
+        italic: true,
+        link: true,
+        image: true,
+        ul: true,
+        li: true,
+
+        h1: true,
+        h2: true,
+        h3: true
+      }
+    }.merge(super)
+  end
+
+  def to_html
+    html = '<div class="active_admin_editor">'
+    html << toolbar.html_safe
+    html << builder.text_area(method, input_html_options)
+    html << '</div>'
+    input_wrapping do
+      label_html << html.html_safe
+    end
+  end
+end