Skip to content

Commit

Permalink
working around issue #22
Browse files Browse the repository at this point in the history 
popup__overlay style
  • Loading branch information
@onikienko
onikienko committed Apr 10, 2015
1 parent a0bf9c9 commit 1e12466
Show file tree
Hide file tree
Showing 6 changed files with 123 additions and 46 deletions.
10 changes: 7 additions & 3 deletions _locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,19 @@

"p_newGroupName_popup": {
"message": "New group name:",
"description": ""
"description": "Modal window dialog"
},
"p_addLinkTitle_popup": {
"message": "Title",
"description": ""
"description": "Modal window dialog"
},
"p_addLinkLink_popup": {
"message": "URL",
"description": ""
"description": "Modal window dialog"
},
"p_overwriteGroup_popup": {
"message": "The group with the same name already exists. Do you want overwrite old one with current tabs?",
"description": "Modal window dialog"
},
"p_delGroup_btn_title": {
"message": "Del group"
Expand Down
4 changes: 4 additions & 0 deletions _locales/ru/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@
"message": "URL",
"description": "Модальное окно для редактирования имени группы вкладок"
},
"p_overwriteGroup_popup": {
"message": "Группа с таким именем уже существует. Переписати уже существующую группу текущим набором вкладок?",
"description": "Модальне вікно "
},
"p_delGroup_btn_title": {
"message": "Удалить группу"
},
Expand Down
10 changes: 7 additions & 3 deletions _locales/uk/messages.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"extName": {
"message": "TabHamster",
"description": "І'мя розширення. Не перекладати"
"description": "Ім'я розширення. Не перекладати"
},
"extDescr": {
"message": "Зберігай відкриті вкладки, керуй сесіями браузера",
Expand All @@ -26,11 +26,11 @@
},
"p_tabName_Saved": {
"message": "Збережені",
"description": "І'мя таба для збережених груп вкладок"
"description": "Ім'я таба для збережених груп вкладок"
},
"p_tabName_Sessions": {
"message": "Сесії",
"description": "І'мя таба для збережених сесій"
"description": "Ім'я таба для збережених сесій"
},
"p_synStorageUsage_title": {
"message": "Відсоток використання сховища Chrome",
Expand All @@ -49,6 +49,10 @@
"message": "URL",
"description": "Модальне вікно для редагування імені групи вкладок"
},
"p_overwriteGroup_popup": {
"message": "Група з таким ім'ям вже існує. Переписати вже існуючу групу поточним набором вкладок?",
"description": "Модальне вікно "
},
"p_delGroup_btn_title": {
"message": "Видалити групу"
},
Expand Down
28 changes: 15 additions & 13 deletions css/popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,13 @@ ul.tabs_nav {
float: right;
}

.spoiler, .group_action>span, .link_action>span, .open_in_new_window {
.spoiler, .group_action > span, .link_action > span, .open_in_new_window {
margin-left: 5px;
cursor: pointer;
color: lightgrey;
}

.spoiler:hover, .group_action>span:hover, .link_action>span:hover, .up:hover, .down:hover, .open_in_new_window:hover {
.spoiler:hover, .group_action > span:hover, .link_action > span:hover, .up:hover, .down:hover, .open_in_new_window:hover {
color: #4a4a4a;
}

Expand All @@ -113,16 +113,17 @@ ul.tabs_nav {

.win {
padding: 8px;
margin:0 0 0 15px;
margin: 0 0 0 15px;
}

.win_title {
font-size: 14px;
color: #0099CC;
border-bottom: 1px solid #E2F4FB;
border-bottom: 1px solid #E2F4FB;
cursor: pointer;
}

.favi>img {
.favi > img {
width: 16px;
height: 16px;
vertical-align: middle;
Expand All @@ -144,15 +145,16 @@ ul.tabs_nav {
top: 0;
width: 100%;
height: 100%;
text-align: center
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
}

.popup__overlay:after {
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
content: ''
content: '';
}

.popup {
Expand All @@ -163,17 +165,17 @@ ul.tabs_nav {
border: 1px solid gray;
border-radius: 2px;
background: #fff;
vertical-align: middle
vertical-align: middle;
}

.popup-form__row {
margin: 1em 0
margin: 1em 0;
}

label {
display: inline-block;
width: 120px;
text-align: left
text-align: left;
}

input[type="text"] {
Expand All @@ -182,7 +184,7 @@ input[type="text"] {
padding: 2px;
border: 1px solid;
border-color: #999 #ccc #ccc;
border-radius: 2px
border-radius: 2px;
}

input[type="button"] {
Expand All @@ -191,7 +193,7 @@ input[type="button"] {
border-radius: 2px;
cursor: pointer;
background: #33B5E5;
color: #fff
color: #fff;
}

input[type="button"].cancel {
Expand All @@ -200,7 +202,7 @@ input[type="button"].cancel {

.popup__close:hover {
color: red;
background: #ddd
background: #ddd;
}

/* popup form */
108 changes: 81 additions & 27 deletions js/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ chrome.storage.local.get(function (session_items) {
Popup.prototype = {
go: function () {
var self = this,
data_container = self.popup_container.querySelectorAll('.data');
data_container = self.popup_container.querySelectorAll('.data'),
submit_btn = this.popup_container.querySelector('.submit_btn');

function submitData() {
var data = {};
Expand All @@ -26,19 +27,30 @@ chrome.storage.local.get(function (session_items) {
}

this.popup_container.style.display = 'block';
data_container[0].focus();
data_container[0].select();
this.popup_container.querySelector('.submit_btn').onclick = function (e) {
submitData();
};
// submit on 'enter' for last text input
if (data_container[data_container.length - 1].getAttribute('type') === 'text') {
data_container[data_container.length - 1].onkeyup = function (e) {
if (data_container.length) {
data_container[0].focus();
data_container[0].select();
// submit on 'enter' for last text input
if (data_container[data_container.length - 1].getAttribute('type') === 'text') {
data_container[data_container.length - 1].onkeyup = function (e) {
if (e.keyCode === 13) {
submitData();
}
};
}
} else {
submit_btn.focus();
this.popup_container.onkeyup = function (e) {
if (e.keyCode === 13) {
submitData();
}
};
}

submit_btn.onclick = function (e) {
submitData();
};

this.popup_container.querySelector('.cancel').onclick = function (e) {
self.popup_container.style.display = 'none';
};
Expand All @@ -57,6 +69,7 @@ chrome.storage.local.get(function (session_items) {
return area === 'session' ? session_items : storage_items;
}()),
obj = {};

for (item in groups_data) {
if (item.indexOf('tg_') === 0) {
obj[item] = groups_data[item];
Expand All @@ -71,6 +84,17 @@ chrome.storage.local.get(function (session_items) {
return this.data_local_copy;
},

getStorageNameByName: function (name) {
var storage_name;

for (storage_name in this.data_local_copy) {
if (this.data_local_copy[storage_name].name === name) {
return storage_name;
}
}
return false;
},

nextIndex: function () {
var last_index = 0,
group;
Expand Down Expand Up @@ -101,20 +125,25 @@ chrome.storage.local.get(function (session_items) {
storage_name = 'tg_' + now.getTime(),
self = this;

new_group[storage_name] = {
name: name === undefined || name.length === 0 ? '' : name,
index: this.nextIndex(),
color: '', // TODO personal color for each group
tabs: group
};
this.storageArea.set(new_group, function () {
if (!chrome.runtime.lastError) {
self.data_local_copy[storage_name] = new_group[storage_name];
callback({err: 0, storage_name: storage_name, new_group: new_group[storage_name]});
} else {
callback({err: 1, msg: chrome.runtime.lastError.message});
}
});
if (this.getStorageNameByName(name) !== false) {
// group with this name already exist
callback({err: 2});
} else {
new_group[storage_name] = {
name: name === undefined || name.length === 0 ? '' : name,
index: this.nextIndex(),
color: '', // TODO personal color for each group
tabs: group
};
this.storageArea.set(new_group, function () {
if (!chrome.runtime.lastError) {
self.data_local_copy[storage_name] = new_group[storage_name];
callback({err: 0, storage_name: storage_name, new_group: new_group[storage_name]});
} else {
callback({err: 1, msg: chrome.runtime.lastError.message});
}
});
}
},

upd: function (storage_name, value, callback) {
Expand Down Expand Up @@ -299,7 +328,7 @@ chrome.storage.local.get(function (session_items) {
title = utils.formatDate(new Date(parseInt(storage_name.slice('tg_'.length), 10)), storage_items.date_format);
}
return '<div id="' + storage_name + '" class="group">' +
'<span class="spoiler" name = "closed"> &#9658;</span>' +
'<span class="spoiler" name="closed"> &#9658;</span>' +
'<span class="open_group">' + title + '</span>' +
'<span class="open_in_new_window" title="' + ui_msg.title_group_in_new_window + '">&#10064;</span> ' +
'<span class="group_action">' +
Expand Down Expand Up @@ -366,6 +395,24 @@ chrome.storage.local.get(function (session_items) {
popup,
self = this;

function overwritePopup (tabs) {
popup = new Popup('overwrite_group', function (data) {
//new_name = data['popup-new_group_name'];
//if (new_name !== undefined || new_name !== '') {
// group.name = new_name;
// groupModel.upd(storage_name, group, function (answ) {
// if (answ.err === 0) {
// el.getElementsByClassName('open_group')[0].innerText = new_name;
// self.showSyncStorageUsage();
// } else {
// self.showErrorMsg(answ.msg);
// }
// });
//}

});
}

input_field.value = '';
tabsGrabber.collectTabs(function (tabs) {
groupModel.add(name, tabs, function (answ) {
Expand All @@ -379,7 +426,14 @@ chrome.storage.local.get(function (session_items) {
groups_el.insertBefore(el, groups_el.getElementsByTagName('div')[0]);
groups_el.innerHTML = groups_el.innerHTML.replace(/(<div>)*|(<\/div>)*/g, '');
} else {
self.showErrorMsg(answ.msg);
if (answ.err === 2) {
// group name already exist
// show Popup with dialog
overwritePopup(tabs);
} else {
// storage Error
self.showErrorMsg(answ.msg);
}
}
});
});
Expand Down Expand Up @@ -666,7 +720,7 @@ chrome.storage.local.get(function (session_items) {
title = ui_msg.current_session + ' (' + date + ')';
}
return '<div id="' + storage_name + '" class="group">' +
'<span class="spoiler" name = "closed"> &#9658;</span>' +
'<span class="spoiler" name="closed"> &#9658;</span>' +
'<span class="open_group">' + title + '</span>' +
'<span class="open_in_new_window" title="' + ui_msg.title_group_in_new_window + '">&#10064;</span> ' +
'<span class="numbers_of_windows">' + ui_msg.windows_numbers + ' ' + group_info.numbers_of_windows + '</span>' +
Expand Down Expand Up @@ -854,7 +908,7 @@ chrome.storage.local.get(function (session_items) {

}, false);
},

go: function () {
this.showGroups();
this.setHandlers();
Expand Down
9 changes: 9 additions & 0 deletions popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,15 @@
<input type="button" class="cancel" value="Cancel" />
</div>
</div>
<div class="popup__overlay" id="overwrite_group">
<div class="popup">
<div class="popup-form__row">
{{ p_overwriteGroup_popup }}
</div>
<input type="button" class="submit_btn" id="overwrite" value="Ok" />
<input type="button" class="cancel" value="Cancel" />
</div>
</div>
<!--Popup windows END-->

<section id="main_tabs">
Expand Down

0 comments on commit 1e12466

Please sign in to comment.