Value Chain Element Menu Action

Shows how the menu is called from an element options icon.

by Erik Bartlow

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic%27"></script>
<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">
<h3 style="width: 100%;">Base Item Element</h3>

<div style="width: 200px;">
    <div id="optElement1" class="vc-flex vc-flex-right vc-element vc-color-base-border">
        <div class="vc-element-title">Item Title</div>
        <div class="vc-flex-vertical vc-center vc-element-options">
            <div id="optElement1" class="vc-icons vc-icon-options"></div>
        </div>
    </div>
</div>

JavaScript

$(function () {
    var templates = {
        contextMenu: function () {
            var ctx = $('<div />', {
                class: 'vc-element-menu',
                id: 'ctxMenu'
            });
            var ctxMenuHtml = [
                '    <div class="vc-menu-header">Item Options</div>',
                '    <ul class="vc-menu-items">',
                '        <li class="vc-flex">',
                '            <div class="vc-icons-18 vc-icon-delete-18"></div><span>Delete</span>',
                '        </li>',
                '        <li class="vc-flex">',
                '            <div class="vc-icons-18 vc-icon-reoccurring-18"></div><span>Set as Reoccurring</span>',
                '        </li>',
                '        <li class="vc-flex vc-menu-item-sep">',
                '            <div class="vc-icons-18 vc-icon-blank-18"></div><span></span>',
                '        </li>',
                '        <li class="vc-flex">',
                '            <div class="vc-icons-18 vc-icon-start-group-18"></div><span>Start Item Group</span>',
                '        </li>',
                '        <li class="vc-flex">',
                '            <div class="vc-icons-18 vc-icon-end-group-18"></div><span>End Item Group</span>',
                '        </li>',
                '        <li class="vc-flex vc-menu-item-sep">',
                '            <div class="vc-icons-18 vc-icon-blank-18"></div><span></span>',
                '        </li>',
                '        <li class="vc-flex">',
                '            <div class="vc-icons-18 vc-icon-add-right-18"></div><span>Insert Right</span>',
                '        </li>',
                '        <li class="vc-flex">',
                '            <div class="vc-icons-18 vc-icon-add-left-18"></div><span>Insert Left</span>',
                '        </li>',
                '    </ul>'].join('\r\n');
            ctx.append(ctxMenuHtml);
            return ctx;
        }
   ...