Skip to content

Instantly share code, notes, and snippets.

@tanthammar
tanthammar / always-on-top.js
Created May 14, 2021
JS Get highest z-index, always on top
View always-on-top.js
window.findHighestZ = () => [...document.querySelectorAll('body *')]
.map(elt => parseFloat(getComputedStyle(elt).zIndex))
.reduce((z, highest=Number.MIN_SAFE_INTEGER) =>
isNaN(z) || z < highest ? (isNaN(highest) ? 1 : highest) : z
)
//vanilla
document.getElementById("foo").style.zIndex = window.findHighestZ()
@tanthammar
tanthammar / AutoGeneratesPosition.php
Last active Feb 20, 2021
Auto generate spatial point when creating or updating a Model
View AutoGeneratesPosition.php
<?php
namespace App\Traits;
use App\Helpers\GeoHelper;
use Grimzy\LaravelMysqlSpatial\Types\Point;
trait AutoGeneratesPosition
{
View validation.php
<?php
return [
'accepted' => 'Detta alternativ måste accepteras.',
'active_url' => 'Värdet är inte en giltig URL.',
'after' => 'Datumet måste vara efter :date.',
'after_or_equal' => 'Fältet måste vara ett datum efter :date eller lika med :date',
'alpha' => 'Fältet får bara innehålla bokstäver.',
'alpha_dash' => 'Fältet får bara innehålla bokstäver, nummer och bindestreck.',
'alpha_num' => 'Fältet får bara innehålla bokstäver och nummer.',
View ItemList.php
<?php
/**
* In your Livewire model for the list of items
*/
class ItemList extends Component
{
// rest of component
@tanthammar
tanthammar / HasLinks.php
Last active Jul 1, 2021
No more controllers! Only Laravel LiveWire routes and a handy Eloquent Model trait.
View HasLinks.php
@tanthammar
tanthammar / session-timeout-alert-after-livewire-scripts.blade.php
Last active Dec 29, 2021
Laravel Livewire Turbolinks Blade component to keep session alive
View session-timeout-alert-after-livewire-scripts.blade.php
{{-- You do not need to add this component if you are using the permanent option in the head component --}}
<script>
if (!window.sessionTimerPermanent && window.Livewire) {
window.livewire.hook('afterDomUpdate', startSessionTimer)
}
// if you are on livewire > 1.3.1 and want to avoid the default error alert
// https://github.com/livewire/livewire/pull/1146
window.livewire.onError(statusCode => {
if (statusCode === 419) {
@tanthammar
tanthammar / keep-csrf-alive.blade.php
Last active Jun 23, 2020
Keep livewire form session alive (419)
View keep-csrf-alive.blade.php
<script data-turbolinks-eval=false>
function updateToken() {
fetch('/update-csrf')
.then(response => response.text())
.then(csrf => {
document.head.querySelector('meta[name="csrf-token"]').setAttribute('content', csrf)
})
}
setInterval(updateToken, 1000 * 60 * 5)
</script>
View filesystems.php
<?php
$spaces = [
'driver' => 's3',
'key' => env('DO_SPACES_KEY'),
'secret' => env('DO_SPACES_SECRET'),
'endpoint' => env('DO_SPACES_ENDPOINT'),
'region' => env('DO_SPACES_REGION'),
'bucket' => env('DO_SPACES_BUCKET')
];
View app#Charts#WanSpeedTestsChart.php
<?php
namespace App\Charts;
use App\Support\Livewire\ChartComponentData;
use ConsoleTVs\Charts\Classes\Chartjs\Chart;
/**
* Class WanSpeedTestsChart
*
@tanthammar
tanthammar / Media.blade.php
Last active Oct 24, 2021
LiveWire Spatie Media Image upload with VueCroppa
View Media.blade.php
<div id="media-comp" class="display-contents">
<media inline-template>
<form>
<div v-for="(image, index) in form" :key="index" @touchstart.stop @mousedown.stop class="col-span-6">
<h3 class="text-3xl font-medium">@{{ image.label }}</h3>
<p class="py-3">Allowed Width @{{image.width}}px, Height @{{image.height}}px, Max file size @{{image.maxFileSize}}</p>
<input v-model="image.value" wire:model="@{{ image.name }}" type="hidden">
<croppa v-model="image.model" :width="image.width" :height="image.height"
:placeholder="locale == 'sv' ? 'Välj en bild' : 'Choose an image'"
:accept="'image/*'" :file-size-limit="image.maxByte" :zoom-speed="3" :disable-drag-and-drop="false"