/ Gists

Gists

On gists

Nette - Neon - vlastní proměnné / own variables

Nette Nette-Tricks

presenter.php #

<?php

declare(strict_types = 1);

namespace Fp\Presenters;

use Fp\Template\TemplateHelpers;
use Nette\Application\UI\Presenter;
use Nette\Application\Helpers;
use Nette\Http\Url;
use Nette\Utils\Strings;

abstract class BasePresenter extends Presenter
{

	/** @var string */
	public $appDir;

	/** @var string */
	public $wwwDir;

	/** @var bool */
	public $productionMode;

	/** @var string */
	public $googleAnalyticsAccount;

	/** @var string */
	public $disqusShortname;

	/** @var string */
	public $twitterHandle;

	/** @var string */
	public $gplusAccountId;

	/** @var string */
	public $facebookUsername;

	/** @var string */
	public $facebookProfileId;

	/** @var string */
	public $githubRepository;

	/** @var \Fp\FaviconsLoader @inject */
	public $faviconsLoader;

	protected function startup()
	{
		parent::startup();
		if ($this->appDir === null) {
			throw new \Exception('%appDir% was not provided');
		}
	}

	protected function beforeRender()
	{
		parent::beforeRender();

		$this->template->wwwDir = $this->wwwDir;
		$this->template->productionMode = $this->productionMode;

		$this->template->faviconMetas = $this->faviconsLoader->getMetadata();

		$this->template->googleAnalyticsAccount = $this->googleAnalyticsAccount;
		$this->template->disqusShortname = $this->disqusShortname;
		$this->template->twitterHandle = $this->twitterHandle;
		$this->template->gplusAccountId = $this->gplusAccountId;
		$this->template->facebookUsername = $this->facebookUsername;
		$this->template->facebookProfileId = $this->facebookProfileId;
		$this->template->githubRepository = $this->githubRepository;

		$this->template->now = new \DateTimeImmutable();

		$canonicalUrlQuery = $this->getHttpRequest()->getUrl()->getQueryParameters();
		foreach ($canonicalUrlQuery as $queryParameter => $_) {
			if (Strings::startsWith($queryParameter, 'utm_')) {
				unset($canonicalUrlQuery[$queryParameter]);
			}
		}
		$this->template->canonicalUrl = (new Url($this->getHttpRequest()->getUrl()))->setQuery($canonicalUrlQuery);
	}

	protected function createTemplate()
	{
		/** @var \Nette\Bridges\ApplicationLatte\Template $template */
		$template = parent::createTemplate();
		$template->getLatte()->addFilter('filectime', 'filectime');
		$template->getLatte()->addFilter('timeAgo', TemplateHelpers::class . '::timeAgoInWords');
		return $template;
	}

	/**
	 * Formats layout template file names.
	 *
	 * @return string[]
	 */
	public function formatLayoutTemplateFiles(): array
	{
		if (is_string($this->layout) && preg_match('#/|\\\\#', $this->layout)) {
			return [$this->layout];
		}

		return [
			sprintf('%s/templates/@%s.latte', $this->appDir, $this->layout ?: 'layout'),
		];
	}

	/**
	 * Formats view template file names.
	 *
	 * @return string[]
	 */
	public function formatTemplateFiles(): array
	{
		list(, $presenter) = Helpers::splitName($this->getName());

		return [
			sprintf('%s/templates/%s/%s.latte', $this->appDir, $presenter, $this->view),
		];
	}

}

On gists

Custom events $.trigger()

JavaScript jQuery

trigger.html #

<form id="msgbox" action="#" method="get">
<fieldset>
<label for="msg">your message</label>
<input id="msg" value="" />
<button>SEND</button>
</fieldset>
</form>

On gists

Custom events - jquery

JavaScript jQuery jQuery-plugins

2.html #

  <dl>
    <dt>Question</dt>
    <dd>Answer</dd>
  </dl>

On gists

Bootstrap / grid autoclear /

CSS Bootstrap CSS trick

demo.html #

<div class="row auto-clear">
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
        <p>Hey</p>
    </div>
</div>

On gists

Recursive dir delete

PHP Helpers-Filters-Plugins

recursive-delete-dir.php #

<?php

 function rrmdir($dir) { 
   if (is_dir($dir)) { 
     $objects = scandir($dir); 
     foreach ($objects as $object) { 
       if ($object != "." && $object != "..") { 
         if (is_dir($dir."/".$object))
           rrmdir($dir."/".$object);
         else
           unlink($dir."/".$object); 
       } 
     }
     rmdir($dir); 
   } 
 }

On gists

jQuery exists fn

jQuery Helpers-Filters-Plugins

jquery-exists-fn.js #

// Tiny jQuery Plugin
// by Chris Goodchild
$.fn.exists = function(callback) {
  var args = [].slice.call(arguments, 1);

  if (this.length) {
    callback.call(this, args);
  }

  return this;
};

// Usage
$('div.test').exists(function() {
  this.append('<p>I exist!</p>');
});

On gists

OWL selector + last child

CSS CSS trick

ow-selector.scss #

* + * {
	margin-top: 1.5em;
}

.module > *:last-child,
.module > *:last-child > *:last-child,
.module > *:last-child > *:last-child > *:last-child {
	margin: 0;
}

On gists

Disable zooming on safari (mobile)

JavaScript

disable-zooming-mobile.js #

// http://stackoverflow.com/questions/4389932/how-do-you-disable-viewport-zooming-on-mobile-safari
document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

On gists

Wrap image with caption

jQuery Helpers-Filters-Plugins jQuery-plugins

image-with-caption.js #

	$(".img-left, .img-right, .article-detail img", this).each(function() 
	{
	    var image = $(this);
	    var imageCaption = image.attr("alt");
	    if (imageCaption != '') 
	    {
	    	image.wrap('<div class="image-w-caption">');
	    	image.parent('.image-w-caption')
	    	     .css('max-width', image.width())
	    	     .addClass(image.attr('class'))
	    	     .append('<div class="caption">'+imageCaption+'</div>');
	    }
	});

On gists

Bootstrap mixins

Bootstrap

bootstrap-mixins.scss #

@mixin respond($minWidth: 0, $maxWidth: 0) {
    @if $minWidth and $maxWidth
    {
        @media screen and (min-width: $minWidth) and (max-width: $maxWidth) { @content; }
    }
    @else if $minWidth
    {
        @media screen and (min-width: $minWidth) { @content; }
    }
    @else if $maxWidth
    {
        @media screen and (max-width: $maxWidth) { @content; }
    }
    @else
    {
        @warn "error - undefined params";
    }
}


@mixin breakpoint($class) 
{

    @if $class == xs
    {
        @media (max-width: 480px) { @content; } 
    }

    @elseif $class == is 
    {
        @media (max-width: 767px) { @content; }
    }

    @else if $class == sm 
    {
        @media (max-width: 991px){ @content; }
    }

    @else if $class == md 
    {
        @media (max-width: 1199px) { @content; }
    }

    @else if $class == lg 
    {
        @media (min-width: 1200px) { @content; }
    }

    @else 
    {
        @warn "Breakpoint mixin supports: is, xs, sm, md, lg";
    }
}


#test
{
    @include breakpoint(lg)
    {
        background: red;
    }

    @include breakpoint(md)
    {
        background: green;
    }    

    @include breakpoint(sm)
    {
        background: purple;
    }

    @include breakpoint(xs)
    {
        background: blue;
    }

    @include breakpoint(is)
    {
        background: gold;
    }
}