Tabs layout

index.html

@@ -248,6 +248,10 @@
                     <input type="radio" name="layout" value="bottom" />
                     <layout-preview layout="bottom"></layout-preview>
                   </label>
+                  <label for="tabs-layout-radio">
+                    <input type="radio" name="layout" value="tabs" />
+                    <layout-preview layout="tabs"></layout-preview>
+                  </label>
                 </fieldset>
               </div>
             </div>
@@ -460,9 +464,14 @@
     </aside>
 
     <div id="editor" class="grid">
-      <codi-editor id="markup" language="html"></codi-editor>
-      <codi-editor id="script" language="javascript"></codi-editor>
-      <codi-editor id="style" language="css"></codi-editor>
+      <div id="tabs" hidden>
+        <label for="markup">HTML</label>
+        <label for="script">JavaScript</label>
+        <label for="style">CSS</label>
+      </div>
+      <codi-editor data-grid-area="editor-html" id="markup" language="html"></codi-editor>
+      <codi-editor data-grid-area="editor-js" id="script" language="javascript"></codi-editor>
+      <codi-editor data-grid-area="editor-css" id="style" language="css"></codi-editor>
 
       <div id="editor-preview" class="iframe-container">
         <iframe title="CodiLink Preview"></iframe>

src/components/layout-preview/LayoutPreview.styles.js

@@ -40,6 +40,30 @@ export const LayoutPreviewStyles = css`
   grid-template-areas: 'result result result' 'html js css';
 }
 
+:host([layout=tabs]){
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-template-areas: 'html html result' 'html html result';
+}
+
+:host([layout=tabs]) .css,
+:host([layout=tabs]) .js {
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  top: 5px;
+  border-left: 1px solid black;
+  border-bottom: 1px solid black;
+}
+
+:host([layout=tabs]) .css {
+  left: calc(33.33% - 3px);
+}
+
+:host([layout=tabs]) .js {
+  left: calc(33.33% + 4px);
+}
+
 .html {
   grid-area: html;
   background-color: var(--layout-preview-background-color-html, #e34f26);

src/constants/editor-grid-template.js

@@ -1,7 +1,8 @@
 export const EDITOR_GRID_TEMPLATE = {
   vertical: 'grid-template-columns: 1fr 8px 1fr 8px 1fr 8px 1fr; grid-template-rows: 1fr',
   horizontal: 'grid-template-columns: 1fr; grid-template-rows: 1fr 8px 1fr 8px 1fr 8px 1fr',
-  bottom: 'grid-template-columns: 1fr 8px 1fr 8px 1fr; grid-template-rows: 1fr 8px 1fr'
+  bottom: 'grid-template-columns: 1fr 8px 1fr 8px 1fr; grid-template-rows: 1fr 8px 1fr',
+  tabs: 'grid-template-columns: 5fr 8px 3fr, grid-template-rows: 40px 1fr'
 }
 
 export const DEFAULT_GRID_TEMPLATE = 'grid-template-columns: 1fr 8px 1fr; grid-template-rows: 1fr 8px 1fr'

src/constants/grid-templates.js

@@ -54,3 +54,10 @@ export const BOTTOM_LAYOUT = {
     element: '.last-gutter'
   }]
 }
+
+export const TABS_LAYOUT = {
+  columnGutters: [{
+    track: 1,
+    element: '.first-gutter'
+  }]
+}

src/css/editors-layout.css

@@ -132,6 +132,25 @@
         0 1px 0 0 var(--grid-background);
     }
   }
+  [data-layout='tabs'] & {
+    grid-template-columns: 5fr 8px 3fr;
+    grid-template-rows: 40px 1fr;
+    grid-template-areas: 'tabs . editor-preview' 'editors . editor-preview';
+
+    & #tabs {
+      display: grid;
+    }
+
+    & .first-gutter {
+      cursor: col-resize;
+      background-image: url(/assets/vertical.png);
+      grid-area: 1 / 2 / 3 / 2;
+    }
+    & .second-gutter,
+    & .last-gutter {
+      display: none;
+    }
+  }
 
   & #markup {
     grid-area: editor-html;
@@ -150,6 +169,60 @@
   }
 }
 
+#tabs {
+  grid-area: tabs;
+  grid-template-columns: repeat(3, 1fr);
+  border-bottom: 1px solid rgb(49, 49, 49);
+
+  & label {
+    display: flex !important;
+    align-items: center;
+    padding-left: 8px;
+    border-bottom: 1px solid rgb(41, 41, 41);
+    opacity: .2;
+
+    &.active {
+      border-bottom: 2px solid;
+      opacity: 1;
+
+      &[for="markup"] {
+        border-bottom-color: #e34f26;
+      }
+      &[for="style"] {
+        border-bottom-color: rebeccapurple;
+      }
+      &[for="script"] {
+        border-bottom-color: rgb(255, 193, 7);
+      }
+    }
+
+    & + label {
+      border-left: 1px solid rgb(41, 41, 41);
+    }
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      margin-right: 0.5em;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+    }
+
+    &[for="markup"]::before {
+      background-image: url(/assets/html5.svg);
+    }
+    &[for="style"]::before {
+      background-image: url(/assets/css3.svg);
+    }
+    &[for="script"]::before {
+      background-image: url(/assets/js.svg);
+    }
+  }
+}
+
 .first-gutter {
   cursor: col-resize;
   grid-area: 1 / 2 / 4 / 2;

src/grid.js

@@ -7,6 +7,7 @@ import {
   BOTTOM_LAYOUT,
   DEFAULT_LAYOUT,
   HORIZONTAL_LAYOUT,
+  TABS_LAYOUT,
   VERTICAL_LAYOUT
 } from './constants/grid-templates'
 import { getState } from './state'
@@ -15,8 +16,23 @@ import { $, $$ } from './utils/dom'
 const $editor = $('#editor')
 const rootElement = document.documentElement
 const $$layoutSelector = $$('layout-preview')
+const $$editors = $$('#editor codi-editor')
+const $tabsContainer = $('#tabs')
+const $$tabs = $$('#tabs label')
 let splitInstance
 
+const selectTab = (event) => {
+  $$editors.forEach($editor => ($editor.style.display = 'none'))
+  const $targetEditor = $(`#${event.target.getAttribute('for')}`)
+  $targetEditor.style.display = 'block'
+  $$tabs.forEach($t => $t.classList.remove('active'))
+  event.target.classList.add('active')
+}
+
+$$tabs.forEach($tab => {
+  $tab.addEventListener('click', selectTab)
+})
+
 const formatGutters = gutter => ({
   ...gutter,
   element: $(gutter.element)
@@ -49,16 +65,46 @@ const getInitialGridStyle = () => {
   )
 }
 
+const configLayoutTabsElements = (type) => {
+  if (type === 'tabs') {
+    $tabsContainer.removeAttribute('hidden')
+    $tabsContainer.style.display = 'grid'
+    $tabsContainer.querySelector('label').classList.add('active')
+    $('.second-gutter').style.display = 'none'
+    $('.last-gutter').style.display = 'none'
+    $$editors.forEach(($editor, index) => {
+      $editor.style.display = 'none'
+      $editor.style.gridArea = 'editors'
+
+      if (index === 0) {
+        $editor.style.display = 'block'
+      }
+    })
+  } else {
+    $tabsContainer.setAttribute('hidden', 'hidde')
+    $tabsContainer.style.display = 'none'
+    $('.second-gutter').style.display = 'block'
+    $('.last-gutter').style.display = 'block'
+    $$editors.forEach(($editor, i) => {
+      $editor.style.display = 'block'
+      $editor.style.gridArea = $editor.getAttribute('data-grid-area')
+    })
+  }
+}
+
 const setGridLayout = (type = '') => {
   const style = EDITOR_GRID_TEMPLATE[type] || DEFAULT_GRID_TEMPLATE
 
   const gutters =
     {
       vertical: VERTICAL_LAYOUT,
       horizontal: HORIZONTAL_LAYOUT,
-      bottom: BOTTOM_LAYOUT
+      bottom: BOTTOM_LAYOUT,
+      tabs: TABS_LAYOUT
     }[type] ?? DEFAULT_LAYOUT
 
+  configLayoutTabsElements(type)
+
   const initialStyle = !splitInstance && getInitialGridStyle()
 
   rootElement.setAttribute('data-layout', type)