Skip to content

Instantly share code, notes, and snippets.

@derpixler
Last active April 16, 2019 06:54
Show Gist options
  • Save derpixler/6b839304c8431ccbe45f21efe863953e to your computer and use it in GitHub Desktop.
Save derpixler/6b839304c8431ccbe45f21efe863953e to your computer and use it in GitHub Desktop.
CloneNodes and add clonedElements
var awsmAdditionalStyle = function (additionals = []) {
this.listElem = document.querySelector('.awsm-preset-list');
this.additionals = additionals ? additionals : [];
if(this.listElem && this.additionals) {
this.input = this.listElem.querySelector('input');
this.label = this.listElem.querySelector('label');
var cloneInput = function (additionals) {
if (!this.input) {
return null;
}
var clonedInput = this.input.cloneNode();
additionals.class ? clonedInput.classList.add(additionals.class) : null;
additionals.style ? clonedInput.dataset.style = additionals.style : null;
additionals.id ? clonedInput.setAttribute('id', 'rad-' + additionals.id) : null;
additionals.type ? clonedInput.setAttribute('value', 'rad-' + additionals.type) : null;
return clonedInput;
}
var cloneLable = function (additionals) {
if (!this.input) {
return null;
}
var clonedLable = this.label.cloneNode(true);
var img = clonedLable.querySelector('img');
var span = clonedLable.querySelector('span');
additionals.class ? clonedLable.classList.add(additionals.class) : null;
additionals.style ? clonedLable.dataset.style = additionals.style : null;
additionals.id ? clonedLable.setAttribute('for', 'rad-' + additionals.id) : null;
additionals.img ? img.src = additionals.img : null;
additionals.type ? img.src = additionals.img : null;
additionals.id ? span.dataset.type = additionals.type : null;
additionals.name ? span.innerText = additionals.name : null;
clonedLable.appendChild(img);
clonedLable.appendChild(span);
return clonedLable;
}
for (var i = 0; i < this.additionals.length; i++) {
var clonedInput = cloneInput(this.additionals[i]);
var clonedLable = cloneLable(this.additionals[i]);
clonedInput ? this.listElem.appendChild(clonedInput) : null;
clonedLable ? this.listElem.appendChild(clonedLable) : null;
}
}
};
document.addEventListener("DOMContentLoaded", function(event) {
var additionals = [{
class: '',
id: 'my-template',
style: '5',
column: '56',
name: 'My Template',
type: 'my-template',
img: 'www.google.de'
},
{
class: '',
id: 'foo',
style: '',
column: '',
name: '',
type: '',
img: ''
},
{
class: '',
id: 'another-template',
style: '6',
column: '99',
name: 'Anothoer Template',
type: 'another-template',
img: 'www.google.de'
}];
awsmAdditionalStyle(additionals);
});
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="awsmAdditionalStyle.js"></script>
</head>
<body>
<div class="awsm-preset-list awsm-clearfix">
<input class="awsm-radio-hidden" id="rad-table" type="radio" data-style="3" data-column="0" name="team-style" value="table">
<label for="rad-table"><img src="http://blunk-gmbh.wp/wp-content/plugins/awsm-team-pro//images/table.jpg">
<span data-type="table">Table</span>
</label>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment