TP1 et TP2 terminés

js/button.js

@@ -0,0 +1,61 @@
+window.onload = main;
+var d = document;
+var container;
+var button;
+
+function main() {
+    console.log("JS loaded!");
+    container = d.getElementById("container");
+    addListeners(d.body, 'click', createbutton);
+}
+
+function addListeners(e, a, f) {
+    e.addEventListener(a, f);
+}
+
+class Button {
+    constructor(f) {
+        this.element = d.createElement("div");
+        this.element.id = "Button";
+        this.element.innerHTML = "<p>Button</p>";
+        container.appendChild(this.element);
+        addListeners(this.element, 'mouseover', HoverButton.applyShadow);
+        addListeners(this.element, 'mouseout', HoverButton.applyUnshadow);
+        addListeners(this.element, 'mouseout', HoverButton.applyUnpush);
+        addListeners(this.element, 'mousedown', PushButton.applyPush);
+        addListeners(this.element, 'mouseup', PushButton.applyUnpush);
+    }
+}
+
+class HoverButton extends Button {
+    constructor() {
+        super();
+    }
+    static applyShadow() {
+        button.element.style.boxShadow = "3px 3px 5px #6C5B7B";
+    }
+    static applyUnshadow() {
+        button.element.style.boxShadow = "none";
+    }
+}
+
+class PushButton extends Button {
+    constructor() {
+        super();
+    }
+    static applyPush(elem) {
+        button.element.style.backgroundColor = "#C06C84";
+    }
+    static applyUnpush(elem) {
+        button.element.style.backgroundColor = "#F67280";
+    }
+}
+
+function createbutton() {
+    console.log(container.children);
+    if(container.children.length == 0) {
+        button = new Button();
+        console.log("button created!");
+    }
+    d.body.removeEventListener("click", createbutton);
+}

js/canvas.js

@@ -0,0 +1,69 @@
+var canvas;
+var loupe;
+var img;
+var ratio;
+var topmargin;
+
+window.onload = function() {
+    canvas = document.getElementById("canvastp1");
+    var context = canvas.getContext("2d");
+    img = document.getElementById("ardeche");
+    var hRatio = canvas.width / img.width;
+    var vRatio = canvas.height / img.height;
+    ratio = Math.min(hRatio, vRatio);
+    topmargin = (canvas.height - img.height * ratio) / 2;
+    context.drawImage(img, 0, 0, img.width, img.height,
+        0, topmargin, img.width * ratio, img.height * ratio);
+    canvas.addEventListener('mousemove', displayMousePos, false);
+    canvas.addEventListener('mousemove', zoom, false);
+    canvas.addEventListener('mouseout', hide, false);
+
+    loupe = document.getElementById("loupe");
+    context = loupe.getContext("2d");
+    context.drawImage(img, 0, 0);
+};
+
+function displayMousePos(evt) {
+    var mousePos = getMousePos(canvas, evt);
+    var message = 'Mouse position: ' + mousePos.x + ', ' + mousePos.y;
+    console.log(message);
+}
+
+function zoom(evt) {
+    var mousePos = getMousePos(canvas, evt); /* get mouse position */
+    loupe.style.display = "inline"; /* make glass visible */
+
+    /* process x axis */
+    var canvasXMargin = window.getComputedStyle(canvas).getPropertyValue('margin-left');
+    canvasXMargin = canvasXMargin.substr(0, canvasXMargin.length - 2);
+    var marginLeft = Number(canvasXMargin) + mousePos.x + 15;
+    console.log('X: ' + marginLeft);
+    loupe.style.marginLeft = marginLeft + "px";
+
+    /* process y axis */
+    var marginTop = mousePos.y + 15;
+    loupe.style.marginTop = marginTop + "px";
+    var actualPos = mousePos.y - topmargin;
+    console.log('Y: ' + marginTop +
+        ', marginTop: ' + topmargin +
+        ', actualPos: ' + actualPos);
+
+    /* clear and redraw glass */
+    var context = loupe.getContext("2d");
+    context.clearRect(0, 0, loupe.width, loupe.height);
+    context.drawImage(img,
+        (mousePos.x - loupe.width / 8) / ratio, (actualPos - loupe.height / 8) / ratio,
+        loupe.width, loupe.height, 0, 0, loupe.width, loupe.height);
+}
+
+function getMousePos(canvas, evt) {
+    var rect = canvas.getBoundingClientRect();
+    return {
+        x: evt.clientX - rect.left,
+        y: evt.clientY - rect.top
+    };
+}
+
+function hide() {
+    loupe.style.display = "none";
+}

js/exo-faker.js

@@ -0,0 +1,79 @@
+window.onload = main;
+var ids;
+var nbIds = 500;
+var de;
+
+function main() {
+    ids = new Array();
+    de = document.getElementById("list");
+    var i;
+    faker.locale = "fr";
+    console.log(single_id);
+    for (i = 0; i < nbIds; ++i) {
+        var single_id = {
+            firstname: faker.name.firstName(),
+            lastname: faker.name.lastName(),
+            city: faker.address.city(),
+            job: faker.name.jobType()
+        };
+        ids.push(single_id);
+    }
+    displayIds();
+}
+
+function displayIds() {
+    var table = "<table><tr><th onclick=\"sortLName()\">Nom</th><th onclick=\"sortFName()\">Prénom</th><th onclick=\"sortCity()\">Ville</th><th onclick=\"sortJob()\">Métier</th></tr>";
+    for (i = 0; i < nbIds; ++i) {
+        table += "<tr><td>";
+        table += ids[i].lastname;
+        table += "</td><td>";
+        table += ids[i].firstname;
+        table += "</td><td>";
+        table += ids[i].city;
+        table += "</td><td>";
+        table += ids[i].job;
+        table += "</td></tr>";
+    }
+    table += "</table>";
+    de.innerHTML = table;
+}
+
+function sortLName() {
+    ids.sort(function(a, b) {
+        return compareString(a.lastname, b.lastname);
+    });
+    displayIds();
+}
+
+function sortFName() {
+    ids.sort(function(a, b) {
+        return compareString(a.firstname, b.firstname);
+    });
+    displayIds();
+}
+
+function sortCity() {
+    ids.sort(function(a, b) {
+        return compareString(a.city, b.city);
+    });
+    displayIds();
+}
+
+function sortJob() {
+    ids.sort(function(a, b) {
+        return compareString(a.job, b.job);
+    });
+    displayIds();
+}
+
+function compareString(a, b) {
+    var x = a.toLowerCase();
+    var y = b.toLowerCase();
+    if (x < y) {
+        return -1;
+    }
+    if (x > y) {
+        return 1;
+    }
+    return 0;
+}

js/square.js

@@ -0,0 +1,30 @@
+window.onload = main;
+
+var d = document;
+var de = d.documentElement;
+var offset = 0;
+var SIZE = 100;
+
+function main() {
+    console.log("JS loaded");
+    setInterval(frame, 1000.0 / 60.0);
+}
+
+function frame() {
+    var screenwidth = de.clientWidth;
+    if (offset >= (screenwidth)) {
+        offset = 0;
+    } else {
+        offset += 3;
+    }
+    var squares = de.getElementsByClassName("carre");
+    for (i = 0; i < squares.length; ++i) {
+        squares[i].style.marginLeft = offset + "px";
+    }
+    if (offset >= (screenwidth - SIZE)) {
+        squares[1].style.display = "inline";
+        squares[1].style.marginLeft = (offset - screenwidth) + "px";
+    } else {
+        squares[1].style.display = "none";
+    }
+}