<form class="form-element"
method="POST"
autocomplete="off">
<input class="form-input__phone"
type="tel"
name="phone"
tabindex="0"
placeholder="+7 (999) 999-99-99">
<input class="form-input__theme"
type="hidden"
name="theme">
<button class="form-input__button"
type="submit">Отправить в WhatsApp</button>
</form>$('.form-element').on('submit', (e) => {
e.preventDefault();
let faults = 0;
$('.form-input__phone', e.target).each((index, input) => {
let isEmpty = !input.value;
faults += isEmpty;
$(input).toggleClass('isEmpty', isEmpty);
});
return faults ? false : window.location.replace("/page");
});import { Directive, Output, ElementRef, EventEmitter, ContentChildren } from '@angular/core';
import { NavigationEnd, Router, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
import { Subscription } from 'rxjs';
@Directive({
selector: '[routerLink]'
})
export class ActiveRouteDirective {
@ContentChildren(RouterLinkWithHref, { descendants: true }) linksWithHrefs;
@Output('isActiveRouteEmitter') isActiveEmitter: EventEmitter<any> = new EventEmitter<any>();
private subscription: Subscription;
constructor(
private router: Router,
private element: ElementRef
) {
this.router = router;
this.element = element;
this.subscription = router.events.subscribe(s => {
if (s instanceof NavigationEnd) {
this.update();
}
});
}
ngAfterContentInit() {
this.linksWithHrefs.changes.subscribe(() => this.update());
this.update();
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
update() {
if (!this.linksWithHrefs || !this.router.navigated) return;
const isActive = this.linksWithHrefs.some(link => this.router.isActive(link.urlTree, true));
if (isActive) {
this.isActiveEmitter.emit(this.element.nativeElement);
}
}
}<div class="menu__item" #rla="routerLinkActive" routerLinkActive="menu__item--active" [routerLinkActiveOptions]="{ exact: true }" *ngFor="let item of menu">
<a (isActiveRouteEmitter)="getParams($event)" routerLink="/{{ item.link }}" [ngClass]="{'menu__link': true, 'menu__link--active': rla.isActive}">
{{ item.name }}
</a>
</div>getParams($target){
console.log($target.getBoundingClientRect());
}{
test: /\.pug$/,
use: [{
loader: 'html-loader'
}, {
loader: 'pug-html-loader',
options: {
exports: false
}
}]
}var arr = [];
var fib = 1;
var sum = 0;
var start = 0;
var x = 10000;
var t = 1000;
fibonaci();
function fibonaci() {
sum = start + fib;
start = fib;
fib = sum;
arr.push(fib);
if (sum <= x) {
circle();
setTimeout(fibonaci, t);
}
}
// центр кружков + разный размер
function circle() {
var count = 50 + parseRandomNumber(50);
document.write(`<div style="width:${count}px;height:${count}px;line-height:${count}px;border-radius:50%;background-color:${color()};text-align:center;">${fib}</div>`);
}
function color() {
var rgba = parseRandomNumber(255);
return `rgb(${rgba}, ${rgba}, ${rgba})`;
}
function parseRandomNumber(x) {
var r = Math.random() * x;
return parseInt(r, 10);
}import { Injectable } from '@angular/core';
import { CanActivate , ActivatedRouteSnapshot } from '@angular/router';
import { map, every } from 'lodash';
/**
* Список параметров
* Сам список можете вынести в отдельном файле(я же для теста указал тут)
* @type {Object}
*/
const gp = {
action: 'add|edit',
id: '[0-9]'
};
@Injectable()
export class RouterGuard implements CanActivate {
canActivate(route: ActivatedRouteSnapshot) {
let access: Array<boolean> = [];
map(route.params, (v: any, k: any) => access.push(new RegExp(gp[k], 'g').test(v)));
return every(access, Boolean);
}
};import RouterParamsGuard from './router-params.guard';
@NgModule({
imports: [
BrowserModule,
HttpModule,
AppRoutingModule
],
declarations: [
AppComponent,
HomeComponent,
NotFoundComponent
],
providers: [{
provide: APP_BASE_HREF,
useValue: '/'
}, {
provide: LocationStrategy,
useClass: PathLocationStrategy
},
{
provide: 'RouterParamsGuard',
useClass: RouterParamsGuard
},
AppStore
],
bootstrap: [
AppComponent
]
})canActivate: ['RouterParamsGuard']export const routes: Routes = [{
path: 'post/:id',
loadChildren: './post?chunkName=post',
canActivate: ['RouterParamsGuard']
}];<article class="post">
<header class="post__header">
<h2 class="post__title">Title 1</h2>
</header>
<p class="post__desc">Lorem ipsum dolor sit amet, qui vivendo fierent et...</p>
<footer class="post__footer">
<button type="button" class="post__btn">Смотреть</button>
</footer>
</article>
<article class="post">
<header class="post__header">
<h2 class="post__title">Title 2</h2>
</header>
<p class="post__desc">Lorem ipsum dolor sit amet, qui vivendo fierent et...</p>
<footer class="post__footer">
<button type="button" class="post__btn">Смотреть</button>
</footer>
</article>$(function(){
$('.post').on('click', '.post__btn', function(e){
$('.post__desc', e.delegateTarget).show();
});
});Hot Module Replacement.
var txt = '101 20 (3 42 56) 71 1 6570 ( 40 146 16)';
var ar = txt.match(/\(([^()]+)\)/g);
ar.forEach(function(item) {
var a = item.replace(/\(|\)/g, "").split(" ");
a.forEach(function(item) {
if (item.length === 2) {
console.log(item);
}
});
});$(function() {
var $btn = $('#btn'),
$form = $('#ajax_form'),
$resultForm = $('#result_form');
$btn.on('click', function() {
console.log('click');
var formData = $form.serialize();
sendAjaxForm(formData);
});
});
function getLink(id) {
return 'http://www.tutorialspoint.com/index.php?id=' + id;
}
function _success(res) {
var data = $.parseJSON(res);
console.log(data);
return window.location = getLink(data.name);
}
function _error(res) {
return $resultForm.html('Error.');
}
function sendAjaxForm(data) {
$.ajax({
url: '/ajax.php',
type: 'POST',
dataType: 'json',
data: data,
success: _success,
error: _error
});
return false;
}// var keypressSlider = document.getElementById('keypress');
var keypressSlider = document.getElementsByClassName(keypress);
var input0 = document.getElementById('input-with-keypress-0');
var input1 = document.getElementById('input-with-keypress-1');
var inputs = [input0, input1];
var defCfg = {
start: [20, 80],
connect: true,
direction: 'rtl',
tooltips: [true, wNumb({ decimals: 1 })],
range: {
'min': [0],
'10%': [10, 10],
'50%': [80, 50],
'80%': 150,
'max': 200
}
};
function __extends(a, b) {
var c = {};
for (var v in a) {
c[v] = a[v];
}
for (var v in b) {
c[v] = b[v];
}
return c;
}
for (var i = 0; i < keypressSlider.length; i++) {
var data = JSON.parse(keypressSlider[i].dataset.cfg),
params = __extends(defCfg, data);
noUiSlider.create(keypressSlider[i], params);
}
keypressSlider.noUiSlider.on('update', function(values, handle) {
inputs[handle].value = values[handle];
});data-cfg='{"key":"values"}'
public ajax = (params) => new Request(params);
this.ajax({
url: this.url + this.currentPage,
type: `GET`,
dataType: this.requestDataType,
onRequest: (data) =>{
//а здесь this превратился в объект $.ajax()
this.doRequest = false;
this.currentPage++;
this.onRecordsLoaded(data);
}
})var $el = $("#sect_3 .item_1"),
a = $(this).scrollTop(),
b = $el.offset().top,
c = 150,
d = b - c;
if ( a >= d ) {
$el.addClass('marg_top_img');
}var $btn = $('.btn'),
localStorageButtons = JSON.parse(localStorage.getItem('buttons')) || {};
if (localStorageButtons) {
$btn.each(function(i) {
$btn.text(localStorageButtons[i]);
});
}
$btn.on('click', function() {
var v = parseInt($(this).text(), 10),
i = $(this).index();
v++;
localStorageButtons[i] = v;
$(this).text(v);
localStorage.setItem('buttons', JSON.stringify(localStorageButtons));
});$(window).on('load', function(){
var top = $(window.location.hash).offset().top;
$('html,body').stop().animate({
scrollTop: top
}, 1000);
});<div class="inputs-wrap">
<input type="radio" class="inputs-wrap__radio inputs-wrap__radio--1">
<input type="radio" class="inputs-wrap__radio inputs-wrap__radio--2">
</div>
<div class="textareas-wrap">
<textarea placeholder="Окно ввода для первой radio кнопки" class="textareas-wrap__field textareas-wrap__field--1"></textarea>
<textarea placeholder="Окно ввода для второй radio кнопки" class="textareas-wrap__field textareas-wrap__field--2"></textarea>
</div>.textareas-wrap__field--1 {
display: none;
}$('.inputs-wrap__radio').on('change', function() {
var i = $(this).index();
$('.textareas-wrap__field').eq(i).toggle();
});