See in Reader
Загрузить файлы 'src/elements/ts-print'
This commit is contained in:
Samuel Kim
parent
6279831a6d
commit
2965e66f10
|
|
@ -1 +1,293 @@
|
|||
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue