<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">
<div class="col-sm-6">
<ul class="list-group" data-url="">
<li class="list-group-item" data-id="">
<input type="text" class="list-group-input" value="1!"></input>
<span class="text-success">Hi</span>
<span class="show-menu">
<span class="glyphicon glyphicon-chevron-right"></span>
</span>
<ul class="list-group-submenu">
<li class="list-group-submenu-item success list-group-ok"><span class="glyphicon glyphicon-ok"></span></li>
<li class="list-group-submenu-item danger list-group-remove"><span class="glyphicon glyphicon-remove"></span></li>
</ul>
</li>
<li class="list-group-item">
<input type="text" class="list-group-input" value="2"></input>
<span class="text-success">Hi</span>
<span class="show-menu">
<span class="glyphicon glyphicon-chevron-right"></span>
</span>
<ul class="list-group-submenu">
<li class="list-group-submenu-item success list-group-save"><span class="glyphicon glyphicon-remove"></span></li>
<li class="list-group-submenu-item danger list-group-delete"><span class="glyphicon glyphicon-ok"></span></li>
</ul>
</li>
<li class="list-group-item">
<input type="text" class="list-group-input" value="3!"></input>
<span class="text-success">Hi</span>
<span class="show-menu">
<span class="glyphicon glyphicon-chevron-right"></span>
</span>
<ul class="list-group-submenu">
<li class="list-group-submenu-item success list-group-save"><span class="glyphicon glyphicon-remove"></span></li>
<li class="list-group-submenu-item danger list-group-delete"><span class="glyphicon glyphicon-ok"></span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
.spin {
-webkit-animation: spin .9s infinite linear;
-moz-animation: spin .9s infinite linear;
-o-animation: spin .9s infinite linear;
animation: spin .9s infinite linear;
-webkit-transform-origin: 50% 58%;
transform-origin:50% 58%;
-ms-transform-origin:50% 58%; /* IE 9 */
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.list-group {
overflow: hidden;
border-left: 1px solid rgb(221, 221, 221);
border-right: 1px solid rgb(221, 221, 221);
}
.list-group-item:first-child, .list-group-item:last-child {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
overflow: hidden;
}
.list-group-item {
height: 42px;
border-left: 0px solid rgb(221, 221, 221);
border-right: 0px solid rgb(221, 221, 221);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.list-group-input{
border: 0px;
}
.list-group-item > .show-menu {
position: absolute;
height: 100%; width:24px;
top: 0px; right: 0px;
background-color: rgba(51, 51, 51, 0.2);
cursor: pointer;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.list-group-item > .show-menu > span {
position: absolute;
top: 50%;
margin-top: -7px;
padding: 0px 5px;
}
.list-group-submenu {
position: absolute;
top: 0px;
right: -88px;
white-space: nowrap;
list-style: none;
padding-left: 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.list-group-submenu .list-group-submenu-item {
float: right;
white-space: nowrap;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: rgb(51, 51, 51);
color: rgb(235, 235, 235);
}
.list-group-item.open {
margin-left: 0px;
}
.list-group-item.open > .show-menu {
right: 88px;
}
.list-group-item.open .list-group-submenu{
right: 0px;
}
.list-group-submenu .list-group-submenu-item.primary {
color: rgb(255, 255, 255);
background-color: rgb(50, 118, 177);
}
.list-group-submenu .list-group-submenu-item.success {
color: rgb(255, 255, 255);
background-color: rgb(92, 184, 92);
}
.list-group-submenu .list-group-submenu-item.info {
color: rgb(255, 255, 255);
background-color: rgb(57, 179, 215);
}
.list-group-submenu .list-group-submenu-item.warning {
color: rgb(255, 255, 255);
background-color: rgb(240, 173, 78);
}
.list-group-submenu .list-group-submenu-item.danger {
color: rgb(255, 255, 255);
background-color: rgb(217, 83, 79);
}
$(function () {
var token = $('meta[name=csrf-token]').attr('content');
var deleteResource = function(url, token, element){
$(element).find('.glyphicon-remove').removeClass('.glyphicon-remove').addClass("fa-spinner fa-spin")
jQuery.ajax({
url: url, // it should be mapped in routes.rb in rails
type: "POST",
data: {
"_method": "delete",
"authenticity_token": token
},
success: function(data){
$(element).fadeOut("slow", function() {
$(element).remove();
});
},
error: function(data){
alert("Error!")
}
});
}
var updateResourceName = function(url, name){
jQuery.ajax({
url: url, // it should be mapped in routes.rb in rails
method: "POST",
type: "json",
data: {
"_method":"patch",
"authenticity_token": $('meta[name=csrf-token]').attr('content'),
"category[name]" : e.val()
},
success: function(data){
e.parent().find("div.form-group-options .remove-list-item").hide().append(notification)
e.data("val", e.val())
},
error: function(data){
alert("Error!")
}
});
}
var addResource = function(url, item){
}
$(".list-group-input").on('focus', function(event){
$(".list-group-item").not($(this).closest('li')).removeClass('open');
});
$('.list-group-item').on('mouseenter', function(event) {
event.preventDefault();
$(".list-group-item").not($(this).closest('li')).removeClass('open');
$(this).closest('li').addClass('open');
});
$('.list-group-item').on('mouseleave', function(event) {
event.preventDefault();
if(!$($(this).find('input')).is(":focus"))
$(this).closest('li').removeClass('open');
});
$('.list-group-remove').on('click', function(event) {
event.preventDefault();
$(this).closest('.list-group-item').remove();
});
});
