This is an automated email from the ASF dual-hosted git repository.
apratim pushed a commit to branch main
in repository
https://gitbox.apache.org/repos/asf/incubator-resilientdb-resvault.git
The following commit(s) were added to refs/heads/main by this push:
new 7b04f91 Update content.js
7b04f91 is described below
commit 7b04f9182899491d61ef655c940ae88f9e4e1487
Author: Apratim Shukla <[email protected]>
AuthorDate: Thu Nov 28 17:40:05 2024 -0800
Update content.js
- Now allows you to display custom modal
- The modal style can also be customized
---
public/content.js | 286 ++++++++++++++++++++++++++++++++++++++----------------
1 file changed, 201 insertions(+), 85 deletions(-)
diff --git a/public/content.js b/public/content.js
index 75ec8ec..daeb731 100644
--- a/public/content.js
+++ b/public/content.js
@@ -23,25 +23,37 @@ function sendMessageToPage(request) {
// Add event listener to listen for messages from the web page
window.addEventListener('message', (event) => {
if (event.source === window) {
- if (event.data.direction === 'commit') {
+ const { direction } = event.data;
+ if (direction === 'commit') {
handleCommitOperation(event);
- } else if (event.data.direction === 'login') {
+ } else if (direction === 'login') {
handleLoginOperation(event);
+ } else if (direction === 'custom') {
+ handleCustomOperation(event);
}
}
});
// Handle commit operation and display the modal
function handleCommitOperation(event) {
- const { amount, data, recipient } = event.data;
+ const { amount, data, recipient, styles } = event.data;
// Ensure the amount is present before proceeding
if (amount.trim() !== '') {
- const modal = createOrUpdateModal(amount, { amount, data, recipient });
+ const modal = createOrUpdateModal('COMMIT', amount, { amount, data,
recipient }, styles);
// Event delegation handles event listeners
}
}
+// Handle custom operation and display the modal
+function handleCustomOperation(event) {
+ const { data, recipient, styles, customMessage } = event.data;
+ const amount = '1'; // Automatically assigned value 1
+ const transactionData = { amount, data, recipient };
+ const modal = createOrUpdateModal('', amount, transactionData, styles, true,
customMessage || '');
+ // Event delegation handles event listeners
+}
+
// Handle login operation and display the login modal
function handleLoginOperation(event) {
// Create or update the login modal
@@ -191,12 +203,10 @@ function handleLoginTransactionSubmit() {
);
}
-// Existing functions for commit operation remain unchanged
-
// Create or update the modal with the necessary transaction details
-function createOrUpdateModal(amount, transactionData) {
+function createOrUpdateModal(operation, amount, transactionData, styles = {},
isCustom = false, customMessage = '') {
let modal = document.getElementById('resVaultModal');
- const modalContent = generateModalContent('COMMIT', amount);
+ const modalContent = generateModalContent(operation, amount, styles,
isCustom, customMessage);
if (!modal) {
// Create the modal if it doesn't exist
@@ -233,89 +243,195 @@ function createOrUpdateModal(amount, transactionData) {
// Update transactionData on the modal element
modal.transactionData = transactionData;
+ // Apply user styles if any
+ applyStylesToModal(modal, styles);
+
return modal;
}
-// Generate the HTML content for the commit modal
-function generateModalContent(operation, amount) {
- return `
- <div id="resVaultModalContent" style="
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: #0f0638;
- padding: 20px;
- border-radius: 10px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- z-index: 1001;
- font-family: Poppins, sans-serif;
- width: 300px;
- ">
- <div style="width: calc(100%);
- padding: 20px;
- background-color: #291f57;
- border-radius: 15px;
- margin-bottom: 20px;
- box-shadow: 5px 5px 35px -14px rgba(0,0,0,.17);">
- <form id="Form" style="margin: auto;">
- <div style="width: 100%; margin-bottom: 10px;">
- <div style="padding: 0;
- width: 100%;
- margin: 0;
- overflow: hidden;
- border-radius: 0px;
- color: #fff;
- border-bottom: 1px rgba(255, 255, 255, 0.3) solid;">
- <p>
- Operation: ${operation}
- </p>
+// Generate the HTML content for the commit or custom modal
+function generateModalContent(operation, amount, styles = {}, isCustom =
false, customMessage = '') {
+ if (isCustom) {
+ return `
+ <div id="resVaultModalContent" style="
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: #0f0638;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ z-index: 1001;
+ font-family: Poppins, sans-serif;
+ width: 300px;
+ ">
+ <div style="width: calc(100%);
+ padding: 20px;
+ background-color: #291f57;
+ border-radius: 15px;
+ margin-bottom: 20px;
+ box-shadow: 5px 5px 35px -14px rgba(0,0,0,.17);">
+ <form id="Form" style="margin: auto;">
+ <div style="width: 100%; margin-bottom: 10px;">
+ <div id="customMessage" style="padding: 0;
+ width: 100%;
+ margin: 0;
+ overflow: hidden;
+ border-radius: 0px;
+ color: #fff;
+ text-align: center;
+ ">
+ <p>
+ ${customMessage || ''}
+ </p>
+ </div>
</div>
- </div>
- <div style="width: 100%;
- margin-bottom: 10px; display: flex; align-items: center;
justify-content: space-between;">
- <p id="amountDisplay" style="width: calc(((100% / 3) * 2) - 35px);
+ <p id="poweredBy" style="font-size: small; color: #fff">Powered by
Res<strong style="color: #47e7ce">Vault</strong></p>
+ </form>
+ </div>
+ <span style="display: flex;">
+ <button id="resVaultModalClose" style="
+ background-color: #291f57;
border: none;
- background-color: transparent;
- padding: 10px 0px;
- border-radius: 0px;
- border-bottom: 1px rgba(255, 255, 255, 0.3) solid;
- color: #fff;
- text-align: center;
- ">
- ${amount}
- </p>
- <div style="display: flex;
- align-items: center;">
- <div style="display: block; font-family: Arial, Helvetica,
sans-serif; font-size: 20px; font-weight: bold; color: #f0f0f0;
background-color: #808080; border-radius: 50%; width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center; margin: 10px;
transform: rotate(20deg);">R</div>
- <span style="color: #fff; font-weight: 600; padding-left:
5px;">RoK</span>
+ color: white;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ width: 50%;
+ box-sizing: border-box;
+ margin-right: 5px;">Cancel</button>
+ <button id="resVaultModalSubmit" style="
+ background: linear-gradient(60deg, #47e7ce, #4fa8c4);
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ width: 50%;
+ box-sizing: border-box;">Submit</button>
+ </span>
+ </div>`;
+ } else {
+ return `
+ <div id="resVaultModalContent" style="
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: #0f0638;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ z-index: 1001;
+ font-family: Poppins, sans-serif;
+ width: 300px;
+ ">
+ <div style="width: calc(100%);
+ padding: 20px;
+ background-color: #291f57;
+ border-radius: 15px;
+ margin-bottom: 20px;
+ box-shadow: 5px 5px 35px -14px rgba(0,0,0,.17);">
+ <form id="Form" style="margin: auto;">
+ <div style="width: 100%; margin-bottom: 10px;">
+ <div style="padding: 0;
+ width: 100%;
+ margin: 0;
+ overflow: hidden;
+ border-radius: 0px;
+ color: #fff;
+ border-bottom: 1px rgba(255, 255, 255, 0.3) solid;">
+ <p>
+ Operation: ${operation}
+ </p>
+ </div>
</div>
- </div>
- <p style="font-size: small; color: #fff">Powered by Res<strong
style="color: #47e7ce">Vault</strong></p>
- </form>
- </div>
- <span style="display: flex;">
- <button id="resVaultModalClose" style="
- background-color: #291f57;
- border: none;
- color: white;
- padding: 10px 20px;
- border-radius: 5px;
- cursor: pointer;
- width: 50%;
- box-sizing: border-box;
- margin-right: 5px;">Cancel</button>
- <button id="resVaultModalSubmit" style="
- background: linear-gradient(60deg, #47e7ce, #4fa8c4);
- color: white;
- border: none;
- padding: 10px 20px;
- border-radius: 5px;
- cursor: pointer;
- width: 50%;
- box-sizing: border-box;">Submit</button>
- </span>
- </div>`;
+ <div style="width: 100%;
+ margin-bottom: 10px; display: flex; align-items: center;
justify-content: space-between;">
+ <p id="amountDisplay" style="width: calc(((100% / 3) * 2) - 35px);
+ border: none;
+ background-color: transparent;
+ padding: 10px 0px;
+ border-radius: 0px;
+ border-bottom: 1px rgba(255, 255, 255, 0.3) solid;
+ color: #fff;
+ text-align: center;
+ ">
+ ${amount}
+ </p>
+ <div style="display: flex;
+ align-items: center;">
+ <div style="display: block; font-family: Arial, Helvetica,
sans-serif; font-size: 20px; font-weight: bold; color: #f0f0f0;
background-color: #808080; border-radius: 50%; width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center; margin: 10px;
transform: rotate(20deg);">R</div>
+ <span style="color: #fff; font-weight: 600; padding-left:
5px;">RoK</span>
+ </div>
+ </div>
+ <p style="font-size: small; color: #fff">Powered by Res<strong
style="color: #47e7ce">Vault</strong></p>
+ </form>
+ </div>
+ <span style="display: flex;">
+ <button id="resVaultModalClose" style="
+ background-color: #291f57;
+ border: none;
+ color: white;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ width: 50%;
+ box-sizing: border-box;
+ margin-right: 5px;">Cancel</button>
+ <button id="resVaultModalSubmit" style="
+ background: linear-gradient(60deg, #47e7ce, #4fa8c4);
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ width: 50%;
+ box-sizing: border-box;">Submit</button>
+ </span>
+ </div>`;
+ }
+}
+
+// Apply user styles to the modal elements
+function applyStylesToModal(modal, styles) {
+ const allowedSelectors = [
+ '#resVaultModalContent',
+ '#amountDisplay',
+ '#resVaultModalClose',
+ '#resVaultModalSubmit',
+ '#customMessage',
+ '#poweredBy',
+ // Add other selectors if necessary
+ ];
+
+ const allowedStyles = {
+ '#resVaultModalContent': ['background-color', 'padding', 'border-radius',
'box-shadow', 'font-family', 'width', 'position', 'top', 'left', 'transform',
'z-index'],
+ '#amountDisplay': ['color', 'font-size', 'text-align', 'border',
'background-color', 'padding', 'border-radius'],
+ '#resVaultModalClose': ['background-color', 'color', 'border', 'padding',
'border-radius', 'cursor', 'width'],
+ '#resVaultModalSubmit': ['background-color', 'color', 'border', 'padding',
'border-radius', 'cursor', 'width'],
+ '#customMessage': ['color', 'font-size', 'text-align', 'background-color',
'padding', 'border-radius'],
+ '#poweredBy': ['color', 'font-size', 'text-align'],
+ // Other elements...
+ };
+
+ for (const selector in styles) {
+ if (!allowedSelectors.includes(selector)) {
+ continue; // Skip disallowed selectors
+ }
+ const elements = modal.querySelectorAll(selector);
+ elements.forEach(element => {
+ const styleObj = styles[selector];
+ const allowedProperties = allowedStyles[selector] || [];
+ for (const styleName in styleObj) {
+ if (allowedProperties.includes(styleName)) {
+ // Apply the style with !important to ensure precedence
+ element.style.setProperty(styleName, styleObj[styleName],
'important');
+ }
+ }
+ });
+ }
}
// Handle transaction submission and send data to background script
