mirror of https://github.com/Squidex/squidex.git
Sebastian
3 years ago
16 changed files with 173 additions and 46 deletions
@ -1,23 +0,0 @@ |
|||
// ==========================================================================
|
|||
// Squidex Headless CMS
|
|||
// ==========================================================================
|
|||
// Copyright (c) Squidex UG (haftungsbeschraenkt)
|
|||
// All rights reserved. Licensed under the MIT license.
|
|||
// ==========================================================================
|
|||
|
|||
using Microsoft.AspNetCore.Mvc.Filters; |
|||
|
|||
namespace Squidex.Web; |
|||
|
|||
public sealed class ClearCookiesAttribute : ActionFilterAttribute |
|||
{ |
|||
public override void OnActionExecuting(ActionExecutingContext context) |
|||
{ |
|||
var cookies = context.HttpContext.Response.Cookies; |
|||
|
|||
foreach (var cookie in context.HttpContext.Request.Cookies.Keys) |
|||
{ |
|||
cookies.Delete(cookie); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,64 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; |
|||
import { action } from '@storybook/addon-actions'; |
|||
import { moduleMetadata } from '@storybook/angular'; |
|||
import { Meta, Story } from '@storybook/angular/types-6-0'; |
|||
import { CodeEditorComponent, LongHoverDirective, SqxFrameworkModule } from '@app/framework'; |
|||
|
|||
export default { |
|||
title: 'Framework/LongHover', |
|||
component: CodeEditorComponent, |
|||
argTypes: { |
|||
selector: { |
|||
control: 'text', |
|||
}, |
|||
hover: { |
|||
action: 'hover', |
|||
}, |
|||
cancelled: { |
|||
action: 'cancelled', |
|||
}, |
|||
}, |
|||
decorators: [ |
|||
moduleMetadata({ |
|||
imports: [ |
|||
BrowserAnimationsModule, |
|||
SqxFrameworkModule, |
|||
SqxFrameworkModule.forRoot(), |
|||
], |
|||
}), |
|||
], |
|||
} as Meta; |
|||
|
|||
const Template: Story<LongHoverDirective> = (args: LongHoverDirective & any) => ({ |
|||
props: args, |
|||
template: ` |
|||
<div (sqxLongHover)="hover()" (longHoverCancelled)="cancelled()" [longHoverSelector]="selector"> |
|||
<div style="border: 1px solid #eee; padding: 100px"> |
|||
<button class="btn btn-primary">Button</button> |
|||
</div> |
|||
</div> |
|||
`,
|
|||
}); |
|||
|
|||
export const Default = Template.bind({}); |
|||
|
|||
Default.args = { |
|||
hover: action('Hover') as any, |
|||
selector: '', |
|||
cancelled: action('Cancelled') as any, |
|||
}; |
|||
|
|||
export const Selector = Default.bind({}); |
|||
|
|||
Selector.args = { |
|||
hover: action('Hover') as any, |
|||
selector: 'button', |
|||
cancelled: action('Cancelled') as any, |
|||
}; |
|||
@ -0,0 +1,70 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { Directive, EventEmitter, HostListener, Input, Output, Renderer2 } from '@angular/core'; |
|||
|
|||
@Directive({ |
|||
selector: '[sqxLongHover]', |
|||
}) |
|||
export class LongHoverDirective { |
|||
private timerOut: Function | null = null; |
|||
private timer?: any; |
|||
|
|||
@Output('sqxLongHover') |
|||
public hover = new EventEmitter(); |
|||
|
|||
@Output('longHoverCancelled') |
|||
public cancelled = new EventEmitter(); |
|||
|
|||
@Input('longHoverSelector') |
|||
public selector?: string; |
|||
|
|||
@Input('longHoverDuration') |
|||
public duration = 2000; |
|||
|
|||
constructor( |
|||
private readonly renderer: Renderer2, |
|||
) { |
|||
} |
|||
|
|||
@HostListener('mouseover', ['$event']) |
|||
public onMove(event: MouseEvent) { |
|||
if (!(event.target instanceof Element)) { |
|||
this.clearTimer(); |
|||
return; |
|||
} |
|||
|
|||
const isMatch = !this.selector || event.target.matches(this.selector); |
|||
|
|||
if (!isMatch) { |
|||
this.clearTimer(); |
|||
return; |
|||
} |
|||
|
|||
if (this.timer) { |
|||
return; |
|||
} |
|||
|
|||
this.timer = setTimeout(() => { |
|||
this.hover.emit(); |
|||
}, this.duration); |
|||
|
|||
this.timerOut = this.renderer.listen(event.target, 'mouseleave', () => { |
|||
this.clearTimer(); |
|||
}); |
|||
} |
|||
|
|||
private clearTimer() { |
|||
if (this.timer) { |
|||
clearTimeout(this.timer); |
|||
this.cancelled.emit(); |
|||
this.timer = null; |
|||
this.timerOut?.(); |
|||
this.timerOut = null; |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue