wysihat-engine 0.1.6 → 0.1.7

data/.gitignore

@@ -1,5 +1,6 @@
 *.sw?
 .DS_Store
+.sass-cache
 coverage
 rdoc
 pkg

data/CHANGELOG

@@ -1,3 +1,20 @@
+0.1.7 (November 6th, 2009) - Jeff Kreeftmeijer
+* Toolbar didn't show up in IE. Fixed :)
+
+0.1.7 (November 1st, 2009) - Jeff Kreeftmeijer
+* added the exclamation.png icon back in the generator.
+
+0.1.7 (October 28th, 2009) - Jeff Kreeftmeijer
+* fixed a bug in the generator; it copied "loading.gif" to "loading.png". Thanks Eric! 
+* two functions in the rakefile were called cssify. One should've been called sassify. fixed :)
+* added "render :layout => false" to WysihatFilesController#index
+* put the "exclamation.png" icon back. Was pretty useful after all.
+
+0.1.7 (October 27th, 2009) - Jeff Kreeftmeijer
+* put the facebox images & icons in a subdir
+* created sassify & cssify rake tasks (like the minify one)
+* removed the .sass_cache dir and added it to the .gitignore file.
+
 0.1.6 (October 21st, 2009) - Jeff Kreeftmeijer
 * fixed a bug that sanitized the output (onsumbit) rather than the input (on paste).
 

data/README.textile

@@ -1,10 +1,14 @@
 h1. WysiHat Engine
 
-A Rails engine to help integrate the "37signals WyshiHat rich text editor":http://github.com/josh/wysihat/ to your application.
+A Rails engine to help integrate the "37signals WysiHat rich text editor":http://github.com/josh/wysihat/ to your application.
 
 h2. Using the WysiHat Engine
 
-We've written an "Installation Guide":http://wiki.github.com/80beans/wysihat-engine/installation and some "Examples":http://wiki.github.com/80beans/wysihat-engine/examples to get you started. Any questions? Don't hesitate to "ask":http://github.com/inbox/new/jkreeftmeijer.
+We've written an "Installation Guide":http://wiki.github.com/80beans/wysihat-engine/installation and some "Examples":http://wiki.github.com/80beans/wysihat-engine/examples to get you started. Any questions? Don't hesitate to "ask":http://github.com/inbox/new/jeffkreeftmeijer.
+
+h2. Demo
+
+There's a "demo rails app":http://github.com/80beans/wysihat-engine-demo so you can have a quick look around. 
 
 h2. Contributing
 

data/Rakefile

@@ -40,19 +40,36 @@ task :minify do
   
   pack.write(compressor.compress(string))
   pack.close
-end  
+end
+
+desc 'create css files from the sass files. It will overwrite files if they already exist.'
+task :cssify do
+  files = ['facebox', 'wysihat']
+  files.each do |file|
+    system "sass generators/wysihat/templates/sass/#{file}.sass generators/wysihat/templates/css/#{file}.css"
+  end
+end 
+
+desc 'create sass files from the css files. It will overwrite files if they already exist.'
+task :sassify do
+  files = ['facebox', 'wysihat']
+  files.each do |file|
+    system "css2sass generators/wysihat/templates/css/#{file}.css generators/wysihat/templates/sass/#{file}.sass"
+  end
+end 
+
 
 begin
   require 'jeweler'
   Jeweler::Tasks.new do |gem|
     gem.name = "wysihat-engine"
-    gem.summary = "A Rails engine to help integrate the 37signals WyshiHat rich text editor to your application."
-    gem.description = "A Rails engine to help integrate the 37signals WyshiHat rich text editor to your application."
+    gem.summary = "A Rails engine to help integrate the 37signals WysiHat rich text editor to your application."
+    gem.description = "A Rails engine to help integrate the 37signals WysiHat rich text editor to your application."
     gem.email = "jeff@80beans.com"
     gem.homepage = "http://www.80beans.com/2009/10/01/wysihat-engine/"
     gem.authors = ["Jeff Kreeftmeijer"]
     gem.add_development_dependency "yui-compressor", ">= 0.9.1"
-    gem.add_dependency 'thoughtbot-paperclip', ">= 2.3.1"
+    gem.add_dependency 'paperclip', ">= 2.3.1"
   end
 rescue LoadError
   puts "Jeweler not available. Install it with: sudo gem install technicalpickles-jeweler -s http://gems.github.com"

data/TODO

@@ -1,2 +1,4 @@
 * add a config.yml file and put some of the settings in there
-* put the facebox images & icons in a subdir
+* use sprockets for javascripts, stylesheets and images
+* add font selection
+* figure out a way to do a "clean paste". (paste without any markup or styling)

data/VERSION

@@ -1 +1 @@
-0.1.6
+0.1.7

data/app/controllers/wysihat_files_controller.rb

@@ -1,6 +1,7 @@
 class WysihatFilesController < ApplicationController
   def index
     @wysihat_file, @wysihat_files = WysihatFile.new, WysihatFile.all
+    render :layout => false
   end
   
   def create

data/generators/wysihat/templates/css/facebox.css

@@ -1,95 +1,60 @@
-#facebox .b {
-  background:url(../images/b.png);
-}
-
-#facebox .tl {
-  background:url(../images/tl.png);
-}
-
-#facebox .tr {
-  background:url(../images/tr.png);
-}
-
-#facebox .bl {
-  background:url(../images/bl.png);
-}
-
-#facebox .br {
-  background:url(../images/br.png);
-}
-
 #facebox {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 100;
-  text-align: left;
-}
-
-#facebox .popup {
-  position: relative;
-}
-
-#facebox table {
-  border-collapse: collapse;
-}
-
-#facebox td {
-  border-bottom: 0;
-  padding: 0;
-}
-
-#facebox .body {
-  padding: 10px;
-  background: #fff;
-  width: 370px;
-}
-
-#facebox .loading {
-  text-align: center;
-}
-
-#facebox .image {
-  text-align: center;
-}
-
-#facebox img {
-  border: 0;
-  margin: 0;
-}
-
-#facebox .footer {
-  border-top: 1px solid #DDDDDD;
-  padding-top: 5px;
-  margin-top: 10px;
-  text-align: right;
-}
-
-#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
-  height: 10px;
-  width: 10px;
-  overflow: hidden;
-  padding: 0;
-}
+  text-align: left; }
+  #facebox .b {
+    background: url(../images/facebox/b.png); }
+  #facebox .tl {
+    background: url(../images/facebox/tl.png); }
+  #facebox .tr {
+    background: url(../images/facebox/tr.png); }
+  #facebox .bl {
+    background: url(../images/facebox/bl.png); }
+  #facebox .br {
+    background: url(../images/facebox/br.png); }
+  #facebox .popup {
+    position: relative; }
+  #facebox table {
+    border-collapse: collapse; }
+  #facebox td {
+    border-bottom: 0;
+    padding: 0; }
+  #facebox .body {
+    padding: 10px;
+    background: #fff;
+    width: 370px; }
+  #facebox .loading, #facebox .image {
+    text-align: center; }
+  #facebox img {
+    border: 0;
+    margin: 0; }
+  #facebox .footer {
+    border-top: 1px solid #DDDDDD;
+    padding-top: 5px;
+    margin-top: 10px;
+    text-align: right; }
+  #facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
+    height: 10px;
+    width: 10px;
+    overflow: hidden;
+    padding: 0; }
 
 #facebox_overlay {
   position: fixed;
   top: 0px;
   left: 0px;
-  height:100%;
-  width:100%;
-}
+  height: 100%;
+  width: 100%; }
 
 .facebox_hide {
-  z-index:-100;
-}
+  z-index: -100; }
 
 .facebox_overlayBG {
   background-color: #000;
-  z-index: 99;
-}
+  z-index: 99; }
 
-* html #facebox_overlay { /* ie6 hack */
+* html #facebox_overlay {
   position: absolute;
-  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
-}
+  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); }

data/generators/wysihat/templates/css/wysihat.css

@@ -1,72 +1,44 @@
-div.editor_toolbar a{
-  float:left;
-  width:16px;
-  height:16px;
-  margin:5px;
-  background-repeat: no-repeat;
-}
-
-div.editor_toolbar span{
-  display:none;
-}
-
+div.editor_toolbar a {
+  float: left;
+  width: 16px;
+  height: 16px;
+  margin: 5px;
+  background-repeat: no-repeat; }
+div.editor_toolbar span {
+  display: none; }
+
+.editor_toolbar .button {
+  background-image: url('../images/icons/exclamation.png'); }
 .editor_toolbar .bold {
-  background-image: url('../images/text_bold.png');
-}
-
+  background-image: url('../images/icons/text_bold.png'); }
 .editor_toolbar .italic {
-  background-image: url('../images/text_italic.png');
-}
-
+  background-image: url('../images/icons/text_italic.png'); }
 .editor_toolbar .underline {
-  background-image: url('../images/text_underline.png');
-}
-
+  background-image: url('../images/icons/text_underline.png'); }
 .editor_toolbar .strikethrough {
-  background-image: url('../images/text_strikethrough.png');
-}
-
+  background-image: url('../images/icons/text_strikethrough.png'); }
 .editor_toolbar .justifyleft {
-  background-image: url('../images/text_align_left.png');
-}
-
+  background-image: url('../images/icons/text_align_left.png'); }
 .editor_toolbar .justifycenter {
-  background-image: url('../images/text_align_center.png');
-}
-
+  background-image: url('../images/icons/text_align_center.png'); }
 .editor_toolbar .justifyright {
-  background-image: url('../images/text_align_right.png');
-}
-
+  background-image: url('../images/icons/text_align_right.png'); }
 .editor_toolbar .undo {
-  background-image: url('../images/arrow_undo.png');
-}
-
+  background-image: url('../images/icons/arrow_undo.png'); }
 .editor_toolbar .redo {
-  background-image: url('../images/arrow_redo.png');
-}
-
+  background-image: url('../images/icons/arrow_redo.png'); }
 .editor_toolbar .insertorderedlist {
-  background-image: url('../images/text_list_numbers.png');
-}
-
+  background-image: url('../images/icons/text_list_numbers.png'); }
 .editor_toolbar .insertunorderedlist {
-  background-image: url('../images/text_list_bullets.png');
-}
-
+  background-image: url('../images/icons/text_list_bullets.png'); }
 .editor_toolbar .link {
-  background-image: url('../images/link.png');
-}
-
+  background-image: url('../images/icons/link.png'); }
 .editor_toolbar .image {
-  background-image: url('../images/image.png');
-}
-
+  background-image: url('../images/icons/image.png'); }
 .editor_toolbar .html {
-  background-image: url('../images/page_code.png');
-}
+  background-image: url('../images/icons/page_code.png'); }
 
-iframe.editor{
-  height:400px;
-  width:100%;
-}
+iframe.editor {
+  border: 1px solid #999;
+  height: 400px;
+  width: 100%; }

data/generators/wysihat/templates/javascripts/facebox.js

@@ -1,26 +1,16 @@
-/*  Facebox for Prototype, version 2.0
- *  By Robert Gaal - http://wakoopa.com 
+/* Facebox for Prototype
  *
- *  Heavily based on Facebox by Chris Wanstrath - http://famspam.com/facebox
- *  First ported to Prototype by Phil Burrows - http://blog.philburrows.com
+ * This is a slightly updated version of jeffkreeftmeijer's branch of facebox-for-prototype
+ * (http://github.com/jeffkreeftmeijer/facebox-for-prototype). The image locations are 
+ * changed -- from /images/ to /images/facebox/ -- to keep the engine nice and tidy.
  *
- *  Licensed under the MIT:
- *  http://www.opensource.org/licenses/mit-license.php
- *
- *  Need help?  Join the Google Groups mailing list:
- *  http://groups.google.com/group/facebox/
- *
- *  Dependencies:   prototype & script.aculo.us + images & CSS files from original facebox
- *  Usage:          Append 'rel="facebox"' to an element to call it inside a so-called facebox
- *
- *--------------------------------------------------------------------------*/
-
+ */
 
 var Facebox = Class.create({
 	initialize	: function(extra_set){
 		this.settings = {
-			loading_image	: '/images/loading.gif',
-			close_image		: '/images/closelabel.gif',
+			loading_image	: '/images/facebox/loading.gif',
+			close_image		: '/images/facebox/closelabel.gif',
 			image_types		: new RegExp('\.' + ['png', 'jpg', 'jpeg', 'gif'].join('|') + '$', 'i'),
 			inited				: true,	
 			facebox_html	: '\
@@ -38,7 +28,7 @@ var Facebox = Class.create({
 	              </div> \
 	              <div class="footer"> \
 	                <a href="#" class="close"> \
-	                  <img src="/images/closelabel.gif" title="close" class="close_image" /> \
+	                  <img src="/images/facebox/closelabel.gif" title="close" class="close_image" /> \
 	                </a> \
 	              </div> \
 	            </td> \

data/generators/wysihat/templates/javascripts/wysihat.js

@@ -447,7 +447,7 @@ WysiHat.Window = (function() {
   }
 
   function getWindow() {
-    if (this.contentDocument)
+    if (this.contentDocument && this.contentDocument.defaultView)
       return this.contentDocument.defaultView;
     else if (this.contentWindow.document)
       return this.contentWindow;
@@ -554,31 +554,6 @@ WysiHat.iFrame.Methods = {
     return this;
   },
 
-
-  linkStyleSheet: function(href) {
-    this.whenReady(function(editor){
-      var document = editor.getDocument();
-      if(document.createStyleSheet) { // IE
-        document.createStyleSheet(css);
-      } else {
-        var head = document.documentElement.getElementsByTagName('head')[0];
-        if (!head) {
-          head=document.createElement('head');
-          document.documentElement.insertBefore(head,document.getElementsByTagName('body')[0]);
-        }
-        var link='<link href="'+href+'" media="screen" rel="stylesheet" type="text/css"/>';
-        head=$(head);
-        if (head.insert) { // Safari
-          $(head).insert(link);
-        } else { // everyone else
-          head.innerHTML=head.innerHTML+link;
-        }
-      }
-    });
-  },
-
-
-
   /**
    *  WysiHat.iFrame.Methods#getStyle(style) -> string
    *  - style specificication (i.e. backgroundColor)
@@ -2017,7 +1992,7 @@ WysiHat.Toolbar = Class.create((function() {
   }
 
   function createButtonElement(toolbar, options) {
-    var button = Element('a', {
+    var button = new Element('a', {
       'class': 'button', 'href': '#'
     });
     button.update('<span>' + options.get('label') + '</span>');

data/generators/wysihat/templates/javascripts/wysihat_engine.js

@@ -4,12 +4,12 @@ var WysihatHelper = {
   faceboxFile: function()
   {
     facebox.loading();
-    new Effect.Appear($('facebox'), {duration: .3});
+    new Effect.Appear($('facebox'), {duration: 0.3});
 
     var fb  = facebox;
-  	var url = '/wysihat_files/?editor=' + this.id
+    var url = '/wysihat_files/?editor=' + this.id;
 
-  	new Ajax.Request(url, {
+    new Ajax.Request(url, {
   		method		: 'get',
   		onFailure	: function(transport){
   			fb.reveal(transport.responseText, null);
@@ -26,8 +26,8 @@ var WysihatHelper = {
       this.unlinkSelection();
     } else {
       facebox.loading();
-      new Effect.Appear($('facebox'), {duration: .3});
-      iframe = this
+      new Effect.Appear($('facebox'), {duration: 0.3});
+      iframe = this;
       facebox.reveal('<input type=\"text\" id=\"link_field\" style=\"width:100%;\"/>', null);         
       Event.observe('link_field', 'change', function(event) {
         iframe.linkSelection($('link_field').value);
@@ -38,64 +38,42 @@ var WysihatHelper = {
   faceboxHTML: function()
   {
     facebox.loading();
-    new Effect.Appear($('facebox'), {duration: .3});
-    iframe = this
+    new Effect.Appear($('facebox'), {duration: 0.3});
+    iframe = this;
     facebox.reveal('<textarea id=\"html_editor\" style=\"width:100%; height:400px;\">' + iframe.contentWindow.document.body.innerHTML + '</textarea>', null);         
     Event.observe('html_editor', 'change', function(event) {
       iframe.contentWindow.document.body.innerHTML = $('html_editor').value;
     });
-  },
-}
-
-WysiHat.Editor.include(WysihatHelper);
-
-Event.observe(window, 'load', function() {
-	$$('textarea.wysihat_editor').each(function(i){   
-    var editor = WysiHat.Editor.attach(i.id);
-    var toolbar = new WysiHat.Toolbar(editor);
-		toolbars[i.id] = toolbar;
-		
-		editor.inputFilter = function(text) {
-      return text.formatHTMLOutput().sanitize({
-        tags: ['span', 'p', 'br', 'strong', 'em', 'a'],
-        attributes: ['id', 'href']
-      });
-    };
-
-    editor.observe("wysihat:paste", function(event) {
-      setTimeout(function() {
-        event.target.reload();
-      }, 1);
-    });
-		
-		$$('form').each(function(f){
-			f.onsubmit = function(){
-				editor.save();
-			}
-		});
-  });
-});
+  }
+};
 
-function addButtons(tag_id, buttons){
-	Event.observe(window, 'load', function() {
-		buttons.each(function(button){
+function wysiHatify(tag_id, buttons){
+  WysiHat.Editor.include(WysihatHelper);
+  var editor = WysiHat.Editor.attach(tag_id);
+  var toolbar = new WysiHat.Toolbar(editor);
+	
+	$$('form').each(function(i){
+	  i.onsubmit = function(){
+		  editor.save();
+	  };
+	});
 			
-			switch(button.toLowerCase()){
-				case 'image':
-					toolbars[tag_id].addButton({label : button.gsub('_','-').camelize().capitalize(), handler: function(editor) { return editor.faceboxFile(editor); }}); 
-				break;
-				case 'link':
-					toolbars[tag_id].addButton({label : button.gsub('_','-').camelize().capitalize(), handler: function(editor) { return editor.faceboxLink(editor); }}); 
-				break;
-				case 'html':
-					toolbars[tag_id].addButton({label : button.gsub('_','-').camelize().capitalize(), handler: function(editor) { return editor.faceboxHTML(editor); }}); 
-				break;
-				case 'paste':
-					toolbars[tag_id].addButton({label : button.gsub('_','-').camelize().capitalize(), handler: function(editor) { return editor.faceboxPaste(editor); }}); 
-				break;
-				default:
-					toolbars[tag_id].addButton({label : button.gsub('_','-').camelize().capitalize()});
-			}
-		})                                        
-	})
-}
+	buttons.each(function(button){	
+		switch(button.toLowerCase()){
+			case 'image':
+				toolbar.addButton({label : button.gsub('_','-').camelize().capitalize(), handler: function(editor) { return editor.faceboxFile(editor); }}); 
+			break;
+			case 'link':
+				toolbar.addButton({label : button.gsub('_','-').camelize().capitalize(), handler: function(editor) { return editor.faceboxLink(editor); }}); 
+			break;
+			case 'html':
+				toolbar.addButton({label : button.gsub('_','-').camelize().capitalize(), handler: function(editor) { return editor.faceboxHTML(editor); }}); 
+			break;
+			case 'paste':
+				toolbar.addButton({label : button.gsub('_','-').camelize().capitalize(), handler: function(editor) { return editor.faceboxPaste(editor); }}); 
+			break;
+			default:
+		    toolbar.addButton({label : button.gsub('_','-').camelize().capitalize()});
+	  }
+	});                                        
+}