Allow for using CSS in PhantomJS deck rendering
This commit is contained in:
parent
9ad1329962
commit
9e16ea14ad
23
src/Deck.vue
23
src/Deck.vue
@ -1,10 +1,8 @@
|
||||
<template>
|
||||
<!-- style is inline for phantomjs -->
|
||||
<div style="white-space: nowrap;">
|
||||
<div class="deck">
|
||||
<div v-for="cardRow in chunkedCards">
|
||||
<span v-for="card in cardRow" @click="$emit('input', card)">
|
||||
<Hero v-bind="card.card" style="white-space: initial;"> </Hero>
|
||||
</span>
|
||||
<Hero v-for="card in cardRow" v-model="selected"
|
||||
:type="card.type" :card="card.card"> </Hero>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -43,3 +41,18 @@
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.deck {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.deck svg {
|
||||
white-space: initial;
|
||||
}
|
||||
|
||||
.deck svg p {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
</style>
|
||||
|
@ -124,6 +124,7 @@
|
||||
deck: this.deckInfo,
|
||||
_id: this.deckID === 'new' ? undefined : this.deckID,
|
||||
dom: (new XMLSerializer()).serializeToString(this.$refs.deck.$el),
|
||||
css: document.styleSheets[0].href,
|
||||
})})
|
||||
.then(r => r.json())
|
||||
.then(j => this.$router.replace('/edit/' + j.id))
|
||||
|
@ -94,28 +94,31 @@ function getTTSJSON(req, res) {
|
||||
});
|
||||
}
|
||||
|
||||
function handleUpload(req, res) {
|
||||
async function handleUpload(req, res) {
|
||||
const json = req.body;
|
||||
|
||||
console.log("Making deck image");
|
||||
phantom.create().then(ph => ph.createPage().then(
|
||||
page => {
|
||||
page.on('onLoadFinished', status => {
|
||||
if (status === 'success') {
|
||||
page.renderBase64(`PNG`).then(image => {
|
||||
db.update({_id: json.id},
|
||||
{deck: json.deck, image: image},
|
||||
{upsert: true, returnUpdatedDocs: true})
|
||||
.then(doc => res.status(201).json({id: doc._id}));
|
||||
page.close().then(() => ph.exit());
|
||||
});
|
||||
}
|
||||
else {
|
||||
console.log('Failed to load page');
|
||||
ph.exit(1);
|
||||
}
|
||||
});
|
||||
page.property('zoomFactor', 2); // pretty arbitrary
|
||||
page.property('content', '<body style="margin:0;">' + json.dom + '</body>');
|
||||
}));
|
||||
const ph = await phantom.create();
|
||||
const page = await ph.createPage();
|
||||
|
||||
page.on('onLoadFinished', status => {
|
||||
if (status === 'success') {
|
||||
page.renderBase64(`PNG`)
|
||||
.then(image => db.update(
|
||||
{_id: json.id},
|
||||
{deck: json.deck, image: image},
|
||||
{upsert: true, returnUpdatedDocs: true}))
|
||||
.then(doc => res.status(201).json({id: doc._id}))
|
||||
.then(() => page.close().then(() => ph.exit()));
|
||||
}
|
||||
else {
|
||||
console.log('Failed to load page');
|
||||
ph.exit(1);
|
||||
}
|
||||
});
|
||||
|
||||
page.property('zoomFactor', 2); // pretty arbitrary
|
||||
page.property('content',
|
||||
'<head><link rel="stylesheet" href="' + json.css + '"></head>' +
|
||||
'<body style="margin:0;">' + json.dom + '</body>');
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user