|
|
|
|
@ -9,100 +9,287 @@ const MainFormPage = `<!DOCTYPE html>
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/rivet-core@2/css/rivet.min.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<header class="rvt-header-wrapper">
|
|
|
|
|
<!-- Hidden link for keyboard users to skip to main content -->
|
|
|
|
|
<a class="rvt-header-wrapper__skip-link" href="#main-content">Skip to main content</a>
|
|
|
|
|
<div class="rvt-header-global">
|
|
|
|
|
<div class="rvt-container-xl">
|
|
|
|
|
<div class="rvt-header-global__inner">
|
|
|
|
|
<div class="rvt-header-global__logo-slot">
|
|
|
|
|
<a class="rvt-lockup" href="/">
|
|
|
|
|
<!-- Trident logo -->
|
|
|
|
|
<div class="rvt-lockup__tab">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="rvt-lockup__trident" viewBox="0 0 28 34">
|
|
|
|
|
<path d="M-3.34344e-05 4.70897H8.83308V7.174H7.1897V21.1426H10.6134V2.72321H8.83308V0.121224H18.214V2.65476H16.2283V21.1426H19.7889V7.174H18.214V4.64047H27.0471V7.174H25.0614V23.6761L21.7746 26.8944H16.2967V30.455H18.214V33.8787H8.76463V30.592H10.6819V26.8259H5.20403L1.91726 23.6077V7.174H-3.34344e-05V4.70897Z" fill="currentColor"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- Website or application title -->
|
|
|
|
|
<div class="rvt-lockup__body">
|
|
|
|
|
<span class="rvt-lockup__title">Maurer School of Law</span>
|
|
|
|
|
<span class="rvt-lockup__subtitle">Faculty Public Activity Report</span>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
<main class="rvt-container-xl rvt-p-top-xxl rvt-p-bottom-xxl">
|
|
|
|
|
<h1 class="rvt-ts-xxl rvt-m-bottom-xxl">Faculty Public Activity Report</h1>
|
|
|
|
|
|
|
|
|
|
<form method="post">
|
|
|
|
|
|
|
|
|
|
<!-- Scholarship -->
|
|
|
|
|
<fieldset class="rvt-fieldset rvt-m-bottom-xxl">
|
|
|
|
|
<legend class="rvt-ts-xl rvt-m-bottom-sm">Scholarship</legend>
|
|
|
|
|
<p class="rvt-m-bottom-lg">Please enter citations for recent publications here:</p>
|
|
|
|
|
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="scholarship-citation">Citation:</label>
|
|
|
|
|
<textarea class="rvt-input" id="scholarship-citation" name="scholarship_citation" rows="5"></textarea>
|
|
|
|
|
<header class="rvt-header-wrapper">
|
|
|
|
|
<a class="rvt-header-wrapper__skip-link" href="#main-content">Skip to main content</a>
|
|
|
|
|
<div class="rvt-header-global">
|
|
|
|
|
<div class="rvt-container-xl">
|
|
|
|
|
<div class="rvt-header-global__inner">
|
|
|
|
|
<div class="rvt-header-global__logo-slot">
|
|
|
|
|
<a class="rvt-lockup" href="/">
|
|
|
|
|
<div class="rvt-lockup__tab">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="rvt-lockup__trident" viewBox="0 0 28 34">
|
|
|
|
|
<path d="M-3.34344e-05 4.70897H8.83308V7.174H7.1897V21.1426H10.6134V2.72321H8.83308V0.121224H18.214V2.65476H16.2283V21.1426H19.7889V7.174H18.214V4.64047H27.0471V7.174H25.0614V23.6761L21.7746 26.8944H16.2967V30.455H18.214V33.8787H8.76463V30.592H10.6819V26.8259H5.20403L1.91726 23.6077V7.174H-3.34344e-05V4.70897Z" fill="currentColor"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rvt-lockup__body">
|
|
|
|
|
<span class="rvt-lockup__title">Maurer School of Law</span>
|
|
|
|
|
<span class="rvt-lockup__subtitle">Faculty Public Activity Report</span>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="scholarship-hyperlink">Hyperlink (if available):</label>
|
|
|
|
|
<input class="rvt-input" type="url" id="scholarship-hyperlink" name="scholarship_hyperlink">
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<main id="main-content" class="rvt-container-xl rvt-p-top-xxl rvt-p-bottom-xxl">
|
|
|
|
|
|
|
|
|
|
<!-- Talks and Activities -->
|
|
|
|
|
<fieldset class="rvt-fieldset rvt-m-bottom-xxl">
|
|
|
|
|
<legend class="rvt-ts-xl rvt-m-bottom-sm">Talks and Activities</legend>
|
|
|
|
|
<p class="rvt-m-bottom-lg">Please tell us about any recent talks and activities here:</p>
|
|
|
|
|
<!-- Input view -->
|
|
|
|
|
<div id="input-view">
|
|
|
|
|
<h1 class="rvt-ts-xxl rvt-m-bottom-xxl">Faculty Public Activity Report</h1>
|
|
|
|
|
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="talks-title">Title:</label>
|
|
|
|
|
<input class="rvt-input" type="text" id="talks-title" name="talks_title">
|
|
|
|
|
</div>
|
|
|
|
|
<form method="post" id="report-form">
|
|
|
|
|
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="talks-description">Description:</label>
|
|
|
|
|
<textarea class="rvt-input" id="talks-description" name="talks_description" rows="5"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- Scholarship -->
|
|
|
|
|
<fieldset class="rvt-fieldset rvt-m-bottom-xxl">
|
|
|
|
|
<legend class="rvt-ts-xl rvt-m-bottom-sm">Scholarship</legend>
|
|
|
|
|
<p class="rvt-m-bottom-lg">Please enter citations for recent publications here:</p>
|
|
|
|
|
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="talks-hyperlink">Hyperlink (if available):</label>
|
|
|
|
|
<input class="rvt-input" type="url" id="talks-hyperlink" name="talks_hyperlink">
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<div class="section-summary rvt-m-bottom-lg" style="display:none"></div>
|
|
|
|
|
|
|
|
|
|
<!-- Media Appearances -->
|
|
|
|
|
<fieldset class="rvt-fieldset rvt-m-bottom-xxl">
|
|
|
|
|
<legend class="rvt-ts-xl rvt-m-bottom-sm">Media Appearances</legend>
|
|
|
|
|
<p class="rvt-m-bottom-lg">Please tell us about any recent media appearances you have made:</p>
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="scholarship-citation">Citation:</label>
|
|
|
|
|
<textarea class="rvt-input" id="scholarship-citation" name="scholarship_citation" rows="5"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="media-title">Title:</label>
|
|
|
|
|
<input class="rvt-input" type="text" id="media-title" name="media_title">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="scholarship-hyperlink">Hyperlink (if available):</label>
|
|
|
|
|
<input class="rvt-input" type="url" id="scholarship-hyperlink" name="scholarship_hyperlink">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="media-description">Description:</label>
|
|
|
|
|
<textarea class="rvt-input" id="media-description" name="media_description" rows="5"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="section-save-btn" style="display:none">
|
|
|
|
|
<button class="rvt-button rvt-button--secondary" type="button">Save Item</button>
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="media-hyperlink">Hyperlink (if available):</label>
|
|
|
|
|
<input class="rvt-input" type="url" id="media-hyperlink" name="media_hyperlink">
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<!-- Talks and Activities -->
|
|
|
|
|
<fieldset class="rvt-fieldset rvt-m-bottom-xxl">
|
|
|
|
|
<legend class="rvt-ts-xl rvt-m-bottom-sm">Talks and Activities</legend>
|
|
|
|
|
<p class="rvt-m-bottom-lg">Please tell us about any recent talks and activities here:</p>
|
|
|
|
|
|
|
|
|
|
<div class="section-summary rvt-m-bottom-lg" style="display:none"></div>
|
|
|
|
|
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="talks-title">Title:</label>
|
|
|
|
|
<input class="rvt-input" type="text" id="talks-title" name="talks_title">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="talks-description">Description:</label>
|
|
|
|
|
<textarea class="rvt-input" id="talks-description" name="talks_description" rows="5"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="talks-hyperlink">Hyperlink (if available):</label>
|
|
|
|
|
<input class="rvt-input" type="url" id="talks-hyperlink" name="talks_hyperlink">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="section-save-btn" style="display:none">
|
|
|
|
|
<button class="rvt-button rvt-button--secondary" type="button">Save Item</button>
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
|
|
|
|
|
<button class="rvt-button" type="submit">Review and Submit</button>
|
|
|
|
|
<!-- Media Appearances -->
|
|
|
|
|
<fieldset class="rvt-fieldset rvt-m-bottom-xxl">
|
|
|
|
|
<legend class="rvt-ts-xl rvt-m-bottom-sm">Media Appearances</legend>
|
|
|
|
|
<p class="rvt-m-bottom-lg">Please tell us about any recent media appearances you have made:</p>
|
|
|
|
|
|
|
|
|
|
<div class="section-summary rvt-m-bottom-lg" style="display:none"></div>
|
|
|
|
|
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="media-title">Title:</label>
|
|
|
|
|
<input class="rvt-input" type="text" id="media-title" name="media_title">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="media-description">Description:</label>
|
|
|
|
|
<textarea class="rvt-input" id="media-description" name="media_description" rows="5"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="rvt-m-bottom-lg">
|
|
|
|
|
<label class="rvt-label" for="media-hyperlink">Hyperlink (if available):</label>
|
|
|
|
|
<input class="rvt-input" type="url" id="media-hyperlink" name="media_hyperlink">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="section-save-btn" style="display:none">
|
|
|
|
|
<button class="rvt-button rvt-button--secondary" type="button">Save Item</button>
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
|
|
|
|
|
<button class="rvt-button" type="button" id="review-btn">Review and Submit</button>
|
|
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Review view -->
|
|
|
|
|
<div id="review-view" style="display:none">
|
|
|
|
|
<h1 class="rvt-ts-xxl rvt-m-bottom-lg">Review Your Submission</h1>
|
|
|
|
|
<p class="rvt-m-bottom-xxl">These are the items you have entered. If you would like to edit or remove any of these items, click on “Return to Input”. If you are satisfied with them and would like to submit them to the Associate Dean for Research and Faculty Affairs, please click “Submit”.</p>
|
|
|
|
|
<div id="review-content" class="rvt-m-bottom-xxl"></div>
|
|
|
|
|
<div style="display:flex; gap:1rem; flex-wrap:wrap;">
|
|
|
|
|
<button class="rvt-button rvt-button--secondary" type="button" id="return-btn">Return to Input</button>
|
|
|
|
|
<button class="rvt-button" type="button" id="submit-btn">Submit</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Confirmation view -->
|
|
|
|
|
<div id="confirm-view" style="display:none">
|
|
|
|
|
<h1 class="rvt-ts-xxl rvt-m-bottom-lg">Thank You!</h1>
|
|
|
|
|
<p class="rvt-ts-lg">Thank you for keeping us up to date! Your items have been submitted for review. If you have questions, concerns or additional information to provide, please contact the Associate Dean for Research and Faculty Affairs.</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/rivet-core@2/js/rivet.min.js"></script>
|
|
|
|
|
<script type="module" src="https://unpkg.com/rivet-icons@3/dist/rivet-icons.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
|
|
|
|
|
// Per-fieldset save item behavior
|
|
|
|
|
document.querySelectorAll('fieldset').forEach(function(fieldset) {
|
|
|
|
|
var fields = fieldset.querySelectorAll('input, textarea');
|
|
|
|
|
var saveBtnWrapper = fieldset.querySelector('.section-save-btn');
|
|
|
|
|
var summaryArea = fieldset.querySelector('.section-summary');
|
|
|
|
|
|
|
|
|
|
function hasAnyContent() {
|
|
|
|
|
return Array.prototype.some.call(fields, function(f) {
|
|
|
|
|
return f.value.trim() !== '';
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
fields.forEach(function(field) {
|
|
|
|
|
field.addEventListener('blur', function() {
|
|
|
|
|
if (saveBtnWrapper) {
|
|
|
|
|
saveBtnWrapper.style.display = hasAnyContent() ? 'block' : 'none';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (saveBtnWrapper) {
|
|
|
|
|
saveBtnWrapper.querySelector('button').addEventListener('click', function() {
|
|
|
|
|
var savedValues = {};
|
|
|
|
|
fields.forEach(function(field) {
|
|
|
|
|
savedValues[field.id] = field.value.trim();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var itemDiv = document.createElement('div');
|
|
|
|
|
itemDiv.style.cssText = 'display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid #ddd; padding-bottom:0.5rem; margin-bottom:0.5rem;';
|
|
|
|
|
|
|
|
|
|
var contentDiv = document.createElement('div');
|
|
|
|
|
contentDiv.className = 'item-content';
|
|
|
|
|
fields.forEach(function(field) {
|
|
|
|
|
var value = savedValues[field.id];
|
|
|
|
|
if (!value) return;
|
|
|
|
|
var label = fieldset.querySelector('label[for="' + field.id + '"]');
|
|
|
|
|
var labelText = label ? label.textContent : field.name;
|
|
|
|
|
|
|
|
|
|
var p = document.createElement('p');
|
|
|
|
|
p.className = 'rvt-m-bottom-xxs';
|
|
|
|
|
var strong = document.createElement('strong');
|
|
|
|
|
strong.textContent = labelText + ' ';
|
|
|
|
|
p.appendChild(strong);
|
|
|
|
|
p.appendChild(document.createTextNode(value));
|
|
|
|
|
contentDiv.appendChild(p);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var iconBtnStyle = 'background:none; border:none; cursor:pointer; padding:0; flex-shrink:0; margin-left:0.5rem;';
|
|
|
|
|
|
|
|
|
|
var pencilBtn = document.createElement('button');
|
|
|
|
|
pencilBtn.type = 'button';
|
|
|
|
|
pencilBtn.setAttribute('aria-label', 'Edit item');
|
|
|
|
|
pencilBtn.style.cssText = iconBtnStyle + ' color:#555;';
|
|
|
|
|
var pencilIcon = document.createElement('rvt-icon');
|
|
|
|
|
pencilIcon.setAttribute('name', 'pencil-solid');
|
|
|
|
|
pencilBtn.appendChild(pencilIcon);
|
|
|
|
|
pencilBtn.addEventListener('click', function() {
|
|
|
|
|
fields.forEach(function(field) {
|
|
|
|
|
field.value = savedValues[field.id] || '';
|
|
|
|
|
});
|
|
|
|
|
itemDiv.remove();
|
|
|
|
|
if (summaryArea.children.length === 0) {
|
|
|
|
|
summaryArea.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
saveBtnWrapper.style.display = 'block';
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var deleteBtn = document.createElement('button');
|
|
|
|
|
deleteBtn.type = 'button';
|
|
|
|
|
deleteBtn.setAttribute('aria-label', 'Remove item');
|
|
|
|
|
deleteBtn.style.cssText = iconBtnStyle + ' color:#c00;';
|
|
|
|
|
var trashIcon = document.createElement('rvt-icon');
|
|
|
|
|
trashIcon.setAttribute('name', 'trash-solid');
|
|
|
|
|
deleteBtn.appendChild(trashIcon);
|
|
|
|
|
deleteBtn.addEventListener('click', function() {
|
|
|
|
|
itemDiv.remove();
|
|
|
|
|
if (summaryArea.children.length === 0) {
|
|
|
|
|
summaryArea.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var iconGroup = document.createElement('div');
|
|
|
|
|
iconGroup.style.cssText = 'display:flex; align-items:center; flex-shrink:0; margin-left:1rem;';
|
|
|
|
|
iconGroup.appendChild(pencilBtn);
|
|
|
|
|
iconGroup.appendChild(deleteBtn);
|
|
|
|
|
|
|
|
|
|
itemDiv.appendChild(contentDiv);
|
|
|
|
|
itemDiv.appendChild(iconGroup);
|
|
|
|
|
summaryArea.appendChild(itemDiv);
|
|
|
|
|
summaryArea.style.display = 'block';
|
|
|
|
|
|
|
|
|
|
fields.forEach(function(f) { f.value = ''; });
|
|
|
|
|
saveBtnWrapper.style.display = 'none';
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Review and Submit button
|
|
|
|
|
document.getElementById('review-btn').addEventListener('click', function() {
|
|
|
|
|
var reviewContent = document.getElementById('review-content');
|
|
|
|
|
reviewContent.innerHTML = '';
|
|
|
|
|
|
|
|
|
|
document.querySelectorAll('fieldset').forEach(function(fieldset) {
|
|
|
|
|
var summaryArea = fieldset.querySelector('.section-summary');
|
|
|
|
|
if (!summaryArea || summaryArea.children.length === 0) return;
|
|
|
|
|
|
|
|
|
|
var legend = fieldset.querySelector('legend');
|
|
|
|
|
var sectionName = legend ? legend.textContent.trim() : '';
|
|
|
|
|
|
|
|
|
|
var sectionDiv = document.createElement('div');
|
|
|
|
|
sectionDiv.className = 'rvt-m-bottom-xl';
|
|
|
|
|
|
|
|
|
|
var heading = document.createElement('h2');
|
|
|
|
|
heading.className = 'rvt-ts-lg rvt-m-bottom-md';
|
|
|
|
|
heading.textContent = sectionName;
|
|
|
|
|
sectionDiv.appendChild(heading);
|
|
|
|
|
|
|
|
|
|
Array.prototype.forEach.call(summaryArea.children, function(itemDiv) {
|
|
|
|
|
var contentDiv = itemDiv.querySelector('.item-content');
|
|
|
|
|
if (!contentDiv) return;
|
|
|
|
|
var clone = contentDiv.cloneNode(true);
|
|
|
|
|
clone.style.cssText = 'border-bottom:1px solid #ddd; padding-bottom:0.5rem; margin-bottom:0.5rem;';
|
|
|
|
|
sectionDiv.appendChild(clone);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
reviewContent.appendChild(sectionDiv);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById('input-view').style.display = 'none';
|
|
|
|
|
document.getElementById('review-view').style.display = 'block';
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Return to Input button
|
|
|
|
|
document.getElementById('return-btn').addEventListener('click', function() {
|
|
|
|
|
document.getElementById('review-view').style.display = 'none';
|
|
|
|
|
document.getElementById('input-view').style.display = 'block';
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Submit button
|
|
|
|
|
document.getElementById('submit-btn').addEventListener('click', function() {
|
|
|
|
|
document.getElementById('review-view').style.display = 'none';
|
|
|
|
|
document.getElementById('confirm-view').style.display = 'block';
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>`
|
|
|
|
|
|
|
|
|
|
|