@alexsab-ru/scripts 0.0.4 → 0.3.1

package/README.md

@@ -1,36 +1,86 @@
-# scripts
-common libs for our websites
+# @alexsab-ru/scripts
 
-## Install and update
+common libs for websites
+
+## Installation
 ```bash
-pnpm i https://github.com/alexsab-ru/scripts
+pnpm i @alexsab-ru/scripts
+```
+
+## Analytics module
+
+`reachGoal` and `pageView` functions push to `dataLayer` some data with goal name
+```js
+reachGoal("goalName");
+pageView(goalName);
+```
+
+In GTM you can use them for send goals to your analytic system
+
+```js
+{
+	event: "reachGoal-goalName",
+	eventAction: "goalName"
+}
 ```
 
-### Send goals Analytics.js
+Use example:
 
 ```js
-import '/node_modules/scripts/js/analytics.js';
-
-window.WebsiteAnalytics.dataLayer("phone-click");
-window.WebsiteAnalytics.dataLayer("phone-copy");
-window.WebsiteAnalytics.dataLayer("phone-contextmenu");
-window.WebsiteAnalytics.dataLayer("email-click");
-window.WebsiteAnalytics.dataLayer("email-copy");
-window.WebsiteAnalytics.dataLayer("email-contextmenu");
-window.WebsiteAnalytics.dataLayer("video-click");
-window.WebsiteAnalytics.dataLayer("form-open");
-window.WebsiteAnalytics.dataLayer("form-submit");
-window.WebsiteAnalytics.dataLayer("form-required");
-window.WebsiteAnalytics.dataLayer("form-submit");
-window.WebsiteAnalytics.dataLayer("form-error");
+import { reachGoal } from '@alexsab-ru/scripts';
+
+// automatic assign from module
+reachGoal("phone_click");
+reachGoal("phone_copy");
+reachGoal("phone_contextmenu");
+reachGoal("email_click");
+reachGoal("email_copy");
+reachGoal("email_contextmenu");
 ```
 
-Insert before send
+For form's analytics you may use these goals
+
 ```js
-var formDataObj = window.WebsiteAnalytics.getFormDataObject(formData, form.id);
+reachGoal("form_open");
+reachGoal("form_click"); // automatic assign from module
+reachGoal("form_change"); // automatic assign from module
+reachGoal("form_submit");
+reachGoal("form_required");
+reachGoal("form_error");
+reachGoal("form_success");
 ```
 
-Insert when Success callback
+`getFormDataObject` is needed for Calltouch request tag.
+
 ```js
-window.WebsiteAnalytics.dataLayer("form-success", formDataObj);
-```
+import { getFormDataObject } from '@alexsab-ru/scripts';
+
+document.querySelectorAll("form").forEach((form) => {
+	form.onsubmit = async (event) => {
+
+		var formData = new FormData(form);
+		// ...
+		var formDataObj = getFormDataObject(formData, form.id);
+
+		await fetch("https://example.com/api/lead/", {
+			// ...
+		})
+			.then((res) => res.json())
+			.then((data) => {
+				if (data.answer == "required") {
+					reachGoal("form_required");
+					return;
+				} else if (data.answer == "error") {
+					reachGoal("form_error");
+					return;
+				} else {
+					reachGoal("form_success", formDataObj);
+				}
+				form.reset();
+			})
+			.catch((error) => {
+				reachGoal("form_error");
+			});
+	};
+});
+```

package/index.js

@@ -1 +1,3 @@
 export * from './lib/analytics';
+export * from './lib/cookie';
+export * from './lib/form';

package/lib/analytics.js

@@ -15,7 +15,7 @@ export function pageView(eventAction, t = {}) {
 	}
 
 export function dl(event, t = {}) {
-		console.log(event, t);
+		// console.log(event, t);
 		void 0 !== window.dataLayer && window.dataLayer.push({
 			event: event,
 			...t
@@ -82,17 +82,17 @@ export function addEmailGoals(item) {
 		addEmailGoals(tel);
 	});
 
-	var goals = [
+	let goals = [
 		{
 			selector: 'form input',
 			action: 'click',
-			goal: 'form-click',
+			goal: 'form_click',
 			title: 'Клик в поле любой формы',
 		},
 		{
 			selector: 'form input',
 			action: 'change',
-			goal: 'form-change',
+			goal: 'form_change',
 			title: 'Изменения полей любой формы',
 		},
 
@@ -101,7 +101,7 @@ export function addEmailGoals(item) {
 	goals.forEach(function(value, index, array){
 		if(value.goal != null) {
 			document.querySelectorAll(value.selector).forEach(function(element) {
-				console.log("Set \"" + value.goal + "\" goal", element);
+				// console.log("Set \"" + value.goal + "\" goal", element);
 				element.addEventListener(value.action, function(){
 					reachGoal(value.goal, {
 						title: value.title,
@@ -110,7 +110,7 @@ export function addEmailGoals(item) {
 			});
 		} else if(value.hit != null) {
 			document.querySelectorAll(value.selector).forEach(function(element) {
-				console.log("Set \"" + value.goal + "\" hit", element);
+				// console.log("Set \"" + value.goal + "\" hit", element);
 				element.addEventListener(value.action, function(){
 					pageView(value.hit, {
 						title: value.title,

package/lib/cookie.js

@@ -0,0 +1,52 @@
+export function getCookie(name)
+{
+    let matches = document.cookie.match(new RegExp(
+        "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
+        ));
+    return matches ? decodeURIComponent(matches[1]) : undefined;
+}
+
+export function setCookie(name, value, props)
+{
+    props = props || {}
+    var exp = props.expires
+    if (typeof exp == "number" && exp) {
+        var d = new Date()
+        d.setTime(d.getTime() + exp*1000)
+        exp = props.expires = d
+    }
+    if(exp && exp.toUTCString) { props.expires = exp.toUTCString() }
+    value = encodeURIComponent(value)
+    var updatedCookie = name + "=" + value
+    for(var propName in props){
+        updatedCookie += "; " + propName
+        var propValue = props[propName]
+        if(propValue !== true){ updatedCookie += "=" + propValue }
+    }
+    document.cookie = updatedCookie
+}
+
+export function deleteCookie(name)
+{
+    setCookie(name, null, { 'domain':settings.domain,'path':'/','expires': -1 })
+}
+
+export function cookiecook(days = 90)
+{
+    let cookiecook = getCookie("cookiecook"),
+        cookiewin = document.querySelector('.cookie_notice');
+
+    if (cookiecook != "no") {
+
+        cookiewin.classList.remove("hidden");
+
+        document.getElementById("cookie_close").addEventListener("click", function(e){
+            e.preventDefault();
+            cookiewin.classList.add("hidden");
+
+            let date = new Date;
+            date.setDate(date.getDate() + days);
+            document.cookie = "cookiecook=no; path=/; expires=" + date.toUTCString();
+        });
+    }
+}

package/lib/form.js

@@ -0,0 +1,218 @@
+import { getCookie } from './cookie';
+import { reachGoal, getFormDataObject } from './analytics';
+
+
+export const noValidPhone = (phoneValue) => {
+	return ([...new Set(phoneValue.replace(/^(\+7)/g, "").replace(/\D/g, ""))].length === 1);
+};
+
+export function maskphone(e) {
+	let num = this.value.replace(/^(\+7|8|7)/g, "").replace(/\D/g, "").split(/(?=.)/),
+		i = num.length;
+
+	if(this.value != "" && this.value != "+") {
+		if (0 <= i) num.unshift("+7");
+		if (1 <= i) num.splice(1, 0, " ");
+		if (4 <= i) num.splice(5, 0, " ");
+		if (7 <= i) num.splice(9, 0, "-");
+		if (9 <= i) num.splice(12, 0, "-");
+		this.value = num.join("");
+	}
+}
+
+
+export const phoneChecker = (phone) => {
+	let form = phone.closest("form"),
+		btn = form.querySelector('input[type="submit"]');
+	if (!phone.value.length) {
+		showErrorMes(form, ".phone", "Телефон является обязательным полем");
+		stateBtn(btn, "Отправить");
+		return false;
+	} else {
+		const phoneRe = new RegExp(/^\+7 [0-9]{3} [0-9]{3}-[0-9]{2}-[0-9]{2}$/);
+		if (!phoneRe.test(phone.value) || noValidPhone(phone.value)) {
+			showErrorMes(form, ".phone", "Введен некорректный номер телефона");
+			stateBtn(btn, "Отправить");
+			return false;
+		}
+	}
+	showErrorMes(form, ".phone", "");
+	return true;
+};
+
+document.querySelectorAll("input[name=phone]").forEach(function (element) {
+	// element.addEventListener("focus", maskphone);
+	element.addEventListener("input", maskphone);
+	element.addEventListener("change", () => phoneChecker(element));
+});
+
+// AGREE CHECKBOX
+// Проверка на состояние чекбокса, показ/скрытие ошибки
+document.querySelectorAll("input[name=agree]").forEach(function (element) {
+	let errorMes = element.parentElement.querySelector(".agree");
+	element.addEventListener("change", (e) => {
+		if (!e.target.checked) {
+			errorMes.classList.remove("hidden");
+		} else {
+			errorMes.classList.add("hidden");
+		}
+	});
+});
+
+// TEXTAREA
+const minLengthTextareaField = 10; // минимальное кол-во символов
+// проверка на минимальное кол-во символов и скрытие ошибки
+const checkTextareaLength = (textarea, minLength) => {
+	if (textarea.value.length >= minLength) {
+		textarea.nextSibling.nextElementSibling.classList.add("hidden");
+	}
+};
+
+// CHANGE textarea для всез браузеров
+document.querySelectorAll("textarea").forEach(function (textarea) {
+	if (textarea.addEventListener) {
+		textarea.addEventListener(
+			"input",
+			function () {
+				// event handling code for sane browsers
+				checkTextareaLength(textarea, minLengthTextareaField);
+			},
+			false
+		);
+	} else if (textarea.attachEvent) {
+		textarea.attachEvent("onpropertychange", function () {
+			// IE-specific event handling code
+			checkTextareaLength(textarea, minLengthTextareaField);
+		});
+	}
+});
+
+// BUTTON
+// Состояние кнопки
+const stateBtn = (btn, value, disable = false) => {
+	btn.value = value;
+	btn.disabled = disable;
+};
+
+const showErrorMes = (form, el, text) => {
+	let field = form.querySelector(el);
+	field.innerText = text;
+	field.classList.remove("hidden");
+};
+
+const showMessageModal = (messageModal, icon, message) => {
+	document.querySelectorAll(".modal-overlay").forEach((el) => {
+		el.classList.add("hidden");
+	});
+	messageModal.querySelector("#icon").innerHTML = icon;
+	messageModal.querySelector("p").innerHTML = message;
+	messageModal.classList.remove("hidden");
+};
+
+
+export const connectForms = (url, callback) => {
+
+// Отправка всех форм
+document.querySelectorAll("form").forEach((form) => {
+	const btn = form.querySelector('input[type="submit"]');
+	form.onsubmit = async (event) => {
+		event.preventDefault();
+		stateBtn(btn, "Отправляем...", true);
+
+		const agree = form.querySelector('[name="agree"]');
+		const phone = form.querySelector('[name="phone"]');
+		const errorIcon =
+			'<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><path fill="#ed1c24" d="M26,0A26,26,0,1,0,52,26,26,26,0,0,0,26,0Zm9.6,17.5a1.94,1.94,0,0,1,2,2,2,2,0,1,1-2-2Zm-19.2,0a1.94,1.94,0,0,1,2,2,2,2,0,1,1-2-2ZM39.65,40.69a.93.93,0,0,1-.45.11,1,1,0,0,1-.89-.55,13.81,13.81,0,0,0-24.62,0,1,1,0,1,1-1.78-.9,15.8,15.8,0,0,1,28.18,0A1,1,0,0,1,39.65,40.69Z"></path></svg>';
+		const successIcon =
+			'<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><path fill="#279548" d="M26,0A26,26,0,1,0,52,26,26,26,0,0,0,26,0Zm9.6,17.5a1.94,1.94,0,0,1,2,2,2,2,0,1,1-2-2Zm-19.2,0a2,2,0,1,1-2,2A2,2,0,0,1,16.4,17.5ZM40.09,32.15a15.8,15.8,0,0,1-28.18,0,1,1,0,0,1,1.78-.9,13.81,13.81,0,0,0,24.62,0,1,1,0,1,1,1.78.9Z"></path></svg>';
+		const errorText =
+			'<b class="text-bold block text-2xl mb-4">Упс!</b> Что-то пошло не так. Перезагрузите страницу и попробуйте снова. ';
+		let successText = '<b class="text-bold block text-2xl mb-4">Спасибо!</b> В скором времени мы свяжемся с Вами!';
+		const messageModal = document.getElementById("message-modal");
+
+		if (!phoneChecker(phone)) {
+			return;
+		}
+
+		// если флажок не установлен - фронт
+		if (!agree.checked) {
+			showErrorMes(form, ".agree", "Чтобы продолжить, установите флажок");
+			stateBtn(btn, "Отправить");
+			return;
+		}
+		reachGoal("form_submit");
+		let formData = new FormData(form);
+		if(getCookie('fta')) {
+			formData.append("fta", true);
+		}
+		if(getCookie('__gtm_campaign_url')) {
+			var source = new URL(getCookie('__gtm_campaign_url'));
+			source.search.slice(1).split("&").forEach(function(pair) {
+				var param = pair.split("=");
+				formData.append(param[0], param[1]);
+			});
+		}
+		formData.append(
+			"page_url",
+			window.location.origin + window.location.pathname
+		);
+
+		window.location.search
+			.slice(1)
+			.split("&")
+			.forEach(function (pair) {
+				var param = pair.split("=");
+				if(formData.get(param[0])){
+					formData.set(param[0], decodeURIComponent(param[1]));
+				} else {
+					formData.append(param[0], decodeURIComponent(param[1]));
+				}
+			});
+
+		const params = new URLSearchParams([...formData]);
+		var formDataObj = getFormDataObject(formData, form.id);
+
+		await fetch(url, {
+			method: "POST",
+			mode: "cors",
+			cache: "no-cache",
+			credentials: "same-origin",
+			headers: {
+				"Content-Type": "application/x-www-form-urlencoded",
+			},
+			body: params,
+		})
+			.then((res) => res.json())
+			.then((data) => {
+				console.log(data);
+				stateBtn(btn, "Отправить");
+				if (data.answer == "required") {
+					reachGoal("form_required");
+					showErrorMes(form, data.field, data.message);
+					return;
+				} else if (data.answer == "error") {
+					reachGoal("form_error");
+					showMessageModal(messageModal, errorIcon, errorText + "<br>" + data.error);
+					return;
+				} else {
+					reachGoal("form_success", formDataObj);
+					showMessageModal(messageModal, successIcon, successText);
+
+					// Вызов callback в конце функции
+					if (callback && typeof callback === 'function') {
+						callback();
+					}
+				}
+				form.reset();
+			})
+			.catch((error) => {
+				reachGoal("form_error");
+				console.error("Ошибка отправки данных формы: " + error);
+				showMessageModal(messageModal, errorIcon, errorText + "<br>" + error);
+				stateBtn(btn, "Отправить");
+			});
+		return false;
+	};
+});
+
+}

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@alexsab-ru/scripts",
-  "version": "0.0.4",
+  "version": "0.3.1",
   "description": "common libs for websites",
   "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/alexsab-ru/scripts.git"
@@ -25,5 +22,8 @@
   "publishConfig": {
     "access": "public"
   },
-  "homepage": "https://github.com/alexsab-ru/scripts#readme"
-}
+  "homepage": "https://github.com/alexsab-ru/scripts#readme",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}