Skip to content

Commit

Permalink
codeblocks
Browse files Browse the repository at this point in the history
  • Loading branch information
@xander-haj
xander-haj committed Nov 25, 2024
1 parent 25c548f commit 27320c3
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 126 deletions.
62 changes: 32 additions & 30 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,38 +11,40 @@
<h1>Python Script Merger</h1>

<!-- Input Section -->
<div class="input-section">
<div class="file-input">
<label for="fileInput1">Script 1:</label>
<div id="dropZone1" class="drop-zone">
<p>Drag & Drop Script 1 here or</p>
<button type="button" class="select-button" id="selectButton1">Select File</button>
<input type="file" id="fileInput1" accept=".py" hidden>
<span id="fileName1" class="file-name">No file selected</span>
</div>
<textarea id="script1" placeholder="Script 1 content will appear here..." readonly></textarea>
</div>

<div class="file-input">
<label for="fileInput2">Script 2:</label>
<div id="dropZone2" class="drop-zone">
<p>Drag & Drop Script 2 here or</p>
<button type="button" class="select-button" id="selectButton2">Select File</button>
<input type="file" id="fileInput2" accept=".py" hidden>
<span id="fileName2" class="file-name">No file selected</span>
</div>
<textarea id="script2" placeholder="Script 2 content will appear here..." readonly></textarea>
</div>
<!-- Input Section -->
<div class="input-section">
<div class="file-input">
<label for="fileInput1">Script 1:</label>
<div id="dropZone1" class="drop-zone">
<p>Drag & Drop Script 1 here or</p>
<button type="button" class="select-button" id="selectButton1">Select File</button>
<input type="file" id="fileInput1" accept=".py" hidden>
<span id="fileName1" class="file-name">No file selected</span>
</div>

<!-- Merged Output Section -->
<div id="mergedSection">
<button id="mergeButton">Merge Scripts</button>
<div id="progressBar" class="progress-bar hidden">
<div class="progress"></div>
</div>
<div id="diffOutput"style="text-align: left;" class="output-box"></div>
<pre id="script1" class="code-block"><code></code></pre>
</div>

<div class="file-input">
<label for="fileInput2">Script 2:</label>
<div id="dropZone2" class="drop-zone">
<p>Drag & Drop Script 2 here or</p>
<button type="button" class="select-button" id="selectButton2">Select File</button>
<input type="file" id="fileInput2" accept=".py" hidden>
<span id="fileName2" class="file-name">No file selected</span>
</div>
<pre id="script2" class="code-block"><code></code></pre>
</div>
</div>

<!-- Merged Output Section -->
<div id="mergedSection">
<button id="mergeButton">Merge Scripts</button>
<div id="progressBar" class="progress-bar hidden">
<div class="progress"></div>
</div>
<pre id="diffOutput" class="code-block"><code></code></pre>
</div>

</div>

<script src="./script.js"></script>
Expand Down
56 changes: 19 additions & 37 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,25 +43,26 @@ document.addEventListener('DOMContentLoaded', () => {
});

// Handle file reading and display content in textarea
function handleFile(file, textarea) {
function handleFile(file, codeElement) {
const reader = new FileReader();
reader.onload = (e) => {
textarea.value = e.target.result;
codeElement.textContent = e.target.result; // Set textContent for raw text
};
reader.onerror = () => {
alert('Error reading file.');
};
reader.readAsText(file);
}

dropZone1.addEventListener('drop', (e) => handleFile(e.dataTransfer.files[0], script1));
dropZone2.addEventListener('drop', (e) => handleFile(e.dataTransfer.files[0], script2));
dropZone1.addEventListener('drop', (e) => handleFile(e.dataTransfer.files[0], document.querySelector('#script1 code')));
dropZone2.addEventListener('drop', (e) => handleFile(e.dataTransfer.files[0], document.querySelector('#script2 code')));

selectButton1.addEventListener('click', () => fileInput1.click());
selectButton2.addEventListener('click', () => fileInput2.click());

fileInput1.addEventListener('change', () => handleFile(fileInput1.files[0], script1));
fileInput2.addEventListener('change', () => handleFile(fileInput2.files[0], script2));
fileInput1.addEventListener('change', () => handleFile(fileInput1.files[0], document.querySelector('#script1 code')));
fileInput2.addEventListener('change', () => handleFile(fileInput2.files[0], document.querySelector('#script2 code')));


// Simulate progress bar
function simulateProgress(callback) {
Expand All @@ -80,55 +81,36 @@ document.addEventListener('DOMContentLoaded', () => {

// Merge and display diffs
mergeButton.addEventListener('click', () => {
const content1 = script1.value.split("\n");
const content2 = script2.value.split("\n");

const content1 = document.querySelector('#script1 code').textContent.split("\n");
const content2 = document.querySelector('#script2 code').textContent.split("\n");
const diffCode = document.querySelector('#diffOutput code');

if (!content1.length || !content2.length) {
alert('Please select or drop both Python scripts.');
return;
}

simulateProgress(() => {
let mergedHtml = "<div class='diff-container'><table>";
let mergedHtml = "";

// Process content1 (File 1 - Base)
content1.forEach((line, index) => {
mergedHtml += `
<tr>
<td class="line-number">${index + 1}</td>
<td class="line-content" style="background-color: rgba(76, 175, 80, 0.2);">
${line}
</td>
</tr>`;
content1.forEach((line) => {
mergedHtml += `<span style="background-color: rgba(76, 175, 80, 0.2);">${line}</span>\n`;
});

// Process content2 (File 2 - Merging)
content2.forEach((line, index) => {
content2.forEach((line) => {
if (content1.includes(line)) {
// Duplicate lines (Purple)
mergedHtml += `
<tr>
<td class="line-number">${content1.indexOf(line) + 1}</td>
<td class="line-content" style="background-color: rgba(156, 39, 176, 0.2);">
${line}
</td>
</tr>`;
mergedHtml += `<span style="background-color: rgba(156, 39, 176, 0.2);">${line}</span>\n`;
} else {
// New lines (Blue)
mergedHtml += `
<tr>
<td class="line-number">${content1.length + index + 1}</td>
<td class="line-content" style="background-color: rgba(33, 150, 243, 0.2);">
${line}
</td>
</tr>`;
mergedHtml += `<span style="background-color: rgba(33, 150, 243, 0.2);">${line}</span>\n`;
}
});

mergedHtml += "</table></div>";

// Set the merged output in the diffOutput div
diffOutput.innerHTML = mergedHtml;
// Populate the merged output
diffCode.innerHTML = mergedHtml;
});
});

Expand Down
73 changes: 14 additions & 59 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,17 +41,6 @@ h1 {
gap: 10px;
}

textarea {
resize: vertical;
background-color: #1e1e1e;
color: #fff;
padding: 10px;
border-radius: 5px;
font-family: 'Courier New', Courier, monospace;
width: 100%;
min-height: 150px;
}

/* Drag and Drop Zones */
.drop-zone {
background-color: #1e1e1e;
Expand Down Expand Up @@ -107,65 +96,31 @@ textarea {
transition: width 0.2s;
}

#diffOutput {
margin-top: 20px;
/* Consolidated Code Block Styling */
.code-block {
background-color: #1e1e1e;
color: white;
padding: 10px;
border-radius: 5px;
font-family: 'Courier New', Courier, monospace;
width: 100%;
min-height: 200px;
max-height: 500px;
overflow-y: auto;
white-space: pre-wrap; /* Preserve line breaks */
text-align: left;
overflow-x: auto; /* Enable horizontal scrolling */
max-height: 500px; /* Limit height */
min-height: 150px; /* Set a minimum height */
border: 1px solid #333;
text-align: left; /* Ensure all text is left-aligned */
}

/* Diff Container */
.diff-container {
margin-top: 20px;
background-color: #1e1e1e;
color: white;
padding: 10px;
border-radius: 5px;
font-family: 'Courier New', Courier, monospace;
width: 100%;
overflow-x: auto;
}

/* Diff Table */
.diff-container table {
width: 100%;
border-collapse: collapse;
}

.diff-container td {
padding: 5px 10px; /* Uniform padding inside each cell */
vertical-align: top; /* Aligns content to the top of the cell */
border-bottom: 1px solid #444; /* Adds a subtle separator between rows */
.code-block code {
display: block;
word-break: break-word; /* Handle long lines */
}

/* Line Numbers */
.line-number {
text-align: right; /* Aligns the line numbers to the right */
padding-right: 10px; /* Adds padding for separation from the content */
font-family: 'Courier New', Courier, monospace;
text-align: right; /* Align line numbers to the right */
padding-right: 10px;
color: #888;
background-color: #2e2e2e; /* Background color for distinction */
border-right: 1px solid #444; /* Adds a separator line */
}


/* Line Content */
.line-content {
text-align: left !important; /* Absolutely enforce left alignment */
display: block; /* Ensure it behaves like a block element */
padding-left: 10px; /* Add spacing for readability */
font-family: 'Courier New', Courier, monospace; /* Monospace font for code readability */
white-space: pre-wrap; /* Preserve line breaks and spacing */
word-wrap: break-word; /* Prevent long words or content from overflowing */
margin: 0; /* Remove any inherited margins */
background-color: #2e2e2e;
border-right: 1px solid #444;
}


0 comments on commit 27320c3

Please sign in to comment.