Gists
On gists
JavaScript
native js + trigger event
event.js #
const e = new Event('change')
const element = document.querySelector('#' + this.fakeFileId)
element.dispatchEvent(e)
On gists
Nette
Nette-Tricks
Přihlášení backend usera do frontu a obráceně
backend-frontend-user.php #
<?php
// https://forum.nette.org/cs/34290-prihlaseni-admina-jako-uzivatel
// bez přepisování $user proměné
public function handleKlientLogin($hash)
{
overim hash a nactu data klienta
$user = $this->getUser();
$user->getStorage()->setNamespace('frontend');
$user->login(new Identity($user->id, $user->role, ['username' => $user->username]));
$this->redirect(....);
}
On gists
CSS
CSS trick
Fluid images
fluid-images.css #
/* https://www.zachleat.com/web/fluid-images/ */
img {
max-width: 100%;
}
img[width] {
width: auto; /* Defer to max-width */
}
img[width][height] {
height: auto; /* Preserve aspect ratio */
}
/* Let SVG scale without boundaries */
img[src$=".svg"] {
width: 100%;
height: auto;
max-width: none;
}
On gists
AW
Test datových typů, Nette 2.0 AW
dataTypes.php #
<?php
/**
* TEST DATOVYCH TYPU
*/
call_user_func(function() {
// krabice
$krabiceActiveRow = $this->connection->table('eshop_item')->where('id', 1467)->fetch();
$krabiceDataset = $krabiceActiveRow->getDataset();
$pv = $krabiceDataset->getPrimaryVariant();
_bardump($krabiceActiveRow);
});
call_user_func(function() {
// varianta
$varianta = $this->connection->table('eshop_item_variant')->where('id', 5411)->fetch();
$krabiceActiveRow = $varianta->eshop_item;
$krabiceDataset = $krabiceActiveRow->getDataset();
$pv = $krabiceDataset->getPrimaryVariant(); // nerfunkcni viz http://bit.ly/2zzn4NI
_bardump($krabiceActiveRow);
});
On gists
VUE - Directives
•
Vue.js
Directives.vue #
export default {
install (Vue) {
Vue.directive('test-demo', {
mounted(el, binding) {
const modifiers = binding.modifiers
const state = binding.arg === "a" ? "a" : "b"
if (state === 'a') {
el.style.color = 'red'
} else {
el.style.color = 'green'
}
if (modifiers.underline) {
el.style.textDecoration = "underline"
}
if (modifiers.overline) {
el.style.textDecoration = "overline"
}
}
})
Vue.directive('width', {
mounted: function (el, binding) {
el.style.width = binding.value + 'px'
}
})
// mounted + update both
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
Vue.directive('demo', function (el, binding) {
el.style.color = binding.value.color // => "white"
el.textContent = binding.value.text
})
}
}
On gists
CSS
CSS trick
Transform origin - Filled buttons
index.html #
<!-- https://jsbin.com/bowaxu/1/edit?html,css,output -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<a href="" class="button"><span class="button-text"></span></a>
</body>
</html>
On gists
SCSS
SCSS: @at-root
at-root-example.scss #
// Sass
.Component {
.title {
color: black;
.is-active#{&} {
color: blue;
}
}
}
// shitty
.Component .title {
color: black;
}
.Component .title .is-active.Component .title {
color: blue;
}
// at-root ------------------------------ //
// sass
.Component {
.title {
color: black;
@at-root .is-active#{&} {
color: blue;
}
}
}
// css
.Component .title {
color: black;
}
.is-active.Component .title {
color: blue;
}
@mixin variant($selector) {
@at-root #{$selector}#{&} {
@content;
}
}
.Component {
.title {
color: black;
@include variant('.is-active') {
color: blue;
}
}
}
On gists
CSS
Multiple background
multi.css #
#https://jsbin.com/tedukoyara/edit?css,output
section
{
height: 600px;
border: 1px solid blue;
background:
url(https://www.flaticon.com/svg/static/icons/svg/3823/3823859.svg) right bottom / 100px no-repeat,
url(https://www.flaticon.com/svg/static/icons/svg/3823/3823866.svg) left top / 100px no-repeat,
url(https://www.flaticon.com/svg/static/icons/svg/3823/3823855.svg) 50% / 100px no-repeat;
}