How to use uniqueId method in wpt

Best JavaScript code snippet using wpt

content.js

Source:content.js Github

copy

Full Screen

1$(document).ready(function(){2 const uniqueid = "screenity-screen-recorder-extension";3 var recording = true;4 var drag, dragx, dragy, timer, pickr;5 var dragging = false;6 var dragged = false;7 var drawing = false;8 var erasing = false;9 var mousedown = false;10 var pendown = false;11 var cameraon = true;12 var micon = true;13 var tabaudioon = true;14 var arrowon = false;15 var texton = false;16 var clickon = false;17 var focuson = false;18 var hideon = false;19 var sliderhover = false;20 var sliderhovereraser = false;21 var penhover = false;22 var eraserhover = false;23 var cameradevices = [];24 var audiodevices = [];25 var alt = false;26 var mdown = false;27 var holdtalk = false;28 var persistent = false;29 var lastx = 0;30 var lasty = 0;31 var lastscrollx = 0;32 var lastscrolly = 0;33 34 // Get defaults35 function getDefaults() {36 chrome.storage.sync.get(['pushtotalk'], function(result) {37 if (result.pushtotalk) {38 holdtalk = true;39 micEnabled(false);40 } 41 });42 chrome.storage.sync.get(['toolbar'], function(result) {43 persistent = result.toolbar;44 if (!countdownactive && persistent) {45 chrome.runtime.sendMessage({type: "countdown"});46 if (persistent) {47 $("#"+uniqueid+" #toolbar-record").removeClass("toolbar-inactive");48 }49 }50 });51 chrome.storage.sync.get(['mic'], function(result) {52 if (result.mic == 'disabled' || result.mic == 0) {53 micEnabled(false);54 }55 });56 chrome.storage.sync.get(['camera'], function(result) {57 if (result.camera == 'disabled' || result.camera == 0) {58 cameraEnabled(false);59 } else if (result.camera == 'disabled-access') {60 $("#"+uniqueid+" #camera").addClass("camera-on");61 $("#"+uniqueid+" #toolbar-settings").addClass("settings-camon");62 $("#"+uniqueid+" #wrap-iframe").addClass("no-camera");63 $("#"+uniqueid+" #hide-camera").addClass("camera-hidden");64 $("#"+uniqueid+" #detect-iframe").addClass("no-camera");65 }66 });67 }68 69 injectCode(true, countdownactive);70 71 // Inject or remove all the content72 function injectCode(inject, active) {73 if (inject) { 74 // Reset to start a new recording75 recording = true;76 alt = false;77 mdown = false;78 dragging = false;79 drawing = false;80 erasing = false;81 mousedown = false;82 pendown = false;83 cameraon = true;84 micon = true;85 tabaudioon = true;86 arrowon = false;87 window.arrowon = arrowon;88 texton = false;89 clickon = false;90 focuson = false;91 hideon = false;92 sliderhover = false;93 sliderhovereraser = false;94 penhover = false;95 eraserhover = false;96 // Get list of audio devices97 chrome.runtime.sendMessage({type: "audio-request"}, function(response){98 audiodevices = response.devices;99 });100 101 // Extension wrapper102 var wrapper = "<div id='"+uniqueid+"' style='width: 100%;height:100%;position:absolute;'></div>";103 $("body").append(wrapper);104 105 // Inject the iframe106 var iframeinject = "<div id='canvas-cont'><canvas id='canvas-draw'></canvas></div><div id='click-highlight'></div><div id='detect-iframe'><div id='hide-camera' class='camera-hidden'><img src='"+chrome.extension.getURL('./assets/images/close.svg')+"' class='noselect'></div><div id='change-size' class='camera-hidden'><div id='small-size' class='size-active choose-size'></div><div id='medium-size' class='choose-size'></div><div id='large-size' class='choose-size'></div></div></div><div id='wrap-iframe' class='notransition'><iframe src='"+chrome.extension.getURL('./html/camera.html')+"' allow='camera'></iframe></div><canvas id='canvas-freedraw' width=500 height=500></canvas><canvas id='canvas-focus' width=500 height=500></canvas>";107 $("#"+uniqueid).prepend(iframeinject);108 // Inject the toolbar109 var toolbarinject = "<div id='color-pckr-thing'></div><div id='pen-slider' class='toolbar-inactive'><input type='range' min=1 max=50><img class='slider-track' src='"+chrome.extension.getURL('./assets/images/slider-track.svg')+"'></div><div id='eraser-slider' class='toolbar-inactive'><input type='range' min=1 max=50><img class='slider-track' src='"+chrome.extension.getURL('./assets/images/slider-track.svg')+"'></div><iframe id='toolbar-settings' class='toolbar-inactive' src='"+chrome.extension.getURL('./html/settings.html')+"'></iframe><div id='toolbar-record-cursor' class='toolbar-inactive noselect'><div id='click-tool' class='tool' title='Highlight clicks'><img src='"+chrome.extension.getURL('./assets/images/click.svg')+"'/></div><div id='focus-tool' class='tool' title='Highlight cursor'><img src='"+chrome.extension.getURL('./assets/images/focus.svg')+"'/></div><div id='hide-cursor-tool' class='tool' title='Hide cursor when inactive'><img src='"+chrome.extension.getURL('./assets/images/hide-cursor.svg')+"'/></div></div> <div id='toolbar-record-pen' class='toolbar-inactive noselect'><div id='pen-tool' class='tool' title='Pen tool'><img src='"+chrome.extension.getURL('./assets/images/pen.svg')+"' class=/></div><div id='eraser' class='tool' title='Eraser tool'><img src='"+chrome.extension.getURL('./assets/images/eraser.svg')+"'/></div><div id='color-pckr' class='tool' title='Change the annotation color'><div id='color-icon'></div></div><div id='text' class='tool' title='Text tool'><img src='"+chrome.extension.getURL('./assets/images/text.svg')+"'/></div><div id='arrow' class='tool' title='Arrow tool'><img src='"+chrome.extension.getURL('./assets/images/arrow.svg')+"'/></div><div id='clear' class='tool' title='Delete all annotations'><img src='"+chrome.extension.getURL('./assets/images/clear.svg')+"'/></div></div> <div id='toolbar-record' class='toolbar-inactive noselect'><div id='pause' class='tool' title='Pause/resume recording'><img src='"+chrome.extension.getURL('./assets/images/pausewhite.svg')+"'/></div><div id='cursor' class='tool' title='Cursor settings'><img src='"+chrome.extension.getURL('./assets/images/cursor.svg')+"'/></div><div id='pen' class='tool' title='Annotation tools'><img src='"+chrome.extension.getURL('./assets/images/pen.svg')+"'/></div><div id='camera' title='Enable camera' class='tool'><img src='"+chrome.extension.getURL('./assets/images/camera.svg')+"'/></div><div id='mic' class='tool tool-active' title='Enable/disable microphone'><img src='"+chrome.extension.getURL('./assets/images/mic-off.svg')+"'/></div><div id='tab-audio' class='tool tool-active' title='Enable/disable browser audio'><img src='"+chrome.extension.getURL('./assets/images/tab-audio-off.svg')+"'/></div><div id='settings' class='tool' title='Recording settings'><img src='"+chrome.extension.getURL('./assets/images/settings.svg')+"'/></div></div>";110 $("#"+uniqueid).prepend(toolbarinject);111 112 getDefaults();113 114 // Initialize color picker115 pickr = Pickr.create({116 el: '#color-pckr',117 theme: 'nano',118 swatches: false,119 default: "#EB205D",120 useAsButton: true,121 autoReposition: true,122 position: "top-middle",123 components: {124 preview: true,125 opacity: true,126 hue: true,127 interaction: {128 hex: false,129 rgba: false,130 hsla: false,131 hsva: false,132 cmyk: false,133 input: false,134 clear: false,135 save: false136 }137 }138 });139 window.pickr = pickr;140 $("#"+uniqueid).append($(".pcr-app"));141 $("#"+uniqueid+" #camera").addClass("camera-on");142 drag = $("#"+uniqueid+" #wrap-iframe");143 144 // Allow CSS transitions (prevents camera from scaling on load)145 window.setTimeout(function(){146 $(".notransition").removeClass("notransition");147 }, 500);148 149 // Check if countdown is enabled150 if (active) {151 $("#"+uniqueid+" #toolbar-record").css("pointer-events", "none");152 chrome.storage.sync.get(['countdown_time'], function(result) {153 injectCountdown(result.countdown_time);154 });155 } else {156 chrome.runtime.sendMessage({type: "countdown"});157 if (persistent) {158 $("#"+uniqueid+" #toolbar-record").removeClass("toolbar-inactive");159 }160 if (camerasize && camerapos) {161 cameraSize(camerasize);162 setCameraPos(camerapos.x, camerapos.y);163 }164 }165 166 // Initialize canvas167 initCanvas();168 } else {169 $("#"+uniqueid).remove();170 }171 }172 173 // Countdown174 function injectCountdown(time){175 var countdowninject = "<div id='countdown'><img src='"+chrome.extension.getURL('./assets/images/3-countdown.svg')+"'></div>";176 $("#"+uniqueid).prepend(countdowninject);177 countdown(time);178 }179 function delay(num,time,last) {180 window.setTimeout(function(){181 if (!last) {182 $("#"+uniqueid+" #countdown img").attr("src", chrome.extension.getURL('./assets/images/'+num+'-countdown.svg'));183 } else {184 $("#"+uniqueid+" #countdown").addClass("countdown-done");185 window.setTimeout(function(){186 chrome.runtime.sendMessage({type: "countdown"});187 },10);188 if (persistent) {189 $("#"+uniqueid+" #toolbar-record").removeClass("toolbar-inactive");190 }191 $("#"+uniqueid+" #toolbar-record").css("pointer-events", "all");192 }193 },time*1000);194 }195 function countdown(time){196 $("#"+uniqueid+" #countdown img").attr("src", chrome.extension.getURL('./assets/images/'+time+'-countdown.svg'));197 for (var i = 0; i <= time; i++) {198 if (i == time) {199 delay(time-i,i,true);200 } else {201 delay(time-i,i,false);202 }203 }204 }205 206 // Pause/resume recording207 function pauseResume(){208 if (recording) {209 chrome.runtime.sendMessage({type: "pause"}, function(response){210 if (response.success) {211 pauseRecording();212 }213 });214 } else {215 chrome.runtime.sendMessage({type: "resume"}, function(response){216 if (response.success) {217 resumeRecording();218 }219 });220 }221 }222 223 // Canvas initialization224 var canvas_focus,ctx_focus,canvas_free,ctx_free,canvas;225 var last_mousex = 0;226 var last_mousey = 0;227 var mousex = 0;228 var mousey = 0;229 var pendown = false;230 var tooltype = 'draw';231 var penset = false;232 var textediting = false;233 var mouseover = false;234 var moretools = false;235 const canvas_free_id = "#"+uniqueid+" #canvas-freedraw";236 const canvas_focus_id = "#"+uniqueid+" #canvas-focus";237 var arrow;238 239 function initCanvas() {240 // Reset defaults241 canvas_focus = document.getElementById("canvas-focus");242 ctx_focus = canvas_focus.getContext('2d');243 canvas_free = document.getElementById("canvas-freedraw");244 ctx_free = canvas_free.getContext('2d');245 last_mousex = 0;246 last_mousey = 0;247 mousex = 0;248 mousey = 0;249 pendown = false;250 tooltype = 'draw';251 penset = false;252 $("#"+uniqueid+" #canvas-freedraw").css("pointer-events", 'none');253 254 // Interactive FabricJs canvas initialization255 canvas = new fabric.Canvas('canvas-draw', {256 preserveObjectStacking: true,257 height: $(document).height(),258 width: $(document).width(),259 renderOnAddRemove: false260 });261 textediting = false;262 $("#"+uniqueid+" #canvas-cont").css("pointer-events", 'none');263 264 // Resize canvas to be full size265 onResize();266 window.setTimeout(function(){267 onResize();268 },500)269 canvas.selection = false;270 mouseover = false;271 moretools = false;272 arrow = new Arrow(canvas);273 274 // Detect mousedown on FabricJs canvas275 canvas.on('mouse:down', function(options) {276 if (textediting) {277 textediting = false;278 } else if (texton && options.target == null && !canvas.getActiveObject()) {279 newTextbox(options.pointer.x, options.pointer.y);280 }281 })282 }283 284 // Focus canvas (highlight cursor)285 function focus(e) {286 ctx_focus.clearRect(0, 0, canvas_focus.width, canvas_focus.height);287 ctx_focus.beginPath();288 ctx_focus.rect(0, 0, canvas_focus.width, canvas_focus.height);289 ctx_focus.fillStyle = "rgba(0,0,0,.45)";290 ctx_focus.globalCompositeOperation = "source-over";291 ctx_focus.fill();292 ctx_focus.beginPath();293 ctx_focus.arc(lastx, lasty, 50, 0, 2 * Math.PI);294 ctx_focus.globalCompositeOperation = "destination-out";295 ctx_focus.fill();296 }297 298 // Free drawing299 function draw(e) {300 mousex = parseInt(e.pageX);301 mousey = parseInt(e.pageY);302 if(pendown) {303 ctx_free.beginPath();304 if (!penset) {305 ctx_free.lineWidth = 10;306 }307 if(tooltype == 'draw') {308 ctx_free.globalCompositeOperation = 'source-over';309 ctx_free.strokeStyle = pickr.getColor().toRGBA();310 } else {311 ctx_free.globalCompositeOperation = 'destination-out';312 }313 ctx_free.moveTo(last_mousex,last_mousey);314 ctx_free.lineTo(mousex,mousey);315 ctx_free.lineJoin = 'round';316 ctx_free.lineCap = 'round';317 ctx_free.stroke();318 }319 last_mousex = mousex;320 last_mousey = mousey;321 }322 // Create a new textbox323 function newTextbox(x, y) {324 if (typeof x !== 'undefined' && typeof y !== 'undefined') {325 var newtext = new fabric.Textbox('', {326 left: x,327 top: y,328 fontFamily: 'sans-serif',329 fill: pickr.getColor().toRGBA().toString(),330 transparentCorners: false,331 lockRotation: true,332 borderColor: '#0E98FC',333 cornerColor: '#0E98FC',334 centeredScaling: false,335 borderOpacityWhenMoving: 1,336 hasControls: true,337 hasRotationPoint: false,338 lockScalingFlip: true,339 lockSkewingX: true,340 lockSkewingY: true,341 cursorWidth: 1,342 width: 100,343 cursorDuration: 1,344 cursorDelay: 250345 });346 }347 newtext.setControlsVisibility({348 bl: true,349 br: true,350 tl: true,351 tr: true,352 mb: false,353 ml: true,354 mr: true,355 mt: false,356 mtr: false,357 });358 canvas.add(newtext).setActiveObject(newtext);359 canvas.bringToFront(newtext);360 canvas.renderAll();361 newtext.enterEditing();362 textediting = true;363 }364 365 // Automatically increase textbox width (do not break words)366 canvas.on(("text:changed"),function() {367 var linewidth = canvas.getActiveObject().__lineWidths[canvas.getActiveObject().__lineWidths.length-1]; 368 if (!isNaN(linewidth) && linewidth+40 > canvas.getActiveObject().width) {369 canvas.getActiveObject().set("width",(linewidth+40));370 canvas.renderAll();371 }372 })373 374 // Resize canvas to fit document375 function onResize() {376 canvas.setWidth($(document).width());377 canvas.setHeight($(document).height());378 canvas.renderAll();379 canvas_free.style.width = $(document).width();380 canvas_free.style.height = $(document).height();381 canvas_free.width = $(document).width();382 canvas_free.height = $(document).height();383 canvas_focus.style.width = $(document).width();384 canvas_focus.style.height = $(document).height();385 canvas_focus.width = $(document).width();386 canvas_focus.height = $(document).height();387 }388 389 // Detect document dimensions changing390 const resizeObserver = new ResizeObserver(entries => {391 onResize();392 });393 if (window.location.href.includes("twitter.com") || window.location.href.includes("facebook.com") || window.location.href.includes("pinterest.com") || window.location.href.includes("reddit.com")) {394 document.body.style.height = "unset";395 }396 resizeObserver.observe(document.body);397 398 // Show click highlight399 function mouseClick(e) {400 $("#"+uniqueid+" #click-highlight").css("top", e.clientY+$(window).scrollTop()-15+"px");401 $("#"+uniqueid+" #click-highlight").css("left", e.clientX+$(window).scrollLeft()-15+"px");402 $("#"+uniqueid+" #click-highlight").addClass("show-click");403 }404 405 // Reset drawing toolbar406 function resetDrawingTools() {407 arrowon = false;408 window.arrowon = arrowon;409 drawing = false;410 erasing = false;411 texton = false;412 $("#"+uniqueid+" #canvas-freedraw").css("pointer-events", 'none');413 $("#"+uniqueid+" #pen-tool").removeClass("tool-active");414 $("#"+uniqueid+" #pen-tool img").attr("src", chrome.extension.getURL('./assets/images/pen.svg'));415 $("#"+uniqueid+" #eraser").removeClass("tool-active");416 $("#"+uniqueid+" #eraser img").attr("src", chrome.extension.getURL('./assets/images/eraser.svg'));417 $("#"+uniqueid+" #arrow").removeClass("tool-active");418 $("#"+uniqueid+" #arrow img").attr("src", chrome.extension.getURL('./assets/images/arrow.svg'));419 $("#"+uniqueid+" #text").removeClass("tool-active");420 $("#"+uniqueid+" #text img").attr("src", chrome.extension.getURL('./assets/images/text.svg'));421 }422 423 // Hide the toolbar (on mouseout if setting is enabled)424 function hideTools() {425 if (!persistent) {426 $("#"+uniqueid+" #pen-slider").addClass("toolbar-inactive");427 $("#"+uniqueid+" #eraser-slider").addClass("toolbar-inactive");428 $("#"+uniqueid+" #toolbar-record-pen").addClass("toolbar-inactive");429 $("#"+uniqueid+" #toolbar-record-cursor").addClass("toolbar-inactive");430 $("#"+uniqueid+" #toolbar-settings").addClass("toolbar-inactive");431 $("#"+uniqueid+" .tool-disabled").removeClass("tool-disabled");432 $("#"+uniqueid+" #toolbar-record").addClass("toolbar-inactive");433 }434 }435 436 // Pause the recording437 function pauseRecording() {438 recording = false;439 440 // Hide opened toolbars441 hideTools();442 moretools = false;443 $("#"+uniqueid+" #toolbar-record-pen").addClass("toolbar-inactive");444 $("#"+uniqueid+" #toolbar-record-cursor").addClass("toolbar-inactive");445 $("#"+uniqueid+" #toolbar-settings").addClass("toolbar-inactive");446 $("#"+uniqueid+" #toolbar-record").removeClass("toolbar-inactive");447 $("#"+uniqueid+" .pen-options").removeClass("pen-options");448 $("#"+uniqueid+" #toolbar-record #settings").removeClass("pen-options");449 450 // Replace icons & tooltips451 $("#"+uniqueid+" #pause img").attr("src", chrome.extension.getURL('./assets/images/play.svg'));452 $("#"+uniqueid+" #cursor img").attr("src", chrome.extension.getURL('./assets/images/complete.svg'));453 $("#"+uniqueid+" #cursor").attr("title", "Save recording");454 $("#"+uniqueid+" #pen img").attr("src", chrome.extension.getURL('./assets/images/cancel.svg'));455 $("#"+uniqueid+" #pen").attr("title", "Discard recording");456 $("#"+uniqueid+" #toolbar-record #settings img").attr("src", chrome.extension.getURL('./assets/images/settings.svg'));457 458 459 // Hide tools460 $("#"+uniqueid+" #camera").addClass("hide-button");461 $("#"+uniqueid+" #mic").addClass("hide-button");462 $("#"+uniqueid+" #tab-audio").addClass("hide-button");463 $("#"+uniqueid+" #settings").addClass("hide-button");464 465 // Disable all tools466 $("#"+uniqueid+" #pen-slider").addClass("toolbar-inactive");467 drawing = false;468 arrowon = false;469 texton = false;470 clickon = false;471 hideon = false;472 focuson = false;473 $("#"+uniqueid+" #canvas-freedraw").css("pointer-events", 'none');474 $("#"+uniqueid+" #canvas-cont").css("pointer-events", 'none');475 $("#"+uniqueid+" #canvas-focus").css("pointer-events", 'none');476 $("#"+uniqueid+" #toolbar-record #pen").removeClass("tool-active");477 $("#"+uniqueid+" #toolbar-record-pen #pen-tool").removeClass("tool-active");478 $("#"+uniqueid+" #toolbar-record-pen #eraser").removeClass("tool-active");479 $("#"+uniqueid+" #toolbar-record-pen #text").removeClass("tool-active");480 $("#"+uniqueid+" #toolbar-record #arrow").removeClass("tool-active");481 $("#"+uniqueid+" #toolbar-record-cursor #click-tool").removeClass("tool-active");482 $("#"+uniqueid+" #toolbar-record-cursor #focus-tool").removeClass("tool-active");483 $("#"+uniqueid+" #toolbar-record-cursor #hide-cursor-tool").removeClass("tool-active");484 485 // Replace images for all tools486 $("#"+uniqueid+" #text img").attr("src", chrome.extension.getURL('./assets/images/text.svg'));487 $("#"+uniqueid+" #pen-tool img").attr("src", chrome.extension.getURL('./assets/images/pen.svg'));488 $("#"+uniqueid+" #eraser img").attr("src", chrome.extension.getURL('./assets/images/eraser.svg'));489 $("#"+uniqueid+" #arrow img").attr("src", chrome.extension.getURL('./assets/images/arrow.svg'));490 $("#"+uniqueid+" #click-tool img").attr("src", chrome.extension.getURL('./assets/images/click.svg'));491 $("#"+uniqueid+" #focus-tool img").attr("src", chrome.extension.getURL('./assets/images/focus.svg'));492 $("#"+uniqueid+" #hide-cursor-tool img").attr("src", chrome.extension.getURL('./assets/images/hide-cursor.svg'));493 ctx_focus.clearRect(0, 0, canvas_focus.width, canvas_focus.height);494 canvas.defaultCursor = "crosshair";495 }496 497 // Resume the recording498 function resumeRecording() {499 recording = true;500 $("#"+uniqueid+" #pause img").attr("src", chrome.extension.getURL('./assets/images/pausewhite.svg'));501 $("#"+uniqueid+" #cursor img").attr("src", chrome.extension.getURL('./assets/images/cursor.svg'));502 $("#"+uniqueid+" #cursor").attr("title", "Cursor settings");503 $("#"+uniqueid+" #pen img").attr("src", chrome.extension.getURL('./assets/images/pen.svg'));504 $("#"+uniqueid+" #pen").attr("title", "Annotation tools");505 $("#"+uniqueid+" .hide-button").removeClass("hide-button");506 }507 508 // Stop and save the recording509 function saveRecording(){510 chrome.runtime.sendMessage({type: "stop-save"}); 511 alert("Saving...")512 }513 514 // Stop and discard the recording515 function cancelRecording(){516 chrome.runtime.sendMessage({type: "stop-cancel"}); 517 }518 519 // Send the camera and audio devices list to the settings panel520 function sendSettings() {521 chrome.runtime.sendMessage({type: "device-list", cameradevices:cameradevices, audiodevices:audiodevices});522 }523 524 // Switch system/microphone audio on and off525 function audioEnable(type, enable) {526 chrome.runtime.sendMessage({type: "audio-switch", enable:enable, source:type});527 }528 529 // Switch microphone on and off530 function micEnabled(enable) {531 micon = enable;532 if (enable) {533 $("#"+uniqueid+" #mic").addClass("tool-active");534 $("#"+uniqueid+" #mic img").attr("src", chrome.extension.getURL('./assets/images/mic-off.svg'));535 audioEnable("mic", true);536 } else {537 $("#"+uniqueid+" #mic").removeClass("tool-active");538 $("#"+uniqueid+" #mic img").attr("src", chrome.extension.getURL('./assets/images/mic.svg'));539 audioEnable("mic", false);540 }541 }542 543 // Switch camera on and off544 function cameraEnabled(enable) {545 cameraon = enable;546 if (enable) {547 chrome.runtime.sendMessage({type: "camera-check"});548 $("#"+uniqueid+" #wrap-iframe").removeClass("no-camera");549 $("#"+uniqueid+" #detect-iframe").removeClass("no-camera");550 $("#"+uniqueid+" #camera").addClass("camera-on");551 $("#"+uniqueid+" #toolbar-settings").removeClass("settings-camon");552 } else {553 $("#"+uniqueid+" #wrap-iframe").addClass("no-camera");554 $("#"+uniqueid+" #hide-camera").addClass("camera-hidden");555 $("#"+uniqueid+" #detect-iframe").addClass("no-camera");556 $("#"+uniqueid+" #camera").removeClass("camera-on");557 $("#"+uniqueid+" #toolbar-settings").addClass("settings-camon");558 }559 }560 561 // Change camera size562 function cameraSize(id) {563 if (id == "small-size") {564 $("#"+uniqueid+" .size-active").removeClass("size-active");565 $("#"+uniqueid+" #small-size").addClass("size-active");566 $("#"+uniqueid+" #detect-iframe").css({"width": "195px", "height": "195px"});567 $("#"+uniqueid+" #wrap-iframe").css({"width": "195px", "height": "195px"});568 $("#"+uniqueid+" #hide-camera").css({"left": "7px", "top": "7px"});569 } else if (id == "medium-size") {570 $("#"+uniqueid+" .size-active").removeClass("size-active");571 $("#"+uniqueid+" #medium-size").addClass("size-active");572 $("#"+uniqueid+" #detect-iframe").css({"width": "330px", "height": "330px"});573 $("#"+uniqueid+" #wrap-iframe").css({"width": "330px", "height": "330px"});574 $("#"+uniqueid+" #hide-camera").css({"left": "27px", "top": "27px"});575 } else {576 $("#"+uniqueid+" .size-active").removeClass("size-active");577 $("#"+uniqueid+" #large-size").addClass("size-active");578 $("#"+uniqueid+" #detect-iframe").css({"width": "580px", "height": "580px"});579 $("#"+uniqueid+" #wrap-iframe").css({"width": "580px", "height": "580px"});580 $("#"+uniqueid+" #hide-camera").css({"left": "64px", "top": "64px"});581 }582 chrome.runtime.sendMessage({type: "camera-size", size:id});583 }584 585 function setCameraPos(x,y) {586 $("#"+uniqueid+" #wrap-iframe").css("left", x,);587 $("#"+uniqueid+" #wrap-iframe").css("top", y);588 $("#"+uniqueid+" #detect-iframe").css("left", x);589 $("#"+uniqueid+" #detect-iframe").css("top", y);590 }591 592 // When the mouse button is clicked593 function mouseDown(e) {594 if (clickon && !$("#"+uniqueid+" .pcr-app").is(e.target) && $("#"+uniqueid+" .pcr-app").has(e.target).length === 0 && !$("#"+uniqueid+" #toolbar-record").is(e.target) && $("#"+uniqueid+" #toolbar-record").has(e.target).length === 0 && !$("#"+uniqueid+" #toolbar-record-pen").is(e.target) && $("#"+uniqueid+" #toolbar-record-pen").has(e.target).length === 0 && !$("#"+uniqueid+" #toolbar-record-cursor").is(e.target) && $("#"+uniqueid+" #toolbar-record-cursor").has(e.target).length === 0 && !$("#"+uniqueid+" #toolbar-settings").is(e.target) && $("#"+uniqueid+" #toolbar-settings").has(e.target).length === 0 && !$("#"+uniqueid+" #pen-slider").is(e.target) && $("#"+uniqueid+" #pen-slider").has(e.target).length === 0 && !$("#"+uniqueid+" #eraser-slider").is(e.target) && $("#"+uniqueid+" #eraser-slider").has(e.target).length === 0) {595 mouseClick(e)596 }597 mousedown = true;598 }599 600 // When the mouse button is released601 function mouseUp(e) {602 if (dragged) {603 chrome.runtime.sendMessage({type: "camera-pos", x:$("#"+uniqueid+" #detect-iframe").css("left"), y:$("#"+uniqueid+" #detect-iframe").css("top")});604 dragged = false;605 }606 $("#"+uniqueid+" #detect-iframe").css("pointer-events", "all");607 $("#"+uniqueid+" #toolbar-record").css("pointer-events", "all");608 pendown = false;609 mousedown = false;610 dragging = false; 611 window.setTimeout(function(){612 $(".show-click").removeClass("show-click");613 }, 200);614 615 // Hide tools (if setting is enabled)616 if (!$("#"+uniqueid+" .pcr-app").is(e.target) && $("#"+uniqueid+" .pcr-app").has(e.target).length === 0 &!$("#"+uniqueid+" #toolbar-record").is(e.target) && $("#"+uniqueid+" #toolbar-record").has(e.target).length === 0 && !$("#"+uniqueid+" #toolbar-record-pen").is(e.target) && $("#"+uniqueid+" #toolbar-record-pen").has(e.target).length === 0 && !$("#"+uniqueid+" #toolbar-record-cursor").is(e.target) && $("#"+uniqueid+" #toolbar-record-cursor").has(e.target).length === 0 && !$("#"+uniqueid+" #toolbar-settings").is(e.target) && $("#"+uniqueid+" #toolbar-settings").has(e.target).length === 0 && !$("#"+uniqueid+" #pen-slider").is(e.target) && $("#"+uniqueid+" #pen-slider").has(e.target).length === 0 && !$("#"+uniqueid+" #eraser-slider").is(e.target) && $("#"+uniqueid+" #eraser-slider").has(e.target).length === 0) {617 hideTools();618 }619 }620 621 // When the mouse moves622 function mouseMove(e) {623 lastx = e.pageX;624 lasty = e.pageY;625 if (dragging && cameraon) {626 // Drag the camera container627 drag.css("left", e.clientX-dragx-$(window).scrollLeft()+"px",);628 drag.css("top", e.clientY-dragy-$(window).scrollTop()+"px");629 $("#"+uniqueid+" #detect-iframe").css("left", e.clientX-dragx-$(window).scrollLeft()+"px");630 $("#"+uniqueid+" #detect-iframe").css("top", e.clientY-dragy-$(window).scrollTop()+"px");631 dragged = true;632 } else {633 // Free drawing634 if (pendown) {635 draw(e);636 }637 // Highlight cursor638 if (focuson) {639 focus(e); 640 }641 } 642 // Hide cursor if inactive for more than 2 seconds643 if (hideon) {644 clearTimeout(timer);645 $(".no-cursor").removeClass("no-cursor");646 timer = window.setTimeout(function(){647 $("body").addClass("no-cursor");648 },2000)649 } else {650 $(".no-cursor").removeClass("no-cursor");651 }652 }653 654 // Start freedrawing655 function startDrawing(e) {656 if (drawing) {657 last_mousex = parseInt(e.pageX);658 last_mousey = parseInt(e.pageY);659 mousex = parseInt(e.pageX);660 mousey = parseInt(e.pageY);661 pendown = true;662 }663 }664 665 // Detect when a color has been selected666 pickr.on("change", (color,instance) => {667 $("#"+uniqueid+" #color-icon").css("background-color", color.toRGBA().toString()); 668 if (canvas.getActiveObject() && canvas.getActiveObject().type == "textbox") {669 canvas.getActiveObject().set("fill", color.toRGBA().toString());670 } else if (canvas.getActiveObject()) {671 canvas.getActiveObject().set("stroke", color.toRGBA().toString());672 }673 canvas.renderAll();674 });675 676 // Detect push to talk keystroke677 $(document).keydown(function(e) {678 if (e.ctrlKey) {679 alt = true;680 }681 if (mdown && alt) {682 micEnabled(true);683 }684 }).keyup(function(e) { 685 if (e.ctrlKey) {686 alt = false;687 }688 if (holdtalk) {689 micEnabled(false);690 }691 });692 $(document).keydown(function(e) {693 if (e.which == 77) {694 mdown = true;695 }696 if (mdown && alt) {697 micEnabled(true);698 }699 }).keyup(function(e) { 700 if (e.which == 77) {701 mdown = false;702 }703 if (holdtalk) {704 micEnabled(false);705 }706 });707 708 // Pause/resume recording709 $(document).on("click", "#"+uniqueid+" #pause", function(e){710 pauseResume();711 });712 713 // Change camera size714 $(document).on("click", "#"+uniqueid+" .choose-size", function(e){715 cameraSize(e.target.id);716 })717 718 // Hide/show camera719 $(document).on("click", "#"+uniqueid+" #hide-camera", function(){720 cameraEnabled(false);721 })722 $(document).on("click", "#camera", function(){723 cameraEnabled(true);724 })725 726 // Turn on/off microphone727 $(document).on("click", "#"+uniqueid+" #mic", function(){728 micEnabled(!micon)729 })730 731 // Turn on/off tab audio732 $(document).on("click", "#"+uniqueid+" #tab-audio", function(){733 if (tabaudioon) {734 audioEnable("tab", false);735 tabaudioon = false;736 $("#"+uniqueid+" #tab-audio").removeClass("tool-active");737 $("#"+uniqueid+" #tab-audio img").attr("src", chrome.extension.getURL('./assets/images/tab-audio.svg'));738 chrome.runtime.sendMessage({type: "tab-audio-off"});739 } else {740 audioEnable("tab", true);741 tabaudioon = true;742 $("#"+uniqueid+" #tab-audio").addClass("tool-active");743 $("#"+uniqueid+" #tab-audio img").attr("src", chrome.extension.getURL('./assets/images/tab-audio-off.svg'));744 chrome.runtime.sendMessage({type: "tab-audio-on"});745 }746 })747 748 // Show camera settings749 $(document).on("mouseover", "#"+uniqueid+" #detect-iframe", function(e){750 if (cameraon) {751 $(".camera-hidden").removeClass("camera-hidden"); 752 }753 });754 755 // Hide camera settings756 $(document).on("mouseout", "#"+uniqueid+" #detect-iframe", function(e){757 $("#"+uniqueid+" #hide-camera").addClass("camera-hidden"); 758 $("#"+uniqueid+" #change-size").addClass("camera-hidden"); 759 });760 761 // Detect a click on the camera container (possible drag)762 $(document).on("mousedown", "#"+uniqueid+" #detect-iframe", function(e){763 if (e.which !== 1) return;764 e.stopPropagation()765 drag = $("#"+uniqueid+" #wrap-iframe");766 dragx = e.clientX-drag.offset().left;767 dragy = e.clientY-drag.offset().top;768 dragging = true;769 });770 771 // Detect scroll to update focus circle position772 $(document).on("scroll", function(e){773 if (focuson) {774 if (lastscrollx != $(document).scrollLeft()){775 lastx -= lastscrollx;776 lastscrollx = $(document).scrollLeft();777 lastx += lastscrollx;778 }779 if (lastscrolly != $(document).scrollTop()){780 lasty -= lastscrolly;781 lastscrolly = $(document).scrollTop();782 lasty += lastscrolly;783 } 784 focus(e); 785 }786 })787 788 // Prevent camera being dragged while drawing789 $(document).on("mousemove", "#"+uniqueid+" #detect-iframe", function(e){790 if (drawing && pendown) {791 $("#"+uniqueid+" #detect-iframe").css("pointer-events", "none");792 }793 })794 795 // Detect click on freedrawing canvas (to start drawing)796 $(document).on('mousedown', canvas_free_id, function(e) {797 startDrawing(e);798 });799 $(document).on('touchstart', canvas_free_id, function(e) {800 startDrawing(e);801 });802 803 // Detect click anywhere on the page (except tools)804 $(document).on("mousedown", function(e){805 mouseDown(e);806 });807 $(document).on("touchstart", function(e){808 mouseDown(e);809 });810 811 // Detect mouse up anywhere on the page812 $(document).on("mouseup", function(e){813 mouseUp(e);814 });815 $(document).on("touchend", function(e){816 mouseUp(e);817 });818 819 // Detect cursor moving anywhere on the page820 $(document).on("mousemove", function(e){821 mouseMove(e);822 });823 $(document).on("touchmove", function(e){824 mouseMove(e);825 })826 827 // Change line thickness for pen and eraser828 $(document).on("input change", "#"+uniqueid+" #pen-slider input", function(){829 penset = true;830 ctx_free.lineWidth = $(this).val();831 })832 $(document).on("input change", "#"+uniqueid+" #eraser-slider input", function(){833 penset = true;834 ctx_free.lineWidth = $(this).val();835 })836 837 // Delete selected object (only for arrows and text)838 $(document).on("keydown", function(e){839 if ((e.keyCode == 46 || e.key == 'Delete' || e.code == 'Delete' || e.key == 'Backspace') && canvas.getActiveObject() && !canvas.getActiveObject().isEditing) {840 canvas.remove(canvas.getActiveObject());841 canvas.renderAll(); 842 }843 })844 845 // Detect when the window changes size846 $(window).resize(function() {847 onResize();848 }); 849 850 // Show toolbar if hovering (if setting is enabled)851 $(document).on("mouseover", "#"+uniqueid+" #toolbar-record", function(){852 if (!mousedown) {853 mouseover = true;854 $("#"+uniqueid+" #toolbar-record").removeClass("toolbar-inactive");855 if ($("#"+uniqueid+" #pen").hasClass("pen-options")) {856 $("#"+uniqueid+" #toolbar-record-pen").removeClass("toolbar-inactive");857 } else if ($("#"+uniqueid+" #settings").hasClass("pen-options")) {858 $("#"+uniqueid+" #toolbar-settings").removeClass("toolbar-inactive");859 } else if ($("#"+uniqueid+" #cursor").hasClass("pen-options")) {860 $("#"+uniqueid+" #toolbar-record-cursor").removeClass("toolbar-inactive");861 }862 }863 });864 865 // Hide toolbar on mouseout (if setting is enabled)866 $(document).on("mouseout", "#"+uniqueid+" #toolbar-record", function(){867 mouseover = false;868 window.setTimeout(function(){869 if (!mouseover && !moretools && !persistent) {870 $("#"+uniqueid+" #toolbar-record").addClass("toolbar-inactive");871 }872 },500)873 });874 875 // Open settings panel876 $(document).on("click", "#"+uniqueid+" #toolbar-record #settings", function(){877 if ($("#"+uniqueid+" #toolbar-record #settings").hasClass("pen-options")) {878 moretools = false;879 $("#"+uniqueid+" #toolbar-record #settings").removeClass("pen-options");880 $("#"+uniqueid+" #toolbar-record #settings img").attr("src", chrome.extension.getURL('./assets/images/settings.svg'));881 $("#"+uniqueid+" #toolbar-settings").addClass("toolbar-inactive");882 } else {883 sendSettings();884 moretools = true;885 $("#"+uniqueid+" #toolbar-settings").removeClass("toolbar-inactive");886 $("#"+uniqueid+" #toolbar-record #pen").removeClass("pen-options");887 if (arrowon || texton || drawing) {888 $("#"+uniqueid+" #toolbar-record #pen").addClass("tool-active");889 $("#"+uniqueid+" #toolbar-record #pen img").attr("src", chrome.extension.getURL('./assets/images/penactive.svg'));890 } else {891 $("#"+uniqueid+" #toolbar-record #pen img").attr("src", chrome.extension.getURL('./assets/images/pen.svg'));892 }893 $("#"+uniqueid+" #toolbar-record #cursor").removeClass("pen-options");894 $("#"+uniqueid+" #toolbar-record #cursor img").attr("src", chrome.extension.getURL('./assets/images/cursor.svg'));895 $("#"+uniqueid+" #toolbar-record-cursor").addClass("toolbar-inactive");896 $("#"+uniqueid+" #toolbar-record-pen").addClass("toolbar-inactive");897 $("#"+uniqueid+" #toolbar-record #settings").addClass("pen-options");898 $("#"+uniqueid+" #toolbar-record #settings img").attr("src", chrome.extension.getURL('./assets/images/close.svg'));899 }900 });901 902 // Show/hide slider for pen tool903 $(document).on("mouseenter", "#"+uniqueid+" #pen-tool", function(){904 if (drawing && tooltype == "draw") {905 $("#"+uniqueid+" #pen-slider").removeClass("toolbar-inactive"); 906 penhover = true;907 }908 });909 $(document).on("mouseleave", "#"+uniqueid+" #pen-tool", function(){910 penhover = false;911 window.setTimeout(function(){912 if (!sliderhover && drawing && tooltype == "draw"){913 $("#"+uniqueid+" #pen-slider").addClass("toolbar-inactive"); 914 }915 },50)916 });917 $(document).on("mouseenter", "#"+uniqueid+" #pen-slider", function(){918 sliderhover = true; 919 });920 $(document).on("mouseleave", "#"+uniqueid+" #pen-slider", function(){921 sliderhover = false;922 window.setTimeout(function(){923 if (!penhover && drawing && tooltype == "draw"){924 $("#"+uniqueid+" #pen-slider").addClass("toolbar-inactive"); 925 }926 },50)927 });928 929 // Show/hide slider for eraser tool930 $(document).on("mouseenter", "#"+uniqueid+" #eraser", function(){931 if (drawing && tooltype == "erase") {932 $("#"+uniqueid+" #eraser-slider").removeClass("toolbar-inactive"); 933 eraserhover = true;934 }935 });936 $(document).on("mouseleave", "#"+uniqueid+" #eraser", function(){937 eraserhover = false;938 window.setTimeout(function(){939 if (!sliderhovereraser && drawing && tooltype == "erase"){940 $("#"+uniqueid+" #eraser-slider").addClass("toolbar-inactive"); 941 }942 },50)943 });944 $(document).on("mouseenter", "#"+uniqueid+" #eraser-slider", function(){945 sliderhovereraser = true; 946 });947 $(document).on("mouseleave", "#"+uniqueid+" #eraser-slider", function(){948 sliderhovereraser = false;949 window.setTimeout(function(){950 if (!eraserhover && drawing && tooltype == "erase"){951 $("#"+uniqueid+" #eraser-slider").addClass("toolbar-inactive"); 952 }953 },50)954 });955 956 // Open pen toolbar, or discard the recording if it's paused957 $(document).on("click", "#"+uniqueid+" #toolbar-record #pen", function(){958 if (recording) {959 if ($("#"+uniqueid+" #toolbar-record #pen").hasClass("pen-options")) {960 moretools = false;961 $("#"+uniqueid+" #toolbar-record #pen").removeClass("pen-options");962 $("#"+uniqueid+" #toolbar-record-pen").addClass("toolbar-inactive");963 if (arrowon || texton || drawing) {964 $("#"+uniqueid+" #toolbar-record #pen").addClass("tool-active");965 $("#"+uniqueid+" #toolbar-record #pen img").attr("src", chrome.extension.getURL('./assets/images/penactive.svg'));966 } else {967 $("#"+uniqueid+" #toolbar-record #pen img").attr("src", chrome.extension.getURL('./assets/images/pen.svg'));968 }969 } else {970 $("#"+uniqueid+" #toolbar-record #pen").removeClass("tool-active");971 moretools = true;972 $("#"+uniqueid+" #toolbar-record #settings").removeClass("pen-options");973 $("#"+uniqueid+" #toolbar-record #settings img").attr("src", chrome.extension.getURL('./assets/images/settings.svg'));974 $("#"+uniqueid+" #toolbar-settings").addClass("toolbar-inactive");975 $("#"+uniqueid+" #toolbar-record #cursor").removeClass("pen-options");976 $("#"+uniqueid+" #toolbar-record-cursor").addClass("toolbar-inactive");977 $("#"+uniqueid+" #toolbar-record #cursor img").attr("src", chrome.extension.getURL('./assets/images/cursor.svg'));978 $("#"+uniqueid+" #toolbar-record #pen").addClass("pen-options");979 $("#"+uniqueid+" #toolbar-record #pen img").attr("src", chrome.extension.getURL('./assets/images/close.svg'));980 $("#"+uniqueid+" #toolbar-record-pen").removeClass("toolbar-inactive");981 }982 } else {983 cancelRecording();984 }985 });986 987 // Open cursor toolbar, or save the recording if it's paused988 $(document).on("click", "#"+uniqueid+" #toolbar-record #cursor", function(){989 if (recording) {990 if ($("#"+uniqueid+" #toolbar-record #cursor").hasClass("pen-options")) {991 moretools = false;992 $("#"+uniqueid+" #toolbar-record #cursor").removeClass("pen-options");993 $("#"+uniqueid+" #toolbar-record #cursor img").attr("src", chrome.extension.getURL('./assets/images/cursor.svg'));994 $("#"+uniqueid+" #toolbar-record-cursor").addClass("toolbar-inactive");995 } else {996 moretools = true;997 $("#"+uniqueid+" #toolbar-record #settings").removeClass("pen-options");998 $("#"+uniqueid+" #toolbar-record #settings img").attr("src", chrome.extension.getURL('./assets/images/settings.svg'));999 $("#"+uniqueid+" #toolbar-settings").addClass("toolbar-inactive");1000 $("#"+uniqueid+" #toolbar-record #pen").removeClass("pen-options");1001 if (arrowon || texton || drawing) {1002 $("#"+uniqueid+" #toolbar-record #pen").addClass("tool-active");1003 $("#"+uniqueid+" #toolbar-record #pen img").attr("src", chrome.extension.getURL('./assets/images/penactive.svg'));1004 } else {1005 $("#"+uniqueid+" #toolbar-record #pen img").attr("src", chrome.extension.getURL('./assets/images/pen.svg'));1006 }1007 $("#"+uniqueid+" #toolbar-record-pen").addClass("toolbar-inactive");1008 $("#"+uniqueid+" #toolbar-record #cursor").addClass("pen-options");1009 $("#"+uniqueid+" #toolbar-record #cursor img").attr("src", chrome.extension.getURL('./assets/images/close.svg'));1010 $("#"+uniqueid+" #toolbar-record-cursor").removeClass("toolbar-inactive");1011 }1012 } else {1013 saveRecording();1014 }1015 });1016 1017 // Enable/disable freedrawing1018 $(document).on("click", "#"+uniqueid+" #pen-tool", function(){1019 if ($("#"+uniqueid+" #pen-tool").hasClass("tool-active")) {1020 $("#"+uniqueid+" #pen-slider").addClass("toolbar-inactive");1021 drawing = false;1022 $("#"+uniqueid+" #canvas-freedraw").css("pointer-events", 'none');1023 $("#"+uniqueid+" #pen-tool").removeClass("tool-active");1024 $("#"+uniqueid+" #pen-tool img").attr("src", chrome.extension.getURL('./assets/images/pen.svg'));1025 } else {1026 $("#"+uniqueid+" #pen-slider").removeClass("toolbar-inactive");1027 resetDrawingTools();1028 canvas.discardActiveObject();1029 canvas.renderAll(); 1030 tooltype = 'draw';1031 drawing = true;1032 $("#"+uniqueid+" #canvas-freedraw").css("pointer-events", 'all');1033 $("#"+uniqueid+" #canvas-cont").css("pointer-events", 'none');1034 $("#"+uniqueid+" #pen-tool").addClass("tool-active");1035 $("#"+uniqueid+" #pen-tool img").attr("src", chrome.extension.getURL('./assets/images/penactive.svg'));1036 }1037 });1038 1039 // Enable/disable eraser1040 $(document).on("click", "#"+uniqueid+" #eraser", function(){1041 if ($("#"+uniqueid+" #eraser").hasClass("tool-active")) {1042 $("#"+uniqueid+" #eraser-slider").addClass("toolbar-inactive");1043 drawing = false;1044 $("#"+uniqueid+" #canvas-freedraw").css("pointer-events", 'none');1045 $("#"+uniqueid+" #eraser").removeClass("tool-active");1046 $("#"+uniqueid+" #eraser img").attr("src", chrome.extension.getURL('./assets/images/eraser.svg'));1047 } else {1048 $("#"+uniqueid+" #eraser-slider").removeClass("toolbar-inactive");1049 resetDrawingTools();1050 canvas.discardActiveObject();1051 canvas.renderAll(); 1052 drawing = true;1053 tooltype = 'erase';1054 $("#"+uniqueid+" #canvas-freedraw").css("pointer-events", 'all');1055 $("#"+uniqueid+" #canvas-cont").css("pointer-events", 'none');1056 $("#"+uniqueid+" #eraser").addClass("tool-active");1057 $("#"+uniqueid+" #eraser img").attr("src", chrome.extension.getURL('./assets/images/eraseractive.svg'));1058 }1059 });1060 1061 // Enable/disable text tool1062 $(document).on("click", "#"+uniqueid+" #text", function(){1063 if (texton) {1064 texton = false;1065 $("#"+uniqueid+" #canvas-cont").css("pointer-events", 'none');1066 $("#"+uniqueid+" #text").removeClass("tool-active");1067 $("#"+uniqueid+" #text img").attr("src", chrome.extension.getURL('./assets/images/text.svg'));1068 canvas.defaultCursor = "crosshair";1069 } else {1070 resetDrawingTools();1071 texton = true;1072 $("#"+uniqueid+" #canvas-cont").css("pointer-events", 'all');1073 $("#"+uniqueid+" #canvas-freedraw").css("pointer-events", 'none');1074 $("#"+uniqueid+" #text").addClass("tool-active");1075 $("#"+uniqueid+" #text img").attr("src", chrome.extension.getURL('assets/images/textactive.svg'));1076 canvas.defaultCursor = "text";1077 }1078 });1079 1080 // Enable/disable arrow tool1081 $(document).on("click", "#"+uniqueid+" #arrow", function(){1082 if (arrowon) {1083 arrowon = false;1084 window.arrowon = arrowon;1085 $("#"+uniqueid+" #canvas-cont").css("pointer-events", 'none');1086 $("#"+uniqueid+" #arrow").removeClass("tool-active");1087 $("#"+uniqueid+" #arrow img").attr("src", chrome.extension.getURL('./assets/images/arrow.svg'));1088 } else {1089 resetDrawingTools();1090 arrowon = true;1091 window.arrowon = arrowon;1092 $("#"+uniqueid+" #canvas-cont").css("pointer-events", 'all');1093 $("#"+uniqueid+" #canvas-freedraw").css("pointer-events", 'none');1094 $("#"+uniqueid+" #arrow").addClass("tool-active");1095 $("#"+uniqueid+" #arrow img").attr("src", chrome.extension.getURL('./assets/images/arrowactive.svg'));1096 canvas.defaultCursor = "crosshair";1097 }1098 });1099 1100 // Enable/disable click highlight1101 $(document).on("click", "#"+uniqueid+" #click-tool", function(){1102 if (clickon) {1103 clickon = false;1104 $("#"+uniqueid+" #click-tool").removeClass("tool-active");1105 $("#"+uniqueid+" #click-tool img").attr("src", chrome.extension.getURL('./assets/images/click.svg'));1106 } else {1107 clickon = true;1108 $("#"+uniqueid+" #click-tool").addClass("tool-active");1109 $("#"+uniqueid+" #click-tool img").attr("src", chrome.extension.getURL('./assets/images/clickactive.svg'));1110 }1111 });1112 1113 // Enable/disable cursor highlight1114 $(document).on("click", "#"+uniqueid+" #focus-tool", function(e){1115 if (focuson) {1116 ctx_focus.clearRect(0, 0, canvas_focus.width, canvas_focus.height);1117 focuson = false;1118 $("#"+uniqueid+" #focus-tool").removeClass("tool-active");1119 $("#"+uniqueid+" #focus-tool img").attr("src", chrome.extension.getURL('./assets/images/focus.svg'));1120 } else {1121 focuson = true;1122 focus(e);1123 $("#"+uniqueid+" #focus-tool").addClass("tool-active");1124 $("#"+uniqueid+" #focus-tool img").attr("src", chrome.extension.getURL('./assets/images/focusactive.svg'));1125 }1126 });1127 1128 // Enable/disable hiding cursor on inactivity1129 $(document).on("click", "#"+uniqueid+" #hide-cursor-tool", function(e){1130 if (hideon) {1131 ctx_focus.clearRect(0, 0, canvas_focus.width, canvas_focus.height);1132 hideon = false;1133 $("#"+uniqueid+" #hide-cursor-tool").removeClass("tool-active");1134 $("#"+uniqueid+" #hide-cursor-tool img").attr("src", chrome.extension.getURL('./assets/images/hide-cursor.svg'));1135 } else {1136 hideon = true;1137 $("#"+uniqueid+" #hide-cursor-tool").addClass("tool-active");1138 $("#"+uniqueid+" #hide-cursor-tool img").attr("src", chrome.extension.getURL('./assets/images/hide-cursoractive.svg'));1139 }1140 });1141 1142 // Clear the canvas1143 $(document).on("click", "#clear", function(){1144 canvas.clear();1145 ctx_free.clearRect(0, 0, canvas_free.width, canvas_free.height);1146 })1147 // Listen for popup/background/content messages1148 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {1149 if (request.type == "camera-list") {1150 cameradevices = request.devices;1151 } else if (request.type == "audio-list") {1152 audiodevices = request.devices;1153 } else if (request.type == "end") {1154 injectCode(false, false);1155 } else if (request.type == "pause/resume") {1156 pauseResume();1157 } else if (request.type == "mute/unmute") {1158 if (micon) {1159 micEnabled(false);1160 } else {1161 micEnabled(true);1162 }1163 } else if (request.type == "push-to-talk") {1164 holdtalk = request.enabled;1165 micEnabled(false);1166 } else if (request.type == "switch-toolbar") {1167 persistent = request.enabled;1168 if (persistent) {1169 $("#toolbar-record").removeClass("toolbar-inactive");1170 } else {1171 $("#toolbar-record").addClass("toolbar-inactive");1172 }1173 } else if (request.type == "restart") {1174 camerapos = request.camerapos;1175 camerasize = request.camerasize;1176 injectCode(true, request.countdown);1177 } else if (request.type == "update-camera") {1178 if (request.id == "disabled" || request.id == 0) {1179 cameraEnabled(false);1180 } else if (request.id == "disabled-access") {1181 $("#"+uniqueid+" #camera").addClass("camera-on");1182 $("#"+uniqueid+" #toolbar-settings").addClass("settings-camon");1183 $("#"+uniqueid+" #wrap-iframe").addClass("no-camera");1184 $("#"+uniqueid+" #hide-camera").addClass("camera-hidden");1185 $("#"+uniqueid+" #detect-iframe").addClass("no-camera");1186 } else {1187 cameraEnabled(true);1188 }1189 } else if (request.type == "update-cmic") {1190 if (request.id == "disabled" || request.id == 0) {1191 micEnabled(false);1192 } else {1193 micEnabled(true);1194 }1195 } else if (request.type == "no-camera-access") {1196 $("#"+uniqueid+" #camera").addClass("camera-on");1197 $("#"+uniqueid+" #toolbar-settings").addClass("settings-camon");1198 $("#"+uniqueid+" #wrap-iframe").addClass("no-camera");1199 $("#"+uniqueid+" #hide-camera").addClass("camera-hidden");1200 $("#"+uniqueid+" #detect-iframe").addClass("no-camera");1201 }1202 });...

Full Screen

Full Screen

sidebar_menu.js

Source:sidebar_menu.js Github

copy

Full Screen

1import { scHelpers, scMq } from "~/assets/js/utils";2const { uniqueID } = scHelpers;3export const menuEntries = [4 {5 section_title: "Applications"6 },7 {8 id: uniqueID(),9 title: "Chat",10 icon: "mdi mdi-message-outline",11 page: "/pages/chat"12 },13 {14 id: uniqueID(),15 title: "Invoices",16 icon: "mdi mdi-receipt",17 page: "/pages/invoices"18 },19 {20 id: uniqueID(),21 title: "Mailbox",22 icon: "mdi mdi-email-outline",23 page: "/pages/mailbox"24 },25 {26 id: uniqueID(),27 title: "Task Board",28 icon: "mdi mdi-calendar-text",29 page: "/pages/task_board"30 },31 {32 id: uniqueID(),33 title: "Notes",34 icon: "mdi mdi-note-outline",35 page: "/pages/notes"36 },37 {38 section_title: "Menu"39 },40 {41 id: uniqueID(),42 title: "Dashboards",43 page: "/dashboard",44 icon: "mdi mdi-view-dashboard-variant",45 isOpen: false,46 level: 0,47 submenu: [48 {49 id: uniqueID(),50 title: "Dashboard 1",51 page: "/dashboard/v1"52 },53 {54 id: uniqueID(),55 title: "Dashboard 2",56 page: "/dashboard/v2"57 }58 ]59 },60 {61 id: uniqueID(),62 title: "Forms",63 page: "/forms",64 icon: "mdi mdi-format-line-style",65 isOpen: false,66 level: 0,67 submenu: [68 {69 id: uniqueID(),70 title: "Regular Elements",71 page: "/forms/regular_elements"72 },73 {74 id: uniqueID(),75 title: "Advanced Elements",76 page: "/forms/advanced_elements",77 isOpen: false,78 submenu: [79 {80 id: uniqueID(),81 title: "Chackboxes, Radio Buttons",82 page: "/forms/advanced_elements/checkbox_radio"83 },84 {85 id: uniqueID(),86 title: "Color Picker",87 page: "/forms/advanced_elements/color_picker"88 },89 {90 id: uniqueID(),91 title: "Date Picker",92 page: "/forms/advanced_elements/date_picker"93 },94 {95 id: uniqueID(),96 title: "Date Range Picker",97 page: "/forms/advanced_elements/date_range_picker"98 },99 {100 id: uniqueID(),101 title: "Input Mask",102 page: "/forms/advanced_elements/inputmask"103 },104 {105 id: uniqueID(),106 title: "Multiselect",107 page: "/forms/advanced_elements/multiselect"108 },109 {110 id: uniqueID(),111 title: "Range Slider",112 page: "/forms/advanced_elements/range_slider"113 },114 {115 id: uniqueID(),116 title: "Rating",117 page: "/forms/advanced_elements/rating"118 },119 {120 id: uniqueID(),121 title: "Select 2",122 page: "/forms/advanced_elements/select2"123 },124 {125 id: uniqueID(),126 title: "Switches",127 page: "/forms/advanced_elements/switches"128 },129 {130 id: uniqueID(),131 title: "Time Picker",132 page: "/forms/advanced_elements/time_picker"133 }134 ]135 },136 {137 id: uniqueID(),138 title: "Dynamic Fields",139 page: "/forms/dynamic_fields"140 },141 {142 id: uniqueID(),143 title: "Validation",144 page: "/forms/validation"145 },146 {147 id: uniqueID(),148 title: "Form Examples",149 page: "/forms/examples/",150 isOpen: false,151 level: 1,152 submenu: [153 {154 id: uniqueID(),155 title: "Advertising Evaluation Form",156 page: "/forms/examples/advertising_evaluation_form"157 },158 {159 id: uniqueID(),160 title: "Booking Form",161 page: "/forms/examples/booking_form"162 },163 {164 id: uniqueID(),165 title: "Car Rental Form",166 page: "/forms/examples/car_rental_form"167 },168 {169 id: uniqueID(),170 title: "Checkout Form",171 page: "/forms/examples/checkout_form"172 },173 {174 id: uniqueID(),175 title: "Contact Forms",176 page: "/forms/examples/contact_forms"177 },178 {179 id: uniqueID(),180 title: "Job Application Form",181 page: "/forms/examples/job_application_form"182 },183 {184 id: uniqueID(),185 title: "Medical History Form",186 page: "/forms/examples/medical_history_form"187 },188 {189 id: uniqueID(),190 title: "Registration Form",191 page: "/forms/examples/registration_form"192 },193 {194 id: uniqueID(),195 title: "Rental Application Form",196 page: "/forms/examples/rental_application_form"197 },198 {199 id: uniqueID(),200 title: "Transaction Feedback Form",201 page: "/forms/examples/transaction_feedback_form"202 }203 ]204 },205 {206 id: uniqueID(),207 title: "Wizard",208 page: "/forms/wizard"209 },210 {211 section_title: "WYSIWYG Editors"212 },213 {214 id: uniqueID(),215 title: "CKEditor",216 page: "/forms/wysiwyg/ckeditor"217 },218 {219 id: uniqueID(),220 title: "Quill",221 page: "/forms/wysiwyg/quill"222 }223 ]224 },225 {226 id: uniqueID(),227 title: "Components",228 page: "/components",229 icon: "mdi mdi-puzzle",230 isOpen: false,231 level: 0,232 submenu: [233 {234 id: uniqueID(),235 title: "Accordion",236 page: "/components/accordion"237 },238 {239 id: uniqueID(),240 title: "Alert",241 page: "/components/alert"242 },243 {244 id: uniqueID(),245 title: "Animations",246 page: "/components/animations",247 },248 {249 id: uniqueID(),250 title: "Avatars",251 page: "/components/avatars"252 },253 {254 id: uniqueID(),255 title: "Badge, Label",256 page: "/components/badge_label"257 },258 {259 id: uniqueID(),260 title: "Base",261 page: "/components/base"262 },263 {264 id: uniqueID(),265 title: "Breadcrumb",266 page: "/components/breadcrumb",267 tag: 'new'268 },269 {270 id: uniqueID(),271 title: "Buttons",272 page: "/components/buttons"273 },274 {275 id: uniqueID(),276 title: "FAB Buttons",277 page: "/components/fab_buttons"278 },279 {280 id: uniqueID(),281 title: "Cards",282 page: "/components/cards"283 },284 {285 id: uniqueID(),286 title: "Color Palette",287 page: "/components/color_palette"288 },289 {290 id: uniqueID(),291 title: "Drop/Dropdowns",292 page: "/components/drop_dropdowns"293 },294 {295 id: uniqueID(),296 title: "Filters",297 page: "/components/filters"298 },299 {300 id: uniqueID(),301 title: "Footer",302 page: "/components/footer"303 },304 {305 id: uniqueID(),306 title: "Grid",307 page: "/components/grid"308 },309 {310 id: uniqueID(),311 title: "Height",312 page: "/components/height",313 tag: 'new'314 },315 {316 id: uniqueID(),317 title: "Icons",318 page: "/components/icons"319 },320 {321 id: uniqueID(),322 title: "Lists",323 page: "/components/lists"324 },325 {326 id: uniqueID(),327 title: "Masonry",328 page: "/components/masonry"329 },330 {331 id: uniqueID(),332 title: "Modals/Dialogs",333 page: "/components/modals_dialogs"334 },335 {336 id: uniqueID(),337 title: "Notifications",338 page: "/components/notifications"339 },340 {341 id: uniqueID(),342 title: "Pagination",343 page: "/components/pagination",344 tag: 'new'345 },346 {347 id: uniqueID(),348 title: "Scrollable",349 page: "/components/scrollable"350 },351 {352 id: uniqueID(),353 title: "Progress/Spinners",354 page: "/components/progress_spinners"355 },356 {357 id: uniqueID(),358 title: "Slider",359 page: "/components/slider"360 },361 {362 id: uniqueID(),363 title: "Sortable",364 page: "/components/sortable"365 },366 {367 id: uniqueID(),368 title: "Tables",369 page: "/components/tables"370 },371 {372 id: uniqueID(),373 title: "Tabs",374 page: "/components/tabs"375 },376 {377 id: uniqueID(),378 title: "Timeline",379 page: "/components/timeline"380 },381 {382 id: uniqueID(),383 title: "Toolbar",384 page: "/components/toolbar"385 },386 {387 id: uniqueID(),388 title: "Tooltips",389 page: "/components/tooltips"390 },391 {392 id: uniqueID(),393 title: "Transitions",394 page: "/components/transitions"395 },396 {397 id: uniqueID(),398 title: "Width",399 page: "/components/width",400 tag: 'new'401 }402 ]403 },404 {405 id: uniqueID(),406 title: "Pages",407 page: "/pages",408 icon: "mdi mdi-application",409 isOpen: false,410 level: 0,411 submenu: [412 {413 id: uniqueID(),414 title: "Blank",415 page: "/pages/blank"416 },417 {418 id: uniqueID(),419 title: "Blank (expanded header)",420 page: "/pages/blank_header_expanded"421 },422 {423 id: uniqueID(),424 title: "Contact List",425 page: "/pages/contact_list"426 },427 {428 id: uniqueID(),429 title: "Contact List (single)",430 page: "/pages/contact_list_single"431 },432 {433 id: uniqueID(),434 title: "404 Error Page",435 page: "/url_to_test_404_error"436 },437 {438 id: uniqueID(),439 title: "Gallery",440 page: "/pages/gallery"441 },442 {443 id: uniqueID(),444 title: "Help/Faq",445 page: "/pages/help_faq"446 },447 {448 section_title: "Issue Tracker"449 },450 {451 id: uniqueID(),452 title: "List View",453 page: "/pages/issues/list"454 },455 {456 id: uniqueID(),457 title: "Issue Details",458 page: "/pages/issues/details"459 },460 {461 separator: true462 },463 {464 id: uniqueID(),465 title: "Login Page",466 page: "/login_page"467 },468 {469 id: uniqueID(),470 title: "POI listing",471 page: "/pages/poi_listing"472 },473 {474 id: uniqueID(),475 title: "Pricing Tables",476 page: "/pages/pricing_tables"477 },478 {479 id: uniqueID(),480 title: "Settings",481 page: "/pages/settings"482 },483 {484 id: uniqueID(),485 title: "User Profile",486 page: "/pages/user_profile"487 }488 ]489 },490 {491 id: uniqueID(),492 title: "Plugins",493 page: "/plugins",494 icon: "mdi mdi-power-plug",495 isOpen: false,496 level: 0,497 submenu: [498 {499 id: uniqueID(),500 title: "Ajax",501 page: "/plugins/ajax"502 },503 {504 id: uniqueID(),505 title: "Calendar",506 page: "/plugins/calendar"507 },508 {509 id: uniqueID(),510 title: "Charts",511 page: "/plugins/charts"512 },513 {514 id: uniqueID(),515 title: "Code Editor",516 page: "/plugins/code_editor"517 },518 {519 id: uniqueID(),520 title: "Data Grid",521 page: "/plugins/data_grid"522 },523 {524 id: uniqueID(),525 title: "Datatables",526 page: "/plugins/datatables"527 },528 {529 id: uniqueID(),530 title: "Diff Tool",531 page: "/plugins/diff_tool"532 },533 {534 id: uniqueID(),535 title: "Gantt Chart",536 page: "/plugins/gantt_chart"537 },538 {539 id: uniqueID(),540 title: "Google Maps",541 page: "/plugins/google_maps"542 },543 {544 id: uniqueID(),545 title: "Idle Timeout",546 page: "/plugins/idle_timeout"547 },548 {549 id: uniqueID(),550 title: "Image Cropper",551 page: "/plugins/image_cropper"552 },553 {554 id: uniqueID(),555 title: "Push Notifications",556 page: "/plugins/push_notifications"557 },558 {559 id: uniqueID(),560 title: "Tour",561 page: "/plugins/tour"562 },563 {564 id: uniqueID(),565 title: "Tree",566 page: "/plugins/tree"567 },568 {569 id: uniqueID(),570 title: "Vector Maps",571 page: "/plugins/vector_maps"572 },573 {574 id: uniqueID(),575 title: "Vue Good Table",576 page: "/plugins/vue_good_table",577 tag: 'new'578 }579 ]580 },581 {582 id: uniqueID(),583 title: "Multi level",584 page: "",585 icon: "mdi mdi-format-line-weight",586 isOpen: false,587 level: 0,588 submenu: [589 {590 id: uniqueID(),591 title: "Submenu 1",592 page: ""593 },594 {595 id: uniqueID(),596 title: "Submenu 2",597 page: "",598 isOpen: false,599 level: 1,600 submenu: [601 {602 id: uniqueID(),603 title: "Submenu 2.1",604 page: ""605 },606 {607 id: uniqueID(),608 title: "Submenu 2.2",609 page: "",610 isOpen: false,611 level: 2,612 submenu: [613 {614 id: uniqueID(),615 title: "Submenu 2.2.1",616 page: ""617 },618 {619 id: uniqueID(),620 title: "Submenu 2.2.2",621 page: ""622 },623 {624 id: uniqueID(),625 title: "Submenu 2.2.3",626 page: ""627 }628 ]629 },630 {631 id: uniqueID(),632 title: "Submenu 2.3",633 page: ""634 },635 {636 id: uniqueID(),637 title: "Submenu 2.4",638 page: ""639 }640 ]641 },642 {643 id: uniqueID(),644 title: "Submenu 3",645 page: ""646 },647 {648 id: uniqueID(),649 title: "Submenu 4",650 page: "",651 isOpen: false,652 level: 1,653 submenu: [654 {655 id: uniqueID(),656 title: "Submenu 4.1",657 page: ""658 },659 {660 id: uniqueID(),661 title: "Submenu 4.2",662 page: ""663 },664 {665 id: uniqueID(),666 title: "Submenu 4.3",667 page: ""668 }669 ]670 }671 ]672 }...

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run wpt automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful