Raw Source Toggle Dropdown

• Minified Source

pedrosalvarezo / Screenshot test

// ==UserScript==
// @name         Screenshot test
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       PedroSalvareso
// @match        https://tester.rainforestqa.com/tester/preassigned*
// @icon         https://www.google.com/s2/favicons?domain=rainforestqa.com
// @grant        none
// @license MIT
// @require      https://html2canvas.hertzen.com/dist/html2canvas.js
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...

    var style = document.createElement('style'); // to break-word for url copy
    style.innerHTML = `
    /* The grid: Four equal columns that floats next to each other */
    .column {
    display: inline-block;
      width: 8%;
      height: 8%;
      padding: 0px;
    }

/* Style the images inside the grid */
.column img {
  width: 100%;
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: 100%;
  color: black;
  font-size: 20px;
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 10%;
  color: black;
  font-size: 16px;
  cursor: pointer;
}
.Ssbtn {
  position: absolute;
  top: 10px;
  right: 13%;
  color: black;
  font-size: 14px;
  cursor: pointer;
}
       .Soverlay {
        margin: 0px;
        width: 0%;
        height: 100%;
        position: absolute;
        z-index: 2000000;
        right: 0;
        top: 0;
        overflow-x: hidden;
        background: rgba(0, 0, 0, 0.3);
      }
      `;

    document.body.insertBefore(style, document.body.firstChild);



    setTimeout(function() {
        var screenshotOverlay = document.createElement('div');
        screenshotOverlay.classList.add("Soverlay");





        var container = document.createElement('div');
        container.classList.add("container");

        var imgText = document.createElement('div');
        imgText.id = "imgtext";
        container.appendChild(imgText);

        var screenshotbtn = document.createElement('button');
        screenshotbtn.classList.add("Ssbtn");
        screenshotbtn.innerText = "📷";
        screenshotbtn.addEventListener('click', screenshot);
        document.body.appendChild(screenshotbtn);

        var expandedImg = document.createElement('img');
        expandedImg.id = "expandedImg";
        expandedImg.style.width = "100%";
        container.appendChild(expandedImg);


        var row = document.createElement('div');
        row.classList.add("row");
        var rowWrapper = document.createElement('div');
        rowWrapper.appendChild(row);
        screenshotOverlay.appendChild(rowWrapper);


        var sScounter = 0;

        var addRow = function(count) {
            var row = document.createElement('div');
            row.classList.add("row");
            rowWrapper.appendChild(row);
            for (var i = count; i < count + 10; i++) {
                var columnBtn = document.createElement('button');
                columnBtn.classList.add("column");
                columnBtn.id = i;
                columnBtn.onclick = myFunction;
                row.appendChild(columnBtn);
            };
        };

        for (var i = 1; i < 11; i++) {
            var columnBtn = document.createElement('button');
            columnBtn.classList.add("column");
            columnBtn.id = i;
            columnBtn.onclick = myFunction;
            row.appendChild(columnBtn);
        };

        function screenshot() {
            var vm = document.querySelector('div[class*="terminal_trackingContainer"]');
            html2canvas(vm).then(function(canvas) {
                var newimg = convertCanvasToImage(canvas);
                newimg.id = "IMG " + sScounter;
                newimg.classList.add("img");
                var column = document.getElementById(sScounter);
                if (!column) {addRow(sScounter); column = document.getElementById(sScounter);};
                column.appendChild(newimg);
            })
            sScounter += 1;
        };

        function myFunction(e) {
            var imgs = document.getElementById(e.srcElement.id);
            // Get the expanded image
            var expandImg = document.getElementById("expandedImg");
            // Get the image text
            var imgText = document.getElementById("imgtext");
            // Use the same src in the expanded image as the image being clicked on from the grid
            expandImg.src = e.srcElement.currentSrc;
            // Use the value of the id attribute of the clickable image as text inside the expanded image
            imgText.innerHTML = imgs.id;
            // Show the container element (hidden with CSS)
            expandImg.parentElement.style.display = "block";
        }


        function convertCanvasToImage(canvas) {
            let image = new Image();
            image.src = canvas.toDataURL();
            return image;
        }


        var openOverlay = function(){
            screenshotOverlay.style.width = "100%";
        };

        var closeOverlay = function(){
            screenshotOverlay.style.width = "0%";
        };

        var closebtn = document.createElement('button');
        closebtn.classList.add("closebtn");
        closebtn.innerText = "Close";
        closebtn.addEventListener('click', closeOverlay);
        screenshotOverlay.appendChild(closebtn);

        var openbtn = document.createElement('button');
        openbtn.classList.add("closebtn");
        openbtn.innerText = "Open";
        openbtn.addEventListener('click', openOverlay);
        document.body.appendChild(openbtn);


        var toolBar = document.querySelector("div.terminal_toolbar_3Z6dn")
        if (toolBar){

        }


        screenshotOverlay.appendChild(container);
        document.body.appendChild(screenshotOverlay);



    }, 2000);



})();