axe-web-public/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added basic "publish" block logic.

Browse Source
This commit is contained in:
Roman Axelrod
2022-09-30 14:03:48 +03:00
parent 6b3ed38e04
commit 760825be2d
16 changed files with 961 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/index.hbs
+5 -1
View File
@@ -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
+15 -10
View File
@@ -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
Vendored
+60 -3
View File
@@ -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/dist/index.min.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
layouts/scripts/index.js
+3 -1
View File
@@ -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
+47
View File
@@ -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
+1 -1
View File
@@ -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
+25
View File
@@ -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
+13
View File
@@ -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
-1
View File
@@ -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
+54 -7
View File
@@ -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
View File
@@ -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
+45 -32
View File
@@ -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;
}
}
}