Update

Add initialization from query parameters Change index style Change category handle position Fix empty categories
4 years ago · 3f87e9ce59
3 changed files with 96 additions and 33 deletions
--- a/card-sort.html
+++ b/card-sort.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="utf8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Card Sort</title>
+    <title>Card Sorting</title>
    <style>
      /* Reset */
      body, html {
@ -73,9 +73,7 @@
      }
      /* Uncategorized cards */
      .uncategorized-cards {
-        /* padding: 5px; */
        border-radius: 5px;
-        /* box-shadow: 0 2px 5px rgba(0, 0, 0, .5); */
        width: 200px;
        max-width: calc(50vw - 35px);
      }
@ -119,8 +117,6 @@
        font-size: 20px;
        color: inherit;
      }
-      .category-cards {
-      }
      .category-cards .grid {
        min-height: 100px;
      }
@ -128,7 +124,7 @@
        width: 100%;
      }
      .category-controls {
-        margin-top: 5px;
+        margin-bottom: 5px;
      }
      .category-drag-handle {
        width: 100%;
@ -165,13 +161,13 @@
      <div class="item">
        <div class="item-content">
          <div class="category">
+            <div class="category-controls">
+              <div class="category-drag-handle"></div>
+            </div>
            <input class="title" placeholder="Type a name" />
            <div class="category-cards">
              <div class="grid"></div>
            </div>
-            <div class="category-controls">
-              <div class="category-drag-handle"></div>
-            </div>
          </div>
        </div>
      </div>
@ -181,9 +177,7 @@
    <script src="common-scripts.js"></script>
    <script>
      let data = {};
-      const settings = {
-        allowCategoryEditing: true,
-      };
+      const settings = Object.assign({}, settingsDefaults);

      /* Card sorting */
      const buttonCreateCategory = document.querySelector('.btn-create-category');
@ -215,10 +209,17 @@

      async function initialize() {
        if ( ! window.location.hash) {
-          window.location.href = 'index.html';
-          return;
+          if (window.location.search) {
+            data = loadFromQueryParameters();
+          }
+          else {
+            window.location.href = 'index.html';
+            return;
+          }
+        }
+        else {
+          data = await loadFromString(window.location.hash.split('#').pop());
        }
-        data = await loadFromString(window.location.hash.split('#').pop());
        const cardTexts = data[uncategorizedKey];
        Object.assign(settings, loadSettings(data));
        if (settings.allowCategoryEditing === false) {
@ -274,7 +275,8 @@
        }
        categoriesGrid.show(
          categoriesGrid.add([itemElement], {
-            active: false
+            active: false,
+            index: !!name ? -1 : 0,
          }),
          {
            onFinish: () => {
--- a/common-scripts.js
+++ b/common-scripts.js
@ -3,6 +3,9 @@ const settingsFlagsKey = '?';
 const settingsFlagsEnum = {
  allowCategoryEditing: 1,
 };
+const settingsDefaults = {
+  allowCategoryEditing: true,
+};

 function loadSettings(data) {
  const settings = {};
@ -55,6 +58,22 @@ async function loadFromString(webSafeBase64String) {
  const data = JSON.parse(jsonString);
  return data;
 }
+function loadFromQueryParameters() {
+  const data = {};
+  const settings = Object.assign({}, settingsDefaults);
+  const params = new URLSearchParams(window.location.search);
+  const cardTexts = (params.get('cards') || '').split(',').filter(item => !!item);
+  const categories = (params.get('categories') || '').split(',').filter(item => !!item);
+  if (params.get('allowCategoryEditing') !== null) {
+    settings.allowCategoryEditing = Boolean(parseInt(params.get('allowCategoryEditing')));
+  }
+  data[uncategorizedKey] = cardTexts;
+  data[settingsFlagsKey] = saveSettings(settings);
+  for (const categoryName of categories) {
+    data[categoryName] = [];
+  }
+  return data;
+}

 /* Utilities */
 function debounce(func, wait, immediate) {
--- a/index.html
+++ b/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="utf8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Card Sort</title>
+    <title>Card Sorting</title>
    <style>
      /* Reset */
      body, html {
@ -14,27 +14,68 @@
      * {
        box-sizing: border-box;
      }
+      .main-layout {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 2em;
+      }
+      .main-layout > div {
+        width: 100%;
+        max-width: 600px;
+        margin-bottom: 1em;
+        font-size: 24px;
+      }
+      textarea {
+        padding: 0.5em;
+        margin-bottom: 1em;
+        width: 100%;
+        height: 20vh;
+      }
+      label {
+        cursor: pointer;
+      }
+      button {
+        margin-top: 1em;
+        margin-bottom: 1em;
+        padding: 0.3em 0.5em;
+        font-size: 24px;
+        cursor: pointer;
+      }
+      input[type="checkbox"] {
+        width: 20px;
+        height: 20px;
+      }
+      .link-container {
+        word-break: break-all;
+        padding-bottom: 2em;
+      }
    </style>
  </head>
  <body>
-    <div>Enter card texts one per line or separated by commas</div>
-    <div>
-      <textarea class="card-text-input"></textarea>
-    </div>
-    <div>Enter category names one per line or separated by commas (optional)</div>
-    <div>
-      <textarea class="category-name-input"></textarea>
-    </div>
-    <div>
-      <label>
-        <input class="category-editing-checkbox" type="checkbox" checked />
-        <span>Allow category editing</span>
-      </label>
-    </div>
-    <div>
+    <div class="main-layout">
+      <h1>
+        <span>Card Sorting</span>
+        <span>&bull;</span>
+        <a href="https://github.com/indigane/cardsort/">Readme</a>
+      </h1>
+      <div>Enter card texts one per line or separated by commas</div>
+      <div>
+        <textarea class="card-text-input"></textarea>
+      </div>
+      <div>Enter category names one per line or separated by commas (optional)</div>
+      <div>
+        <textarea class="category-name-input"></textarea>
+      </div>
+      <div>
+        <label>
+          <input class="category-editing-checkbox" type="checkbox" checked />
+          <span>Allow category editing</span>
+        </label>
+      </div>
      <button class="btn-create-link">Create a link for card sorting</button>
+      <div class="link-container"></div>
    </div>
-    <div class="link-container"></div>
    <script src="pako-2.0.4.min.js"></script>
    <script src="common-scripts.js"></script>
    <script>
@ -72,6 +113,7 @@
          resultArray = text.split(',');
        }
        resultArray = resultArray.map(item => item.trim());
+        resultArray = resultArray.filter(item => !!item);
        return resultArray;
      }
    </script>