extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-28 11:03:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] improve background local file

Browse Source
This commit is contained in:
Kuldeep M 2019-07-15 14:15:57 +01:00
parent 02a2ab4b0f
commit d499845396
4 changed files with 50 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/index.html
View File

@ -1037,21 +1037,21 @@
</div> </div>
<div class="form-indent"> <div class="form-indent">
<div class="input-wrap"> <div class="input-wrap">
<input id="control-background-image-from-local" class="control-background-image-from-local" type="radio" name="control-background-image-from" value="local" tabindex="1"> <input id="control-background-image-from-file" class="control-background-image-from-file" type="radio" name="control-background-image-from" value="file" tabindex="1">
<label for="control-background-image-from-local">Use local file</label> <label for="control-background-image-from-file">Use local file</label>
</div> </div>
<div class="form-indent"> <div class="form-indent">
<div class="input-wrap input-button input-hide form-inline"> <div class="input-wrap input-button input-hide form-inline">
<input id="control-background-image-local" class="control-background-image-local" type="file"> <input id="control-background-image-file" class="control-background-image-file" type="file">
<label for="control-background-image-local">Select image</label> <label for="control-background-image-file">Select image</label>
</div> </div>
<div class="button-wrap form-inline"> <div class="button-wrap form-inline">
<button class="control-background-image-local-clear button mb-0" href="#">Clear image</button> <button class="control-background-image-file-clear button mb-0" href="#">Clear image</button>
</div> </div>
<p class="control-background-image-local-helper form-helper small">Max image size 5MB, (due to browser local storage limits).</p> <p class="control-background-image-file-helper form-helper small">Max image size 5MB, (due to browser local storage limits).</p>
<p class="control-background-image-local-helper form-helper small">Take care with large files, they may impact performance.</p> <p class="control-background-image-file-helper form-helper small">Take care with large files, they may impact performance.</p>
<div class="feedback-wrap"> <div class="feedback-wrap">
<div class="control-background-image-local-feedback form-feedback"></div> <div class="control-background-image-file-feedback form-feedback"></div>
</div> </div>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">

54
src/js/background.js
View File

@ -22,21 +22,21 @@ var background = (function() {
bind.feedback = { bind.feedback = {
animation: { animation: {
set: function(animationClass, action) { set: function(animationClass, action) {
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback");
helper.addClass(controlBackgroundImageLocalFeedback, animationClass); helper.addClass(controlBackgroundImageFileFeedback, animationClass);
var animationEndAction = function() { var animationEndAction = function() {
if (action) { if (action) {
action(); action();
}; };
bind.feedback.animation.reset(); bind.feedback.animation.reset();
}; };
controlBackgroundImageLocalFeedback.addEventListener("animationend", animationEndAction, false); controlBackgroundImageFileFeedback.addEventListener("animationend", animationEndAction, false);
}, },
reset: function() { reset: function() {
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback");
helper.removeClass(controlBackgroundImageLocalFeedback, "is-shake"); helper.removeClass(controlBackgroundImageFileFeedback, "is-shake");
helper.removeClass(controlBackgroundImageLocalFeedback, "is-pop"); helper.removeClass(controlBackgroundImageFileFeedback, "is-pop");
controlBackgroundImageLocalFeedback.removeEventListener("animationend", bind.feedback.animation.reset, false); controlBackgroundImageFileFeedback.removeEventListener("animationend", bind.feedback.animation.reset, false);
} }
} }
}; };
@ -46,7 +46,7 @@ var background = (function() {
render.image = function() { render.image = function() {
var html = helper.e("html"); var html = helper.e("html");
if (state.get().background.image.show) { if (state.get().background.image.show) {
if (state.get().background.image.from == "local") { if (state.get().background.image.from == "file") {
html.style.setProperty("--background-image", "url(" + state.get().background.image.file.data + ")"); html.style.setProperty("--background-image", "url(" + state.get().background.image.file.data + ")");
} else if (state.get().background.image.from == "url") { } else if (state.get().background.image.from == "url") {
html.style.setProperty("--background-image", "url(" + state.get().background.image.url + ")"); html.style.setProperty("--background-image", "url(" + state.get().background.image.url + ")");
@ -83,7 +83,7 @@ var background = (function() {
render.input = { render.input = {
clear: function() { clear: function() {
var input = helper.e(".control-background-image-local"); var input = helper.e(".control-background-image-file");
input.value = ""; input.value = "";
} }
}; };
@ -97,46 +97,46 @@ var background = (function() {
}; };
}, },
empty: function() { empty: function() {
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback");
var para1 = helper.node("p:No image selected.|class:muted small"); var para1 = helper.node("p:No image selected.|class:muted small");
controlBackgroundImageLocalFeedback.appendChild(para1); controlBackgroundImageFileFeedback.appendChild(para1);
}, },
current: function() { current: function() {
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback");
var para1 = helper.node("p:Image loaded.|class:muted small"); var para1 = helper.node("p:Image loaded.|class:muted small");
var para2 = helper.node("p:" + state.get().background.image.file.name); var para2 = helper.node("p:" + state.get().background.image.file.name);
controlBackgroundImageLocalFeedback.appendChild(para1); controlBackgroundImageFileFeedback.appendChild(para1);
controlBackgroundImageLocalFeedback.appendChild(para2); controlBackgroundImageFileFeedback.appendChild(para2);
}, },
success: function(action) { success: function(action) {
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback");
var para1 = helper.node("p:Success! Setting Background image.|class:muted small"); var para1 = helper.node("p:Success! Setting Background image.|class:muted small");
var para2 = helper.node("p:" + state.get().background.image.file.name); var para2 = helper.node("p:" + state.get().background.image.file.name);
controlBackgroundImageLocalFeedback.appendChild(para1); controlBackgroundImageFileFeedback.appendChild(para1);
controlBackgroundImageLocalFeedback.appendChild(para2); controlBackgroundImageFileFeedback.appendChild(para2);
bind.feedback.animation.set("is-pop", action); bind.feedback.animation.set("is-pop", action);
}, },
clear: function() { clear: function() {
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback");
while (controlBackgroundImageLocalFeedback.lastChild) { while (controlBackgroundImageFileFeedback.lastChild) {
controlBackgroundImageLocalFeedback.removeChild(controlBackgroundImageLocalFeedback.lastChild); controlBackgroundImageFileFeedback.removeChild(controlBackgroundImageFileFeedback.lastChild);
}; };
}, },
fail: { fail: {
filetype: function(name) { filetype: function(name) {
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback");
var para1 = helper.node("p:Not the right kind of file. Make sure the selected file is an image.|class:small muted"); var para1 = helper.node("p:Not the right kind of file. Make sure the selected file is an image.|class:small muted");
var para2 = helper.node("p:" + name); var para2 = helper.node("p:" + name);
controlBackgroundImageLocalFeedback.appendChild(para1); controlBackgroundImageFileFeedback.appendChild(para1);
controlBackgroundImageLocalFeedback.appendChild(para2); controlBackgroundImageFileFeedback.appendChild(para2);
bind.feedback.animation.set("is-shake"); bind.feedback.animation.set("is-shake");
}, },
size: function(name) { size: function(name) {
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback"); var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback");
var para1 = helper.node("p:File size is too big. Max file size of 5MB.|class:small muted"); var para1 = helper.node("p:File size is too big. Max file size of 5MB.|class:small muted");
var para2 = helper.node("p:" + name); var para2 = helper.node("p:" + name);
controlBackgroundImageLocalFeedback.appendChild(para1); controlBackgroundImageFileFeedback.appendChild(para1);
controlBackgroundImageLocalFeedback.appendChild(para2); controlBackgroundImageFileFeedback.appendChild(para2);
bind.feedback.animation.set("is-shake"); bind.feedback.animation.set("is-shake");
} }
} }
@ -144,7 +144,7 @@ var background = (function() {
var importData = function() { var importData = function() {
// get files from input // get files from input
var fileList = helper.e(".control-background-image-local").files; var fileList = helper.e(".control-background-image-file").files;
// if file was added // if file was added
if (fileList.length > 0) { if (fileList.length > 0) {
// validate the file // validate the file

28
src/js/control.js
View File

@ -2079,7 +2079,7 @@ var control = (function() {
background.render.image(); background.render.image();
} }
}, { }, {
element: helper.e(".control-background-image-from-local"), element: helper.e(".control-background-image-from-file"),
path: "background.image.from", path: "background.image.from",
type: "radio", type: "radio",
func: function() { func: function() {
@ -2087,13 +2087,13 @@ var control = (function() {
background.render.image(); background.render.image();
} }
}, { }, {
element: helper.e(".control-background-image-local"), element: helper.e(".control-background-image-file"),
type: "file", type: "file",
func: function() { func: function() {
background.importData(); background.importData();
} }
}, { }, {
element: helper.e(".control-background-image-local-clear"), element: helper.e(".control-background-image-file-clear"),
type: "button", type: "button",
func: function() { func: function() {
background.mod.clear.file(); background.mod.clear.file();
@ -2941,7 +2941,7 @@ var control = (function() {
}; };
var _background = function() { var _background = function() {
if (state.get().background.image.show) { if (state.get().background.image.show) {
disable.input(".control-background-image-from-local", false); disable.input(".control-background-image-from-file", false);
disable.input(".control-background-image-from-url", false); disable.input(".control-background-image-from-url", false);
disable.element("[for=control-background-image-opacity]", false); disable.element("[for=control-background-image-opacity]", false);
disable.input(".control-background-image-opacity", false); disable.input(".control-background-image-opacity", false);
@ -2954,7 +2954,7 @@ var control = (function() {
disable.element("[for=control-background-image-scale]", false); disable.element("[for=control-background-image-scale]", false);
disable.input(".control-background-image-scale", false); disable.input(".control-background-image-scale", false);
} else { } else {
disable.input(".control-background-image-from-local", true); disable.input(".control-background-image-from-file", true);
disable.input(".control-background-image-from-url", true); disable.input(".control-background-image-from-url", true);
disable.element("[for=control-background-image-opacity]", true); disable.element("[for=control-background-image-opacity]", true);
disable.input(".control-background-image-opacity", true); disable.input(".control-background-image-opacity", true);
@ -2967,16 +2967,16 @@ var control = (function() {
disable.element("[for=control-background-image-scale]", true); disable.element("[for=control-background-image-scale]", true);
disable.input(".control-background-image-scale", true); disable.input(".control-background-image-scale", true);
}; };
if (state.get().background.image.show && state.get().background.image.from == "local") { if (state.get().background.image.show && state.get().background.image.from == "file") {
disable.element(".control-background-image-local-feedback", false); disable.element(".control-background-image-file-feedback", false);
disable.input(".control-background-image-local", false); disable.input(".control-background-image-file", false);
disable.input(".control-background-image-local-clear", false); disable.input(".control-background-image-file-clear", false);
disable.element(".control-background-image-local-helper", false); disable.element(".control-background-image-file-helper", false);
} else { } else {
disable.element(".control-background-image-local-feedback", true); disable.element(".control-background-image-file-feedback", true);
disable.input(".control-background-image-local", true); disable.input(".control-background-image-file", true);
disable.input(".control-background-image-local-clear", true); disable.input(".control-background-image-file-clear", true);
disable.element(".control-background-image-local-helper", true); disable.element(".control-background-image-file-helper", true);
}; };
if (state.get().background.image.show && state.get().background.image.from == "url") { if (state.get().background.image.show && state.get().background.image.from == "url") {
disable.input(".control-background-image-url", false); disable.input(".control-background-image-url", false);

2
src/js/state.js
View File

@ -195,7 +195,7 @@ var state = (function() {
background: { background: {
image: { image: {
show: false, show: false,
from: "local", from: "file",
file: { file: {
name: "", name: "",
data: "" data: ""