jsql-devel
Version:
A development & debugging plugin for jsql-official.
111 lines (102 loc) • 4.53 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jSQL Devel Toolbar Button Demo</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>Create Custom jSQL Devel Toolbar Button</h1>
<div id=step1>
<h3>Step 1 - Choose your preferences</h3>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-tint"></span></span>
<input type="text" value=lightblue id=bg class="form-control" placeholder="Background">
</div>
<small><i>A value to be applied to the css <code>background</code> property.</i></small><br><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-picture"></span></span>
<input type="text" class="form-control" id=hi placeholder="Header Image">
</div>
<small><i>An Image URL for the header or <code>false</code> to omit the image. Leave blank to use the default image.</i></small><br><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-picture"></span></span>
<input type="text" class="form-control" id=li placeholder="Loader Image">
</div>
<small><i>An Image URL for the loading screen or <code>false</code> to omit the image. Leave blank to use the default image.</i></small><br><br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-camera"></span></span>
<select class="form-control" id="theme">
<option>base</option>
<option>black-tie</option>
<option>blitzer</option>
<option>cupertino</option>
<option>dark-hive</option>
<option>dot-luv</option>
<option>eggplant</option>
<option>excite-bike</option>
<option>flick hot-sneaks</option>
<option>humanity</option>
<option>le-frog</option>
<option>mint-choc</option>
<option>overcast</option>
<option>pepper-grinder</option>
<option>redmond</option>
<option>smoothness</option>
<option>south-street</option>
<option>start</option>
<option>sunny</option>
<option>swanky-purse</option>
<option>trontastic</option>
<option>ui-darkness</option>
<option>ui-lightness vader</option>
</select>
</div>
<small><i>A jQuery UI theme to use.</i></small><br><br>
<hr>
<button class="btn btn-primary" id="continue">Continue...</button>
</div>
<div id="step2" style="display:none">
<h3>Step 2 - Bookmark It</h3>
<p>Click it to preview your preferences, then drag the button to your browser bookmarks toolbar and press it on any page!</p>
<a href="#JSQLDEVELBTN#" class="btn btn-lg btn-success" id="btn">jSQL Devel</a>
<hr>
<button class="btn btn-primary" id="back">Back to Preferences...</button>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$("#continue").click(function(){
var opts = {};
if($("#bg").val().trim() !== "") opts.bg = $("#bg").val().trim();
if($("#hi").val().trim() !== "") opts.header_img = $("#hi").val().trim();
if(opts.header_img && opts.header_img === "false") opts.header_img = false;
if($("#li").val().trim() !== "") opts.loader_img = $("#li").val().trim();
if(opts.loader_img && opts.loader_img === "false") opts.loader_img = false;
opts.theme = $("#theme").find("option:selected").text();
var uri = "#JSQLDEVELBTN#";
$("#btn").prop("href", uri.replace(/jSQL.devel.open()/g, "jSQL.devel.open("+encodeURIComponent(JSON.stringify(opts))+")"));
$("#step1").slideUp("fast", function(){
$("#step2").slideDown("fast")
});
});
$("#back").click(function(){
$("#step2").slideUp("fast", function(){
$("#step1").slideDown("fast")
});
});
</script>
</body>
</html>