AXE-WEB/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added "Copy to Clipboard" option to Sidebar with data options.

Browse Source
This commit is contained in:
Roman Axelrod
2022-10-22 11:42:14 +03:00
parent f8a46b8148
commit 82d4f1b755
8 changed files with 96 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/scripts/dist/index.min.js
Vendored
+38 -3
View File
@@ -9556,7 +9556,7 @@ function setupPublish(rootAttributes) {
}
const SidebarStyle = qe.div`
--sidebarWidth: 300px;
--sidebarWidth: 360px;
position: fixed;
top: 0;
bottom: 0;
@@ -9564,12 +9564,15 @@ const SidebarStyle = qe.div`
width: var(--sidebarWidth);
background-color: #E2E8F0;
border-right: 1px solid #CBD5E0;
padding: 0 0.75rem;
padding: 0 0.75rem 0.75rem;
box-sizing: border-box;
overflow: hidden;
transition: left .2s ease-in-out, visibility .2s ease-in-out;
visibility: hidden;
color: #333;
display: flex;
flex-direction: column;
align-items: flex-start;
&.active {
left: 0;
@@ -9583,9 +9586,12 @@ const SidebarStyle = qe.div`
border-radius: 4px;
color: #333;
border: 1px solid #cbd5e0;
width: 100%;
box-sizing: border-box;
}
`;
const SidebarHeaderStyle = qe.header`
width: 100%;
min-height: 34px;
padding: 0.5rem 0;
display: flex;
@@ -9635,6 +9641,8 @@ const SidebarDataOptionsStyle = qe.div`
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
box-sizing: border-box;
select {
flex: 1 1;
@@ -9941,7 +9949,10 @@ function DataOptions(props = {}) {
value: item,
selected: isSelected
}, item);
}))), state.data && /*#__PURE__*/React.createElement("pre", null, JSON.stringify(state.data, null, 2))));
}))), state.data && /*#__PURE__*/React.createElement("pre", null, JSON.stringify(state.data, null, 2)), /*#__PURE__*/React.createElement("button", {
className: "btn btn--secondary",
onClick: e => copyToClipboard(e, state.data)
}, "Copy to Clipboard")));
//
// Functions
@@ -9989,6 +10000,30 @@ function DataOptions(props = {}) {
setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
}
}
function copyToClipboard(e, context) {
e.stopPropagation();
if (typeof context !== 'string') {
context = JSON.stringify(context, null, 2);
}
if (navigator.clipboard && window.isSecureContext) {
// This case will not work on non-https pages.
return navigator.clipboard.writeText(context);
} else {
let textArea = document.createElement("textarea");
textArea.value = context;
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
// textArea.focus();
textArea.select();
return new Promise((res, rej) => {
document.execCommand('copy') ? res() : rej();
textArea.remove();
e.target.focus();
});
}
}
function setupDataOptions(rootAttributes) {
// INIT
const wrapper = document.createElement('div');
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/toolbar/data-options/DataOptions.jsx
+29
View File
@@ -78,6 +78,8 @@ function DataOptions(props = {}) {
{state.data &&
<pre>{JSON.stringify(state.data, null, 2)}</pre>
}
<button className='btn btn--secondary' onClick={(e) => copyToClipboard(e, state.data)}>Copy to Clipboard</button>
</SidebarStyle>
</div>;
@@ -133,6 +135,33 @@ function DataOptions(props = {}) {
}
}
function copyToClipboard(e, context) {
e.stopPropagation();
if (typeof context !== 'string') {
context = JSON.stringify(context, null, 2);
}
if (navigator.clipboard && window.isSecureContext) {
// This case will not work on non-https pages.
return navigator.clipboard.writeText(context);
} else {
let textArea = document.createElement("textarea");
textArea.value = context;
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
// textArea.focus();
textArea.select();
return new Promise((res, rej) => {
document.execCommand('copy') ? res() : rej();
textArea.remove();
e.target.focus()
});
}
}
export function setupDataOptions(rootAttributes) {
// INIT
const wrapper = document.createElement('div');
layouts/scripts/toolbar/data-options/data-options.style.js
+10 -2
View File
@@ -1,7 +1,7 @@
import styled from "styled-components";
export const SidebarStyle = styled.div`
--sidebarWidth: 300px;
--sidebarWidth: 360px;
position: fixed;
top: 0;
bottom: 0;
@@ -9,12 +9,15 @@ export const SidebarStyle = styled.div`
width: var(--sidebarWidth);
background-color: #E2E8F0;
border-right: 1px solid #CBD5E0;
padding: 0 0.75rem;
padding: 0 0.75rem 0.75rem;
box-sizing: border-box;
overflow: hidden;
transition: left .2s ease-in-out, visibility .2s ease-in-out;
visibility: hidden;
color: #333;
display: flex;
flex-direction: column;
align-items: flex-start;
&.active {
left: 0;
@@ -28,10 +31,13 @@ export const SidebarStyle = styled.div`
border-radius: 4px;
color: #333;
border: 1px solid #cbd5e0;
width: 100%;
box-sizing: border-box;
}
`;
export const SidebarHeaderStyle = styled.header`
width: 100%;
min-height: 34px;
padding: 0.5rem 0;
display: flex;
@@ -84,6 +90,8 @@ export const SidebarDataOptionsStyle = styled.div`
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
box-sizing: border-box;
select {
flex: 1 1;
layouts/styles/_buttons.scss
+7 -1
View File
@@ -3,7 +3,7 @@
--btn-background-color: white;
display: inline-block;
padding: calc(0.375rem - 2px) 0.75rem;
font-size: 1rem;
font-size: 0.875rem;
line-height: 1.5;
text-align: center;
text-decoration: none;
@@ -22,4 +22,10 @@
--btn-color: white;
--btn-background-color: #333;
}
&--secondary {
border-color: #cbd5e0;
--btn-color: #333;
--btn-background-color: #edf2f7;
}
}
layouts/styles/page--main.css
+8 -1
View File
@@ -14,7 +14,7 @@ body {
--btn-background-color: white;
display: inline-block;
padding: calc(0.375rem - 2px) 0.75rem;
font-size: 1rem;
font-size: 0.875rem;
line-height: 1.5;
text-align: center;
text-decoration: none;
@@ -32,6 +32,11 @@ body {
--btn-color: white;
--btn-background-color: #333;
}
.btn--secondary {
border-color: #cbd5e0;
--btn-color: #333;
--btn-background-color: #edf2f7;
}
.overlay {
position: fixed;
@@ -50,6 +55,8 @@ body {
.page_toolbar {
--gap: 2.5rem;
font-size: 14px;
min-height: 50px;
box-sizing: border-box;
font-family: Arial, sans-serif;
background-color: #EDF2F7;
padding: var(--top_panel_vertical_height) 1rem;
layouts/styles/page--main.css.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.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;EAEA;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;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGhFJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EAEA;EACA;;;AH2DJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"page--main.css"}
{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.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;;AAGF;EACE;EACA;EACA;;;AC5BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;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;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGlFJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EAEA;EACA;;;AH6DJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"page--main.css"}
layouts/styles/page--main.scss
+2
View File
@@ -16,6 +16,8 @@ body {
.page_toolbar {
--gap: 2.5rem;
font-size: 14px;
min-height: 50px;
box-sizing: border-box;
font-family: Arial, sans-serif;
background-color: #EDF2F7;