function blocklyCreateVariableWidget(Blockly) {
const shim = html`
<style>
.blockly-promt-box {
display: none;
box-shadow: 5px 5px 10px #888888;
width: 50vw;
border: 0px solid gray;
padding: 30px;
margin-top: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 7px;
}
.blockly-prompt-button {
font-family: Verdana;
font-size: 17px;
color:#ffffff;
background-color: #3F59A4;
border: solid 1px #3F59A4;
padding: 10px;
margin-left: 20px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 5px;
-moz-box-shadow: 3px 3px 3px #888;
-webkit-box-shadow: 3px 3px 3px #888;
box-shadow: 3px 3px 3px #888;
}
.blockly-prompt-input {
height:33px;
font-family: Verdana;
font-size: 17px;
color:#000000;
background-color: #F5F5F5;
border: solid 1px #848484;
padding: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 7px;
}
.blockly-prompt-button:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
.blockly-prompt-button:hover{
border-color: #66afe9;
outline: 0;
}
.blockly-prompt-input:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
.blockly-prompt-input:hover{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
</style>
<div />
`;
const promptBox = html`<div class="blockly-promt-box"></div>`;
const input = html`<input class="blockly-prompt-input" type=text />`;
const createVariableButton = html`<button class="blockly-prompt-button" id="createVariablePromptButton">创建变量</button>`;
const promtMessageBox = html`<div id="promptMessage" style="font-family: Verdana; "></div>`;
const alertMessageBox = html`<div style="font-family: Verdana; " id="alertbox"></div>`;
promptBox.appendChild(input);
promptBox.appendChild(createVariableButton);
promptBox.appendChild(promtMessageBox);
promptBox.appendChild(alertMessageBox);
shim.appendChild(promptBox);
window.alert = message => {
const container = document.querySelector('#alertbox');
container.innerHTML = message;
};
window.prompt = (caption, defaultText) => {
const b = document.querySelector('#promptMessage');
b.innerHTML = caption;
return input.value;
};
Blockly.Variables.createVariableButtonHandler = function(
workspace,
opt_callback,
opt_type
) {
let createVariablePromptButton = document.querySelector(
'#createVariablePromptButton'
);
var type = opt_type || '';
// This function needs to be named so it can be called recursively.
var promptAndCheckWithAlert = function(defaultName) {
if (defaultName === input.value && input.value !== undefined) {
console.log("defend recurse");
return "";
}
Blockly.Variables.promptName(
Blockly.Msg['NEW_VARIABLE_TITLE'],
defaultName,
function(text) {
if (text) {
var existing = Blockly.Variables.nameUsedWithAnyType(
text,
workspace
);
if (existing) {
if (existing.type == type) {
var msg = Blockly.Msg['VARIABLE_ALREADY_EXISTS'].replace(
'%1',
existing.name
);
} else {
var msg =
Blockly.Msg['VARIABLE_ALREADY_EXISTS_FOR_ANOTHER_TYPE'];
msg = msg
.replace('%1', existing.name)
.replace('%2', existing.type);
}
Blockly.alert(msg, function() {
promptAndCheckWithAlert(text); // Recurse
});
} else {
// No conflict
workspace.createVariable(text, type);
if (opt_callback) {
opt_callback(text);
}
promptBox.style.display = 'none';
}
} else {
// User canceled prompt.
if (opt_callback) {
opt_callback(null);
}
promptBox.style.display = 'none';
}
}
);
};
createVariablePromptButton.onclick = promptAndCheckWithAlert;
promptBox.style.display = 'block';
};
return shim;
}
function createCodeMirrorWidget(options) {
const view = html`
<style>
${BasicStyles}
${ThemeStyles}
</style>
<textarea id="code_mirror_editor" style="display:none;"></textarea>`;
const base = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.4';
require(`${base}/codemirror.min.js`).then(CodeMirror => {
codeMirrorModeJavascript(CodeMirror);
const container = document.querySelector("#code_mirror_editor");
const editor = CodeMirror.fromTextArea(container, {
lineNumbers: true,
mode: "javascript",
theme: "idea"
});
editor.setSize(options.width, options.height);
editor.on("change", options.oninput);
window.editor = editor;
});
return view;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
