Hexagon Sorting

by Miguel Ramirez Zablah

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
           <div class="row">
             <div id="btn-menu" class="btn-group btn-group-justified" role="group">
                <div id="btn-ser" class="btn-group" role="group">
                    <button type="button" class="btn btn-default">Servidores</button>
                </div>
                <div id="btn-all" class="btn-group" role="group">    
                    <button type="button" class="btn btn-default">All</button>
                </div>
                <div id="btn-mon" class="btn-group" role="group">
                    <button type="button" class="btn btn-default">Monitores</button>
                </div>
                </div>
            </div>
           </div>
            <div class="row hex_container">
                <ul id="categories" class="clr">
                    <li class="ser">
                        <div>
                            <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" />
                            <h1>This is a title</h1>
                            <p>Some sample text about the article this hexagon leads to</p>
                        </div>
                    </li>
                    <li class="mon">
                        <div>
                            <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
                            <h1>This is a title</h1>
                            <p>Some sample text about the article this hexagon leads to</p>
                        </div>
                    </li>
                    <li class="ser">
                        <div>
                            <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />
                            <h1>This is a title</h1>
 ...

SCSS

/*Variabls*/
$hexagon_size: 60%;

/*Mixins*/
/*Transform mixin*/
@mixin transform($transforms) {
	   -moz-transform: $transforms;
	     -o-transform: $transforms;
	    -ms-transform: $transforms;
	-webkit-transform: $transforms;
          transform: $transforms;
}
/*Transition*/
@mixin transition($tran...) {
  -webkit-transition: $tran;
  -moz-transition: $tran;
  -ms-transition: $tran;
  -o-transition: $tran;
  transition: $tran;
}

/*Hexagon Code*/
* {
    margin: 0;
    padding: 0;
}
.hex_cont{
    width: 100%;
    padding: 15px 0 15px 0;
}
#categories {
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    display: block;
}

.clr:after {
    content: "";
    display: block;
    clear: both;
}

#categories li {
    position: relative;
    list-style-type: none;
    float: left;
    overflow: hidden;
    visibility: hidden;
    @include transform (rotate(-60deg) skewY(30deg));
}

#categories li * {
    position: absolute;
    visibility: visible;
}

#categories li > div {
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    @include transform (skewY(-30deg) rotate(60deg));
    backface-visibility: hidden;
}


/* HEX CONTENT */

#categories li img {
    left: -100%;
    right: -100%;
    width: auto;
    height: 100%;
    margin: 0 auto;
}

#categories div h1,
#categories div p {
    width: 100%;
    padding: 0 5%;
    background-color: #008080;
    background-color: rgba(0, 128, 128, 0.8);
    font-family: 'Raleway', sans-serif;
    @include transition (top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out);
    margin: 0;
}

#categories li h1 {
    bottom: 110%;
    font-style: italic;
    font-weight: normal;
    font-size: 1.5em;
    padding-top: 100%;
    padding-bottom: 100%;
}

#categories li h1:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -1px;
    left: 45%;
    width: 10%;
    text-align: center;
    z-index: 1;
    border-bottom: 2px solid...

JavaScript

//Hide content Script
$( document ).ready(function() {
    $("#categories").children().show();
});

$(function(){
    $("#btn-menu").on('click','div',function(){
       var classToShow = this.id.split('-')[1],
           filter = classToShow === "all" ? 'li': '.' + classToShow;
        $(this).first().show( "fast", function showNext() {
    $( this ).next( "div" ).show( "fast", showNext );
  });
       //i don't know how to do this nicer..
       
        if(classToShow === "mon") {
            $('#categories').children().not('.mon').each(function(){
                $(this).hide().changeElementType('div');
            });
            $('#categories').children('.mon').each(function(){
                $(this).show().changeElementType('li');
            });
        } else if(classToShow === "ser") {
            $('#categories').children().not('.ser').each(function(){
                $(this).hide().changeElementType('div');
            });
            $('#categories').children('.ser').each(function(){
                $(this).show().changeElementType('li');
            });
        } else {
            $('#categories').children().each(function(){
                $(this).show().changeElementType('li');
            });
        }
    });  
});


(function($) {
    $.fn.changeElementType = function(newType) {
        var attrs = {};

        $.each(this[0].attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
        });

        this.replaceWith(function() {
            return $("<" + newType + "/>", attrs).append($(this).contents());
        });
    };
})(jQuery);