Add options and options saving
This commit is contained in:
Dave Pedu
parent
2150c5bd9f
commit
fd748dd623
|
|
@ -1,6 +1,11 @@
|
|||
|
||||
_tabbro_ = function() {
|
||||
|
||||
// Options
|
||||
this.options = {
|
||||
"autoStickyTabs":true,
|
||||
}
|
||||
|
||||
// Database version
|
||||
this.__VERSION = 1;
|
||||
|
||||
|
|
@ -15,12 +20,14 @@ _tabbro_ = function() {
|
|||
|
||||
// Storage engine
|
||||
this._storage = chrome.storage.local;
|
||||
this._cloudstorage = chrome.storage.local;
|
||||
|
||||
// the next created window should be stored in the tree window at this index. null for disabled
|
||||
this.nextCreatedWindowIndex = null
|
||||
|
||||
// Action hook - called when we've done something that potentionally could require SAVING and/or any of the guis to be updated
|
||||
this.hook_repaint == null
|
||||
|
||||
this.notify = function() {
|
||||
tabbro.updateCount()
|
||||
if(this.hook_repaint!=null) {
|
||||
|
|
@ -29,7 +36,6 @@ _tabbro_ = function() {
|
|||
this.save()
|
||||
}
|
||||
|
||||
|
||||
// TREE HELPERS
|
||||
this.t_getWindow = function(winid) {
|
||||
for(var i in this.tree) {
|
||||
|
|
@ -39,7 +45,6 @@ _tabbro_ = function() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
this.t_getWindowFromTab = function(tabid) {
|
||||
// Return the window the specified tab id belongs to
|
||||
for(var w in this.tree) {
|
||||
|
|
@ -51,7 +56,6 @@ _tabbro_ = function() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
this.t_getTab = function(tabid) {
|
||||
for(var w in this.tree) {
|
||||
for(var t in this.tree[w].tabs) {
|
||||
|
|
@ -62,20 +66,17 @@ _tabbro_ = function() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
this.t_windowHasTab = function(winid, tabid) {
|
||||
// Determine if the specified window by id contains tab specified by tabid
|
||||
// TODO
|
||||
}
|
||||
|
||||
|
||||
this.t_addTabtoWindow = function(winid, tab, index) {
|
||||
// Add a tab record to a window specified by winid
|
||||
var win = this.t_getWindow(winid)
|
||||
if(win) win.tabs.splice(index, 0, tab)
|
||||
}
|
||||
|
||||
|
||||
this.t_removeTab = function(tabid) {
|
||||
// Removed tab record
|
||||
var thewindow = this.t_getWindowFromTab(tabid)
|
||||
|
|
@ -87,7 +88,6 @@ _tabbro_ = function() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
this.t_removeWindow = function(winid) {
|
||||
// Remove window
|
||||
for(var i in this.tree) {
|
||||
|
|
@ -98,7 +98,6 @@ _tabbro_ = function() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// UI UTIL FUNCTIONS
|
||||
this.ui_delete_tab = function(winindex, tabindex) {
|
||||
// Delete tab at tabindex from window at windowindex
|
||||
|
|
@ -115,7 +114,6 @@ _tabbro_ = function() {
|
|||
this.notify()
|
||||
}
|
||||
|
||||
|
||||
this.ui_delete_window = function(winindex) {
|
||||
// Delete window at windowindex
|
||||
var window = this.tree[winindex]
|
||||
|
|
@ -130,7 +128,6 @@ _tabbro_ = function() {
|
|||
this.notify()
|
||||
}
|
||||
|
||||
|
||||
this.ui_stick_tab = function(winindex, tabindex) {
|
||||
// Toggle sticky state for tab at tabindex from window at windowindex
|
||||
this.tree[winindex].tabs[tabindex].sticky = !this.tree[winindex].tabs[tabindex].sticky
|
||||
|
|
@ -141,7 +138,6 @@ _tabbro_ = function() {
|
|||
this.notify()
|
||||
}
|
||||
|
||||
|
||||
this.ui_stick_window = function(winindex) {
|
||||
// Toggle sticky state for window at windowindex
|
||||
this.tree[winindex].sticky = !this.tree[winindex].sticky
|
||||
|
|
@ -152,7 +148,6 @@ _tabbro_ = function() {
|
|||
this.notify()
|
||||
}
|
||||
|
||||
|
||||
this.ui_open_window = function(winindex) {
|
||||
var bro = this
|
||||
// Open saved window at index winindex
|
||||
|
|
@ -209,7 +204,6 @@ _tabbro_ = function() {
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
this.ui_open_tab = function(winindex, tabindex) {
|
||||
// Open a single tab
|
||||
var tab = this.tree[winindex].tabs[tabindex]
|
||||
|
|
@ -223,13 +217,9 @@ _tabbro_ = function() {
|
|||
|
||||
this.ui_rename_window = function(winindex, newname) {
|
||||
this.tree[winindex].name = newname
|
||||
this.bro.notify()
|
||||
this.notify()
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.getCount = function() {
|
||||
// Return count of loaded tabs
|
||||
var count = 0;
|
||||
|
|
@ -243,13 +233,11 @@ _tabbro_ = function() {
|
|||
return count;
|
||||
}
|
||||
|
||||
|
||||
this.updateCount = function() {
|
||||
// Update open tab count badge
|
||||
chrome.browserAction.setBadgeText({"text":this.getCount()+""})
|
||||
}
|
||||
|
||||
|
||||
// Entry point - load previous session data or create a database
|
||||
this.load = function() {
|
||||
var bro = this
|
||||
|
|
@ -269,9 +257,18 @@ _tabbro_ = function() {
|
|||
}
|
||||
bro.setup()
|
||||
})
|
||||
|
||||
this._storage.get("tabbro_options", function(_data){
|
||||
if(_data.tabbro_options==undefined) {
|
||||
// Use defaults
|
||||
} else {
|
||||
for(var i in _data.tabbro_options) {
|
||||
bro.options[i] = _data.tabbro_options[i]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
this.setup = function() {
|
||||
// Set the notification color
|
||||
chrome.browserAction.setBadgeBackgroundColor({"color":"#990000"})
|
||||
|
|
@ -285,7 +282,6 @@ _tabbro_ = function() {
|
|||
//console.log("Tabbro v" + this.__VERSION + " ready!")
|
||||
}
|
||||
|
||||
|
||||
this.loadInitialTree = function() {
|
||||
// Add all open windows/tabs to the database tree
|
||||
var bro = this
|
||||
|
|
@ -323,7 +319,6 @@ _tabbro_ = function() {
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
this.pruneData = function() {
|
||||
// If any non-sticky windows are in our data from a previous session, remove them
|
||||
var pruneWindows = []
|
||||
|
|
@ -364,7 +359,6 @@ _tabbro_ = function() {
|
|||
//console.log("after pruneData: tree length: " + this.tree.length)
|
||||
}
|
||||
|
||||
|
||||
this.pruneWindowsTabsForClose = function(win) {
|
||||
// Remove non-sticky tabs from a window
|
||||
var pruneTabs = []
|
||||
|
|
@ -380,13 +374,13 @@ _tabbro_ = function() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
this.save = function() {
|
||||
// Save data to chrome
|
||||
//this._storage.set({"tabbro":this.data})
|
||||
this._storage.set({"tabbro":this.data})
|
||||
// Save options to cloud
|
||||
this._cloudstorage.set({"tabbro_options":this.options})
|
||||
}
|
||||
|
||||
|
||||
this.addListeners = function() {
|
||||
var bro = this
|
||||
|
||||
|
|
@ -462,7 +456,8 @@ _tabbro_ = function() {
|
|||
tab = bro.t_getTab(tabid)
|
||||
|
||||
if(tab) chrome.tabs.get(tabid, function(_tab) {
|
||||
if(_tab == null || tab == null) debugger
|
||||
if(_tab == null) debugger
|
||||
if(tab == null) debugger
|
||||
tab.title = _tab.title
|
||||
tab.url = _tab.url
|
||||
tab.pinned = _tab.pinned
|
||||
|
|
@ -552,6 +547,13 @@ _tabbro_ = function() {
|
|||
})
|
||||
}
|
||||
|
||||
this.update_setting = function(settingName, newValue) {
|
||||
if(typeof(this.options[settingName]) != "undefined") {
|
||||
this.options[settingName] = newValue
|
||||
}
|
||||
this.save()
|
||||
}
|
||||
|
||||
this.load()
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,5 +17,6 @@
|
|||
"unlimitedStorage",
|
||||
"activeTab",
|
||||
"notifications", "idle", "chrome://favicon/"
|
||||
]
|
||||
],
|
||||
"options_page": "options.html"
|
||||
}
|
||||
|
|
|
|||
34
options.html
34
options.html
|
|
@ -1,14 +1,36 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>TAB BRO</title>
|
||||
<title>TABBRO OPTIONS</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css" />
|
||||
<link href="libs/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
|
||||
<script src="options.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="options-page">
|
||||
<div class="wrapper">
|
||||
Wello!<br>
|
||||
<a href="popup.html">Main</a>
|
||||
<h1>Tabbro Options</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<label class="clearfix">
|
||||
<input type="checkbox" class="toggle" id="autoStickyTabs" value="1" />
|
||||
<strong>Auto-sticky tabs</strong>
|
||||
</label>
|
||||
<div class="answer">
|
||||
<span class="on">When a new tab is opened, it will be sticky if the parent window is sticky.</span>
|
||||
<span class="off">When a new tab is opened, it will not be sticky. If the parent window is closed, only stick tabs are saved.</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<h1>Dump Data</h1>
|
||||
<input type="text" name="dumpout" id="dumpout" value="" />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<h1>Load Data</h1>
|
||||
<input type="text" name="dumpin" id="dumpin" value="Paste JSON here (Not functional yet)" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
var tabbro = null;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
chrome.runtime.getBackgroundPage(function(page) {
|
||||
tabbro = page.tabbro
|
||||
setup()
|
||||
})
|
||||
});
|
||||
|
||||
function setup() {
|
||||
// Data dump
|
||||
document.getElementById("dumpout").value = JSON.stringify(tabbro.tree)
|
||||
|
||||
// Set initial option state
|
||||
for(var i in tabbro.options) {
|
||||
var input = document.getElementById(i);
|
||||
var value = tabbro.options[i]
|
||||
if(typeof value == "boolean") {
|
||||
input.checked = value
|
||||
}
|
||||
input.onchange = function() {
|
||||
var settingName = this.getAttribute("id")
|
||||
var newValue = null
|
||||
if(this.getAttribute("type")=="checkbox") {
|
||||
newValue = this.checked
|
||||
if(newValue) {
|
||||
this.parentElement.parentElement.childNodes[3].childNodes[1].style.display=""
|
||||
this.parentElement.parentElement.childNodes[3].childNodes[3].style.display="none"
|
||||
} else {
|
||||
this.parentElement.parentElement.childNodes[3].childNodes[1].style.display="none"
|
||||
this.parentElement.parentElement.childNodes[3].childNodes[3].style.display=""
|
||||
}
|
||||
}
|
||||
tabbro.update_setting(settingName, newValue)
|
||||
}
|
||||
input.onchange()
|
||||
}
|
||||
|
||||
// Select-all listener for data dump field
|
||||
var dumpout = document.getElementById("dumpout")
|
||||
dumpout.onclick = function() {
|
||||
this.setSelectionRange(0,9999999)
|
||||
}
|
||||
dumpout.onkeyup = dumpout.onchange = dumpout.onkeydown = function() {
|
||||
this.value = JSON.stringify(tabbro.tree)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<link href="libs/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
|
||||
<script src="popup.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="popup-page">
|
||||
<div class="wrapper">
|
||||
<ul id="root"></ul>
|
||||
<!--<a href="options.html">Options</a>
|
||||
|
|
|
|||
38
style.css
38
style.css
|
|
@ -41,6 +41,10 @@ table {
|
|||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
margin: 5px 0px 15px 0px; }
|
||||
|
||||
/* CLEARFIX */
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
|
|
@ -63,14 +67,34 @@ table {
|
|||
/* STYLES */
|
||||
/* GLOBAL */
|
||||
body {
|
||||
width: 420px;
|
||||
height: auto;
|
||||
padding: 5px 0px;
|
||||
margin: 0;
|
||||
font-family: Open sans;
|
||||
font-size: 12px;
|
||||
max-height: 700px;
|
||||
overflow-y: auto; }
|
||||
font-size: 12px; }
|
||||
body.popup-page {
|
||||
width: 420px;
|
||||
height: auto;
|
||||
padding: 5px 0px;
|
||||
margin: 0;
|
||||
max-height: 700px;
|
||||
overflow-y: auto; }
|
||||
body.options-page {
|
||||
padding: 10px 20px; }
|
||||
body.options-page .wrapper {
|
||||
max-width: 600px;
|
||||
margin: 0px auto; }
|
||||
body.options-page input {
|
||||
display: block; }
|
||||
body.options-page input.toggle {
|
||||
float: left; }
|
||||
body.options-page input#dumpin, body.options-page input#dumpout {
|
||||
display: block;
|
||||
width: 100%; }
|
||||
body.options-page strong {
|
||||
font-weight: bold;
|
||||
padding: 4px 0px 10px 5px;
|
||||
display: block; }
|
||||
body.options-page .answer span {
|
||||
display: block;
|
||||
margin-left: 20px; }
|
||||
|
||||
@-webkit-keyframes nopenopenope {
|
||||
0% {
|
||||
|
|
|
|||
46
style.scss
46
style.scss
|
|
@ -40,6 +40,10 @@ table {
|
|||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
margin: 5px 0px 15px 0px;
|
||||
}
|
||||
/* CLEARFIX */
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
|
|
@ -61,14 +65,44 @@ table {
|
|||
|
||||
/* GLOBAL */
|
||||
body {
|
||||
width: 420px;
|
||||
height: auto;
|
||||
padding: 5px 0px;
|
||||
margin: 0;
|
||||
font-family: Open sans;
|
||||
font-size: 12px;
|
||||
max-height: 700px;
|
||||
overflow-y: auto;
|
||||
|
||||
&.popup-page {
|
||||
width: 420px;
|
||||
height: auto;
|
||||
padding: 5px 0px;
|
||||
margin: 0;
|
||||
max-height: 700px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&.options-page {
|
||||
padding: 10px 20px;
|
||||
.wrapper {
|
||||
max-width: 600px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
input {
|
||||
display: block;
|
||||
&.toggle {
|
||||
float: left;
|
||||
}
|
||||
&#dumpin, &#dumpout {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
strong {
|
||||
font-weight: bold;
|
||||
padding: 4px 0px 10px 5px;
|
||||
display: block;
|
||||
}
|
||||
.answer span {
|
||||
display: block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes nopenopenope {
|
||||
0% {
|
||||
|
|
|
|||
Loading…
Reference in New Issue