miue-ui
Version:
ali miniProgram UI components for vehicle.
274 lines (268 loc) • 7.62 kB
JavaScript
/**
* author:dansion@163.com
* data:2022-07-01
* version:V1.0.0
*/
var TYPES={
PLAY:"play",
LIKE:"like",
NEXT:"next",
PREV:"prev",
LIST:"list",
MODE:"mode",
RATE:"rate",
FORWARD:'forw',
BACKWARD:'back',
VOLUME:'volu',
COLLECT:'collect',
}
var STATES={
PLAY:'play',
PAUSE:'pause',
LIST:'list',
LIST_OPEN:'listOpen',
PREV:'prev',
NEXT:'next',
LIKE:'like',
LIKED:'liked',
MODE_NORMAL:'normal',
MODE_SINGLE:'single',
MODE_LOOP:'loop',
MODE_RANDOM:'random',
MODE_FORWARD:'forward',
RATE_05:'rate05',
RATE_10:'rate10',
RATE_15:'rate15',
RATE_20:'rate20',
FORWARD:'playforward',
BACKWARD:'playbackward',
VOLUME_NONE:'volumenone',
VOLUME_LOW:'volumelow',
VOLUME_HIGH:'volumehigh',
COLLECT:'collect',
COLLECTED:'collected',
}
// 定义合法按扭变量
var BUTTONS=new Map();
//播放：按扭的状态
BUTTONS.set(TYPES.PLAY,{
type:TYPES.PLAY,
legalStates:new Map([
[STATES.PLAY,{key:STATES.PLAY,voice:'播放',info:'开始播放'}],
[STATES.PAUSE,{key:STATES.PAUSE,voice:'暂停',info:'暂停播放'}],
]),
extendsData:{zoom:1.2,progress:true}
});
//喜欢：按扭状态
BUTTONS.set(TYPES.LIKE,{
type:TYPES.LIKE,
legalStates:new Map([
[STATES.LIKE,{key:STATES.LIKE,voice:'喜欢',info:'喜欢(末)'}],
[STATES.LIKDE,{key:STATES.LIKDE,voice:'喜欢',info:'喜欢(末)'}],
]),
});
//下一首：按扭状态
BUTTONS.set(TYPES.NEXT,{
type:TYPES.NEXT,
legalStates:new Map([
[STATES.NEXT,{key:STATES.NEXT,voice:'下一首',info:'下一首'}],
]),
});
//上一首：按扭状态
BUTTONS.set(TYPES.PREV,{
type:TYPES.PREV,
legalStates:new Map([
[STATES.PREV,{key:STATES.PREV,voice:'上一首',info:'上一首'}],
]),
});
//列表：按扭状态
BUTTONS.set(TYPES.LIST,{
type:TYPES.LIST,
legalStates:new Map([
[STATES.LIST,{key:STATES.LIST,voice:'列表',info:'列表(合)'}],
[STATES.LIST_OPEN,{key:STATES.LIST_OPEN,voice:'关闭列表',info:'列表(开)'}],
]),
extendsData:{showTotal:true}
});
//模式：按扭状态
BUTTONS.set(TYPES.MODE,{
type:TYPES.MODE,
legalStates:new Map([
[STATES.MODE_NORMAL,{key:STATES.MODE_NORMAL,voice:'正序',info:'正序'}],
[STATES.MODE_SINGLE,{key:STATES.MODE_SINGLE,voice:'单曲',info:'单曲'}],
[STATES.MODE_LOOP,{key:STATES.MODE_LOOP,voice:'循环',info:'循环'}],
[STATES.MODE_RANDOM,{key:STATES.MODE_RANDOM,voice:'随机',info:'随机'}],
[STATES.MODE_FORWARD,{key:STATES.MODE_FORWARD,voice:'倒序',info:'倒序'}],
])
});
//播速：按扭状态
BUTTONS.set(TYPES.RATE,{
type:TYPES.RATE,
legalStates:new Map([
[STATES.RATE_05,{key:STATES.RATE_05,voice:'慢速播放',info:'慢速播放'}],
[STATES.RATE_10,{key:STATES.RATE_10,voice:'正常速度播放',info:'正常速度播放'}],
[STATES.RATE_15,{key:STATES.RATE_15,voice:'1.5速度播放',info:'1.5速度播放'}],
[STATES.RATE_20,{key:STATES.RATE_20,voice:'2倍速度播放',info:'2倍速度播放'}],
]),
});
//快前：按扭状态
BUTTONS.set(TYPES.FORWARD,{
type:TYPES.FORWARD,
legalStates:new Map([
[STATES.FORWARD,{key:STATES.FORWARD,voice:'快进',info:'快进'}],
]),
});
//快退：按扭状态
BUTTONS.set(TYPES.BACKWARD,{
type:TYPES.BACKWARD,
legalStates:new Map([
[STATES.BACKWARD,{key:STATES.BACKWARD,voice:'快退',info:'快退'}],
]),
});
//快退：按扭状态
BUTTONS.set(TYPES.VOLUME,{
type:TYPES.VOLUME,
legalStates:new Map([
[STATES.VOLUME_NONE,{key:STATES.VOLUME_NONE,voice:'静音',info:'静音'}],
[STATES.VOLUME_LOW,{key:STATES.VOLUME_LOW,voice:'低音量',info:'低音量'}],
[STATES.VOLUME_HIGH,{key:STATES.VOLUME_HIGH,voice:'高音量',info:'高音量'}],
]),
});
//收藏：按扭状态
BUTTONS.set(TYPES.COLLECT,{
type:TYPES.COLLECT,
legalStates:new Map([
[STATES.COLLECT,{key:STATES.COLLECT,voice:'喜欢',info:'喜欢(末)'}],
[STATES.COLLECTED,{key:STATES.COLLECTED,voice:'喜欢',info:'喜欢(末)'}],
]),
});
//
var verify=(type,state)=>{
let _legalStates=BUTTONS.get(type).legalStates; // 合法的 map 对象
state=state.toLowerCase(); //忽略大小写
if(_legalStates.has(state)){
return true;
}else{
return false;
}
}
//校验入参状态列表是不是可用。
var verifyState=(obj)=>{
let {type,states}=obj;
//合法的状态，默认状态KEY和样式定义相同
let _legalStates=BUTTONS.get(type).legalStates; // 合法的 map 对象
let _return=new Map();
if(states==undefined){ //状态列表为空，输出默认可用状列表项
return _legalStates;
}else{
//需要验证的状态列表
let _verify=new Set(states);
for(let i of _verify.keys()){
i=i.toLowerCase(); //忽略大小写
if(_legalStates.has(i)){
_return.set(i,_legalStates.get(i))
}else{
if(my.isIDE){
console.warn(`组件参数：${type} 的配置值 :${i} 不合法，合法值为：${[..._legal]}` )
}
}
}
if(_return.size>0){
return _return;
}else{
return _legalStates;
}
}
}
var ControlButton=(obj)=>{
/**
* index:当前唯一标识数
* type: 类型key
* current:当前指状态
* state:当前状态，对指 states.key
* states:状态种类，数组
* - key:
* - info:状态种类说明,文本字符
* - voice:语音指令热词
* - style:状态对应的CSS变量，和状态states数组对应
* statesMap:map组构数据
* disabled:是否可用。
* extend:{
* zoom:0-10
* progress:true|false
* }
*/
let {index,type,current=0,states=null,voice=null,styles=null,disabled=false,extendsData=null}=obj;
/**
* 处理 大写，添加 + 号的逻辑
* extendsData
*/
//是不是放大按扭
let result=false;
let _zoom=false;
if(type==type.toUpperCase()){
_zoom=true;
}
//是不是有扩展信息
let _noExtends=true;
if(type.indexOf('+')>-1){
_noExtends=false;
}
// 请除非字符部份并转成小写
type=type.replace(/\W+/ig,"")
type=type.toLowerCase();
if(BUTTONS.has(type)){
result=BUTTONS.get(type);
result.current=current;
result.disabled=disabled;
//入参优先
if(extendsData!=null){
result.extendsData=extendsData;
}
//没有入参的情况，对 get 结果进行处理
if(result.extendsData==undefined){
result.extendsData={};
}
//没有+号，相当于不需要扩展数据
if(_noExtends){
result.extendsData={};
}
// 状态
let _states=verifyState({type:type,states:states}); // Map 对象
if(states!=null){
// result.states=[..._states]
}
result.current=current;
result.states=[..._states.values()];
result.statesMap=_states;
result.state=[..._states][current][0];
result.zoom=_zoom;
// 为按扭注册输出VGUI的文本；
Object.defineProperty(result,'voices',{
enumerable:true,
configurable:true,
get(){
let _voices=[];
result.statesMap.forEach((ele,v) => {
_voices.push(ele.voice);
});
//console.log(_voices);
return _voices;
}
})
result.hasVoice=function(t){
let key='';
let ismatch=false;
result.statesMap.forEach((ele,v) => {
if(ele.voice==t){
console.warn(`${t}=::${ele.voice}`)
ismatch=true;
key=ele.key;
}
});
return {match:ismatch,voice:t,key:key,state:key,type:result.type,disabled:result.disabled};
}
}
return result;
}
export default {create:ControlButton,verify:verify,TYPE:TYPES,STATE:STATES,BUTTONS:BUTTONS}