alessioalex/index.html

## 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>

## 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;
}

## 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;

}());
	<!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>