JSFiddle - React, Tailwind, and code Playground
Fake Task Form Editor
by DugSohn
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.2/gridstack.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.2/gridstack.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sidr/2.2.1/stylesheets/jquery.sidr.light.min.css">
<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/1.1.1/ElementQueries.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/1.1.1/ResizeSensor.js"></script>
<div id="sidr" class="sidr left " style="transition: left 0.2s ease 0s; left: 0px;">
<h2 style="padding:10px"><button class="btn btn-primary" title="Field Options"><i class="fa fa-wrench fa-2x"></i></button> <button class="btn btn-link"title="set IFFTY"> <i class="fa fa-gears fa-2x"></i></button> <button class="btn btn-link" title="View Options"> <i class="fa fa-eye fa-2x"></i></button></h2>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<br/>
<div><b> Text Field Options</b></div>
<div><br/>
<b>Label:</b>
</div>
<br/>
<small><ul>
<li><input type="checkbox"> Hide Label</li>
<li><input type="checkbox"> Placeholder
<div>
<input type="text" class="form-control">
</div></li>
<li><input type="checkbox"> Enable...SCSS
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700);
.ui-yakaimage {
display: inline-block;
background-color: rgba(0,0,0,.2);
box-shadow: inset 0 0 2px rgba(0,0,0,.6);
}
.addCondition {
font-size: 10px;
text-align: center;
margin: 0 auot;
margin-left: -17px;
margin-top: -10px;
opacity: .4;
margin-bottom: 20px;
display: block;
}
.ui-builder {
.form-group {
border-top: none;
}
.form-group:hover {
background: transparent;
}
.row > div[class^="col-"] {
background-color: #fff;
border: 1px solid #fff;
padding: 15px 0;
text-align:left;
flex:1 0 0 ;
min-height:40px
}
.row.ui-builder-has-layout > div[class^="col-"] {
box-shadow: inset 15px 0 0 #f5f5f5, inset -15px 0 0 #f5f5f5, inset 0 15px 0 #f5f5f5, inset 0 -15px 0 #f5f5f5;
background-color: #fff;
border: 1px solid #eee;
padding: 15px 0;
text-align:left;
flex:1 0 0 ;
min-height:40px
}
.row > div[class^="col-"] > .row {
margin: -15px 0;
}
.row {
display:flex;
flex-direction:row;
}
}
.ui-yakabox-dash-button-wrapper {
display: none;
}
.ui-builder-has-layout .ui-yakabox-dash-button-wrapper {
display:block;
text-align: center;
width: 100%;
position: absolute;
left: 47.5%;
z-index: 498;
height: 1px;
bottom: 8px;
}
.ui-yakabox-dash-button-wrapper button {
background-color: transparent;
border:none;
margin-right: -1px;
color: #999;
float: none;
}
.btn-default:hover, .btn-default:hover .fa {
color:#000;
}
.ui-dash-widget-tools {
right: 4px;
top: 35%;
height: 40px;
width: 13px;
position: absolute;
z-index: 3000;
.ui-dash-widget-menu {
display:none;
top: 0;
height: 100%;
}
}
.ui-dash-widget-tools.hover, .ui-dash-widget-tools:focus {
right: 0;
top: 0;
height: 100%;
width: 320px;;
position: absolute;
z-index: 3000;
background-color:...JavaScript
var options = {
cell_height: 80,
vertical_margin: 10
};
$('.grid-stack').gridstack(options);
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
$('#first_widget').click(function() {
var el = $.parseHTML("<div><div class=\"grid-stack-item-content\"/><div class=\"row grid-stack-item-content ui-selected \"><div class=\"form-group clearfix\"><label class=\"control-label col-xs-12 col-sm-3\" contenteditable=\"true\">Label</label><div class=\"col-xs-12 col-sm-9 control-wrapper\"><input type=\"text\" class=\"form-control\"><div class=\"ui-field-type\">Text Field</div><div class=\"help-block\" contenteditable=\"true\" style=\"display:none\">Click to add helpful instructions</div> </div></div> <div/></div>");
var grids = $('.grid-stack').data('gridstack');
$('.grid-stack-item-content').removeClass('ui-selected');
grids.add_widget(el, 1, 1, 6, 1, true);
$('.control-label').click(
function() {
var $this = $(this),
$parent = $this.closest('.form-group'),
$sibling = $parent.find('.control-wrapper');
$this.focus( function() {
document.execCommand('selectAll',false,null);
});
//$this.focus();
grids.movable('.grid-stack-item', false);
grids.resizable('.grid-stack-item', false);
$this.focus();
$this.resizable({
handles: "e"
});
$($this).resize(function(){
$($sibling).width($($parent).width()-$($this).width()-75);
});
$this.blur( function(){
//$this.resizable( "destroy" );
grids.movable('.grid-stack-item', true);
grids.resizable('.grid-stack-item', true);
});
});
$('.help-block').click(
function() {
var $this = $(this);
$this.focus().text('');
grids.movable('.grid-stack-item', false);
grids.resizable('.grid-stack-item', false);
$this.blur( function(){
grids.movable('.grid-stack-item', true);
grids.resizable('.grid-stack-item', true);
});
});
$('.ui-field-type').click(...