添加资助页面。 (#2)

Author: anders-liu

gulpfile.js

@@ -12,6 +12,10 @@ const task_html = done => {
     build_html();
     done();
 }
+const task_images = done => {
+    build_images();
+    done();
+}
 const task_gen_package_json = done => {
     gen_package_json();
     done();
@@ -34,14 +38,26 @@ const task_copy_release_note = done => {
     done();
 }
 
-exports.default = gulp.parallel(task_html, task_ui, task_styles, task_worker, task_copy_release_note);
+exports.default = gulp.parallel(
+    task_html,
+    task_images,
+    task_ui,
+    task_styles,
+    task_worker,
+    task_copy_release_note);
 
 function build_html() {
     return gulp
         .src(PATH_SRC_HTML + "index.html")
         .pipe(gulp.dest(PATH_OUT));
 }
 
+function build_images() {
+    return gulp
+        .src(PATH_SRC_IMG + "*")
+        .pipe(gulp.dest(PATH_OUT));
+}
+
 function build_scripts(src) {
     let cfg = require(src + "webpack.config.js")();
     const entry = cfg.entry;
@@ -92,6 +108,7 @@ function copy_release_note() {
 
 const PATH_SRC = "./src/";
 const PATH_SRC_HTML = PATH_SRC + "ui/html/";
+const PATH_SRC_IMG = PATH_SRC + "ui/images/";
 const PATH_SRC_UI = PATH_SRC + "ui/scripts/";
 const PATH_SRC_WORKER = PATH_SRC + "worker/";
 const PATH_SRC_STYLES = PATH_SRC + "ui/styles/";

src/ui/images/donate-alipay.jpg

@@ -8,25 +8,74 @@ import { DataBytesView } from "./data-bytes-view";
 import { AsmView } from "./asm-view";
 
 interface ConnectedProps {
+    pageId: S.PageIdType;
+    showDonationPrompt: boolean;
 }
 
 function mapStateToProps(state: S.AppState): ConnectedProps {
+    const { hexView } = state;
+    const { pageId } = state.appInfo;
+
     return {
+        pageId,
+        showDonationPrompt: hexView == null
     };
 }
 
 class PageContentClass extends React.Component<ConnectedProps> {
     public render(): JSX.Element {
+        const { pageId } = this.props;
+
+        let pageContent: JSX.Element | null = null;
+        switch (pageId) {
+            case "MAIN": pageContent = this.renderMainPageContent(); break;
+            case "DONATE": pageContent = this.renderDonatePageContent(); break;
+        }
+
         return (
             <section id="app-content">
+                {pageContent}
+            </section>
+        );
+    }
+
+    public renderMainPageContent(): JSX.Element {
+        const { showDonationPrompt } = this.props;
+
+        return (
+            <React.Fragment>
                 <FileOpener />
                 <section id="view-container">
                     <AsmView />
                     <DataBytesView />
                     <HexView />
                 </section>
-            </section>
-        )
+                {showDonationPrompt && (
+                    <div id="donation-prompt">
+                        {"如果这个应用对您有所帮助，欢迎采取资助的方式进行鼓励 (｡◕‿◕｡) ↓"}
+                    </div>
+                )}
+            </React.Fragment>
+        );
+    }
+
+    private renderDonatePageContent(): JSX.Element {
+        return (
+            <React.Fragment>
+                <h2>资助作者</h2>
+                <p>这个小工具能对您有所帮助，是作者的荣幸。对于您的资助，作者表示万分感激！</p>
+                <table>
+                    <thead>
+                        <tr><th>微信</th><th>支付宝</th></tr>
+                    </thead>
+                    <tbody>
+                        <tr><td><img src="donate-wechat.jpg" /></td><td><img src="donate-alipay.jpg" /></td></tr>
+                    </tbody>
+                </table>
+                <p>如有兴致，请在备注/留言中注明用于资助STC51反汇编器。</p>
+                <p>另外，作者计划不定期在此页面列出资助者以示感谢，如果您做好事不想留名，或希望留一个别致的名号，也请在留言/备注中告知；作者默认列出收款信息中看到的名字。</p>
+            </React.Fragment>
+        );
     }
 }
 

src/ui/images/donate-wechat.jpg

@@ -17,7 +17,8 @@ function mapStateToProps(state: S.AppState): ConnectedProps {
 class PageFooterClass extends React.Component<ConnectedProps> {
     public render(): JSX.Element {
         const { appInfo } = this.props;
-        const { title, version, author, homepage, bugsUrl, releaseNotesUrl, buildTimeLocal, year } = appInfo;
+        const { title, version, author, homepage, bugsUrl, releaseNotesUrl, buildTimeLocal, year, pageId } = appInfo;
+        const showDonate = pageId !== "DONATE";
 
         return (
             <footer id="app-footer">
@@ -29,6 +30,9 @@ class PageFooterClass extends React.Component<ConnectedProps> {
                 <div><a href="/latest" target="_blank">尝试新版</a></div>
                 <div><a href={homepage} target="_blank">GitHub</a></div>
                 <div><a href={bugsUrl} target="_blank">报bug</a></div>
+                {showDonate && (
+                    <div className="right"><a href={"?donate"} target="_blank">资助作者</a></div>
+                )}
             </footer>
         )
     }

src/ui/scripts/components/page-content.tsx

@@ -19,19 +19,14 @@ const appInfo: S.AppInfo = {
     releaseNotesUrl: packageJson.release_notes,
     buildTimeLocal: new Date(Date.parse(packageJson.build_time)).toLocaleString(),
     year: new Date().getFullYear().toString(),
+    pageId: document.location.search === "?donate" ? "DONATE" : "MAIN"
 };
 
 const defaultState: S.AppState = {
     appInfo,
 };
 
 document.title = `${appInfo.title}`;
-window.addEventListener("beforeunload", (evt) =>{
-    if(!window.confirm("即将离开此页面，打开的文件将丢失。确定离开吗？")) {
-        evt.preventDefault();
-        evt.returnValue = "";
-    }
-});
 
 const _w = window as any;
 const composeEnhancers = _w.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || Redux.compose;
@@ -41,7 +36,9 @@ const store = Redux.createStore(R.appReducer, defaultState, composeEnhancers(
         workerClientMiddleware)
 ));
 
-initWorkerClient(store);
+if (appInfo.pageId === "MAIN") {
+    initWorkerClient(store);
+}
 
 ReactDOM.render(
     <ReactRedux.Provider store={store}>

src/ui/scripts/components/page-footer.tsx

@@ -4,7 +4,7 @@ import * as A from "./actions";
 import * as S from "./state";
 
 export const actionListenerMiddleware = ((store: Redux.MiddlewareAPI<S.AppState>) => (next: Redux.Dispatch<S.AppState>) => (action: Redux.Action) => {
-    switch (action.type) {
+    switch (action.type as A.ActionType) {
         case "OPEN_FILE": {
             const { appInfo } = store.getState();
             const { file } = action as A.OpenFileAction;
@@ -19,6 +19,14 @@ export const actionListenerMiddleware = ((store: Redux.MiddlewareAPI<S.AppState>
             }
             break;
         }
+        case "SET_HEX": {
+            window.addEventListener("beforeunload", (evt) => {
+                if (!window.confirm("即将离开此页面，打开的文件将丢失。确定离开吗？")) {
+                    evt.preventDefault();
+                    evt.returnValue = "";
+                }
+            });
+        }
     }
     return next(action);
 }) as Redux.Middleware;

src/ui/scripts/index.tsx

@@ -10,6 +10,8 @@ export interface AppState {
     asmView?: AsmView;
 }
 
+export type PageIdType = "MAIN" | "DONATE";
+
 export interface AppInfo {
     title: string;
     version: string;
@@ -19,6 +21,7 @@ export interface AppInfo {
     releaseNotesUrl: string;
     buildTimeLocal: string;
     year: string;
+    pageId: PageIdType;
 }
 
 export interface FileInfo {

src/ui/scripts/store/action-listener.ts

@@ -35,6 +35,7 @@ body, input, select, th {
     padding: $size-pad-lg;
     white-space: nowrap;
     font-size: $size-txt-sm;
+    line-height: 24px;
 
     a {
         color: $color-txt-lt;
@@ -48,12 +49,27 @@ body, input, select, th {
             margin-left: 2 * $size-pad-lg;
         }
 
+        &.right {
+            float: right;
+        }
+
         &>strong {
             font-size: $size-txt-mid-lg;
         }
     }
 }
 
+#donation-prompt {
+    position: fixed;
+    right: $size-pad-lg;
+    bottom: 60px;
+    width: 155px;
+    color: $color-bg-dk;
+    background: $color-txt-lt;
+    padding: $size-pad-lg $size-pad-lg+2;
+    border-radius: $size-pad-lg+2;
+}
+
 #app-content {
     overflow: auto;
     padding: $size-pad-lg;