rich 0.0.1

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2011 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.rdoc

@@ -0,0 +1,163 @@
+= Rich
+
+Rich is an opinionated implementation of CKEditor for Rails 3.1. It includes a stripped down toolbar, simplified dialogs and a custom file manager.
+
+Presently, Rich integrates with Formtastic (1.x and 2) and regular Rails forms.
+
+== Goals
+
+1. Keep the CKEditor source our of your project.
+2. Sensible defaults. We don't want our users to insert tables, smilies or other frivolities that will do nothing but ruin a lovingly crafted design.
+3. Make it easy to customize these defaults.
+4. Implement a usable (and easily configurable) file manager that serves up images that fit your specific design.
+5. A good upload experience, but no flash.
+
+It should be noted that while a major point of this project was to remove many things from CKEditor, all that stuff is still in there and can be easily re-enabled through the initializer.
+
+== Quick install
+
+Rich is available as a Ruby Gem, which makes installation very easy.
+
+  # In your Gemfile (Rails >= 3.1)
+  gem 'rich', :git => 'https://github.com/bastiaanterhorst/rich.git'
+  
+After updating your bundle, run the installer.
+
+  $> rails generate rich:install
+
+The installer sets up a route, creates an initializer for configuration and adds a javascript and CSS file. It also creates a migration, so we need to migrate the database.
+
+  $> rake db:migrate
+  
+As a last step, secure the file manager by setting your authentication method in <tt>/config/initializers/rich.rb</tt>. If you're using Devise with an AdminUser model (incidentally, the Active Admin defaults):
+  config.authentication_method = :authenticate_admin_user!
+  
+You're good to go.
+
+== Usage
+
+To use Rich, it's javascript file must be loaded. By default, this is already setup for you because Rails loads all Javascript files through the <tt>require_tree .</tt> command in application.js. If you've removed that line, manually load rich by requiring it.
+
+  //= require rich
+  
+=== In a Rails form
+
+Use the <tt>rich_text_area</tt> command to insert Rich.
+
+  <%= form_for(@post) do |f| %>
+    <div class="field">
+      <%= f.label :name %><br />
+      <%= f.text_field :name %>
+    </div>
+    <div class="field">
+      <%= f.label :title %><br />
+      <%= f.text_field :title %>
+    </div>
+    <div class="field">
+      <%= f.label :content %><br />
+      <%= f.rich_text_area :body %>
+    </div>
+    <div class="actions">
+      <%= f.submit %>
+    </div>
+  <% end %>
+
+=== Formtastic
+
+Use <tt>:as => :rich</tt> to insert Rich. Using it is very simple, like so:
+
+  <%= semantic_form_for @post do |f| %>
+     <%= f.inputs do %>
+       <%= f.input :name %>
+       <%= f.input :title %>
+       <%= f.input :body, :as => :rich %>
+     <% end %>
+     <%= f.buttons do %>
+       <%= f.commit_button %>
+     <% end %>
+   <% end %>
+   
+=== Active Admin
+
+Since Active Admin actually uses Formtastic, you can use it with Rich out of the box. In your model configuration file, set up your form like this.
+
+  form do |f|
+    f.inputs "Basic info" do
+      f.input :title
+      f.input :body, :as => :rich
+    end
+    f.buttons
+  end
+
+If you're annoyed by the fact that the Rich editor overlaps the field label (I was!), add the following to your <tt>/app/assets/stylesheets/active_admin.css.scss</tt>.
+
+  .cke_skin_kama {
+  	margin-left: 20%;
+  }
+  
+== Screenshots
+
+This is the editor with default settings.
+{<img src="https://github.com/bastiaanterhorst/rich/raw/master/screenshots/rich-editor-default.png" />}[https://github.com/bastiaanterhorst/rich/]
+
+This is the file manager.
+{<img src="https://github.com/bastiaanterhorst/rich/raw/master/screenshots/rich-filemanager.png" />}[https://github.com/bastiaanterhorst/rich/]
+
+== Rich in production mode
+
+Rich works fine in production mode, as long as you make sure to precompile your assets. Rich extends the <tt>assets:precompile</tt> task to make sure the full CKEditor source tree is copied to your assets folder. So make sure you precompile your assets before starting production mode (something you most likely are doing anyway).
+
+  rake assets:precompile
+
+Rich will also clean up these CKEditor files when you clean your assets. So the following works as expected.
+
+  rake assets:clean
+  
+Although generally not necessary, the underlying Rich tasks can be invoked directly.
+
+  rake rich:assetize_ckeditor
+  rake rich:clean_ckeditor
+
+== Configuration and overrides
+
+Take a look at the generated <tt>rich.rb</tt> initializer and – if you want to dig deeper – the Rich sourcecode. The initializer guides you through the most important settings and configuration options.
+
+=== CKEditor configuration
+
+Rich attempts to provide you with a sensible set of buttons and capabilities. But of course, you might disagree. To that end, you can configure CKEditor through the <tt>editor</tt> directive, either globally through the initializer, or per editor instance as an option.
+
+=== Editor styles
+
+When you run the generator a css file is created for you in <tt>app/assets/stylesheets/rich/editor.css</tt>. Use this stylesheet to define the contents of the Styles drop down in CKEditor.
+
+=== Image configuration
+
+The styles you define in the initializer are passed to Paperclip directly, so the syntax is identical. See https://github.com/thoughtbot/paperclip/wiki/Thumbnail-Generation for more information.
+
+Currently the image styles available in the file manager can only be set globally in the initializer.
+
+== Planned features
+
+* Scoping assets to other objects
+* per-editor-instance image styles
+* Drag & drop uploading
+* separate form control to select/upload images without CKEditor
+* localization support
+
+== Inspiration
+
+* Igor Galeta's ckeditor gem - https://github.com/galetahub/ckeditor
+* Francesc Esplugas' Ckeditor - https://github.com/fesplugas/rails-ckeditor
+* Gregg Bell's Active Admin - https://github.com/gregbell/active_admin
+
+== Tools used
+
+* Valum's FileUploader - https://github.com/valums/file-uploader
+* Rack Raw Upload - https://github.com/newbamboo/rack-raw-upload
+* Paperclip - https://github.com/thoughtbot/paperclip
+
+== Copyright
+
+Rich was created by Bastiaan Terhorst and is sponsored by Perceptor (http://perceptor.nl).
+
+This project is licenced under the MIT License. See MIT-LICENSE for details.

data/Rakefile

@@ -0,0 +1,39 @@
+#!/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    = 'Rich'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+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/rich/application.js

@@ -0,0 +1,61 @@
+// This is a manifest file that'll be compiled into including all the files listed below.
+// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
+// be included in the compiled file accessible from http://example.com/assets/application.js
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+//= require jquery
+//= require jquery_ujs
+//= require fileuploader
+//= require rich/uploader
+
+var rich_current_style = "";
+function selectStyle(name) {
+	rich_current_style = name;
+	$('#styles li').removeClass('selected');
+	$('#style-'+name).addClass('selected');
+}
+
+
+(function($) {
+  $.QueryString = (function(a) {
+    if (a == "") return {};
+    var b = {};
+    for (var i = 0; i < a.length; ++i)
+    {
+      var p=a[i].split('=');
+      if (p.length != 2) continue;
+      b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
+    }
+    return b;
+  })(window.location.search.substr(1).split('&'))
+})(jQuery);
+
+$(function() {
+	
+	// click an image to insert it in the editor
+	$('#images li img').live('click', function(e){
+		//var url = $(this).data('url');
+//		var url = $(this).attr('src');
+		var url = $(this).data('uris')[rich_current_style];
+		var id = $(this).data('rich-image-id');
+		
+		window.opener.CKEDITOR.tools.callFunction($.QueryString["CKEditorFuncNum"], url, id);
+		window.setTimeout(function(){
+			window.close();
+		},500);
+	});
+	
+	$('#styles li').click(function(e){
+		selectStyle($(this).data('rich-style'));
+	});
+	
+	// preselect the default style
+	selectStyle($('#styles').data('default-style'));
+	
+	// fancy uploading
+	new rich.Uploader();
+	
+});
+
+

data/app/assets/javascripts/rich/base.js

@@ -0,0 +1,51 @@
+// Wire up Rich
+//= require rich/ckeditor_path
+//= require ckeditor/ckeditor
+//= require ckeditor/adapters/jquery
+
+function addQueryString( url, params ) {
+	var queryString = [];
+	if (!params) return url;
+	else {
+		for (var i in params) queryString.push(i + "=" + encodeURIComponent( params[i]));
+	}
+	return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" );
+}
+	
+// implement a basic plugin to insert rich images
+
+// accepted properties:
+// richImageUrl - path to image browser action
+// richImageAllowedStyles - list of allowed image styles, defaults to all
+// richImageOwnerType
+// richImageOwnerId
+
+CKEDITOR.plugins.add('richimage',
+{
+    init: function(editor) {
+	
+		// register a callback that actually inserts a selected image
+        editor._.insertImagefn = CKEDITOR.tools.addFunction(function(url, id){
+			this.insertHtml('<img src="' + url + '" alt="" data-rich-image-id="' + id + '" />');
+		}, editor );
+		
+		// clean up the callback
+		editor.on( 'destroy', function () { CKEDITOR.tools.removeFunction( this._.insertImagefn ); } );
+
+		editor.addCommand( 'insertRichImage', {
+			exec: function(editor) {
+				var params = {};
+				params.CKEditor = editor.name;
+				params.CKEditorFuncNum = editor._.insertImagefn;
+				var url = addQueryString(editor.config.richImageUrl, params );
+				editor.popup(url, 860, 400);
+			}
+		});
+		
+		editor.ui.addButton( 'richImage', {
+			label : editor.lang.common.image,
+			command: 'insertRichImage',
+			icon: '/assets/rich/images.png'
+		});
+    }
+});

data/app/assets/javascripts/rich/ckeditor_path.js

@@ -0,0 +1 @@
+var CKEDITOR_BASEPATH = '/assets/ckeditor/';

data/app/assets/javascripts/rich/uploader.js

@@ -0,0 +1,59 @@
+// Implementation of the QQ FileUploader class for use in Rich
+
+var rich = rich || {};
+
+rich.Uploader = function(){
+	
+	this._options = {
+		uploadButtonId: 'upload',
+		insertionPoint: 'uploadBlock'
+	};
+	
+	// create the qq uploader
+	var self = this;
+	var uploader = new qq.FileUploaderBasic({
+	  button: document.getElementById(self._options.uploadButtonId),
+		multiple: true,
+		maxConnections: 3,
+		action: $("#new_rich_rich_image").attr("action"),
+		params: { authenticity_token: $("input[name='authenticity_token']").attr("value") },
+		debug: true,
+		onComplete: function(id, fileName, responseJSON) { self.uploadComplete(id, fileName, responseJSON); },
+		onSubmit: function(id, fileName) { self.uploadSubmit(id, fileName); },
+		onProgress: function(id, fileName, loaded, total) { self.uploadProgress(id, fileName, Math.round(loaded/total*100)); }
+	});
+};
+
+rich.Uploader.prototype = {
+
+	uploadComplete: function(id, fileName, response){
+		if (response.success){
+			$('#up'+id+' .progress-bar').first().width("100%");
+			$('#up'+id+' .spinner').first().addClass("spinning");
+			//get the created image object's id from the response and use it to request the thumbnail
+			$.get("/rich/files/"+response.rich_id, function(data) {
+				$('#up'+id).replaceWith(data).addClass("test");
+				$('#image'+response.rich_id).addClass("new");
+			});
+    } else {
+				$('#up'+id+' .spinner').first().addClass("error");
+				$('#up'+id+' .spinner').first().removeClass("spinning");		
+    }
+  },
+
+	uploadSubmit: function(id, fileName) {
+		console.log($('#'+this._options.insertionPoint));
+		// insert a new image placeholder after the upload button
+		$('#'+this._options.insertionPoint).after('<li id="up'+id+'"><div class="placeholder progress"><div class="progress-bar" style="width: 0%;"></div><div class="spinner"></div></div><p>'+fileName+'</p></li>');
+	},
+	
+	uploadProgress: function(id, fileName, progress) {
+		$('#up'+id+' .progress-bar').first().width(progress+"%");
+		
+		if(progress > 90) {
+			// start spinning
+			$('#up'+id+' .spinner').first().addClass("spinning");
+		}
+	},
+
+};

data/app/assets/stylesheets/rich/application.css.scss

@@ -0,0 +1,253 @@
+/*
+ * This is a manifest file that'll automatically include all the stylesheets available in this directory
+ * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+ * the top of the compiled file, but it's generally better to create a new file per style scope.
+ *= require_self
+ *= require_tree ./mixins
+*/
+
+
+// main vars
+$activeText: #3bbfce;
+$normalText: #3bbfce;
+$dimmedText: #3bbfce;
+
+$subtle: #f3f3f3;
+$light: #888888;
+$dark: #686868;
+
+
+$imageSize: 100px;
+$margin: 20px;
+$headerHeight: 46px;
+$verticalCenterOffset: 5px;
+
+$fontSizeSmall: 10px;
+$fontSizeNormal: 12px;
+$fontSizeLarge: 16px;
+
+
+// Mixins
+@mixin rounded($radius: 4px) { 
+  -webkit-border-radius: $radius; 
+  -moz-border-radius: $radius; 
+  border-radius: $radius;
+}
+
+@mixin inset-box-shadow($x: 2px, $y: 2px, $blur: 4px, $color: blue) {
+	box-shadow: inset $x $y $blur $color;
+	-moz-box-shadow: inset $x $y $blur $color;
+	-webkit-box-shadow: inset $x $y $blur $color;
+}
+
+@mixin box-shadow($x: 2px, $y: 2px, $blur: 4px, $color: blue) {
+	box-shadow: $x $y $blur $color;
+	-moz-box-shadow: set $x $y $blur $color;
+	-webkit-box-shadow: $x $y $blur $color;
+}
+
+@-webkit-keyframes spinner {
+  from {-webkit-transform:rotate(0deg);}
+  to {-webkit-transform:rotate(360deg);}
+}
+
+
+// the meat
+*, html, body {
+	font-family: helvetica, arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+}
+
+#legacy-form {
+	display: none;
+}
+
+header {
+	position: fixed;
+	z-index: 999;
+	height: $headerHeight;
+	width: 100%;
+	
+	background: $subtle;
+	border-bottom: 1px solid white;
+	
+	@include box-shadow(0, 0, 4px, rgba(0,0,0,0.5))	
+}
+
+#images {
+	list-style: none;
+	margin: 0 0 0 $margin;
+	padding: 0;
+	padding-top: $headerHeight + $margin + 1;
+	
+	li {
+		width: $imageSize;
+		height: $imageSize + $margin;
+		margin-right: $margin;
+		float: left;
+		
+		* {
+				transition: opacity 85ms ease-in, box-shadow 85ms ease-in, color 85ms ease-in;
+				-moz-transition: opacity 85ms ease-in, box-shadow 85ms ease-in, color 85ms ease-in;
+				-ms-transition: opacity 85ms ease-in, box-shadow 85ms ease-in, color 85ms ease-in;
+				-webkit-transition: opacity 85ms ease-in, box-shadow 85ms ease-in, color 85ms ease-in;
+		}
+		
+		.placeholder {
+			height: $imageSize - 2;
+			width: $imageSize - 2;
+			border: 1px dotted $light;
+			@include rounded;
+			line-height: $imageSize - $verticalCenterOffset;
+			text-align: center;
+						
+			font-size: $fontSizeLarge;
+			font-weight: bold;
+			color: $light;
+		}
+		
+		img {
+			@include rounded;
+			@include box-shadow(0, 0, 4px, lighten($dark, 40%));
+		}
+		
+		img:hover {
+			@include box-shadow(0, 0, 4px, $light);
+		}
+
+		img:active {
+			@include box-shadow(0, 0, 4px, black);
+		}
+		
+		.new {
+			@include box-shadow(0, 0, 4px, rgb(58,194,207))
+		}
+		
+		.spinner {
+			opacity: 0.3;
+			margin-left: ($imageSize - 2)/2 - 32/2;
+			margin-top: ($imageSize - 2 - $verticalCenterOffset)/2 - 32/2;
+			width: 32px;
+			height: 32px;
+			background: image-url('rich/plus.png') no-repeat top center;
+		}
+		
+		#upload .spinner {
+			opacity: 1;
+		}
+		
+		.progress .progress-bar {
+			background: $subtle;
+			height: $imageSize - 2;
+			float: left;
+		}
+		
+		.progress .spinning {
+		  -webkit-animation-name: spinner;
+		  -webkit-animation-duration:0.75s;
+		  -webkit-animation-iteration-count:infinite;
+		  -webkit-animation-timing-function:linear;
+		}
+		
+		.progress .spinner.error {
+			opacity: 1;
+			background-image: image-url('rich/plus-red.png');
+			-webkit-transform: rotate(45deg);
+		}
+		
+		p {
+			font-size: 10px;
+			margin: 0;
+			line-height: $margin;
+			height: $margin;
+			overflow:hidden;
+			text-overflow: ellipsis;
+			color: $subtle;
+			width: 80px;
+		}
+		
+		&:hover p {
+			color: $light;
+		}
+		
+		.delete {
+			position: absolute;
+			text-indent: -9999px;
+			margin-left: 80px;
+			margin-top: -$margin;
+			width:$margin;
+			height: $margin;
+			background: image-url('rich/x-red.png') no-repeat center right;
+			opacity: 0.1;
+		}
+		
+		&:hover .delete {
+			opacity: 0.5;
+		}
+
+		&:hover .delete:hover {
+			opacity: 1;
+		}
+		
+	}
+	
+	#uploadBlock:hover .placeholder .spinner {
+		background-position: 0 -32px;
+	}
+	
+	
+}
+
+.clickable:hover {
+	cursor: pointer;	
+}
+
+// scope selector
+ul.scopes {
+	
+	list-style: none;
+	margin: 0 ($margin/4*3);
+	padding: 0;
+	float: right;
+	
+	li {
+		float: left;
+		height: $margin;
+		line-height: $margin;
+		margin-right: $margin/4;
+		margin-top: ($headerHeight - $margin) / 2 + 1;
+		font-weight: bold;
+		font-size: 12px;
+	}
+	
+	li.label {
+		color: $light;
+		padding-right: $margin/4;
+	}
+	
+	li.scope {
+		color: $dark;
+		@include rounded;
+		padding: 0 $margin / 2;
+	}
+	
+	li.scope:hover {
+		cursor: pointer;
+		background: darken($subtle, 10%);
+		text-shadow: 0px 1px 0 white;
+	}
+	
+	li.scope.selected {
+		@include inset-box-shadow(0, 1px, 1px, $dark);
+		text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.25);
+		color: $subtle;
+		background: $light;
+	}
+	
+}