Value Chain Row Element

by Erik Bartlow

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic&#39;"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-clear.css">
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-viewer.css">
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-theme-main.css">
<div class="vc-row-container">
    <div class="vc-row vc-color-base-border resizable">
        <div class="vc-header vc-vertical-first vc-color-top-header">
            <div class="vc-title vc-rotate">Title</div>
        </div>
            <div class="vc-flex vc-element-group vc-row-content-b"></div>
        <div class='vc-add-row vc-color-base-border'>
             <h2>+</h2>

        </div>
    </div>
    <div class="vc-row vc-color-base-border">
        <div class="vc-header vc-color-area-header">
            <div class="vc-title vc-rotate">Title</div>
        </div>
        <div class="vc-flex vc-element-group vc-row-content-b"></div>
        <div class='vc-add-row vc-color-base-border'>
             <h2>+</h2>

        </div>
    </div>
    <div class="vc-row vc-color-base-border">
        <div class="vc-header vc-color-area-header">
            <div class="vc-title vc-rotate">Title</div>
        </div>
        <div class="vc-flex vc-element-group vc-row-content-b"></div>
        <div class='vc-add-row vc-color-base-border'>
             <h2>+</h2>

        </div>
    </div>
    <div class="vc-row vc-color-base-border">
        <div class="vc-header vc-vertical-last vc-color-topic-header">
            <div class="vc-title vc-rotate">Title</div>
        </div>
        <div class="vc-flex vc-element-group vc-row-content-b"></div>
        <div class='vc-add-row vc-color-base-border'>
            ...

CSS

.vc-right {
    justify-content: flex-end;
    align-items: center;
}
.vc-element-group > div:last-child .vc-options {
    border-top-right-radius: 10px !Important;
    border-bottom-right-radius: 10px !Important;
}
.vc-ItemTitle {
    background-color: transperant;
    text-align: center;
    width: 100%;
    font-size: 1.4em;
    font-weight: normal;
}
.vc-options {
    flex-direction: column;
    min-width: 32px;
    max-width: 32px;
    width: 32px;
    height: 80px;
    background-color: #EEEEEE;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: move;
}
.vc-item-span:last-child {
    border-left: solid 2px #1435AD;
}
.vc-item-span:first-child {
    border-left: solid 2px #1435AD;
    left:-2px;
}
.vc-icons {
    background-image: url(http://thebartlows.com/scripts/iconsprite/sprites.png);
    cursor: pointer;
    width: 36px;
    height: 36px;
}
.vc-icons-18 {
    background-image: url(http://thebartlows.com/scripts/iconsprite/sprites18.png);
    cursor: pointer;
    width: 18px;
    height: 18px;
}
.vc-icon-reoccurring {
    background-position: -10px -9px;
}
.vc-icon-options {
    background-position: -1566px 0px;
}
.vc-icon-options-18 {
    background-position: -1810px 0px;
}
.vc-color-base-border {
    border-color: #888888;
}
.vc-color-base-header {
    background-color:#1435AD;
}
.vc-color-top-header {
    background-color:#FFD473;
}
.vc-color-top-header .vc-title {
    color: #A67300 !important;
}
.vc-color-area-header {
    background-color:#A67300;
}
.vc-color-topic-header {
    background-color: #206676;
}
.vc-color-topic-header .vc-title {
    color: #FFFFFF;
}
.vc-action-glow {
    z-index:1000;
    cursor: pointer;
    -webkit-box-shadow: 0px 5px 10px 2px rgba(166, 166, 166, 1);
    -moz-box-shadow: 0px 5px 10px 2px rgba(166, 166, 166, 1);
    box-shadow: 0px 5px 10px 2px rgba(166, 166, 166, 1);
}
.vc-action-text-glow {
    cursor: pointer;
    text-shadow: 0px 0px 25px rgba(0, 0, 0, 0.76);
    -webkit-filter:...

JavaScript

$('.vc-add-row').hover(function (e) {
    $(this).parent().addClass('vc-action-glow');
    $(this).addClass('vc-action-glow');
}, function (e) {
    $(this).parent().removeClass('vc-action-glow');
    $(this).removeClass('vc-action-glow');
});

$('.vc-ItemTitle').hover(function (e) {
    $(this).addClass('vc-action-text-glow');
}, function (e) {
    $(this).removeClass('vc-action-text-glow');
});
$('.vc-item-span-clear').hover(function (e) {
    showSpanOption(e);
}, function (e) {

});

$('.resizable').resizable({
    handles: 'e,w',
    grid: 5,
    alsoResize: '.resizable'
});

$('.vc-element-group').sortable({
    connectWith: ".vc-element-group",
    handle: ".vc-options",
    tolerance: "pointer",
    cursor: "move"
});

$('.vc-row-container').sortable({
    connectWith: ".vc-row-container",
    tolerance: "pointer",
    cursor: "move"
});

// Add span event capture.
function showSpanOption(e) {
    var item = $(e.target);
    $(item).hover(function (e) {
        $(this).addClass('vc-item-span');
    }, function (e) {
        $(this).removeClass('vc-item-span');
    });
}