https://trydraw.com/js/landing.js

1$(window).on("load", function(){
2    $('video').trigger('play');
3})
4
5var canvas = document.getElementById('imageCanvas');
6var ctx = canvas.getContext('2d');
7
8/* Attach circle to cursor that shows brush & eraser size */
9$(window).on("load", function(){
10    // $("button, img, p, a, span, video").hover(function(){
11    //     $('.cursorSize').css("opacity","1");
12    // }, function(){
13    //     $('.cursorSize').css("opacity","0");
14    // })
15    $("canvas, .lessonImageLargePrev").hover(function(){
16        $('.cursorSize').css("opacity","1");
17        $('.cursorSize').css("width","7px");
18        $('.cursorSize').css("height","7px");
19    }, function(){
20        $('.cursorSize').css("opacity","0");
21    })
22})
23var mouseX, mouseY;
24$(document).mousemove(function(e) {
25    mouseX = e.pageX;
26    mouseY = e.pageY;
27
28    /* Attach cursor visualizer to mouse */
29    let cursor = $('.cursorSize');
30    cursor.css({left: (mouseX - cursor.outerWidth() / 2), top: mouseY  - (cursor.outerHeight() / 2) - 1});
31}).mouseover(); // call the handler immediately
32
33
34/* Click through lesson categories */
35$('.liveLessonDemos ul li').click(function(){
36    ctx.clearRect(0, 0, canvas.width, canvas.height);
37    canvas.width = canvas.width;
38    $('.liveLessonDemos ul li').removeClass("activeLessonChoice");
39    $('.liveLessonDemos ul li').css("opacity","0.3");
40    $(this).addClass("activeLessonChoice");
41    $(this).css("opacity","1");
42
43    $('.lessonImageLargePrev').attr("src", `images/${$(this).attr("data-Group")}/${$(this).attr("data-img")}.svg`);
44})
45
46/* Toggle visibility for landing page reference */
47let hidden = false;
48$('.toggleReference').click(function(){
49    if(!hidden){
50        $(this).attr("src", "./images/eye-hidden.svg");
51        $('.lessonImageLargePrev').css("opacity","0");
52        $('.hStartLesson, .demoTextInstructions').css("display","none");
53        hidden = true;
54    }
55    else if(hidden){
56        $(this).attr("src", "./images/eye-visible.svg");
57        $('.lessonImageLargePrev').css("opacity","1");
58        $('.hStartLesson, .demoTextInstructions').css("display","block");
59
60        hidden = false;
61    }
62})
63
64//
65var imageLoader = document.getElementById('imageLoader');
66imageLoader.addEventListener('change', handleImage, false);
67
68canvas.width = 1250;
69canvas.height = 1250;
70
71function handleImage(e) {
72
73  var reader = new FileReader();
74
75  reader.onload = function(event) {
76
77    var img = new Image();
78
79    img.onload = function() {
80
81      canvas.width = window.innerWidth * 0.5;
82      canvas.height = window.innerHeight;
83
84      var hRatio = canvas.width / img.width;
85      var vRatio = canvas.height / img.height;
86      var ratio = Math.min(hRatio, vRatio);
87      var centerShift_x = (canvas.width - (img.width * ratio)) / 2;
88      var centerShift_y = (canvas.height - (img.height * ratio)) / 2;
89      ctx.clearRect(0, 0, canvas.width, canvas.height);
90      ctx.drawImage(img, 0, 0, img.width, img.height,
91        centerShift_x, centerShift_y, img.width * ratio, img.height * ratio);
92    }
93
94    img.src = event.target.result;
95  }
96  reader.readAsDataURL(e.target.files[0]);
97}
98
99var isDrawing;
100var rect = canvas.getBoundingClientRect();
101var offsetX = rect.left;
102var offsetY = rect.top;
103
104var temp = document.getElementById('imageCanvas');
105
106canvas.onmousedown = function(e) {
107  isDrawing = true;
108
109  ctx.moveTo((e.clientX - offsetX)/(1250/temp.width), (e.clientY - offsetY)/(1250/temp.height));
110};
111canvas.onmousemove = function(e) {
112  if (isDrawing) {
113    ctx.lineTo((e.clientX - offsetX)/(1250/temp.width), (e.clientY - offsetY)/(1250/temp.height));
114    ctx.lineWidth = 3;
115    ctx.stroke();
116  }
117};
118canvas.onmouseup = function() {
119  isDrawing = false;
120};
121window.addEventListener("scroll",function(){
122 rect = canvas.getBoundingClientRect();
123 offsetX = rect.left;
124 offsetY = rect.top;
125})
126
127/* User clicks on start lesson from landing page */
128$('.hStartLesson').click(function(){
129    let lesson = {
130        "Hands": "Facing_Down",
131        "Eyes": "Front_view",
132        "Lips": "LipsLeft",
133        "Ears": "Left Ear",
134        "Nose": "Side View",
135        "Feet": "Bottom",
136        "Head": "FrontLoomis",
137        "Face": "FemaleVariationA",
138        "Pose": "Dynamic",
139    }
140    let activeLesson = $('.activeLessonChoice').text();
141    let lessonName = lesson[activeLesson];
142    window.location.href = `app.php?category=${activeLesson}&lesson=${lessonName}`;
143})
144
145/* Drop down registration page */
146$(document).ready(function(){
147    /* Check if url contains registration attempt, show register page */
148    if($('.loginErrorMessage').is(":visible")){
149        $('.registrationForm').css("height","100%");
150
151        $('.registrationForm').animate({
152            height: "100%"
153        }, 700, function(){
154            // Hide all elements on DOM exception registration page
155            $("body").children().not(".registrationForm, .loginErrorMessage").hide();
156            $("body").css("height","auto");
157            $('.registrationContainer').fadeIn(500).css("display","flex");
158        })
159    }
160
161    $('.registrationContainer').hide();
162
163    $('.signupHomepage').click(function(){
164        $('body').css("overflow","hidden");
165        /* Slide down registration sequence */
166        $('.registrationForm').animate({
167            height: "100%"
168        }, 700, function(){
169            // Hide all elements on DOM exception registration page
170            $("body").children().not(".registrationForm, .loginErrorMessage").hide();
171            $("body").css("height","auto");
172            $('.closeRegisterFullscreenView').fadeIn(500);
173            $('.registrationContainer').fadeIn(500).css("display","flex");
174        })
175    })
176
177    /* User closes fullscreen register view */
178    $('.closeRegisterFullscreenView').click(function(){
179        $('.registrationContainer').hide();
180        $('body').css("overflow","hidden");
181        /* Slide down registration sequence */
182        $('.registrationForm').animate({
183            height: "0%"
184        }, 700, function(){
185            // Hide all elements on DOM exception registration page
186            $("body").children().not(".registrationForm, .loginErrorMessage").show();
187            $("body").css("height","3000px");
188            $('body').css("overflow-y","visible");
189            $('.closeRegisterFullscreenView').hide();
190        })
191    })
192
193    // Redirect to trydraw app from registration page
194    $('#goToTDApp').click(function(){
195        $('.registrationContainer').children().not(".loadingLoader").fadeOut(500);
196        setTimeout(() => {
197            $(".loadingLoader").fadeIn(200);
198        }, 500);
199        setTimeout(() => {
200            window.location.href = `app.php`;
201        }, 1500);
202    })
203})