better handle urls

pull/26/head
Ondřej Hruška 6 years ago
parent f879d195df
commit 3a8d54a569
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 13
      app/View/CollapsibleTextBoxWidget.php
  2. 17
      app/View/WidgetFactory.php
  3. 25
      resources/assets/js/app.js
  4. 4
      resources/assets/sass/_helpers.scss
  5. 4
      resources/assets/sass/app.scss
  6. 4
      resources/views/profile/view.blade.php
  7. 11
      resources/views/table/view.blade.php

@ -50,7 +50,14 @@ class CollapsibleTextBoxWidget
$out = nl2br($out); $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; return $out;
} }
@ -67,7 +74,9 @@ class CollapsibleTextBoxWidget
} }
if ($this->collapsing) { 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 { } else {
return $prefix.'<div>' . $prefix . $content . '</div>'; return $prefix.'<div>' . $prefix . $content . '</div>';
} }

@ -31,6 +31,23 @@ class WidgetFactory
"</div>"; "</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) public function collapsible($text, $thrSize, $maxHeight)
{ {
return new CollapsibleTextBoxWidget($text, $thrSize, $maxHeight); return new CollapsibleTextBoxWidget($text, $thrSize, $maxHeight);

@ -21,11 +21,26 @@ $(function () {
}, 500) }, 500)
}, 2500) }, 2500)
$('.block-collapse').on('click', (e) => { // toggle collapse when clicked outside link, without drag
$(e.target).closest('.block-collapse').addClass('reveal') $('.block-collapse')
}).on('dblclick', (e) => { .on('mousedown', (e) => {
$(e.target).closest('.block-collapse').removeClass('reveal') 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 // auto-alias

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

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

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

@ -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="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"> <div class="col-md-6">
@if($table->description) @if($table->description)
<p class="last-p-mb-0"> <b>Description</b>
<b>Description</b><br>
{!! Widget::collapsible($table->description, 400, '8em') !!} {!! Widget::collapsible($table->description, 400, '8em') !!}
</p>
@endif @endif
@if($table->origin) @if($table->origin)
<p class="last-p-mb-0"> <p class="last-p-mb-0">
<b>Source</b><br> <b>Source</b><br>
{{ $table->origin }} {!! Widget::tryLink($table->origin) !!}
</p> </p>
@endif @endif
</div> </div>
@ -42,9 +40,8 @@
<tr> <tr>
<th class="text-right pr-2">Author</th> <th class="text-right pr-2">Author</th>
<td> <td>
<a href="{{route('profile.view', $table->owner->name)}}"> {{ $table->owner->title }}
{{ $table->owner->handle }} (<a href="{{route('profile.view', $table->owner->name)}}">{{ $table->owner->handle }}</a>)
</a>
</td> </td>
</tr> </tr>

Loading…
Cancel
Save