JSFiddle - React, Tailwind, and code Playground
by Michael Prosser
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
CSS
html{
height: 100%;
}
body{
height: 100%;
font-family: helvetica;
}
.docubin-form-launcher{
position: fixed;
left: 0;
top: 0%;
right: 0;
bottom: 0;
z-index: 9999999;
background-color: rgba(0,0,0,0.5);
}
.docubin-form-launcher>div{
position: fixed;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: 580px;
padding: 20px;
background-color: #fff;
min-width: 280px;
width: 100%;
border-radius: 15px;
}
.docubin-form-launcher>div>h2{
font-size: 21px;
font-weight: normal;
color: #356DB0;
margin: 0;
}
.docubin-form-launcher>div>h2:before{
content: "";
display: inline-block;
width: 28px;
height: 28px;
background-size: auto 100%;
background-image: url(https://agrisphere-portal.com/live/images/dashmenu/icon-permits.png);
vertical-align: middle;
margin-right: 5px;
}
.docubin-form-launcher>div>h2>input{
float: right;
border: solid 1px #ccc;
padding: 6px;
border-radius: 6px;
width: calc(50% - 14px);
font-size: 13px;
}
.docubin-form-launcher>div>h3{
font-size: 15px;
font-weight: normal;
}
.docubin-form-launcher>div>ul{
min-height: 120px;
list-style: none;
margin: 0;
padding: 0;
}
.docubin-form-launcher>div>ul.docubin-forms{
max-height: 150px;
overflow: auto;
}
.docubin-form-launcher>div>ul:empty{
background-color: #eee;
border-radius: 10px;
}
.docubin-form-launcher>div>ul:empty:before{
content: "No Forms Found";
line-height: 120px;
text-align: center;
display: block;
color: #666;
font-size: 12px;
}
.docubin-form-launcher>div>ul.loading:empty:before{
content: "Loading Available Forms";
line-height: 120px;
text-align: center;
display: block;
color: #666;
font-size: 12px;
}
.docubin-form-launcher>div>ul.docubin-forms>li{
width: calc(33.3333% - 32px);
display: inline-block;
padding: 10px;
border: solid 1px #ccc;
margin: 5px;
...
JavaScript
class FormLauncher {
constructor( service, scope, scopeName, docName ){
this.service = service;
this.scope = scope;
this.scopeName = scopeName;
this.docName = docName;
this.element = $('<div class="docubin-form-launcher"><div><h2><span></span><input type="search"></h2><h3 title="Multi-Form Packages">Multi-Form Packages (<span></span>)</h3><ul class="docubin-packages loading"></ul><h3 title="Digital Forms">Digital Forms (<span></span>)</h3><ul class="docubin-forms" loading></ul></div></div>');
this.element.find('h2>span').text(scopeName);
this.element.find('h2>input').attr('placeholder','Search ' + scopeName);
$('body').append(this.element);
this.loadForms();
}
loadForms(){
this.addFormToMenu({
name: "My Form",
encrypted_id: "HEGARYHAERJHEWREA",
orientation: "portrait",
open_behavior: "new-window",
behavior: "single-submission"
});
this.addFormToMenu({
name: "My Form",
encrypted_id: "HEGARYHAERJHEWREA",
orientation: "portrait",
open_behavior: "new-window",
behavior: "single-submission"
});
this.addFormToMenu({
name: "My Form",
encrypted_id: "HEGARYHAERJHEWREA",
orientation: "portrait",
open_behavior: "new-window",
behavior: "single-submission"
});
this.addFormToMenu({
name: "My Form",
encrypted_id: "HEGARYHAERJHEWREA",
orientation: "portrait",
open_behavior: "new-window",
behavior: "single-submission"
});
}
addFormToMenu(data){
let element = $('<li data-form-name="' + data.name + '" data-form-id="' + data.encrypted_id + '"" data-orientation="' + data.orientation + '" data-form-openbehaviour="' + data.open_behavior + '" data-form-behaviour="' + data.behavior + '" data-docname="' + this.docName + '"><div...