Fossil SCM
pikchr mode swap: tapping on an SVG switches modes and enables the mode-select button. Leaving source view mode requires activating that button (which works like before, but is only visible in source mode).
Commit
2a2be013199e051a1deb8668ee2aa68e25aacf9a639b69a7919ca6241993e8d1
Parent
4f697731832a44b…
1 file changed
+11
-1
+11
-1
| --- src/fossil.pikchr.js | ||
| +++ src/fossil.pikchr.js | ||
| @@ -163,10 +163,20 @@ | ||
| 163 | 163 | parent.addEventListener('click', function f(ev){ |
| 164 | 164 | ev.preventDefault(); |
| 165 | 165 | ev.stopPropagation(); |
| 166 | 166 | D.toggleClass(buttonBar, 'hidden'); |
| 167 | 167 | }, false); |
| 168 | + | |
| 169 | + /** Show the mode-switch buttons only in source view, and switch to | |
| 170 | + source view if the SVG is tapped. This allows easy switching to | |
| 171 | + source view while also keeping the buttons out of the way in | |
| 172 | + SVG mode and giving the user the option of select/copy in the | |
| 173 | + source mode via normal text-selection approaches. */ | |
| 174 | + svg.addEventListener('click', function(ev){ | |
| 175 | + D.removeClass(buttonBar, 'hidden'); | |
| 176 | + btnFlip.click(); | |
| 177 | + }, false); | |
| 168 | 178 | |
| 169 | 179 | /** Toggle the source/SVG view on click. */ |
| 170 | 180 | btnFlip.addEventListener('click', function f(ev){ |
| 171 | 181 | ev.preventDefault(); |
| 172 | 182 | ev.stopPropagation(); |
| @@ -216,10 +226,10 @@ | ||
| 216 | 226 | parent.style.maxWidth = f.origMaxWidth; |
| 217 | 227 | parent.style.width = 'unset'; |
| 218 | 228 | } |
| 219 | 229 | } |
| 220 | 230 | btnFlip.classList.toggle('src-active'); |
| 221 | - D.toggleClass([svg, srcView], 'hidden'); | |
| 231 | + D.toggleClass([svg, srcView, buttonBar], 'hidden'); | |
| 222 | 232 | }, false); |
| 223 | 233 | }; |
| 224 | 234 | |
| 225 | 235 | })(window.fossil); |
| 226 | 236 |
| --- src/fossil.pikchr.js | |
| +++ src/fossil.pikchr.js | |
| @@ -163,10 +163,20 @@ | |
| 163 | parent.addEventListener('click', function f(ev){ |
| 164 | ev.preventDefault(); |
| 165 | ev.stopPropagation(); |
| 166 | D.toggleClass(buttonBar, 'hidden'); |
| 167 | }, false); |
| 168 | |
| 169 | /** Toggle the source/SVG view on click. */ |
| 170 | btnFlip.addEventListener('click', function f(ev){ |
| 171 | ev.preventDefault(); |
| 172 | ev.stopPropagation(); |
| @@ -216,10 +226,10 @@ | |
| 216 | parent.style.maxWidth = f.origMaxWidth; |
| 217 | parent.style.width = 'unset'; |
| 218 | } |
| 219 | } |
| 220 | btnFlip.classList.toggle('src-active'); |
| 221 | D.toggleClass([svg, srcView], 'hidden'); |
| 222 | }, false); |
| 223 | }; |
| 224 | |
| 225 | })(window.fossil); |
| 226 |
| --- src/fossil.pikchr.js | |
| +++ src/fossil.pikchr.js | |
| @@ -163,10 +163,20 @@ | |
| 163 | parent.addEventListener('click', function f(ev){ |
| 164 | ev.preventDefault(); |
| 165 | ev.stopPropagation(); |
| 166 | D.toggleClass(buttonBar, 'hidden'); |
| 167 | }, false); |
| 168 | |
| 169 | /** Show the mode-switch buttons only in source view, and switch to |
| 170 | source view if the SVG is tapped. This allows easy switching to |
| 171 | source view while also keeping the buttons out of the way in |
| 172 | SVG mode and giving the user the option of select/copy in the |
| 173 | source mode via normal text-selection approaches. */ |
| 174 | svg.addEventListener('click', function(ev){ |
| 175 | D.removeClass(buttonBar, 'hidden'); |
| 176 | btnFlip.click(); |
| 177 | }, false); |
| 178 | |
| 179 | /** Toggle the source/SVG view on click. */ |
| 180 | btnFlip.addEventListener('click', function f(ev){ |
| 181 | ev.preventDefault(); |
| 182 | ev.stopPropagation(); |
| @@ -216,10 +226,10 @@ | |
| 226 | parent.style.maxWidth = f.origMaxWidth; |
| 227 | parent.style.width = 'unset'; |
| 228 | } |
| 229 | } |
| 230 | btnFlip.classList.toggle('src-active'); |
| 231 | D.toggleClass([svg, srcView, buttonBar], 'hidden'); |
| 232 | }, false); |
| 233 | }; |
| 234 | |
| 235 | })(window.fossil); |
| 236 |