Just Try It jQ starter app [Archive]

rdspoons

02-12-2012, 12:06 PM

Just Try It jQ

This post extends Just Try It functionality and adds a little style to the UI allowing you to resize the working panel as needed.

This app needs to run from a server due to localStorage usage.

Funationality:
The HTML, CSS, and JavaSCript buttons toggle growing and shrinking actions for their panes.
Html5 LocalStorage, if available, is used to save 1 content from each text area.
Save – saves the current content of the textarea to local storage. Only 1 item stored per pane.
Load – loads content from local storage into the textarea.
Clear – clears the localStorag assigned to the textarea.
Last – loads the last entered text into the textarea.

JustTryIt logs all key stroke automatically by saving them to localstorage so you can restore a textarea to its last keyd-in state if the content is not intentionally cleared. Useful when you close the browser and return later to continue. You can obviously remove this action or turn it into a user option.

The links in the top menu simple helpers used to insert library cdns.

The >>>Test button runs the combined html/css/javascript code in the iframe.
The >>>Take it with you button opens a new window and displays the current content of textareas in a textarea. Win users: IE will not honor the line-breaks, if text is copied to notepad (use wordpad or another editor).
The >>>Run button run the combined html/css/javascript code in a new window.
(IE users will need to refresh the new page once loaded to see the reults when using some libraries)

The doctype dropdown will let you set a doctype to use when running the code.

The cdns links are added based on the common property found in the cdns object.

The public link in the first pane is there to allow you to work with separate projects.
Public is the default, and everyone with access to the computer can modify (save/load/clear/last) the documents in the public projects.
Clicking on the public link lets you give a new project name. Remember it, the documents will be saved to local storage based on the project name. Only those who know the project name will be able to modify the documents for that project (save/load/clear/last).
Keep in mind the 5MB limit of localStorage.

That’s about it.

<!doctype html>
<html>
<head>
<title>
Just Try It
</title>
<style type='text/css'>
*,html,body {padding:0px;margin:0px;}
#phtml,#pcss,#pjs {position:absolute;padding:5px;}
#phtml a,#pcss a,#pjs a {color:white;}
#btns {position:absolute;color:white;left:0px;right:0px;bottom:0px;background-color:#123456;}
iframe {margin:0px;}
.menu {background-color:#123456;padding:2px;}
.menu a {
background:#6789ab;color:white;text-decoration:none;
font:normal normal 18px/27px candela;
padding:3px;padding-left:15px;padding-right:10px;
height: 5em;
width: 12em;
border-width:1px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
.menu a:hover {background-color:#abcdef;color:#123456;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>

<div class="menu">
<a href="">jQuery</a>
</div>

<div id="phtml">
<div><button>HTML</button>
<a href="http://paperkilledrock.com/2010/05/html5-localstorage-part-one/"> Save </a> |
<a href="http://paperkilledrock.com/2010/05/html5-localstorage-part-one/"> Load </a> |
<a href="http://paperkilledrock.com/2010/05/html5-localstorage-part-one/"> Clear </a>
</div>
<textarea><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<a href="http://www.google.com" target="_blank">Google</a></textarea>
</div>

<div id="pcss">
<div><button>CSS</button>
<a href="http://paperkilledrock.com/2010/05/html5-localstorage-part-one/"> Save </a> |
<a href="http://paperkilledrock.com/2010/05/html5-localstorage-part-one/"> Load </a> |
<a href="http://paperkilledrock.com/2010/05/html5-localstorage-part-one/"> Clear </a>
</div>
<textarea></textarea>
</div>

<diV id="pjs">
<div><button>JavaScript</button>
<a href="http://paperkilledrock.com/2010/05/html5-localstorage-part-one/"> Save </a> |
<a href="http://paperkilledrock.com/2010/05/html5-localstorage-part-one/"> Load </a> |
<a href="http://paperkilledrock.com/2010/05/html5-localstorage-part-one/"> Clear </a>
</div>
<textarea>$("a[href*=google]")
.append(" <em>(Read The Privacy Agreement)</em>")
.css("color","red");</textarea>
</div>

<div id="pifr">
<div>Result</div>
<iframe></iframe>
</div>

<div id="btns">
<button> >>> Test </button>
<button> >>> Take It With You </button>
<button> >>> Run </button>

[
<label for="dtype">doctype</label>
<select id="dtype">
<option selected="true">Quirks</option>
<option>html5</option>
<option>4.01 strict</option>
<option>4.01 transitional</option>
<option>4.01 frameset</option>
<option>xhtml strict 1.0</option>
<option>xhtml transitional 1.0</option>
<option>xhtml framset 1.0</option>
<option>3.2 final</option>
</select>
]
</div>

<script type="text/javascript">
var JITprojects = JITprojects||{name:"public"};
$(document).ready(function(){
var panes = ["#phtml","#pcss","#pjs","#pifr"];
var panesLength = panes.length;
var cnt0=cnt1=cnt2=0;
var lastbox=-1;
var speed=500;
var _fullwidth="90%",_fullheight="85%";
var box=[{},{},{},{}];
adjustBox();

(function(n){
if(typeof(window.localStorage) != 'undefined'){
$.each(["shtml","scss","sjs"],function(index,eid){
$("a:eq("+(n+index*3)+")").click(function(){
localStorage.setItem(eid+JITprojects.name, $("textarea:eq("+index+")").val());return false;
});
$("a:eq("+(n+index*3+1)+")").click(function(){
$("textarea:eq("+index+")").val(localStorage.getItem(eid+JITprojects.name));return false;
});
$("a:eq("+(n+index*3+2)+")").click(function(){
localStorage.removeItem(eid+JITprojects.name);return false;
});
});
}
})(1);
(function(){
// just try it needs 3 textareas, 1 iframe, and 2 buttons to work.
$.each(["html","css","code","result"],function(index,cn){
$("textarea:eq("+index+")").addClass(cn);
});

var justtryit={
res:"",
clear:function(){justtryit.res=""},
add:function(n){justtryit.res+=n;return this;},
__:function(n){justtryit.res+=$("textarea:eq("+n+")").val();return this;},
_:function(n){justtryit.res+="<"+n+">";return this;},
nl:function(n){justtryit.res+="\n\n"+["","/* css */","// script"][n]+"\n";return this;},
dt:function(n){
justtryit.add([
'',
'<!DOCTYPE html>',
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">',
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">',
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">',
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">'
][n]);
return this;
},
write:function(n){
//n=n.replace(/(<.*?>)/g,"$1\n");
var a = window.open("about:blank");
a.window.document.open();
a.window.document.write(n);
a.window.document.close();
}
};
$("button:eq(3)").click(function(){
justtryit.clear();
justtryit.dt($("#dtype").attr("selectedIndex"))._("html")._("head")
._("style").__(1)._("/style")
._("/head")._("body")
.__(0)._("script").__(2)
._("/script")
._("/body")._("/html");
$("pifr").html("<div>Result</div><iframe></iframe>").addClass("result");
with(($("iframe:eq(0)")[0]).contentWindow.document){open(),write(justtryit.res),close()};
$(panes[3] +" > iframe:eq(0)").css("width",box[3].width).css("height",box[3].height);
if(window.event) parent.frames[0].window.location.reload(); //for ie.

});
$("button:eq(4)").click(function(){
justtryit.clear();
justtryit.dt($("#dtype").attr("selectedIndex")).nl(0).__(0).nl(1).__(1).nl(2).__(2);
justtryit.write("<textarea rows='25' cols='80'>"+justtryit.res.replace(/<\/textarea/g,"<textarea")+"</textarea>");
});

$("button:eq(5)").click(function(){
justtryit.clear();
justtryit.dt($("#dtype").attr("selectedIndex"))._("html")._("head")._("style").__(1)._("/style")
._("/head")._("body")
.__(0)._("script").__(2)._("/script")
._("/body")._("/html");
justtryit.write(justtryit.res);
});
})();

(function(){
var _tabspace = arguments[0]||String.fromCharCode(9);
var _caretBump = _tabspace.length;
var _checkfortab = (document.selection)?
function(e){
e.onkeydown=
function(){
if(event.keyCode==9){
this.focus();
sel = document.selection.createRange();
sel.text = _tabspace;
return false;
}
}
}:
function(e){
e.onkeydown=
function(e){
if(e.keyCode==9){
var me = this;
var startPos = this.selectionStart;
me.caretpos = this.selectionStart + _caretBump;
var endPos = this.selectionEnd;
this.value = this.value.substring(0, startPos)+ _tabspace + this.value.substring(endPos, this.value.length);
setTimeout(function(){me.focus(); me.setSelectionRange(me.caretpos,me.caretpos);}, 0);
return false;
}
}
}
window.allowTabs=function(el){_checkfortab(el)};
})(" "); // <--4 spaces in argument.

(function(){
$.each($("textarea"),function(index,el){
allowTabs(el);
});
})();

(function(){
var cdns = {
ref:"http://www.cdncatalog.com/",
urls:[
{
name:"chrome frame",
url:"http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js",
common:0
},{
name:"Dojo",
url:"http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js",
common:1
//http://o.aolcdn.com/dojo/1.6/dojo/dojo.xd.js
},{
name:"Ext Core",
url:"http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js",
common:1
},{
name:"jQuery",
url:"http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js",
common:0
//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js
},{
name:"jQuery Cycle",
url:"http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.min.js",
common:0
},{
name:"jQuery Cycle All",
url:"http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.min.js",
common:0
},{
name:"jQuery Cycle Lite",
url:"http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.lite.min.js",
common:0
},{
name:"jQuery Templates",
url:"http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js",
common:0
},{
name:"jQuery Templates Plus",
url:"http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmplPlus.js",
common:0
},{
name:"jQuery UI",
url:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js",
common:1
//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"
},{
name:"jQuery UI i18n",
url:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.js",
common:0
},{
name:"jQuery Validate",
url:"http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js",
common:0
},{
name:"jQuery Validate Adition Methods",
url:"http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/additional-methods.js",
common:0
//ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/additional-methods.js
},{
name:"MooTools",
url:"http://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js",
common:1
},{
name:"Prototype",
url:"http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js",
common:1
},{
name:"script.alculo.us",
url:"http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js",
common:1
},{
name:"SWFObject",
url:"http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js",
common:0
},{
name:"WebFont Loader",
url:"http://ajax.googleapis.com/ajax/libs/webfont/1.0.22/webfont.js",
common:0
},{
name:"YUI CSS Reset",
url:"http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css",
common:0
},{
name:"YUI Library",
url:"http://ajax.googleapis.com/ajax/libs/yui/3.3.0/build/yui/yui-min.js",
common:1
}
]
}
$("a:eq(0)").click(function(){
$("textarea:eq(0)").val(
'<sc' +'ript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></sc'+'ript>\n'
+ $("textarea:eq(0)").val()
);
return false;
});
$.each(cdns.urls,function(index,ent){
if(ent.common==1){
$("<a></a>")
.html(ent.name)
.css("margin-left","3px")
.attr("href",cdns.ref)
.click(function(){
$("textarea:eq(0)").val(
'<sc' +'ript src="'+ent.url+'"></sc'+'ript>\n'
+$("textarea:eq(0)").val()
);
return false;
})
.insertAfter($("a:eq(0)"));
}
});
})();

(function(){
if(typeof(window.localStorage) == 'undefined'){
//console.log("This system does not support localStorage");
}else{
$("textarea:eq(0)").keyup(function(){
localStorage.setItem("lhtml"+JITprojects.name, this.value);
});
$("textarea:eq(1)").keyup(function(){
localStorage.setItem("lcss"+JITprojects.name, this.value);
});
$("textarea:eq(2)").keyup(function(){
localStorage.setItem("ljs"+JITprojects.name, this.value);
});

$("<a></a>").html("Last").css("margin-left","3px")
.attr("href","http://www.cdncatalog.com/")
.click(function(){
$("textarea:eq(0)").val(localStorage.getItem("lhtml"+JITprojects.name));
return false;
})
.insertAfter($("a:contains('Clear')")[0]);
//.insertAfter($("a[text='Clear']:eq(0)"));

$("<a></a>").html("Last").css("margin-left","3px")
.attr("href","http://www.cdncatalog.com/")
.click(function(){
$("textarea:eq(1)").val(localStorage.getItem("lcss"+JITprojects.name));
return false;
})
.insertAfter($("a:contains('Clear')")[1]);
//.insertAfter($("a[text='Clear']:eq(1)"));

$("<a></a>").html("Last").css("margin-left","3px")
.attr("href","http://www.cdncatalog.com/")
.click(function(){
$("textarea:eq(2)").val(localStorage.getItem("ljs"+JITprojects.name));
return false;
})
.insertAfter($("a:contains('Clear')")[2]);
//.insertAfter($("a[text='Clear']:eq(2)"));

$("<a></a>").html("public").css("margin-left","3px")
.attr("href","http://www.cdncatalog.com/")
.click(function(){
var r = prompt("Project Name",JITprojects.name);
if(r){
JITprojects.name=r.replace(/ /g," ").replace(/\s+/g,"_");
$(this).html(JITprojects.name);
}
return false;
})
.insertAfter($("a:contains('Last')")[0]);
//.insertAfter($("a[text='Last']:eq(0)"));
}
})();
function adjustBox(){
var winwidth=$(document).width();
var winheight=$(document).height();
box[0].left = 8;
box[0].top = 40;
box[0].width = winwidth*.45;
box[0].height = winheight*.30 - 25;
box[1].left = winwidth*.50;
box[1].top = 40;
box[1].width = winwidth*.45;
box[1].height = winheight*.30 - 25;
box[2].left = 8;
box[2].top = winheight*.40;
box[2].width = winwidth*.45;
box[2].height = winheight*.50 - 20;
box[3].left = winwidth*.50;
box[3].top = winheight*.40;
box[3].width = winwidth*.45;
box[3].height = winheight*.50 - 20;
_fullwidth=winwidth*.98;
_fullheight=winheight*.82;
};
for(var i=0;i<panesLength;i++){
$(panes[i])
.css("background-color","#123456")
.css("color","white")
.css("padding","3px")
.css("position","absolute")
.css("left",box[i].left)
.css("top",box[i].top);
$(panes[i] +" > textarea:eq(0)").css("width",box[i].width).css("height",box[i].height);
};
$(panes[3]).css("background-color","white").css("color","black");
$(panes[3] +" > iframe:eq(0)").css("width",box[3].width).css("height",box[3].height)
function restore(n){
adjustBox();
$(panes[n]).animate(
{
left:box[n].left,
top:box[n].top
},speed
)
$(panes[n] +" > textarea:eq(0)").animate(
{
width:box[n].width,
height:box[n].height
},
speed,
function(){
adjustBox();
for(var i=0;i<panesLength;i++){
if(i!=n){
$(panes[i])
.css("left",box[i].left)
.css("top",box[i].top)
.show();
$(panes[i] +" > textarea:eq(0)").css("width",box[i].width).css("height",box[i].height);
}
}
$(panes[3] +" > iframe:eq(0)").css("width",box[3].width).css("height",box[3].height);
}
);
lastbox=-1;
}
function transition(n){
adjustBox();
for(var i=0;i<panesLength;i++)
if(i!=n){
$(panes[i]).hide()
.css("left",box[i].left)
.css("top",box[i].top);
$(panes[i] +" > textarea:eq(0)").css("width",box[i].width).css("height",box[i].height);
}
if(lastbox==n){
restore(n);
}else{
lastbox=n;
//$(panes[n] +" > textarea:eq(0)").css("width",box[n].width).css("height",box[n].height);
$(panes[n]).css("display","block");
$(panes[n]).animate(
{
left:8,
top:40
},speed
);
$(panes[n] +" > textarea:eq(0)").animate(
{
width:_fullwidth,
height:_fullheight
},
speed
);
}
}
$("button:eq(0)").click(function(){
transition(0);
});
$("button:eq(1)").click(function(){
transition(1);
});
$("button:eq(2)").click(function(){
transition(2);
});
});
</script>
</body>
</html>

Thanks,