bsic popup working

tardate · Jul 28, 2010 · 3e60100 · 3e60100
commit 3e60100
Show file tree

Hide file tree

Showing 4 changed files with 274 additions and 0 deletions.
diff --git a/README.rdoc b/README.rdoc
diff --git a/addtocal.htm b/addtocal.htm
@@ -0,0 +1,63 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+<head>
+	<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/south-street/jquery-ui.css' />
+	<link rel='stylesheet' type='text/css' href='jquery.addtocal.css' />
+<style type='text/css'>
+
+	body {
+		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
+		margin: 0 30px;
+	}
+
+	h1 {
+		margin: 0 0 1em;
+		padding: 0.5em;
+	}
+
+	p.description {
+		font-size: 0.8em;
+		padding: 1em;
+		position: absolute;
+		top: 3.2em;
+		margin-right: 400px;
+	}
+
+	#message {
+		font-size: 0.7em;
+		position: absolute;
+		top: 1em; 
+		right: 1em;
+		width: 350px;
+		display: none;
+		padding: 1em;
+		background: #ffc;
+		border: 1px solid #dda;
+	}
+
+
+</style>
+
+  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
+  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
+
+	<script type='text/javascript' src='jquery.addtocal.js'></script>
+
+  <script type='text/javascript'>
+  $(document).ready(function() {
+
+    $('.addtocal').addtocal( );
+
+  });
+  </script>
+</head>
+<body>
+	<h1>jquery.addtocal Demo</h1>
+	<p class="description">This demonstrates a basic add-to-cal function.</p>
+
+	<div id='event-1' class='addtocal'>Add event #1</div>
+
+	<div id='event-2' class='addtocal'>Add event #2</div>
+
+</body>
+</html>
diff --git a/jquery.addtocal.css b/jquery.addtocal.css
@@ -0,0 +1,10 @@
+
+
+.ui-addtocal {
+  cursor:pointer;cursor:hand;
+}
+
+ul.ui-addtocal {
+  cursor:default;
+  position:absolute;
+}
diff --git a/jquery.addtocal.js b/jquery.addtocal.js
@@ -0,0 +1,201 @@
+/*
+ * jQuery.weekCalendar v2.0-dev
+ *
+ * for support join us at the google group: http://groups.google.com/group/jquery-week-calendar
+ * have a look to the wiki for documentation: http://wiki.github.com/themouette/jquery-week-calendar/
+ * something went bad ? report an issue: http://github.com/themouette/jquery-week-calendar/issues
+ * get the last version on github: http://github.com/themouette/jquery-week-calendar
+ *
+ * Copyright (c) 2009 Rob Monie
+ * Copyright (c) 2010 Julien MUETTON
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ *   
+ *   If you're after a monthly calendar plugin, check out http://arshaw.com/fullcalendar/
+ */
+
+(function($) {
+
+  $.widget("ui.addtocal", 
+  {
+		options: {
+		appendTo: "body",
+		delay: 300,
+		minLength: 1,
+		position: {
+			my: "left top",
+			at: "left bottom",
+			collision: "none"
+		},
+		source: null,
+		select: function(event, ui) {
+      alert( ui.item.label );
+    },
+	},
+	_create: function() {
+		var self = this,
+			doc = this.element[ 0 ].ownerDocument;
+		this.element
+			.addClass( "ui-addtocal" )
+			.bind( "click.addtocal", function( event ) {
+			  self.showMenu();
+			});
+		this._initSource();
+
+		this.menu = $( "<ul></ul>" )
+			.addClass( "ui-addtocal" )
+			.appendTo( $( this.options.appendTo || "body", doc )[0] )
+			// prevent the close-on-blur in case of a "slow" click on the menu (long mousedown)
+			.mousedown(function() {
+				// use another timeout to make sure the blur-event-handler on the input was already triggered
+				setTimeout(function() {
+					clearTimeout( self.closing );
+				}, 13);
+			})
+			.menu({
+				selected: function( event, ui ) {
+					var item = ui.item.data( "item.addtocal" ),
+						previous = self.previous;
+
+					// only trigger when focus was lost (click on menu)
+					if ( self.element[0] !== doc.activeElement ) {
+						self.element.focus();
+						self.previous = previous;
+					}
+
+					if ( false !== self._trigger( "select", event, { item: item } ) ) {
+						// TODO handle add-to-cal: self.element.val( item.value );
+					}
+
+					self.close( event );
+					self.selectedItem = item;
+				}
+			})
+			.zIndex( this.element.zIndex() + 1 )
+			// workaround for jQuery bug #5781 http://dev.jquery.com/ticket/5781
+			.css({ top: 0, left: 0 })
+			.hide()
+			.data( "menu" );
+		if ( $.fn.bgiframe ) {
+			 this.menu.element.bgiframe();
+		}
+	},
+
+	destroy: function() {
+		this.element
+			.removeClass( "ui-addtocal" );
+		this.menu.element.remove();
+		$.Widget.prototype.destroy.call( this );
+	},
+
+	_setOption: function( key, value ) {
+		$.Widget.prototype._setOption.apply( this, arguments );
+		if ( key === "source" ) {
+			this._initSource();
+		}
+		if ( key === "appendTo" ) {
+			this.menu.element.appendTo( $( value || "body", this.element[0].ownerDocument )[0] )
+		}
+	},
+
+	_initSource: function() {
+		this.source = this.options.source;
+	},
+	showMenu: function( event ) {
+	  content = [ {value: 1, label:"Add to Google Calendar"}, {value: 2, label:"Add to Yahoo! Calendar"}, 
+	    {value: 3, label:"iCal" } ] ;
+		if ( content.length ) {
+			content = this._normalize( content );
+			this._suggest( content );
+			this._trigger( "open" );
+		} else {
+			this.close();
+		}
+	},
+
+	close: function( event ) {
+		clearTimeout( this.closing );
+		if ( this.menu.element.is(":visible") ) {
+			this._trigger( "close", event );
+			this.menu.element.hide();
+			this.menu.deactivate();
+		}
+	},
+
+	_normalize: function( items ) {
+		// assume all items have the right format when the first item is complete
+		if ( items.length && items[0].label && items[0].value ) {
+			return items;
+		}
+		return $.map( items, function(item) {
+			if ( typeof item === "string" ) {
+				return {
+					label: item,
+					value: item
+				};
+			}
+			return $.extend({
+				label: item.label || item.value,
+				value: item.value || item.label
+			}, item );
+		});
+	},
+
+	_suggest: function( items ) {
+		var ul = this.menu.element
+				.empty()
+				.zIndex( this.element.zIndex() + 1 ),
+			menuWidth,
+			textWidth;
+		this._renderMenu( ul, items );
+		// TODO refresh should check if the active item is still in the dom, removing the need for a manual deactivate
+		this.menu.deactivate();
+		this.menu.refresh();
+		this.menu.element.show().position( $.extend({
+			of: this.element
+		}, this.options.position ));
+
+		menuWidth = ul.width( "" ).outerWidth();
+		textWidth = this.element.outerWidth();
+		ul.outerWidth( Math.max( menuWidth, textWidth ) );
+	},
+
+	_renderMenu: function( ul, items ) {
+		var self = this;
+		$.each( items, function( index, item ) {
+			self._renderItem( ul, item );
+		});
+	},
+
+	_renderItem: function( ul, item) {
+		return $( "<li></li>" )
+			.data( "item.addtocal", item )
+			.append( $( "<a></a>" ).text( item.label ) )
+			.appendTo( ul );
+	},
+
+	_move: function( direction, event ) {
+		if ( !this.menu.element.is(":visible") ) {
+			this.showMenu( event );
+			return;
+		}
+		if ( this.menu.first() && /^previous/.test(direction) ||
+				this.menu.last() && /^next/.test(direction) ) {
+			this.element.val( this.term );
+			this.menu.deactivate();
+			return;
+		}
+		this.menu[ direction ]( event );
+	},
+
+	widget: function() {
+		return this.menu.element;
+	}
+});
+
+
+
+
+}(jQuery));
+