Commit aaf1aee2 authored by Irina Ivanova's avatar Irina Ivanova

Add new style and refactor the code

parent 54ad80be
......@@ -3,23 +3,14 @@ Extension generates the string of specified length or calculates the length of s
Perfect tool for boundary testing!
[String Generator page on Blogger](http://ivanova-irina.blogspot.com/p/stringg.html "String Generator page on Blogger")
# Download and Install
* **[Install](https://chrome.google.com/webstore/detail/string-generator/mklinoolelpkognneckhecljdfhehfbc "Install")** last version from Google Store
or
* **[Download](https://github.com/iriiiina/stringG "Download")** source code from GitHub and load extension manually
# Questions and Comments
Any questions or comments are welcome! You can write me an e-mail on [iriiiina@gmail.com](mailto:iriiiina@gmail.com "iriiiina@gmail.com") or leave a comment on this page.
# Source Code and Issues
Source code and issue reporting is available at GitHub: [https://github.com/iriiiina/stringG](https://github.com/iriiiina/stringG "https://github.com/iriiiina/stringG")
Any questions or comments are welcome! You can write me an e-mail on [irina.ivanova@protonmail.com](irina.ivanova@protonmail.com) or create an issue here.
# Screenshots
![stringG](http://2.bp.blogspot.com/-YmDWe9Nyhx0/U0QuCtRLyDI/AAAAAAAAK9k/gZVl99UkPIg/s1600/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA+%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0+2014-04-08+%D0%B2+19.54.19.png "stringG")
![stringG](screenshots/1.png)
# Description
Extension is build for software testers to test HTML input fields.
......@@ -44,8 +35,7 @@ You can configure hot-keys for extension in the Google Chrome:
* open the extensions tab - `chrome://extensions`
* Link "Configure commands" at the bottom
* Choose an extension and type a shortcut
Now You can use it completely without a mouse!
* Now You can use it completely without a mouse!
# Posts about stringG
* *March 1, 2014* [String Generator v3.0](http://ivanova-irina.blogspot.com/2014/03/string-generator-v30.html "String Generator v3.0")
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<!DOCTYPE html>
<html>
<html lang="en-us">
<head>
<title>String Generator</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="src/GenerateString.js" type="text/javascript" charset="utf-8"></script>
<script src="src/CalculateLength.js" type="text/javascript" charset="utf-8"></script>
<script src="src/DisplayResult.js" type="text/javascript" charset="utf-8"></script>
<script src="src/KeyListener.js" type="text/javascript" charset="utf-8"></script>
<script src="src/Variables.js" type="text/javascript" charset="utf-8"></script>
<script src="src/generate-string.js" type="text/javascript" charset="utf-8"></script>
<script src="src/calculate-length.js" type="text/javascript" charset="utf-8"></script>
<script src="src/display-result.js" type="text/javascript" charset="utf-8"></script>
<script src="src/key-listener.js" type="text/javascript" charset="utf-8"></script>
<script src="src/variables.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="error"><br /><br /></div>
<div id="generateString">
Number of characters: <input type="text" name="length" id="inputLength" maxlength="10" tabindex="1" autofocus/><br />
<div id="properties">
<table>
<tr>
<td><input type="radio" name="inputType" id="inputTypeNumber" value="number"/>
number <span class="keyLabel">[LeftArr &#8592;]</span>
<input type="radio" name="inputType" id="inputTypeText" value="text" checked/>
text <span class="keyLabel">[RightArr &#8594;]</span></td>
</tr>
<tr>
<td><input type="checkbox" name="inputSpace" id="inputSpace" value="space"/>
insert spaces <span class="keyLabel">[UpArr &#8593;]</span></td>
</tr>
<tr>
<td><input type="checkbox" name="inputUmlaut" id="inputUmlaut" value="umlaut" />
insert umlauts &Auml;&Ouml;&Uuml;&Otilde; <span class="keyLabel">[DownArr &#8595;]</span></td>
</tr>
</table>
</div>
<br />
Copy the generated string:<br />
<textarea rows="4" cols="40" id="generatedString" disabled></textarea>
</div>
<br />
<div id="separator">&mdash; OR &mdash;</div><br />
<div id="calculateString">
Insert the string to calculate the length:<br />
<textarea rows="4" cols="40" id="inputString" tabindex="2"></textarea>
<div id="error"></div>
<div>
<p>Number of characters: <input type="text" name="length" id="inputLength" maxlength="10" tabindex="1" autofocus/></p>
<div id="properties">
<p><input type="radio" name="inputType" id="inputTypeNumber" value="number"/>
number <span class="key">[LeftArr &#8592;]</span>
<input type="radio" name="inputType" id="inputTypeText" value="text" checked/>
text <span class="key">[RightArr &#8594;]</span></p>
<p><input type="checkbox" name="inputSpace" id="inputSpace" value="space"/>
insert spaces <span class="key">[UpArr &#8593;]</span></p>
<p><input type="checkbox" name="inputUmlaut" id="inputUmlaut" value="umlaut" />
insert umlauts &Auml;&Ouml;&Uuml;&Otilde; <span class="key">[DownArr &#8595;]</span></p>
</div>
<div id="calculatedLength">Length:<br /></div>
</body>
<p>Copy the generated string:</p>
<textarea rows="4" cols="40" id="generatedString" disabled></textarea>
</div>
<div>&mdash; OR &mdash;</div>
<div>
<p>Insert the string to calculate the length:</p>
<textarea rows="4" cols="40" id="inputString" tabindex="2"></textarea>
</div>
<div id="calculatedLength">
Length:</div>
</body>
</html>
......@@ -2,7 +2,7 @@
"name": "stringG",
"version": "5.0",
"manifest_version": 2,
"description": "Extension generates the string of specified length or calculates the length of specified string.",
"description": "Generate string of specified length or calculate the length of specified string",
"homepage_url": "https://gitlab.com/irina-ivanova-extensions/stringG",
"icons": {
"128": "icons/icon.png"
......
......@@ -7,44 +7,44 @@ var generatedString;
function setVariablesForStringGeneration() {
var inputType = getInputType();
setType(inputType);
var inputLength = document.getElementById('inputLength').value;
var inputLength = document.getElementById("inputLength").value;
setLength(inputLength);
setSpace();
setUmlaut();
}
function setLength(inputLength) {
if (inputLength.indexOf('.') == -1 && inputLength.indexOf(',') == -1 && inputLength > 0)
if (inputLength.indexOf(".") === -1 && inputLength.indexOf(",") === -1 && inputLength > 0)
length = inputLength;
else
returnError('Inserted number is incorrect');
returnError("Inserted number should be positive integer");
}
function getInputType() {
if (document.getElementById('inputTypeNumber').checked)
return 'number';
else if (document.getElementById('inputTypeText').checked)
return 'text';
if (document.getElementById("inputTypeNumber").checked)
return "number";
else if (document.getElementById("inputTypeText").checked)
return "text";
}
function setType(inputType) {
if (inputType == 'number' || inputType == 'text')
if (inputType === "number" || inputType === "text")
type = inputType;
else
returnError('Inserted type is incorrect');
returnError("Inserted type is incorrect");
}
function setSpace() {
if (document.getElementById('inputSpace').checked)
if (document.getElementById("inputSpace").checked)
space = true;
else
space = false;
}
function setUmlaut() {
if (document.getElementById('inputUmlaut').checked)
if (document.getElementById("inputUmlaut").checked)
umlaut = true;
else
umlaut = false;
......@@ -53,5 +53,5 @@ function setUmlaut() {
var string;
function setVariablesForCalculateLength() {
string = document.getElementById('inputString').value;
}
\ No newline at end of file
string = document.getElementById("inputString").value;
}
function returnError(errorText) {
setErrorText(errorText);
colorBorderToRed();
selectInputLength();
throw '';
throw "";
}
function clearError() {
var clearError = document.getElementById('error');
var clearError = document.getElementById("error");
clearError.innerText = "\n\n";
clearBorderStyle();
}
function setErrorText(errorText) {
var divError = document.getElementById('error');
var divError = document.getElementById("error");
divError.innerText = errorText + "\n\n";
}
function colorBorderToRed() {
var inputLength = document.getElementById('inputLength');
inputLength.style.borderColor = '#FF0000';
}
function clearBorderStyle() {
var inputLength = document.getElementById('inputLength');
inputLength.style.border = '';
}
function returnGeneratedString(generatedString) {
var textarea = document.getElementById('generatedString');
var textarea = document.getElementById("generatedString");
textarea.value = textarea.value + generatedString;
selectGeneratedString();
}
function returnCalculatedLength(calculatedLength) {
var divCalculatedLength = document.getElementById('calculatedLength');
divCalculatedLength.innerText = 'Length: ' + calculatedLength + "\n";
var divCalculatedLength = document.getElementById("calculatedLength");
divCalculatedLength.innerText = "Length: " + calculatedLength + "\n";
}
function setFocusOnInputLength() {
document.getElementById('inputLength').focus();
document.getElementById("inputLength").focus();
}
function setFocusOnInputString() {
var inputString = document.getElementById('inputString');
var inputString = document.getElementById("inputString");
inputString.focus();
}
function setFocusAfterRadioButton(event) {
var radioButton = event.target;
if (radioButton.checked) {
if (document.getElementById('inputTypeNumber').checked)
if (document.getElementById("inputTypeNumber").checked)
disableUmlautCheckbox();
else
enableUmlautCheckbox();
......@@ -68,7 +55,7 @@ function setFocusAfterRadioButton(event) {
function setFocusAfterSpaceCheckbox(event) {
var spaceCheckbox = event.target;
if (spaceCheckbox.checked) {
setFocusOnInputLength();
selectInputLength();
......@@ -80,7 +67,7 @@ function setFocusAfterSpaceCheckbox(event) {
function setFocusAfterUmlautCheckbox(event) {
var umlautCheckbox = event.target;
if (umlautCheckbox.checked) {
setFocusOnInputLength();
selectInputLength();
......@@ -91,62 +78,62 @@ function setFocusAfterUmlautCheckbox(event) {
}
function selectInputLength() {
document.getElementById('inputLength').select();
document.getElementById("inputLength").select();
}
function clearInputLength() {
var inputLength = document.getElementById('inputLength');
inputLength.value = '';
var inputLength = document.getElementById("inputLength");
inputLength.value = "";
}
function checkTextRadiobutton() {
var textRadiobutton = document.getElementById('inputTypeText');
var textRadiobutton = document.getElementById("inputTypeText");
textRadiobutton.checked = true;
setFocusOnInputLength();
enableUmlautCheckbox();
}
function checkNumberRadiobutton() {
var numberRadiobutton = document.getElementById('inputTypeNumber');
var numberRadiobutton = document.getElementById("inputTypeNumber");
numberRadiobutton.checked = true;
setFocusOnInputLength();
disableUmlautCheckbox();
}
function checkSpaceCheckbox() {
var spaceCheckbox = document.getElementById('inputSpace');
var spaceCheckbox = document.getElementById("inputSpace");
spaceCheckbox.checked = true;
}
function uncheckSpaceCheckbox() {
var spaceCheckbox = document.getElementById('inputSpace');
var spaceCheckbox = document.getElementById("inputSpace");
spaceCheckbox.checked = false;
}
function checkUmlautCheckbox() {
var umlautCheckbox = document.getElementById('inputUmlaut');
var umlautCheckbox = document.getElementById("inputUmlaut");
umlautCheckbox.checked = true;
}
function uncheckUmlautCheckbox() {
var umlautCheckbox = document.getElementById('inputUmlaut');
var umlautCheckbox = document.getElementById("inputUmlaut");
umlautCheckbox.checked = false;
}
function enableUmlautCheckbox() {
document.getElementById('inputUmlaut').disabled = false;
document.getElementById("inputUmlaut").disabled = false;
}
function disableUmlautCheckbox() {
document.getElementById('inputUmlaut').disabled = true;
document.getElementById('inputUmlaut').checked = false;
document.getElementById("inputUmlaut").disabled = true;
document.getElementById("inputUmlaut").checked = false;
}
function selectGeneratedString() {
document.getElementById('generatedString').select();
document.getElementById("generatedString").select();
}
function clearGeneratedString() {
var clearTextarea = document.getElementById('generatedString');
clearTextarea.value = '';
}
\ No newline at end of file
var clearTextarea = document.getElementById("generatedString");
clearTextarea.value = "";
}
......@@ -3,26 +3,26 @@ function generateString() {
clearGeneratedString();
clearError();
setVariablesForStringGeneration();
if (type == 'number')
if (type === "number")
generateNumberString();
else if (type == 'text')
else if (type === "text")
generateTextString();
returnGeneratedString(generatedString);
returnGeneratedString(generatedString);
}
function generateNumberString() {
if (length > 2) {
generatedString = '1';
generateMiddleContent(false, '0');
generatedString += '9';
} else if (length == 2)
generatedString = '19';
generatedString = "1";
generateMiddleContent(false, "0");
generatedString += "9";
} else if (length === 2)
generatedString = "19";
else
generatedString = '1';
generatedString = "1";
}
function generateTextString() {
......@@ -33,53 +33,49 @@ function generateTextString() {
}
function generateTextStringWithUmplauts() {
if (length == 1)
generatedString = 'Ä';
else if (length == 2)
generatedString = 'Äö';
else if (length == 3)
generatedString = 'Äöü';
else if (length == 4)
generatedString = 'Äöüõ';
else if (length == 5)
generatedString = 'ÄöüõZ';
if (length === 1)
generatedString = "Ä";
else if (length === 2)
generatedString = "Äö";
else if (length === 3)
generatedString = "Äöü";
else if (length === 4)
generatedString = "Äöüõ";
else if (length === 5)
generatedString = "ÄöüõZ";
else if (length > 5) {
generatedString = 'Äöüõ';
generateMiddleContent(true, 'x');
generatedString += 'Z';
generatedString = "Äöüõ";
generateMiddleContent(true, "x");
generatedString += "Z";
}
}
function generateTextStringWithoutUmlauts() {
if (length > 2) {
generatedString = 'A';
generateMiddleContent(false, 'x');
generatedString += 'Z';
} else if (length == 2)
generatedString = 'AZ';
generatedString = "A";
generateMiddleContent(false, "x");
generatedString += "Z";
} else if (length === 2)
generatedString = "AZ";
else
generatedString = 'A';
generatedString = "A";
}
function generateMiddleContent(isUmlaut, middleCharacter) {
var i;
if (isUmlaut)
i = 5;
else
i = 2;
for (i; i < length; i++) {
if (i % 10 == 0) {
if (i % 10 === 0) {
if (space)
generatedString += ' ';
generatedString += " ";
else
generatedString += middleCharacter;
} else
generatedString += middleCharacter;
}
}
\ No newline at end of file
}
if (window.addEventListener)
window.addEventListener('load', listenKeys, false);
window.addEventListener("load", listenKeys, false);
else if (window.attachEvent)
window.attachEvent('onload', listenKeys);
window.attachEvent("onload", listenKeys);
else
document.addEventListener('load', listenKeys, false);
document.addEventListener("load", listenKeys, false);
function listenKeys(){
listenInputLength(document.getElementById('inputLength'));
listenRadioButtons(document.getElementById('inputTypeNumber'), document.getElementById('inputTypeText'));
listenSpaceCheckbox(document.getElementById('inputSpace'));
listenUmlautCheckbox(document.getElementById('inputUmlaut'));
listenInputString(document.getElementById('inputString'));
listenInputLength(document.getElementById("inputLength"));
listenRadioButtons(document.getElementById("inputTypeNumber"), document.getElementById("inputTypeText"));
listenSpaceCheckbox(document.getElementById("inputSpace"));
listenUmlautCheckbox(document.getElementById("inputUmlaut"));
listenInputString(document.getElementById("inputString"));
}
function listenInputLength(inputLength) {
if (inputLength.addEventListener)
inputLength.addEventListener('keydown', inputLengthListener, false);
inputLength.addEventListener("keydown", inputLengthListener, false);
else if (inputLength.attachEvent)
inputLength.attachEvent('keydown', inputLengthListener);
inputLength.attachEvent("keydown", inputLengthListener);
}
function listenRadioButtons(inputTypeNumber, inputTypeText) {
if (inputTypeNumber.addEventListener) {
inputTypeNumber.addEventListener('change', setFocusAfterRadioButton, false);
inputTypeText.addEventListener('change', setFocusAfterRadioButton, false);
inputTypeNumber.addEventListener("change", setFocusAfterRadioButton, false);
inputTypeText.addEventListener("change", setFocusAfterRadioButton, false);
} else if (inputTypeNumber.attachEvent)
inputTypeNumber.attachEvent('change', setFocusAfterRadioButton);
inputTypeNumber.attachEvent("change", setFocusAfterRadioButton);
}
function listenSpaceCheckbox(inputSpace) {
if (inputSpace.addEventListener)
inputSpace.addEventListener('change', setFocusAfterSpaceCheckbox, false);
inputSpace.addEventListener("change", setFocusAfterSpaceCheckbox, false);
else if (inputSpace.attachEvent)
inputSpace.attachEvent('change', setFocusAfterSpaceCheckbox);
inputSpace.attachEvent("change", setFocusAfterSpaceCheckbox);
}
function listenUmlautCheckbox(inputUmlaut) {
if (inputUmlaut.addEventListener)
inputUmlaut.addEventListener('change', setFocusAfterUmlautCheckbox, false);
inputUmlaut.addEventListener("change", setFocusAfterUmlautCheckbox, false);
else if (inputUmlaut.attachEvent)
inputUmlaut.attachEvent('change', setFocusAfterUmlautCheckbox);
inputUmlaut.attachEvent("change", setFocusAfterUmlautCheckbox);
}
function listenInputString(inputString) {
if(inputString.addEventListener)
inputString.addEventListener('keydown', calculateLengthListener, false);
inputString.addEventListener("keydown", calculateLengthListener, false);
else if(inputString.attachEvent)
inputString.attachEvent('keydown', calculateLengthListener);
inputString.attachEvent("keydown", calculateLengthListener);
}
var enter = 13;
var rightArrow = 39;
var leftArrow = 37;
var upArrow = 38;
var downArrow = 40;
var enter=13;
var rightArrow=39;
var leftArrow=37;
var upArrow=38;
var downArrow=40;
function inputLengthListener(e) {
if (e.keyCode == enter)
if (e.keyCode === enter)
generateString();
else if (e.keyCode == rightArrow) {
else if (e.keyCode === rightArrow) {
checkTextRadiobutton();
selectInputLength();
} else if (e.keyCode == leftArrow) {
} else if (e.keyCode === leftArrow) {
checkNumberRadiobutton();
selectInputLength();
} else if (e.keyCode == upArrow) {
if (document.getElementById('inputSpace').checked)
} else if (e.keyCode === upArrow) {
if (document.getElementById("inputSpace").checked)
uncheckSpaceCheckbox();
else
checkSpaceCheckbox();
} else if (e.keyCode == downArrow) {
if (document.getElementById('inputUmlaut').checked && document.getElementById('inputTypeText').checked)
} else if (e.keyCode === downArrow) {
if (document.getElementById("inputUmlaut").checked && document.getElementById("inputTypeText").checked)
uncheckUmlautCheckbox();
else if (document.getElementById('inputTypeText').checked)
else if (document.getElementById("inputTypeText").checked)
checkUmlautCheckbox();
}
}
function calculateLengthListener(e) {
if (e.keyCode == enter)
if (e.keyCode === enter)
calculateLength();
}
\ No newline at end of file
}
body {
min-width: 340px;
min-width: 300px;
text-align: center;
overflow-x: hidden;
background-color: #333333;
font-family: "Lucida Console", Monaco, monospace;
background-color: #9365B8;
font-family: Lucida Sans Unicode;
font-size: 11px;
color: #CCCCCC;
color: #EFEFEF;
}
input {
font-size: 11px;
color: #000000;
font-family: "Lucida Console", Monaco, monospace;
#error {
font-size: 14px;
color: #FBA026;
font-weight: bold;
height: 14px;
}
#inputLength {
width: 80px;
}
#generateString {
margin-right: 5px;
vertical-align: middle;
#properties {
text-align: left;
margin-left: 20px;
}
#calculateString {
margin-right: 5px;
vertical-align: middle;
.key {
vertical-align: super;
}
#calculatedLength {
margin-right: 5px;
vertical-align: middle;
font-size: 13px;
font-weight: bold;
}
#error {
font-size: 14px;
color: #993333;
font-weight: bold;
}
.keyLabel {
color: gray;
vertical-align: super;
}
#properties {
position:relative;
left:20px;
}
#separator {
text-align: center;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment