internet-dhier-et-daujourd-hui-les-dangers-du-web/assets/js/app.js

var lang = "fr";
var dialogs;

var badChoise = 0;
var goodChoise = 0;

var screenHeight = window.innerHeight;
var screenWidth = window.innerWidth;

function setTime(ts) {
  var date = new Date(ts);
  $('.time').text(date.toLocaleString(navigator.language, {
    hour: '2-digit',
    minute: '2-digit'
  })).attr('datetime', date.getHours() + ':' + date.getMinutes());
  $('.date').text(date.toLocaleString(navigator.language, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })).attr('datetime', date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate());
  setTimeout(function () {
    setTime(Date.now());
  }, 1000);
}

setTime(Date.now());

function Window(settings) {

  // ATTRIBUTES

  this.id = Date.now();
  this.top = settings.top || 50;
  this.left = settings.left || 20;
  this.title = settings.title || 'New Window';
  this.close = settings.close !== undefined ? settings.close : true;
  this.draggable = settings.draggable !== undefined ? settings.draggable : true;
  this.content = settings.content || null;

  // METHODS

  this.setContent = function (content) {
     console.log(content);
     console.log(this.content);
    this.content = content || null;
    var $content = $('#' + this.id).find('.content');
    if (this.content) {
      this.content.forEach(function (item, index, array) {
        var fileitem = '' +
          '<div class="file-item">' +
            '<div class="icon ' + (item.type || '') + '"><i class="fa fa-4x fa-' + (item.icon || 'question') + '"></i></div>' +
            '<div class="label">' + (item.text || 'unknown') + '</div>' +
          '</div>';
        $content.append(fileitem);
      });
    }
  };

  // CONSTRUCTOR

  var html = '' +
    '<div id="' + this.id + '" class="window" style="top: ' + this.top + 'px; left: ' + this.left + 'px">' +
      '<div class="header">' +
        '<h1>' + this.title + '</h1>' +
        (this.close ? '<div class="close"><i class="fa fa-times"></i></div>' : '') +
      '</div>' +
      '<div class="content"></div>' +
    '</div>';

  $('main').append(html);
  this.setContent(this.content);
  
  var windowID = this.id;
  $('#' + this.id).find('.close').on('click', function () {
    $('#' + windowID).fadeOut(200, function () {
      $('#' + windowID).remove();
    });
  });

  if (this.draggable) {
    $('#' + this.id).draggable({
      handle: '.header'
    });
  }
}

/**
 * this function permit slide out lock screen
 */
$('.screensaver').on('click', function () {
  if($(this).hasClass('animated') == false){
      $(this).addClass('animated');
  }
  if($(this).hasClass('slideInDown')){
      $(this).removeClass('slideInDown');
  }
  $(this).addClass("slideOutUp");
});

/**
 * this is launch game
 */
$('.play').on('click', function(){
    //$('.overlay').fadeOut(500);
    $.ajax({
        url:'assets/dialogs/'+lang+'/dialogs.json',
        async: false,
        success: function(data) {
            console.log(data);
            //dialogs = JSON.parse(data);
            dialogs = data;
            prologue();
          }
    });
    $('.startMenu').fadeOut(500);
    
});

function prologue(){
    $(".dialogs").css("display", "block");
    typeWriter(dialogs.prologue, 0);
    $("#dialogsNext").on('click', function(){
        $("#dialogsNext").off('click');
        $('#dialogsNext').css('display', "none");
        $('.screensaver').addClass("changeMailClient")
        typeWriter(dialogs.prologueChangeComputer, 0);
        $("#dialogsNext").on('click', function(){
            $("#dialogsNext").off('click');
            $('.overlay').fadeOut(500);
             $(".dialogs").fadeOut(500);
             $('.changeMailClient').on('click', changeMailClient);
        })
    })
}

function changeMailClient(){
    $("#dialogsNext").off('click');
    $('#dialogsNext').css('display', "none");
    setTimeout(function(){
        $(".dialogs").css("display", "block");
        $('.overlay').fadeIn(500);
        typeWriter(dialogs.changeMailClient, 0);
    }, 600);
    $("#dialogsNext").on('click', function(){
        $("#dialogsNext").off('click');
        $('.overlay').fadeOut(500);
        $(".dialogs").fadeOut(500);
        $("#thunderbird").on('click', function(){
            goodChoise++;
            var w = new Window({
                top: screenHeight/5,
                left: screenWidth/4,
                title: 'Thunderbird',
                close: true,
                draggable: true,
                content: 'mail'
            });
        });
        $("#outlook").on('click', function(){
            badChoise++;
            var w = new Window({
                top: screenHeight/5,
                left: screenWidth/4,
                title: 'Outlook',
                close: true,
                draggable: true,
                content: 'mail'
            });
        });
    });
}

function typeWriter(text, n) {
  if (n < (text.length)) {
    $('#typewritter').html(text.substring(0, n+1));
    n++;
    setTimeout(function() {
      typeWriter(text, n)
    }, 35);
  }
  else{
      $('#dialogsNext').css('display', "block");
  }
}

/**
 * display new page to load expose
 */
$('#expose').on('click', function(){
    var startMenu = $(".startMenu");
    startMenu.css('height', '70%');
    startMenu.css('width', '70%');
    startMenu.html($('.startButton'));
    $('.startButton').addClass('top');
    $('#play').html('Écouter l\'interview');
    $('#play').attr('data-action', 'play');
    $('.expose').html('Télécharger l\'interview');
    $('.expose').on('click', function(){
        window.location.href = 'assets/audio/interview.mp3';
    });
    var presentation = "Durant cette interview, Genma va traiter plusieurs sujets concernant internet. Des sites dédié à internet explorer car il avait le monopole à une époque (et oui !) aux systèmes décentralisé, Nous passerons aussi sur les aspects qu'à internet aujourd'hui et le danger qu'il apporte et apportera sur le long terme";
    $('.startMenu').append('<div class="container" style="padding-top:5.7vw;color:#2e3639;"><h1>Interview de Genma de Framasoft</h1><p style="font-size: 1rem; line-height: 1.6vw">'+presentation+'.</p></div>');
    $('body').append('<audio id="audioExpose" data-play="pause" controls preload="none"><source src="assets/audio/interview.mp3" type="audio/mpeg"></audio>');
    $('[data-action="play"]').on('click', function(){
        var audioExpose = $("#audioExpose");
        if(audioExpose.data('play') === "pause"){
            audioExpose.trigger('play');
            audioExpose.attr('data-play', 'play');
        }
        else{
            audioExpose.trigger('pause');
            audioExpose.attr('data-play', 'pause');
        }
    });
    /*
     * compatible only with firefox...
    $('body').append('<div id="player"><div id="waveform"></div></div>');
    
    var wavesurfer = Object.create(WaveSurfer);
        // Init
    wavesurfer.init({
        container: document.querySelector('#waveform'),
        waveColor: '#3b75ad',
        progressColor: '#304559',
        backend: 'WebAudio',
        height: 85,
        barWidth: 1,
    });
    // Load audio from URL
    wavesurfer.load('assets/audio/interview.mp3');

    document.querySelector(
        '[data-action="play"]'
    ).addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
    */
});