Skip to content

Instantly share code, notes, and snippets.

@tokapeb
Created July 31, 2012 13:42
Show Gist options
  • Select an option

  • Save tokapeb/3217133 to your computer and use it in GitHub Desktop.

Select an option

Save tokapeb/3217133 to your computer and use it in GitHub Desktop.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JCSDL Editor | Embedding</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
body {
background: white;
font-size: 13px;
line-height: 1.5em;
color: #222222;
font-family: "Helvetica Neue", Helvetica, sans-serif;}
h1, h2, h3, h4 {
line-height: 1.5em;
font-weight: bold; }
h1 {
font-size: 1.5em; }
h2 {
font-size: 1.35em; }
h3 {
font-size: 1.25em; }
h4 {
font-size: 1.1em; }
textarea {
display: block;
height: 150px;
padding: 10px;
line-height: 1.5em;
border: 1px solid #dcdcdc; }
a {
color: orange;
text-decoration: none;
font-weight: bold; }
/* edit tab */
#streams-list {
margin: 0;
padding: 0;
border-top: 1px solid #dcdcdc;
list-style-type: none;
list-style-position: outside; }
#streams-list li {
display: block;
position: relative;
border-bottom: 1px solid #dcdcdc;
line-height: 2.5em; }
#streams-list li h4 {
font-size: 1em;
margin: 0;
line-height: 2.5em;
margin-left: 20px;
padding: 0; }
#streams-list li .options {
position: absolute;
top: 0;
right: 20px; }
#streams-list li .options a {
margin: 0 10px; }
</style>
<link rel="stylesheet" type="text/css" href="jcsdl/jcsdl.min.css" />
<script type="text/javascript" src="jcsdl/jcsdl.definition.js"></script>
<script type="text/javascript" src="jcsdl/jcsdl.min.js"></script>
<script type="text/javascript">
$(function() {
var $currentStream = $();
JCSDL.onLoad(function() {
$('#jcsdl-edit').jcsdlGui({
save : function(code) {
// add new item if none loaded)
if ($currentStream.length == 0) {
var $item = $('#streams-list li:first').clone();
$item.find('h4').html('New stream');
$item.find('.jcsdl-source').val(code);
$item.appendTo('#streams-list');
} else {
// save the output to the selected stream
$currentStream.find('.jcsdl-source').val(code);
}
// display the output
$('#jcsdl-edit-output').val(code);
// hide the editor and show the list
$('#jcsdl-edit').hide();
$('#streams-list').show();
},
cancel : function() {
this.$container.fadeOut(this.config.animationSpeed, function() {
$('#streams-list').show();
});
}
});
});
$('#streams-list').on('click', '.edit', function(ev) {
ev.preventDefault();
ev.target.blur();
$currentStream = $('a.edit').closest('li');
var code = $currentStream.find('.jcsdl-source').val();
$('#jcsdl-edit').jcsdlGui('loadJCSDL', code);
// clear the output as well
$('#jcsdl-edit-output').val('');
// hide the list and show the editor
$('#streams-list').hide();
$('#jcsdl-edit').show();
});
//Automatic predefined filter
$currentStream = $('a.edit').closest('li');
var code = $currentStream.find('.jcsdl-source').val();
$('#jcsdl-edit').jcsdlGui('loadJCSDL', code);
// clear the output as well
$('#jcsdl-edit-output').val('');
// hide the list and show the editor
$('#streams-list').hide();
$('#jcsdl-edit').show();
//Automatic predefined filter end
$('#streams-list').on('click', '.source', function(ev) {
ev.preventDefault();
ev.target.blur();
var code = $(this).closest('li').find('.jcsdl-source').val();
$('#jcsdl-edit-output').val(code);
});
var editor = new JCSDLGui('#jcsdl', {
save : function(code) {
alert(code);
}
});
});
</script>
</head>
<body>
<div id="jcsdl-edit"></div>
<!-- EDIT STREAMS TAB -->
<ul id="streams-list">
<li>
<h4>Sample stream</h4>
<div class="options">
<a href="#" class="edit">Edit</a>
<a href="#" class="source">View JCSDL Source</a>
</div>
<textarea class="jcsdl-source" style="display: none;">// JCSDL_MASTER 5490fabd522f5dba1c8b35ea322200a6 AND
// JCSDL_VERSION 1.0
// JCSDL_START cc2593455c1bf6dec2af91c7cb2d8bb6 twitter.text,contains_any,27-8
twitter.text contains_any "DataSift"
// JCSDL_END
// JCSDL_MASTER_END</textarea>
</li>
</ul>
<h3>JCSDL Output:</h3>
<textarea id="jcsdl-edit-output" disabled="true" style="width: 90%; margin: 20px auto; display: block; height: 200px;"></textarea>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment