PowerApps-Environment-Highlight/highlight.user.js at main · TrueNorthIT/PowerApps-Environment-Highlight · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
// ==UserScript==
// @name         PowerApps Environment Highlight
// @namespace    http://tampermonkey.net/
// @version      1
// @description  A Tapermonkey userscript to provide environment specific highlighting for PowerApps
// @author       Joe Pitts @ TrueNorthIT
// @website      https://truenorthit.co.uk/
// @source       https://github.com/TrueNorthIT/PowerApps-Environment-Highlight
// @match        https://make.powerapps.com/environments/*
// @icon         https://truenorthit.co.uk/wp-content/themes/truenorth/img/icons/touch.png
// @grant        GM_addStyle
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
//
// INSERT YOUR supportedEnvironments.js SCRIPT HERE!
//          \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
// @require
//          /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
// ==/UserScript==


let setupDone = false;

function log(message) { console.log('TN: ' + message) }

function setup() {
    log("Loaded PowerApps Environment Highlight");
    let foundElements = 0;
    const requiredElements = ".o365sx-navbar, #shellHeaderSwitcherButton_container, #ppuxOfficeHeaderSearchBox_container, .ms-suiteux-search-box, .o365sx-appName, .o365sx-waffle, .o365cs-base, .o365sx-button, .ms-searchux-pG29q, #ppuxOfficeHeaderCenterRegion";
    waitForKeyElements(requiredElements, function () {
        foundElements++;
        if (foundElements === requiredElements.split(',').length) main();
    });


    let previousUrl = '';
    const observer = new MutationObserver(function (mutations) {
        if (location.href !== previousUrl) {
            previousUrl = location.href;
            console.log(`URL changed to ${location.href}`);
            if (setupDone) main();
        }
    });
    const config = { subtree: true, childList: true };
    observer.observe(document, config);
    setupDone = true;

}

function setBackgroundColour(hex) {
    log("Setting nav bar colour...");

    $("#ppuxOfficeHeaderCenterRegion").css("background", `linear-gradient(90deg, #742774 0%, ${hex} 15%, ${hex} 85%, #742774 100%)`);
}

function setMessages(before, after = null) {

    function createElement(tag, text) {
        const el = document.createElement(tag);
        el.textContent = text;
        el.className = 'tn_text';
        return el;
    }
    if (!before) main();

    log("Setting message: " + before);

    const left = createElement('h1', before);

    // For some reason it needs to be prepended twice
    $('#ppuxOfficeHeaderSearchBox_container')[0].prepend(left);
    $('#ppuxOfficeHeaderSearchBox_container')[0].prepend(left);

    if (after) {
        log("Setting message: " + after);
        const right = createElement('h1', after);
        $('#ppuxOfficeHeaderSearchBox_container')[0].appendChild(right);
    }
}

function main() {
    setTimeout(function () {
        $('.tn_text').remove();
        log('Running PowerApps Environment Highlight...')
        // Let's get the environment
        const env = $('#shellHeaderSwitcherButton_container')[0].innerText.split('\n')[1];
        // Just try again if env isnt loaded yet
        if (!env) main();

        const details = supportedEnvironments[env];
        // Unsupported Environment

        if (typeof (details) === 'undefined') {
            setBackgroundColour('#F34F41');
            setMessages(env, 'UNSUPPORTED ENVIRONMENT!');
        }
        else {
            setBackgroundColour(details.colour);
            setMessages(env, details.message);
        }
    },
    500)

}

setup();