rlefaive
/
cardsort
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Update 

Add initialization from query parameters
Change index style
Change category handle position
Fix empty categories
main
indigane 4 years ago committed by GitHub
parent
d801229795
commit
3f87e9ce59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 96 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      card-sort.html
  2. 19
      common-scripts.js
  3. 76
      index.html

34
card-sort.html
Unescape View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf8" /> <meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Card Sort</title> <title>Card Sorting</title>
<style> <style>
/* Reset */ /* Reset */
body, html { body, html {
@ -73,9 +73,7 @@
} }
/* Uncategorized cards */ /* Uncategorized cards */
.uncategorized-cards { .uncategorized-cards {
/* padding: 5px; */
border-radius: 5px; border-radius: 5px;
/* box-shadow: 0 2px 5px rgba(0, 0, 0, .5); */
width: 200px; width: 200px;
max-width: calc(50vw - 35px); max-width: calc(50vw - 35px);
} }
@ -119,8 +117,6 @@
font-size: 20px; font-size: 20px;
color: inherit; color: inherit;
} }
.category-cards {
}
.category-cards .grid { .category-cards .grid {
min-height: 100px; min-height: 100px;
} }
@ -128,7 +124,7 @@
width: 100%; width: 100%;
} }
.category-controls { .category-controls {
margin-top: 5px; margin-bottom: 5px;
} }
.category-drag-handle { .category-drag-handle {
width: 100%; width: 100%;
@ -165,13 +161,13 @@
<div class="item"> <div class="item">
<div class="item-content"> <div class="item-content">
<div class="category"> <div class="category">
<div class="category-controls">
<div class="category-drag-handle"></div>
</div>
<input class="title" placeholder="Type a name" /> <input class="title" placeholder="Type a name" />
<div class="category-cards"> <div class="category-cards">
<div class="grid"></div> <div class="grid"></div>
</div> </div>
<div class="category-controls">
<div class="category-drag-handle"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -181,9 +177,7 @@
<script src="common-scripts.js"></script> <script src="common-scripts.js"></script>
<script> <script>
let data = {}; let data = {};
const settings = { const settings = Object.assign({}, settingsDefaults);
allowCategoryEditing: true,
};
/* Card sorting */ /* Card sorting */
const buttonCreateCategory = document.querySelector('.btn-create-category'); const buttonCreateCategory = document.querySelector('.btn-create-category');
@ -215,10 +209,17 @@
async function initialize() { async function initialize() {
if ( ! window.location.hash) { if ( ! window.location.hash) {
window.location.href = 'index.html'; if (window.location.search) {
return; 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]; const cardTexts = data[uncategorizedKey];
Object.assign(settings, loadSettings(data)); Object.assign(settings, loadSettings(data));
if (settings.allowCategoryEditing === false) { if (settings.allowCategoryEditing === false) {
@ -274,7 +275,8 @@
} }
categoriesGrid.show( categoriesGrid.show(
categoriesGrid.add([itemElement], { categoriesGrid.add([itemElement], {
active: false active: false,
index: !!name ? -1 : 0,
}), }),
{ {
onFinish: () => { onFinish: () => {

19
common-scripts.js
Unescape View File

@ -3,6 +3,9 @@ const settingsFlagsKey = '?';
const settingsFlagsEnum = { const settingsFlagsEnum = {
allowCategoryEditing: 1, allowCategoryEditing: 1,
}; };
const settingsDefaults = {
allowCategoryEditing: true,
};
function loadSettings(data) { function loadSettings(data) {
const settings = {}; const settings = {};
@ -55,6 +58,22 @@ async function loadFromString(webSafeBase64String) {
const data = JSON.parse(jsonString); const data = JSON.parse(jsonString);
return data; 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 */ /* Utilities */
function debounce(func, wait, immediate) { function debounce(func, wait, immediate) {

76
index.html
Unescape View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf8" /> <meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Card Sort</title> <title>Card Sorting</title>
<style> <style>
/* Reset */ /* Reset */
body, html { body, html {
@ -14,27 +14,68 @@
* { * {
box-sizing: border-box; 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> </style>
</head> </head>
<body> <body>
<div>Enter card texts one per line or separated by commas</div> <div class="main-layout">
<div> <h1>
<textarea class="card-text-input"></textarea> <span>Card Sorting</span>
</div> <span>&bull;</span>
<div>Enter category names one per line or separated by commas (optional)</div> <a href="https://github.com/indigane/cardsort/">Readme</a>
<div> </h1>
<textarea class="category-name-input"></textarea> <div>Enter card texts one per line or separated by commas</div>
</div> <div>
<div> <textarea class="card-text-input"></textarea>
<label> </div>
<input class="category-editing-checkbox" type="checkbox" checked /> <div>Enter category names one per line or separated by commas (optional)</div>
<span>Allow category editing</span> <div>
</label> <textarea class="category-name-input"></textarea>
</div> </div>
<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> <button class="btn-create-link">Create a link for card sorting</button>
<div class="link-container"></div>
</div> </div>
<div class="link-container"></div>
<script src="pako-2.0.4.min.js"></script> <script src="pako-2.0.4.min.js"></script>
<script src="common-scripts.js"></script> <script src="common-scripts.js"></script>
<script> <script>
@ -72,6 +113,7 @@
resultArray = text.split(','); resultArray = text.split(',');
} }
resultArray = resultArray.map(item => item.trim()); resultArray = resultArray.map(item => item.trim());
resultArray = resultArray.filter(item => !!item);
return resultArray; return resultArray;
} }
</script> </script>

Write Preview
Loading…
Cancel
Save