Skip to content

Instantly share code, notes, and snippets.

@maggiben

maggiben/index.html

Created July 27, 2013 03:43
Show Gist options
  • Save maggiben/6093627 to your computer and use it in GitHub Desktop.
Save maggiben/6093627 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Benjamin. FansWorld Editable Menu - Feature #380: https://github.com/FansWorldTV/web/issues/380
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link href="http://fansworld.svn.dodici.com.ar/bundles/dodicifansworldweb/css/base.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://raw.github.com/daneden/animate.css/master/animate.css' rel='stylesheet' type='text/css'>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="main-content-frame" class="container-fluid">
<div class="row-fluid">
<section id="content" class=" fullwidth ">
<div class="home-content">
<ul class="filter-home connectedSortable editing" id="sortable1" >
<li class="active" data-entity-type="null" data-entity-id="null">TODOS</li>
<li data-entity-type="genre" data-entity-id="1">Deportes</li>
<li data-entity-type="genre" data-entity-id="2">Musica</li>
<li data-entity-type="vc" data-entity-id="6">Estilos de vida</li>
<li data-entity-type="vc" data-entity-id="7">Fans</li>
<li data-entity-type="vc" data-entity-id="8">Clubes</li>
<li data-entity-type="vc" data-entity-id="9">Trucos</li>
<li data-entity-type="vc" data-entity-id="10">Entrevistas</li>
</ul>
<button class="edit-filters" data-original-title="Editar" data-override="true" data-menu-edit="true"><i class="icon-cog"></i></button>
<div class="filter-container">
<div id="center"><h4 class="menu-title">CATEGORIAS</h4></div>
<ul class="filter-menu connectedSortable" id="sortable2">
<li data-entity-type="null" data-entity-id="null"><i class="icon-ok-circle"></i>TODOS</li>
<li data-entity-type="genre" data-entity-id="1"><i class="icon-ok-circle"></i>Deportes</li>
<li data-entity-type="genre" data-entity-id="2"><i class="icon-ok-circle"></i>Musica</li>
<li data-entity-type="vc" data-entity-id="6"><i class="icon-ok-circle"></i>Estilos de vida</li>
<li data-entity-type="vc" data-entity-id="70"><i class="icon-ok-circle"></i>Fans</li>
<li data-entity-type="vc" data-entity-id="8"><i class="icon-ok-circle"></i>Clubes</li>
<li data-entity-type="vc" data-entity-id="9"><i class="icon-ok-circle"></i>Trucos</li>
<li data-entity-type="vc" data-entity-id="10"><i class="icon-ok-circle"></i>Entrevistas</li>
<li data-entity-type="genre" data-entity-id="11"><i class="icon-ok-circle"></i>Football</li>
<li data-entity-type="genre" data-entity-id="12"><i class="icon-ok-circle"></i>Ajedrez</li>
<li data-entity-type="genre" data-entity-id="13"><i class="icon-ok-circle"></i>Automovilismo</li>
<li data-entity-type="genre" data-entity-id="14"><i class="icon-ok-circle"></i>Baile deportivo</li>
<li data-entity-type="genre" data-entity-id="15"><i class="icon-ok-circle"></i>Bandy</li>
<li data-entity-type="genre" data-entity-id="16"><i class="icon-ok-circle"></i>Béisbol</li>
<li data-entity-type="genre" data-entity-id="17"><i class="icon-ok-circle"></i>Billar</li>
<li data-entity-type="genre" data-entity-id="18"><i class="icon-ok-circle"></i>Bowling</li>
<li data-entity-type="genre" data-entity-id="19"><i class="icon-ok-circle"></i>Bridge</li>
<li data-entity-type="genre" data-entity-id="20"><i class="icon-ok-circle"></i>Críquet</li>
<li data-entity-type="genre" data-entity-id="21"><i class="icon-ok-circle"></i>Aeronáuticos</li>
<li data-entity-type="genre" data-entity-id="22"><i class="icon-ok-circle"></i>Deportes de bolas</li>
<li data-entity-type="genre" data-entity-id="23"><i class="icon-ok-circle"></i>Escalada</li>
<li data-entity-type="genre" data-entity-id="24"><i class="icon-ok-circle"></i>Esquí acuático</li>
<li data-entity-type="genre" data-entity-id="25"><i class="icon-ok-circle"></i>Floorball</li>
<li data-entity-type="genre" data-entity-id="26"><i class="icon-ok-circle"></i>Golf</li>
<li data-entity-type="genre" data-entity-id="27"><i class="icon-ok-circle"></i>Juego de la soga</li>
<li data-entity-type="genre" data-entity-id="28"><i class="icon-ok-circle"></i>Korfbal</li>
<li data-entity-type="genre" data-entity-id="29"><i class="icon-ok-circle"></i>Karate</li>
<li data-entity-type="genre" data-entity-id="30"><i class="icon-ok-circle"></i>Montañismo</li>
<li data-entity-type="genre" data-entity-id="31"><i class="icon-ok-circle"></i>Motociclismo</li>
<li data-entity-type="genre" data-entity-id="32"><i class="icon-ok-circle"></i>Motonáutica</li>
<li data-entity-type="genre" data-entity-id="33"><i class="icon-ok-circle"></i>Netball</li>
<li data-entity-type="genre" data-entity-id="34"><i class="icon-ok-circle"></i>Orientación</li>
<li data-entity-type="genre" data-entity-id="35"><i class="icon-ok-circle"></i>Pelota vasca</li>
<li data-entity-type="genre" data-entity-id="36"><i class="icon-ok-circle"></i>Polo</li>
<li data-entity-type="genre" data-entity-id="37"><i class="icon-ok-circle"></i>Patinaje</li>
<li data-entity-type="genre" data-entity-id="38"><i class="icon-ok-circle"></i>Raquetbol</li>
<li data-entity-type="genre" data-entity-id="39"><i class="icon-ok-circle"></i>Rugby</li>
<li data-entity-type="genre" data-entity-id="40"><i class="icon-ok-circle"></i>Rugby 7</li>
<li data-entity-type="genre" data-entity-id="41"><i class="icon-ok-circle"></i>Salvamento</li>
<li data-entity-type="genre" data-entity-id="42"><i class="icon-ok-circle"></i>Softbol</li>
<li data-entity-type="genre" data-entity-id="43"><i class="icon-ok-circle"></i>Speedcubing</li>
<li data-entity-type="genre" data-entity-id="44"><i class="icon-ok-circle"></i>Squash</li>
<li data-entity-type="genre" data-entity-id="45"><i class="icon-ok-circle"></i>Sumo</li>
<li data-entity-type="genre" data-entity-id="46"><i class="icon-ok-circle"></i>Surf</li>
<li data-entity-type="genre" data-entity-id="47"><i class="icon-ok-circle"></i>Frisbee</li>
<li data-entity-type="genre" data-entity-id="48"><i class="icon-ok-circle"></i>Wushu</li>
</ul>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
Raw
script.js
$(document).ready(function () {
$('.filter-home').find('li').each(function(){
$(this).append("<i class='remove icon-remove-sign'></i>");
console.log($(this))
});
$( "#sortable1" ).sortable({
connectWith: ".connectedSortable",
placeholder: "ui-state-highlight",
receive: function(event, ui) {
ui.item.addClass("active").find('i').removeClass().addClass("icon-remove-sign icon-white");
ui.item.draggable( "option", "disabled", true );
},
stop: function(event, ui) {
ui.item.css({border: '0', 'border-radius': '2px'}).find('i').removeClass()
ui.item.append("<i class='remove icon-remove-sign'></i>")
}
});
$('body').on('click', "#sortable1 .remove", function(event){
var self = $($(this).parent()[0]);
var type = self.attr('data-entity-type');
var id = parseInt(self.attr('data-entity-id'), 10);
var orgOffset = $($(this).parent()[0]).offset();
var elem = $($(this).parent()[0]).clone();
var tempItem = $("<div style='position: absolute; opacity: 0.5' class='tempItem'>" + elem.text() + "</div>");
tempItem.offset(orgOffset);
$($(this).parent()[0]).css('opacity', 0)
$('body').append(tempItem)
var destOffset = $('.filter-menu li:last').offset();
if(!isNaN(id) && $('#sortable2 [data-entity-type="' + type + '"][data-entity-id="' + id + '"]').length > 0) {
destOffset = $('#sortable2 [data-entity-type="' + type + '"][data-entity-id="' + id + '"]').offset();;
} else {
$('.filter-menu').append("<li style='opacity: 0'><i class='icon-ok-circle'></i>" + elem.text() + "</li>");
destOffset = $('.filter-menu li:last').offset();
}
$(tempItem).css('-webkit-transform', 'translate('+ (destOffset.left - orgOffset.left) +'px, '+ (destOffset.top - orgOffset.top) +'px)');
$(tempItem).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(event){
if(!isNaN(id) && $('#sortable2 [data-entity-type="' + type + '"][data-entity-id="' + id + '"]').length > 0) {
$('#sortable2 [data-entity-type="' + type + '"][data-entity-id="' + id + '"]').removeClass().find('i').removeClass().addClass("icon-ok-circle");
$('#sortable2 [data-entity-type="' + type + '"][data-entity-id="' + id + '"]').draggable( "option", "disabled", false );
} else {
$('.filter-menu li:last').css('opacity', 1)
}
tempItem.remove();
$(self).remove();
})
});
$('body').on('click', "#sortable2 li", function(event) {
var self = $(this);
var type = self.attr('data-entity-type');
var id = parseInt(self.attr('data-entity-id'), 10);
var orgOffset = {};
var destOffset = {};
var tempItem = $("<div style='position: absolute; opacity: 0.5' class='tempItem'>" + $(this).text() + "</div>");
$('#sortable1').append("<li style='opacity: 0'>" + $(this).text() + "</li>");
$('#sortable1 li:last').attr('data-entity-type', type);
$('#sortable1 li:last').attr('data-entity-id', id);
var orgOffset = $(this).offset();
destOffset = $('#sortable1 li:last').offset();
tempItem.offset(orgOffset);
$('body').append(tempItem);
var xPos = orgOffset.left > destOffset.left ? -(orgOffset.left - destOffset.left) : (destOffset.left - orgOffset.left);
var yPos = orgOffset.top > destOffset.top ? -(orgOffset.top - destOffset.top) : (destOffset.top - orgOffset.top);
setTimeout(function() {
tempItem.css('-webkit-transform', 'translate(' + xPos + 'px, ' + yPos + 'px)');
}, 15)
$(tempItem).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(event){
$('#sortable1 li:last').css('opacity', 1).append("<i class='remove icon-remove-sign'></i>");
tempItem.remove();
self.addClass("active").find('i').removeClass().addClass("icon-remove-sign icon-white");
self.draggable( "option", "disabled", true );
})
})
$("#sortable2 li").draggable({
connectToSortable: "#sortable1",
cursor: "move",
opacity: 0.75,
revert: "invalid",
helper: function( event ) {
var helper = $(this).clone();
helper.removeClass().addClass("dragging").css('display', 'inline-block').find('i').removeClass().addClass('icon-ok-circle icon-white');
return helper;
}
});
$("#sortable1 li").each(function(index, element){
var type = $(this).attr('data-entity-type');
var id = parseInt($(this).attr('data-entity-id'), 10);
console.log("type: " + type + " id: " + id)
$('#sortable2 [data-entity-type="' + type + '"][data-entity-id="' + id + '"]').addClass("active").find('i').removeClass().addClass("icon-remove-sign icon-white");
$('#sortable2 [data-entity-type="' + type + '"][data-entity-id="' + id + '"]').draggable( "option", "disabled", true );
})
$(".edit-filters").on('click', function(event) {
if($(this).hasClass('active')) {
$(".filter-container").slideDown();
$(this).removeClass('active');
$(this).find('i').removeClass('icon-white');
return;
}
$(this).addClass('active');
$(this).find('i').addClass('icon-white');
$(".filter-container").slideUp();
});
$('body').on('click', '.subfilter-home', function(event){
if($(event.target).hasClass('active')) {
return;
}
$(event.target).parent().find('.active').removeClass('active');
$(event.target).addClass('active');
var type = $(event.target).attr('data-entity-type');
var id = parseInt($(event.target).attr('data-entity-id'), 10);
var vc = $(event.target).attr('data-video-category');
});
$('body').on("click", ".filter-home > li:not('[data-override]')", function(event){
if($(this).hasClass('active')) {
return;
}
$(this).parent().find('.active').removeClass('active');
$(this).addClass('active');
});
});
Raw
style.less
.edit-filters {
position: relative;
display: inline-block;
width: auto;
height: auto;
border-radius: 3px;
color: white;
font-weight: 400;
font-size: 12px;
border: 0;
line-height: 9px;
top: -8px;
padding: 5px;
background-color: transparent;
}
.edit-filters:hover {
background-color: #8acd2c;
border-radius: 3px;
}
.edit-filters.active {
position: relative;
display: inline-block;
width: auto;
height: auto;
background-color: #8acd2c;
border-radius: 3px;
color: white;
font-weight: 400;
font-size: 12px;
border: 0;
line-height: 9px;
top: -8px;
padding: 5px;
}
.edit-filters i {
display: inline-block;
float: left;
margin: 2px;
}
.filter-container {
border-top: 2px solid #c0c0c0;
/*width: 100%;*/
margin-left: 1%;
margin-right: 1%;
margin-top: 5px;
padding-bottom: 20px;
background-color: #f1f1f1;
}
#center {
position: absolute;
left: 33%;
margin: 0 auto;
width: 33%;
/*background-color: #00f;*/
height: 20px;
}
.menu-title {
position: relative;
top: -11px;
margin: 0 auto;
width: 40%;
background-color: #B8DD1B;
color: #fff;
border-radius: 20px;
font-weight: normal;
line-height: 20px;
padding: 0px 10px 0px 10px;
}
.filter-menu {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-column-count: 5;
text-align: left;
margin-top: 20px;
}
.filter-menu li {
list-style: none;
display: block;
padding: 2px 5px 2px 5px;
text-transform: uppercase;
font-size: 12px;
/*font-weight: 600;*/
color: gray;
margin: 2px 2px 2px 2px;
margin-right: 5px;
cursor: pointer;
position: relative;
transition: opacity 0.1s linear;
}
.filter-menu li:hover {
background-color: #8acd2c;
/*border: 1px solid black;*/
color: #fff;
/*margin: 2px 2px 2px 2px;*/
border-radius: 3px;
}
.filter-menu li.active {
background-color: #8acd2c;
/*border: 1px solid black;*/
color: #fff;
/*margin: 2px 2px 2px 2px;*/
border-radius: 3px;
}
.filter-menu li.dragging {
background-color: #B8DD1B;
border: 1px solid #62921F;
color: #fff;
/*margin: 2px 2px 2px 2px;*/
border-radius: 3px;
}
.filter-menu li i {
/*margin-top: 1px;*/
margin-right: 2px;
}
.filter-home.editing li {
transition: transform 1s linear;
}
#basic2 {
transition: transform 1s linear;
}
.filter-home.editing li:hover {
background-color: #B8DD1B;
border-radius: 3px;
}
.filter-home.editing li:hover i.remove {
opacity: 1;
}
.filter-home.editing li i.remove {
position: absolute;
top: -8px;
right: -8px;
transition: opacity 0.1s linear;
opacity: 0;
}
.tempItem {
transition: transform 1s linear;
-webkit-transition: -webkit-transform 0.5s linear;
padding: 2px 5px 2px 5px;
text-transform: uppercase;
font-size: 12px;
color: #000;
float: left;
margin-right: 5px;
cursor: pointer;
position: relative;
background-color: #B8DD1B;
border-radius: 3px;
}
.ui-state-highlight {
line-height: 1.2em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment