RubyGems - javascriptmvc - Versions diffs - 3.0.0.pre15 - Mend

javascriptmvc 3.0.0.pre15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (550) hide show

data/lib/javascriptmvc/jquery/event/default/defaultjquery.html ADDED

@@ -0,0 +1,117 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+            "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+    <head>
+        <title>Default</title>
+        <style type='text/css'>
+            body {font-family: verdana}
+            .error {border: solid 1px red;}
+            .error_text { color: red; font-size: 10px;}
+            td {padding: 3px;}
+            .clickme {
+                padding: 5px; margin: 5px;
+                border: dashed 1px red;
+                width: 100px;
+            }
+            ul li {
+                float: left;
+                border: solid 1px red;
+                padding: 5px;
+                list-style: none;
+            }
+            ul { margin: 0px; padding: 0px;}
+            .tab {
+                clear: both;
+                border: solid 1px black;
+                padding: 10px;
+            }
+        </style>
+    </head>
+    <body>
+            <h1>Default Events</h1>
+            <p>A tabs widget that doesn't let you continue until the first part is complete.</p>
+<div id="demo-html">
+<div id='tabs'>
+  <ul>
+    <li><a href='#first'>Part 1</a></li>
+    <li><a href='#second'>Part 2</a></li>
+  </ul>
+  <div id='first' class='tab'>
+    <input type='checkbox' id='complete'/> Check to complete this part.
+  </div>
+  <div id='second' class='tab'>
+    You completed part 1
+  </div>
+</div>
+</div>
+        <script type='text/javascript'
+                src='../../../steal/steal.js?jquery/event/default'>
+        </script>
+<script id="demo-source" type='text/javascript'>
+// create a tabs plugin
+// this is code written by a widget developer, and provides an event based
+// tabs API
+$.fn.tabs = function(){
+  // finds the tab from the tab button
+  var sub = function(el){
+    return $(el.find("a").attr("href"))
+  }
+  this.each(function(){
+    var tab = $(this);
+  //set the first tab button as active
+  tab.find("li:first").addClass('active')
+  //hide all the other tabs
+  tab.find(".tab:gt(0)").hide();
+  //listen for a click on a tab button
+  tab.delegate("li","click", function(ev){
+    ev.preventDefault();
+    var el = $(this);
+    if( // not active button
+	    !el.hasClass('active') &&
+		// default wasn't prevented
+        sub(el).triggerDefaults("show")){
+	  // remove active and hide old active
+      sub(tab.find(".active").removeClass("active")).hide();
+	  //mark as active
+      el.addClass("active");
+    }
+  })
+  // show a tab if default isn't prevented
+  .delegate(".tab","default.show", function(ev){
+    $(this).show();
+  })
+})
+};
+// create tabs widget
+// this is code written by an application developer using the tabs API
+// this code is usually in a separate file from the tabs widget code
+$("#tabs").tabs();
+// listen on the second tab for show
+$("#second").bind("show",function(ev){
+  //if complete isn't checked
+  if(! $("#complete")[0].checked ){
+	//prevent the default action!
+    ev.preventDefault();
+  }
+});
+</script>
+    </body>
+</html>

data/lib/javascriptmvc/jquery/event/default/qunit.html ADDED

@@ -0,0 +1,22 @@
+<html>
+    <head>
+        <title>Default Test Suite</title>
+		<link rel="stylesheet" type="text/css" href="../../../funcunit/qunit/qunit.css" />
+        <style>
+            body  {
+                margin: 0px; padding: 0px;
+            }
+        </style>
+		<script type='text/javascript' src='../../../steal/steal.js?steal[app]=jquery/event/default/test/qunit'></script>
+    </head>
+    <body>
+        <h1 id="qunit-header">Default Test Suite</h1>
+    	<h2 id="qunit-banner"></h2>
+    	<div id="qunit-testrunner-toolbar"></div>
+    	<h2 id="qunit-userAgent"></h2>
+		<div id="test-content"></div>
+        <ol id="qunit-tests"></ol>
+		<div id="qunit-test-area"></div>
+    </body>
+</html>

data/lib/javascriptmvc/jquery/event/default/test/qunit/default_test.js ADDED

@@ -0,0 +1,104 @@
+module("jquery/event/default")
+test("namespaced with same function", function(){
+	var count = 0 ,  func = function(){
+		count++;
+	}
+	$("#qunit-test-area").html("<div id='one'>hey</div>")
+	$("#one").bind("foo.bar", func).bind("foo.zar", func)
+	$("#one").trigger("foo.bar")
+	equals(1, count,"jquery seems ok")
+})
+test("triggering defaults", function(){
+	$("#qunit-test-area").html("//jquery/event/default/test/qunit/html.micro",{})
+	var count1 = 0, defaultNum, touchNum, num = 0;;
+	$("#wrap1").bind("default.touch", function(){
+		count1++;
+		defaultNum = (++num)
+	})
+	$("#wrap1").bind("touch", function(){
+		touchNum = (++num)
+	})
+	$("#touchme1").trigger("touch")
+	equals(1, count1, "trigger default event")
+	equals(1, touchNum, "default called second")
+	equals(2, defaultNum, "default called second")
+	//now prevent
+	$("#bigwrapper").bind("touch", function(e){ e.preventDefault()})
+	$("#touchme1").trigger("touch")
+	equals(1, count1, "default event not called")
+	equals(3, touchNum, "touch called again")
+	var count2 = 0;
+	$("#wrap2").bind("default.hide.me.a", function(){
+		count2++;
+	})
+	$(document.body).bind("hide", function(ev){
+		if(ev.target.id == "clickme1"){
+			console.log("stopping and preventing")
+			ev.stopPropagation()
+			ev.preventDefault()
+		}
+	})
+	$(".clickme").click(function(){
+		$(this).trigger("hide")
+	})
+	$("#qunit-test-area").html("")
+})
+test("live on default events", function(){
+	$("#qunit-test-area").html("//jquery/event/default/test/qunit/html.micro",{})
+	var bw = $("#bigwrapper"),
+		count1 = 0,
+		count2 = 0,
+		count3 = 0;
+	var jq = $();
+	jq.context = bw[0];
+	jq.selector = "#wrap1"
+	jq.live("default.touch", function(){
+		count1++;
+	});
+	//2nd selector
+	var jq2 = $();
+	jq2.context = bw[0];
+	jq2.selector = "#wrap2"
+	jq2.live("default.touching", function(){
+		count2++;
+	});
+	bw.delegate("#wrap2","default.somethingElse",function(){
+		count3++;
+	})
+	$("#touchme1").trigger("touch")
+	equals(count1,1,  "doing touch")
+	$("#touchme2").trigger("touching")
+	equals(count2,1,  "doing touching")
+	$("#touchme2").trigger("somethingElse")
+	equals(count3,1,  "delegated live somethingElse")
+	$("#qunit-test-area").html("")
+})

data/lib/javascriptmvc/jquery/event/default/test/qunit/html.micro ADDED

@@ -0,0 +1,8 @@
+<div id="bigwrapper">
+	<div id='wrap1'>
+	    <div id="touchme1">ClickMe</div>
+	</div>
+	<div id='wrap2'>
+	    <div id='touchme2'>ClickMe</a>
+	</div>
+</div>

data/lib/javascriptmvc/jquery/event/default/test/qunit/qunit.js ADDED

@@ -0,0 +1,6 @@
+//we probably have to have this only describing where the tests are
+steal
+ .plugins("jquery/event/default")  //load your app
+ .plugins('funcunit/qunit','jquery/view/micro')  //load qunit
+ .then("default_test")

data/lib/javascriptmvc/jquery/event/default/test/qunit/run.js ADDED

	@@ -0,0 +1,2 @@
1	+ load('steal/rhino/env.js');
2	+ Envjs('default/test/qunit/qunit.html', {scriptTypes : {"text/javascript" : true,"text/envjs" : true}, fireLoad: true, logLevel: 2});

data/lib/javascriptmvc/jquery/event/destroyed/destroyed.html ADDED

@@ -0,0 +1,24 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+	<head>
+		<title>destroyed demo</title>
+        <style type='text/css'>#clickToDestroy { padding: 5px; border: solid 1px;width: 200px;}</style>
+	</head>
+	<body>
+<div id='demo-html'>
+<div id='clickToDestroy'>Click Below to destroy me</div>
+<a id='change' href="javascript://">Click here!</div>
+</div>
+		<script type='text/javascript' src='../../../steal/steal.js?jquery/event/destroyed/destroyed.js'></script>
+		<script type='text/javascript' id='demo-source'>
+$("#clickToDestroy").bind("destroyed", function(){
+	$("#change").html("destroyed with "+$(this).data("testData"))
+}).data("testData","joy :)")
+$("#change").bind("click", function(){
+	$("#clickToDestroy").remove()
+})
+		</script>
+	</body>
+</html>

data/lib/javascriptmvc/jquery/event/destroyed/destroyed.js ADDED

@@ -0,0 +1,40 @@
+/**
+ * @add jQuery.event.special static
+ */
+steal.plugins('jquery/event').then(function( $ ) {
+	/**
+	 * @attribute destroyed
+	 * @parent specialevents
+	 * @download jquery/dist/jquery.event.destroyed.js
+	 * @test jquery/event/destroyed/qunit.html
+	 * Provides a destroyed event on an element.
+	 * <p>
+	 * The destroyed event is called when the element
+	 * is removed as a result of jQuery DOM manipulators like remove, html,
+	 * replaceWith, etc. Destroyed events do not bubble, so make sure you don't use live or delegate with destroyed
+	 * events.
+	 * </p>
+	 * <h2>Quick Example</h2>
+	 * @codestart
+	 * $(".foo").bind("destroyed", function(){
+	 *    //clean up code
+	 * })
+	 * @codeend
+	 * <h2>Quick Demo</h2>
+	 * @demo jquery/event/destroyed/destroyed.html
+	 * <h2>More Involved Demo</h2>
+	 * @demo jquery/event/destroyed/destroyed_menu.html
+	 */
+	var oldClean = jQuery.cleanData
+	$.cleanData = function( elems ) {
+		for ( var i = 0, elem;
+		(elem = elems[i]) != null; i++ ) {
+			$(elem).triggerHandler("destroyed")
+			//$.event.remove( elem, 'destroyed' );
+		}
+		oldClean(elems)
+	}
+})

data/lib/javascriptmvc/jquery/event/destroyed/destroyed_menu.html ADDED

@@ -0,0 +1,96 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+	<head>
+		<title>destroyed demo</title>
+        <style type='text/css'>
+        	ul.menu {
+        		padding: 0px; margin: 0px;
+				border: solid 1px black;
+				width: 100px;
+				position: absolute;
+				list-style: none;
+				background-color: white;
+        	}
+			.menu li{
+				padding: 1px; margin: 0px;
+				font-size: 1px;
+			}
+			#remove {
+				color: red;
+			}
+		</style>
+	</head>
+	<body>
+<p>This demo creates a single, reusable menu for multiple elements.
+	Click each "Show Menu" button to see the menu expand.  By clicking
+	the "Remove" button, it removes a "Show Menu".  When
+	all "Show Menu" buttons are gone, the elment is removed.
+	  After removing all the "Show Me" elements,
+	the menu will be removed completely.  This is done with the help of the
+	destroyed special event.
+</p>
+<div id='demo-html'>
+<a href='javascript://' class='context'>Show Menu 1</a>
+<a href='javascript://' class='context'>Show Menu 2</a>
+<a href='javascript://' class='context'>Show Menu 3</a>
+<br/>
+<a id='remove' href="javascript://">Remove a "Show Menu"</div>
+</div>
+		<script type='text/javascript' src='../../../steal/steal.js?jquery/event/destroyed/destroyed.js'></script>
+<script type='text/javascript' id='demo-source'>
+//create a contextmenu plugin
+jQuery.fn.reusemenu = function(options){
+  //create menu and put in dom
+  var ul = $("<ul/>")
+              .addClass("menu")
+              .html(options.length ? "<li>"+options.join("</li><li>")+"</li>" :""  )
+              .appendTo(document.body),
+      //save a reference to our handler so we can remove it
+	  hideHandler = function(){
+        ul.find("li").animate({fontSize: 1, padding: 1});
+      },
+	  //the number of elements that remain
+	  count = this.length;
+  //take out the hide handler when we
+  //no longer have the ul
+  ul.bind("destroyed", function(){
+    $(document).unbind("click",hideHandler )
+  })
+  $(document).click(hideHandler)
+  //for each menu
+  this.each(function(){
+	var me = $(this);
+    //position menu on click
+	me.click( function(ev) {
+      ul.offset({
+        top: ev.pageY+20,
+        left: ev.pageX+20
+      }).find("li").animate({fontSize: 12, padding: 10});
+      ev.stopPropagation();
+    })
+	//if last element, remove menu
+	.bind("destroyed", function() {
+      count--;
+      if(!count){
+        ul.remove();
+        ul = null;
+      }
+    })
+  })
+};
+$(".context").reusemenu(["reuse","able","menu"])
+$("#remove").click(function(){
+  $(".context:first").remove()
+})
+		</script>
+	</body>
+</html>

data/lib/javascriptmvc/jquery/event/destroyed/qunit.html ADDED

@@ -0,0 +1,21 @@
+<html>
+    <head>
+        <link rel="stylesheet" type="text/css" href="../../../funcunit/qunit/qunit.css" />
+        <style>
+            body  {
+                margin: 0px; padding: 0px;
+            }
+        </style>
+		<script type='text/javascript' src='../../../steal/steal.js?steal[app]=jquery/event/destroyed/test/qunit'></script>
+    </head>
+    <body>
+        <h1 id="qunit-header">destroyed Test Suite</h1>
+    	<h2 id="qunit-banner"></h2>
+    	<div id="qunit-testrunner-toolbar"></div>
+    	<h2 id="qunit-userAgent"></h2>
+		<div id="test-content"></div>
+        <ol id="qunit-tests"></ol>
+		<div id="qunit-test-area"></div>
+    </body>
+</html>