Compare commits
19 Commits
feat/locat
...
4a62ab0c56
| Author | SHA1 | Date | |
|---|---|---|---|
|
4a62ab0c56 | ||
|
|
132acd35cc | ||
|
|
ed80839777 | ||
|
|
6e6f3fd2ed | ||
|
|
5da306acd3 | ||
|
|
18ef1d19b5 | ||
|
|
b76ebd2abc | ||
|
|
d55233061d | ||
|
|
949001791c | ||
|
|
30f93f2439 | ||
|
|
bb8bd8ed40 | ||
|
|
ba832acad3 | ||
|
|
6490a3cb82 | ||
|
|
4c077c90db | ||
|
|
9bd5e63128 | ||
|
|
15ce7c9384 | ||
|
|
8707a5cdb5 | ||
|
|
47c7070700 | ||
|
|
fcc3223eb1 |
@@ -0,0 +1,22 @@
|
||||
using DigitalData.Core.Abstractions.Client;
|
||||
|
||||
namespace EnvelopeGenerator.Application.Configurations.GtxMessaging
|
||||
{
|
||||
/// <summary>
|
||||
/// https://www.gtx-messaging.com/en/api-docs/sms-rest-api/
|
||||
/// </summary>
|
||||
public class SmsParams : IHttpClientOptions
|
||||
{
|
||||
public required string Uri { get; init; }
|
||||
|
||||
public string? Path { get; init; }
|
||||
|
||||
public IEnumerable<KeyValuePair<string, object>>? Headers { get; init; }
|
||||
|
||||
public IEnumerable<KeyValuePair<string, object?>>? QueryParams { get; init; }
|
||||
|
||||
public string RecipientQueryParamName { get; init; } = "from";
|
||||
|
||||
public string MessageQueryParamName { get; init; } = "text";
|
||||
}
|
||||
}
|
||||
@@ -12,8 +12,9 @@
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="AutoMapper" Version="13.0.1" />
|
||||
<PackageReference Include="DigitalData.Core.Abstractions" Version="2.0.0" />
|
||||
<PackageReference Include="DigitalData.Core.Abstractions" Version="2.2.0" />
|
||||
<PackageReference Include="DigitalData.Core.Application" Version="2.0.0" />
|
||||
<PackageReference Include="DigitalData.Core.Client" Version="1.1.0" />
|
||||
<PackageReference Include="DigitalData.Core.DTO" Version="2.0.0" />
|
||||
<PackageReference Include="DigitalData.EmailProfilerDispatcher" Version="2.0.0" />
|
||||
<PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="7.0.18" />
|
||||
|
||||
@@ -156,6 +156,9 @@
|
||||
<data name="Hello" xml:space="preserve">
|
||||
<value>Hallo</value>
|
||||
</data>
|
||||
<data name="HomePageDescription" xml:space="preserve">
|
||||
<value>Das digitale Unterschriftenportal ist eine Plattform, die entwickelt wurde, um Ihre Dokumente sicher zu unterschreiben und zu verwalten. Mit seiner benutzerfreundlichen Oberfläche können Sie Ihre Dokumente schnell hochladen, die Unterschriftsprozesse verfolgen und Ihre digitalen Unterschriftenanwendungen einfach durchführen. Dieses Portal beschleunigt Ihren Arbeitsablauf mit rechtlich gültigen Unterschriften und erhöht gleichzeitig die Sicherheit Ihrer Dokumente.</value>
|
||||
</data>
|
||||
<data name="LocakedOpen" xml:space="preserve">
|
||||
<value>Öffnen</value>
|
||||
</data>
|
||||
|
||||
@@ -156,6 +156,9 @@
|
||||
<data name="Hello" xml:space="preserve">
|
||||
<value>Hello</value>
|
||||
</data>
|
||||
<data name="HomePageDescription" xml:space="preserve">
|
||||
<value>The Digital Signature Portal is a platform developed for securely signing and managing your documents. With its user-friendly interface, you can quickly upload your documents, track the signing processes, and easily carry out your digital signature applications. This portal accelerates your workflow with legally valid signatures while enhancing the security of your documents.</value>
|
||||
</data>
|
||||
<data name="LocakedOpen" xml:space="preserve">
|
||||
<value>Open</value>
|
||||
</data>
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
using DigitalData.Core.Abstractions.Client;
|
||||
using EnvelopeGenerator.Application.Configurations.GtxMessaging;
|
||||
using Microsoft.Extensions.Options;
|
||||
|
||||
namespace EnvelopeGenerator.Application.Services
|
||||
{
|
||||
public class GtxMessagingService
|
||||
{
|
||||
private readonly IHttpClientService<SmsParams> _smsClient;
|
||||
|
||||
private readonly SmsParams _smsParams;
|
||||
|
||||
public GtxMessagingService(IHttpClientService<SmsParams> smsClient, IOptions<SmsParams> smsParamsOptions)
|
||||
{
|
||||
_smsClient = smsClient;
|
||||
_smsParams = smsParamsOptions.Value;
|
||||
}
|
||||
|
||||
public async Task SendSmsAsync(string recipient, string message)
|
||||
{
|
||||
await _smsClient.FetchAsync(queryParams: new Dictionary<string, object?>() {
|
||||
{ _smsParams.RecipientQueryParamName, recipient },
|
||||
{ _smsParams.MessageQueryParamName, message }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,7 +7,7 @@
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="DigitalData.Core.Abstractions" Version="2.0.0" />
|
||||
<PackageReference Include="DigitalData.Core.Abstractions" Version="2.1.0" />
|
||||
<PackageReference Include="DigitalData.EmailProfilerDispatcher.Abstraction" Version="1.0.0" />
|
||||
<PackageReference Include="UserManager.Domain" Version="1.0.0" />
|
||||
</ItemGroup>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="DigitalData.Core.Abstractions" Version="2.0.0" />
|
||||
<PackageReference Include="DigitalData.Core.Abstractions" Version="2.2.0" />
|
||||
<PackageReference Include="DigitalData.Core.API" Version="2.0.0" />
|
||||
<PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="7.0.15" />
|
||||
<PackageReference Include="Swashbuckle.AspNetCore" Version="6.5.0" />
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="DigitalData.Core.Abstractions" Version="2.0.0" />
|
||||
<PackageReference Include="DigitalData.Core.Abstractions" Version="2.2.0" />
|
||||
<PackageReference Include="DigitalData.Core.Infrastructure" Version="2.0.0" />
|
||||
<PackageReference Include="DigitalData.EmailProfilerDispatcher" Version="2.0.0" />
|
||||
<PackageReference Include="Microsoft.EntityFrameworkCore" Version="7.0.16" />
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
using EnvelopeGenerator.Common;
|
||||
using EnvelopeGenerator.Web.Services;
|
||||
using EnvelopeGenerator.Web.Services;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
|
||||
namespace EnvelopeGenerator.Web.Controllers
|
||||
|
||||
@@ -9,6 +9,7 @@ using EnvelopeGenerator.Extensions;
|
||||
namespace EnvelopeGenerator.Web.Controllers
|
||||
{
|
||||
[Authorize]
|
||||
[Route("api/[controller]")]
|
||||
public class DocumentController : BaseController
|
||||
{
|
||||
private readonly EnvelopeOldService envelopeService;
|
||||
@@ -48,7 +49,7 @@ namespace EnvelopeGenerator.Web.Controllers
|
||||
}
|
||||
|
||||
[Authorize]
|
||||
[HttpPost("api/document/{envelopeKey}")]
|
||||
[HttpPost("{envelopeKey}")]
|
||||
public async Task<IActionResult> Open(string envelopeKey)
|
||||
{
|
||||
try
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
using DigitalData.Core.DTO;
|
||||
using EnvelopeGenerator.Application;
|
||||
using EnvelopeGenerator.Application.Contracts;
|
||||
using EnvelopeGenerator.Common;
|
||||
using EnvelopeGenerator.Web.Services;
|
||||
@@ -23,7 +22,6 @@ namespace EnvelopeGenerator.Web.Controllers
|
||||
private readonly IReceiverService _receiverService;
|
||||
private readonly IEnvelopeReceiverService _envRcvService;
|
||||
|
||||
|
||||
public EnvelopeController(DatabaseService database,
|
||||
EnvelopeOldService envelope,
|
||||
ILogger<EnvelopeController> logger, UrlEncoder urlEncoder,
|
||||
|
||||
@@ -18,6 +18,7 @@ using static EnvelopeGenerator.Common.Constants;
|
||||
using Ganss.Xss;
|
||||
using Newtonsoft.Json;
|
||||
using EnvelopeGenerator.Application.DTOs;
|
||||
using EnvelopeGenerator.Domain.Entities;
|
||||
|
||||
namespace EnvelopeGenerator.Web.Controllers
|
||||
{
|
||||
@@ -47,6 +48,23 @@ namespace EnvelopeGenerator.Web.Controllers
|
||||
_logger = logger;
|
||||
_readOnlyService = readOnlyService;
|
||||
}
|
||||
|
||||
[HttpGet("/")]
|
||||
public IActionResult Main([FromQuery] string? culture = null)
|
||||
{
|
||||
//TODO: add a middelware or use an asp.net functionality insead of this code-smell
|
||||
culture = culture is not null ? _sanitizer.Sanitize(culture) : null;
|
||||
|
||||
if (UserLanguage is null && culture is null)
|
||||
{
|
||||
UserLanguage = _cultures.Default.Language;
|
||||
return Redirect($"{Request.Headers["Referer"]}?culture={_cultures.Default.Language}");
|
||||
}
|
||||
|
||||
ViewData["UserCulture"] = _cultures[UserLanguage];
|
||||
|
||||
return View();
|
||||
}
|
||||
|
||||
[HttpGet("EnvelopeKey/{envelopeReceiverId}")]
|
||||
public async Task<IActionResult> MainAsync([FromRoute] string envelopeReceiverId, [FromQuery] string? culture = null)
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
using EnvelopeGenerator.Application.Resources;
|
||||
using Ganss.Xss;
|
||||
using Microsoft.AspNetCore.Http;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using Microsoft.Extensions.Localization;
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
using DigitalData.Core.DTO;
|
||||
using EnvelopeGenerator.Application.Contracts;
|
||||
using EnvelopeGenerator.Application.DTOs.EnvelopeReceiverReadOnly;
|
||||
using EnvelopeGenerator.Extensions;
|
||||
using Microsoft.AspNetCore.Authorization;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using Newtonsoft.Json;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
using EnvelopeGenerator.Application.Contracts;
|
||||
using EnvelopeGenerator.Common;
|
||||
using EnvelopeGenerator.Common;
|
||||
using EnvelopeGenerator.Web.Services;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
|
||||
namespace EnvelopeGenerator.Web.Controllers.Test
|
||||
{
|
||||
[Route("api/test/[controller]")]
|
||||
public class TestViewController : BaseController
|
||||
{
|
||||
private readonly EnvelopeOldService envelopeOldService;
|
||||
@@ -16,13 +16,13 @@ namespace EnvelopeGenerator.Web.Controllers.Test
|
||||
_config = configuration;
|
||||
}
|
||||
|
||||
[HttpGet("/")]
|
||||
[HttpGet]
|
||||
public IActionResult Index()
|
||||
{
|
||||
return View("Index");
|
||||
}
|
||||
|
||||
[HttpPost("/")]
|
||||
[HttpPost]
|
||||
public IActionResult DebugEnvelopes([FromForm] string? password)
|
||||
{
|
||||
try
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
<PackageId>EnvelopeGenerator.Web</PackageId>
|
||||
<Version>2.4.0.0</Version>
|
||||
<Version>2.5.0.0</Version>
|
||||
<Authors>Digital Data GmbH</Authors>
|
||||
<Company>Digital Data GmbH</Company>
|
||||
<Product>EnvelopeGenerator.Web</Product>
|
||||
@@ -13,28 +13,16 @@
|
||||
<PackageTags>digital data envelope generator web</PackageTags>
|
||||
<Description>EnvelopeGenerator.Web is an ASP.NET MVC application developed to manage signing processes. It uses Entity Framework Core (EF Core) for database operations. The user interface for signing processes is developed with Razor View Engine (.cshtml files) and JavaScript under wwwroot, integrated with PSPDFKit. This integration allows users to view and sign documents seamlessly.</Description>
|
||||
<ApplicationIcon>Assets\icon.ico</ApplicationIcon>
|
||||
<AssemblyVersion>2.4.0.0</AssemblyVersion>
|
||||
<FileVersion>2.4.0.0</FileVersion>
|
||||
<AssemblyVersion>2.5.0.0</AssemblyVersion>
|
||||
<FileVersion>2.5.0.0</FileVersion>
|
||||
<Copyright>Copyright © 2024 Digital Data GmbH. All rights reserved.</Copyright>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Compile Remove="wwwroot\lib\leaflet\build\**" />
|
||||
<Compile Remove="wwwroot\lib\leaflet\debug\**" />
|
||||
<Compile Remove="wwwroot\lib\leaflet\spec\**" />
|
||||
<Compile Remove="wwwroot\lib\leaflet\src\**" />
|
||||
<Content Remove="wwwroot\lib\leaflet\build\**" />
|
||||
<Content Remove="wwwroot\lib\leaflet\debug\**" />
|
||||
<Content Remove="wwwroot\lib\leaflet\spec\**" />
|
||||
<Content Remove="wwwroot\lib\leaflet\src\**" />
|
||||
<EmbeddedResource Remove="wwwroot\lib\leaflet\build\**" />
|
||||
<EmbeddedResource Remove="wwwroot\lib\leaflet\debug\**" />
|
||||
<EmbeddedResource Remove="wwwroot\lib\leaflet\spec\**" />
|
||||
<EmbeddedResource Remove="wwwroot\lib\leaflet\src\**" />
|
||||
<None Remove="wwwroot\lib\leaflet\build\**" />
|
||||
<None Remove="wwwroot\lib\leaflet\debug\**" />
|
||||
<None Remove="wwwroot\lib\leaflet\spec\**" />
|
||||
<None Remove="wwwroot\lib\leaflet\src\**" />
|
||||
<Compile Remove="wwwroot\lib\typed.js\**" />
|
||||
<Content Remove="wwwroot\lib\typed.js\**" />
|
||||
<EmbeddedResource Remove="wwwroot\lib\typed.js\**" />
|
||||
<None Remove="wwwroot\lib\typed.js\**" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
@@ -53,23 +41,12 @@
|
||||
|
||||
<ItemGroup>
|
||||
<None Include="bundleconfig.json" />
|
||||
<None Include="wwwroot\lib\leaflet-locationpicker\dist\leaflet-locationpicker.min.js" />
|
||||
<None Include="wwwroot\lib\leaflet-locationpicker\dist\leaflet-locationpicker.src.js" />
|
||||
<None Include="wwwroot\lib\leaflet-locationpicker\Gruntfile.js" />
|
||||
<None Include="wwwroot\lib\leaflet-locationpicker\index.tmpl" />
|
||||
<None Include="wwwroot\lib\leaflet-locationpicker\LICENSE" />
|
||||
<None Include="wwwroot\lib\leaflet-locationpicker\README.md" />
|
||||
<None Include="wwwroot\lib\leaflet\dist\leaflet-src.js" />
|
||||
<None Include="wwwroot\lib\leaflet\dist\leaflet.js" />
|
||||
<None Include="wwwroot\lib\leaflet\LICENSE" />
|
||||
<None Include="wwwroot\lib\leaflet\PLUGIN-GUIDE.md" />
|
||||
<None Include="wwwroot\lib\leaflet\README.md" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="AutoMapper" Version="13.0.1" />
|
||||
<PackageReference Include="BuildBundlerMinifier2022" Version="2.9.9" />
|
||||
<PackageReference Include="DigitalData.Core.Abstractions" Version="2.0.0" />
|
||||
<PackageReference Include="DigitalData.Core.Abstractions" Version="2.2.0" />
|
||||
<PackageReference Include="DigitalData.Core.API" Version="2.0.0" />
|
||||
<PackageReference Include="DigitalData.EmailProfilerDispatcher" Version="2.0.0" />
|
||||
<PackageReference Include="HtmlSanitizer" Version="8.0.865" />
|
||||
|
||||
36
EnvelopeGenerator.Web/Views/Home/Main.cshtml
Normal file
36
EnvelopeGenerator.Web/Views/Home/Main.cshtml
Normal file
@@ -0,0 +1,36 @@
|
||||
@{
|
||||
var nonce = _accessor.HttpContext?.Items["csp-nonce"] as string;
|
||||
var logo = _logoOpt.Value;
|
||||
ViewData["Title"] = _localizer["Home"];
|
||||
var userCulture = ViewData["UserCulture"] as Culture;
|
||||
}
|
||||
<div class="page container py-4 px-4">
|
||||
<header class="text-center">
|
||||
<div class="header-1 alert alert-secondary" role="alert">
|
||||
<h3 class="text">@_localizer[WebKey.WelcomeToTheESignPortal]</h3>
|
||||
<img class="@logo.LockedPageClass" src="@logo.Src" />
|
||||
</div>
|
||||
<div class="icon mt-4 mb-1">
|
||||
<img src="~/img/sign_flow_min.svg">
|
||||
</div>
|
||||
<h1>signFlow</h1>
|
||||
</header>
|
||||
<section class="text-center">
|
||||
<div class="alert alert-light" role="alert">
|
||||
<p class="home-description"><span id="home-description"></span></p>
|
||||
</div>
|
||||
</section>
|
||||
@if (ViewData["ErrorMessage"] is string errMsg)
|
||||
{
|
||||
<div id="access-code-error-message" class="alert alert-danger row" role="alert">
|
||||
@_sanitizer.Sanitize(errMsg)
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<script nonce="@nonce">
|
||||
const msg = "@_localizer[WebKey.HomePageDescription]";
|
||||
var typed = new Typed('#home-description', {
|
||||
strings: [msg],
|
||||
typeSpeed: 15,
|
||||
});
|
||||
</script>
|
||||
@@ -127,25 +127,81 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="locationBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="locationBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input id="geoloc" type="text" value="" size="20" />
|
||||
<div id="fixedMapCont"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div id='app'></div>
|
||||
</div>
|
||||
@if (!isReadOnly)
|
||||
{
|
||||
<script nonce="@nonce">
|
||||
document.getElementById('readonly-send').addEventListener('click', async () => {
|
||||
const receiverMail = document.getElementById('readonly-receiver-mail');
|
||||
const dateValid = document.getElementById('readonly-date-valid');
|
||||
|
||||
const receiverMail_value = receiverMail.value;
|
||||
const dateValid_value = dateValid.value;
|
||||
|
||||
//check email
|
||||
if (!receiverMail_value || receiverMail.classList.contains('is-invalid')) {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Falsche Email",
|
||||
text: "Die E-Mail-Adresse ist ungültig. Bitte verwenden Sie das richtige Format, z. B.: user@mail.com."
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
//check the date
|
||||
const tomorrow = new Date(Date.now() + 86400000);
|
||||
if (new Date(dateValid_value) < tomorrow) {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Falsches Datum",
|
||||
text: "Die Verteilung der Umschläge sollte mindestens einen Tag dauern."
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
shareEnvelope(receiverMail_value, dateValid_value)
|
||||
.then(res => {
|
||||
if (res.ok) {
|
||||
Swal.fire({
|
||||
title: "Gesendet",
|
||||
icon: "success"
|
||||
});
|
||||
}
|
||||
else {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: `Fehler ${res.status}`,
|
||||
text: "Der Vorgang ist fehlgeschlagen. Bitte wenden Sie sich an das IT-Team."
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Unerwarteter Fehler",
|
||||
text: "Der Vorgang ist fehlgeschlagen. Bitte wenden Sie sich an das IT-Team."
|
||||
});
|
||||
})
|
||||
|
||||
receiverMail.value = '';
|
||||
dateValid.valueAsDate = new Date(new Date().setDate(new Date().getDate() + 8));
|
||||
});
|
||||
</script>
|
||||
}
|
||||
<script nonce="@nonce">
|
||||
const collapseNav = () => {
|
||||
document.addEventListener('click', function (event) {
|
||||
var navbarToggle = document.getElementById('navbarToggleExternalContent');
|
||||
var navbarButton = document.querySelector('[data-bs-target="#navbarToggleExternalContent"]');
|
||||
var isCollapsed = new bootstrap.Collapse(navbarToggle)._isTransitioning;
|
||||
|
||||
if (!navbarToggle.contains(event.target) && !navbarButton.contains(event.target) && !isCollapsed) {
|
||||
new bootstrap.Collapse(navbarToggle).hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
@if (ViewData["DocumentBytes"] is byte[] documentBytes)
|
||||
{
|
||||
var settings = new JsonSerializerSettings
|
||||
|
||||
@@ -4,6 +4,8 @@
|
||||
@{
|
||||
var nonce = _accessor.HttpContext?.Items["csp-nonce"] as string;
|
||||
var userCulture = ViewData["UserCulture"] as Culture;
|
||||
//TODO: instead of default assignment add a middleware for culture
|
||||
userCulture ??= _cultures.Default;
|
||||
var isReadOnly = false;
|
||||
if (ViewData["IsReadOnly"] is bool isReadOnly_bool)
|
||||
isReadOnly = isReadOnly_bool;
|
||||
@@ -21,12 +23,9 @@
|
||||
<link rel="stylesheet" href="~/css/card.min.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/EnvelopeGenerator.Web.styles.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/lib/flag-icons-main/css/flag-icons.min.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/css/location-picker.min.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/lib/alertifyjs/css/alertify.min.css" />
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
|
||||
<link rel="stylesheet" href="~/lib/leaflet/dist/leaflet.css" />
|
||||
<link rel="stylesheet" href="~/lib/leaflet-locationpicker/dist/leaflet-locationpicker.src.css" />
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
@@ -54,15 +53,14 @@
|
||||
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="~/lib/sweetalert2/sweetalert2.min.js"></script>
|
||||
<script src="~/lib/alertifyjs/alertify.min.js"></script>
|
||||
<script src="~/js/util.min.js" asp-append-version="true"></script>
|
||||
<script src="~/js/ui.min.js" asp-append-version="true"></script>
|
||||
<script src="~/js/annotation.js" asp-append-version="true"></script>
|
||||
<script src="~/js/network.min.js" asp-append-version="true"></script>
|
||||
<script src="~/js/app.min.js" asp-append-version="true"></script>
|
||||
<script src="~/lib/pspdfkit/dist-2024.3.2/pspdfkit.js"></script>
|
||||
<script src="~/js/util.min.js" asp-append-version="true"></script>
|
||||
<script src="~/js/api-service.min.js" asp-append-version="true"></script>
|
||||
<script src="~/lib/leaflet/dist/leaflet.js"></script>
|
||||
<script src="~/lib/leaflet-locationpicker/dist/leaflet-locationpicker.min.js"></script>
|
||||
<script src="~/lib/typed.js@2.1.0/dist/typed.umd.js"></script>
|
||||
@await RenderSectionAsync("Scripts", required: false)
|
||||
@{
|
||||
var settings = new JsonSerializerSettings
|
||||
|
||||
@@ -35,5 +35,6 @@
|
||||
public static readonly string SigningProcessTitle = nameof(SigningProcessTitle);
|
||||
public static readonly string WelcomeToTheESignPortal = nameof(WelcomeToTheESignPortal);
|
||||
public static readonly string ViewDoc = nameof(ViewDoc);
|
||||
public static readonly string HomePageDescription = nameof(HomePageDescription);
|
||||
}
|
||||
}
|
||||
@@ -125,5 +125,8 @@
|
||||
"[SIGNATURE_TYPE]": "signieren",
|
||||
"[REASON]": ""
|
||||
}
|
||||
},
|
||||
"GTXMessagingConfig": {
|
||||
"AuthKey": "ep$?A!Gs"
|
||||
}
|
||||
}
|
||||
@@ -82,11 +82,5 @@
|
||||
"inputFiles": [
|
||||
"wwwroot/css/card.css"
|
||||
]
|
||||
},
|
||||
{
|
||||
"outputFileName": "wwwroot/css/location-picker.min.css",
|
||||
"inputFiles": [
|
||||
"wwwroot/css/location-picker.css"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
#fixedMapCont {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#locationBackdrop .modal-body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
#fixedMapCont{height:100%;width:100%}#locationBackdrop .modal-body{padding:0;margin:0}
|
||||
@@ -130,6 +130,15 @@ main {
|
||||
margin: 0 0 0.5vh 0;
|
||||
}
|
||||
|
||||
.home-description {
|
||||
text-align: justify;
|
||||
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
|
||||
font-weight: 500;
|
||||
font-size: .95em;
|
||||
letter-spacing: -1px;
|
||||
word-spacing: -2px;
|
||||
}
|
||||
|
||||
.envelope-view {
|
||||
display: flex; /* d-flex */
|
||||
flex-direction: column; /* flex-column */
|
||||
|
||||
File diff suppressed because one or more lines are too long
3
EnvelopeGenerator.Web/wwwroot/img/sign_flow_min.svg
Normal file
3
EnvelopeGenerator.Web/wwwroot/img/sign_flow_min.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="98" height="95" viewBox="0 0 98 95" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M67.515 15.8772L52.455 36.8498H44.64L29.58 15.8772L36.135 11.7096H60.9525L67.5075 15.8772H67.515ZM19.485 22.2969L34.2525 42.8654L25.3425 53.7595L14.4675 25.4918L19.485 22.3044V22.2969ZM30.795 65.0651L43.7925 49.1729H53.295L66.2925 65.0651L48.54 79.4084L30.7875 65.0651H30.795ZM71.7525 53.7595L62.8425 42.8654L77.61 22.2969L82.6275 25.4843L71.7525 53.752V53.7595ZM64.4175 0.0224456V0H32.6775V0.0224456L0 20.793L0.209999 21.1222L19.53 71.3352L48.495 94.4476L48.54 94.5H48.5475H48.555L48.5925 94.4476L77.5575 71.3352L96.8775 21.1222L97.0875 20.793L64.41 0.0224456H64.4175Z" fill="#FFD631"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 700 B |
@@ -211,10 +211,6 @@ class App {
|
||||
// Show the modal
|
||||
Comp.ShareBackdrop.show();
|
||||
break;
|
||||
case 'LOCATION':
|
||||
// Show the modal
|
||||
Comp.LocationBackdrop.show();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
2
EnvelopeGenerator.Web/wwwroot/js/app.min.js
vendored
2
EnvelopeGenerator.Web/wwwroot/js/app.min.js
vendored
@@ -1,3 +1,3 @@
|
||||
const ActionType={Created:0,Saved:1,Sent:2,EmailSent:3,Delivered:4,Seen:5,Signed:6,Rejected:7};class App{constructor(n,t,i,r,u,f){this.container=f??`#${this.constructor.name.toLowerCase()}`;this.envelopeKey=n;this.Network=new Network;this.Instance=null;this.currentDocument=null;this.currentReceiver=null;this.signatureCount=0;this.envelopeReceiver=t;this.documentBytes=i;this.licenseKey=r;this.locale=u}async init(){this.currentDocument=this.envelopeReceiver.envelope.documents[0];this.currentReceiver=this.envelopeReceiver.receiver;const n=this.documentBytes;if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Dokument konnte nicht geladen werden!",icon:"error"});const t=this.documentBytes;this.Instance=await UI.loadPSPDFKit(t,this.container,this.licenseKey,this.locale);UI.addToolbarItems(this.Instance,this.handleClick.bind(this));this.Instance.addEventListener("annotations.load",this.handleAnnotationsLoad.bind(this));this.Instance.addEventListener("annotations.change",this.handleAnnotationsChange.bind(this));this.Instance.addEventListener("annotations.create",this.handleAnnotationsCreate.bind(this));this.Instance.addEventListener("annotations.willChange",()=>{Comp.ActPanel.Toggle()});try{this.signatureCount=this.currentDocument.elements.length;await Annotation.createAnnotations(this.currentDocument,this.Instance);const n=await this.Network.openDocument(this.envelopeKey);if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht geöffnet werden!",icon:"error"})}catch(i){}[...document.getElementsByClassName("btn_refresh")].forEach(n=>n.addEventListener("click",()=>this.handleClick("RESET")));[...document.getElementsByClassName("btn_complete")].forEach(n=>n.addEventListener("click",()=>this.handleClick("FINISH")));[...document.getElementsByClassName("btn_reject")].forEach(n=>n.addEventListener("click",()=>this.handleClick("REJECT")))}handleAnnotationsLoad(n){n.toJS()}handleAnnotationsChange(){}async handleAnnotationsCreate(n){const t=n.toJS()[0],i=!!t.formFieldName,r=!!t.isSignature;if(i===!1&&r===!0){const r=t.boundingBox.left-20,u=t.boundingBox.top-20,n=150,i=75,f=new Date,e=await Annotation.createAnnotationFrameBlob(this.envelopeReceiver.name,this.currentReceiver.signature,f,n,i),o=await fetch(e),s=await o.blob(),h=await this.Instance.createAttachment(s),c=Annotation.createImageAnnotation(new PSPDFKit.Geometry.Rect({left:r,top:u,width:n,height:i}),t.pageIndex,h);this.Instance.create(c)}}async handleClick(n){let t=!1;switch(n){case"RESET":t=await this.handleReset(null);Comp.SignatureProgress.SignedCount=0;t.isConfirmed&&Swal.fire({title:"Erfolg",text:"Dokument wurde zurückgesetzt",icon:"info"});break;case"FINISH":t=await this.handleFinish(null);t==!0&&(window.location.href=`/EnvelopeKey/${this.envelopeKey}/Success`);break;case"REJECT":Swal.fire({title:localized.rejection,html:`<div class="text-start fs-6 p-0 m-0">${localized.rejectionReasonQ}</div>`,icon:"question",input:"text",inputAttributes:{autocapitalize:"off"},showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.complete,cancelButtonText:localized.back,showLoaderOnConfirm:!0,preConfirm:async n=>{try{return await rejectEnvelope(n)}catch(t){Swal.showValidationMessage(`
|
||||
Request failed: ${t}
|
||||
`)}},allowOutsideClick:()=>!Swal.isLoading()}).then(n=>{if(n.isConfirmed){const t=n.value;t.ok?redirRejected():Swal.showValidationMessage(`Request failed: ${t.message}`)}});break;case"COPY_URL":const n=window.location.href.replace(/\/readonly/gi,"");navigator.clipboard.writeText(n).then(function(){bsNotify("Kopiert",{alert_type:"success",delay:4,icon_name:"check_circle"})}).catch(function(){bsNotify("Unerwarteter Fehler",{alert_type:"danger",delay:4,icon_name:"error"})});break;case"SHARE":Comp.ShareBackdrop.show();break;case"LOCATION":Comp.LocationBackdrop.show()}}async handleFinish(){const n=await this.Instance.exportInstantJSON(),t=await n.formFieldValues,r=t.filter(n=>Annotation.isFieldRequired(n)),u=r.some(n=>n.value===undefined||n.value===null||n.value==="");if(u)return Swal.fire({title:"Warnung",text:"Bitte füllen Sie alle Standortinformationen vollständig aus!",icon:"warning"}),!1;const f=new RegExp("^[a-zA-Z\\u0080-\\u024F]+(?:([\\ \\-\\']|(\\.\\ ))[a-zA-Z\\u0080-\\u024F]+)*$"),e=t.filter(n=>Annotation.isCityField(n));for(var i of e)if(!IS_MOBILE_DEVICE&&!f.test(i.value))return Swal.fire({title:"Warnung",text:`Bitte überprüfen Sie die eingegebene Ortsangabe "${i.value}" auf korrekte Formatierung. Beispiele für richtige Formate sind: München, Île-de-France, Sauðárkrókur, San Francisco, St. Catharines usw.`,icon:"warning"}),!1;const o=await this.validateAnnotations(this.signatureCount);return o===!1?(Swal.fire({title:"Warnung",text:"Es wurden nicht alle Signaturfelder ausgefüllt!",icon:"warning"}),!1):Swal.fire({title:localized.confirmation,html:`<div class="text-start fs-6 p-0 m-0">${localized.sigAgree}</div>`,icon:"question",showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.finalize,cancelButtonText:localized.back}).then(async t=>{if(t.isConfirmed){try{await this.Instance.save()}catch(i){return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1}try{const i=await n,t=await this.Network.postEnvelope(this.envelopeKey,this.currentDocument.id,i);return t.fatal?(Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1):t.error?(Swal.fire({title:"Warnung",text:"Umschlag ist nicht mehr verfügbar.",icon:"warning"}),!1):!0}catch(i){return!1}}else return!1})}async validateAnnotations(n){const t=await Annotation.getAnnotations(this.Instance),i=t.map(n=>n.toJS()).filter(n=>n.isSignature);return n>i.length?!1:!0}async handleReset(){const n=await Swal.fire({title:"Sind sie sicher?",text:"Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?",icon:"question",showCancelButton:!0});if(n.isConfirmed){const n=await Annotation.deleteAnnotations(this.Instance)}return n}}
|
||||
`)}},allowOutsideClick:()=>!Swal.isLoading()}).then(n=>{if(n.isConfirmed){const t=n.value;t.ok?redirRejected():Swal.showValidationMessage(`Request failed: ${t.message}`)}});break;case"COPY_URL":const n=window.location.href.replace(/\/readonly/gi,"");navigator.clipboard.writeText(n).then(function(){bsNotify("Kopiert",{alert_type:"success",delay:4,icon_name:"check_circle"})}).catch(function(){bsNotify("Unerwarteter Fehler",{alert_type:"danger",delay:4,icon_name:"error"})});break;case"SHARE":Comp.ShareBackdrop.show()}}async handleFinish(){const n=await this.Instance.exportInstantJSON(),t=await n.formFieldValues,r=t.filter(n=>Annotation.isFieldRequired(n)),u=r.some(n=>n.value===undefined||n.value===null||n.value==="");if(u)return Swal.fire({title:"Warnung",text:"Bitte füllen Sie alle Standortinformationen vollständig aus!",icon:"warning"}),!1;const f=new RegExp("^[a-zA-Z\\u0080-\\u024F]+(?:([\\ \\-\\']|(\\.\\ ))[a-zA-Z\\u0080-\\u024F]+)*$"),e=t.filter(n=>Annotation.isCityField(n));for(var i of e)if(!IS_MOBILE_DEVICE&&!f.test(i.value))return Swal.fire({title:"Warnung",text:`Bitte überprüfen Sie die eingegebene Ortsangabe "${i.value}" auf korrekte Formatierung. Beispiele für richtige Formate sind: München, Île-de-France, Sauðárkrókur, San Francisco, St. Catharines usw.`,icon:"warning"}),!1;const o=await this.validateAnnotations(this.signatureCount);return o===!1?(Swal.fire({title:"Warnung",text:"Es wurden nicht alle Signaturfelder ausgefüllt!",icon:"warning"}),!1):Swal.fire({title:localized.confirmation,html:`<div class="text-start fs-6 p-0 m-0">${localized.sigAgree}</div>`,icon:"question",showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.finalize,cancelButtonText:localized.back}).then(async t=>{if(t.isConfirmed){try{await this.Instance.save()}catch(i){return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1}try{const i=await n,t=await this.Network.postEnvelope(this.envelopeKey,this.currentDocument.id,i);return t.fatal?(Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1):t.error?(Swal.fire({title:"Warnung",text:"Umschlag ist nicht mehr verfügbar.",icon:"warning"}),!1):!0}catch(i){return!1}}else return!1})}async validateAnnotations(n){const t=await Annotation.getAnnotations(this.Instance),i=t.map(n=>n.toJS()).filter(n=>n.isSignature);return n>i.length?!1:!0}async handleReset(){const n=await Swal.fire({title:"Sind sie sicher?",text:"Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?",icon:"question",showCancelButton:!0});if(n.isConfirmed){const n=await Annotation.deleteAnnotations(this.Instance)}return n}}
|
||||
@@ -11,7 +11,7 @@ document.querySelectorAll('.email-input').forEach(input => {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var dropdownItems = document.querySelectorAll('.culture-dropdown-item');
|
||||
dropdownItems.forEach(function (item) {
|
||||
item.addEventListener('click', async function (event) {
|
||||
item.addEventListener('click', async function(event) {
|
||||
event.preventDefault();
|
||||
var language = this.getAttribute('data-language');
|
||||
var flagCode = this.getAttribute('data-flag');
|
||||
@@ -21,81 +21,6 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('readonly-send').addEventListener('click', async () => {
|
||||
const receiverMail = document.getElementById('readonly-receiver-mail');
|
||||
const dateValid = document.getElementById('readonly-date-valid');
|
||||
|
||||
const receiverMail_value = receiverMail.value;
|
||||
const dateValid_value = dateValid.value;
|
||||
|
||||
//check email
|
||||
if (!receiverMail_value || receiverMail.classList.contains('is-invalid')) {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Falsche Email",
|
||||
text: "Die E-Mail-Adresse ist ungültig. Bitte verwenden Sie das richtige Format, z. B.: user@mail.com."
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
//check the date
|
||||
const tomorrow = new Date(Date.now() + 86400000);
|
||||
if (new Date(dateValid_value) < tomorrow) {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Falsches Datum",
|
||||
text: "Die Verteilung der Umschläge sollte mindestens einen Tag dauern."
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
shareEnvelope(receiverMail_value, dateValid_value)
|
||||
.then(res => {
|
||||
if (res.ok) {
|
||||
Swal.fire({
|
||||
title: "Gesendet",
|
||||
icon: "success"
|
||||
});
|
||||
}
|
||||
else {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: `Fehler ${res.status}`,
|
||||
text: "Der Vorgang ist fehlgeschlagen. Bitte wenden Sie sich an das IT-Team."
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
Swal.fire({
|
||||
icon: "error",
|
||||
title: "Unerwarteter Fehler",
|
||||
text: "Der Vorgang ist fehlgeschlagen. Bitte wenden Sie sich an das IT-Team."
|
||||
});
|
||||
})
|
||||
|
||||
receiverMail.value = '';
|
||||
dateValid.valueAsDate = new Date(new Date().setDate(new Date().getDate() + 8));
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
var coords;
|
||||
try {
|
||||
coords = await getCoordinates();
|
||||
}
|
||||
catch (err) {
|
||||
coords = {
|
||||
latitude: 0,
|
||||
longitude: 0,
|
||||
};
|
||||
}
|
||||
|
||||
$('#geoloc').leafletLocationPicker({
|
||||
alwaysOpen: true,
|
||||
mapContainer: "#fixedMapCont",
|
||||
location: { latitude: coords.latitude, longitude: coords.longitude }
|
||||
});
|
||||
});
|
||||
|
||||
const bsNotify = (message, options) => alertify.notify(
|
||||
`<div class="alert ${options.alert_type ? 'alert-' + options.alert_type : ''}" role="alert"><span class="material-symbols-outlined">${options?.icon_name ?? ''}</span><p>${message}</p></div>`,
|
||||
'custom',
|
||||
@@ -167,10 +92,4 @@ class Comp {
|
||||
Comp.__ShareBackdrop ??= new bootstrap.Modal(document.getElementById('shareBackdrop'));
|
||||
return this.__ShareBackdrop;
|
||||
}
|
||||
|
||||
static __LocationBackdrop;
|
||||
static get LocationBackdrop() {
|
||||
Comp.__LocationBackdrop ??= new bootstrap.Modal(document.getElementById('locationBackdrop'));
|
||||
return this.__LocationBackdrop;
|
||||
}
|
||||
}
|
||||
@@ -1 +1 @@
|
||||
document.querySelectorAll(".email-input").forEach(n=>{n.addEventListener("input",function(){/^\S+@\S+\.\S+$/.test(this.value)?this.classList.remove("is-invalid"):this.classList.add("is-invalid")})});document.addEventListener("DOMContentLoaded",function(){var n=document.querySelectorAll(".culture-dropdown-item");n.forEach(function(n){n.addEventListener("click",async function(n){n.preventDefault();var t=this.getAttribute("data-language"),i=this.getAttribute("data-flag");document.getElementById("selectedFlag").className="fi "+i+" me-2";await setLanguage(t)})})});document.getElementById("readonly-send").addEventListener("click",async()=>{const n=document.getElementById("readonly-receiver-mail"),t=document.getElementById("readonly-date-valid"),i=n.value,r=t.value;if(!i||n.classList.contains("is-invalid")){Swal.fire({icon:"error",title:"Falsche Email",text:"Die E-Mail-Adresse ist ungültig. Bitte verwenden Sie das richtige Format, z. B.: user@mail.com."});return}const u=new Date(Date.now()+864e5);if(new Date(r)<u){Swal.fire({icon:"error",title:"Falsches Datum",text:"Die Verteilung der Umschläge sollte mindestens einen Tag dauern."});return}shareEnvelope(i,r).then(n=>{n.ok?Swal.fire({title:"Gesendet",icon:"success"}):Swal.fire({icon:"error",title:`Fehler ${n.status}`,text:"Der Vorgang ist fehlgeschlagen. Bitte wenden Sie sich an das IT-Team."})}).catch(()=>{Swal.fire({icon:"error",title:"Unerwarteter Fehler",text:"Der Vorgang ist fehlgeschlagen. Bitte wenden Sie sich an das IT-Team."})});n.value="";t.valueAsDate=new Date((new Date).setDate((new Date).getDate()+8))});document.addEventListener("DOMContentLoaded",async()=>{var n;try{n=await getCoordinates()}catch(t){n={latitude:0,longitude:0}}$("#geoloc").leafletLocationPicker({alwaysOpen:!0,mapContainer:"#fixedMapCont",location:{latitude:n.latitude,longitude:n.longitude}})});const bsNotify=(n,t)=>alertify.notify(`<div class="alert ${t.alert_type?"alert-"+t.alert_type:""}" role="alert"><span class="material-symbols-outlined">${t?.icon_name??""}</span><p>${n}</p></div>`,"custom",t?.delay??5);class Comp{static ActPanel=class{static __Root;static get Root(){Comp.ActPanel.__Root??=document.getElementById("flex-action-panel");return Comp.ActPanel.__Root}static get Elements(){return[...Comp.ActPanel.Root.children]}static get IsHided(){return Comp.ActPanel.Root.style.display=="none"}static set Display(n){Comp.ActPanel.Root.style.display=n;Comp.ActPanel.Elements.forEach(t=>t.style.display=n)}static Toggle(){Comp.ActPanel.Display=Comp.ActPanel.IsHided?"":"none"}};static SignatureProgress=class{static __SignatureCount;static get SignatureCount(){this.__SignatureCount=parseInt(document.getElementById("signature-count").innerText);return this.__SignatureCount}static __SignedCountSpan;static get SignedCountSpan(){this.__SignedCountSpan??=document.getElementById("signed-count");return Comp.SignatureProgress.__SignedCountSpan}static __signedCount=0;static get SignedCount(){return this.__signedCount}static set SignedCount(n){this.__signedCount=n;const t=(n/this.SignatureCount)*100;this.SignedCountBar.style.setProperty("--progress-width",t+"%");this.SignedCountSpan.innerText=n.toString()}static __SignedCountBar;static get SignedCountBar(){this.__SignedCountBar??=document.getElementById("signed-count-bar");return this.__SignedCountBar}};static __ShareBackdrop;static get ShareBackdrop(){return Comp.__ShareBackdrop??=new bootstrap.Modal(document.getElementById("shareBackdrop")),this.__ShareBackdrop}static __LocationBackdrop;static get LocationBackdrop(){return Comp.__LocationBackdrop??=new bootstrap.Modal(document.getElementById("locationBackdrop")),this.__LocationBackdrop}}
|
||||
document.querySelectorAll(".email-input").forEach(n=>{n.addEventListener("input",function(){/^\S+@\S+\.\S+$/.test(this.value)?this.classList.remove("is-invalid"):this.classList.add("is-invalid")})});document.addEventListener("DOMContentLoaded",function(){var n=document.querySelectorAll(".culture-dropdown-item");n.forEach(function(n){n.addEventListener("click",async function(n){n.preventDefault();var t=this.getAttribute("data-language"),i=this.getAttribute("data-flag");document.getElementById("selectedFlag").className="fi "+i+" me-2";await setLanguage(t)})})});const bsNotify=(n,t)=>alertify.notify(`<div class="alert ${t.alert_type?"alert-"+t.alert_type:""}" role="alert"><span class="material-symbols-outlined">${t?.icon_name??""}</span><p>${n}</p></div>`,"custom",t?.delay??5);class Comp{static ActPanel=class{static __Root;static get Root(){Comp.ActPanel.__Root??=document.getElementById("flex-action-panel");return Comp.ActPanel.__Root}static get Elements(){return[...Comp.ActPanel.Root.children]}static get IsHided(){return Comp.ActPanel.Root.style.display=="none"}static set Display(n){Comp.ActPanel.Root.style.display=n;Comp.ActPanel.Elements.forEach(t=>t.style.display=n)}static Toggle(){Comp.ActPanel.Display=Comp.ActPanel.IsHided?"":"none"}};static SignatureProgress=class{static __SignatureCount;static get SignatureCount(){this.__SignatureCount=parseInt(document.getElementById("signature-count").innerText);return this.__SignatureCount}static __SignedCountSpan;static get SignedCountSpan(){this.__SignedCountSpan??=document.getElementById("signed-count");return Comp.SignatureProgress.__SignedCountSpan}static __signedCount=0;static get SignedCount(){return this.__signedCount}static set SignedCount(n){this.__signedCount=n;const t=(n/this.SignatureCount)*100;this.SignedCountBar.style.setProperty("--progress-width",t+"%");this.SignedCountSpan.innerText=n.toString()}static __SignedCountBar;static get SignedCountBar(){this.__SignedCountBar??=document.getElementById("signed-count-bar");return this.__SignedCountBar}};static __ShareBackdrop;static get ShareBackdrop(){return Comp.__ShareBackdrop??=new bootstrap.Modal(document.getElementById("shareBackdrop")),this.__ShareBackdrop}}
|
||||
@@ -89,19 +89,6 @@
|
||||
icon: `<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 13V17.5C20 20.5577 16 20.5 12 20.5C8 20.5 4 20.5577 4 17.5V13M12 3L12 15M12 3L16 7M12 3L8 7" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>`,
|
||||
},
|
||||
{
|
||||
type: 'custom',
|
||||
id: 'button-location',
|
||||
className: 'button-location',
|
||||
title: 'Location',
|
||||
onPress() {
|
||||
callback('LOCATION')
|
||||
},
|
||||
icon: `<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>`,
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
5
EnvelopeGenerator.Web/wwwroot/js/ui.min.js
vendored
5
EnvelopeGenerator.Web/wwwroot/js/ui.min.js
vendored
@@ -1,10 +1,7 @@
|
||||
class UI{static allowedToolbarItems=["sidebar-thumbnails","sidebar-document-ouline","sidebar-bookmarks","pager","pan","zoom-out","zoom-in","zoom-mode","spacer","search","export-pdf"];static Instance
|
||||
static loadPSPDFKit(n,t,i,r){return UI.Instance=PSPDFKit.load({inlineWorkers:!1,locale:r,licenseKey:i,styleSheets:["/css/site.css"],container:t,document:n,annotationPresets:UI.getPresets(),electronicSignatures:{creationModes:["DRAW","TYPE","IMAGE"]},initialViewState:new PSPDFKit.ViewState({sidebarMode:PSPDFKit.SidebarMode.THUMBNAILS}),isEditableAnnotation:function(n){return n.isSignature||n.description=="FRAME"?!1:!0},customRenderers:{Annotation:UI.annotationRenderer}}),UI.Instance}static addToolbarItems(n,t){var i=n.toolbarItems.filter(n=>UI.allowedToolbarItems.includes(n.type));i=IS_READONLY?i.concat(UI.getReadOnlyItems(t)):i.concat(UI.getWritableItems(t));IS_DESKTOP_SIZE||IS_READONLY||(i=i.concat(UI.getMobileWritableItems(t)));n.setToolbarItems(i)}static annotationRenderer(){return null}static createElementFromHTML(n){const t=document.createElement("div");return t.innerHTML=n.trim(),t.firstChild}static getWritableItems=function(n){return[{type:"custom",id:"button-share",className:"button-share",title:"Teilen",onPress(){n("SHARE")},icon:`<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 13V17.5C20 20.5577 16 20.5 12 20.5C8 20.5 4 20.5577 4 17.5V13M12 3L12 15M12 3L16 7M12 3L8 7" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>`},{type:"custom",id:"button-location",className:"button-location",title:"Location",onPress(){n("LOCATION")},icon:`<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>`}]};static getReadOnlyItems=function(n){return[{type:"custom",id:"button-copy-url",className:"button-copy-url",title:"Teilen",onPress(){n("COPY_URL")},icon:`<svg viewBox="4 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
</svg>`}]};static getReadOnlyItems=function(n){return[{type:"custom",id:"button-copy-url",className:"button-copy-url",title:"Teilen",onPress(){n("COPY_URL")},icon:`<svg viewBox="4 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 3H9C6.79086 3 5 4.79086 5 7V15" stroke="#222222"/>
|
||||
<path d="M8.5 11.5C8.5 10.3156 8.50074 9.46912 8.57435 8.81625C8.64681 8.17346 8.78457 7.78051 9.01662 7.4781C9.14962 7.30477 9.30477 7.14962 9.4781 7.01662C9.78051 6.78457 10.1735 6.64681 10.8163 6.57435C11.4691 6.50074 12.3156 6.5 13.5 6.5C14.6844 6.5 15.5309 6.50074 16.1837 6.57435C16.8265 6.64681 17.2195 6.78457 17.5219 7.01662C17.6952 7.14962 17.8504 7.30477 17.9834 7.4781C18.2154 7.78051 18.3532 8.17346 18.4257 8.81625C18.4993 9.46912 18.5 10.3156 18.5 11.5V15.5C18.5 16.6844 18.4993 17.5309 18.4257 18.1837C18.3532 18.8265 18.2154 19.2195 17.9834 19.5219C17.8504 19.6952 17.6952 19.8504 17.5219 19.9834C17.2195 20.2154 16.8265 20.3532 16.1837 20.4257C15.5309 20.4993 14.6844 20.5 13.5 20.5C12.3156 20.5 11.4691 20.4993 10.8163 20.4257C10.1735 20.3532 9.78051 20.2154 9.4781 19.9834C9.30477 19.8504 9.14962 19.6952 9.01662 19.5219C8.78457 19.2195 8.64681 18.8265 8.57435 18.1837C8.50074 17.5309 8.5 16.6844 8.5 15.5V11.5Z" stroke="#222222"/>
|
||||
</svg>`}]};static getMobileWritableItems=function(n){return[{type:"custom",id:"button-finish",className:"button-finish",onPress(){n("FINISH")},icon:`<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-4 -4 26 26">
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = function(grunt) {
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-clean');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-markdown');
|
||||
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
meta: {
|
||||
banner:
|
||||
'/* \n'+
|
||||
' * Leaflet Location Picker v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %> \n'+
|
||||
' * \n'+
|
||||
' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> \n'+
|
||||
' * <%= pkg.author.email %> \n'+
|
||||
' * <%= pkg.author.url %> \n'+
|
||||
' * \n'+
|
||||
' * Licensed under the <%= pkg.license %> license. \n'+
|
||||
' * \n'+
|
||||
' * Demo: \n'+
|
||||
' * <%= pkg.homepage %> \n'+
|
||||
' * \n'+
|
||||
' * Source: \n'+
|
||||
' * <%= pkg.repository.url %> \n'+
|
||||
' * \n'+
|
||||
' */\n',
|
||||
features: [
|
||||
"Custom location format, lat,lon separator and precision",
|
||||
"Pick Location Latidute,Longitude clicking on map",
|
||||
"Bind multiple events or single picker callback",
|
||||
"Load picker map from preselected location",
|
||||
"Bind callback on location picked",
|
||||
"Enable disable location marker",
|
||||
"Custom map baselayer"
|
||||
],
|
||||
sources: [
|
||||
{name: "Github.com", url: 'https://github.com/stefanocudini/<%= pkg.name %>' },
|
||||
{name: "Node Packaged Module", url: 'https://npmjs.org/package/<%= pkg.name %>' },
|
||||
//{name: "Bitbuket", url: 'https://bitbucket.org/zakis_/<%= pkg.name %>' },
|
||||
//{name: "Atmosphere", url: 'http://atmospherejs.com/package/<%= pkg.name %>' }
|
||||
]
|
||||
},
|
||||
clean: {
|
||||
homepage: {
|
||||
src: ['index.html']
|
||||
},
|
||||
dist: {
|
||||
src: ['dist/*']
|
||||
}
|
||||
},
|
||||
jshint: {
|
||||
options: {
|
||||
globals: {
|
||||
console: true,
|
||||
module: true
|
||||
},
|
||||
"-W099": true, //ignora tabs e space warning
|
||||
"-W033": true,
|
||||
"-W044": true //ignore regexp
|
||||
},
|
||||
files: "src/<%= pkg.name %>.js"
|
||||
},
|
||||
concat: {
|
||||
//TODO cut out SearchMarker
|
||||
options: {
|
||||
banner: '<%= meta.banner %>'
|
||||
},
|
||||
dist: {
|
||||
files: {
|
||||
'dist/<%= pkg.name %>.src.js': ['src/<%= pkg.name %>.js'],
|
||||
'dist/<%= pkg.name %>.src.css': ['src/<%= pkg.name %>.css']
|
||||
}
|
||||
}
|
||||
},
|
||||
uglify: {
|
||||
options: {
|
||||
banner: '<%= meta.banner %>'
|
||||
},
|
||||
dist: {
|
||||
files: {
|
||||
'dist/<%= pkg.name %>.min.js': ['dist/<%= pkg.name %>.src.js']
|
||||
}
|
||||
}
|
||||
},
|
||||
markdown: {
|
||||
readme: {
|
||||
files: {
|
||||
'index.html': ['README.md']
|
||||
},
|
||||
options: {
|
||||
template: 'index.tmpl',
|
||||
templateContext: function() {
|
||||
var cfg = grunt.config();
|
||||
|
||||
cfg.title = cfg.pkg.name.replace(/-/g,' ');
|
||||
|
||||
cfg.ribbonurl = 'http://ghbtns.com/github-btn.html?user=stefanocudini&repo='+cfg.pkg.name+'&type=watch&count=true';
|
||||
|
||||
cfg.examples = grunt.file.expand('examples/*.html');
|
||||
|
||||
cfg.features = cfg.meta.features;
|
||||
cfg.sources = cfg.meta.sources;
|
||||
cfg.giturl = cfg.meta.sources[0].url;
|
||||
|
||||
cfg.image = grunt.file.expand('images/'+cfg.pkg.name+'.png');
|
||||
|
||||
return cfg;
|
||||
},
|
||||
markdownOptions: {
|
||||
gfm: true,
|
||||
highlight: 'manual',
|
||||
codeLines: {
|
||||
before: '<div>',
|
||||
after: '</div>'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dist: {
|
||||
options: { livereload: true },
|
||||
files: ['src/*'],
|
||||
tasks: ['clean','concat','jshint']
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.registerTask('default', [
|
||||
'clean',
|
||||
'concat',
|
||||
'jshint',
|
||||
'uglify',
|
||||
'markdown'
|
||||
]);
|
||||
|
||||
};
|
||||
@@ -1,68 +0,0 @@
|
||||
Leaflet Location Picker
|
||||
============
|
||||
|
||||
[](http://badge.fury.io/js/leaflet-locationpicker)
|
||||
|
||||
Simple location picker with Leaflet map
|
||||
|
||||
# Usage:
|
||||
|
||||
```html
|
||||
|
||||
<label>Insert a Geo Location
|
||||
<input id="geoloc" type="text" value="" />
|
||||
</label>
|
||||
|
||||
```
|
||||
|
||||
```javascript
|
||||
|
||||
$('#geoloc').leafletLocationPicker();
|
||||
|
||||
```
|
||||
|
||||
# Examples:
|
||||
|
||||
* [Simple](examples/simple.html)
|
||||
|
||||
|
||||
|
||||
|
||||
# Options
|
||||
| Option | Default | Description |
|
||||
| --------------- | ---------------- | ----------------------------------------- |
|
||||
|className | baseClassName |css classname applied to widget |
|
||||
|location | optsMap.center | initial map center |
|
||||
|locationFormat | '{lat}{sep}{lng}'| returne format of location value |
|
||||
|locationMarker | true | render manker on map |
|
||||
|locationDigits | 6 | coordinates precision |
|
||||
|locationSep | ',' | coordinates separator|
|
||||
|position | 'topright' | position relative to input|
|
||||
|layer | 'OSM' | base layer on map|
|
||||
|height | 140 | height of map |
|
||||
|width | 200 | with f map|
|
||||
|event | 'click' | event to fire location pick|
|
||||
|cursorSize | '30px' | size of cross cursor |
|
||||
|map | optsMap | custom [leflet map options](https://leafletjs.com/reference-1.6.0.html#map-option) |
|
||||
|onChangeLocation | $.noop | callback retuned location after pick from map|
|
||||
|alwaysOpen | false | always open Maps (without close button) |
|
||||
|mapContainer | "" ||
|
||||
|
||||
# Install
|
||||
```
|
||||
npm install --save leaflet-locationpicker
|
||||
|
||||
```
|
||||
|
||||
# Build
|
||||
|
||||
Therefore the deployment require **npm** installed in your system.
|
||||
```bash
|
||||
npm install
|
||||
grunt
|
||||
```
|
||||
|
||||
# Source
|
||||
|
||||
* [Github](https://github.com/stefanocudini/leaflet-locationpicker)
|
||||
* [NPM](https://npmjs.org/package/leaflet-locationpicker)
|
||||
@@ -1,17 +0,0 @@
|
||||
/*
|
||||
* Leaflet Location Picker v0.3.4 - 2022-11-18
|
||||
*
|
||||
* Copyright 2022 Stefano Cudini
|
||||
* stefano.cudini@gmail.com
|
||||
* https://opengeo.tech/
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
*
|
||||
* Demo:
|
||||
* https://opengeo.tech/maps/leaflet-locationpicker/
|
||||
*
|
||||
* Source:
|
||||
* git@github.com:stefanocudini/leaflet-locationpicker.git
|
||||
*
|
||||
*/
|
||||
!function(a){if("function"==typeof define&&define.amd)define(["jquery","leaflet"],a);else if("undefined"!=typeof module)module.exports=a(require("jquery","leaflet"));else{if(void 0===window.jQuery)throw"jQuery must be loaded first";if(void 0===window.L)throw"Leaflet must be loaded first";a(window.jQuery,window.L)}}(function(a,b){var c=a;c.fn.leafletLocationPicker=function(a,d){function e(c){return c?b.latLng(parseFloat(c.lat).toFixed(a.locationDigits),parseFloat(c.lng).toFixed(a.locationDigits)):c}function f(d){var f=d;switch(c.type(d)){case"string":var g=d.split(a.locationSep);f=g[0]&&g[1]?b.latLng(g):null;break;case"array":f=b.latLng(d);break;case"object":var h,i;d.hasOwnProperty("lat")?h=d.lat:d.hasOwnProperty("latitude")&&(h=d.latitude),d.hasOwnProperty("lng")?i=d.lng:d.hasOwnProperty("lon")?i=d.lon:d.hasOwnProperty("longitude")&&(i=d.longitude),f=b.latLng(parseFloat(h),parseFloat(i));break;default:f=d}return e(f)}function g(d){if(d.divMap=document.createElement("div"),d.$map=c(document.createElement("div")).addClass(a.className+"-map").height(a.height).width(a.width).append(d.divMap),a.readOnly&&d.$map.addClass("read-only"),a.mapContainer&&c(a.mapContainer)?d.$map.appendTo(a.mapContainer).addClass("map-select"):d.$map.appendTo("body"),d.location&&(a.map.center=d.location),"string"==typeof a.layer&&k[a.layer]?a.map.layers=b.tileLayer(k[a.layer]):a.layer instanceof b.TileLayer||a.layer instanceof b.GridLayer||a.layer instanceof b.LayerGroup?a.map.layers=a.layer:a.map.layers=b.tileLayer(k.OSM),d.map=b.map(d.divMap,a.map).addControl(b.control.zoom({position:"bottomright"})).on(a.event,function(b){a.readOnly||d.setLocation(b.latlng)}),a.activeOnMove&&d.map.on("move",function(a){d.setLocation(a.target.getCenter())}),!0!==a.alwaysOpen){var e=b.control({position:"topright"});e.onAdd=function(c){var e=b.DomUtil.create("div","leaflet-bar"),f=b.DomUtil.create("a","leaflet-control "+a.className+"-close");return f.innerHTML="×",e.appendChild(f),b.DomEvent.on(f,"click",b.DomEvent.stop,d).on(f,"click",d.closeMap,d),e},e.addTo(d.map)}return a.locationMarker&&(d.marker=h(d.location).addTo(d.map)),d.$map}function h(c){return b.marker(f(c)||b.latLng(0,0),{icon:b.divIcon({className:a.className+"-marker",iconAnchor:b.point(0,0),html:"<div"+("30px"!==a.cursorSize?'style="width: '+a.cursorSize+"; height: "+a.cursorSize+';"':"")+'><div class="corner1"></div><div class="corner2"></div><div class="corner3"></div><div class="corner4"></div></div>'})})}var i=window.location.protocol,j="leaflet-locpicker",k={OSM:i+"//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"},l={zoom:0,center:b.latLng([40,0]),zoomControl:!1,attributionControl:!1};c.isPlainObject(a)&&c.isPlainObject(a.map)&&(l=c.extend(l,a.map));var m={alwaysOpen:!1,className:j,location:l.center,locationFormat:"{lat}{sep}{lng}",locationMarker:!0,locationDigits:6,locationSep:",",position:"topright",layer:"OSM",height:140,width:200,event:"click",cursorSize:"30px",readOnly:!1,map:l,onChangeLocation:c.noop,mapContainer:""};return a=c.isPlainObject(a)?c.extend(m,a):c.isFunction(a)?c.extend(m,{onChangeLocation:a}):m,c.isFunction(d)&&(a=c.extend(m,{onChangeLocation:d})),c(this).each(function(d,e){var h=this;h.$input=c(this),h.options=a,h.setReadOnly=function(b){a.readOnly=b,h.$map.toggleClass("read-only",b)},h.locationOri=h.$input.val(),h.onChangeLocation=function(){var b={latlng:h.location,location:h.getLocation()};h.$input.trigger(c.extend(b,{type:"changeLocation"})),a.onChangeLocation.call(h,b)},h.setLocation=function(a,b){a=a||m.location,h.location=f(a),h.marker&&h.marker.setLatLng(a),b||(h.$input.data("location",h.location),h.$input.val(h.getLocation()),h.onChangeLocation())},h.getLocation=function(){return h.location?b.Util.template(a.locationFormat,{lat:h.location.lat,lng:h.location.lng,sep:a.locationSep}):h.location},h.updatePosition=function(){switch(a.position){case"bottomleft":h.$map.css({top:h.$input.offset().top+h.$input.height()+6,left:h.$input.offset().left});break;case"topright":h.$map.css({top:h.$input.offset().top,left:h.$input.offset().left+h.$input.width()+5})}},h.openMap=function(){h.updatePosition(),h.$map.show(),h.map.invalidateSize(),h.$input.trigger("show")},h.closeMap=function(){h.$map.hide(),h.$input.trigger("hide")},h.setLocation(h.locationOri,!0),h.$map=g(h),h.$input.addClass(a.className).on("focus."+a.className,function(a){a.preventDefault(),h.openMap()}).on("blur."+a.className,function(a){a.preventDefault();for(var b=a.relatedTarget,c=!0;b;){if(b._leaflet){c=!1;break}b=b.parentElement}c&&setTimeout(function(){h.closeMap()},100)}),c(window).on("resize",function(){h.$map.is(":visible")&&h.updatePosition()}),a.alwaysOpen&&!0===a.alwaysOpen&&h.openMap()}),this}});
|
||||
@@ -1,128 +0,0 @@
|
||||
/*
|
||||
* Leaflet Location Picker v0.3.4 - 2022-11-18
|
||||
*
|
||||
* Copyright 2022 Stefano Cudini
|
||||
* stefano.cudini@gmail.com
|
||||
* https://opengeo.tech/
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
*
|
||||
* Demo:
|
||||
* https://opengeo.tech/maps/leaflet-locationpicker/
|
||||
*
|
||||
* Source:
|
||||
* git@github.com:stefanocudini/leaflet-locationpicker.git
|
||||
*
|
||||
*/
|
||||
.leaflet-locpicker-active {
|
||||
box-shadow: 0 0 5px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.leaflet-locpicker-map {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: rgba(255,255,255,1);
|
||||
box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.leaflet-locpicker-map:not(.read-only) .leaflet-container,
|
||||
.leaflet-locpicker-map:not(.read-only) .leaflet-locpicker-marker {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.leaflet-locpicker-map.read-only .leaflet-locpicker-marker {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.leaflet-locpicker-close {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font: 700 22px 'Lucida Console', Monaco, monospace;
|
||||
text-indent: 1px;
|
||||
}
|
||||
|
||||
.leaflet-locpicker-map .leaflet-container {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
border: 1px solid rgba(100,100,100,0.2)
|
||||
}
|
||||
|
||||
.leaflet-locpicker-map .leaflet-control {
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.leaflet-locpicker-map .leaflet-bar {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.leaflet-locpicker-map .leaflet-bar a:first-child {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.leaflet-locpicker-map .leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.map-select {
|
||||
display: block !important;
|
||||
position: relative;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
width: 100% !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* MARKER */
|
||||
.leaflet-locpicker-map .leaflet-locpicker-marker > div {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 30px; /* defaults */
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.leaflet-locpicker-map .leaflet-locpicker-marker > div > div {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
outline: 1px solid #fff;
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.leaflet-locpicker-map .leaflet-locpicker-marker > div > .corner1 {
|
||||
width: 50%;
|
||||
height: 0;
|
||||
left: -70%;
|
||||
border-top: 2px solid black;
|
||||
}
|
||||
|
||||
.leaflet-locpicker-map .leaflet-locpicker-marker > div > .corner2 {
|
||||
width: 50%;
|
||||
height: 0;
|
||||
left: 30%;
|
||||
border-top: 2px solid black;
|
||||
}
|
||||
|
||||
.leaflet-locpicker-map .leaflet-locpicker-marker > div > .corner3 {
|
||||
width: 0;
|
||||
height: 50%;
|
||||
top: 30%;
|
||||
border-left: 2px solid black;
|
||||
}
|
||||
|
||||
.leaflet-locpicker-map .leaflet-locpicker-marker > div > .corner4 {
|
||||
width: 0;
|
||||
height: 50%;
|
||||
top: -70%;
|
||||
border-left: 2px solid black;
|
||||
}
|
||||
@@ -1,339 +0,0 @@
|
||||
/*
|
||||
* Leaflet Location Picker v0.3.4 - 2022-11-18
|
||||
*
|
||||
* Copyright 2022 Stefano Cudini
|
||||
* stefano.cudini@gmail.com
|
||||
* https://opengeo.tech/
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
*
|
||||
* Demo:
|
||||
* https://opengeo.tech/maps/leaflet-locationpicker/
|
||||
*
|
||||
* Source:
|
||||
* git@github.com:stefanocudini/leaflet-locationpicker.git
|
||||
*
|
||||
*/
|
||||
|
||||
(function (factory) {
|
||||
if(typeof define === 'function' && define.amd) {
|
||||
//AMD
|
||||
define(['jquery','leaflet'], factory);
|
||||
} else if(typeof module !== 'undefined') {
|
||||
// Node/CommonJS
|
||||
module.exports = factory(require('jquery','leaflet'));
|
||||
} else {
|
||||
// Browser globals
|
||||
if(typeof window.jQuery === 'undefined')
|
||||
throw 'jQuery must be loaded first';
|
||||
if(typeof window.L === 'undefined')
|
||||
throw 'Leaflet must be loaded first';
|
||||
factory(window.jQuery, window.L);
|
||||
}
|
||||
})(function(jQuery, L) {
|
||||
|
||||
var $ = jQuery;
|
||||
|
||||
$.fn.leafletLocationPicker = function(opts, onChangeLocation) {
|
||||
|
||||
var http = window.location.protocol;
|
||||
|
||||
var baseClassName = 'leaflet-locpicker',
|
||||
baseLayers = {
|
||||
'OSM': http + '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
// 'SAT': http + '//otile1.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png' // AK 2021-04-22: invalid URL!!
|
||||
//TODO add more free base layers
|
||||
};
|
||||
|
||||
var optsMap = {
|
||||
zoom: 0,
|
||||
center: L.latLng([40,0]),
|
||||
zoomControl: false,
|
||||
attributionControl: false
|
||||
};
|
||||
|
||||
if($.isPlainObject(opts) && $.isPlainObject(opts.map))
|
||||
optsMap = $.extend(optsMap, opts.map);
|
||||
|
||||
var defaults = {
|
||||
alwaysOpen: false,
|
||||
className: baseClassName,
|
||||
location: optsMap.center,
|
||||
locationFormat: '{lat}{sep}{lng}',
|
||||
locationMarker: true,
|
||||
locationDigits: 6,
|
||||
locationSep: ',',
|
||||
position: 'topright',
|
||||
layer: 'OSM',
|
||||
height: 140,
|
||||
width: 200,
|
||||
event: 'click',
|
||||
cursorSize: '30px',
|
||||
readOnly: false,
|
||||
map: optsMap,
|
||||
onChangeLocation: $.noop,
|
||||
mapContainer: ""
|
||||
};
|
||||
|
||||
if($.isPlainObject(opts))
|
||||
opts = $.extend(defaults, opts);
|
||||
|
||||
else if($.isFunction(opts))
|
||||
opts = $.extend(defaults, {
|
||||
onChangeLocation: opts
|
||||
});
|
||||
else
|
||||
opts = defaults;
|
||||
|
||||
if($.isFunction(onChangeLocation))
|
||||
opts = $.extend(defaults, {
|
||||
onChangeLocation: onChangeLocation
|
||||
});
|
||||
|
||||
function roundLocation(loc) {
|
||||
return loc ? L.latLng(
|
||||
parseFloat(loc.lat).toFixed(opts.locationDigits),
|
||||
parseFloat(loc.lng).toFixed(opts.locationDigits)
|
||||
) : loc;
|
||||
}
|
||||
|
||||
function parseLocation(loc) {
|
||||
var retLoc = loc;
|
||||
|
||||
switch($.type(loc)) {
|
||||
case 'string':
|
||||
var ll = loc.split(opts.locationSep);
|
||||
if(ll[0] && ll[1])
|
||||
retLoc = L.latLng(ll);
|
||||
else
|
||||
retLoc = null;
|
||||
break;
|
||||
case 'array':
|
||||
retLoc = L.latLng(loc);
|
||||
break;
|
||||
case 'object':
|
||||
var lat, lng;
|
||||
if(loc.hasOwnProperty('lat'))
|
||||
lat = loc.lat;
|
||||
else if(loc.hasOwnProperty('latitude'))
|
||||
lat = loc.latitude;
|
||||
|
||||
if(loc.hasOwnProperty('lng'))
|
||||
lng = loc.lng;
|
||||
else if(loc.hasOwnProperty('lon'))
|
||||
lng = loc.lon;
|
||||
else if(loc.hasOwnProperty('longitude'))
|
||||
lng = loc.longitude;
|
||||
|
||||
retLoc = L.latLng(parseFloat(lat),parseFloat(lng));
|
||||
break;
|
||||
default:
|
||||
retLoc = loc;
|
||||
}
|
||||
return roundLocation( retLoc );
|
||||
}
|
||||
|
||||
function buildMap(self) {
|
||||
|
||||
self.divMap = document.createElement('div');
|
||||
self.$map = $(document.createElement('div'))
|
||||
.addClass(opts.className + '-map')
|
||||
.height(opts.height)
|
||||
.width(opts.width)
|
||||
.append(self.divMap);
|
||||
|
||||
if (opts.readOnly)
|
||||
self.$map.addClass("read-only");
|
||||
|
||||
//adds either as global div or specified container
|
||||
//if added to specified container add some style class
|
||||
if(opts.mapContainer && $(opts.mapContainer))
|
||||
self.$map.appendTo(opts.mapContainer)
|
||||
.addClass('map-select');
|
||||
else
|
||||
self.$map.appendTo('body');
|
||||
|
||||
if(self.location)
|
||||
opts.map.center = self.location;
|
||||
|
||||
if(typeof opts.layer === 'string' && baseLayers[opts.layer]) {
|
||||
opts.map.layers = L.tileLayer(baseLayers[opts.layer]);
|
||||
|
||||
}else if (opts.layer instanceof L.TileLayer ||
|
||||
opts.layer instanceof L.GridLayer ||
|
||||
opts.layer instanceof L.LayerGroup) {
|
||||
opts.map.layers = opts.layer;
|
||||
|
||||
}else {
|
||||
opts.map.layers = L.tileLayer(baseLayers.OSM);
|
||||
}
|
||||
|
||||
//leaflet map
|
||||
self.map = L.map(self.divMap, opts.map)
|
||||
.addControl( L.control.zoom({position: 'bottomright'}) )
|
||||
.on(opts.event, function(e) {
|
||||
if (!opts.readOnly)
|
||||
self.setLocation(e.latlng);
|
||||
});
|
||||
|
||||
if(opts.activeOnMove) {
|
||||
self.map.on('move', function(e) {
|
||||
self.setLocation(e.target.getCenter());
|
||||
});
|
||||
}
|
||||
|
||||
//only adds closeBtn if not alwaysOpen
|
||||
if(opts.alwaysOpen!==true){
|
||||
var xmap = L.control({position: 'topright'});
|
||||
xmap.onAdd = function(map) {
|
||||
var btn_holder = L.DomUtil.create('div', 'leaflet-bar');
|
||||
var btn = L.DomUtil.create('a','leaflet-control '+opts.className+'-close');
|
||||
btn.innerHTML = '×';
|
||||
btn_holder.appendChild(btn);
|
||||
L.DomEvent
|
||||
.on(btn, 'click', L.DomEvent.stop, self)
|
||||
.on(btn, 'click', self.closeMap, self);
|
||||
return btn_holder;
|
||||
};
|
||||
xmap.addTo(self.map);
|
||||
}
|
||||
|
||||
if(opts.locationMarker)
|
||||
self.marker = buildMarker(self.location).addTo(self.map);
|
||||
|
||||
return self.$map;
|
||||
}
|
||||
|
||||
function buildMarker(loc) {
|
||||
return L.marker(parseLocation(loc) || L.latLng(0,0), {
|
||||
icon: L.divIcon({
|
||||
className: opts.className+'-marker',
|
||||
iconAnchor: L.point(0, 0),
|
||||
|
||||
// TODO: get rid of inline CSS completely, in order to make it compliant with Content-Security-Policy that doesn't wallows 'unsafe-inline' CSS.
|
||||
// AK: These additional styles can be set up with JavaScript, after creation of the marker icon element.
|
||||
html: '<div' + ("30px" !== opts.cursorSize ? 'style="width: ' + opts.cursorSize + '; height: ' + opts.cursorSize + ';"' : '') + '>'+
|
||||
'<div class="corner1"></div>'+
|
||||
'<div class="corner2"></div>'+
|
||||
'<div class="corner3"></div>'+
|
||||
'<div class="corner4"></div>'+
|
||||
'</div>'
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
$(this).each(function(index, input) {
|
||||
var self = this;
|
||||
|
||||
self.$input = $(this);
|
||||
|
||||
self.options = opts; // access to options
|
||||
self.setReadOnly = function(newReadOnly) {
|
||||
opts.readOnly = newReadOnly;
|
||||
self.$map.toggleClass("read-only", newReadOnly);
|
||||
};
|
||||
|
||||
self.locationOri = self.$input.val();
|
||||
|
||||
self.onChangeLocation = function() {
|
||||
var edata = {
|
||||
latlng: self.location,
|
||||
location: self.getLocation()
|
||||
};
|
||||
self.$input.trigger($.extend(edata, {
|
||||
type: 'changeLocation'
|
||||
}));
|
||||
opts.onChangeLocation.call(self, edata);
|
||||
};
|
||||
|
||||
self.setLocation = function(loc, noSet) {
|
||||
loc = loc || defaults.location;
|
||||
self.location = parseLocation(loc);
|
||||
|
||||
if(self.marker)
|
||||
self.marker.setLatLng(loc);
|
||||
|
||||
if(!noSet) {
|
||||
self.$input.data('location', self.location);
|
||||
self.$input.val( self.getLocation() );
|
||||
self.onChangeLocation();
|
||||
}
|
||||
};
|
||||
|
||||
self.getLocation = function() {
|
||||
return self.location ? L.Util.template(opts.locationFormat, {
|
||||
lat: self.location.lat,
|
||||
lng: self.location.lng,
|
||||
sep: opts.locationSep
|
||||
}) : self.location;
|
||||
};
|
||||
|
||||
self.updatePosition = function() {
|
||||
switch(opts.position) {
|
||||
case 'bottomleft':
|
||||
self.$map.css({
|
||||
top: self.$input.offset().top + self.$input.height() + 6,
|
||||
left: self.$input.offset().left
|
||||
});
|
||||
break;
|
||||
case 'topright':
|
||||
self.$map.css({
|
||||
top: self.$input.offset().top,
|
||||
left: self.$input.offset().left + self.$input.width() + 5
|
||||
});
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
self.openMap = function() {
|
||||
self.updatePosition();
|
||||
self.$map.show();
|
||||
self.map.invalidateSize();
|
||||
self.$input.trigger('show');
|
||||
};
|
||||
|
||||
self.closeMap = function() {
|
||||
self.$map.hide();
|
||||
self.$input.trigger('hide');
|
||||
};
|
||||
|
||||
self.setLocation(self.locationOri, true);
|
||||
|
||||
self.$map = buildMap(self);
|
||||
|
||||
self.$input
|
||||
.addClass(opts.className)
|
||||
.on('focus.'+opts.className, function(e) {
|
||||
e.preventDefault();
|
||||
self.openMap();
|
||||
})
|
||||
.on('blur.'+opts.className, function(e) {
|
||||
e.preventDefault();
|
||||
var p = e.relatedTarget;
|
||||
var close = true;
|
||||
while (p) {
|
||||
if (p._leaflet) {
|
||||
close = false;
|
||||
break;
|
||||
}
|
||||
p = p.parentElement;
|
||||
}
|
||||
if(close) {
|
||||
setTimeout(function() {
|
||||
self.closeMap();
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
$(window).on('resize', function() {
|
||||
if (self.$map.is(':visible'))
|
||||
self.updatePosition();
|
||||
});
|
||||
//opens map initially if alwaysOpen
|
||||
if(opts.alwaysOpen && opts.alwaysOpen===true) self.openMap();
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
});
|
||||
@@ -1,148 +0,0 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="https://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Leaflet Location Picker Demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
|
||||
<link rel="stylesheet" href="//unpkg.com/leaflet@1.1.0/dist/leaflet.css" />
|
||||
|
||||
<link rel="stylesheet" href="../dist/leaflet-locationpicker.src.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h3><a href="../index.html"><big>◄</big> Leaflet Location Picker</a></h3>
|
||||
|
||||
<h4>Simple Example: <em></em></h4>
|
||||
|
||||
<form id="insert">
|
||||
<label>Insert new geographic location:</label><br />
|
||||
<input class="geolocs" type="text" value="" size="20" />
|
||||
<pre>
|
||||
$('.geolocs').leafletLocationPicker();
|
||||
</pre>
|
||||
</form>
|
||||
|
||||
<form id="default">
|
||||
Change default geographic location: <br />
|
||||
<input class="geolocs" type="text" value="17.9787,81.0352" size="20" />
|
||||
</form>
|
||||
|
||||
<form id="format">
|
||||
Custom location format: <br />
|
||||
<input id="geoloc2" type="text" value="" size="20" /> <br />
|
||||
<pre>
|
||||
$('#geoloc2').leafletLocationPicker({
|
||||
locationFormat: '{lat}@{lng}#WGS84',
|
||||
position: 'bottomleft'
|
||||
});
|
||||
</pre>
|
||||
</form>
|
||||
|
||||
<form id="callback">
|
||||
Custom callback: <br />
|
||||
<input id="geoloc4" type="text" value="" size="20" />
|
||||
<br /><br />
|
||||
<i>Value from callback:</i><br />
|
||||
<em style="color:blue"></em><br />
|
||||
<pre>
|
||||
$('#geoloc4').leafletLocationPicker(function(e) {
|
||||
$(this).siblings('em').text(e.location);
|
||||
});
|
||||
</pre>
|
||||
</form>
|
||||
|
||||
<form id="events">
|
||||
Events: <em style="color:red"></em><br />
|
||||
<input id="geoloc3" type="text" value="" size="20" />
|
||||
<br />
|
||||
<br /><input id="geolat" type="text" value="" size="20" />
|
||||
<br /><input id="geolng" type="text" value="" size="20" />
|
||||
<br /><i>string location</i><br />
|
||||
<pre>
|
||||
$('#geoloc3').leafletLocationPicker({
|
||||
locationSep: ' - '
|
||||
})
|
||||
.on('show', function(e) {
|
||||
$(this).siblings('em').text('click on map for insert the location');
|
||||
})
|
||||
.on('hide', function(e) {
|
||||
$(this).siblings('em').text('');
|
||||
})
|
||||
.on('changeLocation', function(e) {
|
||||
$(this)
|
||||
.siblings('#geolat').val( e.latlng.lat )
|
||||
.siblings('#geolng').val( e.latlng.lng )
|
||||
.siblings('i').text('"'+e.location+'"');
|
||||
});
|
||||
</pre>
|
||||
</form>
|
||||
|
||||
<script src="//unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
|
||||
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
|
||||
|
||||
<form id="fixedContAlwaysOpen">
|
||||
Fixed container and always open map: <br />
|
||||
<div style="min-height: 140;min-width: 200;">
|
||||
<input id="geoloc5" type="text" value="" size="20" />
|
||||
<div id="fixedMapCont" style="border: 1px solid black; min-height: 140;min-width: 200;"></div>
|
||||
</div>
|
||||
<pre>
|
||||
$('#geoloc5').leafletLocationPicker({
|
||||
alwaysOpen: true,
|
||||
mapContainer: "#fixedMapCont"
|
||||
});
|
||||
</pre>
|
||||
</form>
|
||||
|
||||
|
||||
<script src="../../leaflet/dist/leaflet.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
|
||||
<script src="../dist/leaflet-locationpicker.min.js"></script>
|
||||
<script>
|
||||
|
||||
//multiple istances
|
||||
$('.geolocs').leafletLocationPicker();
|
||||
|
||||
//custom location format
|
||||
$('#geoloc2').leafletLocationPicker({
|
||||
locationFormat: '{lat}@{lng}#WGS84',
|
||||
position: 'bottomleft'
|
||||
});
|
||||
|
||||
//events
|
||||
$('#geoloc3').leafletLocationPicker({
|
||||
locationSep: ' - '
|
||||
})
|
||||
.on('show', function(e) {
|
||||
$(this).siblings('em').text('click on map for insert the location');
|
||||
})
|
||||
.on('hide', function(e) {
|
||||
$(this).siblings('em').text('');
|
||||
})
|
||||
.on('changeLocation', function(e) {
|
||||
$(this)
|
||||
.siblings('#geolat').val( e.latlng.lat )
|
||||
.siblings('#geolng').val( e.latlng.lng )
|
||||
.siblings('i').text('"'+e.location+'"');
|
||||
});
|
||||
|
||||
//callback
|
||||
$('#geoloc4').leafletLocationPicker(function(e) {
|
||||
$(this).siblings('em').text(e.location);
|
||||
});
|
||||
|
||||
//fix n alwaysOpen
|
||||
$('#geoloc5').leafletLocationPicker({
|
||||
alwaysOpen: true,
|
||||
mapContainer: "#fixedMapCont"
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<div id="copy"><a href="https://opengeo.tech/">Opengeo.tech</a> • <a rel="author" href="https://opengeo.tech/stefano-cudini/">Stefano Cudini</a></div>
|
||||
|
||||
<script src="/labs-common.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,102 +0,0 @@
|
||||
body {
|
||||
background:#b5d0d0;
|
||||
color:#285585;
|
||||
font-family:Arial;
|
||||
}
|
||||
body#home {
|
||||
background:url('images/leaflet-panel.png') no-repeat top left #b5d0d0;
|
||||
margin-left:200px;
|
||||
}
|
||||
|
||||
a {
|
||||
color:#1978cf;
|
||||
}
|
||||
a:hover {
|
||||
color:#fff;
|
||||
}
|
||||
h2, h3, h4 {
|
||||
white-space:nowrap;
|
||||
margin:1em 0 0 0;
|
||||
}
|
||||
h3 a,
|
||||
h3 a:hover {
|
||||
text-decoration:none;
|
||||
}
|
||||
#desc {
|
||||
float: left;
|
||||
margin-bottom: 1em;
|
||||
position: relative;
|
||||
white-space:nowrap;
|
||||
font-size:1em;
|
||||
}
|
||||
#map {
|
||||
border:2px solid #1978cf;
|
||||
box-shadow: 0 0 8px #999;
|
||||
float:left;
|
||||
width:800px;
|
||||
height:400px;
|
||||
}
|
||||
label {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
pre {
|
||||
font-family: "Courier New";
|
||||
font-size: .85em;
|
||||
color: #333;
|
||||
float: left;
|
||||
clear: both;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 2px 2px 3px rgba(100,100,100,0.2);
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
#copy {
|
||||
position:fixed;
|
||||
z-index:1000;
|
||||
right:150px;
|
||||
top:-8px;
|
||||
font-size:.85em;
|
||||
padding:8px 8px 2px 8px;
|
||||
background: #323b44;
|
||||
border: 2px solid #737c85;
|
||||
border-radius:.7em;
|
||||
opacity: 0.9;
|
||||
box-shadow:0 0 8px #5f7182;
|
||||
color:#eee
|
||||
}
|
||||
#copy a {
|
||||
color:#ccc;
|
||||
text-decoration:none
|
||||
}
|
||||
#copy a:hover {
|
||||
color:#fff
|
||||
}
|
||||
#ribbon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: 0;
|
||||
filter: alpha(opacity=80);
|
||||
-khtml-opacity: .8;
|
||||
-moz-opacity: .8;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
#comments {
|
||||
margin-top:50px;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
background: #eee;
|
||||
float: left;
|
||||
min-height: 160px;
|
||||
min-width: 400px
|
||||
}
|
||||
input {
|
||||
margin: 5px 0;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
@@ -1,178 +0,0 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="https://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>leaflet locationpicker</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<style>
|
||||
body {
|
||||
background:#F2F9FF;
|
||||
color:#666;
|
||||
font-family:Arial;
|
||||
}
|
||||
a {
|
||||
color:#f80;
|
||||
text-decoration:none;
|
||||
}
|
||||
a:hover {
|
||||
color:#635f94;
|
||||
text-decoration:underline;
|
||||
}
|
||||
h1, h2, h3, h4 {
|
||||
text-transform: capitalize;
|
||||
white-space:nowrap;
|
||||
margin: 0 0 .25em 0;
|
||||
}
|
||||
h4 {
|
||||
color: #A1A8AD;
|
||||
}
|
||||
#desc {
|
||||
float: left;
|
||||
margin-bottom: 1em;
|
||||
position: relative;
|
||||
white-space:nowrap;
|
||||
font-size:1em;
|
||||
}
|
||||
.box {
|
||||
float: left;
|
||||
min-width: 200px;
|
||||
margin-right: 20px;
|
||||
background: #fff;
|
||||
padding:8px;
|
||||
border:2px solid #c5cdd4;
|
||||
border-radius:.45em;
|
||||
|
||||
box-shadow: 0 0 16px rgba(100,100,100,0.2);
|
||||
}
|
||||
.screenshot {
|
||||
margin: 20px 20px 20px 0;
|
||||
float: left;
|
||||
clear: both;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px rgba(120,120,120,0.2);
|
||||
padding: 8px;
|
||||
}
|
||||
ul {
|
||||
font-size:.85em;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
li {
|
||||
margin:0 0 2px 18px;
|
||||
}
|
||||
#copy {
|
||||
position:fixed;
|
||||
z-index:1000;
|
||||
right:150px;
|
||||
top:-8px;
|
||||
font-size:.85em;
|
||||
padding:8px 8px 2px 8px;
|
||||
background: #eee;
|
||||
border: 2px solid #bbb;
|
||||
border-radius:.7em;
|
||||
opacity: 0.9;
|
||||
box-shadow:0 0 8px #aaa;
|
||||
font-weight: bold;
|
||||
color:#bbb;
|
||||
}
|
||||
#copy a {
|
||||
color:#888;
|
||||
text-decoration:none
|
||||
}
|
||||
#copy a:hover {
|
||||
color:#f80
|
||||
}
|
||||
#ribbon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: 0;
|
||||
filter: alpha(opacity=80);
|
||||
-khtml-opacity: .8;
|
||||
-moz-opacity: .8;
|
||||
opacity: .8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body id="home">
|
||||
|
||||
<h1>leaflet locationpicker</h1>
|
||||
|
||||
<div id="desc">
|
||||
Simple location picker with Leaflet map
|
||||
<div style="position:absolute;top:0;right:-120px">
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=stefanocudini&repo=leaflet-locationpicker&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="104px" height="20px"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="clear:both"></div>
|
||||
<div class="box">
|
||||
<h4>Features</h4>
|
||||
<ul id="ff">
|
||||
|
||||
<li>Custom location format, lat,lon separator and precision</li>
|
||||
|
||||
<li>Pick Location Latidute,Longitude clicking on map</li>
|
||||
|
||||
<li>Bind multiple events or single picker callback</li>
|
||||
|
||||
<li>Load picker map from preselected location</li>
|
||||
|
||||
<li>Bind callback on location picked</li>
|
||||
|
||||
<li>Enable disable location marker</li>
|
||||
|
||||
<li>Custom map baselayer</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h4>Code repositories</h4>
|
||||
|
||||
<a target="_blank" href="https://github.com/stefanocudini/leaflet-locationpicker">Github.com</a>
|
||||
<br />
|
||||
|
||||
<a target="_blank" href="https://npmjs.org/package/leaflet-locationpicker">Node Packaged Module</a>
|
||||
<br />
|
||||
|
||||
|
||||
<h4>Homepage</h4>
|
||||
<a href="https://opengeo.tech/maps/leaflet-locationpicker/">https://opengeo.tech/maps/leaflet-locationpicker/</a>
|
||||
<br />
|
||||
|
||||
<h4>Download</h4>
|
||||
<ul>
|
||||
<li><a href="https://github.com/stefanocudini/leaflet-locationpicker/archive/master.zip">Dev Pack (.zip)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h4>Examples</h4>
|
||||
<ul id="examples">
|
||||
|
||||
<li><a href="examples/simple.html">examples/simple.html</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="screenshot">
|
||||
<img src="images/leaflet-locationpicker.png" />
|
||||
</div>
|
||||
|
||||
<div id="copy"><a href="https://opengeo.tech/">Opengeo.tech</a> • ©<a rel="author" href="https://opengeo.tech/stefano-cudini/">Stefano Cudini</a></div>
|
||||
|
||||
<a href="https://github.com/stefanocudini/leaflet-locationpicker"><img id="ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
|
||||
|
||||
<div style="clear:both;font-size:.85em;margin-bottom:1em">
|
||||
<b>For questions and bugs</b> I recommend you to <a href="https://github.com/stefanocudini/leaflet-locationpicker/issues">create New Issue</a> on Github repository.</strong><br />
|
||||
<br />
|
||||
This is a micro discussion area for methods of implementation.<br />
|
||||
</div>
|
||||
|
||||
<div id="comments">
|
||||
<div id="disqus_thread"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/labs-common.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,163 +0,0 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="https://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title><%=title%></title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<style>
|
||||
body {
|
||||
background:#F2F9FF;
|
||||
color:#666;
|
||||
font-family:Arial;
|
||||
}
|
||||
a {
|
||||
color:#f80;
|
||||
text-decoration:none;
|
||||
}
|
||||
a:hover {
|
||||
color:#635f94;
|
||||
text-decoration:underline;
|
||||
}
|
||||
h1, h2, h3, h4 {
|
||||
text-transform: capitalize;
|
||||
white-space:nowrap;
|
||||
margin: 0 0 .25em 0;
|
||||
}
|
||||
h4 {
|
||||
color: #A1A8AD;
|
||||
}
|
||||
#desc {
|
||||
float: left;
|
||||
margin-bottom: 1em;
|
||||
position: relative;
|
||||
white-space:nowrap;
|
||||
font-size:1em;
|
||||
}
|
||||
.box {
|
||||
float: left;
|
||||
min-width: 200px;
|
||||
margin-right: 20px;
|
||||
background: #fff;
|
||||
padding:8px;
|
||||
border:2px solid #c5cdd4;
|
||||
border-radius:.45em;
|
||||
|
||||
box-shadow: 0 0 16px rgba(100,100,100,0.2);
|
||||
}
|
||||
.screenshot {
|
||||
margin: 20px 20px 20px 0;
|
||||
float: left;
|
||||
clear: both;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px rgba(120,120,120,0.2);
|
||||
padding: 8px;
|
||||
}
|
||||
ul {
|
||||
font-size:.85em;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
li {
|
||||
margin:0 0 2px 18px;
|
||||
}
|
||||
#copy {
|
||||
position:fixed;
|
||||
z-index:1000;
|
||||
right:150px;
|
||||
top:-8px;
|
||||
font-size:.85em;
|
||||
padding:8px 8px 2px 8px;
|
||||
background: #eee;
|
||||
border: 2px solid #bbb;
|
||||
border-radius:.7em;
|
||||
opacity: 0.9;
|
||||
box-shadow:0 0 8px #aaa;
|
||||
font-weight: bold;
|
||||
color:#bbb;
|
||||
}
|
||||
#copy a {
|
||||
color:#888;
|
||||
text-decoration:none
|
||||
}
|
||||
#copy a:hover {
|
||||
color:#f80
|
||||
}
|
||||
#ribbon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: 0;
|
||||
filter: alpha(opacity=80);
|
||||
-khtml-opacity: .8;
|
||||
-moz-opacity: .8;
|
||||
opacity: .8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body id="home">
|
||||
|
||||
<h1><%=title%></h1>
|
||||
|
||||
<div id="desc">
|
||||
<%=pkg.description%>
|
||||
<div style="position:absolute;top:0;right:-120px">
|
||||
<iframe src="<%=ribbonurl%>" allowtransparency="true" frameborder="0" scrolling="0" width="104px" height="20px"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="clear:both"></div>
|
||||
<div class="box">
|
||||
<h4>Features</h4>
|
||||
<ul id="ff">
|
||||
<% _.forEach(features, function(f) { %>
|
||||
<li><%- f%></li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h4>Code repositories</h4>
|
||||
<% _.forEach(sources, function(s) { %>
|
||||
<a target="_blank" href="<%=s.url%>"><%- s.name%></a>
|
||||
<br />
|
||||
<% }); %>
|
||||
|
||||
<h4>Homepage</h4>
|
||||
<a href="<%=pkg.homepage%>"><%=pkg.homepage%></a>
|
||||
<br />
|
||||
|
||||
<h4>Download</h4>
|
||||
<ul>
|
||||
<li><a href="<%=giturl%>/archive/master.zip">Dev Pack (.zip)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h4>Examples</h4>
|
||||
<ul id="examples">
|
||||
<% _.forEach(examples, function(file) { %>
|
||||
<li><a href="<%- file %>"><%- file%></a></li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="screenshot">
|
||||
<img src="<%=image%>" />
|
||||
</div>
|
||||
|
||||
<div id="copy"><a href="<%=pkg.author.url%>">Opengeo.tech</a> • ©<a rel="author" href="https://opengeo.tech/stefano-cudini/"><%= pkg.author.name %></a></div>
|
||||
|
||||
<a href="<%=giturl%>"><img id="ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
|
||||
|
||||
<div style="clear:both;font-size:.85em;margin-bottom:1em">
|
||||
<b>For questions and bugs</b> I recommend you to <a href="<%=giturl%>/issues">create New Issue</a> on Github repository.</strong><br />
|
||||
<br />
|
||||
This is a micro discussion area for methods of implementation.<br />
|
||||
</div>
|
||||
|
||||
<div id="comments">
|
||||
<div id="disqus_thread"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/labs-common.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,23 +0,0 @@
|
||||
Copyright (c) 2010-2013, Vladimir Agafonkin
|
||||
Copyright (c) 2010-2011, CloudMade
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without modification, are
|
||||
permitted provided that the following conditions are met:
|
||||
|
||||
1. Redistributions of source code must retain the above copyright notice, this list of
|
||||
conditions and the following disclaimer.
|
||||
|
||||
2. Redistributions in binary form must reproduce the above copyright notice, this list
|
||||
of conditions and the following disclaimer in the documentation and/or other materials
|
||||
provided with the distribution.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
|
||||
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
|
||||
HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
|
||||
TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
@@ -1,127 +0,0 @@
|
||||
# Leaflet Plugin Authoring Guide
|
||||
|
||||
One of the greatest things about Leaflet is its powerful plugin ecosystem.
|
||||
The [Leaflet plugins page](http://leafletjs.com/plugins.html) lists dozens of awesome plugins, and more are being added every week.
|
||||
|
||||
This guide lists a number of best practices for publishing a Leaflet plugin that meets the quality standards of Leaflet itself.
|
||||
|
||||
1. [Presentation](#presentation)
|
||||
- [Repository](#repository)
|
||||
- [Name](#name)
|
||||
- [Demo](#demo)
|
||||
- [Readme](#readme)
|
||||
- [License](#license)
|
||||
2. [Code](#code)
|
||||
- [File Structure](#file-structure)
|
||||
- [Code Conventions](#code-conventions)
|
||||
- [Plugin API](#plugin-api)
|
||||
|
||||
## Presentation
|
||||
|
||||
### Repository
|
||||
|
||||
The best place to put your Leaflet plugin to is a separate [GitHub](http://github.com) repository.
|
||||
If you create a collection of plugins for different uses,
|
||||
don't put them in one repo —
|
||||
it's usually easier to work with small, self-contained plugins in individual repositories.
|
||||
|
||||
### Name
|
||||
|
||||
Most existing plugins follow the convention of naming plugins (and repos) like this: `Leaflet.MyPluginName`.
|
||||
You can use other forms (e.g. "leaflet-my-plugin-name"),
|
||||
just make sure to include the word "Leaflet" in the name so that it's obvious that it's a Leaflet plugin.
|
||||
|
||||
### Demo
|
||||
|
||||
The most essential thing to do when publishing a plugin is to include a demo that showcases what the plugin does —
|
||||
it's usually the first thing people will look for.
|
||||
|
||||
The easiest way to put up a demo is using [GitHub Pages](http://pages.github.com/).
|
||||
A good [starting point](https://help.github.com/articles/creating-project-pages-manually) is creating a `gh-pages` branch in your repo and adding an `index.html` page to it —
|
||||
after pushing, it'll be published as `http://<user>.github.io/<repo>`.
|
||||
|
||||
### Readme
|
||||
|
||||
The next thing you need to have is a descriptive `README.md` in the root of the repo (or a link to a website with a similar content).
|
||||
At a minimum it should contain the following items:
|
||||
|
||||
- name of the plugin
|
||||
- a simple, concise description of what it does
|
||||
- requirements
|
||||
- Leaflet version
|
||||
- other external dependencies (if any)
|
||||
- browser / device compatibility
|
||||
- links to demos
|
||||
- instructions for including the plugin
|
||||
- simple usage code example
|
||||
- API reference (methods, options, events)
|
||||
|
||||
### License
|
||||
|
||||
Every open source repository should include a license.
|
||||
If you don't know what open source license to choose for your code,
|
||||
[MIT License](http://opensource.org/licenses/MIT) and [BSD 2-Clause License](http://opensource.org/licenses/BSD-2-Clause) are both good choices.
|
||||
You can either put it in the repo as a `LICENSE` file or just link to the license from the Readme.
|
||||
|
||||
## Code
|
||||
|
||||
### File Structure
|
||||
|
||||
Keep the file structure clean and simple,
|
||||
don't pile up lots of files in one place —
|
||||
make it easy for a new person to find their way in your repo.
|
||||
|
||||
A barebones repo for a simple plugin would look like this:
|
||||
|
||||
```
|
||||
my-plugin.js
|
||||
README.md
|
||||
```
|
||||
|
||||
An example of a more sophisticated plugin file structure:
|
||||
|
||||
```
|
||||
/src - JS source files
|
||||
/dist - minified plugin JS, CSS, images
|
||||
/spec - test files
|
||||
/lib - any external libraries/plugins if necessary
|
||||
/examples - HTML examples of plugin usage
|
||||
README.md
|
||||
LICENSE
|
||||
package.json
|
||||
```
|
||||
|
||||
### Code Conventions
|
||||
|
||||
Everyone's tastes are different, but it's important to be consistent with whatever conventions you choose for your plugin.
|
||||
|
||||
For a good starting point, check out [Airbnb JavaScript Guide](https://github.com/airbnb/javascript).
|
||||
Leaflet follows pretty much the same conventions
|
||||
except for using smart tabs (hard tabs for indentation, spaces for alignment)
|
||||
and putting a space after the `function` keyword.
|
||||
|
||||
### Plugin API
|
||||
|
||||
Never expose global variables in your plugin.<br>
|
||||
If you have a new class, put it directly in the `L` namespace (`L.MyPlugin`).<br>
|
||||
If you inherit one of the existing classes, make it a sub-property (`L.TileLayer.Banana`).<br>
|
||||
If you want to add new methods to existing Leaflet classes, you can do it like this: `L.Marker.include({myPlugin: …})`.
|
||||
|
||||
Function, method and property names should be in `camelCase`.<br>
|
||||
Class names should be in `CapitalizedCamelCase`.
|
||||
|
||||
If you have a lot of arguments in your function, consider accepting an options object instead
|
||||
(putting default values where possible so that users don't need specify all of them):
|
||||
|
||||
```js
|
||||
// bad
|
||||
marker.myPlugin('bla', 'foo', null, {}, 5, 0);
|
||||
|
||||
// good
|
||||
marker.myPlugin('bla', {
|
||||
optionOne: 'foo',
|
||||
optionThree: 5
|
||||
});
|
||||
```
|
||||
|
||||
And most importantly, keep it simple. Leaflet is all about *simplicity*.
|
||||
@@ -1,34 +0,0 @@
|
||||
<img src="http://leafletjs.com/docs/images/logo.png" alt="Leaflet" />
|
||||
|
||||
Leaflet is an open source JavaScript library for **mobile-friendly interactive maps**.
|
||||
It is developed by [Vladimir Agafonkin][] of [MapBox][] with a team of dedicated [contributors][].
|
||||
Weighing just about 30 KB of gzipped JS code, it has all the [features][] most developers ever need for online maps.
|
||||
|
||||
Leaflet is designed with *simplicity*, *performance* and *usability* in mind.
|
||||
It works efficiently across all major desktop and mobile platforms out of the box,
|
||||
taking advantage of HTML5 and CSS3 on modern browsers while being accessible on older ones too.
|
||||
It can be extended with a huge amount of [plugins][],
|
||||
has a beautiful, easy to use and [well-documented][] API
|
||||
and a simple, readable [source code][] that is a joy to [contribute][] to.
|
||||
|
||||
For more info, docs and tutorials, check out the [official website][].<br>
|
||||
For **Leaflet downloads** (including the built master version), check out the [download page][].
|
||||
|
||||
We're happy to meet new contributors.
|
||||
If you want to **get involved** with Leaflet development, check out the [contribution guide][contribute].
|
||||
Let's make the best mapping library that will ever exist,
|
||||
and push the limits of what's possible with online maps!
|
||||
|
||||
[](https://travis-ci.org/Leaflet/Leaflet)
|
||||
|
||||
[Vladimir Agafonkin]: http://agafonkin.com/en
|
||||
[contributors]: https://github.com/Leaflet/Leaflet/graphs/contributors
|
||||
[features]: http://leafletjs.com/features.html
|
||||
[plugins]: http://leafletjs.com/plugins.html
|
||||
[well-documented]: http://leafletjs.com/reference.html "Leaflet API reference"
|
||||
[source code]: https://github.com/Leaflet/Leaflet "Leaflet GitHub repository"
|
||||
[hosted on GitHub]: http://github.com/Leaflet/Leaflet
|
||||
[contribute]: https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md "A guide to contributing to Leaflet"
|
||||
[official website]: http://leafletjs.com
|
||||
[download page]: http://leafletjs.com/download.html
|
||||
[MapBox]: https://mapbox.com
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 797 B |
File diff suppressed because it is too large
Load Diff
@@ -1,479 +0,0 @@
|
||||
/* required styles */
|
||||
|
||||
.leaflet-map-pane,
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-tile-pane,
|
||||
.leaflet-tile-container,
|
||||
.leaflet-overlay-pane,
|
||||
.leaflet-shadow-pane,
|
||||
.leaflet-marker-pane,
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-overlay-pane svg,
|
||||
.leaflet-zoom-box,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-container {
|
||||
overflow: hidden;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
display: block;
|
||||
}
|
||||
/* map is broken in FF if you have max-width: 100% on tiles */
|
||||
.leaflet-container img {
|
||||
max-width: none !important;
|
||||
}
|
||||
/* stupid Android 2 doesn't understand "max-width: none" properly */
|
||||
.leaflet-container img.leaflet-image-layer {
|
||||
max-width: 15000px !important;
|
||||
}
|
||||
.leaflet-tile {
|
||||
filter: inherit;
|
||||
visibility: hidden;
|
||||
}
|
||||
.leaflet-tile-loaded {
|
||||
visibility: inherit;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
|
||||
.leaflet-overlay-pane svg {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.leaflet-tile-pane { z-index: 2; }
|
||||
.leaflet-objects-pane { z-index: 3; }
|
||||
.leaflet-overlay-pane { z-index: 4; }
|
||||
.leaflet-shadow-pane { z-index: 5; }
|
||||
.leaflet-marker-pane { z-index: 6; }
|
||||
.leaflet-popup-pane { z-index: 7; }
|
||||
|
||||
.leaflet-vml-shape {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
.lvml {
|
||||
behavior: url(#default#VML);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
/* control positioning */
|
||||
|
||||
.leaflet-control {
|
||||
position: relative;
|
||||
z-index: 7;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-top,
|
||||
.leaflet-bottom {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-top {
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-right {
|
||||
right: 0;
|
||||
}
|
||||
.leaflet-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
.leaflet-left {
|
||||
left: 0;
|
||||
}
|
||||
.leaflet-control {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
float: right;
|
||||
}
|
||||
.leaflet-top .leaflet-control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* zoom and fade animations */
|
||||
|
||||
.leaflet-fade-anim .leaflet-tile,
|
||||
.leaflet-fade-anim .leaflet-popup {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
-o-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-tile-loaded,
|
||||
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-tile,
|
||||
.leaflet-pan-anim .leaflet-tile,
|
||||
.leaflet-touching .leaflet-zoom-animated {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* cursors */
|
||||
|
||||
.leaflet-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.leaflet-container {
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
}
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-control {
|
||||
cursor: auto;
|
||||
}
|
||||
.leaflet-dragging .leaflet-container,
|
||||
.leaflet-dragging .leaflet-clickable {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
}
|
||||
|
||||
|
||||
/* visual tweaks */
|
||||
|
||||
.leaflet-container {
|
||||
background: #ddd;
|
||||
outline: 0;
|
||||
}
|
||||
.leaflet-container a {
|
||||
color: #0078A8;
|
||||
}
|
||||
.leaflet-container a.leaflet-active {
|
||||
outline: 2px solid orange;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
border: 2px dotted #38f;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
|
||||
/* general typography */
|
||||
.leaflet-container {
|
||||
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* general toolbar styles */
|
||||
|
||||
.leaflet-bar {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ccc;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-control-layers-toggle {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.leaflet-bar a:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.leaflet-bar a.leaflet-disabled {
|
||||
cursor: default;
|
||||
background-color: #f4f4f4;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
||||
/* zoom control */
|
||||
|
||||
.leaflet-control-zoom-in,
|
||||
.leaflet-control-zoom-out {
|
||||
font: bold 18px 'Lucida Console', Monaco, monospace;
|
||||
text-indent: 1px;
|
||||
}
|
||||
.leaflet-control-zoom-out {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-zoom-in {
|
||||
font-size: 22px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-zoom-out {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
|
||||
/* layers control */
|
||||
|
||||
.leaflet-control-layers {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers.png);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.leaflet-retina .leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers-2x.png);
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers-toggle {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.leaflet-control-layers .leaflet-control-layers-list,
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-list {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.leaflet-control-layers-expanded {
|
||||
padding: 6px 10px 6px 6px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
.leaflet-control-layers-selector {
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.leaflet-control-layers label {
|
||||
display: block;
|
||||
}
|
||||
.leaflet-control-layers-separator {
|
||||
height: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 5px -10px 5px -6px;
|
||||
}
|
||||
|
||||
|
||||
/* attribution and scale controls */
|
||||
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
.leaflet-control-attribution,
|
||||
.leaflet-control-scale-line {
|
||||
padding: 0 5px;
|
||||
color: #333;
|
||||
}
|
||||
.leaflet-control-attribution a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.leaflet-control-attribution a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution,
|
||||
.leaflet-container .leaflet-control-scale {
|
||||
font-size: 11px;
|
||||
}
|
||||
.leaflet-left .leaflet-control-scale {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control-scale {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.leaflet-control-scale-line {
|
||||
border: 2px solid #777;
|
||||
border-top: none;
|
||||
line-height: 1.1;
|
||||
padding: 2px 5px 1px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child) {
|
||||
border-top: 2px solid #777;
|
||||
border-bottom: none;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
|
||||
border-bottom: 2px solid #777;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-attribution,
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
border: 2px solid rgba(0,0,0,0.2);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
||||
/* popup */
|
||||
|
||||
.leaflet-popup {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
margin: 13px 19px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 18px 0;
|
||||
}
|
||||
.leaflet-popup-tip-container {
|
||||
margin: 0 auto;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaflet-popup-tip {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
padding: 1px;
|
||||
|
||||
margin: -10px auto 0;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.leaflet-popup-content-wrapper,
|
||||
.leaflet-popup-tip {
|
||||
background: white;
|
||||
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 4px 4px 0 0;
|
||||
text-align: center;
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
font: 16px/14px Tahoma, Verdana, sans-serif;
|
||||
color: #c3c3c3;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button:hover {
|
||||
color: #999;
|
||||
}
|
||||
.leaflet-popup-scrolled {
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper {
|
||||
zoom: 1;
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
width: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
||||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip-container {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-control-zoom,
|
||||
.leaflet-oldie .leaflet-control-layers,
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper,
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
|
||||
/* div icon */
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: #fff;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,7 +1,6 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014 Duy Anh Nguyen
|
||||
Copyright (c) 2015 Josef Kufner
|
||||
Copyright (c) 2023 Matt Boldt
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
@@ -10,14 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
378
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/README.md
Normal file
378
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/README.md
Normal file
@@ -0,0 +1,378 @@
|
||||
[](https://codeclimate.com/github/mattboldt/typed.js)
|
||||
[]()
|
||||
[](https://img.shields.io/npm/dt/typed.js.svg)
|
||||
[](https://raw.githubusercontent.com/mattboldt/typed.js/master/LICENSE.txt)
|
||||
|
||||
<img src="https://raw.githubusercontent.com/mattboldt/typed.js/master/logo-cropped.png" width="450px" title="Typed.js" />
|
||||
|
||||
### [Live Demo](http://www.mattboldt.com/demos/typed-js/) | [View All Demos](http://mattboldt.github.io/typed.js/) | [View Full Docs](http://mattboldt.github.io/typed.js/docs) | [mattboldt.com](http://www.mattboldt.com)
|
||||
|
||||
Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
### CDN
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
|
||||
```
|
||||
|
||||
For use directly in the browser via `<script>` tag:
|
||||
|
||||
```html
|
||||
<!-- Element to contain animated typing -->
|
||||
<span id="element"></span>
|
||||
|
||||
<!-- Load library from the CDN -->
|
||||
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
|
||||
|
||||
<!-- Setup and start animation! -->
|
||||
<script>
|
||||
var typed = new Typed('#element', {
|
||||
strings: ['<i>First</i> sentence.', '& a second sentence.'],
|
||||
typeSpeed: 50,
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
### As an ESModule
|
||||
|
||||
For use with a build tool like [Vite](https://vitejs.dev/), and/or in a React application, install with NPM or Yarn.
|
||||
|
||||
#### NPM
|
||||
|
||||
```
|
||||
npm install typed.js
|
||||
```
|
||||
|
||||
#### Yarn
|
||||
|
||||
```
|
||||
yarn add typed.js
|
||||
```
|
||||
|
||||
#### General ESM Usage
|
||||
|
||||
```js
|
||||
import Typed from 'typed.js';
|
||||
|
||||
const typed = new Typed('#element', {
|
||||
strings: ['<i>First</i> sentence.', '& a second sentence.'],
|
||||
typeSpeed: 50,
|
||||
});
|
||||
```
|
||||
|
||||
### ReactJS Usage
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import Typed from 'typed.js';
|
||||
|
||||
function MyComponent() {
|
||||
// Create reference to store the DOM element containing the animation
|
||||
const el = React.useRef(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
const typed = new Typed(el.current, {
|
||||
strings: ['<i>First</i> sentence.', '& a second sentence.'],
|
||||
typeSpeed: 50,
|
||||
});
|
||||
|
||||
return () => {
|
||||
// Destroy Typed instance during cleanup to stop animation
|
||||
typed.destroy();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<span ref={el} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
More complex hook-based function component: https://jsfiddle.net/mattboldt/60h9an7y/
|
||||
|
||||
Class component: https://jsfiddle.net/mattboldt/ovat9jmp/
|
||||
|
||||
### Use with Vue.js
|
||||
|
||||
Check out the Vue.js component: https://github.com/Orlandster/vue-typed-js
|
||||
|
||||
### Use it as WebComponent
|
||||
|
||||
Check out the WebComponent: https://github.com/Orlandster/wc-typed-js
|
||||
|
||||
## Wonderful sites that have used (or are using) Typed.js
|
||||
|
||||
https://github.com/features/package-registry
|
||||
|
||||
https://slack.com/
|
||||
|
||||
https://envato.com/
|
||||
|
||||
https://gorails.com/
|
||||
|
||||
https://productmap.co/
|
||||
|
||||
https://www.typed.com/
|
||||
|
||||
https://apeiron.io
|
||||
|
||||
https://git.market/
|
||||
|
||||
https://commando.io/
|
||||
|
||||
http://testdouble.com/agency.html
|
||||
|
||||
https://www.capitalfactory.com/
|
||||
|
||||
http://www.maxcdn.com/
|
||||
|
||||
https://www.powerauth.com/
|
||||
|
||||
---
|
||||
|
||||
### Strings from static HTML (SEO Friendly)
|
||||
|
||||
Rather than using the `strings` array to insert strings, you can place an HTML `div` on the page and read from it.
|
||||
This allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
var typed = new Typed('#typed', {
|
||||
stringsElement: '#typed-strings'
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
```html
|
||||
<div id="typed-strings">
|
||||
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
|
||||
<p>It <em>types</em> out sentences.</p>
|
||||
</div>
|
||||
<span id="typed"></span>
|
||||
```
|
||||
|
||||
### Type Pausing
|
||||
|
||||
You can pause in the middle of a string for a given amount of time by including an escape character.
|
||||
|
||||
```javascript
|
||||
var typed = new Typed('#element', {
|
||||
// Waits 1000ms after typing "First"
|
||||
strings: ['First ^1000 sentence.', 'Second sentence.'],
|
||||
});
|
||||
```
|
||||
|
||||
### Smart Backspacing
|
||||
|
||||
In the following example, this would only backspace the words after "This is a"
|
||||
|
||||
```javascript
|
||||
var typed = new Typed('#element', {
|
||||
strings: ['This is a JavaScript library', 'This is an ES6 module'],
|
||||
smartBackspace: true, // Default value
|
||||
});
|
||||
```
|
||||
|
||||
### Bulk Typing
|
||||
|
||||
The following example would emulate how a terminal acts when typing a command and seeing its result.
|
||||
|
||||
```javascript
|
||||
var typed = new Typed('#element', {
|
||||
strings: ['git push --force ^1000\n `pushed to origin with option force`'],
|
||||
});
|
||||
```
|
||||
|
||||
### CSS
|
||||
|
||||
CSS animations are built upon initialization in JavaScript. But, you can customize them at your will! These classes are:
|
||||
|
||||
```css
|
||||
/* Cursor */
|
||||
.typed-cursor {
|
||||
}
|
||||
|
||||
/* If fade out option is set */
|
||||
.typed-fade-out {
|
||||
}
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
```javascript
|
||||
var typed = new Typed('#element', {
|
||||
/**
|
||||
* @property {array} strings strings to be typed
|
||||
* @property {string} stringsElement ID of element containing string children
|
||||
*/
|
||||
strings: [
|
||||
'These are the default values...',
|
||||
'You know what you should do?',
|
||||
'Use your own!',
|
||||
'Have a great day!',
|
||||
],
|
||||
stringsElement: null,
|
||||
|
||||
/**
|
||||
* @property {number} typeSpeed type speed in milliseconds
|
||||
*/
|
||||
typeSpeed: 0,
|
||||
|
||||
/**
|
||||
* @property {number} startDelay time before typing starts in milliseconds
|
||||
*/
|
||||
startDelay: 0,
|
||||
|
||||
/**
|
||||
* @property {number} backSpeed backspacing speed in milliseconds
|
||||
*/
|
||||
backSpeed: 0,
|
||||
|
||||
/**
|
||||
* @property {boolean} smartBackspace only backspace what doesn't match the previous string
|
||||
*/
|
||||
smartBackspace: true,
|
||||
|
||||
/**
|
||||
* @property {boolean} shuffle shuffle the strings
|
||||
*/
|
||||
shuffle: false,
|
||||
|
||||
/**
|
||||
* @property {number} backDelay time before backspacing in milliseconds
|
||||
*/
|
||||
backDelay: 700,
|
||||
|
||||
/**
|
||||
* @property {boolean} fadeOut Fade out instead of backspace
|
||||
* @property {string} fadeOutClass css class for fade animation
|
||||
* @property {boolean} fadeOutDelay Fade out delay in milliseconds
|
||||
*/
|
||||
fadeOut: false,
|
||||
fadeOutClass: 'typed-fade-out',
|
||||
fadeOutDelay: 500,
|
||||
|
||||
/**
|
||||
* @property {boolean} loop loop strings
|
||||
* @property {number} loopCount amount of loops
|
||||
*/
|
||||
loop: false,
|
||||
loopCount: Infinity,
|
||||
|
||||
/**
|
||||
* @property {boolean} showCursor show cursor
|
||||
* @property {string} cursorChar character for cursor
|
||||
* @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>
|
||||
*/
|
||||
showCursor: true,
|
||||
cursorChar: '|',
|
||||
autoInsertCss: true,
|
||||
|
||||
/**
|
||||
* @property {string} attr attribute for typing
|
||||
* Ex: input placeholder, value, or just HTML text
|
||||
*/
|
||||
attr: null,
|
||||
|
||||
/**
|
||||
* @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input
|
||||
*/
|
||||
bindInputFocusEvents: false,
|
||||
|
||||
/**
|
||||
* @property {string} contentType 'html' or 'null' for plaintext
|
||||
*/
|
||||
contentType: 'html',
|
||||
|
||||
/**
|
||||
* Before it begins typing
|
||||
* @param {Typed} self
|
||||
*/
|
||||
onBegin: (self) => {},
|
||||
|
||||
/**
|
||||
* All typing is complete
|
||||
* @param {Typed} self
|
||||
*/
|
||||
onComplete: (self) => {},
|
||||
|
||||
/**
|
||||
* Before each string is typed
|
||||
* @param {number} arrayPos
|
||||
* @param {Typed} self
|
||||
*/
|
||||
preStringTyped: (arrayPos, self) => {},
|
||||
|
||||
/**
|
||||
* After each string is typed
|
||||
* @param {number} arrayPos
|
||||
* @param {Typed} self
|
||||
*/
|
||||
onStringTyped: (arrayPos, self) => {},
|
||||
|
||||
/**
|
||||
* During looping, after last string is typed
|
||||
* @param {Typed} self
|
||||
*/
|
||||
onLastStringBackspaced: (self) => {},
|
||||
|
||||
/**
|
||||
* Typing has been stopped
|
||||
* @param {number} arrayPos
|
||||
* @param {Typed} self
|
||||
*/
|
||||
onTypingPaused: (arrayPos, self) => {},
|
||||
|
||||
/**
|
||||
* Typing has been started after being stopped
|
||||
* @param {number} arrayPos
|
||||
* @param {Typed} self
|
||||
*/
|
||||
onTypingResumed: (arrayPos, self) => {},
|
||||
|
||||
/**
|
||||
* After reset
|
||||
* @param {Typed} self
|
||||
*/
|
||||
onReset: (self) => {},
|
||||
|
||||
/**
|
||||
* After stop
|
||||
* @param {number} arrayPos
|
||||
* @param {Typed} self
|
||||
*/
|
||||
onStop: (arrayPos, self) => {},
|
||||
|
||||
/**
|
||||
* After start
|
||||
* @param {number} arrayPos
|
||||
* @param {Typed} self
|
||||
*/
|
||||
onStart: (arrayPos, self) => {},
|
||||
|
||||
/**
|
||||
* After destroy
|
||||
* @param {Typed} self
|
||||
*/
|
||||
onDestroy: (self) => {},
|
||||
});
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
### [View Contribution Guidelines](./.github/CONTRIBUTING.md)
|
||||
|
||||
## end
|
||||
|
||||
Thanks for checking this out. If you have any questions, I'll be on [Twitter](https://twitter.com/atmattb).
|
||||
|
||||
If you're using this, let me know! I'd love to see it.
|
||||
|
||||
It would also be great if you mentioned me or my website somewhere. [www.mattboldt.com](http://www.mattboldt.com)
|
||||
2
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/dist/typed.cjs
vendored
Normal file
2
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/dist/typed.cjs
vendored
Normal file
File diff suppressed because one or more lines are too long
1
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/dist/typed.cjs.map
vendored
Normal file
1
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/dist/typed.cjs.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/dist/typed.module.js
vendored
Normal file
2
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/dist/typed.module.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/dist/typed.module.js.map
vendored
Normal file
1
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/dist/typed.module.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
3
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/dist/typed.umd.js
vendored
Normal file
3
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/dist/typed.umd.js
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s():"function"==typeof define&&define.amd?define(s):(t||self).Typed=s()}(this,function(){function t(){return t=Object.assign?Object.assign.bind():function(t){for(var s=1;s<arguments.length;s++){var e=arguments[s];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])}return t},t.apply(this,arguments)}var s={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],stringsElement:null,typeSpeed:0,startDelay:0,backSpeed:0,smartBackspace:!0,shuffle:!1,backDelay:700,fadeOut:!1,fadeOutClass:"typed-fade-out",fadeOutDelay:500,loop:!1,loopCount:Infinity,showCursor:!0,cursorChar:"|",autoInsertCss:!0,attr:null,bindInputFocusEvents:!1,contentType:"html",onBegin:function(t){},onComplete:function(t){},preStringTyped:function(t,s){},onStringTyped:function(t,s){},onLastStringBackspaced:function(t){},onTypingPaused:function(t,s){},onTypingResumed:function(t,s){},onReset:function(t){},onStop:function(t,s){},onStart:function(t,s){},onDestroy:function(t){}},e=new(/*#__PURE__*/function(){function e(){}var n=e.prototype;return n.load=function(e,n,i){if(e.el="string"==typeof i?document.querySelector(i):i,e.options=t({},s,n),e.isInput="input"===e.el.tagName.toLowerCase(),e.attr=e.options.attr,e.bindInputFocusEvents=e.options.bindInputFocusEvents,e.showCursor=!e.isInput&&e.options.showCursor,e.cursorChar=e.options.cursorChar,e.cursorBlinking=!0,e.elContent=e.attr?e.el.getAttribute(e.attr):e.el.textContent,e.contentType=e.options.contentType,e.typeSpeed=e.options.typeSpeed,e.startDelay=e.options.startDelay,e.backSpeed=e.options.backSpeed,e.smartBackspace=e.options.smartBackspace,e.backDelay=e.options.backDelay,e.fadeOut=e.options.fadeOut,e.fadeOutClass=e.options.fadeOutClass,e.fadeOutDelay=e.options.fadeOutDelay,e.isPaused=!1,e.strings=e.options.strings.map(function(t){return t.trim()}),e.stringsElement="string"==typeof e.options.stringsElement?document.querySelector(e.options.stringsElement):e.options.stringsElement,e.stringsElement){e.strings=[],e.stringsElement.style.cssText="clip: rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;";var r=Array.prototype.slice.apply(e.stringsElement.children),o=r.length;if(o)for(var a=0;a<o;a+=1)e.strings.push(r[a].innerHTML.trim())}for(var u in e.strPos=0,e.currentElContent=this.getCurrentElContent(e),e.currentElContent&&e.currentElContent.length>0&&(e.strPos=e.currentElContent.length-1,e.strings.unshift(e.currentElContent)),e.sequence=[],e.strings)e.sequence[u]=u;e.arrayPos=0,e.stopNum=0,e.loop=e.options.loop,e.loopCount=e.options.loopCount,e.curLoop=0,e.shuffle=e.options.shuffle,e.pause={status:!1,typewrite:!0,curString:"",curStrPos:0},e.typingComplete=!1,e.autoInsertCss=e.options.autoInsertCss,e.autoInsertCss&&(this.appendCursorAnimationCss(e),this.appendFadeOutAnimationCss(e))},n.getCurrentElContent=function(t){return t.attr?t.el.getAttribute(t.attr):t.isInput?t.el.value:"html"===t.contentType?t.el.innerHTML:t.el.textContent},n.appendCursorAnimationCss=function(t){var s="data-typed-js-cursor-css";if(t.showCursor&&!document.querySelector("["+s+"]")){var e=document.createElement("style");e.setAttribute(s,"true"),e.innerHTML="\n .typed-cursor{\n opacity: 1;\n }\n .typed-cursor.typed-cursor--blink{\n animation: typedjsBlink 0.7s infinite;\n -webkit-animation: typedjsBlink 0.7s infinite;\n animation: typedjsBlink 0.7s infinite;\n }\n @keyframes typedjsBlink{\n 50% { opacity: 0.0; }\n }\n @-webkit-keyframes typedjsBlink{\n 0% { opacity: 1; }\n 50% { opacity: 0.0; }\n 100% { opacity: 1; }\n }\n ",document.body.appendChild(e)}},n.appendFadeOutAnimationCss=function(t){var s="data-typed-fadeout-js-css";if(t.fadeOut&&!document.querySelector("["+s+"]")){var e=document.createElement("style");e.setAttribute(s,"true"),e.innerHTML="\n .typed-fade-out{\n opacity: 0;\n transition: opacity .25s;\n }\n .typed-cursor.typed-cursor--blink.typed-fade-out{\n -webkit-animation: 0;\n animation: 0;\n }\n ",document.body.appendChild(e)}},e}()),n=new(/*#__PURE__*/function(){function t(){}var s=t.prototype;return s.typeHtmlChars=function(t,s,e){if("html"!==e.contentType)return s;var n=t.substring(s).charAt(0);if("<"===n||"&"===n){var i;for(i="<"===n?">":";";t.substring(s+1).charAt(0)!==i&&!(1+ ++s>t.length););s++}return s},s.backSpaceHtmlChars=function(t,s,e){if("html"!==e.contentType)return s;var n=t.substring(s).charAt(0);if(">"===n||";"===n){var i;for(i=">"===n?"<":"&";t.substring(s-1).charAt(0)!==i&&!(--s<0););s--}return s},t}());/*#__PURE__*/
|
||||
return function(){function t(t,s){e.load(this,s,t),this.begin()}var s=t.prototype;return s.toggle=function(){this.pause.status?this.start():this.stop()},s.stop=function(){this.typingComplete||this.pause.status||(this.toggleBlinking(!0),this.pause.status=!0,this.options.onStop(this.arrayPos,this))},s.start=function(){this.typingComplete||this.pause.status&&(this.pause.status=!1,this.pause.typewrite?this.typewrite(this.pause.curString,this.pause.curStrPos):this.backspace(this.pause.curString,this.pause.curStrPos),this.options.onStart(this.arrayPos,this))},s.destroy=function(){this.reset(!1),this.options.onDestroy(this)},s.reset=function(t){void 0===t&&(t=!0),clearInterval(this.timeout),this.replaceText(""),this.cursor&&this.cursor.parentNode&&(this.cursor.parentNode.removeChild(this.cursor),this.cursor=null),this.strPos=0,this.arrayPos=0,this.curLoop=0,t&&(this.insertCursor(),this.options.onReset(this),this.begin())},s.begin=function(){var t=this;this.options.onBegin(this),this.typingComplete=!1,this.shuffleStringsIfNeeded(this),this.insertCursor(),this.bindInputFocusEvents&&this.bindFocusEvents(),this.timeout=setTimeout(function(){0===t.strPos?t.typewrite(t.strings[t.sequence[t.arrayPos]],t.strPos):t.backspace(t.strings[t.sequence[t.arrayPos]],t.strPos)},this.startDelay)},s.typewrite=function(t,s){var e=this;this.fadeOut&&this.el.classList.contains(this.fadeOutClass)&&(this.el.classList.remove(this.fadeOutClass),this.cursor&&this.cursor.classList.remove(this.fadeOutClass));var i=this.humanizer(this.typeSpeed),r=1;!0!==this.pause.status?this.timeout=setTimeout(function(){s=n.typeHtmlChars(t,s,e);var i=0,o=t.substring(s);if("^"===o.charAt(0)&&/^\^\d+/.test(o)){var a=1;a+=(o=/\d+/.exec(o)[0]).length,i=parseInt(o),e.temporaryPause=!0,e.options.onTypingPaused(e.arrayPos,e),t=t.substring(0,s)+t.substring(s+a),e.toggleBlinking(!0)}if("`"===o.charAt(0)){for(;"`"!==t.substring(s+r).charAt(0)&&(r++,!(s+r>t.length)););var u=t.substring(0,s),p=t.substring(u.length+1,s+r),c=t.substring(s+r+1);t=u+p+c,r--}e.timeout=setTimeout(function(){e.toggleBlinking(!1),s>=t.length?e.doneTyping(t,s):e.keepTyping(t,s,r),e.temporaryPause&&(e.temporaryPause=!1,e.options.onTypingResumed(e.arrayPos,e))},i)},i):this.setPauseStatus(t,s,!0)},s.keepTyping=function(t,s,e){0===s&&(this.toggleBlinking(!1),this.options.preStringTyped(this.arrayPos,this));var n=t.substring(0,s+=e);this.replaceText(n),this.typewrite(t,s)},s.doneTyping=function(t,s){var e=this;this.options.onStringTyped(this.arrayPos,this),this.toggleBlinking(!0),this.arrayPos===this.strings.length-1&&(this.complete(),!1===this.loop||this.curLoop===this.loopCount)||(this.timeout=setTimeout(function(){e.backspace(t,s)},this.backDelay))},s.backspace=function(t,s){var e=this;if(!0!==this.pause.status){if(this.fadeOut)return this.initFadeOut();this.toggleBlinking(!1);var i=this.humanizer(this.backSpeed);this.timeout=setTimeout(function(){s=n.backSpaceHtmlChars(t,s,e);var i=t.substring(0,s);if(e.replaceText(i),e.smartBackspace){var r=e.strings[e.arrayPos+1];e.stopNum=r&&i===r.substring(0,s)?s:0}s>e.stopNum?(s--,e.backspace(t,s)):s<=e.stopNum&&(e.arrayPos++,e.arrayPos===e.strings.length?(e.arrayPos=0,e.options.onLastStringBackspaced(),e.shuffleStringsIfNeeded(),e.begin()):e.typewrite(e.strings[e.sequence[e.arrayPos]],s))},i)}else this.setPauseStatus(t,s,!1)},s.complete=function(){this.options.onComplete(this),this.loop?this.curLoop++:this.typingComplete=!0},s.setPauseStatus=function(t,s,e){this.pause.typewrite=e,this.pause.curString=t,this.pause.curStrPos=s},s.toggleBlinking=function(t){this.cursor&&(this.pause.status||this.cursorBlinking!==t&&(this.cursorBlinking=t,t?this.cursor.classList.add("typed-cursor--blink"):this.cursor.classList.remove("typed-cursor--blink")))},s.humanizer=function(t){return Math.round(Math.random()*t/2)+t},s.shuffleStringsIfNeeded=function(){this.shuffle&&(this.sequence=this.sequence.sort(function(){return Math.random()-.5}))},s.initFadeOut=function(){var t=this;return this.el.className+=" "+this.fadeOutClass,this.cursor&&(this.cursor.className+=" "+this.fadeOutClass),setTimeout(function(){t.arrayPos++,t.replaceText(""),t.strings.length>t.arrayPos?t.typewrite(t.strings[t.sequence[t.arrayPos]],0):(t.typewrite(t.strings[0],0),t.arrayPos=0)},this.fadeOutDelay)},s.replaceText=function(t){this.attr?this.el.setAttribute(this.attr,t):this.isInput?this.el.value=t:"html"===this.contentType?this.el.innerHTML=t:this.el.textContent=t},s.bindFocusEvents=function(){var t=this;this.isInput&&(this.el.addEventListener("focus",function(s){t.stop()}),this.el.addEventListener("blur",function(s){t.el.value&&0!==t.el.value.length||t.start()}))},s.insertCursor=function(){this.showCursor&&(this.cursor||(this.cursor=document.createElement("span"),this.cursor.className="typed-cursor",this.cursor.setAttribute("aria-hidden",!0),this.cursor.innerHTML=this.cursorChar,this.el.parentNode&&this.el.parentNode.insertBefore(this.cursor,this.el.nextSibling)))},t}()});
|
||||
//# sourceMappingURL=typed.umd.js.map
|
||||
1
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/dist/typed.umd.js.map
vendored
Normal file
1
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/dist/typed.umd.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
257
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/index.d.ts
vendored
Normal file
257
EnvelopeGenerator.Web/wwwroot/lib/typed.js@2.1.0/index.d.ts
vendored
Normal file
@@ -0,0 +1,257 @@
|
||||
/**
|
||||
* Welcome to Typed.js!
|
||||
* @param {string} elementId HTML element ID _OR_ HTML element
|
||||
* @param {object} options options object
|
||||
* @returns {object} a new Typed object
|
||||
*/
|
||||
|
||||
declare module 'typed.js' {
|
||||
export interface TypedOptions {
|
||||
/**
|
||||
* strings to be typed
|
||||
*/
|
||||
strings?: string[];
|
||||
/**
|
||||
* ID or instance of HTML element of element containing string children
|
||||
*/
|
||||
stringsElement?: string | Element;
|
||||
/**
|
||||
* type speed in milliseconds
|
||||
*/
|
||||
typeSpeed?: number;
|
||||
/**
|
||||
* time before typing starts in milliseconds
|
||||
*/
|
||||
startDelay?: number;
|
||||
/**
|
||||
* backspacing speed in milliseconds
|
||||
*/
|
||||
backSpeed?: number;
|
||||
/**
|
||||
* only backspace what doesn't match the previous string
|
||||
*/
|
||||
smartBackspace?: boolean;
|
||||
/**
|
||||
* shuffle the strings
|
||||
*/
|
||||
shuffle?: boolean;
|
||||
/**
|
||||
* time before backspacing in milliseconds
|
||||
*/
|
||||
backDelay?: number;
|
||||
/**
|
||||
* Fade out instead of backspace
|
||||
*/
|
||||
fadeOut?: boolean;
|
||||
/**
|
||||
* css class for fade animation
|
||||
*/
|
||||
fadeOutClass?: string;
|
||||
/**
|
||||
* Fade out delay in milliseconds
|
||||
*/
|
||||
fadeOutDelay?: number;
|
||||
/**
|
||||
* loop strings
|
||||
*/
|
||||
loop?: boolean;
|
||||
/**
|
||||
* amount of loops
|
||||
*/
|
||||
loopCount?: number;
|
||||
/**
|
||||
* show cursor
|
||||
*/
|
||||
showCursor?: boolean;
|
||||
/**
|
||||
* character for cursor
|
||||
*/
|
||||
cursorChar?: string;
|
||||
/**
|
||||
* insert CSS for cursor and fadeOut into HTML
|
||||
*/
|
||||
autoInsertCss?: boolean;
|
||||
/**
|
||||
* attribute for typing Ex: input placeholder, value, or just HTML text
|
||||
*/
|
||||
attr?: string;
|
||||
/**
|
||||
* bind to focus and blur if el is text input
|
||||
*/
|
||||
bindInputFocusEvents?: boolean;
|
||||
/**
|
||||
* 'html' or 'null' for plaintext
|
||||
*/
|
||||
contentType?: string;
|
||||
/**
|
||||
* Before it begins typing the first string
|
||||
*/
|
||||
onBegin?(self: Typed): void;
|
||||
/**
|
||||
* All typing is complete
|
||||
*/
|
||||
onComplete?(self: Typed): void;
|
||||
/**
|
||||
* Before each string is typed
|
||||
*/
|
||||
preStringTyped?(arrayPos: number, self: Typed): void;
|
||||
/**
|
||||
* After each string is typed
|
||||
*/
|
||||
onStringTyped?(arrayPos: number, self: Typed): void;
|
||||
/**
|
||||
* During looping, after last string is typed
|
||||
*/
|
||||
onLastStringBackspaced?(self: Typed): void;
|
||||
/**
|
||||
* Typing has been stopped
|
||||
*/
|
||||
onTypingPaused?(arrayPos: number, self: Typed): void;
|
||||
/**
|
||||
* Typing has been started after being stopped
|
||||
*/
|
||||
onTypingResumed?(arrayPos: number, self: Typed): void;
|
||||
/**
|
||||
* After reset
|
||||
*/
|
||||
onReset?(self: Typed): void;
|
||||
/**
|
||||
* After stop
|
||||
*/
|
||||
onStop?(arrayPos: number, self: Typed): void;
|
||||
/**
|
||||
* After start
|
||||
*/
|
||||
onStart?(arrayPos: number, self: Typed): void;
|
||||
/**
|
||||
* After destroy
|
||||
*/
|
||||
onDestroy?(self: Typed): void;
|
||||
}
|
||||
|
||||
export default class Typed {
|
||||
constructor(elementId: any, options: TypedOptions);
|
||||
/**
|
||||
* Toggle start() and stop() of the Typed instance
|
||||
* @public
|
||||
*/
|
||||
public toggle(): void;
|
||||
/**
|
||||
* Stop typing / backspacing and enable cursor blinking
|
||||
* @public
|
||||
*/
|
||||
public stop(): void;
|
||||
/**
|
||||
* Start typing / backspacing after being stopped
|
||||
* @public
|
||||
*/
|
||||
public start(): void;
|
||||
/**
|
||||
* Destroy this instance of Typed
|
||||
* @public
|
||||
*/
|
||||
public destroy(): void;
|
||||
/**
|
||||
* Reset Typed and optionally restarts
|
||||
* @param {boolean} restart
|
||||
* @public
|
||||
*/
|
||||
public reset(restart?: boolean): void;
|
||||
cursor: HTMLSpanElement;
|
||||
strPos: number;
|
||||
arrayPos: number;
|
||||
curLoop: number;
|
||||
/**
|
||||
* Begins the typing animation
|
||||
* @private
|
||||
*/
|
||||
private begin;
|
||||
typingComplete: boolean;
|
||||
timeout: any;
|
||||
/**
|
||||
* Called for each character typed
|
||||
* @param {string} curString the current string in the strings array
|
||||
* @param {number} curStrPos the current position in the curString
|
||||
* @private
|
||||
*/
|
||||
private typewrite;
|
||||
temporaryPause: boolean;
|
||||
/**
|
||||
* Continue to the next string & begin typing
|
||||
* @param {string} curString the current string in the strings array
|
||||
* @param {number} curStrPos the current position in the curString
|
||||
* @private
|
||||
*/
|
||||
private keepTyping;
|
||||
/**
|
||||
* We're done typing the current string
|
||||
* @param {string} curString the current string in the strings array
|
||||
* @param {number} curStrPos the current position in the curString
|
||||
* @private
|
||||
*/
|
||||
private doneTyping;
|
||||
/**
|
||||
* Backspaces 1 character at a time
|
||||
* @param {string} curString the current string in the strings array
|
||||
* @param {number} curStrPos the current position in the curString
|
||||
* @private
|
||||
*/
|
||||
private backspace;
|
||||
stopNum: number;
|
||||
/**
|
||||
* Full animation is complete
|
||||
* @private
|
||||
*/
|
||||
private complete;
|
||||
/**
|
||||
* Has the typing been stopped
|
||||
* @param {string} curString the current string in the strings array
|
||||
* @param {number} curStrPos the current position in the curString
|
||||
* @param {boolean} isTyping
|
||||
* @private
|
||||
*/
|
||||
private setPauseStatus;
|
||||
/**
|
||||
* Toggle the blinking cursor
|
||||
* @param {boolean} isBlinking
|
||||
* @private
|
||||
*/
|
||||
private toggleBlinking;
|
||||
cursorBlinking: any;
|
||||
/**
|
||||
* Speed in MS to type
|
||||
* @param {number} speed
|
||||
* @private
|
||||
*/
|
||||
private humanizer;
|
||||
/**
|
||||
* Shuffle the sequence of the strings array
|
||||
* @private
|
||||
*/
|
||||
private shuffleStringsIfNeeded;
|
||||
sequence: any;
|
||||
/**
|
||||
* Adds a CSS class to fade out current string
|
||||
* @private
|
||||
*/
|
||||
private initFadeOut;
|
||||
/**
|
||||
* Replaces current text in the HTML element
|
||||
* depending on element type
|
||||
* @param {string} str
|
||||
* @private
|
||||
*/
|
||||
private replaceText;
|
||||
/**
|
||||
* If using input elements, bind focus in order to
|
||||
* start and stop the animation
|
||||
* @private
|
||||
*/
|
||||
private bindFocusEvents;
|
||||
/**
|
||||
* On init, insert the cursor element
|
||||
* @private
|
||||
*/
|
||||
private insertCursor;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "typed.js",
|
||||
"version": "2.1.0",
|
||||
"homepage": "https://github.com/mattboldt/typed.js",
|
||||
"repository": "https://github.com/mattboldt/typed.js",
|
||||
"license": "MIT",
|
||||
"author": "Matt Boldt",
|
||||
"description": "A JavaScript Typing Animation Library",
|
||||
"type": "module",
|
||||
"source": "src/typed.js",
|
||||
"types": "./index.d.ts",
|
||||
"files": [
|
||||
"dist",
|
||||
"index.d.ts"
|
||||
],
|
||||
"exports": {
|
||||
"require": "./dist/typed.cjs",
|
||||
"import": "./dist/typed.module.js",
|
||||
"types": "./index.d.ts"
|
||||
},
|
||||
"main": "./dist/typed.cjs",
|
||||
"module": "./dist/typed.module.js",
|
||||
"unpkg": "./dist/typed.umd.js",
|
||||
"keywords": [
|
||||
"typed",
|
||||
"animation"
|
||||
],
|
||||
"devDependencies": {
|
||||
"microbundle": "^0.15.1"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "microbundle --name=Typed",
|
||||
"dev": "microbundle --name=Typed watch",
|
||||
"diff": "git diff -- ':^docs'"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user