@concord-consortium/cloud-file-manager 2.0.0-pre.1

package/dist/autolaunch/autolaunch.css

@@ -0,0 +1,220 @@
+#autolaunch_iframe {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: none;
+}
+.center {
+  text-align: center;
+}
+.data-select-dialog {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.data-select-dialog .header {
+  background: #214d5a;
+  width: 100%;
+  color: white;
+  font-size: 1.5em;
+  padding: 5px;
+  text-align: center;
+}
+.data-select-dialog .content {
+  background: white;
+  margin-top: 8px;
+  padding: 0;
+  font-size: 18px;
+  color: #666;
+  overflow: hidden;
+}
+.data-select-dialog #question {
+  padding: 5px 25px;
+  text-align: center;
+}
+.data-select-dialog .versions {
+  text-align: center;
+}
+.data-select-dialog .version-info {
+  display: inline-block;
+  width: 45%;
+  margin: 2% 10px;
+}
+.data-select-dialog table.version-desc {
+  width: 100%;
+  border: none;
+}
+.data-select-dialog table.version-desc td {
+  padding: 5px;
+  font-size: 14px;
+}
+.data-select-dialog table.version-desc th {
+  width: 100px;
+  font-weight: normal;
+}
+.data-select-dialog .prop {
+  font-weight: bold;
+}
+.data-select-dialog .dialog-button {
+  background: #82bec8;
+  border-radius: 5px;
+  text-align: center;
+  padding: 6px 10px;
+  margin: 10px;
+  width: auto;
+  display: inline-block;
+  color: white;
+  cursor: pointer;
+}
+.data-select-dialog .dialog-button:hover {
+  background: #679aa1;
+}
+.data-select-dialog .iframe-wrapper {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.data-select-dialog .preview {
+  width: 100%;
+  height: 250px;
+  cursor: pointer;
+}
+.data-select-dialog .preview:hover {
+  box-shadow: 2px 2px 4px #aaa;
+}
+.data-select-dialog .preview-label {
+  font-size: 14px;
+  padding: 5px;
+  cursor: pointer;
+}
+.data-select-dialog .preview-label:hover {
+  color: #333;
+}
+.data-select-dialog .preview-active {
+  position: fixed;
+  top: 40px;
+  left: 3%;
+  width: 94%;
+  height: 90%;
+  z-index: 100;
+  cursor: pointer;
+}
+@media (max-width: 1200px) {
+  .data-select-dialog .preview-active iframe {
+    width: 150%;
+    height: 150%;
+    transform: scale3d(0.666666, 0.666666, 1);
+ }
+}
+@media (min-width: 1200px) {
+  .data-select-dialog .preview-active iframe {
+    width: 100%;
+    height: 100%;
+    transform: scale3d(1, 1, 1);
+ }
+}
+.data-select-dialog .overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 90;
+  background: #6ca0a9;
+  padding-top: 10px;
+  font-size: 20px;
+  color: white;
+  text-align: center;
+  cursor: pointer;
+}
+.data-select-dialog iframe {
+  width: 300%;
+  height: 300%;
+  transform: scale3d(0.333333, 0.333333, 1);
+  transform-origin: left top;
+  border: solid 1px;
+}
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #b6e2eb;
+  padding-top: 50px;
+}
+.loading-overlay table {
+  width: 600px;
+  margin: 0 auto;
+  border: none;
+}
+.loading-overlay table td {
+  padding: 5px;
+  font-size: 15px;
+}
+.loading-overlay table th {
+  width: 100px;
+  font-weight: normal;
+}
+.loading-overlay .loading-text {
+  font-size: 21px;
+  vertical-align: middle;
+  color: #555;
+}
+#copy-overlay {
+  display: none;
+}
+#fullscreen-help {
+  display: none;
+  position: fixed;
+  left: 0;
+  bottom: 12px;
+  height: 40px;
+  width: calc(100% - 70px);
+  text-align: right;
+  line-height: 36px;
+  font-size: 0;
+  color: #8e8e8e;
+  text-shadow: 1px 1px 5px #fff;
+}
+#fullscreen-help.hidden {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 1.5s ease-out 2s, visibility 0.01s linear 3.5s;
+}
+.fullscreen-icon {
+  display: none;
+  font-size: 45px;
+  height: 50px;
+  width: 50px;
+  background-size: 50px;
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  z-index: 10000;
+  cursor: pointer;
+  background-image: url("../img/fullscreen.svg");
+  background-color: transparent;
+  background-repeat: no-repeat;
+  border-radius: 0;
+  color: transparent;
+}
+.fullscreen-icon:hover {
+  background-image: url("../img/fullscreen-dark.svg");
+}
+.fullscreen-icon.fullscreen {
+  background-image: url("../img/fullscreen-exit.svg");
+}
+.fullscreen-icon.fullscreen:hover {
+  background-image: url("../img/fullscreen-exit-dark.svg");
+}

package/dist/autolaunch/autolaunch.html

@@ -0,0 +1,133 @@
+<html>
+
+<head>
+  <Title>CFM AutoLauching Interactive</Title>
+  <link rel="stylesheet" href="./autolaunch.css">
+  <script src="./autolaunch.js"></script>
+</head>
+<body>
+<div class='row launch-error'>
+  <div class='small-12 text-center columns'>
+    There was a problem setting up this interactive. Please try refreshing your page.
+  </div>
+</div>
+<div class='loading-overlay'>
+  <div class='center'>
+    <img src="../img/loading.gif" alt="loading-spinner"/>
+    <span class='loading-text'>
+      Loading interactive...
+    </span>
+  </div>
+</div>
+<iframe id='autolaunch_iframe'></iframe>
+<div id='fullscreen-help'>
+  Click here to enter/exit fullscreen →
+</div>
+<div class='fullscreen-icon'></div>
+<div class='loading-overlay' id='copy-overlay'>
+  <div class='center'>
+    <img src="../img/loading.gif" alt="loading-spinner"/>
+    <span class='loading-text'>
+      Copying work from...
+    </span>
+    <table>
+      <tr>
+        <th>Page</th>
+        <td>
+          <span id='copy-page-idx'></span>
+          <span id='copy-page-name'></span>
+        </td>
+      </tr>
+      <tr>
+        <th>Activity</th>
+        <td id='copy-activity-name'></td>
+      </tr>
+    </table>
+  </div>
+</div>
+<div class='data-select-dialog'>
+  <div class='overlay'>
+    This is read-only preview of your data. Click anywhere to close it.
+  </div>
+  <div class='header'>
+    WHAT WOULD YOU LIKE TO DO?
+  </div>
+  <div class='content'>
+    <div id='question'></div>
+    <div class='scroll-wrapper'>
+      <div class='versions'>
+        <div class='version-info'>
+          <div class='dialog-button' id='state1-button'>
+            Use this version
+          </div>
+          <div class='preview'>
+            <div class='iframe-wrapper'>
+              <iframe id='state1-preview'></iframe>
+            </div>
+          </div>
+          <div class='center preview-label'>
+            Click to preview
+          </div>
+          <table class='version-desc'>
+            <tr>
+              <th>Updated at</th>
+              <td id='state1-time'></td>
+            </tr>
+            <tr>
+              <th>Page</th>
+              <td>
+                <span id='state1-page-idx'></span>
+                <span id='state1-page-name'></span>
+              </td>
+            </tr>
+            <tr>
+              <th>Activity</th>
+              <td id='state1-activity-name'></td>
+            </tr>
+          </table>
+        </div>
+        <div class='version-info'>
+          <div class='center'>
+            <div class='dialog-button' id='state2-button'>
+              Use this version
+            </div>
+          </div>
+          <div class='preview'>
+            <div class='iframe-wrapper'>
+              <iframe id='state2-preview'></iframe>
+            </div>
+          </div>
+          <div class='center preview-label'>
+            Click to preview
+          </div>
+          <table class='version-desc'>
+            <tr>
+              <th>Updated at</th>
+              <td id='state2-time'></td>
+            </tr>
+            <tr>
+              <th>Page</th>
+              <td>
+                <span id='state2-page-idx'></span>
+                <span id='state2-page-name'></span>
+              </td>
+            </tr>
+            <tr>
+              <th>Activity</th>
+              <td id='state2-activity-name'></td>
+            </tr>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  var init = function () { autolaunchInteractive(); };
+  if (document.readyState === "complete") { init(); }
+  else { document.addEventListener("DOMContentLoaded", init); }
+</script>
+</body>
+
+</html>