Skip to content

Commit

Permalink
Update Better Input
Browse files Browse the repository at this point in the history
  • Loading branch information
@SharkPool-SP
SharkPool-SP committed Aug 5, 2023
1 parent 2bab521 commit 134c180
Showing 1 changed file with 127 additions and 25 deletions.
152 changes: 127 additions & 25 deletions extensions/SharkPool/Better Input
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*
* This extension was made by SharkPool
* Version 1.7 (Emergency DOM fixes, Force Input Block, More Positioning, and Image setting)
* Version 1.8 (Bug fixes and Dropdown-able Menus)
* Do NOT delete these comments
*/

Expand Down Expand Up @@ -40,28 +40,33 @@
this.cancelButtonText = 'Cancel';
this.Button3Text = 'Okay';
this.Button4Text = 'No';
this.DropdownText = 'Dropdown';
this.submitButtonColor = '#0074D9';
this.cancelButtonColor = '#d9534f';
this.button3Color = '#0074D9';
this.button4Color = '#d9534f';
this.optionbuttonColor = '#5f5f5f';
this.cancelButtonBorderRadius = 5;
this.submitButtonBorderRadius = 5;
this.button3BorderRadius = 5;
this.button4BorderRadius = 5;
this.optionbuttonBorderRadius = 5;
this.submitButtonTextColor = '#ffffff';
this.cancelButtonTextColor = '#ffffff';
this.button3TextColor = '#ffffff';
this.button4TextColor = '#ffffff';
this.optionbuttonTextColor = '#ffffff';
this.textBoxBorderRadius = 5;
this.inputBoxRadius = 4;
this.isInputEnabled = true;
this.isInputEnabled = 'Enabled';
this.textBoxX = 0;
this.textBoxY = 0;
this.askBoxCount = 0;
this.maxBoxCount = 1;
this.forceInput = 'Disabled';
this.overlayInput = null
this.overlayImage = null
this.overlayInput = null;
this.overlayImage = null;
this.optionList = 'Option 1,Option 2,Option 3';
}

getInfo() {
Expand Down Expand Up @@ -124,6 +129,17 @@
},
},
},
{
opcode: 'setDropdown',
blockType: Scratch.BlockType.COMMAND,
text: 'set dropdown options to array: [DROPDOWN]',
arguments: {
DROPDOWN: {
type: Scratch.ArgumentType.STRING,
defaultValue: 'option 1,option 2,option 3',
},
},
},
{
blockType: Scratch.BlockType.LABEL,
text: 'Formatting',
Expand Down Expand Up @@ -154,6 +170,19 @@
},
},
},
{
opcode: 'setInputType',
blockType: Scratch.BlockType.COMMAND,
text: 'set Input Box to be [ACTION]',
blockIconURI: formatIcon,
arguments: {
ACTION: {
type: Scratch.ArgumentType.STRING,
menu: 'inputActionMenu',
defaultValue: 'Enabled',
},
},
},
{
opcode: 'setEnable',
blockType: Scratch.BlockType.COMMAND,
Expand All @@ -163,11 +192,11 @@
ENABLE_MENU: {
type: Scratch.ArgumentType.STRING,
menu: 'enableMenu',
defaultValue: 'Input Box',
defaultValue: 'Button 2',
},
ACTION: {
type: Scratch.ArgumentType.STRING,
menu: 'inputActionMenu',
menu: 'buttonActionMenu',
defaultValue: 'Enabled',
},
},
Expand Down Expand Up @@ -354,13 +383,14 @@
alignmentMenu: ['left', 'right', 'center'],
fontMenu: ['Arial', 'Times New Roman', 'Comic Sans MS', 'Verdana', 'Courier New', 'Impact', 'Cursive', 'Lucida Console', 'Scratch','Arial Black', 'Calibri', 'Consolas', 'Handwriting', 'Marker','Curly', 'Pixel'],
enterMenu: ['Disabled', 'Enter Key', 'Shift + Enter key'],
inputActionMenu: ['Enabled', 'Disabled'],
buttonActionMenu: ['Enabled', 'Disabled'],
inputActionMenu: ['Enabled', 'Disabled', 'Dropdown'],
enterEffectMenu: ['None', 'Fade in', 'Grow'],
exitEffectMenu: ['None', 'Fade out', 'Shrink'],
buttonMenu: ['Button 1','Button 2', 'Button 3', 'Button 4'],
enableMenu: ['Input Box','Button 2', 'Button 3', 'Button 4'],
elementMenu: ['Textbox', 'Input Box', 'Button 1', 'Button 2', 'Button 3', 'Button 4'],
colorSettingsMenu: ['Question', 'Input Text', 'Textbox', 'Input Background', 'Input Outline', 'Button 1', 'Button 2', 'Button 3', 'Button 4', 'Button 1 Text', 'Button 2 Text', 'Button 3 Text', 'Button 4 Text'],
buttonMenu: ['Button 1','Button 2', 'Button 3', 'Button 4', 'Dropdown'],
enableMenu: ['Button 2', 'Button 3', 'Button 4'],
elementMenu: ['Textbox', 'Input Box', 'Button 1', 'Button 2', 'Button 3', 'Button 4', 'Dropdown Buttons'],
colorSettingsMenu: ['Question', 'Input Text', 'Textbox', 'Input Background', 'Input Outline', 'Button 1', 'Button 2', 'Button 3', 'Button 4', 'Dropdown Buttons', 'Button 1 Text', 'Button 2 Text', 'Button 3 Text', 'Button 4 Text', 'Dropdown Text'],
},
};
}
Expand Down Expand Up @@ -388,19 +418,18 @@
break;
case 'Button 1':
this.submitButtonColor = colorValue;
this.Btn1Image = null;
break;
case 'Button 2':
this.cancelButtonColor = colorValue;
this.Btn2Image = null;
break;
case 'Button 3':
this.button3Color = colorValue;
this.Btn3Image = null;
break;
case 'Button 4':
this.button4Color = colorValue;
this.Btn4Image = null;
break;
case 'Dropdown Buttons':
this.optionbuttonColor = colorValue;
break;
case 'Button 1 Text':
this.submitButtonTextColor = colorValue;
Expand All @@ -414,6 +443,9 @@
case 'Button 4 Text':
this.button4TextColor = colorValue;
break;
case 'Dropdown Text':
this.optionButtonTextColor = colorValue;
break;
}
}

Expand Down Expand Up @@ -444,6 +476,9 @@
case "Input Box":
this.inputBoxRadius = value;
break;
case "Dropdown Buttons":
this.optionbuttonBorderRadius = value;
break;
}
}

Expand Down Expand Up @@ -534,9 +569,6 @@
const enableMenu = args.ENABLE_MENU;
const action = args.ACTION;
switch (enableMenu) {
case 'Input Box':
this.isInputEnabled = action === 'Enabled';
break;
case 'Button 2':
this.showCancelButton = action === 'Enabled';
break;
Expand All @@ -548,6 +580,10 @@
break;
}
}

setInputType(args) {
this.isInputEnabled = args.ACTION;
}

setButtonText(args) {
const buttonMenu = args.BUTTON_MENU;
Expand All @@ -565,6 +601,9 @@
case 'Button 4':
this.Button4Text = text;
break;
case 'Dropdown':
this.DropdownText = text;
break;
}
}

Expand Down Expand Up @@ -768,7 +807,7 @@
submitButton.textContent = this.submitButtonText;

submitButton.addEventListener('click', () => {
if (this.isInputEnabled) {
if (this.isInputEnabled !== 'Disabled') {
this.userInput = inputField.value;
} else {
this.userInput = this.submitButtonText;
Expand Down Expand Up @@ -796,7 +835,7 @@
cancelButton.style.display = this.showCancelButton ? 'inline-block' : 'none';

cancelButton.addEventListener('click', () => {
if (!this.isInputEnabled) {
if (this.isInputEnabled === 'Disabled') {
this.userInput = this.cancelButtonText;
}
this.isWaitingForInput = false;
Expand All @@ -822,7 +861,9 @@
Button3.style.display = this.showButton3 ? 'inline-block' : 'none';

Button3.addEventListener('click', () => {
this.userInput = this.Button3Text;
if (this.isInputEnabled === 'Disabled') {
this.userInput = this.Button3Text;
}
this.isWaitingForInput = false;
if (this.exitEffect) {
this.applyExitEffect(overlay);
Expand All @@ -846,7 +887,9 @@
Button4.style.display = this.showButton4 ? 'inline-block' : 'none';

Button4.addEventListener('click', () => {
this.userInput = this.Button4Text;
if (this.isInputEnabled === 'Disabled') {
this.userInput = this.Button4Text;
}
this.isWaitingForInput = false;
if (this.exitEffect) {
this.applyExitEffect(overlay);
Expand All @@ -856,11 +899,66 @@
resolve();
this.askBoxCount--;
});

const dropdown = document.createElement('div');
dropdown.className = 'dropdown';

const dropdownButton = document.createElement('button');
dropdownButton.className = 'dropdown-button';
dropdownButton.textContent = this.DropdownText;
dropdownButton.style.padding = '5px 10px';
dropdownButton.style.backgroundColor = this.optionbuttonColor;
dropdownButton.style.color = this.optionButtonTextColor;
dropdownButton.style.border = 'none';
dropdownButton.style.borderRadius = this.optionbuttonBorderRadius + 'px';

const dropdownContent = document.createElement('div');
dropdownContent.className = 'dropdown-content';

let isDropdownOpen = false;

const optionList = this.optionList;
const numOfOptions = optionList.split(',').length;
const options = this.optionList.split(',');
for (let i = 1; i <= numOfOptions; i++) {
const optionButton = document.createElement('button');
optionButton.style.marginRight = '5px';
optionButton.style.marginTop = '10px';
optionButton.style.padding = '5px 10px';
optionButton.style.backgroundColor = this.optionbuttonColor;
optionButton.style.color = this.optionButtonTextColor;
optionButton.style.border = 'none';
optionButton.style.borderRadius = this.optionbuttonBorderRadius + 'px';
optionButton.textContent = `${options[i - 1]}`;
optionButton.addEventListener('click', () => {
inputField.value = `${options[i - 1]}`;
});
dropdownContent.appendChild(optionButton);
}

dropdownButton.addEventListener('mouseover', () => {
if (!isDropdownOpen) {
overlay.insertBefore(dropdownContent, submitButton);
isDropdownOpen = true;
}
});

overlay.addEventListener('mouseleave', () => {
if (isDropdownOpen) {
overlay.removeChild(dropdownContent);
isDropdownOpen = false;
}
});

overlay.appendChild(questionText);

if (this.isInputEnabled) {
overlay.appendChild(inputField);
if (this.isInputEnabled !== 'Disabled') {
if (this.isInputEnabled === 'Enabled') {
overlay.appendChild(inputField);
} else {
dropdown.appendChild(dropdownButton);
overlay.appendChild(dropdown);
}
}

overlay.appendChild(submitButton);
Expand Down Expand Up @@ -934,7 +1032,11 @@
}

setSubmitEvent(args) {
this.forceInput = args.ENTER;
this.forceInput = args.ENTER;
}

setDropdown(args) {
this.optionList = args.DROPDOWN
}

setImage(args) {
Expand Down

0 comments on commit 134c180

Please sign in to comment.