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;