Skip to content

Commit b41ae1d

Browse files
jasjs1jasjs1
authored
add back addons
1 parent d3ec79e commit b41ae1d

1 file changed

Lines changed: 132 additions & 5 deletions

File tree

‎src/.app/app.html‎

Lines changed: 132 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,76 @@
1010
<link rel="stylesheet" href="style.css">
1111
<link href="/dist/output.css" rel="stylesheet">
1212
<title>Programmer Netlink</title>
13+
<style>
14+
.quick-options {
15+
display: flex; /* Use flexbox to place the images in a row */
16+
align-items: center; /* Center the images vertically */
17+
}
18+
19+
.quick-options img {
20+
margin-right: 10px; /* Add some spacing between the images */
21+
}
22+
</style>
1323
</head>
24+
1425
<body>
1526

27+
28+
1629
<!-- <div id="logo">
1730
<img src="/assets/text-logo.jpg">
1831
</div> -->
1932

2033
<!-- Button to show the modal -->
2134
<button onclick="showModal()" id="showModalBtn">
2235
<img src="/assets/svg/+.svg">
36+
<script>
37+
// JavaScript
38+
// JavaScript
39+
function uploadImage() {
40+
const fileInput = document.createElement('input');
41+
fileInput.type = 'file';
42+
fileInput.accept = 'image/*'; // Only allow image files
43+
44+
fileInput.addEventListener('change', (event) => {
45+
const file = event.target.files[0];
46+
if (file) {
47+
const reader = new FileReader();
48+
reader.onload = (e) => {
49+
const imageDataUrl = e.target.result;
50+
const textarea = document.getElementById('post-title');
51+
52+
const imageBlob = dataURItoBlob(imageDataUrl);
53+
const blobURL = URL.createObjectURL(imageBlob);
54+
55+
// Add blob URL to the textarea
56+
textarea.value = blobURL;
57+
58+
// Save the blob URL to local storage
59+
localStorage.setItem('imageBlobURL', blobURL);
60+
};
61+
62+
reader.readAsDataURL(file);
63+
}
64+
});
65+
66+
// Trigger the file input dialog when the image is clicked
67+
fileInput.click();
68+
}
69+
70+
function dataURItoBlob(dataURI) {
71+
const byteString = atob(dataURI.split(',')[1]);
72+
const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
73+
const ab = new ArrayBuffer(byteString.length);
74+
const ia = new Uint8Array(ab);
75+
for (let i = 0; i < byteString.length; i++) {
76+
ia[i] = byteString.charCodeAt(i);
77+
}
78+
return new Blob([ab], { type: mimeString });
79+
}
80+
81+
82+
</script>
2383
</button>
2484

2585

@@ -28,16 +88,23 @@
2888
<!-- Modal container -->
2989
<div class="modal-container" id="modalContainer">
3090
<div class="container">
31-
<form onsubmit="return checkBannedWordsBeforeSubmit()">
91+
92+
<!-- <h2 id="draftSnippetText">Draft a Snippet</h2> -->
93+
94+
<form onsubmit="checkBannedWordsBeforeSubmit()">
3295

3396
<textarea id="post-title" name="post-title" placeholder="Write about something..." minlength="10" maxlength="520" required></textarea>
3497
<br>
3598
<!-- Use onkeyup attribute here for the post-body textarea -->
3699
<textarea onkeyup="checkBanWords()" id="post-body" name="post-body" placeholder="Write about something..." rows="4" minlength="10" maxlength="74"></textarea>
37100
<br>
38101
<div class="add-tags" style="display: none;">
39-
<!-- Rest of your form content... -->
40102
</div>
103+
<div class="quick-options">
104+
<img src="/assets/svg/image.svg" onclick="redirectToSettings()" width="35px" height="35px" alt="profile settings">
105+
<img src="/assets/svg/tag.svg" onclick="logout()" width="35px" height="35px">
106+
<img src="/assets/svg/link.svg" onclick="createLink()" width="35px" height="35px">
107+
</div>
41108

42109
<input type="image" src="/assets/svg/sendPostArrow.svg" alt="Image Description">
43110
</form>
@@ -195,8 +262,19 @@ <h4>Programmer Netlink | Navigation Menu</h4>
195262
<li><a class="active" href="http://127.0.0.1:5500/productivity/app/app-selector/selector.html">Productivity Suite</a></li>
196263

197264
<div class="quick-options">
198-
<img src="/assets/svg/gear.svg" onclick="redirectToSettings()" width="35px" height="35px" alt="profile settings">
199-
<img src="/assets/svg/logout.svg" onclick="logout()" width="35px" height="35px">
265+
<img src="/assets/svg/gear.svg" onclick="redirectToSettings()" width="35px" height="35px" alt="profile settings"> <img src="/assets/svg/logout.svg" onclick="logout()" width="35px" height="35px">
266+
267+
<style>
268+
.quick-options {
269+
display: flex; /* Use flexbox to place the images in a row */
270+
align-items: center; /* Center the images vertically */
271+
}
272+
273+
.quick-options img {
274+
margin-right: 10px; /* Add some spacing between the images */
275+
}
276+
277+
</style>
200278
</div>
201279

202280
</ul>
@@ -255,7 +333,6 @@ <h4>Programmer Netlink | Navigation Menu</h4>
255333
<div class="post-list">
256334

257335
<div id="posts">
258-
259336
</div>
260337

261338
</div>
@@ -323,9 +400,59 @@ <h4>Programmer Netlink | Navigation Menu</h4>
323400
}
324401
</script>
325402

403+
<script>
404+
// Function to show the modal
405+
function showModal() {
406+
var modal = document.getElementById("modalContainer");
407+
modal.style.display = "flex";
408+
}
409+
410+
// Function to hide the modal
411+
function hideModal() {
412+
var modal = document.getElementById("modalContainer");
413+
modal.style.display = "none";
414+
}
415+
416+
// Function to convert dataURI to blob
417+
function dataURItoBlob(dataURI) {
418+
// ... Your dataURItoBlob function ...
419+
}
420+
421+
// Function to upload image and display it
422+
function uploadImage() {
423+
// ... Your previous uploadImage function ...
424+
425+
// Display the image below the textarea
426+
const imageElement = document.createElement('img');
427+
imageElement.src = blobURL;
428+
imageElement.style.maxWidth = '100%';
429+
imageElement.style.maxHeight = '300px';
430+
431+
const imageContainer = document.getElementById('imageContainer');
432+
imageContainer.innerHTML = ''; // Clear previous image (if any)
433+
imageContainer.appendChild(imageElement);
434+
}
435+
436+
// Event listener for file input change
437+
document.addEventListener('DOMContentLoaded', () => {
438+
const savedBlobURL = localStorage.getItem('imageBlobURL');
439+
if (savedBlobURL) {
440+
const imageElement = document.createElement('img');
441+
imageElement.src = savedBlobURL;
442+
imageElement.style.maxWidth = '100%';
443+
imageElement.style.maxHeight = '300px';
444+
445+
const imageContainer = document.getElementById('imageContainer');
446+
imageContainer.innerHTML = '';
447+
imageContainer.appendChild(imageElement);
448+
}
449+
});
450+
</script>
451+
326452

327453

328454
</body>
329455
<script src="script.js"></script>
330456
<script src="addTagAdder.js"></script>
457+
<script src="loadBlobImages.js"></script>
331458
</html>

0 commit comments

Comments
 (0)