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

//
// by Bachir Soussi Chiadmi
// 2015
//

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,
      _last_client = {x:0,y:0},
      _fps = 1000/12,
      _dragging = false;

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

  function initChapters(){
    // Place each chapters on the ellipse contained on the screen
    var base_a = Math.random() *360;
    _$chapitres.each(function(i, e) {
      // Lets create the chapter object and place him self
      _chapters.push(new Chapter(i, $(e), base_a));

    });
  };

  function launchNav(){

    _$container
      // DESKTOP EVENTS
      .bind('mousedown', function(e){
        if(_dragging) return false;
        _dragging = true;

        console.log('mousedown');
        _last_client.x=e.clientX;
        _last_client.y=e.clientY;

         _$chapitres.each(function(i, e) {
            $(e).css({"transitionDuration":randB(0.1, 0.3)+"s"});
        });

        _nav_timer = setInterval(moveNav, _fps);

        $(this).bind('mousemove', function(e){
          console.log('mousemove');
          _nav_pos.x += e.clientX - _last_client.x;
          _nav_pos.y += e.clientY - _last_client.y;
          _last_client.x = e.clientX;
          _last_client.y = e.clientY;
          // moveNav();
        });
      })
      .bind('mouseup', function(e){
        console.log('mouseup');
        _dragging = false;
        // clearInterval(_nav_timer);
        $(this).unbind('mousemove');
      })
      //
      // TOUCH EVENTS - - - - - - - - - - - - - -
      //
      .bind('touchstart', function(e){
        if(_dragging) return false;
        _dragging = true;
        console.log('touchstart');

        _last_client.x = e.originalEvent.touches[0].clientX;
        _last_client.y = e.originalEvent.touches[0].clientY;

       _$chapitres.each(function(i, e) {
          $(e).css({"transitionDuration":randB(0.1, 0.3)+"s"});
        });

        _nav_timer = setInterval(moveNav, _fps);
      })
      .bind('touchmove', function(e){
        console.log('touchmove');
        _nav_pos.x += e.originalEvent.touches[0].clientX - _last_client.x;
        _nav_pos.y += e.originalEvent.touches[0].clientY - _last_client.y;
        _last_client.x = e.originalEvent.touches[0].clientX;
        _last_client.y = e.originalEvent.touches[0].clientY;
        // moveNav();
      })
      .bind('touchend', function(e){
        console.log("touchend");
        _dragging = false;
        // 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");
    // move chapters
    for (var i = _chapitres_len - 1; i >= 0; i--) {
      _chapters[i].move();
    };

    // move header
    _$header.stop(true, false).css({
      translate:[_nav_pos.x*0.2, _nav_pos.y*0.2]
    });
  };

  /*
  * Chapter
  *
  */
  function Chapter(i, $e, base_a){

    $e.obj = this;
    this.i = i;
    this.$e = $e;
    this.nid = $e.attr("id").match(/^node-(\d+)/)[1];
    this.geom = {
      base_a:base_a,
      a:0,
      r:0
    }
    this.pos = {x:0,y:0};
    this.translation = {x:0, y:0};

    //parties
    this.$parties = $('.field-name-field-partie', $e);
    this.lines = new Array();
    this.linesAnimeInterval = null;
    this.linesAnimeCounter = 0;
    this.linesAnimeTime = 5; // sec


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

      Chapter.prototype.init = function(){
        // var _this = this;
        // this.$parties.each(function(i, e){
        //   _this.partie.push({$partie:$(this)});
        // });

        this.setInitPos();
        this.drawLines();
        this.setEvents();
      };

      Chapter.prototype.setInitPos = function(){
        // distribute elements arround the center
        this.geom.a = (360/_chapitres_len*this.i+this.geom.base_a)*Math.PI/180;

        // 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.setEvents = function(){
        //http://technify.me/user-experience/javascript/jquery/trigger-custom-events-with-jquery/
        // click to preview chapter
        $('h2.node-title, .field-name-field-partie:first>.field-name-field-vignette', this.$e)
          .on('click', this, function(e){
            e.stopPropagation();
            e.preventDefault();
            e.data.preview(e);
            return false;
          });

        $('.links a', this.$e)
          .on('click', this, function(e){
            e.stopPropagation();
            e.preventDefault();
            e.data.loadNode();
            return false;
          });
      };

      Chapter.prototype.move = function(){
        this.$e.css({ //.stop(true, false)
          translate:[_nav_pos.x, _nav_pos.y]
        });
        // $(e).transition({translate:[_nav_pos.x, _nav_pos.y]}, 200, 'out');
      };

      Chapter.prototype.preview = function(e){
        console.log('preview', this.i);

        for (var i = _chapitres_len - 1; i >= 0; i--) {
          if(i !== this.i)
            _chapters[i].closePreview();
        };

        var px, py;
        this.$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;
          }

          setTimeout(
            (function(e, px, py){
              return function(){
                $(e)
                  .css({
                    translate:[px, py],
                    // opacity:1
                  });
                }
            }(e, px, py)),
          10);

        }); // each $parties

        this.$e.addClass('previewed');
        this.animeLines();
      };

      Chapter.prototype.closePreview = function(){
        this.$e.removeClass('previewed')
          .find('.field-name-field-partie')
          .css({transform:"none"});
      };

      Chapter.prototype.drawLines = function(){
        for (var i = 0; i < 2; i++) {
          this.lines.push({
            $line:$("<div>").addClass('line', 'line-'+i).prependTo(this.$parties[i])
          });
        };
      };


      Chapter.prototype.animeLines = function(){
        this.linesAnimeCounter = 0;
        this.linesAnimeInterval = setInterval(
          (function(_this){
            return function(){
              // console.log("partie pos : ", _this.$parties.eq(2).position());

              // get the lines length
              var l, a, pos1, pos2;
              for (var i = 0; i < _this.lines.length; i++) {
                pos1 =  _this.$parties.eq(i).position();
                pos2 = _this.$parties.eq(i+1).position();

                l = Math.sqrt(
                  Math.pow(
                    pos2.left - pos1.left
                    ,2
                  )
                  +
                  Math.pow(
                    pos2.top - pos1.top
                    ,2
                  )
                );

                // get the rotation
                a = 180 / 3.14 * Math.acos((pos2.top - pos1.top) / l);
                if(pos2.left > pos1.left)
                  a *= -1;

                // console.log("a = "+a);
                _this.lines[i].$line.css({
                  'height':l,
                  rotate:a+"deg"
                });

              };


              // limit the naimation time
              _this.linesAnimeCounter ++;
              if(_this.linesAnimeCounter > (1000/_fps)*_this.linesAnimeTime)
                clearInterval(_this.linesAnimeInterval);
            };
          }(this)),
        _fps);

      };

      Chapter.prototype.loadNode = function(e){
        // console.log("Chapter :: open : nid", this.nid);
        $.getJSON(
          '/jee/chapter/'+this.nid,
          {},
          this.displayNode
        );
      };

      Chapter.prototype.displayNode = function(json, textstatus){
        console.log('Chapter :: displayNode : json', json);
      };

      Node.initialized = true;
    }

    this.init();

  };//Chapter


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



  init();
});





// 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');
//         });
//       }
//     });
// };