';
this._allowedValues.push(option.value);
if (option.hasAttribute('selected')){ //TODO in caz de valoare implicita, trebuie procesat
selected.innerHTML = option.innerHTML;
this.value = option.id;
}
}
optionsContainer.innerHTML = options;
}
this.optionsList = this.querySelectorAll(".option");
// this.optionsList.addEventListener('click', this.handleOptionSelect.bind(this));
this.optionsList.forEach(o => {
o.addEventListener("click", () => {
selected.innerHTML = o.innerHTML;
this.value = o.id;
optionsContainer.style.display="none";
searchBox.style.display="none";
this.dispatchEvent(new CustomEvent('change', { detail: this.value }));
});
});
searchBox.optionsList = this.optionsList;
searchBox.addEventListener("keyup", function(e) {
let searchTerm=e.target.value;
searchTerm = searchTerm.toLowerCase();
e.currentTarget.optionsList.forEach(option => {
let label = option.innerText.toLowerCase();
if (label.indexOf(searchTerm) != -1) {
option.style.display = "block";
} else {
option.style.display = "none";
}
});
});
searchBox.addEventListener("focusout", function(e) {
searchBox.style.display="none";
selected.classList.remove("active");
setTimeout(() => { optionsContainer.style.display="none"; }, 500);
});
this._ajaxenable=false;
if (this.hasAttribute('data-source')) {
this._ajaxsource = this.getAttribute('data-source');
if (this.hasAttribute('data-filter')) this._ajaxfilter = this.getAttribute('data-filter'); else this._ajaxfilter = '';
this._ajaxenable=true;
};
this._allowuserinput=false;
if (this.hasAttribute('data-userinput')) {
this._allowuserinput=true;
}
}
}
window.customElements.define('enhanced-select', EnhanancedSelect);
const grid_no_links=4, points_subdivision=50;
var width, height, canvas, ctx, points, points_subdivisionY=50;
// Main
initGrid();
addListeners();
drawGrid();
function initGrid() {
canvas = document.getElementById('grid_bg');
height = window.innerHeight
width = window.innerWidth
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext('2d');
points_subdivisionY=Math.round(points_subdivision*height/width);
// create points
points = [];
for(var x = 0; x < points_subdivision; x++) {
for(var y = 0; y < points_subdivisionY; y++) {
var px = x/points_subdivision + Math.random()/points_subdivision;
var py = y/points_subdivisionY + Math.random()/points_subdivisionY;
var p = {x: px, originX: px, y: py, originY: py };
points.push(p);
}
}
// for each point find the required closest pointsto draw lines
for(var i = 0; i < points.length; i++) {
var closest = [];
var p1 = points[i];
for(var j = 0; j < points.length; j++) {
var p2 = points[j]
if(!(p1 == p2)) {
var placed = false;
for(var k = 0; k < grid_no_links; k++) {
if(!placed) {
if(closest[k] == undefined) {
closest[k] = p2;
placed = true;
}
}
}
for(var k = 0; k < grid_no_links; k++) {
if(!placed) {
if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
closest[k] = p2;
placed = true;
}
}
}
}
}
p1.closest = closest;
}
// assign a circle to each point
for(var i in points) {
var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
points[i].circle = c;
points[i].active = Math.random()/3;
points[i].circle.active = Math.random()/2;
}
}
function addListeners() {
window.addEventListener('resize', resize);
}
function resize() {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
drawGrid();
}
function drawGrid() {
ctx.clearRect(0,0,width,height);
for(var i in points) {
drawLines(points[i]);
points[i].circle.draw();
}
}
function drawLines(p) {
if(!p.active) return;
for(var i in p.closest) {
ctx.beginPath();
ctx.moveTo(p.x*width, p.y*height);
ctx.lineTo(p.closest[i].x*width, p.closest[i].y*height);
ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
ctx.stroke();
}
}
function Circle(pos,rad,color) {
var _this = this;
// constructor
(function() {
_this.pos = pos || null;
_this.radius = rad || null;
_this.color = color || null;
})();
this.draw = function() {
if(!_this.active) return;
ctx.beginPath();
ctx.arc(_this.pos.x*width, _this.pos.y*height, _this.radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')';
ctx.fill();
};
}
function getDistance(p1, p2) {
return Math.pow(p1.x - p2.x, 2) + Math.pow((p1.y - p2.y)*height/width, 2);
}
class MultiInput extends HTMLElement {
constructor() {
super();
// This is a hack :^(.
// ::slotted(input)::-webkit-calendar-picker-indicator doesn't work in any browser.
// ::slotted() with ::after doesn't work in Safari.
this.innerHTML +=
``;
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.innerHTML =
`
`;
const input = document.createElement('input')
input.type = "hidden";
input.classList.add("hidden-input");
this.appendChild(input);
this._forminput=input;
input.value = "[]";
if (this.hasAttribute('data-name')){
input.name = this.getAttribute('data-name');
}
this._ajaxenable=false;
if (this.hasAttribute('data-source')) {
this._ajaxsource = this.getAttribute('data-source');
if (this.hasAttribute('data-filter')) this._ajaxfilter = this.getAttribute('data-filter'); else this._ajaxfilter = '';
this._ajaxenable=true;
};
this._allowuserinput=false;
if (this.hasAttribute('data-userinput')) {
this._allowuserinput=true;
}
this._datalist = this.querySelector('datalist');
this._allowedValues = [];
for (const option of this._datalist.options) {
this._allowedValues.push(option.value);
if (option.hasAttribute('selected')){
const item = document.createElement('div');
item.classList.add('item');
item.textContent = option.value;
this.insertBefore(item, this._input);
}
}
this._forminput.value = this.getValues();
this._input = this.querySelector('input');
this._input.onblur = this._handleBlur.bind(this);
this._input.oninput = this._handleInput.bind(this);
this._input.onkeydown = (event) => {
this._handleKeydown(event);
};
this._input.onkeyup = (event) => {
this._handleKeyup(event);
};
this._allowDuplicates = this.hasAttribute('allow-duplicates');
};
_ajaxcallback(data,multiinputobject){
multiinputobject._allowedValues = [];
while (multiinputobject._datalist.firstChild && !multiinputobject._datalist.firstChild.remove());
var obj = JSON.parse( data );
for( let prop in obj ){
multiinputobject._allowedValues.push(obj[prop]);
const option = document.createElement('option');
option.value = obj[prop];
multiinputobject._datalist.appendChild(option);
}
};
//called when input is 2 or more characters and we have an ajax address configured
_ajaxupdateallowedvalues() {
const xmlhttp = new XMLHttpRequest();
const callback = this._ajaxcallback;
const multiinputobject = this;
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
callback(this.responseText,multiinputobject);
}
};
xmlhttp.open("POST", this._ajaxsource, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var searchstring = this._ajaxfilter;
if (searchstring != '') searchstring += '=' + this._input.value
xmlhttp.send(searchstring);
};
// Called by _handleKeydown() when the value of the input is an allowed value.
_addItem(value) {
if (value =='') return;
this._input.value = '';
const item = document.createElement('div');
item.classList.add('item');
item.textContent = value;
this.insertBefore(item, this._input);
item.onclick = () => {
this._deleteItem(item);
};
// Remove value from datalist options and from _allowedValues array.
// Value is added back if an item is deleted (see _deleteItem()).
if (!this._allowDuplicates) {
for (const option of this._datalist.options) {
if (option.value === value) {
option.remove();
};
}
this._allowedValues =
this._allowedValues.filter((item) => item !== value);
}
this._forminput.value = this.getValues();
}
// Called when the × icon is tapped/clicked or
// by _handleKeydown() when Backspace is entered.
_deleteItem(item) {
const value = item.textContent;
item.remove();
// If duplicates aren't allowed, value is removed (in _addItem())
// as a datalist option and from the _allowedValues array.
// So — need to add it back here.
if (!this._allowDuplicates) {
const option = document.createElement('option');
option.value = value;
// Insert as first option seems reasonable...
this._datalist.insertBefore(option, this._datalist.firstChild);
this._allowedValues.push(value);
}
}
// Avoid stray text remaining in the input element that's not in a div.item.
_handleBlur() {
if (this._allowuserinput) {
const option = document.createElement('option');
option.value = this._input.value;
// Insert as first option seems reasonable...
this._datalist.insertBefore(option, this._datalist.firstChild);
this._allowedValues.push(this._input.value);
this._addItem(this._input.value);
}
this._input.value = '';
}
// Called when input text changes,
// either by entering text or selecting a datalist option.
_handleInput() {
// Add a div.item, but only if the current value
// of the input is an allowed value
const value = this._input.value;
if (this._allowedValues.includes(value)) {
this._addItem(value);
}
}
// Called when text is entered or keys pressed in the input element.
_handleKeydown(event) {
const itemToDelete = event.target.previousElementSibling;
const value = this._input.value;
// On Backspace, delete the div.item to the left of the input
if (value ==='' && event.key === 'Backspace' && itemToDelete) {
this._deleteItem(itemToDelete);
// Add a div.item, but only if the current value
// of the input is an allowed value
} else if (this._allowedValues.includes(value)) {
this._addItem(value);
};
}
// Called when text is entered or keys pressed in the input element.
_handleKeyup(event) {
const value = this._input.value;
if (this._ajaxenable && value.length>1) {
this._ajaxupdateallowedvalues();
}
}
// Public method for getting item values as an array.
getValues() {
const values = [];
const items = this.querySelectorAll('.item');
for (const item of items) {
values.push(item.textContent);
}
return values;
}
}
window.customElements.define('multi-input', MultiInput);
![](\"/img/print24w.png\")