Startsida Utforska Hjälp
Registrera dig Logga in
im-changing.ru
/
converse.js
spegling av https://github.com/conversejs/converse.js.git
2
0
Fork 0
Filer Ärenden 0 Wiki
Bläddra i källkod

Use lit-html to render URLs

JC Brand 5 år sedan
förälder
366dee0aa5
incheckning
c9f29f76e5
12 ändrade filer med 37 tillägg och 37 borttagningar
Unifierad Vy Visa Diff Statistik
  1. 5 8
      spec/http-file-upload.js
  2. 11 17
      spec/messages.js
  3. 1 3
      src/converse-message-view.js
  4. 0 2
      src/templates/audio.html
  5. 7 0
      src/templates/audio.js
  6. 0 1
      src/templates/file.html
  7. 3 0
      src/templates/file.js
  8. 0 1
      src/templates/image.html
  9. 3 0
      src/templates/image.js
  10. 0 1
      src/templates/video.html
  11. 3 0
      src/templates/video.js
  12. 4 4
      src/utils/html.js

+ 5 - 8
spec/http-file-upload.js
Visa fil 

@@ -324,10 +324,8 @@
 
                         await u.waitUntil(() => view.el.querySelector('.chat-image'), 1000);
 
                         await u.waitUntil(() => view.el.querySelector('.chat-image'), 1000);
 
                         // Check that the image renders
 
                         // Check that the image renders
 
                         expect(view.el.querySelector('.chat-msg .chat-msg__media').innerHTML.trim()).toEqual(
 
                         expect(view.el.querySelector('.chat-msg .chat-msg__media').innerHTML.trim()).toEqual(
 
-                            `<!-- src/templates/image.html -->\n`+
 
-                            `<a href="${base_url}/logo/conversejs-filled.svg" target="_blank" rel="noopener">`+
 
-                                `<img class="chat-image img-thumbnail" src="${base_url}/logo/conversejs-filled.svg">`+
 
-                            `</a>`);
 
+                            `<!----><a target="_blank" rel="noopener" href="${base_url}/logo/conversejs-filled.svg">`+
 
+                            `<img class="chat-image img-thumbnail" src="${base_url}/logo/conversejs-filled.svg"></a><!---->`);
 
                         XMLHttpRequest.prototype.send = send_backup;
 
                         XMLHttpRequest.prototype.send = send_backup;
 
                         done();
 
                         done();
 
                     }));
 
                     }));
 
@@ -430,10 +428,9 @@
 
                         await u.waitUntil(() => view.el.querySelector('.chat-image'), 1000);
 
                         await u.waitUntil(() => view.el.querySelector('.chat-image'), 1000);
 
                         // Check that the image renders
 
                         // Check that the image renders
 
                         expect(view.el.querySelector('.chat-msg .chat-msg__media').innerHTML.trim()).toEqual(
 
                         expect(view.el.querySelector('.chat-msg .chat-msg__media').innerHTML.trim()).toEqual(
 
-                            `<!-- src/templates/image.html -->\n`+
 
-                            `<a href="${base_url}/logo/conversejs-filled.svg" target="_blank" rel="noopener">`+
 
-                                `<img class="chat-image img-thumbnail" src="${base_url}/logo/conversejs-filled.svg">`+
 
-                            `</a>`);
 
+                            `<!----><a target="_blank" rel="noopener" href="${base_url}/logo/conversejs-filled.svg">`+
 
+                            `<img class="chat-image img-thumbnail" src="${base_url}/logo/conversejs-filled.svg"></a><!---->`);
 
+
 
                         XMLHttpRequest.prototype.send = send_backup;
 
                         XMLHttpRequest.prototype.send = send_backup;
 
                         done();
 
                         done();
 
                     }));
 
                     }));

+ 11 - 17
spec/messages.js
Visa fil 

@@ -1920,9 +1920,8 @@
 
                 expect(msg.textContent).toEqual('Have you heard this funny audio?');
 
                 expect(msg.textContent).toEqual('Have you heard this funny audio?');
 
                 let media = view.el.querySelector('.chat-msg .chat-msg__media');
 
                 let media = view.el.querySelector('.chat-msg .chat-msg__media');
 
                 expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
 
                 expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
 
-                    '<!-- src/templates/audio.html -->'+
 
-                    '<audio controls="" src="https://montague.lit/audio.mp3"></audio>'+
 
-                    '<a target="_blank" rel="noopener" href="https://montague.lit/audio.mp3">Download audio file "audio.mp3"</a>');
 
+                    `<!---->    <audio controls="" src="https://montague.lit/audio.mp3"></audio>    `+
 
+                    `<a target="_blank" rel="noopener" href="https://montague.lit/audio.mp3"><!---->Download audio file "audio.mp3"<!----></a><!---->`);
 
 
 
                 // If the <url> and <body> contents is the same, don't duplicate.
 
                 // If the <url> and <body> contents is the same, don't duplicate.
 
                 stanza = u.toStanza(`
 
                 stanza = u.toStanza(`
 
@@ -1938,10 +1937,9 @@
 
                 expect(msg.innerHTML).toEqual('<!-- message gets added here via renderMessage -->'); // Emtpy
 
                 expect(msg.innerHTML).toEqual('<!-- message gets added here via renderMessage -->'); // Emtpy
 
                 media = view.el.querySelector('.chat-msg:last-child .chat-msg__media');
 
                 media = view.el.querySelector('.chat-msg:last-child .chat-msg__media');
 
                 expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
 
                 expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
 
-                    '<!-- src/templates/audio.html -->'+
 
-                    '<audio controls="" src="https://montague.lit/audio.mp3"></audio>'+
 
-                    '<a target="_blank" rel="noopener" href="https://montague.lit/audio.mp3">Download audio file "audio.mp3"</a>'
 
-                );
 
+                    `<!---->    <audio controls="" src="https://montague.lit/audio.mp3"></audio>    `+
 
+                    `<a target="_blank" rel="noopener" href="https://montague.lit/audio.mp3">`+
 
+                    `<!---->Download audio file "audio.mp3"<!----></a><!---->`);
 
                 done();
 
                 done();
 
             }));
 
             }));
 
 
 
@@ -1970,8 +1968,8 @@
 
                 expect(msg.textContent).toEqual('Have you seen this funny video?');
 
                 expect(msg.textContent).toEqual('Have you seen this funny video?');
 
                 let media = view.el.querySelector('.chat-msg .chat-msg__media');
 
                 let media = view.el.querySelector('.chat-msg .chat-msg__media');
 
                 expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
 
                 expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
 
-                    '<!-- src/templates/video.html -->'+
 
-                    '<video controls="" preload="metadata" src="https://montague.lit/video.mp4" style="max-height: 50vh"></video>');
 
+                    `<!----><video controls="" preload="metadata" style="max-height: 50vh" src="https://montague.lit/video.mp4"></video><!---->`);
 
+
 
 
 
                 // If the <url> and <body> contents is the same, don't duplicate.
 
                 // If the <url> and <body> contents is the same, don't duplicate.
 
                 stanza = u.toStanza(`
 
                 stanza = u.toStanza(`
 
@@ -1987,8 +1985,7 @@
 
                 expect(msg.innerHTML).toEqual('<!-- message gets added here via renderMessage -->'); // Emtpy
 
                 expect(msg.innerHTML).toEqual('<!-- message gets added here via renderMessage -->'); // Emtpy
 
                 media = view.el.querySelector('.chat-msg:last-child .chat-msg__media');
 
                 media = view.el.querySelector('.chat-msg:last-child .chat-msg__media');
 
                 expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
 
                 expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
 
-                    '<!-- src/templates/video.html -->'+
 
-                    '<video controls="" preload="metadata" src="https://montague.lit/video.mp4" style="max-height: 50vh"></video>');
 
+                    `<!----><video controls="" preload="metadata" style="max-height: 50vh" src="https://montague.lit/video.mp4"></video><!---->`);
 
                 done();
 
                 done();
 
             }));
 
             }));
 
 
 
@@ -2017,8 +2014,7 @@
 
                 expect(msg.textContent).toEqual('Have you downloaded this funny file?');
 
                 expect(msg.textContent).toEqual('Have you downloaded this funny file?');
 
                 const media = view.el.querySelector('.chat-msg .chat-msg__media');
 
                 const media = view.el.querySelector('.chat-msg .chat-msg__media');
 
                 expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
 
                 expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
 
-                    '<!-- src/templates/file.html -->'+
 
-                    '<a target="_blank" rel="noopener" href="https://montague.lit/funny.pdf">Download file "funny.pdf"</a>');
 
+                    `<!----><a target="_blank" rel="noopener" href="https://montague.lit/funny.pdf"><!---->Download file "funny.pdf"<!----></a><!---->`);
 
                 done();
 
                 done();
 
             }));
 
             }));
 
 
 
@@ -2050,10 +2046,8 @@
 
                 expect(msg.textContent).toEqual('Have you seen this funny image?');
 
                 expect(msg.textContent).toEqual('Have you seen this funny image?');
 
                 const media = view.el.querySelector('.chat-msg .chat-msg__media');
 
                 const media = view.el.querySelector('.chat-msg .chat-msg__media');
 
                 expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
 
                 expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
 
-                    `<!-- src/templates/image.html -->`+
 
-                    `<a href="${base_url}/logo/conversejs-filled.svg" target="_blank" rel="noopener">`+
 
-                        `<img class="chat-image img-thumbnail" src="${base_url}/logo/conversejs-filled.svg">`+
 
-                    `</a>`);
 
+                    `<!----><a target="_blank" rel="noopener" href="${base_url}/logo/conversejs-filled.svg">`+
 
+                    `<img class="chat-image img-thumbnail" src="${base_url}/logo/conversejs-filled.svg"></a><!---->`);
 
                 done();
 
                 done();
 
             }));
 
             }));
 
         });
 
         });

+ 1 - 3
src/converse-message-view.js
Visa fil 

@@ -262,9 +262,7 @@ converse.plugins.add('converse-message-view', {
 
                 ));
 
                 ));
 
 
 
                 const url = this.model.get('oob_url');
 
                 const url = this.model.get('oob_url');
 
-                if (url) {
 
-                    msg.querySelector('.chat-msg__media').innerHTML = this.transformOOBURL(url);
 
-                }
 
+                url && render(this.transformOOBURL(url), msg.querySelector('.chat-msg__media'));
 
 
 
                 if (!is_retracted) {
 
                 if (!is_retracted) {
 
                     const text = this.model.getMessageText();
 
                     const text = this.model.getMessageText();

+ 0 - 2
src/templates/audio.html
Visa fil 

@@ -1,2 +0,0 @@
 
-<audio controls src="{{{o.url}}}"></audio>
 
-<a target="_blank" rel="noopener" href="{{{o.url}}}">{{{o.label_download}}}</a>

+ 7 - 0
src/templates/audio.js
Visa fil 

@@ -0,0 +1,7 @@
 
+import { html } from "lit-html";
 
+
 
+
 
+export default (o) => html`
 
+    <audio controls src="${o.url}"></audio>
 
+    <a target="_blank" rel="noopener" href="${o.url}">${o.label_download}</a>
 
+`;

+ 0 - 1
src/templates/file.html
Visa fil 

@@ -1 +0,0 @@
 
-<a target="_blank" rel="noopener" href="{{{o.url}}}">{{{o.label_download}}}</a>

+ 3 - 0
src/templates/file.js
Visa fil 

@@ -0,0 +1,3 @@
 
+import { html } from "lit-html";
 
+
 
+export default (o) => html`<a target="_blank" rel="noopener" href="${o.url}">${o.label_download}</a>`;

+ 0 - 1
src/templates/image.html
Visa fil 

@@ -1 +0,0 @@
 
-<a href="{{{o.url}}}" target="_blank" rel="noopener"><img class="chat-image img-thumbnail" src="{{{o.url}}}"/></a>

+ 3 - 0
src/templates/image.js
Visa fil 

@@ -0,0 +1,3 @@
 
+import { html } from "lit-html";
 
+
 
+export default (o) => html`<a href="${o.url}" target="_blank" rel="noopener"><img class="chat-image img-thumbnail" src="${o.url}"/></a>`;

+ 0 - 1
src/templates/video.html
Visa fil 

@@ -1 +0,0 @@
 
-<video controls preload="metadata" src="{{{o.url}}}" style="max-height: 50vh"></video>

+ 3 - 0
src/templates/video.js
Visa fil 

@@ -0,0 +1,3 @@
 
+import { html } from "lit-html";
 
+
 
+export default (o) => html`<video controls preload="metadata" src="${o.url}" style="max-height: 50vh"></video>`;

+ 4 - 4
src/utils/html.js
Visa fil 

@@ -7,8 +7,8 @@ import URI from "urijs";
 
 import _ from "../headless/lodash.noconflict";
 
 import _ from "../headless/lodash.noconflict";
 
 import log from '@converse/headless/log';
 
 import log from '@converse/headless/log';
 
 import sizzle from "sizzle";
 
 import sizzle from "sizzle";
 
-import tpl_audio from  "../templates/audio.html";
 
-import tpl_file from "../templates/file.html";
 
+import tpl_audio from  "../templates/audio.js";
 
+import tpl_file from "../templates/file.js";
 
 import tpl_form_captcha from "../templates/form_captcha.html";
 
 import tpl_form_captcha from "../templates/form_captcha.html";
 
 import tpl_form_checkbox from "../templates/form_checkbox.html";
 
 import tpl_form_checkbox from "../templates/form_checkbox.html";
 
 import tpl_form_input from "../templates/form_input.html";
 
 import tpl_form_input from "../templates/form_input.html";
 
@@ -16,9 +16,9 @@ import tpl_form_select from "../templates/form_select.html";
 
 import tpl_form_textarea from "../templates/form_textarea.html";
 
 import tpl_form_textarea from "../templates/form_textarea.html";
 
 import tpl_form_url from "../templates/form_url.html";
 
 import tpl_form_url from "../templates/form_url.html";
 
 import tpl_form_username from "../templates/form_username.html";
 
 import tpl_form_username from "../templates/form_username.html";
 
-import tpl_image from "../templates/image.html";
 
+import tpl_image from "../templates/image.js";
 
 import tpl_select_option from "../templates/select_option.html";
 
 import tpl_select_option from "../templates/select_option.html";
 
-import tpl_video from "../templates/video.html";
 
+import tpl_video from "../templates/video.js";
 
 import u from "../headless/utils/core";
 
 import u from "../headless/utils/core";
 
 
 
 const URL_REGEX = /\b(https?\:\/\/|www\.|https?:\/\/www\.)[^\s<>]{2,200}\b\/?/g;
 
 const URL_REGEX = /\b(https?\:\/\/|www\.|https?:\/\/www\.)[^\s<>]{2,200}\b\/?/g;