I am creating an election application that will require switching elements in a list. I have the following Custom Element Web Components. I have trimmed the irrelevant functions from the class for brevity.
// Position
// ---------------------------------------
class Position extends HTMLElement {
constructor(title) {
super();
this.title = title
}
connectedCallback() {
this.className = "portlet";
// Copy the HTML template
var template = document.querySelector("#template-e-position");
this.appendChild(document.importNode(template.content, true));
// Create the title tag
var title = this.querySelector(".title");
title.innerHTML = this.title;
// Create event listener for swap links
this.querySelector(".moveUp").addEventListener("click", function(e) {
swapWithPrevSibling(that);
});
this.querySelector(".moveDown").addEventListener("click", function(e) {
swapWithNextSibling(that);
});
}
}
customElements.define('e-position', Position);
// Candidate
// ---------------------------------------
class Candidate extends HTMLElement {
constructor(name) {
super();
this.name = name;
}
connectedCallback() {
// Copy the HTML template
var template = document.querySelector("#template-e-candidate");
this.appendChild(document.importNode(template.content, true));
// Create the title tag
var name = this.querySelector(".name");
name.innerHTML = this.name;
// Create event listener for delete link
var a = this.querySelector("a.delete");
var that = this;
a.addEventListener('click', function(e) { return that.delete(e) }, false);
}
delete(event) {
deleteNode(this);
}
}
customElements.define('e-candidate', Candidate);
I have the swap functions:
function swapWithPrevSibling (elm) {
elm.parentNode.insertBefore(elm,elm.previousSibling)
}
function swapWithNextSibling (elm) {
elm.parentNode.insertBefore(elm.nextSibling,elm)
}
I use the following template to build the Custom Elements:
<template id="template-e-position">
<div class="header">
<span class="title"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
</div>
<form class="add-candidate">
<input type="text" />
<input type="submit" value="Add candidate">
</form>
</template>
<template id="template-e-candidate">
<span class="name"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</template>
Since I create the Custom Elements from the HTML templates, I need to clone the templates in the connectedCallback() (since adding children in the constructor is disallowed in v1). The result of this is when I call the swap function to the "positions" in the list, it ends up re-cloning the template and adding in unnecessary DOM elements to both Position and Candidate elements.
For example, the result after swapping should be:
<e-position title="Vice-President" class="portlet">
<div class="header">
<span class="title">Vice-President</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
<e-candidate>
<span class="name">Evan</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate>
<e-candidate>
<span class="name">Steph</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate>
</div>
<form class="add-candidate">
<input type="text">
<input value="Add candidate" type="submit">
</form>
</e-position>
But it ends up being a jumbled:
<e-position title="Vice-President" class="portlet">
<div class="header">
<span class="title">Vice-President</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
<e-candidate>
<span class="name">Evan</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
<span class="name"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate><e-candidate>
<span class="name">Steph</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
<span class="name"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate>
</div>
<form class="add-candidate">
<input type="text">
<input value="Add candidate" type="submit">
</form>
<div class="header">
<span class="title"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
</div>
<form class="add-candidate">
<input type="text">
<input value="Add candidate" type="submit">
</form>
</e-position>
Is there a better way to clone the HTML templates so that I don't need to add elements in the connectedCallback? If not, how can I efficiently swap without bringing along all the extra elements? Note that I do not want to use jQuery as I want a lightweight application.
I have seen this and it doesn't work because it ends up calling the connectedCallback and inserting How to swap DOM child nodes in JavaScript?
There are several solutions:
You can use a flag to see if it's the first time the callback is called, and insert the template only if the flag is not set yet.
customElements.define('e-candidate', class extends HTMLElement {
connectedCallback() {
if (!this.init) {
var template = document.querySelector('#template-e-candidate')
this.appendChild(template.content.cloneNode(true))
this.querySelector('.moveUp')
.onclick = () =>
this.previousElementSibling && this.parentElement.insertBefore(this, this.previousElementSibling)
this.init = true
}
}
})
e-candidate { display:block }
<template id="template-e-candidate">
<slot></slot>
<button class="moveUp">↑</button>
</template>
<e-candidate>First</e-candidate>
<e-candidate>Second</e-candidate>
You can use CSS flexbox with CSS order property to change the order of the elements without using insertBefore().
Related
I have a name card under a class and id named "column" . I have used the clone function with a for loop in JavaScript to increase the number of name cards so that i don't have to retype the code every time I create a new card. How do i access each name card and Enter/Edit the data inside each name card using JavaScript? Where ever i need to Enter data i have entered "DATA HERE" in the code below. At the moment I have 8 name cards using the clone property. As i am new to this, i don't know if this is the best way to do this. If there is a better way please let me know. Thanks a lot.
MAIN GOAL: i want to show different data in different name cards, but i don't want to rewrite the HTML code for each name card as the HTML code becomes very long. For example Name card 1 will have different data to name card 2.
$(document).ready(function() {
var e = $('.column');
for (var i = 0; i < 7; i++) {
e.clone().insertAfter(e);
e.clone[i].attr('id', 'clone' + i++);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column" id="column">
<div class="container">
<div class="header"> <h3>"DATA HERE" </h3> </div>
<div class="location">
<h1><ion-icon class ="icon1" name="location-outline" class="nav__icon"></ion-icon> "DATA HERE" </h1>
</div>
<form method="post" > <p>
<button type="button" class="button3"> LIGHTS</button></a>
<button class="button">ON</button> </p>
</form>
<form method="post" > <p>
<button type="button" class="button2">OFF</button> </p>
</form>
<div class="icon-bar">
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
<div class="icon-bar2">
<a class="active" href="#"> "DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
</div>
</div>
OK now, you can use querySelectorAll to find the .column class, then you can set your code to each selector with it's index, starting from 0 to the 1st and ends with 7 in your case ..
here is an example for what i mean
try the snippet
EDIT: changed the snippet with all required areas.
here is an example of all content control on the 1st container, you can use what you need
Try the snippet.
$(document).ready(function() {
var e = $('.column');
for (var i = 0; i < 7; i++) {
e.clone().insertAfter(e);
}
//selecting the first Container with variables
const allcls = document.querySelectorAll('.column');
const chld = allcls[0].querySelector('.header > h3');
const chld2 = allcls[0].querySelector('.location > h1');
const chld3 = allcls[0].querySelectorAll('form');
const frmchld = chld3[0].querySelector('p :nth-child(2)');
const frmchld2 = chld3[1].querySelector('p :nth-child(1)');
const chld4 = allcls[0].querySelectorAll('.icon-bar .active');
const chld5 = allcls[0].querySelectorAll('.icon-bar2 .active');
/* set data for each element */
//.header text with new style
chld.innerText = "New Text for Header";
chld.style.color = 'gray';
chld.style.textAlign = 'center';
chld.style.margin = 'auto';
chld.style.padding = '1rem';
chld.style.background = 'darkblue';
chld.style.width = 'max-content';
chld.style.border = '1px solid darkgray';
//.location text with new color
chld2.innerText = 'Location text';
chld2.style.color = 'darkblue';
//ON button link + name
frmchld.setAttribute('onClick', '#NEWLINK_FOR_ON');
frmchld.innerText = "ON Button";
//off button link + name
frmchld2.setAttribute('onClick', '#NEWLINK2_FOR_ON');
frmchld2.innerText = "OFF Button";
//icon-bar links ( names + href )
chld4[0].innerText = "Iconbar Link1";
chld4[1].innerText = 'Iconbar link2';
chld4[2].innerText = 'Iconbar link3';
chld4[3].innerText = 'Iconbar link4';
chld4[0].setAttribute('href', '#Link_1');
chld4[1].setAttribute('href', '#Link_2');
chld4[2].setAttribute('href', '#Link_3');
chld4[3].setAttribute('href', '#Link_4');
//icon-bar2 links ( names + href )
chld5[0].innerText = "Iconbar2 Link1";
chld5[1].innerText = 'Iconbar2 link2';
chld5[2].innerText = 'Iconbar2 link3';
chld5[0].setAttribute('href', '#Link_1');
chld5[1].setAttribute('href', '#Link_2');
chld5[2].setAttribute('href', '#Link_3');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column" id="column">
<div class="container">
<div class="header">
<h3>"DATA HERE" </h3>
</div>
<div class="location">
<h1>
<ion-icon class="icon1" name="location-outline" class="nav__icon"></ion-icon> "DATA HERE" </h1>
</div>
<form method="post">
<p>
<button type="button" class="button3"> LIGHTS</button>
<button class="button" onClick="#">ON</button> </p>
</form>
<form method="post">
<p>
<button type="button" class="button2" onClick="#">OFF</button> </p>
</form>
<div class="icon-bar">
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
<div class="icon-bar2">
<a class="active" href="#"> "DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
</div>
</div>
i dont know the final porpose of your problem, but i'm assuming you are trying to do that:
$(document).ready(function() {
var e = document.getElementById("column");
for (var i = 0; i < 7; i++) {
var newe=e.cloneNode(true);
document.body.insertAdjacentElement('beforeend', newe);
newe.id="column"+i;
}
hope it helps, probably you are learning but if the data comes from a database this workaround you are trying doing is usless (you will print trough a function this HTML.
Keep Growing, Plus Ultra!!!
Well I am learning javascript and I am trying to write a function which would look if(href.contains(1234567) and change class="price" value to any number.
I tried googling but I cant seem to find an answer to this
<div class="product-info">
<a href="https:someUrl.com/1234567">
<div class="title">
Some Sweet Title
</div>
</a>
<div class="price">
ValueHereNeedsToBeAdded
</div>
</div>
I expect class="price" value to be changed to some number
You can use the a[href*=1234567]+.price selector to do it.
a[href*=1234567] select all <a> elements that have a href attribute value containing "1234567" and +.price select element has class price placed immediately after that a[href*=1234567].
Demo:
$('a[href*=1234567]+.price').text(123456)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-info">
<a href="https:someUrl.com/1234567">
<div class="title">
Some Sweet Title
</div></a>
<div class="price">
ValueHereNeedsToBeAdded
</div>
</div>
<a href="https:someUrl.com/test">
</a>
<div class="price">
ValueNoNeedsToBeAddedHere
</div>
A solution with jQuery:
function myFunction() {
var str = $('#link').attr('href');
if (str.indexOf("1234567") >= 0){
var x = document.getElementsByClassName("price");
var y = x[0];
y.classList.add('myClass');
y.classList.remove('price');
y.innerHTML = "123456"
}
}
myFunction();
.myClass{
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-info">
<a id="link" href="https:someUrl.com/1234567">
<div class="title">
Some Sweet Title
</div>
</a>
<div class="price">
ValueHereNeedsToBeAdded
</div>
</div>
You can do without jquery :-
<div class="product-info">
<a href="https:someUrl.com/1234567" id="link_id" onclick="check(this.href)">
<div class="title">
Some Sweet Title
</div></a>
<div class="price" id="setvalue">
ValueHereNeedsToBeAdded
</div>
</div>
function check()
{
event.preventDefault();
var href = document.getElementById("link_id").getAttribute("href");
if(href.includes(1234567))
{
document.getElementById('setvalue').innerHTML = '1313133';
}
}
I posted a problem (How to order list items by simple hierarchy in page); the answer responded to the question but only because my sample wasn't sufficiently complex.
I need to find the index of an element compared to a very high parent or maybe the entire page. Could be the index in comparison to the entire dom.
The code there not working because index() always returns 0 (if control are not in the same parent)
https://jsfiddle.net/6ztqckqa/3/
$(function() {
//reorder errorList,
$('#errorList a').sort(function(a, b) {
var data1 = $(a).data('idcontrol'),
data2 = $(b).data('idcontrol'),
index1 = $('#' + data1).index(),
index2 = $('#' + data2).index();
return index1 - index2;
}).appendTo('#errorList');
});
HTML:
<h3>The original list or errors.</h3>
<div id="errorListOriginal">
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="list3">error list3</a>
<a data-idcontrol="textbox1">error textbox1</a>
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="list1">error list1</a>
</div>
<h3>The list or errors reordered.</h3>
<div id="errorList">
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="list3">error list3</a>
<a data-idcontrol="textbox1">error textbox1</a>
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="list1">error list1</a>
</div>
<h3>What should be the list of errors after been reordered.</h3>
<div id="errorListShouldBeAfterReorderOnLoad">
<a data-idcontrol="textbox1">error textbox1</a>
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="textbox2">error textbox2</a>
<a data-idcontrol="list1">error list1</a>
<a data-idcontrol="list3">error list3</a>
</div>
<h3>Elements in the page</h3>
<div>
<div>
<input type="text" id="textbox1" />
</div>
<div>
<div>
<div>
<div>
<div>
<input type="text" id="textbox2" />
</div>
</div>
</div>
<div>
<select id="list1">
<option>item1</option>
</select>
</div>
</div>
</div>
<div>
<div>
<div>
<input type="text" id="textbox3" />
</div>
<select id="list2">
<option>item1</option>
</select>
</div>
</div>
<div>
<select id="list3">
<option>item1</option>
</select>
</div>
</div>
Is there a way to use z-index?
At least some of your stack of nested divs should have classes on them indicating their purpose. Elements of the same class should be at the same level in the DOM tree so that you can select them and get their indexes.
Otherwise, apply a class or an ID to the top-level parent and target its children.
The bottom line is that clean, semantic markup is key.
I used brute force base on Is element before or after another element in DOM
here on fiddle http://jsfiddle.net/6ztqckqa/5
$(function() {
//reorder errorList,
$('#errorList a').sort(function(a, b) {
var data1 = $(a).data('idcontrol'),
data2 = $(b).data('idcontrol');
var all = $('input, select');
var index1 = all.index($("#" + data1));
var index2 = all.index($("#" + data2));
return index1 - index2;
}).appendTo('#errorList');
});
So, I had a working function in jQuery but then I decided to use Angular for my application. Just can't find the way so it adds the CSS to only one child element.
Jquery code that was working
$('.list-div').on('mouseenter', function(){
$(this).find('.client-jar').css('opacity','1');
}).on('mouseleave', function() {
$(this).find('.client-jar').css('opacity','0');
});
Current html
<ul>
<li ng-repeat="one in ones | orderBy:'-date'">
<div class="list-div">
<div class="row jar-div first-jar-div" ng-mouseover="showButton()" ng-mouseleave="hideButton()">
<div class="col-xs-7 description-div">
<p class="version">{{ one.version }}</p>
<p class="date">{{ one.date }}</p>
</div>
<div class="col-xs-5 buttons-div">
<div class="list-button client-jar">
<a class="list-link" data-toggle="modal" data-target="#myModal">create server</a>
</div>
<div class="list-button server-jar">
<a class="list-link">Server jar</a>
</div>
</div>
</div>
</div>
</li>
</ul>
And Current Angular JS
$scope.showButton = function(){
angular.element('.list-div').find('.client-jar').css('opacity','1');
};
$scope.hideButton = function(){
angular.element('.list-div').find('.client-jar').css('opacity','0');
};
I would use:
https://docs.angularjs.org/api/ng/directive/ngMouseenter
<button ng-mouseenter="hoverState = true">mouse in mouse out</button>
Then use with:
https://docs.angularjs.org/api/ng/directive/ngMouseleave
<button ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false">mouse in mouse out</button>
At this point you have a hover over and off flag. You can now pick this flag up with ng-class to set and unset a CSS class which contains your opacity stuff, and any future CSS animations etc etc:
https://docs.angularjs.org/api/ng/directive/ngClass
<button ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false" ng-class="{'opacity-class':hoverState}">mouse in mouse out</button>
No jQuery required, AngularJS is just a totally different way of going about things.
<style>
.opacity-class .client-jar{
opacity:0;
}
</style>
<ul>
<li ng-repeat="one in ones | orderBy:'-date'">
<div class="list-div">
<div class="row jar-div first-jar-div" ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false" ng-class="{'opacity-class':hoverState}">
<div class="col-xs-7 description-div">
<p class="version">{{ one.version }}</p>
<p class="date">{{ one.date }}</p>
</div>
<div class="col-xs-5 buttons-div">
<div class="list-button client-jar">
<a class="list-link" data-toggle="modal" data-target="#myModal">create server</a>
</div>
<div class="list-button server-jar">
<a class="list-link">Server jar</a>
</div>
</div>
</div>
</div>
</li>
</ul>
angular.module('App').directive('listFade', function() {
return function(scope, element) {
element.bind('mouseover', function(children) {
// YOUR ANIMATION CODE HERE
});
element.bind('mouseout', function(children) {
// YOUR ANIMATION OUT CODE HERE
});
}
})
then just add the directive to your ng-repeat markup, list-fade=""
you don't need children but its a easy way to call the children of each element. This should help you out. Then get rid of that ng-mouseover showButton();
Updating your code to use inline CSS, would be like this.
var element = document.querySelector('.list-div .client-jar');
$scope.showButton = function(){
angular.element(element).css('opacity','1');
};
$scope.hideButton = function(){
angular.element(element).css('opacity','0');
};
As in AngularJS .element documentation, it's said that you need to pass a element.
You can also use ng-class, creating a class for opacity:
<div class="client-jar" ng-class="{class: expression}"></div>
https://docs.angularjs.org/api/ng/directive/ngClass
Or use ng-show and ng-hide for display control:
<div class="client-jar" ng-show="expression"></div>
https://docs.angularjs.org/api/ng/directive/ngShow
You could even use ng-style for inline css:
<div class="client-jar" ng-style="{'opacity': '1'}"></div>
https://docs.angularjs.org/api/ng/directive/ngStyle
I want to select html of class "postHandel" when I click replyBtn.
There are multiple "repost" divs, I want postHandel of the current div in which I am clicking replyBtn.
<div class="repost" data-id="52">
<div class="profileImg"></div>
<div class="postWrap">
<div class="postUser">Tejas Kulkarni</div>
<div class="postHandel">#tejas</div>
<div class="postText"> </div>
</div>
<i class="icon-chevron-down"></i>
<div class="clearfix"></div>
<div class="postOptions twtOptRP52">
<ul>
<li> <a class="btn btn-mini rtBtn" data-id="96"><i class="icon-retweet"></i> Repost</a></li>
<li> <a class="btn btn-mini replyBtn" data-id="96"><i class="icon-reply"></i> Reply</a></li>
<li> <a class="btn btn-mini favBtn" data-id="96"><i class="icon-star"></i> Fav</a></li>
<li><div class="loadingPostsBtn hideme loadingBtn-96 hideme"><img src="http://linkzone.dev/assets/img/ajax-loader.gif"></div></li>
<li><div class="loadingFailBtn hideme loadingFail-96 hideme"><img src="http://linkzone.dev/assets/img/ajax-fail.gif"></div></li>
</ul>
</div>
My jQuery Code is :
$(document).on("click",".replyBtn",function(){
var postHandel = $(this).closest(".postWrap").html('');
var log = $(postHandel).closest(".postHandel").html();
console.log(log);
});
Try this:
var log = $(this).closest(".repost").find(".postHandel:first").html();
$(this) // current element (.replybtn)
.closest('.report') // up to main wrapper (top-most grouping element)
.find('.postWrap > .postHandel') // down to postHandel
.html(); // the end value
You may not even need the .postWrap > discriminator, but it does make sure that it's the that .postHandel you're after.