back round 0 view raw

appview: Multiline selection in repo blobs and strings #573

merged

opened by

lesbian.skin 3 months ago targeting master from lesbian.skin/core: master

Currently doesn't support diff view

options

unified split

Changed files

+96 -7

appview

pages

templates

fragments

multiline-select.html

repo

blob.html

strings

string.html

input.css

+90

appview/pages/templates/fragments/multiline-select.html

···

       1
       1
       +
       {{ define "fragments/multiline-select" }}

     

       2
       2
       +
         <script>

     

       3
       3
       +
           function highlight(scroll = false) {

     

       4
       4
       +
             document.querySelectorAll(".hl").forEach(el => {

     

       5
       5
       +
               el.classList.remove("hl");

     

       6
       6
       +
             });

     

       7
       7
       +
       

     

       8
       8
       +
             const hash = window.location.hash;

     

       9
       9
       +
             if (!hash || !hash.startsWith("#L")) {

     

       10
       10
       +
               return;

     

       11
       11
       +
             }

     

       12
       12
       +
       

     

       13
       13
       +
             const rangeStr = hash.substring(2);

     

       14
       14
       +
             const parts = rangeStr.split("-");

     

       15
       15
       +
             let startLine, endLine;

     

       16
       16
       +
       

     

       17
       17
       +
             if (parts.length === 2) {

     

       18
       18
       +
               startLine = parseInt(parts[0], 10);

     

       19
       19
       +
               endLine = parseInt(parts[1], 10);

     

       20
       20
       +
             } else {

     

       21
       21
       +
               startLine = parseInt(parts[0], 10);

     

       22
       22
       +
               endLine = startLine;

     

       23
       23
       +
             }

     

       24
       24
       +
       

     

       25
       25
       +
             if (isNaN(startLine) || isNaN(endLine)) {

     

       26
       26
       +
               console.log("nan");

     

       27
       27
       +
               console.log(startLine);

     

       28
       28
       +
               console.log(endLine);

     

       29
       29
       +
               return;

     

       30
       30
       +
             }

     

       31
       31
       +
       

     

       32
       32
       +
             let target = null;

     

       33
       33
       +
       

     

       34
       34
       +
             for (let i = startLine; i<= endLine; i++) {

     

       35
       35
       +
               const idEl = document.getElementById(`L${i}`);

     

       36
       36
       +
               if (idEl) {

     

       37
       37
       +
                 const el = idEl.closest(".line");

     

       38
       38
       +
                 if (el) {

     

       39
       39
       +
                   el.classList.add("hl");

     

       40
       40
       +
                   target = el;

     

       41
       41
       +
                 }

     

       42
       42
       +
               }

     

       43
       43
       +
             }

     

       44
       44
       +
       

     

       45
       45
       +
             if (scroll && target) {

     

       46
       46
       +
               target.scrollIntoView({

     

       47
       47
       +
                 behavior: "smooth",

     

       48
       48
       +
                 block: "center",

     

       49
       49
       +
               });

     

       50
       50
       +
             }

     

       51
       51
       +
           }

     

       52
       52
       +
       

     

       53
       53
       +
           document.addEventListener("DOMContentLoaded", () => {

     

       54
       54
       +
             console.log("DOMContentLoaded");

     

       55
       55
       +
             highlight(true);

     

       56
       56
       +
           });

     

       57
       57
       +
           window.addEventListener("hashchange", () => {

     

       58
       58
       +
             console.log("hashchange");

     

       59
       59
       +
             highlight();

     

       60
       60
       +
           });

     

       61
       61
       +
           window.addEventListener("popstate", () => {

     

       62
       62
       +
             console.log("popstate");

     

       63
       63
       +
             highlight();

     

       64
       64
       +
           });

     

       65
       65
       +
       

     

       66
       66
       +
           const lineNumbers = document.querySelectorAll('a[href^="#L"');

     

       67
       67
       +
           let startLine = null;

     

       68
       68
       +
       

     

       69
       69
       +
           lineNumbers.forEach(el => {

     

       70
       70
       +
             el.addEventListener("click", (event) => {

     

       71
       71
       +
               event.preventDefault();

     

       72
       72
       +
               const currentLine = parseInt(el.href.split("#L")[1]);

     

       73
       73
       +
       

     

       74
       74
       +
               if (event.shiftKey && startLine !== null) {

     

       75
       75
       +
                 const endLine = currentLine;

     

       76
       76
       +
                 const min = Math.min(startLine, endLine);

     

       77
       77
       +
                 const max = Math.max(startLine, endLine);

     

       78
       78
       +
                 const newHash = `#L${min}-${max}`;

     

       79
       79
       +
                 history.pushState(null, '', newHash);

     

       80
       80
       +
               } else {

     

       81
       81
       +
                 const newHash = `#L${currentLine}`;

     

       82
       82
       +
                 history.pushState(null, '', newHash);

     

       83
       83
       +
                 startLine = currentLine;

     

       84
       84
       +
               }

     

       85
       85
       +
       

     

       86
       86
       +
               highlight();

     

       87
       87
       +
             });

     

       88
       88
       +
           });

     

       89
       89
       +
         </script>

     

       90
       90
       +
       {{ end }}

appview/pages/templates/repo/blob.html

···

       78
       78
        
               {{ end }}

     

       79
       79
        
           </div>

     

       80
       80
        
           {{ end }}

     

       81
       81
       +
           {{ template "fragments/multiline-select" }}

     

       81
       82
        
       {{ end }}

+3 -2

appview/pages/templates/strings/string.html

···

       23
       23
        
                    hx-boost="true"

     

       24
       24
        
                    href="/strings/{{ .String.Did }}/{{ .String.Rkey }}/edit">

     

       25
       25
        
                   {{ i "pencil" "size-4" }}

     

       26
       26
       -
                   <span class="hidden md:inline">edit</span> 

     

       26
       26
       +
                   <span class="hidden md:inline">edit</span>

     

       27
       27
        
                   {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}

     

       28
       28
        
                 </a>

     

       29
       29
        
                 <button

     
···

       34
       34
        
                   hx-confirm="Are you sure you want to delete the string `{{ .String.Filename }}`?"

     

       35
       35
        
                 >

     

       36
       36
        
                   {{ i "trash-2" "size-4" }}

     

       37
       37
       -
                   <span class="hidden md:inline">delete</span> 

     

       37
       37
       +
                   <span class="hidden md:inline">delete</span>

     

       38
       38
        
                   {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}

     

       39
       39
        
                 </button>

     

       40
       40
        
               </div>

     
···

       80
       80
        
             <div id="blob-contents" class="whitespace-pre peer-target:bg-yellow-200 dark:peer-target:bg-yellow-900">{{ .String.Contents | escapeHtml }}</div>

     

       81
       81
        
             {{ end }}

     

       82
       82
        
           </div>

     

       83
       83
       +
           {{ template "fragments/multiline-select" }}

     

       83
       84
        
         </section>

     

       84
       85
        
       {{ end }}

+2 -5

input.css

···

       228
       228
        
       }

     

       229
       229
        
       /* LineHighlight */

     

       230
       230
        
       .chroma .hl {

     

       231
       231
       -
           background-color: #bcc0cc;

     

       231
       231
       +
         @apply bg-amber-400/30 dark:bg-amber-500/20;

     

       232
       232
        
       }

     

       233
       233
       +
       

     

       233
       234
        
       /* LineNumbersTable */

     

       234
       235
        
       .chroma .lnt {

     

       235
       236
        
           white-space: pre;

     
···

       864
       865
        
               text-decoration: underline;

     

       865
       866
        
           }

     

       866
       867
        
       }

     

       867
       867
       -
       

     

       868
       868
       -
       .chroma .line:has(.ln:target) {

     

       869
       869
       -
           @apply bg-amber-400/30 dark:bg-amber-500/20;

     

       870
       870
       -
       }