sarahgarcin/improve-share

Convivial works and projects in the graphic design field

Tools for Conviviality

This website is a part of our final year project at ENSAD. We decide to share the source code, and documentate it.

FEATURES

• Projects organization by country
• Projects are draggable in the country containment
• Projects are filtrables with checkbox filters

DEPENDANCIES

• JQuery
• jquery.cookie.js -> https://github.com/carhartl/jquery-cookie
• firstImpression.js -> https://github.com/robflaherty/firstImpression.js/tree/master
• Typeface : Old Standard TT -> http://www.fontsquirrel.com/fonts/Old-Standard-TT

CODE

Projects organization by country

Create a wrapper-div by country and append each project with the country class to this

var div = document.createElement('div');
div.className = "france-wrapper"; 
$('.projets').append(div);
$('.france').each(function() {
    $(div).append($(this));
});
$(".france-wrapper").append('<p class="pays">France</p>');

Each project take a random position in his wrapper-div

$(".france-wrapper li").each(
    function(intIndex) {

        var l = Math.floor(Math.random() * $(".france-wrapper").width());
        var t = Math.floor(Math.random() * $(".france-wrapper").height());

    $(this).css("left", l);
    $(this).css("top", t);

});

Each project is draggable in his wrapper-div and z-index increment when project is dragged

var a = 3;
$(".france-wrapper li").draggable({
    containment: ".france-wrapper",
    start: function(event, ui) { $(this).css("z-index", a++); }        
});

Use of firstImpression

if ( firstImpression() ) {
      $('.intro-text').css('display','block');
    } 
    else {
      $('.intro-text').css('display','none'); 
    } 

});	

Filters with multiple checkbox

$('div.tags').delegate('input[type=checkbox]', 'change', function()
{
    var $lis = $('.projets > div > li'),
        $checked = $('input:checked');

    if ($checked.length) {
        var selector = $checked.map(function(){
            return '.' + $(this).attr('rel');
        }).get().join('');
        $lis.hide().filter(selector).show();     
    }
    else {
        $lis.show();
    }
});