Added basic "publish" block logic.

layouts/index.hbs

@@ -11,7 +11,11 @@
 
 {{> (include_partial "layouts/partials/toolbar") }}
 
-<script>window.previewFrameUrl = 'http://localhost:{{ port }}/view/{{ baseView }}';</script>
+<script>
+  window.devTool = {
+    previewFrameUrl: 'http://localhost:{{ port }}/view/{{ baseView }}',
+  };
+</script>
 <iframe id="preview_frame" src="http://localhost:{{ port }}/view/{{ baseView }}" class="breakpoint"></iframe>
 
 <script src="/scripts/dist/index.min.js"></script>

layouts/partials/toolbar.hbs

@@ -1,17 +1,22 @@
 <header class="page_toolbar">
 
-  <div class="page_toolbar__data_options">
-    <label for="data-options">Data Options: </label>
+  <div class="page_toolbar__left">#</div>
 
+  <div class="page_toolbar__middle">
+    <div class="page_toolbar__data_options">
+      <label for="data-options">Data Options: </label>
 
-    <select name="data" id="data-options">
-      {{#each config.dataFiles }}
-        <option value="{{ name }}" {{#if active }}selected="selected"{{/if}}>{{ name }}</option>
-      {{/each}}
-    </select>
+      <select name="data" id="data-options">
+        {{#each config.dataFiles }}
+          <option value="{{ name }}" {{#if active }}selected="selected"{{/if}}>{{ name }}</option>
+        {{/each}}
+      </select>
+    </div>
+
+    <div>
+      Sizes: <b>1rem = {{ config.remToPx }}px</b>
+    </div>
   </div>
 
-  <div>
-    Sizes: <b>1rem = {{ config.remToPx }}px</b>
-  </div>
+  <div class="page_toolbar__right"></div>
 </header>

layouts/scripts/dist/index.min.js

@@ -11314,7 +11314,7 @@ function Responsive(props = {}) {
 function setupResponsiveness(rootAttributes) {
   // INIT
   const wrapper = document.createElement('div');
-  document.querySelector('.page_toolbar').prepend(wrapper);
+  document.querySelector('.page_toolbar__middle').prepend(wrapper);
   const root = createRoot(wrapper);
   const html = /*#__PURE__*/React.createElement(Responsive, {
     rootAttributes: rootAttributes
@@ -11322,10 +11322,67 @@ function setupResponsiveness(rootAttributes) {
   root.render(html);
 }
 
+function Publish(props = {}) {
+  const [state, setState] = react.exports.useState({
+    loading: false
+  });
+
+  const updateState = update => setState(Object.assign({}, state, update));
+
+  return /*#__PURE__*/React.createElement("div", null, state.loading && /*#__PURE__*/React.createElement("div", {
+    className: "overlay overlay--loading"
+  }, "Loading, Please wait..."), /*#__PURE__*/React.createElement("button", {
+    onClick: submit,
+    disabled: state.loading,
+    className: "btn btn--primary"
+  }, "Publish"));
+
+  async function submit() {
+    const ready = confirm('Are you ready to submit the code?');
+
+    if (!ready) {
+      return;
+    }
+
+    updateState({
+      loading: true
+    });
+
+    try {
+      const response = await fetch(`/publish`);
+      const data = await response.json();
+
+      if (data.success) {
+        alert('Your code is successfully sent to project manager! Thank you!');
+      } else {
+        alert('Can\'t send your code, please try again or contact project manager.');
+      }
+    } catch (error) {
+      alert('Something went wrong, please try again or contact project manager.');
+    }
+
+    updateState({
+      loading: false
+    });
+  }
+}
+
+function setupPublish(rootAttributes) {
+  // INIT
+  const wrapper = document.createElement('div');
+  document.querySelector('.page_toolbar__right').prepend(wrapper);
+  const root = createRoot(wrapper);
+  const html = /*#__PURE__*/React.createElement(Publish, {
+    rootAttributes: rootAttributes
+  });
+  root.render(html);
+}
+
 const rootAttributes = {
   previewFrame: document.getElementById('preview_frame')
 };
-setupResponsiveness(rootAttributes); // const responsiveness = connectResponsiveness(rootAttributes);
+setupResponsiveness(rootAttributes);
+setupPublish(rootAttributes); // const responsiveness = connectResponsiveness(rootAttributes);
 // setTimeout(() => responsiveness.selectMode('tablet'), 5000)
 // setTimeout(() => responsiveness.selectMode('mobile'), 10000)
 
@@ -11343,7 +11400,7 @@ function initDataOptions() {
   }
 
   dataOptionsSelect.addEventListener('change', function () {
-    previewFrame.src = window.previewFrameUrl + '?data=' + this.value;
+    previewFrame.src = window.devTool.previewFrameUrl + '?data=' + this.value;
   });
 }
 //# sourceMappingURL=index.min.js.map

layouts/scripts/index.js

@@ -1,12 +1,14 @@
 'use strict';
 
 import {setupResponsiveness} from './toolbar/responsive.jsx';
+import {setupPublish} from "./toolbar/publish.jsx";
 
 const rootAttributes = {
   previewFrame: document.getElementById('preview_frame'),
 }
 
 setupResponsiveness(rootAttributes);
+setupPublish(rootAttributes)
 
 // const responsiveness = connectResponsiveness(rootAttributes);
 // setTimeout(() => responsiveness.selectMode('tablet'), 5000)
@@ -26,6 +28,6 @@ function initDataOptions() {
   }
 
   dataOptionsSelect.addEventListener('change', function () {
-    previewFrame.src = window.previewFrameUrl + '?data=' + this.value;
+    previewFrame.src = window.devTool.previewFrameUrl + '?data=' + this.value;
   });
 }

layouts/scripts/toolbar/publish.jsx

@@ -0,0 +1,47 @@
+import React, {useEffect, useState} from 'react';
+import * as ReactDOM from 'react-dom/client';
+
+function Publish(props = {}) {
+  const [state, setState] = useState({loading: false});
+  const updateState = (update) => setState(Object.assign({}, state, update));
+
+  return <div>
+    {state.loading &&
+      <div className="overlay overlay--loading">Loading, Please wait...</div>
+    }
+    <button onClick={submit} disabled={state.loading} className="btn btn--primary">Publish</button>
+  </div>;
+
+  async function submit() {
+    const ready = confirm('Are you ready to submit the code?');
+    if (!ready) {
+      return;
+    }
+
+    updateState({loading: true});
+
+    try {
+      const response = await fetch(`/publish`);
+      const data = await response.json();
+      if (data.success) {
+        alert('Your code is successfully sent to project manager! Thank you!');
+      } else {
+        alert('Can\'t send your code, please try again or contact project manager.');
+      }
+    } catch (error) {
+      alert('Something went wrong, please try again or contact project manager.');
+    }
+
+    updateState({loading: false});
+  }
+}
+
+export function setupPublish(rootAttributes) {
+  // INIT
+  const wrapper = document.createElement('div');
+  document.querySelector('.page_toolbar__right').prepend(wrapper)
+
+  const root = ReactDOM.createRoot(wrapper);
+  const html = (<Publish rootAttributes={rootAttributes}/>);
+  root.render(html);
+}

layouts/scripts/toolbar/responsive.jsx

@@ -73,7 +73,7 @@ function Responsive(props = {}) {
 export function setupResponsiveness(rootAttributes) {
   // INIT
   const wrapper = document.createElement('div');
-  document.querySelector('.page_toolbar').prepend(wrapper)
+  document.querySelector('.page_toolbar__middle').prepend(wrapper)
 
   const root = ReactDOM.createRoot(wrapper);
   const html = (<Responsive rootAttributes={rootAttributes}/>);

layouts/styles/_buttons.scss

@@ -0,0 +1,25 @@
+.btn {
+  --btn-color: #333;
+  --btn-background-color: white;
+  display: inline-block;
+  padding: calc(0.375rem - 2px) 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  text-align: center;
+  text-decoration: none;
+  color: var(--btn-color);
+  border-radius: 0.25rem;
+  border: 1px solid var(--btn-background-color);
+  background-color: var(--btn-background-color);
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.75;
+    cursor: default;
+  }
+
+  &--primary {
+    --btn-color: white;
+    --btn-background-color: #333;
+  }
+}

layouts/styles/_overlay.scss

@@ -0,0 +1,13 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.5rem;
+}

layouts/styles/_page--breakpoints.scss

@@ -3,7 +3,6 @@
   margin-right: auto;
   margin-left: auto;
 
-  --top_panel_height: 53.5px;
   --top_spacing: 0px;
   --breakpoint_top_spacing: 30px;
 

layouts/styles/page--main.css

@@ -1,29 +1,77 @@
+:root {
+  --top_panel_vertical_height: 0.5rem;
+  --top_panel_height: calc(36px + var(--top_panel_vertical_height) * 2);
+}
+
 body {
   margin: 0;
   font-size: 1rem;
   background-color: #F7FAFC;
 }
 
+.btn {
+  --btn-color: #333;
+  --btn-background-color: white;
+  display: inline-block;
+  padding: calc(0.375rem - 2px) 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  text-align: center;
+  text-decoration: none;
+  color: var(--btn-color);
+  border-radius: 0.25rem;
+  border: 1px solid var(--btn-background-color);
+  background-color: var(--btn-background-color);
+  cursor: pointer;
+}
+.btn:disabled {
+  opacity: 0.75;
+  cursor: default;
+}
+.btn--primary {
+  --btn-color: white;
+  --btn-background-color: #333;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.5rem;
+}
+
 .page_toolbar {
   --gap: 2.5rem;
   font-size: 14px;
   font-family: Arial, sans-serif;
   background-color: #EDF2F7;
-  padding: 1em;
+  padding: var(--top_panel_vertical_height) 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.page_toolbar .page_toolbar__middle {
   display: flex;
   justify-content: center;
   gap: var(--gap);
   align-items: center;
 }
-.page_toolbar > div {
+.page_toolbar .page_toolbar__middle > div {
   position: relative;
 }
 @media (max-width: 1024px) {
-  .page_toolbar > div {
+  .page_toolbar .page_toolbar__middle > div {
     display: none;
   }
 }
-.page_toolbar > div:not(:first-child):after {
+.page_toolbar .page_toolbar__middle > div:not(:first-child):after {
   content: "|";
   position: absolute;
   left: calc(var(--gap) / 2 * -1);
@@ -32,7 +80,7 @@ body {
   line-height: 1;
   transform: translateY(-50%);
 }
-.page_toolbar > div select {
+.page_toolbar .page_toolbar__middle > div select {
   font-size: 0.85em;
   margin: 0;
   display: inline-block;
@@ -42,7 +90,7 @@ body {
   padding: 4px 8px;
 }
 @media (max-width: 1024px) {
-  .page_toolbar__data_options {
+  .page_toolbar .page_toolbar__middle__data_options {
     display: block;
   }
 }
@@ -51,7 +99,6 @@ body {
   display: block;
   margin-right: auto;
   margin-left: auto;
-  --top_panel_height: 53.5px;
   --top_spacing: 0px;
   --breakpoint_top_spacing: 30px;
   margin-top: var(--top_spacing);

layouts/styles/page--main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["page--main.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EAEA;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;;ACnDN;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"page--main.css"}
+{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;;AG/DR;EACE;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"page--main.css"}

layouts/styles/page--main.scss

@@ -1,3 +1,8 @@
+:root {
+  --top_panel_vertical_height: 0.5rem;
+  --top_panel_height: calc(36px + var(--top_panel_vertical_height) * 2);
+}
+
 body {
   margin: 0;
   font-size: 1rem;
@@ -5,51 +10,59 @@ body {
   background-color: #F7FAFC;
 }
 
+@import "buttons";
+@import "overlay";
+
 .page_toolbar {
   --gap: 2.5rem;
   font-size: 14px;
 
   font-family: Arial, sans-serif;
   background-color: #EDF2F7;
-  padding: 1em;
+  padding: var(--top_panel_vertical_height) 1rem;
 
   display: flex;
-  justify-content: center;
-  gap: var(--gap);
+  justify-content: space-between;
   align-items: center;
-  //margin-bottom: 2em;
 
-  > div {
-    position: relative;
+  .page_toolbar__middle {
+    display: flex;
+    justify-content: center;
+    gap: var(--gap);
+    align-items: center;
 
-    @media (max-width: 1024px) {
-      display: none;
+    > div {
+      position: relative;
+
+      @media (max-width: 1024px) {
+        display: none;
+      }
+
+      &:not(:first-child):after {
+        content: '|';
+        position: absolute;
+        left: calc(var(--gap) / 2 * -1);
+        top: 40%;
+        font-size: 20px;
+        line-height: 1;
+        transform: translateY(-50%);
+      }
+
+      select {
+        font-size: 0.85em;
+        margin: 0;
+        display: inline-block;
+        border-radius: initial;
+        min-width: initial;
+        width: initial !important;
+        padding: 4px 8px;
+      }
     }
 
-    &:not(:first-child):after {
-      content: '|';
-      position: absolute;
-      left: calc(var(--gap) / 2 * -1);
-      top: 40%;
-      font-size: 20px;
-      line-height: 1;
-      transform: translateY(-50%);
-    }
-
-    select {
-      font-size: 0.85em;
-      margin: 0;
-      display: inline-block;
-      border-radius: initial;
-      min-width: initial;
-      width: initial !important;
-      padding: 4px 8px;
-    }
-  }
-
-  &__data_options {
-    @media (max-width: 1024px) {
-      display: block;
+    &__data_options {
+      @media (max-width: 1024px) {
+        display: block;
+      }
     }
   }