Skip to content

Instantly share code, notes, and snippets.

@mattparker

mattparker/code sharer yui3 hack

Created June 18, 2010 10:17
Show Gist options
  • Save mattparker/443475 to your computer and use it in GitHub Desktop.
Save mattparker/443475 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment