From 2965e66f10838cbab52cc6e21f433ff8e48023c7 Mon Sep 17 00:00:00 2001
From: Samuel Kim <samuel_kim@noreply.door43.org>
Date: Thu, 7 Jan 2021 20:54:11 +0000
Subject: [PATCH] =?UTF-8?q?=D0=97=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=B8?=
 =?UTF-8?q?=D1=82=D1=8C=20=D1=84=D0=B0=D0=B9=D0=BB=D1=8B=20'src/elements/t?=
 =?UTF-8?q?s-print'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/elements/ts-print/ts-print.html | 294 +++++++++++++++++++++++++++-
 1 file changed, 293 insertions(+), 1 deletion(-)

diff --git a/src/elements/ts-print/ts-print.html b/src/elements/ts-print/ts-print.html
index 0519ecb..03164e0 100644
--- a/src/elements/ts-print/ts-print.html
+++ b/src/elements/ts-print/ts-print.html
@@ -1 +1,293 @@
- 
\ No newline at end of file
+
+<link rel="import" href="../../components/neon-animation/neon-animation.html">
+<link rel="import" href="../../components/marked-element/marked-element.html">
+<link rel="import" href="../../components/paper-button/paper-button.html">
+
+<dom-module id="ts-print">
+
+    <style>
+
+        :host {
+            display: flex;
+            flex-direction: column;
+        }
+
+        #header {
+            background-color: var(--primary-color);
+            min-height: 50px;
+        }
+
+        #header iron-icon {
+            margin: 0 15px;
+        }
+
+        #heading {
+            font-size: 125%;
+            color: var(--reverse-text-color);
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            min-height: 45px;
+        }
+
+        .click {
+            cursor: pointer;
+        }
+
+        #content {
+            margin: 25px auto;
+            padding: 0 50px;
+            max-width: 730px;
+            overflow-y: auto;
+            background-color: var(--card-background-color);
+        }
+
+        .button {
+            background: var(--accent-color);
+            color: var(--reverse-text-color);
+            text-transform: uppercase;
+            padding: 6px;
+            margin-left: 50px;
+            font-size: 80%;
+        }
+
+        h1, h2 {
+            text-align: center;
+        }
+
+        .hide {
+            display: none;
+        }
+
+        .break {
+            margin-bottom: 50px;
+            padding-bottom: 50px;
+            border-bottom: 1px dashed var(--secondary-text-color);
+        }
+
+        .obs #notices- {
+            margin-top: 50px;
+            padding-top: 50px;
+            border-top: 1px dashed var(--secondary-text-color);
+        }
+
+        .titles {
+            margin-top: 50px;
+        }
+
+        .justify, .justify * {
+            text-align: justify;
+        }
+
+        .double, .double * {
+            line-height: 190%;
+        }
+
+        .nobreak p {
+            margin: 0 0 30px;
+        }
+
+        #license a {
+            text-decoration: none;
+            color: black;
+        }
+
+        #attrib {
+            font-size: 80%;
+            margin: 0 20px;
+        }
+
+        #attrib a {
+            color: var(--reverse-text-color);
+        }
+
+        .rtl {
+            direction: rtl;
+        }
+
+    </style>
+
+    <template>
+
+        <div id="header">
+            <div id="heading">
+                <iron-icon class="click" icon="arrow-back" on-tap="goback"></iron-icon>
+                <span class="click" on-tap="goback">[[createtitle(backto)]]</span>
+                <iron-icon icon="chevron-right"></iron-icon>
+                <span>Print Preview</span>
+                <paper-button raised class="button" on-tap="print">Save to PDF</paper-button>
+                <span id="attrib">(PDF's generated by <a href="https://www.princexml.com/">Prince</a>)</span>
+            </div>
+        </div>
+        <div id="content">
+            <h1 id="title" class="break titles targetfont"></h1>
+            <div id="license" class="break">
+                <marked-element id="licenseholder">
+                    <div class="markdown-html"></div>
+                </marked-element>
+            </div>
+            <div id="textholder" class$="[[textclass(currentproject.projectmeta.target_language.direction)]]"></div>
+        </div>
+
+    </template>
+
+</dom-module>
+
+<script>
+
+    Polymer({
+
+        is: 'ts-print',
+
+        behaviors: [
+            Polymer.NeonAnimatableBehavior
+        ],
+
+        properties: {
+            route: {
+                type: String,
+                notify: true,
+                observer: 'load'
+            },
+            backto: {
+                type: String,
+                value: ''
+            },
+            options: {
+                type: Object,
+                value: {},
+                notify: true
+            },
+            currentproject: {
+                type: Object,
+                value: {}
+            },
+            animationConfig: {
+                value: function () {
+                    return {
+                        'entry': {
+                            name: 'slide-from-right-animation',
+                            node: this
+                        },
+                        'exit': {
+                            name: 'slide-right-animation',
+                            node: this
+                        }
+                    }
+                }
+            }
+        },
+
+        textclass: function (direction) {
+            return direction === "rtl" ? 'targetfont targetsize rtl' : 'targetfont targetsize';
+        },
+
+        rendertext: function () {
+            var path = require('path');
+            var imagePath = path.join(App.configurator.getValue('rootdir'), 'images', 'obs');
+            var chunks = this.currentproject.chunks;
+            var options = this.currentproject.printoptions;
+            var filename = this.currentproject.projectmeta.project.id === "obs" ? "OBS_LICENSE.md" : "LICENSE.md";
+
+            this.$.licenseholder.markdown = App.printManager.getLicense(filename);
+            this.$.title.innerHTML = chunks[0].transcontent || chunks[0].srccontent;
+            if (this.currentproject.projectmeta.project.id === "obs") {
+                this.$.licenseholder.classList.add('obs');
+                this.$.textholder.innerHTML = App.renderer.renderObsPrintPreview(chunks, options, imagePath);
+            } else {
+                this.$.textholder.innerHTML = App.renderer.renderPrintPreview(chunks, options);
+            }
+        },
+
+        createtitle: function (backto) {
+            if (backto === "translate") {
+                return "Project";
+            } else if (backto === "review") {
+                return "Review";
+            } else {
+                return "Home";
+            }
+        },
+
+        load: function () {
+            if (this.route === "preview") {
+                var links = this.getElementsByTagName('a');
+
+                for (var i = 0; i < links.length; i++) {
+                    links[i].addEventListener('click', this.externalClick);
+                }
+
+                this.set('backto', App.configurator.getValue("backto"));
+            }
+        },
+
+        externalClick: function (event) {
+            var shell = require('electron').shell;
+
+            event.preventDefault();
+            shell.openExternal(this.href);
+        },
+
+        goback: function () {
+            var mythis = this;
+            var backto = this.backto;
+
+            mythis.$.content.scrollTop = 0;
+            mythis.set('route', backto);
+
+            setTimeout(function() {
+                if (backto === "translate") {
+                    mythis.fire('iron-signal', {name: 'translateright'});
+                }
+                if (backto === "review") {
+                    mythis.fire('iron-signal', {name: 'reviewright'});
+                }
+            }, 500);
+        },
+
+        print: function () {
+            var mythis = this;
+            var name = this.currentproject.projectmeta.unique_id;
+            var defaultPath = App.configurator.getUserPath('datalocation', name);
+            var direction = this.currentproject.projectmeta.target_language.direction;
+            var filePath = App.ipc.sendSync('save-as', {options: {defaultPath: defaultPath, filters: [{name: 'PDF Files', extensions: ['pdf']}]}});
+            if (!filePath) {
+                return;
+            }
+
+            mythis.set('options', {});
+            mythis.set('options.body', "Creating PDF. Please wait...");
+            mythis.set('options.loading', true);
+            mythis.fire('iron-signal', {name: 'openloading'});
+
+            var title = mythis.$.title.innerHTML;
+            var license = mythis.$.license.innerHTML;
+            var body = mythis.$.textholder.innerHTML;
+
+            setTimeout(function() {
+                return App.printManager.savePdf(title, license, body, filePath, direction)
+                    .then(function () {
+                        mythis.set('options.title', "PDF Created");
+                        mythis.set('options.body', "Your project has been successfully saved to a PDF.");
+                        mythis.set('options.loading', false);
+                        mythis.goback();
+                    })
+                    .catch(function (err) {
+                        var errmessage = "An error occurred saving your project";
+                        if(err !== null) {
+                            errmessage = err;
+                        }
+                        mythis.set('options.title', "Print Failed");
+                        mythis.set('options.body', errmessage);
+                        mythis.set('options.loading', false);
+                    });
+            }, 500);
+        },
+
+        ready: function () {
+
+        }
+
+    });
+
+</script>