Skip to content

Commit

Permalink
Release 2.3.0-pre
Browse files Browse the repository at this point in the history
The following changes were made:
* Element removing has been implemented in Element Changer, while remaining backwards compatible.
* Update the way elements are indexed in Element Changer.

Once again, all the credit belongs to @PlanetTheCloud. Thank you!

Co-Authored-By: Planet Cloud <[email protected]>
  • Loading branch information
4yx and PlanetTheCloud committed Sep 19, 2022
1 parent ac5752e commit 3a2839e
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 47 deletions.
49 changes: 34 additions & 15 deletions element-changer/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,29 @@

## What does it do?
As the name might suggest, it allows you to modify any VistaPanel widget element! (Well, aside from the right sidebar ones.)
You are currently able to change and remove elements.

## Where should I put it?
You can put it anywhere! We recommend avoiding the left advert area, as it will break the sidebar.

## How can I install it?
You'll first need to declare an array with the name ``changeElements`` within a script tag.

To change the elements of a group, you will need to create an object with the following properties that we'll analyze afterwards:
To change an element, you will need to create an object with the following properties that we'll analyze afterwards:
```js
{name: "Element name", attr: "attribute", value: "new value"}
{name: "Element name", action: "modify", attr: "attribute", value: "new value"}
```
To remove an element, the object will be structured like this:
```js
{name: "Element name", action: "remove"}
```

### Properties

In ``name``, you'll assign a value that corresponds with the name of the element exactly as it appears on the panel. For instance ``"Change Password"`` is what you'll need to enter to modify the Change Password element.

The action you wish to perform will be defined in ``action``. Currently, there are two actions supported, ``modify`` and ``remove``. Ensuring backwards compatibility, if you declare no action in your object the script will assume ``modify `` to be the intended action.

``attr`` is the attribute you wish to modify. There are two main attributes:
``itemdesc`` and ``url``.
The first defines the name the element will have on the panel, while the second, as you can tell by the name, defines the URL for it.
Expand All @@ -27,23 +34,32 @@ Finally, ``value`` holds the new value of the element you'll be changing, for ex
An example of the code modifying the name and URL of ``Change Password`` to ``Your Domain`` and ``https://yourdomain.com`` respectively can be seen below:
```js
changeElements = [
{name: "Change Password", attr: "itemdesc", value: "Your Domain"},
{name: "Change Password", attr: "url", value: "https://yourdomain.com"}
{name: "Change Password", action: "modify", attr: "itemdesc", value: "Your Domain"},
{name: "Change Password", action: "modify", attr: "url", value: "https://yourdomain.com"}
];
```
Likewise, an example of removing ``CNAME Records`` and ``MX Entry`` is provided here:
```js
changeElements = [
{name: "MX Entry", action: "remove"},
{name: "CNAME Records", action: "remove"}
];
```
Objects are separated by commas, so don't forget to include them when adding a new one.

### What is all of this? Where is my ready-to-use code?
Please read the Properties section before attempting to make your own modifications.

We'll provide a ready code for modifying the names and URLs of ``SiteBuilder`` and ``Softaculous Apps Installer``. Try it out in your panel (with the script, of course) to be able to better understand the process in adding your own objects.
We'll provide a ready code for modifying the names and URLs of ``SiteBuilder`` and ``Softaculous Apps Installer``, and removing ``Access Logs`` and ``Remote MySQL``. Try it out in your panel (with the script, of course) to be able to better understand the process in adding your own objects.
```html
<script type="text/javascript">
changeElements = [
{name: "SiteBuilder", attr: "itemdesc", value: "VistaPanel Themes"},
{name: "SiteBuilder", attr: "url", value: "https://vpt.cdn.wybenetwork.com"},
{name: "Softaculous Apps Installer", attr: "itemdesc", value: "VistaPanel Customizations"},
{name: "Softaculous Apps Installer", attr: "url", value: "https://vpc.cdn.wybenetwork.com"}
{name: "SiteBuilder", action: "modify", attr: "itemdesc", value: "VistaPanel Themes"},
{name: "SiteBuilder", action: "modify", attr: "url", value: "https://vpt.cdn.wybenetwork.com"},
{name: "Softaculous Apps Installer", action: "modify", attr: "itemdesc", value: "VistaPanel Customizations"},
{name: "Softaculous Apps Installer", action: "modify", attr: "url", value: "https://vpc.cdn.wybenetwork.com"},
{name: "Access Logs", action: "remove"},
{name: "Remote MySQL", action: "remove"}
];
</script>
```
Expand All @@ -68,14 +84,17 @@ A full code utilizing our example and our CDN:
```html
<script type="text/javascript">
changeElements = [
{name: "SiteBuilder", attr: "itemdesc", value: "VistaPanel Themes"},
{name: "SiteBuilder", attr: "url", value: "https://vpt.cdn.wybenetwork.com"},
{name: "Softaculous Apps Installer", attr: "itemdesc", value: "VistaPanel Customizations"},
{name: "Softaculous Apps Installer", attr: "url", value: "https://vpc.cdn.wybenetwork.com"}
{name: "SiteBuilder", action: "modify", attr: "itemdesc", value: "VistaPanel Themes"},
{name: "SiteBuilder", action: "modify", attr: "url", value: "https://vpt.cdn.wybenetwork.com"},
{name: "Softaculous Apps Installer", action: "modify", attr: "itemdesc", value: "VistaPanel Customizations"},
{name: "Softaculous Apps Installer", action: "modify", attr: "url", value: "https://vpc.cdn.wybenetwork.com"},
{name: "Access Logs", action: "remove"},
{name: "Remote MySQL", action: "remove"}
];
</script>
<script src="https://vpc.cdn.wybenetwork.com/element-changer/element-changer.js" type="text/javascript"></script>
```
## Changelog
* Created on 15 August 2022 by [Anyx](https://github.com/4yx)
* Modified on 15 August 2022 by [PlanetCloud](https://github.com/PlanetTheCloud)
* Created on 15 September 2022 by [Anyx](https://github.com/4yx)
* Modified on 15 September 2022 by [PlanetCloud](https://github.com/PlanetTheCloud)
* Last modified on 19 September 2022 by [PlanetCloud](https://github.com/PlanetTheCloud)
99 changes: 68 additions & 31 deletions element-changer/element-changer.js
Original file line number Diff line number Diff line change
@@ -1,40 +1,77 @@
/* @preserve
* Created at 15 September 2022 by Anyx and modified by PlanetCloud.
* Last modified at 19 September 2022 by PlanetCloud.
* DO NOT REMOVE CREDITS!
* Created for: Wybe Network.
*/
if (typeof changeElements !== "undefined") {
((changeElements) => {
if (changeElements.length == 0) {
return console.log('ElementChanger: Nothing to modify.');
}
var panelElementsIndex = [],
groupIndex = 0;
PAGE.appGroups.forEach(group => {
var itemIndex = 0;
group.items.forEach(item => {
if (typeof panelElementsIndex[item.itemdesc] == 'undefined') {
panelElementsIndex[item.itemdesc] = [];
}
panelElementsIndex[item.itemdesc].push({
group: groupIndex,
item: itemIndex
});
itemIndex++;
function indexPanelElements() {
let panelElementsIndex = [],
g = i = 0;
PAGE.appGroups.forEach(group => {
group.items.forEach(item => {
if (typeof panelElementsIndex[item.itemdesc] == 'undefined') {
panelElementsIndex[item.itemdesc] = [];
}
panelElementsIndex[item.itemdesc].push({
group: g,
item: i
});
groupIndex++;
i++;
});
changeElements.forEach(element => {
if (typeof panelElementsIndex[element.name] !== 'undefined') {
panelElementsIndex[element.name].forEach(e => {
PAGE.appGroups[e.group].items[e.item][element.attr] = element.value;
})
} else {
console.log(`ElementChanger: Trying to change element ${element.name} which does not exist.`);
g++;
i = 0;
});
return panelElementsIndex;
}

(() => {
if (typeof changeElements == "undefined") {
return console.log("ElementChanger: changeElements variable is not defined. No elements changed.");
}
if (changeElements.length == 0) {
return console.log('ElementChanger: Nothing to modify.');
}

// Index changeElements
var toChange = {
modify: [],
remove: []
};
changeElements.forEach(e => {
if (typeof e.action == 'undefined') {
e.action = 'modify';
}
if (!['modify', 'remove'].includes(e.action)) {
console.log(`ElementChanger: Illegal action ${e.action} specified for the following element:`, e);
return;
}
toChange[e.action].push(e);
});

// Remove elements
if (toChange.remove.length > 0) {
panelElementsIndex = indexPanelElements();
toChange.remove.forEach(r => {
if (typeof panelElementsIndex[r.name] == 'undefined') {
return console.log(`ElementChanger: Trying to remove element ${r.name} which does not exist.`)
}
panelElementsIndex[r.name].forEach(e => {
PAGE.appGroups[e.group].items = PAGE.appGroups[e.group].items.filter(i => i.itemdesc != r.name);
});
});
console.log('ElementChanger: All modifications have been made.');
})(changeElements);
} else {
console.log("ElementChanger: changeElements variable is not defined. No elements changed.");
}
}

// Modify elements
panelElementsIndex = indexPanelElements();
toChange.modify.forEach(c => {
if (typeof panelElementsIndex[c.name] == 'undefined') {
return console.log(`ElementChanger: Trying to change element ${c.name} which does not exist.`);
}
panelElementsIndex[c.name].forEach(e => {
PAGE.appGroups[e.group].items[e.item][c.attr] = c.value;
})
});

// Done!
console.log('ElementChanger: All modifications have been made.');
})();
3 changes: 2 additions & 1 deletion element-changer/element-changer.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 3a2839e

Please sign in to comment.