aolko Posts - Answer Overflow

function shadowify(){
        // Get the body element
        var body = $(`body`);

        // Move the contents to the new hidden body
        $(`html`).append(`<div id="__body" data-shadow></div>`);
        var hiddenBody = $(`#__body`);
        hiddenBody.html(body.html());

        // Create a shadow root for the body element
        var shadowRoot = hiddenBody[0].attachShadow({mode: 'open'});

        // Move the contents of the body element to the shadow DOM
        shadowRoot.innerHTML = hiddenBody.html();

        // Clear the contents of the body element and hidden body
        body.html('');
        hiddenBody.html('');
    };

function shadowify(){
        // Get the body element
        var body = $(`body`);

        // Move the contents to the new hidden body
        $(`html`).append(`<div id="__body" data-shadow></div>`);
        var hiddenBody = $(`#__body`);
        hiddenBody.html(body.html());

        // Create a shadow root for the body element
        var shadowRoot = hiddenBody[0].attachShadow({mode: 'open'});

        // Move the contents of the body element to the shadow DOM
        shadowRoot.innerHTML = hiddenBody.html();

        // Clear the contents of the body element and hidden body
        body.html('');
        hiddenBody.html('');
    };

2 replies

KPCKevin Powell - Community

•Created by aolko on 5/5/2023 in #resources

Awesome PHP

For those who want to dabble in php https://github.com/ziadoz/awesome-php

1 replies

KPCKevin Powell - Community

•Created by aolko on 4/25/2023 in #os-and-tools

Tools for writing css components?

Are there any JS-less (i.e. don't require working with js (i.e. react/vue and jsx) when writing, not building) tools for conveniently organizing and aiding in writing css components or "design systems"? I know of storybook, but it's heavily reliant on js.

1 replies

KPCKevin Powell - Community

•Created by aolko on 3/12/2023 in #os-and-tools

good visual crutches for css grids?

anyone knows good visual crutches 🩼 for css grids, like webflow has? https://youtu.be/1ViSR5fSDwg (Under visual crutches I mean the UI means of building grids visually. You can see said UI throughout the video)

10 replies

KPCKevin Powell - Community

•Created by aolko on 1/27/2023 in #resources

PageAutomator

I present to you PageAutomator - an automation script for the browser. It was inspired by WinAutomation. It's currently available at greasyfork, but you can use it outside the userscript, be sure to add the dependencies though. https://greasyfork.org/en/scripts/458951-pageautomator/code You can init it like this:

var automator = new PageAutomator();

var automator = new PageAutomator();

And I recommend running it after dom is fully loaded:

window.onload = function() {
  var automator = new PageAutomator();

  // Mouse events
automator.hover("#some-element");
automator.click("#some-element", "left");
automator.click("#some-element", "right");
automator.scroll(200);
automator.hold("#some-element", "left");
automator.hold("#some-element", "right");
automator.moveToPosition(200, 200);
automator.moveToElement("#some-element");
var position = automator.getPosition();
console.log(position);

// Keyboard events
automator.keyPress("a");
automator.keyUp("a");
automator.keyDown("a");
automator.holdKey("a");
automator.setKeyState("numlock", true);

// Block input
automator.blockInput();

// Timer events
automator.wait(1000);
automator.waitForElement("#some-element");
automator.waitForMouse("pointer");

// Conditionals
if (automator.ifElement("#some-element", "contains", "text")) {
  console.log("element contains the specified text");
}

// Dialogs and message boxes
automator.showNotification("This is a notification");
automator.showDialog("This is a dialog");
automator.showCustomDialog("<p>This is a custom dialog</p>");

// Clipboard
var clipboardText = automator.getClipboardText();
console.log(clipboardText);
automator.setClipboardText("text to set to clipboard");
automator.clearClipboard();
}

window.onload = function() {
  var automator = new PageAutomator();

  // Mouse events
automator.hover("#some-element");
automator.click("#some-element", "left");
automator.click("#some-element", "right");
automator.scroll(200);
automator.hold("#some-element", "left");
automator.hold("#some-element", "right");
automator.moveToPosition(200, 200);
automator.moveToElement("#some-element");
var position = automator.getPosition();
console.log(position);

// Keyboard events
automator.keyPress("a");
automator.keyUp("a");
automator.keyDown("a");
automator.holdKey("a");
automator.setKeyState("numlock", true);

// Block input
automator.blockInput();

// Timer events
automator.wait(1000);
automator.waitForElement("#some-element");
automator.waitForMouse("pointer");

// Conditionals
if (automator.ifElement("#some-element", "contains", "text")) {
  console.log("element contains the specified text");
}

// Dialogs and message boxes
automator.showNotification("This is a notification");
automator.showDialog("This is a dialog");
automator.showCustomDialog("<p>This is a custom dialog</p>");

// Clipboard
var clipboardText = automator.getClipboardText();
console.log(clipboardText);
automator.setClipboardText("text to set to clipboard");
automator.clearClipboard();
}

I've also tried to make the events chainable, so you can type them out like jquery events.

1 replies

KPCKevin Powell - Community

•Created by aolko on 1/18/2023 in #front-end

Separate conditions depending on children

How do i specify separate conditions if element has different children? For example - if a .button only has .icon - set the aspect-ratio to 1/1, if it has .icon and .text - unset the aspect-ratio and set the width to 100%

24 replies

Gaming

Programming