Integrate VAST in plyr Video Player - javascript

DEVELOPER LEVEL - Beginner
Have recently started programming. Only Familiar with HTM/CSS/JS & NodeJS.
THE PROJECT -
I'm using this ↓ code to play files using plyr Video player in my website.
LINK TO CODEPEN (The below snippet is very lengthy, please refer to the code on codepen, this will help you guys to work this out more easily)
THE PROBLEM -
How do I integrate VAST/VPAID with the Video Players in the above case, to how it is done on this codepen page → VAST Integrated DEMO
Any kind of Input is appreciated.
Here is the link to the player docs, if it helps - https://github.com/sampotts/plyr
$(document).ready(function() {
VideoAudioHandler();
});
var StopAllVideoNotv = function(v) {
$(plyr.get()).each(function() {
if (this.getContainer() != v.detail.plyr.getContainer()) {
this.pause();
}
});
};
var GetPlayingVideo = function() {
$("video").filter(function() {
var video = $(this).get(0);
return !video.paused;
});
};
var VideoAudioHandler = function() {
$("video").each(function() {
$('<div class="videoContainer"></div>').insertBefore(this).append(this);
$(this).attr("video-id", "video-" + Date.now());
});
plyr.setup(document.querySelectorAll("video"), {
enabled: true
});
$(plyr.get()).each(function() {
this.on('playing', function(event) {
StopAllVideoNotv(event);
CloseSmallVideo();
});
});
$(window).scroll(function() {
var PlayingVideo = $(plyr.get()).filter(function() {
return !this.isPaused();
})[0];
// none of videos is playing
if (PlayingVideo == undefined) return 0;
//if video is playing and not visible to screen and no small video
if (!$(PlayingVideo.getContainer()).visible(true) && $(".SmallVideo").length == 0) {
PlayingVideo.pause();
var n = $("<div class='SmallVideo'></div>");
n.attr("related-video", $(PlayingVideo.getMedia()).attr("video-id"));
var sv = $(PlayingVideo.getMedia()).clone();
sv.get(0).currentTime = PlayingVideo.getCurrentTime();
n.append(sv);
n.appendTo("body");
plyr.setup('.SmallVideo', {
enabled: true,
autoplay: true
});
$('<button type="button" onclick="CloseSmallVideo(this)" class="closeSmallVideoBtn" aria-label="Play"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 47.971 47.971" style="enable-background:new 0 0 47.971 47.971;" xml:space="preserve"> <g> <path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88 c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242 C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879 s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg></button>').appendTo('.SmallVideo .plyr');
}
//if video is playing and visible to screen
else {
}
});
};
var CloseSmallVideo = function(e) {
if ($(".SmallVideo").length == 0) return 0;
var v = plyr.get($(".SmallVideo .plyr").get(0));
v[0].pause();
$(".SmallVideo").remove();
};
$(document).ready(function() {
VideoAudioHandler();
}
);
var StopAllVideoNotv=function(v) {
$(plyr.get()).each(function() {
if (this.getContainer() !=v.detail.plyr.getContainer()) {
this.pause();
}
}
);
}
;
var GetPlayingVideo=function() {
$("video").filter(function() {
var video=$(this).get(0);
return !video.paused;
}
);
}
;
var VideoAudioHandler=function() {
$("video").each(function() {
$('<div class="videoContainer"></div>').insertBefore(this).append(this);
$(this).attr("video-id", "video-"+ Date.now());
}
);
plyr.setup(document.querySelectorAll("video"), {
enabled: true
}
);
$(plyr.get()).each(function() {
this.on('playing', function(event) {
StopAllVideoNotv(event);
CloseSmallVideo();
}
);
}
);
$(window).scroll(function() {
var PlayingVideo=$(plyr.get()).filter(function() {
return !this.isPaused();
}
)[0];
// none of videos is playing
if(PlayingVideo==undefined) return 0;
//if video is playing and not visible to screen and no small video
if(!$(PlayingVideo.getContainer()).visible(true) && $(".SmallVideo").length==0) {
PlayingVideo.pause();
var n=$("<div class='SmallVideo'></div>");
n.attr("related-video", $(PlayingVideo.getMedia()).attr("video-id"));
var sv=$(PlayingVideo.getMedia()).clone();
sv.get(0).currentTime=PlayingVideo.getCurrentTime();
n.append(sv);
n.appendTo( "body");
plyr.setup('.SmallVideo', {
enabled: true, autoplay: true
}
);
$('<button type="button" onclick="CloseSmallVideo(this)" class="closeSmallVideoBtn" aria-label="Play"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 47.971 47.971" style="enable-background:new 0 0 47.971 47.971;" xml:space="preserve"> <g> <path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88 c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242 C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879 s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg></button>').appendTo('.SmallVideo .plyr');
}
//if video is playing and visible to screen
else {}
}
);
}
;
var CloseSmallVideo=function(e) {
if($(".SmallVideo").length==0) return 0;
var v=plyr.get($(".SmallVideo .plyr").get(0));
v[0].pause();
$(".SmallVideo").remove();
}
;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-visible/1.2.0/jquery.visible.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/2.0.18/plyr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/plyr/2.0.18/plyr.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-title">
<div class="caption">
<h3 class="heading">المقدمة</h3>
</div>
</div>
<div class="portlet-body" style="height: auto;">
<p>بل أما فسقط تمهيد, من على ونتج الشمل الإمتعاض. و سابق الأثنان وقد. انه حاول والفلبين عن, ثم جمعت وبولندا بين, دون ٣٠ تونس قدما عشوائية. دنو عن فرنسية التكاليف. كما إختار استراليا، التغييرات هو, شيء بـ طوكيو وقوعها، للسيطرة. كل تكبّد والإتحاد
الخارجية ذات, مئات الأوضاع ما وتم.
</p>
</div>
</div>
</div>
<div class="col-md-12">
<video width="640" height="360" poster="resources/poster.PNG" preload="none" controls playsinline webkit-playsinline>
<source src="https://tmdcdn.s3.amazonaws.com/Big_Buck_Bunny_1080_10s_2MB.mp4">
</video>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>إذ مما الأحمر بتخصيص. من الضغوط المعاهدات وبالتحديد، تعد, شدّت مقاطعة الجديدة، دار تم, عرض أن الجوي غينيا والتي. الأمم علاقة ان ولم, عل مدينة الطريق يكن. يكن و نقطة وتنصيب, ودول فهرست إذ يبق, أخر مع النفط انتصارهم التغييرات. الإمداد بريطانيا وصل
عن.
</p>
</div>
<div class="col-md-12">
<video width="640" height="360" poster="resources/poster.PNG" preload="none" controls playsinline webkit-playsinline>
<source src="https://tmdcdn.s3.amazonaws.com/Big_Buck_Bunny_1080_10s_2MB.mp4">
</video>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-title">
<div class="caption">
<h3 class="heading">أعمدة نصوص</h3>
</div>
</div>
<div class="portlet-body" style="height: auto;">
<main class="entry-content">
<p><em>كُلفة</em> والمعدات مكن في, عل دنو تطوير لأداء وانهاء. لإعادة ابتدعها ما أخر, فقد أن فسقط لكون! كل جديداً البولندي ضرب, الستار بتخصيص عن بلا! بأيدي لإنعدام ثم الى, أملاً ويتّفق يبق إذ! خيار عقبت قد كان, وبعض الإنزال للإتحاد وصل مع. ما
وزارة عملية الستار يكن, هو دار تصفح مسارح للمجهود, أن الخطّة وحرمان بالإنزال تحت.
<br>كُلفة والمعدات مكن في, عل دنو تطوير لأداء وانهاء. لإعادة ابتدعها ما أخر, فقد أن فسقط لكون! كل جديداً البولندي ضرب, الستار بتخصيص عن بلا! بأيدي لإنعدام ثم الى, أملاً ويتّفق يبق إذ! خيار
عملية الستار يكن, هو دار تصفح مسارح للمجهود, أن الخطّة وحرمان بالإنزال تحت.</p>
</main>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-title">
<div class="caption">
<h3 class="heading">أعمدة نصوص</h3>
</div>
</div>
<div class="portlet-body" style="height: auto;">
<main class="entry-content">
<p><em>كُلفة</em> والمعدات مكن في, عل دنو تطوير لأداء وانهاء. لإعادة ابتدعها ما أخر, فقد أن فسقط لكون! كل جديداً البولندي ضرب, الستار بتخصيص عن بلا! بأيدي لإنعدام ثم الى, أملاً ويتّفق يبق إذ! خيار عقبت قد كان, وبعض الإنزال للإتحاد وصل مع. ما
وزارة عملية الستار يكن, هو دار تصفح مسارح للمجهود, أن الخطّة وحرمان بالإنزال تحت.
<br>كُلفة والمعدات مكن في, عل دنو تطوير لأداء وانهاء. لإعادة ابتدعها ما أخر, فقد أن فسقط لكون! كل جديداً البولندي ضرب, الستار بتخصيص عن بلا! بأيدي لإنعدام ثم الى, أملاً ويتّفق يبق إذ! خيار عقبت قد كان, وبعض الإنزال للإتحاد وصل مع. ما وزة الستار يكن, هو دار تصفح مسارح للمجهود, أن الخطّة وحرمان بالإنزال تحت.</p>
</main>
</div>
</div>
</div>
<div class="col-md-12">
<video width="640" height="360" poster="resources/poster.PNG" preload="none" controls playsinline webkit-playsinline>
<source src="https://tmdcdn.s3.amazonaws.com/Big_Buck_Bunny_1080_10s_2MB.mp4">
</video>
</div>
</div>
</div>

Related

get access to html tags inside innerHTML | javascript

I'm trying to create variable from a class inside the innerHTML down here:
ruleData.forEach((rule) => {
rulesWrapper.innerHTML += `
<div class='rule'>
<div id='rule-title' class='rule-title' onclick='showRuleDetail(${counter})'>
<div>
<p>${counter}.</p>
<p>${rule.title}</p>
</div>
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 5.5L7.5 10.5L12.5 15.5" stroke="#1E1E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class='rule-body'>
<p>${rule.body}</p>
</div>
</div>
`;
counter++;
});
For example I want to target rule-body class inside this innerHTML and change it's background
like this:
let ruleBody = document.querySelectorAll('.rule-body');
ruleBody[0].style.background = 'red';
But this doesn't work
,I get this error:
TypeError: Cannot read properties of undefined (reading 'style')

You can use DOMParser for this
ruleData.forEach((rule) => {
let rule_html = `
<div class='rule'>
<div id='rule-title' class='rule-title' onclick='showRuleDetail(${counter})'>
<div>
<p>${counter}.</p>
<p>${rule.title}</p>
</div>
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 5.5L7.5 10.5L12.5 15.5" stroke="#1E1E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class='rule-body'>
<p>${rule.body}</p>
</div>
</div>
`;
let rule = new DOMParser().parseFromString(rule_html,"text/xml").firstChild;
rule.querySelector('.rule-body').style.background = 'red';
rulesWrapper.appendChild(rule);
counter++;
});
Also if the counter is the index of the ruleData you can use forEach's index as well. (rule,i)=>{

You must access the .rule-body after the innerHTML and make sure it is indeed in the DOM. Then, this should work perfectly fine:
const container = document.querySelector("#container");
const button = document.querySelector("#button");
function exec() {
container.innerHTML = `<div class='rule-body'>yo</div>`;
const ruleBody = document.querySelectorAll('.rule-body');
ruleBody[0].style.backgroundColor = 'red';
}
button.onclick = exec;
<div id="container">
</div>
<button id="button">
CLICK TO INSERT
</button>

I suggest to map and delegate
const ruleData = [{"title":"Title 1","body":"This is the body"},{"title":"Title 2","body":"This is the body"}]
const rulesWrapper = document.getElementById("rulesWrapper");
rulesWrapper.innerHTML = ruleData.map((rule,i) => `
<div class='rule'>
<div class='rule-title' data-idx='${i}'>
<div>
<p>${i}.</p>
<p>${rule.title}</p>
</div>
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 5.5L7.5 10.5L12.5 15.5" stroke="#1E1E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class='rule-body'>
<p>${rule.body}</p>
</div>
</div>
`).join("");
rulesWrapper.addEventListener("click", function(e) {
const tgt=e.target.closest(".rule-title");
if (tgt) console.log(tgt.dataset.idx)
})
<div id="rulesWrapper"></div>

for loop getting ignored in function but works perfectly fine in console?

so i have this code
var moviepop = await getMovies();
for (let i = 0; i < moviepop.length; i++) {
var html = `
<button class="cell-more-button">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
</button>
<div class="product-cell image">
<img onclick="fullsize(this)" src="${
"https://image.tmdb.org/t/p/w300" + moviepop[i].backdrop_path
}" alt="product">
<span>${moviepop[i].title}</span>
</div>
<div class="product-cell category"><span class="cell-label">Category:</span>Movies</div>
<div class="product-cell status-cell">
<span class="cell-label">Status:</span>
<span class="status active">Available</span>
</div>
<div class="product-cell sales"><span class="cell-label">Downloads:</span>${downloads(
moviepop[i].id
)}</div>
<div class="product-cell stock"><span class="cell-label">Release year:</span>${moviepop[
i
].release_date.replaceAll("-", "/")}</div>
<div class="product-cell price"><span class="cell-label">Rating:</span>${
moviepop[i].vote_average
}</div>
`;
console.log(html);
var movie = document.createElement("div");
movie.className = "products-row";
movie.innerHTML = html;
document.getElementById("baba").appendChild(movie);
}
some more code
async function loadData() {
var moviepop = await getMovies();
for (let i = 0; i < moviepop.length; i++) {
var html = `
<button class="cell-more-button">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
</button>
<div class="product-cell image">
<img onclick="fullsize(this)" src="${
"https://image.tmdb.org/t/p/w300" + moviepop[i].backdrop_path
}" alt="product">
<span>${moviepop[i].title}</span>
</div>
<div class="product-cell category"><span class="cell-label">Category:</span>Movies</div>
<div class="product-cell status-cell">
<span class="cell-label">Status:</span>
<span class="status active">Available</span>
</div>
<div class="product-cell sales"><span class="cell-label">Downloads:</span>${downloads(
moviepop[i].id
)}</div>
<div class="product-cell stock"><span class="cell-label">Release year:</span>${moviepop[
i
].release_date.replaceAll("-", "/")}</div>
<div class="product-cell price"><span class="cell-label">Rating:</span>${
moviepop[i].vote_average
}</div>
`;
console.log(html);
var movie = document.createElement("div");
movie.className = "products-row";
movie.innerHTML = html;
document.getElementById("baba").appendChild(movie);
}
}
I'm getting some movie information from an array and trying to create some HTML divs with that information but it's not doing anything I think it's getting ignored but when I run the same code outside the function in the console it works perfectly fine?

How to place Javascript in SVG html box

Hi all I have the following code and I would like to place the javascript button inside the SVG box. I think I am not understanding how to pass the coordinated in order to place it inside. I am trying the following code but is not working
<!DOCTYPE html>
</head>
<body>
<div style="max-width:1000px;">
<div class="scaling-svg-container" style="padding-bottom: 100%; max-width: 1000px; margin: 0px auto 0px auto; ">
<svg id="ProvaJJ" class="scaling-svg" style="max-width: 1000px;" id="graphic" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 750 750" enable-background="new 0 0 750 750" xml:space="preserve">
<g id="background">
<rect fill="#C1D3E9" width="750" height="750"/>
<g> id="inputBackground">
<script>
function confirmAction() {
let confirmAction = confirm("Are you sure to execute this action?");
if (confirmAction) {
alert("Action successfully executed");
} else {
alert("Action canceled");
}
}
</script>
<!--<script>
alert( 'Hello, world!' );
</script> -->
<!--<polygon fill="#FFFFFF" points="114.089,97.5 114.089,180 353.064,204 592.039,180 592.039,97.5 "/> -->
<text transform="matrix(1 0 0 1 59.138 53.6896)" fill="#333333" font-family="'InterFace-Regular'" font-size="24px"> Alessia is a 25 years old, blond and outstanding PhD student
</tspan><tspan x="0" y="44.4" fill="#333333" font-family="'InterFace-Regular'" font-size="24px">She has a master degree in something.
</tspan></tspan><tspan x="0" y="94.4" fill="#333333" font-family="'InterFace-Regular'" font-size="24px">something .</tspan></text>
<script type = Javascript>
<ul id = "messages"></ul>
<input id = "textbox" type ="text">
<button id ="btn">click</button>
</script>
</svg>
</div>
</div>
s
<!--<script src="prova.js"></script>-->
</body>
</html>

There are two issues:
1- type = Javascript you need to add the property with double qoutetion or remove the type attribute. so you can use <script> or <script type="javascript"
2- don't write the html between script tags.
<!DOCTYPE html>
</head>
<body>
<div style="max-width:1000px;">
<div class="scaling-svg-container" style="padding-bottom: 100%; max-width: 1000px; margin: 0px auto 0px auto; ">
<svg id="ProvaJJ" class="scaling-svg" style="max-width: 1000px;" id="graphic" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 750 750" enable-background="new 0 0 750 750" xml:space="preserve">
<g id="background">
<rect fill="#C1D3E9" width="750" height="750"/>
<g> id="inputBackground">
<script>
function confirmAction() {
let confirmAction = confirm("Are you sure to execute this action?");
if (confirmAction) {
alert("Action successfully executed");
} else {
alert("Action canceled");
}
}
</script>
<!--<script>
alert( 'Hello, world!' );
</script> -->
<!--<polygon fill="#FFFFFF" points="114.089,97.5 114.089,180 353.064,204 592.039,180 592.039,97.5 "/> -->
<text transform="matrix(1 0 0 1 59.138 53.6896)" fill="#333333" font-family="'InterFace-Regular'" font-size="24px"> Alessia is a 25 years old, blond and outstanding PhD student
</tspan><tspan x="0" y="44.4" fill="#333333" font-family="'InterFace-Regular'" font-size="24px">She has a master degree in something.
</tspan></tspan><tspan x="0" y="94.4" fill="#333333" font-family="'InterFace-Regular'" font-size="24px">something .</tspan></text>
<a xlink:href="#" id="btn"><polygon fill="none" points="162,263.3 251.6,256 252.7,273.3 163,280.5"/><text id="messages" x="0" y="184.4" fill="#333333" font-family="'TradeGothicLT-Bold'" font-size="12.9937">Click</text></a>
<script>
document.getElementById('btn').addEventListener('click',(e)=>{
e.preventDefault()
document.getElementById('messages').textContent = "clicked"
})
</script>
</svg>
</div>
</div>
<!--<script src="prova.js"></script>-->
</body>
</html>

How to make multiple animations in one page with Lazy Line Painter

I'm making a card where I want to put svgs with this drawing effect. I found a very good tool that makes this for me, I download any svg from the internet and it makes the effect for me and gives me the code to use on my page.
It works great but when I put more than one svg on the page, the first one stops working. It's only working if I only use one svg.
Am I doing something wrong? Is there any tool that also does this?
Note that on the first card, svg is gone.
https://pastebin.com/DhR8kfGU
<div class="card d-xl-flex text-center d-flex justify-content-center align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="casa" x="0px" y="0px" viewBox="0 0 58.365 58.365" style="enable-background:new 0 0 58.365 58.365;" xml:space="preserve" width="512px" height="512px" class="lazy-line-painter" data-llp-composed="true">
<g>
<path d="M57.863,26.632L29.182,0L0.502,26.632c-0.404,0.376-0.428,1.009-0.052,1.414c0.374,0.404,1.009,0.427,1.413,0.052 l3.319-3.082v33.349h16h16h16V25.015l3.319,3.082c0.192,0.179,0.437,0.267,0.681,0.267c0.269,0,0.536-0.107,0.732-0.319 C58.291,27.641,58.267,27.008,57.863,26.632z M23.182,56.365v-16c0-3.309,2.691-6,6-6s6,2.691,6,6v16H23.182z M51.182,56.365h-14 v-16c0-4.411-3.589-8-8-8s-8,3.589-8,8v16h-14V23.158l22-20.429l22,20.429V56.365z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="casa-0" data-llp-duration="2000" data-llp-delay="0" fill-opacity="0" style="" />
</g>
</svg>
<p class="text-center d-flex flex-column m-xl-3 title">
Residencial
</p>
<p class="card-information">Gás para sua casa</p>
<p class="m-1 card-information">P 13</p>
<p class=" card-information">P 45</p>
Saiba mais
</div>
<div class="card d-xl-flex text-center d-flex justify-content-center align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="tent" x="0px" y="0px" viewBox="0 0 483.32 483.32" style="enable-background:new 0 0 483.32 483.32;" xml:space="preserve" width="512px" height="512px" class="lazy-line-painter" data-llp-composed="true">
<g>
<g>
<g>
<rect x="341.664" y="465.66" width="16" height="16" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-0" data-llp-duration="890" data-llp-delay="0" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<rect x="313.674" y="338.617" transform="matrix(0.8805 -0.4741 0.4741 0.8805 -150.0898 200.0408)" width="16" height="118.12" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-1" data-llp-duration="890" data-llp-delay="890" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<path d="M96.008,231.316l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-48-48l-0.056,0.056 c-2.961-3.123-7.892-3.255-11.016-0.294c-0.085,0.08-0.167,0.162-0.248,0.246l-48,48l11.312,11.312l34.352-34.352v25.376 L0.008,220.004l11.312,11.312l34.344-34.344v25.376L0.008,268.004l11.312,11.312l34.344-34.344v25.376L0.008,316.004 l11.312,11.312l34.344-34.344V481.66h16V292.972l34.344,34.344l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312 l-45.656-45.656v-25.376L96.008,231.316z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-2" data-llp-duration="890" data-llp-delay="1780" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<path d="M472.008,263.316l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-48-48l-0.056,0.056 c-2.961-3.123-7.893-3.255-11.016-0.294c-0.085,0.08-0.167,0.162-0.248,0.246l-48,48l11.312,11.312l34.352-34.352v25.376 l-45.656,45.656l11.312,11.312l34.344-34.344v25.376l-45.656,45.656l11.312,11.312l34.344-34.344v76.688l-16.8-35.416 c-1.316-2.788-4.117-4.571-7.2-4.584h-104v-60.688l34.344,34.344l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344 l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-48-48 l-0.056,0.056c-2.961-3.123-7.893-3.255-11.016-0.294c-0.085,0.08-0.167,0.162-0.248,0.246l-48,48l11.312,11.312l34.352-34.352 v25.376l-45.656,45.656l11.312,11.312l34.344-34.344v25.376l-45.656,45.656l11.312,11.312l34.344-34.344v25.376l-45.656,45.656 l11.312,11.312l34.344-34.344v60.688h-112c-2.257,0.013-4.4,0.992-5.888,2.688c-0.473,0.473-0.874,1.012-1.192,1.6l-80,152 c-2.05,3.914-0.539,8.749,3.375,10.799c1.143,0.599,2.415,0.912,3.705,0.913h240v-16h-75.2l-71.552-136H392.6l64.424,136h-83.36 v16h96c4.418-0.017,7.986-3.612,7.97-8.03c-0.004-1.174-0.267-2.333-0.77-3.394l-39.2-82.808V276.972l34.344,34.344l11.312-11.312 l-45.656-45.656v-25.376L472.008,263.316z M157.664,465.66H98.912l58.752-111.624V465.66z M232.416,465.66h-58.752V354.036 L232.416,465.66z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-3" data-llp-duration="890" data-llp-delay="2670" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<path d="M153.664,1.66c-4.418,0.001-7.999,3.583-7.998,8.002c0,2.121,0.843,4.154,2.342,5.654 c8.262,7.425,13.601,17.556,15.056,28.568c1.516,13.506-8.203,25.684-21.709,27.2c-1.825,0.205-3.667,0.205-5.491,0l0.024-0.024 c-11.012-1.455-21.143-6.794-28.568-15.056c-3.125-3.124-8.19-3.123-11.314,0.002c-1.499,1.5-2.342,3.534-2.342,5.654 c0,33.137,26.863,60,60,60s60-26.863,60-60S186.801,1.66,153.664,1.66z M193.287,80.838 c-10.592,21.871-36.908,31.015-58.778,20.423c-8.904-4.312-16.095-11.499-20.412-20.401c6.371,3.432,13.381,5.515,20.592,6.12 c12.063,1.097,23.998-3.169,32.632-11.664c13.512-14.532,15.773-36.253,5.544-53.256 C194.735,32.652,203.878,58.968,193.287,80.838z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-4" data-llp-duration="890" data-llp-delay="3560" fill-opacity="0" style="" />
</g>
</g>
</g>
</svg>
<p class="text-center m-xl-3 title">
outdoor
</p>
<p class="">Lorem Ipsum.</p>
<p class="m-1 card-information"></p>
<p class="card-information">P 2</p>
Saiba mais
</div>
<script type="text/javascript">
(function() {
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
/**
* Setup your Lazy Line element.
* see README file for more settings
*/
let el = document.querySelector('#tent');
let myAnimation = new LazyLinePainter(el, {
"ease": "easeLinear",
"strokeWidth": 4,
"strokeOpacity": 1,
"strokeColor": "004d88",
"strokeCap": "square"
});
myAnimation.paint();
}
}
})();
// svg prepared using Lazy Line Composer
// http://lazylinepainter.info/#composer
let wrap = document.querySelector("#tent");
let el = document.querySelector("#tent");
let myAnimation = new LazyLinePainter(el, {
ease: "easeInOutQuad"
});
// Timeline Events
myAnimation.on("start", event => {
wrap.classList.remove("tl-complete");
});
myAnimation.on("complete", event => {
wrap.classList.add("tl-complete");
});
// Path Events
myAnimation.on("start:llpface-0", event => {
event.el.classList.remove("path-complete");
});
myAnimation.on("complete:llpface-0", event => {
event.el.classList.add("path-complete");
});
el.addEventListener("click", paint, false);
function paint() {
myAnimation.paint();
}
paint();
</script>
<script type="text/javascript">
(function() {
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
/**
* Setup your Lazy Line element.
* see README file for more settings
*/
let el = document.querySelector('#casa');
let myAnimation = new LazyLinePainter(el, {
"ease": "easeLinear",
"strokeWidth": 1,
"strokeOpacity": 1,
"strokeColor": "004d88",
"strokeCap": "square"
});
myAnimation.paint();
}
}
})();
// svg prepared using Lazy Line Composer
// http://lazylinepainter.info/#composer
let wrap = document.querySelector("#casa");
let el = document.querySelector("#casa");
let myAnimation = new LazyLinePainter(el, {
ease: "easeInOutQuad"
});
// Timeline Events
myAnimation.on("start", event => {
wrap.classList.remove("tl-complete");
});
myAnimation.on("complete", event => {
wrap.classList.add("tl-complete");
});
// Path Events
myAnimation.on("start:llpface-0", event => {
event.el.classList.remove("path-complete");
});
myAnimation.on("complete:llpface-0", event => {
event.el.classList.add("path-complete");
});
el.addEventListener("click", paint, false);
function paint() {
myAnimation.paint();
}
paint();
</script>
http://lazylinepainter.info/

jQuery [object Object] is not a valid selector

I am trying to select tree-node element with children and first child but it is not a valid selector.
<g class="nodes">
<g class="tree-node enter" id="tree-node-cdl3c5he">
<g class="node-group">
<circle class="node-shape" r="80"></circle>
<g class="node-label-group" transform="translate(-80,-80)">
<foreignObject class="node-content-container" width="160" height="160">
<div class="node-content">
<div class="inner">
<div class="node-label" data-test-id="node-label-new-part">New Part</div>
</div></div></foreignObject></g><g class="root-group" transform="translate(0,-80)"><circle class="root-shape" r="15"></circle></g>
</g>
</g>
</g>
Using first child:
$('.nodes > .tree-node:first-child')
Ember test:
await click($('.nodes > .tree-node:first-child'));
Error:
Failed to execute 'querySelector' on 'Document': '#ember-testing [object Object]' is not a valid selector.

$('.nodes > .tree-node:first-child') works fine and is not an invalid selector as seen below. It will return the first child of .nodes with the class .tree-node , if you however want to fget the first child within .tree-node then you need to add a space $('.nodes > .tree-node :first-child')
$('.nodes > .tree-node:first-child')
Expected ► <g class="tree-node enter" id="tree-node-cdl3c5he">
var x = $('.nodes > .tree-node:first-child');
console.log(x)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<g class="nodes">
<g class="tree-node enter" id="tree-node-cdl3c5he">
<g class="node-group">
<circle class="node-shape" r="80"></circle>
<g class="node-label-group" transform="translate(-80,-80)">
<foreignObject class="node-content-container" width="160" height="160">
<div class="node-content">
<div class="inner">
<div class="node-label" data-test-id="node-label-new-part">New Part</div>
</div>
</div>
</foreignObject>
</g>
<g class="root-group" transform="translate(0,-80)">
<circle class="root-shape" r="15"></circle>
</g>
</g>
</g>
</g>
$('.nodes > .tree-node :first-child')
Expected ► <g class="node-group">
var x = $('.nodes > .tree-node :first-child');
console.log(x)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<g class="nodes">
<g class="tree-node enter" id="tree-node-cdl3c5he">
<g class="node-group">
<circle class="node-shape" r="80"></circle>
<g class="node-label-group" transform="translate(-80,-80)">
<foreignObject class="node-content-container" width="160" height="160">
<div class="node-content">
<div class="inner">
<div class="node-label" data-test-id="node-label-new-part">New Part</div>
</div>
</div>
</foreignObject>
</g>
<g class="root-group" transform="translate(0,-80)">
<circle class="root-shape" r="15"></circle>
</g>
</g>
</g>
</g>

By accessing the object like $('.nodes > .tree-node:first')[0] worked.

Categories

Resources