Skip to content

Commit 16782fa

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
committed
Fix 404 errors
Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>
1 parent fc0cbff commit 16782fa

File tree

3 files changed

+84
-72
lines changed

3 files changed

+84
-72
lines changed

‎assets/js/kanvas-architectural-transition.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,4 @@
2020
}
2121

2222
window.initKanvasTransition = initTransition;
23-
24-
document.readyState === "loading"
25-
? document.addEventListener("DOMContentLoaded", function () {
26-
document.querySelectorAll(".kanvas-transition-container").forEach(initTransition);
27-
})
28-
: document.querySelectorAll(".kanvas-transition-container").forEach(initTransition);
2923
})();

‎assets/js/kanvas-corner-popup.js‎

Lines changed: 27 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,40 @@
11
(function () {
22
"use strict";
33

4-
var CLOSE_SVG =
5-
'<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' +
6-
'<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM17 15.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59L15.59 7L17 8.41L13.41 12L17 15.59Z"/>' +
7-
"</svg>";
4+
function attachBehavior(el) {
5+
if (!el) return;
6+
7+
var closeBtn = el.querySelector(".close-btn");
8+
if (closeBtn) {
9+
closeBtn.addEventListener("click", function () {
10+
el.classList.add("kanvas-corner-popup--hiding");
11+
el.addEventListener(
12+
"transitionend",
13+
function () {
14+
el.remove();
15+
},
16+
{ once: true }
17+
);
18+
});
19+
}
820

9-
function img(cls, file) {
10-
return '<img class="' + cls + '" src="/images/banner-transitions/' + file + '" alt="" />';
21+
if (typeof window.initKanvasTransition === "function") {
22+
var c = el.querySelector(".kanvas-transition-container");
23+
if (c) window.initKanvasTransition(c);
24+
}
1125
}
1226

13-
function buildPopup() {
14-
var el = document.createElement("div");
15-
el.setAttribute("role", "dialog");
16-
el.setAttribute("aria-label", "Kanvas Collaboration Popup");
17-
el.className = "kanvas-corner-popup";
18-
var bgFile = "empty-dark.svg";
19-
var svcFile = "service-interface-partial-colorMode.svg";
20-
var ingressFile = "ingress-gateway-partial-colorMode.svg";
21-
var kubernetesFile = "kubernetes-partial-colorMode.svg";
22-
var podFile = "pod-partial-colorMode.svg";
23-
var prometheusFile = "prometheus-partial-colorMode.svg";
24-
var arrowsFile = "supporting-arrows.svg";
25-
26-
el.innerHTML =
27-
'<div class="popup"><div class="popup-inner">' +
28-
'<button class="close-btn" aria-label="Close popup">' + CLOSE_SVG + "</button>" +
29-
'<a class="popup-content-link" href="https://kanvas.new/" target="_blank" rel="noopener noreferrer">' +
30-
'<div class="popup-text"><h4>Build solutions together</h4><h1>Collaborate with the team</h1></div>' +
31-
'<div class="kanvas-transition-container">' +
32-
'<div class="canvas-grid"></div>' +
33-
'<img class="kanvas-canvas-bg" src="/images/banner-transitions/' + bgFile + '" alt="" />' +
34-
'<div class="kanvas-layer">' + img("kanvas-service-interface", svcFile) + "</div>" +
35-
'<div class="kanvas-layer">' + img("kanvas-ingress-gateway", ingressFile) + "</div>" +
36-
'<div class="kanvas-layer">' + img("kanvas-kubernetes", kubernetesFile) + "</div>" +
37-
'<div class="kanvas-layer">' + img("kanvas-pod", podFile) + "</div>" +
38-
'<div class="kanvas-layer">' + img("kanvas-prometheus", prometheusFile) + "</div>" +
39-
img("kanvas-supporting-arrows", arrowsFile) +
40-
"</div>" +
41-
'<div class="try-it-text"><span>Try it now at </span><strong>kanvas.new</strong></div>' +
42-
"</a>" +
43-
'<a class="explore-playground-button" href="https://kanvas.new/" target="_blank" rel="noopener noreferrer">Access Kanvas</a>' +
44-
"</div></div>";
45-
46-
el.querySelector(".close-btn").addEventListener("click", function () {
47-
el.classList.add("kanvas-corner-popup--hiding");
48-
el.addEventListener("transitionend", function () {
49-
el.remove();
50-
}, { once: true });
51-
});
27+
function show() {
28+
var el = document.getElementById("kanvas-corner-popup");
29+
if (!el) return;
5230

53-
return el;
54-
}
31+
attachBehavior(el);
5532

56-
function show() {
57-
var el = buildPopup();
58-
document.body.appendChild(el);
5933
requestAnimationFrame(function () {
60-
requestAnimationFrame(function () { el.classList.add("kanvas-corner-popup--visible"); });
34+
requestAnimationFrame(function () {
35+
el.classList.add("kanvas-corner-popup--visible");
36+
});
6137
});
62-
if (typeof window.initKanvasTransition === "function") {
63-
var c = el.querySelector(".kanvas-transition-container");
64-
if (c) window.initKanvasTransition(c);
65-
}
6638
}
6739

6840
function init() {

‎layouts/partials/kanvas-corner-popup.html‎

Lines changed: 57 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,63 @@
1-
{{/*
2-
nvas-corner-popup.html
3-
───────────────────────────────────────────────────────────────────────────
4-
go partial – drops the Kanvas corner popup onto the page.
1+
{{ $bg := resources.Get "banner-transitions/empty-dark.svg" }}
2+
{{ $svc := resources.Get "banner-transitions/service-interface-partial-colorMode.svg" }}
3+
{{ $ingress := resources.Get "banner-transitions/ingress-gateway-partial-colorMode.svg" }}
4+
{{ $kube := resources.Get "banner-transitions/kubernetes-partial-colorMode.svg" }}
5+
{{ $pod := resources.Get "banner-transitions/pod-partial-colorMode.svg" }}
6+
{{ $prom := resources.Get "banner-transitions/prometheus-partial-colorMode.svg" }}
7+
{{ $arrows := resources.Get "banner-transitions/supporting-arrows.svg" }}
58

6-
Usage (in any layout file, just before </body>):
7-
{{ partial "section/kanvas-corner-popup.html" . }}
9+
<div id="kanvas-corner-popup" class="kanvas-corner-popup" role="dialog" aria-label="Kanvas Collaboration Popup">
10+
<div class="popup">
11+
<div class="popup-inner">
12+
<button class="close-btn" aria-label="Close popup">
13+
<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
14+
<path fill-rule="evenodd" clip-rule="evenodd"
15+
d="M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM17 15.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59L15.59 7L17 8.41L13.41 12L17 15.59Z" />
16+
</svg>
17+
</button>
818

9-
The popup is built and injected by the JS below. The architectural
10-
transition animation is handled by kanvas-architectural-transition.js.
11-
Both scripts must be loaded in order (transition first, popup second).
12-
*/}}
19+
<a class="popup-content-link" href="https://kanvas.new/" target="_blank" rel="noopener noreferrer">
20+
<div class="popup-text">
21+
<h4>Build solutions together</h4>
22+
<h1>Collaborate with the team</h1>
23+
</div>
24+
25+
<div class="kanvas-transition-container">
26+
<div class="canvas-grid"></div>
27+
28+
<img class="kanvas-canvas-bg" src="{{ $bg.RelPermalink }}" alt="" />
29+
30+
<div class="kanvas-layer">
31+
<img class="kanvas-service-interface" src="{{ $svc.RelPermalink }}" alt="" />
32+
</div>
33+
<div class="kanvas-layer">
34+
<img class="kanvas-ingress-gateway" src="{{ $ingress.RelPermalink }}" alt="" />
35+
</div>
36+
<div class="kanvas-layer">
37+
<img class="kanvas-kubernetes" src="{{ $kube.RelPermalink }}" alt="" />
38+
</div>
39+
<div class="kanvas-layer">
40+
<img class="kanvas-pod" src="{{ $pod.RelPermalink }}" alt="" />
41+
</div>
42+
<div class="kanvas-layer">
43+
<img class="kanvas-prometheus" src="{{ $prom.RelPermalink }}" alt="" />
44+
</div>
45+
46+
<img class="kanvas-supporting-arrows" src="{{ $arrows.RelPermalink }}" alt="" />
47+
</div>
48+
49+
<div class="try-it-text">
50+
<span>Try it now at </span><strong>kanvas.new</strong>
51+
</div>
52+
</a>
53+
54+
<a class="explore-playground-button" href="https://kanvas.new/" target="_blank" rel="noopener noreferrer">
55+
Access Kanvas
56+
</a>
57+
</div>
58+
</div>
59+
</div>
1360

14-
{{/* Load the architectural-transition helper first so the popup can call it */}}
1561
{{ with resources.Get "js/kanvas-architectural-transition.js" }}
1662
<script src="{{ .RelPermalink }}" defer></script>
1763
{{ end }}

0 commit comments

Comments
 (0)