mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-12-27 00:59:00 +01:00
[refactor] improve background local file
This commit is contained in:
Kuldeep M
parent
02a2ab4b0f
commit
d499845396
@ -1037,21 +1037,21 @@
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<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">
|
||||
<label for="control-background-image-from-local">Use local file</label>
|
||||
<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-file">Use local file</label>
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap input-button input-hide form-inline">
|
||||
<input id="control-background-image-local" class="control-background-image-local" type="file">
|
||||
<label for="control-background-image-local">Select image</label>
|
||||
<input id="control-background-image-file" class="control-background-image-file" type="file">
|
||||
<label for="control-background-image-file">Select image</label>
|
||||
</div>
|
||||
<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>
|
||||
<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-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">Max image size 5MB, (due to browser local storage limits).</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="control-background-image-local-feedback form-feedback"></div>
|
||||
<div class="control-background-image-file-feedback form-feedback"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
|
||||
@ -22,21 +22,21 @@ var background = (function() {
|
||||
bind.feedback = {
|
||||
animation: {
|
||||
set: function(animationClass, action) {
|
||||
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
|
||||
helper.addClass(controlBackgroundImageLocalFeedback, animationClass);
|
||||
var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback");
|
||||
helper.addClass(controlBackgroundImageFileFeedback, animationClass);
|
||||
var animationEndAction = function() {
|
||||
if (action) {
|
||||
action();
|
||||
};
|
||||
bind.feedback.animation.reset();
|
||||
};
|
||||
controlBackgroundImageLocalFeedback.addEventListener("animationend", animationEndAction, false);
|
||||
controlBackgroundImageFileFeedback.addEventListener("animationend", animationEndAction, false);
|
||||
},
|
||||
reset: function() {
|
||||
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
|
||||
helper.removeClass(controlBackgroundImageLocalFeedback, "is-shake");
|
||||
helper.removeClass(controlBackgroundImageLocalFeedback, "is-pop");
|
||||
controlBackgroundImageLocalFeedback.removeEventListener("animationend", bind.feedback.animation.reset, false);
|
||||
var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback");
|
||||
helper.removeClass(controlBackgroundImageFileFeedback, "is-shake");
|
||||
helper.removeClass(controlBackgroundImageFileFeedback, "is-pop");
|
||||
controlBackgroundImageFileFeedback.removeEventListener("animationend", bind.feedback.animation.reset, false);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -46,7 +46,7 @@ var background = (function() {
|
||||
render.image = function() {
|
||||
var html = helper.e("html");
|
||||
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 + ")");
|
||||
} else if (state.get().background.image.from == "url") {
|
||||
html.style.setProperty("--background-image", "url(" + state.get().background.image.url + ")");
|
||||
@ -83,7 +83,7 @@ var background = (function() {
|
||||
|
||||
render.input = {
|
||||
clear: function() {
|
||||
var input = helper.e(".control-background-image-local");
|
||||
var input = helper.e(".control-background-image-file");
|
||||
input.value = "";
|
||||
}
|
||||
};
|
||||
@ -97,46 +97,46 @@ var background = (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");
|
||||
controlBackgroundImageLocalFeedback.appendChild(para1);
|
||||
controlBackgroundImageFileFeedback.appendChild(para1);
|
||||
},
|
||||
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 para2 = helper.node("p:" + state.get().background.image.file.name);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para1);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para2);
|
||||
controlBackgroundImageFileFeedback.appendChild(para1);
|
||||
controlBackgroundImageFileFeedback.appendChild(para2);
|
||||
},
|
||||
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 para2 = helper.node("p:" + state.get().background.image.file.name);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para1);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para2);
|
||||
controlBackgroundImageFileFeedback.appendChild(para1);
|
||||
controlBackgroundImageFileFeedback.appendChild(para2);
|
||||
bind.feedback.animation.set("is-pop", action);
|
||||
},
|
||||
clear: function() {
|
||||
var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
|
||||
while (controlBackgroundImageLocalFeedback.lastChild) {
|
||||
controlBackgroundImageLocalFeedback.removeChild(controlBackgroundImageLocalFeedback.lastChild);
|
||||
var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback");
|
||||
while (controlBackgroundImageFileFeedback.lastChild) {
|
||||
controlBackgroundImageFileFeedback.removeChild(controlBackgroundImageFileFeedback.lastChild);
|
||||
};
|
||||
},
|
||||
fail: {
|
||||
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 para2 = helper.node("p:" + name);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para1);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para2);
|
||||
controlBackgroundImageFileFeedback.appendChild(para1);
|
||||
controlBackgroundImageFileFeedback.appendChild(para2);
|
||||
bind.feedback.animation.set("is-shake");
|
||||
},
|
||||
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 para2 = helper.node("p:" + name);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para1);
|
||||
controlBackgroundImageLocalFeedback.appendChild(para2);
|
||||
controlBackgroundImageFileFeedback.appendChild(para1);
|
||||
controlBackgroundImageFileFeedback.appendChild(para2);
|
||||
bind.feedback.animation.set("is-shake");
|
||||
}
|
||||
}
|
||||
@ -144,7 +144,7 @@ var background = (function() {
|
||||
|
||||
var importData = function() {
|
||||
// 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 (fileList.length > 0) {
|
||||
// validate the file
|
||||
|
||||
@ -2079,7 +2079,7 @@ var control = (function() {
|
||||
background.render.image();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-background-image-from-local"),
|
||||
element: helper.e(".control-background-image-from-file"),
|
||||
path: "background.image.from",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
@ -2087,13 +2087,13 @@ var control = (function() {
|
||||
background.render.image();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-background-image-local"),
|
||||
element: helper.e(".control-background-image-file"),
|
||||
type: "file",
|
||||
func: function() {
|
||||
background.importData();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-background-image-local-clear"),
|
||||
element: helper.e(".control-background-image-file-clear"),
|
||||
type: "button",
|
||||
func: function() {
|
||||
background.mod.clear.file();
|
||||
@ -2941,7 +2941,7 @@ var control = (function() {
|
||||
};
|
||||
var _background = function() {
|
||||
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.element("[for=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.input(".control-background-image-scale", false);
|
||||
} 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.element("[for=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.input(".control-background-image-scale", true);
|
||||
};
|
||||
if (state.get().background.image.show && state.get().background.image.from == "local") {
|
||||
disable.element(".control-background-image-local-feedback", false);
|
||||
disable.input(".control-background-image-local", false);
|
||||
disable.input(".control-background-image-local-clear", false);
|
||||
disable.element(".control-background-image-local-helper", false);
|
||||
if (state.get().background.image.show && state.get().background.image.from == "file") {
|
||||
disable.element(".control-background-image-file-feedback", false);
|
||||
disable.input(".control-background-image-file", false);
|
||||
disable.input(".control-background-image-file-clear", false);
|
||||
disable.element(".control-background-image-file-helper", false);
|
||||
} else {
|
||||
disable.element(".control-background-image-local-feedback", true);
|
||||
disable.input(".control-background-image-local", true);
|
||||
disable.input(".control-background-image-local-clear", true);
|
||||
disable.element(".control-background-image-local-helper", true);
|
||||
disable.element(".control-background-image-file-feedback", true);
|
||||
disable.input(".control-background-image-file", true);
|
||||
disable.input(".control-background-image-file-clear", true);
|
||||
disable.element(".control-background-image-file-helper", true);
|
||||
};
|
||||
if (state.get().background.image.show && state.get().background.image.from == "url") {
|
||||
disable.input(".control-background-image-url", false);
|
||||
|
||||
@ -195,7 +195,7 @@ var state = (function() {
|
||||
background: {
|
||||
image: {
|
||||
show: false,
|
||||
from: "local",
|
||||
from: "file",
|
||||
file: {
|
||||
name: "",
|
||||
data: ""
|
||||
|
||||
Loading…
Reference in New Issue
Block a user