mattparker/code sharer yui3 hack

## code sharer yui3 hack

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>YUI3 testbed</title>


<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<link rel="stylesheet" type="text/css" href="css/shCore.css" />
<link type="text/css" rel="Stylesheet" href="css/shThemeDefault.css"/>

<script src="http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js"></script>

<style type="text/css">
.chatbox{
border:1px solid gray;
height:170px;
overflow:scroll;
width:100%;
 background-color: white;
}

.savingchat{
 color: gray;
}
.yui3-panel{
 z-index:2;
 width: 320px;
 position: absolute;
 background-color:white;
}
.yui3-panel-bd{
 height: 200px;

}
a.newchat{
float:right;
}
.newchat{
color: green;
}
.centercol{
 width:60%;
 margin-left:20%;
 background-color:white;
 height:100%;
}
body.yui3-skin-sam{
 background-color: #ddd;
 font-size:93%;
}
#formattedCodeBoundingBox{
min-height: 100px;
max-height: 600px;
overflow: auto;
}
#formattedcodeContainer{
min-height:1em;
}
.chatbox .user{
color: red;
width: 10em;
overflow:hidden;
margin-right:1em;
}
.chatbox .msg{

}
</style>

<!--
<script type="text/javascript" src="prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="prettify/prettify.css" />
-->
</head>

<body class="yui3-skin-sam">
<!--<div id="div1" class="chatbox">
This is where the chat comes up:
</div>
<form id="chat1" name="chat1" method="POST" action="sendchat.php">
<input type="text" id="chattext" name="chattext"/><input type="submit" name="submit" value="post" id="sendchat"/>
-->


<div class="centercol">
You're in control: type your code here:
<textarea cols="80" id="codebox" rows="10"></textarea>

<div id="formattedCodeBoundingBox">
Code preview:
<div id="formattedcodeContainer">
<pre class="brush: js">
</pre>
</div>

</div>

<button class="newchat">create new chat</button>

</div>

</body>


<script type="text/javascript">


SyntaxHighlighter.all();

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.06.07-17-52',
    modules: {
        'gallery-aui-skin-base': {
            fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/gallery-aui-skin-base/css/gallery-aui-skin-base-min.css',
            type: 'css'
        },
        'gallery-aui-skin-classic': {
            fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/gallery-aui-skin-classic/css/gallery-aui-skin-classic-min.css',
            type: 'css',
            requires: ['gallery-aui-skin-base']
        }
    }
}).use('gallery-io-poller','io-base', 'io-form', 'json', 'event-key',
          'gallery-aui-panel', 'gallery-aui-resize', 'dd-plugin', function(Y) {


var panelCount = 0;

var ChatPanel = function (oCfg) {

  panelCount++;

  oCfg = oCfg || {};
  oCfg.title = oCfg.title || window.prompt("Title for chat");
  if (!oCfg.title) {
    return;
  }

  var boxId = Y.guid();

  var chatPanel = new Y.Panel({
      collapsible: true,
			collapsed: false,
			headerContent: oCfg.title,
			bodyContent: '<div id="' + boxId + '" class="chatbox"></div>' +
			             '<form id="chat' + panelCount + '" name="chat' + panelCount + '"' +
                   ' method="POST" action="sendchat.php?panel=' + panelCount + '">' +
			             '<input type="text" class="message" name="chattext"/>' +
                   '<input type="submit" name="submit" value="post" class="postmessage"/>'
  }).render();


   Y.io( 'add.php', {
     method: "POST",
     data: "what=newchat&id=" + panelCount
   });

	chatPanel.plug(Y.Plugin.Drag);
	chatPanel.dd.addHandle(".yui3-panel-hd");


     // get the conversation
   var get = Y.io.poll(5000, 'update.php?panel=' + panelCount, {
               on:{
                 modified: function (id, o) {
                   var val = Y.JSON.parse(o.responseText);

                   var n = Y.one("#" + boxId).append(
                       '<span class="user user' + val.uid + '">' + val.by + '</span>' +
                       '<span class="msg">' + val.msg + '</span>' +
                       '<a class="newchat">spawn</a>' +
                       '<br/>');

                 }
               }
             });

   get.start();

};


 // listen for clicks that trigger new chat threads:
 Y.delegate("click", function () {
   var x = new ChatPanel();
 }, document.body, ".newchat, .syntaxhighlighter td.number code" );


 // send a message
 Y.delegate("click", function (ev) {

   var textNode = ev.currentTarget.ancestor("form").one(".message"),
       textVal = textNode.get("value");

   textNode.set("value", "sending...")
           .set("disabled", true)
           .toggleClass("savingchat");
   ev.halt();
   Y.io( 'add.php', {
     method: "POST",
     data: "what=message&msg=" + textVal,
     on: {
       success: function (o) {
         textNode.set("value", "saved")
                 .set("disabled", false)
                 .toggleClass("savingchat");
         Y.later(1000, textNode, function(){textNode.set("value","");});

       }
     }
   });
 }, document.body, ".postmessage");


 // code highlighting
 Y.on('key', function (e) {

  Y.one("#formattedcodeContainer").setContent('<pre class="brush: js">' +
      e.currentTarget.get("value").replace(/</g, '&lt;') +
      '</pre>');
  SyntaxHighlighter.highlight();
 }, '#codebox', 'down', Y);


});
</script>

 </html>

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>YUI3 testbed</title>


	<script type="text/javascript" src="js/shCore.js"></script>
	<script type="text/javascript" src="js/shBrushJScript.js"></script>
	<link rel="stylesheet" type="text/css" href="css/shCore.css" />
	<link type="text/css" rel="Stylesheet" href="css/shThemeDefault.css"/>

	<script src="http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js"></script>

	<style type="text/css">
	.chatbox{
	border:1px solid gray;
	height:170px;
	overflow:scroll;
	width:100%;
	background-color: white;
	}

	.savingchat{
	color: gray;
	}
	.yui3-panel{
	z-index:2;
	width: 320px;
	position: absolute;
	background-color:white;
	}
	.yui3-panel-bd{
	height: 200px;

	}
	a.newchat{
	float:right;
	}
	.newchat{
	color: green;
	}
	.centercol{
	width:60%;
	margin-left:20%;
	background-color:white;
	height:100%;
	}
	body.yui3-skin-sam{
	background-color: #ddd;
	font-size:93%;
	}
	#formattedCodeBoundingBox{
	min-height: 100px;
	max-height: 600px;
	overflow: auto;
	}
	#formattedcodeContainer{
	min-height:1em;
	}
	.chatbox .user{
	color: red;
	width: 10em;
	overflow:hidden;
	margin-right:1em;
	}
	.chatbox .msg{

	}
	</style>

	<!--
	<script type="text/javascript" src="prettify/prettify.js"></script>
	<link rel="stylesheet" type="text/css" href="prettify/prettify.css" />
	-->
	</head>

	<body class="yui3-skin-sam">
	<!--<div id="div1" class="chatbox">
	This is where the chat comes up:
	</div>
	<form id="chat1" name="chat1" method="POST" action="sendchat.php">
	<input type="text" id="chattext" name="chattext"/><input type="submit" name="submit" value="post" id="sendchat"/>
	-->


	<div class="centercol">
	You're in control: type your code here:
	<textarea cols="80" id="codebox" rows="10"></textarea>

	<div id="formattedCodeBoundingBox">
	Code preview:
	<div id="formattedcodeContainer">
	<pre class="brush: js">
	</pre>
	</div>

	</div>

	<button class="newchat">create new chat</button>

	</div>

	</body>



	<script type="text/javascript">


	SyntaxHighlighter.all();

	YUI({
	//Last Gallery Build of this module
	gallery: 'gallery-2010.06.07-17-52',
	modules: {
	'gallery-aui-skin-base': {
	fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/gallery-aui-skin-base/css/gallery-aui-skin-base-min.css',
	type: 'css'
	},
	'gallery-aui-skin-classic': {
	fullpath: 'http://yui.yahooapis.com/gallery-2010.06.07-17-52/build/gallery-aui-skin-classic/css/gallery-aui-skin-classic-min.css',
	type: 'css',
	requires: ['gallery-aui-skin-base']
	}
	}
	}).use('gallery-io-poller','io-base', 'io-form', 'json', 'event-key',
	'gallery-aui-panel', 'gallery-aui-resize', 'dd-plugin', function(Y) {





	var panelCount = 0;

	var ChatPanel = function (oCfg) {

	panelCount++;

	oCfg = oCfg \|\| {};
	oCfg.title = oCfg.title \|\| window.prompt("Title for chat");
	if (!oCfg.title) {
	return;
	}

	var boxId = Y.guid();

	var chatPanel = new Y.Panel({
	collapsible: true,
	collapsed: false,
	headerContent: oCfg.title,
	bodyContent: '<div id="' + boxId + '" class="chatbox"></div>' +
	'<form id="chat' + panelCount + '" name="chat' + panelCount + '"' +
	' method="POST" action="sendchat.php?panel=' + panelCount + '">' +
	'<input type="text" class="message" name="chattext"/>' +
	'<input type="submit" name="submit" value="post" class="postmessage"/>'
	}).render();


	Y.io( 'add.php', {
	method: "POST",
	data: "what=newchat&id=" + panelCount
	});

	chatPanel.plug(Y.Plugin.Drag);
	chatPanel.dd.addHandle(".yui3-panel-hd");


	// get the conversation
	var get = Y.io.poll(5000, 'update.php?panel=' + panelCount, {
	on:{
	modified: function (id, o) {
	var val = Y.JSON.parse(o.responseText);

	var n = Y.one("#" + boxId).append(
	'<span class="user user' + val.uid + '">' + val.by + '</span>' +
	'<span class="msg">' + val.msg + '</span>' +
	'<a class="newchat">spawn</a>' +
	'<br/>');

	}
	}
	});

	get.start();

	};




	// listen for clicks that trigger new chat threads:
	Y.delegate("click", function () {
	var x = new ChatPanel();
	}, document.body, ".newchat, .syntaxhighlighter td.number code" );



	// send a message
	Y.delegate("click", function (ev) {

	var textNode = ev.currentTarget.ancestor("form").one(".message"),
	textVal = textNode.get("value");

	textNode.set("value", "sending...")
	.set("disabled", true)
	.toggleClass("savingchat");
	ev.halt();
	Y.io( 'add.php', {
	method: "POST",
	data: "what=message&msg=" + textVal,
	on: {
	success: function (o) {
	textNode.set("value", "saved")
	.set("disabled", false)
	.toggleClass("savingchat");
	Y.later(1000, textNode, function(){textNode.set("value","");});

	}
	}
	});
	}, document.body, ".postmessage");


	// code highlighting
	Y.on('key', function (e) {

	Y.one("#formattedcodeContainer").setContent('<pre class="brush: js">' +
	e.currentTarget.get("value").replace(/</g, '<') +
	'</pre>');
	SyntaxHighlighter.highlight();
	}, '#codebox', 'down', Y);




	});
	</script>

	</html>