fixes to the calculator
This commit is contained in:
@@ -3,6 +3,9 @@
|
||||
<title>{{ if .IsHome }}{{ .Site.Title }} — {{ .Site.Params.tagline }}{{ else }}{{ .Title }} · {{ .Site.Title }}{{ end }}</title>
|
||||
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.tagline }}{{ end }}">
|
||||
<meta name="theme-color" content="#001a2b">
|
||||
<link rel="icon" href="{{ "favicon.ico" | relURL }}" sizes="32x32">
|
||||
<link rel="icon" href="{{ "favicon.svg" | relURL }}" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="{{ "apple-touch-icon.png" | relURL }}">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
{{/*
|
||||
The savings calculator: pick the apps you pay for today and your team
|
||||
size, and compare their yearly retail cost with Federated's annual price.
|
||||
Input: dict with "key" (unique id), "apps" (name, cost, perSeat, selected),
|
||||
"annual", optional "note", "compact" (one result, no cost breakdown) and
|
||||
size, and compare their yearly retail cost with the smallest Federated plan
|
||||
that replaces every app picked (the highest `tier` among them).
|
||||
Input: dict with "key" (unique id), "apps" (name, cost, tier, perSeat,
|
||||
selected), "plans" (name, tier, annual; cheapest first), optional "note", "compact" (one result, no cost breakdown) and
|
||||
"more" (a link to the full calculator). The totals need JS; without it,
|
||||
the app list still shows each app's retail price.
|
||||
*/}}
|
||||
{{ $key := .key }}
|
||||
<form class="savings-calc{{ if .compact }} is-compact{{ end }}" id="{{ $key }}-calc" data-annual="{{ .annual }}" onsubmit="return false">
|
||||
<form class="savings-calc{{ if .compact }} is-compact{{ end }}" id="{{ $key }}-calc" data-plans="{{ .plans | jsonify }}" onsubmit="return false">
|
||||
<fieldset class="calc-apps">
|
||||
<legend class="plan-subhead">{{ if .compact }}Which of these do you pay for?{{ else }}Which apps do you pay for today?{{ end }}</legend>
|
||||
<div class="calc-app-grid">
|
||||
{{ range .apps }}
|
||||
<label class="calc-app">
|
||||
<input type="checkbox" value="{{ .cost }}" data-per-seat="{{ .perSeat }}"{{ if .selected }} checked{{ end }}>
|
||||
<input type="checkbox" value="{{ .cost }}" data-tier="{{ .tier }}" data-per-seat="{{ .perSeat }}"{{ if .selected }} checked{{ end }}>
|
||||
<span class="calc-app-name">{{ .name }}</span>
|
||||
<span class="calc-app-cost">${{ .cost }}{{ if .perSeat }}/person{{ else }} flat{{ end }}</span>
|
||||
</label>
|
||||
@@ -34,7 +35,7 @@
|
||||
<div class="calc-stat"><span class="calc-stat-label">Apps replaced</span><span class="calc-stat-value" data-out="count">0</span></div>
|
||||
<div class="calc-stat"><span class="calc-stat-label">Their retail cost</span><span class="calc-stat-value" data-out="cost">$0</span><span class="calc-stat-unit">/year</span></div>
|
||||
{{ end }}
|
||||
<div class="calc-stat is-highlight"><span class="calc-stat-label">You'd save</span><span class="calc-stat-value" data-out="savings">$0</span><span class="calc-stat-unit">/year</span></div>
|
||||
<div class="calc-stat is-highlight"><span class="calc-stat-label">You save</span><span class="calc-stat-value" data-out="savings">$0</span><span class="calc-stat-unit">/year on the <span data-out="plan">Good</span> plan</span></div>
|
||||
{{ with .more }}<a class="more calc-more" href="{{ .url | relURL }}">{{ .label }}<span class="arrow" aria-hidden="true">→</span></a>{{ end }}
|
||||
</div>
|
||||
{{ with .note }}<p class="plan-note">{{ . | markdownify }}</p>{{ end }}
|
||||
@@ -43,7 +44,7 @@
|
||||
(function () {
|
||||
var form = document.getElementById('{{ $key }}-calc');
|
||||
if (!form) return;
|
||||
var annual = +form.dataset.annual || 0;
|
||||
var plans = JSON.parse(form.dataset.plans || '[]');
|
||||
var range = form.querySelector('input[type=range]');
|
||||
var shown = form.querySelector('.calc-users-value');
|
||||
var fmt = function (n) { return '$' + Math.round(n).toLocaleString('en-US'); };
|
||||
@@ -56,16 +57,19 @@
|
||||
return 1000 + (step - 20) * 500;
|
||||
}
|
||||
function update() {
|
||||
var n = users(+range.value), count = 0, cost = 0;
|
||||
var n = users(+range.value), count = 0, cost = 0, need = 0;
|
||||
shown.textContent = n.toLocaleString('en-US') + (+range.value === +range.max ? '+' : '');
|
||||
range.setAttribute('aria-valuetext', shown.textContent + ' people');
|
||||
form.querySelectorAll('.calc-app input:checked').forEach(function (box) {
|
||||
count++;
|
||||
need = Math.max(need, plans.findIndex(function (p) { return p.tier === box.dataset.tier; }));
|
||||
cost += +box.value * (box.dataset.perSeat === 'true' ? n : 1) * 12;
|
||||
});
|
||||
out('count', count);
|
||||
out('cost', fmt(cost));
|
||||
out('savings', fmt(Math.max(0, cost - annual)));
|
||||
var plan = plans[need] || plans[plans.length - 1] || { name: '', annual: 0 };
|
||||
out('savings', fmt(Math.max(0, cost - plan.annual)));
|
||||
out('plan', plan.name);
|
||||
}
|
||||
form.addEventListener('input', update);
|
||||
update();
|
||||
|
||||
@@ -49,12 +49,12 @@
|
||||
{{ $apps := slice }}
|
||||
{{ range $name := $cfg.apps }}
|
||||
{{ range $src.apps }}{{ if eq .name $name }}
|
||||
{{ $apps = $apps | append (dict "name" .name "cost" .cost "perSeat" .perSeat "selected" (in ($cfg.selected | default slice) $name)) }}
|
||||
{{ $apps = $apps | append (dict "name" .name "cost" .cost "tier" .tier "perSeat" .perSeat "selected" (in ($cfg.selected | default slice) $name)) }}
|
||||
{{ end }}{{ end }}
|
||||
{{ end }}
|
||||
<div class="said-savings">
|
||||
{{ with $cfg.headline }}<h3 class="said-savings-title">{{ . }}</h3>{{ end }}
|
||||
{{ partial "savings-calc.html" (dict "key" (printf "%s-savings" (partial "section-id.html" $s)) "apps" $apps "annual" $src.federatedAnnual "compact" true "more" $cfg.more) }}
|
||||
{{ partial "savings-calc.html" (dict "key" (printf "%s-savings" (partial "section-id.html" $s)) "apps" $apps "plans" $src.federatedPlans "compact" true "more" $cfg.more) }}
|
||||
</div>
|
||||
{{ else }}
|
||||
{{ errorf "quote section: savings.from page %q not found" $cfg.from }}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{{/*
|
||||
Savings — an optional bar comparison (`bars`: name, amount, highlight) and
|
||||
a savings calculator (`apps`: name, cost, perSeat, selected; compared with
|
||||
`federatedAnnual`), rendered by partials/savings-calc.html.
|
||||
a savings calculator (`apps`: name, cost, tier, perSeat, selected; compared
|
||||
with the smallest of `federatedPlans`: name, tier, annual), rendered by partials/savings-calc.html.
|
||||
*/}}
|
||||
{{ $s := . }}
|
||||
{{ $key := partial "section-id.html" $s | default "savings" }}
|
||||
@@ -26,6 +26,6 @@
|
||||
{{ end }}
|
||||
|
||||
{{ with $s.apps }}
|
||||
{{ partial "savings-calc.html" (dict "key" $key "apps" . "annual" $s.federatedAnnual "note" $s.calcNote) }}
|
||||
{{ partial "savings-calc.html" (dict "key" $key "apps" . "plans" $s.federatedPlans "note" $s.calcNote) }}
|
||||
{{ end }}
|
||||
{{ if $s.ctas }}<div class="cta-row mt-2">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user