State B: options stay visible, chosen highlighted in place, grows downward
Answering a question no longer collapses it to a summary line -- all options stay visible, the chosen one turns pale green in place, and the next question/instructions append below the full list. Removes wosaReopen/.answered-summary/.change-hint (no longer needed: changing an answer is just clicking a different option directly). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DyvzxcY41RmRYDebTWxuFo
This commit is contained in:
jonwiseandClaude Sonnet 5 committed
1 parent
c6dda40681
commit
ca98d30f7e
2 files changed
+50
-75
No files matched your search
@@ -139,23 +139,6 @@ function wosaClearDeviceFilter() {
|
||||
wosaRender();
|
||||
}
|
||||
|
||||
/* Re-open a previously answered level so it can be changed. Reopening
|
||||
a filter step's top level (the shared "which device" question) also
|
||||
clears the remembered filter -- otherwise wosaGetPath would just
|
||||
re-seed the answer we're about to clear, right back where it was. */
|
||||
function wosaReopen(stepId, level) {
|
||||
var p = wosaGetPath(stepId);
|
||||
wosaState.path[stepId] = p.slice(0, level);
|
||||
|
||||
var isFilterStep = (typeof FILTER_STEP_IDS !== "undefined" && FILTER_STEP_IDS.indexOf(stepId) !== -1);
|
||||
if (isFilterStep && level === 0) {
|
||||
wosaClearFilterState();
|
||||
}
|
||||
|
||||
wosaSaveState();
|
||||
wosaRender();
|
||||
}
|
||||
|
||||
/* A step's header is always clickable to collapse/expand its body. */
|
||||
function wosaToggleStepCollapse(stepId) {
|
||||
wosaState.collapsedSteps[stepId] = !wosaState.collapsedSteps[stepId];
|
||||
@@ -193,47 +176,47 @@ function wosaResolveOptions(node) {
|
||||
return node.options;
|
||||
}
|
||||
|
||||
/* Renders one question node (and, once answered, its collapsed summary,
|
||||
the chosen answer's instructions, and -- recursively -- whatever
|
||||
sub-question comes next). Returns an HTML string. */
|
||||
/* Renders one question node: the question, then every option as a
|
||||
row that stays visible whether or not it's chosen (no collapsing
|
||||
away) -- the chosen row just switches to the pale-green "chosen"
|
||||
look in place. Once something's chosen, its instructions and --
|
||||
recursively -- whatever sub-question comes next are appended below
|
||||
the whole option list, so the step only ever grows downward.
|
||||
Picking a different option re-renders with that one highlighted
|
||||
instead; there's no separate "reopen" step. Returns an HTML string. */
|
||||
function wosaRenderNode(node, path, stepId, level) {
|
||||
var html = "";
|
||||
var options = wosaResolveOptions(node);
|
||||
var chosenIdx = path[level];
|
||||
var hasChoice = (chosenIdx !== undefined && chosenIdx !== null && options[chosenIdx]);
|
||||
|
||||
if (!hasChoice) {
|
||||
html += '<div class="node-block">';
|
||||
if (node.q) {
|
||||
html += '<p class="node-question">' + node.q + '</p>';
|
||||
var html = '<div class="node-block">';
|
||||
if (node.q) {
|
||||
html += '<p class="node-question">' + node.q + '</p>';
|
||||
}
|
||||
if (node.code) {
|
||||
html += '<pre><code>' + node.code + '</code></pre>';
|
||||
}
|
||||
if (node.info) {
|
||||
html += '<div class="node-info">' + node.info + '</div>';
|
||||
}
|
||||
html += '<div class="opt-list">';
|
||||
for (var i = 0; i < options.length; i++) {
|
||||
var cls = (hasChoice && i === chosenIdx) ? "opt-btn chosen" : "opt-btn";
|
||||
html += '<button type="button" class="' + cls + '" onclick="wosaChoose(' + stepId + ',' + level + ',' + i + ')">' +
|
||||
'<img class="chevron" src="images/chevron.png" alt="">' + options[i].label + '</button>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
if (hasChoice) {
|
||||
var opt = options[chosenIdx];
|
||||
if (opt.content) {
|
||||
html += '<div class="leaf-content">' + opt.content + '</div>';
|
||||
}
|
||||
if (node.code) {
|
||||
html += '<pre><code>' + node.code + '</code></pre>';
|
||||
if (opt.next) {
|
||||
html += wosaRenderNode(opt.next, path, stepId, level + 1);
|
||||
}
|
||||
if (node.info) {
|
||||
html += '<div class="node-info">' + node.info + '</div>';
|
||||
}
|
||||
html += '<div class="opt-list">';
|
||||
for (var i = 0; i < options.length; i++) {
|
||||
html += '<button type="button" class="opt-btn" onclick="wosaChoose(' + stepId + ',' + level + ',' + i + ')">' +
|
||||
'<img class="chevron" src="images/chevron.png" alt="">' + options[i].label + '</button>';
|
||||
}
|
||||
html += '</div></div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
var opt = options[chosenIdx];
|
||||
html += '<div class="node-block answered">';
|
||||
html += '<div class="answered-summary" onclick="wosaReopen(' + stepId + ',' + level + ')">' +
|
||||
'<span class="change-hint">Change</span>' +
|
||||
(node.q ? node.q + ' → ' : '') + '<strong>' + opt.label + '</strong>' +
|
||||
'</div>';
|
||||
if (opt.content) {
|
||||
html += '<div class="leaf-content">' + opt.content + '</div>';
|
||||
}
|
||||
if (opt.next) {
|
||||
html += wosaRenderNode(opt.next, path, stepId, level + 1);
|
||||
}
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
@@ -265,7 +265,8 @@ body {
|
||||
/* option rows look like flat webOS list rows, not boxed buttons --
|
||||
full width, disclosure chevron on the right. A light blue tint and
|
||||
left accent bar mark them as tappable against the monotone gray
|
||||
chrome, distinct from the settled look of .answered-summary. */
|
||||
chrome; picking one switches it to the pale-green "chosen" look
|
||||
below instead of collapsing the row away. */
|
||||
.opt-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -291,6 +292,22 @@ body {
|
||||
background: #cfe1f2;
|
||||
}
|
||||
|
||||
/* the chosen option stays in the list (never collapses away) --
|
||||
pale green marks it as settled, distinct from the blue "you can
|
||||
pick this" tint on the rest. Picking a different option just moves
|
||||
this class to that row instead. */
|
||||
.opt-btn.chosen {
|
||||
background: #e9f5e9;
|
||||
border-left: 3px solid #6faa74;
|
||||
border-bottom-color: #cfe4cf;
|
||||
-webkit-animation: wosaSettle 300ms ease-out;
|
||||
animation: wosaSettle 300ms ease-out;
|
||||
}
|
||||
|
||||
.opt-btn.chosen:active {
|
||||
background: #cfe9cf;
|
||||
}
|
||||
|
||||
/* the actual Enyo menu-item arrow icon, cropped from menuitem-arrow.png
|
||||
in the webOS SDK, in place of a Unicode chevron. Height comes from
|
||||
the #app img rule above (auto, aspect-preserving). */
|
||||
@@ -352,31 +369,6 @@ body {
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* pale green marks a confirmed choice, distinct from the blue "you can
|
||||
pick this" tint on .opt-btn -- blue means pending, green means settled */
|
||||
.answered-summary {
|
||||
padding: 10px 14px 10px 10px;
|
||||
background: #e9f5e9;
|
||||
border-left: 3px solid #6faa74;
|
||||
border-bottom: 1px solid #cfe4cf;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
-webkit-animation: wosaSettle 300ms ease-out;
|
||||
animation: wosaSettle 300ms ease-out;
|
||||
}
|
||||
|
||||
/* text hint, not the expander icon -- reopening an answer to change it
|
||||
is a different action from collapsing/expanding a step */
|
||||
.change-hint {
|
||||
float: right;
|
||||
color: #4a76a8;
|
||||
font-size: 12px;
|
||||
text-decoration: underline;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.leaf-content {
|
||||
padding: 2px 4px 10px 4px;
|
||||
margin: 0 0 8px 0;
|
||||
|
||||
Reference in new issue
Block a user