Skip to content

Instantly share code, notes, and snippets.

@branflake2267

branflake2267/example.component.js

Created November 3, 2019 15:06
Show Gist options
  • Save branflake2267/467d7590f544d7fbc71389cab471e3a4 to your computer and use it in GitHub Desktop.
Save branflake2267/467d7590f544d7fbc71389cab471e3a4 to your computer and use it in GitHub Desktop.
Download ZIP
Docs layout prototype v2
Raw
example.component.js
var htmlTemplate = `
<style>
html,
body {
font-family: 'Roboto', sans-serif;
}
.example {
border: 1px solid gray;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin: 15px;
}
.example:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.example_title {
/* border: 1px solid gray; */
padding: 10px;
}
.example_tabs {
/* border: 1px solid gray; */
display: flex;
}
.example_contents {
/* border: 1px solid blue; */
padding: 10px;
}
#example_tabs {
display: flex;
margin-bottom: 10px;
}
.example_tab {
padding: 10px;
width: 100px;
text-align: center;
cursor: pointer;
white-space: nowrap;
}
.example_tab_selected {
border-bottom: 2px solid green;
}
.example_tab_not_selected {}
.example_content_selected {}
.example_content_not_selected {
display: none;
}
</style>
<div class='example'>
<div class='example_title'>
Example Title
</div>
<div class='example_tabs'>
<div class='example_tab example_tab_selected'>Javascript</div>
<div class='example_tab example_tab_not_selected'>Angular</div>
<div class='example_tab example_tab_not_selected'>React</div>
<div class='example_tab example_tab_not_selected'>Web Components</div>
<div class='example_tab example_tab_not_selected'>Vue</div>
<div class='example_tab example_tab_not_selected'>TypeScript</div>
</div>
<div class='example_contents'>
<div class='example_content example_content_selected'>Javascript</div>
<div class='example_content example_content_not_selected'>Angular</div>
<div class='example_content example_content_not_selected'>React</div>
<div class='example_content example_content_not_selected'>Web Components</div>
<div class='example_content example_content_not_selected'>Vue</div>
<div class='example_content example_content_not_selected'>TypeScript</div>
</div>
</div>
`;
class SenchaDocsExample extends HTMLElement {
constructor() {
super()
let shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = htmlTemplate;
}
connectedCallback() {
this._addTabListeners();
}
_addTabListeners() {
let tabsEls = this.shadowRoot.querySelectorAll('.example_tab');
for (const tabEl of tabsEls) {
tabEl.onclick = this._toggleTab;
}
}
_toggleTab(event) {
let tabsEls = event.target.parentElement.querySelectorAll('.example_tab');
let selected = -1;
for (let i = 0; i < tabsEls.length; i++) {
let tabEl = tabsEls[i];
console.log("tabEl", tabEl);
if (tabEl === event.target) {
tabEl.classList.remove('example_tab_not_selected');
tabEl.classList.add('example_tab_selected');
selected = i;
} else {
tabEl.classList.remove('example_tab_selected');
tabEl.classList.add('example_tab_not_selected');
}
}
let contentsEls = event.target.parentElement.parentElement.querySelectorAll('.example_content');
for (let i = 0; i < contentsEls.length; i++) {
let contentEl = contentsEls[i];
if (selected === i) {
contentEl.classList.remove('example_content_not_selected');
contentEl.classList.add('example_content_selected');
} else {
contentEl.classList.remove('example_content_selected');
contentEl.classList.add('example_content_not_selected');
}
}
}
}
window.customElements.define('sencha-docs-example', SenchaDocsExample);
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>${component_title}</title>
<!-- Font -->
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
<script type="module">
import './example.component.js';
</script>
<body>
<style>
html {
font-family: 'Roboto', sans-serif;
}
body {
font-family: 'Roboto', sans-serif;
}
#components_header {
border: 1px solid gray;
}
#components_footer {
border: 1px solid gray;
}
#components_middle {
border: 1px solid blue;
display: flex;
}
#components_index {
border: 1px solid gray;
width: 250px;
}
#component_content {
border: 1px solid gray;
width: 100%;
}
#component_title {
border: 1px solid gray;
}
#component_tabs {
display: flex;
margin-bottom: 10px;
}
.component_tab {
padding: 20px;
width: 100px;
text-align: center;
cursor: pointer;
}
.component_tab_selected {
border-bottom: 2px solid green;
}
.component_tab_not_selected {}
.component_content_selected {}
.component_content_not_selected {
display: none;
}
</style>
<script>
function toggleTab(event) {
let componentContentEl = document.getElementById('component_content');
let componentTabsEls = componentContentEl.querySelectorAll('.component_tab');
let selected = -1;
for (let i = 0 ; i < componentTabsEls.length; i++) {
let tabEl = componentTabsEls[i];
if (tabEl === event.target) {
tabEl.classList.remove('component_tab_not_selected');
tabEl.classList.add('component_tab_selected');
selected = i;
} else {
tabEl.classList.remove('component_tab_selected');
tabEl.classList.add('component_tab_not_selected');
}
}
let componentContentsEls = componentContentEl.querySelectorAll('.component_content');
for (let i = 0; i < componentContentsEls.length; i++) {
let contentEl = componentContentsEls[i];
if (selected === i) {
contentEl.classList.remove('component_content_not_selected');
contentEl.classList.add('component_content_selected');
} else {
contentEl.classList.remove('component_content_selected');
contentEl.classList.add('component_content_not_selected');
}
}
}
function addTabListeners() {
let componentTabsEl = document.getElementById('component_tabs');
let componentTabsEls = componentTabsEl.querySelectorAll('.component_tab');
for (const tabEl of componentTabsEls) {
tabEl.onclick = toggleTab;
}
}
function documentOnReady() {
addTabListeners();
}
document.addEventListener("DOMContentLoaded", documentOnReady);
</script>
<div id='components_header'>
components header
</div>
<div id='components_middle'>
<div id='components_index'>
components index
</div>
<div id='component_content'>
<div id='component_title'>
component title
</div>
<div id='component_tabs'>
<div class='component_tab component_tab_selected'>Overview</div>
<div class='component_tab component_tab_not_selected'>API</div>
<div class='component_tab component_tab_not_selected'>Examples</div>
</div>
<div id='component_contents'>
<div id='component_tab_overview' class='component_content component_content_selected'>Overview Tab</div>
<div id='component_tab_api' class='component_content component_content_not_selected'>API Tab</div>
<div id='component_tab_examples' class='component_content component_content_not_selected'>
<sencha-docs-example></sencha-docs-example>
<sencha-docs-example></sencha-docs-example>
<sencha-docs-example></sencha-docs-example>
</div>
</div>
</div>
</div>
<div id='components_footer'>
components footer
</div>
</body>
</html>
@branflake2267
Copy link
Author

Screen Shot 2019-11-03 at 7 06 15 AM

example-layout-prototype-v2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment