JSFiddle - React, Tailwind, and code Playground
Bootstrap 3 Jquery Yakabox
by DugSohn
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/137de011e0fc2440ce11c99272733d49.css?yakabox-vne-5.17.8-1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sidr/2.2.1/jquery.sidr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sidr/2.2.1/stylesheets/jquery.sidr.light.min.css">
<body class="ui-app ui-global-nav ui-app-inverse ui-app-dash ui-workflow-manager" ui-app-id="39" role="application">
<div id="ybx-broadcast" style="border: medium none;" class="ui-dialog-content ui-widget-content"></div>
<div id="ybx-panel" style="display: none;" class="ui-yakabox-panel ui-bootstrap">
<div class="ui-yakabox-panel-trigger"><a class="ybx-panel-trigger btn btn-primary"><i class="fa fa-fw fa-2x fa-chevron-left"></i></a></div>
<div class="ybx-panel-panewrapper ui-yakabox-panel-panewrapper ui-background-flat ui-border-none">
<div class="ybx-panel-contentpane ui-yakabox-panel-content ui-helper-clearfix">
<div class="ybx-panel-navpane ui-buttonset-navpane btn-group"><button class="ybx-panel-navback ui-corner-all btn btn-link" title="Back"><i class="fa fa-arrow-right fa-rotate-180 fa-fw"></i></button><button class="ybx-panel-navforward ui-corner-right ui-corner-all btn btn-link" title="Forward"><i class="fa fa-arrow-right fa-fw"></i></button></div>
</div>
</div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-top no-border-radius" id="main_navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button"...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
$('input#checkBoxLayout').on('change', function() {
$('.ui-builder > div.row').toggleClass('ui-builder-has-layout');
});
$('.ui-proto-new-iftty').click(function() {
$('.ui-proto-sidr-content-default').toggle();
$('.ui-proto-sidr-content-iftty').toggle();
});
$('.simple-menu').sidr({
displace: false
});
$('.closeSidr').click(function() {
resetUI();
});
$('.ui-condition-carosel').click(function() {
alert('cycle through is, is not, is any, is set...')
});
$('.ui-proto-btn-add-condition').click(function() {
$('.ui-proto-add-condition-conf').toggle();
});
$('.ui-dash-widget-tools').mouseenter(function() {
var $thisSlideout = $(this);
var $thisMenu = $thisSlideout.find('.ui-dash-widget-menu');
$(this).data('timeout', setTimeout(function() {
$thisSlideout.addClass('hover');
$('#ybx-proto-row-options').clone().appendTo($thisMenu).css('display', 'block');
$('.ui-dash-widget-tools .btn-link').click(function() {
$.sidr('open', 'sidr');
var $btnClicked = $(this).attr('data-attr');
var $CellClicked = $(this).closest('.col-xs-12').find('label').text();
var newStr = $CellClicked.substring(0, $CellClicked.length-1);
var $menuShow = $('.' + $btnClicked)
$('#sidr .sub').hide();
$menuShow.show();
var $fieldType = $(this).closest('.col-xs-12').find('label').attr('data-type');
var $configShow = $('.' + $fieldType)
console.log(newStr);
$("#fieldPicker_mew").val(newStr);
$('#sidr .field_type').hide();
$configShow.show();
});
}, 300));
})
.mouseleave(function() {
$(this).removeClass('hover');
$(this).find('#ybx-proto-row-options').remove();
clearTimeout($(this).data('timeout'));
});
$('body').keypress(function(e) {
if (e.which == 27) {
$.sidr('close', 'sidr');
}
});
$('#fieldPicker_mew').on('change', function() {
var $fieldType = ...