Nathan Colgate RSS

This is the personal blog of Nathan Colgate Clark. I work at Brand New Box. I developed a content management system for churches.

Archive

Sep
2nd
Wed
permalink
Aug
20th
Thu
permalink

Custom Generators That Work in all of your Rails Apps

Go here:

/Library/Ruby/Gems/1.8/gems/rails-X.X.X/lib/rails_generator/generators/components/

Aug
19th
Wed
permalink

Trouble with Deprec Setting up Apache and Passenger

I was getting this error a lot:

VirtualHost *:80 — mixing * ports and non-* ports with a NameVirtualHost address is not supported, proceeding with undefined results

The fix:

I had to remove the default site:

cd /etc/apache2/sites-enabled/

sudo rm 000-default

The file is still available here:

/etc/apache2/sites-available/

But is not conflicting with the config files that deprec sets up.

Apr
23rd
Thu
permalink

Update to YUI Editor Code View Problem

I over complicated things in my previous solution, and found a better solution while trying to get the WYSIWYG editor to work inside an AJAX form using rails’ remote_form_for.

Using the YUI editor example, set handleSubmit to false and add this right after the MyEditor.render();

// Nate's better Handle Submit
function myHandleFormSubmit(e){ 
  if(state == 'off') {
    myEditor.cleanHTML();
  };
};	
Event.on(myEditor.get('element').form, 'submit', myHandleFormSubmit, myEditor, true);

When doing this and using a AJAX form, try this:

// Nate's better Handle Submit (AJAX version)
function myHandleFormSubmit(e){ 
  if(state == 'off') {
    myEditor.cleanHTML();
  };
  Connect.setForm(e.target);
  Connect.asyncRequest('POST', e.target.action, callback, '_method=put'); 
  Event.stopEvent(e);
};	
var handleSuccess = function(o){ eval(o.responseText); };
var callback = { success:handleSuccess };
Event.on(myEditor.get('element').form, 'submit', myHandleFormSubmit, myEditor, true);

Hope this helps

Apr
17th
Fri
permalink

Trying to use the YUI WYSIWYG RTE as a code editor

Our CityGates app uses the YUI WYSIWYG Rich Text Editor to for all large text areas.  Unfortunately, it does not have code / source editing support out of the box.  To implement it, you must use some custom code to toggle the textarea / WYSIWYG visibility.

The example from YUI does not use handleSubmit. This means that when a user submits the form from the WYSIWYG editor the textarea does not get updated with the modified information from the iframe when the form is submitted. The user must toggle to the code view to trigger the update to the textarea. Result: a broken WYSIWYG editor.

See example.

The obvious solution: set handleSubmit to “true”. But this causes the converse bad behavior to kick in: When submitting from the code view, the textarea is updated with outdated information from the iframe before the form is submitted. The user must toggle to the WYSIWYG view to update the WYSIWYG. Result: a broken code editor.

See example.

This is what we had setup, and our users were starting to notice.

So a couple of weeks ago I spent some time trying to figure out what was going on, and figured out a crude way to toggle between the handleSubmit behaviors when the user toggles between the views. It isn’t very pretty, but it works.

See solution.

I’m looking forward to when this gets integrated into the final RTE.

Side Note on Our Choice of Editor

We chose to use the YUI RTE because of it’s ability to integrate into any backend system and support image upload and inserting.  We love using TinyMCE and their slick uploader on PHP projects, but CityGates is Ruby on Rails.

Updated April 23, 2009

Apr
16th
Thu
permalink

jQuery Cycle Different Effects for Previous and Next

jQuery Cycle plugin is fantastic.  However, there is a little bit of inconsistantcy when using it as a left/right slideshow.  You click the next arrow, it goes right. You click the previous arrow, it goes left right.  The following code allows you to have different effects based on previous/ next button clicks.

Demo

jQuery(document).ready(function(){




		$('#blink_headlines').cycle({ 

	    fx:      	'scrollBothWays',

			next:   	'#cycle_next_blue',

			prev: 		'#cycle_prev_blue',

	    speed:  	1000,

	    timeout: 	0,

			pause:   	1,

			easeIn:   'easeOutBack',

			easeOut:  'easeOutBack'

		});

});





$.fn.cycle.transitions.scrollBothWays = function($cont, $slides, opts) {

	$cont.css('overflow','hidden');

	opts.before.push($.fn.cycle.commonReset);



	// custom transition fn (trying to get it to scroll forward and backward)

	opts.fxFn = function(curr, next, opts, cb, fwd) {

		

		var w = $cont.width();

		opts.cssFirst = { left: 0 };

		opts.animIn	  = { left: 0 };

		

		if(fwd){

			opts.cssBefore= { left: w, top: 0 };

			opts.animOut  = { left: 0-w };

		}else{

			opts.cssBefore= { left: -w, top: 0 };

			opts.animOut  = { left: w };

		};

		

		var $l = $(curr), $n = $(next);

		var speedIn = opts.speedIn, speedOut = opts.speedOut, easeIn = opts.easeIn, easeOut = opts.easeOut, animOut = opts.animOut, animIn = opts.animIn;

		$n.css(opts.cssBefore);

		var fn = function() {$n.show();$n.animate(animIn, speedIn, easeIn, cb);};

		$l.animate(animOut, speedOut, easeOut, function() {

			if (opts.cssAfter) $l.css(opts.cssAfter);

			if (!opts.sync) fn();

		});

		if (opts.sync) fn();

	};

};
Jan
21st
Wed
permalink

My Dreams Concern Me

  • Nathan: Why are you here?
  • German1: We're looking for Marius Deboucher.
  • Nathan: Who?
  • German2: Marius Deboucher. You know. The chess player.
  • Nathan: ...
  • German1: Marius Deboucher, the greatest offensive castling chess player in the world!
  • Nathan: I'm afraid not.
  • German1 and German2: (singing a jingle) "Knight to check. Rook to Queen's pawn six. Checkmate. You've been Marius Debouched!"
  • Nathan: ...
Dec
10th
Wed
permalink
Nov
14th
Fri
permalink

TinyMCE ImageManager and Symbolic Links

Solved:

If using capistrano and you have a symlinked shared directory which exists between deployments.
set preview.wwwroot to /var/www/apps/application/shared/
and filesystem.rootpath to /var/www/apps/application/shared/system

(assuming you want to save files in system).

This avoids the symlinks and allows tinymce to translate the paths properly.

-via pyrat

Oct
7th
Tue
permalink