Not sure if I'm doing this the right way, but the problem I'm trying to solve is to have a page counter on every page (using puppeteer footerTemplate), and on the last page, a standard disclaimer produced via the regular html.
As can be seen in the below screenshot, the brown border is from the html tag. The blue border from my footer and the black border is from the footerTemplate.
This is the current code. I thought that using a transparent background might work, but no luck so far.
Open to other suggestions as well, but everything I tried so far have failed due to the disclaimer should only be on the last page.
const page = await browser.newPage()
await page.setContent(html, { waitUntil: 'networkidle2' })
await page.evaluate(() => document.body.style.background = 'transparent');
const buffer = await page.pdf({
format: 'A4',
displayHeaderFooter: true,
headerTemplate: '<span></span>',
footerTemplate: '<footer html code>',
printBackground: true,
omitBackground: true,
margin: {
top: '40px',
bottom: '40px',
left: '50px',
right: '50px',
}
})
Related
I want to add some local images(emojis) to pell rich editor component. I don't want to use Rich Toolbar, and have some custom emoji picker to select the emoji.
When user selects an emoji, I want to show an image for that emoji in the rich editor. These images are located locally in the project, so I tried insertImage method but cannot use it properly.
I have used insertImage this way:
editorRef.current?.insertImage(
'./1f602.png',
'width: 64px; height: 64px',
)
But it doesn't work.
How can I add a local image to pell rich editor?
I solved it like...
import ImgToBase64 from 'react-native-image-base64';
import ImagePicker from "react-native-image-crop-picker";
openGalleryClickProfile() {
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true,
}).then((image) => {
console.log("Imagemime", image);
this.onPressAddImage(image)
});
}
onPressAddImage(image){
ImgToBase64.getBase64String(image.path)
.then((base64String) => {
const str = `data:${image.mime};base64,${base64String}`
this.richText.current?.insertImage(
str
);
})
.catch((err) => {
console.log("base64:Image:", err)
})};
I am trying to render a simple Azure Map in a vue.js single-file component. I can get the map to draw at a specified center and zoom. And draw a line segment exactly where I want it.
But I cannot draw a marker properly. It does draw, but it is seriously south-west from the specified coordinate (which is on the an endpoint of a line segment drawn previously).
Here's a single page Vue.js 'App.vue':
<template>
<div id="myMap"></div>
</template>
<script>
import * as atlas from "azure-maps-control";
export default {
mounted: function() {
this.map = new atlas.Map("myMap", {
center: [-113.666783, 53.806008],
zoom: 7,
view: "Auto",
authOptions: {
authType: "subscriptionKey",
subscriptionKey: "<redacted>",
},
});
let self = this;
//Wait until the map resources are ready.
this.map.events.add("ready", function() {
//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
self.map.sources.add(dataSource);
//Create a line and add it to the data source.
dataSource.add(
new atlas.data.LineString([
[-112.926043, 53.803],
[-113.666783, 53.806],
])
);
//Create a line layer to render the line to the map.
self.map.layers.add(
new atlas.layer.LineLayer(dataSource, null, {
strokeColor: "blue",
strokeWidth: 5,
})
);
//Create an HTML marker and add it to the map.
var marker1 = new atlas.HtmlMarker({
color: "DodgerBlue",
position: [-112.926043, 53.803],
anchor: "bottom",
htmlContent: '<div class="pulseIconNormal"></div>',
popup: new atlas.Popup({
content:
'<div style="padding:10px">Sensor</div>',
pixelOffset: [0, -30],
}),
});
self.map.markers.add(marker1);
//Add a click event to toggle the popup.
self.map.events.add("click", marker1, () => {
marker1.togglePopup();
});
});
}
}
</script>
<style>
#myMap {
height: 100vh;
width: 100vw;
}
.pulseIconNormal {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: blue;
}
</style>
When I looked at DOM for the marker (in Firefox dev tools), this is the style that I see:
transform: translate(-50%, -100%) translate(737px, 235px) rotateX(0deg) rotateZ(0deg);
This isn't coming from CSS, but is in inline. That's the reason, but not the explanation why. It appears the control itself is generating this.
I found the problem. I am using NPM to load azure-maps-control and I had to explicitly add
<style src='azure-maps-control/dist/atlas.min.css'></style>
to the .vue file.
The map div in your code isn't closed properly. Instead of <div id="myMap" /> it should be <div id="myMap"></div>. HTML standards say self closing div's are invalid. Give that a try and see if it helps.
If it doesn't try inspecting the HTML marker DOM to see if any CSS is being appended to it by your app and try adjusting to see if it addresses the issue.
Looking at your code, the HTML marker should be anchored bottom center to its position.
For the same problem with Angular (11), I had to add the azure css file to my angular.json like so:
"styles": [
"src/styles/styles.scss",
"node_modules/azure-maps-control/dist/atlas.min.css"
],
I want to create a Tabcontainer and fill its TabPage contents programmatically, but the TabPages won't be displayed. So far my Code:
_buildUI: function () {
var bordercontainer = new dj_BorderContainer({ style: "height: 100%; width: 100%;", gutters: false, region: "top" });
var tabcontainer = new dj_TabContainer({ useMenu: false, region: "center", tabposition: "top", doLayout: "false", style: "height: 100%; width: 100%;" });
for (var i = 0; i < ki_KisConfig.widgets.movingwindow.calccount; i++) {
var contentpane = new dj_ContentPane({ title: "Calculation " + (i + 1), content: "content", style: "height: 100%; width: 100%;" });
//contentpane.startup();
tabcontainer.addChild(contentpane);
}
tabcontainer.startup();
bordercontainer.addChild(tabcontainer);
bordercontainer.startup();
do_domConstruct.place(bordercontainer.domNode, this.interface, "first");
bordercontainer.resize({ h: "265px", w: "432px" });
},
I've googled around and tried different things. As you cann see I'm setting the doLayout-Property mentioned here. I also use a BorderContainer like mentioned here in the last posting and I'm trying to resize it after creating the TabContainer like mentioned here.
It doens't matter if I'm calling the method in the postCreate- or the startup-function of the containing widget.
I'm trying to set the width and height via style or to startup every "sub"widget.
Nothing works and the TabContainer only gets displayed when I'm resizing the browserwindow or resizing it by opening/closing the developertools (F12). If it gets displayed it looks like I want it. The only problem is that the TabList has a size of 0x0 and the same with the TabPaneWrapper when I'm inspecting directly the DOM.
Has anyone any idea?
Edit
After calling startup only on the BorderContainer I get this result:
The tablist layout is strange and also the content of the programmatic selected tab isn't displayed. Everything is again fine after a window resize:
Solution (summary)
I retrieved the best result with defining the BorderContainer and the TabContainer in the HTML-template. Unfortunately the layout of the tablist still failed. This answer delivered the solution for correct tablist layout: My widget didn't contain resize() so I added it and everything is now working fine.
resize: function() {
var tabcontainer = dj_registry.byId("tabContainerMW");
if (tabcontainer) {
tabcontainer.resize(arguments);
}
},
Some notes to your code:
The region attribute is here not required. Its only used to indicate the position for BorderContainer children.
var bordercontainer = new dj_BorderContainer({
style: "height: 100%; width: 100%;",
gutters: false,
region: "top"
});
You don't need to set a width and height on your ContentPane, let this do the TabContainer.
var contentpane = new dj_ContentPane({
title: "Calculation " + (i + 1),
content: "content",
style: "height: 100%; width: 100%;"
});
I've created a sample for you, maybe this helps you out.
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane", "dojo/domReady!"],
function(BorderContainer, TabContainer, ContentPane) {
// first create the BorderContainer without any arguments.
let bc = new BorderContainer({}, "bc");
// then create your TabContainer with region center.
let tc = new TabContainer({
region: 'center'
}, document.createElement("div"));
// add it to your BorderContainer
bc.addChild(tc);
// then create three tab panes (ContentPane) and add them to your TabContainer
let cp = new ContentPane({
content: "My tab pane!",
title: "My tab title"
}, document.createElement("div"));
tc.addChild(cp);
let cp2 = new ContentPane({
content: "My second tab pane!",
title: "My second tab title"
}, document.createElement("div"));
tc.addChild(cp2);
let cp3 = new ContentPane({
content: "My closable tab pane!",
title: "My closable tab title",
closable: true
}, document.createElement("div"));
tc.addChild(cp3);
// call startup on your BorderContainer. startup of BorderContainer will call also the startup methods of all children (TabContainer, ContentPane's).
bc.startup();
});
body, html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0 auto;
}
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<span class="tundra" style="width: 100%; height: 100%;">
<div id="bc" style="width: 100%; height: 100%;"></div>
</span>
Edit
As an addition:
I was able to create a fiddle, which reproduces the failure. The problem here is that the createDialogContent() method is getting called after the dialog show's up. As I mentioned below in the comments section, it is important to create a dialog's content before showing it.
In this fiddle (bottom end of code) are two sections, which call both the same methods, just transposed. In the first snippet, the methods are called in the wrong order. Int the second snippet, they're called in the right order.
// uncomment this
createDialogContent();
dialog.show();
// comment this
// dialog.show();
// createDialogContent();
When I call the simplemodal method, I do that like so:
jQuery("#stats").modal({
maxWidth: 400,
maxHeight: 300,
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function () {
dialog.data.hide();
dialog.container.fadeIn('slow', function () {
dialog.data.slideDown('slow');
});
});
},
onClose: function (dialog) {
dialog.data.fadeOut('slow', function () {
dialog.container.hide('slow', function () {
dialog.overlay.slideUp('slow', function () {
jQuery.modal.close();
});
});
});
}
});
However, when the modal is rendered, both max values are ignored. The resulting element with inline styles is
<div id="simplemodal-container"
class="simplemodal-container"
style="height: 697px; width: 1861px; left: 231px; top: 85.5px; position: fixed; z-index: 1002;">
Is there an issue with the way I specified the max values? Or, is there an issue with simplemodal?
Thanks! E
I think those min/max settings are used to just set the actual height/width for SimpleModal. The modal's container will be sized according to the content as long as the content's size is within the min/max settings. Otherwise, the modal container size will be set at to the min/max values. That's all it does. For example, if the content is bigger than maxHeight & maxWidth settings, then there will be scroll bars:
See this fiddle here
Your content
<div id="stats" style="width:400px; height:400px;">
Your content will show in modal with scroll bars,
because it is bigger than maxWidth, maxHeight.
</div>
The modal
jQuery("#stats").modal({
maxWidth: 300,
maxHeight: 300,
minWidth: 100,
minHeight: 100,
...
If you don't want the modal to shrink/expand with the content, you can force the modal to stay at a specified width & height. Some people even swap out classes (one for normal modal, one for long modal, etc.):
#simplemodal-container {
height: 360px;
width: 600px;
}
If you dynamically change the content of the div (like from an ajax call) you can also do this:
$("#simplemodal-container").css('height', 'auto'); //Resets container height
$("#simplemodal-container").css('width', 'auto'); //Resets container width
$(window).trigger('resize.simplemodal'); //Refresh the modal dialog
I have a page that's utilizing jQuery navigation buttons that should slide content into view when each is clicked. However, when another button is clicked, I need the currently viewed content to slide back out of view before the new content slides into view.
This is what I've done so far:
$("#rules-btn").click(function () {
var effect = 'slide';
var options = { direction: 'left' };
var duration = 700;
$('#rules-pane').toggle(effect, options, duration);
});
Here's my jsfiddle that shows how it acts now. Can anyone tell me how to hide currently viewed content when another button is clicked? Thanks.
By the way, I'm very new to jQuery...
Demo: http://jsfiddle.net/e6kaV/6/
HTML:
<div id="rules" class="pane-launcher"></div>
<div id="rules-pane" class="pane"></div>
<div id="scenarios" class="pane-launcher"></div>
<div id="scenarios-pane" class="pane"></div>
JS:
$(".pane-launcher").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'left' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});
CSS:
.pane-launcher{
position:absolute;
top: 0;
width:20px;
height:20px;
background-color:#000;
display:block;
}
#rules {
left:0px;
}
#scenarios {
left:40px;
}
.pane{
position:absolute;
left: 0;
height:50px;
display:none;
opacity:0.5;
}
#rules-pane {
top:50px;
width:200px;
background-color:#999;
}
#scenarios-pane {
top:60px;
width:170px;
background-color:#F00;
}
Remember: instead of dealing with lots of ids, it's better to use classes, both to add styles and event handlers.