Gists
On gists
JavaScript
Iframe autoheight
index.html #
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<iframe id="frame" src="long.html" width="100%" height="0" frameborder="0"></iframe>
<script>
let f = document.getElementById('frame');
f.onload = () => {
console.log('nacteno');
console.dir(f.contentDocument.documentElement);
var obsah = f.contentDocument || f.contentWindow.document;
f.style.height = obsah.documentElement.scrollHeight + 'px';
};
</script>
</body>
</html>
On gists
Emit, callback in parent
•
Vue.js
example.vue #
<template>
<ClickWait color="red" @click="doFoo">Darn Button</ClickWait>
<AnotherClickWait style="background-color:#c0c0c0" @click="doFoo">One More Darn Button</AnotherClickWait>
</template>
import ClickWait from '@/components/ClickWait.vue';
import AnotherClickWait from '@/components/AnotherClickWait.vue';
export default {
name: "App",
components: {
ClickWait, AnotherClickWait
},
methods:{
doFoo(done) {
setTimeout(() => {
console.log('im done with whatever biz logic');
done();
},3000);
}
}
};
On gists
Vue.js
Filtering & searching in list + URL history state
app.vue #
// https://www.raymondcamden.com/2021/05/08/updating-and-supporting-url-parameters-with-vuejs
// hard coded for simplicity...
const ITEMS = [
{ name: "Ray", type: "person" },
{ name: "Lindy", type: "person" },
{ name: "Jacob", type: "person" },
{ name: "Lynn", type: "person" },
{ name: "Noah", type: "person" },
{ name: "Jane", type: "person" },
{ name: "Maisie", type: "person" },
{ name: "Carol", type: "person" },
{ name: "Ashton", type: "person" },
{ name: "Weston", type: "person" },
{ name: "Sammy", type: "cat" },
{ name: "Aleese", type: "cat" },
{ name: "Luna", type: "cat" },
{ name: "Pig", type: "cat" },
{ name: "Cayenne", type: "dog" }
]
const app = new Vue({
el:'#app',
data: {
allItems: ITEMS,
filter:'',
typeFilter:[]
},
created() {
let qp = new URLSearchParams(window.location.search);
let f = qp.get('filter');
if(f) this.filter = qp.get('filter');
let tf = qp.get('typeFilter');
if(tf) this.typeFilter = tf.split(',');
},
computed: {
items() {
this.updateURL();
return this.allItems.filter(a => {
if(this.filter !== '' && a.name.toLowerCase().indexOf(this.filter.toLowerCase()) === -1) return false;
if(this.typeFilter.length && !this.typeFilter.includes(a.type)) return false;
return true;
});
}
},
methods:{
updateURL() {
let qp = new URLSearchParams();
if(this.filter !== '') qp.set('filter', this.filter);
if(this.typeFilter.length) qp.set('typeFilter', this.typeFilter);
history.replaceState(null, null, "?"+qp.toString());
}
}
});
On gists
Vue.js
nextTick
component.vue #
<!--
https://chafikgharbi.com/vuejs-nexttick/
https://codepen.io/chafikgharbi/pen/WNGarPG
-->
<template>
<div id="app">
<div ref="box" class="box">
<div v-for="(message, key) in messages" :key="key">{{message.body}}</div>
...
</div>
<button v-on:click="addMessage">Add message</button>
</div>
</template>
<style>
.box {
height: 100px;
width: 300px;
overflow: scroll;
border: 1px solid #000
}
</style>
<script>
export default {
name: "App",
data: () => {
return {
messages: [
{ body: "Message 1" },
{ body: "Message 2" },
{ body: "Message 3" },
{ body: "Message 4" },
{ body: "Message 5" }
]
};
},
methods: {
async addMessage() {
// Add message
this.messages.push({ body: `Message ${this.messages.length+1}`})
// Scroll bottom
this.$refs.box.scrollTop = this.$refs.box.scrollHeight
},
async addMessage() {
// Add message
this.messages.push({ body: `Message ${this.messages.length+1}`})
// Wait for DOM to update
await this.$nextTick()
// Scroll bottom
this.$refs.box.scrollTop = this.$refs.box.scrollHeight
},
async addMessage() {
// Add message
this.messages.push({ body: `Message ${this.messages.length+1}`})
// Wait for DOM to updaten then scroll down
this.$nextTick(() => {
this.$refs.box.scrollTop = this.$refs.box.scrollHeight
})
}
}
};
</script>
On gists
JavaScript
JS objects copies, shallow, deep, lodash etc ...
copies.js #
/*
All ways
===========
https://code.tutsplus.com/articles/the-best-way-to-deep-copy-an-object-in-javascript--cms-39655
*/
let a = {
user: 'A',
age: 99,
hobbies: {
sport: ['soccer', 'hockey'],
others: ['sleeping']
}
}
// only shallow copy
let b = {...a}
b.age = 50
b.user = 'B'
b.hobbies.sport = ['ping-pong']
b.hobbies.others = ['eating hamburgers']
// deep copy with nested
let c = JSON.parse(JSON.stringify(a));
c.age = 20
c.user = 'C'
c.hobbies.sport = ['swimming']
c.hobbies.others = ['tv & music']
console.log(a)
console.log(b)
console.log(c)
On gists
Nette
Nette-Database
Nette - multiple db connections
connetionsModel.php #
<?php
namespace Model;
use Nette;
class Connections
{
/** @var Nette\Di\Container */
private $container;
public function __construct(Nette\Di\Container $container)
{
$this->container = $container;
}
public function getOld()
{
return $this->container->getService('nette.database.main');
}
public function getNew()
{
return $this->container->getService('nette.database.msp22');
}
}
On gists
AW
TinyModal - usage
tpl.latte #
{* POUZITI MODALU 2 zpusoby, inline nebo pres store mimo modal *}
<div n:if="false" class="mx-auto max-w-lg mb-10 space-y-4">
<h2 class="text-h3 text-msp-red">@DEV</h2>
<h2 class="text-h4">Modaly .. nejsou videt, open buttony jsou vyple</h2>
<tiny-modal store-id="modal1" max-width="1000px">
<template #default="{ close }">
<div class="p-8">
CONTENT MODAL 1
</div>
</template>
</tiny-modal>
<tiny-modal store-id="modal2" max-width="1000px">
<template #default="{ close }">
<div class="p-8">
CONTENT MODAL 2
</div>
</template>
</tiny-modal>
<tiny-modal max-width="1000px">
<template #button="{ open }">
<button @click="open">Otevřít modál na přímo 3</button>
</template>
<template #default="{ close }">
<div class="p-8">
CONTENT MODAL 3
</div>
</template>
</tiny-modal>
<hr />
<h2 class="text-h4">Buttony mimo modaly</h2>
<button @click="$store.dispatch('tinyModal/open', { id: 'modal1' })">modal 1 open</button> |
<button @click="$store.dispatch('tinyModal/open', { id: 'modal2' })">modal 2 open</button>
</div>
On gists
AW
Money price object
demo.php #
<?php
//App\PriceModule\Model\Currency $currency
// Money\Money $amount
// vytvoreni money objektu
$amountFrom = $this->currency->convertPrice(
$this->currency->parsePrice($activeRow->currency_id, $activeRow->amount_from)
);
// vetsi nebo rovno
$amount->greaterThanOrEqual($amountFrom)
// odecteni
/** @var \Money\Money */
$priceAfterDiscount = $price->getPrice()->subtract($discount)->getAmount();
// nastaveni objektu ceny
$price->setPrice($priceAfterDiscount)
// raw data jako string vcetne haliru napr 50000 // 500kc
/** @var \Money\Money */
$moneyObject->getAmount()
On gists
JavaScript
Detect outside click
outsideclick.js #
const elem = document.querySelector('div');
elem.addEventListener('click', (e) => {
const outsideClick = !elem.contains(e.target);
console.log(outsideClick); //returns true or fasle
});
On gists
JavaScript
Drag drop
demo.html #
<!-- https://jsbin.com/rideqiloge/edit?html,output -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Drag and Drop Effect in JavaScript</title>
<!-- Add some CSS Code -->
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: black;
height: 100vh;
width: 100%;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: 100vh;
width: 100%;
}
.whiteBox {
width: 150px;
height: 150px;
background-color: white;
border: none;
border-radius: 50%;
}
.imgBox {
background: url("https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80") no-repeat center center;
height: 100%;
width: 100%;
background-size: cover;
border: none;
border-radius: 50%;
cursor: pointer;
display: grid;
place-items: center;
}
.hold {
border: 4px solid white;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="whiteBox" id="box">
<div class="imgBox" draggable="true"></div>
</div>
<div class="whiteBox" id="box"></div>
<div class="whiteBox" id="box"></div>
<div class="whiteBox" id="box"></div>
<div class="whiteBox" id="box"></div>
</div>
<!-- Let's start to write script -->
<script>
// Access the HTML Elements
let imgBox = document.querySelector(".imgBox");
let whiteBoxes = document.getElementsByClassName("whiteBox");
// When user start to drag the element ( Here, imgBox )
// Event listeners for dragable imgBox element
imgBox.addEventListener("dragstart", (e) => {
e.target.className += " hold";
setTimeout(() => {
e.target.className = "hide";
}, 0);
});
// When user ready to drop the element
imgBox.addEventListener("dragend", (e) => {
e.target.className = " imgBox";
});
// Iterate all the white boxes
for (Boxes of whiteBoxes) {
Boxes.addEventListener("dragover", (e) => {
e.preventDefault();
});
Boxes.addEventListener("drop", (e) => {
e.target.append(imgBox);
});
}
</script>
</body>
</html>