window_rails 0.0.1

data/LICENSE

@@ -0,0 +1,44 @@
+Current WindowRails License:
+
+Copyright (c) 2010 Chris Roberts <chrisroberts.code@gmail.com>
+
+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.
+
+
+Original Prototype Window License:
+
+Copyright (c) 2006 Sébastien Gruhier (http://xilinus.com, http://itseb.com)
+
+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,68 @@
+++ Important note ++
+
+This is still in its infancy and is pretty unstable. This will be removed once it's ready
+for initial release.
+
+== WindowRails
+
+WindowRails is a plugin for Rails that provides easy to use AJAXy windows. It is based
+completely on {Prototype Window}[http://prototype-window.xilinus.com/] with helpers for
+Rails to make it easy to use from a Rails app.
+
+=== Basic examples to get you started
+
+==== Linking to a window
+  <%= link_to_window('Link', :url => {:controller => :my_controller, :action => :my_action}, :modal => true, :className => 'alphacube', :window => 'some_name') %>
+  
+==== Opening a window via AJAX
+  def open_my_window
+    respond_to do |format|
+      format.html
+      format.js do
+        render :update do |page|
+          page.open_window({:partial => 'my_partial'}, :modal => true, :width => 400, :height => 200, :window => 'my_window')
+        end
+      end
+    end
+  end
+
+==== Updating a window via AJAX
+  def update_my_window
+    respond_to do |format|
+      format.html
+      format.js do
+        render :update do |page|
+          page.update_window({:partial => 'new_partial'}, :window => 'my_window')
+        end
+      end
+    end
+  end
+  
+==== Closing a window via AJAX
+  def close_my_window
+    respond_to do |format|
+      format.html
+      format.js do
+        render :update do |page|
+          page.close_window(:window => 'my_window')
+        end
+      end
+    end
+  end
+
+== Documentation
+
+[WindowRails documentation]{http://chrisroberts.github.com/window_rails}
+
+== Bugs/Features
+
+[Issues]{http://github.com/chrisroberts/window_rails/issues}
+
+== Thanks
+
+* Many thanks to Sébastien Gruhier (creator of {Prototype Window}[http://prototype-window.xilinus.com/])
+
+== License
+
+* Prototype Window was released under the MIT license
+* WindowRails continues on under the MIT license

data/app/controllers/window_rails_controller.rb

@@ -0,0 +1,32 @@
+class WindowRailsController < ActionController::Base
+  
+  # Make sure we kick any thing out that is making a request other
+  # than openning a new window
+  before_filter :redirect_out, :except => :open_window
+  def redirect_out
+    respond_to do |format|
+      format.html do
+        redirect_to '/'
+      end
+      format.js do
+        render :update do |page|
+          page.redirect_to '/'
+        end
+      end
+    end
+  end
+  
+  # Opens a new window
+  def open_window
+    respond_to do |format|
+      format.html do
+        redirect_to '/'
+      end
+      format.js do
+        render :update do |page|
+          page.activate_window({:url => params[:window_url]}, params[:window_options])
+        end
+      end
+    end
+  end
+end

data/files/javascripts/debug.js

@@ -0,0 +1,137 @@
+var debugWindow = null;
+function debug(text, reverse) {
+	if (debugWindow == null)
+ 		return;
+
+	time = "-"; //new Date();
+	if (reverse) {
+		$('debug').innerHTML = time + " " + text + "<br>"+ 	$('debug').innerHTML;
+		debugWindow.getContent().scrollTop=0;
+	}
+	else {
+		$('debug').innerHTML +=  time + " " + text + "<br>";
+		debugWindow.getContent().scrollTop=10000; // Far away 
+	}
+}
+
+function hideDebug() {
+	if (debugWindow) {
+		debugWindow.destroy();
+		debugWindow = null;
+	}
+}
+
+function showDebug(bShow) {
+ if (debugWindow == null) {
+  debugWindow = new Window('debug_window', {className: 'dialog',width:250, height:100, right:4, bottom:42, zIndex:1000, opacity:1, showEffect: Element.show, resizable: true, title: "Debug"})
+  debugWindow.getContent().innerHTML = "<style>#debug_window .dialog_content {background:#000;}</style> <div id='debug'></div>";
+  date=new Date;
+    date.setMonth(date.getMonth()+3);
+    
+  //debugWindow.setCookie(null, date);
+ }
+ if( typeof bShow == 'undefined' || bShow)debugWindow.show()
+}
+
+
+function clearDebug() {
+	if (debugWindow == null)
+ 		return;
+	$('debug').innerHTML = "";
+}
+
+/**
+ * document.createElement convenience wrapper
+ *
+ * The data parameter is an object that must have the "tag" key, containing
+ * a string with the tagname of the element to create.  It can optionally have
+ * a "children" key which can be: a string, "data" object, or an array of "data"
+ * objects to append to this element as children.  Any other key is taken as an
+ * attribute to be applied to this tag.
+ *
+ * Available under an MIT license:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * @param {Object} data The data representing the element to create
+ * @return {Element} The element created.
+ */
+function $E(data) {
+  var el;
+  if ('string'==typeof data) {
+      el=document.createTextNode(data);
+  } else {
+    //create the element
+    el=document.createElement(data.tag);
+    delete(data.tag);
+
+    //append the children
+    if ('undefined'!=typeof data.children) {
+      if ('string'==typeof data.children ||'undefined'==typeof data.children.length) {
+        //strings and single elements
+        el.appendChild($E(data.children));
+      } else {
+        //arrays of elements
+        for (var i=0, child=null; 'undefined'!=typeof (child=data.children[i]); i++) {
+            el.appendChild($E(child));
+        }
+      }
+      delete(data.children);
+    }
+
+    //any other data is attributes
+    for (attr in data) {
+      el[attr]=data[attr];
+    }
+  }
+
+  return el;
+}
+
+// FROM Nick Hemsley
+var Debug = {
+	inspectOutput: function (container, within) {
+		within = within || debugWindow.getContent()
+		
+		if (debugWindow == null)
+ 			return;
+
+		within.appendChild(container)
+	},
+	
+	inspect: function(object) {
+		var cont = $E({tag: "div", className: "inspector"})
+		Debug.inspectObj(object, cont)
+		debugWindow.getContent().appendChild(cont)
+	},
+	
+	inspectObj: function (object, container) {
+		for (prop in object) {
+			Debug.inspectOutput(Debug.inspectable(object, prop), container)
+		}
+	},
+	
+	inspectable: function(object, prop) {
+		cont = $E({tag: 'div', className: 'inspectable', children: [prop + " value: " + object[prop] ]})
+		cont.toInspect = object[prop]
+		Event.observe(cont, 'click', Debug.inspectClicked, false)
+		return cont
+	},
+	
+	inspectClicked: function(e) {
+		Debug.inspectContained(Event.element(e))
+		Event.stop(e)
+	},
+	
+	inspectContained: function(container) {
+		if (container.opened) {
+			container.parentNode.removeChild(container.opened)
+			delete(container.opened)
+		} else {
+			sibling = container.parentNode.insertBefore($E({tag: "div", className: "child"}), container.nextSibling)
+			if (container.toInspect)
+				Debug.inspectObj(container.toInspect, sibling)
+			container.opened = sibling
+		}
+	}
+}
+var inspect = Debug.inspect;

data/files/javascripts/extended_debug.js

@@ -0,0 +1,113 @@
+var commandHistory;
+var historyIndex;
+
+function showExtendedDebug() {
+	if (debugWindow != null) {
+	  hideDebug();
+  }
+  
+	if (debugWindow == null) {
+	 	commandHistory = new Array();
+	 	historyIndex = 0;
+		
+		debugWindow = new Window('debug_window', {className: 'dialog',width:250, height:100, right:4, minWidth:250, bottom:42, zIndex:1000, opacity:1, showEffect: Element.show, resizable: true, title: "Debug"})
+		debugWindow.getContent().innerHTML = "<style>#debug_window .dialog_content {background:#000;}</style> <div font='monaco' id='debug' style='padding:3px;color:#0F0;font-family:monaco'></div>";
+
+		//create hourglass icon and attach events to it.
+		var cont = "<div id=\"debug_window_inspect\" style=\"width: 15px; height: 15px; background: transparent url(themes/default/inspect.gif) no-repeat 0 0; position:absolute; top:5px; left:70px; cursor:pointer; z-index:3000;\"></div>";
+
+		new Insertion.After('debug_window_maximize', cont);
+		Event.observe('debug_window_inspect', 'click', enterInspectionMode, false);
+
+		//create command text box
+		cont = "Eval:<input id=\"debug_window_command\" type=\"textbox\" style=\"width:150px; height: 12px; color: black;\">"
+		debugWindow.setStatusBar(cont);
+
+		Event.observe('debug_window_command', 'mousedown', donothing);
+		Event.observe('debug_window_command', 'keypress', evalJS, false);
+	}
+	debugWindow.show();		
+}
+
+function donothing(evt){
+		Field.activate('debug_window_command');
+		return false;
+}
+
+function evalJS(evt){
+	if(evt.keyCode == Event.KEY_RETURN){
+		var js = $F('debug_window_command');
+		try{
+			var ret = eval(js);
+			if(ret != null)
+				debug(ret);
+		}catch(e){
+			debug(e);
+		}
+		$('debug_window_command').value = '';
+
+		Field.activate('debug_window_command');
+		commandHistory.push(js);
+		historyIndex = 0;
+	}
+
+	if(evt.keyCode == Event.KEY_UP){
+		if(commandHistory.length > historyIndex){
+			historyIndex++;
+			var js = commandHistory[commandHistory.length-historyIndex];
+			$('debug_window_command').value = js;
+			Event.stop(evt);
+			Field.activate('debug_window_command');
+		}
+	}
+
+	if(evt.keyCode == Event.KEY_DOWN){
+		if(commandHistory.length >= historyIndex && historyIndex > 1){
+			historyIndex--;
+			var js = commandHistory[commandHistory.length-historyIndex];
+			$('debug_window_command').value = js;
+			Event.stop(evt);
+			Field.activate('debug_window_command');
+		}
+	}	
+}
+
+function enterInspectionMode(evt){
+	//stop observing magnifying glass
+	Event.stopObserving('debug_window_inspect', 'click', enterInspectionMode, false);
+	//change pointer
+	document.body.style.cursor='help';
+	//start observing mouse clicks
+	Event.observe(window, 'click', inspectItem, false);		
+}
+
+function inspectItem(evt){
+	// the element that triggered the event
+	var element = Event.element(evt);
+	if(element.id!="debug_window_inspect"){
+		clearDebug()
+		//change pointer
+		document.body.style.cursor='default';
+		debug(element.id);
+		inspect(element);
+		//stop observing mouse clicks
+		Event.stopObserving(window, 'click', inspectItem, false);
+		//alert('doing something');
+		//start observing mag
+		Event.observe('debug_window_inspect', 'click', enterInspectionMode, false);
+	}
+}
+
+function clearDebug() {
+	var win = $('debug');
+	if (win == null)
+		return;
+		
+	win.innerHTML=" ";
+	//clear inspections too
+	var divs = document.getElementsByClassName('inspector');
+	divs.each(function(div){
+		Element.remove(div);
+	});
+}
+

data/files/javascripts/tooltip.js

@@ -0,0 +1,241 @@
+// Singleton class TooltipWindow
+// This class works with special className. The tooltip content could be in your HTML page as an hidden element or
+// can be retreive by an AJAX call.
+//
+// To work, You just need to set two class name on elements that should show tooltips
+// - One to say to TooltipManager that this element must have a tooltip ('tooltip' by default)
+// - Another to indicate how to find the tooltip content
+//   It could be html_XXXX if tootltip content is somewhere hidden in your page, XXX must be DOM ID of this hidden element
+//   It could be ajax_XXXX if tootltip content must be find by an ajax request, XXX will be the string send as id parameter to your server. 
+// Check samples/tooltips/tooltip.html to see how it works
+//
+TooltipManager = {
+  options: {cssClassName: 'tooltip', delayOver: 200, delayOut: 1000, shiftX: 10, shiftY: 10,
+            className: 'alphacube', width: 200, height: null, 
+            draggable: false, minimizable: false, maximizable: false, showEffect: Element.show, hideEffect: Element.hide},
+  ajaxInfo: null,
+  elements: null,
+  showTimer: null,
+  hideTimer: null,
+
+  // Init tooltip manager
+  // parameters:
+  // - cssClassName (string) : CSS class name where tooltip should be shown. 
+  // - ajaxOptions  (hash)   : Ajax options for ajax tooltip. 
+  //                           For examples {url: "/tooltip/get.php", options: {method: 'get'}} 
+  //                           see Ajax.Request documentation for details
+  //- tooltipOptions (hash)  : available keys
+  //                           - delayOver: int in ms (default 10) delay before showing tooltip
+  //                           - delayOut:  int in ms (default 1000) delay before hidding tooltip
+  //                           - shiftX:    int in pixels (default 10) left shift of the tooltip window 
+  //                           - shiftY:    int in pixels (default 10) top shift of the tooltip window 
+  //                           and All window options like showEffect: Element.show, hideEffect: Element.hide to remove animation
+  //                           default: {className: 'alphacube', width: 200, height: null, draggable: false, minimizable: false, maximizable: false}
+  
+  init: function(cssClassName, ajaxInfo, tooltipOptions) {
+    TooltipManager.options = Object.extend(TooltipManager.options, tooltipOptions || {});
+    
+    cssClassName = TooltipManager.options.cssClassName || "tooltip";
+    TooltipManager.ajaxInfo = ajaxInfo;
+    TooltipManager.elements = $$("." + cssClassName);
+    TooltipManager.elements.each(function(element) {
+      element = $(element)
+      var info = TooltipManager._getInfo(element);
+      if (info.ajax) {
+        element.ajaxId = info.id;
+        element.ajaxInfo = ajaxInfo;
+      }
+      else {
+        element.tooltipElement = $(info.id);
+      }
+      element.observe("mouseover", TooltipManager._mouseOver);
+      element.observe("mouseout", TooltipManager._mouseOut);
+    });
+    Windows.addObserver(this);
+  },
+  
+  addHTML: function(element, tooltipElement) {
+    element = $(element);
+    tooltipElement = $(tooltipElement);
+    element.tooltipElement = tooltipElement;
+    
+    element.observe("mouseover", TooltipManager._mouseOver);
+    element.observe("mouseout", TooltipManager._mouseOut);
+  },
+  
+  addAjax: function(element, ajaxInfo) {
+    element = $(element);
+    element.ajaxInfo = ajaxInfo;
+    element.observe("mouseover", TooltipManager._mouseOver);
+    element.observe("mouseout", TooltipManager._mouseOut);    
+  },
+    
+  addURL: function(element, url, width, height) {
+    element = $(element);
+    element.url = url;
+    element.frameWidth = width;
+    element.frameHeight = height;
+    element.observe("mouseover", TooltipManager._mouseOver);
+    element.observe("mouseout", TooltipManager._mouseOut);    
+  },
+    
+  close: function() {
+    if (TooltipManager.tooltipWindow)
+      TooltipManager.tooltipWindow.hide();
+  },
+  
+  preloadImages: function(path, images, extension) {
+    if (!extension)
+      extension = ".gif";
+      
+    //preload images
+    $A(images).each(function(i) {
+      var image = new Image(); 
+      image.src= path + "/" + i + extension; 
+    });
+  },
+  
+  _showTooltip: function(element) {
+    if (this.element == element)
+      return;
+    // Get original element
+    while (element && (!element.tooltipElement && !element.ajaxInfo && !element.url)) 
+      element = element.parentNode;
+    this.element = element;
+    
+    TooltipManager.showTimer = null;
+    if (TooltipManager.hideTimer)
+      clearTimeout(TooltipManager.hideTimer);
+    
+    var position = Position.cumulativeOffset(element);
+    var dimension = element.getDimensions();
+
+    if (! this.tooltipWindow)
+      this.tooltipWindow = new Window("__tooltip__", TooltipManager.options);
+      
+    this.tooltipWindow.hide();
+    this.tooltipWindow.setLocation(position[1] + dimension.height + TooltipManager.options.shiftY, position[0] + TooltipManager.options.shiftX);
+
+    Event.observe(this.tooltipWindow.element, "mouseover", function(event) {TooltipManager._tooltipOver(event, element)});
+    Event.observe(this.tooltipWindow.element, "mouseout", function(event) {TooltipManager._tooltipOut(event, element)});
+
+    // Reset width/height for computation
+    this.tooltipWindow.height = TooltipManager.options.height;
+    this.tooltipWindow.width = TooltipManager.options.width;
+
+    // Ajax content
+    if (element.ajaxInfo) {
+      var p = element.ajaxInfo.options.parameters;
+      var saveParam = p;
+      
+      // Set by CSS
+      if (element.ajaxId) {
+        if (p)
+          p += "&id=" + element.ajaxId;
+        else
+          p = "id=" + element.ajaxId;
+      }
+      element.ajaxInfo.options.parameters = p || "";
+      this.tooltipWindow.setHTMLContent("");
+      this.tooltipWindow.setAjaxContent(element.ajaxInfo.url, element.ajaxInfo.options);
+      element.ajaxInfo.options.parameters = saveParam;    
+    } 
+    // URL content
+    else if (element.url) {
+      this.tooltipWindow.setURL(element.url);
+      this.tooltipWindow.setSize(element.frameWidth, element.frameHeight);
+
+      // Set tooltip size
+      this.tooltipWindow.height = element.frameHeight;
+      this.tooltipWindow.width = element.frameWidth;
+    }
+    // HTML content
+    else
+      this.tooltipWindow.setHTMLContent(element.tooltipElement.innerHTML);
+
+    if (!element.ajaxInfo) {
+      this.tooltipWindow.show();
+      this.tooltipWindow.toFront();
+    }
+  },
+  
+  _hideTooltip: function(element) {
+    if (this.tooltipWindow) {
+      this.tooltipWindow.hide();
+      this.element = null;
+    }
+  },
+  
+  _mouseOver: function (event) {
+    var element = Event.element(event);
+    if (TooltipManager.showTimer) 
+      clearTimeout(TooltipManager.showTimer);
+    
+    TooltipManager.showTimer = setTimeout(function() {TooltipManager._showTooltip(element)}, TooltipManager.options.delayOver)
+  },
+  
+  _mouseOut: function(event) {
+    var element = Event.element(event);
+    if (TooltipManager.showTimer) {
+      clearTimeout(TooltipManager.showTimer);
+      TooltipManager.showTimer = null;
+      return;
+    }
+    if (TooltipManager.tooltipWindow)
+      TooltipManager.hideTimer = setTimeout(function() {TooltipManager._hideTooltip(element)}, TooltipManager.options.delayOut)
+  },
+  
+  _tooltipOver: function(event, element) {
+    if (TooltipManager.hideTimer) {
+      clearTimeout(TooltipManager.hideTimer);
+      TooltipManager.hideTimer = null;
+    }
+  },
+  
+  _tooltipOut: function(event, element) {
+    if (TooltipManager.hideTimer == null)
+      TooltipManager.hideTimer = setTimeout(function() {TooltipManager._hideTooltip(element)}, TooltipManager.options.delayOut)
+  },
+  
+  _getInfo: function(element) {
+    // Find html_ for static content
+    var id = element.className.split(' ').detect(function(name) {return name.indexOf("html_") == 0});
+    var ajax = true;
+    if (id)
+      ajax = false;
+    else 
+      // Find ajax_ for ajax content
+      id = element.className.split(' ').detect(function(name) {return name.indexOf("ajax_") == 0});
+    
+    id = id.substr(id.indexOf('_')+1, id.length)
+    return id ? {ajax: ajax, id: id} : null;
+  },
+  
+  onBeforeShow: function(eventName, win) {
+     var top = parseFloat(win.getLocation().top);
+     var dim = win.element.getDimensions();
+    
+     if (top + dim.height > TooltipManager._getScrollTop() + TooltipManager._getPageHeight()) {
+       var position = Position.cumulativeOffset(this.element);
+
+       var top = position[1] - TooltipManager.options.shiftY - dim.height;
+       win.setLocation(top, position[0] + TooltipManager.options.shiftX)
+     }
+   },
+
+	_getPageWidth: function(){
+		return window.innerWidth || document.documentElement.clientWidth || 0;
+	},
+	
+	_getPageHeight: function(){
+		return window.innerHeight || document.documentElement.clientHeight || 0;
+	},
+
+	_getScrollTop: function(){
+		return document.documentElement.scrollTop || window.pageYOffset || 0;
+	},
+
+	_getScrollLeft: function(){
+		return document.documentElement.scrollLeft || window.pageXOffset || 0;
+	}	
+};