jeunes-et-engages-d7/sites/all/themes/gui/jee/js/jee.js

Drupal.behaviors.init_theme = function (context) {
  // Growl-style system messages
  $('#messages-and-help > div.messages:not(.processed)')
    .addClass('processed')
    .each(function() {
      // If a message meets these criteria, we don't autoclose
      // - contains a link
      // - is an error or warning
      // - contains a lenghthy amount of text
      if ($('a', this).size() || $(this).is('.error') || $(this).is('.warning') || $(this).text().length > 100) {
        $(this).prepend("<span class='close'>X</span>");
        $('span.close', this).click(function() {
          $(this).parent().slideUp('fast');
        });
      }
      else {
        // This essentially adds a 3 second pause before hiding the message.
        $(this).animate({opacity:1}, 5000, 'linear', function() {
          $(this).slideUp('fast');
        });
      }
    });
};

jQuery(document).ready(function($) {
  console.log('Hello Jee');

  var _$header = $("#header"),
      _$chapitres = $('.node-chapitre', '#main'),
      _chapitres_len = _$chapitres.length,
      _chapters = [],
      _$container = $('#main'),
      _container = {
        w:_$container.width(),
        h:_$container.height()
      },
      _center = {x:_container.w/2,y:_container.h/2},
      _nav_pos = {x:0, y:0},
      _nav_timer;

  function init(){
    initChapters();
    launchNav();
  };

  function initChapters(){
    // Place each chapters on the ellipse contained on the screen
    var angle, a = Math.random() *360;
    _$chapitres.each(function(i, e) {
      // distribute elements arround the center
      angle = (360/_chapitres_len*i+a)*Math.PI/180;

      // Lets create the chapter object and place him self
      _chapters.push(new Chapter($(e), angle));

    });
  };

  function launchNav(){
    var last_clientX,
          last_clientY,
          td;

    $(document)
      // DESKTOP EVENTS
      .bind('mousedown', function(e){
        last_clientX = e.clientX;
        last_clientY = e.clientY;

         _$chapitres.each(function(i, e) {
            td = randB(0.1, 0.3);//Math.random() * (0.3 - 0.1) + 0.1;
            $(e).css({"transitionDuration":td+"s"});
        });

        _nav_timer = setInterval(moveNav, 1000/24);

        $(this).bind('mousemove', function(e){
          _nav_pos.x += e.clientX - last_clientX;
          _nav_pos.y += e.clientY - last_clientY;
          last_clientX = e.clientX;
          last_clientY = e.clientY;
        });
      })
      .bind('mouseup', function(e){
        clearInterval(_nav_timer);
        $(this).unbind('mousemove');
      })
      //
      // TOUCH EVENTS - - - - - - - - - - - - - -
      //
      .bind('touchstart', function(e){
          // console.log('touchstart', e);
          last_clientX = e.originalEvent.touches[0].clientX;
          last_clientY = e.originalEvent.touches[0].clientY;

         _$chapitres.each(function(i, e) {
            td = randB(0.1, 0.3); //Math.random() * (0.3 - 0.1) + 0.1;
            $(e).css({"transitionDuration":td+"s"});
          });

          _nav_timer = setInterval(moveNav, 1000/12);
      })
      .bind('touchmove', function(e){
          // console.log('touchmove', e);
          _nav_pos.x += e.originalEvent.touches[0].clientX - last_clientX;
          _nav_pos.y += e.originalEvent.touches[0].clientY - last_clientY;
          last_clientX = e.originalEvent.touches[0].clientX;
          last_clientY = e.originalEvent.touches[0].clientY;
      })
      .bind('touchend', function(e){
        // console.log("touchend", e);
        clearInterval(_nav_timer);
      });

    // click to preview chapter
    $('h2.node-title, .field-name-field-partie:first>.field-name-field-vignette', _$chapitres).bind('click', previewChapter);

    $('.links a', _$chapitres).on('click', openChapter);
  };

  function moveNav(){
    // console.log("moveNav");
    _$chapitres.each(function(i, e){
      $(e).stop(true, false).css({
        translate:[_nav_pos.x, _nav_pos.y]
      });
      // $(e).transition({translate:[_nav_pos.x, _nav_pos.y]}, 200, 'out');
    });
    _$header.stop(true, false).css({
      translate:[_nav_pos.x*0.2, _nav_pos.y*0.2]
      // WebkitTransform:'translate('+_nav_pos.x*0.2+', '+_nav_pos.y*0.2+')'
    });
  };

  var $chapt, $parties, px, py;
  function previewChapter(e){
    e.preventDefault();
    // console.log('hello', this);

    $chapt = $(this).parents('.node-chapitre');

    closePreview($chapt);

    $parties = $('.field-name-field-partie', $chapt);
    $parties.each(function(i, e) {
      switch(i){
        case 0:
          px=randB(-40, 40); py=randB(40, 60);
        break;
        case 1:
          px=randB(100, 200); py=randB(120,220);
        break;
        case 2:
          px=randB(-200, -100); py=randB(250,320);
        break;
        case 3:
          px=randB(-100, 100); py=randB(320,350)+100;
        break;
      }
      setTimeout(
        (function($chapt, $part, px, py){
          $part
            .css({
              translate:[px, py],
              // opacity:1
            });

          // console.log('part', $part);
          // console.log('part left', $part.height());

        })($chapt, $(e), px, py),10);
    }); // each $parties

    $chapt.addClass('previewed');
    return false;
  }; // previewChapter

  function closePreview($active){
    _$chapitres
      .filter('.previewed').not($active)
      .removeClass('previewed')
        .find('.field-name-field-partie')
        .css({transform:"none"});
  }; // closePreview

  var nid;
  function openChapter(e){
    e.preventDefault();
    nid = $(this).attr("href").match(/^\/node\/(\d+)/);
    console.log(nid);
    $.getJSON(
      '/jee/chapter/'+nid[1],
      {},
      displayChapter
    );

    return false;
  }; // openChapter

  var $chapterwrapper;
  function displayChapter(json, textStatus) {
    $chapterwrapper = $('<div>').addClass('chapter-wrapper').append(json.node).appendTo(_$container);
    // $chapterwrapper.append(json.node);

    console.log('displayChapter :: json', json);

    console.log('displayChapter :: chapterwrapper', $chapterwrapper);
  }; //displayChapter

  /*
  * Chapter
  *
  */
  function Chapter($e, angle){

    this.$e = $e;
    this.geom = {
      a:angle,
      r:0
    }
    this.pos = {x:0,y:0};
    this.translation = {x:0, y:0};


    // prototypes
    if (typeof Chapter.initialized == "undefined") {

      Chapter.prototype.setInitPos = function(){
        // console.log("Chapter :: setInitPos", this.$e);
        this.geom.c = Math.cos(this.geom.a);
        this.geom.s = Math.sin(this.geom.a);
        this.geom.abs_c = Math.abs(this.geom.c);
        this.geom.abs_s = Math.abs(this.geom.s);

        if (this.geom.abs_c * _container.h > this.geom.abs_s * _container.w) {
          // It crosses left or right side
          this.geom.r = ((_container.w/2) / this.geom.abs_c)*0.5;
        }else {
          // Top or bottom side
          this.geom.r = ((_container.h/2) / this.geom.abs_s)*0.5;
        }

        // change randomly radius
        this.geom.r = randB(this.geom.r, this.geom.r*2);

        this.pos.x = Math.round(_center.x+this.geom.r *  this.geom.c) - this.$e.outerWidth(true)/2;
        this.pos.y = Math.round(_center.y+this.geom.r * -this.geom.s) - this.$e.outerHeight(true)/2;

        console.log('this', this);
        this.$e.css({
          left:this.pos.x,
          top:this.pos.y
        });
      };// setIniPos()

      Chapter.prototype.move = function(){

      };

      Chapter.prototype.preview = function(){

      };

      Chapter.prototype.closePreview = function(){

      };

      Chapter.prototype.open = function(){

      };

      Node.initialized = true;
    }

    this.setInitPos();

  };//Chapter


  /* HELPERS */
  function randB(min, max){
    return Math.random() * (max - min) + min;
  }



  init();
});