Gists
On gists
JavaScript
Search bar (cloning)
search-bar.js #
const userCardTemplate = document.querySelector("[data-user-template]")
const userCardContainer = document.querySelector("[data-user-cards-container]")
const searchInput = document.querySelector("[data-search]")
let users = []
searchInput.addEventListener("input", e => {
const value = e.target.value.toLowerCase()
users.forEach(user => {
const isVisible =
user.name.toLowerCase().includes(value) ||
user.email.toLowerCase().includes(value)
user.element.classList.toggle("hide", !isVisible)
})
})
fetch("https://jsonplaceholder.typicode.com/users")
.then(res => res.json())
.then(data => {
users = data.map(user => {
const card = userCardTemplate.content.cloneNode(true).children[0]
const header = card.querySelector("[data-header]")
const body = card.querySelector("[data-body]")
header.textContent = user.name
body.textContent = user.email
userCardContainer.append(card)
return { name: user.name, email: user.email, element: card }
})
})
On gists
JavaScript
Alias - document.querySelector/all
solution.js #
// one way
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
// second way
let $ = (selector) => document.querySelector(selector);
let $$ = (selector) => document.querySelectorAll(selector);
$('div').style.color = 'blue'
$$('div').forEach(div => div.style.background = 'orange')
On gists
PHP
Nette-Forms
Nette-Tricks
CheckboxList - booleaned all values
example.php #
<?php
/* https://forum.nette.org/cs/35218-muze-checkboxlist-vracet-associativni-pole-misto-indexoveho#p220072 */
0 => 'po'
1 => 'st'
2 => 'ct'
po => true
ut => false
st => true
ct => true
pa => false
array_walk($arr, fn(&$item, $key, $values) => $item = in_array($key, $values), $values);
On gists
JavaScript
How to write loops for promise with JavaScript?
loop.js #
const sayHi = () => {
return new Promise((resolve) => {
setTimeout(() => {
console.log("Hi");
resolve();
}, 3000);
});
};
const asyncArray = [sayHi, sayHi, sayHi];
const hi = async () => {
for (const func of asyncArray) {
console.log(await func());
}
};
On gists
Gmaps
Google map aka Husinec
map.js #
// GMAP - CUSTOM STYLE
/* https://vanguardprague.psn.cz/ */
$mapStyle = [
{
"featureType": "all",
"elementType": "all",
"stylers": [
{"saturation": "-100"},
{"lightness": "25"},
{"gamma": "1"}
]
}
];
// GMAP - SETTINGS
var mapCenter = {lat: 50.0163867, lng: 14.4035964};
function initialize() {
var myOptions = {
zoom: 16,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: 0,
streetViewControl: 0,
sensor: 'true',
scrollwheel: false,
styles: $mapStyle
}
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, myOptions);
// REZIDENCE
rezidence = new google.maps.Marker({
position: mapCenter,
map: map,
title: 'VANGUARD',
icon: '/img/icons/pin.png'
});
// PSN
psn = new google.maps.Marker({
position: {lat: 50.0853655, lng: 14.4406618},
map: map,
title: 'PSN',
icon: '/img/icons/map-psn.png'
});
var iconBase = '/img/icons/';
var markers = []
var markerGroups = {
"culture": [],
"gastronomy": [],
"nightlife": [],
"shopping": [],
};
var filterMarkers = function (category, state) {
console.log(category);
console.log(state);
for (i = 0; i < markerGroups[category].length; i++) {
var marker = markerGroups[category][i];
marker.setVisible(state);
}
}
$('.mapFilter').change(function () {
filterMarkers($(this).data('category'), $(this).prop('checked'));
});
$.getJSON('/cz/poi', function (data) {
$.each(data, function (i, value) {
category = value.category
var myLatlng = {lat: value.lat, lng: value.lng};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: iconBase + value.icon,
title: value.title.replace('<br>', ','),
url: value.url,
category: category = value.category,
thumbnail: value.thumbnailUrl,
popis: value.popis
});
// infowindow obsah
var contentString = '<div class="gg-content">' +
'<h3>' + marker.title + '</h3>' +
'<p>' + marker.popis + '</p>' +
'</div>';
infowindow = new google.maps.InfoWindow({
//content: marker.title
content: contentString,
maxWidth: 225
});
// marker + infowindow handler
marker.addListener('click', function () {
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 225
});
infowindow.open(map, marker);
map.panToOffset(marker.position, 0, -200);
});
markers.push(marker);
markerGroups[category].push(marker);
});
});
}
/* ------ */
On gists
Vue.js
Props to css styles
component.vue #
<HelloWorld color="red" bg="green" />
<template>
<div :style="cssProps">KUK</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: ['color', 'bg'],
computed: {
cssProps() {
return {
'--color': this.color,
'--bg': this.bg,
};
},
},
};
</script>
<style scoped>
div {
color: var(--color);
background: var(--bg);
}
</style>
On gists
Vue.js
How to reset a component’s initial data
app.vue #
<script>
const initialState = () => {
return {
modalBodyDisplay: "getUserInput",
submitButtonText: "Lookup",
addressToConfirm: null,
bestViewedByTheseBounds: null,
location: {
name: null,
},
};
};
export default {
data() {
return initialState();
},
methods: {
reset() {
Object.assign(this.$data, initialState());
},
},
};
</script>
On gists
CSS
CSS trick
Restart CSS Animation
restart.js #
// https://css-tricks.com/restart-css-animation/
// retrieve the element
element = document.getElementById("logo");
// reset the transition by...
element.addEventListener("click", function(e) {
e.preventDefault;
// -> removing the class
element.classList.remove("run-animation");
// -> triggering reflow /* The actual magic */
// without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered.
// Oops! This won't work in strict mode. Thanks Felis Phasma!
// element.offsetWidth = element.offsetWidth;
// Do this instead:
void element.offsetWidth;
// -> and re-adding the class
element.classList.add("run-animation");
}, false);
// other solution
var elem = this;
elem.className = '';
setTimeout(function () {
elem.className = 'run-animation';
}, 0);
On gists
JavaScript
CSS
CSS trick
Simple rating (odometer)
example.html #
<section>
<button id="minus">-</button>
<div>
<span style="--state: -10">- 9-8 -7 -6 -5 -4 -3 -2 -1 0 +1 +2 +3 +4 +5 +6 +7 +8 +9</span>
</div>
<button id="plus">+</button>
</section>