Fossil SCM
/chat: if an iframe's body has no fontSize set, try to force it to match the message wrapper's font size. Whether this works might be environment-dependent. Add support for embedding images in iframes if the when the 'inline images' option is off.
Commit
d4b167bd9756de9207b437b150551fa4a8837114e175246a15c0288217dae4b5
Parent
490c7b435f8b291…
2 files changed
+16
-3
+3
+16
-3
| --- src/fossil.page.chat.js | ||
| +++ src/fossil.page.chat.js | ||
| @@ -891,15 +891,19 @@ | ||
| 891 | 891 | (d.getMinutes()+100).toString().slice(1,3), |
| 892 | 892 | ' ', dowMap[d.getDay()] |
| 893 | 893 | ].join(''); |
| 894 | 894 | }; |
| 895 | 895 | |
| 896 | - const canEmbedFile = function f(filename){ | |
| 896 | + const canEmbedFile = function f(msg){ | |
| 897 | 897 | if(!f.$rx){ |
| 898 | 898 | f.$rx = /\.((html?)|(txt))$/i; |
| 899 | 899 | } |
| 900 | - return f.$rx.test(filename); | |
| 900 | + return msg.fname && ( | |
| 901 | + f.$rx.test(msg.fname) | |
| 902 | + || (msg.fmime | |
| 903 | + && msg.fmime.startsWith("image/")) | |
| 904 | + ); | |
| 901 | 905 | }; |
| 902 | 906 | |
| 903 | 907 | cf.prototype = { |
| 904 | 908 | scrollIntoView: function(){ |
| 905 | 909 | this.e.content.scrollIntoView(); |
| @@ -953,11 +957,11 @@ | ||
| 953 | 957 | // ^^^ add m.fname to URL to cause downloaded file to have that name. |
| 954 | 958 | "(" + m.fname + " " + m.fsize + " bytes)" |
| 955 | 959 | ) |
| 956 | 960 | D.attr(a,'target','_blank'); |
| 957 | 961 | D.append(w, a); |
| 958 | - if(canEmbedFile(m.fname)){ | |
| 962 | + if(canEmbedFile(m)){ | |
| 959 | 963 | /* Add an option to embed HTML attachments in an iframe. The primary |
| 960 | 964 | use case is attached diffs. */ |
| 961 | 965 | D.addClass(contentTarget, 'wide'); |
| 962 | 966 | const embedTarget = this.e.content; |
| 963 | 967 | const self = this; |
| @@ -973,10 +977,19 @@ | ||
| 973 | 977 | D.disable(btnEmbed); |
| 974 | 978 | const iframe = self.e.iframe = document.createElement('iframe'); |
| 975 | 979 | D.append(embedTarget, iframe); |
| 976 | 980 | iframe.addEventListener('load', function(){ |
| 977 | 981 | D.enable(btnEmbed); |
| 982 | + const body = iframe.contentWindow.document.querySelector('body'); | |
| 983 | + if(body && !body.style.fontSize){ | |
| 984 | + /** _Attempt_ to force the iframe to inherit the message's text size | |
| 985 | + if the body has no explicit size set. On desktop systems | |
| 986 | + the size is apparently being inherited in that case, but on mobile | |
| 987 | + not. */ | |
| 988 | + const cs = window.getComputedStyle(self.e.content); | |
| 989 | + body.style.fontSize = cs.fontSize; | |
| 990 | + } | |
| 978 | 991 | iframe.style.maxHeight = iframe.style.height |
| 979 | 992 | = iframe.contentWindow.document.documentElement.scrollHeight + 'px'; |
| 980 | 993 | }); |
| 981 | 994 | iframe.setAttribute('src', downloadUri); |
| 982 | 995 | }); |
| 983 | 996 |
| --- src/fossil.page.chat.js | |
| +++ src/fossil.page.chat.js | |
| @@ -891,15 +891,19 @@ | |
| 891 | (d.getMinutes()+100).toString().slice(1,3), |
| 892 | ' ', dowMap[d.getDay()] |
| 893 | ].join(''); |
| 894 | }; |
| 895 | |
| 896 | const canEmbedFile = function f(filename){ |
| 897 | if(!f.$rx){ |
| 898 | f.$rx = /\.((html?)|(txt))$/i; |
| 899 | } |
| 900 | return f.$rx.test(filename); |
| 901 | }; |
| 902 | |
| 903 | cf.prototype = { |
| 904 | scrollIntoView: function(){ |
| 905 | this.e.content.scrollIntoView(); |
| @@ -953,11 +957,11 @@ | |
| 953 | // ^^^ add m.fname to URL to cause downloaded file to have that name. |
| 954 | "(" + m.fname + " " + m.fsize + " bytes)" |
| 955 | ) |
| 956 | D.attr(a,'target','_blank'); |
| 957 | D.append(w, a); |
| 958 | if(canEmbedFile(m.fname)){ |
| 959 | /* Add an option to embed HTML attachments in an iframe. The primary |
| 960 | use case is attached diffs. */ |
| 961 | D.addClass(contentTarget, 'wide'); |
| 962 | const embedTarget = this.e.content; |
| 963 | const self = this; |
| @@ -973,10 +977,19 @@ | |
| 973 | D.disable(btnEmbed); |
| 974 | const iframe = self.e.iframe = document.createElement('iframe'); |
| 975 | D.append(embedTarget, iframe); |
| 976 | iframe.addEventListener('load', function(){ |
| 977 | D.enable(btnEmbed); |
| 978 | iframe.style.maxHeight = iframe.style.height |
| 979 | = iframe.contentWindow.document.documentElement.scrollHeight + 'px'; |
| 980 | }); |
| 981 | iframe.setAttribute('src', downloadUri); |
| 982 | }); |
| 983 |
| --- src/fossil.page.chat.js | |
| +++ src/fossil.page.chat.js | |
| @@ -891,15 +891,19 @@ | |
| 891 | (d.getMinutes()+100).toString().slice(1,3), |
| 892 | ' ', dowMap[d.getDay()] |
| 893 | ].join(''); |
| 894 | }; |
| 895 | |
| 896 | const canEmbedFile = function f(msg){ |
| 897 | if(!f.$rx){ |
| 898 | f.$rx = /\.((html?)|(txt))$/i; |
| 899 | } |
| 900 | return msg.fname && ( |
| 901 | f.$rx.test(msg.fname) |
| 902 | || (msg.fmime |
| 903 | && msg.fmime.startsWith("image/")) |
| 904 | ); |
| 905 | }; |
| 906 | |
| 907 | cf.prototype = { |
| 908 | scrollIntoView: function(){ |
| 909 | this.e.content.scrollIntoView(); |
| @@ -953,11 +957,11 @@ | |
| 957 | // ^^^ add m.fname to URL to cause downloaded file to have that name. |
| 958 | "(" + m.fname + " " + m.fsize + " bytes)" |
| 959 | ) |
| 960 | D.attr(a,'target','_blank'); |
| 961 | D.append(w, a); |
| 962 | if(canEmbedFile(m)){ |
| 963 | /* Add an option to embed HTML attachments in an iframe. The primary |
| 964 | use case is attached diffs. */ |
| 965 | D.addClass(contentTarget, 'wide'); |
| 966 | const embedTarget = this.e.content; |
| 967 | const self = this; |
| @@ -973,10 +977,19 @@ | |
| 977 | D.disable(btnEmbed); |
| 978 | const iframe = self.e.iframe = document.createElement('iframe'); |
| 979 | D.append(embedTarget, iframe); |
| 980 | iframe.addEventListener('load', function(){ |
| 981 | D.enable(btnEmbed); |
| 982 | const body = iframe.contentWindow.document.querySelector('body'); |
| 983 | if(body && !body.style.fontSize){ |
| 984 | /** _Attempt_ to force the iframe to inherit the message's text size |
| 985 | if the body has no explicit size set. On desktop systems |
| 986 | the size is apparently being inherited in that case, but on mobile |
| 987 | not. */ |
| 988 | const cs = window.getComputedStyle(self.e.content); |
| 989 | body.style.fontSize = cs.fontSize; |
| 990 | } |
| 991 | iframe.style.maxHeight = iframe.style.height |
| 992 | = iframe.contentWindow.document.documentElement.scrollHeight + 'px'; |
| 993 | }); |
| 994 | iframe.setAttribute('src', downloadUri); |
| 995 | }); |
| 996 |
+3
| --- src/style.chat.css | ||
| +++ src/style.chat.css | ||
| @@ -42,10 +42,13 @@ | ||
| 42 | 42 | } |
| 43 | 43 | body.chat .message-widget-content.wide { |
| 44 | 44 | /* Special case for when embedding content which we really want to |
| 45 | 45 | expand, namely iframes. */ |
| 46 | 46 | width: 98%; |
| 47 | +} | |
| 48 | +body.chat .message-widget-content label[for] { | |
| 49 | + cursor: pointer; | |
| 47 | 50 | } |
| 48 | 51 | body.chat .message-widget-content > .attachment-link { |
| 49 | 52 | display: flex; |
| 50 | 53 | flex-direction: row; |
| 51 | 54 | } |
| 52 | 55 |
| --- src/style.chat.css | |
| +++ src/style.chat.css | |
| @@ -42,10 +42,13 @@ | |
| 42 | } |
| 43 | body.chat .message-widget-content.wide { |
| 44 | /* Special case for when embedding content which we really want to |
| 45 | expand, namely iframes. */ |
| 46 | width: 98%; |
| 47 | } |
| 48 | body.chat .message-widget-content > .attachment-link { |
| 49 | display: flex; |
| 50 | flex-direction: row; |
| 51 | } |
| 52 |
| --- src/style.chat.css | |
| +++ src/style.chat.css | |
| @@ -42,10 +42,13 @@ | |
| 42 | } |
| 43 | body.chat .message-widget-content.wide { |
| 44 | /* Special case for when embedding content which we really want to |
| 45 | expand, namely iframes. */ |
| 46 | width: 98%; |
| 47 | } |
| 48 | body.chat .message-widget-content label[for] { |
| 49 | cursor: pointer; |
| 50 | } |
| 51 | body.chat .message-widget-content > .attachment-link { |
| 52 | display: flex; |
| 53 | flex-direction: row; |
| 54 | } |
| 55 |