A Pen by Anthony Pothin

Developer
Anthony Pothin
Size
4,034 Kb
Views
10,120
  1. A Pen by Anthony Pothin Previews
  2. A Pen by Anthony Pothin HTML Codes
  3. A Pen by Anthony Pothin CSS Codes
  4. A Pen by Anthony Pothin JS Codes

How do I make an a pen by anthony pothin?

What is a a pen by anthony pothin? How do you make a a pen by anthony pothin? This script and codes were developed by Anthony Pothin on 17 January 2023, Tuesday.

A Pen by Anthony Pothin Previews
IQ Test

A Pen by Anthony Pothin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Anthony Pothin</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <select id="select" multiple> <option value="a">yhg</option> <option value="1">dfsgfds</option> <option value="2">ffff</option> <option value="3">ssddssd</option> <option value="4">dfsfssgfds</option> <option value="5">qezfd</option>
</select>
<div><button id="a">create custom select</button></div>
<input id="input"></input>
<div><button id="b">create custom input</button></div> <script src="js/index.js"></script>
</body>
</html>

A Pen by Anthony Pothin - Script Codes CSS Codes

html, body { width: 100%; height: 100%;
}
body { padding: 20px;
}
.multiple_element {	position: relative; width: 200px; color: #333; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
}
.multiple_element .output_wrapper {	min-height: 26px; border: 1px solid #C6C6C6; border-radius: 4px; background-color: white;	display: flex; flex-direction: row; align-items: stretch;
}
.multiple_element .output {	flex: 1 1 auto;	display: flex; flex-direction: row; flex-wrap: wrap; padding-right: 5px; padding-bottom: 5px; background-image: -webkit-linear-gradient(center top , #EEE 1%, #FFF 15%); background-image: -moz-linear-gradient(center top , #EEE 1%, #FFF 15%); background-image: -khtml-linear-gradient(center top , #EEE 1%, #FFF 15%); background-image: -ms-linear-gradient(center top , #EEE 1%, #FFF 15%); background-image: -o-linear-gradient(center top , #EEE 1%, #FFF 15%); background-image: linear-gradient(center top , #EEE 1%, #FFF 15%);
}
.multiple_element .item {	flex: 0 0 auto;
}
.multiple_element .name, .close { padding: 3px 5px;
}
.multiple_element .item * {	display: inline-block;
}
.multiple_element .list .item:hover { background-color: grey;
}
.multiple_element .list .item * { padding: 3px 7px;
}
.multiple_element .output .item { margin-top: 5px; margin-left: 5px;	border: 1px solid #AAA; border-radius: 3px; background-clip: padding-box; background-color: #E4E4E4; background-image: -webkit-linear-gradient(center top , #F4F4F4 20%, #F0F0F0 50%, #E8E8E8 52%, #EEE 100%); background-image: -moz-linear-gradient(center top , #F4F4F4 20%, #F0F0F0 50%, #E8E8E8 52%, #EEE 100%); background-image: -ms-linear-gradient(center top , #F4F4F4 20%, #F0F0F0 50%, #E8E8E8 52%, #EEE 100%); background-image: -o-linear-gradient(center top , #F4F4F4 20%, #F0F0F0 50%, #E8E8E8 52%, #EEE 100%); background-image: linear-gradient(center top , #F4F4F4 20%, #F0F0F0 50%, #E8E8E8 52%, #EEE 100%);
}
.multiple_element .close {	border-left: 1px solid #AAA;
}
.multiple_element .input { box-sizing: border-box; position: absolute; width: 100%; display: flex; flex-direction: column; align-items: stretch; border-bottom: 1px solid #C6C6C6; border-right: 1px solid #C6C6C6; border-left: 1px solid #C6C6C6; border-radius: 4px; background-color: white; z-index: +1;
}
.multiple_element .input input { height: 20px; margin: 3px 7px; padding: 0; border-style: none;
}
.multiple_element .list .item, .output .close { cursor: pointer;
}
.multiple_element .list .close { display: none;
}

A Pen by Anthony Pothin - Script Codes JS Codes

//////////////////////////
// Classe CustomElement //
//////////////////////////
if (typeof MultipleElement === 'undefined') {	var MultipleElement = function(oldNode) {	console.group('MultipleElement');	console.info('prototype :', MultipleElement.prototype);	console.info('this :', this);	console.info('instance of MultipleElement =', this instanceof MultipleElement);	console.info('instance of CustomMultipleSelect =', this instanceof CustomMultipleSelect);	console.info(MultipleElement, CustomMultipleSelect);	console.groupEnd();	// constructeur	this.oldNode = oldNode;	this.newNode = document.createElement('div');	this.newNode.classList.add('multiple_element');	var outputWrapper = document.createElement('div');	outputWrapper.classList.add('output_wrapper');	outputWrapper.addEventListener('click', this.toggleInput.bind(this), false);	this.newNode.appendChild(outputWrapper);	this.outputNode = document.createElement('div');	this.outputNode.classList.add('output');	outputWrapper.appendChild(this.outputNode);	this.toogleNode = document.createElement('div');	this.toogleNode.classList.add('button');	this.toogleNode.innerHTML = "&#8711";	outputWrapper.appendChild(this.toogleNode);	this.inputNode = document.createElement('div');	this.inputNode.classList.add('input');	this.newNode.appendChild(this.inputNode);	this.hideInput();	//this.oldNode.style.display = "none";	this.oldNode.parentNode.insertBefore(this.newNode, this.oldNode);	document.body.addEventListener('click', this.hideInput.bind(this), false);	};	MultipleElement.prototype = {	// propriétés	oldNode: null,	newNode: null,	outputNode: null,	inputNode: null,	toogleNode: null,	// méthodes	createItem: function(name, value) {	var item = document.createElement('span');	item.classList.add('item');	item.setAttribute('data-value', value);	var text = document.createElement('span');	text.classList.add('name');	text.textContent = name;	item.appendChild(text);	var button = document.createElement('span');	button.classList.add('close');	button.innerHTML = "&#215";	item.appendChild(button);	return item;	},	toggleInput: function(event) {	event.stopPropagation();	if (this.inputNode.style.display === "none") {	this.showInput();	} else {	this.hideInput();	}	},	showInput: function() {	this.inputNode.style.display = "";	},	hideInput: function(event) {	if (event instanceof Event) {	console.log('hideInput', event, this.newNode.contains(event.target), this.newNode === event.target);	}	if (event && (this.newNode.contains(event.target) || this.newNode === event.target)) {	return;	}	this.inputNode.style.display = "none";	}	};	console.info('proto MultipleElement', MultipleElement.prototype);
} else {	console.error('"MultipleElement" class already exists !');
}
/////////////////////////////////
// Classe CustomMultipleSelect //
/////////////////////////////////
if (typeof CustomMultipleSelect === 'undefined') {	var CustomMultipleSelect = function(oldNode) {	console.group('CustomMultipleSelect');	console.info('prototype :', CustomMultipleSelect.prototype);	console.info('this :', this);	console.info('instance of MultipleElement =', this instanceof MultipleElement);	console.info('instance of CustomMultipleSelect =', this instanceof CustomMultipleSelect);	console.info(MultipleElement, CustomMultipleSelect);	console.groupEnd();	// constructeur parent	MultipleElement.call(this, oldNode);	// constructeur enfant	this.inputNode.classList.add('list');	for (var i = 0, iMax = oldNode.options.length; i < iMax; i++) {	var item = this.createItem(oldNode.options.item(i).textContent, oldNode.options.item(i).value);	console.info(oldNode.options.item(i), oldNode.options.item(i).selected);	if (oldNode.options.item(i).selected) {	this.moveToOutput(item);	} else {	this.moveToInput(item);	}	}	this.updateReady = true;	};	CustomMultipleSelect.prototype = Object.create(MultipleElement.prototype);	CustomMultipleSelect.prototype.updateOldNode = function() {	if (!this.updateReady) {	return;	}	var optionNodeList = this.oldNode.options;	var customNodeList = this.outputNode.querySelectorAll('.item');	for (var i = 0, iMax = optionNodeList.length; i < iMax; i++) {	optionNodeList.item(i).selected = false;	for (var j = 0, jMax = customNodeList.length; j < jMax; j++) {	if (optionNodeList.item(i).value === customNodeList.item(j).getAttribute('data-value')) {	optionNodeList.item(i).selected = true;	}	}	}	};	CustomMultipleSelect.prototype.moveToInput = function(itemOrEvent) {	if (itemOrEvent instanceof Event) {	itemOrEvent.stopPropagation();	itemOrEvent = itemOrEvent.currentTarget.parentNode;	}	itemOrEvent.querySelector('.close').removeEventListener('click', this.moveToInput.bind(this), false);	itemOrEvent.addEventListener('click', this.moveToOutput.bind(this), false);	this.inputNode.appendChild(itemOrEvent);	this.updateOldNode();	};	CustomMultipleSelect.prototype.moveToOutput = function(itemOrEvent) {	if (itemOrEvent instanceof Event) {	itemOrEvent.stopPropagation();	itemOrEvent = itemOrEvent.currentTarget;	}	itemOrEvent.querySelector('.close').addEventListener('click', this.moveToInput.bind(this), false);	itemOrEvent.removeEventListener('click', this.moveToOutput.bind(this), false);	this.outputNode.appendChild(itemOrEvent);	this.updateOldNode();	};	console.info('proto CustomMultipleSelect', CustomMultipleSelect.prototype);
} else {	console.error('"CustomMultipleSelect" class already exists !');
}
////////////////////////////////
// Classe CustomMultipleInput //
////////////////////////////////
if (typeof CustomMultipleInput === 'undefined') {	var CustomMultipleInput = function(oldNode, separator) {	this.separator = separator;	// constructeur parent	MultipleElement.call(this, oldNode);	// constructeur enfant	this.inputNode.appendChild(document.createElement('input'));	this.inputNode.querySelector('input').addEventListener('keydown', this.moveToOutput.bind(this), false);	this.inputNode.querySelector('input').addEventListener('change', this.moveToOutput.bind(this), false);	this.inputNode.querySelector('input').addEventListener('change', this.hideInput.bind(this), false);	//this.inputNode.setAttribute('contenteditable','true');	var array = oldNode.value.split(separator);	for (var i = 0, iMax = array.length; i < iMax; i++) {	if (array[i] === '') {	continue;	}	var item = this.createItem(array[i], array[i]);	this.moveToOutput(item);	}	this.updateReady = true;	};	CustomMultipleInput.prototype = Object.create(MultipleElement.prototype);	CustomMultipleInput.prototype.updateOldNode = function() {	console.log('CustomMultipleInput.prototype.updateOldNode');	if (!this.updateReady) {	return;	}	var customNodeList = this.outputNode.querySelectorAll('.item');	var value = '';	console.log('customNodeList', customNodeList);	for (var i = 0, iMax = customNodeList.length; i < iMax; i++) {	value += ((value === '' ? '' : this.separator) + customNodeList.item(i).getAttribute('data-value'));	}	console.log('value de', this.oldNode, 'doit changer pour', value);	this.oldNode.value = value;	};	CustomMultipleInput.prototype.moveToInput = function(itemOrEvent) {	console.log('CustomMultipleInput.prototype.moveToInput');	if (itemOrEvent instanceof Event) {	itemOrEvent.stopPropagation();	itemOrEvent = itemOrEvent.currentTarget.parentNode;	}	itemOrEvent.querySelector('.close').removeEventListener('click', this.moveToInput.bind(this), false);	itemOrEvent.parentNode.removeChild(itemOrEvent);	this.updateOldNode();	};	CustomMultipleInput.prototype.moveToOutput = function(itemOrEvent) {	console.log('CustomMultipleInput.prototype.moveToOutput');	if (itemOrEvent instanceof Event) {	itemOrEvent.stopPropagation();	if (itemOrEvent.type === 'keydown' && itemOrEvent.keyCode !== 13) {	return;	}	itemOrEvent = this.createItem(this.inputNode.querySelector('input').value, this.inputNode.querySelector('input').value);	this.inputNode.querySelector('input').value = "";	}	itemOrEvent.querySelector('.close').addEventListener('click', this.moveToInput.bind(this), false);	this.outputNode.appendChild(itemOrEvent);	this.updateOldNode();	};	console.info('proto CustomMultipleInput', CustomMultipleInput.prototype);
} else {	console.error('"CustomMultipleInput" class already exists !');
}
document.querySelector('button#a').addEventListener('click', function() { var node = document.querySelector('#select'); if (node.style.display === 'none') { node.style.display = ''; } else { new CustomMultipleSelect(node); }
}, false);
document.querySelector('button#b').addEventListener('click', function() { var node = document.querySelector('#input'); if (node.style.display === 'none') { node.style.display = ''; } else { new CustomMultipleInput(node, ','); }
}, false);
A Pen by Anthony Pothin - Script Codes
A Pen by Anthony Pothin - Script Codes
Home Page Home
Developer Anthony Pothin
Username Thorien
Uploaded January 17, 2023
Rating 3
Size 4,034 Kb
Views 10,120
Do you need developer help for A Pen by Anthony Pothin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anthony Pothin (Thorien) Script Codes
Name
Tab bar
Demo component
Multipart data parsing
Custom scrollbar
Magic table
Resizable flexible box
Flexible accordion
Form - datetime picker
Custom list picker
Test moment.js
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!