Toolbar example

by SebastianPataneMasuelli

HTML

<link rel="stylesheet" href="https://amp.admarketplace.com/frontend_common/js/jquery/themes/custom/default/jquery-ui-1.8.13.custom.css">
<link rel="stylesheet" href="https://amp.admarketplace.com/direct_advertiser/css/daui-fluid.css">
<ul class="toolbar">
    <li class="primary hasSecondary toolbarIcon iconPlus">
        Add/Edit Keywords
        <ul id="addKeywords">
            <li>
                Which Campaign is the Ad Group on?
                <br />
                <select>
                    <option value="0">Select Campaign</option>
                    <option>Campaign 1</option>
                    <option>Campaign 2</option>
                    <option>Campaign 3</option>
                </select>    
            </li>
            <li style="display: none">
                Which Ad group?
                <br />
                <select>
                    <option value="0">Select Ad Group</option>
                    <option>Ad Group 1</option>
                    <option>Ad Group 2</option>
                    <option>Ad Group 3</option>
                </select>        
            </li>
            <li style="display: none">
                <a href="#">go</a>
            </li>
        </ul>
    </li>
    <li class="primary hasSecondary toolbarIcon iconPlus">
        Traffic Sources
        <ul id="trafficSources">
            <li>
                Traffic Sources for which Campaign?
                <br />
                <select>
                    <option value="0">Select Campaign</option>
                    <option>Campaign 1</option>
                    <option>Campaign 2</option>
                    <option>Campaign 3</option>
                </select>    
            </li>
            <li style="display: none">
                <a href="#">go</a>
            </li>
        </ul>
    </li>
    <li class="primary hasSecondary toolbarIcon iconExpand" >
        Bulk Actions
        <ul>
            <li class="toolbarIcon iconUpload">
             ...

CSS

.instructions, .success { width: 300px; cursor: default; white-space: normal}
.toolbar ul li:hover {color: #333333}


.toolbar li.toolbarIcon.iconCheck:before {
    background-position: 0 -100px;
}

.toolbar hr {
    border: none;
    height: 1px;
    background-color: #ADB7BF;
}
input {width: 290px;}

.clonedCampaignName, .clonedCampaignTargeting {
    font-weight: bold;
}

JavaScript

$('.toolbar .primary').bind('click', function(event) {
    var target = $(event.target);

    //add and remove active class, expand and collapse submenus
    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
        if ($(this).hasClass('hasSecondary')) {
            $(this).find('ul ').slideUp(250);
        }
    } else {
        if ($('.toolbar li.active').hasClass('hasSecondary')) {
            $('.toolbar li.active').find('ul ').slideUp(250);
        }
        $('.toolbar').find('.active').removeClass('active');
        $(this).addClass('active ');

        if ($(this).hasClass('hasSecondary')) {
            $(this).find('ul ').slideDown(250);
        }
    }
});


//prevent clicks execiting on submenus
$('.toolbar ul').click(function() {
    return false;
});

$('#addKeywords select, #trafficSources select, #cloneCampaign select').change(function() {
    var value = $(this).find('option:selected').val();
    if (value === '0') {
        if ($(this).hasClass('selected')) {
            $(this).closest('li').nextAll('li').slideUp(50);
        }
        return;
    }
    if ($(this).hasClass('selected')) {
        $(this).closest('li').nextAll('li').slideUp(50);
    }
    
    $(this).closest('select').addClass('selected');
    $(this).closest('li').next().slideDown(250);
    
    
    //remember the chosen Campaign to populate the input vox.
    if ($(this).hasClass('rememberCampaignName')){
       var campaignName = $(this).find('option:selected').text() + ' - copy ';
       $('.inputCampaignName').val(campaignName);
    }

});

$('#cloneCampaignBtn').click(function() {
    var that = $(this);
    var targetingType = $('.rememberTargeting').find('option:selected').text();
    var campaignName = $('.inputCampaignName').val();
    $(this).closest('ul').find('.clonedCampaignTargeting').text(targetingType);
    $(this).closest('ul').find('.clonedCampaignName').text(campaignName);
    $(this).parent().siblings().slideUp(50);
   ...