Hugging Face's logo

Spaces:
JakeFake222
/
ImageToPDFTouchControl
Running

App Files Community
JakeFake222 commited on
Commit
1a26ae1
·
verified ·
1 Parent(s): f1312dc

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +54 -4
index.html CHANGED
@@ -21,6 +21,8 @@
21
  }
22
  .imageWrapper {
23
  max-width: 200px;
 
 
24
  }
25
  .imageWrapper img {
26
  max-width: 100%;
@@ -28,6 +30,9 @@
28
  border: 1px solid #ddd;
29
  border-radius: 5px;
30
  }
 
 
 
31
  button {
32
  padding: 10px 20px;
33
  font-size: 16px;
@@ -45,6 +50,7 @@
45
  <body>
46
  <h1>Images to PDF Converter</h1>
47
  <input type="file" id="imageInput" accept="image/*" multiple>
 
48
  <div id="imageContainer"></div>
49
  <button onclick="generatePDF()">Download as PDF</button>
50
 
@@ -68,16 +74,60 @@
68
  img.src = e.target.result;
69
  img.onload = () => {
70
  images.push({ src: e.target.result, width: img.width, height: img.height });
71
- const wrapper = document.createElement('div');
72
- wrapper.className = 'imageWrapper';
73
- wrapper.appendChild(img);
74
- imageContainer.appendChild(wrapper);
75
  };
76
  };
77
  reader.readAsDataURL(file);
78
  });
79
  });
80
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
81
  // Generate PDF from images
82
  function generatePDF() {
83
  if (images.length === 0) {
 
21
  }
22
  .imageWrapper {
23
  max-width: 200px;
24
+ cursor: move; /* Indicates draggable */
25
+ position: relative;
26
  }
27
  .imageWrapper img {
28
  max-width: 100%;
 
30
  border: 1px solid #ddd;
31
  border-radius: 5px;
32
  }
33
+ .imageWrapper.dragging {
34
+ opacity: 0.5; /* Visual feedback during drag */
35
+ }
36
  button {
37
  padding: 10px 20px;
38
  font-size: 16px;
 
50
  <body>
51
  <h1>Images to PDF Converter</h1>
52
  <input type="file" id="imageInput" accept="image/*" multiple>
53
+ <p>Drag and drop images to reorder them for the PDF.</p>
54
  <div id="imageContainer"></div>
55
  <button onclick="generatePDF()">Download as PDF</button>
56
 
 
74
  img.src = e.target.result;
75
  img.onload = () => {
76
  images.push({ src: e.target.result, width: img.width, height: img.height });
77
+ renderImages();
 
 
 
78
  };
79
  };
80
  reader.readAsDataURL(file);
81
  });
82
  });
83
 
84
+ // Render images with drag-and-drop functionality
85
+ function renderImages() {
86
+ imageContainer.innerHTML = '';
87
+ images.forEach((image, index) => {
88
+ const wrapper = document.createElement('div');
89
+ wrapper.className = 'imageWrapper';
90
+ wrapper.draggable = true;
91
+ wrapper.dataset.index = index;
92
+
93
+ const img = new Image();
94
+ img.src = image.src;
95
+ wrapper.appendChild(img);
96
+
97
+ // Drag start
98
+ wrapper.addEventListener('dragstart', (e) => {
99
+ wrapper.classList.add('dragging');
100
+ e.dataTransfer.setData('text/plain', index);
101
+ });
102
+
103
+ // Drag end
104
+ wrapper.addEventListener('dragend', () => {
105
+ wrapper.classList.remove('dragging');
106
+ });
107
+
108
+ // Drag over
109
+ wrapper.addEventListener('dragover', (e) => {
110
+ e.preventDefault();
111
+ });
112
+
113
+ // Drop
114
+ wrapper.addEventListener('drop', (e) => {
115
+ e.preventDefault();
116
+ const draggedIndex = parseInt(e.dataTransfer.getData('text/plain'));
117
+ const dropIndex = parseInt(wrapper.dataset.index);
118
+
119
+ // Reorder images array
120
+ const [draggedImage] = images.splice(draggedIndex, 1);
121
+ images.splice(dropIndex, 0, draggedImage);
122
+
123
+ // Re-render images
124
+ renderImages();
125
+ });
126
+
127
+ imageContainer.appendChild(wrapper);
128
+ });
129
+ }
130
+
131
  // Generate PDF from images
132
  function generatePDF() {
133
  if (images.length === 0) {