rich 0.0.6 → 0.0.7

data/README.rdoc

@@ -12,7 +12,7 @@ Presently, Rich integrates with Active Admin, Rails Admin and vanilla Formtastic
 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.
+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.
 
 == Quick install
 
@@ -50,7 +50,7 @@ In your formtastic form, use <tt>:as => :rich</tt> to insert Rich. Like so:
      <%= f.inputs do %>
        <%= f.input :name %>
        <%= f.input :title %>
-       <%= f.input :body, :as => :rich %>
+       <%= f.input :body, :as => :rich, :editor => { :defaultStyle => "myCrazyPaperclipStyle" } %>
      <% end %>
      <%= f.buttons do %>
        <%= f.commit_button %>
@@ -64,7 +64,7 @@ Since Active Admin actually uses Formtastic, you can use it with Rich out of the
   form do |f|
     f.inputs "Basic info" do
       f.input :title
-      f.input :body, :as => :rich
+      f.input :body, :as => :rich, :editor => { :width => '76%', :height => '400px' }
     end
     f.buttons
   end
@@ -77,19 +77,21 @@ If you're annoyed by the fact that the Rich editor overlaps the field label (I w
   
 === Rails Admin
 
-Support for Rails Admin is very new and should be considered fragile. Per-editor configuration is not supported. However, you can globally customize your editors through the Rich initializer.
-
 To use Rich in your RA forms, first add the following lines to your <tt>/config/initializers/rails_admin.rb</tt>.
 
-  require 'rich/rails_admin'
-  RailsAdmin::Config::Fields::Types::register(Rich::RichRailsAdmin::RichEditor)
+  require 'rich/integrations/rails_admin_editor'
+  RailsAdmin::Config::Fields::Types::register(Rich::Integrations::RailsAdmin::RichEditor)
   
 This will enable the <tt>rich_editor</tt> field type. You can use this field as follows:
 
   config.model Post do
     edit do
       field :title
-      field :body, :rich_editor
+      field :body, :rich_editor do
+         config({ 
+           :insert_many => true 
+         })
+      end
     end
   end
   
@@ -132,12 +134,13 @@ When you run the generator a css file is created for you in <tt>app/assets/style
 
 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.
+When you change styles after uploading files, you will need to re-process those old files. To accomplish this, run the following command (avoid the standard Paperclip task!).
+
+  rake rich:refresh_assets
 
 == 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

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

@@ -7,112 +7,6 @@
 //= 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);
-
-
-
-// Initialization
-
-$(function() {
-  
-  updateImageInsertToggle();
-  $('#insert-one, #insert-many').click(function(e){
-    insert_many_images = !insert_many_images;
-    updateImageInsertToggle();
-    
-    e.preventDefault();
-    return false;
-  })
-  
-	
-	$('#images li img').live('click', function(e){
-		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(){
-	    if(insert_many_images == false) {  			
-			  window.close();
-		  } else {
-		    window.focus();
-		  }
-			
-		},100); 
-		
-	});
-	
-	$('#styles li').click(function(e){
-		selectStyle($(this).data('rich-style'));
-	});
-	
-	// preselect the default style
-	selectStyle($('#styles').data('default-style'));
-	
-	// fancy uploading
-	new rich.Uploader();
-	
-});
-
-// image insert toggle
-function  updateImageInsertToggle() {
-  if(insert_many_images == true) {
-    $('#insert-one').hide();
-    $('#insert-many').show();
-  } else {
-    $('#insert-one').show();
-    $('#insert-many').hide();
-  }
-}
-
-// seamless pagination
-var currentPage = 1;
-(function() {
-  loading = false;
-
-  function nearBottomOfPage() {
-    return $(window).scrollTop() > $(document).height() - $(window).height() - 100;
-  }
-
-  $(window).scroll(function(){
-    if (loading) {
-      return;
-    }
-
-    if(nearBottomOfPage()) {
-      loading=true;
-      currentPage++;
-      console.log(window.location.href);
-      $.ajax({
-        url: window.location.href + '&page=' + currentPage,
-        type: 'get',
-        dataType: 'script',
-        success: function() {
-          loading=false;
-        }
-      });
-    }
-  });
-}());
+//= require rich/browser/extensions
+//= require rich/browser/uploader
+//= require rich/browser/filebrowser

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

@@ -1,84 +1,6 @@
 // Wire up Rich
-//= require rich/ckeditor_path
+//= require rich/editor/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'
-		});
-    }
-});
-
-var rich = rich || {};
-rich.AssetFinder = function(){
-	
-};
-
-rich.AssetFinder.prototype = {
-	
-	showFinder: function(id){
-		// open a popup
-		console.log(id);
-  },
-
-	setAsset: function(id, asset){
-		// callback from popup
-		console.log(id);
-  },
-	
-};
-
-// Rich Asset input
-var assetFinder = new rich.AssetFinder();
-$(function(){
-	$('.rich_asset').live('click', function(e){
-
-		if($(this).get(0).tagName=="INPUT") {
-			assetFinder.showFinder($(this).attr('id'));
-		}
-	});
-	
-	// on hover, show a thumbnail of the selected image?
-	
-});
+//= require rich/editor/rich_editor
+//= require rich/editor/rich_finder

data/app/assets/javascripts/rich/browser/extensions.js

@@ -0,0 +1,15 @@
+// JQuery extensions & utility functions
+
+(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);

data/app/assets/javascripts/rich/browser/filebrowser.js

@@ -0,0 +1,147 @@
+// Rich filebrowser configuration, initialization and main controller
+
+var rich = rich || {};
+
+rich.Browser = function(){
+	
+	this._options = {
+		currentStyle: '',
+		insertionModeMany: false,
+		currentPage: 1,
+		loading: false,
+		reachedBottom: false
+	};
+	
+};
+
+rich.Browser.prototype = {
+	
+	initialize: function() {
+		
+		// intialize styles
+		this.initStyles($.QueryString["allowed_styles"], $.QueryString["default_style"]);
+		
+		// initialize image insertion mode
+		this._options.insertionModeMany = ($.QueryString["insert_many"]=="true")?true:false;
+		this.toggleInsertionMode(false);
+	},
+	
+	initStyles: function(opt, def) {
+		opt=opt.split(',');
+		$.each(opt, function(index, value) { 
+		  $('#styles').append("<li class='scope' id='style-"+value+"' data-rich-style='"+value+"'>"+value+"</li>");
+		});
+		
+		browser.selectStyle(def);
+	},
+	
+	setLoading: function(loading) {
+		this._options.loading = loading;
+		
+		if(loading == true) {
+			// $('#loading').css({visibility: 'visible'});
+			$('#loading').fadeIn();
+		} else {
+			$('#loading').fadeOut();
+		}
+	},
+	
+	selectStyle: function(name) {
+		this._options.currentStyle = name;
+		$('#styles li').removeClass('selected');
+		$('#style-'+name).addClass('selected');	
+  },
+
+	toggleInsertionMode: function(switchMode) {
+		if(switchMode==true) this._options.insertionModeMany = !this._options.insertionModeMany;
+		
+		if(this._options.insertionModeMany == true) {
+	    $('#insert-one').hide();
+	    $('#insert-many').show();
+	  } else {
+	    $('#insert-one').show();
+	    $('#insert-many').hide();
+	  }
+	},
+	
+	selectItem: function(item) {
+		var url = $(item).data('uris')[this._options.currentStyle];
+		var id = $(item).data('rich-asset-id');
+		var type = $(item).data('rich-asset-type');
+		
+		// differentiate between CKEditor browsing and direct asset selection
+		window.opener.CKEDITOR.tools.callFunction($.QueryString["CKEditorFuncNum"], url, id);
+		
+		// wait a short while before closing the window or regaining focus
+		var self = this;
+		window.setTimeout(function(){
+			    if(self._options.insertionModeMany == false) {  			
+			  window.close();
+		  } else {
+		    window.focus();
+		  }
+		},100);
+	},
+	
+	loadNextPage: function() {
+		if (this._options.loading || this._options.reachedBottom) {
+      return;
+    }
+
+    if(this.nearBottomOfWindow()) {
+			this.setLoading(true);
+      this._options.currentPage++;
+
+			var self = this;
+      $.ajax({
+        url: window.location.href + '&page=' + this._options.currentPage,
+        type: 'get',
+        dataType: 'script',
+        success: function(e) {
+					console.log(e);
+					if(e=="") self._options.reachedBottom = true;
+					self.setLoading(false);
+        }
+      });
+    }
+	},
+	
+	nearBottomOfWindow: function() {
+		return $(window).scrollTop() > $(document).height() - $(window).height() - 100;
+	}
+
+};
+
+
+var browser;
+
+$(function(){
+	
+	browser = new rich.Browser();
+	new rich.Uploader();
+
+	browser.initialize();
+	
+	// hook up insert mode switching
+	$('#insert-one, #insert-many').click(function(e){
+		browser.toggleInsertionMode(true);
+    e.preventDefault();
+    return false;
+  });
+
+	// hook up style selection
+	$('#styles li').click(function(e){
+		browser.selectStyle($(this).data('rich-style'));
+	});
+
+	// hook up item insertion
+	$('#items li img').live('click', function(e){
+		browser.selectItem(e.target);
+	});
+	
+	// fluid pagination
+	$(window).scroll(function(){
+		browser.loadNextPage();
+	});
+	
+});

data/app/assets/javascripts/rich/{uploader.js → browser/uploader.js}

@@ -42,7 +42,6 @@ rich.Uploader.prototype = {
   },
 
 	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>');
 	},

data/app/assets/javascripts/rich/editor/rich_editor.js

@@ -0,0 +1,52 @@
+// CKEditor plugin configuration
+
+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:
+// richBrowserUrl - path to image browser action
+// allowedStyles - list of allowed image styles, defaults to all
+// defaultStyle - the default style
+// 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, type){
+			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;
+				params.default_style = editor.config.default_style;
+				params.allowed_styles = editor.config.allowed_styles;
+				params.insert_many = editor.config.insert_many;
+				var url = addQueryString(editor.config.richBrowserUrl, 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/editor/rich_finder.js

@@ -0,0 +1,34 @@
+// Direct asset finder configuration
+
+var rich = rich || {};
+rich.AssetFinder = function(){
+	
+};
+
+rich.AssetFinder.prototype = {
+	
+	showFinder: function(id){
+		// open a popup
+		console.log(id);
+  },
+
+	setAsset: function(id, asset){
+		// callback from popup
+		console.log(id);
+  },
+	
+};
+
+// Rich Asset input
+var assetFinder = new rich.AssetFinder();
+$(function(){
+	$('.rich_asset').live('click', function(e){
+
+		if($(this).get(0).tagName=="INPUT") {
+			assetFinder.showFinder($(this).attr('id'));
+		}
+	});
+	
+	// on hover, show a thumbnail of the selected image?
+	
+});

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

@@ -51,7 +51,6 @@ $fontSizeLarge: 16px;
   to {-webkit-transform:rotate(360deg);}
 }
 
-
 // the meat
 *, html, body {
 	font-family: helvetica, arial, sans-serif;
@@ -80,6 +79,14 @@ header {
 	@include box-shadow(0, 0, 4px, rgba(0,0,0,0.5))	
 }
 
+#loading {
+	background: image-url('rich/loading.png') no-repeat center;
+	width: 16px;
+	height: $headerHeight;
+	position: absolute;
+	margin-left: 20px;
+}
+
 #insert-toggle {
   float: right;
   height: $headerHeight;
@@ -105,7 +112,7 @@ header {
   background-image: image-url('rich/insert-one.png');
 }
 
-#images {
+#items {
 	list-style: none;
 	margin: 0 0 0 $margin;
 	padding: 0;
@@ -189,7 +196,7 @@ header {
 		p {
 			font-size: 10px;
 			margin: 0;
-			line-height: $margin;
+			line-height: $margin - 3;
 			height: $margin;
 			overflow:hidden;
 			text-overflow: ellipsis;
@@ -208,7 +215,7 @@ header {
 			margin-top: -$margin;
 			width:$margin;
 			height: $margin;
-			background: image-url('rich/x-red.png') no-repeat center right;
+			background: image-url('rich/x-red.png') no-repeat right ($margin / 2 - 5);
 			opacity: 0.1;
 		}
 		

data/app/controllers/rich/files_controller.rb

@@ -2,23 +2,11 @@ module Rich
   class FilesController < ApplicationController
     
     def index
-      
-      @insert_many_images = Rich.insert_many_images
-      
-      if (Rich.allowed_styles == :all)
-        @styles = Rich.image_styles.keys
-        @styles.push(:original)
-      else 
-        @styles = Rich.allowed_styles
-      end
-      
-      @default_style = Rich.default_style
-      
       # list all files
-      @images = RichImage.order("created_at DESC").page params[:page]
+      @items = RichImage.order("created_at DESC").page params[:page]
       
       # stub for new file
-      @rich_image = RichImage.new
+      @rich_asset = RichImage.new
       
       respond_to do |format|
         format.js

data/app/inputs/rich_asset_input.rb

@@ -1,7 +1,5 @@
-
-if Object.const_defined?("Formtastic")
-  if(Gem.loaded_specs["formtastic"].version.version[0,1] == "2")
-
+if (Object.const_defined?("Formtastic") && Gem.loaded_specs["formtastic"].version.version[0,1] == "2")
+    
     class RichAssetInput < ::Formtastic::Inputs::StringInput  
   
       # todo:
@@ -16,5 +14,4 @@ if Object.const_defined?("Formtastic")
       end
     end
     
-  end
 end

data/app/inputs/rich_input.rb

@@ -1,25 +1,19 @@
+if (Object.const_defined?("Formtastic") && Gem.loaded_specs["formtastic"].version.version[0,1] == "2")
 
-if Object.const_defined?("Formtastic")
-  if(Gem.loaded_specs["formtastic"].version.version[0,1] == "2")
+  class RichInput < ::Formtastic::Inputs::TextInput  
+    def to_html
 
+      editor_options = Rich.getEditorOptions(options[:config])
 
-    class RichInput < ::Formtastic::Inputs::TextInput  
-      def to_html
-        editor_options = Rich.editor.merge(options[:editor] || {})
-        editor_options[:width]  = options[:width] || '76%'
-        editor_options[:height] = options[:height] || '400px'
-
-        input_wrapping do
-          label_html <<
-          builder.text_area(method, input_html_options) <<
-          #javascript_tag("$(function(){$('##{dom_id}').ckeditor(function() { }, #{editor_options.to_json} );});")
-          # doing this might be insecure?
-          "<script>$(function(){$('##{dom_id}').ckeditor(function() { }, #{editor_options.to_json} );});</script>".html_safe
-        end
+      input_wrapping do
+        label_html <<
+        builder.text_area(method, input_html_options) <<
+        #javascript_tag("$(function(){$('##{dom_id}').ckeditor(function() { }, #{editor_options.to_json} );});")
+        # doing this might be insecure?
+        "<script>$(function(){$('##{dom_id}').ckeditor(function() { }, #{editor_options.to_json} );});</script>".html_safe
       end
     end
-    
-
   end
+
 end
 

data/app/models/rich/rich_image.rb

@@ -57,7 +57,7 @@ module Rich
     end
     
     def check_content_type
-      self.image.instance_write(:content_type, MIME::Types.type_for(image_file_name)[0])
+      self.image.instance_write(:content_type, MIME::Types.type_for(image_file_name)[0].content_type)
       logger.debug(image_content_type)
       unless ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'].include?(image_content_type)
         self.errors[:base] << "'#{self.image_file_name}' is not an image."

data/app/views/layouts/rich/application.html.erb

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Rich</title>
+  <title>Rich Browser</title>
   <%= stylesheet_link_tag    "rich/application" %>
   <%= javascript_include_tag "rich/application" %>
   <%= csrf_meta_tags %>