[feature] add data controls

This commit is contained in:
Kombie 2019-06-20 13:00:19 +01:00 committed by GitHub
parent aafb813446
commit 11007ac008
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 318 additions and 40 deletions

View File

@ -7,3 +7,31 @@
opacity: 1;
}
}
@keyframes shake {
0%, to {
transform: translateZ(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
transform: translate3d(10px, 0, 0);
}
}
@keyframes pop {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}

View File

@ -43,6 +43,7 @@ input[type="submit"]:focus {
border-bottom-color: rgb(var(--gray-08));
color: rgb(var(--button-text-hover-focus));
outline: none;
text-decoration: none;
}
button:active,
@ -54,6 +55,7 @@ input[type="submit"]:active {
border-bottom-color: rgb(var(--theme-accent));
color: rgb(var(--button-text-active));
transition: none;
text-decoration: none;
}
button[disabled],
@ -68,6 +70,7 @@ button[disabled]:active,
border-color: transparent;
color: rgb(var(--button-text-disabled));
cursor: default;
text-decoration: none;
}
.button-text {
@ -91,6 +94,10 @@ button [class*=" icon-"],
font-size: 0.8em;
}
.button-large {
font-size: 1.2em;
}
.button-block {
display: flex;
width: 100%;

View File

@ -565,7 +565,8 @@ input[type="range"][disabled]~.input-helper {
.input-button input[type="checkbox"]+label,
.input-button input[type="radio"]+label,
.input-button input[type="color"]+label {
.input-button input[type="color"]+label,
.input-button input[type="file"]+label {
background-color: rgb(var(--gray-02));
padding: 0.125em 1em;
margin: 0;
@ -597,7 +598,9 @@ input[type="range"][disabled]~.input-helper {
.input-button input[type="radio"]:hover+label,
.input-button input[type="radio"]:focus+label,
.input-button input[type="color"]:hover+label,
.input-button input[type="color"]:focus+label {
.input-button input[type="color"]:focus+label,
.input-button input[type="file"]:hover+label,
.input-button input[type="file"]:focus+label {
background-color: rgb(var(--gray-03));
border-bottom-color: rgb(var(--gray-08));
color: rgb(var(--button-text-hover-focus));
@ -606,7 +609,8 @@ input[type="range"][disabled]~.input-helper {
.input-button input[type="checkbox"]:active+label,
.input-button input[type="radio"]:active+label,
.input-button input[type="color"]:active+label {
.input-button input[type="color"]:active+label,
.input-button input[type="file"]:active+label {
background-color: rgb(var(--gray-04));
border-bottom-color: rgb(var(--theme-accent));
color: rgb(var(--button-text-active));
@ -615,7 +619,8 @@ input[type="range"][disabled]~.input-helper {
.input-button input[type="checkbox"]:checked+label,
.input-button input[type="radio"]:checked+label,
.input-button input[type="color"]:checked+label {
.input-button input[type="color"]:checked+label,
.input-button input[type="file"]:checked+label {
background-color: rgb(var(--gray-04));
border-bottom-color: rgb(var(--theme-accent));
color: rgb(var(--button-text-active));
@ -633,7 +638,11 @@ input[type="range"][disabled]~.input-helper {
.input-button input[type="color"][disabled]+label,
.input-button input[type="color"][disabled]:hover+label,
.input-button input[type="color"][disabled]:focus+label,
.input-button input[type="color"][disabled]:active+label {
.input-button input[type="color"][disabled]:active+label,
.input-button input[type="file"][disabled]+label,
.input-button input[type="file"][disabled]:hover+label,
.input-button input[type="file"][disabled]:focus+label,
.input-button input[type="file"][disabled]:active+label {
background-color: rgb(var(--gray-02));
border-color: transparent;
color: rgb(var(--button-text-disabled));
@ -642,7 +651,8 @@ input[type="range"][disabled]~.input-helper {
.input-button-link input[type="checkbox"]+label,
.input-button-link input[type="radio"]+label,
.input-button-link input[type="color"]+label {
.input-button-link input[type="color"]+label,
.input-button-link input[type="file"]+label {
background-color: transparent;
border: 0;
color: rgb(var(--button-link-text));
@ -656,21 +666,26 @@ input[type="range"][disabled]~.input-helper {
.input-button-link input[type="radio"]:checked+label,
.input-button-link input[type="color"]:hover+label,
.input-button-link input[type="color"]:focus+label,
.input-button-link input[type="color"]:checked+label {
.input-button-link input[type="color"]:checked+label,
.input-button-link input[type="file"]:hover+label,
.input-button-link input[type="file"]:focus+label,
.input-button-link input[type="file"]:checked+label {
background-color: transparent;
color: rgb(var(--button-link-text-hover-focus));
}
.input-button-link input[type="checkbox"]:active+label,
.input-button-link input[type="radio"]:active+label,
.input-button-link input[type="color"]:active+label {
.input-button-link input[type="color"]:active+label,
.input-button-link input[type="file"]:active+label {
background-color: transparent;
color: rgb(var(--button-link-text-active));
}
.input-button-link input[disabled][type="checkbox"]+label,
.input-button-link input[disabled][type="radio"]+label,
.input-button-link input[disabled][type="color"]+label {
.input-button-link input[disabled][type="color"]+label,
.input-button-link input[disabled][type="file"]+label {
background-color: transparent;
color: transparent;
pointer-events: none;
@ -681,7 +696,9 @@ input[type="range"][disabled]~.input-helper {
.input-button-link input[disabled][type="radio"]:hover+label,
.input-button-link input[disabled][type="radio"]:focus+label,
.input-button-link input[disabled][type="color"]:hover+label,
.input-button-link input[disabled][type="color"]:focus+label {
.input-button-link input[disabled][type="color"]:focus+label,
.input-button-link input[disabled][type="file"]:hover+label,
.input-button-link input[disabled][type="file"]:focus+label {
background-color: transparent;
color: transparent;
}
@ -723,11 +740,14 @@ input[type="range"][disabled]~.input-helper {
.input-hide input[type="checkbox"]+label:before,
.input-hide input[type="checkbox"]:checked+label:before,
.input-hide input[type="radio"]+label:before,
.input-hide input[type="radio"]:checked+label:before {
.input-hide input[type="radio"]:checked+label:before,
.input-hide input[type="file"]+label:before,
.input-hide input[type="file"]:checked+label:before {
content: none;
}
.input-hide input[type="color"] {
.input-hide input[type="color"],
.input-hide input[type="file"] {
opacity: 0;
width: 1px;
height: 1px;
@ -903,3 +923,14 @@ input[type="range"][disabled]~.input-helper {
.form-group.nested-button *:last-child input[type="color"]+label {
border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
}
.form-feedback {
padding: 1em 1.5em;
background-color: rgb(var(--gray-02));
/* border-bottom: var(--line-width) solid rgb(var(--gray-04)); */
border-radius: var(--theme-radius);
}
.form-feedback:not(:last-child) {
margin-bottom: 1em;
}

View File

@ -117,10 +117,6 @@
.menu {
width: 80vw;
}
.menu-nav-button {
flex-basis: 0;
}
}
@media (min-width: 700px) {
@ -175,6 +171,12 @@
}
}
@media (min-width: 1100px) {
.menu-nav-button {
flex-basis: 0;
}
}
@media (min-width: 1600px) {
.menu {
width: 50vw;

View File

@ -46,10 +46,14 @@ h6 {
p {
color: rgb(var(--style-neutral-text));
margin: 0 0 1em 0;
margin: 0;
line-height: 1.5;
}
p:not(:last-child) {
margin-bottom: 0.5em;
}
hr {
border: 0;
border-top: 1px solid rgb(var(--gray-02));

View File

@ -30,3 +30,11 @@
.scroll-y-disabled {
overflow-y: hidden;
}
.is-shake {
animation: shake var(--animation-speed-slow) 1;
}
.is-pop {
animation: pop var(--animation-speed-fast) 1;
}

View File

@ -107,14 +107,15 @@
<div class="menu-nav">
<div class="menu-nav-area menu-nav-area-grow mb-0 list-unstyled">
<button class="menu-nav-button button button-large active" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
<button class="menu-nav-button button button-large" data-target=".menu-content-area-header" tabindex="1">Header</button>
<button class="menu-nav-button button button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
<button class="menu-nav-button button button-large" data-target=".menu-content-area-theme" tabindex="1">Theme</button>
<button class="menu-nav-button button button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
<button class="menu-nav-button button active" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
<button class="menu-nav-button button" data-target=".menu-content-area-header" tabindex="1">Header</button>
<button class="menu-nav-button button" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
<button class="menu-nav-button button" data-target=".menu-content-area-theme" tabindex="1">Theme</button>
<button class="menu-nav-button button" data-target=".menu-content-area-background" tabindex="1">Background</button>
<button class="menu-nav-button button" data-target=".menu-content-area-data" tabindex="1">Data</button>
</div>
<div class="menu-nav-area">
<button class="menu-close button button-block button-large mb-0" tabindex="1"><span class="icon-close"></span></button>
<button class="menu-close button button-block mb-0" tabindex="1"><span class="icon-close"></span></button>
</div>
</div>
@ -996,6 +997,45 @@
</div>
</div>
<div class="menu-content-area menu-content-area-data is-hidden">
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Restore</h1>
</div>
<div class="menu-item-form">
<div class="input-wrap input-button input-hide">
<input id="control-data-import" class="control-data-import" type="file">
<label for="control-data-import">Import data</label>
</div>
<p class="input-helper small muted">Restore a previously exported nightTab backup.</p>
<div class="control-data-import-feedback form-feedback is-hidden"></div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Backup</h1>
</div>
<div class="menu-item-form">
<div class="button-wrap">
<button class="control-data-export button mb-0" href="#">Export data</button>
</div>
<p class="input-helper small muted">Download a backup of your nightTab Bookmarks and Settings.</p>
<p class="input-helper small muted">This file can later be imported on this or another deivce.</p>
</div>
</div>
<div class="menu-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Clear</h1>
</div>
<div class="menu-item-form">
<div class="button-wrap">
<button class="control-data-clear button mb-0" href="#">Clear data</button>
</div>
<p class="input-helper small muted">Wipe all data and restore nightTab to default state.</p>
</div>
</div>
</div>
</div>
</div>

View File

@ -2084,6 +2084,25 @@ var control = (function() {
func: function() {
background.render();
}
}, {
element: helper.e(".control-data-import"),
type: "file",
func: function() {
data.importData();
}
}, {
element: helper.e(".control-data-export"),
type: "a",
func: function() {
data.exportData();
}
}, {
element: helper.e(".control-data-clear"),
type: "a",
func: function() {
menu.close();
data.clearData();
}
}];
var _setValue = function(path, value) {
@ -2101,13 +2120,15 @@ var control = (function() {
var bind = function() {
var eventType = {
a: "click",
button: "click",
checkbox: "change",
radio: "change",
text: "input",
number: "input",
range: "input",
color: "change"
color: "change",
file: "change"
};
var valueType = {
checkbox: function(object) {
@ -2158,8 +2179,7 @@ var control = (function() {
};
var bindControl = function(object) {
var action = {
input: function(object, event) {
changeValue(object);
a: function(object, event) {
if (object.func) {
object.func();
};
@ -2168,6 +2188,12 @@ var control = (function() {
if (object.func) {
object.func();
};
},
input: function(object, event) {
changeValue(object);
if (object.func) {
object.func();
};
}
};
object.element.addEventListener(eventType[object.type], function(event) {
@ -2868,8 +2894,9 @@ var control = (function() {
}));
}
};
var supportedType = ["checkbox", "radio", "text", "number", "range", "color"];
_allControl.forEach(function(arrayItem, index) {
if (arrayItem.element.tagName.toLowerCase() == "input") {
if (supportedType.includes(arrayItem.element.type)) {
setValue[arrayItem.type](arrayItem);
};
});

View File

@ -1,6 +1,6 @@
var data = (function() {
var saveName = "nitghTab";
var _saveName = "nitghTab";
var set = function(key, data) {
localStorage.setItem(key, data);
@ -16,38 +16,146 @@ var data = (function() {
var save = function() {
var data = {
nighttab: true,
version: version.get(),
state: state.get(),
bookmarks: bookmarks.get()
};
set(saveName, JSON.stringify(data));
set(_saveName, JSON.stringify(data));
};
var wipe = function() {
remove(saveName);
remove(_saveName);
};
var load = function() {
return JSON.parse(get(saveName));
return JSON.parse(get(_saveName));
};
var restore = function() {
var data = load();
var restore = function(data) {
if (data) {
if (!("version" in data) || data.version != version.get()) {
console.log("data version " + data.version + " found less than current");
data = update.run(data);
set(saveName, JSON.stringify(data));
set(_saveName, JSON.stringify(data));
} else {
console.log("data version " + version.get() + " no need to run update");
set(_saveName, JSON.stringify(data));
};
} else {
console.log("no data found to load");
};
};
var importData = function() {
// get files from input
var fileList = helper.e(".control-data-import").files;
// if file was added
if (fileList.length > 0) {
// validate the file
_validateJsonFile(fileList);
};
};
var exportData = function() {
var tempAchor = helper.node("a");
var timeStamp = helper.getDateTime();
var _timeStampPrefix = function(value) {
if (value < 10) {
value = "0" + value;
};
return value
};
timeStamp.hours = _timeStampPrefix(timeStamp.hours);
timeStamp.minutes = _timeStampPrefix(timeStamp.minutes);
timeStamp.seconds = _timeStampPrefix(timeStamp.seconds);
timeStamp.date = _timeStampPrefix(timeStamp.date);
timeStamp.month = _timeStampPrefix(timeStamp.month + 1);
timeStamp.year = _timeStampPrefix(timeStamp.year);
timeStamp = timeStamp.hours + " " + timeStamp.minutes + " " + timeStamp.seconds + " - " + timeStamp.date + "." + timeStamp.month + "." + timeStamp.year;
console.log(timeStamp);
var fileName = "nightTab backup - " + timeStamp + ".json";
var exportData = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(load()));
tempAchor.setAttribute("href", exportData);
tempAchor.setAttribute("download", fileName);
helper.e("html").appendChild(tempAchor);
tempAchor.click();
tempAchor.remove();
};
var clearData = function() {
var clearContent = helper.node("div");
var para1 = helper.node("p:Are you sure you want to clear all nightTab Bookmarks and Settings?. nightTab will restore to the default state.");
var para2 = helper.node("p:This can not be undone.");
clearContent.appendChild(para1);
clearContent.appendChild(para2);
modal.render({
heading: "Clear all nightTab data?",
content: clearContent,
successAction: function() {
wipe();
location.reload();
},
actionText: "Clear all data",
size: "small"
});
};
var _validateJsonFile = function(fileList) {
var controlDataImportFeedback = helper.e(".control-data-import-feedback");
var feedbackMessage = {
success: "Success! Restoring nightTab Bookmarks and Settings.",
fail: {
notNightTabJson: "Not the right kind of JSON file. Make sure the selected file came from nightTab.",
notJson: "Not a JSON file. Make sure the selected file came from nightTab."
}
};
var _feedback = function(message, animationClass) {
while (controlDataImportFeedback.lastChild) {
controlDataImportFeedback.removeChild(controlDataImportFeedback.lastChild);
};
var name = helper.node("p:" + fileList[0].name);
var messageText = helper.node("p:" + message + "|class:muted small");
controlDataImportFeedback.appendChild(name);
controlDataImportFeedback.appendChild(messageText);
controlDataImportFeedback.addEventListener("animationend", _resetFeedback, false);
helper.removeClass(controlDataImportFeedback, "is-hidden");
helper.addClass(controlDataImportFeedback, animationClass);
};
var _resetFeedback = function() {
helper.removeClass(controlDataImportFeedback, "is-shake");
helper.removeClass(controlDataImportFeedback, "is-pop");
controlDataImportFeedback.removeEventListener("animationend", _resetFeedback, false);
};
// make new file reader
var reader = new FileReader();
// define the on load event for the reader
reader.onload = function(event) {
// is this a JSON file
if (helper.isJsonString(event.target.result)) {
// is this a nightTab JSON
if (JSON.parse(event.target.result).nighttab) {
// console.log("is a JSON and a nightTab file");
_feedback(feedbackMessage.success, "is-pop");
controlDataImportFeedback.addEventListener("animationend", function() {
restore(JSON.parse(event.target.result));
location.reload();
}, false);
} else {
// console.log("is a JSON file but not a nightTab file");
_feedback(feedbackMessage.fail.notNightTabJson, "is-shake");
};
} else {
// console.log("not a JSON file");
_feedback(feedbackMessage.fail.notJson, "is-shake");
};
};
// invoke the reader
reader.readAsText(fileList.item(0));
};
var init = function() {
restore();
restore(data.load());
};
return {
@ -58,7 +166,10 @@ var data = (function() {
get: get,
load: load,
wipe: wipe,
restore: restore
restore: restore,
importData: importData,
exportData: exportData,
clearData: clearData
};
})();

View File

@ -555,6 +555,15 @@ var helper = (function() {
return number + "th";
};
var isJsonString = function(string) {
try {
JSON.parse(string);
} catch (error) {
return false;
};
return true;
};
// exposed methods
return {
e: e,
@ -579,7 +588,8 @@ var helper = (function() {
randomNumber: randomNumber,
toWords: toWords,
ordinalWords: ordinalWords,
ordinalNumber: ordinalNumber
ordinalNumber: ordinalNumber,
isJsonString: isJsonString
};
})();

View File

@ -533,7 +533,7 @@ var link = (function() {
var searchInput = helper.e(".search-input");
var div = helper.node("div|class:link-empty");
var h1 = helper.node("h1:No matching bookmarks found|class:link-empty-heading");
var para = helper.node("p:Enter to Search " + state.get().header.search.engine[state.get().header.search.engine.selected].name + "|class:small muted");
var para = helper.node("p:\"Enter\" to Search " + state.get().header.search.engine[state.get().header.search.engine.selected].name + "|class:small muted");
div.appendChild(h1);
div.appendChild(para);
return div;

View File

@ -554,6 +554,12 @@ var update = (function() {
return data;
};
var _update_3180 = function(data) {
data.version = "3.18.0";
data.nighttab = true;
return data;
};
// var _update_300 = function(data) {
// data.version = 3.00;
// return data;
@ -688,6 +694,10 @@ var update = (function() {
console.log("\t= running update 3.15.0");
data = _update_3150(data);
};
if (version.compare(data.version, "3.18.0") == -1) {
console.log("\t= running update 3.18.0");
data = _update_3180(data);
};
};
// if no update is needed
// version bump

View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "3.17.1";
var current = "3.18.0";
var compare = function(a, b) {
var pa = a.split(".");

View File

@ -2,7 +2,7 @@
"name": "nightTab",
"short_name": "nightTab",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "3.17.1",
"version": "3.18.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"