Polaris css to open Popover using jquery - javascript

I'm using Shopify Polaris CSS framework but I do not use React, I want to use jQuery.
I have this html:
<div class="Polaris-ActionMenu">
<div>
<div class="Polaris-ActionMenu-RollupActions__RollupActivator">
<button class="Polaris-Button Polaris-Button-sel" type="button" tabindex="0" aria-controls="Polarispopover1" aria-owns="Polarispopover1" aria-expanded="false">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">More actions</span>
<span class="Polaris-Button__Icon">
<div class="">
<span class="Polaris-Icon">
<span class="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--regular Polaris-Text--visuallyHidden">
</span>
<svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path d="M13.098 8h-6.196c-.751 0-1.172.754-.708 1.268l3.098 3.432c.36.399 1.055.399 1.416 0l3.098-3.433c.464-.513.043-1.267-.708-1.267Z">
</path>
</svg>
</span>
</div>
</span>
</span>
</button>
</div>
<div>
<div data-portal-id="popover-Polarisportal1">
<div class="Polaris-PositionedOverlay Polaris-Popover__PopoverOverlay Polaris-Popover__PopoverOverlay--open">
<div class="Polaris-Popover" data-polaris-overlay="true">
<div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
<div class="Polaris-Popover__Wrapper">
<div tabindex="-1" class="Polaris-Popover__Content" style="display: none;">
<div class="Polaris-Popover__Pane Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--horizontal" data-polaris-scrollable="true">
<div class="Polaris-ActionList">
<div class="Polaris-ActionList__Section--withoutTitle">
<ul class="Polaris-ActionList__Actions" role="menu" tabindex="-1">
<li role="presentation"><span class="Polaris-ActionList__Content"><span class="Polaris-ActionList__Text">Duplicate</span></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
</div>
</div>
</div>
</div>
</div>
</div>
to open the Popover I write this jquery code:
$('.Polaris-Button-sel').click(function() {
$(this).closest('.Polaris-Popover__Content').toggle();
});
and
$('.Polaris-Button-sel').click(function() {
$(this).next('.Polaris-Popover__Content').toggle();
});
but both dont work. Please help how to open Popover using jquery code

Related

adding elements to the button when the div.el-pagination

I am using the code the JavaScript code which is what i am trying to add the aria-label but somewhat it is missing somewhere
document.querySelectorAll('.el-pagination').forEach(button => button.setAttribute('aria-label',(button.getElementsByClassName('el-icon-arrow-left').length == 1) ? 'Previous' : 'Next'));
This is my code for the html
<div class="el-pagination" aria-label="Previous">
<span class="el-pagination__sizes">
<div class="el-select el-select--mini">
<!---->
<div class="el-input el-input--mini el-input--suffix">
<!---->
<input type="text" readonly="readonly" autocomplete="off" placeholder="Select" class="el-input__inner">
<!---->
<span class="el-input__suffix">
<span class="el-input__suffix-inner">
<i class="el-select__caret el-input__icon el-icon-arrow-up"></i>
<!---->
<!---->
<!---->
<!---->
<!---->
</span>
<!---->
</span>
<!---->
<!---->
</div>
<div class="el-select-dropdown el-popper pagination-popper" style="display: none; min-width: 175px;">
<div class="el-scrollbar" style="">
<div class="el-select-dropdown__wrap el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
<ul class="el-scrollbar__view el-select-dropdown__list">
<!---->
<li class="el-select-dropdown__item selected">
<span>50 items per page</span>
</li>
<li class="el-select-dropdown__item">
<span>100 items per page</span>
</li>
<li class="el-select-dropdown__item">
<span>150 items per page</span>
</li>
<li class="el-select-dropdown__item">
<span>300 items per page</span>
</li>
</ul>
</div>
<div class="el-scrollbar__bar is-horizontal">
<div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
</div>
<div class="el-scrollbar__bar is-vertical">
<div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
</div>
</div>
<!---->
</div>
</div>
</span>
<button type="button" disabled="disabled" class="btn-prev">
<i class="el-icon el-icon-arrow-left"></i>
</button>
<ul class="el-pager">
<li class="number active">1</li>
<!---->
<li class="number">2</li>
<li class="number">3</li>
<li class="number">4</li>
<!---->
<li class="number">5</li>
</ul>
<button type="button" class="btn-next">
<i class="el-icon el-icon-arrow-right"></i>
</button>
</div>
so something in my JavaScript is going wrong which i can't figure what is
You can add aria-label to the elements in html without using any js here
But if you want you can also do it using js like this:
document.querySelectorAll('.btn-prev').forEach(button => button.setAttribute('aria-label', 'Previous'))
document.querySelectorAll('.btn-next').forEach(button => button.setAttribute('aria-label', 'Next'))

How to hide several classes but individually after click it with JS DOM. New on JS & having a hard time

By example I have a list of classes which the class "ld-certificate-link" will be called "brod" and it has an icon which it is represented with a white style color and what I wish to do is that when I click the icon the class disappears.
The problem is that when I select the query or it only affect one "brod" and the next ones doesn't change the color at all or the second case scenario is that only by clicking one it change the color of every "brod". Also notice that "brod" has an href which is dynamic and unique because it spawns after a quiz is submitted so what happens when you click "brod" is that the href which is a .pdf file automatically downloads. Also this has to work into every new brod that is generated. Any hints? I'm pretty new on JS and I'm doing my best but I'm having a hard time on this.
The most close code that I get is this one:
Html:
<div class="ld-item-list-item ld-item-list-item-course ld-expandable learndash-complete ld-expanded" id="ld-course-list-item-42634">
<div class="ld-item-list-item-preview">
<a href="https://xxxxxxx.com/courses/prueba-ii/" class="ld-item-name">
<div class="ld-status-icon ld-status-complete ld-secondary-background"><span class="ld-icon-checkmark ld-icon"></span></div> <span class="ld-course-title">Prueba II</span>
</a> <!--/.ld-course-name-->
<div class="ld-item-details">
<a class="ld-certificate-link" target="_blank" href="https://xxxxxxx.com/certificates/35472/?course_id=42634&cert-nonce=9c8a79d8ae" aria-label="Certificado" download=""><span class="ld-icon ld-icon-certificate"></span></a>
<div class="ld-status ld-status-complete ld-secondary-background">Completo</div>
<div class="ld-expand-button ld-primary-background ld-compact ld-not-mobile ld-expanded" data-ld-expands="ld-course-list-item-42634">
<span class="ld-icon-arrow-down ld-icon"></span>
</div> <!--/.ld-expand-button-->
<div class="ld-expand-button ld-button-alternate ld-mobile-only ld-expanded" data-ld-expands="ld-course-list-item-42634" data-ld-expand-text="Desplegar" data-ld-collapse-text="Contraer">
<span class="ld-icon-arrow-down ld-icon"></span>
<span class="ld-text ld-primary-color">Contraer</span>
</div> <!--/.ld-expand-button-->
</div> <!--/.ld-course-details-->
</div> <!--/.ld-course-preview-->
<div class="ld-item-list-item-expanded" data-height="604" style="max-height: 604px;">
<div class="ld-progress" style="">
<div class="ld-progress-heading">
<div class="ld-progress-label">Proceso de Capacitación </div>
<div class="ld-progress-stats">
<div class="ld-progress-percentage ld-secondary-color">100% Completado </div> <!--/.ld-course-progress-percentage-->
<div class="ld-progress-steps"> 1/1 pasos </div>
</div> <!--/.ld-course-progress-stats-->
</div> <!--/.ld-course-progress-heading-->
<div class="ld-progress-bar">
<div class="ld-progress-bar-percentage ld-secondary-background" style="width: 100%;"></div>
</div> <!--/.ld-course-progress-bar-->
</div> <!--/.ld-course-progress-->
<div class="ld-item-contents">
<div class="ld-table-list ld-quiz-list">
<div class="ld-table-list-header ld-primary-background">
<div class="ld-table-list-title">
Evaluaciones </div> <!--/.ld-table-list-title-->
<div class="ld-table-list-columns">
<div class="ld-table-list-column ld-column-certificate">
Certificado </div>
<div class="ld-table-list-column ld-column-scores">
Calificación </div>
<div class="ld-table-list-column ld-column-stats">
Estadísticas </div>
<div class="ld-table-list-column ld-column-date">
Fecha </div>
</div>
</div> <!--/.ld-table-list-header-->
<div class="ld-table-list-items">
<div class="ld-table-list-item passed">
<div class="ld-table-list-item-preview">
<div class="ld-table-list-title">
<div class="ld-status-icon ld-quiz-complete ld-secondary-color"><span class="ld-icon ld-icon-quiz"></span></div><span>EXAMEN FINAL PRUEBA II</span>
</div> <!--/.ld-table-list-title-->
<div class="ld-table-list-columns">
<div class="ld-table-list-column ld-table-list-column-certificate ">
<span class="ld-column-label">Certificado: </span>
<a class="ld-certificate-link" href="https://xxxxxxx.com/certificates/35472-2/?quiz=42637&cert-nonce=d8b4a067d0&time=1628218385" target="_new" aria-label="Certificado" download=""><span class="ld-icon ld-icon-certificate"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-scores ">
<span class="ld-column-label">Calificación: </span>
100% </div>
<div class="ld-table-list-column ld-table-list-column-stats ">
<span class="ld-column-label">Estadísticas: </span>
<a class="user_statistic" data-statistic-nonce="e13a3ca2a2" data-user-id="1" data-quiz-id="29" data-ref-id="306" href="#"><span class="ld-icon ld-icon-assignment"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-date ">
<span class="ld-column-label">Fecha: </span>
05/08/2021 23:53 </div>
</div>
</div> <!--/.ld-table-list-item-preview-->
</div> <!--/.ld-table-list-item-->
<div class="ld-table-list-item passed">
<div class="ld-table-list-item-preview">
<div class="ld-table-list-title">
<div class="ld-status-icon ld-quiz-complete ld-secondary-color"><span class="ld-icon ld-icon-quiz"></span></div><span>EXAMEN FINAL PRUEBA II</span>
</div> <!--/.ld-table-list-title-->
<div class="ld-table-list-columns">
<div class="ld-table-list-column ld-table-list-column-certificate ">
<span class="ld-column-label">Certificado: </span>
<a class="ld-certificate-link" href="https://xxxxxxx.com/certificates/35472-2/?quiz=42637&cert-nonce=d8b4a067d0&time=1628266530" target="_new" aria-label="Certificado" download=""><span class="ld-icon ld-icon-certificate"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-scores ">
<span class="ld-column-label">Calificación: </span>
100% </div>
<div class="ld-table-list-column ld-table-list-column-stats ">
<span class="ld-column-label">Estadísticas: </span>
<a class="user_statistic" data-statistic-nonce="1fa17abf9e" data-user-id="1" data-quiz-id="29" data-ref-id="307" href="#"><span class="ld-icon ld-icon-assignment"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-date ">
<span class="ld-column-label">Fecha: </span>
06/08/2021 13:15 </div>
</div>
</div> <!--/.ld-table-list-item-preview-->
</div> <!--/.ld-table-list-item-->
<div class="ld-table-list-item passed">
<div class="ld-table-list-item-preview">
<div class="ld-table-list-title">
<div class="ld-status-icon ld-quiz-complete ld-secondary-color"><span class="ld-icon ld-icon-quiz"></span></div><span>EXAMEN FINAL PRUEBA II</span>
</div> <!--/.ld-table-list-title-->
<div class="ld-table-list-columns">
<div class="ld-table-list-column ld-table-list-column-certificate ">
<span class="ld-column-label">Certificado: </span>
<a class="ld-certificate-link" href="https://xxxxxxx.com/certificates/35472-2/?quiz=42637&cert-nonce=d8b4a067d0&time=1628266609" target="_new" aria-label="Certificado" download=""><span class="ld-icon ld-icon-certificate"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-scores ">
<span class="ld-column-label">Calificación: </span>
100% </div>
<div class="ld-table-list-column ld-table-list-column-stats ">
<span class="ld-column-label">Estadísticas: </span>
<a class="user_statistic" data-statistic-nonce="28dc605682" data-user-id="1" data-quiz-id="29" data-ref-id="308" href="#"><span class="ld-icon ld-icon-assignment"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-date ">
<span class="ld-column-label">Fecha: </span>
06/08/2021 13:16 </div>
</div>
</div> <!--/.ld-table-list-item-preview-->
</div> <!--/.ld-table-list-item-->
<div class="ld-table-list-item passed">
<div class="ld-table-list-item-preview">
<div class="ld-table-list-title">
<div class="ld-status-icon ld-quiz-complete ld-secondary-color"><span class="ld-icon ld-icon-quiz"></span></div><span>EXAMEN FINAL PRUEBA II</span>
</div> <!--/.ld-table-list-title-->
<div class="ld-table-list-columns">
<div class="ld-table-list-column ld-table-list-column-certificate ">
<span class="ld-column-label">Certificado: </span>
<a class="ld-certificate-link" href="https://xxxxxxx.com/certificates/35472-2/?quiz=42637&cert-nonce=d8b4a067d0&time=1628266639" target="_new" aria-label="Certificado" download=""><span class="ld-icon ld-icon-certificate"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-scores ">
<span class="ld-column-label">Calificación: </span>
100% </div>
<div class="ld-table-list-column ld-table-list-column-stats ">
<span class="ld-column-label">Estadísticas: </span>
<a class="user_statistic" data-statistic-nonce="5bdb484223" data-user-id="1" data-quiz-id="29" data-ref-id="309" href="#"><span class="ld-icon ld-icon-assignment"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-date ">
<span class="ld-column-label">Fecha: </span>
06/08/2021 13:17 </div>
</div>
</div> <!--/.ld-table-list-item-preview-->
</div> <!--/.ld-table-list-item-->
</div> <!--/.ld-table-list-items-->
<div class="ld-table-list-footer"></div>
</div> <!--/.ld-quiz-list-->
</div> <!--/.ld-course-contents-->
</div> <!--/.ld-course-list-item-expanded-->
</div>
JavaScript:
document.querySelector('brod')
.addEventListener("click", handleClick );
function handleClick() {
alert("i got clicked!");
}
var doShow = localStorage.getItem('.brod');
if (doShow == null) {
doShow = true;
}
const anchor = document.querySelector('.brod');
if (doShow == "false") {
anchor.style.display = "none";
}
anchor.addEventListener('click', function() {
localStorage.setItem('.brod', "false");
});
I don't know if I can give a full correct answer without seeing all of your HTML.
I do think part of the issue is that you need to loop over all the instances of .brod and apply your code to all of them. Currently your are only querying one instance of .brod
For example:
let allBrods = document.querySelectorAll('.brod');
[].forEach.call(allBrods, function(brod) {
brod.addEventListener("click", handleClick );
});

Toggle addclass with jquery parent selector

I have some items products in a grid.
I want that when i click on each icon from item, it will toggle a class '.active' and also remove class if others from others items are visible.
This is my script so far, can add the class remove from others items but when i click on the same icon it doesn't toggle it (remove the class).
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$('.items').find('.actions').not($this).removeClass('active');
$that.find('.actions').toggleClass('active');
});
<ul class="products-grid row">
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>
You need to remove this row:
$('.items').find('.actions').not($this).removeClass('active');
Because in your function you first remove the class, and then toggle it. In this case, if the element already has active class, it will be removed first, and then toggle will add it again (it looks like the element still has an active class, because operations are very fast). I have removed the row as described above and added some styles to see the difference, so here is the working snippet (click on "Show Actions" to see the difference):
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$that.find('.actions').toggleClass('active');
});
.items #show-actions {
width: 100vw;
background-color: royalblue;
color: white;
}
.active {
background-color: red;
}
img {
width: 50px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>
First, you can't have duplicate ID's on any HTML page. I suggest you change #show-actions to a class for the rather than an ID.
Second, you also have some extra quote marks in your img element.
Once you do that it's pretty simple.
$('.show-actions').on('click', function() {
var items = $('.items');
items.removeClass('active');
$(this).parent().parent('.items').addClass('active');
});
.active {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>

Angular JS if-else not working as expected

<body ng-app ng-controller="progressCircleController">
<h1 class="errorHeader">List of Classes</h1>
<!-- Modal -->
<div id="progressModal" class="container" role="dialog">
<form>
<ul class="col-md-12 col-lg-12">
<li ng-click="showErrorDetails(key)" class="col-sm-12 col-md-4 col-lg-4 eachClassCell"
ng-repeat='(key,value) in sampleJSON'>
<div ng-if="{{value.length}} <= 50">
<div title="{{key}}" class="progress green">{{key}}
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">{{key}}</div>
</div>
</div>
<div ng-if="{{value.length}} >= 50">
<div title="{{key}}" class="progress red">{{key}}
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">{{key}}</div>
</div>
</div>
</li>
</ul>
</form>
</div>
</body>
The progress circle created for each key is duplicate. I need to draw the progress circle based on the value.length of every key such that when value.length > 50 then draw the red circle and the value.length <=50 the draw the green circle.
It was angular js version issue.
I was using old angular js version (1.0.7) which I think does not recognize the > or < or any logical operator and it does not even throw any error in console.
Used angular JS version 1.2.29 and worked perfectly.
And changed the div to <div ng-if="value.length <= 50"> because it is already inside angular context.

replace html content with other using javascript

i have html structure like below
<div class="block-compose">
<button class="icon icon-smiley btn-emoji"></button>
<div tabindex="-1" class="input-container">
<div class="input-emoji">
<div class="input-placeholder" style="display: none;">Type a message</div>
<div dir="auto" spellcheck="true" data-tab="1" contenteditable="true" class="input">how r u</div>
</div>
</div>
<div class="ptt-container"><span><button class="icon btn-icon icon-ptt"></button></span></div></div>
now i want to replace
<div class="ptt-container"><span><button class="icon btn-icon icon-ptt"></button></span></div>
by
<button class="icon btn-icon icon-send send-container"></button>
i am facing bit difficult do via javascript i am able to do it via jquery .
please help me with this
you need to use replaceChild from the parent:-
var container = document.getElementsByClassName('ptt-container')[0];
var button = document.createElement('button');
button.className = 'icon btn-icon icon-send send-container';
container.parentElement.replaceChild(button, container);
<div class="block-compose">
<button class="icon icon-smiley btn-emoji"></button>
<div tabindex="-1" class="input-container">
<div class="input-emoji">
<div class="input-placeholder" style="display: none;">Type a message</div>
<div dir="auto" spellcheck="true" data-tab="1" contenteditable="true" class="input">how r u</div>
</div>
</div>
<div class="ptt-container"><span><button class="icon btn-icon icon-ptt"></button></span>
</div>
</div>

Categories