Skip to content

Instantly share code, notes, and snippets.

@enile8

enile8/demo.html

Created July 18, 2017 12:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save enile8/b399856da949cbb696424e2edf0ad93b to your computer and use it in GitHub Desktop.
Save enile8/b399856da949cbb696424e2edf0ad93b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
demo.html
<!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