better handle urls

app/View/CollapsibleTextBoxWidget.php

@@ -50,7 +50,14 @@ class CollapsibleTextBoxWidget
 
         $out = nl2br($out);
 
-        $out = preg_replace('|(https?://[^\s]+)|i', '<a href="\1">\1</a>', $out);
+        $out = preg_replace_callback('#\b((https?://|ftp://|mailto:)[^\s]+)#i', function($m) {
+            $href = $m[1];
+            $text = $href;
+            if (strpos($text, 'mailto:') === 0) {
+                $text = str_replace('mailto:', '', $text);
+            }
+            return "<a href=\"".e($href)."\">".e($text)."</a>";
+        }, $out);
 
         return $out;
     }
@@ -67,7 +74,9 @@ class CollapsibleTextBoxWidget
         }
 
         if ($this->collapsing) {
-            return '<div class="block-collapse" style="max-height:'.$this->maxHeight.'">' . $prefix . $content . '</div>';
+            return '<div class="block-collapse" 
+                         title="Click to expand / Double-click to collapse"
+                         style="max-height:'.$this->maxHeight.'">' . $prefix . $content . '</div>';
         } else {
             return $prefix.'<div>' . $prefix . $content . '</div>';
         }

app/View/WidgetFactory.php

@@ -31,6 +31,23 @@ class WidgetFactory
             "</div>";
     }
 
+    /**
+     * Convert the given string to a-href if it is a link.
+     *
+     * @param $href
+     * @return string
+     */
+    public function tryLink($href)
+    {
+        $href = trim($href);
+        if (starts_with($href, ['http://', 'https://', 'mailto:', 'ftp://'])) {
+            $href_e = e($href);
+            return "<a href=\"".$href_e."\">".$href_e."</a>";
+        } else {
+            return $href;
+        }
+    }
+
     public function collapsible($text, $thrSize, $maxHeight)
     {
         return new CollapsibleTextBoxWidget($text, $thrSize, $maxHeight);

resources/assets/js/app.js

@@ -21,11 +21,26 @@ $(function () {
     }, 500)
   }, 2500)
 
-  $('.block-collapse').on('click', (e) => {
-    $(e.target).closest('.block-collapse').addClass('reveal')
-  }).on('dblclick', (e) => {
-    $(e.target).closest('.block-collapse').removeClass('reveal')
-  });
+  // toggle collapse when clicked outside link, without drag
+  $('.block-collapse')
+    .on('mousedown', (e) => {
+      let $bc = $(e.target).closest('.block-collapse')
+      $bc.data('mx', e.screenX);
+      $bc.data('my', e.screenY);
+    })
+    .on('mouseup', (e) => {
+      if (e.target.nodeName === 'A') return
+      let $bc = $(e.target).closest('.block-collapse')
+      if (typeof $bc.data('mx') !== 'undefined') {
+        let x0 = +$bc.data('mx');
+        let y0 = +$bc.data('my');
+        if (Math.abs(x0 - e.screenX) > 5 || Math.abs(y0 - e.screenY) > 5) {
+          // drag
+        } else {
+          $(e.target).closest('.block-collapse').toggleClass('reveal')
+        }
+      }
+    })
 })
 
 // auto-alias

resources/assets/sass/_helpers.scss

@@ -46,3 +46,7 @@
 .small2 {
 	font-size: 70%;
 }
+
+a.link-no-color {
+	color: unset;
+}

resources/assets/sass/app.scss

@@ -15,7 +15,3 @@ html {
 @import "bootstrap-customizations/navbar";
 @import "bootstrap-customizations/footer";
 @import "bootstrap-customizations/help";
-
-a.link-no-color {
-	color: unset;
-}

resources/views/profile/view.blade.php

@@ -40,7 +40,7 @@
             @if($user->website)
             <tr>
               <td class="text-center pr-2">@icon(fa-link, User's Website:)</td>
-              <td><a href="{{ $user->website }}">{{ $user->website }}</a></td>
+              <td>{!! Widget::tryLink($user->website) !!}</td>
             </tr>
             @endif
 
@@ -60,7 +60,7 @@
     </div>
 
     {{-- Table list card --}}
-    <div class="col-md-8">
+    <div class="col-md-8 mt-2 mt-md-0">
       <div class="card">
         <div class="card-header card-header-extra">
           <h2>

resources/views/table/view.blade.php

@@ -22,16 +22,14 @@
   <div class="row mx-auto col-md-12 justify-content-center mb-1 border rounded px-0 py-2 box-shadow mb-3">
     <div class="col-md-6">
       @if($table->description)
-        <p class="last-p-mb-0">
-          <b>Description</b><br>
-          {!! Widget::collapsible($table->description, 400, '8em') !!}
-        </p>
+        <b>Description</b>
+        {!! Widget::collapsible($table->description, 400, '8em') !!}
       @endif
 
       @if($table->origin)
         <p class="last-p-mb-0">
           <b>Source</b><br>
-          {{ $table->origin }}
+          {!! Widget::tryLink($table->origin) !!}
         </p>
       @endif
     </div>
@@ -42,9 +40,8 @@
         <tr>
           <th class="text-right pr-2">Author</th>
           <td>
-            <a href="{{route('profile.view', $table->owner->name)}}">
-              {{ $table->owner->handle }}
-            </a>
+            {{ $table->owner->title }}
+            (<a href="{{route('profile.view', $table->owner->name)}}">{{ $table->owner->handle }}</a>)
           </td>
         </tr>