Fossil SCM
When toggling pikchr SVG/src view, unset parent element's max-width for src view and re-install it for SVG view. This allows small images to have a sanely-sized source view.
Commit
212d01c1aed8bfa2e6109779eea8613fcc43f25b2a70d54e01b7880744941153
Parent
4e6aeb5fb3c79ec…
1 file changed
+9
-1
+9
-1
| --- src/fossil.pikchr.js | ||
| +++ src/fossil.pikchr.js | ||
| @@ -133,18 +133,26 @@ | ||
| 133 | 133 | : srcView.value); |
| 134 | 134 | } |
| 135 | 135 | } |
| 136 | 136 | ); |
| 137 | 137 | D.append(parent, D.addClass(srcView, 'hidden'), btnFlip, btnCopy); |
| 138 | - btnFlip.addEventListener('click', function(){ | |
| 138 | + btnFlip.addEventListener('click', function f(){ | |
| 139 | + if(!f.hasOwnProperty('parentMaxWidth')){ | |
| 140 | + f.parentMaxWidth = parent.style.maxWidth; | |
| 141 | + } | |
| 139 | 142 | const svgStyle = window.getComputedStyle(svg); |
| 140 | 143 | srcView.style.minWidth = svgStyle.width; |
| 141 | 144 | srcView.style.minHeight = svgStyle.height; |
| 142 | 145 | /* ^^^ The SVG wrapper/parent element has a max-width, so the |
| 143 | 146 | textarea will be too small on tiny images and won't be |
| 144 | 147 | enlargable. */ |
| 145 | 148 | btnFlip.classList.toggle('src-active'); |
| 146 | 149 | D.toggleClass([svg, srcView], 'hidden'); |
| 150 | + if(svg.classList.contains('hidden')){ | |
| 151 | + parent.style.maxWidth = 'unset'; | |
| 152 | + }else{ | |
| 153 | + parent.style.maxWidth = f.parentMaxWidth; | |
| 154 | + } | |
| 147 | 155 | }, false); |
| 148 | 156 | }; |
| 149 | 157 | |
| 150 | 158 | })(window.fossil); |
| 151 | 159 |
| --- src/fossil.pikchr.js | |
| +++ src/fossil.pikchr.js | |
| @@ -133,18 +133,26 @@ | |
| 133 | : srcView.value); |
| 134 | } |
| 135 | } |
| 136 | ); |
| 137 | D.append(parent, D.addClass(srcView, 'hidden'), btnFlip, btnCopy); |
| 138 | btnFlip.addEventListener('click', function(){ |
| 139 | const svgStyle = window.getComputedStyle(svg); |
| 140 | srcView.style.minWidth = svgStyle.width; |
| 141 | srcView.style.minHeight = svgStyle.height; |
| 142 | /* ^^^ The SVG wrapper/parent element has a max-width, so the |
| 143 | textarea will be too small on tiny images and won't be |
| 144 | enlargable. */ |
| 145 | btnFlip.classList.toggle('src-active'); |
| 146 | D.toggleClass([svg, srcView], 'hidden'); |
| 147 | }, false); |
| 148 | }; |
| 149 | |
| 150 | })(window.fossil); |
| 151 |
| --- src/fossil.pikchr.js | |
| +++ src/fossil.pikchr.js | |
| @@ -133,18 +133,26 @@ | |
| 133 | : srcView.value); |
| 134 | } |
| 135 | } |
| 136 | ); |
| 137 | D.append(parent, D.addClass(srcView, 'hidden'), btnFlip, btnCopy); |
| 138 | btnFlip.addEventListener('click', function f(){ |
| 139 | if(!f.hasOwnProperty('parentMaxWidth')){ |
| 140 | f.parentMaxWidth = parent.style.maxWidth; |
| 141 | } |
| 142 | const svgStyle = window.getComputedStyle(svg); |
| 143 | srcView.style.minWidth = svgStyle.width; |
| 144 | srcView.style.minHeight = svgStyle.height; |
| 145 | /* ^^^ The SVG wrapper/parent element has a max-width, so the |
| 146 | textarea will be too small on tiny images and won't be |
| 147 | enlargable. */ |
| 148 | btnFlip.classList.toggle('src-active'); |
| 149 | D.toggleClass([svg, srcView], 'hidden'); |
| 150 | if(svg.classList.contains('hidden')){ |
| 151 | parent.style.maxWidth = 'unset'; |
| 152 | }else{ |
| 153 | parent.style.maxWidth = f.parentMaxWidth; |
| 154 | } |
| 155 | }, false); |
| 156 | }; |
| 157 | |
| 158 | })(window.fossil); |
| 159 |