first commit
This commit is contained in:
+110
@@ -0,0 +1,110 @@
|
||||
class AccordionItem extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ['title'];
|
||||
}
|
||||
|
||||
#title = '';
|
||||
#collapsed = true;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.update();
|
||||
this.shadowRoot.addEventListener('click', this.toggle.bind(this));
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
if (name === 'title') {
|
||||
this.#title = newValue;
|
||||
}
|
||||
this.update();
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.#collapsed = !this.#collapsed;
|
||||
this.update();
|
||||
|
||||
// Dispatch a custom event to notify the parent AccordionElement
|
||||
const event = new CustomEvent('accordion-item-toggle', {
|
||||
bubbles: true,
|
||||
detail: {
|
||||
collapsed: this.#collapsed,
|
||||
item: this,
|
||||
},
|
||||
});
|
||||
this.dispatchEvent(event);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
.accordion-item {
|
||||
|
||||
}
|
||||
.accordion-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
background-color: white;
|
||||
}
|
||||
.accordion-title:hover {
|
||||
background-color: white;
|
||||
}
|
||||
.accordion-title::after {
|
||||
content: '${this.#collapsed ? '+' : '−'}';
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #777;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.accordion-content {
|
||||
padding: 0.5rem;
|
||||
display: ${this.#collapsed ? 'none' : 'block'};
|
||||
}
|
||||
</style>
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-title">${this.#title}</div>
|
||||
<div class="accordion-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class AccordionElement extends HTMLElement {
|
||||
#activeItem = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.shadowRoot.innerHTML = '<slot></slot>';
|
||||
this.addEventListener('accordion-item-toggle', this.handleItemToggle.bind(this));
|
||||
}
|
||||
|
||||
handleItemToggle(event) {
|
||||
const { collapsed, item } = event.detail;
|
||||
|
||||
// If the active item is different from the toggled item, collapse the active item
|
||||
if (this.#activeItem && this.#activeItem !== item && !collapsed) {
|
||||
this.#activeItem.toggle();
|
||||
}
|
||||
|
||||
// Update the active item
|
||||
if (!collapsed) {
|
||||
this.#activeItem = item;
|
||||
} else if (this.#activeItem === item) {
|
||||
this.#activeItem = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('accordion-item', AccordionItem);
|
||||
customElements.define('accordion-element', AccordionElement);
|
||||
|
||||
|
||||
+161
@@ -0,0 +1,161 @@
|
||||
const template = document.createElement('template');
|
||||
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
.authloaderanwi {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.wrap{
|
||||
position:absolute;
|
||||
left:50%;
|
||||
width:5em;
|
||||
height:5em;
|
||||
top:20%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
.loader{
|
||||
transition: all 0.7s ease-in-out;
|
||||
|
||||
border:5px solid #ebebeb;
|
||||
border-bottom-color:black;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius:50%;
|
||||
-webkit-font-smoothing: antialiased !important;
|
||||
margin:30px 0px;
|
||||
}
|
||||
|
||||
#lrd1{
|
||||
-webkit-animation: spin1 0.5s linear infinite;
|
||||
|
||||
}
|
||||
#lrd2{
|
||||
-webkit-animation: spin2 3s ease-in-out infinite;
|
||||
|
||||
}
|
||||
#lrd3{
|
||||
-webkit-animation: spin3 15s ease-in-out infinite;
|
||||
|
||||
}
|
||||
|
||||
@keyframes spin1{
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
}
|
||||
@keyframes spin2{
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(1020deg);
|
||||
}
|
||||
|
||||
|
||||
100% {
|
||||
transform: rotate(720deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin3{
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(1070deg);
|
||||
}
|
||||
|
||||
|
||||
100% {
|
||||
transform: rotate(6119deg);
|
||||
border-bottom-color:#072426 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.authloaderanwi {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
.overlayanwiAuth{
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
background:white;
|
||||
position:fixed;
|
||||
top:0;
|
||||
right:0;
|
||||
z-index:99999;
|
||||
display:none;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="overlayanwiAuth ">
|
||||
|
||||
<div style="
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width:40px;
|
||||
display:none;
|
||||
">
|
||||
|
||||
<span>
|
||||
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 116.31" style="enable-background:new 0 0 122.88 116.31" xml:space="preserve"><g><path d="M4.06,12.67C1.87,12.67,0,10.8,0,8.51c0-2.19,1.87-4.06,4.06-4.06h5.62c0.1,0,0.31,0,0.42,0c3.75,0.1,7.08,0.83,9.88,2.6 c3.12,1.98,5.41,4.99,6.66,9.47c0,0.1,0,0.21,0.1,0.31L27.78,21h2.34V4.12c0-2.27,1.85-4.12,4.12-4.12h21.67 c2.27,0,4.12,1.85,4.12,4.12v10.02c3.42-3.41,8.06-5.5,13.18-5.5c2.22,0,4.36,0.4,6.34,1.12c4.08-4.33,9.87-7.04,16.29-7.04 c10.96,0,20.07,7.88,21.99,18.28h0.99c2.29,0,4.06,1.87,4.06,4.06c0,0.42-0.11,0.83-0.21,1.25l-10.61,42.76 c-0.42,1.87-2.08,3.12-3.95,3.12l0,0H41.51c1.46,5.41,2.91,8.32,4.89,9.68c2.39,1.56,6.56,1.66,13.53,1.56h0.1l0,0h47.03 c2.29,0,4.06,1.87,4.06,4.06c0,2.29-1.87,4.06-4.06,4.06H60.04l0,0c-8.64,0.1-13.94-0.1-18.21-2.91 c-4.37-2.91-6.66-7.91-8.95-16.96l0,0L18.94,18.92c0-0.1,0-0.1-0.1-0.21c-0.62-2.29-1.66-3.85-3.12-4.68 c-1.46-0.94-3.43-1.35-5.72-1.35c-0.1,0-0.21,0-0.31,0H4.06L4.06,12.67L4.06,12.67z M84.38,37.69c0-1.28,1.27-2.32,2.83-2.32 c1.56,0,2.83,1.04,2.83,2.32v15.69c0,1.28-1.27,2.32-2.83,2.32c-1.56,0-2.83-1.04-2.83-2.32V37.69L84.38,37.69z M67.43,37.69 c0-1.28,1.27-2.32,2.83-2.32c1.56,0,2.83,1.04,2.83,2.32v15.69c0,1.28-1.27,2.32-2.83,2.32c-1.56,0-2.83-1.04-2.83-2.32V37.69 L67.43,37.69z M50.49,37.69c0-1.28,1.27-2.32,2.83-2.32c1.56,0,2.83,1.04,2.83,2.32v15.69c0,1.28-1.27,2.32-2.83,2.32 c-1.56,0-2.83-1.04-2.83-2.32V37.69L50.49,37.69z M85.57,13.37c2.31,2.05,4.14,4.66,5.29,7.63h19.85 c-1.68-6.65-7.7-11.58-14.87-11.58C91.89,9.42,88.29,10.91,85.57,13.37L85.57,13.37z M92.21,29.11L92.21,29.11l-38.01,0l0,0H30.07 l0,0l9.26,34.86h65.65l8.63-34.86H92.21L92.21,29.11z M55.31,21c0.11-0.29,0.23-0.57,0.35-0.85V7.2c0-1.64-1.35-2.99-2.99-2.99 H37.71c-1.64,0-2.99,1.34-2.99,2.99V21H55.31L55.31,21z M94.89,96.33c5.52,0,9.99,4.47,9.99,9.99s-4.47,9.99-9.99,9.99 c-5.51,0-9.99-4.47-9.99-9.99S89.38,96.33,94.89,96.33L94.89,96.33L94.89,96.33z M51.09,96.33c5.51,0,9.99,4.47,9.99,9.99 s-4.47,9.99-9.99,9.99s-9.99-4.47-9.99-9.99S45.57,96.33,51.09,96.33L51.09,96.33L51.09,96.33z"/></g>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="authloaderanwi">
|
||||
<div class='loader' id='lrd1'></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`
|
||||
|
||||
class AuthLoader extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this._shadowRoot = this.attachShadow({ 'mode': 'open' });
|
||||
this._shadowRoot.appendChild(template.content.cloneNode(true));
|
||||
this.show();
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
return ['payment'];
|
||||
}
|
||||
|
||||
// define getters and setters for attributes
|
||||
get payment() {
|
||||
return this.getAttribute('payment');
|
||||
}
|
||||
|
||||
set payment(val) {
|
||||
if (val) {
|
||||
this.setAttribute('payment', val);
|
||||
} else {
|
||||
this.removeAttribute('payment');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
show(){
|
||||
// $('.overlayanwiAuth').css('display','block');
|
||||
this._shadowRoot.querySelector('.overlayanwiAuth').style.display = "block";
|
||||
}
|
||||
|
||||
hide(){
|
||||
//$('.overlayanwiAuth').addClass('display','none');
|
||||
this._shadowRoot.querySelector('.overlayanwiAuth').style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('auth-loader', AuthLoader);
|
||||
+256
@@ -0,0 +1,256 @@
|
||||
|
||||
class SearchableMulti extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ['placeholder'];
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._values = [];
|
||||
this._placeholder = 'Search...';
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
if(!this._rendered) {
|
||||
this._rendered = true;
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.shadowRoot.appendChild(this._template());
|
||||
this._refresh();
|
||||
}
|
||||
|
||||
this._nonSelected.addEventListener('click', this);
|
||||
this._selected.addEventListener('click', this);
|
||||
this._search.addEventListener('keyup', this);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this._nonSelected.removeEventListener('click', this);
|
||||
this._selected.removeEventListener('click', this);
|
||||
this._search.removeEventListener('keyup', this);
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldVal, newVal) {
|
||||
if(name === 'placeholder') {
|
||||
this.placeholder = newVal;
|
||||
}
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this._values;
|
||||
}
|
||||
|
||||
get placeholder() {
|
||||
return this._placeholder;
|
||||
}
|
||||
|
||||
set placeholder(val) {
|
||||
this._placeholder = val;
|
||||
if(this._rendered) {
|
||||
this.shadowRoot.querySelector('input').placeholder = val;
|
||||
}
|
||||
}
|
||||
|
||||
handleEvent(ev) {
|
||||
var el = ev.target;
|
||||
switch(ev.type) {
|
||||
case 'click':
|
||||
if(el.className === 'item') {
|
||||
if(el.parentNode.className === 'non-selected-wrapper') {
|
||||
this._nonSelectedClick(el);
|
||||
} else {
|
||||
this._selectedClick(el);
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'keyup':
|
||||
if(ev.keyCode === 32 || ev.keyCode === 13) {
|
||||
if(el.className === 'item') {
|
||||
if(el.parentNode.className === 'non-selected-wrapper') {
|
||||
this._nonSelectedClick(el);
|
||||
} else {
|
||||
this._selectedClick(el);
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
} else {
|
||||
this._onSearch();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
_nonSelectedClick(el) {
|
||||
// Not already selected
|
||||
if(!el._selected) {
|
||||
this._setSelected(el);
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
}
|
||||
|
||||
_setSelected(el) {
|
||||
el._option.selected = true;
|
||||
var clone = el._selected = el.cloneNode(true);
|
||||
clone._nonSelected = el;
|
||||
this._selected.appendChild(clone);
|
||||
this._values.push(el.dataset.value);
|
||||
}
|
||||
|
||||
_selectedClick(el) {
|
||||
var nonSelected = el._nonSelected;
|
||||
var option = nonSelected._option;
|
||||
nonSelected._selected = undefined;
|
||||
el.parentNode.removeChild(el);
|
||||
|
||||
// Deselect the option
|
||||
option.selected = false;
|
||||
|
||||
// Remove from values
|
||||
var idx = this._values.indexOf(el.dataset.value);
|
||||
if(idx !== -1) {
|
||||
this._values.splice(idx, 1);
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
}
|
||||
|
||||
_onSearch() {
|
||||
var term = this._search.value.toLowerCase();
|
||||
|
||||
function includes(str) {
|
||||
return str.toLowerCase().indexOf(term) !== -1;
|
||||
}
|
||||
|
||||
var nonSelected, d;
|
||||
for(var i = 0, len = this._nonSelected.children.length; i < len; i++) {
|
||||
nonSelected = this._nonSelected.children[i];
|
||||
|
||||
if(term && !includes(nonSelected.dataset.value) &&
|
||||
!includes(nonSelected.textContent)) {
|
||||
d = 'none';
|
||||
} else {
|
||||
d = '';
|
||||
}
|
||||
nonSelected.style.display = d;
|
||||
if(nonSelected._selected) {
|
||||
nonSelected._selected.style.display = d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_template() {
|
||||
var doc = this.ownerDocument;
|
||||
var wrapper = doc.createElement('div');
|
||||
wrapper.className = 'wrapper';
|
||||
|
||||
var style = doc.createElement('style');
|
||||
style.textContent = this._styles();
|
||||
|
||||
var input = this._search = doc.createElement('input');
|
||||
input.type = 'text';
|
||||
input.className = 'search-input';
|
||||
input.placeholder = this.placeholder;
|
||||
|
||||
var nonSelected = this._nonSelected = doc.createElement('div');
|
||||
nonSelected.className = 'non-selected-wrapper';
|
||||
|
||||
var selected = this._selected = doc.createElement('div');
|
||||
selected.className = 'selected-wrapper';
|
||||
|
||||
wrapper.appendChild(style);
|
||||
wrapper.appendChild(input);
|
||||
wrapper.appendChild(nonSelected);
|
||||
wrapper.appendChild(selected);
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
_styles() {
|
||||
return `
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.non-selected-wrapper,
|
||||
.selected-wrapper {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
height: 200px;
|
||||
overflow-y: scroll;;
|
||||
padding: 10px;
|
||||
vertical-align: top;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.non-selected-wrapper {
|
||||
background: #fafafa;
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.selected-wrapper {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.item {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background: #ececec;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
padding: 10px 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.non-selected-wrapper .item.selected {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.non-selected-wrapper .row.selected:hover {
|
||||
background: inherit;
|
||||
cursor: inherit;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
_refresh() {
|
||||
this._selected.innerHTML = this._nonSelected.innerHTML = '';
|
||||
|
||||
var term = this._search.value;
|
||||
var options = [].slice.call(this.querySelectorAll('option'));
|
||||
var doc = this.ownerDocument;
|
||||
|
||||
options.forEach(function(option){
|
||||
var row = doc.createElement('a');
|
||||
row.setAttribute('tabindex', "0");
|
||||
row.setAttribute('role', 'button');
|
||||
row.textContent = option.textContent;
|
||||
row.dataset.value = option.value;
|
||||
row.className = 'item';
|
||||
row._option = option;
|
||||
this._nonSelected.appendChild(row);
|
||||
|
||||
if(option.selected) {
|
||||
this._setSelected(row);
|
||||
}
|
||||
}.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('searchable-multi', SearchableMulti);
|
||||
Reference in New Issue
Block a user