@@ -1,13 +1,57 @@ | |||
body { | |||
min-width: 200px; | |||
max-width: 400px; | |||
width: 300px; | |||
font-size: 12px; | |||
background: #fefefe; | |||
color: #333; | |||
font-family: helvetica, arial, sans-serif; | |||
padding-left: 7px; | |||
padding-right: 7px; | |||
overflow-y: hidden; | |||
overflow-x: hidden; | |||
width: calc(100% - 30px); | |||
margin: 0; | |||
} | |||
.clear { | |||
clear: both; | |||
} | |||
.tools-panel { | |||
width: 100%; | |||
padding: 3px; | |||
background: #5b5655; | |||
color: #fefefe; | |||
} | |||
.tools-panel .tools-title { | |||
font-size: 18px; | |||
margin-left: 5px; | |||
float: left; | |||
} | |||
.tools-panel .tools-options { | |||
float: right; | |||
margin-right: 5px; | |||
} | |||
.item-panel { | |||
border: 2px solid #e7e7e7; | |||
margin: 5px; | |||
} | |||
.item-panel .item-button { | |||
margin: 2px; | |||
} | |||
.item-panel .item-details { | |||
margin: 2px; | |||
} | |||
.item-panel .item-details .item-title { | |||
width: 100%; | |||
font-size: 14px; | |||
font-weight: bold; | |||
border-bottom: 2px solid #e7e7e7; | |||
} | |||
.item-panel .item-details .item-url { | |||
width: 100%; | |||
font-size: 12px; | |||
} |
@@ -21,7 +21,7 @@ | |||
], | |||
"browser_action": { | |||
"browser_style": true, | |||
"browser_style": false, | |||
"default_icon": { | |||
"16": "images/favicon-16.png", | |||
"48": "images/favicon-48.png" |
@@ -69,6 +69,8 @@ function processMessage(msg, sender, sendResponse) { | |||
sendResponse(true); | |||
break; | |||
case 'get-item': | |||
var foundItem = getProcessItem(msg.id); | |||
sendResponse(foundItem); | |||
break; | |||
case 'get-all-items': | |||
sendResponse(itemList); | |||
@@ -77,20 +79,26 @@ function processMessage(msg, sender, sendResponse) { | |||
} | |||
// Updates the process item list | |||
function addProcessItem(type, url) { | |||
console.log('Added ' + type + ': ' + url); | |||
function addProcessItem(type, data) { | |||
// Update the total process count | |||
processedItemTotal++; | |||
// Create a new object for this process and add it to the main list | |||
var item = { id: processedItemTotal, type: type, url: url }; | |||
var item = { id: processedItemTotal, type: type, data: data }; | |||
itemList.push(item); | |||
// Update Badge | |||
updateBadge(); | |||
} | |||
function getProcessItem(id) { | |||
// Get the item from the master list | |||
var foundItem = itemList.find(function(item) { | |||
return item.id === id; | |||
}); | |||
return foundItem; | |||
} | |||
function delProcessItem(id) { | |||
// Remove the item from the master list | |||
itemList = itemList.filter(function(item) { |
@@ -12,10 +12,10 @@ function createPaste(text) { | |||
browser.tabs.create({ url: pasteUrl }); | |||
// Update the browser action | |||
addProcessItem('Paste', pasteUrl); | |||
addProcessItem('paste', response.result); | |||
} | |||
else { | |||
notify("Paste Error", response.error.message); | |||
onError("Paste Error: " + response.error.message); | |||
} | |||
} | |||
}); |
@@ -18,40 +18,127 @@ function fillItems(items) { | |||
else { | |||
// Add a div for each item | |||
items.forEach(function(item) { | |||
if ($('#process-item-' + item.id).length) { | |||
// It already exists, so let's update it | |||
var itemDiv = $('#process-item-' + item.id); | |||
itemDiv.find('#type').html(item.type); | |||
itemDiv.find('#url').html(item.url); | |||
} | |||
else { | |||
var itemDiv = $('#process-item-template'); | |||
fillItem(item); | |||
}); | |||
} | |||
} | |||
function fillItem(item) { | |||
var itemDiv; | |||
if ($('#process-item-' + item.id).length) { | |||
// It already exists, so let's update it | |||
itemDiv = $('#process-item-' + item.id); | |||
} | |||
else { | |||
// Create a new one depending on the type | |||
switch (item.type) { | |||
case 'shorten': | |||
case 'paste': | |||
case 'upload': | |||
// Setup a new itemDiv | |||
itemDiv = $('#process-item-template').clone(); | |||
itemDiv.attr('id', 'process-item-' + item.id); | |||
itemDiv.find('#type').html(item.type); | |||
itemDiv.find('#url').html(item.url); | |||
itemDiv.find('#copy').click(function () { | |||
copyTextToClipboard(item.id); | |||
}); | |||
itemDiv.find('#open').click(function () { | |||
openItem(item.url); | |||
openItem(item.id); | |||
}); | |||
itemDiv.find('#remove').click(function () { | |||
itemDiv.find('#close').click(function () { | |||
clearItem(item.id); | |||
}); | |||
break; | |||
case 'progress': | |||
// Setup a new itemDiv | |||
itemDiv = $('#process-item-progress-template').clone(); | |||
itemDiv.attr('id', 'process-item-' + item.id); | |||
itemDiv.find('#close').click(function () { | |||
cancelItem(item.id); | |||
}); | |||
break; | |||
case 'error': | |||
// Setup a new itemDiv | |||
itemDiv = $('#process-item-error-template').clone(); | |||
itemDiv.attr('id', 'process-item-' + item.id); | |||
// Add to the main div | |||
$('#process-list').append(itemDiv); | |||
itemDiv.find('#close').click(function () { | |||
clearItem(item.id); | |||
}); | |||
break; | |||
} | |||
// Add to the main div | |||
$('#process-list').append(itemDiv); | |||
} | |||
// Add the data info depending on the type | |||
switch (item.type) { | |||
case 'shorten': | |||
itemDiv.find('#title').html('Shortened Url'); | |||
itemDiv.find('#url').html(item.data.shortUrl); | |||
break; | |||
case 'paste': | |||
itemDiv.find('#title').html('Paste'); | |||
itemDiv.find('#url').html(item.data.url); | |||
break; | |||
case 'upload': | |||
itemDiv.find('#title').html('Upload'); | |||
var fullUrl = item.data.url; | |||
var key = ''; | |||
if (item.data.key != null) { | |||
key = item.data.key; | |||
} | |||
}); | |||
if (!item.data.saveKey) { | |||
fullUrl = fullUrl + '#' + key; | |||
} | |||
itemDiv.find('#url').html(fullUrl); | |||
break; | |||
case 'progress': | |||
itemDiv.find('#title').html('Processing...'); | |||
itemDiv.find('#progress').html(item.data.progress); | |||
break; | |||
case 'error': | |||
itemDiv.find('#title').html('Error'); | |||
itemDiv.find('#error').html(item.data.message); | |||
break; | |||
} | |||
} | |||
function clearItem(itemId) { | |||
var msg = browser.runtime.sendMessage({ cmd: 'del-item', id: itemId }); | |||
function cancelItem(id) { | |||
var msg = browser.runtime.sendMessage({ cmd: 'cancel-item', id: id }); | |||
msg.then(function() { | |||
$('#process-item-' + id).remove(); | |||
}, onError); | |||
} | |||
function clearItem(id) { | |||
var msg = browser.runtime.sendMessage({ cmd: 'del-item', id: id }); | |||
msg.then(function() { | |||
$('#process-item-' + itemId).remove(); | |||
$('#process-item-' + id).remove(); | |||
}, onError); | |||
} | |||
function openItem(url) { | |||
browser.tabs.create({ url: url }); | |||
function openItem(id) { | |||
var itemDiv = $('#process-item-' + id); | |||
browser.tabs.create({ url: itemDiv.find('#url').html() }); | |||
} | |||
function copyItem(id) { | |||
var itemDiv = $('#process-item-' + id); | |||
copyTextToClipboard(itemDiv.find('#url').html()); | |||
} | |||
function copyTextToClipboard(text) { | |||
var copyFrom = document.createElement("textarea"); | |||
copyFrom.textContent = text; | |||
var body = document.getElementsByTagName('body')[0]; | |||
body.appendChild(copyFrom); | |||
copyFrom.select(); | |||
document.execCommand('copy'); | |||
body.removeChild(copyFrom); | |||
} |
@@ -10,12 +10,11 @@ function shortenUrl(url) { | |||
if (response.result) { | |||
var shortUrl = response.result.shortUrl; | |||
// Update the browser action | |||
addProcessItem('Shortened Url', shortUrl); | |||
notify("Url Shortened", "The Url has been shortened to: " + shortUrl); | |||
// add the new item | |||
addProcessItem('shorten', response.result); | |||
} | |||
else { | |||
notify("Shorten Error", response.error.message); | |||
onError("Shorten Error: " + response.error.message); | |||
} | |||
} | |||
}); |
@@ -8,7 +8,7 @@ function uploadFromUrl(contentUrl) { | |||
encryptFile(xhr.response, xhr.response.type, false, false, false, 256, 128, 1000, uploadFile); | |||
}; | |||
xhr.onerror = function(err) { | |||
notify("Upload Error", err); | |||
onError("Upload Error: " + err); | |||
}; | |||
xhr.onprogress = function (data) { | |||
if (data.lengthComputable) { | |||
@@ -61,7 +61,7 @@ function encryptFile(fileBlob, contentType, saveKey, serverSideEncrypt, genDelKe | |||
worker.onerror = function (err) { | |||
// An error occured | |||
/* NOTIFY SOMEONE */ | |||
notify("Upload Error", err.message); | |||
onError("Upload Error: " + err.message); | |||
} | |||
// Execute worker with data | |||
@@ -141,27 +141,30 @@ function uploadComplete(key, saveKey, evt) { | |||
fullUrl = fullUrl + '#' + key; | |||
} | |||
// Add the saveKey to the results | |||
obj.result.saveKey = saveKey; | |||
// Open a new tab to the upload | |||
browser.tabs.create({ url: fullUrl }); | |||
// Update the browser action | |||
addProcessItem('Upload', fullUrl); | |||
// Add the completed item | |||
addProcessItem('upload', obj.result); | |||
} | |||
else | |||
{ | |||
if (obj.error != null) { | |||
notify("Upload Error", obj.error.message); | |||
onError("Upload Error: " + obj.error.message); | |||
} | |||
else { | |||
notify("Upload Error", 'Unable to Upload File'); | |||
onError('Upload Error: Unable to Upload File'); | |||
} | |||
} | |||
} | |||
function uploadFailed(evt) { | |||
notify("Upload Error", 'Upload Failed'); | |||
onError('Upload Error: Upload Failed'); | |||
} | |||
function uploadCanceled(evt) { | |||
notify("Upload Error", 'Upload Canceled'); | |||
onError('Upload Error: Upload Canceled'); | |||
} |
@@ -4,6 +4,7 @@ | |||
<head> | |||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
<link rel="stylesheet" href="../css/font-awesome.min.css"/> | |||
<link rel="stylesheet" href="../css/common.css"/> | |||
<link rel="stylesheet" href="../css/popup.css"/> | |||
@@ -12,22 +13,53 @@ | |||
<body> | |||
<div class="panel"> | |||
<div id="process-list"></div> | |||
<div id="extraTools"> | |||
<button id="settings">Settings</button> | |||
<div id="extraTools" class="tools-panel"> | |||
<span class="tools-title">Teknik Services</span> | |||
<span class="tools-options"> | |||
<button id="settings" class="tools-button"><i class="fa fa-cog"></i></button> | |||
</span> | |||
<div class="clear"></div> | |||
</div> | |||
<div id="process-list"></div> | |||
</div> | |||
<!-- Templates for panels --> | |||
<div id="templates" style="display: none"> | |||
<!-- Completed Item Template --> | |||
<div id="process-item-template" class="item-panel"> | |||
<div class="item-details"> | |||
<h2 class="item-title" id="type"></h2> | |||
<div class="item-title" id="title"></div> | |||
<div class="item-url" id="url"></div> | |||
</div> | |||
<div class="item-actions"> | |||
<button id="open" class="item-button">Open</button> | |||
<button id="remove" class="item-button">Remove</button> | |||
<button id="copy" class="item-button"><i class="fa fa-clipboard"></i></button> | |||
<button id="open" class="item-button"><i class="fa fa-external-link"></i></button> | |||
<button id="close" class="item-button"><i class="fa fa-times-circle"></i></button> | |||
</div> | |||
</div> | |||
<!-- In Progress Template --> | |||
<div id="process-item-progress-template" class="item-panel"> | |||
<div class="item-details"> | |||
<div class="item-title" id="title"></div> | |||
<div class="item-progress" id="progress"></div> | |||
</div> | |||
<div class="item-actions"> | |||
<button id="close" class="item-button"><i class="fa fa-ban"></i></button> | |||
</div> | |||
</div> | |||
<!-- Error Template --> | |||
<div id="process-item-error-template" class="item-panel"> | |||
<div class="item-details"> | |||
<div class="item-title" id="title"></div> | |||
<div class="item-error" id="error"></div> | |||
</div> | |||
<div class="item-actions"> | |||
<button id="close" class="item-button"><i class="fa fa-times-circle"></i></button> | |||
</div> | |||
</div> | |||
</div> |