Skip to content

Instantly share code, notes, and snippets.

@alessioalex

alessioalex/index.html

Created August 22, 2021 22:10
Show Gist options
  • Save alessioalex/813d25f4c5ef10b8577c46b1d1da0f72 to your computer and use it in GitHub Desktop.
Save alessioalex/813d25f4c5ef10b8577c46b1d1da0f72 to your computer and use it in GitHub Desktop.
Download ZIP
Multiple docs opened in parallel // source https://jsbin.com/xogirokofe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Multiple docs opened in parallel</title>
<style id="jsbin-css">
html, body, .container {
height: 100%;
}
html, body, .container, ul, li, iframe {
margin: 0;
padding: 0;
border: 0;
}
ul {
list-style: none;
}
nav {
width: 20rem;
flex-direction: column;
padding: 1rem;
}
.container, nav {
display: flex;
}
.link {
margin-bottom: 0.25rem;
}
.link a {
color: rgb(107, 114, 128);
text-decoration: none;
font-size: 1.25rem;
line-height: 1.75rem;
}
.link:not(.open-doc) a:hover {
border-bottom: 2px solid rgb(17, 24, 39);
}
.open-doc {
color: rgb(17, 24, 39);
font-weight: 800;
border-bottom: 1px solid rgb(229, 231, 235);
}
.open-doc a:hover {
opacity: 0.9;
}
.doc .selected {
border-bottom: 2px solid rgb(107, 114, 128);
}
main {
width: 100%;
display: flex;
}
iframe {
width: 100%;
margin: 1rem;
border: 1px solid rgb(107, 114, 128);
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: auto;
z-index: 99;
background: rgb(243, 244, 246);
display: flex;
justify-content: center;
align-items: center;
}
.modal {
max-width: 30rem;
background: #FFF;
padding: 2rem;
font-weight: 800;
border: 1px solid rgb(229, 231, 235);
}
.modal input {
display: block;
width: 100%;
margin: 1rem 0;
}
iframe, .overlay, .hidden {
display: none;
}
iframe.opened {
display: block;
}
.overlay.opened {
display: flex;
}
</style>
</head>
<body>
<div class="container">
<div class="overlay opened">
<div class="modal">
<p>What file do you want to open? (enter absolute file path)</p>
<form>
<input type="text" name="path"
pattern="(.+)\.[0-9a-zA-Z]{2,5}$"
placeholder="/home/your-username/Documents/Spreadsheet.ods" />
<button type="submit">Open</button>
<button class="js-cancel hidden">Cancel</button>
</form>
</div>
</div>
<nav>
<ul>
<li class="link open-doc">
<a href="#">Add new Document</a>
</li>
<li class="link doc">
<a href="#" class="selected">Budget-2020.ods</a>
</li>
<li class="link">
<a href="#">Budget-2021.ods</a>
</li>
</ul>
</nav>
<main>
<!-- doc iframes go here -->
<iframe id="doc-1">Content iframe 2</iframe>
<iframe id="doc-2">Content iframe 2</iframe>
<iframe id="doc-3" class="opened">Content iframe 2</iframe>
<iframe id="doc-4">Content iframe 2</iframe>
<iframe id="doc-5">Content iframe 2</iframe>
</main>
</div>
<script id="jsbin-javascript">
(function() {
var openedDocs = 0;
function openDocument(path) {
console.log('opening document ' + path);
openedDocs++;
}
function toggleModal() {
if (openedDocs > 0) {
document.querySelector('.js-cancel').classList.remove('hidden');
}
var overlayEl = document.querySelector('.overlay');
var operation = overlayEl.classList.contains('opened') ? 'remove' : 'add';
console.log('toggling modal ' + operation);
overlayEl.classList[operation]('opened');
}
function load() {
var formEl = document.querySelector('.modal form');
formEl.addEventListener('submit', function(evt) {
evt.preventDefault();
var pathEl = formEl.querySelector('[name=path]');
openDocument(pathEl.value);
pathEl.value = '';
toggleModal();
});
document.querySelector('.open-doc a').addEventListener('click', function(evt) {
evt.preventDefault();
toggleModal();
});
}
window.onload = load;
}());
</script>
<script id="jsbin-source-css" type="text/css">html, body, .container {
height: 100%;
}
html, body, .container, ul, li, iframe {
margin: 0;
padding: 0;
border: 0;
}
ul {
list-style: none;
}
nav {
width: 20rem;
flex-direction: column;
padding: 1rem;
}
.container, nav {
display: flex;
}
.link {
margin-bottom: 0.25rem;
}
.link a {
color: rgb(107, 114, 128);
text-decoration: none;
font-size: 1.25rem;
line-height: 1.75rem;
}
.link:not(.open-doc) a:hover {
border-bottom: 2px solid rgb(17, 24, 39);
}
.open-doc {
color: rgb(17, 24, 39);
font-weight: 800;
border-bottom: 1px solid rgb(229, 231, 235);
}
.open-doc a:hover {
opacity: 0.9;
}
.doc .selected {
border-bottom: 2px solid rgb(107, 114, 128);
}
main {
width: 100%;
display: flex;
}
iframe {
width: 100%;
margin: 1rem;
border: 1px solid rgb(107, 114, 128);
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: auto;
z-index: 99;
background: rgb(243, 244, 246);
display: flex;
justify-content: center;
align-items: center;
}
.modal {
max-width: 30rem;
background: #FFF;
padding: 2rem;
font-weight: 800;
border: 1px solid rgb(229, 231, 235);
}
.modal input {
display: block;
width: 100%;
margin: 1rem 0;
}
iframe, .overlay, .hidden {
display: none;
}
iframe.opened {
display: block;
}
.overlay.opened {
display: flex;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">(function() {
var openedDocs = 0;
function openDocument(path) {
console.log('opening document ' + path);
openedDocs++;
}
function toggleModal() {
if (openedDocs > 0) {
document.querySelector('.js-cancel').classList.remove('hidden');
}
var overlayEl = document.querySelector('.overlay');
var operation = overlayEl.classList.contains('opened') ? 'remove' : 'add';
console.log('toggling modal ' + operation);
overlayEl.classList[operation]('opened');
}
function load() {
var formEl = document.querySelector('.modal form');
formEl.addEventListener('submit', function(evt) {
evt.preventDefault();
var pathEl = formEl.querySelector('[name=path]');
openDocument(pathEl.value);
pathEl.value = '';
toggleModal();
});
document.querySelector('.open-doc a').addEventListener('click', function(evt) {
evt.preventDefault();
toggleModal();
});
}
window.onload = load;
}());</script></body>
</html>
Raw
jsbin.xogirokofe.css
html, body, .container {
height: 100%;
}
html, body, .container, ul, li, iframe {
margin: 0;
padding: 0;
border: 0;
}
ul {
list-style: none;
}
nav {
width: 20rem;
flex-direction: column;
padding: 1rem;
}
.container, nav {
display: flex;
}
.link {
margin-bottom: 0.25rem;
}
.link a {
color: rgb(107, 114, 128);
text-decoration: none;
font-size: 1.25rem;
line-height: 1.75rem;
}
.link:not(.open-doc) a:hover {
border-bottom: 2px solid rgb(17, 24, 39);
}
.open-doc {
color: rgb(17, 24, 39);
font-weight: 800;
border-bottom: 1px solid rgb(229, 231, 235);
}
.open-doc a:hover {
opacity: 0.9;
}
.doc .selected {
border-bottom: 2px solid rgb(107, 114, 128);
}
main {
width: 100%;
display: flex;
}
iframe {
width: 100%;
margin: 1rem;
border: 1px solid rgb(107, 114, 128);
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: auto;
z-index: 99;
background: rgb(243, 244, 246);
display: flex;
justify-content: center;
align-items: center;
}
.modal {
max-width: 30rem;
background: #FFF;
padding: 2rem;
font-weight: 800;
border: 1px solid rgb(229, 231, 235);
}
.modal input {
display: block;
width: 100%;
margin: 1rem 0;
}
iframe, .overlay, .hidden {
display: none;
}
iframe.opened {
display: block;
}
.overlay.opened {
display: flex;
}
Raw
jsbin.xogirokofe.js
(function() {
var openedDocs = 0;
function openDocument(path) {
console.log('opening document ' + path);
openedDocs++;
}
function toggleModal() {
if (openedDocs > 0) {
document.querySelector('.js-cancel').classList.remove('hidden');
}
var overlayEl = document.querySelector('.overlay');
var operation = overlayEl.classList.contains('opened') ? 'remove' : 'add';
console.log('toggling modal ' + operation);
overlayEl.classList[operation]('opened');
}
function load() {
var formEl = document.querySelector('.modal form');
formEl.addEventListener('submit', function(evt) {
evt.preventDefault();
var pathEl = formEl.querySelector('[name=path]');
openDocument(pathEl.value);
pathEl.value = '';
toggleModal();
});
document.querySelector('.open-doc a').addEventListener('click', function(evt) {
evt.preventDefault();
toggleModal();
});
}
window.onload = load;
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment