iptv-org-mirror/iptv-org.github.io
1
0
Fork 0
mirror of https://github.com/iptv-org/iptv-org.github.io.git synced 2025-05-12 18:10:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update CountryItem.svelte

Browse source
This commit is contained in:
Arhey 2023-03-07 03:06:50 +03:00
parent 2b62878279
commit dbeefad832
1 changed files with 82 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

127
src/components/CountryItem.svelte
View file

@ -1,52 +1,89 @@
<script> <script>
import ChannelGrid from './ChannelGrid.svelte' import ChannelGrid from './ChannelGrid.svelte'
import Checkbox from './Checkbox.svelte'
import { downloadMode, selected } from '~/store'
import _ from 'lodash'
import { fade } from 'svelte/transition'
export let country export let country
export let channels = [] export let channels = []
export let hasQuery export let hasQuery
$: expanded = country.expanded || (channels && channels.length > 0 && hasQuery) $: intersect = _.intersectionBy($selected, channels, 'id')
$: expanded = country.expanded || (channels && channels.length > 0 && hasQuery)
$: isSelected = intersect.length === channels.length
$: isIndeterminate = intersect.length !== 0 && intersect.length < channels.length
function onExpand() { function onExpand() {
country.expanded = !country.expanded country.expanded = !country.expanded
} }
function onCheckboxChange(event) {
channels.forEach(channel => {
selected.update(arr => {
if (event.detail.state) {
arr.push(channel)
} else {
arr = arr.filter(c => c.id !== channel.id)
}
return arr
})
})
}
</script> </script>
<div class="mb-3"> <div class="mb-2 md:mb-3" class:pl-14="{$downloadMode}" style="transition: padding-left 100ms">
<h2 id="accordion-heading-{country.code}"> <h2 id="accordion-heading-{country.code}" class="flex relative">
<button {#if $downloadMode}
on:click="{onExpand}" <div
type="button" transition:fade="{{duration:200}}"
class="flex items-center focus:ring-0 dark:focus:ring-gray-800 justify-between p-4 w-full font-medium text-left border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-800" class="w-14 h-14 shrink-0 flex items-center absolute -left-14"
class:rounded-t-md="{expanded}" >
class:rounded-md="{!expanded}" <Checkbox
class:border-b-0="{expanded}" selected="{isSelected}"
aria-expanded="{expanded}" indeterminate="{isIndeterminate}"
aria-controls="accordion-body-{country.code}" on:change="{onCheckboxChange}"
> />
<span>{country.flag}&nbsp;{country.name}</span> </div>
<svg {/if}
class:rotate-180="{expanded}" <button
class="w-6 h-6 shrink-0" on:click="{onExpand}"
fill="currentColor" type="button"
viewBox="0 0 20 20" class="flex items-center focus:ring-0 dark:focus:ring-gray-800 justify-between p-4 w-full font-medium text-left border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-800"
xmlns="http://www.w3.org/2000/svg" class:rounded-t-md="{expanded}"
> class:rounded-md="{!expanded}"
<path class:border-b-0="{expanded}"
fill-rule="evenodd" aria-expanded="{expanded}"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" aria-controls="accordion-body-{country.code}"
clip-rule="evenodd" >
></path> <span>{country.flag}&nbsp;{country.name}</span>
</svg> <svg
</button> class:rotate-180="{expanded}"
</h2> class="w-6 h-6 shrink-0"
{#if expanded} fill="currentColor"
<div id="accordion-body-{country.code}" aria-labelledby="accordion-heading-{country.code}"> viewBox="0 0 20 20"
<div xmlns="http://www.w3.org/2000/svg"
class="border border-gray-200 dark:border-gray-700 dark:bg-gray-900 rounded-b-md overflow-hidden" >
> <path
<ChannelGrid bind:channels="{channels}" /> fill-rule="evenodd"
</div> d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
</div> clip-rule="evenodd"
{/if} ></path>
</svg>
</button>
</h2>
{#if expanded}
<div
class="relative"
id="accordion-body-{country.code}"
aria-labelledby="accordion-heading-{country.code}"
>
<div
class="border border-gray-200 dark:border-gray-700 dark:bg-gray-900 rounded-b-md overflow-hidden"
>
<ChannelGrid bind:channels="{channels}" />
</div>
</div>
{/if}
</div> </div>