KaneAI - World’s First E2E Software Testing Agent.Book a Demo Join TestMu Conference

How to use uniqueId method in wpt

Best JavaScript code snippet using wpt

content.js

Source:content.js

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    });...

sidebar_menu.js

Source:sidebar_menu.js

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	}...

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.