Add new Overlay

Mock-up for Onload Messages UI

by Hugo Carneiro

HTML

<div class="container">
    <div class="col-xs-6 col-xs-offset-3">
        <button class="add-new btn btn-default">Add new overlay</button>
        <div class="form-group">
            <label for="selectBox">Select an overlay</label>
            <select id="selectBox" class="overlays form-control">
                <option>My first overlay</option>
                <option>My second overlay</option>
                <option>My third overlay</option>
            </select>
        </div>
    </div>
</div>

<script type="text/html" id="overlayNameInput">
    <div class="popUp">
        <div class="screenOverlay"></div>
        <div id="popup" class="col-xs-6 col-xs-offset-3">
            <div class="form-group">
              <label for="overlay-name">Enter an overlay name</label>
              <input type="text" id="overlay-name" class="form-control" placeholder="Enter an overlay name">
            </div>
            <button class="cancel btn btn-danger">Cancel</button>
            <button class="save-name btn btn-primary">Save</button>
        </div>
    </div>
</script>

CSS

.container {
    margin-top: 30px;
}

.add-new {
    margin-bottom: 20px;
}

.screenOverlay {
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#popup {
    position: absolute;
    padding: 20px;
    background-color: #FFF;
    border-radius: 6px;
    top: 20%;
}

JavaScript

$('.add-new').on('click', function () {
    var overlayContent = $('#overlayNameInput').html();
    $('.container').append(overlayContent);
    setEventListeners();
});

function setEventListeners() {
    
    $('.cancel').one('click', function () {
        $('.popUp').remove();
    });
    
    $('.save-name').one('click', function () {
        var overlayName = $('#overlay-name').val();
        
        var option = $('<option/>');
        option.attr({ 'value': 'myValue' }).text(overlayName);
        $('.overlays').append(option);
        
        $('.popUp').remove();
    });
    
}