I have this simple well-formed html like
<span><p><b>User: </b>USERNAME<br><strong>Date: </strong>from 28-04-2022 08:00:00 to 28-04-2022 16:00:00<br><strong></p></span>
and I passed to qtip but once I show the tip I see it doesn't apply bold formatting...indeed saving into a normal html file it works well.... shall I have to add some particular option?
In the specific with this javascript :
$(info.el).qtip({
content: { text: $.ajax({url:"http://"+window.location.host+"/...../my.php?action=load_eventdetails&ID="+info.event.id, async:false}).responseText },
position: { target: 'mouse', effect: false, viewport: .... , adjust: { x: 10, y: 10, method: 'flipinvert' } },
});
I call a php to obtain an html string:
<html><body><p><span><b>User: </b>Name Surname<br><b>Date: </b>from 04-03-2016 08:00:00 to 04-03-2016 16:00:00<br><b>Room: </b>Room 1 ()<br><b>Placement: </b><br><b>Services:</b><br><ol style='list-style-type: circle'><li style='font-size: 13px'>n° 1 - Lorem Ipsum</li><li style='font-size: 13px'>n° 6 - Lorem Ipsum</li><li style='font-size: 13px'>n° 1 - Lorem Ipsum</li><li style='font-size: 13px'>n° 1 - Lorem Ipsum</li><li style='font-size: 13px'>n° 6 - Lorem Ipsum</li></ol><div style='font-size: 13px;margin-bottom: 1px'><div style='float:left'><b>Price:</b></div><div style='float:right'>€ XX,00</div></div><br><div style='font-size: 13px;margin-bottom: 5px'><div style='float:left'><b>Lorem Ipsum:</b></div><div style='float:right'>€ XX.00</div></div><br><div style='font-size: 13px;margin-bottom: 5px'><div style='float:left'><b>Lorem Ipsum:</b></div><div style='float:right'>€ XX.00</div></div><br><div style='font-size: 13px;margin-bottom: 1px'><div style='float:left'><b>Lorem Ipsum:</b></div><div style='float:right'>€ XX,XX</div></div><br> <div style="font-size: 13px;margin-bottom: 1px"><div style="float:left"><img src=".../images/myimg.png" /> <b>STATUS</b></div></div> </span></p></body></html>
Where with a simple html file I get correctly the result with bold formatting where expected...
Thanks in advance!
Cheers! :-)
Related
I have a site using Bootstrap 5 that includes the following input tag:
<input class="form-check-input ms-1" id="validated" name="validated" type="checkbox" checked>
The inclusion of the form-check-input class causes the client to generate the error message:
Refused to load the image 'data:image/svg+xml,%3csvg
xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath
fill='none' stroke='%23fff' stroke-linecap='round'
stroke-linejoin='round' stroke-width='3' d='M6 10l3
3l6-6'/%3e%3c/svg%3e' because it violates the following Content
Security Policy directive: "img-src 'self' www.w3.org".
Can someone please lend me a clue as to why this is being blocked? I have tried all the permutations of data://www.w3.org, http://www.w3.org, *.w3.org, etc., in the CSP and none seem to satisfy the client.
This happens identically with a Chrome and Edge client.
You can also extract the SVGs into separate files using Webpack. For example, see the official documentation at https://getbootstrap.com/docs/5.2/getting-started/webpack/#extracting-svg-files
modules.exports = {
...,
module: {
rules: [
{
mimetype: 'image/svg+xml',
scheme: 'data',
type: 'asset/resource',
generator: {
filename: 'icons/[hash].svg'
}
}
]
}
};
Bootstrap CSS stylesheet contains .form-check-input class with data:-Url images:
.form-check-input:checked[type=checkbox] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
background-color: #0d6efd;
border-color: #0d6efd;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
To allow these images you have to add data: scheme-source into img-src directive.
I'm building a custom theme for a client and looks like I am going to have to create custom blocks and elements, but it has been a nightmare to understand how Shopware 6 works.
I copied the cms image element under my theme folder, following the directory structure that the documentation points. I did it that way to not miss any code or part I could forget or skip and then just added some new fields in it to kind of extend that new custom element. It kind of worked at the end, I also touched the twig and scss files and I could see at the frontend this new custom element. But then I tried to use the image element that comes with Shopware, but now looks like it is overriden by this new custom element I was trying to create.
Under ../custom/plugins/MyTheme/src/Resources/app/administration/src/module/sw-cms/elements/customElement/ the root index.js file which worked as I needed was:
import './component';
import './config';
import './preview';
Shopware.Service('cmsService').registerCmsElement({
name: 'image', // This is key I think but don't understand the relation.
label: 'Custom Element',
component: 'sw-cms-el-custom-element',
configComponent: 'sw-cms-el-config-custom-element',
previewComponent: 'sw-cms-el-preview-custom-element',
defaultConfig: {
media: {
source: 'static',
value: null,
required: true,
entity: {
name: 'media'
}
},
displayMode: {
source: 'static',
value: 'standard'
},
url: {
source: 'static',
value: null
},
newTab: {
source: 'static',
value: false
},
minHeight: {
source: 'static',
value: '340px'
},
verticalAlign: {
source: 'static',
value: null
},
cardColor: { // This is a new field I added
source: 'static',
value: 'true'
},
cardContent: { // This is a new field I added
source: 'static',
value: `
<h2>Lorem Ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
`.trim()
}
}
});
The code above makes my new custom element to work but then it overrides the image element entirely if I need to use that element somewhere else. I feel like the name: 'image' is the key here because then I replace it by another name let's say name: 'custom-element' and then the custom element didn't work at all, even though I copied the image element exactly as it is and just replaced it that name. The errors are related to the new fields I added, it says the values are undefined.
I have been reading some other people with the same issue and some guys talk about entities or resolvers but not sure how to follow that up.
Any advice would be appreciated. Thanks.
I want to create array of object of product sizes inside array of object of product info.
this is the HTML tree I am trying to scrape
<div class="product-thumbShim"></div><a target="_blank" href="tshirts/herenow/herenow-men-black-printed-round-neck-t-shirt/4318138/buy" style="display: block;"><div class="product-imageSliderContainer"><div class="product-sliderContainer" style="display: block;"><div style="background: rgb(244, 255, 249);"><div style="height: 280px; width: 100%;"><picture class="img-responsive" style="width: 100%; height: 100%; display: block;"><source srcset="
https://assets.myntassets.com/f_webp,dpr_1.0,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg ,
https://assets.myntassets.com/f_webp,dpr_1.5,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg 1.5x,
https://assets.myntassets.com/f_webp,dpr_1.8,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg 1.8x,
https://assets.myntassets.com/f_webp,dpr_2.0,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg 2.0x,
https://assets.myntassets.com/f_webp,dpr_2.2,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg 2.2x,
https://assets.myntassets.com/f_webp,dpr_2.4,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg 2.4x,
https://assets.myntassets.com/f_webp,dpr_2.6,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg 2.6x,
https://assets.myntassets.com/f_webp,dpr_2.8,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg 2.8x" type="image/webp"><img src="https://assets.myntassets.com/dpr_2,q_60,w_210,c_limit,fl_progressive/assets/images/4318138/2018/5/4/11525433792765-HERENOW-Men-Black-Printed-Round-Neck-T-shirt-2881525433792598-1.jpg" class="img-responsive" alt="HERE&NOW Men Black Printed Round Neck T-shirt" title="HERE&NOW Men Black Printed Round Neck T-shirt" style="width: 100%; display: block;"></picture></div></div></div></div><div class="product-productMetaInfo"><h3 class="product-brand">HERE&NOW</h3><h4 class="product-product">Men Printed Round Neck T-shirt</h4><h4 class="product-sizes"><!-- react-text: 396 -->Sizes: <!-- /react-text --><span class="product-sizeInventoryPresent">S, </span><span class="product-sizeInventoryPresent">M, </span><span class="product-sizeInventoryPresent">L, </span><span class="product-sizeInventoryPresent">XL, </span><span class="product-sizeInventoryPresent">XXL</span></h4><div class="product-price"><span><span class="product-discountedPrice"><!-- react-text: 405 -->Rs. <!-- /react-text --><!-- react-text: 406 -->374<!-- /react-text --></span><span class="product-strike"><!-- react-text: 408 -->Rs. <!-- /react-text --><!-- react-text: 409 -->749<!-- /react-text --></span></span><span class="product-discountPercentage">(50% OFF)</span></div></div></a><div class="image-grid-similarColorsCta product-similarItemCta"><span class="myntraweb-sprite image-grid-similarColorsIcon sprites-similarProductsIcon"></span><span class="image-grid-iconText">VIEW SIMILAR</span></div><div class="product-actions "><span class="product-actionsButton product-wishlist " style="width: 100%; text-align: center;"><!-- react-text: 416 -->wishlist<!-- /react-text --></span></div><div class="product-sizeDisplayDiv"><div class="product-sizeDisplayHeader"><span>Select a size</span><span class="myntraweb-sprite product-sizeDisplayRemoveMark sprites-remove"></span></div><div class="product-sizeButtonsContaier"><button class="product-sizeButton">S</button><button class="product-sizeButton">M</button><button class="product-sizeButton">L</button><button class="product-sizeButton">XL</button><button class="product-sizeButton">XXL</button></div></div>"
adn this is my current output
[
{
brandName: 'max',
productName: 'Colourblocked Round Neck T-shirt',
productSizes: 'Sizes: S, M, L, XL, XXL'
},
{
brandName: 'YOLOCLAN',
productName: 'Printed Round Neck T-shirt',
productSizes: 'Sizes: S, M, L, XL, XXL, 3XL'
},
{
brandName: 'Maniac',
productName: 'Colourblocked Hooded T-shirt',
productSizes: 'Sizes: S, M, L, XL'
}
]
and my expected output is
[
{
brandName: 'max',
productName: 'Colourblocked Round Neck T-shirt',
productSizes: [
Size: 'S',
Size: 'M',
Size: 'L',
]
}
]
current code :
const res = await page.$$eval(".product-base", (productInfo) =>
productInfo.map((product) => {
return {
brandName: product.querySelector(".product-brand").innerText,
productName: product.querySelector(".product-product").innerText,
productSizes: product.querySelector(".product-sizes").innerText,
};
}),
);
and also how often I can scrape websites in order to not get my IP blocked
You could do something like this:
const res = await page.$$eval(".product-base", (productInfo) =>
productInfo.map((product) => {
let productSizeText = product.querySelector(".product-sizes").innerText;
let productSizeArr = productSizeText.replace('Sizes:', '').trim().split(',');
return {
brandName: product.querySelector(".product-brand").innerText,
productName: product.querySelector(".product-product").innerText,
productSizes: productSizeArr,
};
}),
);
Second answer for the HTML URLs: Using Puppeteer.js you can get the source tag URLs like below:
let imageURLArr = await page.evaluate(() => {
//This will get the first sourceTag of the DOM, change the value 0 according to your DOM that you are scraping if it has more source tags and is not the first source tag element
let sourceTag = document.getElementsByTagName('source')[0];
// check selector exists
if (sourceTag) {
// This will give you all the image URLs of source tag
let imagURLs = sourceTag.getAttribute('srcset')
return imagURLs;
}
});
console.log(imageURLArr);
Be forgiving, I am new to css let alone fontawesome :-)
I wanted to have a nice set of rating stars 0-5 and I managed it sort of using 4.7
https://jsfiddle.net/BoxRec/p3zgeLbt/36
content: "\f005\f006\f006\f006\f006";
However I needed half stars to complete the look and this required going to fontawesome 5
https://jsfiddle.net/BoxRec/p3zgeLbt/38
content: "\f005\f089\f006\f006\f006";
So I used the 5 library and now I now have the half star \f5c0 but the full star \f005 renders the same as the empty star \f006
https://jsfiddle.net/BoxRec/p3zgeLbt/46/
content: "\f005\f5c0\f006\f006\f006";
If you go to the cheatsheet, you can see that \f006 is gone in FontAwesome 5. I would (not a css guy) just use before and after tags to make the same effect. Regular vs solid is just changing the font weight.
note that I changed the font-family to 'Font Awesome\ 5 Free'
i.star {
font-family: 'Font Awesome\ 5 Free';
font-size: 16px;
color: #ffaa00;
font-style: normal;
}
i.s1::before {
content: "\f005";
font-weight: 900;
}
i.s1::after {
content: "\f005\f005\f005\f005";
font-weight: 200;
}
i.s1-5::before {
content: "\f005\f5c0";
font-weight: 900;
}
i.s1-5::after {
content: "\f005\f005\f005";
font-weight: 200;
}
Had to add this to the HTML:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
I've created a pie chart using react and svg circles. Now I want to position the text labels so that the text starts close to the middle of the circle and continue outwards, wheel of fortune style.
This is my code, rendering the svgs. In chrome dev tools I tried to apply tranform: rotate(45deg); and adjusting the number but the text keeps flyying away outside the circle.
<svg viewBox="0 0 32 32">
{elements.map((element, index) => (
<g>
<circle
key={_id}
r={16 / 1.0053}
cx={'50%'}
cy={'50%'}
style={{
strokeDasharray: `${percentage}, 100.53`,
strokeDashoffset: -offset,
stroke: segmentColor,
}}
textAnchor="middle"
></circle>
<text
textAnchor="middle"
x={'50%'}
y={'50%'}
fontFamily={'sans-serif'}
fontSize={'20px'}
fill="black"
textAnchor="start"
>
{title}
</text>
</g>
))}
</svg>
```
The issue is that rotation is about the origin, which is the top left of your image. The easiest way around this is to change the viewBox so the origin is in the center of your SVG: viewBox="-16 -16 32 32".
Then you calculate the angle based on the offset and the percentage.
I assume you have some elements like this:
const elements = [
{ percentage: 15, offset: 0, title: 'title', segmentColor: 'red' },
{ percentage: 40, offset: 15, title: 'another title', segmentColor: 'blue' },
{ percentage: 25, offset: 55, title: 'and another', segmentColor: 'green' },
{ percentage: 20, offset: 80, title: 'yet another', segmentColor: 'black' },
];
So something like this would work:
<svg viewBox="-16 -16 32 32">
{elements.map((element, index) => {
const angle = (element.offset + element.percentage / 2) * 360 / 100;
return <g key={index}>
<circle
r={15.5}
style={{
fill: 'none',
strokeDasharray: `${element.percentage}, 100.53`,
strokeDashoffset: -element.offset,
stroke: element.segmentColor,
}}
textAnchor="middle"
></circle>
<text
x="10%"
transform={`rotate(${angle})`}
fontFamily={'sans-serif'}
fontSize={'2px'}
fill="black"
textAnchor="start"
alignmentBaseline="middle"
>
{element.title}
</text>
</g>
})}
</svg>
Now the x value on the text determined how from the center the text starts.