From c3c8bd0e8054d98d54f2bc9cb9e230a3a4787086 Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Thu, 13 Sep 2018 18:43:00 +0200 Subject: [PATCH] better fold mechanism --- resources/components/fold.html | 12 ++++++---- resources/styles/_common.scss | 9 ++++++-- resources/styles/_stop.scss | 1 + resources/ts/components/utils.ts | 23 ++++++++++++++++--- resources/ts/model/departure.ts | 8 ++++++- src/Model/Departure.php | 6 ++--- src/Model/Vehicle.php | 10 ++++++++ .../ZtmGdanskDepartureRepository.php | 10 ++++++-- src/Provider/ZtmGdanskProvider.php | 6 +++-- 9 files changed, 67 insertions(+), 18 deletions(-) create mode 100644 src/Model/Vehicle.php diff --git a/resources/components/fold.html b/resources/components/fold.html index 033e008..0fd6121 100644 --- a/resources/components/fold.html +++ b/resources/components/fold.html @@ -1,6 +1,8 @@ -
- - - - +
+
+ + + + +
\ No newline at end of file diff --git a/resources/styles/_common.scss b/resources/styles/_common.scss index f614019..ba8397f 100644 --- a/resources/styles/_common.scss +++ b/resources/styles/_common.scss @@ -30,8 +30,13 @@ } } -.collapse { - padding-bottom: .5rem; +.fold { + overflow-y: hidden; + overflow-x: hidden; + + transition: height 250ms ease; + will-change: height; + box-sizing: padding-box; } .flex { diff --git a/resources/styles/_stop.scss b/resources/styles/_stop.scss index 20190d1..6b3054d 100644 --- a/resources/styles/_stop.scss +++ b/resources/styles/_stop.scss @@ -17,6 +17,7 @@ .stop__details { flex-basis: 100%; + .fold__inner { padding-bottom: .75rem; } } .stop-group__name { diff --git a/resources/ts/components/utils.ts b/resources/ts/components/utils.ts index f166145..287206c 100644 --- a/resources/ts/components/utils.ts +++ b/resources/ts/components/utils.ts @@ -42,16 +42,33 @@ export class PopperComponent extends Vue { @Component({ template: collapse }) export class FoldComponent extends Vue { + private observer: MutationObserver; + @Prop(Boolean) public visible: boolean; @Prop(Boolean) public lazy: boolean; + mounted() { + this.resize(); + this.observer = new MutationObserver(() => this.resize()); + + this.observer.observe(this.$refs['inner'] as Node, { + characterData: true, + subtree: true, + childList: true + }); + } + + destroyed() { + this.observer.disconnect(); + } + @Watch('visible') - private onVisibilityChange(value) { - const action = () => $(this.$el).collapse(value ? 'show' : 'hide'); - setTimeout(action); + private resize() { + const inner = this.$refs['inner'] as HTMLDivElement; + this.$el.style.height = `${(this.visible && inner) ? inner.clientHeight : 0}px`; } } diff --git a/resources/ts/model/departure.ts b/resources/ts/model/departure.ts index 772fd87..f088547 100644 --- a/resources/ts/model/departure.ts +++ b/resources/ts/model/departure.ts @@ -10,5 +10,11 @@ export interface Departure { line: Line; delay: number; - vehicle?: string; + vehicle?: Vehicle; +} + +export interface Vehicle { + id: string; + + // todo: ??? } \ No newline at end of file diff --git a/src/Model/Departure.php b/src/Model/Departure.php index 3d2502f..1dff929 100644 --- a/src/Model/Departure.php +++ b/src/Model/Departure.php @@ -22,7 +22,7 @@ class Departure implements Fillable /** * Vehicle identification - * @var string|null + * @var Vehicle|null */ private $vehicle; @@ -54,12 +54,12 @@ class Departure implements Fillable $this->line = $line; } - public function getVehicle(): ?string + public function getVehicle(): ?Vehicle { return $this->vehicle; } - public function setVehicle(?string $vehicle): void + public function setVehicle(?Vehicle $vehicle): void { $this->vehicle = $vehicle; } diff --git a/src/Model/Vehicle.php b/src/Model/Vehicle.php new file mode 100644 index 0000000..5a67513 --- /dev/null +++ b/src/Model/Vehicle.php @@ -0,0 +1,10 @@ +lines = $lines; + $this->reference = $reference; } public function getForStop(Stop $stop): Collection @@ -42,7 +48,7 @@ class ZtmGdanskDepartureRepository implements DepartureRepository 'estimated' => $estimated, 'stop' => $stop, 'display' => trim($delay['headsign']), - 'vehicle' => $delay['vehicleCode'], + 'vehicle' => $this->reference->get(Vehicle::class, $delay['vehicleCode']), 'line' => $lines->get($delay['routeId']), ]); })->values(); diff --git a/src/Provider/ZtmGdanskProvider.php b/src/Provider/ZtmGdanskProvider.php index fe98a23..edbfd0a 100644 --- a/src/Provider/ZtmGdanskProvider.php +++ b/src/Provider/ZtmGdanskProvider.php @@ -8,6 +8,7 @@ use App\Provider\Database\GenericLineRepository; use App\Provider\Database\GenericStopRepository; use App\Provider\Database\GenericTrackRepository; use App\Provider\ZtmGdansk\{ZtmGdanskDepartureRepository, ZtmGdanskMessageRepository}; +use App\Service\Proxy\ReferenceFactory; use Doctrine\ORM\EntityManagerInterface; class ZtmGdanskProvider implements Provider @@ -33,7 +34,8 @@ class ZtmGdanskProvider implements Provider GenericLineRepository $lines, GenericStopRepository $stops, GenericTrackRepository $tracks, - ZtmGdanskMessageRepository $messages + ZtmGdanskMessageRepository $messages, + ReferenceFactory $referenceFactory ) { $provider = $em->getReference(ProviderEntity::class, $this->getIdentifier()); @@ -42,7 +44,7 @@ class ZtmGdanskProvider implements Provider $tracks = $tracks->withProvider($provider); $this->lines = $lines; - $this->departures = new ZtmGdanskDepartureRepository($lines); + $this->departures = new ZtmGdanskDepartureRepository($lines, $referenceFactory); $this->stops = $stops; $this->messages = $messages; $this->tracks = $tracks;