Allow for using CSS in PhantomJS deck rendering
This commit is contained in:
parent
1819195e50
commit
d5c99ea5cf
23
src/Deck.vue
23
src/Deck.vue
@ -1,10 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- style is inline for phantomjs -->
|
<div class="deck">
|
||||||
<div style="white-space: nowrap;">
|
|
||||||
<div v-for="cardRow in chunkedCards">
|
<div v-for="cardRow in chunkedCards">
|
||||||
<span v-for="card in cardRow" @click="$emit('input', card)">
|
<Hero v-for="card in cardRow" v-model="selected"
|
||||||
<Hero v-bind="card.card" style="white-space: initial;"> </Hero>
|
:type="card.type" :card="card.card"> </Hero>
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -43,3 +41,18 @@
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</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,
|
deck: this.deckInfo,
|
||||||
_id: this.deckID === 'new' ? undefined : this.deckID,
|
_id: this.deckID === 'new' ? undefined : this.deckID,
|
||||||
dom: (new XMLSerializer()).serializeToString(this.$refs.deck.$el),
|
dom: (new XMLSerializer()).serializeToString(this.$refs.deck.$el),
|
||||||
|
css: document.styleSheets[0].href,
|
||||||
})})
|
})})
|
||||||
.then(r => r.json())
|
.then(r => r.json())
|
||||||
.then(j => this.$router.replace('/edit/' + j.id))
|
.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;
|
const json = req.body;
|
||||||
|
|
||||||
console.log("Making deck image");
|
console.log("Making deck image");
|
||||||
phantom.create().then(ph => ph.createPage().then(
|
const ph = await phantom.create();
|
||||||
page => {
|
const page = await ph.createPage();
|
||||||
|
|
||||||
page.on('onLoadFinished', status => {
|
page.on('onLoadFinished', status => {
|
||||||
if (status === 'success') {
|
if (status === 'success') {
|
||||||
page.renderBase64(`PNG`).then(image => {
|
page.renderBase64(`PNG`)
|
||||||
db.update({_id: json.id},
|
.then(image => db.update(
|
||||||
|
{_id: json.id},
|
||||||
{deck: json.deck, image: image},
|
{deck: json.deck, image: image},
|
||||||
{upsert: true, returnUpdatedDocs: true})
|
{upsert: true, returnUpdatedDocs: true}))
|
||||||
.then(doc => res.status(201).json({id: doc._id}));
|
.then(doc => res.status(201).json({id: doc._id}))
|
||||||
page.close().then(() => ph.exit());
|
.then(() => page.close().then(() => ph.exit()));
|
||||||
});
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
console.log('Failed to load page');
|
console.log('Failed to load page');
|
||||||
ph.exit(1);
|
ph.exit(1);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
page.property('zoomFactor', 2); // pretty arbitrary
|
page.property('zoomFactor', 2); // pretty arbitrary
|
||||||
page.property('content', '<body style="margin:0;">' + json.dom + '</body>');
|
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