Skip to content

Commit d499845

Browse files
zombieFoxzombieFox
committed
[refactor] improve background local file
1 parent 02a2ab4 commit d499845

File tree

4 files changed

+50
-50
lines changed

4 files changed

+50
-50
lines changed

‎src/index.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1037,21 +1037,21 @@ <h1 class="menu-item-header-text">Image</h1>
10371037
</div>
10381038
<divclass="form-indent">
10391039
<divclass="input-wrap">
1040-
<inputid="control-background-image-from-local" class="control-background-image-from-local" type="radio" name="control-background-image-from" value="local" tabindex="1">
1041-
<labelfor="control-background-image-from-local">Use local file</label>
1040+
<inputid="control-background-image-from-file" class="control-background-image-from-file" type="radio" name="control-background-image-from" value="file" tabindex="1">
1041+
<labelfor="control-background-image-from-file">Use local file</label>
10421042
</div>
10431043
<divclass="form-indent">
10441044
<divclass="input-wrap input-button input-hide form-inline">
1045-
<inputid="control-background-image-local" class="control-background-image-local" type="file">
1046-
<labelfor="control-background-image-local">Select image</label>
1045+
<inputid="control-background-image-file" class="control-background-image-file" type="file">
1046+
<labelfor="control-background-image-file">Select image</label>
10471047
</div>
10481048
<divclass="button-wrap form-inline">
1049-
<buttonclass="control-background-image-local-clear button mb-0" href="#">Clear image</button>
1049+
<buttonclass="control-background-image-file-clear button mb-0" href="#">Clear image</button>
10501050
</div>
1051-
<pclass="control-background-image-local-helper form-helper small">Max image size 5MB, (due to browser local storage limits).</p>
1052-
<pclass="control-background-image-local-helper form-helper small">Take care with large files, they may impact performance.</p>
1051+
<pclass="control-background-image-file-helper form-helper small">Max image size 5MB, (due to browser local storage limits).</p>
1052+
<pclass="control-background-image-file-helper form-helper small">Take care with large files, they may impact performance.</p>
10531053
<divclass="feedback-wrap">
1054-
<divclass="control-background-image-local-feedback form-feedback"></div>
1054+
<divclass="control-background-image-file-feedback form-feedback"></div>
10551055
</div>
10561056
</div>
10571057
<divclass="input-wrap">

‎src/js/background.js‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,21 @@ var background = (function(){
2222
bind.feedback={
2323
animation: {
2424
set: function(animationClass,action){
25-
varcontrolBackgroundImageLocalFeedback=helper.e(".control-background-image-local-feedback");
26-
helper.addClass(controlBackgroundImageLocalFeedback,animationClass);
25+
varcontrolBackgroundImageFileFeedback=helper.e(".control-background-image-file-feedback");
26+
helper.addClass(controlBackgroundImageFileFeedback,animationClass);
2727
varanimationEndAction=function(){
2828
if(action){
2929
action();
3030
};
3131
bind.feedback.animation.reset();
3232
};
33-
controlBackgroundImageLocalFeedback.addEventListener("animationend",animationEndAction,false);
33+
controlBackgroundImageFileFeedback.addEventListener("animationend",animationEndAction,false);
3434
},
3535
reset: function(){
36-
varcontrolBackgroundImageLocalFeedback=helper.e(".control-background-image-local-feedback");
37-
helper.removeClass(controlBackgroundImageLocalFeedback,"is-shake");
38-
helper.removeClass(controlBackgroundImageLocalFeedback,"is-pop");
39-
controlBackgroundImageLocalFeedback.removeEventListener("animationend",bind.feedback.animation.reset,false);
36+
varcontrolBackgroundImageFileFeedback=helper.e(".control-background-image-file-feedback");
37+
helper.removeClass(controlBackgroundImageFileFeedback,"is-shake");
38+
helper.removeClass(controlBackgroundImageFileFeedback,"is-pop");
39+
controlBackgroundImageFileFeedback.removeEventListener("animationend",bind.feedback.animation.reset,false);
4040
}
4141
}
4242
};
@@ -46,7 +46,7 @@ var background = (function(){
4646
render.image=function(){
4747
varhtml=helper.e("html");
4848
if(state.get().background.image.show){
49-
if(state.get().background.image.from=="local"){
49+
if(state.get().background.image.from=="file"){
5050
html.style.setProperty("--background-image","url("+state.get().background.image.file.data+")");
5151
}elseif(state.get().background.image.from=="url"){
5252
html.style.setProperty("--background-image","url("+state.get().background.image.url+")");
@@ -83,7 +83,7 @@ var background = (function(){
8383

8484
render.input={
8585
clear: function(){
86-
varinput=helper.e(".control-background-image-local");
86+
varinput=helper.e(".control-background-image-file");
8787
input.value="";
8888
}
8989
};
@@ -97,54 +97,54 @@ var background = (function(){
9797
};
9898
},
9999
empty: function(){
100-
varcontrolBackgroundImageLocalFeedback=helper.e(".control-background-image-local-feedback");
100+
varcontrolBackgroundImageFileFeedback=helper.e(".control-background-image-file-feedback");
101101
varpara1=helper.node("p:No image selected.|class:muted small");
102-
controlBackgroundImageLocalFeedback.appendChild(para1);
102+
controlBackgroundImageFileFeedback.appendChild(para1);
103103
},
104104
current: function(){
105-
varcontrolBackgroundImageLocalFeedback=helper.e(".control-background-image-local-feedback");
105+
varcontrolBackgroundImageFileFeedback=helper.e(".control-background-image-file-feedback");
106106
varpara1=helper.node("p:Image loaded.|class:muted small");
107107
varpara2=helper.node("p:"+state.get().background.image.file.name);
108-
controlBackgroundImageLocalFeedback.appendChild(para1);
109-
controlBackgroundImageLocalFeedback.appendChild(para2);
108+
controlBackgroundImageFileFeedback.appendChild(para1);
109+
controlBackgroundImageFileFeedback.appendChild(para2);
110110
},
111111
success: function(action){
112-
varcontrolBackgroundImageLocalFeedback=helper.e(".control-background-image-local-feedback");
112+
varcontrolBackgroundImageFileFeedback=helper.e(".control-background-image-file-feedback");
113113
varpara1=helper.node("p:Success! Setting Background image.|class:muted small");
114114
varpara2=helper.node("p:"+state.get().background.image.file.name);
115-
controlBackgroundImageLocalFeedback.appendChild(para1);
116-
controlBackgroundImageLocalFeedback.appendChild(para2);
115+
controlBackgroundImageFileFeedback.appendChild(para1);
116+
controlBackgroundImageFileFeedback.appendChild(para2);
117117
bind.feedback.animation.set("is-pop",action);
118118
},
119119
clear: function(){
120-
varcontrolBackgroundImageLocalFeedback=helper.e(".control-background-image-local-feedback");
121-
while(controlBackgroundImageLocalFeedback.lastChild){
122-
controlBackgroundImageLocalFeedback.removeChild(controlBackgroundImageLocalFeedback.lastChild);
120+
varcontrolBackgroundImageFileFeedback=helper.e(".control-background-image-file-feedback");
121+
while(controlBackgroundImageFileFeedback.lastChild){
122+
controlBackgroundImageFileFeedback.removeChild(controlBackgroundImageFileFeedback.lastChild);
123123
};
124124
},
125125
fail: {
126126
filetype: function(name){
127-
varcontrolBackgroundImageLocalFeedback=helper.e(".control-background-image-local-feedback");
127+
varcontrolBackgroundImageFileFeedback=helper.e(".control-background-image-file-feedback");
128128
varpara1=helper.node("p:Not the right kind of file. Make sure the selected file is an image.|class:small muted");
129129
varpara2=helper.node("p:"+name);
130-
controlBackgroundImageLocalFeedback.appendChild(para1);
131-
controlBackgroundImageLocalFeedback.appendChild(para2);
130+
controlBackgroundImageFileFeedback.appendChild(para1);
131+
controlBackgroundImageFileFeedback.appendChild(para2);
132132
bind.feedback.animation.set("is-shake");
133133
},
134134
size: function(name){
135-
varcontrolBackgroundImageLocalFeedback=helper.e(".control-background-image-local-feedback");
135+
varcontrolBackgroundImageFileFeedback=helper.e(".control-background-image-file-feedback");
136136
varpara1=helper.node("p:File size is too big. Max file size of 5MB.|class:small muted");
137137
varpara2=helper.node("p:"+name);
138-
controlBackgroundImageLocalFeedback.appendChild(para1);
139-
controlBackgroundImageLocalFeedback.appendChild(para2);
138+
controlBackgroundImageFileFeedback.appendChild(para1);
139+
controlBackgroundImageFileFeedback.appendChild(para2);
140140
bind.feedback.animation.set("is-shake");
141141
}
142142
}
143143
};
144144

145145
varimportData=function(){
146146
// get files from input
147-
varfileList=helper.e(".control-background-image-local").files;
147+
varfileList=helper.e(".control-background-image-file").files;
148148
// if file was added
149149
if(fileList.length>0){
150150
// validate the file

‎src/js/control.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2079,21 +2079,21 @@ var control = (function(){
20792079
background.render.image();
20802080
}
20812081
},{
2082-
element: helper.e(".control-background-image-from-local"),
2082+
element: helper.e(".control-background-image-from-file"),
20832083
path: "background.image.from",
20842084
type: "radio",
20852085
func: function(){
20862086
dependents();
20872087
background.render.image();
20882088
}
20892089
},{
2090-
element: helper.e(".control-background-image-local"),
2090+
element: helper.e(".control-background-image-file"),
20912091
type: "file",
20922092
func: function(){
20932093
background.importData();
20942094
}
20952095
},{
2096-
element: helper.e(".control-background-image-local-clear"),
2096+
element: helper.e(".control-background-image-file-clear"),
20972097
type: "button",
20982098
func: function(){
20992099
background.mod.clear.file();
@@ -2941,7 +2941,7 @@ var control = (function(){
29412941
};
29422942
var_background=function(){
29432943
if(state.get().background.image.show){
2944-
disable.input(".control-background-image-from-local",false);
2944+
disable.input(".control-background-image-from-file",false);
29452945
disable.input(".control-background-image-from-url",false);
29462946
disable.element("[for=control-background-image-opacity]",false);
29472947
disable.input(".control-background-image-opacity",false);
@@ -2954,7 +2954,7 @@ var control = (function(){
29542954
disable.element("[for=control-background-image-scale]",false);
29552955
disable.input(".control-background-image-scale",false);
29562956
}else{
2957-
disable.input(".control-background-image-from-local",true);
2957+
disable.input(".control-background-image-from-file",true);
29582958
disable.input(".control-background-image-from-url",true);
29592959
disable.element("[for=control-background-image-opacity]",true);
29602960
disable.input(".control-background-image-opacity",true);
@@ -2967,16 +2967,16 @@ var control = (function(){
29672967
disable.element("[for=control-background-image-scale]",true);
29682968
disable.input(".control-background-image-scale",true);
29692969
};
2970-
if(state.get().background.image.show&&state.get().background.image.from=="local"){
2971-
disable.element(".control-background-image-local-feedback",false);
2972-
disable.input(".control-background-image-local",false);
2973-
disable.input(".control-background-image-local-clear",false);
2974-
disable.element(".control-background-image-local-helper",false);
2970+
if(state.get().background.image.show&&state.get().background.image.from=="file"){
2971+
disable.element(".control-background-image-file-feedback",false);
2972+
disable.input(".control-background-image-file",false);
2973+
disable.input(".control-background-image-file-clear",false);
2974+
disable.element(".control-background-image-file-helper",false);
29752975
}else{
2976-
disable.element(".control-background-image-local-feedback",true);
2977-
disable.input(".control-background-image-local",true);
2978-
disable.input(".control-background-image-local-clear",true);
2979-
disable.element(".control-background-image-local-helper",true);
2976+
disable.element(".control-background-image-file-feedback",true);
2977+
disable.input(".control-background-image-file",true);
2978+
disable.input(".control-background-image-file-clear",true);
2979+
disable.element(".control-background-image-file-helper",true);
29802980
};
29812981
if(state.get().background.image.show&&state.get().background.image.from=="url"){
29822982
disable.input(".control-background-image-url",false);

‎src/js/state.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ var state = (function(){
195195
background: {
196196
image: {
197197
show: false,
198-
from: "local",
198+
from: "file",
199199
file: {
200200
name: "",
201201
data: ""

0 commit comments

Comments
(0)