Unit 7 In the kitchen
Lesson 1
Page: 31
All
"); $("#background-blur").css("background", 'url("' + input.backgroundBlur + '") center center / 100% auto no-repeat'); $("#background-blur").css("filter", 'blur(12px)'); } // notHoverable $(".not-interactive").css("pointer-events", "none"); } var controllerElement = document.querySelector('[ng-controller="ListenAndRecordEffectSpineController"]'); var scope = angular.element(controllerElement).scope(); setTimeout(function() { $(".sprite").removeClass("hidden"); $(".sprite").removeClass("ng-hide"); $(".spine").each(function() { initSpine($(this)); }); default_text_size = 1; default_text_size = Math.round((default_text_size /630)*$("#exercise_container").height()*10)/10; executeZoomSelectBox(default_text_size); }, 100) $("#title-image-exercise").css({position: 'absolute'}); $("#title-image-exercise").addClass("title-image-exercise-background"); $("#exercise-name-container").addClass("title-image-exercise-background"); $("#img_title_content").css("max-height", ""); $("#img_title_content").height($("#content-bound").height() * 0.12); $("#main-container").height("100%"); $("#background-image").css("background", "url('" + scope.input.backgroundUrl + "')"); $("#background-image").css("background-size", "auto 100%"); $("#background-image").css("background-repeat", "no-repeat"); $("#background-image").css("background-position", "center"); $("#exercise-content").attr('style', function(i,s) { return (s || '') + 'height: ' + $("#exercise_container").height() + 'px !important;' }); $("#exercise-content").css("margin-bottom", ""); $("#exercise-content").width($("#content-bound").width()); var pic_real_width, pic_real_height; $("#img-temp").attr("src", scope.input.backgroundUrl).load(function() { pic_real_width = this.width; pic_real_height = this.height; $(".image-container").css({width: $("#exercise-content").outerHeight() * pic_real_width / pic_real_height}); setPositionObject(pic_real_width, pic_real_height); }); $(window).resize(function() { $("#img_title_content").height($("#content-bound").height() * 0.12); $("#exercise-content").attr('style', function(i,s) { return (s || '') + 'height: ' + $("#exercise_container").height() + 'px !important;' }); $("#exercise-content").css("margin-bottom", ""); $("#exercise-content").width($("#content-bound").width()); $(".image-container").css({width: $("#exercise-content").outerHeight() * pic_real_width / pic_real_height}); setPositionObject(pic_real_width, pic_real_height); setTimeout(function() { default_text_size = 1; default_text_size = Math.round((default_text_size /630)*$("#exercise_container").height()*10)/10; executeZoomSelectBox(default_text_size); }) }) if(input.audio) { audio.src = input.audio; audio.onended = function() { audio.currentTime = 0; setTimeout(function(){ utilityHover.container.css("pointer-events", ""); }, 100); $("#pause").addClass("hidden"); $("#play").removeClass("hidden"); } if (!input.hidePlay) { $('#play').removeClass("hidden"); } else { audio.src = ''; } var isRunningSpines = []; for (var i = 0; i < input.objects.length; i++) isRunningSpines.push(false); $(document).on('click', '#play', function() { utilityHover.container.css("pointer-events", "none"); audio.play(); audio.ontimeupdate = function() { utilityHover.objects.removeClass("shadow"); utilityHover.objects.each(function() { var inx = parseInt($(this).data("index")); if($(this).data("begin") && $(this).data("end") && $(this).data("begin") < audio.currentTime && $(this).data("end") > (audio.currentTime - 1)) { $(this).addClass("shadow"); if ($(this).hasClass("spine") && !isRunningSpines[inx]) { runSpine($(this)); isRunningSpines[inx] = true; if (input.highlightonaudio && !$(this).hasClass("hover-spine")) $(this).addClass("hover-spine"); } } else { isRunningSpines[inx] = false; } }); } $("#play").addClass("hidden"); $("#pause").removeClass("hidden"); }); $(document).on('click', '#pause', function() { audio.pause(); setTimeout(function(){ utilityHover.container.css("pointer-events", ""); utilityHover.objects.removeClass("shadow"); }, 100); $("#pause").addClass("hidden"); $("#play").removeClass("hidden"); }); } $(document).on('click', '#text_on_2', function() { scope.hideText = true; $("#text_on_2").addClass("hidden"); $("#text_off_2").removeClass("hidden"); $("#background-image").css("background", "url('" + scope.input.backgroundHideTextUrl + "')"); $("#background-image").css("background-size", "auto 100%"); $("#background-image").css("background-repeat", "no-repeat"); $("#background-image").css("background-position", "center"); scope.$applyAsync(); }); $(document).on('click', '#text_off_2', function() { scope.hideText = false; $("#text_off_2").addClass("hidden"); $("#text_on_2").removeClass("hidden"); $("#background-image").css("background", "url('" + scope.input.backgroundUrl + "')"); $("#background-image").css("background-size", "auto 100%"); $("#background-image").css("background-repeat", "no-repeat"); $("#background-image").css("background-position", "center"); scope.$applyAsync(); }); }); function initSpine(that) { var controllerElement = document.querySelector('[ng-controller="ListenAndRecordEffectSpineController"]'); var scope = angular.element(controllerElement).scope(); var object_index = parseInt(that.data("index")); var object_id = that.attr("id"); var object_index = object_id.split("-")[1]; var temp_object = scope.input.objects[object_index]; if (temp_object.spine && temp_object.spine.trim() != "" && temp_object.spineWidth && temp_object.spineHeight && temp_object.spineX && temp_object.spineY) { scope.spine[object_index] = new UtilitySpine("#" + object_id, temp_object.spineWidth, temp_object.spineHeight, temp_object.spineX, temp_object.spineY, temp_object.spine, temp_object.spineZoomX, temp_object.spineZoomY); scope.$applyAsync(); // $("#" + object_id).data("ratio", $("#img_" + object_index).height()/$("#img_" + object_index).width()); // $("#" + object_id).height($("#img_" + object_index).height()); $("#img_" + object_index).addClass("hidden"); } else { $("#" + object_id).addClass("hidden"); } } function runSpine(that) { var controllerElement = document.querySelector('[ng-controller="ListenAndRecordEffectSpineController"]'); var scope = angular.element(controllerElement).scope(); var object_index = parseInt(that.data("index")); var object_id = that.attr("id"); var object_index = object_id.split("-")[1]; var temp_object = scope.input.objects[object_index]; if (temp_object.spine && temp_object.spine.trim() != "" && temp_object.spineWidth && temp_object.spineHeight && temp_object.spineX && temp_object.spineY) { var runTimeout = temp_object.runtime || 1000; clearTimeout(scope.runSpine[object_index]); scope.spine[object_index].play("touch", false); if (!input.highlightonaudio) that.css("filter", "none") scope.runSpine[object_index] = setTimeout(function() { if (input.highlightonaudio) { that.removeClass("hover-spine"); } else that.css("filter", ""); scope.spine[object_index].play("idle", true); scope.$applyAsync(); }, runTimeout); } else { that.parent().addClass("animate__animated animate__bounce"); } } function setPositionObject(pic_real_width, pic_real_height) { var controllerElement = document.querySelector('[ng-controller="ListenAndRecordEffectSpineController"]'); var scope = angular.element(controllerElement).scope(); var img_container_width = $(".image-container").width(); var img_container_height = $(".image-container").height(); if (img_container_width < pic_real_width) { var scale_height_const = pic_real_height/img_container_height; var temp_width = scale_height_const * img_container_width; var half_width_hidden = (pic_real_width - temp_width) / 2; for (var i = 0; i < scope.input.objects.length; i++) { scope.input.objects[i].width = scope.origin_objects[i].width * ((pic_real_width / scale_height_const) / img_container_width); var temp_x_px = pic_real_width * scope.origin_objects[i].x / 100; scope.input.objects[i].x = (1 - ((half_width_hidden + temp_width - temp_x_px) / temp_width)) * 100; } for (var i = 0; i < scope.input.recorders.length; i++) { scope.input.recorders[i].width = scope.origin_recorders[i].width * ((pic_real_width / scale_height_const) / img_container_width); var temp_x_px = pic_real_width * scope.origin_recorders[i].x / 100; scope.input.recorders[i].x = (1 - ((half_width_hidden + temp_width - temp_x_px) / temp_width)) * 100; } } else { scope.input.objects = scope.origin_objects; scope.input.recorders = scope.origin_recorders; } scope.$applyAsync(); } // border cho chu function calculateStrokeTextCSS(steps, strokeWidth, strokeColor) { var css = ""; for (var i = 0; i < steps; i++) { var angle = (i * 2 * Math.PI) / steps; var cos = Math.round(10000 * Math.cos(angle)) / 10000; var sin = Math.round(10000 * Math.sin(angle)) / 10000; css += "calc(" + strokeWidth + " * " + cos + ") calc(" + strokeWidth + " * " + sin + ") 0 " + strokeColor + ","; } return css.slice(0, -1); } function executeZoomSelectBox(z) { var controllerElement = document.querySelector('[ng-controller="ListenAndRecordEffectSpineController"]'); var scope = angular.element(controllerElement).scope(); var resizeContainers = $(".word"); var newZ = (z > 1) ? 1 : z; var newSize = { letterSpacing: 7 * newZ, textShadow: 5 * newZ, textShadowIncrese: 7 * newZ, }; scope.textShadow = newSize.textShadow; scope.textShadowIncrese = newSize.textShadowIncrese; resizeContainers.css({ "letter-spacing": newSize.letterSpacing + 'px', "text-shadow": calculateStrokeTextCSS(16, newSize.textShadow + "px", "white"), }); }
×Vui lòng kiểm tra
kết nối mạng!
Sách mềm
Phiên làm việc hết hạn.
Vui lòng đăng nhập để tiếp tục!
Sách mềm
Vui lòng sử dụng chế độ toàn màn hình
Sách mềm
Vui lòng đăng nhập để sử dụng tính năng này!
{{note.updatedAt | date:'dd/MM/yyyy, hh:mm' }}
Note
Font:
Typing text
Font:
'). appendTo($('body')). delay(2000). animate({opacity:0}, 2000, function() { $(this).remove(); }); } total_noti_time++; } } if (!(screen.width === window.innerWidth) && window.location.href.indexOf("ms_exercises") == -1 ) { setInterval(function() { var lastActionTime = document.cookie.replace(/(?:(?:^|.*;\s*)lastActionTime\s*\=\s*([^;]*).*$)|^.*$/, "$1"); if(lastActionTime) { lastActionTime = new Date(lastActionTime); var current_time = new Date(); var diff_time = Math.floor((current_time - lastActionTime) / (1000)); if (diff_time >= 300) { notiFullScreen(); var today = new Date(); document.cookie = 'lastActionTime' + '=' + today } } else { notiFullScreen(); var today = new Date(); document.cookie = 'lastActionTime' + '=' + today } $(".exit-message").mouseover(function(){ $(".exit-message").remove(); }); }, 500); } $(document).on('keydown', function(e) { if (e.keyCode == 122) { $(".exit-message").remove() } }); }); var noteApp = angular.module("NoteTool", ["ngSanitize"]); noteApp.controller('NoteToolController', function($scope, $http) { // setTimeout(function() { // $("#tool-bar-glossary > a").on("click", function() { // // }) // }, 1500) function go_full_screen(){ var elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } } // init canvas tool var paintToolCustom; setTimeout(function(){ var isBlind = false; paintToolCustom = PaintToolCustom(); // var exercise_id = parseInt(location.href.split("/exercises/")[1].split("/")[0]); paintToolCustom.init = function(selector, backgroundUrl, suggestUrl) { var footer_height = $("#interact-container").height(); this.textArea.classList.add("text-tool") this.container = $(selector).first(); this.container.addClass("paint-tool"); this.brushTool = $("
"), this.brush_div = $("
"); // this.tool_div = $("
Click here to move
") this.highlightTextButton = $("
"); this.lineButton = $("
"); this.clearDiv = $("
"); this.timerButton = $("
"); this.undoButton = $("
"); this.redoButton = $("
"); this.noteButton = $("
"); this.noteDiv = $(""); // this.eraserSizeListButton.append(this.eraserSizeButton1, this.eraserSizeButton2, this.eraserSizeButton3, this.eraserSizeButton4); // this.eraserButton.append(this.eraserSizeListButton); // this.brushSizeListButton.append(this.brushSizeButton1, this.brushSizeButton2, this.brushSizeButton3, this.brushSizeButton4); // this.brushButton.append(this.brushSizeListButton); this.canvasContainer.append(this.bgCanvas, this.mainCanvas, this.tempCanvas, this.textArea); $(this.textArea).hide(); this.brush_div.append(this.brushButton, this.highlightTextButton, this.eraserButton, this.lineButton, this.rectangleButton, this.ellipseButton, this.brushSizeButton, this.colorBoardButton,this.clearDiv, this.undoButton, this.redoButton); // this.tool_div.append(this.zoomButton, this.rectangleFillButton, // this.rectangleShowButton, this.highlightButton, this.textButton, this.noteButton) this.clearDiv.on("click", function() { paintToolCustom.clear(); }); // $("#blind_off").css("left", $("#blind").css("left")); // $("#blind_off").css("position", "absolute"); $("#exit_full_screen").css("left", $("#zoom_fit").css("left")); $("#exit_full_screen").css("position", "absolute"); $("#blind").on("click", function() { isBlind = true; $("#blind").toggleClass("hidden"); $("#blind_off").toggleClass("hidden"); if($('.exercise-drawing-board').hasClass('hidden')) { $('.exercise-drawing-board').removeClass('hidden'); } $('#paint_div').addClass('hidden'); $('#tool_div').addClass('hidden'); paintToolCustom.clearTemp(); paintToolCustom.fillFloodAll(); }); $("#blind_off").on("click", function() { paintToolCustom.clearTemp(); $("#blind").toggleClass("hidden"); $("#blind_off").toggleClass("hidden"); $('.exercise-drawing-board').toggleClass('hidden'); $('#paint_div').addClass('hidden'); $('#tool_div').addClass('hidden'); }); this.container.append(this.canvasContainer, this.closeControlPanelButton, this.noteDiv); $('#paint_header_close').on('click', function() { $('.exercise-drawing-board').addClass('hidden'); $('#paint_div').addClass('hidden'); $('#pain_tool').removeClass('active-tool') }); $('#tool_header_close').on('click', function() { $('.exercise-drawing-board').toggleClass('hidden'); }) if (document.getElementById("paint_div")) { dragElement(document.getElementById("paint_div")); } if (document.getElementById("timediv")) { dragElement(document.getElementById("timediv")); } if (document.getElementById("zoom_bar2")) { dragElement(document.getElementById("zoom_bar2")); } if (document.getElementById("addition_bar2")) { dragElement(document.getElementById("addition_bar2")); } function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { // if present, the header is where you move the DIV from: document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; document.getElementById(elmnt.id + "header").ontouchstart = dragMouseDown; } else { // otherwise, move the DIV from anywhere inside the DIV: elmnt.onmousedown = dragMouseDown; elmnt.ontouchstart = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; if (e.touches && e.touches[0]) e = e.touches[0]; // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; document.ontouchend = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; document.ontouchmove = elementDrag; } function elementDrag(e) { e = e || window.event; if (e.touches && e.touches[0]) e = e.touches[0]; // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: var top = elmnt.offsetTop - pos2; if (top < $("#exercise_container").height() * -1 - 5) top = $("#exercise_container").height() * -1; if (top > $("#"+ elmnt.id).height() * -1 - 5) top = $("#"+ elmnt.id).height() * -1; var left = elmnt.offsetLeft - pos1; if (left < $("#exercise_container").position().left * -1 - 5) left = $("#exercise_container").position().left * -1; if (left > ($("#exercise_container").width() - $("#"+ elmnt.id).width() + $("#exercise_container").position().left) + 5) { left = $("#exercise_container").width() - $("#"+ elmnt.id).width() + $("#exercise_container").position().left + 5; } elmnt.style.top = top + "px"; elmnt.style.left = left + "px"; elmnt.style.right = "unset" } function closeDragElement() { // stop moving when mouse button is released: document.onmouseup = null; document.onmousemove = null; document.ontouchmove = null; document.ontouchend = null; } } if (document.getElementById("note_div")) { dragElement(document.getElementById("note_div")); } this.bgCanvas.width = this.bgCanvas.offsetWidth; this.bgCanvas.height = this.bgCanvas.offsetHeight - footer_height - 6; this.mainCanvas.width = this.mainCanvas.offsetWidth; this.mainCanvas.height = this.mainCanvas.offsetHeight - footer_height - 6; this.tempCanvas.width = this.tempCanvas.offsetWidth; this.tempCanvas.height = this.tempCanvas.offsetHeight - footer_height - 6; this.ctx = this.mainCanvas.getContext("2d"); if(backgroundUrl) { this.loadImage(this.bgCanvas, backgroundUrl); } this.setToolButtonEvent(); this.setCanvasEvent(); var $this = this; $(window).on('load', function() { $(window).on("resize", function() { $this.bgCanvas.width = $this.bgCanvas.offsetWidth; $this.bgCanvas.height = $this.bgCanvas.offsetHeight - footer_height - 6; var imageObject = new Image(); imageObject.src = $this.mainCanvas.toDataURL(); $this.mainCanvas.width = $this.mainCanvas.offsetWidth; $this.mainCanvas.height = $this.mainCanvas.offsetHeight - footer_height - 6; $this.tempCanvas.width = $this.tempCanvas.offsetWidth; $this.tempCanvas.height = $this.tempCanvas.offsetHeight - footer_height - 6; imageObject.onload = function() { $this.mainCanvas.getContext('2d').clearRect(0, 0, $this.mainCanvas.width, $this.mainCanvas.height); $this.mainCanvas.getContext('2d').drawImage(imageObject, 0, 0, $this.mainCanvas.width, $this.mainCanvas.height); } }); }); $(window).on("orientationchange", function() { $this.bgCanvas.width = $this.bgCanvas.offsetWidth; $this.bgCanvas.height = $this.bgCanvas.offsetHeight; $this.mainCanvas.width = $this.mainCanvas.offsetWidth; $this.mainCanvas.height = $this.mainCanvas.offsetHeight; $this.tempCanvas.width = $this.tempCanvas.offsetWidth; $this.tempCanvas.height = $this.tempCanvas.offsetHeight; $this.clear(); if(backgroundUrl) { $this.loadImage($this.bgCanvas, backgroundUrl); } $this.redoStack = []; $this.undoStack = []; }); } var selecting = false; var current_scroll; var content_bound_style; var exercise_name_container_style = ""; $('#zoom-book').on('click',function() { if(!$("#paint_div").hasClass("hidden")) $("#paint_header_close").click(); $("#title-image-exercise").toggleClass("hide-title"); $("#exercise-name-container").toggleClass("hide-title"); $('#zoom-book').toggleClass("active-tool"); if ($('#zoom-book').hasClass("active-tool")) { var adjust_tool = ["highlight", "rectangle-fill", "rectangle-show"]; for (var i = 0; i < adjust_tool.length; i++) { $("#" + adjust_tool[i]).removeClass("active-tool"); } paintToolCustom.clear(); if((parseFloat($('#layout-module')[0].style.zoom) > 1) || document.getElementById("zoom_div")){ exitZoom(); } createZoom(); } else { exitZoom(); } }) var draggingZoom = false; var startDX; var startDY; var layout_pageX; var layout_pageY; var start_move = false; var draggingMode = false; var draggingStatus = false; function createZoom() { $('#zoom_icon').addClass('hidden'); $('#off_zoom_icon').removeClass('hidden'); $('#zoom_fit').css('display', 'none'); // $('#zoom_in_text').css('display', 'none'); // $('#zoom_out_text').css('display', 'none'); $('#disable_zoom').css('display', 'none'); var element = document.createElement('div'); element.id = "zoom_div"; element.style.width = document.getElementById("content-bound").scrollWidth + "px"; element.style.height = (document.getElementById("content-bound").scrollHeight - $("#interact-container").height()) + "px"; element.style.position = 'absolute'; element.style.top = '0px'; element.style.zIndex = 9999; element.style.background = 'rgba(210, 210, 210, 0.3)'; document.getElementById('content-bound').appendChild(element); var first, second; var waiting; $('#zoom_div').on('mousedown',function(e) { if (!first) { first = {x: e.offsetX, y: e.offsetY, layout_pageX: e.pageX, layout_pageY: e.pageY}; markPoint('content-bound', first.x, first.y); } }) $('#zoom_div').on('touch',function(e) { var touch = e.touches[0]; var x = touch.clientX - document.getElementById("exercise_container").offsetLeft; var y = touch.clientY - document.getElementById("exercise_container").offsetTop; if (!first) { first = {x: x, y: y, layout_pageX: touch.pageX, layout_pageY: touch.pageY}; markPoint('content-bound', first.x, first.y); } }) $('#zoom_div').on('mousemove',function(e) { if (first && !waiting) { second = {x: e.offsetX, y: e.offsetY, layout_pageX: e.pageX, layout_pageY: e.pageY}; markArea('content-bound', first, second); } }) document.getElementById("zoom_div").addEventListener('touchmove', function(e) { var touch = e.touches[0]; var x = touch.clientX - document.getElementById("exercise_container").offsetLeft; var y = touch.clientY - document.getElementById("exercise_container").offsetTop; if (!first) { first = {x: x, y: y, layout_pageX: touch.pageX, layout_pageY: touch.pageY}; markPoint('content-bound', first.x, first.y); } else { if (first && !waiting) { second = {x: x, y: y, layout_pageX: touch.pageX, layout_pageY: touch.pageY}; markArea('content-bound', first, second); } } }); $('#zoom_div').on('mouseup touchend',function(e) { var exercise_name_height = 0; if ($("#title-image-exercise").css('position') != "absolute") { exercise_name_height = $("#title-image-exercise").height(); if (!exercise_name_height) { exercise_name_height = $("#exercise-name-container").height(); } } if(first && second) { var self = this; waiting = true; setTimeout(function() { content_bound_style = $('#content-bound').attr('style'); if ($('#exercise-name-container').attr('style')) { exercise_name_container_style = $('#exercise-name-container').attr('style'); } var new_width = Math.abs(first.x - second.x); var new_height = Math.abs(first.y - second.y); var ratio_x = $('#content-bound').outerWidth() / new_width; var ratio_y = $('#content-bound').outerHeight() / new_height; var ratio = ratio_x < ratio_y ? ratio_x : ratio_y; var x = first.x < second.x ? first.x : second.x; var y = first.y < second.y ? first.y : second.y; layout_pageX = first.layout_pageX < second.layout_pageX ? first.layout_pageX : second.layout_pageX; layout_pageY = first.layout_pageY < second.layout_pageY ? first.layout_pageY : second.layout_pageY; var temp_height = $('#exercise-name-container').height(); var temp_width = $('#exercise-name-container').width(); $('#exercise-content').css('width', $('#exercise-content').outerWidth() + "px"); $('#exercise-content').css('height', $('#exercise-content').outerHeight() + "px !important"); $('#layout-module').css('height', $('#layout-module').height()); $('#exercise-name-container').css('width', temp_width); $('#exercise-name-container').css('min-width', temp_width); $('#exercise-name-container').css('height', temp_height); // $('#exercise-name-container').css('transform', 'scale(' + ratio + ')'); var height = (ratio == ratio_x) ? ((new_height * ratio) + 'px!important') : ''; $('#content-bound').css('height', height); $('#content-bound').css('width', (new_width * ratio) + 'px!important'); $('#content-bound').css('margin-right', 'auto') $('#content-bound').css('margin-left', 'auto') $('#content-bound').css('border', '2px solid red') $('#content-bound').css('background-size', ratio * 100 + '%'); var top = y - exercise_name_height; if ((y - exercise_name_height) < 0) { top = 0; } var background_position = 'left ' + (x * ratio * -1 + 'px top ') + (y) * ratio * -1 + 'px'; $('#content-bound').css('background-position', background_position) // $('#content-bound').attr('style', 'height: ' + height + ';' + // 'width: ' + (new_width * ratio) + 'px!important;' + // 'margin-right: auto;' + // 'margin-left: auto;' + // 'border: 2px solid red;' + // 'overflow: hidden;'); current_scroll = $('#content-bound').scrollTop(); // $("#content-bound").animate({ scrollTop: (y - (exercise_name_height)) * ratio / 2 }, "slow"); $("#title-image-exercise").addClass("hidden"); $("#exercise-name-container").addClass("hidden"); var temp_height = $("#content-bound").height() - $("#layout-module").height(); var newDy = Math.abs(top * ratio ) * - 1; if ((y - exercise_name_height) < 0) { top = exercise_name_height - y; newDy = top * ratio; } var newDx = Math.abs(x * ratio) * - 1; createExitZoomButton('content-bound', newDx, newDy); $('#layout-module').css('transform', 'translate(' + newDx + 'px, ' + newDy + 'px) ' + 'scale(' + ratio + ')'); $('#layout-module').css('transform-origin', 'left top'); $('
', {'class': 'exit-message-noti'}). html('
Nhấn F2 để bật/tắt chế độ di chuyển nội dung bài học
'). appendTo($('body')). delay(2000). animate({opacity:0}, 2000, function() { $(this).remove(); }); // $('#content-bound').scrollLeft(x * ratio); $(self).off('click'); $('.mark-area').remove(); $(self).remove(); start_move = false; startDX = newDx; startDY = newDy; draggingMode = true; addDraggingEvent(); document.addEventListener("keydown", event => { if (event.isComposing || event.keyCode === 113) { $('.exit-message').remove(); if (draggingMode && !draggingStatus) { addDraggingEvent(); $('
', {'class': 'exit-message-noti'}). html('
Đã bật chế độ di chuyển nội dung bài học
'). appendTo($('body')). animate({opacity:0}, 2000, function() { $(this).remove(); }); } else { $('
', {'class': 'exit-message-noti'}). html('
Đã tắt chế độ di chuyển nội dung bài học
'). appendTo($('body')). animate({opacity:0}, 2000, function() { $(this).remove(); }); $('#layout-module').unbind("mousedown"); draggingStatus = false; } } }); $(document).on('click', '.exit-zoom-btn', function() { $('.exit-message').remove(); if (draggingMode && !draggingStatus) { addDraggingEvent(); $('
', {'class': 'exit-message-noti'}). html('
Đã bật chế độ di chuyển nội dung bài học
'). appendTo($('body')). animate({opacity:0}, 2000, function() { $(this).remove(); }); $(this).removeClass("fa-ban").addClass("fa-arrows"); } else { $('
', {'class': 'exit-message-noti'}). html('
Đã tắt chế độ di chuyển nội dung bài học
'). appendTo($('body')). animate({opacity:0}, 2000, function() { $(this).remove(); }); $('#layout-module').unbind("mousedown"); draggingStatus = false; $(this).removeClass("fa-arrows").addClass("fa-ban"); } }) function addDraggingEvent() { draggingStatus = true; $('#layout-module').on("mousedown",function(me){ draggingZoom = true; draggingMode = true; var move = $(this); var lastOffset = move.data('lastTransform'); var lastOffsetX = parseFloat($("#layout-module").css("transform").replace(/[^0-9\-.,]/g, '').split(',')[4]), lastOffsetY = parseFloat($("#layout-module").css("transform").replace(/[^0-9\-.,]/g, '').split(',')[5]); // if (!start_move) { // start_move = true; // lastOffsetX = startDX; // lastOffsetY = startDY; // } startX = me.pageX - lastOffsetX; startY = me.pageY - lastOffsetY; }); $("#layout-module").on("mousemove",function(e){ if (draggingZoom) { var newDx = e.pageX - startX, newDy = e.pageY - startY; $('#layout-module').css('transform','translate(' + newDx + 'px, ' + newDy + 'px) ' + 'scale(' + ratio + ')'); // we need to save last made offset $('#layout-module').data('lastTransform', {dx: newDx, dy: newDy }); } }); document.getElementById("layout-module").addEventListener("mouseup",function(){ draggingZoom = false; // $(this).off("mousemove"); }); } }, 1000); } }) } function exitZoom() { $("#title-image-exercise").removeClass("hidden"); $("#exercise-name-container").removeClass("hidden"); $('#layout-module').unbind("mousedown"); draggingMode = false; $("#zoom-book").removeClass("active-tool") if (current_scroll != null) $('#content-bound').scrollTop(current_scroll); selecting = false; current_scroll = null; $('#zoom_icon').removeClass('hidden'); $('#off_zoom_icon').addClass('hidden'); $('#zoom_fit').css('display', ''); // $('#zoom_in_text').css('display', ''); // $('#zoom_out_text').css('display', ''); $('#disable_zoom').css('display', ''); $('#layout-module').css('height', ''); $('#layout-module').css('transform', ''); $('#layout-module').css('transform-origin', ''); // $('#exercise-content').css('width', ''); // $('#exercise-content').css('height', ''); // $('#exercise-name-container').css('width', ''); $('#exercise-name-container').css('transform', ''); // $('#exercise-name-container').css('min-width', ''); // $('#exercise-name-container').css('height', ''); // $('#content-bound').attr('style', ''); $('#content-bound').css('border', ''); $('#content-bound').attr('style', content_bound_style); $('#exercise-name-container').attr('style', exercise_name_container_style); $('#content-bound').css('background-position', ''); $('#content-bound').css('background-size', '100%'); $('#content-bound').removeClass('overflow-hidden'); $('#zoom_div').off('click'); $('#zoom_div').remove(); $('.mark-point').remove(); $('.mark-area').remove(); $('.exit-zoom-btn').remove(); } function createExitZoomButton(parent_id, x, y) { var e = document.createElement('button'); e.style.top = '0px'; e.style.right = '10px'; e.className = "exit-zoom-btn btn btn-link fa fa-arrows"; document.getElementById(parent_id).appendChild(e); } function markPoint(parent_id, x, y) { var e = document.createElement('div'); e.style.width = "2px"; e.style.height = "2px"; e.style.position = 'absolute'; e.style.borderRadius = '50%'; e.style.top = y + 'px'; e.style.left = x + 'px'; e.style.background = 'red'; e.classList.add("mark-point"); document.getElementById(parent_id).appendChild(e); } function markArea(parent_id, first, second) { $('.mark-point').remove(); $('.mark-area').remove(); var e = document.createElement('div'); e.style.width = Math.abs(first.x - second.x) + "px"; e.style.height = Math.abs(first.y - second.y) + "px"; e.style.position = 'absolute'; e.style.border = '2px solid red'; e.style.top = (first.y < second.y ? first.y : second.y) + 'px'; e.style.left = (first.x < second.x ? first.x : second.x) + 'px'; e.classList.add("mark-area"); document.getElementById(parent_id).appendChild(e); } if ($('.exercise-drawing-board').first().length) { setTimeout(function() { $('.exercise-drawing-board').css("height", "calc(100vh)"); $('.exercise-drawing-board').css("width", $("#exercise_container").outerWidth() + "px"); $('.exercise-drawing-board').css("left", $("#exercise_container").css("left")); paintToolCustom.init('.exercise-drawing-board'); $('.canvas-container-custom').css("height", "calc(100vh)"); $('.canvas-container-custom').find("canvas").attr({height: $(".canvas-container-custom").outerHeight()}) $('.exercise-drawing-board').addClass('hidden'); }) $('#pain_tool').on('click', function() { if ($('#paint_div').hasClass('hidden')) { $('#paint_div').removeClass('hidden'); $('.exercise-drawing-board').removeClass('hidden'); $('#pain_tool').addClass("active-tool"); paintToolCustom.setTool("brush") } else { $('#paint_div').addClass('hidden'); $('.exercise-drawing-board').addClass('hidden'); $('#pain_tool').removeClass("active-tool"); } }); $("#timer_div").click(function() { if($('#timediv').hasClass('hidden')) { $('#timediv').removeClass('hidden'); $('#timer_div').addClass("active-tool"); } else { $('#timediv').addClass('hidden'); $('#timer_div').removeClass("active-tool"); } }); var zoom_bar2_postion = $("#zoom_bar2").position(); $('#turn_off_tool').on('click', function() { // $('.exercise-drawing-board').addClass('hidden'); // paintToolCustom.setTool(""); // exitZoom(); $("#show_zoom_bar").click(); $("#zoom_bar2").css("left", "0px"); $("#zoom_bar2").css("top", zoom_bar2_postion.top + "px"); }); $('#turn_off_addition').on('click', function() { // $('.exercise-drawing-board').addClass('hidden'); // paintToolCustom.setTool(""); // exitZoom(); $("#show_addition_bar").click(); }); $('#show_zoom_bar').on('click', function() { $(".highlight-size-list").css("left", $("#highlight").position().left + $("#highlight").width() * 0.25 + "px"); $(".highlight-size-list").css("height", $("#highlight").height() + "px"); if ($("#highlight").height() * (370 / 108) > 180) { $(".highlight-size-list").css("width", $("#highlight").height() * (370 / 108) + "px"); } else { $(".highlight-size-list").css("width", "180px"); } $(".highlight-size-list").css("top", $("#highlight").position().top + parseFloat($("#highlight").css("margin-top"))); $(".highlight-size-list-fu").css("left", $("#highlight").position().left + "px"); $(".highlight-size-list-fu").css("height", $("#highlight").height() + "px"); if ($("#highlight").height() * (370 / 108) > 180) { $(".highlight-size-list-fu").css("width", $("#highlight").height() * (370 / 108) + "px"); } else { $(".highlight-size-list-fu").css("width", "180px"); } }); $('#highlight').on('click', function() { $('.exercise-drawing-board').toggleClass('hidden'); }); $('#adjust_tool').on('click', function() { paintToolCustom.clearTemp(); if (!$('#paint_div').hasClass("hidden")) { $('#paint_div').addClass('hidden'); if (isBlind) { $('.exercise-drawing-board').removeClass('hidden'); isBlind = false; } if($('.exercise-drawing-board').hasClass('hidden')) { $('#tool_div').addClass('hidden'); } else { $('#tool_div').removeClass('hidden'); } } else { $('#tool_div').removeClass('hidden'); $('.exercise-drawing-board').toggleClass('hidden'); } }) } $("#timediv").css("bottom", $("#timediv").outerHeight() + "px"); $("#paint_div").css("top", $("#timediv").outerHeight() * -1 + "px"); $("#paint_div").css("left", "0px"); // $("#exercise_drawing_board_icon").on("click", function() { // $('.exercise-drawing-board').removeClass('hidden'); // }); window.onresize = resize; function resize() { setTimeout(function() { if ($("#exercise_container").outerWidth()) { $('.exercise-drawing-board').css("width", $("#exercise_container").outerWidth() + "px"); $('.exercise-drawing-board').css("left", $("#exercise_container").css("left")); $('.canvas-container-custom').css("height", "calc(100vh)"); } }, 600) } }, 500) //notes tool $scope.hide_all_note = false; $scope.processing = false; $scope.note_tool_active = false; $scope.note_domain = "https://3.sachmem.vn/api/notes"; $scope.sm_v3_token = window.localStorage.getItem('sm:v3'); $scope.attempted_loggin = window.localStorage.getItem('attempted_loggin'); $scope.notes = []; $scope.exercise_id = ""; $scope.text = ""; $scope.current_note_index; $scope.current_note; $scope.current_style; $scope.book_role= "teacher"; $scope.add_headers = function() { $http.defaults.headers.common["Authorization"] = $scope.sm_v3_token; } $scope.setNoteTool = function() { $("#typing_note_div").toggleClass("hidden"); } $scope.showUrl= function(index) { $('.note-text-link-' + index).removeClass('hidden'); $('.note-text-input-' + index).addClass('hidden'); } setTimeout(function() { $("#note_tool").on("click", function() { var hide_noti = false; paintToolCustom.setTool("note-tool"); if ($scope.sm_v3_token) { $scope.getNotes(hide_noti); } else { getV3Token(hide_noti); } var top = $("#content-bound").outerHeight() - $("#typing_note_div").outerHeight() - $("#interact-container").outerHeight(); var left = ($(window).width() - $("#content-bound").width())/2 + $("#zoom_bar2").outerWidth() * 2 $("#typing_note_div").css("top", top + "px"); $("#typing_note_div").css("left", left + "px"); if ($("#note_tool").hasClass("active-tool") && $("#typing_note_div").hasClass("hidden")) { $("#typing_note_div").removeClass("hidden"); } else { $scope.note_tool_active = !$scope.note_tool_active; if (!$scope.note_tool_active) { $("#note_tool").removeClass("active-tool"); $("#typing_note_div").addClass("hidden"); $scope.hide_all_note = true; } else { $("#note_tool").addClass("active-tool"); $("#typing_note_div").removeClass("hidden"); $scope.hide_all_note = false; } } $scope.$apply(); }) if ($(".index-number").length && $(".index-number").css("width")) { $(".index-number").css("width", parseFloat($(".index-number").css("width")) * input.default_text_size + "px") } }, 1000) $scope.getPosition = function(note) { var x = parseFloat(note.x) * $("#content-bound").outerWidth() + "px;"; var y = parseFloat(note.y) * $("#content-bound").outerHeight() + "px"; return "left: " + x + "top: " + y; } $scope.getStyle = function(note) { if (note.text) { return ";font-family: " + note.text.style.font_family + ";font-size: " + note.text.style.font_size + ";color: " + note.text.style.color + ";" + note.text.style.font_weight + ";" } else { return ""; } } $scope.getNotes = function(hide_noti) { if (location.href.includes("/exercises/")) { $scope.exercise_id = parseInt(location.href.split("/exercises/")[1].split("/")[0]); $.ajax({ url: $scope.note_domain + "?exercise_id=" + $scope.exercise_id, headers: { "Authorization": $scope.sm_v3_token, "Content-Type": "application/json" }, type: "GET", crossDomain: true, success: function(res) { if (res.code == 1) { $scope.notes = res.data; for (var i = 0; i < $scope.notes.length; i++) { if ($scope.notes[i].hide) { $scope.hide_all_note = $scope.notes[i].hide; $('.status_note').removeClass('show-notes').addClass('hide-notes') } if ($scope.notes[i].text) { $scope.notes[i].text = JSON.parse($scope.notes[i].text) } else { $scope.notes[i].text = { content: "", style: { font_family: "Arial", font_size: "inherit", color: "inherit", font_weight: "inherit" } } } } setTimeout(function() { $scope.$apply(); $scope.initData(); }, 500); } else { getV3Token(hide_noti); } }, error: function(res) { getV3Token(hide_noti); }, }); } } $scope.initData = function() { $(".note_tool").each(function() { var id = $(this).attr("id"); dragElementNote(document.getElementById(id)); }); if (document.getElementById("typing_note_div")) { dragElementNote(document.getElementById("typing_note_div"), true); } if (document.getElementById("text_tool_div")) { dragElementNote(document.getElementById("text_tool_div"), true); } // mặc định khi vào sẽ minimize các note $(".note_minimize").click() var timeoutId; $('.note-text').on('input propertychange change', function() { clearTimeout(timeoutId); var index = $(this).data("index") timeoutId = setTimeout(function() { $scope.updateNote(index) }, 500); }); $(".note-text-container" ).click(function() { var index = $(this).data("index"); $('.note-text-link-' + index).addClass('hidden'); $('.note-text-input-' + index).removeClass('hidden'); $('.note-text-input-' + index).focus(); $scope.current_note_index = index; $scope.current_style = $scope.notes[index].text.style; $scope.current_note = $scope.notes[index]; $scope.$apply(); }) } var allow_get_notes = true; if ($scope.attempted_loggin && $scope.attempted_loggin % 10 != 0) { allow_get_notes = false; $scope.attempted_loggin++; window.localStorage.setItem('attempted_loggin', $scope.attempted_loggin); } if (window.location.href.indexOf("trial") == -1 && window.location.href.indexOf("localhost") == -1 && window.location.href.indexOf("ms_exercises") == -1 && allow_get_notes) { var hide_noti = true; if ($scope.sm_v3_token) { $scope.getNotes(hide_noti); } else { getV3Token(hide_noti); } // // if ($scope.sm_v3_token) { // $scope.getNotes(); // } else { // getV3Token(); // } // } $scope.fullScreen = function() { $('#mobileModal').modal('hide'); go_full_screen(); screen.orientation.lock("landscape-primary"); if ($scope.sm_v3_token) { var hide_noti = false; $scope.getNotes(hide_noti); } else { getV3Token(); } } setTimeout(function() { $scope.initData() }, 1000); function dragElementNote(elmnt, is_typing=false) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; var mouse_move = false; if (document.getElementById(elmnt.id + "header")) { // if present, the header is where you move the DIV from: document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; document.getElementById(elmnt.id + "header").ontouchstart = dragMouseDown; } else { // otherwise, move the DIV from anywhere inside the DIV: elmnt.onmousedown = dragMouseDown; elmnt.ontouchstart = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; if (e.touches && e.touches[0]) e = e.touches[0]; // e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; document.ontouchend = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; document.ontouchmove = elementDrag; } function elementDrag(e) { mouse_move = true; e = e || window.event; if (e.touches && e.touches[0]) e = e.touches[0]; elmnt.dataset.drag = true; // e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { // stop moving when mouse button is released: document.onmouseup = null; document.onmousemove = null; document.ontouchend = null; document.ontouchmove = null; if (!mouse_move) { if (!is_typing) { var index = elmnt.dataset.index; $scope.current_note_index = parseInt(index); $scope.current_style = $scope.notes[parseInt(index)].text.style; $scope.current_note = $scope.notes[index]; $scope.$apply(); } $("#note_div_" + elmnt.dataset.index).removeClass("hidden"); $("#pint_note_" + elmnt.dataset.index).addClass("hidden"); } else { if (!is_typing) { $scope.updateNote(elmnt.dataset.index); } } mouse_move = false; } } $scope.setFontWeight = function(font_weight) { var index = $scope.current_note_index; if (index || index == 0) { $scope.notes[index].text.style.font_weight = font_weight; $scope.updateCurrentNote(); } } $scope.getActiveStyle = function(style) { if ($scope.current_note) { if ($scope.current_note.text.style.font_weight == style) { return 'active-font'; } } } $scope.addNote = function() { $scope.notes.push({ text: { content: "", style: { font_family: "Arial", font_size: "inherit", color: "inherit", font_weight: "inherit" } }, x: 0, y: 0.2, new: true, updatedAt: new Date(), _id: "" }); setTimeout(function() { $scope.initData(); $("#note_div_" + ($scope.notes.length - 1)).removeClass("hidden"); $("#pint_note_" + ($scope.notes.length - 1)).addClass("hidden"); }, 100) } $scope.deleteNote = function(index) { $scope.add_headers(); bootbox.confirm("Bạn có chắc chắn xóa ghi chú này?", function(result){ if (result) { var id = $scope.notes[index]._id; if (id) { $scope.processing = true; $http.delete($scope.note_domain + "/" + id) .then(function(res) { $scope.processing = false; $scope.notes.splice(index, 1); $scope.$apply(); }); } else { $scope.notes.splice(index, 1); $scope.$apply(); } } }); } $scope.deleteCurrentNote = function(index) { bootbox.confirm("Bạn có chắc chắn xóa ghi chú này?", function(result){ if (result) { var index = $scope.current_note_index; if (index || index == 0) { var id = $scope.notes[index]._id; if (id) { $scope.processing = true; $http.put($scope.note_domain + "/" + id) .then(function(res) { $scope.processing = false; $scope.notes.splice(index, 1); $scope.$apply(); }); } else { $scope.notes.splice(index, 1); $scope.$apply(); } } } }); } $scope.updateNote = function(index) { $scope.add_headers(); if (!$scope.processing) { $scope.processing = true; var x = $("#note_tool_" + index).position().left / $("#content-bound").outerWidth() + ""; var y = $("#note_tool_" + index).position().top / $("#content-bound").outerHeight() + ""; var data = { text: JSON.stringify($scope.notes[index].text), exercise_id: $scope.exercise_id, x: x, y: y } if ($scope.notes[index]._id && $scope.notes[index]._id != "pending") { $http.put($scope.note_domain + "/" + $scope.notes[index]._id, data) .then(function(res) { $scope.processing = false; if (res.data.code == 1) { } }); } else { $http.post($scope.note_domain, data) .then(function(res) { $scope.processing = false; if (res.data.code == 1) { $scope.notes[index]._id = res.data.data._id; } }); } } } var timeoutStyleId; $scope.updateCurrentNote = function(index) { clearTimeout(timeoutStyleId); timeoutStyleId = setTimeout(function() { var index = $scope.current_note_index; if (index || index == 0) { $scope.updateNote(index); } }, 500); } $scope.hideNote = function(index) { $("#note_div_" + index).addClass("hidden"); $("#pint_note_" + index).removeClass("hidden"); } $scope.changeAllNote = function(index) { $scope.hide_all_note = !$scope.hide_all_note; $scope.add_headers(); $http.put("https://3.sachmem.vn/api/update_hide_notes", {hide: $scope.hide_all_note, exercise_id: $scope.exercise_id}) .then(function(res) { }); for (var i = 0; i < $scope.notes.length; i++) { $scope.notes[i].hide = $scope.hide_all_note; } if ($scope.hide_all_note) { $('.status_note').removeClass('show-notes').addClass('hide-notes') } else { $('.status_note').removeClass('hide-notes').addClass('show-notes') } } function getV3Token(hide_noti) { if (window.location.href.includes("ms_exercises")) return; var sm_user = document.getElementById('sm-infos'); sm_user.src = 'https://accounts.sachmem.vn/infos'; sm_user.onload = function() { sm_user.contentWindow.postMessage(JSON.stringify({key: 'sm:user', method: "get"}), "*"); window.onmessage = function(e) { if (e.origin !== "https://accounts.sachmem.vn") return; if (e.data != '403' || e.data != 403) { $http.defaults.headers.common["Authorization"] = e.data; $http.defaults.headers.common["Content-type"] = "application/json"; $http.post("https://3.sachmem.vn/api/users/sachmem", { code: e.data }) .then(function(res) { if (res.data.code == 1) { window.localStorage.setItem('sm:v3', res.data.data.token); $scope.sm_v3_token = res.data.data.token; $scope.add_headers(); var hide_noti = false; $scope.getNotes(hide_noti); $('#sm-infos').remove(); } }); } else { if ($scope.attempted_loggin && $scope.attempted_loggin % 10 == 0) { window.localStorage.setItem('attempted_loggin', 1); } else { if (!$scope.attempted_loggin) { window.localStorage.setItem('attempted_loggin', 1); } else { $scope.attempted_loggin++; window.localStorage.setItem('attempted_loggin', $scope.attempted_loggin); } } if (!hide_noti) $('#reLoginModal').modal('show'); } } }; } }).filter('parseUrl', function() { var urls = /(\b(https?|ftp):\/\/[A-Z0-9+&@#\/%?=~_|!:,.;-]*[-A-Z0-9+&@#\/%=~_|])/gim var emails = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim return function(text) { if(text.match(urls)) { text = text.replace(urls, "$1") } if(text.match(emails)) { text = text.replace(emails, "$1") } return text }}); if($("[ng-app]").length > 1) angular.bootstrap(document.getElementById("note-tool"), ['NoteTool']);
{{ forMatExerciseName(exercise.name) }}
