${ui.SLMenuDivHTML.replace('%%LOGOSVG%%',LogoSVG.replace('WIDTH','width="60px"').replace('HIGHT','height="60px"'))}
${ui.makeList()}
${ui.SLEditDivHTML}
`;
$('body').append(text);
$('#SLManage').on('click',ui.click);
$('input[name=enableThis],input#enableStyle').on('change',ui.enableButton);
//styles filter
$('#slFilter').bind('input propertychange',()=>{
$('div[name=list]>div').show();
$('li[name=styleName]').each((idx,item)=>{
if(!$(item).text().match(new RegExp($('#slFilter').val(), "i"))) $(item).parent().hide();
});
});
},
editButton: function(evt,mark = ''){
let a = $(evt.target).parent().parent(),
tarLi = a.find('li[name=styleName]');
if(mark === 'menuAdd') tarLi = $('null');
let name = tarLi.text() || null,
version = tarLi.data('version') || null,
stylesOrgId = tarLi.data('stylesOrgId') || null,
enable = a.find('input[name=enableThis]').prop('checked') || true,
cssRaw = GM_getValue('css',{})[name] || '',
blocks = parser.split(cssRaw),
k = 1,tmp = null,tmp1 = null,
html = '';
for(let i in blocks){
html +=`
|<\/?span[^>]*>/g,'').replace(/<\/div>|
/g,'\n'));
blocks.push(ruleLine +'\n{\n ' + txt + '\n}');
ruleLines.push(ruleLine);
}else{
blocks.push($.trim($(item).find('code').html().replace(/
|<\/?span[^>]*>/g,'').replace(/<\/div>|
/g,'\n')));
}
});
let css = GM_getValue('css',{});
let styles = GM_getValue('styles',{});
css[name] = blocks.join(SLSpliter);
GM_setValue('css',css);
stylesObj = {
name: name,
rule: parser.unique(ruleLines.join('\n').match(parser.ruleReg)),
enable: $('#enableStyle').prop('checked'),
version: tarLi.data('version'),
stylesOrgId: tarLi.data('stylesOrgId')
};
styles[name] = stylesObj;
GM_setValue('styles',styles);
ui.updateULList();
$('#SLList,#SLAbout').show();
$('#SLEdit,#SLReturn').hide();
},
updateULList: function(){
let txt = ui.makeList();
$('#SLList').remove();
$('#SLEdit').before(txt);
},
addRule: function(ele,ruleType = null){
let a = $(ui.ruleLiHTML);
ele.parent().after(a);
if(ruleType) a.find(`option[value="${ruleType}"]`).prop('selected','selected');
},
deleteRule: function(ele){
if(ele.parent().parent().find('li').length > 1) ele.parent().remove();
},
deleteCodeBlock: function(ele){
if($('div[name=codeblocks]>div').length > 1) $(ele).parent().remove();
},
addCodeBlock: function(ele){
$(ele).parent().after(ui.codeBlockDivHTML.replace('%%BLOCKNUMBER%%','new').replace('%%CSSCODE%%','').replace('%%ruleLiHTML%%',ui.ruleLiHTML));
Prism.highlightAll();
},
beautifyCodeBlock: function(ele){
ele.parent().find('code').html(css_beautify(ele.parent().find('code').text()));
Prism.highlightAll();
},
click: function(evt){
function getName(zeptoCol){
if(zeptoCol.attr('name')){
return zeptoCol;
}else{
return zeptoCol.parent();
}
}
let ele = getName($(evt.target));
switch (ele.attr('name')) {
case 'addStyle':
ui.editButton(evt, 'menuAdd');
break;
case 'return':
$('#SLList,#SLAbout').show();
$('#SLEdit,#SLReturn').hide();
break;
case 'forward':
$('#SLList,#SLAbout').hide();
$('#SLEdit,#SLReturn').show();
break;
case 'close':
$('#SLManage').remove();
break;
case 'filterbtn':
$('div[name=list]>div').show();
$('#SLList input[id*=chbx]').each((idx,it)=>{
if(evt.target.id === 'slHideOn' || evt.target.parentElement.id === 'slHideOn'){
if($(it).prop('checked')) $(it).parent().parent().hide();
}
if(evt.target.id === 'slHideOff' || evt.target.parentElement.id === 'slHideOff'){
if(!$(it).prop('checked')) $(it).parent().parent().hide();
}
});
break;
case 'edit':
ui.editButton(evt);
break;
case 'delete':
ui.deleteButton(evt);
break;
case 'update':
ui.updateButton(evt);
break;
case 'saveStyle':
ui.saveButton();
break;
case 'deletePart':
ui.deleteCodeBlock(ele);
break;
case 'addPart':
ui.addCodeBlock(ele);
break;
case 'beautify':
ui.beautifyCodeBlock(ele);
break;
case 'deleteRule':
ui.deleteRule(ele);
break;
case 'addRule':
ui.addRule(ele);
break;
default:
break;
}
}
};
function stylesOnOff(){
GM_unregisterMenuCommand(cmdOnOff);
if($('#'+applyCssId).length > 0){
$('#'+applyCssId).remove();
updateList('add',location.origin);
cmdOnOff = GM_registerMenuCommand('SL On',stylesOnOff);
}else{
apply();
updateList('delete',location.origin);
cmdOnOff = GM_registerMenuCommand('SL Off',stylesOnOff);
}
}
function updateList(op, name){
let key = name || location.origin,
list = GM_getValue('nameList',{});
if(op === 'delete'){
delete list[key];
}else{
list[key] = 1;
}
GM_setValue('nameList',list);
}
$(()=>{
//register menu
GM_registerMenuCommand('SL Manage',ui.makePanel);
if(checkList(location.origin)){
cmdOnOff = GM_registerMenuCommand('SL Off',stylesOnOff);
}else{
cmdOnOff = GM_registerMenuCommand('SL On',stylesOnOff);
}
});
})();
/*
后续改进方向:
1. 加入对浏览器内核的验证(或者让用户直接选.),并且取回有针对性的样式.
比如某个Style 的id是12770, Chrome版本的Stylish第一步会取回 xxx.12770.css,
第二步似乎是一个回应服务器的信息.
第三步会取回 xxx/chrome/12770.json
这json 里面的 sections 字段 就可能包含有针对特定浏览器的优化代码.
其实,另外一方面,返回的 json 已经把 块 分割好,也省去了 我在这边再分拆的麻烦.
2. 优化一些体验性细节.以便增加脚本吸引力.
3. 至于适配Greasymonkey嘛,暂时不考虑了.
4. 可以把样式管理页面的链接,适配为直接的更新升级按钮
5. 可以考虑加入样式的缩略图功能. 这样样式管理,可以有列表视图 和 块视图两种选择.更加人性化一些.
*/