-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathactions.js
88 lines (88 loc) · 4.63 KB
/
actions.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/*这必须凌驾于JS上*/
var $ = mdui.JQ;//MDUI的选择器，不必引入MDUI了。
var done= true;//颜色是否全部选择
var theme = function(){
var page={
primary:"blue",
accent:"pink"
};
var preview={
primary:"red",
accent:"pink"
};
this.set = {
page:function(primary=false,accent=false){
if(!primary||!accent) return false;
if(typeof primary!="string"||typeof accent!="string") return false;
$("body").removeClass("mdui-theme-primary-"+page.primary);
$("body").removeClass("mdui-theme-accent-"+page.accent);
$("body").addClass("mdui-theme-primary-"+primary);
$("body").addClass("mdui-theme-accent-"+accent);
page={
primary:primary,
accent:accent
};
return true;
},
preview:function(primary,accent){
if(!primary||!accent) return false;
if(typeof primary!="string"||typeof accent!="string") return false;
$("[data-preview-primary]").removeClass("mdui-color-"+preview.primary);
$("[data-preview-accent]").removeClass("mdui-color-"+preview.accent);
$("[data-preview-primary]").addClass("mdui-color-"+primary);
$("[data-preview-accent]").addClass("mdui-color-"+accent);
preview = {
primary:primary,
accent:accent
};
}
};
this.info = {
page:function(){return page;},
preview:function(){return preview;}
};
$("body").addClass("mdui-theme-primary-"+page.primary);//初始化
$("body").addClass("mdui-theme-accent-"+page.accent);
$("[data-preview-primary]").addClass("mdui-color-"+preview.primary);
$("[data-preview-accent]").addClass("mdui-color-"+preview.accent);
return true;
};
theme = new theme();
var setting = {
primary:theme.info.preview().primary,
accent:theme.info.preview().accent
};
var unsupportedAccent = ["Grey","Blue Grey","Brown"];
$("g[data-color=\""+setting.primary.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").addClass("selected selected--1");
$("g[data-color=\""+setting.primary.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").children("g[filter]").attr("filter","url(#drop-shadow)");
$("g[data-color=\""+setting.accent.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").addClass("selected selected--2");
$("g[data-color=\""+setting.accent.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").children("g[filter]").attr("filter","url(#drop-shadow)");
$("g[data-color]").on("click",function(e){
if(done){
$("g[data-color=\""+setting.primary.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").removeClass("selected selected--1");
$("g[data-color=\""+setting.primary.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").children("g[filter]").attr("filter","");
$("g[data-color=\""+setting.accent.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").removeClass("selected selected--2");
$("g[data-color=\""+setting.accent.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").children("g[filter]").attr("filter","");
setting.primary=$(this).attr("data-color").toLowerCase().replace(/ /g,"-");
console.log("您选择的主色："+$(this).attr("data-color"));
$(this).addClass("selected selected--1");
$(this).children("g[filter]").attr("filter","url(#drop-shadow)");
$("#wheel svg").addClass("hide-nonaccents");
done=!done;
}else{
if($(this).attr("data-color").toLowerCase().replace(/ /g,"-")!=setting.primary&&unsupportedAccent.indexOf($(this).attr("data-color"))==-1){
setting.accent=$(this).attr("data-color").toLowerCase().replace(/ /g,"-");
console.log("您选择的强调色："+$(this).attr("data-color"));
$(this).addClass("selected selected--2");
$(this).children("g[filter]").attr("filter","url(#drop-shadow)");
console.log("主题色："+JSON.stringify(setting));
theme.set.preview(setting.primary,setting.accent);
$("#wheel svg").removeClass("hide-nonaccents");
done=!done;
}
}
});
$("#apply").on("click",function(){
theme.set.page(setting.primary,setting.accent);
mdui.snackbar("已应用");
});