[refactor] edge render

This commit is contained in:
zombieFox 2019-07-15 19:16:39 +01:00
parent c5fc2f486a
commit faa3471db1
6 changed files with 193 additions and 163 deletions

View File

@ -37,32 +37,32 @@ var control = (function() {
additionalEvents: [{
event: "input",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".layout"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".layout"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
edge.render.box({
element: helper.e(".layout"),
});
};
@ -70,7 +70,7 @@ var control = (function() {
}, {
event: "keyup",
func: function() {
edge.destroy();
edge.render.clear();
}
}],
func: function() {
@ -165,32 +165,32 @@ var control = (function() {
additionalEvents: [{
event: "input",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".layout"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".layout"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
edge.render.box({
element: helper.e(".layout"),
});
};
@ -198,7 +198,7 @@ var control = (function() {
}, {
event: "keyup",
func: function() {
edge.destroy();
edge.render.clear();
}
}],
func: function() {
@ -211,32 +211,32 @@ var control = (function() {
additionalEvents: [{
event: "input",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".layout"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".layout"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
edge.render.box({
element: helper.e(".layout"),
});
};
@ -244,7 +244,7 @@ var control = (function() {
}, {
event: "keyup",
func: function() {
edge.destroy();
edge.render.clear();
}
}],
func: function() {
@ -272,32 +272,32 @@ var control = (function() {
additionalEvents: [{
event: "input",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".header-area")
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".header-area")
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
edge.render.box({
element: helper.e(".header-area"),
});
};
@ -305,7 +305,7 @@ var control = (function() {
}, {
event: "keyup",
func: function() {
edge.destroy();
edge.render.clear();
}
}],
func: function() {
@ -317,7 +317,7 @@ var control = (function() {
additionalEvents: [{
event: "click",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".header-area"),
delay: 500
});
@ -325,7 +325,7 @@ var control = (function() {
}, {
event: "mouseup",
func: function() {
edge.destroy();
edge.render.clear();
}
}],
func: function() {
@ -343,7 +343,7 @@ var control = (function() {
additionalEvents: [{
event: "change",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".header-area"),
delay: 500
});
@ -359,7 +359,7 @@ var control = (function() {
additionalEvents: [{
event: "change",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".header-area"),
delay: 500
});
@ -375,7 +375,7 @@ var control = (function() {
additionalEvents: [{
event: "change",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".header-area"),
delay: 500
});
@ -455,32 +455,32 @@ var control = (function() {
additionalEvents: [{
event: "input",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".greeting"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".greeting"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
edge.render.box({
element: helper.e(".greeting"),
});
};
@ -488,7 +488,7 @@ var control = (function() {
}, {
event: "keyup",
func: function() {
edge.destroy();
edge.render.clear();
}
}],
func: function() {
@ -500,7 +500,7 @@ var control = (function() {
additionalEvents: [{
event: "click",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".greeting"),
delay: 500
});
@ -545,32 +545,32 @@ var control = (function() {
additionalEvents: [{
event: "input",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".transitional"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".transitional"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
edge.render.box({
element: helper.e(".transitional"),
});
};
@ -578,7 +578,7 @@ var control = (function() {
}, {
event: "keyup",
func: function() {
edge.destroy();
edge.render.clear();
}
}],
func: function() {
@ -590,7 +590,7 @@ var control = (function() {
additionalEvents: [{
event: "click",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".transitional"),
delay: 500
});
@ -759,32 +759,32 @@ var control = (function() {
additionalEvents: [{
event: "input",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".clock"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".clock"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
edge.render.box({
element: helper.e(".clock"),
});
};
@ -792,7 +792,7 @@ var control = (function() {
}, {
event: "keyup",
func: function() {
edge.destroy();
edge.render.clear();
}
}],
func: function() {
@ -804,7 +804,7 @@ var control = (function() {
additionalEvents: [{
event: "click",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".clock"),
delay: 500
});
@ -1111,32 +1111,32 @@ var control = (function() {
additionalEvents: [{
event: "input",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".date"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".date"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
edge.render.box({
element: helper.e(".date"),
});
};
@ -1144,7 +1144,7 @@ var control = (function() {
}, {
event: "keyup",
func: function() {
edge.destroy();
edge.render.clear();
}
}],
func: function() {
@ -1156,7 +1156,7 @@ var control = (function() {
additionalEvents: [{
event: "click",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".date"),
delay: 500
});
@ -1183,7 +1183,7 @@ var control = (function() {
additionalEvents: [{
event: "change",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".header-search-input"),
delay: 500
});
@ -1201,7 +1201,7 @@ var control = (function() {
additionalEvents: [{
event: "change",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".header-search-input"),
delay: 500
});
@ -1219,32 +1219,32 @@ var control = (function() {
additionalEvents: [{
event: "input",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".header-search-input"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".header-search-input"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
edge.render.box({
element: helper.e(".header-search-input"),
});
};
@ -1252,7 +1252,7 @@ var control = (function() {
}, {
event: "keyup",
func: function() {
edge.destroy();
edge.render.clear();
}
}],
func: function() {
@ -1353,32 +1353,32 @@ var control = (function() {
additionalEvents: [{
event: "input",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".header-search-input"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".header-search-input"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
edge.render.box({
element: helper.e(".header-search-input"),
});
};
@ -1386,7 +1386,7 @@ var control = (function() {
}, {
event: "keyup",
func: function() {
edge.destroy();
edge.render.clear();
}
}],
func: function() {
@ -1398,7 +1398,7 @@ var control = (function() {
additionalEvents: [{
event: "click",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".header-search-input"),
delay: 500
});
@ -1447,32 +1447,32 @@ var control = (function() {
additionalEvents: [{
event: "input",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".control-menu"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".control-menu"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
edge.render.box({
element: helper.e(".control-menu"),
});
};
@ -1480,7 +1480,7 @@ var control = (function() {
}, {
event: "keyup",
func: function() {
edge.destroy();
edge.render.clear();
}
}],
func: function() {
@ -1492,7 +1492,7 @@ var control = (function() {
additionalEvents: [{
event: "click",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".control-menu"),
delay: 500
});
@ -1566,32 +1566,32 @@ var control = (function() {
additionalEvents: [{
event: "input",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".link-area"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".link-area"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
edge.render.box({
element: helper.e(".link-area"),
});
};
@ -1599,7 +1599,7 @@ var control = (function() {
}, {
event: "keyup",
func: function() {
edge.destroy();
edge.render.clear();
}
}],
func: function() {
@ -1611,7 +1611,7 @@ var control = (function() {
additionalEvents: [{
event: "click",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".link-area"),
delay: 500
});
@ -1619,7 +1619,7 @@ var control = (function() {
}, {
event: "mouseup",
func: function() {
edge.destroy();
edge.render.clear();
}
}],
func: function() {
@ -1637,7 +1637,7 @@ var control = (function() {
additionalEvents: [{
event: "change",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".link-area"),
delay: 500
});
@ -1653,7 +1653,7 @@ var control = (function() {
additionalEvents: [{
event: "change",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".link-area"),
delay: 500
});
@ -1669,7 +1669,7 @@ var control = (function() {
additionalEvents: [{
event: "change",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".link-area"),
delay: 500
});
@ -1686,32 +1686,32 @@ var control = (function() {
additionalEvents: [{
event: "input",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".link-item"),
});
}
}, {
event: "mousedown",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".link-item"),
});
}
}, {
event: "mouseup",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "touchend",
func: function() {
edge.destroy();
edge.render.clear();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.render({
edge.render.box({
element: helper.e(".link-item"),
});
};
@ -1719,7 +1719,7 @@ var control = (function() {
}, {
event: "keyup",
func: function() {
edge.destroy();
edge.render.clear();
}
}],
func: function() {
@ -1740,7 +1740,7 @@ var control = (function() {
additionalEvents: [{
event: "click",
func: function() {
edge.render({
edge.render.box({
element: helper.e(".link-item"),
delay: 500
});

View File

@ -47,42 +47,6 @@ var data = (function() {
};
};
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.");
@ -101,32 +65,94 @@ var data = (function() {
});
};
var _validateJsonFile = function(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 render = {
feedback: function(type) {
_renderFeedback(type);
}
};
var _renderFeedback = function(type, data) {
var controlDataImportFeedback = helper.e(".control-data-import-feedback");
var _setFeedbackAnimation = function(animationClass) {
helper.addClass(controlDataImportFeedback, animationClass);
controlDataImportFeedback.addEventListener("animationend", _resetFeedbackAnimation, false);
};
var _resetFeedbackAnimation = function() {
helper.removeClass(controlDataImportFeedback, "is-shake");
helper.removeClass(controlDataImportFeedback, "is-pop");
controlDataImportFeedback.removeEventListener("animationend", _resetFeedbackAnimation, false);
};
var clear = function() {
while (controlDataImportFeedback.lastChild) {
controlDataImportFeedback.removeChild(controlDataImportFeedback.lastChild);
};
};
var feedbackMessage = {
empty: "No file selected.",
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 action = {
empty: function() {
var para1 = helper.node("p:" + feedbackMessage.empty + "|class:muted small");
controlDataImportFeedback.appendChild(para1);
},
success: function() {
var para1 = helper.node("p:" + feedbackMessage.current + "|class:muted small");
var para2 = helper.node("p:" + state.get().background.image.file.name);
controlDataImportFeedback.appendChild(para1);
controlDataImportFeedback.appendChild(para2);
controlDataImportFeedback.addEventListener("animationend", function() {
restore(JSON.parse(data));
location.reload();
}, false);
_setFeedbackAnimation("is-pop");
}
};
var _resetFeedback = function() {
helper.removeClass(controlDataImportFeedback, "is-shake");
helper.removeClass(controlDataImportFeedback, "is-pop");
controlDataImportFeedback.removeEventListener("animationend", _resetFeedback, false);
clear();
action[type]();
};
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 _validateJsonFile = function(fileList) {
// make new file reader
var reader = new FileReader();
// define the on load event for the reader
@ -135,19 +161,21 @@ var data = (function() {
if (helper.isJsonString(event.target.result)) {
// is this a nightTab JSON
if (JSON.parse(event.target.result).nighttab) {
_renderFeedback("success", event.target.result);
// 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);
// controlDataImportFeedback.addEventListener("animationend", function() {
// restore(JSON.parse(event.target.result));
// location.reload();
// }, false);
} else {
_renderFeedback("fail");
// console.log("is a JSON file but not a nightTab file");
_feedback(feedbackMessage.fail.notNightTabJson, "is-shake");
// _feedback(feedbackMessage.fail.notNightTabJson, "is-shake");
};
} else {
_renderFeedback("fail");
// console.log("not a JSON file");
_feedback(feedbackMessage.fail.notJson, "is-shake");
// _feedback(feedbackMessage.fail.notJson, "is-shake");
};
};
// invoke the reader
@ -156,6 +184,7 @@ var data = (function() {
var init = function() {
restore(data.load());
render.feedback("empty");
};
return {

View File

@ -3,7 +3,9 @@ var edge = (function() {
var _timer = null;
var _currentEdge = null;
var destroy = function() {
var render = {};
render.clear = function() {
var allEdge = helper.eA(".edge");
if (allEdge[0]) {
for (var i = 0; i < allEdge.length; i++) {
@ -12,7 +14,7 @@ var edge = (function() {
};
};
var render = function(override) {
render.box = function(override) {
var options = {
element: null,
delay: null
@ -81,8 +83,7 @@ var edge = (function() {
// exposed methods
return {
render: render,
destroy: destroy
render: render
};
})();

View File

@ -5,7 +5,7 @@ var keyboard = (function() {
// esc
if (event.keyCode == 27) {
if (state.get().edge) {
edge.destroy();
edge.render.clear();
} else if (state.get().menu) {
menu.close();
shade.destroy();

View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "3.34.0";
var current = "3.35.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.34.0",
"version": "3.35.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"