fix modal dragging
This commit is contained in:
parent
a779eafff5
commit
00f42f1686
@ -1,5 +1,6 @@
|
||||
@page "{Transaction_UID}"
|
||||
@using System.Text.Json
|
||||
@using Syncfusion.EJ2
|
||||
@model EnotaryoPH.Web.Pages.Participant.VideoCall.RoomModel
|
||||
@{
|
||||
Layout = "_Blank";
|
||||
@ -40,8 +41,6 @@
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
/* background-color: #f9f9f9; */
|
||||
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@ -61,6 +60,30 @@
|
||||
cursor: move;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link href="~/lib/ej2/css/bootstrap5.3.css" rel="stylesheet" />
|
||||
<script src="~/lib/ej2/js/ej2.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var pdfViewer;
|
||||
window.onload = function () {
|
||||
pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
|
||||
|
||||
document.getElementById('btnUpdateFormFields').onclick = function () {
|
||||
debugger;
|
||||
let formFieldCollections = pdfViewer.formFieldCollections;
|
||||
let otherFormFieldDetails = formFieldCollections.filter(formField => formField.customData.author === 'mangjose');
|
||||
let currentFormFieldDetails = formFieldCollections.filter(formField => formField.customData.author === 'andrew');
|
||||
}
|
||||
}
|
||||
|
||||
function formFieldClick(arg) {
|
||||
}
|
||||
|
||||
function documentLoaded(arg) {
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
}
|
||||
<div class="vh-100" id="videoGrid-container"></div>
|
||||
|
||||
@ -137,21 +160,41 @@
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-bs-toggle="tab" href="#image1">Identification</a>
|
||||
<a class="nav-link active" data-bs-toggle="tab" href="#tabIdentification">Identification</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#image2">Selfie</a>
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#tabSelfie">Selfie</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#tabOTP">OTP</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#tabDetails">Details</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<div id="image1" class="container tab-pane active">
|
||||
<img id="IdentificationImage" src="https://placehold.co/600x400?text=World" alt="Image 2" class="img-fluid">
|
||||
<div class="tab-content mt-2">
|
||||
<div id="tabIdentification" class="container tab-pane active">
|
||||
<img id="IdentificationImage" src="https://placehold.co/600x400?text=World" alt="Image 2" class="img-fluid"
|
||||
style="height:350px;">
|
||||
</div>
|
||||
<div id="image2" class="container tab-pane fade">
|
||||
<div id="tabSelfie" class="container tab-pane fade">
|
||||
<img id="SelfieImage" src="https://placehold.co/600x400?text=Hello" alt="Image 1" class="img-fluid">
|
||||
</div>
|
||||
<div id="tabOTP" class="container tab-pane fade">
|
||||
<span id="Otp" class="h1">user has not yet entered OTP</span>
|
||||
</div>
|
||||
<div id="tabDetails" class="container tab-pane fade">
|
||||
<div class="mb-3">
|
||||
<label for="device" class="form-label">Device</label>
|
||||
<input type="text" class="form-control" id="device" placeholder="Android" readonly="readonly">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="location" class="form-label">Location</label>
|
||||
<input type="text" class="form-control" id="location" placeholder="Metro Manila" readonly="readonly">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -169,139 +212,61 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@* <template id="TemplateSidePane">
|
||||
<div data-is-focusable="false" aria-modal="true" data-ui-id="SidePaneSignatories" class="ms-Stack css-366">
|
||||
<div class="ms-Stack css-367">
|
||||
<div role="heading" aria-label="People" aria-level="2" class="ms-StackItem css-368">Signatories</div>
|
||||
<div class="ms-StackItem css-157">
|
||||
<button type="button" class="ms-Button ms-Button--commandBar root-369" aria-label="Close" data-is-focusable="true">
|
||||
<span class="ms-Button-flexContainer flexContainer-193" data-automationid="splitbuttonprimary">
|
||||
<i data-icon-name="cancel" aria-hidden="true" class="ms-Icon root-89 css-196 ms-Button-icon icon-370" style="font-family: FabricMDL2Icons;"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-StackItem css-373">
|
||||
<div class="ms-Stack css-374">
|
||||
<div class="ms-StackItem css-375">
|
||||
<div class="ms-Stack css-252">
|
||||
<div data-ui-id="people-pane-content" class="ms-Stack css-376">
|
||||
<div class="ms-Stack css-162">
|
||||
<div aria-live="assertive" role="status" aria-atomic="true" class="ms-Stack css-241" />
|
||||
</div>
|
||||
<div class="ms-StackItem css-377">
|
||||
<div class="ms-Stack css-378">
|
||||
<div class="ms-Stack css-379">
|
||||
<div aria-label="In this call {numberOfPeople}" id="id__427" class="ms-StackItem css-380">
|
||||
<h2 id="SignatoryCount">In this call (2)</h2>
|
||||
</div>
|
||||
<div class="ms-StackItem css-157">
|
||||
<button type="button" data-ui-id="people-pane-header-more-button" class="ms-Button ms-Button--default ms-Button--hasMenu root-381" aria-label="More" data-is-focusable="true" aria-expanded="false" aria-haspopup="true">
|
||||
<span class="ms-Button-flexContainer flexContainer-193" data-automationid="splitbuttonprimary">
|
||||
<i data-icon-name="PeoplePaneMoreButton" aria-hidden="true" class="ms-Icon root-89 ms-Button-icon icon-382">
|
||||
<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.75 10a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Zm5 0a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM15 11.75a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z" fill="currentColor" />
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-Stack css-384">
|
||||
<div id="SignatoryList" data-ui-id="participant-list" class="ms-Stack css-386" role="menu">
|
||||
<div role="menuitem" id="id__436" aria-label="principal3@jfaquinojr.com, , Muted, , , , " aria-labelledby="id__427 id__436" aria-expanded="true" aria-disabled="true" aria-controls="id__437" data-is-focusable="false" data-ui-id="participant-item" class="css-392">
|
||||
<div class="ms-Stack css-394">
|
||||
<div data-ui-id="chat-composite-participant-custom-avatar" class="ms-Persona ms-Persona--size32 root-396">
|
||||
<div role="presentation" class="ms-Persona-coin ms-Persona--size32 coin-261">
|
||||
<div role="presentation" class="ms-Persona-imageArea imageArea-399">
|
||||
<div class="ms-Persona-initials initials-402" aria-hidden="true">
|
||||
<span>P</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
|
||||
<div class="ms-TooltipHost root-404" role="none">
|
||||
<span aria-labelledby="text-tooltip428" class="css-405">principal3@jfaquinojr.com</span>
|
||||
<div hidden="" id="text-tooltip428" style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;">principal3@jfaquinojr.com</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-Stack css-406">
|
||||
<div class="ms-Stack css-407">
|
||||
<i data-icon-name="ParticipantItemMicOff" role="img" aria-label="Muted" class="root-408">
|
||||
<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 5v4.88l.9.9A3 3 0 0 0 13 10V5a3 3 0 0 0-6-.12l1 1V5a2 2 0 1 1 4 0ZM7 7.7 2.15 2.86a.5.5 0 1 1 .7-.7l15 15a.5.5 0 0 1-.7.7l-3.63-3.62a5.48 5.48 0 0 1-3.02 1.25v2.02a.5.5 0 0 1-1 0v-2.02a5.5 5.5 0 0 1-5-5.48.5.5 0 0 1 1 0 4.5 4.5 0 0 0 7.3 3.52l-1.06-1.07A3 3 0 0 1 7 10V7.7Zm4.02 4.02L8 8.71V10a2 2 0 0 0 3.02 1.72Zm3.78.96-.74-.74c.28-.59.44-1.25.44-1.94a.5.5 0 0 1 1 0c0 .97-.25 1.89-.7 2.68Z" fill="currentColor" />
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="menuitem" id="id__442" aria-label="Notary One, , , , , , " aria-labelledby="id__427 id__442" aria-expanded="false" aria-disabled="true" aria-controls="id__443" data-is-focusable="false" data-ui-id="participant-item" class="css-392">
|
||||
<div class="ms-Stack css-394">
|
||||
<div data-ui-id="chat-composite-participant-custom-avatar" class="ms-Persona ms-Persona--size32 root-396">
|
||||
<div role="presentation" class="ms-Persona-coin ms-Persona--size32 coin-261">
|
||||
<div role="presentation" class="ms-Persona-imageArea imageArea-399">
|
||||
<div class="ms-Persona-initials initials-409" aria-hidden="true">
|
||||
<span>NO</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
|
||||
<div class="ms-TooltipHost root-404" role="none">
|
||||
<span aria-labelledby="text-tooltip428" class="css-405">Notary One</span>
|
||||
<div hidden="" id="text-tooltip428" style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;">Notary One</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="css-410">(you)</span>
|
||||
<div class="ms-Stack css-406" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="modal fade" id="PdfViewer" data-bs-backdrop="false" data-bs-keyboard="false">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header draggable">
|
||||
<h4 class="modal-title">@Model.DocumentType</h4>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<ejs-pdfviewer id="pdfviewer" enableFormDesigner="true" enableFormDesignerToolbar="true" designerMode="true"
|
||||
documentPath="https://localhost:7121/Participant/VideoCall/Room/@Model.Transaction_UID?handler=Document"
|
||||
style="height:641px;"
|
||||
documentLoad="documentLoaded"
|
||||
formFieldClick="formFieldClick">
|
||||
</ejs-pdfviewer>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer justify-content-start">
|
||||
<div class="flex-fill">
|
||||
<button id="btnUpdateFormFields" class="btn btn-primary">Ready for Signature</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
|
||||
<template id="TemplateSignatoryItem">
|
||||
<div role="menuitem" class="css-392">
|
||||
<div class="ms-Stack css-394">
|
||||
<div class="ms-Persona ms-Persona--size32 root-396">
|
||||
<div role="presentation" class="ms-Persona-coin ms-Persona--size32 coin-261">
|
||||
<div role="presentation" class="ms-Persona-imageArea imageArea-399">
|
||||
<div class="ms-Persona-initials initials-402" aria-hidden="true">
|
||||
<span class="signatory-initials">X</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="OtpForm">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header draggable">
|
||||
<h4 class="modal-title">Enter your One Time Password</h4>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<input type="text" id="Otp" class="form-control" placeholder="Enter your One-Time-Password" asp-action="Otp" />
|
||||
</div>
|
||||
|
||||
<div class="modal-footer justify-content-start">
|
||||
<div class="flex-fill">
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Submit</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
|
||||
<div class="ms-TooltipHost root-404" role="none">
|
||||
<span aria-labelledby="text-tooltip428" class="css-405 signatory-name">principal3@jfaquinojr.com</span>
|
||||
<div hidden="" class="signatory-tooltip" style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;">principal3@jfaquinojr.com</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-Stack css-406">
|
||||
<div class="ms-Stack css-407">
|
||||
<i data-icon-name="ParticipantItemMicOff" role="img" aria-label="Muted" class="root-408">
|
||||
<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 5v4.88l.9.9A3 3 0 0 0 13 10V5a3 3 0 0 0-6-.12l1 1V5a2 2 0 1 1 4 0ZM7 7.7 2.15 2.86a.5.5 0 1 1 .7-.7l15 15a.5.5 0 0 1-.7.7l-3.63-3.62a5.48 5.48 0 0 1-3.02 1.25v2.02a.5.5 0 0 1-1 0v-2.02a5.5 5.5 0 0 1-5-5.48.5.5 0 0 1 1 0 4.5 4.5 0 0 0 7.3 3.52l-1.06-1.07A3 3 0 0 1 7 10V7.7Zm4.02 4.02L8 8.71V10a2 2 0 0 0 3.02 1.72Zm3.78.96-.74-.74c.28-.59.44-1.25.44-1.94a.5.5 0 0 1 1 0c0 .97-.25 1.89-.7 2.68Z" fill="currentColor" />
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
*@
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<ejs-scripts></ejs-scripts>
|
||||
<script type="text/javascript" src="/dist/_jfa.js"></script>
|
||||
<script type="text/javascript" src="/lib/azure-communication-service/callComposite.js"></script>
|
||||
<script src="~/Pages/Participant/VideoCall/Room.cshtml.js" asp-append-version="true"></script>
|
||||
|
||||
@ -257,17 +257,19 @@
|
||||
let offsetX, offsetY;
|
||||
|
||||
const header = modal.querySelector('.modal-header');
|
||||
const dialog = modal.querySelector('.modal-content');
|
||||
|
||||
header.addEventListener('mousedown', (e) => {
|
||||
isDragging = true;
|
||||
offsetX = e.clientX - modal.offsetLeft;
|
||||
offsetY = e.clientY - modal.offsetTop;
|
||||
offsetX = e.clientX - (modal.offsetLeft + dialog.offsetLeft);
|
||||
offsetY = e.clientY - (modal.offsetTop + dialog.offsetTop);
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
|
||||
if (!isDragging) return;
|
||||
modal.style.left = `${e.clientX - offsetX}px`;
|
||||
modal.style.top = `${e.clientY - offsetY}px`;
|
||||
dialog.style.left = `${e.clientX - offsetX}px`;
|
||||
dialog.style.top = `${e.clientY - offsetY}px`;
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user