Browse Source

Add support for other file types

master
Alfred 2 years ago
parent
commit
3828dec6f2
1 changed files with 29 additions and 6 deletions
  1. 29
    6
      views/index.html

+ 29
- 6
views/index.html View File

@@ -47,9 +47,9 @@
47 47
                     <article class="media container">
48 48
                         <figure class="media-left">
49 49
                             <p class="image is-64x64">
50
-                            <a href="javascript:openModal('<%= content[i].url %>', '');">
50
+                            <a href="javascript:openModal('<%- content[i].url %>', '<%= content[i].type %>');">
51 51
                             <% if (content[i].type === 'image') { %>                               
52
-                                <img src="<%= content[i].url %>">
52
+                                <img src="<%= content[i].url %>" style="max-width: 64px; max-height: 64px;";>
53 53
                             <% } else if (content[i].type === 'document') { %>
54 54
                                 <i class="far fa-file-pdf"></i>
55 55
                             <% } else if (content[i].type === 'video') { %>
@@ -67,9 +67,11 @@
67 67
                         <div class="media-content">
68 68
                             <div class="content">
69 69
                             <p>
70
-                                <strong><%= content[i].name %></></strong> <small>@johnsmith</small> <small>31m</small>
70
+                                <strong><%= content[i].name %></></strong> <small><a href="<%= content[i].url %>">Direct link</a></small>
71
+                                <!--
71 72
                                 <br>
72 73
                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
74
+                                -->
73 75
                             </p>
74 76
                             </div>
75 77
                         </div>
@@ -82,7 +84,7 @@
82 84
         </div>
83 85
 
84 86
         <div id="modal" class="modal">
85
-            <div class="modal-background"></div>
87
+            <div class="modal-background" id="modalBack"></div>
86 88
             <div class="modal-content">
87 89
                 <p id="modalContent"></p>
88 90
             </div>
@@ -91,13 +93,30 @@
91 93
 
92 94
         <script>
93 95
             function closeModal() {
96
+                document.getElementById("modalContent").innerHTML = "";
94 97
                 document.getElementById("modal").classList.remove("is-active");
95 98
             }
96 99
 
97 100
             function openModal(url, _type) {
98
-                document.getElementById("modal").classList.add("is-active");
99
-                _html = `<img style="-webkit-user-select: none;background-position: 0px 0px, 10px 10px;background-size: 20px 20px;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);" src="${url}">`;
101
+                let _html = "";
102
+                if (_type === 'image') {
103
+                    _html = `<img style="-webkit-user-select: none;background-position: 0px 0px, 10px 10px;background-size: 20px 20px;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);" src="${url}">`;
104
+                } else if (_type === 'document' || _type === 'text') {
105
+                    var win = window.open(url, '_blank');
106
+                    win.focus();
107
+                    return;
108
+                } else if (_type === 'video') {
109
+                    _html = `
110
+                    <video controls autoplay>
111
+                    <source src="${url}" type="video/mp4">
112
+                    Your browser does not support the video tag.
113
+                    </video>`;
114
+                } else if (_type === 'compressed') {
115
+                    document.location.replace(url);
116
+                    return;
117
+                }
100 118
                 document.getElementById("modalContent").innerHTML = _html;
119
+                document.getElementById("modal").classList.add("is-active");
101 120
             }
102 121
 
103 122
             document.onkeydown = function(evt) {
@@ -112,6 +131,10 @@
112 131
                     closeModal();
113 132
                 }
114 133
             };
134
+
135
+            document.getElementById("modalBack").onmousedown = function () {
136
+                closeModal();
137
+            };
115 138
         </script>
116 139
     </body>
117 140
 </html>

Loading…
Cancel
Save