drag/click differensiating directive + fix for fixedheight truncatable elements

This commit is contained in:
Lotte Hofstede
2018-02-13 11:50:35 +01:00
parent 7bf23d1b7a
commit 52781d02c4
4 changed files with 28 additions and 3 deletions

View File

@@ -40,6 +40,7 @@ import { SearchResultGridElementComponent } from './object-grid/search-result-gr
import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component'; import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
import { GridThumbnailComponent } from './object-grid/grid-thumbnail/grid-thumbnail.component'; import { GridThumbnailComponent } from './object-grid/grid-thumbnail/grid-thumbnail.component';
import { VarDirective } from './utils/var.directive'; import { VarDirective } from './utils/var.directive';
import { DragClickDirective } from './utils/drag-click.directive';
import { TruncatePipe } from './utils/truncate.pipe'; import { TruncatePipe } from './utils/truncate.pipe';
import { TruncatableComponent } from './truncatable/truncatable.component'; import { TruncatableComponent } from './truncatable/truncatable.component';
import { TruncatableService } from './truncatable/truncatable.service'; import { TruncatableService } from './truncatable/truncatable.service';
@@ -104,7 +105,8 @@ const PROVIDERS = [
]; ];
const DIRECTIVES = [ const DIRECTIVES = [
VarDirective VarDirective,
DragClickDirective
]; ];
@NgModule({ @NgModule({

View File

@@ -49,7 +49,7 @@ $h4-factor: strip-unit($h4-font-size);
.clamp-none { .clamp-none {
overflow: hidden; overflow: hidden;
@for $i from 1 through 15 { @for $i from 1 through 15 {
&.min-#{$i} { &.fixedHeight.min-#{$i} {
transition: height 1s; transition: height 1s;
@include min($i); @include min($i);
&.title { &.title {

View File

@@ -1,3 +1,3 @@
<div (click)="toggle()" (mouseenter)="hoverExpand()" (mouseleave)="hoverCollapse"> <div dsDragClick (actualClick)="toggle()" (mouseenter)="hoverExpand()" (mouseleave)="hoverCollapse">
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>

View File

@@ -0,0 +1,23 @@
import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
@Directive({
selector: '[dsDragClick]'
})
export class DragClickDirective {
private start;
@Output() actualClick = new EventEmitter();
@HostListener('mousedown', ['$event'])
mousedownEvent(event) {
this.start = new Date();
}
@HostListener('mouseup', ['$event'])
mouseupEvent(event) {
const end: any = new Date();
const clickTime = end - this.start;
if (clickTime < 250) {
this.actualClick.emit(event)
}
}
}