JSBOTCONFIG

JSBOTCONFIG

by zerrax

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="canvas">
    <svg id='connector_canvas'></svg>
    <div id="rsi" class="ui-item rsi">
        <a>Rsi</a>
        <div class="con_anchor"></div>
        <div class="module_content" style="">
            <div class="center">
                <div id="selector">
                    <label>
                        Length :
                        <select id="country" name="type">
                            <option value="7">7</option>
                            <option value="14">14</option>
                            <option value="28">28</option>
                        </select>
                    </label>
                </div>
                <label>
                    <a>custom Up</a>
                    <input class="input" placeholder="lenght" value="custom price" type="checkbox">
                    <div id="myInput">
                        <input class="input " placeholder="75.1" type="text">
                    </div>
                </label>
                <label>
                    <a>custom Low</a>
                    <input class="input" placeholder="lenght" value="custom price" type="checkbox">
                    <div id="myInput">
                        <input class="input " placeholder="30.1" type="text">
                    </div>
                </label>
            </div>
        </div>
    </div>
    <div class="ui-item ma" id="ma">
        <a>MA</a>
        <div class="con_anchor"></div>
        <div class="module_content" style="">
            <div class="center">
                <div id="selector">
                    <select id="country" name="type">
                        <option value="lower">Now MA > price</option>
                        <option value="biger">Now MA
           ...

CSS

html,body{width:100%;height:100%;background:#666}
html,body{margin:0px;padding:0px;}

#ui-browser,#canvas,#property-browser{
  height:100%;
  display:inline-block;
  box-sizing:border-box;
  position:relative;
}

#ui-browser{
  width:20%;
  background-color:#eee;
  float: left;
  overflow:hidden;
}

#canvas{
  width:calc(100% - 200px);
  right: 2;
}
/*Anchor CSS*/
.anchor{
  opacity:0.5;
  width: 10px;
  height: 100%;
  background-color: #0ebeff;
  position: absolute;
  transition: width ease-in-out 0.2s;
}

#ui-browser:hover > .anchor, #property-browser:hover > .anchor{
  background-color: #ffbe00;
  width: 10px;
  opacity:1;
}

#ui-browser .anchor{
  right:0px;
}

.ui-item{
  max-width: 25em;
  min-width: 20em;
  max-height:500px;
  min-height:50px;
  background-color:#eef;
  top:-2px;
  left:-2px;
  background:#222;
  border: solid #111 2px;
  color:#fff;
  margin:3px;
  border-radius: 5px;
  display:none;
  position:absolute
}
.ui-item > a{
  position: relative;
width: 100%;
text-align: center;
font-size: 22px;
line-height: 50px;
display: block;
background:#426D92;
}
.ui-item .module_content > div > div > label{
  text-align: center;
    line-height: 33px;
}
.con_anchor{
    width: 12px;
    height: 12px;
    position:absolute;!important;
    left:10px;!important;
    top:20px;!important;
    background-color: #47cf73;
    border-radius: 50%;
}

#connector_canvas{
  position:absolute;
  width:100%;
  height:100%;
  stroke:#5c96bc;
  stroke-width:2
}

.library{
  border-left:10px solid #5c96bc;
  background-color:white;
  color:#0ebeff;
  padding-bottom: 1px;
}

.library ul{
  list-style-type:none;
}

.library .name-title{
  text-align:center;
  padding-top:5px;
}

.library ul li{
  border-bottom:1px solid #eee;
  margin-right:20px;
  color:#4c4545;
  padding: 5px;
  margin-left: 15px;
  cursor: pointer;
  transition: all ease-out 0.1s; 
}

.library ul li:hover{
  background-color:#4c4545;
  color:white;
  text-align:center;
 ...

JavaScript

var config = [];
 ! function(a) {
   function f(a, b) {
     if (!(a.originalEvent.touches.length > 1)) {
       a.preventDefault();
       var c = a.originalEvent.changedTouches[0],
         d = document.createEvent("MouseEvents");
       d.initMouseEvent(b, !0, !0, window, 1, c.screenX, c.screenY, c.clientX, c.clientY, !1, !1, !1, !1, 0, null), a.target.dispatchEvent(d)
     }
   }
   if (a.support.touch = "ontouchend" in document, a.support.touch) {
     var e, b = a.ui.mouse.prototype,
       c = b._mouseInit,
       d = b._mouseDestroy;
     b._touchStart = function(a) {
       var b = this;
       !e && b._mouseCapture(a.originalEvent.changedTouches[0]) && (e = !0, b._touchMoved = !1, f(a, "mouseover"), f(a, "mousemove"), f(a, "mousedown"))
     }, b._touchMove = function(a) {
       e && (this._touchMoved = !0, f(a, "mousemove"))
     }, b._touchEnd = function(a) {
       e && (f(a, "mouseup"), f(a, "mouseout"), this._touchMoved || f(a, "click"), e = !1)
     }, b._mouseInit = function() {
       var b = this;
       b.element.bind({
         touchstart: a.proxy(b, "_touchStart"),
         touchmove: a.proxy(b, "_touchMove"),
         touchend: a.proxy(b, "_touchEnd")
       }), c.call(b)
     }, b._mouseDestroy = function() {
       var b = this;
       b.element.unbind({
         touchstart: a.proxy(b, "_touchStart"),
         touchmove: a.proxy(b, "_touchMove"),
         touchend: a.proxy(b, "_touchEnd")
       }), d.call(b)
     }
   }
 }(jQuery);



 $('.anchor').on('click', function() {
   var width = parseInt($(this).parent().css('width'));
   if (width == 10) {
     $(this).parent().css('width', '20%');
     $('#canvas').css('width', '60%');
   } else {
     $(this).parent().css('width', '10px');
     $('#canvas').css('width', 'calc( 80% - 10px)');
   }
 });

 $('.ui-item').draggable({
   containment: "#canvas",
   drag: function(event, ui) {
     var lines = $(this).data('lines');
     var con_item = $(this).data('connected-item');
     var...