Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add BitProModal component (#9503) #9523

Draft
wants to merge 7 commits into
base: develop
Choose a base branch
from
Draft
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
unify dragdrop
  • Loading branch information
msynk committed Dec 23, 2024
commit cd959ea63df46678f3a2a7e20617e5f65615d628
Original file line number Diff line number Diff line change
@@ -217,16 +217,16 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (IsDraggable)
{
_ = _js.BitModalSetupDragDrop(_containerId, GetDragElementSelector());
_ = _js.DragDropsSetup(_containerId, GetDragElementSelector());
}
else
{
_ = _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector());
_ = _js.DragDropsRemove(_containerId, GetDragElementSelector());
}
}
else
{
_ = _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector());
_ = _js.DragDropsRemove(_containerId, GetDragElementSelector());
}

_offsetTop = 0;
@@ -329,7 +329,7 @@ protected virtual async ValueTask DisposeAsync(bool disposing)

try
{
await _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector());
await _js.DragDropsRemove(_containerId, GetDragElementSelector());
}
catch (JSDisconnectedException) { } // we can ignore this exception here

Original file line number Diff line number Diff line change
@@ -21,14 +21,6 @@
}
}

.bit-dlg-nta {
touch-action: none;

* {
touch-action: none;
}
}

.bit-dlg-abs {
z-index: unset;
position: absolute;
Original file line number Diff line number Diff line change
@@ -179,16 +179,16 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (ModalParameters.Draggable)
{
_ = _js.BitModalSetupDragDrop(_containerId, GetDragElementSelector());
_ = _js.DragDropsSetup(_containerId, GetDragElementSelector());
}
else
{
_ = _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector());
_ = _js.DragDropsRemove(_containerId, GetDragElementSelector());
}
}
else
{
_ = _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector());
_ = _js.DragDropsRemove(_containerId, GetDragElementSelector());
}

_offsetTop = 0;
@@ -250,7 +250,7 @@ protected virtual async ValueTask DisposeAsync(bool disposing)
try
{
await ToggleScroll(false);
await _js.BitModalRemoveDragDrop(_containerId, GetDragElementSelector());
await _js.DragDropsRemove(_containerId, GetDragElementSelector());
}
catch (JSDisconnectedException) { } // we can ignore this exception here

Original file line number Diff line number Diff line change
@@ -19,14 +19,6 @@
transition: opacity 300ms ease 0s;
}

.bit-mdl-nta {
touch-action: none;

* {
touch-action: none;
}
}

.bit-mdl-abs {
z-index: unset;
position: absolute;

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
namespace Bit.BlazorUI;

internal static class DragDropsJsRuntimeExtensions
{
internal static ValueTask DragDropsSetup(this IJSRuntime js, string id, string dragElementSelector)
{
return js.InvokeVoid("BitBlazorUI.DragDrops.setup", id, dragElementSelector);
}

internal static ValueTask DragDropsRemove(this IJSRuntime js, string id, string dragElementSelector)
{
return js.InvokeVoid("BitBlazorUI.DragDrops.remove", id, dragElementSelector);
}
}
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
namespace BitBlazorUI {
export class Modal {
export class DragDrops {
private static _dragDropListeners: any = {};

public static setupDragDrop(containerId: string, dragElementSelector: string) {
Modal.removeDragDrop(containerId, dragElementSelector);
public static setup(id: string, dragElementSelector: string) {
DragDrops.remove(id, dragElementSelector);
const listeners: any = {};
Modal._dragDropListeners[containerId] = listeners;
DragDrops._dragDropListeners[id] = listeners;

const element = document.getElementById(containerId)! as HTMLElement;
const dragElement = document.querySelector(dragElementSelector)! as HTMLElement;
const element = document.getElementById(id) as HTMLElement;
if (!element) return;

const dragElement = document.querySelector(dragElementSelector) as HTMLElement;
if (!dragElement) return;

let x = 0;
let y = 0;

listeners['pointerdown'] = handlePointerDown;
dragElement.addEventListener('pointerdown', handlePointerDown);
dragElement.style.cursor = 'move';
dragElement.classList.add('bit-mdl-nta');
dragElement.classList.add('bit-nta');

function handlePointerDown(e: PointerEvent) {
//e.preventDefault();
@@ -55,15 +58,15 @@
}
}

public static removeDragDrop(id: string, dragElementSelector: string) {
const listeners = Modal._dragDropListeners[id];
public static remove(id: string, dragElementSelector: string) {
const listeners = DragDrops._dragDropListeners[id];
if (!listeners) return;

const dragElement = document.querySelector(dragElementSelector)! as HTMLElement;

dragElement.removeEventListener('pointerdown', listeners['pointerdown']);
dragElement.style.cursor = '';
dragElement.classList.remove('bit-mdl-nta');
dragElement.classList.remove('bit-nta');

document.removeEventListener('pointermove', listeners['pointermove']);

@@ -74,7 +77,7 @@
delete listeners['pointerdown'];
delete listeners['pointermove'];
delete listeners['pointerup'];
delete Modal._dragDropListeners[id];
delete DragDrops._dragDropListeners[id];
}
}
}
11 changes: 10 additions & 1 deletion src/BlazorUI/Bit.BlazorUI/Styles/general.scss
Original file line number Diff line number Diff line change
@@ -9,7 +9,16 @@ button {
outline: none;
}

// Prevent text selection by user
// none touch action
.bit-nta {
touch-action: none;

* {
touch-action: none;
}
}

// none text selection
.bit-nts {
user-select: none;
-ms-user-select: none;
Loading