bad array: error htmls, e.g.:
sdasdfas
h1
*
*/
function getExclude( htmls ) {
let [ good, bad, obj ] = [[], [], null ];
if ( htmls.trim() == "" ) return { good, bad };
const arr = htmls.trim().split( "\n" );
for( let value of arr ) {
if ( verifyHtml( value.trim() )[0] > 0 ) {
good.push( value.trim() );
} else {
bad.push( value.trim() );
}
}
return { good, bad };
}
================================================
FILE: src/module/common/include.jsx
================================================
console.log( "===== simpread option common: Include =====" )
import { verifyHtml } from 'util';
import TextField from 'textfield';
export default class Include extends React.Component {
static defaultProps = {
mode: "",
flag: {},
}
static propType = {
mode : React.PropTypes.oneOf([ "focus", "read" ]),
flag : React.PropTypes.object,
}
state = {
error : ""
};
changeInclude( event ) {
let code = 0;
if ( this.props.mode == "read" && event.target.value.trim() == "" ) {
code = -2;
this.setState({ error : "当前输入不能为空。" });
}
else if ( verifyHtml( event.target.value.trim() )[0] != -1 ) {
this.setState({ error : "" });
} else {
code = -1;
this.setState({ error : "当前输入为非法。" });
}
this.props.changeInclude( event.target.value.trim(), code );
}
render() {
return (
this.changeInclude(evt) }
/>
)
}
}
================================================
FILE: src/module/common/name.jsx
================================================
console.log( "===== simpread option common: Name =====" )
import { storage } from 'storage';
import TextField from 'textfield';
//const names = [];
export default class Name extends React.Component {
state = {
error : ""
};
changeName( event ) {
let code = 0;
const name = event.target.value.trim();
//if ( names.includes( name ) && name != this.props.name ) {
// code = -1;
// this.setState({ error : "当前值重复，请重新录入。" });
//} else
if( name == "" ) {
code = -2;
this.setState({ error : "当前输入不能为空。" });
} else {
this.setState({ error : "" });
}
this.props.changeName( name, code );
}
//componentWillMount() {
// storage.simpread.sites.forEach( site => names.push( site[1].name ) );
//}
render() {
return (
this.changeName(evt) }
/>
)
}
}
================================================
FILE: src/module/common/shortcuts.jsx
================================================
console.log( "===== simpread option common: Shortcuts =====" )
import TextField from 'textfield';
let [ shortcuts, prevShortcuts, keyword ] = [ [], null, null ];
export default class Shortcuts extends React.Component {
state = {
id : Math.round(+new Date()),
error : "",
value : this.props.shortcuts,
};
changeShortcuts( event ) {
if ( event.type === "keydown" ) {
const key = fixKey( event );
keyword = key == "control" ? "ctrl" : key;
if ( verifyShortkey( keyword )) {
prevShortcuts = updateShortcuts( this.state.id );
shortcuts[ this.state.id ] = prevShortcuts;
this.setState({ error : "" });
this.props.changeShortcuts( prevShortcuts );
} else if ( keyword.length == 0 || !/^[0-9a-z]{1}$/ig.test( keyword )) {
this.setState({ error : `当前输入: ${keyword} 不合法，快捷键只能包括：ctrl, shift, alt, 数字, 字母。` });
}
} else {
if ( /^[0-9a-z]{1}$/ig.test( keyword ) ) {
prevShortcuts = updateShortcuts( this.state.id );
shortcuts[ this.state.id ] = prevShortcuts;
this.setState({ error : "" });
this.props.changeShortcuts( prevShortcuts );
}
}
prevShortcuts = shortcuts[ this.state.id ];
this.setState({ value: prevShortcuts });
}
componentDidMount() {
prevShortcuts = this.state.value;
shortcuts[ this.state.id ] = prevShortcuts;
}
render() {
return (
this.changeShortcuts(event) } onChange={ (event)=>this.changeShortcuts(event) }
/>
)
}
}
/**
* Update new shortcuts
*
* @param {number} this state id
* @return {string} new shortcuts, e.g. [a s]
*/
function updateShortcuts( id ) {
prevShortcuts = shortcuts[ id ];
const arr = prevShortcuts.toLowerCase().trim().split(" ");
let newshort = null;
switch ( arr.length ) {
case 1:
newshort = `${arr[0]} ${keyword}`;
break;
case 2:
newshort = keyword;
break;
default:
console.log( "发生了一些错误。", prevShortcuts, keyword )
newshort = prevShortcuts;
break;
}
return newshort;
}
/**
* Verify shortkey
*
* @param {string} shortkey, only include: ctrl shift alt number letters
* e.g. [a b] [a 1] [1 b] [shift a] [a ctrl] [1 alt] [1 shift]
*
* @return {boolean}
*/
function verifyShortkey( key ) {
if ([ "control", "ctrl", "alt", "shift" ].includes( key )) {
return true;
} else {
return false;
}
}
/**
* Fix keyboard event key undefinde
*
* @param {event} keyboard event
* @return {string} valid key, include 0~9 a~z ctrl shift alt
*/
function fixKey( event ) {
const keycode = event.keyCode;
if ( [ 16, 17, 18 ].includes( keycode ) ) {
return event.key.toLowerCase().trim();
} else if ( keycode >= 49 || keycode <= 90 ) {
//return event.code.toLowerCase().trim().replace( /(digit|key)/ig, "" );
return event.key.toLowerCase();
}
}
================================================
FILE: src/module/common/theme.jsx
================================================
console.log( "===== simpread option common: ThemeSel =====" )
export default class ThemeSel extends React.Component {
changeBgColor( event ) {
if ( event.target.tagName.toLowerCase() == "sr-opt-theme" ) {
const target = event.target,
$target = $(target),
$parent = $target.parent(),
activestyl = "active",
newval = $target.attr( "name" ),
$active = $parent.find( 'sr-opt-theme[sr-type="active"]' );
if ( $active ) {
$active.removeAttr( "sr-type" );
$target.attr( "sr-type", activestyl );
}
this.props.changeBgColor( newval, $target );
}
}
componentDidMount() {
setBgThemeStyle( this.props.theme );
}
render() {
return (
this.changeBgColor(evt) }>
{ this.props.themes.map( (theme,idx) =>
)
}
}
/**
* Set background style
*
* @param {string} theme name
*/
function setBgThemeStyle( theme ) {
const $themes = $( "sr-opt-themes" ).children();
for ( let i = 0; i < $themes.length; i++ ) {
const $target = $($themes[i]),
name = $target.attr( "name" );
if ( theme === name ) {
$target.attr( "sr-type", "active" );
}
}
}
================================================
FILE: src/module/common/url.jsx
================================================
console.log( "===== simpread option common: URL =====" )
import * as puplugin from 'puplugin';
import TextField from 'textfield';
export default class URL extends React.Component {
static defaultProps = {
flag: {},
}
static propType = {
flag : React.PropTypes.object,
}
state = {
error : ""
};
changeURL( event ) {
let code = 0;
const url = event.target.value.trim(),
minimatch = puplugin.Plugin( "minimatch" );
if ( url == "" ) {
code = -2;
this.setState({ error : "当前输入不能为空。" });
} else if ( url.startsWith( "[[/" ) && url.endsWith( "/]]" ) && !new RegExp( url.replace( /^\[\[\/|\/\]\]/g, "" ) ).test( location.href )) {
location.protocol != "chrome-extension:" && this.setState({ error : "请输入与当前网址匹配的域名，正则表达式出现错误。" });
} else if ( !url.startsWith( "[[/" ) && !/^http[s|*]?:\/\//.test( url ) ) {
code = -1;
this.setState({ error : "请输入有效的 url " });
} else if ( !url.startsWith( "[[/" ) && location.protocol.startsWith( "http" ) && !minimatch( window.location.href, url ) && url != this.props.url ) {
code = -1;
this.setState({ error : "请输入与当前网址匹配的域名，支持 minimatch " });
} else {
this.setState({ error : "" });
}
this.props.changeURL( url, code );
}
render() {
return (
this.changeURL(evt) }
/>
)
}
}
================================================
FILE: src/module/common.jsx
================================================
console.log( "===== simpread option common load =====" )
import Button from 'button';
import Notify from 'notify';
import * as ss from 'stylesheet';
import { storage, Now } from 'storage';
import * as ver from 'version';
import * as menu from 'menu';
import * as watch from 'watch';
import * as exp from 'export';
import {browser,br}from 'browser';
import * as msg from 'message';
export default class CommonOpt extends React.Component {
static propTypes = {
sync : React.PropTypes.func,
}
state = {
sync: ( sync => !sync ? "从未同步过，建议同步一次！" : `上次同步时间： ${ sync }` ) ( storage.option.sync )
};
sync() {
let notify;
const dbx = exp.dropbox,
jianguo = exp.jianguo,
write = () => {
storage.option.sync = Now();
storage.Write( () => {
writeConfig();
});
},
readDropbox = () => {
notify = new Notify().Render({ content: "数据同步中，请稍等...", state: "loading" });
dbx.Exist( dbx.config_name, ( result, error ) => {
if ( result == -1 ) {
write();
} else {
dbx.Read( dbx.config_name, callback );
}
});
},
readJianguo = ( obj ) => {
notify = new Notify().Render({ content: "数据同步中，请稍等...", state: "loading" });
jianguo.Read( obj.username, obj.password, jianguo.config_name, result => {
if ( result && result.status == 404 ) {
write();
} else if ( result && result.status == 200 ) {
callback( "read", result.done );
}
});
},
writeConfig = () => {
if ( storage.option.save_at == "dropbox" ) {
dbx.Write( dbx.config_name, storage.Export(), callback );
} else {
jianguo.Add( storage.secret.jianguo.username, storage.secret.jianguo.password, jianguo.root + "/" + jianguo.config_name, storage.Export(), result => {
callback( "write", undefined, result && [ 201, 204 ].includes( result.status ) ? undefined : "error" );
});
}
},
callback = ( type, result, error ) => {
notify.complete();
switch ( type ) {
case "write":
!error ? ( location.href = location.origin + location.pathname + "?simpread_mode=sync" ) :
new Notify().Render( 2, error == "error" ? "远程数据同步失败，请稍后再试！" : error );
break;
case "read":
const json = JSON.parse( result ),
local = storage.option.update ? new Date( storage.option.update.replace( /年|月/ig, "-" ).replace( "日", "" )) : new Date( "1999-01-01 12:12:12" ),
remote = new Date( json.option.update.replace( /年|月/ig, "-" ).replace( "日", "" ));
if ( ver.Compare( json.version ) == 1 ) {
new Notify().Render( "本地版本与远程版本不一致，且本地版本较新，是否覆盖远程版本？", "覆盖", () => {
watch.SendMessage( "import", true );
write();
});
}
else if ( local < remote ) {
new Notify().Render( "远程备份配置文件较新，是否覆盖本地文件？", "覆盖", () => {
this.importsecret( json.option.secret, { ...json.secret }, () => {
delete json.secret;
storage.Write( () => {
watch.SendMessage( "import", true );
location.href = location.origin + location.pathname + "?simpread_mode=reload";
}, json );
});
});
} else if ( local > remote ) {
new Notify().Render( "本地配置文件较新，是否覆盖远程备份文件？", "覆盖", () => {
watch.SendMessage( "import", true );
write();
});
} else {
new Notify().Render( "本地与远程数据相同，无需重复同步。" );
}
break;
}
};
storage.Safe( ()=> {
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.track, { eventCategory: "sync", eventAction: "sync", eventValue: storage.option.save_at }) );
if ( storage.option.save_at == "dropbox" ) {
const sec_dbx = storage.secret.dropbox;
!sec_dbx.access_token ?
new Notify().Render( `未对 ${ dbx.name } 授权，请先进行授权操作。`, "授权", () => {
dbx.New().Auth();
dbx.dtd
.done( () => {
sec_dbx.access_token = dbx.access_token;
storage.Safe( () => {
new Notify().Render( "授权成功！" );
readDropbox();
}, storage.secret );
})
.fail( error => {
console.error( error )
new Notify().Render( 2, `获取 ${ dbx.name } 授权失败，请重新获取。` );
});
}) : ( () => {
dbx.access_token = sec_dbx.access_token;
readDropbox();
})();
} else {
const jianguo = storage.secret.jianguo;
!jianguo.access_token ? new Notify().Render( 2, `坚果云 授权 后才能使用此功能，如何授权 请看这里 。` ) : readJianguo( storage.secret.jianguo );
}
});
}
import() {
const input = document.createElement( "input" ),
$input = $(input),
onload = event => {
if ( event && event.target && event.target.result ) {
try {
let json = ver.FixSubver( ver.patch, JSON.parse( event.target.result ));
const result = ver.Compare( json.version );
if ( result < 0 ) {
result == -1 && new Notify().Render( 2, "上传失败，当前版本太低，请升级简悦。" );
result == -2 && new Notify().Render( 2, "上传失败，配置文件版本不存在。" );
} else {
if ( result == 0 ) {
const obj = storage.Verify( json );
if ( obj.option.code != 0 || obj.focus.code != 0 || obj.read.code != 0 || obj.stat.code != 0 ) {
new Notify().Render( 2, "上传失败，配置项不匹配，请重新上传。" );
return;
}
} else if ( result == 1 ) {
storage.version != json.version &&
storage.Fix( json.read.sites, json.version, storage.version, json.focus.sites );
json = ver.Verify( json.version, json );
new Notify().Render({ type: 2, content: `上传版本太低，已自动转换为最新版本。`, state: "holdon" });
}
menu.Refresh( json.option.menu );
ver.Incompatible( json.version, json ) && new Notify().Render({ type: 2, content: `检测到你曾经修改过第三方适配源，务必刷新后重新导入 ！详细说明 `, state: "holdon" });
ver.VerifyPlugins( json.option ) && new Notify().Render({ type: 2, content: `已清理失效的插件，详细请看 失效插件 `, state: "holdon" });
json.option.origins && json.option.origins.length > 0 &&
new Notify().Render({ content: `导入的配置文件包含了第三方源，刷新后请重新 手动导入 。`, state: "holdon" });
json.option.plugins && json.option.plugins.length > 0 &&
new Notify().Render({ content: `导入的配置文件包含了插件，刷新后请重新 手动导入 。`, state: "holdon" });
this.importsecret( json.option.secret, { ...json.secret }, () => {
delete json.secret;
storage.Write( ()=> {
storage.Plugins( () => {
watch.SendMessage( "import", true );
new Notify().Render( "snackbar", "导入成功，请刷新当前页面，以便新配置文件生效。", "刷新", () => {
location.href = location.origin + location.pathname + "?simpread_mode=reload";
});
}, {} );
}, json );
});
}
} catch ( error ) {
new Notify().Render( 2, "上传失败，配置文件解析失败，请重新确认。" );
}
}
};
$input.attr({ type : "file", multiple : "false" })
.one( "change", event => {
const reader = new FileReader();
reader.onload = onload;
reader.readAsText( event.target.files[0] );
});
$input.trigger( "click" );
}
export() {
if ( br.isFirefox() ) {
exp.PrDownload( storage.Export(), `simpread-config.json` );
} else {
const data = "data:text/json;charset=utf-8," + encodeURIComponent( storage.Export() );
exp.Download( data, `simpread-config-${Now()}.json` );
}
}
oldnewsites() {
new Notify().Render( "此功能转移到 站点管理 选项卡里面，3 秒钟后自动切换到此选项卡。" );
setTimeout( ()=> {
location.href = location.origin + "/options/options.html#labs";
window.dispatchEvent( new CustomEvent( msg.MESSAGE_ACTION.turn_tab, { detail: { page: 3 }}));
}, 3000 );
}
newsites() {
const notify = new Notify().Render({ content: "数据同步中，请稍等...", state: "loading" });
storage.GetRemote( "remote", ( result, error ) => {
notify.complete();
if ( !error ) {
const count = storage.pr.Addsites( result );
storage.Writesite( storage.pr.sites, () => {
watch.SendMessage( "site", true );
count == 0 ? new Notify().Render( "适配列表已同步至最新版本。" ) : new Notify().Render( 0, `适配列表已同步成功，本次新增 ${ count } 个站点。` );
});
} else {
new Notify().Render( 3, `同步时发生了一些问题，并不会影响本地配置文件，请稍后再试！` );
}
});
}
clear() {
new Notify().Render( "snackbar", "是否清除掉（已包含账户信息）本地配置文件？", "同意 ", () => {
storage.Clear( "local", () => {
new Notify().Render( "snackbar", "清除成功，此页面需刷新后才能生效！", "刷新 ", ()=>{
location.href = location.origin + location.pathname + "?simpread_mode=clear";
});
});
});
}
/**
* Import to secret storage
*
* @param {boole} option.secret value
* @param {object} simpread.secret
* @param {function} callback
*/
importsecret( state, secret, callback ) {
state && !$.isEmptyObject( secret ) ? storage.Safe( ()=>{
callback();
}, secret ): callback();
}
componentDidMount() {
if ( this.props.website_sync ) {
storage.GetRemote( "versions", ( result, error ) => {
if ( !error && result.website == true ) {
new Notify().Render( "正在获取最新的适配列表，请稍等..." );
this.newsites();
}
});
}
}
render() {
return(
this.sync() } />
this.import() } />
this.export() } />
this.oldnewsites() } />
this.clear() } />
)
}
}
================================================
FILE: src/module/enhancesite.jsx
================================================
console.log( "===== simpread option enhancesite load =====" )
import TextField from 'textfield';
import Button from 'button';
import Dropdown from 'dropdown';
import {storage} from 'storage';
import * as run from 'runtime';
let notify, secret, cur_user = {}, ori_user = {}, site_info = {}, user_sites = {};
const category = [
{name: "科技媒体", value: "科技媒体"},
{name: "传统媒体", value: "传统媒体"},
{name: "新闻", value: "新闻"},
{name: "技术", value: "技术"},
{name: "博客", value: "博客"},
{name: "论坛", value: "论坛"},
{name: "其它", value: "其它"},
];
function loadingState( state, str ) {
if ( state == "init" ) {
notify = new Notify().Render({ content: "数据处理中，请稍等...", state: "loading" });
} else if ( state == "success" ) {
notify && notify.complete();
notify = undefined;
new Notify().Render( str + "成功。" );
} else {
notify && notify.complete();
notify = undefined;
new Notify().Render( 2, str );
}
}
// hack code
window.addEventListener( "siteinfochanged", event => {
site_info = event.data.info;
siteinfoRender();
});
/**
* Get serivce url
*
* @param {string} method name
*/
function getService( method ) {
return storage.service + method;
}
/**
* Service Fail
*
* @param {object} xhr
* @param {string} textStatus
* @param {object} error
*/
function fail( xhr, textStatus, error ) {
console.error( xhr, status, error )
loadingState( "fail" );
}
/**
* Get sites {name,value} items
*
* @param {object} sites object
*/
function getSites( sites ) {
let items = [];
Object.keys( sites ).forEach( idx => {
const desc = sites[idx].global == true ? "" : "（未审核）"
items.push({ name: sites[idx].title + desc, value: idx });
})
return items;
}
/**
* Editor Plugin Empty Render
*/
function editorEmptyRender() {
$( ".preview" ).html( `当前未选择任何适配站点
` );
}
/**
* Site info Empty Render
*/
function siteinfoEmptyRender() {
$( ".siteinfo" ).addClass( 'hide' );
}
/**
* Site info Render
*/
function siteinfoRender() {
if ( site_info == undefined || $.isEmptyObject( site_info ) ) {
$( ".siteinfo" ).addClass( 'hide' ).empty();
} else {
$( ".siteinfo" ).removeClass( 'hide' ).empty();
ReactDOM.render(
this.onChange(v,n) } />
:
)
}
}
class SiteInfo extends React.Component {
onChange( id, event ) {
site_info[id] = event.target.value
}
onDropdownChange( value ) {
site_info.category = value;
}
render() {
return(
this.onChange( "title", event )}
/>
this.onChange( "create", event )}
/>
this.onChange( "update", event )}
/>
this.onChange( "color", event )}
/>
this.onChange( "bgColor", event )}
/>
this.onDropdownChange(v)} />
)
}
}
export default class Import extends React.Component {
state = {
login: false,
}
onSecretChange( event ) {
secret = event.target.value;
}
login() {
loadingState( "init" );
$.ajax({
url : getService( "/users/service/get/" + this.props.uid ),
type : "POST",
data : {secret}
}).done( ( result, textStatus, jqXHR ) => {
if ( result.code == 200 ) {
loadingState( "success", "登录" );
cur_user = result.data;
ori_user = $.extend( true, {}, cur_user );
console.log( "current user is ", cur_user )
this.getSites( this.props.uid, "all" );
this.setState({ login: true });
} else if ( result.code == 401 ) {
loadingState( "faile", "管理员登陆失败，请验证管理员密匙！" );
} else loadingState( "faile", "获取后台服务失败，请稍后再试！" );
}).fail( fail );
}
getSites( uid, id ) {
loadingState( "init" );
$.ajax({
url : getService( "/sites/service/get/" + id ),
data : { uid },
type : "POST",
}).done( ( result, textStatus, jqXHR ) => {
loadingState( "success", "获取当前用户全部站点" );
if ( result.code == 200 ) {
result.data.forEach( item => {
user_sites[item.id] = item;
});
sitesRender();
} else if ( result.code == 404 ) {
loadingState( "faile", "当前用户没有任何站点，可以先新建 或 上传一个站点。" );
} else loadingState( "faile", "获取当前用户的站点获取失败，请稍后再试！" );
}).fail( fail );
}
insert( method, site ) {
loadingState( "init" );
if ( site.id.substr(0,8) != cur_user.uid.substr(0,8) ) {
new Notify().Render( 2, "注意：当前站并不是（管理员）的站。" );
delete site.uid;
}
$.ajax({
url : getService( "/sites/service/" + method ),
type : "POST",
data : site,
}).done( ( result, textStatus, jqXHR ) => {
loadingState( "success", "已提交" );
if ( result.code == 201 ) {
storage.remote.info.id = result.data.id;
storage.remote.info.create = result.data.create;
storage.remote.info.update = result.data.update;
delete storage.remote.info.global;
delete storage.remote.info.release;
siteinfoRender();
user_sites[result.data.id] = result.data;
sitesRender();
this.props.onUpdate && this.props.onUpdate( "update" );
} else loadingState( "faile", "提交失败，请稍后再试！" );
}).fail( fail );
}
delete( id ) {
loadingState( "init" );
$.ajax({
url : getService( "/sites/service/delete/" + id ),
type : "POST",
data : { uid: cur_user.uid },
}).done( ( result, textStatus, jqXHR ) => {
if ( result.code == 204 ) {
loadingState( "success", "已删除" );
delete user_sites[site_info.id];
sitesRender();
editorEmptyRender();
siteinfoEmptyRender();
//this.props.onUpdate && this.props.onUpdate( "safe" );
new Notify().Render({ mode: "snackbar", content: "是否也删除本地站？", action: "确认", cancel: "取消", callback: type => {
type != "cancel" && this.props.onUpdate && this.props.onUpdate( "delete" );
}});
} else loadingState( "faile", "删除失败，请稍后再试！" );
}).fail( fail );
}
update() {
const insert = () => {
const temp = JSON.parse(JSON.stringify(storage.remote)),
update = temp.info,
method = update.id.startsWith( "new::" ) ? "add" : "update";
delete temp.info;
update.uid = cur_user.uid;
update.id = update.id.replace( /^new::/, "" );
update.site = temp;
delete update.site.target;
this.insert( method, update );
}
if ( $.isEmptyObject( cur_user ) ) {
new Notify().Render({ mode: "snackbar", content: "需要先登录到服务器后才能提交！", action: "登录", cancel: "取消", callback: type => {
type == "action" && this.login();
return;
}});
return;
}
if ( !storage.remote ) {
new Notify().Render( "当前没有选择站点，请通过 新建 或选择一个本地站点。" );
return;
}
if ( storage.remote.name == "tempread::" ) {
new Notify().Render( 2, "新建的站需要保存刷新后才能提交！" );
return;
}
if ( !storage.remote.info ) {
new Notify().Render( "上传站点时需要录入一些必要信息。" );
site_info = { domain: run.ID( "site" ), title: "", category: "其它", create: "<无需填写，自动生成>", update: "", global: false, release: false, color: "#fff", bgColor: "#00bcd4" };
site_info.id = "new::" + storage.user.uid.substr( 0, 8 ) + "-" + site_info.domain;
storage.remote.info = site_info;
siteinfoRender();
} else if ( site_info.title == "" ) {
new Notify().Render( 2, "请最好填入当作站点的名称。" )
} else {
if ( !storage.remote.info.id.startsWith( "new::" ) && storage.remote.info.id.substr(0,8) != cur_user.uid.substr(0,8) ) {
new Notify().Render({ mode: "snackbar", content: "当前站点并不是由你建立，确定修改？", action: "确定", cancel: "取消", callback: type => {
if ( type == "cancel" ) return;
site_info.id = "new::" + storage.user.uid.substr( 0, 8 ) + "-" + site_info.domain;
site_info.release = false;
site_info.global = false
storage.remote.info = site_info;
insert();
}});
} else insert();
}
console.log( "current site is ", storage.remote.info, site_info )
}
remove() {
if ( !storage.remote || $.isEmptyObject( site_info )) {
new Notify().Render( "当前没有选择站点，请通过 新建 或选择一个本地站点。" );
return;
}
if ( site_info.release == true && cur_user.rule != 0 ) {
new Notify().Render( "当前站点已审核通过，无法删除，请联络管理员。" );
return;
}
new Notify().Render({ mode: "snackbar", content: "确定（从服务器上）删除（包括以审核的表）？", action: "确认", cancel: "取消", callback: type => {
if ( type == "cancel" ) return;
this.delete( site_info.id );
}});
}
permit() {
if ( !storage.remote || $.isEmptyObject( site_info )) {
new Notify().Render( "当前没有选择站点，请通过 新建 或选择一个本地站点。" );
return;
}
if ( site_info.global == true || site_info.global == "true" ) {
new Notify().Render( "当前站点已经审核通过，请勿重复提交" );
return;
}
new Notify().Render( "snackbar", "是否确认审核通过？", "确认", () => {
loadingState( "init" );
$.ajax({
url : getService( "/sites/service/permit/" + site_info.id ),
type : "GET",
}).done( ( result, textStatus, jqXHR ) => {
if ( result.code == 201 ) {
loadingState( "success", "当前站点已审核" );
console.log( result.data )
user_sites[result.data.id] = result.data;
sitesRender();
site_info = result.data;
storage.remote.info = site_info;
siteinfoRender();
} else loadingState( "faile", "删除失败，请稍后再试！" );
}).fail( fail );
});
}
logout() {
location.reload();
}
render() {
return (
this.onSecretChange( event )}
/>
{ this.state.login ?
this.logout() } /> :
this.login() } /> }
this.update() } />
{ this.state.login && cur_user.rule == 0 &&
this.permit() } />}
{ this.state.login &&
this.remove() } />}
)
}
}
================================================
FILE: src/module/feedback.jsx
================================================
console.log( "===== simpread feedback load =====" )
import Switch from 'switch';
import TextField from 'textfield';
import Button from 'button';
import {browser} from 'browser';
import * as msg from 'message';
export class Feedback extends React.Component {
static defaultProps = {
user : {},
url : "",
version : "",
anonymous: false,
rate : false,
product : "https://support.qq.com/product/" + 117464,
star : `
{ this.state.rate == false ?
有了你们的帮助简悦才会变得更好 🙏
提交的站点，默认为当前页面的地址，可为空
this.onURLChange(e) } />
支持两种提交方式
this.onChangeMode( "github" ) } />
this.onChangeMode( "tucao" ) } />
{ this.state.mode == "tucao" &&
this.onAnonymousChange( v ) } />
吐个槽 是腾讯旗下的一款用户反馈收集系统，具有如下特点：· 无需注册，点击后会自动使用简悦的注册系统
· 如需实时收到反馈，请根据提示关注（腾讯官方）微信号
· 你的提交内容，他人无法看到
}
方便的话，请帮助简悦，使其变得更好 👉 window.open( 'https://wj.qq.com/s2/3611463/7260/', '_blank') }>调查问卷
this.setState({ rate: true }) } />
this.onClose() } />
this.onSubmitClick() } />
:
this.onClose() }>
this.onStarHover( 1 ) } onClick={ () => this.onStarClick( 1 ) } dangerouslySetInnerHTML={{__html: this.props.star }}>
this.onStarHover( 2 ) } onClick={ () => this.onStarClick( 2 ) } dangerouslySetInnerHTML={{__html: this.props.star }}>
this.onStarHover( 3 ) } onClick={ () => this.onStarClick( 3 ) } dangerouslySetInnerHTML={{__html: this.props.star }}>
this.onStarHover( 4 ) } onClick={ () => this.onStarClick( 4 ) } dangerouslySetInnerHTML={{__html: this.props.star }}>
this.onStarHover( 5 ) } onClick={ () => this.onStarClick( 5 ) } dangerouslySetInnerHTML={{__html: this.props.star }}>
{ this.state.stars == 0 && this.onRateClick() }/> }
{ this.state.stars > 3 && this.onRateClick() }/> }
}
)
}
}
/**
*
* @param {string} storage.version
* @param {object} storage.user
* @param {boolen} rate, true: show rating; false: show feedback
*/
function Render( version, user, rate = false ) {
if ( $( "simpread-feedback" ).length > 0 ) return;
$( "html" ).append( `
` );
ReactDOM.render(
主题色
this.changeBgColor(val,target) } />
透明度
this.changeOpacity(v) }/>
this.changeShortcuts(val) } />
)
}
}
================================================
FILE: src/module/guide.jsx
================================================
console.log( "===== simpread option guide load =====" )
import intro from 'intro';
import {browser} from 'browser';
import * as msg from 'message';
import {storage} from 'storage';
import * as ver from 'version';
class Guide extends React.Component {
static defaultProps = {
tips: []
};
static propsType = {
tips: React.PropTypes.array,
};
state = {
tips: [],
}
onClick( event, idx, url, detail ) {
if ( url.startsWith( "http" ) ) {
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.new_tab, { url }));
} else if ( url.startsWith( "@" ) ) {
start( url );
this.props.onExit && this.props.onExit();
} else if ( url.startsWith( "!!" ) ) {
start( url, true, detail );
this.props.onExit && this.props.onExit();
} else if ( idx == 2 ) {
start( storage.version );
this.props.onExit && this.props.onExit();
} else {
const id = location.hash == "" ? "common" : location.hash.replace( "#", "" );
if ( id == "account" || id == "about" ) {
new Notify().Render( "此页面没有功能描述。" );
} else {
start( id, false );
this.props.onExit && this.props.onExit();
}
}
}
onLoadingClick() {
$( ".guide .loading" ).html( ` ` );
const ajax = () => {
$.ajax({
url : storage.help_service + "?=" + Math.round(+new Date()),
method: "GET",
}).done( ( result, textStatus, jqXHR ) => {
if ( result && result.tips.length == 0 ) {
$( ".guide .loading" ).html( '没有新的消息 ' ).css({"animation": ".1s reverse fadein,235ms cubic-bezier(.4,0,.2,1) popup"});
} else {
$( ".guide" ).find( "hr" ).remove();
this.setState({tips: this.state.tips.concat( result.tips ) });
$( ".guide .loading" ).remove();
}
}).fail( error => {
$( ".guide .loading" ).html( `发生了一些错误，请稍后再试。 ` )
});
};
setTimeout( ajax, 1000 );
}
componentWillMount() {
storage.GetRemote( "help_tips", ( result, error ) => {
result && result.tips && this.setState({ tips: result.tips });
});
}
componentDidUpdate() {
$( "guid-card[id='3']" ).after( "this.onClick( e, item.idx, item.url, item.detail ) }>
{ item.name }
)
});
return (
帮助中心
快捷答案
{ tips }
this.onLoadingClick() }>加载更多
)
}
}
/**
* Show current version intro
*
* @param {string} id include: version id | hash id, e,g. 1.1.3, common, simple
* @param {boolean} verify current url and intros.start()
* @param {boolean} detail @see ver.tips data structure
*/
function start( id, verify = true, detail = {} ) {
const [ rm_idx, rm_target, rm_steps ] = [ detail.idx, detail.target, detail.steps ],
target = rm_target ? rm_target : ver.tips[ id ].target,
idx = rm_idx ? rm_idx : ver.tips[ id ].idx,
steps = (() => {
const items = rm_steps ? rm_steps : ver.tips[ id ].items;
return items.map( item => { return { element: $( ver.tips.root( item.id ) )[0], intro: item.intro }})
})(),
intros = intro(),
start = () => {
intros.setOptions({
hintButtonLabel: "确认",
nextLabel: "下一条 →",
prevLabel: "← 上一条",
skipLabel: "",
doneLabel: "完成",
hidePrev: true,
hideNext: true,
steps
});
intros.start();
};
if ( verify && location.hash != `#${ target }` ) {
location.href = location.origin + "/options/options.html#labs";
window.dispatchEvent( new CustomEvent( msg.MESSAGE_ACTION.turn_tab, { detail: { page: idx }}));
setTimeout( start, 500 );
} else {
start();
}
}
export {
Guide,
start as Start
}
================================================
FILE: src/module/keyboard.js
================================================
console.log( "=== simpread keyboard ===" )
import Mousetrap from 'mousetrap';
import {browser} from 'browser';
import * as msg from 'message';
import * as conf from 'config';
let $root, current_mode = ""; // include: keyboard
const trigger = "s r",
key = [ ".", "," ],
global_keys = key.map( item => `${trigger} ${item}` );
/***********************
* Entry: Render
***********************/
function render( $target ) {
$root = $target;
}
/***********************
* Golbal
***********************/
Mousetrap.bind( trigger, () => {
if ( $( "html" ).find( ".simpread-read-root" ).length == 0 ) return;
if ( current_mode == "" ) {
current_mode = "keyboard";
new Notify().Render( "已进入快捷键操作模式，退出请使用 sr，帮助请按," );
} else {
current_mode = "";
new Notify().Render( "已退出快捷键操作模式！" );
}
});
Mousetrap.bind( key, ( event, combo ) => {
current_mode == "keyboard" && task( combo );
});
function task( key ) {
switch ( key ) {
case ".":
openLink();
break;
case ",":
keyboradmap();
break;
}
}
function listenESC( callback ) {
const cb = $.Callbacks();
cb.add( callback );
Mousetrap.bind( "esc", ( event, combo ) => {
if ( helpExist() ) {
removeHelp();
} else if ( openLinkExist() ) {
removeOpenLink();
} else if ( current_mode == "keyboard" ) {
Mousetrap.trigger( trigger );
} else {
cb.fire( combo );
}
});
}
function listen( callback ) {
const cb = $.Callbacks();
cb.add( callback );
let keys = new Map();
Object.values( conf.keyboard ).forEach( item => {
Object.values( item ).forEach( obj => {
const kbd = `${obj.kbd[0]} ${obj.kbd[1]}`,
loop = ( item, idx ) => {
const type = obj.type.replace( "_", "" );
keys.delete( kbd );
keys.set( `${kbd} ${idx+1}`, obj.type + conf.shortcuts[type].name[idx] );
};
keys.set( kbd, obj.type );
switch ( obj.type ) {
case "fontfamily_":
Array(5).fill(1).forEach( loop );
break;
case "fontsize_":
case "layout_":
Array(3).fill(1).forEach( loop );
break;
case "theme_next":
keys.delete( kbd );
keys.set( `${kbd} right`, obj.type );
break;
case "theme_prev":
keys.delete( kbd );
keys.set( `${kbd} left`, obj.type );
break;
}
});
});
console.log( "current shortcuts is", keys )
Mousetrap.bind( [ ...keys.keys() ] , ( event, combo ) => {
current_mode == "keyboard" && cb.fire( keys.get( combo ) )
});
}
function bind( combo, callback ) {
Mousetrap.bind( combo, callback );
}
/***********************
* Task: Open link
***********************/
let links = [];
const charts = [ "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z" ],
getName = idx => {
switch ( true ) {
case idx < 26:
return charts[idx];
case idx >= 26 && idx <= 99:
return charts[idx[0]] + charts[idx[1]];
case idx > 99:
return charts[idx[0]] + charts[idx[1]] + charts[idx[2]];
}
};
function openLink() {
if ( openLinkExist() ) {
removeOpenLink();
return;
}
$root.find( "a" ).map( ( idx, item ) => {
const key = getName( idx + "" );
$(item).addClass( "sr-kbd-a" ).append( `${key} ` );
links.push( key.toLowerCase() );
});
links.length > 0 && $( "html" ).on( "keypress", openLinkEventHander );
}
function openLinkEventHander( event ) {
const combo = event.key.toUpperCase(),
result = links.join("").match( new RegExp( combo, "ig" ) );
if ( combo == "." ) return;
if ( result ) {
if ( result.length == 1 ) {
const $target = $root.find( `sr-kbd[id=${combo}]` );
if ( $target && $target.is( "sr-kbd" ) ) {
const url = $target.parent()[0].href;
url && url.startsWith( "http" ) && browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.new_tab, { url } ));
url && url.startsWith( "http" ) && removeOpenLink();
}
} else {
new Notify().Render( "已缩小查询范围。" );
links = [];
let idx = 0;
$root.find( `sr-kbd` ).map( ( _, item ) => {
if ( item.id.includes( combo ) ) {
const key = getName( idx + "" );
item.outerHTML = `${key} `
links.push( key.toLowerCase() );
idx++;
} else {
$(item).remove();
}
});
}
} else {
new Notify().Render( "当前已进入链接模式，如需其它操作，请使用 ESC 退出此模式。" );
}
}
function removeOpenLink() {
$( "sr-kbd" ).remove();
$root.find( "a" ).removeClass( "sr-kbd-a" );
$( "html" ).off( "keypress", openLinkEventHander );
links = [];
}
function openLinkExist() {
return $root && $root.find( $( "sr-kbd" ) ).length > 0 ? true : false;
}
/***********************
* Keyboard map
***********************/
function keyboradmap() {
let html = "";
Object.keys( conf.keyboard ).forEach( item => {
let maptml = "";
Object.keys( conf.keyboard[item] ).forEach( ( map, idx ) => {
const obj = conf.keyboard[item][map];
maptml += `${obj.kbd} ${obj.desc} ${item} ${maptml}
快捷键一览
全局
esc 退出当前模式 ← 前一页 → 后一页
阅读模式
sr 快捷键开启/关闭条件 , 打开/关闭快捷键一览 . 打开当前页面的任意链接
${ html }
`;
helpExist() ? removeHelp() : $root.parent().append( `${tmpl} ` );
}
function removeHelp() {
$root.parent().find( "kbd-bg" ).remove();
}
function helpExist() {
return $( "kbd-bg" ).length > 0 ? true : false;
}
/***********************
* Export
***********************/
export {
render as Render,
listenESC as ListenESC,
listen as Listen,
bind as Bind,
}
================================================
FILE: src/module/labs.jsx
================================================
console.log( "===== simpread option labs load =====" )
import {browser} from 'browser';
import * as menu from 'menu';
import {storage} from 'storage';
import Switch from 'switch';
import TextField from 'textfield';
import Button from 'button';
import Auth from 'authorize';
export default class LabsOpt extends React.Component {
static defaultProps = {
option : {},
read : {},
focus : {},
}
static propTypes = {
option : React.PropTypes.object,
read : React.PropTypes.object,
focus : React.PropTypes.object,
onChange : React.PropTypes.func,
}
onChange( value, model, state, child ) {
!child && ( this.props[model][state]=value );
child && ( this.props[model][state][child]=value );
child && menu.Refresh( this.props[model][state] );
if ( model == "option" && state == "save_at" ) {
this.props[model][state] = value ? "dropbox" : "jianguo";
}
this.props.onChange && this.props.onChange( true );
model == "read" && state == "auto" && this.exclusionState( value );
model == "read" && state == "toc" && this.tocState( value );
model == "read" && state == "cleanup" && this.cleanupState( value );
model == "option" && state == "preload" && this.lazyloadState( value );
}
changeExclusion( event ) {
this.props.read.exclusion = event.target.value.split("\n");
this.props.onChange && this.props.onChange( false );
}
changeWhitelist( event ) {
this.props.read.whitelist = event.target.value.split("\n");
this.props.onChange && this.props.onChange( false );
}
changeLazyload( event ) {
this.props.option.lazyload = event.target.value.split("\n");
this.props.onChange && this.props.onChange( false );
}
tocState( value ) {
$( this.refs.toc ).velocity( value ? "slideDown" : "slideUp" );
}
cleanupState( value ) {
$( this.refs.cleanup ).velocity( value ? "slideDown" : "slideUp" );
}
lazyloadState( value ) {
$( this.refs.lazyload ).velocity( value ? "slideDown" : "slideUp" );
}
exclusionState( value ) {
$( this.refs.exclusion ).velocity( value ? "slideDown" : "slideUp" );
$( this.refs.whitelist ).velocity( !value ? "slideDown" : "slideUp" );
}
blacklist( event ) {
this.props.option.blacklist = event.target.value.split("\n");
this.props.onChange && this.props.onChange( false );
}
componentDidMount() {
this.exclusionState( this.props.read.auto );
this.tocState( this.props.read.toc );
this.cleanupState( this.props.read.cleanup == undefined ? true : this.props.read.cleanup );
this.lazyloadState( this.props.option.preload );
}
onClick( state ) {
state == "custom" && ( location.href = location.origin + "/options/custom.html" );
state == "notice" && ( location.href = location.origin + "/options/notice.html?is_update=" + sessionStorage.getItem( "is_update" ));
}
render() {
return (
全局
this.onChange(s, "option", "esc") } />
this.onChange(s, "option", "br_exit") } />
黑名单
加入其中后，不再启动简悦，有别于白名单和排除列表，黑名单则彻底不加载。
this.blacklist(e) }
/>
this.onChange(s, "option", "secret") } />
this.onChange(s, "option", "save_at") } />
this.onChange(s, "option", "uninstall") } />
右键菜单
this.onChange(s, "option", "menu", "focus" ) } />
this.onChange(s, "option", "menu", "read" ) } />
this.onChange(s, "option", "menu", "link" ) } />
this.onChange(s, "option", "menu", "list" ) } />
this.onChange(s, "option", "menu", "unrdist" ) } />
this.onChange(s, "option", "menu", "whitelist" ) } />
this.onChange(s, "option", "menu", "exclusion" ) } />
this.onChange(s, "option", "menu", "blacklist" ) } />
this.onChange(s, "option", "menu", "lazyload" ) } />
this.onChange(s, "option", "urlscheme" ) } />
聚焦模式
this.onChange(s, "focus", "mask") } />
this.onChange(s, "focus", "controlbar") } />
this.onChange(s, "focus", "highlight") } />
阅读模式
this.onChange(s, "read", "progress") } />
this.onChange(s, "read", "controlbar") } />
this.onChange(s, "read", "fap") } />
this.onChange(s, "read", "highlight") } />
this.onChange(s, "read", "toc") } />
this.onChange(s, "read", "toc_hide") } />
this.onChange(s, "read", "auto") } />
排除列表
加入其中后将不会自动进入阅读模式，仅当启用「自动进入阅读模式」有效。
this.changeExclusion(e) }
/>
白名单
加入其中后将自动进入阅读模式，仅当禁用「自动进入阅读模式」有效。
this.changeWhitelist(e) }
/>
this.onChange(s, "read", "cleanup") } />
this.onChange(s, "read", "pure") } />
如果经常阅读代码的话，请安装
代码段增强 包括：高亮，去重，支持 CSDN 等特殊情况的代码段
this.onChange(s, "option", "preload") } />
2. 关闭此功能后，只有进入阅读模式时才会对页面进行解析，所以经常使用简悦的用户请勿关闭它。
3. 此功能的优先级比「自动进入阅读模式」高；当关闭此功能时，自动进入阅读模式将不会工作。
延迟加载列表
加入其中后的网址将不会启用预加载功能。
此功能适合「经常使用简悦但又性能不够」的用户、需要动态加载及支持 Mathjax 解析的页面等。
this.changeLazyload(e) }
/>
自定义样式
this.onClick('custom') }>
增强「中文阅读体验」设置
包括：标题、描述、正文的字间距、行间距、首行缩进等及自定义 CSS。
消息中心
this.onChange(s, "option", "notice") } />
this.onClick('notice') }>
查看全部消息
简悦会不定期发送一些消息，包括：新的插件上线、新的适配站点上线、修复 Bug 等
)
}
}
================================================
FILE: src/module/notice.jsx
================================================
console.log( "=== simpread notice load ===" )
import {storage} from 'storage';
import th from 'theme';
import * as ss from 'stylesheet';
import * as puplugin from 'puplugin';
import * as watch from 'watch';
import Button from 'button';
/**
* Write storage
*
* @param {func} callback
*/
const write = ( callback ) => {
storage.Write( () => {
console.log( "current notice is ", storage.notice )
watch.SendMessage( "option", true );
callback && callback();
});
}
export default class Notice extends React.Component {
static defaultProps = {
is_update: false,
step: 20,
};
static propsType = {
step: React.PropTypes.number,
is_update: React.PropTypes.bool,
};
state = {
items: [],
detail: "",
failed: false,
total: 0,
page : 1,
}
onClick( event, id ) {
const markdown = puplugin.Plugin( "markdown" ),
converter = new markdown.default.Converter(),
obj = this.state.items.filter( item => item.id == id ),
item = obj[0],
html = converter.makeHtml( item.content ),
tmpl = `
${item.title}
${item.category.name}
发布于 ${item.date}
${html}
`;
$( "notice .detail" ).addClass( "simpread-theme-root" ).html( tmpl );
}
onReadallClick() {
new Notify().Render( "snackbar", "是否将全部消息标记为已读？", "确认", () => {
storage.notice.read = [];
this.state.items.forEach( ( item, idx ) => { storage.notice.read.push( idx + 1 ) });
write( ()=> {
new Notify().Render( "已全部设置为已读，3 秒后自动刷新本页..." );
setTimeout( ()=>location.reload(), 3000 )
});
});
}
onLoadmoreClick() {
this.setState({ page: this.state.page + 1 });
}
componentWillMount() {
if ( this.props.is_update ) {
$.ajax( storage.notice_service.message + "?" + Math.round(+new Date()) )
.done( result => {
storage.Notice( undefined, result.notice );
storage.notice.latest = result.notice.length;
write();
this.setState({ items: result.notice, total: Math.ceil( result.notice.length / this.props.step ) });
})
.fail( ( jqXHR, textStatus, errorThrown ) => {
this.setState({ failed: true });
});
} else {
storage.Notice( result => {
this.setState({ items: result.notice, total: Math.ceil( result.notice.length / this.props.step ) });
});
}
}
componentDidMount() {
th.Change( "pixyii" );
}
render() {
let dom;
const items = this.state.items.slice( 0, this.state.page * this.props.step );
if ( this.state.failed ) {
dom =
;
} else if ( this.state.items.length == 0 ) {
dom =
;
} else if ( this.state.items.length > 0 ) {
dom =
this.onReadallClick() } />
this.onClick( e, id ) } />
{ this.state.page < this.state.total &&
this.onLoadmoreClick() } />
}
;
}
return (
{ dom }
)
}
}
class List extends React.Component {
static defaultProps = {
list: [],
onClick: undefined,
};
static propTypes = {
list : React.PropTypes.array,
onClick: React.PropTypes.func,
}
onClick( event, id ) {
$( "list" ).removeClass( "selected" );
$( `list[id="${id}"]` ).addClass( "selected" );
this.props.onClick( event, id );
}
onActive( event, id ) {
$( `list[id="${id}"]` ).addClass( "active" );
storage.notice.read.push( id );
write( () => new Notify().Render( "已设置为已读。" ) );
}
render() {
const list = this.props.list.map( item => {
const active = storage.notice.read.findIndex( value=>value==item.id ) != -1 ? " active" : "";
return (
this.onClick( e, item.id ) }>
{ item.title }
{ item.category.name }
{ item.date }
{ active == "" &&
this.onActive( e, item.id ) }
/>
}
)
});
return (
{ list }
)
}
}
================================================
FILE: src/module/pluginbar.jsx
================================================
console.log( "=== simpread plugin bar load ===" )
import {storage} from 'storage';
import Button from 'button';
export default class Pluginbar extends React.Component {
state = {
category: []
};
category = {};
getCategory() {
Object.values( storage.plugins ).forEach( ( item, idx ) => {
if ( this.category[item.category] ) {
this.category[item.category].push( item );
} else {
this.category[item.category] = [];
this.category[item.category].push( item );
}
});
this.setState({ category: Object.keys( this.category ) });
}
enable( id ) {
console.log( id, storage.plugins[id].enable )
const plugin = storage.plugins[id];
plugin.enable = !plugin.enable;
storage.Plugins( () => {
new Notify().Render( "当前插件已" + ( plugin.enable ? "启用" : "禁用" ) + "，请重新进入阅读模式以便生效。" );
// hack code
const bgColor = ( plugin.enable == undefined || plugin.enable == true ) ? plugin.icon.bgColor : "#c3c6c7";
$( this.refs[id].refs.mask ).parent().css( "background-color", bgColor );
}, storage.plugins );
}
componentWillMount() {
storage.Plugins( () => {
this.category = {};
this.getCategory();
});
}
render() {
const child = this.state.category.map( item => {
const actions = this.category[item].map( plugin => {
const bgColor = ( plugin.enable == undefined || plugin.enable == true ) ? plugin.icon.bgColor : "#c3c6c7";
plugin.enable == undefined && ( plugin.enable = true );
return (
this.enable(plugin.id) } />
)
});
return (
{ item }
{ actions }
)
});
if ( child.length == 0 ) {
child.push( 请通过「选项页 → 插件管理」添加。` }}> );
}
return (
{child}
)
}
}
================================================
FILE: src/module/plugins.jsx
================================================
console.log( "===== simpread option plugins load =====" )
import {storage} from 'storage';
import * as run from 'runtime';
import * as ss from 'stylesheet';
import {browser} from 'browser';
import * as msg from 'message';
import * as watch from 'watch';
import Button from 'button';
class Card extends React.Component {
static defaultProps = {
plugin : {},
};
static propTypes = {
plugin : React.PropTypes.object,
};
update() {
run.Install( this.props.plugin.id, undefined, result => {
if ( result ) {
if ( this.props.plugin.version != result.version ) {
storage.plugins[this.props.plugin.id] = result;
this.props.onChange( "update" );
} else {
new Notify().Render( "当前插件为最新版，无需更新。" );
}
} else new Notify().Render( 2, "更新失败，请稍后再试。" );
});
}
delete() {
new Notify().Render({ mode:"snackbar", content: "是否删除当前插件？", action: "确认", cancel: "取消", callback: type => {
if ( type == "cancel" ) return;
delete storage.plugins[ this.props.plugin.id ];
storage.option.plugins = Object.keys( storage.plugins );
this.props.onChange( "delete" );
}});
}
enable() {
this.props.plugin.enable = this.props.plugin.enable == undefined || this.props.plugin.enable ? false : true;
this.props.onChange( "enable" );
}
addmore() {
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.new_tab, { url: "https://simpread.ksria.cn/plugins/details/" + this.props.plugin.id }));
}
render() {
const enable = this.props.plugin.enable == undefined || this.props.plugin.enable ? true : false;
return (
by { this.props.plugin.user.name }
{ this.props.plugin.name }
`}
waves="md-waves-effect md-waves-button"
onClick={ ()=>this.enable() } />
this.delete() } />
this.update() } />
this.addmore() } />
)
}
}
class Cards extends React.Component {
static defaultProps = {
plugins : [],
};
static propTypes = {
plugins : React.PropTypes.array,
onChange : React.PropTypes.func,
};
render() {
const card = this.props.plugins.length > 0 ? this.props.plugins.map( ( item, idx ) => {
return (
this.props.onChange(t)} />
)
}) : 没有任何插件，点击打开「插件中心」添加。 { card }
)
}
}
export default class PluginsOpt extends React.Component {
state = {
plugins: []
};
writecb() {
watch.SendMessage( "option", true );
}
install() {
const id = decodeURIComponent( location.hash ).replace( "#plugins?install=", "" );
run.Install( id, undefined, result => {
if ( result ) {
const add = () => {
storage.plugins[result.id] = result;
storage.Plugins( result => {
new Notify().Render( "当前插件已安装成功，2 秒后自动刷新当前页面。" );
setTimeout( ()=> {
location.href = location.origin + location.pathname + "#plugins";
location.reload();
}, 2000 );
}, storage.plugins );
};
if ( !storage.option.plugins.includes( result.id ) ) {
add();
storage.option.plugins.push( result.id );
storage.Write( this.writecb );
} else if ( storage.plugins[result.id].version != result.version ) {
new Notify().Render({ content: "本地版本与安装版本不一致，是否安装新版本？", action: "安装", cancel: "取消", callback: type => {
type == "action" && add();
}});
} else {
new Notify().Render({ content: "本地版本与安装版本一致，是否重新安装？", action: "安装", cancel: "取消", callback: type => {
type == "action" && add();
}});
}
} else new Notify().Render( 2, id + " 获取失败，请稍后再试。" );
});
}
clear() {
new Notify().Render({ mode: "snackbar", content: "是否清除本地全部插件？", action: "是的", cancel: "取消", callback: type => {
if ( type == "action" ) {
storage.option.plugins = [];
storage.Write( this.writecb );
storage.Plugins( () => {
new Notify().Render( "snackbar", "清除成功，此页面需刷新后才能生效！", "刷新 ", ()=>{
location.href = location.origin + location.pathname + "#plugins";
location.reload();
});
}, {} );
}
}});
}
addmore() {
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.new_tab, { url: "https://simpread.ksria.cn/plugins" }));
}
update() {
let is_update = false, count = 0;
storage.option.plugins.forEach( id => {
run.Install( id, undefined, result => {
if ( !result ) {
new Notify().Render( 2, id + " 获取失败，请稍后再试。" );
}
count++;
if ( storage.plugins[id].version != result.version ) {
storage.plugins[result.id] = result;
is_update = true;
}
count == storage.option.plugins.length && complete();
});
});
const complete = () => {
if ( is_update ) {
storage.Plugins( result => {
new Notify().Render( "本地插件已全部更新完毕。" );
this.setState({ plugins: Object.values( storage.plugins ) });
}, storage.plugins );
} else {
new Notify().Render( "无任何可用更新。" );
}
}
}
import() {
let newPlugins = {};
if ( storage.option.plugins.length == 0 ) {
new Notify().Render( "当前配置文件没有任何插件。" );
return;
}
new Notify().Render({ mode:"snackbar", content: "导入意味着从配置文件覆盖当前的插件！", action: "确认", cancel: "取消", callback: type => {
if ( type == "cancel" ) return;
let count = 0;
storage.option.plugins.forEach( id => {
run.Install( id, undefined, result => {
if ( !result ) {
new Notify().Render( 2, id + " 获取失败，请稍后再试。" );
} else newPlugins[result.id] = result;
count++;
count == storage.option.plugins.length && complete();
});
});
}});
const complete = () => {
storage.Plugins( result => {
storage.Write( () => {
new Notify().Render( "已从配置文件导入完毕。" );
this.setState({ plugins: Object.values( storage.plugins ) });
});
}, newPlugins );
}
}
onChange( type ) {
storage.Write( this.writecb );
storage.Plugins( () => {
type == "update" && new Notify().Render( "当前插件已更新成功。" );
type == "delete" && new Notify().Render( "当前插件已删除成功。" );
type == "enable" && new Notify().Render( "当前插件已更改成功。" );
this.setState({ plugins: Object.values( storage.plugins ) });
}, storage.plugins );
}
componentWillMount() {
$( "head" ).append( '
管理
this.import() } />
`}
color="#fff" backgroundColor="#00BCD4"
waves="md-waves-effect md-waves-button"
onClick={ ()=>this.addmore() } />
this.update() } />
this.clear() } />
{ this.state.plugins.length == 0 ? "" : "已安装 " + this.state.plugins.length + " 个插件 " }
{ this.state.plugins.length > 5 &&
过多的插件会使进入阅读模式变慢，建议不要超过 6 个 }
)
}
}
================================================
FILE: src/module/read.jsx
================================================
console.log( "===== simpread option read mode load =====" )
import th from 'theme';
import * as ss from 'stylesheet';
import * as conf from 'config';
import TextField from 'textfield';
import SelectField from 'selectfield';
import Slider from 'slider';
import AC from 'ac';
import ThemeSel from 'themesel';
import Shortcuts from 'shortcuts';
const getName = ( value, items ) => {
for ( const item of items ) {
if ( value == "" ) return item.name;
else if ( item.value == value ) return item.name;
}
};
export default class ReadOpt extends React.Component {
parse( value ) {
const news = parseInt( value );
return isNaN(news) ? 0 : news;
}
changeBgColor( theme ) {
this.props.option.theme = theme;
th.Change( this.props.option.theme );
this.props.onChange && this.props.onChange( `theme_${theme}` );
console.log( "this.props.option.theme = ", this.props.option.theme )
}
changeShortcuts( shortcuts ) {
this.props.option.shortcuts = shortcuts;
this.props.onChange && this.props.onChange( `shortcuts_${shortcuts}` );
console.log( "this.props.option.shortcuts = ", this.props.option.shortcuts )
}
changeFontfamily( name, value ) {
value.trim() == "" && ( value = "default" );
conf.fontfamily.forEach( obj => {
return obj.name == name && ( value = obj.value );
})
ss.FontFamily( value );
this.props.option.fontfamily = value;
this.props.onChange && this.props.onChange( `fontfamily_${value}` );
console.log( "this.props.option.fontfamily = ", value, name )
}
changeFontsize( value ) {
this.props.option.fontsize = value + "%";
ss.FontSize( this.props.option.fontsize );
this.props.onChange && this.props.onChange( `fontsize_${this.props.option.fontsize}` );
console.log( "this.props.option.fontsize = ", this.props.option.fontsize )
}
changeLayout( value ) {
this.props.option.layout = `${ 100 - value }%`;
ss.Layout( this.props.option.layout );
this.props.onChange && this.props.onChange( `layout_${this.props.option.layout}` );
console.log( "this.props.option.layout = ", this.props.option.layout )
}
changeStyle( value, type ) {
let news = value
if ( value == 0 ) {
news = "";
} else news = type != "lineHeight" ? value + "px" : value;
this.props.option.custom.art[type] = news;
ss.Custom( "art", this.props.option.custom.art );
this.props.onChange && this.props.onChange( `custom_${this.props.option.custom.art[type]}`, type );
console.log( "this.props.option.custom.art", this.props.option.custom.art[type] )
}
render() {
const slider_width = location.protocol.includes( "extension" ) ? "660.09px" : undefined;
return (
主题色
this.changeBgColor(val) } />
this.changeShortcuts(val) } />
字体类型
this.changeFontfamily(n,v) }
/>
字体大小
this.changeFontsize(v) }/>
版面宽度
this.changeLayout(v) }/>
字间距
this.changeStyle(v, "letterSpacing") }/>
行间距
this.changeStyle(v, "lineHeight") }/>
单词间距
this.changeStyle(v, "wordSpacing") }/>
首行缩进
this.changeStyle(v, "textIndent") }/>
)
}
}
================================================
FILE: src/module/setting.jsx
================================================
console.log( "=== simpread option setting ===" )
import FocusOpt from 'focusopt';
import ReadOpt from 'readopt';
import { storage, STORAGE_MODE } from 'storage';
import * as msg from 'message';
import {browser} from 'browser';
import th from 'theme';
import Notify from 'notify';
import * as ss from 'stylesheet';
import * as watch from 'watch';
import Button from 'button';
import * as tooltip from 'tooltip';
import * as waves from 'waves';
import * as dia from 'dialog';
const root = "simpread-option-root",
rootjq = `.${root}`;
let callback;
/**
* Modals Rect component
*/
class Modals extends React.Component {
// close setting
close( restore = rollback() ) {
dia.Close();
}
// save setting focus option
save() {
console.log( "setting click submit button.", storage.current )
watch.Verify( ( state, result ) => {
if ( state ) {
console.log( "watch.Lock()", result );
new Notify().Render( "配置文件已更新，刷新当前页面后才能生效。", "刷新", ()=>window.location.reload() );
} else {
storage.Setcur( storage.current.mode );
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.shortcuts, { url: window.location.href } ));
watch.SendMessage( "site", true );
new Notify().Render( 0, "更新成功，刷新当前页面后才能生效！" )
this.close( false );
}
});
}
siteeditor() {
callback();
this.close();
}
constructor( props ) {
super( props );
}
componentDidMount() {
waves.Render({ root: rootjq });
tooltip.Render( rootjq );
}
render() {
const Option = storage.current.mode == STORAGE_MODE.focus ? FocusOpt : ReadOpt;
return (
this.siteeditor() } width="70%" />
this.close() } />
this.save() } />
)
}
}
/**
* Roll back when cancel button click
*/
function rollback() {
storage.Restore( storage.current.mode );
if ( storage.current.mode == STORAGE_MODE.focus ) $( ".simpread-focus-root" ).css({ "background-color" : storage.current.bgcolor });
if ( storage.current.mode == STORAGE_MODE.read ) {
th.theme != storage.current.theme && th.Change( storage.current.theme );
ss.FontFamily( storage.current.fontfamily );
ss.FontSize( storage.current.fontsize );
ss.Layout( storage.current.layout );
ss.Preview( storage.read.custom );
}
}
/**
* Modals Render
*
* @param {func} callback
*/
function Render( cb ) {
callback = cb;
!dia.Popup( rootjq ) && !storage.current.fap && dia.Open(
摘自 《{ this.props.title }》
获取简悦" }}>
还原阅读本质 · 提升阅读体验
this.download() } />
` }
color="#fff" backgroundColor="#2196F3"
waves="md-waves-effect md-waves-button"
onClick={ ()=>this.exit() } />
)
}
}
function Render( root, title, txt ) {
$( root ).append( `" )} />, $( "sharecard-bg" )[0] )
}
export {
Render
}
================================================
FILE: src/module/sitebar.jsx
================================================
console.log( "=== simpread site bar load ===" )
import {storage} from 'storage';
import * as watch from 'watch';
import Button from 'button';
export default class Sitebar extends React.Component {
static defaultProps = {
bgColors : {
"global": "#fb584a",
"custom": "#fa9a3f",
"local": "#00a9f0",
},
labels: {
"global": "官方适配源",
"person": "站点集市适配源",
"custom": "第三方适配源",
"local": "自定义适配源",
},
icons: {
"global": 'this.active( arr ) } />
)
});
return (
{ label }
{ actions }
)
});
if ( child.length == 0 ) {
child.push( 当前模式下无法使用此功能 );
}
return (
{child}
)
}
}
================================================
FILE: src/module/siteeditor.jsx
================================================
console.log( "=== simpread option siteeditor load ===" )
import { storage } from 'storage';
import * as watch from 'watch';
import {browser} from 'browser';
import * as msg from 'message';
import Editor from 'editor';
import Button from 'button';
import * as tooltip from 'tooltip';
import * as waves from 'waves';
import * as dia from 'dialog';
const root = "simpread-option-root",
rootjq = `.${root}`;
let site,
state = { name: 0, url: 0, title: 0, desc: 0, include: 0, exclude: 0, avatar:{ name: 0, url: 0 }, paging: { prev:0, next: 0} }; // 0: success -1: faield -2: not empty
/**
* SiteEditor Rect component
*/
class SiteEditor extends React.Component {
close() {
dia.Close();
}
action( type ) {
watch.Verify( ( state, result ) => {
if ( state ) {
console.log( "watch.Lock()", result );
new Notify().Render( "配置文件已更新，刷新当前页面后才能生效。", "刷新", ()=>window.location.reload() );
} else {
type == "save" ? this.save() : this.delete();
}
});
}
delete() {
console.log( "siteeditor click delete button.", storage.current.site )
new Notify().Render( "是否删除当前适配站点？", "删除", () => {
site.name.startsWith( "tempread::" ) ? new Notify().Render( 2, `当前站点为自动识别，无误删除。` ) :
storage.pr.Deletesite( storage.current.site.target, site.url, result => {
if ( result == -1 ) new Notify().Render( 2, `此站已被删除，请勿重复操作。` );
else {
storage.Writesite(storage.pr.sites, () => {
new Notify().Render( "删除成功，如需生效，请刷新本页。" );
watch.SendMessage( "site", true );
});
}
});
});
}
// save siteeditor focus option
save() {
console.log( "siteeditor click save button.", storage.current.site, site, state )
if ( [ "url", "name", "title", "include" ].findIndex( key => site[key] == "" ) != -1 ) {
new Notify().Render( 3, "【标识、域名、标题、高亮】不能为空。" );
}
else if ( Object.values( state ).findIndex( key => typeof key == "number" && key != 0 ) != -1 ||
( state.avatar.name != 0 || state.avatar.url != 0 ) ||
( state.paging.prev != 0 || state.paging.next != 0 )
) {
new Notify().Render( 3, "请正确填写【标识、域名、标题、高亮】后再提交。" );
} else if (( site.avatar[0].name != "" && site.avatar[1].url == "" ) || ( site.avatar[0].name == "" && site.avatar[1].url != "" )) {
new Notify().Render( 3, "【头像的名称与地址】必须同时设定。" );
} else if (( site.paging[0].prev != "" && site.paging[1].next == "" ) || ( site.paging[0].prev == "" && site.paging[1].next != "" )) {
new Notify().Render( 3, "【前一页与后一页】必须同时设定。" );
} else if ( site.name.startsWith( "tempread::" ) ) {
new Notify().Render( 2, "标识不能包含 tempread:: 请删除。" );
} else if ( site.include.trim() == "" ) {
new Notify().Render( 2, "高亮区域不能为空。" );
} else {
// changed storage.current.site.target to 'local'
storage.pr.Updatesite( 'local', storage.current.url, [ site.url, storage.pr.Cleansite(site) ]);
storage.Writesite( storage.pr.sites, () => {
new Notify().Render( 0, "更新成功，页面刷新后生效！" );
watch.SendMessage( "site", true );
});
}
}
submit() {
const news = { ...site };
delete news.html;
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.temp_site, { url: location.href, site: news, uid: storage.user.uid, type: "temp" }));
}
componentDidMount() {
waves.Render({ root: rootjq });
tooltip.Render( rootjq );
}
render() {
site = { ...storage.pr.current.site };
if ( storage.pr.state == "temp" && storage.pr.dom ) {
site.name = site.name.replace( "tempread::", "" );
let include = storage.pr.Utils().dom2Xpath( storage.pr.dom );
if ( include != "" ) {
site.include = `[[\`${include}\`]]`;
} else site.include = storage.pr.dom.outerHTML.replace( storage.pr.dom.innerHTML, "" ).replace( /<\/\S+>$/i, "" )
}
return (
this.action( "delete" ) } />
{ storage.pr.state == "temp" ?
this.submit() } /> :
}
this.close() } />
this.action( "save" ) } />
)
}
}
/**
* Modals Render
*/
function Render() {
switch ( true ) {
case storage.pr.state == "meta":
new Notify().Render( "当前为 主动适配阅读模式 ，并不能使用设定功能。" )
break;
case storage.pr.state == "txt":
new Notify().Render( "当前为 TXT 阅读器模式 ，并不能使用设定功能。" )
break;
default:
!dia.Popup( rootjq ) && dia.Open(
{ this.props.info.title }
this.delete() } />
this.update() } />
this.addmore() } />
)
}
}
class Cards extends React.Component {
state = {
sites : storage.pr.sites.person
}
static propTypes = {
onChange : React.PropTypes.func,
};
onChange( type ) {
this.setState({
sites: storage.pr.sites.person
});
}
render() {
const card = this.state.sites && this.state.sites.length > 0 ? this.state.sites.map( item => {
return (
this.onChange(t)} />
)
}) : 没有任何站点，点击打开「站点集市」添加。 { card }
)
}
}
export default class SitesOpts extends React.Component {
newsites() {
const notify = new Notify().Render({ content: "数据同步中，请稍等...", state: "loading" });
storage.GetRemote( "remote", ( result, error ) => {
notify.complete();
if ( !error ) {
const count = storage.pr.Addsites( result );
storage.Writesite( storage.pr.sites, () => {
watch.SendMessage( "site", true );
count == 0 ? new Notify().Render( "适配列表已同步至最新版本。" ) : new Notify().Render( 0, `适配列表已同步成功，本次新增 ${ count } 个站点，2 秒后自动自动刷新。` );
count > 0 && setTimeout( ()=>location.reload(), 2000 );
});
} else {
new Notify().Render( 3, `同步时发生了一些问题，并不会影响本地配置文件，请稍后再试！` );
}
});
}
onClick( state ) {
state == "sitemgr" && ( location.href = location.origin + "/options/sitemgr.html" );
}
changeOrigins() {
this.props.option.origins = event.target.value.split("\n");
storage.pr.origins = this.props.option.origins;
this.props.onChange && this.props.onChange( false );
}
origins( type ) {
/*
if ( type == "origins" ) {
storage.GetRemote( "origins", ( result, error ) => {
if ( error ) new Notify().Render( 2, "获取失败，请稍后重新加载。" );
else {
this.props.option.origins = storage.pr.Origins( result );
this.props.onChange && this.props.onChange( false );
$( this.refs.origins ).find( "textarea" ).val( this.props.option.origins.join( "\n" ) );
new Notify().Render( "官方源加载成功。" );
}
});
} else
*/
if ( type == "import" ) {
new Notify().Render( "snackbar", "导入后会覆盖掉原来的第三方适配列表，请问是否覆盖？", "确认", () => {
const urls = this.props.option.origins.filter( item => {
return item.trim() != "" && item.trim().startsWith( "http" ) && item.trim().endsWith( ".json" )
});
const max = urls.length;
let idx = 0, arr = [], count = 0;
if ( urls.length != this.props.option.origins.length ) {
this.props.option.origins = [ ...urls ];
this.props.onChange && this.props.onChange( false );
$( this.refs.origins ).find( "textarea" ).val( this.props.option.origins.join( "\n" ) );
new Notify().Render( "已剔除掉不符合规范的第三方源。" );
}
this.props.option.origins.forEach( item => {
storage.GetRemote( item, ( result, error ) => {
idx++;
if ( result && result.sites.length > 0 ) {
count++;
arr = arr.concat( storage.pr.Formatsites( result ) );
} else new Notify().Render( `导入失败 ${ item }` );
if ( idx == max ) {
arr.length > 0 && ( storage.websites.custom = storage.pr.Addorigins( arr ) );
console.log( "current storage websites.custom is ", arr );
new Notify().Render( `已完成导入，本次共计：${ count } 个站点， ${ arr.length } 条数据。` );
this.props.onChange && this.props.onChange( false );
}
});
});
});
} else if ( type == "clear" ) {
new Notify().Render( "snackbar", "只能清除第三方源的适配站点，请问是否清除？", "确认", () => {
new Notify().Render( `已完成清除，共计：${ storage.pr.Clearorigins() } 条数据。` );
storage.websites.custom = storage.pr.sites.custom;
this.props.onChange && this.props.onChange( false );
});
}
}
onChange( type ) {
console.log( type )
}
clear() {
new Notify().Render({ mode: "snackbar", content: "是否清除「站点集市」的全部站点？", action: "是的", cancel: "取消", callback: type => {
if ( type == "action" ) {
storage.pr.sites.person = [];
storage.Writesite( storage.pr.sites, ()=> {
console.log( "current site is ", storage.pr.sites )
watch.SendMessage( "site", true );
new Notify().Render( "已清除成功，2 秒后自动刷新当前页面。" );
setTimeout( ()=> {
location.href = location.origin + location.pathname + "#sites";
location.reload();
}, 2000 );
});
}
}});
}
addmore() {
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.new_tab, { url: "https://simpread.ksria.cn/sites" }));
}
install() {
try {
const url = decodeURIComponent( location.hash ).replace( "#sites?install=", "" ),
arr = url.split( "?site=" ),
id = arr[0],
news = JSON.parse( decodeURI( arr[1] )),
old = storage.pr.sites.person.filter( site => {
return site[1].info.id == news.id;
}),
add = () => {
const url = old.length > 0 ? old[0][0] : news.site.url,
site = { ...news.site };
delete news.user;
delete news.site;
delete news.view;
delete news.download;
delete news.href;
site.info = news;
storage.pr.Updatesite( "person", url, [ url, storage.pr.Cleansite(site) ] );
storage.Writesite( storage.pr.sites, ()=> {
console.log( "current site is ", storage.pr.sites )
watch.SendMessage( "site", true );
new Notify().Render( "当前站点已安装成功，2 秒后自动刷新当前页面。" );
setTimeout( ()=> {
location.href = location.origin + location.pathname + "#sites";
location.reload();
}, 2000 );
});
};
if ( old.length == 0 ) {
add();
} else if ( news.create != old[0][1].info.create ) {
new Notify().Render({ content: "本地版本与安装版本不一致，是否安装新版本？", action: "安装", cancel: "取消", callback: type => {
type == "action" && add();
}});
} else {
new Notify().Render({ content: "是否重新当前站点安装？", action: "安装", cancel: "取消", callback: type => {
type == "action" && add();
}});
}
} catch( error ) {
new Notify().Render( 2, "获取失败，请稍后再试。" );
}
}
update() {
const url = decodeURIComponent( location.hash ).replace( "#sites?update=", "" ),
org_site = JSON.parse( url ),
type = org_site.target,
site = storage.pr.Cleansite( { ...org_site } );
site.url = org_site.url;
$.ajax({
url: storage.service + "/sites/service/query",
method: "POST",
data:{ type, site }
}).done( ( result, textStatus, jqXHR ) => {
console.log( result.site )
if ( result.code == 200 ) {
storage.pr.Updatesite( type, org_site.url, [ result.site.url, storage.pr.Cleansite( result.site ) ]);
storage.Writesite( storage.pr.sites, () => {
new Notify().Render( 0, "更新成功，2 秒后自动关闭页面，失效的页面会自动刷新。" );
setTimeout( ()=>location.href = location.protocol + location.pathname + "#sites?update=success", 2000 );
watch.SendMessage( "site", true );
});
} else if ( result.code == 404 ) {
new Notify().Render( "无任何可用更新，2 秒后页面将会关闭！" );
setTimeout( ()=>location.href = location.protocol + location.pathname + "#sites?update=pending", 2000 );
} else {
new Notify().Render( 2, "暂时无法使用此功能，请稍候再试，2 秒后页面将会关闭！" );
setTimeout( ()=>location.href = location.protocol + location.pathname + "#sites?update=failed", 2000 );
}
}).fail( error => {
new Notify().Render( 2, "自动更新出现错误，请稍后再试！" );
});
}
pending() {
const url = decodeURIComponent( location.hash ).replace( "#sites?pending=", "" ),
data = JSON.parse( url );
$.ajax({
url : storage.service + "/sites/service/pending",
method: "POST",
data,
}).done( ( result, textStatus, jqXHR ) => {
new Notify().Render( "提交成功，谢谢对简悦作出的贡献，2 秒后页面将会关闭！" );
setTimeout( ()=>location.href = location.protocol + location.pathname + "#sites?update=complete", 2000 );
}).fail( error => {
new Notify().Render( 2, "自动更新出现错误，请稍后再试！" );
});
}
temp() {
const url = decodeURIComponent( location.hash ).replace( "#sites?temp=", "" ),
data = JSON.parse( url );
$.ajax({
url : storage.service + "/sites/service/pending",
method: "POST",
data,
}).done( ( result, textStatus, jqXHR ) => {
new Notify().Render( "提交成功，谢谢对简悦作出的贡献，2 秒后页面将会关闭！" );
setTimeout( ()=>location.href = location.protocol + location.pathname + "#sites?update=complete", 2000 );
}).fail( error => {
new Notify().Render( 2, "自动更新出现错误，请稍后再试！" );
});
}
componentWillMount() {
decodeURIComponent( location.href ).includes( "#sites?install=" ) && this.install();
decodeURIComponent( location.href ).includes( "#sites?update=" ) && this.update();
decodeURIComponent( location.href ).includes( "#sites?pending=" ) && this.pending();
decodeURIComponent( location.href ).includes( "#sites?temp=" ) && this.temp();
}
render() {
return (
第三方适配源
this.changeOrigins() }
/>
this.origins( "origins" ) } />
this.origins( "import" ) } />
this.origins( "clear" ) } />
`}
color="#fff" backgroundColor="rgb(103, 58, 183)"
waves="md-waves-effect md-waves-button"
onClick={ ()=>this.addmore() } />
this.clear() } />
this.onChange(t) } />
站点管理器
this.onClick('sitemgr') }>
可以管理全部的适配站点
包括：官方适配源、第三方适配源、站点集市适配源、自定义适配源。
)
}
}
================================================
FILE: src/module/unrdist.jsx
================================================
console.log( "===== simpread option unread list load =====" )
import List from 'list';
import Button from 'button';
import {storage} from 'storage';
import * as conf from 'config';
import * as exp from 'export';
import timeago from 'timeago';
const style = {
root: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: '1.6rem',
color: '#9b9b9b',
},
icon : {
width: '80px',
height: '80px',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundImage: 'url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAHdElNRQfhBA0LLBOn/NkLAAABtklEQVRYw+2YPyxDURTGf5WOGCwiETH7s4kaDJo2FokYMBglZ66lOtGEqWIQm9zdoJouGERIEwNlE4NE4i0iBoO0CxIMvW1f26evvJY86Tfdc3LP99137vvuTa6HqlAwzxI9X064ISrxagweE5mfOXp18CHjoCDJFHbYlBCAOiywGWzLSYmAauUIn6koI+2g/Bzb0gMMyDWoZ9pNuTQByUKLbkSyhD6PyZroYcwiN0xSoQUYJGhZ+FKjwKtlNsggeAEIFJIbnJqm7BKpSeAIgHkdjbKgRwGucgIdOrEuYXOdXKo1Fm3pF+QOQBI6Tqg3wnleb8nUVHmtRNQBQueX5AZbclmRTVFYqBcbSKpS9jtocVLcFGgK/I6AhQ/UEPHCsf09GMyU287KaBc/Xm4vF+YbBv5oDzYd8FXUWrRIQoQa+wV1hfsFmj6whTt9IPvFRv3L39Q51AR7AKzKctMHtnCnD2wE6oAbpgF4bJCA3HKbH7vcaCsSdf9ZVCrQVyfW/uIwtwdZHcXUEzuSccKt2pglpoOsfkpQPs4a0p8ROc+1KI3RAHqDdPExpIv78nPQId7plgf4BCjPbVayklPeAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA0LTEzVDExOjQ0OjE5KzA4OjAwPYuVdQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNC0xM1QxMTo0NDoxOSswODowMEzWLckAAAAASUVORK5CYII= )',
}
},
ago = timeago();
export default class Unrdist extends React.Component {
static defaultProps = {
list: [],
step: 5,
};
static propsType = {
list: React.PropTypes.array,
step: React.PropTypes.number,
onLoadMoreClick: React.PropTypes.func,
};
state = {
title: `未读列表：${ this.props.list.length } 条`,
items: this.props.list.map( item => {
item.priType = "text";
item.secType = "text";
item.priValue = item.title.substr( 0, 1 );
item.secValue = ago.format( item.create.replace( /(年|月)/g, "-" ).replace( "日", "" ), "zh_CN" )
item.url = item.url + ( window.location.search ? "&" : "?" ) + "simpread_mode=read";
return item;
}),
total: Math.ceil( this.props.list.length / this.props.step ),
page : 1,
};
onAction( event, ...rests ) {
const { pocket, linnk, instapaper } = exp,
[ id, _, data ] = rests;
[ "pocket", "instapaper", "linnk" ].includes( id ) &&
exp.VerifySvcWrapper( storage, exp[id], id, exp.Name( id ), new Notify(), false )
.done( type => {
if ( type == "pocket" ) {
pocket.Add( data.url, data.title.trim(), ( result, error ) => exp.svcCbWrapper( result, error, pocket.name, type, new Notify() ));
} else if ( type == "linnk" ) {
linnk.GetSafeGroup( linnk.group_name, ( result, error ) => {
if ( !error ) {
linnk.group_id = result.data.groupId;
linnk.Add( data.url, data.title.trim(), ( result, error ) => exp.svcCbWrapper( result, error, linnk.name, type, new Notify() ));
} else new Notify().Render( 2, `${ linnk.name } 保存失败，请稍后重新再试。` );
});
} else {
instapaper.Add( data.url, data.title.trim(), "", ( result, error ) => exp.svcCbWrapper( result, error, instapaper.name, type, new Notify() ));
}
});
id == "remove" &&
storage.UnRead( id, data.idx, success => {
success && this.state.items.splice( this.state.items.findIndex( item => item.idx == data.idx ), 1 );
success && this.setState({
title: `未读列表：${ this.state.items.length } 条`,
total: Math.ceil( this.state.items.length / this.props.step ),
});
success && new Notify().Render( 0, "删除成功" );
});
}
onClick() {
this.setState({ page: this.state.page + 1 });
this.props.onLoadMoreClick && this.props.onLoadMoreClick();
}
render() {
const content_style = {
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-end',
width: '100%',
};
const disable = this.state.page >= this.state.total ? true : false,
items = this.state.items.slice( 0, this.state.page * this.props.step ),
content = this.state.items && this.state.items.length > 0 ?
this.onAction(e,i,t,d) } />
this.onClick() } />
:
没有任何未读列表!
;
return (
{ content }
)
}
}
================================================
FILE: src/module/urlscheme.jsx
================================================
console.log( "===== simpread url scheme load =====" )
import Switch from 'switch';
import TextField from 'textfield';
import Button from 'button';
import Dropdown from 'dropdown';
import * as puplugin from 'puplugin';
const category = [
{ name: "黑名单", value: "blacklist" },
{ name: "白名单", value: "whitelist" },
{ name: "排除列表", value: "exclusion" },
{ name: "延迟加载", value: "lazyload" },
];
export class URLScheme extends React.Component {
static defaultProps = {
type: "",
url: "",
off: false,
}
static propType = {
type : React.PropTypes.string,
url : React.PropTypes.string,
off : React.PropTypes.bool,
onChange : React.PropTypes.func,
}
state = {
error : "",
disable: false,
};
onDropdownChange( value ) {
this.props.type = value;
}
onURLChange( event ) {
const minimatch = puplugin.Plugin( "minimatch" ),
value = event.target.value.trim();
if ( value == "" ) {
this.setState({ error : "不能为空", disable: true });
} else if ( value.startsWith( "[[/" ) && value.endsWith( "/]]" ) && !new RegExp( value.replace( /\[\[\/|\/\]\]/ig, "" ) ).test( location.href ) ) {
this.setState({ error : "正则表达式错误", disable: true });
} else if ( !value.startsWith( "[[/" ) && !value.startsWith( "http" ) && value != location.hostname.replace( "www.", "" ) ) {
this.setState({ error : "主域名不匹配", disable: true });
} else if ( !value.startsWith( "[[/" ) && value.startsWith( "http" ) && !minimatch( location.href, value ) ) {
this.setState({ error : "minimatch 适配错误", disable: true });
} else {
this.setState({ error : "", disable: false });
this.props.url = value;
}
}
onOpenedChange( value ) {
this.props.off = value;
}
onClose() {
$( this.refs.target )
.addClass( "hide" )[0]
.addEventListener( 'animationend', () => {
ReactDOM.unmountComponentAtNode( $( ".simpread-urlscheme" )[0] );
$( ".simpread-urlscheme" ).remove();
}, false );
}
onSave() {
this.props.onChange && this.props.onChange( this.props.type, this.props.off, this.props.url );
this.onClose();
}
render() {
return (
请选择添加模式
item.value == this.props.type )[0].name } items={ category } width="100%" onChange={ (v)=>this.onDropdownChange(v) } />
支持 域名 · 主域名 · 正则表达式 · minimatch 等规则，详细 window.open( 'http://ksria.com/simpread/docs/#/右键菜单?id=URL编辑器', '_blank') }>请看这里
this.onURLChange(e) }
/>
this.onOpenedChange( v ) } />
this.onClose() } />
this.onSave() } />
)
}
}
function Render( type, opened, callback ) {
if ( $( "simpread-urlscheme" ).length > 0 ) return;
$( "html" ).append( `
` );
ReactDOM.render( callback(t,f,v) } />, $( ".simpread-urlscheme" )[0] );
}
export {
Render
}
================================================
FILE: src/module/welcome.jsx
================================================
console.log( "===== simpread option welcome page load =====" )
import 'carous_css';
import 'carousel';
import Button from 'button';
import * as ss from 'stylesheet';
import {br} from 'browser';
import * as msg from 'message';
const welcbgcls = "welcome",
welcbgclsjq = `.${welcbgcls}`,
welcbg = `
`;
let curidx, max = [ 0, 0 ];
const style = {
root: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
minWidth: '400px',
minHeight: '400px',
width: '650px',
height: '600px',
backgroundColor: '#fff',
borderRadius: '3px',
boxShadow: 'rgba(0, 0, 0, .247059) 0px 14px 45px',
userSelect: 'none',
},
section: {
textAlign: 'center',
},
h2: {
marginBottom: 0,
color: 'inherit',
fontSize: '24px',
fontWeight: 'bold',
lineHeight: '32px',
textAlign: 'center',
},
desc: {
padding: '5px',
color: 'rgba(51, 51, 51, 0.7)',
fontSize: '15px',
fontWeight: 400,
lineHeight: '32px',
textAlign: 'center',
},
img: {
width: '100%',
marginTop: '-82px',
},
gif : {
paddingTop: '58px',
width: '550px',
},
strong: {
fontWeight: 'normal',
color: '#3f51b5',
},
footer: {
display: 'flex',
flexDirection: 'row',
marginBottom: '24px',
},
close: {
position: 'absolute',
top: 0,
right: 0,
},
}
class Welcome extends React.Component {
state = {
style: { display: "none" },
state: "next_icon",
}
prevClick() {
$( '.carousel.carousel-slider' ).carousel( "prev" );
}
nextClick() {
if ( curidx != max ) {
$( '.carousel.carousel-slider' ).carousel( "next" );
} else this.closeClick();
}
closeClick() {
window.dispatchEvent( new CustomEvent( msg.MESSAGE_ACTION.welcome_close, { detail: { first: this.props.first, version: this.props.version }}));
exit();
}
carousel() {
$( ".carousel-item" ).map( ( _, item ) => {
const $item = $(item),
version = $item.attr( "id" );
version != "end" && version != "start" && version != this.props.version && $item.remove();
});
}
componentDidMount() {
!this.props.first && this.carousel();
max = $( ".carousel-item" ).length - 1;
$( '.carousel.carousel-slider' ).carousel({
fullWidth: true,
onCycleTo: idx => {
curidx = idx;
if ( curidx == max ) {
this.setState({
style: { display: "block" },
state: "right_icon",
});
} else if ( curidx == 0 ) {
this.setState({
style: { display: "none" },
state: "next_icon",
});
} else {
this.state.style.display != "block" && this.setState({ style: { display: "block" } });
this.state.state != "next_icon" && this.setState({ state: "next_icon" });
}
}
});
}
componentWillUnmount() {
$( welcbgclsjq ).remove();
}
render() {
const { first, version } = this.props;
return (
{ this.props.first ? "欢迎使用 简悦": "简悦 已升至最新版" }
{ br.isFirefox() ? "Chrome 好评率超过 99% 的阅读模式现已来到 Firefox" : "让你瞬间进入沉浸式阅读的 Chrome 扩展，类似 Safari 的阅读模式" }
去掉干扰元素，提升阅读体验，
「简」 单阅读，愉
「悦」 心情
为了达到
「完美」 的阅读模式，简悦适配了
数百种类型 的网站
{ first &&
阅读模式 与 聚焦模式
}
{ (( !first && version == "1.1.1" ) || version == "all" ) &&
更智能的正文提取功能
全新的
词法分析引擎 2.0 ，简悦可以识别出
TXT ·
Markdown ·
LaTeX ·
代码段
Wordpress · Hexo · Ghost · Discuz 等博客 / 论坛的页面了！
甚至，只要是结构良好的页面，（无需适配）自动生成阅读模式，详细
请看这里
}
{ first &&
连接你的生产力工具
支持下载 HTML · PDF · Markdown · PNG ·
Epub 到本地 以及 发送到
Kindle
支持输出到 坚果云 · 有道云笔记 · 为知笔记 · 语雀 · 印象笔记 · Dropbox · Onenote · Notion 等
发送页面链接到
稍后读 · Pocket · Instapaper · Linnk，详细
请看这里
}
{ first &&
站点编辑器 · 站点适配源 · 站点管理器
}
{ !first && version == "1.1.1" &&
全新的控制栏面板
「告别」传统、单一的控制栏，全部功能「一览无余」
}
{ (( !first && version == "1.1.2" ) || version == "all" ) &&
插件系统
}
{ (( !first && version == "1.1.2" ) || version == "all" ) &&
站点集市
方便提交，让你的站点为数以万计的简悦用户使用
官方主适配源、第三方适配源、站点集市适配源、自定义适配源一站式浏览
现在就访问
站点集市 吧，看看有什么增加的新适配站点
}
{ !first &&
词法分析引擎 2.0
更加智能，更加专业，Markdown / LaTeX / 代码段 均不在话下
重新整理并根据更适合中文阅读的方式排版，让你爱上在 PC 阅读文章
详细说明请看
词法分析引擎
}
{ !first && version == "1.1.3" &&
导出服务又添新成员，更支持 WebDAV
}
{ !first && version == "1.1.4" &&
更强大，更易用的导出服务
}
{ (( !first && version == "1.1.3" ) || version == "all" ) &&
消息中心 · 帮助中心 · 新手入门
消息中心 让沟通更加便利
内置常用的文档说明、常见问题、及选项页全部功能说明的
帮助中心
功能太多，无从下手？
新手入门 不再让新手望而却步
}
更多功能 等你发现！
{ !first && version == "5005" &&
分享卡，右键菜单添加 「白名单 / 排除列表 / 黑名单」等
详细说明请看
更新日志
this.prevClick() } />
this.nextClick() } />
this.closeClick() } />
)
}
}
/**
* Exit
*/
function exit() {
$( welcbgclsjq ).velocity({ opacity: 0 }, { complete: () => {
ReactDOM.unmountComponentAtNode( $(welcbgclsjq)[0] );
}});
}
/**
* Welcome Render
*
* @param {string} root name
* @param {boolean} true: first load
* @param {string} version
*/
export function Render( root, first, version ) {
const $root = $( root );
if ( $root.find( "." + welcbgcls ).length == 0 ) {
$root.append( welcbg );
}
ReactDOM.render( 自定义样式 - 简悦 · 选项页
Property
简悦 SimpRead - 为你提供「如杂志般沉浸式阅读体验」的扩展
为了达到完美的阅读模式这个小目标 ，我适配了 数百种类型 的网站，因此诞生了简悦。
为了完美阅读模式这个小目标 ，我适配了 数百种类型 的网站，因此诞生了它 - 简悦 ：沉浸式阅读的扩展
大家好，我叫 Kenshin ，简悦的作者。
主要功能包括：
聚焦模式 / 阅读模式 / 临时阅读模式 / 主动阅读模式 / TXT 阅读器； 站点编辑器，站点适配源，站点管理器； 丰富的导出功能，包括：Pocket / Instapaper / Evernote / Onenote / Dropdox 等； 多种字体样式、大小、版面、主题模式等； 导出 / 导入 配置文件； 自定义样式，详细请看 自定义主题 ； 阅读模式 可编程 支持：
{
"name" : "qdaily.com" ,
"url" : "http://www.qdaily.com/articles/" ,
"title" : "<h2 class='title'>" ,
"desc" : "<p class='excerpt'>" ,
"include" : "<div class='article-detail-bd'>" ,
"exclude" : [
"<div class='author-share'>" ,
"<div class='embed-control'>"
]
}
H1 ~ H6 的样式：
我是 H1
我是 H2
我是 H3
我是 H4
我是 H5
我是 H6
表格样式：
Kenshin Wang 开源项目一览
名称
作者
主页
名称
作者
主页
简悦
Kenshin Wang
主页地址
简 Tab
（同上）
主页地址
gnvm
（同上）
主页地址
================================================
FILE: src/options/custom.js
================================================
console.log( "==== simpread options page: custom load ====" )
import '../assets/css/simpread.css';
import '../assets/css/options_page.css';
import '../assets/css/options_custom.css';
import 'notify_css';
import Velocity from 'velocity';
import Notify from 'notify';
import TextField from 'textfield';
import SelField from 'selectfield';
import Button from 'button';
import * as waves from 'waves';
import * as tt from 'tooltip';
import Switch from 'switch';
import { storage, STORAGE_MODE as mode } from 'storage';
import * as ss from 'stylesheet';
import * as conf from 'config';
import * as ver from 'version';
import * as watch from 'watch';
import th from 'theme';
let cur_custom;
/**
* Entry:
* - storage get data form chrome storage
* - waves.Render()
* - tooltip.Render()
*/
storage.Read( () => {
console.log( "simpread storage get success!", storage.focus, storage.read );
cur_custom = storage.read.custom;
navRender();
propertyRender();
setPreviewStyle();
tt.Render( "body" );
waves.Render({ root: "body" });
$( "body" ).velocity({ opacity: 1 }, { duration: 1000, complete: ()=> {
$( "body" ).removeAttr( "style" );
}});
});
/**
* navigation Render
*/
function navRender() {
const navClick = () => {
location.href = location.origin + "/options/options.html#labs";
};
const button = navClick() } />;
ReactDOM.render( button, $( ".header .nav" )[0] );
}
/**
* Set preview style
*/
function setPreviewStyle() {
th.Change( storage.read.theme );
ss.FontFamily( storage.read.fontfamily );
ss.FontSize( storage.read.fontsize );
ss.Layout( storage.read.layout );
ss.Preview( storage.read.custom );
}
/**
* Property Render
*/
function propertyRender() {
const getThemes = ( names, values ) => {
const arr = [];
return names.map( ( name, idx ) => {
return { value: values[idx], name : name }
});
},
changeTheme = ( value, name ) => {
storage.read.theme = th.names[conf.readLabels.indexOf( name )];
th.Change( storage.read.theme );
},
change = ( type, props, value ) => {
typeof value == "string" && ( value = value.trim());
if ( type == "global" ) {
props == "Layout" && ( value = `${ 100 - value }%` );
ss[props]( value );
storage.read[props.toLowerCase()] = value;
} else if ( props ) {
cur_custom[type][props] = value;
props == "textShadow" && ( cur_custom[type]["textShadow"] = value ? "0 1px rgba(0,0,0,0.3)" : "" );
ss.Custom( type, cur_custom[type] );
} else {
cur_custom[type] = value;
ss.CSS( type, value );
}
},
click = type => {
if ( type == "save" ) {
save();
} else {
new Notify().Render( "snackbar", "是否初始化 自定义样式 的全部数据？", "同意", () => {
Object.keys( cur_custom ).forEach( v => {
v != "css" ? Object.keys( cur_custom[v] ).forEach( item => {
cur_custom[v][item] = "";
}) : cur_custom[v] = "";
});
save( "clear" );
});
}
},
save = state => {
storage.Write( () => {
watch.SendMessage( "option", true );
state == "clear" ?
new Notify().Render( "snackbar", "清除成功，此页面需刷新后才能生效！", "刷新 ", ()=>{
location.href = location.origin + location.pathname;
})
: new Notify().Render( 0, "保存成功，页面刷新后生效！" );
});
};
const doms =
帮助
如何自定义样式，详细 请看这里 分享你的主题
全局
changeTheme(v,n) }
/>
change( "global", "FontFamily", evt.target.value ) }
/>
change( "global", "Layout", evt.target.value ) }
/>
标题与描述
change( "title", "fontFamily", evt.target.value ) }
/>
change( "title", "fontSize", evt.target.value ) }
/>
change( "title", "color", evt.target.value ) }
/>
change( "desc", "fontFamily", evt.target.value ) }
/>
change( "desc", "fontSize", evt.target.value ) }
/>
change( "desc", "color", evt.target.value ) }
/>
正文
change( "art", "fontFamily", evt.target.value ) }
/>
change( "art", "fontSize", evt.target.value ) }
/>
change( "art", "color", evt.target.value ) }
/>
change( "art", "fontWeight", evt.target.value ) }
/>
change( "art", "wordSpacing", evt.target.value ) }
/>
change( "art", "letterSpacing", evt.target.value ) }
/>
change( "art", "lineHeight", evt.target.value ) }
/>
change( "art", "textIndent", evt.target.value ) }
/>
代码段
change( "pre", "textShadow", s ) }
/>
change( "code", "fontFamily", evt.target.value ) }
/>
change( "code", "fontSize", evt.target.value ) }
/>
自定义 CSS
change( "css", "", evt.target.value ) }
/>
click( "save" ) }
/>
click( "clear" ) }
/>
;
ReactDOM.render( doms, $( ".custom .property" )[0] );
}
================================================
FILE: src/options/notice.html
================================================
消息中心 - 简悦 · 选项页
================================================
FILE: src/options/notice.js
================================================
console.log( "==== simpread options page: notice load ====" )
import '../assets/css/simpread.css';
import '../assets/css/options_page.css';
import '../assets/css/options_notice.css';
import 'notify_css';
import Velocity from 'velocity';
import Button from 'button';
import * as waves from 'waves';
import * as tt from 'tooltip';
import Notice from 'notice';
import {storage} from 'storage';
import * as ss from 'stylesheet';
/**
* Entry
*/
storage.Read( () => {
console.log( "simpread storage get success!", storage );
navRender();
noticeRender();
tt.Render( "body" );
waves.Render({ root: "body" });
$( "body" ).velocity({ opacity: 1 }, { duration: 1000, complete: ()=> {
$( "body" ).removeAttr( "style" );
}});
});
/**
* navigation Render
*/
function navRender() {
const navClick = () => {
location.href = location.origin + "/options/options.html";
};
const button = navClick() } />;
ReactDOM.render( button, $( ".header .nav" )[0] );
}
/**
* notice Render
*/
function noticeRender() {
let is_update = location.search == "?is_update=true" ? true : false;
ReactDOM.render( 选项页 - 简悦 SimpRead
================================================
FILE: src/options/options.js
================================================
console.log( "==== simpread options page load ====" )
import '../assets/css/options_page.css';
import '../assets/css/setting.css';
import 'mduikit_css';
import 'notify_css';
import 'intro_css';
import Velocity from 'velocity';
import Notify from 'notify';
import Tabs from 'tabs';
import * as waves from 'waves';
import * as tt from 'tooltip';
import Button from 'button';
import * as side from 'sidebar';
import { storage, STORAGE_MODE as mode } from 'storage';
import local from 'local';
import * as ss from 'stylesheet';
import * as conf from 'config';
import * as ver from 'version';
import * as watch from 'watch';
import {browser,br}from 'browser';
import * as msg from 'message';
import * as exp from 'export';
import FocusOpt from 'focusopt';
import ReadOpt from 'readopt';
import CommonOpt from 'commonopt';
import LabsOpt from 'labsopt';
import PluginsOpt from 'pluginsopt';
import SitesOpts from 'sitesopt';
import AccountOps from 'accountopt';
import About from 'about';
import Unrdist from 'unrdist';
import * as welc from 'welcome';
import * as guide from 'guide';
import * as fb from 'feedback';
import PureRead from 'puread';
let tabsItemID = 0,
loadState = { first: false, update: false },
website_sync = false; // when first and update checked versions.json
/**
* Add parallax scroll
*/
$( window ).scroll( (event) => {
const $target = $( event.target ),
scroll = $target.scrollTop(),
offset = 0 - scroll;
scroll > 200 && ( $( ".header" ).css({ opacity: 1, visibility: "visible" }) );
scroll <= 200 && ( $( ".header" ).css({ opacity: 0, visibility: "hidden" }) );
$( ".top" ).css( "transform", `translate3d(0px, ${offset}px, 0px)` );
});
/**
* Add event listenr
*/
window.addEventListener( msg.MESSAGE_ACTION.turn_tab, event => {
const idx = event.detail.page;
tabChange( idx );
});
window.addEventListener( msg.MESSAGE_ACTION.welcome_close, event => {
const { first, version } = event.detail;
!first && new Notify().Render({ content: "是否查看新版本的入门指引？", action: "确认", cancel: "取消", callback: type => {
type == "action" && guide.Start( version );
}});
});
/**
* Get tabsItemID from window.location.hash exist
*/
window.location.hash && ( tabsItemID = conf.tabsItem.findIndex( item => window.location.hash.startsWith(item.route)));
tabsItemID == -1 || tabsItemID == 0 ? tabsItemID = 0 : conf.tabsItem.forEach( ( item, index ) => item.active = tabsItemID == index ? true : false );
/**
* Listen runtime message
*/
browser.runtime.onMessage.addListener( function( request, sender, sendResponse ) {
if ( request.type == msg.MESSAGE_ACTION.redirect_uri ) {
const { id, uri } = request.value;
if ([ "pocket", "dropbox", "evernote", "gdrive" ].includes( id )) {
exp[id].Accesstoken( uri );
} else if ( id == "yinxiang" ) {
exp.evernote.Accesstoken( uri );
} else if ( uri.indexOf( "state=yuque_authorize" ) > 0 ) {
exp.yuque.Accesstoken( uri );
} else {
id.startsWith( "http://ksria.com/simpread/auth.html?" ) &&
exp.onenote.Accesstoken( uri );
}
}
});
/**
* Change tab
*
* @param {number} tab index
*/
function tabChange( idx ) {
if ( idx == -1 ) return;
conf.tabsItem.forEach( ( item, index ) => item.active = idx == index ? true : false );
mainRender( idx );
}
/**
* Entry
*/
storage.Read( first => {
console.log( "simpread storage get success!", storage.focus, storage.read, first );
loadingRender();
pRead();
hashnotify();
firstLoad( first );
sidebarRender();
navRender();
vernotify( first );
//welcomeRender( false, "1.1.4" );
mainRender( tabsItemID );
setTimeout(() => noticeRender(), 500 );
helpRender();
feedbackRender();
tt.Render( "body" );
waves.Render({ root: "body" });
});
/**
* Loading Render
*/
function loadingRender() {
setTimeout( () => {
$( '.loadingbar' ).animate({
opacity: 0,
}, () => {
$( '.loadingbar' ).remove();
$( ".bottom" ).removeAttr( "style" );
});
}, 1000 );
}
/**
* Pure Read
*/
function pRead() {
storage.puread = new PureRead( storage.sites );
storage.pr.origins = storage.option.origins;
console.log( "current puread object is ", storage.pr )
}
/**
* Incompatible and update
*/
function updateData() {
ver.Incompatible( storage.version, storage.simpread ) && storage.Write( () => {
console.log( "current simpread is update ", storage.simpread )
new Notify().Render({ type: 2, content: `检测到你曾经修改过第三方适配源，务必刷新后重新导入 ！详细说明 `, state: "holdon" });
watch.SendMessage( "option", true );
}, storage.simpread );
ver.VerifyPlugins( storage.option ) && new Notify().Render({ type: 2, content: `有需要清理的已失效插件，详细请看 失效插件 `, state: "holdon" });
}
/**
* Hash notify
*/
function hashnotify() {
const search = location.search,
prefix = "?simpread_mode=";
if ( search.startsWith( prefix ) ) {
switch ( search.replace( prefix, "" ) ) {
case "reload":
new Notify().Render( 0, "数据导入成功！" );
break;
case "clear":
new Notify().Render( 0, "数据清除成功！" );
break;
case "sync":
new Notify().Render( 0, "数据同步成功！" );
break;
default:
// TO-DO
}
history.pushState( "", "", "/options/options.html" );
}
}
/**
* Version update notify
*
* @param {boolean} is first load
*/
function vernotify( first ) {
const hash = location.hash;
if ( hash.startsWith( "#firstload?ver=" ) || hash.startsWith( "#update?ver=" ) ) {
const prefix = hash.match( /\w+/ )[0],
version = hash.match( /[0-9\.]+/ )[0],
message = ver.Notify( first, prefix, version );
new Notify().Render( "简悦 版本提示", message );
loadState = { first: true };
if ( hash.startsWith( "#update?ver=" )) {
watch.SendMessage( "version", true );
loadState = { first: true, update: true };
welcomeRender( false, version );
updateData();
}
// website_sync = true; when version is 1.1.3 website_list is newer
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.track, { eventCategory: "install", eventAction: hash.startsWith( "#firstload?ver=" ) ? "install" : "update", eventValue: hash.startsWith( "#firstload?ver=" ) ? "install" : "update" }) );
history.pushState( "", "", "/options/options.html" );
} else if ( hash.startsWith( "#update?patch=" ) ) {
const patch = hash.match( /[0-9\.]+/ )[0];
patch == "5005" && welcomeRender( false, patch );
history.pushState( "", "", "/options/options.html" );
}
// silent update
if ( local.Patch( "get" ) ) {
new Notify().Render( "简悦 版本提示", ver.SilentUpdate() );
local.Patch( "remove" );
}
}
/**
* First load
*
* @param {bool} is first load
*/
function firstLoad( first ) {
first && storage.GetRemote( "local", ( result, error ) => {
if ( !error ) {
storage.pr.Addsites( result );
storage.Writesite( storage.pr.sites, () => storage.Statistics( "create" ) );
} else new Notify().Render( 0, "本地更新出现错误，请选择手动点击 同步配置列表" );
});
window.location.hash && window.location.hash.startsWith( "#firstload" ) && first && welcomeRender( true, "all" );
}
/**
* Welcome page render()
*
* exclude: 1.0.4
*
* @param {boolean} true: first load
* @param {string} version
*/
function welcomeRender( first, version ) {
welc.Render( "body", first, version );
}
/**
* Set options page style and tabs.Render()
*
* @param {number} conf.headerColors index
*/
function mainRender( idx ) {
$( ".top" ).css( "background-color", conf.topColors[idx] );
$( ".header" ).css( "background-color", conf.topColors[idx] ).find( ".title" ).text( conf.tabsItem[idx].name );
( idx == 1 || idx == 2 || idx == 3 || idx == 4 || idx == 6 || idx == 7 ) ? $( '.main' ).addClass( "main_labs" ) : $( '.main' ).removeClass( "main_labs" );
tabsRender( conf.headerColors[ idx ] );
}
/**
* Tabs render
*
* @param {string} header background color
*/
function tabsRender( color ) {
const tabs = tabsOnChange( $p, $t, evt ) }>
{ return { ...item }} ) } onLoadMoreClick={ ()=> setTimeout( ()=> tt.Render( "list" ), 200 ) } /> welcomeRender(true,"all")}/> ,
tabsOnChange = ( $prev, $target, event ) => {
const idx = $target.attr( "id" );
tabChange( idx );
},
refresh = () => {
tt.Render( "body" );
},
save = state => {
storage.Write( ()=> {
watch.SendMessage( "option", true );
state && new Notify().Render( 0, "保存成功，页面刷新后生效！" );
});
};
ReactDOM.render( tabs, $( ".tabscontainer" )[0] );
}
/**
* navigation Render
*/
function navRender() {
const navClick = () => {
side.Open();
};
const button = navClick() } />;
ReactDOM.render( button, $( ".header .nav" )[0] );
ReactDOM.render( button, $( ".topnav" )[0] );
}
/**
* sidebar Render
*/
function sidebarRender() {
const sidebarClick = ( $target, items ) => {
const idx = conf.tabsItem.findIndex( item => item.value == items.value );
tabChange( idx );
}, newItems = [
{
name: "帮助中心",
value: "help",
fontIcon: "sidebarClick($t,o) } />;
ReactDOM.render( sidebar, $( ".sidebar" )[0] );
}
/*
* Notice bubbles
*/
function noticeRender() {
sessionStorage.setItem( "is_update", false );
const tmpl = `
`;
storage.Notice( result => {
if ( $.isEmptyObject( result ) ) {
storage.notice.latest = 0;
}
$.get( storage.notice_service.latest + "?" + Math.round(+new Date()), result => {
console.log( "notice latest id ", result )
if ( storage.notice.latest == 0 ) {
$( "body" ).append( tmpl );
sessionStorage.setItem( "is_update", true );
} else if ( storage.notice.latest < result ) {
$( "body" ).append( tmpl );
$( ".bubbles em" ).removeClass( "init" ).text( result - storage.notice.read.length );
sessionStorage.setItem( "is_update", true );
} else if ( storage.notice.latest > storage.notice.read.length ) {
$( "body" ).append( tmpl );
$( ".bubbles em" ).removeClass( "init" ).text( storage.notice.latest - storage.notice.read.length );
} else if ( storage.notice.latest == storage.notice.read.length && storage.option.notice ) {
$( "body" ).append( tmpl );
$( ".bubbles em" ).remove();
}
});
});
$( "body" ).on( "click", ".notice", event => {
location.href = location.origin + "/options/notice.html?is_update=" + sessionStorage.getItem( "is_update" );
});
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.track, { eventCategory: "help", eventAction: "help", eventValue: "notice" }) );
}
/*
* Help bubbles
*/
function helpRender() {
const help_icon = '
${help_icon}
`,
exit = () => {
ReactDOM.unmountComponentAtNode( $( ".guide-bg" )[0] );
$( ".help i" ).html( help_icon ).css({ "animation": ".1s reverse fadein,235ms cubic-bezier(.4,0,.2,1) popdown" });
$( ".guide-bg" ).remove();
};
$( "body" ).append( tmpl );
$( "body" ).on( "click", ".help", event => {
if ( $(".guide-bg").length == 0 ) {
$( "body" ).append( `
` );
ReactDOM.render( exit() } />, $( ".guide-bg" )[0] );
$( ".help i" ).html( close_icon ).css({ "animation": ".1s reverse fadein,235ms cubic-bezier(.4,0,.2,1) popup" });
} else {
exit();
}
});
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.track, { eventCategory: "help", eventAction: "help", eventValue: "help" }) );
}
/*
* Feedback bubbles
*/
function feedbackRender() {
const tmpl = `
`;
$( "body" ).append( tmpl );
$( "body" ).on( "click", ".feedback", event => {
fb.Render( storage.version, storage.user );
setTimeout( () => tt.Render( ".simpread-feedback" ), 200 );
});
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.track, { eventCategory: "help", eventAction: "help", eventValue: "feedback" }) );
}
================================================
FILE: src/options/sitemgr.html
================================================
站点管理器 - 简悦 · 选项页
================================================
FILE: src/options/sitemgr.js
================================================
console.log( "==== simpread options page: sitemanager load ====" )
import '../assets/css/simpread.css';
import '../assets/css/setting.css';
import '../assets/css/options_page.css';
import '../assets/css/options_custom.css';
import '../assets/css/options_sitemgr.css';
import 'notify_css';
import Velocity from 'velocity';
import Notify from 'notify';
import TextField from 'textfield';
import Button from 'button';
import AC from 'ac';
import * as waves from 'waves';
import * as tt from 'tooltip';
import Editor from 'editor';
import Import from 'enhancesite';
import {storage} from 'storage';
import * as ss from 'stylesheet';
import * as watch from 'watch';
import PureRead from 'puread';
let cur_site, org_site, pr,
state = { name: 0, url: 0, title: 0, desc: 0, include: 0, exclude: 0, avatar:{ name: 0, url: 0 }, paging: { prev:0, next: 0} }; // 0: success -1: faield -2: not empty0
/**
* Entry:
* - storage get data form chrome storage
* - waves.Render()
* - tooltip.Render()
*/
storage.Read( () => {
console.log( "simpread storage get success!", storage.sites );
pr = new PureRead( storage.sites );
navRender();
controlbarRender();
tt.Render( "body" );
waves.Render({ root: "body" });
$( "body" ).velocity({ opacity: 1 }, { duration: 1000, complete: ()=> {
$( "body" ).removeAttr( "style" );
}});
console.log( "current puread object is ", pr )
});
// hack code
window.addEventListener( "sitechanged", event => {
const [ url, site, type, info ] = [ event.data.site.url, event.data.site, event.data.site.target, event.data.info ];
org_site = [ url, site ];
siteeditorRender( url, site, type, info );
});
// hack code
function changeSiteinfo( info ) {
const evt = document.createEvent("Event");
evt.data = { info };
evt.initEvent( "siteinfochanged", true, false );
window.dispatchEvent( evt );
}
/**
* navigation Render
*/
function navRender() {
const navClick = () => {
location.href = location.origin + "/options/options.html#sites";
};
const button = navClick() } />;
ReactDOM.render( button, $( ".header .nav" )[0] );
}
/**
* controlbar Render
*/
function controlbarRender() {
const getCursite = ( type, value ) => {
if ( value == "" ) return;
const site = pr.Getsite( type, value );
org_site = [ site[0], site[1] ];
site.length > 0 && siteeditorRender( site[0], site[1], type );
site.length > 0 && changeSiteinfo( site[1].info );
},
add = () => {
const msg = cur_site ? "是否覆盖当前站点并新建立一个？" : "是否建立一个新站？";
new Notify().Render( "snackbar", msg, "新建", () => {
org_site = [ "", "" ];
siteeditorRender( "", { name: "", title: "", desc: "", include: "", exclude: [] }, "local" );
});
},
remove = () => {
new Notify().Render( "snackbar", "是否删除当前站点？", "删除", () => save( "delete" ));
},
remote = ( type ) => {
save( type, "remote" );
},
save = ( type, state ) => {
if ( !cur_site ) {
new Notify().Render( 2, "请选择一个站点源。" );
return;
}
if ( type != "delete" && !verify() ) return;
const key = cur_site.target,
url = cur_site.url,
site= pr.Cleansite({ ...cur_site });
let flag = -1;
if ( site.info && state != "remote" && cur_site.target == "person" &&( type == "update" || type == "delete" )) {
if ( site.info.id.substr(0,8) == storage.user.uid.substr(0,8) ) {
setTimeout( ()=>new Notify().Render( 2, " 当前站有远程数据，请保持同步更新。" ), 500 );
}
}
if ( type == "update" && state == "remote" ) {
site.info = { ...storage.remote.info };
if ( cur_site.target == "global" ) {
pr.Updatesite( "person", org_site[0], [ url, pr.Cleansite(site) ] );
} else if ( cur_site.target == "local" || cur_site.target == "custom" ) {
pr.Deletesite( cur_site.target, org_site[0], result => {
pr.Updatesite( "person", org_site[0], [ url, pr.Cleansite(site) ] );
});
}
org_site = [ url, site ];
flag = 0;
setTimeout( () => new Notify().Render( 2, "当前站提交时会自动增加到「站点集市适配源」！" ), 500 );
} else if ( type == "delete" && state == "remote" ) {
pr.Deletesite( "person", org_site[0], result => {
result != -1 ? flag = 1 : new Notify().Render( "当前站点已删除，请勿重复提交。" );
});
} else if ( type == "update" ) {
pr.Updatesite( key, org_site[0], [ url, pr.Cleansite(site) ] );
org_site = [ url, site ];
flag = 0;
/*
} else if ( type == "safe" ) {
delete site.info;
pr.Updatesite( key, org_site[0], [ url, pr.Cleansite(site) ] );
org_site = [ url, site ];
flag = 0;
}
*/
} else {
pr.Deletesite( key, org_site[0], result => {
result != -1 ? flag = 1 : new Notify().Render( "当前站点已删除，请勿重复提交。" );
});
}
flag != -1 && storage.Writesite( pr.sites, ()=> {
console.log( "current site is ", cur_site, org_site )
watch.SendMessage( "site", true );
new Notify().Render( `当前站点${ flag == 0 ? "更新" : "删除" }成功，请刷新本页。` );
});
};
const doms = <div>
<group className="lab">
<group><AC placeholder={ `官方适配源（${storage.sites.global.length} 条）`} items={ formatsites( storage.sites.global )} onChange={ v=>getCursite( "global", v) } /></group>
<group><AC placeholder={ `站点集市适配源（${storage.sites.person.length} 条）` } items={ formatsites( storage.sites.person )} onChange={ v=>getCursite( "person", v) } /></group>
<group><AC placeholder={ `第三方适配源（${storage.sites.custom.length} 条）` } items={ formatsites( storage.sites.custom )} onChange={ v=>getCursite( "custom", v) } /></group>
<group><AC placeholder={ `自定义适配源（${storage.sites.local.length} 条）` } items={ formatsites( storage.sites.local )} onChange={ v=>getCursite( "local", v) } /></group>
</group>
<group className="lab">
<group>
<Button type="raised" text="新建一个站"
style={{ "margin": "0" }} width="100%"
color="#fff" backgroundColor="#4CAF50"
waves="md-waves-effect md-waves-button"
onClick={ ()=>add() } />
</group>
<group>
<Button type="raised" text="保存当前站"
style={{ "margin": "0" }} width="100%"
color="#fff" backgroundColor="#3F51B5"
waves="md-waves-effect md-waves-button"
onClick={ ()=>save( "update" ) } />
</group>
<group>
<Button type="raised" text="删除当前站"
style={{ "margin": "0" }} width="100%"
color="#fff" backgroundColor="#FF5252"
waves="md-waves-effect md-waves-button"
onClick={ ()=>remove() } />
</group>
</group>
<group className="lab" style={{display:"none"}}>
<div className="sites"></div>
</group>
<group className="lab">
<Import uid={ storage.user.uid } onUpdate={ t=>remote(t)} />
</group>
</div>;
ReactDOM.render( doms, $( ".custom .property" )[0] );
}
/**
* siteeditor Render
*/
function siteeditorRender( url, site, type, info ) {
$( "sr-opt-read" ).length > 0 &&
$( ".custom .preview" ).empty();
cur_site = pr.Safesite( site, type, url );
// set remote site( include info )
//storage.remote = JSON.parse(JSON.stringify( cur_site ));
storage.remote = cur_site;
info && ( storage.remote.info = info );
changeSiteinfo( storage.remote.info );
const doms = <Editor site={ cur_site } state={ state } />;
ReactDOM.render( doms, $( ".custom .preview" )[0] );
console.log( "current site is ", cur_site )
}
/**
* Format storage sites
*
* @param {array} sites
*/
function formatsites( sites ) {
return sites.map( item => {
return { value: item[0], name: item[0] }
});
}
/**
* Verify site editor site
*
* @return {boolean}
*/
function verify() {
let flag = false;
if ( [ "url", "name", "title", "include" ].findIndex( key => cur_site[key] == "" ) != -1 ) {
new Notify().Render( 3, "【标识、域名、标题、高亮】不能为空。" );
}
else if ( Object.values( state ).findIndex( key => typeof key == "number" && key != 0 ) != -1 ||
( state.avatar.name != 0 || state.avatar.url != 0 ) ||
( state.paging.prev != 0 || state.paging.next != 0 )
) {
new Notify().Render( 3, "请正确填写【标识、域名、标题、高亮】后再提交。" );
} else if (( cur_site.avatar[0].name != "" && cur_site.avatar[1].url == "" ) || ( cur_site.avatar[0].name == "" && cur_site.avatar[1].url != "" )) {
new Notify().Render( 3, "【头像的名称与地址】必须同时设定。" );
} else if (( cur_site.paging[0].prev != "" && cur_site.paging[1].next == "" ) || ( cur_site.paging[0].prev == "" && cur_site.paging[1].next != "" )) {
new Notify().Render( 3, "【前一页与后一页】必须同时设定。" );
} else if ( cur_site.name.startsWith( "tempread::" ) ) {
new Notify().Render( 2, "标识不能包含 tempread:: 请删除。" );
} else if ( cur_site.include.trim() == "" ) {
new Notify().Render( 2, "高亮区域不能为空。" );
} else {
flag = true;
}
return flag;
}
================================================
FILE: src/read/controlbar.jsx
================================================
console.log( "=== simpread read controlbar load ===" )
import * as ss from 'stylesheet';
import {browser,br}from 'browser';
import * as msg from 'message';
import th from 'theme';
import * as conf from 'config';
import * as output from 'output';
import * as watch from 'watch';
import * as kbd from 'keyboard';
import { storage } from 'storage';
import * as run from 'runtime';
import ReadOpt from 'readopt';
import Actionbar from 'actionbar';
import Pluginbar from 'pluginbar';
import Sitebar from 'sitebar';
import Fab from 'fab';
import Fap from 'fap'
import * as ttips from 'tooltip';
let notify, readItems;
const tooltip_options = {
target : "name",
position : "bottom",
delay : 50,
};
/**
* Read controlbar
*
* @class
*/
export default class ReadCtlbar extends React.Component {
static propTypes = {
onAction: React.PropTypes.func,
}
verify( type ) {
if ( ss.VerifyCustom( type, storage.current.custom ) ) {
!notify && ( notify = new Notify().Render({ state: "holdon", content: '由于已使用自定义样式，设定 <b style="color: #fff;">有可能无效</b>，详细说明 <a href="http://ksria.com/simpread/docs/#/自定义样式" target="_blank">请看这里</a>', callback:()=>notify=undefined }));
}
}
componentDidMount() {
browser.runtime.onMessage.addListener( ( request, sender, sendResponse ) => {
if ( request.type == msg.MESSAGE_ACTION.export ) {
console.log( "controlbar runtime Listener", request );
new Notify().Render( "已重新授权成功！" );
br.isFirefox() ? new Notify().Render( "请刷新本页才能生效。" ) : this.onAction( undefined, request.value.type );
}
});
kbd.Listen( combo => {
this.onAction( undefined, combo )
});
run.Controlbar( undefined, event => {
this.onAction( undefined, event.detail.type );
});
}
onAction( event, type ) {
console.log( "fab type is =", type )
this.verify( type.split( "_" )[0] );
run.Event( "export", type );
const action = ( event, type ) => {
this.props.multi &&
[ "markdown", "dropbox", "yinxiang","evernote", "onenote", "gdrive" ].includes( type ) &&
new Notify().Render( "当前为论坛类页面，不建议使用导出服务，有可能出现未知错误。" );
switch ( true ) {
case [ "exit", "setting", "siteeditor", "remove", "highlight" ].includes( type ):
this.props.onAction( type );
break;
case type.indexOf( "_" ) > 0 && ( type.startsWith( "fontfamily" ) || type.startsWith( "fontsize" ) || type.startsWith( "layout" )):
const [ key, value ] = [ type.split( "_" )[0], type.split( "_" )[1] ];
Object.keys( ss ).forEach( (name)=>name.toLowerCase() == key && ss[name]( value ));
this.props.onAction && this.props.onAction( key, value );
break;
case type.indexOf( "_" ) > 0 && type.startsWith( "theme" ):
let i = th.names.indexOf( th.theme );
i = type.endsWith( "prev" ) ? --i : ++i;
i >= th.names.length && ( i = 0 );
i < 0 && ( i = th.names.length - 1 );
th.Change( th.names[i] );
this.props.onAction && this.props.onAction( type.split( "_" )[0], th.theme );
break;
case type.startsWith( "dyslexia" ):
output.Action( type, $( "sr-rd-title" ).text(), "", $( "sr-rd-content" ).text() );
break;
case type == "tempread":
if ( storage.pr.state != "temp" ) {
new Notify().Render( "此功能只限临时阅读模式时使用。" );
return;
}
// hack code
const news = { ...storage.pr.current.site };
storage.pr.dom && ( news.include = storage.pr.dom.outerHTML.replace( storage.pr.dom.innerHTML, "" ).replace( /<\/\S+>$/i, "" ));
delete news.html;
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.temp_site, { url: location.href, site: news, uid: storage.user.uid, type: "temp" }));
break;
case type.startsWith( "webdav_" ) :
const [ title, desc, content ] = [ $( "sr-rd-title" ).text().trim(), $( "sr-rd-desc" ).text().trim(), $( "sr-rd-content" ).html().trim() ];
output.Action( type, title, desc, content );
break;
default:
if ( type.indexOf( "_" ) > 0 && type.startsWith( "share" ) ||
[ "fullscreen", "save", "markdown", "offlinemarkdown", "png", "epub", "pdf", "kindle", "temp", "bear", "ulysses", "html", "offlinehtml", "snapshot", "dropbox", "pocket", "instapaper", "linnk", "yinxiang", "evernote", "onenote", "gdrive", "jianguo", "yuque", "notion", "youdao", "weizhi" ].includes( type )) {
const [ title, desc, content ] = [ $( "sr-rd-title" ).text().trim(), $( "sr-rd-desc" ).text().trim(), $( "sr-rd-content" ).html().trim() ];
output.Action( type, title, desc, content );
}
}
};
type != "exit" ? watch.Verify( ( state, result ) => {
if ( state ) {
console.log( "watch.Lock()", result );
new Notify().Render( "配置文件已更新，刷新当前页面后才能生效。", "刷新", ()=>location.href = location.href );
} else action( event, type );
}) : action( event, type );
}
onChange( type, custom ) {
const [ key, value ] = [ type.split( "_" )[0], type.split( "_" )[1] ];
run.Event( "read_ui", { key, value, custom });
this.props.onAction && this.props.onAction( key, value, custom );
this.verify( key );
}
onPop( type ) {
type == "open" ? ttips.Render( ".simpread-read-root", "panel" ) : ttips.Exit( ".simpread-read-root", "panel" );
}
componentWillMount() {
readItems = $.extend( true, {}, conf.readItems );
try {
if ( storage.current.fap ) {
delete readItems.exit;
delete readItems.option.items.setting;
delete readItems.fontfamily;
delete readItems.fontsize;
delete readItems.layout;
delete readItems.theme;
} else {
delete readItems.trigger;
}
if ( this.props.type.startsWith( "txtread::" ) && this.props.type.endsWith( "::local" )) {
delete readItems.download;
delete readItems.readlater;
delete readItems.send;
delete readItems.share;
delete readItems.option;
}
if ( this.props.type.startsWith( "metaread::" ) || this.props.type.startsWith( "txtread::" ) ) {
delete readItems.option;
}
if ( !/macintosh|mac os x/i.test(navigator.userAgent) ) {
delete readItems.send.items.bear;
delete readItems.send.items.ulysses;
}
readItems.send && storage.Safe( () => {
storage.secret.webdav.forEach( item => {
item = JSON.parse( item );
readItems.send.items[ "webdav_" + item.name ] = {
name: item.name,
icon: ss.IconPath("webdav_icon"),
"color": "#00BCD4",
};
});
})
// Add test source
storage.current.fap && storage.Plugins( () => {
!$.isEmptyObject( storage.plugins ) && storage.option.plugins.forEach( id => {
const plugin = storage.plugins[id];
// Add test source
if ( plugin.enable != false && ( plugin.trigger == true || plugin.trigger == "true" )) {
//if ( plugin.id == "Y7JxbP7B4H" ) {
readItems.trigger.items["plugin_" + plugin.id] = {
"name" : plugin.name,
"fontIcon" : plugin.icon.type,
"color" : plugin.icon.bgColor,
};
}
});
if ( readItems.trigger && $.isEmptyObject( readItems.trigger.items )) {
delete readItems.trigger;
}
});
} catch ( err ) {
// TO-DO
}
// hack code
!/chrome/ig.test( navigator.userAgent ) && ( delete readItems.dyslexia );
}
constructor( props ) {
super( props );
}
render() {
const Controlbar = storage.current.fap ?
<Fap items={ [ "样式", "动作", "站点", "插件" ] } autoHide={ false }
waves="md-waves-effect md-waves-circle md-waves-float"
onOpen={ ()=> this.onPop( "open" ) } onClose={ ()=> this.onPop( "close" ) }
onAction={ (event, type)=>this.onAction(event, type ) }>
<ReadOpt option={ storage.current } onChange={ (t,c)=>this.onChange(t,c)}/>
<Actionbar items={ readItems } onAction={ (type)=>this.onAction(undefined, type ) }/>
<Sitebar />
<Pluginbar />
</Fap>
:
<Fab items={ readItems } tooltip={ tooltip_options } waves="md-waves-effect md-waves-circle md-waves-float" onAction={ (event, type)=>this.onAction(event, type ) } />
return (
<sr-rd-crlbar class={ this.props.show ? "" : "controlbar" } style={{ "zIndex": "2" }}>
{ Controlbar }
</sr-rd-crlbar>
)
}
}
================================================
FILE: src/read/progressbar.jsx
================================================
console.log( "==== simpread read component: ProcessBar ====" )
export default class ProcessBar extends React.Component {
static defaultProps = {
show : true,
offset: document.documentElement.scrollTop / ( document.documentElement.scrollHeight - document.documentElement.clientHeight ) || 0
}
state = {
progress: this.props.offset
}
componentDidMount() {
setTimeout( ()=>{
$( document ).on( "scroll", ()=>this.scrollEventHandle() );
}, 1000 );
}
componentWillUnmount() {
$( document ).off( "scroll", this.scrollEventHandle() );
}
scrollEventHandle() {
const offset = document.documentElement.scrollTop / ( document.documentElement.scrollHeight - document.documentElement.clientHeight );
this.setState({ progress: offset });
}
render() {
const progress = this.state.progress * 100;
return (
this.props.show && <read-process style={{ "width": `${progress}%` }}></read-process>
)
}
}
================================================
FILE: src/read/read.jsx
================================================
console.log( "=== simpread read load ===" )
import ProgressBar from 'schedule';
import * as spec from 'special';
import ReadCtlbar from 'readctlbar';
import * as toc from 'toc';
import * as setting from 'setting';
import * as se from 'siteeditor';
import * as kbd from 'keyboard';
import * as fb from 'feedback';
import { storage, Clone } from 'storage';
import th from 'theme';
import * as ss from 'stylesheet';
import {browser} from 'browser';
import * as msg from 'message';
import * as highlight from 'highlight';
import * as run from 'runtime';
import * as tips from 'tips';
import * as tooltip from 'tooltip';
import * as waves from 'waves';
const rdcls = "simpread-read-root",
bgtmpl = `<div class="${rdcls}"></div>`,
rdclsjq = "." + rdcls,
$root = $( "html" ),
theme = "simpread-theme-root";
// load count,.0: call Readability. 1: call highlight 2: all failed
let load_count = 0;
const Footer = () => {
const good_icon = '<svg t="1556354786433" viewBox="0 0 1024 1024" version="1.1" width="33" height="33"><defs><style type="text/css"></style></defs><path d="M859.8 191.2c-80.8-84.2-212-84.2-292.8 0L512 248.2l-55-57.2c-81-84.2-212-84.2-292.8 0-91 94.6-91 248.2 0 342.8L512 896l347.8-362C950.8 439.4 950.8 285.8 859.8 191.2z" p-id="6225" fill="#8C8C8C"></path></svg>',
bad_icon = '<svg t="1556354650943" viewBox="0 0 1024 1024" version="1.1" p-id="5899" width="33" height="33"><defs><style type="text/css"></style></defs><path d="M458 576c2-36 0-76 16-110 4-10 2-20 2-30-8-42-28-80-30-120 0-2.78 2.008-9.542 2.01-12.314-6.432 4.468-15.214 8.048-22.01 10.314-40 12-35.02 5.146-69.02 27.146l-23.866 14.456c32.686-35.878 77.056-49.562 113.05-77.428 0.388-30.876 1.716-61.354 6.274-91.68C371.22 106.992 243.57 108.536 164.246 191.14c-90.994 94.688-90.994 248.202 0 342.89l305.698 318.192c-0.17-21.312-0.886-42.352-3.944-62.222C454 718 458 648 458 576z" p-id="5900" fill="#8C8C8C"></path><path d="M644 602c-22-52-66-88-126-100-1.7 0-3.758-1.086-5.872-2.638-0.046 0.214-0.082 0.426-0.128 0.638-22 96-46 188-42 284 0 24.454 7.966 50.234 7.666 76.262L512 896l208-216.5C690.306 658.542 660.856 637.242 644 602z" p-id="5901" fill="#8C8C8C"></path><path d="M859.748 191.14c-80.852-84.188-211.978-84.188-292.816 0L528 230.806c0.15 26.35 0.426 52.404-6 77.194-4 20-38 38-32 62 6.006 26.426 16.332 51.41 21.464 77.118C542.028 464.168 569.542 485.792 594 512c45.602 53.532 75.494 114.918 130.566 162.742l135.182-140.71C950.75 439.342 950.75 285.828 859.748 191.14z" p-id="5902" fill="#8C8C8C"></path></svg>',
onClick = ( rate = false ) => {
fb.Render( storage.version, storage.user, rate );
setTimeout( () => tooltip.Render( ".simpread-feedback" ), 200 );
};
return (
<sr-rd-footer>
<sr-rd-footer-group>
<sr-rd-footer-line></sr-rd-footer-line>
<sr-rd-footer-text>全文完</sr-rd-footer-text>
<sr-rd-footer-line></sr-rd-footer-line>
</sr-rd-footer-group>
<sr-rd-footer-copywrite>
<div>本文由 <a href="http://ksria.com/simpread" target="_blank">简悦 SimpRead</a> 优化，用以提升阅读体验</div>
<div className="second">使用了 <abbr>全新的简悦词法分析引擎<sup>beta</sup></abbr>，<a target="_blank" href="http://ksria.com/simpread/docs/#/词法分析引擎">点击查看</a>详细说明</div>
<div className="third">
<a className="sr-icon good sr-top" aria-label="觉得不错？请帮忙投票 😄" data-balloon-pos="up" target="_blank" onClick={ ()=>onClick( true ) } dangerouslySetInnerHTML={{__html: good_icon }} ></a>
<a className="sr-icon bad sr-top" aria-label="有待改进，请帮忙吐槽 😄" data-balloon-pos="up" target="_blank" onClick={ ()=>onClick() } dangerouslySetInnerHTML={{__html: bad_icon }} ></a>
</div>
</sr-rd-footer-copywrite>
</sr-rd-footer>
)
}
class Read extends React.Component {
verifyContent() {
if ( $("sr-rd-content").text().length < 100 ) {
if ( load_count == 0 ) {
new Notify().Render({ content: "检测到正文获取异常，是否重新获取？", action: "是的", cancel: "取消", callback: type => {
if ( type == "cancel" ) return;
load_count++;
this.componentWillUnmount();
storage.pr.Readability();
Render();
}});
} else if ( load_count == 1 ) {
this.componentWillUnmount();
new Notify().Render({ content: '获取正文失败，是否使用 <a target="_blank" href="http://ksria.com/simpread/docs/#/手动框选">手动框选</a> 高亮的方式获取？', action: "是的", cancel: "取消", callback: type => {
if ( type == "cancel" ) return;
setTimeout( () => {
Highlight().done( dom => {
const rerender = element => {
load_count++;
storage.pr.TempMode( "read", element );
Render();
};
storage.current.highlight ?
highlight.Control( dom ).done( newDom => {
rerender( newDom );
}) : rerender( dom );
});
}, 200 );
}});
} else if ( load_count >= 2 ) {
this.componentWillUnmount();
new Notify().Render({ content: "高亮无法仍无法适配此页面，是否提交？", action: "是的", cancel: "取消", callback: type => {
if ( type == "cancel" ) return;
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.save_site, { url: location.href, site: {}, uid: storage.user.uid, type: "failed" }));
}});
load_count = 0;
}
return false;
} else {
return true;
}
}
componentWillMount() {
$( "body" ).addClass( "simpread-hidden" );
th.Change( this.props.read.theme );
if ( storage.current.fap ) {
$( "head" ).append( '<link rel="stylesheet" class="simpread-fs-style" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/solid.min.css" />' );
$( "head" ).append( '<link rel="stylesheet" class="simpread-fs-style" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/brands.min.css" />' );
$( "head" ).append( '<link rel="stylesheet" class="simpread-fs-style" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/fontawesome.min.css" />' );
}
}
async componentDidMount() {
if ( load_count > 0 && !this.verifyContent() ) {
return;
}
$root
.addClass( "simpread-font" )
.addClass( theme )
.find( rdclsjq )
.addClass( theme )
.sreffect( { opacity: 1 }, { delay: 100 })
.addClass( "simpread-read-root-show" );
this.props.read.fontfamily && ss.FontFamily( this.props.read.fontfamily );
this.props.read.fontsize && ss.FontSize( this.props.read.fontsize );
this.props.read.layout && ss.Layout( this.props.read.layout );
this.props.read.site.css && this.props.read.site.css.length > 0
&& ss.SiteCSS( this.props.read.site.css );
ss.Preview( this.props.read.custom );
storage.pr.state == "txt" && !location.href.endsWith( ".md" ) && $( "sr-rd-content" ).css({ "word-wrap": "break-word", "white-space": "pre-wrap" });
$( "sr-rd-desc" ).text().trim() == "" && $( "sr-rd-desc" ).addClass( "simpread-hidden" );
excludes( $("sr-rd-content"), this.props.wrapper.exclude );
storage.pr.Beautify( $( "sr-rd-content" ) );
storage.pr.Format( rdcls );
kbd.Render( $( "sr-rd-content" ));
tooltip.Render( rdclsjq );
waves.Render({ root: rdclsjq });
storage.Statistics( "read" );
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.track, { eventCategory: "mode", eventAction: "readmode", eventValue: "readmode" }) );
!this.props.wrapper.avatar && this.props.read.toc
&& toc.Render( "sr-read", $( "sr-rd-content" ), this.props.read.theme, this.props.read.toc_hide );
this.props.wrapper.avatar && $( ".simpread-read-root" ).addClass( "simpread-multi-root" );
loadPlugins( "read_complete" );
setTimeout( ()=>{
this.verifyContent();
tips.Render( storage.option.plugins );
tips.Help( storage.statistics );
}, 50 );
}
componentWillUnmount() {
run.Event( "read_end" );
loadPlugins( "read_end" );
ss.FontSize( "" );
$root.removeClass( theme )
.removeClass( "simpread-font" );
$root.attr("style") && $root.attr( "style", $root.attr("style").replace( "font-size: 62.5%!important", "" ));
ss.SiteCSS();
$( "body" ).removeClass( "simpread-hidden" );
$( rdclsjq ).remove();
tooltip.Exit( rdclsjq );
}
/**
* Controlbar action event
* @param {string} type, include: exit, setting, save, scroll, option
* @param {string} value
* @param {string} custom value, storage.current.custom.art.xxx
*/
onAction( type, value, custom ) {
switch ( type ) {
case "exit":
this.exit();
break;
case "setting":
setting.Render( ()=>setTimeout( ()=>se.Render(), 500 ));
break;
case "siteeditor":
$( "panel-bg" ).length > 0 && $( "panel-bg" )[0].click();
setTimeout( ()=>se.Render(), 500 );
break;
case "fontfamily":
case "fontsize":
case "layout":
case "theme":
case "shortcuts":
case "custom":
type != "custom" ? storage.current[type]=value : storage.current.custom.art[custom]=value;
storage.Setcur( storage.current.mode );
break;
case "remove":
$( "panel-bg" ).length > 0 && $( "panel-bg" ).trigger( "click" );
new Notify().Render({ content: "移动鼠标选择不想显示的内容，可多次选择，使用 ESC 退出。", delay: 5000 });
highlight.Multi( dom => {
const path = storage.pr.Utils().dom2Xpath( dom ),
site = { ...storage.pr.current.site };
site.exclude.push( `[[\`${path}\`]]` );
if ( storage.pr.state == "temp" ) {
const include = storage.pr.Utils().dom2Xpath( storage.pr.dom );
site.include = `[[\`${include}\`]]`;
site.name = site.name.replace( "tempread::", "" );
}
storage.pr.Updatesite( 'local', storage.current.url, [ site.url, storage.pr.Cleansite(site) ]);
storage.Writesite( storage.pr.sites, () => {
storage.pr.current.site.name = site.name;
storage.pr.current.site.include = site.include;
});
$(dom).remove();
});
break;
case "highlight":
new Notify().Render( `移动鼠标选择高亮区域，以便生成阅读模式，此模式将会在页面刷新后失效，详细说明请看 <a href="http://ksria.com/simpread/docs/#/重新高亮" target="_blank">重新高亮</a>` );
this.exit();
Highlight().done( dom => {
const rerender = element => {
storage.pr.TempMode( "read", element );
Render();
};
storage.current.highlight ?
highlight.Control( dom ).done( newDom => {
rerender( newDom );
}) : rerender( dom );
});
break;
/*
case "scroll":
$( "sr-read" ).velocity( "scroll", { offset: $( "body" ).scrollTop() + value });
break;
*/
}
}
// exit read mode
exit() {
Exit();
}
render() {
const Article = this.props.wrapper.avatar && this.props.wrapper.avatar.length > 0 ?
<spec.Multiple include={ this.props.wrapper.include } avatar={ this.props.wrapper.avatar } /> :
<sr-rd-content dangerouslySetInnerHTML={{__html: this.props.wrapper.include }} ></sr-rd-content>;
const Page = this.props.wrapper.paging && this.props.wrapper.paging.length > 0 &&
<spec.Paging paging={ this.props.wrapper.paging } />;
return (
<sr-read>
<ProgressBar show={ this.props.read.progress } />
<sr-rd-title>{ this.props.wrapper.title }</sr-rd-title>
<sr-rd-desc>{ this.props.wrapper.desc }</sr-rd-desc>
{ Article }
{ Page }
<Footer />
<ReadCtlbar show={ this.props.read.controlbar }
multi={ this.props.wrapper.avatar ? true : false }
type={ this.props.wrapper.name }
site={{ title: this.props.wrapper.title, url: window.location.href }}
custom={ this.props.read.custom } onAction={ (t,v,c)=>this.onAction( t,v,c ) }/>
</sr-read>
)
}
}
/**
* Render entry
*
* @param {boolean} true: call mathJaxMode(); false: @see mathJaxMode
*/
function Render( callMathjax = true ) {
loadPlugins( "read_start" );
callMathjax && mathJaxMode();
storage.pr.ReadMode();
if ( typeof storage.pr.html.include == "string" && storage.pr.html.include.startsWith( "<sr-rd-content-error>" ) ) {
console.warn( '=== Adapter failed call Readability View ===' )
storage.pr.Readability();
storage.pr.ReadMode();
} else console.warn( '=== Normal Read mode ===' )
console.warn( "=== Current PuRead object is ===", storage.pr )
ReactDOM.render( <Read read={ storage.current } wrapper={ storage.pr.html } />, getReadRoot() );
}
/**
* High light current page to read mode( read only )
*/
function Highlight() {
const dtd = $.Deferred();
highlight.Start().done( dom => {
dtd.resolve( dom );
});
return dtd;
}
/**
* Verify simpread-read-root tag exit
*
* @param {boolean}
* @return {boolean}
*/
function Exist( action ) {
if ( $root.find( rdclsjq ).length > 0 ) {
action && setting.Render( ()=>setTimeout( ()=>se.Render(), 500 ));
return true;
} else {
return false;
}
}
/**
* Exit
*/
function Exit() {
$( rdclsjq ).sreffect( { opacity: 0 }, {
delay: 100,
complete: ( elements ) => {
ReactDOM.unmountComponentAtNode( getReadRoot() );
}
}).addClass( "simpread-read-root-hide" );
}
/**
* MathJax Mode
*/
function mathJaxMode() {
if ( storage.pr.isMathJax() && storage.pr.state == "temp" ) {
console.warn( '=== MathJax Mode ===' )
const dom = storage.pr.MathJaxMode();
console.log( 'current get dom is ', dom )
if ( typeof dom == "undefined" ) {
new Notify().Render( "<a href='http://ksria.com/simpread/docs/#/词法分析引擎?id=智能感知' target='_blank' >智能感知</a> 失败，请移动鼠标框选。" );
Highlight().done( dom => {
const rerender = element => {
storage.pr.TempMode( "read", element );
Render( false );
};
storage.current.highlight ?
highlight.Control( dom ).done( newDom => {
rerender( newDom );
}) : rerender( dom );
});
} else if ( typeof dom == "string" ) {
const html = storage.pr.GetDom( dom, "html" );
storage.pr.Newsite( "read", html );
} else {
storage.pr.TempMode( "read", dom[0] );
}
}
}
/**
* Get read root
*
* @return {jquery} read root jquery object
*/
function getReadRoot() {
if ( $root.find( rdclsjq ).length == 0 ) {
$root.append( bgtmpl );
}
return $( rdclsjq )[0];
}
/**
* Set exclude style
*
* @param {jquery} jquery object
* @param {array} hidden html
*/
function excludes( $target, exclude ) {
const tags = storage.pr.Exclude( $target );
$target.find( tags ).remove();
}
/**
* Load plugins from storage and exec
*
* @param {string} state include: plugin.run_at
*/
function loadPlugins( state ) {
storage.Plugins( () => {
storage.option.plugins.forEach( id => {
storage.plugins[id] && run.Exec( state, storage.current.site.name, storage.plugins[id] );
});
});
}
export { Render, Exist, Exit, Highlight };
================================================
FILE: src/read/special.jsx
================================================
console.log( "=== simpread read: special load ===" )
import Button from 'button';
import * as kbd from 'keyboard';
const default_src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAOVBMVEX///+AgICfn5+Hh4f39/fPz8+vr6+QkJDg4ODv7+/n5+fAwMCoqKiYmJjHx8fX19e4uLjQ0NDIyMhhw/XSAAACBUlEQVRYw6VX2ZKEIAw0ATnk8Pj/j90q3V13SSOxpl+mHEknaUKCUw9xTZnpBLu02ukV4lGoAR9Rbb4Xgii7ztxTF35/ay4p1kdzm2mI/KDn4kkB0w3iICVmbO9IDae31zMkoo8YZkJgl5IrGh1WpHaN34VdDUks//YfrNjsn/cO8NtnAedhivl+G6D9kCH8Buhl/JptLv0dLMIcuqnTBY8TGCdhelvohfGjI3mEEybYZKGdZTKokcfNipCXpg4IysgoMAwDl5KegFGwy2cEYZpfEBQkAjpnehFpQ2HRCwKeDKHdhQiQgGBcEE5NgEWwhgAm/eSo2BchmAXMPUMwBSaEYlE/0RPIGWxLb8BkwiiLam6n/kgzx+3+IOoSBGSbr5+0nN43cz0SnE9Wpr9O0/qz2psf0jCtTrqSR8zFK2lu1D5FjZtpnLX1wfGu/Pxn3e8QillUXGxa3A07J8fimjqb9tixrD8JXJJ8UQp7NcN6n7LrScvQTLAqxtEItTm0/r5wKOH/j9AgutAIc5MzE4VXBLa56UUjOsAwB2+bhuteprCIf9wr+yp7tl5H7C0TzW/tZQwaJQ+i2mX2w92M/BBpMEMhkiGzPtOXhyBCGaYZPFHBH6l2z90cRcfh3QJr8lWjsq1nn2Xe0hHCEvaUmL/btRaxyo/vFKdXiCFlPmk8u9rvdl/WWxJO0oeE7gAAAABJRU5ErkJggg==";
export class Multiple extends React.Component {
static defaultProps = {
include: React.PropTypes.any,
avatar : React.PropTypes.array,
}
render() {
const contents = [],
names = this.props.avatar[ 0 ].name,
urls = this.props.avatar[ 1 ].url;
this.props.include.each( ( idx, item ) => {
const art = {};
art.name = $( names[idx] ).text();
art.url = $( urls[idx] ).attr( "src" );
art.content = $( item ).html();
!art.url && ( art.url = default_src );
contents.push( art );
});
const child = contents.map( item => {
return <sr-rd-mult>
<sr-rd-mult-avatar>
<img src={ item.url } />
<span>{ item.name }</span>
</sr-rd-mult-avatar>
<sr-rd-mult-content dangerouslySetInnerHTML={{__html: item.content }} ></sr-rd-mult-content>
</sr-rd-mult>
});
return (
<sr-rd-content>
{ child }
</sr-rd-content>
)
}
}
export class Paging extends React.Component {
static defaultProps = {
paging: React.PropTypes.array,
}
state = {
prev : this.props.paging[0].prev,
next : this.props.paging[1].next,
}
onClick( state ) {
location.href = this.state[state];
}
componentDidMount() {
kbd.Bind( [ "left", "right" ], ( event, combo ) => {
this.onClick( combo == "left" ? "prev" : "next" );
});
}
render() {
return (
!( !this.state.prev && !this.state.next ) && <sr-page>
<Button type="raised" text="← 前一页"
disable={ !this.state.prev }
style={{ "margin-left": "0" }}
color="#fff" backgroundColor="#1976D2"
waves="md-waves-effect md-waves-button"
onClick={ ()=>this.onClick( "prev" ) } />
<Button type="raised" text="后一页 →"
disable={ !this.state.next }
style={{ "margin-right": "0" }}
color="#fff" backgroundColor="#1976D2"
waves="md-waves-effect md-waves-button"
onClick={ ()=>this.onClick( "next" ) } />
</sr-page>
)
}
}
================================================
FILE: src/read/toc.jsx
================================================
console.log( "=== simpread read toc load ===" )
let is_click = false;
class TOC extends React.Component {
onClick( event ) {
try {
is_click = true;
let $target = $( event.target ).parent();
while ( $target.is( "a" ) ) { $target = $target.parent(); }
if ( $target.is( "toc" ) ){
return;
}
$target.parent().find( "active" ).removeClass( "toc-outline-active" );
$target.find( "active" ).addClass( "toc-outline-active" );
const href = $target.find( "a" ).attr( "href" ),
offsetTop = href === "#" ? 0 : $(href).offset().top - 5;
$( "html" ).stop().animate({
scrollTop: offsetTop
}, 300, () => {
setTimeout( ()=>is_click = false, 500 );
});
event.preventDefault();
} catch ( error ) {
console.error( "toc error ", error )
}
}
componentDidMount() {
let lastId;
const topMenu = $( "toc" ),
topMenuHeight = topMenu.outerHeight(),
menuItems = topMenu.find( "a" ),
scrollItems = menuItems.map( function() {
const item = $( $(this).attr("href") );
if ( item.length ) { return item; }
}),
setActive = function() {
if ( is_click ) return;
const fromTop = $(window).scrollTop() + topMenuHeight;
let cur = scrollItems.map( function() {
if ($(this).offset().top < fromTop)
return this;
});
cur = cur[cur.length - 1];
let id = cur && cur.length ? cur[0].id : "";
if ( lastId !== id ) {
lastId = id;
id == "" && ( id = "sr-toc-0" );
menuItems.parent().find( "active" ).removeClass( "toc-outline-active" );
menuItems.filter("[href='#"+id+"']").parent().find( "active" ).addClass( "toc-outline-active" );
}
};
$( window ).scroll( setActive );
$( "outline" ).map( ( idx, item ) => {
$(item).width( 180 - parseInt( $(item).css("padding-left") ) );
})
this.props.hidden == false && $( "toc" ).css({ "width" : "initial" });
setActive();
}
render() {
const outline = this.props.table.map( item => {
return (
<outline className={ item.level } onClick={ evt=>this.onClick(evt) }>
<active></active>
<a className={ "toc-outline-theme-" + this.props.theme } href={ "#" + item.id}><span>{ item.value }</span></a>
</outline>
)
});
return (
<toc className="simpread-font simpread-theme-root">
{ outline }
</toc>
)
}
}
/**
* Render
*
* @param {string} selector name
* @param {jquery} jquery object
* @param {string} theme
* @param {boolen} hidden
*/
function Render( root, $target, theme, hidden ) {
// hack code
//if ( location.host.includes( "blog.csdn.net" )) return;
//if ( location.host.includes( "post.smzdm.com" )) return;
const table = [],
cls = hidden ? "toc-bg-hidden" : "";
$target.find( "h1, h2, h3, h4" ).map( ( idx, item) => {
const $item = $( item ),
tag = $item[0].tagName.toLowerCase(),
value = $item.text();
let id = $item.attr( "id" );
id = id == undefined ? `sr-toc-${idx}` : `${id}-${idx}`
$item.attr( "id", id );
value && table.push({
level: `toc-level-${tag}`,
id,
value,
});
});
console.log( "current toc is ", table )
$( root ).append( `<toc-bg class=${cls}></tocbg>` );
table.length > 1 && ReactDOM.render( <TOC hidden={ hidden } table={ table } theme={ theme } />, $( "toc-bg" )[0] );
}
export {
Render
}
================================================
FILE: src/service/browser.js
================================================
console.log( "=== simpread browser load ===" )
const mode = {
chrome : "chrome",
sogou : "sogouExplorer",
firefox: "firefox",
}, userAgent = () => {
if ( window.navigator.userAgent.toLowerCase().includes( "firefox" ) ) {
return "firefox";
} else {
return "chrome"
}
};
let browser_type;
/**
* Chromium browser api adapter
*
* @class
*/
class Browser {
/**
* Browser adapter[read]
*
* @return {object} current chromium
*/
get adapter() {
switch ( browser_type ) {
case mode.chrome:
return chrome;
case mode.sogou:
return sogouExplorer;
case mode.firefox:
return browser;
}
}
/**
* Browser type[read]
*
* @return {string} browser type @see mode
*/
get type() {
return browser_type;
}
constructor( type ) {
browser_type = type;
}
/**
* Is firefox
*
* @return {boolean} true or false
*/
isFirefox() {
return browser_type == mode.firefox;
}
}
const br = new Browser( userAgent() ),
adapter = br.adapter;
export {
br,
adapter as browser
};
================================================
FILE: src/service/config.js
================================================
console.log( "=== simpread config load ===" )
import * as ss from 'stylesheet';
const keyboard = {
"控制栏 - 导出" : {
md: {
"kbd" : "md",
"type" : "markdown",
"desc" : "导出为 Markdown",
},
om: {
"kbd" : "om",
"type" : "offlinemarkdown",
"desc" : "导出为 离线 Markdown",
},
pg: {
"kbd" : "pg",
"type" : "png",
"desc" : "导出为 PNG",
},
pf: {
"kbd" : "pf",
"type" : "pdf",
"desc" : "导出为 PDF",
},
ep: {
"kbd" : "ep",
"type" : "epub",
"desc" : "导出为 epub",
},
hm: {
"kbd" : "hm",
"type" : "html",
"desc" : "导出为 HTML",
},
oh: {
"kbd" : "oh",
"type" : "offlinehtml",
"desc" : "导出为 离线 HTML",
},
tm: {
"kbd" : "tm",
"type" : "temp",
"desc" : "导出为 临时页面",
},
cp: {
"kbd" : "cp",
"type" : "snapshot",
"desc" : "截图",
},
},
"控制栏 - 其它" : {
ff: {
"kbd" : "ff",
"type" : "fontfamily_",
"desc" : "改变字体样式，取值 1 ~ 5",
},
fs: {
"kbd" : "fs",
"type" : "fontsize_",
"desc" : "改变字体大小，取值 1 ~ 3",
},
la: {
"kbd" : "la",
"type" : "layout_",
"desc" : "改变版面布局，取值 1 ~ 3",
},
"th →": {
"kbd" : "th →",
"type" : "theme_next",
"desc" : "更换为后一个主题",
},
"th ←": {
"kbd" : "th ←",
"type" : "theme_prev",
"desc" : "更换为前一个主题",
},
},
"控制栏 - 生产力工具" : {
yx: {
"kbd" : "yx",
"type" : "yinxiang",
"desc" : "保存到 印象笔记",
},
er: {
"kbd" : "er",
"type" : "evernote",
"desc" : "保存到 Evernote",
},
db: {
"kbd" : "db",
"type" : "dropbox",
"desc" : "保存到 Dropbox",
},
on: {
"kbd" : "on",
"type" : "onenote",
"desc" : "保存到 Onenote",
},
gr: {
"kbd" : "gr",
"type" : "gdrive",
"desc" : "保存到 Google 云端硬盘",
},
nt: {
"kbd" : "nt",
"type" : "notion",
"desc" : "保存到 Notion",
},
jg: {
"kbd" : "jg",
"type" : "jianguo",
"desc" : "保存到 坚果云",
},
yq: {
"kbd" : "yq",
"type" : "yuque",
"desc" : "保存到 语雀",
},
wz: {
"kbd" : "wz",
"type" : "weizhi",
"desc" : "保存到 为知笔记",
},
kd: {
"kbd" : "kd",
"type" : "kindle",
"desc" : "保存到 Kindle",
},
ln: {
"kbd" : "ln",
"type" : "linnk",
"desc" : "保存到 Linnk",
},
pt: {
"kbd" : "pt",
"type" : "pocket",
"desc" : "保存到 Pocket",
},
ip: {
"kbd" : "ip",
"type" : "instapaper",
"desc" : "保存到 Instapaper",
},
rl: {
"kbd" : "rl",
"type" : "save",
"desc" : "保存到 稍后读",
},
br: {
"kbd" : "br",
"type" : "bear",
"desc" : "保存到 Bear",
},
ul: {
"kbd" : "ul",
"type" : "ulysses",
"desc" : "保存到 Ulysses",
},
},
"控制栏 - 无障碍" : {
ts: {
"kbd" : "ts",
"type" : "dyslexia_speak",
"desc" : "开始朗读",
},
tt: {
"kbd" : "tt",
"type" : "dyslexia_speak_stop",
"desc" : "停止朗读",
},
},
"控制栏 - 设定" : {
fu: {
"kbd" : "fu",
"type" : "fullscreen",
"desc" : "全屏",
},
st: {
"kbd" : "st",
"type" : "setting",
"desc" : "设定对话框",
},
se: {
"kbd" : "se",
"type" : "siteeditor",
"desc" : "站点编辑器",
},
hl: {
"kbd" : "hl",
"type" : "highlight",
"desc" : "重新选择高亮",
},
cl: {
"kbd" : "cl",
"type" : "remove",
"desc" : "隐藏任意元素",
},
tr: {
"kbd" : "tr",
"type" : "tempread",
"desc" : "提交临时阅读模式",
},
},
};
/**
* Shortcust
*/
const shortcuts = {
"fontfamily": {
key : "F",
value : [ "1", "2", "3", "4", "5" ],
name : [ "default", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "Source Han Sans CN" ]
},
"fontsize" : {
key : "S",
value : [ "1", "2", "3" ],
name : [ "58%", "62.5%", "70%" ],
},
"layout" : {
key : "W",
value : [ "1", "2", "3" ],
name : [ "25%", "20%", "15%" ],
}
};
/**
* Read controlbar items
*/
const readItems = {
"exit" : {
"name" : "关闭",
"icon" : ss.IconPath("exit_icon"),
},
"option" : {
"name" : "设定",
"icon" : ss.IconPath("option_icon"),
"color": "#03A9F4",
"items": {
"fullscreen" : {
"name" : "全屏",
"icon" : ss.IconPath("fullscreen_icon"),
"color": "#03A9F4",
},
"siteeditor" : {
"name" : "站点编辑器",
"icon" : ss.IconPath("siteeditor_icon"),
"color": "#03A9F4",
},
"setting" : {
"name" : "设定",
"icon" : ss.IconPath("setting_icon"),
"color": "#03A9F4",
},
"highlight" : {
"name" : "重新选项高亮区域",
"icon" : ss.IconPath("highlight_icon"),
"color": "#03A9F4",
},
"remove" : {
"name" : "隐藏任意元素",
"icon" : ss.IconPath("remove_icon"),
"color": "#03A9F4",
},
"tempread": {
"name" : "提交临时阅读模式",
"icon" : ss.IconPath("tempread_icon"),
"color": "#03A9F4",
},
},
},
"readlater" : {
"name" : "暂存",
"icon" : ss.IconPath("save_icon"),
"color": "#FF5722",
"items": {
"linnk" : {
"name" : "保存到 Linnk",
"icon" : ss.IconPath("linnk_icon"),
"color": "#FF5722",
},
"instapaper" : {
"name" : "保存到 Instapaper",
"icon" : ss.IconPath("instapaper_icon"),
"color": "#FF5722",
},
"pocket" : {
"name" : "保存到 Pocket",
"icon" : ss.IconPath("pocket_icon"),
"color": "#FF5722",
},
"save" : {
"name" : "保存到 稍后读",
"icon" : ss.IconPath("readlater_icon"),
"color": "#FF5722",
},
},
},
"download" : {
"name" : "导出",
"icon" : ss.IconPath("download_icon"),
"color": "#D4237A",
"items": {
"epub" : {
"name" : "导出为 epub",
"icon" : ss.IconPath("epub_icon"),
"color": "#D4237A",
},
"pdf" : {
"icon" : ss.IconPath("pdf_icon"),
"color": "#D4237A",
},
"png" : {
"icon" : ss.IconPath("png_icon"),
"color": "#D4237A",
},
"markdown" : {
"name" : "导出为 MD",
"icon" : ss.IconPath("markdown_icon"),
"color": "#D4237A",
},
"offlinemarkdown" : {
"name" : "导出为 离线 MD",
"icon" : ss.IconPath("offline_markdown_icon"),
"color": "#D4237A",
},
"html" : {
"name" : "导出为 HTML",
"icon" : ss.IconPath("html_icon"),
"color": "#D4237A",
},
"offlinehtml" : {
"name" : "导出为 离线 HTML",
"icon" : ss.IconPath("offline_html_icon"),
"color": "#D4237A",
},
"snapshot" : {
"name" : "截图",
"icon" : ss.IconPath("snapshot_icon"),
"color": "#D4237A",
},
},
},
"send" : {
"name" : "保存",
"icon" : ss.IconPath("send_icon"),
"color": "#00BCD4",
"items": {
"yinxiang" : {
"name" : "保存到 印象笔记",
"icon" : ss.IconPath("yinxiang_icon"),
"color": "#00BCD4",
},
"evernote" : {
"name" : "保存到 Evernote",
"icon" : ss.IconPath("evernote_icon"),
"color": "#00BCD4",
},
"dropbox" : {
"name" : "保存到 Dropbox",
"icon" : ss.IconPath("dropbox_icon"),
"color": "#00BCD4",
},
"onenote" : {
"name" : "保存到 Onenote",
"icon" : ss.IconPath("onenote_icon"),
"color": "#00BCD4",
},
"gdrive" : {
"name" : "保存到 Google 云端硬盘",
"icon" : ss.IconPath("gdrive_icon"),
"color": "#00BCD4",
},
"jianguo" : {
"name" : "保存到 坚果云",
"icon" : ss.IconPath("jianguo_icon"),
"color": "#00BCD4",
},
"yuque" : {
"name" : "保存到 语雀",
"icon" : ss.IconPath("yuque_icon"),
"color": "#00BCD4",
},
"notion" : {
"name" : "保存到 Notion",
"icon" : ss.IconPath("notion_icon"),
"color": "#00BCD4",
},
"youdao" : {
"name" : "保存到 有道云笔记",
"icon" : ss.IconPath("youdao_icon"),
"color": "#00BCD4",
},
"weizhi" : {
"name" : "保存到 为知笔记",
"icon" : ss.IconPath("wiz_icon"),
"color": "#00BCD4",
},
"kindle" : {
"name" : "保存到 Kindle",
"icon" : ss.IconPath("kindle_icon"),
"color": "#00BCD4",
},
"temp" : {
"name" : "生成临时页面",
"icon" : ss.IconPath("temp_icon"),
"color": "#00BCD4",
},
"bear" : {
"name" : "保存到 Bear",
"icon" : ss.IconPath("bear_icon"),
"color": "#00BCD4",
},
"ulysses" : {
"name" : "保存到 Ulysses",
"icon" : ss.IconPath("ulysses_icon"),
"color": "#00BCD4",
},
},
},
"dyslexia" : {
"name" : "无障碍",
"icon" : ss.IconPath("dyslexia_icon"),
"color": "#90ee02",
"items": {
"dyslexia_speak" : {
"name" : "播放声音",
"icon" : ss.IconPath("speak_icon"),
"color": "#90ee02",
},
"dyslexia_speak_stop" : {
"name" : "停止播放",
"icon" : ss.IconPath("speak_stop_icon"),
"color": "#90ee02",
},
},
},
"share" : {
"name" : "共享",
"icon" : ss.IconPath("share_icon"),
"color": "#3f51b5",
"items": {
"share_gplus" : {
"name" : "Google G+",
"icon" : ss.IconPath("share_gplus_icon"),
"color": "#DD4B39",
},
"share_facebook" : {
"name" : "Facebook",
"icon" : ss.IconPath("share_facebook_icon"),
"color": "#3B5998",
},
"share_telegram" : {
"name" : "Telegram",
"icon" : ss.IconPath("share_telegram_icon"),
"color": "#0088CC",
},
"share_twitter" : {
"name" : "Twitter",
"icon" : ss.IconPath("share_twitter_icon"),
"color": "#1DA1F2",
},
"share_weibo" : {
"name" : "新浪微博",
"icon" : ss.IconPath("share_weibo_icon"),
"color": "#E6162D",
},
"share_card" : {
"name" : "分享卡",
"icon" : ss.IconPath("share_card_icon"),
"color": "#0f4137",
},
},
},
"trigger" : {
"name" : "插件触发器",
"icon" : ss.IconPath("plugin_icon"),
"color": "#00bcd4",
"items": {}
},
/*
"down" : {
"name" : "向下滚动",
"icon" : ss.IconPath("down_icon"),
"color": "#00BCD4",
},
"up" : {
"name" : "向上滚动",
"icon" : ss.IconPath("up_icon"),
"color": "#00BCD4",
},
*/
"fontfamily" : {
"name" : "字体样式",
"icon" : ss.IconPath("fontfamily_icon"),
"color": "#9C27B0",
"items": {
"fontfamily_default" : {
"name" : "系统默认",
"icon" : ss.IconPath("fontfamily_default_icon"),
"color": "#9C27B0",
},
"fontfamily_PingFang SC" : {
"name" : "苹方",
"icon" : ss.IconPath("fontfamily_pingfang_icon"),
"color": "#9C27B0",
},
"fontfamily_Hiragino Sans GB" : {
"name" : "冬青黑体",
"icon" : ss.IconPath("fontfamily_hiragino_icon"),
"color": "#9C27B0",
},
"fontfamily_Microsoft Yahei" : {
"name" : "微软雅黑",
"icon" : ss.IconPath("fontfamily_yahei_icon"),
"color": "#9C27B0",
},
"fontfamily_Source Han Sans CN" : {
"name" : "思源黑体",
"icon" : ss.IconPath("fontfamily_hansans_icon"),
"color": "#9C27B0",
},
},
},
"fontsize" : {
"name" : "字体大小",
"icon" : ss.IconPath("fontsize_icon"),
"color": "#9E9E9E",
"items": {
"fontsize_70%" : {
"name" : "增大",
"icon" : ss.IconPath("fontsize_large_icon"),
"color": "#9E9E9E",
},
"fontsize_62.5%" : {
"name" : "正常",
"icon" : ss.IconPath("fontsize_normal_icon"),
"color": "#9E9E9E",
},
"fontsize_58%" : {
"name" : "减小",
"icon" : ss.IconPath("fontsize_small_icon"),
"color": "#9E9E9E",
},
},
},
"layout" : {
"name" : "版面布局",
"icon" : ss.IconPath("layout_icon"),
"color": "#FFEB3B",
"items": {
"layout_15%" : {
"name" : "宽栏",
"icon" : ss.IconPath("layout_large_icon"),
"color": "#FFEB3B",
},
"layout_20%" : {
"name" : "正常",
"icon" : ss.IconPath("layout_normal_icon"),
"color": "#FFEB3B",
},
"layout_25%" : {
"name" : "窄栏",
"icon" : ss.IconPath("layout_small_icon"),
"color": "#FFEB3B",
},
},
},
"theme" : {
"name" : "主题",
"icon" : ss.IconPath("theme_icon"),
"color": "#FB8C00",
"items": {
"theme_prev" : {
"name" : "前一个主题",
"icon" : ss.IconPath("theme_prev_icon"),
"color": "#FB8C00",
},
"theme_next" : {
"name" : "后一个主题",
"icon" : ss.IconPath("theme_next_icon"),
"color": "#FB8C00",
},
},
},
}
/**
* Read options
*/
const fontfamily = [{
value : "default",
name : "系统默认",
},{
value : "PingFang SC",
name : "苹方字体",
style : {
text: { fontFamily: "PingFang SC" }
}
},{
value : "Hiragino Sans GB",
name : "冬青黑体",
style : {
text: { fontFamily: "Hiragino Sans GB" }
}
},{
value : "Microsoft Yahei",
name : "微软雅黑",
style : {
text: { fontFamily: "Microsoft Yahei" }
}
},{
value : "Source Han Sans CN",
name : "思源黑体",
style : {
text: { fontFamily: "Source Han Sans CN" }
}
},{
value : "Noto Serif CJK SC, Source Han Serif SC, Source Han Serif CN",
name : "思源宋体",
style : {
text: { fontFamily: "Noto Serif CJK SC, Source Han Serif SC, Source Han Serif CN" }
}
},{
value : "",
name : "自定义字体",
style : {
text: { fontFamily: "default" }
}
}],
fontsize = [{
value : "62.5%",
name : "正常",
},{
value : "70%",
name : "大号",
},{
value : "58%",
name : "小号",
}],
layout = [{
value : "20%",
name : "正常",
},{
value : "15%",
name : "宽栏",
},{
value : "25%",
name : "窄栏",
}],
readLabels = [ "白练", "白磁", "卯之花色", "丁子色", "娟鼠", "月白", "百合", "紺鼠", "黒鸢" ];
/**
* Focus controlbar items
*/
const focusItems = ( items => {
const news = $.extend( true, {}, items ),
dels = [ "theme", "fontfamily", "fontsize", "layout", "dyslexia", "trigger" ];
dels.forEach( del => delete news[ del ] );
delete news.option.items.fullscreen;
delete news.option.items.tempread;
delete news.download.items.snapshot;
delete news.download.items.offlinehtml;
delete news.download.items.offlinemarkdown;
news.top = {
"name" : "返回顶部",
"icon" : ss.IconPath("top_icon"),
"color": "#009688",
};
return news;
})( readItems );
/**
* Focus options
*/
const focusThemes = [
"235, 235, 235, 0.9",
"216, 216, 216, 0.9",
"229, 221, 208, 0.9",
"243, 234, 203, 0.9",
"176, 192, 182, 0.9",
"28, 31, 43, 0.9",
"61, 66, 70, 0.9",
"17, 18, 20, 0.9"
],
focusLabels = [ "白练", "灰青", "素色", "鸟之子色", "青磁鼠", "焦茶", "御纳戸色", "黒鸢" ];
/**
* Options page
*/
const tabsItem = [{
name: "共通",
value: "common",
active : true,
route: "#common",
},{
name: "基础设定",
value: "simple",
route: "#simple",
},{
name: "高级设定",
value: "labs",
route: "#labs",
},{
name: "站点管理",
value: "sites",
route: "#sites",
},{
name: "插件管理",
value: "plugins",
route: "#plugins",
},{
name: "稍后读",
value: "later",
route: "#later",
},{
name: "账户",
value: "account",
route: "#account",
},{
name: "关于",
value: "about",
route: "#about",
}],
headerColors = [ "#64B5F6", "#81C784", "#7986CB", "#9575CD", "#4DD0E1", "#BA68C8", "#989fb5", "#4DB6AC" ],
topColors = [ "#2196F3", "#4CAF50", "#3F51B5", "#673AB7", "#00BCD4", "#9C27B0", "#6f7a9b", "#009688" ],
menuItem = tabsItem.map( ( item, idx ) => {
const menu = { ...item };
switch ( idx ) {
case 0:
delete menu.active;
menu.fontIcon = '<i class="fas fa-sync-alt"></i>';
break;
case 1:
menu.fontIcon = '<i class="fas fa-wrench"></i>';
break;
case 2:
menu.fontIcon = '<i class="fas fa-tools"></i>';
break;
case 3:
menu.fontIcon = '<i class="fas fa-sitemap"></i>';
break;
case 4:
menu.fontIcon = '<i class="fas fa-plug"></i>';
break;
case 5:
menu.fontIcon = '<i class="fas fa-inbox"></i>';
break;
case 6:
menu.fontIcon = '<i class="fas fa-user"></i>';
break;
case 7:
menu.fontIcon = '<i class="fas fa-info-circle"></i>';
break;
}
return menu;
});
/**
* Unread list
*/
const actionItems = [
{
id: "pocket",
title: "发送到 Pocket",
},{
id: "instapaper",
title: "发送到 Instapaper",
},{
id: "linnk",
title: "发送到 Linnk",
},{
id: "remove",
title: "删除",
}
];
export {
shortcuts,
keyboard,
focusItems,
focusThemes,
focusLabels,
readItems,
fontfamily,
fontsize,
layout,
readLabels,
tabsItem,
headerColors,
topColors,
menuItem,
actionItems,
}
================================================
FILE: src/service/export.js
================================================
console.log( "=== simpread export load ===" )
import domtoimage from 'dom2image';
import FileSaver from 'filesaver';
import Turndown from 'markdown';
import mdgfm from 'mdgfm';
import EpubPress from 'epubpress';
import Instapaper from 'instapaper';
import * as msg from 'message';
import {browser} from 'browser';
import * as puplugin from 'puplugin';
import * as wiz from 'wiz';
/**
* Create PNG
*
* @param {html} html element
* @param {string} name
* @param {function} callback
*/
function png( element, name, callback ) {
domtoimage.toBlob( element )
.then( blob => {
blob && FileSaver.saveAs( blob, name );
callback( !!blob );
}).catch( error => {
console.error( "export png failed", error )
callback( undefined );
});
}
/**
* Create PDF file
*/
function pdf() {
window.print();
}
/**
* Create Markdown file
*
* @param {string} data
* @param {string} name
* @param {function} 0: base64; 1: error
*/
function markdown( data, name, callback ) {
try {
const turndownService = new Turndown(),
gfm = mdgfm.gfm,
tables = mdgfm.tables,
strikethrough = mdgfm.strikethrough,
codeBlock = mdgfm.highlightedCodeBlock;
turndownService.use([ gfm, tables, strikethrough, codeBlock ]);
turndownService.addRule( 'pre', {
filter: [ 'pre' ],
replacement: content => {
return '\n\n```\n' + content + '\n```\n\n'
}
});
const md = turndownService.turndown( data ),
base64 = "data:text/plain;charset=utf-8," + encodeURIComponent( md );
name ? download( base64, name ) : callback( md );
} catch( error ) {
callback( undefined, error );
}
}
function epub( data, url, title, desc, callback ) {
console.log( data )
const ebook = new EpubPress({
title,
description: desc == "" ? title : desc,
sections: [{
url,
html: `<html><body><div>${data}</div></body></html>`,
}]
});
ebook.publish().then( () => {
ebook.download();
}).then(() => {
console.log( "succcess" );
callback( true );
}).catch( error => {
console.log( "publish epub error ", error );
callback( false );
});
}
/**
* Downlaod
*
* @param {string} image base64 code
* @param {string} name
*/
function download( data, name ) {
const $a = $( `<a style="display:none" href=${data} download="${name}"></a>` ).appendTo( "body" );
$a[0].click();
$a.remove();
}
/**
* Downlaod
*
* @param {string} origin data
* @param {string} name
*/
function prueDownload( data, name ) {
const blob = new Blob([data], {
type: "text/plain;charset=utf-8"
});
const url = URL.createObjectURL(blob);
browser.downloads.download({
url : url,
filename: name,
});
}
/**
* Dis contented serice
*
* @param {string} service id
*/
function unlink( id ) {
const content = {
"dropbox" : "https://www.dropbox.com/account/connected_apps",
"pocket" : "https://getpocket.com/connected_applications",
"instapaper":"https://www.instapaper.com/",
"evernote": "https://www.evernote.com/AuthorizedServices.action",
"yinxiang": "https://app.yinxiang.com/AuthorizedServices.action",
"onenote" : "https://account.live.com/consent/Manage",
"gdrive" : "https://drive.google.com/drive/my-drive",
"yuque" : "https://www.yuque.com/yuque/developer/delete-oauth-apps",
"notion" : "http://ksria.com/simpread/docs/#/授权服务?id=取消授权",
"youdao" : "http://ksria.com/simpread/docs/#/授权服务?id=取消授权",
"weizhi" : "http://ksria.com/simpread/docs/#/授权服务?id=取消授权",
"jianguo" : "http://help.jianguoyun.com/?p=2064",
"linnk" : "https://linnk.net/",
}
return content[id]
}
/**
* Dropbox
*
* @class
*/
class Dropbox {
get id() { return "dropbox"; }
get name() { return name( this.id ); }
get client_id() {
return "4cyaw4wqpbg4751";
}
get redirect_uri() {
return "https://kenshin.github.io/simpread/auth.html?id=dropbox";
}
get config_name() {
return "simpread_config.json";
}
New() {
this.dtd = $.Deferred();
this.access_token = "";
return this;
}
Auth() {
const url = `https://www.dropbox.com/oauth2/authorize?response_type=token&client_id=${this.client_id}&redirect_uri=${this.redirect_uri}`;
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.new_tab, { url } ));
}
Accesstoken( url ) {
const arr = url.match( /access_token=\S+&token_type/i );
arr && arr.length > 0 &&
( this.access_token = arr[0].replace( /(access_token=)|(&token_type)/ig, "" ));
this.access_token != "" ? this.dtd.resolve() : this.dtd.reject();
}
Exist( name, callback ) {
let idx = -1;
const data = { path : "" },
token = this.access_token;
$.ajax({
url : "https://api.dropboxapi.com/2/files/list_folder",
type : "POST",
data : JSON.stringify( data ),
headers : {
"Authorization" : `Bearer ${token}`,
"Content-Type" : "application/json"
},
}).done( ( data, textStatus, jqXHR ) => {
idx = data.entries.findIndex( item => item.name == name && item[".tag"] == "file" );
callback( idx, undefined );
}).fail( ( jqXHR, textStatus, error ) => {
console.error( jqXHR, textStatus, error )
callback( idx, error );
});
}
Read( name, callback ) {
const data = { path : `/${name}` },
token = this.access_token;
$.ajax({
url : "https://content.dropboxapi.com/2/files/download",
type : "POST",
headers : {
"Authorization" : `Bearer ${token}`,
"Dropbox-API-Arg" : JSON.stringify( data ),
},
}).done( ( data, textStatus, jqXHR ) => {
callback( "read", data, undefined )
}).fail( ( jqXHR, textStatus, error ) => {
console.error( jqXHR, textStatus, error )
callback( "read", undefined, error )
});
}
Write( name, data, callback, path = "" ) {
const safename = data => data.replace( /\//ig, "" ),
args = { path: `/${path}${safename(name)}`, mode: "overwrite" },
token = this.access_token,
safejson = args => {
const charsToEncode = /[\u007f-\uffff]/g;
return JSON.stringify(args).replace( charsToEncode, c => {
return '\\u' + ( '000' + c.charCodeAt(0).toString(16)).slice(-4);
});
};
$.ajax({
url : "https://content.dropboxapi.com/2/files/upload",
type : "POST",
data : data,
headers : {
"Authorization" : `Bearer ${token}`,
"Dropbox-API-Arg" : safejson( args ),
"Content-Type" : "application/octet-stream"
},
processData : false,
contentType : false
}).done( ( data, textStatus, jqXHR ) => {
callback( "write", data, undefined );
}).fail( ( xhr, textStatus, error ) => {
console.error( xhr, status, error )
callback( "write", undefined, error.toLowerCase().startsWith( "invalid_access_token" ) ? `${ this.name } 授权过期，请重新授权。` : "error" );
});
}
}
/**
* Pocket
*
* @class
*/
class Pocket {
get id() { return "pocket"; }
get name() { return name( this.id ); }
get consumer_key() {
return "69741-d75561b7a9a96a511f36552e";
}
get redirect_uri() {
return "https://kenshin.github.io/simpread/auth.html?id=pocket";
}
get header() {
return {
"content-type": "application/x-www-form-urlencoded",
"X-Accept" : "application/json"
}
}
New() {
this.dtd = $.Deferred();
this.access_token = "";
this.code = "";
this.tags = "";
return this;
}
Request( callback ) {
const data = {
consumer_key: this.consumer_key,
redirect_uri: this.redirect_uri,
};
$.ajax({
url : "https://getpocket.com/v3/oauth/request",
type : "POST",
headers : this.header,
data,
}).done( ( data, textStatus, jqXHR ) => {
callback( data, textStatus == "success" ? "" : textStatus );
}).fail( ( jqXHR, textStatus, error ) => {
console.error( jqXHR, textStatus, error )
callback( undefined, textStatus );
});
}
Login( code ) {
this.code = code;
const url = `https://getpocket.com/auth/authorize?request_token=${code}&redirect_uri=${this.redirect_uri}`;
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.new_tab, { url } ));
}
Accesstoken( url ) {
url ? this.dtd.resolve() : this.reject();
}
Auth( callback ) {
const data = {
consumer_key: this.consumer_key,
code : this.code,
redirect_uri: this.redirect_uri,
};
$.ajax({
url : "https://getpocket.com/v3/oauth/authorize",
type : "POST",
headers : this.header,
data,
}).done( ( result, textStatus, jqXHR ) => {
if ( result && result.access_token ) {
this.access_token = result.access_token;
callback( result, undefined );
} else callback( undefined, "error" );
}).fail( ( jqXHR, textStatus, error ) => {
console.error( jqXHR, textStatus, error )
callback( undefined, textStatus );
});
}
Add( url, title, callback ) {
const data = {
consumer_key: this.consumer_key,
access_token: this.access_token,
url,
title,
tags: this.tags ? this.tags : "simpread"
};
$.ajax({
url : "https://getpocket.com/v3/add",
type : "POST",
headers : this.header,
data,
}).done( ( data, textStatus, jqXHR ) => {
callback( data, undefined );
}).fail( ( xhr, status, error ) => {
console.error( xhr, status, error )
callback( undefined, error.toLowerCase() == "unauthorized" ? `${ this.name } 授权过期，请重新授权。` : "error" );
});
}
}
/**
* Instapaper
*
* @class
*/
class Ins {
get id() { return "instapaper"; }
get name() { return name( this.id ); }
constructor() {
this.access_token = "";
this.token_secret = "";
this.ins = new Instapaper();
}
get consumer_key() {
return "23464e13c91c4cba86f0df8aa87ec15a";
}
get consumer_secret() {
return "b71eb22c7def4d19a2d9e7b7208d31c9";
}
Login( username, password, callback ) {
this.ins.consumer_key = this.consumer_key;
this.ins.consumer_secret = this.consumer_secret;
this.ins.requestToken( username, password ).done( result => {
this.access_token = this.ins.token;
this.token_secret = this.ins.token_secret;
callback( result, undefined );
}).fail( ( jqXHR, textStatus, error ) => {
console.error( jqXHR, textStatus, error )
callback( undefined, textStatus );
});
}
Add( url, title, description, callback ) {
this.ins.token = this.access_token;
this.ins.token_secret = this.token_secret;
this.ins.consumer_key = this.consumer_key;
this.ins.consumer_secret = this.consumer_secret;
const settings = this.ins.add( url, title, description );
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.CORB, { settings } ), result => {
if ( result.done ) { callback( "success", undefined ); }
else callback( undefined, result.fail );
});
}
}
/**
* Linnk
*
* @class
*/
class Linnk {
get id() { return "linnk"; }
get name() { return name( this.id ); }
constructor() {
this.access_token = "";
this.group_id = "";
this.group_name = "";
}
get error_code() {
return {
"-1001": "密码不正确，请确认。",
"-1002": "⽤户不存在，请确认。",
"-1004": "验证错误，请重新登录。",
"-1005": "登录失效，请重新登录。",
"-1006": "验证失效，请重新登录。",
}
}
get tags() {
return "simpread";
}
Login( username, password, callback ) {
const data = {
userName: username,
password: password,
};
$.ajax({
url : "https://linnk.net/a/api/login",
type : "POST",
data,
}).done( ( result, textStatus, jqXHR ) => {
result && result.code == 200 && ( this.access_token = result.token );
callback( result, undefined );
}).fail( ( jqXHR, textStatus, error ) => {
console.error( jqXHR, textStatus, error )
callback( undefined, textStatus );
});
}
Add( url, title, callback ) {
const data = {
groupId : this.group_id,
targetURL: url,
title,
tagsStr : this.tags,
},
settings = {
url : "https://linnk.net/a/api/bookmark/new",
type : "POST",
headers : { Authorization: this.access_token },
data,
};
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.CORB, { settings } ), result => {
if ( result.done ) {
const data = JSON.parse( result.done );
if ( data && data.code == 200 ) callback( "success", undefined );
else callback( undefined, "error" );
} else callback( undefined, result.fail );
});
}
Groups( callback ) {
const settings = {
url : "https://linnk.net/a/api/group/my",
type : "GET",
headers : { Authorization: this.access_token },
};
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.CORB, { settings } ), result => {
if ( result.done ) {
const data = JSON.parse( result.done );
if ( data.code != 200 ) {
callback( undefined, this.error_code[ data.code ] );
} else callback( data, undefined );
} else callback( undefined, "error" );
});
}
GetGroup( name, target ) {
const group = target.find( obj => obj.groupName == name );
group && ( this.group_name = group.groupName );
return group;
}
NewGroup( name, callback ) {
const settings = {
url : "https://linnk.net/a/api/group/new",
type : "POST",
headers : { Authorization: this.access_token },
data : { groupName: name },
};
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.CORB, { settings } ), result => {
if ( result.done ) {
callback( JSON.parse( result.done ), undefined );
} else callback( undefined, result.fail );
});
}
GetSafeGroup( name, callback ) {
this.Groups( ( result, error ) => {
if ( result && result.code == 200 ) {
const group = this.GetGroup( name, result.data );
!group && this.NewGroup( name, callback );
group && callback({ data: group, code: 200 }, undefined );
} else {
callback( undefined, error == "error" ? "error" : error );
}
})
}
}
/**
* Evernote
*
* @class
*/
class Evernote {
get id() { return this.env.toLowerCase(); }
get name() { return name( this.env ); }
constructor() {
this.token = "";
this.token_secret = ""
this.oauth_verifier = "";
this.access_token = "";
this.env = ""; // include: "yinxiang" "evernote"
this.sandbox = true;
}
get host() {
if ( this.sandbox ) {
return "sandbox.evernote.com";
} else {
return this.env == "yinxiang" ? "app.yinxiang.com" : "www.evernote.com";
}
}
get server() {
//return this.sandbox ? "http://localhost:3000/evernote" : "https://simpread.herokuapp.com/evernote";
return "https://simpread.herokuapp.com/evernote";
}
get china() {
return this.env != "evernote" ? true : false;
}
get headers() {
return {
sandbox: this.sandbox,
china : this.china,
type : this.env,
}
}
New() {
this.dtd = $.Deferred();
this.token = "";
this.token_secret = "";
this.access_token = ""
this.oauth_verifier = "";
return this;
}
RequestToken( callback ) {
$.ajax({
url : `${this.server}/oauth`,
type : "POST",
headers : this.headers,
}).done( ( result, textStatus, jqXHR ) => {
if ( result && result.code == 200 ) {
this.token = result.data.token;
this.token_secret = result.data.token_secret;
const url = `https://${this.host}/OAuth.action?oauth_token=${this.token}`;
browser.runtime.sendMessage( msg.Add( msg.MESSAGE_ACTION.new_tab, { url } ));
callback( result, undefined );
} else {
callback( undefined, "error" );
}
}).fail( ( jqXHR, textStatus, error ) => {
console.error( jqXHR, textStatus, error )
callback( undefined, textStatus );
});
}
Accesstoken( url ) {
url.split( "&" ).forEach( item => {
item.startsWith( "oauth_token=" ) && ( this.token = item.replace( "oauth_token=", "" ));
item.startsWith( "oauth_verifier=" ) && ( this.oauth_verifier = item.replace( "oauth_verifier=", "" ));
});
this.oauth_verifier ? this.dtd.resolve() : this.dtd.reject( "oauth_verifier is null" );
}
Auth( callback ) {
$.ajax({
url : `${this.server}/token`,
type : "POST",
headers : this.headers,
data : {
token : this.token,
token_secret : this.token_secret,
oauth_verifier: this.oauth_verifier,
}
}).done( ( result, textStatus, jqXHR ) => {
if ( result && result.code == 200 ) {
this.access_token = result.data.token;
callback( result, undefined );
} else if ( result && result.code == 401 ) {
console.log( "result.code == 401" )
} else {
callback( undefined, "error" );
}
}).fail( ( jqXHR, textStatus, error ) => {
console.error( jqXHR, textStatus, error )
callback( undefined, textStatus );
});
return this;
}
Add( title, content, callback ) {
$.ajax({
url : `${this.server}/add`,
type : "POST",
headers : this.headers,
data : {
token : this.access_token,
title,
content,
}
}).done( ( result, textStatus, jqXHR ) => {
console.assert( result.code != -1, result )
result && result.code == 200 && callback( result, undefined );
result && result.code == -1 &&
callback( undefined, result.data.message == "authenticationToken" ? `${ name(this.env) } 授权错误，请重新授权。` : "error" );
}).fail( ( jqXHR, textStatus, error ) => {
console.error( jqXHR, textStatus, error )
callback( undefined, textStatus );
});
}
}
/**
* Onenote
*
* @class
*/
class Onenote {
get id() { return "onenote"; }
get name() { return name( this.id ); }
get client_id() {
return "b21d6e4a-30d5-4c39-9ef2-0ac14a01822b";
}
get client_secret() {
return "q0ewrhaVHidjZragQ0hi1MV";
}
get redirect_uri() {
//return "https://simpread.herokuapp.com";
return "https://kenshin.github.io/simpread/auth.html";
}
get scopes() {
return [ "office.onenote_create" ];
}
New() {
this.dtd = $.Deferred();
this.code = "";
this.access_token = "";
return this;
}
Wrapper( url, title, content ) {
return `
<html xmlns='http://www.w3.org/1999/xhtml' lang='en-us'>
<head>
<title>${title}
本文由 简悦 SimpRead 转码，原文地址 ${url}
> 在 1.0.0 版上线之初就已经构想了此功能，所以在构筑此功能时，加入了很多只有 **简悦 · 标注** 才具有的功能。
- 五种标注颜色
- 四种标注样式
- 自动识别 **文字** · **图片** · **代码段**
- **无限层级** 的标签系统
- 每个标签均支持备注与标签系统
- 结合简悦强大的发送到生产力工具的功能，可将当前标注发送到简悦支持的各种生产力工具
- 连续标注
- [浮动标注栏](http://ksria.com/simpread/docs/#/标注?id=浮动工具栏)
- [标注侧栏](http://ksria.com/simpread/docs/#/标注?id=标注侧栏)
> 如何使用以及详细内容 [请看这里](http://ksria.com/simpread/docs/#/标注)
#### 稍后读  
> 简悦 2.0 启用了全新的 **[稍后读 2.0](http://ksria.com/simpread/docs/#/稍后读)**， 相比较之前的版本，此版本的稍后读算做是一个真正意义的稍后读。
> 简悦的稍后读借鉴了 ZK 笔记法的一些特点，专门针对信息的整合增加了如下一些新功能：
- [**双向链接**](http://ksria.com/simpread/docs/#/双向链接)
- [**知识图谱**](http://ksria.com/simpread/docs/#/双向链接?id=图谱)
- [**Mindmap**](http://ksria.com/simpread/docs/#/稍后读?id=Mindmap)
- **多种信息展示方式（布局）**：[Evergreen](http://ksria.com/simpread/docs/#/稍后读-多种布局?id=Evergreen) · [Workflowy](http://ksria.com/simpread/docs/#/稍后读-多种布局?id=Workflowy) · [Kanban](http://ksria.com/simpread/docs/#/稍后读-多种布局?id=Kanban)
- [**读取本地 HTML**](https://github.com/Kenshin/simpread/discussions/2146)
#### 同步助手  
> [简悦 · 同步助手](http://ksria.com/simpread/docs/#/Sync) 是 **随着简悦 2.1.0 发布的一个全新的 Desktop App**，用于对简悦已知功能的补充，以及会 **持续提供更多** 的可玩性，包括：
1. **[自动同步](http://ksria.com/simpread/docs/#/自动同步)**
2. **小书签**
3. 导出到文件 **本地的任意位置**
4. **原生 PDF · Epub** 导出
5. **直接发送到你的 Kindle**
6. 内置解析
7. **邮件发送**
同步助手的 Logo 自于社区用户 [Shawn](https://shawnan.design/) 的设计。
#### 插件系统 
> 使用 JavaScript 编写基于 `简悦` 的插件了，请看 [插件中心](https://simpread.ksria.cn/plugins/)
## 全部功能
