From 3f87e9ce59fc4ddb30d39f8a3c9787a68e177e0f Mon Sep 17 00:00:00 2001
From: indigane <indigane@users.noreply.github.com>
Date: Fri, 13 May 2022 16:06:33 +0300
Subject: [PATCH] Update

Add initialization from query parameters
Change index style
Change category handle position
Fix empty categories
---
 card-sort.html    | 34 +++++++++++----------
 common-scripts.js | 19 ++++++++++++
 index.html        | 76 ++++++++++++++++++++++++++++++++++++-----------
 3 files changed, 96 insertions(+), 33 deletions(-)
diff --git a/card-sort.html b/card-sort.html
index be7193e..d6a2d50 100644
--- 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: () => {
diff --git a/common-scripts.js b/common-scripts.js
index 8148523..2f14928 100644
--- 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) {
diff --git a/index.html b/index.html
index 0fc500c..7006db5 100644
--- 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>
