-
Notifications
You must be signed in to change notification settings - Fork 0
/
index2.html
112 lines (99 loc) · 5.16 KB
/
index2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Inside Tabs API Presentation</title>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="browser-window" classic-tabs>
<div class="browser-bars">
<div class="browser-tabs">
<div style="margin-right: 20px"> Browser tabs: </div>
<div class="tab">
<input class="tab-input" checked="" type="radio" name="tab" url="https://ex-simple.com" id="tab1" reset for-view="1" ><label class="tab-label" for="tab1">Simple Text</label>
</div>
<div class="tab">
<input class="tab-input" type="radio" name="tab" url="https://ex-gallery.com/3" id="tab2" reset for-view="2" context="3" ><label class="tab-label" for="tab2">Gallery - 3</label>
</div>
<div class="tab">
<input class="tab-input" type="radio" name="tab" url="https://ex-gallery.com/4" id="tab3" reset for-view="3" context="4" ><label class="tab-label" for="tab3">Gallery - 4</label>
</div>
<div class="tab">
<input class="tab-input" type="radio" name="tab" url="https://ex-withsidebar.com" id="tab4" reset for-view="4" ><label class="tab-label" for="tab4">Text with Sidebar</label>
</div>
</div>
<div class="nav-bar">
<img src="back-b.png" alt="">
<img src="forward-b.png" alt="">
<img src="reload-b.png" alt="">
<span class="tab-url"></span></div>
</div>
<div class="browser-view">
<div class="views">
<div class="view" view-id="1">
<img class="view-img" src="placeholders/placeholder-simple-text.png" alt="" srcset="">
<div style="display: none;" class="description">1. page</div>
</div>
<div class="view" view-id="2">
<map name="thumbs">
<area class="thumb gall1" number="1" shape="rect" coords="25, 153, 63, 189" title="Click to switch image">
<area class="thumb gall2" number="2" shape="rect" coords="77, 153, 115, 189" title="Click to switch image">
<area class="thumb gall3" number="3" shape="rect" coords="136, 153, 174, 189" title="Click to switch image">
<area class="thumb gall4" number="4" shape="rect" coords="189, 153, 227, 189" title="Click to switch image">
</map>
<img class="view-img" usemap="#thumbs" src="placeholders/placeholder-gallery-selected-3.png" alt="" srcset="">
<div style="display: none;" class="description">2. page</div>
</div>
<div class="view" view-id="3">
<map name="thumbs">
<area class="thumb gall1" number="1" shape="rect" coords="25, 153, 63, 189" title="Click to switch image">
<area class="thumb gall2" number="2" shape="rect" coords="77, 153, 115, 189" title="Click to switch image">
<area class="thumb gall3" number="3" shape="rect" coords="136, 153, 174, 189" title="Click to switch image">
<area class="thumb gall4" number="4" shape="rect" coords="189, 153, 227, 189" title="Click to switch image">
</map>
<img class="view-img" usemap="#thumbs" src="placeholders/placeholder-gallery-selected-4.png" alt="" srcset="">
<div style="display: none;" class="description">3. page</div>
</div>
<div class="view" view-id="4">
<img class="view-img" src="placeholders/placeholder-sidebar-and-text.png" alt="" srcset="">
<div style="display: none;" class="description">4. page</div>
</div>
</div>
</div>
<div class="state-description" style="display: none;">
One view for two tabs.<br/>
Second view is common for two tabs.<br/>
The two tabs refer to one instance (view, DOM, CSSOM etc.) of the page.
</div>
<script>
let inputEl = document.querySelector(`.tab-input[id="tab1"]`);
document.querySelector(`.view[view-id="1"]`).setAttribute("active", true);
inputEl.checked = true;
document.querySelector(".tab-url").textContent = inputEl.getAttribute("url");
const browserTabsEl = document.querySelector(".browser-tabs");
browserTabsEl.addEventListener("mousedown", ({target})=>{
if (!target.classList.contains("tab-label")) {return false};
const inputId = target.getAttribute("for");
inputEl = document.querySelector(`#${inputId}`);
for (const viewEl of Array.from(document.querySelectorAll(".view"))) {
viewEl.setAttribute("active", false);
}
const activeViewEl = document.querySelector(`.view[view-id="${inputEl.getAttribute("for-view")}"]`);
activeViewEl.setAttribute("active", true);
document.querySelector(".tab-url").textContent = inputEl.getAttribute("url");
});
const mapEl = document.querySelector("map");
mapEl.addEventListener("mousedown", ({target})=>{
const number = target.getAttribute("number");
inputEl.nextElementSibling.textContent = `Gallery - ${number}`;
inputEl.setAttribute("context", `${number}`);
inputEl.setAttribute("url", `https://ex-gallery.com/${inputEl.getAttribute("context")}`);
document.querySelector(".tab-url").textContent = `https://ex-gallery.com/${inputEl.getAttribute("context")}`;
const activeViewEl = document.querySelector(`.view[view-id="${inputEl.getAttribute("for-view")}"]`);
activeViewEl.querySelector("img").src = `placeholders/placeholder-gallery-selected-${inputEl.getAttribute("context")}.png`;
console.log("number", number);
});
</script>
</body>
</html>