<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Popup List Group with Hidden Sub-menu</h2>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#companyPositionModal">
Open popup
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="companyPositionModal" tabindex="-1" role="dialog" aria-labelledby="companyPositionLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="companyPositionLabel">Company positions</h4>
</div>
<div class="modal-body">
<div class="hidden" id="companyPosEditTemplate">
<form role="form">
<div class="">
<input type="hidden" name="position_id" class="hidden" value="">
<div class="input-group input-group-option col-xs-12">
<input type="text" name="position_label" class="form-control companyPosInput" value="">
<span class="input-group-btn companyPosButtonsEdit">
<button class="btn btn-primary companyPosEditSaveBtn" data-loading-text="Saving..." type="button"><span class="glyphicon glyphicon-ok"></span></button>
<button class="btn btn-default companyPosEditCancelBtn" type="button" data-toggle="tooltip" data-placement="top" title="Cancel" >
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<ul class="list-group companyPosItemsList">
<li class="list-group-item" data-position-id="123">
<div class="companyPosItem">
<span class="companyPosLabel">Vet Appointment!</span>
<ul class="list-group-submenu">
<li class="list-group-submenu-item">
<button type="button" class="btn btn-default no-border" data-toggle="tooltip" data-placement="top" title="Remove">
<span class="glyphicon glyphicon-remove"></span>
</button>
</li>
</ul>
</div>
</li>
<li class="list-group-item" data-position-id="345">
<div class="companyPosItem">
<span class="companyPosLabel">Complete Project</span>
<ul class="list-group-submenu">
<li class="list-group-submenu-item">
<button type="button" class="btn btn-default no-border" data-toggle="tooltip" data-placement="top" title="Remove">
<span class="glyphicon glyphicon-remove"></span>
</button>
</li>
</ul>
</div>
</li>
<li class="list-group-item" data-position-id="87">
<div class="companyPosItem">
<span class="companyPosLabel">Celebrate</span>
<ul class="list-group-submenu">
<li class="list-group-submenu-item">
<button type="button" class="btn btn-default no-border" data-toggle="tooltip" data-placement="top" title="Remove">
<span class="glyphicon glyphicon-remove"></span>
</button>
</li>
</ul>
</div>
</li>
</ul>
<div class="form-group form-group-options">
<div class="input-group input-group-option col-xs-12">
<input type="text" name="position_label" class="form-control companyPosInputNew" placeholder="New">
<span class="input-group-btn companyPosButtonsNew hidden">
<button class="btn btn-primary companyPosSaveBtn" data-loading-text="Saving..." type="button"><span class="glyphicon glyphicon-ok"></span></button>
<button class="btn btn-default companyPosCancelBtn" type="button"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
</div>
.list-group {
overflow: hidden;
}
.list-group-item:first-child, .list-group-item:last-child {
overflow: hidden;
}
.list-group-submenu {
position: absolute;
top: 3px;
right: 3px;
white-space: nowrap;
list-style: none;
padding-left: 0px;
}
.list-group-submenu .list-group-submenu-item {
float: right;
white-space: nowrap;
display: block;
padding: 0;
margin-bottom: -1px;
}
.no-border {
border: none;
}
/*
Text fields
*/
div.input-group-option:last-child span.input-group-addon-remove{
/*display: none;*/
}
div.input-group-option:last-child input.form-control{
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
div.input-group-option{
margin-bottom: 3px;
}
$(function () {
var formTemplate = $('#companyPosEditTemplate');
$(document).on('click', '#companyPositionModal', function(e) {
cleanAddNewCompanyPosForm(e, $(this));
});
function closeAllOpenedForms() {
$('ul.companyPosItemsList').find('form').each(function() {
$(this).closest('li.list-group-item').find('.companyPosItem').removeClass('hidden');
$(this).remove();
});
}
function stopCompanyPositionEdition(event, element) {
var listItem = $(element).closest('li.list-group-item');
listItem.find('form').remove();
listItem.find('.companyPosItem').removeClass('hidden');
}
function cleanAddNewCompanyPosForm(event, element) {
$(element).find('.companyPosButtonsNew').addClass('hidden');
$(element).find('.companyPosInputNew').val('');
}
$(document).on('click', '.companyPosLabel', function(event) {
closeAllOpenedForms();
var listItem = $(this).closest('li.list-group-item');
var companyPosItem = listItem.find('.companyPosItem');
var label = $(this).html();
var id = listItem.data('positionId');
var form = formTemplate.find('form').clone();
form.find('input[name=position_id]').val(id);
form.find('input[name=position_label]').val(label);
companyPosItem.addClass('hidden');
listItem.append(form).find('input[name=position_label]').focus();
});
function saveEditedCompanyPos(event, element) {
var listItem = $(element).parents('li.list-group-item');
var btn = $(listItem).find('.companyPosEditSaveBtn');
var cancelBtn = $(listItem).find('.companyPosEditCancelBtn');
var inputField = $(listItem).find('.companyPosInput');
var value = inputField.val();
if (value) {
cancelBtn.addClass('hidden');
btn.button('loading');
// todo: replace with AJAX
setTimeout(function(){
listItem.html(
'<div class="companyPosItem">' +
'<span class="companyPosLabel">' + value + '</span>' +
'<ul class="list-group-submenu">' +
'<li class="list-group-submenu-item">' +
'<button type="button" class="btn btn-default no-border" data-toggle="tooltip" data-placement="top" title="Remove">' +
'<span class="glyphicon glyphicon-remove"></span>' +
'</button>' +
'</li>' +
'</ul>' +
'</div>'
);
}, 1500);
}
}
$(document).on('click', '.companyPosEditSaveBtn', function (e) {
console.log('clicked');
e.stopPropagation();
saveEditedCompanyPos(e, $(this));
});
$(document).on('keypress', '.companyPosInput', function (e) {
if (e.which === 13) {
e.stopPropagation();
e.preventDefault();
saveEditedCompanyPos(e, $(this));
}
});
$(document).on('click', '.companyPosEditCancelBtn', function(e) {
stopCompanyPositionEdition(e, $(this));
});
$(document).on('click', '.companyPosEditCancelBtn', stopCompanyPositionEdition);
$(document).on('focus', '.companyPosInputNew', function() {
var buttonsBar = $(this).parents('div').find('.companyPosButtonsNew');
buttonsBar.removeClass('hidden');
});
$(document).on('click', '.companyPosCancelBtn', function (e) {
cleanAddNewCompanyPosForm(e, $(this));
});
function saveNewCompanyPos(event, btn, inputField) {
var cancelBtn = $('.companyPosCancelBtn');
var listContainer = $('ul.companyPosItemsList');
var value = inputField.val();
if (value) {
cancelBtn.addClass('hidden');
btn.button('loading');
// $.ajax(...).always(function () {
// });
// todo: replace with AJAX
setTimeout(function(){
listContainer.append(
'<li class="list-group-item" data-position-id="231">' +
'<div class="companyPosItem">' +
'<span class="companyPosLabel">' + value + '</span>' +
'<ul class="list-group-submenu">' +
'<li class="list-group-submenu-item">' +
'<button type="button" class="btn btn-default no-border" data-toggle="tooltip" data-placement="top" title="Remove">' +
'<span class="glyphicon glyphicon-remove"></span>' +
'</button>' +
'</li>' +
'</ul>' +
'</div>' +
'</li>'
);
inputField.val('');
btn.button('reset');
cancelBtn.removeClass('hidden');
}, 1500);
}
}
$(document).on('click', '.companyPosSaveBtn', function (e) {
e.stopPropagation();
var btn = $(this);
var inputField = btn.parents('div').find('.companyPosInputNew');
saveNewCompanyPos(e, btn, inputField);
});
$(document).on('keypress', '.companyPosInputNew', function (e) {
if (e.which === 13) {
e.stopPropagation();
var inputField = $(this);
var btn = inputField.parents('div').find('.companyPosSaveBtn');
saveNewCompanyPos(e, btn, inputField);
}
});
});
