Как сделать «Избранное» средствами Laravel и Vue.js

Как сделать "Избранное" средствами Laravel и Vue.js

В наше время большинство сайтов используют функционал избранного/лайков/рекомендаций. В том числе такие крупные ресурсы, как Medium, Facebook, Вконтакте и т.д.

Мы рассмотрим как реализовать такой функционал с Vue.js в приложении Laravel. Это приложение будет типа персонального блога, в нём будут пользователи и статьи. Пользователи смогут создавать статьи и добавлять их в избранное. А также пользователи смогут видеть полный список избранных статей.

В приложении будут модель User (Пользователь) и модель Post (Статья), в нём будет система авторизации, которая позволит добавлять статьи в Избранное (и удалять из него) только авторизованным пользователям. Мы сделаем динамическую пометку в избранное средствами VueJs и Axios, т.е. без перезагрузки страницы.

Перед началом работы посмотрите как это будет выглядеть:

Как сделать "Избранное" средствами Laravel и Vue.js

Итак, приступим.

Мы начнём с создания нового проекта Laravel:

laravel new laravel-vue-favorite
В результате будет создан проект с именем «laravel-vue-favorite»

С Laravel идут дополнительные библиотеки, такие как Bootstrap, VueJs и Axios, однако нужно их установить с помощью npm:

npm install
Также эта команда установит Laravel Mix, с помощью которого мы будем компилировать и собирать наши CSS и JavaScript.

Модели, миграции

Итак, нам необходима модель User (она идёт с Laravel), модель Post и модель Favorite, а также файлы миграции для них.

php artisan make:model Post -m
php artisan make:model Favorite -m

Эти команды создадут нужные нам модели вместе с миграциями. Откроем файл миграции таблицы posts и обновим метод up():

/**
* Define posts table schema
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->increments('id');
$table->integer('user_id')->unsigned();
$table->string('title');
$table->text('body');
$table->timestamps();
});
}

Таблица posts будет содержать id, user_id (ID пользователя, создавшего статью), title, body и колонки с отметками времени.

Теперь откроем файл миграций таблицы favorites и обновим up():

/**
* Define favorites table schema
*/
public function up()
{
Schema::create('favorites', function (Blueprint $table) {
$table->increments('id');
$table->integer('user_id')->unsigned();
$table->integer('post_id')->unsigned();
$table->timestamps();
});
}

Таблица favorites будет сводной. В ней будет две колонки:
user_id, в которой будет храниться ID пользователя, добавившего статью в избранное и post_id, в которой будет ID отмеченной статьи.

Файл миграции таблицы users оставим без изменений.

Перед запуском миграций настроим базу данных. Для этого добавим соответствующие настройки в файл .env:

DB_DATABASE=laravue
DB_USERNAME=root
DB_PASSWORD=root

Здесь нужно указать свои параметры базы.

Теперь запустим миграции:

php artisan migrate

Для тестирования работы приложения нам необходимо внести в него какие-либо данные. Для их генерации воспользуемся Laravel Model Factories, они же в свою очередь используют Faker PHP library.

Сгенерируем данные по Пользователям и Статьям. Добавим немного кода в конец файла database/factories/ModelFactory.php:

// database/factories/ModelFactory.php

$factory->define(App\Post::class, function (Faker\Generator $faker) {
// Get a random user
$user = \App\User::inRandomOrder()->first();

// generate fake data for post
return [
'user_id' => $user->id,
'title' => $faker->sentence,
'body' => $faker->text,
];
});

После этого перейдём к созданию классов заполнения базы:

php artisan make:seeder UsersTableSeeder
php artisan make:seeder PostsTableSeeder

Теперь откроем database/seeds/UsersTableSeeder.php и обновим метод run():

// database/seeds/UsersTableSeeder.php

/**
* Run the database seeds to create users.
*
* @return void
*/
public function run()
{
factory(App\User::class, 5)->create();
}

В результате будут созданы 5 различных пользователей. Сделаем то же самое со статьями. Откроем database/seeds/PostsTableSeeder.php и обновим run():

// database/seeds/PostsTableSeeder.php

/**
* Run the database seeds to create posts.
*
* @return void
*/
public function run()
{
factory(App\Post::class, 10)->create();
}

В результате будут созданы 10 различных статей по окончании работы скрипта.

Перед запуском генераторов данных обновим файл database/seeds/DatabaseSeeder.php:

// database/seeds/DatabaseSeeder.php

/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
$this->call(UsersTableSeeder::class);
$this->call(PostsTableSeeder::class);
}

И запустим генерацию данных:

php artisan db:seed
Готово.

Авторизация

К счастью, в Laravel уже есть встроенная система авторизации. Нужно только запустить соответствующего мастера:

php artisan make:auth
Будут созданы необходимые роуты и представления для авторизации и нам остаётся только зарегистрироваться в системе.

Роуты

Откроем файл routes/web.php и изменим маршруты:

// routes/web.php

Auth::routes();

Route::get('/', 'PostsController@index');

Route::post('favorite/{post}', 'PostsController@favoritePost');
Route::post('unfavorite/{post}', 'PostsController@unFavoritePost');

Route::get('my_favorites', 'UsersController@myFavorites')->middleware('auth');
После регистрации или авторизации пользователя Laravel перенаправит его на роут /home по-умолчанию. Мы удалили роут /home, созданный при запуске make:auth и поэтому нужно обновить свойство redirectTo в обоих файлах app/Http/Controllers/Auth/LoginController.php и app/Http/Controllers/Auth/RegisterController.php на:

protected $redirectTo = '/';

Отношения Пользователь-Избранное

Пользователь может добавить много статей в избранное, а статья может быть добавлена в избранное многими пользователями, поэтому отношения между этими таблицами будут многие-ко-многим. Для этого откроем модель User и добавим favorites():

// app/User.php

/**
* Get all of favorite posts for the user.
*/
public function favorites()
{
return $this->belongsToMany(Post::class, 'favorites', 'user_id', 'post_id')->withTimeStamps();
}

Laravel считает сводной таблицей post_user, но так как мы её переименовали (в favorites), нам нужно передать дополнительные параметры. Вторым параметром идёт имя сводной таблицы. Третьим — внешний ключ (user_id) модели, с которой создаётся связь (User), а четвёртым — внешний ключ (post_id) модели, к которой мы присоединяем (Post).

Обратите внимание, мы связали withTimeStamps() с belongsToMany(). Это позволит колонкам сводной таблицы с отметками времени (create_at и updated_at) автоматически сработать при добавлении или обновлении строки.

Контроллер статей

Создадим новый контроллер, в котором будут функции вывода статей, пометки в избранное и удаление такой отметки.

php artisan make:controller PostsController
Откроем app/Http/Controllers/PostsController.php и добавим в конец такой код:

// app/Http/Controllers/PostsController.php

// remember to use the Post model
use App\Post;

/**
* Display a paginated list of posts.
*
* @return Response
*/
public function index()
{
$posts = Post::paginate(5);

return view('posts.index', compact('posts'));
}

Метод index() вернёт все статьи и разделит их по 5 на странице, а затем обработает файл представления (который мы создадим) со всеми статьями.

Добавим в файл resources/views/layouts/app.blade.php (пониже) такой код:</p><p><code>// resources/views/layouts/app.blade.php</p><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /></code><br /> А затем это перед элементом списка Logout:</p><p><code>// resources/views/layouts/app.blade.php</p><li> <a href="{{ url('my_favorites') }}">My Favorites</a></li><p></code><br /> Теперь создадим представление index. Создайте папку posts внутри views и в ней файл index.blade.php. Получится resources/views/posts/index.blade.php:</p><p><code>// resources/views/posts/index.blade.php</p><p>@extends('layouts.app')</p><p>@section('content')</p><div class="container"><div class="row"><div class="col-md-8 col-md-offset-2"><div class="page-header"><h3>All Posts</h3></p></div><p> @forelse ($posts as $post)</p><div class="panel panel-default"><div class="panel-heading"> {{ $post->title }}</div><div class="panel-body"> {{ $post->body }}</div></p></div><p> @empty</p><p>No post created.</p><p> @endforelse</p><p> {{ $posts->links() }}</p></div></p></div></div><p>@endsection</code><br /> Откройте браузер и увидите такую страничку:</p><p><img title="Как сделать "Избранное" средствами Laravel и Vue.js" data-flat-attr="img" src="https://tehnojam.pro/uploads/images/00/00/24/2017/03/07/f7e0763e8d.png" class="image-center" alt="Как сделать "Избранное" средствами Laravel и Vue.js" /></p><p>Вернёмся к PostsController и добавим недостающие методы:</p><p><code>// app/Http/Controllers/PostsController.php</p><p>// remember to use<br /> use Illuminate\Support\Facades\Auth;</p><p>/**<br /> * Favorite a particular post<br /> *<br /> * @param Post $post<br /> * @return Response<br /> */<br /> public function favoritePost(Post $post)<br /> {<br /> Auth::user()->favorites()->attach($post->id);</p><p> return back();<br /> }</p><p>/**<br /> * Unfavorite a particular post<br /> *<br /> * @param Post $post<br /> * @return Response<br /> */<br /> public function unFavoritePost(Post $post)<br /> {<br /> Auth::user()->favorites()->detach($post->id);</p><p> return back();<br /> }</code></p><h5>Добавляем VueJs</h5><p>С помощью Vue мы сделаем кнопку Избранного. По нажатию на неё, статья добавиться в избранное (или удалится из избранного) без перезагрузки страницы, используя AJAX. Здесь нам пригодится Axios — основанный на Promise HTTP-клиент для браузера и node.js.</p><p>Создадим компонент Vue, для этого создайте файл Favorite.vue в папке resources/assets/js/components с таким содержимым:</p><p><code>// resources/assets/js/components/Favorite.vue</p><p><template><br /> <span><br /> <a href="#" v-if="isFavorited" @click.prevent="unFavorite(post)"><br /> <i class="fa fa-heart"></i><br /> </a><br /> <a href="#" v-else @click.prevent="favorite(post)"><br /> <i class="fa fa-heart-o"></i><br /> </a><br /> </span><br /> </template></p><p><script>/*<![CDATA[*/export default{props:['post','favorited'],</p><p>data:function(){return{isFavorited:'',}},</p><p>mounted(){this.isFavorited=this.isFavorite?true:false;},</p><p>computed:{isFavorite(){return this.favorited;},},</p><p>methods:{favorite(post){axios.post('/favorite/'+post).then(response=>this.isFavorited=true).catch(response=>console.log(response.data));},</p><p>unFavorite(post){axios.post('/unfavorite/'+post).then(response=>this.isFavorited=false).catch(response=>console.log(response.data));}}}/*]]>*/</script></code><br /> В компоненте Favorite есть два раздела: template и script. В template мы задали разметку, которая будет обработана при вызове компонента. Мы используем обработку с условием, она нам должна вывести нужную кнопку. То есть если isFavorited равно true, кнопка должна быть отмечена как избранная и при нажатии вызвать unFavorite(). В противном случае она выглядит как не помеченная и вызывает при клике метод favorite().</p><p>В разделе script мы задали свойства компонента — post (тут будет ID статьи) и favorited (true или false в зависимости от того, в каком он состоянии для текущего авторизованного пользователя). Также мы задали переменную isFavorited для условной обработки шаблона.</p><p>При подключении компонента мы задаём значение isFavorited равным рассчитанному свойству isFavorite. То есть свойство isFavorite вернёт значение свойства favorited, которое может быть true или false.</p><p>Также мы создали два метода: favorite() и unFavorite(), оба принимающие post как аргумент. С помощью Axios мы делаем POST-запрос к заданным ранее роутам. В favorite(), при успешном POST-запросе, мы задаём isFavorited в true, иначе выводим ошибку в консоль. То же самое и для unFavorite() — только меняем isFavorited на false.</p><h5>Регистрация компонента</h5><p>Перед использованием компонента необходимо зарегистрировать его в экземпляре Vue. Открыв resources/assets/js/app.js вы увидите, что Laravel зарегистрировал компонент Example. Заменим его на наш Favorite:</p><p><code>// resources/assets/js/app.js</p><p>Vue.component('favorite', require('./components/Favorite.vue'));</code><br /> Теперь скомпилируем и соберём наши стили и скрипты:</p><p><code>npm run dev</code></p><p>Теперь можно использовать наш компонент. Откроем resources/views/posts/index.blade.php и добавим в конец (после закрывающего div в panel-body) такой код:</p><p><code>// resources/views/posts/index.blade.php</p><p>@if (Auth::check())</p><div class="panel-footer"> <favorite :post={{ $post->id }}<br /> :favorited={{ $post->favorited() ? 'true' : 'false' }}<br /> ></favorite></div><p>@endif</code><br /> Теперь кнопка добавления в избранное будет показана только авторизованным пользователям. А чтобы узнать, добавлена ли статья в избранное, нужен метод favorited(), который мы и создадим. Откройте app/Post.php и добавьте код:</p><p><code>// app/Post.php</p><p>// remember to use<br /> use App\Favorite;<br /> use Illuminate\Support\Facades\Auth;</p><p>/**<br /> * Determine whether a post has been marked as favorite by a user.<br /> *<br /> * @return boolean<br /> */<br /> public function favorited()<br /> {<br /> return (bool) Favorite::where('user_id', Auth::id())<br /> ->where('post_id', $this->id)<br /> ->first();<br /> }</code><br /> Здесь мы получаем и приводим к булеву первую строку запроса, где user_id это идентификатор текущего пользователя, а post_id это идентификатор статьи, с которой мы работаем сейчас.</p><p>Теперь наше приложение будет выглядеть так:</p><p><img title="Как сделать "Избранное" средствами Laravel и Vue.js" data-flat-attr="img" src="https://tehnojam.pro/uploads/images/00/00/24/2017/03/07/4889091451.png" class="image-center" alt="Как сделать "Избранное" средствами Laravel и Vue.js" /></p><h5>Вывод избранного</h5><p>Для вывода избранных статей мы создали ранее роут my_favorites, доступный только авторизованным пользователям.</p><p>Создадим UsersController, обрабатывающий этот роут:</p><p><code>php artisan make:controller UsersController</code><br /> Теперь откроем app/Http/Controllers/UsersController.php и добавим код:</p><p><code>// app/Http/Controllers/UsersController.php</p><p>// remember to use<br /> use Illuminate\Support\Facades\Auth;</p><p>/**<br /> * Get all favorite posts by user<br /> *<br /> * @return Response<br /> */<br /> public function myFavorites()<br /> {<br /> $myFavorites = Auth::user()->favorites;</p><p> return view('users.my_favorites', compact('myFavorites'));<br /> }</code><br /> Теперь создадим представление. Создайте папку users в resources/views, а в ней файл my_favorites.blade.php:</p><p><code>// resources/views/users/my_favorites.blade.php</p><p>@extends('layouts.app')</p><p>@section('content')</p><div class="container"><div class="row"><div class="col-md-8 col-md-offset-2"><div class="page-header"><h3>My Favorites</h3></p></div><p> @forelse ($myFavorites as $myFavorite)</p><div class="panel panel-default"><div class="panel-heading"> {{ $myFavorite->title }}</div><div class="panel-body"> {{ $myFavorite->body }}</div><p> @if (Auth::check())</p><div class="panel-footer"> <favorite :post={{ $myFavorite->id }}<br /> :favorited={{ $myFavorite->favorited() ? 'true' : 'false' }}<br /> ></favorite></div><p> @endif</p></div><p> @empty</p><p>You have no favorite posts.</p><p> @endforelse</p></div></p></div></div><p>@endsection</code></p><p><img title="Как сделать "Избранное" средствами Laravel и Vue.js" data-flat-attr="img" src="https://tehnojam.pro/uploads/images/00/00/24/2017/03/08/6ee53a54ea.png" class="image-center" alt="Как сделать "Избранное" средствами Laravel и Vue.js" /></p><p>Готово!</p><p><a href="https://github.com/ammezie/laravel-vue-favorite" target="_blank">Полный код примера.</a></p><p>По материалам «Implement a Favoriting Feature Using Laravel and Vue.js» by Chimezie Enyinnaya</p><div class="flat_pm_end"></div><div class="saboxplugin-wrap"><div class="saboxplugin-gravatar"><img title="Как сделать "Избранное" средствами Laravel и Vue.js" alt="Как сделать "Избранное" средствами Laravel и Vue.js" alt='' src='https://secure.gravatar.com/avatar/3c9a724edc3d5745342294aed20872a8?s=100&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/3c9a724edc3d5745342294aed20872a8?s=200&d=mm&r=g 2x' class='avatar avatar-100 photo' height='100' width='100' /></div><div class="saboxplugin-authorname"><a href="https://tehnojam.pro/category/author/fokusov" class="vcard author"><span class="fn">Фокусов Игорь</span></a></div><div class="saboxplugin-desc"><div><p>Разработчик: java, kotlin, c#, javascript, dart, 1C, python, php.</p><p>Пишите: <a href="https://t.me/ighar">@ighar</a>. <a href="https://money.yandex.ru/to/410011020365993">Buy me a coffee, please</a> :).</p></div></div><div class="clearfix"></div><div class="saboxplugin-socials "><a target="_self" href="mailto:igor@fokusov.com" rel="nofollow" class="saboxplugin-icon-grey"><svg aria-hidden="true" class="sab-user_email" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg></span></a></div></div><div class="post-views post-365 entry-meta"> <span class="post-views-icon fa fa-eye"></span> <span class="post-views-count">0</span></div><div id="ssba-classic-2" class="ssba ssbp-wrap left ssbp--theme-1"><div style="text-align:left"><span class="ssba-share-text">Поделись...</span><br/><a data-site="vk" class="ssba_vk_share ssba_share_link" href="http://vkontakte.ru/share.php?url=https://tehnojam.pro/category/development/kak-sdelat-izbrannoe-sredstvami-laravel-i-vue_js.html" target="_blank" ><img src="https://tehnojam.pro/wp-content/plugins/simple-share-buttons-adder/buttons/simple/vk.png" style="width: 38px;" title="Как сделать "Избранное" средствами Laravel и Vue.js" class="ssba ssba-img" alt="Как сделать "Избранное" средствами Laravel и Vue.js" /><div title="VK" class="ssbp-text">VK</div></a><a data-site="" class="ssba_facebook_share" href="http://www.facebook.com/sharer.php?u=https://tehnojam.pro/category/development/kak-sdelat-izbrannoe-sredstvami-laravel-i-vue_js.html" target="_blank" ><img src="https://tehnojam.pro/wp-content/plugins/simple-share-buttons-adder/buttons/simple/facebook.png" style="width: 38px;" title="Как сделать "Избранное" средствами Laravel и Vue.js" class="ssba ssba-img" alt="Как сделать "Избранное" средствами Laravel и Vue.js" /><div title="Facebook" class="ssbp-text">Facebook</div></a><a data-site="" class="ssba_google_share" href="https://plus.google.com/share?url=https://tehnojam.pro/category/development/kak-sdelat-izbrannoe-sredstvami-laravel-i-vue_js.html" target="_blank" ><img src="https://tehnojam.pro/wp-content/plugins/simple-share-buttons-adder/buttons/simple/google.png" style="width: 38px;" title="Как сделать "Избранное" средствами Laravel и Vue.js" class="ssba ssba-img" alt="Как сделать "Избранное" средствами Laravel и Vue.js" /><div title="Google+" class="ssbp-text">Google+</div></a><a data-site="" class="ssba_twitter_share" href="http://twitter.com/share?url=https://tehnojam.pro/category/development/kak-sdelat-izbrannoe-sredstvami-laravel-i-vue_js.html&text=%D0%9A%D0%B0%D0%BA%20%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C%20%C2%AB%D0%98%D0%B7%D0%B1%D1%80%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5%C2%BB%20%D1%81%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B2%D0%B0%D0%BC%D0%B8%20Laravel%20%D0%B8%20Vue.js%20" target="_blank" ><img src="https://tehnojam.pro/wp-content/plugins/simple-share-buttons-adder/buttons/simple/twitter.png" style="width: 38px;" title="Как сделать "Избранное" средствами Laravel и Vue.js" class="ssba ssba-img" alt="Как сделать "Избранное" средствами Laravel и Vue.js" /><div title="Twitter" class="ssbp-text">Twitter</div></a><a data-site="linkedin" class="ssba_linkedin_share ssba_share_link" href="http://www.linkedin.com/shareArticle?mini=true&url=https://tehnojam.pro/category/development/kak-sdelat-izbrannoe-sredstvami-laravel-i-vue_js.html" target="_blank" ><img src="https://tehnojam.pro/wp-content/plugins/simple-share-buttons-adder/buttons/simple/linkedin.png" style="width: 38px;" title="Как сделать "Избранное" средствами Laravel и Vue.js" class="ssba ssba-img" alt="Как сделать "Избранное" средствами Laravel и Vue.js" /><div title="Linkedin" class="ssbp-text">Linkedin</div></a></div></div></div><div id="post-ratings-365" class="post-ratings" itemscope itemtype="http://schema.org/Article" data-nonce="81531320a8"><img id="rating_365_1" src="https://tehnojam.pro/wp-content/plugins/wp-postratings/images/stars/rating_off.svg" alt="1 Звезда" title="1 Звезда" onmouseover="current_rating(365, 1, '1 Звезда');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_365_2" src="https://tehnojam.pro/wp-content/plugins/wp-postratings/images/stars/rating_off.svg" alt="2 Звезды" title="2 Звезды" onmouseover="current_rating(365, 2, '2 Звезды');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_365_3" src="https://tehnojam.pro/wp-content/plugins/wp-postratings/images/stars/rating_off.svg" alt="3 Звезды" title="3 Звезды" onmouseover="current_rating(365, 3, '3 Звезды');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_365_4" src="https://tehnojam.pro/wp-content/plugins/wp-postratings/images/stars/rating_off.svg" alt="4 Звезды" title="4 Звезды" onmouseover="current_rating(365, 4, '4 Звезды');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_365_5" src="https://tehnojam.pro/wp-content/plugins/wp-postratings/images/stars/rating_off.svg" alt="5 Звезд" title="5 Звезд" onmouseover="current_rating(365, 5, '5 Звезд');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /> (Пока оценок нет)<br /><span class="post-ratings-text" id="ratings_365_text"></span><meta itemprop="headline" content="Как сделать «Избранное» средствами Laravel и Vue.js" /><meta itemprop="description" content="В наше время большинство сайтов используют функционал избранного/лайков/рекомендаций. В том числе такие крупные ресурсы, как Medium, Facebook, Вконтакте и т.д.Мы рассмотрим как реализовать так..." /><meta itemprop="datePublished" content="2017-03-08T00:03:33+00:00" /><meta itemprop="dateModified" content="2018-10-18T11:44:47+00:00" /><meta itemprop="url" content="https://tehnojam.pro/category/development/kak-sdelat-izbrannoe-sredstvami-laravel-i-vue_js.html" /><meta itemprop="author" content="Фокусов Игорь" /><meta itemprop="mainEntityOfPage" content="https://tehnojam.pro/category/development/kak-sdelat-izbrannoe-sredstvami-laravel-i-vue_js.html" /><div style="display: none;" itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><meta itemprop="name" content="Техноджем" /><div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="" /></div></div></div><div id="post-ratings-365-loading" class="post-ratings-loading"> <img src="https://tehnojam.pro/wp-content/plugins/wp-postratings/images/loading.gif" width="16" height="16" class="post-ratings-image" /> Загрузка...</div> <footer class="entry-meta"> <span class="cat-links"><span class="screen-reader-text">Categories </span><a href="https://tehnojam.pro/category/category/development" rel="category tag">Разработка</a></span> <nav id="nav-below" class="post-navigation"> <span class="screen-reader-text">Post navigation</span><div class="nav-previous"><span class="prev" title="Previous"><a href="https://tehnojam.pro/category/technologies/torgovye-vojny-vokrug-nesushestvujushih-kvantovyh-kompjuterov.html" rel="prev">Торговые войны вокруг несуществующих квантовых компьютеров</a></span></div><div class="nav-next"><span class="next" title="Next"><a href="https://tehnojam.pro/category/secure/obnarodovannye-sekretnye-fajly-tsru-podrobno-opisyvajut-instrumenty-dlja-vzloma-iphone-android-smart-televizorov.html" rel="next">Обнародованные секретные файлы ЦРУ подробно описывают инструменты для взлома iPhone, Android, смарт-телевизоров</a></span></div> </nav> </footer></div> </article><div class="comments-area"><div id="comments"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Leave a Comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/category/development/kak-sdelat-izbrannoe-sredstvami-laravel-i-vue_js.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://tehnojam.pro/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-form-comment"><label for="comment" class="screen-reader-text">Comment</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p><label for="author" class="screen-reader-text">Name</label><input placeholder="Name *" id="author" name="author" type="text" value="" size="30" /> <label for="email" class="screen-reader-text">Email</label><input placeholder="Email *" id="email" name="email" type="email" value="" size="30" /> <label for="url" class="screen-reader-text">Website</label><input placeholder="Website" id="url" name="url" type="url" value="" size="30" /><div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_630400803" class="gglcptch_recaptcha"></div> <noscript><div style="width: 302px;"><div style="width: 302px; height: 422px; position: relative;"><div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6LdLqnYUAAAAAKcMT7b_RIlsSEvVHpIWIBaI6X-x" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe></div></div><div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea></div></div> </noscript></div><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='365' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="2b29a99e7b" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="33"/></p></form></div></div></div></main></div><div id="right-sidebar" itemtype="https://schema.org/WPSideBar" itemscope="itemscope" class="widget-area grid-25 tablet-grid-25 grid-parent sidebar"><div class="inside-right-sidebar"> <aside id="social_icon_widget-2" class="widget inner-padding widget_social_icon_widget"><h2 class="widget-title">Подпишись на нас</h2><a title="Twitter" target="_blank" href="https://twitter.com/tehnojampro"><i class="fa fa-twitter"></i></a><a title="Facebook" target="_blank" href="https://www.facebook.com/tehnojam"><i class="fa fa-facebook"></i></a><a title="Google Plus" target="_blank" href="https://plus.google.com/communities/101049307081024540315"><i class="fa fa-google-plus"></i></a><a title="Telegram" target="_blank" href="http://t.me/tehnojam"><i class="fa fa-telegram"></i></a><a title="VK" target="_blank" href="https://vk.com/tehnojam"><i class="fa fa-vk"></i></a></aside><aside id="custom_html-4" class="widget_text widget inner-padding widget_custom_html"><div class="textwidget custom-html-widget"><div id="yandex_rtb_R-A-335338-2"></div> <script type="text/javascript">(function(w,d,n,s,t){w[n]=w[n]||[];w[n].push(function(){Ya.Context.AdvManager.render({blockId:"R-A-335338-2",renderTo:"yandex_rtb_R-A-335338-2",async:true});});t=d.getElementsByTagName("script")[0];s=d.createElement("script");s.type="text/javascript";s.src="//an.yandex.ru/system/context.js";s.async=true;t.parentNode.insertBefore(s,t);})(this,this.document,"yandexContextAsyncCallbacks");</script></div></aside><aside id="categories-2" class="widget inner-padding widget_categories"><h2 class="widget-title">Категории</h2><ul><li class="cat-item cat-item-113"><a href="https://tehnojam.pro/category/category/it-comics" title="В Этой категории размещаются юморные картинки и комиксы из мира IT">IT Комиксы</a></li><li class="cat-item cat-item-12"><a href="https://tehnojam.pro/category/category/secure" title="В этой категории размещаются статьи о компьютерной и интернет безопасности">Безопасность</a></li><li class="cat-item cat-item-8"><a href="https://tehnojam.pro/category/category/hardware" title="Категория о компьютерном железе, презентации нового оборудования и обсуждения старого оборудования.">Железо</a></li><li class="cat-item cat-item-10"><a href="https://tehnojam.pro/category/category/internet-of-things" title="Интернет вещей всё плотнее входит в нашу жизнь, потому эта рубрика об этом.">Интернет вещей</a></li><li class="cat-item cat-item-9"><a href="https://tehnojam.pro/category/category/back-to-the-future" title="Статьи о новейших технологиях">Назад в будущее</a></li><li class="cat-item cat-item-6"><a href="https://tehnojam.pro/category/category/it-news" title="Здесь размещаются Новости мира информационных технологий">Новости IT</a></li><li class="cat-item cat-item-5"><a href="https://tehnojam.pro/category/category/development" title="Статьи так или иначе касающиеся разработки программного обеспечения. Здесь размещаются мануалы и практическое руководство мира разработки.">Разработка</a></li><li class="cat-item cat-item-4"><a href="https://tehnojam.pro/category/category/software" title="Категория со статьями о программном обеспечении">Софт</a></li><li class="cat-item cat-item-11"><a href="https://tehnojam.pro/category/category/itagregator" >Техноагрегатор</a></li><li class="cat-item cat-item-7"><a href="https://tehnojam.pro/category/category/technologies" title="Статьи о новых технологиях и инновациях">Технологии</a></li></ul> </aside><aside id="better_recent_comments-2" class="widget inner-padding widget_recent_comments"><h2 class="widget-title">Свежие комментарии</h2><ul id="better-recent-comments" class="recent-comments-list with-avatars"><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:50px; min-height:44px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/0c40ffbd3645e1b4478470fe161e91cf?s=40&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/0c40ffbd3645e1b4478470fe161e91cf?s=80&d=mm&r=g 2x' class='avatar avatar-40 photo' height='40' width='40' /></span> <span class="comment-author-link"><a href='https://manjaro.ru' rel='external nofollow' class='url'>manjarqo</a></span> on <span class="comment-post"><a href="https://tehnojam.pro/category/software/1c-dlja-mac-os-ili-kak-ja-ushel-ot-windows-i-linux.html#comment-353">1C для Mac OS или как я ушёл от Windows и Linux</a></span></div></li><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:50px; min-height:44px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/097634f7be41de1a9bc916f87b1ba017?s=40&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/097634f7be41de1a9bc916f87b1ba017?s=80&d=mm&r=g 2x' class='avatar avatar-40 photo' height='40' width='40' /></span> <span class="comment-author-link">Андрей</span> on <span class="comment-post"><a href="https://tehnojam.pro/category/software/1c-dlja-mac-os-ili-kak-ja-ushel-ot-windows-i-linux.html#comment-352">1C для Mac OS или как я ушёл от Windows и Linux</a></span></div></li><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:50px; min-height:44px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/0c40ffbd3645e1b4478470fe161e91cf?s=40&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/0c40ffbd3645e1b4478470fe161e91cf?s=80&d=mm&r=g 2x' class='avatar avatar-40 photo' height='40' width='40' /></span> <span class="comment-author-link"><a href='https://manjaro.ru' rel='external nofollow' class='url'>manjarqo</a></span> on <span class="comment-post"><a href="https://tehnojam.pro/category/software/sozdanie-zagruzochnoj-fleshki-mac-os-ustanovka-hackintosh.html#comment-351">Создание загрузочной флешки Mac OS — Установка Hackintosh 1</a></span></div></li><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:50px; min-height:44px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/fd488281a5c292591d8967b7cf7b1d54?s=40&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/fd488281a5c292591d8967b7cf7b1d54?s=80&d=mm&r=g 2x' class='avatar avatar-40 photo' height='40' width='40' /></span> <span class="comment-author-link">Накойчёртваммоёимя</span> on <span class="comment-post"><a href="https://tehnojam.pro/category/software/sozdanie-zagruzochnoj-fleshki-mac-os-ustanovka-hackintosh.html#comment-350">Создание загрузочной флешки Mac OS — Установка Hackintosh 1</a></span></div></li><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:50px; min-height:44px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/19931ee4873cab7a8067180a4cb545d5?s=40&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/19931ee4873cab7a8067180a4cb545d5?s=80&d=mm&r=g 2x' class='avatar avatar-40 photo' height='40' width='40' /></span> <span class="comment-author-link">dl</span> on <span class="comment-post"><a href="https://tehnojam.pro/category/development/sozdanie-pervogo-prilozhenija-flutter-chast-1.html#comment-349">Создание первого приложения Flutter, часть 1</a></span></div></li><li class="recentcomments recent-comment"><div class="comment-wrap" style="padding-left:50px; min-height:44px;"><span class="comment-avatar"><img alt='' src='https://secure.gravatar.com/avatar/0c40ffbd3645e1b4478470fe161e91cf?s=40&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/0c40ffbd3645e1b4478470fe161e91cf?s=80&d=mm&r=g 2x' class='avatar avatar-40 photo' height='40' width='40' /></span> <span class="comment-author-link"><a href='https://manjaro.ru' rel='external nofollow' class='url'>manjarqo</a></span> on <span class="comment-post"><a href="https://tehnojam.pro/category/software/ustanovka-mac-os-na-acer-aspire-v3-571g-zavod-wifi.html#comment-348">Как установить Mac OS на Acer Aspire V3-571g</a></span></div></li></ul></aside><aside id="recent-posts-widget-with-thumbnails-2" class="widget inner-padding recent-posts-widget-with-thumbnails"><div id="rpwwt-recent-posts-widget-with-thumbnails-2" class="rpwwt-widget"><h2 class="widget-title">Свежие записи</h2><ul><li><a href="https://tehnojam.pro/category/development/5-luchshih-javascript-i-css-bibliotek-2018-goda.html"><img width="70" height="70" src="https://tehnojam.pro/wp-content/uploads/2018/12/pgskeh0yl8o-150x150.jpg" class="attachment-70x70 size-70x70 wp-post-image" alt="" /><span class="rpwwt-post-title">5 лучших JavaScript и CSS библиотек декабря 2018 года</span></a></li><li><a href="https://tehnojam.pro/category/development/vvedenie-v-dart-dlja-java-programmistov.html"><img width="70" height="70" src="https://tehnojam.pro/wp-content/uploads/2018/11/dart-logo-for-shares-150x150.png" class="attachment-70x70 size-70x70 wp-post-image" alt="Введение в Dart для Java-программистов" /><span class="rpwwt-post-title">Введение в Dart для Java-программистов</span></a></li><li><a href="https://tehnojam.pro/category/software/times-new-roman-linux.html"><img width="70" height="70" src="https://tehnojam.pro/wp-content/uploads/2018/12/font-map-timesbi0ttf-150x150.png" class="attachment-70x70 size-70x70 wp-post-image" alt="шрифт times new roman для linux" /><span class="rpwwt-post-title">Как установить Times New Roman в Linux</span></a></li><li><a href="https://tehnojam.pro/category/software/vosstanovlenie-mac-os-cherez-internet.html"><img width="70" height="70" src="https://tehnojam.pro/wp-content/uploads/2018/12/srnkol31s64-150x150.jpg" class="attachment-70x70 size-70x70 wp-post-image" alt="mac os восстановление по сети" /><span class="rpwwt-post-title">Как восстановить Mac OS через интернет</span></a></li><li><a href="https://tehnojam.pro/category/software/ustanovka-mac-os-na-acer-aspire-v3-571g-zavod-wifi.html"><img width="70" height="70" src="https://tehnojam.pro/wp-content/uploads/2018/12/snimok-jekrana-2018-12-05-v-0.57.35-150x150.png" class="attachment-70x70 size-70x70 wp-post-image" alt="Macbook air из Acer aspire V3-571g" /><span class="rpwwt-post-title">Как установить Mac OS на Acer Aspire V3-571g</span></a></li><li><a href="https://tehnojam.pro/category/development/flutter-realizacija-bottomappbar-s-fab.html"><img width="70" height="70" src="https://tehnojam.pro/wp-content/uploads/2018/11/1_voqjzam9mopgfjy5zus0ua-150x150.jpeg" class="attachment-70x70 size-70x70 wp-post-image" alt="Flutter: BottomAppBar с FAB" /><span class="rpwwt-post-title">Flutter: реализация BottomAppBar с FAB</span></a></li></ul></div> </aside></div></div></div></div><div class="site-footer grid-container grid-parent "> <footer class="site-info" itemtype="https://schema.org/WPFooter" itemscope="itemscope"><div class="inside-site-info grid-container grid-parent"><div class="copyright-bar"> © 2018 All rights reserved Tehnojam.pro</div></div> </footer></div> <script type="text/javascript" >(function(d,w,c){(w[c]=w[c]||[]).push(function(){try{w.yaCounter34533870=new Ya.Metrika({id:34533870,clickmap:true,trackLinks:true,accurateTrackBounce:true});}catch(e){}});var n=d.getElementsByTagName("script")[0],s=d.createElement("script"),f=function(){n.parentNode.insertBefore(s,n);};s.type="text/javascript";s.async=true;s.src="https://mc.yandex.ru/metrika/watch.js";if(w.opera=="[object Opera]"){d.addEventListener("DOMContentLoaded",f,false);}else{f();}})(document,window,"yandex_metrika_callbacks");</script> <noscript><div><img src="https://mc.yandex.ru/watch/34533870" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <script type="text/javascript">_atrk_opts={atrk_acct:"2rd1s1SZw320l9",domain:"tehnojam.pro",dynamic:true};(function(){var as=document.createElement('script');as.type='text/javascript';as.async=true;as.src="https://certify-js.alexametrics.com/atrk.js";var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(as,s);})();</script> <noscript><img src="https://certify.alexametrics.com/atrk.gif?account=2rd1s1SZw320l9" style="display:none" height="1" width="1" alt="" /></noscript> <a title="Scroll back to top" rel="nofollow" href="#" class="koromo-back-to-top" style="opacity:0;visibility:hidden;" data-scroll-speed="400" data-start-scroll="300"> <span class="screen-reader-text">Scroll back to top</span> </a><div class="koromo-side-left-cover"></div><div class="koromo-side-right-cover"></div></div> <script type="text/javascript">/*<![CDATA[*/flat_pm_arr.push({"how":{"iterable":{"direction":"top_to_bottom","before_after":"after","N":"2","selector":"h3","search_all":"false"}},"chapter_limit":"","html":[{"html_main":"<!-- Yandex.RTB R-A-335338-6 -->\n<div id=\"yandex_rtb_R-A-335338-6\"><\/div>\n<script type=\"text\/javascript\">\n (function(w, d, n, s, t) {\n w[n] = w[n] || [];\n w[n].push(function() {\n Ya.Context.AdvManager.render({\n blockId: \"R-A-335338-6\",\n renderTo: \"yandex_rtb_R-A-335338-6\",\n async: true\n });\n });\n t = d.getElementsByTagName(\"script\")[0];\n s = d.createElement(\"script\");\n s.type = \"text\/javascript\";\n s.src = \"\/\/an.yandex.ru\/system\/context.js\";\n s.async = true;\n t.parentNode.insertBefore(s, t);\n })(this, this.document, \"yandexContextAsyncCallbacks\");\n<\/script>","html_block":"<!-- Yandex.RTB R-A-335338-6 -->\n<div id=\"yandex_rtb_R-A-335338-6\"><\/div>\n<script type=\"text\/javascript\">\n (function(w, d, n, s, t) {\n w[n] = w[n] || [];\n w[n].push(function() {\n Ya.Context.AdvManager.render({\n blockId: \"R-A-335338-6\",\n renderTo: \"yandex_rtb_R-A-335338-6\",\n async: true\n });\n });\n t = d.getElementsByTagName(\"script\")[0];\n s = d.createElement(\"script\");\n s.type = \"text\/javascript\";\n s.src = \"\/\/an.yandex.ru\/system\/context.js\";\n s.async = true;\n t.parentNode.insertBefore(s, t);\n })(this, this.document, \"yandexContextAsyncCallbacks\");\n<\/script>","group":"2086","resolution_from":"\u221e","resolution_to":"\u221e"}]});/*]]>*/</script> <script type="text/javascript">/*<![CDATA[*/flat_pm_arr.push({"how":{"iterable":{"direction":"top_to_bottom","before_after":"after","N":"2","selector":"h2","search_all":"false"}},"chapter_limit":"","html":[{"html_main":"<!-- Yandex.RTB R-A-335338-6 -->\n<div id=\"yandex_rtb_R-A-335338-6\"><\/div>\n<script type=\"text\/javascript\">\n (function(w, d, n, s, t) {\n w[n] = w[n] || [];\n w[n].push(function() {\n Ya.Context.AdvManager.render({\n blockId: \"R-A-335338-6\",\n renderTo: \"yandex_rtb_R-A-335338-6\",\n async: true\n });\n });\n t = d.getElementsByTagName(\"script\")[0];\n s = d.createElement(\"script\");\n s.type = \"text\/javascript\";\n s.src = \"\/\/an.yandex.ru\/system\/context.js\";\n s.async = true;\n t.parentNode.insertBefore(s, t);\n })(this, this.document, \"yandexContextAsyncCallbacks\");\n<\/script>","html_block":"<!-- Yandex.RTB R-A-335338-6 -->\n<div id=\"yandex_rtb_R-A-335338-6\"><\/div>\n<script type=\"text\/javascript\">\n (function(w, d, n, s, t) {\n w[n] = w[n] || [];\n w[n].push(function() {\n Ya.Context.AdvManager.render({\n blockId: \"R-A-335338-6\",\n renderTo: \"yandex_rtb_R-A-335338-6\",\n async: true\n });\n });\n t = d.getElementsByTagName(\"script\")[0];\n s = d.createElement(\"script\");\n s.type = \"text\/javascript\";\n s.src = \"\/\/an.yandex.ru\/system\/context.js\";\n s.async = true;\n t.parentNode.insertBefore(s, t);\n })(this, this.document, \"yandexContextAsyncCallbacks\");\n<\/script>","group":"2086","resolution_from":"\u221e","resolution_to":"\u221e"}]});/*]]>*/</script> <script type="text/javascript">/*<![CDATA[*/flat_pm_arr.push({"how":{"on\u0441e":{"direction":"top_to_bottom","before_after":"before","N":"1","selector":"p","search_all":"false"}},"chapter_limit":"","html":[{"html_main":"<!-- Yandex.RTB R-A-335338-1 -->\n<div id=\"yandex_rtb_R-A-335338-1\"><\/div>\n<script type=\"text\/javascript\">\n (function(w, d, n, s, t) {\n w[n] = w[n] || [];\n w[n].push(function() {\n Ya.Context.AdvManager.render({\n blockId: \"R-A-335338-1\",\n renderTo: \"yandex_rtb_R-A-335338-1\",\n async: true\n });\n });\n t = d.getElementsByTagName(\"script\")[0];\n s = d.createElement(\"script\");\n s.type = \"text\/javascript\";\n s.src = \"\/\/an.yandex.ru\/system\/context.js\";\n s.async = true;\n t.parentNode.insertBefore(s, t);\n })(this, this.document, \"yandexContextAsyncCallbacks\");\n<\/script>","html_block":"<!-- Yandex.RTB R-A-335338-1 -->\n<div id=\"yandex_rtb_R-A-335338-1\"><\/div>\n<script type=\"text\/javascript\">\n (function(w, d, n, s, t) {\n w[n] = w[n] || [];\n w[n].push(function() {\n Ya.Context.AdvManager.render({\n blockId: \"R-A-335338-1\",\n renderTo: \"yandex_rtb_R-A-335338-1\",\n async: true\n });\n });\n t = d.getElementsByTagName(\"script\")[0];\n s = d.createElement(\"script\");\n s.type = \"text\/javascript\";\n s.src = \"\/\/an.yandex.ru\/system\/context.js\";\n s.async = true;\n t.parentNode.insertBefore(s, t);\n })(this, this.document, \"yandexContextAsyncCallbacks\");\n<\/script>","group":"2086","resolution_from":"\u221e","resolution_to":"\u221e"}]});/*]]>*/</script> <style type="text/css">.saboxplugin-wrap{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;border:1px solid #eee;width:100%;clear:both;display:block;overflow:hidden;word-wrap:break-word;position:relative}.saboxplugin-wrap .saboxplugin-gravatar{float:left;padding:20px}.saboxplugin-wrap .saboxplugin-gravatar img{max-width:100px;height:auto}.saboxplugin-wrap .saboxplugin-authorname{font-size:18px;line-height:1;margin:20px 0 0 20px;display:block}.saboxplugin-wrap .saboxplugin-authorname a{text-decoration:none}.saboxplugin-wrap .saboxplugin-authorname a:focus{outline:0}.saboxplugin-wrap .saboxplugin-desc{display:block;margin:5px 20px}.saboxplugin-wrap .saboxplugin-desc a{text-decoration:underline}.saboxplugin-wrap .saboxplugin-desc p{margin:5px 0 12px}.saboxplugin-wrap .saboxplugin-web{margin:0 20px 15px;text-align:left}.saboxplugin-wrap .sab-web-position{text-align:right}.saboxplugin-wrap .saboxplugin-web a{color:#ccc;text-decoration:none}.saboxplugin-wrap .saboxplugin-socials{position:relative;display:block;background:#fcfcfc;padding:5px;border-top:1px solid #eee}.saboxplugin-wrap .saboxplugin-socials a svg{width:20px;height:20px}.saboxplugin-wrap .saboxplugin-socials a svg .st2{fill:#fff}.saboxplugin-wrap .saboxplugin-socials a svg .st1{fill:rgba(0,0,0,.3)}.saboxplugin-wrap .saboxplugin-socials a:hover{opacity:.8;-webkit-transition:opacity .4s;-moz-transition:opacity .4s;-o-transition:opacity .4s;transition:opacity .4s;box-shadow:none!important;-webkit-box-shadow:none!important}.saboxplugin-wrap .saboxplugin-socials .saboxplugin-icon-color{box-shadow:none;padding:0;border:0;-webkit-transition:opacity .4s;-moz-transition:opacity .4s;-o-transition:opacity .4s;transition:opacity .4s;display:inline-block;color:#fff;font-size:0;text-decoration:inherit;margin:5px;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0;overflow:hidden}.saboxplugin-wrap .saboxplugin-socials .saboxplugin-icon-grey{text-decoration:inherit;box-shadow:none;position:relative;display:-moz-inline-stack;display:inline-block;vertical-align:middle;zoom:1;margin:10px 5px;color:#444}.clearfix:after,.clearfix:before{content:' ';display:table;line-height:0;clear:both}.ie7 .clearfix{zoom:1}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-twitch{border-color:#38245c}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-addthis{border-color:#e91c00}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-behance{border-color:#003eb0}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-delicious{border-color:#06c}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-deviantart{border-color:#036824}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-digg{border-color:#00327c}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-dribbble{border-color:#ba1655}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-facebook{border-color:#1e2e4f}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-flickr{border-color:#003576}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-github{border-color:#264874}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-google{border-color:#0b51c5}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-googleplus{border-color:#96271a}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-html5{border-color:#902e13}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-instagram{border-color:#1630aa}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-linkedin{border-color:#00344f}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-pinterest{border-color:#5b040e}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-reddit{border-color:#992900}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-rss{border-color:#a43b0a}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-sharethis{border-color:#5d8420}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-skype{border-color:#00658a}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-soundcloud{border-color:#995200}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-spotify{border-color:#0f612c}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-stackoverflow{border-color:#a95009}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-steam{border-color:#006388}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-user_email{border-color:#b84e05}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-stumbleUpon{border-color:#9b280e}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-tumblr{border-color:#10151b}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-twitter{border-color:#0967a0}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-vimeo{border-color:#0d7091}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-windows{border-color:#003f71}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-wordpress{border-color:#0f3647}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-yahoo{border-color:#14002d}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-youtube{border-color:#900}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-xing{border-color:#000202}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-mixcloud{border-color:#2475a0}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-vk{border-color:#243549}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-medium{border-color:#00452c}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-quora{border-color:#420e00}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-meetup{border-color:#9b181c}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-goodreads{border-color:#000}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-snapchat{border-color:#999700}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-500px{border-color:#00557f}.saboxplugin-socials.sabox-colored .saboxplugin-icon-color .sab-mastodont{border-color:#185886}.sabox-plus-item{margin-bottom:20px}@media screen and (max-width:480px){.saboxplugin-wrap{text-align:center}.saboxplugin-wrap .saboxplugin-gravatar{float:none;padding:20px 0;text-align:center;margin:0 auto;display:block}.saboxplugin-wrap .saboxplugin-gravatar img{float:none;display:inline-block;display:-moz-inline-stack;vertical-align:middle;zoom:1}.saboxplugin-wrap .saboxplugin-desc{margin:0 10px 20px;text-align:center}.saboxplugin-wrap .saboxplugin-authorname{text-align:center;margin:10px 0 20px}}body .saboxplugin-authorname a,body .saboxplugin-authorname a:hover{box-shadow:none;-webkit-box-shadow:none}a.sab-profile-edit{font-size:16px!important;line-height:1!important}.sab-edit-settings a,a.sab-profile-edit{color:#0073aa!important;box-shadow:none!important;-webkit-box-shadow:none!important}.sab-edit-settings{margin-right:15px;position:absolute;right:0;z-index:2;bottom:10px;line-height:20px}.sab-edit-settings i{margin-left:5px}.saboxplugin-socials{line-height:1!important}.rtl .saboxplugin-wrap .saboxplugin-gravatar{float:right}.rtl .saboxplugin-wrap .saboxplugin-authorname{display:flex;align-items:center}.rtl .saboxplugin-wrap .saboxplugin-authorname .sab-profile-edit{margin-right:10px}.rtl .sab-edit-settings{right:auto;left:0}img.sab-custom-avatar{max-width:75px}.saboxplugin-wrap{border-color:#666b78}.saboxplugin-wrap .saboxplugin-socials{border-color:#666b78}.saboxplugin-wrap .saboxplugin-gravatar img{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%}.saboxplugin-wrap .saboxplugin-gravatar img{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.saboxplugin-wrap .saboxplugin-gravatar img:hover{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.saboxplugin-wrap .saboxplugin-socials{background-color:#666b78}.saboxplugin-wrap .saboxplugin-desc p, .saboxplugin-wrap .saboxplugin-desc{color:#d8d8d8 !important}.saboxplugin-wrap .saboxplugin-desc a, .saboxplugin-wrap .saboxplugin-desc{color:#fff !important}.saboxplugin-wrap .saboxplugin-socials .saboxplugin-icon-grey{color:#b7b7b7}.saboxplugin-wrap .saboxplugin-authorname{font-family:"PT Sans"}.saboxplugin-wrap .saboxplugin-desc{font-family:PT Serif}.saboxplugin-wrap .saboxplugin-desc{font-style:italic}.saboxplugin-wrap{margin-top:0px;margin-bottom:0px;padding:0px 0px}.saboxplugin-wrap .saboxplugin-authorname{font-size:19px;line-height:26px}.saboxplugin-wrap .saboxplugin-desc p, .saboxplugin-wrap .saboxplugin-desc{font-size:16px !important;line-height:23px !important}.saboxplugin-wrap .saboxplugin-web{font-size:14px}.saboxplugin-wrap .saboxplugin-socials a svg{width:20px;height:20px}</style><style id='simple-share-buttons-adder-ssba-inline-css' type='text/css'>.ssba{}.ssba img{width:38px !important;padding:4px;border:0;box-shadow:none !important;display:inline !important;vertical-align:middle;box-sizing:unset}#ssba-classic-2 .ssbp-text{display:none!important}.ssba .fb-save{padding:4px;line-height:33px}.ssba, .ssba a{text-decoration:none;background:none;font-size:12px;color:#ffffff!important;font-weight:normal}@font-face{font-family:'ssbp';src:url('https://tehnojam.pro/wp-content/plugins/simple-share-buttons-adder/fonts/ssbp.eot?xj3ol1');src:url('https://tehnojam.pro/wp-content/plugins/simple-share-buttons-adder/fonts/ssbp.eot?#iefixxj3ol1') format('embedded-opentype'), url('https://tehnojam.pro/wp-content/plugins/simple-share-buttons-adder/fonts/ssbp.woff?xj3ol1') format('woff'), url('https://tehnojam.pro/wp-content/plugins/simple-share-buttons-adder/fonts/ssbp.ttf?xj3ol1') format('truetype'), url('https://tehnojam.pro/wp-content/plugins/simple-share-buttons-adder/fonts/ssbp.svg?xj3ol1#ssbp') format('svg');font-weight:normal;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}</style> <script type='text/javascript'>var wpcf7={"apiSettings":{"root":"https:\/\/tehnojam.pro\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"},"cached":"1"};</script> <script type="text/javascript" src="https://tehnojam.pro/wp-content/cache/minify/0fef6.js"></script> <script type='text/javascript'>var PT_CV_PUBLIC={"_prefix":"pt-cv-","page_to_show":"5","_nonce":"14eef2cc07","is_admin":"","is_mobile":"","ajaxurl":"https:\/\/tehnojam.pro\/wp-admin\/admin-ajax.php","lang":"","loading_image_src":"data:image\/gif;base64,R0lGODlhDwAPALMPAMrKygwMDJOTkz09PZWVla+vr3p6euTk5M7OzuXl5TMzMwAAAJmZmWZmZszMzP\/\/\/yH\/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAPACwAAAAADwAPAAAEQvDJaZaZOIcV8iQK8VRX4iTYoAwZ4iCYoAjZ4RxejhVNoT+mRGP4cyF4Pp0N98sBGIBMEMOotl6YZ3S61Bmbkm4mAgAh+QQFCgAPACwAAAAADQANAAAENPDJSRSZeA418itN8QiK8BiLITVsFiyBBIoYqnoewAD4xPw9iY4XLGYSjkQR4UAUD45DLwIAIfkEBQoADwAsAAAAAA8ACQAABC\/wyVlamTi3nSdgwFNdhEJgTJoNyoB9ISYoQmdjiZPcj7EYCAeCF1gEDo4Dz2eIAAAh+QQFCgAPACwCAAAADQANAAAEM\/DJBxiYeLKdX3IJZT1FU0iIg2RNKx3OkZVnZ98ToRD4MyiDnkAh6BkNC0MvsAj0kMpHBAAh+QQFCgAPACwGAAAACQAPAAAEMDC59KpFDll73HkAA2wVY5KgiK5b0RRoI6MuzG6EQqCDMlSGheEhUAgqgUUAFRySIgAh+QQFCgAPACwCAAIADQANAAAEM\/DJKZNLND\/kkKaHc3xk+QAMYDKsiaqmZCxGVjSFFCxB1vwy2oOgIDxuucxAMTAJFAJNBAAh+QQFCgAPACwAAAYADwAJAAAEMNAs86q1yaWwwv2Ig0jUZx3OYa4XoRAfwADXoAwfo1+CIjyFRuEho60aSNYlOPxEAAAh+QQFCgAPACwAAAIADQANAAAENPA9s4y8+IUVcqaWJ4qEQozSoAzoIyhCK2NFU2SJk0hNnyEOhKR2AzAAj4Pj4GE4W0bkJQIAOw==","is_mobile_tablet":"","sf_no_post_found":"\u0417\u0430\u043f\u0438\u0441\u0435\u0439 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e."};var PT_CV_PAGINATION={"first":"\u00ab","prev":"\u2039","next":"\u203a","last":"\u00bb","goto_first":"\u041d\u0430 \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443","goto_prev":"\u041d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443","goto_next":"\u041d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443","goto_last":"\u041d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443","current_page":"\u0422\u0435\u043a\u0443\u0449\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","goto_page":"\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443"};</script> <script type="text/javascript" src="https://tehnojam.pro/wp-content/cache/minify/2149b.js"></script> <script type='text/javascript'>var pvcArgsFrontend={"mode":"ajax","requestURL":"https:\/\/tehnojam.pro\/wp-content\/plugins\/post-views-counter\/includes\/ajax.php","postID":"365","nonce":"8d851470b8"};</script> <script type="text/javascript" src="https://tehnojam.pro/wp-content/cache/minify/b1f00.js"></script> <script type='text/javascript'>Main.boot([]);</script> <script type='text/javascript'>var sticky_anything_engage={"element":".main-nav","topspace":"0","minscreenwidth":"760","maxscreenwidth":"999999","zindex":"99999999999999999","legacymode":"","dynamicmode":"","debugmode":"","pushup":"","adminbar":"1"};</script> <script type="text/javascript" src="https://tehnojam.pro/wp-content/cache/minify/af6a4.js"></script> <script type='text/javascript'>var ratingsL10n={"plugin_url":"https:\/\/tehnojam.pro\/wp-content\/plugins\/wp-postratings","ajax_url":"https:\/\/tehnojam.pro\/wp-admin\/admin-ajax.php","text_wait":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043d\u0435 \u0433\u043e\u043b\u043e\u0441\u0443\u0439\u0442\u0435 \u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.","image":"stars","image_ext":"svg","max":"5","show_loading":"1","show_fading":"1","custom":"0"};var ratings_mouseover_image=new Image();ratings_mouseover_image.src="https://tehnojam.pro/wp-content/plugins/wp-postratings/images/stars/rating_over.svg";;</script> <script type="text/javascript" src="https://tehnojam.pro/wp-content/cache/minify/0df9f.js"></script> <script type='text/javascript'>var viewsCacheL10n={"admin_ajax_url":"https:\/\/tehnojam.pro\/wp-admin\/admin-ajax.php","post_id":"365","is_singular":"1"};</script> <!--[if lte IE 11]> <script type='text/javascript' src='https://tehnojam.pro/wp-content/themes/Koromo/js/classList.min.js?ver=1.0.1'></script> <![endif]--> <script type="text/javascript" src="https://tehnojam.pro/wp-content/cache/minify/a50a7.js"></script> <script type='text/javascript' data-cfasync="false" async="async" defer="defer" src='https://www.google.com/recaptcha/api.js?render=explicit&ver=1.38'></script> <script type='text/javascript'>/*<![CDATA[*/var gglcptch={"options":{"version":"v2","sitekey":"6LdLqnYUAAAAAKcMT7b_RIlsSEvVHpIWIBaI6X-x","theme":"dark","error":"<strong>\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/strong>: \u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0444\u043e\u0440\u043c\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 reCAPTCHA. \u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0443\u0434\u0430\u043b\u0438\u0442\u0435 \u0432\u0441\u0435 \u043b\u0438\u0448\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u0438 reCAPTCHA \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b."},"vars":{"visibility":false}};/*]]>*/</script> <script type="text/javascript" src="https://tehnojam.pro/wp-content/cache/minify/b3df2.js"></script> <style>code.hljs{}</style> <script type="text/javascript">(function($,window){var init_fn_flag=false;var init_fn=(function(){if(init_fn_flag) return;init_fn_flag=true;hljs.configure({"tabReplace":" "});$('pre code').each(function(i,block){hljs.highlightBlock(block);});});$(document).ready(init_fn);$(window).on("load",init_fn);})(jQuery,window);</script> <div id="adsense" style="position:absolute;left:-9999px;" >Adblock detector</div> <script type="text/javascript">/*<![CDATA[*/var detectAdb_var=!1;function detectAdb(){var e=document.getElementById("adsense"),t=e.currentStyle||window.getComputedStyle(e,null);t=parseInt(t.height),(isNaN(t)||0==t)&&(detectAdb_var=!0),e.style.display="none"}detectAdb();/*]]>*/</script> <style>.arcticmodal-overlay,.arcticmodal-container{position:fixed;left:0;top:0;right:0;bottom:0;z-index:1000}.arcticmodal-container{overflow:auto;margin:0;padding:0;border:0;border-collapse:collapse}:first-child+html .arcticmodal-container{height:100%}.arcticmodal-container_i{height:100%;margin:0 auto}.arcticmodal-container_i2{padding:24px;margin:0;border:0;vertical-align:middle}.arcticmodal-error{padding:20px;border-radius:10px;background:#000;color:#fff}.arcticmodal-loading{width:80px;height:80px;border-radius:10px;background:#000 no-repeat 50% 50%}.box-modal{position:relative;width:655px;min-height:120px;padding:20px;background:#fff;color:#3c3c3c;border-radius:5px}.light-modal{position:relative;width:0;height:0;box-shadow:0 0 0 6px rgba(153,153,153,.3);border-radius:5px;opacity:0}#big-modal{width:655px}#middle-modal{width:455px}#small-modal{width:255px}#feedback-modal-box{width:300px}#feedback-modal-box #feedback-infolist{list-style:none;display:table;width:100%;height:100%;margin:0;padding:0}#feedback-modal-box #feedback-infolist li{text-align:center;font-size:110%;display:table-cell;vertical-align:middle;height:120px}#light-box{border-radius:5px}.modal-close{width:26px;height:26px;position:absolute;right:6px;top:6px;font-size:16px;font-weight:700;text-align:center;line-height:26px;color:#fff;background:#4497c6;cursor:pointer;border-radius:13px;font-family:Verdana}.modal-close:hover{background:#4aa5d8}.flat_pm_arcticmodal{min-width:100px;min-height:50px;position:relative;padding:10px;background:#fff}.flat_pm_cross{transition:background .2s ease;position:absolute;top:0;right:0;width:34px;height:34px;background:#000;display:block;cursor:pointer;z-index:99999}.flat_pm_cross:hover{background:#777}.flat_pm_cross:after,.flat_pm_cross:before{transition:transform .3s ease;content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;width:16px;height:4px;background:#fff;transform-origin:center;transform:rotate(45deg);margin:auto}.flat_pm_cross:before{transform:rotate(-45deg)}.flat_pm_cross:hover:after{transform:rotate(225deg)}.flat_pm_cross:hover:before{transform:rotate(135deg)}.flat_pm_outgoing{transition:transform .3s ease;position:fixed;min-width:100px;min-height:50px}.flat_pm_outgoing.top .flat_pm_cross{top:auto;bottom:0}.flat_pm_outgoing.right .flat_pm_cross{right:auto;left:0}.flat_pm_outgoing.top{bottom:100%;left:50%;transform:translateY(0) translateX(-50%)}.flat_pm_outgoing.bottom{top:100%;left:50%;transform:translateY(0) translateX(-50%)}.flat_pm_outgoing.left{bottom:0;right:100%;transform:translateX(0)}.flat_pm_outgoing.right{bottom:0;left:100%;transform:translateX(0)}.flat_pm_outgoing.show.top{transform:translateY(100%) translateX(-50%)}.flat_pm_outgoing.show.bottom{transform:translateY(-100%) translateX(-50%)}.flat_pm_outgoing.show.left{transform:translateX(100%)}.flat_pm_outgoing.show.right{transform:translateX(-100%)}</style> <script type="text/javascript">/*<![CDATA[*/function flat_pm_arcticmodal_load(){if(typeof jQuery.arcticmodal=="undefined"){!function(a){var b={type:"html",content:"",url:"",ajax:{},ajax_request:null,closeOnEsc:!0,closeOnOverlayClick:!0,clone:!1,overlay:{block:void 0,tpl:'<div class="arcticmodal-overlay"></div>',css:{backgroundColor:"#000",opacity:.6}},container:{block:void 0,tpl:'<div class="arcticmodal-container"><table class="arcticmodal-container_i"><tr><td class="arcticmodal-container_i2"></td></tr></table></div>'},wrap:void 0,body:void 0,errors:{tpl:'<div class="arcticmodal-error arcticmodal-close"></div>',autoclose_delay:2e3,ajax_unsuccessful_load:"Error"},openEffect:{type:"fade",speed:400},closeEffect:{type:"fade",speed:400},beforeOpen:a.noop,afterOpen:a.noop,beforeClose:a.noop,afterClose:a.noop,afterLoading:a.noop,afterLoadingOnShow:a.noop,errorLoading:a.noop},c=0,d=a([]),e={isEventOut:function(b,c){var d=!0;return a(b).each(function(){a(c.target).get(0)==a(this).get(0)&&(d=!1),0==a(c.target).closest("HTML",a(this).get(0)).length&&(d=!1)}),d}},f={getParentEl:function(b){var c=a(b);return c.data("arcticmodal")?c:(c=a(b).closest(".arcticmodal-container").data("arcticmodalParentEl"),!!c&&c)},transition:function(b,c,d,e){switch(e=void 0==e?a.noop:e,d.type){case"fade":"show"==c?b.fadeIn(d.speed,e):b.fadeOut(d.speed,e);break;case"none":"show"==c?b.show():b.hide(),e()}},prepare_body:function(b,c){a(".arcticmodal-close",b.body).unbind("click.arcticmodal").bind("click.arcticmodal",function(){return c.arcticmodal("close"),!1})},init_el:function(b,h){var i=b.data("arcticmodal");if(!i){if(i=h,c++,i.modalID=c,i.overlay.block=a(i.overlay.tpl),i.overlay.block.css(i.overlay.css),i.container.block=a(i.container.tpl),i.body=a(".arcticmodal-container_i2",i.container.block),h.clone?i.body.html(b.clone(!0)):(b.before('<div id="arcticmodalReserve'+i.modalID+'" style="display: none" />'),i.body.html(b)),f.prepare_body(i,b),i.closeOnOverlayClick&&i.overlay.block.add(i.container.block).click(function(c){e.isEventOut(a(">*",i.body),c)&&b.arcticmodal("close")}),i.container.block.data("arcticmodalParentEl",b),b.data("arcticmodal",i),d=a.merge(d,b),a.proxy(g.show,b)(),"html"==i.type)return b;if(void 0!=i.ajax.beforeSend){var j=i.ajax.beforeSend;delete i.ajax.beforeSend}if(void 0!=i.ajax.success){var k=i.ajax.success;delete i.ajax.success}if(void 0!=i.ajax.error){var l=i.ajax.error;delete i.ajax.error}var m=a.extend(!0,{url:i.url,beforeSend:function(){void 0==j?i.body.html('<div class="arcticmodal-loading" />'):j(i,b)},success:function(a){b.trigger("afterLoading"),i.afterLoading(i,b,a),void 0==k?i.body.html(a):k(i,b,a),f.prepare_body(i,b),b.trigger("afterLoadingOnShow"),i.afterLoadingOnShow(i,b,a)},error:function(){b.trigger("errorLoading"),i.errorLoading(i,b),void 0==l?(i.body.html(i.errors.tpl),a(".arcticmodal-error",i.body).html(i.errors.ajax_unsuccessful_load),a(".arcticmodal-close",i.body).click(function(){return b.arcticmodal("close"),!1}),i.errors.autoclose_delay&&setTimeout(function(){b.arcticmodal("close")},i.errors.autoclose_delay)):l(i,b)}},i.ajax);i.ajax_request=a.ajax(m),b.data("arcticmodal",i)}},init:function(c){if(c=a.extend(!0,{},b,c),!a.isFunction(this))return this.each(function(){f.init_el(a(this),a.extend(!0,{},c))});if(void 0==c)return void a.error("jquery.arcticmodal: Uncorrect parameters");if(""==c.type)return void a.error('jquery.arcticmodal: Don\'t set parameter "type"');switch(c.type){case"html":if(""==c.content)return void a.error('jquery.arcticmodal: Don\'t set parameter "content"');var d=c.content;return c.content="",f.init_el(a(d),c);case"ajax":return""==c.url?void a.error('jquery.arcticmodal: Don\'t set parameter "url"'):f.init_el(a("<div />"),c)}}},g={show:function(){var b=f.getParentEl(this);if(b===!1)return void a.error("jquery.arcticmodal: Uncorrect call");var c=b.data("arcticmodal");if(c.overlay.block.hide(),c.container.block.hide(),a("BODY").append(c.overlay.block),a("BODY").append(c.container.block),c.beforeOpen(c,b),b.trigger("beforeOpen"),"hidden"!=c.wrap.css("overflow")){c.wrap.data("arcticmodalOverflow",c.wrap.css("overflow"));var e=c.wrap.outerWidth(!0);c.wrap.css("overflow","hidden");var g=c.wrap.outerWidth(!0);g!=e&&c.wrap.css("marginRight",g-e+"px")}return d.not(b).each(function(){var b=a(this).data("arcticmodal");b.overlay.block.hide()}),f.transition(c.overlay.block,"show",d.length>1?{type:"none"}:c.openEffect),f.transition(c.container.block,"show",d.length>1?{type:"none"}:c.openEffect,function(){c.afterOpen(c,b),b.trigger("afterOpen")}),b},close:function(){return a.isFunction(this)?void d.each(function(){a(this).arcticmodal("close")}):this.each(function(){var b=f.getParentEl(this);if(b===!1)return void a.error("jquery.arcticmodal: Uncorrect call");var c=b.data("arcticmodal");c.beforeClose(c,b)!==!1&&(b.trigger("beforeClose"),d.not(b).last().each(function(){var b=a(this).data("arcticmodal");b.overlay.block.show()}),f.transition(c.overlay.block,"hide",d.length>1?{type:"none"}:c.closeEffect),f.transition(c.container.block,"hide",d.length>1?{type:"none"}:c.closeEffect,function(){c.afterClose(c,b),b.trigger("afterClose"),c.clone||a("#arcticmodalReserve"+c.modalID).replaceWith(c.body.find(">*")),c.overlay.block.remove(),c.container.block.remove(),b.data("arcticmodal",null),a(".arcticmodal-container").length||(c.wrap.data("arcticmodalOverflow")&&c.wrap.css("overflow",c.wrap.data("arcticmodalOverflow")),c.wrap.css("marginRight",0))}),"ajax"==c.type&&c.ajax_request.abort(),d=d.not(b))})},setDefault:function(c){a.extend(!0,b,c)}};a(function(){b.wrap=a(document.all&&!document.querySelector?"html":"body")}),a(document).bind("keyup.arcticmodal",function(a){var b=d.last();if(b.length){var c=b.data("arcticmodal");c.closeOnEsc&&27===a.keyCode&&b.arcticmodal("close")}}),a.arcticmodal=a.fn.arcticmodal=function(b){return g[b]?g[b].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof b&&b?void a.error("jquery.arcticmodal: Method "+b+" does not exist"):f.init.apply(this,arguments)}}(jQuery);}} function randomFlat(min,max){return Math.floor(Math.random()*(max-min+1))+min} var ajax_url_now_me='https://tehnojam.pro/wp-admin/admin-ajax.php';function flat_func_before(e,t,r){setTimeout(function(){e.before(t)},r)}function flat_func_after(e,t,r){setTimeout(function(){e.after(t)},r)}function flatlsTest(){var e="test_56445";try{return localStorage.setItem(e,e),localStorage.removeItem(e),!0}catch(e){return!1}}function flatgetCookie(e){var t=document.cookie.match(new RegExp("(?:^|; )"+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,"\\$1")+"=([^;]*)"));return t?decodeURIComponent(t[1]):void 0}function flatsetCookie(e,t,r){var a=(r=r||{}).expires;if("number"==typeof a&&a){var n=new Date;n.setTime(n.getTime()+1e3*a),a=r.expires=n}a&&a.toUTCString&&(r.expires=a.toUTCString());var o=e+"="+(t=encodeURIComponent(t));for(var i in r){o+="; "+i;var l=r[i];!0!==l&&(o+="="+l)}document.cookie=o}var flatDetect={init:function(){this.browser=this.searchString(this.dataBrowser)||!1,this.OS=this.searchString(this.dataOS)||!1,this.referer=this.cookieReferer()},cookieReferer:function(){return parent!==window?"///:iframe":!0!==flatlsTest()?""!=document.referrer?document.referrer:"///:direct":(void 0===flatgetCookie("flat_r_mb")&&flatsetCookie("flat_r_mb",~window.location.search.indexOf("zen.yandex")?"///:zen":(""!=document.referrer?document.referrer:"///:direct"),{path:"/"}),flatgetCookie("flat_r_mb"))},searchString:function(e){for(var t=0;t<e.length;t++){var r=e[t].string,a=e[t].prop;if(this.versionSearchString=e[t].versionSearch||e[t].identity,r){if(-1!=r.indexOf(e[t].subString))return e[t].identity}else if(a)return e[t].identity}},dataBrowser:[{string:navigator.userAgent,subString:"OmniWeb",versionSearch:"OmniWeb/",identity:"OmniWeb"},{string:navigator.userAgent,subString:"YaBrowser",identity:"YaBrowser"},{string:navigator.vendor,subString:"Apple",identity:"Safari",versionSearch:"Version"},{string:navigator.userAgent,subString:"OPR",identity:"Opera",versionSearch:"Version"},{string:navigator.userAgent,subString:"Firefox",identity:"Firefox"},{string:navigator.userAgent,subString:".NET CLR",identity:"Internet Explorer",versionSearch:"MSIE"},{string:navigator.userAgent,subString:"Edge",identity:"Edge",versionSearch:"rv"},{string:navigator.vendor,subString:"iCab",identity:"iCab"},{string:navigator.vendor,subString:"KDE",identity:"Konqueror"},{string:navigator.vendor,subString:"Camino",identity:"Camino"},{string:navigator.userAgent,subString:"Netscape",identity:"Netscape"},{string:navigator.userAgent,subString:"Chrome",identity:"Chrome"},{string:navigator.userAgent,subString:"Mozilla",identity:"Netscape",versionSearch:"Mozilla"}],dataOS:[{string:navigator.platform,subString:"Win",identity:"Windows"},{string:navigator.platform,subString:"Mac",identity:"Mac"},{string:navigator.userAgent,subString:"iPhone",identity:"iPhone/iPod"},{string:navigator.platform,subString:"Linux",identity:"Linux"}]};function next_flat_stage(e,t){if(""==e.chapter_limit||t.content_until.text().length>parseInt(e.chapter_limit)){for(var r=[],a="",n=0;n<e.html.length;n++)("∞"==e.html[n].resolution_from||e.html[n].resolution_from<=t.client_width)&&("∞"==e.html[n].resolution_to||e.html[n].resolution_to>=t.client_width)&&("0"!=e.html[n].group?t.client_block?(null==r["group_"+e.html[n].group]&&(r["group_"+e.html[n].group]=[]),r["group_"+e.html[n].group].push(e.html[n].html_block)):(null==r["group_"+e.html[n].group]&&(r["group_"+e.html[n].group]=[]),r["group_"+e.html[n].group].push(e.html[n].html_main)):t.client_block?r.push(e.html[n].html_block):r.push(e.html[n].html_main));for(var o in r)a="object"==typeof r[o]?a+"\n"+r[o][randomFlat(0,r[o].length-1)]:a+"\n"+r[o];if(""!=a){if(void 0!==e.how.simple&&("1"==e.how.simple.position&&jQuery(".flat_pm_start").after(a),"2"==e.how.simple.position&&jQuery(t.content_until[Math.round(t.content_until.length/2)]).after(a),"3"==e.how.simple.position&&jQuery(".flat_pm_end").before(a)),void 0!==e.how.onсe){if("true"==e.how.onсe.search_all)var i=jQuery("body").children();else i=t.content_until;(i=i.find(e.how.onсe.selector).add(i.filter(e.how.onсe.selector))).length>0&&(l="bottom_to_top"==e.how.onсe.direction?i.length-e.how.onсe.N:e.how.onсe.N-1,"before"==e.how.onсe.before_after?jQuery(jQuery.grep(i,function(e,t){return t==l})).before(a):jQuery(jQuery.grep(i,function(e,t){return t==l})).after(a))}if(void 0!==e.how.iterable&&(i=(i="true"==e.how.iterable.search_all?jQuery("body").children():t.content_until).find(e.how.iterable.selector).add(i.filter(e.how.iterable.selector))).length>0){var l=e.how.iterable.N,_=0;"bottom_to_top"==e.how.iterable.direction&&(i=i.get().reverse()),"before"==e.how.iterable.before_after?jQuery(jQuery.grep(i,function(e,t){return(t+1)%l==0})).each(function(){flat_func_before(jQuery(this),a,_),_+=10}):jQuery(jQuery.grep(i,function(e,t){return(t+1)%l==0})).each(function(){flat_func_after(jQuery(this),a,_),_+=10})}if(void 0!==e.how.popup){var s=!0;jQuery.arcticmodal("close"),"px"==e.how.popup.px_s?jQuery(window).scroll(function(){jQuery(this).scrollTop()>e.how.popup.after&&s&&(s=!1,jQuery('<div class="flat_pm_arcticmodal">'+("true"==e.how.popup.cross?'<div class="flat_pm_cross" onclick=""></div>':"")+a+"</div>").arcticmodal())}):setTimeout(function(){jQuery('<div class="flat_pm_arcticmodal">'+("true"==e.how.popup.cross?'<div class="flat_pm_cross" onclick=""></div>':"")+a+"</div>").arcticmodal()},1e3*e.how.popup.after),jQuery("body").on("click",".flat_pm_arcticmodal .flat_pm_cross",function(){jQuery.arcticmodal("close")})}if(void 0!==e.how.outgoing){var f;switch(s=!0,e.how.outgoing.whence){case"1":f="top";break;case"2":f="bottom";break;case"3":f="left";break;case"4":f="right"}jQuery("body").append('<div class="flat_pm_outgoing '+f+'"'+("0"!=e.how.outgoing.indent?' style="bottom:'+e.how.outgoing.indent+'px"':"")+">"+("true"==e.how.outgoing.cross?'<div class="flat_pm_cross" onclick=""></div>':"")+a+"</div>"),"px"==e.how.outgoing.px_s?jQuery(window).scroll(function(){jQuery(this).scrollTop()>e.how.outgoing.after&&s&&(s=!1,jQuery(".flat_pm_outgoing."+f).addClass("show"))}):setTimeout(function(){jQuery(".flat_pm_outgoing."+f).addClass("show")},1e3*e.how.outgoing.after),jQuery("body").on("click",".flat_pm_outgoing .flat_pm_cross",function(){jQuery(this).parent().removeClass("show")})}}}}function flat_jQuery_is_load(){if(flat_pm_arcticmodal_load(),flat_pm_arr.length>0){jQuery('[data-flat-attr="img"]').each(function(){var e=jQuery(this);e.parent().is("a")&&e.parent().attr("data-flat-attr","a-img"),e.parent().is("p")&&e.parent().attr("data-flat-attr","p-img"),e.parent().parent().is("p")&&e.parent().parent().attr("data-flat-attr","p-img")});var e=new Date,t={},r=!0;t.client_width=window.innerWidth,t.client_date=e.getFullYear()+"-"+(2==(e.getMonth()+1+"").length?e.getMonth()+1:"0"+(e.getMonth()+1))+"-"+(2==(e.getDate()+"").length?e.getDate():"0"+e.getDate()),t.client_time=(2==(e.getHours()+"").length?e.getHours():"0"+e.getHours())+":"+(2==(e.getMinutes()+"").length?e.getMinutes():"0"+e.getMinutes()),t.client_block=detectAdb_var,t.client_country,t.client_city,t.content_until=jQuery(".flat_pm_start").nextUntil(".flat_pm_end"),t.client_os=flatDetect.OS,t.client_browser=flatDetect.browser,t.client_referer=flatDetect.referer;for(var a=0;a<flat_pm_arr.length;a++){var n=!1;if(void 0!==flat_pm_arr[a].date&&("true"==flat_pm_arr[a].date.date_time_enabled&&(new Date(t.client_date+"T"+t.client_time+":00")>new Date(t.client_date+"T"+flat_pm_arr[a].date.time_to+":00")||new Date(t.client_date+"T"+t.client_time+":00")<new Date(t.client_date+"T"+flat_pm_arr[a].date.time_from+":00"))&&(n=!0),"true"==flat_pm_arr[a].date.date_date_enabled&&(new Date(t.client_date+"T00:00:00")>new Date(flat_pm_arr[a].date.date_to+"T00:00:00")||new Date(t.client_date+"T00:00:00")<new Date(flat_pm_arr[a].date.date_from+"T00:00:00"))&&(n=!0)),void 0!==flat_pm_arr[a].referer&&(""==flat_pm_arr[a].referer.referer_enabled[0]&&(flat_pm_arr[a].referer.referer_enabled=[]),""==flat_pm_arr[a].referer.referer_disabled[0]&&(flat_pm_arr[a].referer.referer_disabled=[]),(0!=flat_pm_arr[a].referer.referer_enabled.length&&-1==flat_pm_arr[a].referer.referer_enabled.findIndex(function(e){return-1!=t.client_referer.indexOf(e)})||0!=flat_pm_arr[a].referer.referer_disabled.length&&-1!=flat_pm_arr[a].referer.referer_disabled.findIndex(function(e){return-1!=t.client_referer.indexOf(e)}))&&(n=!0)),void 0!==flat_pm_arr[a].os&&(""==flat_pm_arr[a].os.os_enabled[0]&&(flat_pm_arr[a].os.os_enabled=[]),""==flat_pm_arr[a].os.os_disabled[0]&&(flat_pm_arr[a].os.os_disabled=[]),(0!=flat_pm_arr[a].os.os_enabled.length&&-1==flat_pm_arr[a].os.os_enabled.indexOf(t.client_os)||0!=flat_pm_arr[a].os.os_disabled.length&&-1!=flat_pm_arr[a].os.os_disabled.indexOf(t.client_os))&&(n=!0)),void 0!==flat_pm_arr[a].browser&&(""==flat_pm_arr[a].browser.browser_enabled[0]&&(flat_pm_arr[a].browser.browser_enabled=[]),""==flat_pm_arr[a].browser.browser_disabled[0]&&(flat_pm_arr[a].browser.browser_disabled=[]),(0!=flat_pm_arr[a].browser.browser_enabled.length&&-1==flat_pm_arr[a].browser.browser_enabled.indexOf(t.client_browser)||0!=flat_pm_arr[a].browser.browser_disabled.length&&-1!=flat_pm_arr[a].browser.browser_disabled.indexOf(t.client_browser))&&(n=!0)),void 0!==flat_pm_arr[a].global&&void 0!==flat_pm_arr[a].global.referer&&(""==flat_pm_arr[a].global.referer.referer_enabled[0]&&(flat_pm_arr[a].global.referer.referer_enabled=[]),""==flat_pm_arr[a].global.referer.referer_disabled[0]&&(flat_pm_arr[a].global.referer.referer_disabled=[]),(0!=flat_pm_arr[a].global.referer.referer_enabled.length&&-1==flat_pm_arr[a].global.referer.referer_enabled.findIndex(function(e){return-1!=t.client_referer.indexOf(e)})||0!=flat_pm_arr[a].global.referer.referer_disabled.length&&-1!=flat_pm_arr[a].global.referer.referer_disabled.findIndex(function(e){return-1!=t.client_referer.indexOf(e)}))&&(n=!0)),void 0===flat_pm_arr[a].geo||n)n||next_flat_stage(flat_pm_arr[a],t);else{function o(e){void 0!==t.client_country&&void 0!==t.client_country?(""==e.geo.city_enabled[0]&&(e.geo.city_enabled=[]),""==e.geo.city_disabled[0]&&(e.geo.city_disabled=[]),""==e.geo.country_enabled[0]&&(e.geo.country_enabled=[]),""==e.geo.country_disabled[0]&&(e.geo.country_disabled=[]),0!=e.geo.city_enabled.length&&-1==e.geo.city_enabled.indexOf(t.client_city)||0!=e.geo.city_disabled.length&&-1!=e.geo.city_disabled.indexOf(t.client_city)||0!=e.geo.country_enabled.length&&-1==e.geo.country_enabled.indexOf(t.client_country)||0!=e.geo.country_disabled.length&&-1!=e.geo.country_disabled.indexOf(t.client_country)||next_flat_stage(e,t)):setTimeout(function(){o(e)},50)}r&&(r=!1,jQuery.ajax({type:"POST",url:ajax_url_now_me,dataType:"json",data:{action:"flat_pm_geo",data_me:{method:"flat_pm_block_geo",arr:{}}},success:function(e){switch(e[0]){case"flat_pm_block_geo":t.client_country=e[1].country,t.client_city=e[1].city;break;default:console.log("Ошибочка №2")}},error:function(){console.log("Ошибочка №1")}})),o(flat_pm_arr[a])}}}}flatDetect.init();function flat_jQuery_loading(){if(window.jQuery){flat_jQuery_is_load()}else{setTimeout(function(){flat_jQuery_loading()},50)}}setTimeout(function(){flat_jQuery_loading()},50)/*]]>*/</script> </body></html>