Created
July 18, 2017 12:13
-
-
Save enile8/b399856da949cbb696424e2edf0ad93b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<title>Show off</title> | |
<link href="static/css/bootstrap.css" rel="stylesheet"> | |
<link href="static/css/vertical-tabs.css" rel="stylesheet"> | |
<style> | |
body { | |
padding-top: 70px; | |
} | |
.editor-tabs { | |
padding-right: -70px; | |
margin-right: -70px; | |
} | |
.editor-panes { | |
padding-left: -20px; | |
margin-left: -20px; | |
} | |
.editor-box { | |
min-height: 720px; | |
} | |
.result-view { | |
float: right; | |
margin-bottom: 15px; | |
} | |
iframe{ | |
margin:0; | |
border:1px solid #ccc; | |
min-height: 650px; | |
height: 100% | |
width: 100%; | |
} | |
#shareBtn { position:absolute; bottom:0; left:0; } | |
</style> | |
<!-- testing --> | |
<script type="text/javascript"> | |
function createCookie(name,value,days) { | |
var expires = ""; | |
if (days) { | |
var date = new Date(); | |
date.setTime(date.getTime() + (days*24*60*60*1000)); | |
expires = "; expires=" + date.toUTCString(); | |
} | |
document.cookie = name + "=" + value + expires + "; path=/"; | |
} | |
createCookie('ppkcookie','testcookie',7); | |
</script> | |
</head> | |
<body> | |
<!-- Fixed navbar --> | |
<nav class="navbar navbar-default navbar-fixed-top"> | |
<div class="container"> | |
<div class="navbar-header"> | |
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> | |
<span class="sr-only">Toggle navigation</span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
</button> | |
<a class="navbar-brand" href="#">Project name</a> | |
</div> | |
<div id="navbar" class="navbar-collapse collapse"> | |
<ul class="nav navbar-nav"> | |
<li><a href="#">Home</a></li> | |
<li><a href="#about">About</a></li> | |
<li><a href="#contact">Contact</a></li> | |
</ul> | |
<ul class="nav navbar-nav navbar-right"> | |
<li> | |
<button type="button" class="btn btn-default navbar-btn">Fork <i class="glyphicon glyphicon-edit"></i></button> | |
</li> | |
<li class="dropdown"> | |
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> | |
<ul class="dropdown-menu"> | |
<li><a href="#">Action</a></li> | |
<li><a href="#">Another action</a></li> | |
<li><a href="#">Something else here</a></li> | |
<li role="separator" class="divider"></li> | |
<li class="dropdown-header">Nav header</li> | |
<li><a href="#">Separated link</a></li> | |
<li><a href="#">One more separated link</a></li> | |
</ul> | |
</li> | |
</ul> | |
</div><!--/.nav-collapse --> | |
</div> | |
</nav> | |
<div class="container"> | |
<div class="row"> | |
<div class="row"> | |
<div class="col-md-6"> | |
<div class="col-xs-3 editor-tabs"> <!-- required for floating --> | |
<!-- Nav tabs --> | |
<ul class="nav nav-tabs tabs-left sideways"> | |
<li class="active" id="html-tab"><a href="#html-v" data-toggle="tab">HTML</a></li> | |
<li id="css-tab"><a href="#css-v" data-toggle="tab">CSS</a></li> | |
<li id="js-tab"><a href="#js-v" data-toggle="tab">JavaScript</a></li> | |
<li id="settings-tab"><a href="#settings-v" data-toggle="tab">Settings</a></li> | |
</ul> | |
</div> | |
<div class="col-xs-9 editor-panes"> | |
<!-- Tab panes --> | |
<div class="tab-content"> | |
<div class="tab-pane active" id="html-v"> | |
<div class="editor-box" id="htmlBox"></div> | |
</div> | |
<div class="tab-pane" id="css-v"> | |
<div class="editor-box" id="cssBox"></div> | |
</div> | |
<div class="tab-pane" id="js-v"> | |
<div class="editor-box" id="jsBox"></div> | |
</div> | |
<div class="tab-pane" id="settings-v">Settings Tab.</div> | |
</div> | |
</div> | |
</div> | |
<div class="col-md-6"> | |
<div class="btn-group result-view" role="group" aria-label="..."> | |
<button class="btn btn-primary" data-toggle="modal" data-target="#myModalFullscreen" contenteditable="false">Fullscreen Result</button> | |
<button type="button" class="btn btn-default" title="Love this Fiddle"><i class="glyphicon glyphicon-heart"></i></button> | |
<button type="button" class="btn btn-default" title="Bookmark this"><i class="glyphicon glyphicon-bookmark"></i></button> | |
<div class="btn-group" role="group"> | |
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
More... | |
<span class="caret"></span> | |
</button> | |
<ul class="dropdown-menu"> | |
<li><a href="#">Share</a></li> | |
<li><a href="#">Embed</a></li> | |
</ul> | |
</div> | |
</div> | |
<iframe class="form-control" id="previewBox"></iframe> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="modal fade modal-fullscreen footer-to-bottom" id="myModalFullscreen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | |
<div class="modal-dialog animated zoomInLeft"> | |
<div class="modal-content"> | |
<div class="modal-header"> | |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | |
<h4 class="modal-title">xyz Demo</h4> | |
</div> | |
<div class="modal-body"> | |
<p class="">One fine body…</p> | |
</div> | |
<div class="modal-footer"> | |
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> | |
<button type="button" class="btn btn-primary">Share</button> | |
</div> | |
</div> | |
<!-- /.modal-content --> | |
</div> | |
<!-- /.modal-dialog --> | |
</div> | |
<!-- /.modal --> | |
<script src="static/js/jquery.min.js"></script> | |
<script src="static/js/bootstrap.min.js"></script> | |
<!-- load ace --> | |
<script src="static/js/src-min-noconflict/ace.js"></script> | |
<!-- load ace language tools --> | |
<script src="static/js/src-min-noconflict/ext-language_tools.js"></script> | |
<script> | |
// trigger extension | |
ace.require("ace/ext/language_tools"); | |
var html_editor = ace.edit("htmlBox"); | |
html_editor.session.setMode("ace/mode/html"); | |
html_editor.setTheme("ace/theme/monokai"); | |
// enable autocompletion and snippets | |
html_editor.setOptions({ | |
enableBasicAutocompletion: true, | |
enableSnippets: true, | |
enableLiveAutocompletion: false | |
}); | |
var css_editor = ace.edit("cssBox"); | |
css_editor.session.setMode("ace/mode/css"); | |
css_editor.setTheme("ace/theme/monokai"); | |
// enable autocompletion and snippets | |
css_editor.setOptions({ | |
enableBasicAutocompletion: true, | |
enableSnippets: true, | |
enableLiveAutocompletion: false | |
}); | |
var js_editor = ace.edit("jsBox"); | |
js_editor.session.setMode("ace/mode/javascript"); | |
js_editor.setTheme("ace/theme/monokai"); | |
// enable autocompletion and snippets | |
js_editor.setOptions({ | |
enableBasicAutocompletion: true, | |
enableSnippets: true, | |
enableLiveAutocompletion: false | |
}); | |
$(function() { | |
var html_data = ''; | |
var css_data = ''; | |
var js_data = ''; | |
$( "#htmlBox" ).keyup(function() { | |
html_data = html_editor.getValue(); | |
renderPreview(); | |
}); | |
$( "#cssBox" ).keyup(function() { | |
css_data = css_editor.getValue(); | |
renderPreview(); | |
}); | |
$( "#jsBox" ).keyup(function() { | |
js_data = js_editor.getValue(); | |
renderPreview(); | |
}); | |
function renderPreview(type){ | |
var doc = '<!DOCTYPE html>\n<html>\n<head>\n<meta charset="utf-8" />\n<style>\n'+css_data+'\n</style>\n</head>\n<body>\n'+html_data+'\n<script>\n'+js_data+'\n<\/script>\n<\/body>\n<\/html>'; | |
type == 'f' ? document.body.innerHTML = doc : previewBox.srcdoc = doc; | |
} | |
// load demo into modal | |
$('#myModalFullscreen').on('shown.bs.modal', function(type) { | |
console.log('modal is shown...'); | |
iframe_content = type == 'f' ? document.body.innerHTML : previewBox.srcdoc; | |
$('#myModalFullscreen .modal-body').html( iframe_content ); | |
}); | |
$('#').on('hidden', function() { | |
console.log('hidden'); | |
//$('.custom-modal').remove(); | |
}); | |
$('[data-toggle="tooltip"]').tooltip(); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment