Commit 81750e36 authored by Irina Ivanova's avatar Irina Ivanova

New style and design; refactor the code

parent 4085dca1
# CHANGELOG
### v3.0 29.01.2017
* Refactor the code
* Change style and design
\ No newline at end of file
...@@ -3,27 +3,13 @@ Extension opens URL with one parameter in new tab. ...@@ -3,27 +3,13 @@ Extension opens URL with one parameter in new tab.
It's useful for people who have to open one URL with different parameter values (for example, some prototype with different page ID-s). It's useful for people who have to open one URL with different parameter values (for example, some prototype with different page ID-s).
[Page of URL With Parameter Opener](http://ivanova-irina.blogspot.com/p/url-with-parameter-opener.html "Page of URL With Parameter Opener") [Same extension of FireFox](https://gitlab.com/irina-ivanova-extensions/URL-With-Parameter-Opener-FF "Same extension of FireFox")
[Same extension of FireFox](https://github.com/iriiiina/URL-With-Parameter-Opener-FF "Same extension of FireFox")
# Download and Install # Download and Install
* **[Install](https://chrome.google.com/webstore/detail/url-with-parameter-opener/koidpmicflkfdkkbhoalljjknjeehlph "Install")** last version from Google Store * **[Install](https://chrome.google.com/webstore/detail/url-with-parameter-opener/koidpmicflkfdkkbhoalljjknjeehlph "Install")** last version from Google Store
or
* **[Download](https://github.com/iriiiina/URL-With-Parameter-Opener "Download")** source code from GitHub and load extension manually
# Questions and Comments # 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. Any questions or comments are welcome! You can write me an e-mail on [irina.ivanova@protonmail.com](mailto:irina.ivanova@protonmail.com "irina.ivanova@protonmail.com").
# Source Code and Issues
Source code and issue reporting is available at GitHub: [https://github.com/iriiiina/URL-With-Parameter-Opener](https://github.com/iriiiina/URL-With-Parameter-Opener "https://github.com/iriiiina/URL-With-Parameter-Opener")
# Screenshots
![URL With Parameter Opener](http://1.bp.blogspot.com/-ge_vHKtYux4/VB0oySaEFdI/AAAAAAAALX0/eRjUBg0wCiQ/s1600/extension.png "URL With Parameter Opener")
![Options of URL With Parameter Opener](http://3.bp.blogspot.com/-SV1qAgE9B-o/VB0oyoDVteI/AAAAAAAALX4/zzrvzVamxOM/s1600/options.png "Options of URL With Parameter Opener")
# Description # Description
Basically extension simply adds your parameter to specified URL and opens it in new tab: Basically extension simply adds your parameter to specified URL and opens it in new tab:
...@@ -37,7 +23,7 @@ Where `URL` is parameter, that user should specify in Options page (only one tim ...@@ -37,7 +23,7 @@ Where `URL` is parameter, that user should specify in Options page (only one tim
* All spaces in the beginning and in the end will be trimmed * All spaces in the beginning and in the end will be trimmed
* Skype formatting will be trimmed: * Skype formatting will be trimmed:
`[16.09.2014 13:34:34] Irina Ivanova: PARAMETER` `[16.09.2014 13:34:34] Irina Ivanova: PARAMETER`
will be recognized as `PARAMETER` will be recognised as `PARAMETER`
* Shows history of last 5 inserted values. * Shows history of last 5 inserted values.
# Chrome Tip # Chrome Tip
...@@ -45,8 +31,7 @@ You can configure hot keys for extension in the Google Chrome: ...@@ -45,8 +31,7 @@ You can configure hot keys for extension in the Google Chrome:
* open the extensions tab - `chrome://extensions` * open the extensions tab - `chrome://extensions`
* link "Configure commands" at the bottom * link "Configure commands" at the bottom
* choose an extension and type a shortcut * 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 JIRA Issue Opener # Posts About JIRA Issue Opener
* *January 5, 2015* [Getting Started With FireFox Extensions](http://ivanova-irina.blogspot.com/2015/02/getting-started-with-firefox-extensions.html "Getting Started With FireFox Extensions") * *January 5, 2015* [Getting Started With FireFox Extensions](http://ivanova-irina.blogspot.com/2015/02/getting-started-with-firefox-extensions.html "Getting Started With FireFox Extensions")
......
body { body {
background-color: white; font-family: Lucida Sans Unicode;
font-family: Arial, sans-serif; color: #28324e;
font-size: 14px; margin-left: 50px;
color: black
} }
img { a:link, a:visited {
float: left; color: #3D8EB9;
margin: 10px
}
h1 {
color: #333333
}
p {
color: gray;
padding-left: 100px
} }
table { a:hover {
padding-left: 50px color: #f37934;
} }
td { h1 {
vertical-align: top color: #FAC51C;
}
#URL-label {
font-weight: bold;
padding-top: 5px
} }
#button { #button {
position: relative; position: relative;
float: left; float: left;
padding-left: 40px; padding-left: 40px;
padding-top: 20px; padding-top: 20px;
width: 200px width: 200px;
} }
#status { #status {
position: relative; color: #41A85F;
color: #006600;
width: 200px; width: 200px;
padding-top: 25px; padding-top: 25px;
float: left float: left;
} }
#error { #error {
position: relative; color: #B8312F;
color: #CC0000;
padding-top: 25px; padding-top: 25px;
float: left float: left;
height: 20px;
} }
#save { #save {
background-color: #666666; background-color: #475577;
color: white; color: white;
border: 0px; border: 0px;
font-size: 20px; font-size: 20px;
width: 160px width: 160px;
} }
#save:hover { #save:hover {
background-color: #333333 background-color: #f37934;
}
a {
color: #205081
}
#contacts {
font-size: 10px
} }
body { body {
min-width: 230px; min-width: 230px;
overflow-x: hidden; height: 120px;
background-color: #333333; background-color: #FAC51C;
font-family: Arial, sans-serif; font-family: Lucida Sans Unicode;
font-size: 14px; text-align: center;
color: #CCCCCC margin-bottom: 30px;
}
input {
font-size: 14px;
color: #000000
} }
#error { #error {
font-size: 14px; color: #B8312F;
color: #CC0000;
padding-bottom: 10px; padding-bottom: 10px;
text-align: center height: 20px;
}
#info {
float: right;
color: gray;
font-size: 10px
}
.description {
text-align: right;
font-size: 11px;
color: #CCCCCC
} }
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en-us">
<head> <head>
<title>URL With Parameter Opener</title> <title>URL&p</title>
<script type="text/javascript" src="js/jquery-1.10.2.js" charset="utf-8"></script>
<script src="js/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="js/jquery-ui.js" charset="utf-8"></script>
<script src="js/jquery-ui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="js/openURL.js" charset="utf-8"></script>
<script src="js/openURL.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" />
</head> </head>
<body> <body>
<div id="error"> <div id="error"></div>
<br/>
</div>
<div id="parameterInput"> <div id="parameterInput">
<label for="parameter">Parameter:&nbsp;</label>
<input type="text" name="parameter" id="parameter" maxlength="100" size="16" autofocus /> <input type="text" name="parameter" id="parameter" maxlength="100" size="16" autofocus />
<p class="description">Insert parameter</p>
<p class="description">Spaces and Skype formatting will be trimmed</p>
<p class="description">URL will be opened in new tab</p>
</div> </div>
</body> </body>
</html> </html>
function setErrorText(errorText) { function setErrorText(errorText) {
var divError=document.getElementById("error");
var divError = document.getElementById('error'); divError.innerText=errorText + "\n";
divError.innerText = errorText + '\n';
}; };
function colorBorderToRed(element) { function returnError(errorText) {
var border = document.getElementById(element);
border.style.borderColor = '#FF6666';
border.focus();
border.select();
};
function returnError(errorText, element) {
setErrorText(errorText); setErrorText(errorText);
colorBorderToRed(element); throw "";
throw '';
}; };
var parameter, var parameter,
url, url,
isError = 0; isError=0;
function removeSpaces(string) { function removeSpaces(string) {
while (string.charAt(string.length - 1) === " ") {
while (string.charAt(string.length - 1) === ' ') { string=string.slice(0, string.length - 1);
string = string.slice(0, string.length - 1);
} }
if (string.charAt(0) === ' ') { if (string.charAt(0) === " ") {
var temp = string.split(' '); var temp=string.split(" ");
string = temp[temp.length - 1]; string=temp[temp.length - 1];
} }
return string; return string;
}; };
function removeSkypeFormatting(string) { function removeSkypeFormatting(string) {
if (string.charAt(0) === "[") {
if (string.charAt(0) === '[') { var temp=string.split(" ");
var temp = string.split(' '); string=temp[temp.length - 1];
string = temp[temp.length - 1];
} }
return string; return string;
}; };
function openWindow() { function openWindow() {
window.open(url + parameter); window.open(url + parameter);
}; };
var list = []; var list=[];
$(function () { $(function () {
chrome.storage.sync.get(function (items) { chrome.storage.sync.get(function (items) {
if (items.savedHistory0 === undefined) { if (items.savedHistory0 === undefined) {
list[0] = ""; list[0]="";
} else { } else {
list[0] = items.savedHistory0; list[0]=items.savedHistory0;
} }
if (items.savedHistory1 === undefined) { if (items.savedHistory1 === undefined) {
list[1] = ""; list[1]="";
} else { } else {
list[1] = items.savedHistory1; list[1]=items.savedHistory1;
} }
if (items.savedHistory2 === undefined) { if (items.savedHistory2 === undefined) {
list[2] = ""; list[2]="";
} else { } else {
list[2] = items.savedHistory2; list[2]=items.savedHistory2;
} }
if (items.savedHistory3 === undefined) { if (items.savedHistory3 === undefined) {
list[3] = ""; list[3]="";
} else { } else {
list[3] = items.savedHistory3; list[3]=items.savedHistory3;
} }
if (items.savedHistory4 === undefined) { if (items.savedHistory4 === undefined) {
list[4] = ""; list[4]="";
} else { } else {
list[4] = items.savedHistory4; list[4]=items.savedHistory4;
} }
}); });
$('#parameter').autocomplete({ $("#parameter").autocomplete({
source: function(request, response) { source: function(request, response) {
var results = $.ui.autocomplete.filter(list, request.term); var results=$.ui.autocomplete.filter(list, request.term);
if (list[0] === "") { if (list[0] === "") {
response(results.slice(0, 0)); response(results.slice(0, 0));
} else if (list[1] === "") { } else if (list[1] === "") {
...@@ -112,19 +94,17 @@ $(function () { ...@@ -112,19 +94,17 @@ $(function () {
}); });
function saveHistory(parameter) { function saveHistory(parameter) {
chrome.storage.sync.get(function (items) { chrome.storage.sync.get(function (items) {
list[0]=items.savedHistory0;
list[0] = items.savedHistory0; list[1]=items.savedHistory1;
list[1] = items.savedHistory1; list[2]=items.savedHistory2;
list[2] = items.savedHistory2; list[3]=items.savedHistory3;
list[3] = items.savedHistory3; list[4]=items.savedHistory4;
list[4] = items.savedHistory4;
for (var i=4; i > 0; i--) {
for (var i = 4; i > 0; i--) { list[i]=list[i-1];
list[i] = list[i-1];
} }
list[0] = parameter; list[0]=parameter;
chrome.storage.sync.set({ chrome.storage.sync.set({
savedHistory0: list[0], savedHistory0: list[0],
...@@ -137,21 +117,19 @@ function saveHistory(parameter) { ...@@ -137,21 +117,19 @@ function saveHistory(parameter) {
} }
function openURL() { function openURL() {
chrome.storage.sync.get(function (item) { chrome.storage.sync.get(function (item) {
url=item.savedUrl;
url = item.savedUrl; parameter=document.getElementById("parameter").value;
parameter=removeSpaces(parameter);
parameter = document.getElementById('parameter').value; parameter=removeSkypeFormatting(parameter);
parameter = removeSpaces(parameter);
parameter = removeSkypeFormatting(parameter);
if (parameter === '') { if (parameter === "") {
isError = 1; isError=1;
returnError('Please insert parameter', 'parameter'); returnError("Please insert parameter");
} else if (url === undefined) { } else if (url === undefined) {
isError = 1; isError=1;
returnError('Please define URL in Options', 'parameter'); returnError("Please define URL in Options");
} else { } else {
saveHistory(parameter); saveHistory(parameter);
openWindow(); openWindow();
...@@ -160,8 +138,7 @@ function openURL() { ...@@ -160,8 +138,7 @@ function openURL() {
}; };
function inputParameterListener(e) { function inputParameterListener(e) {
var enter=13;
var enter = 13;
if (e.keyCode === enter) { if (e.keyCode === enter) {
openURL(); openURL();
...@@ -169,23 +146,21 @@ function inputParameterListener(e) { ...@@ -169,23 +146,21 @@ function inputParameterListener(e) {
}; };
function listenInputParameter(inputParameter) { function listenInputParameter(inputParameter) {
if (inputParameter.addEventListener) { if (inputParameter.addEventListener) {
inputParameter.addEventListener('keydown', inputParameterListener, false); inputParameter.addEventListener("keydown", inputParameterListener, false);
} else if (inputParameter.attachEvent) { } else if (inputParameter.attachEvent) {
inputParameter.attachEvent('keydown', inputParameterListener); inputParameter.attachEvent("keydown", inputParameterListener);
} }
}; };
function listenParameter() { function listenParameter() {
listenInputParameter(document.getElementById("parameter"));
listenInputParameter(document.getElementById('parameter'));
}; };
if (window.addEventListener) { if (window.addEventListener) {
window.addEventListener('load', this.listenParameter, false); window.addEventListener("load", this.listenParameter, false);
} else if (window.attachEvent) { } else if (window.attachEvent) {
window.attachEvent('onload', this.listenParameter); window.attachEvent("onload", this.listenParameter);
} else { } else {
document.addEventListener('load', this.listenParameter, false); document.addEventListener("load", this.listenParameter, false);
} }
function saveOptions() { function saveOptions() {
var url = document.getElementById('urlOption').value; var url=document.getElementById("urlOption").value;
var status = document.getElementById('status'); var status=document.getElementById("status");
var error = document.getElementById('error'); var error=document.getElementById("error");
var border = document.getElementById('urlOption'); var border=document.getElementById("urlOption");
if (url === '') { if (url === "") {
error.textContent = 'Please fill URL'; error.textContent="Please fill URL";
border.style.borderColor = '#CC0000'; border.style.borderColor="#CC0000";
border.focus(); border.focus();
} else { } else {
error.innerText = '\n'; error.innerText="\n";
border.style.border = ''; border.style.border="";
border.focus(); border.focus();
border.select(); border.select();
chrome.storage.sync.set({ chrome.storage.sync.set({
savedUrl: url savedUrl: url
}, function () { }, function () {
status.textContent = 'URL is saved'; status.textContent="URL is saved";
setTimeout(function () { setTimeout(function () {
status.textContent = ''; status.textContent="";
}, 2000); }, 2000);
}); });
} }
...@@ -29,46 +29,37 @@ function restoreOptions() { ...@@ -29,46 +29,37 @@ function restoreOptions() {
chrome.storage.sync.get({ chrome.storage.sync.get({
savedUrl: "http://example.com?parameter=" savedUrl: "http://example.com?parameter="
}, function (items) { }, function (items) {
document.getElementById('urlOption').value = items.savedUrl; document.getElementById("urlOption").value=items.savedUrl;
document.getElementById('urlOption').select(); document.getElementById("urlOption").select();
}); });
} }
document.addEventListener('DOMContentLoaded', restoreOptions); document.addEventListener("DOMContentLoaded", restoreOptions);
document.getElementById('save').addEventListener('click', document.getElementById("save").addEventListener("click", saveOptions);
saveOptions);
var enter=13;
var enter = 13;
function inputURLListener(e) { function inputURLListener(e) {
'use strict';
if (e.keyCode === enter) { if (e.keyCode === enter) {
saveOptions(); saveOptions();
} }
} }
function listenInputURL(inputURL) { function listenInputURL(inputURL) {
'use strict';
if (inputURL.addEventListener) { if (inputURL.addEventListener) {
inputURL.addEventListener('keydown', inputURLListener, false); inputURL.addEventListener("keydown", inputURLListener, false);
} else if (inputURL.attachEvent) { } else if (inputURL.attachEvent) {
inputURL.attachEvent('keydown', inputURLListener); inputURL.attachEvent("keydown", inputURLListener);
} }
} }
function listenURL() { function listenURL() {
'use strict'; listenInputURL(document.getElementById("urlOption"));
listenInputURL(document.getElementById('urlOption'));
} }
if (window.addEventListener) { if (window.addEventListener) {
window.addEventListener('load', listenURL, false); window.addEventListener("load", listenURL, false);
} else if (window.attachEvent) { } else if (window.attachEvent) {
window.attachEvent('onload', listenURL); window.attachEvent("onload", listenURL);
} else { } else {
document.addEventListener('load', listenURL, false); document.addEventListener("load", listenURL, false);
} }
{ {
"name": "URL With Parameter Opener", "name": "URL&p",
"version": "2.0", "version": "2.0",
"manifest_version": 2, "manifest_version": 2,
"description": "Extension opens URL with one parameter in new tab", "description": "Extension opens URL with one parameter in new tab",
......
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en-us">
<head> <head>
<title>Options of URL With Parameter Opener</title> <title>URL&p 2.0</title>
<link rel="stylesheet" type="text/css" href="css/options.css" /> <link rel="stylesheet" type="text/css" href="css/options.css" />
</head> </head>
<body> <body>
<h1>URL&p 2.0</h1>
<p>Extension opens URL with one parameter in new tab</p>
<p>Read more on <a href="https://gitlab.com/irina-ivanova-extensions/URL-With-Parameter-Opener">GitLab repo</a> or write to <a href="mailto:irina.ivanova@protonmail.com">irina.ivanova@protonmail.com</a></p>
<table> <table>
<tr> <tr>
<td> <td colspan="2"><div id="error"></div></td>
<h1>Options of URL With Parameter Opener</h1>
<p>Extension opens URL with one parameter in new tab</p>
<p id="contacts">Read more on <a href="http://ivanova-irina.blogspot.com/p/url-with-parameter-opener.html" target="_blank">URL With Parameter Opener page</a>
<br />
<a href="mailto:iriiiina@gmail.com">iriiiina@gmail.com</a>
</p></td>
<td>
<img src="icons/big.png" width="130" alt="Fisheye icon" /></td>
</tr>
</table>
<br />
<br />
<br />
<table>