AdminHelper – assistant application for site administrator  Visit site

					          extends layout/damasclinic

block title
	title Admin Helper App | Damasclinic

block content
	.smarttabs
		span.priority ❶
		input#getWordText._small._infolight(type='button' value='Получить Word текст' onclick="showsnackbar('docx')")
		span._inline-block(style='margin-left:20px;')
			span.priority ❷
			a.b-nav-tab.active(href='#' data-tab='tabeditor' title='Редактирование текста')
				| Редактор
		span._inline-block
			span.priority ❸
			a.b-nav-tab(href='#' data-tab='tabelem' title='Кнопки, Читайте ещё, YouTube галерея')
				| Page Elements
		span._inline-block
			span.priority ❹
			a#tabcodeLink.b-nav-tab(href='#' data-tab='tabcode' title='Код статьи для Админки')
				| Готовый HTML код
		a.b-nav-tab(href='#' data-tab='tabword' title='Текст из Word файла')
			| Docx text

		.smarttabs__content

			#tabeditor.b-tab.active
				.row
					.col.m7
						textarea(name="editor1")
					.col.m5
						h5 Отзывы
						textarea#reviewText._width100(placeholder="Вставь скопированный текст Отзывов")
						input#getReviewCode.button._success(type='button' value='Получить код')
						p Слайдер отзывов (готовый код):
						textarea#readyReviewCode._width100(placeholder="Будет после нажатия Получить код...")

			#tabelem.b-tab
				.row
					.col.m6
						.card
							h5._width75 Кнопки-ссылки, кнопка Прайс, Read more, YT gallery
							p._low
								span._f-warning btns
								| - Кнопки-ссылки /  
								span._f-warning price
								| - кнопка Прайс /  
								span._f-warning read
								|- Read more /  
								span._f-warning yt
								|- YT gallery
							input#getPageElements.button._success(type='button' value='Сформировать код')
							.tooltip.-tooltip-right.pattern Пример кода
								span.tooltiptext._nightblue
									| btns
									|	<br/>Vaser липосакция тела https://damasclinic.ru/service/liposakciya
									|	<br/>Липосакция живота https://damasclinic.ru/service/liposakciya-zhivota
									|	<br/>Липосакция лица https://damasclinic.ru/service/liposakciya-lica
									|	<br/>Липофмилинг ягодиц https://damasclinic.ru/service/lipofiling-yagodic
									br
									|	<br/>price
									|	<br/>https://damasclinic.ru/price/plasticheskaya-hirurgiya#lipostela
									br
									|	<br/>yt
									|	<br/>https://youtube.com/shorts/Ni-QDsmrfig
									|<br/>>https://youtube.com/shorts/tL6VhgpHTjI
									|	<br/>https://youtube.com/shorts/Y_66MKtEFMA
									|	<br/>В А Ж Н О: для YouTube - в конце, чтобы был ID ролика
							textarea#pageElements._width100(placeholder="Вставить элементы для страницы")
							p Готовый код - Page Elements:
							textarea#readyPageElements._width100(placeholder="Будет после нажатия Сформировать код...")

					.col.m6
						.card
							h5 Images for article
							div Фотогалерея рез-тов -
								span._low список Alt
								span._floatRight
									input#stubImageGallery(type='checkbox')
									|  Интимная пластика
									.tooltip.-tooltip-left.pattern ?
										span.tooltiptext._nightblue
											| Сформируется код галереи с картинками-заглушками для проверки 18 лет
							textarea#namelist._width100(placeholder="Каждое название с новой строки и Фразу в последней строке, после которой будет фотогалерея")
							input#namepic._width50(type='text' placeholder='Имя файла картинки')
							input#getImageGallery.button._success(type='button' value='Сформировать код')
							span.disabled
								input#insertElements._info._disabled(type='button' value='Вставить всё в статью' onclick="showsnackbar('articlecode')")
							//- input#insertReviews._infolight(type='button' value='Вставить Отзывы в конец')
							//- p._low Если были Отзывы, то сначала Сформировать их код (вкладка Редактор), а затем нажать "Вставить Отзывы в конец"
							p Готовый код фото-галерей:
							textarea#imagesCode._width100(placeholder="Будет код после нажатия на Сформировать код...")

			#tabcode.b-tab
				h5 Готовый HTML код
				p._clear Добавить Meta-description
					span._low (в конец статьи)  
					input.add-meta.button(type='button' value='Услуга' data-datatype='service')
					input.add-meta.button(type='button' value='Статья' data-datatype='article')
					span.disabled
						button#copyArticleCode._info._disabled Скопировать код
				textarea#articleCode._width100._height400(placeholder="Готовый код для статьи - вставить в Админку")

			#tabword.b-tab
				h5 Docx to Html
				p
					small PHP class: https://github.com/xylude/Docx-to-HTML
				textarea#wordText._width100._height400
	#docx.snackbar DOCX текст получен!
	#articlecode.snackbar._info Код статьи сформирован!
	#noteNoContent.snackbar._warning Нет содержимого!
	#noteNoFileName.snackbar._warning Введи Имя файла картинки!
	#loginPlease.snackbar._warning Войдите в Admin Helper!
	#articlecopy.snackbar._info Код скопирован!
					        

										'use strict';

(function() {

  const connectTabs = new Tabs(),
        editors = document.getElementsByName('editor1'),
        urlAddress = window.location.pathname,
        // Login
        loginBtn = document.getElementById('login');

  toggleSidebarMenu();
  highlightActiveMenuItem('.topnav');
  highlightActiveMenuItem('.listnav');
  if (editors[0] !== undefined) ckeditorInit();

  function highlightActiveMenuItem(menu) {
    const menuLinks = document.querySelectorAll(menu + ' li > a');

    menuLinks.forEach(function (link) {
      const linkHref = link.getAttribute('href');
      link.classList.remove('active');

      if ( linkHref.slice(1) === urlAddress.slice(12) && linkHref !== '#' ||
          urlAddress.indexOf('damas') !== -1 && link.classList.contains('damas') ||
          urlAddress.indexOf('dramjad') !== -1 && link.classList.contains('dramjad') ||
          urlAddress.indexOf('make-website') !== -1 && link.classList.contains('makewebsite') ||
          urlAddress.indexOf('damas') === -1 && urlAddress.indexOf('dramjad') === -1 && urlAddress.indexOf('make-website') === -1 && link.classList.contains('damas')
        ) link.classList.add('active');
    });
  }

  function toggleSidebarMenu() {
    const bodyEl = document.querySelector('body'),
          hamburger = document.querySelector('.hamburger');
    hamburger.addEventListener('click', function () {
      bodyEl.classList.toggle('hidden-sidebar');
    });
  }

  function ckeditorInit() {
    const editor1 = CKEDITOR.replace( 'editor1', {
      height: 500,
      extraAllowedContent: 'span(*);p(*);a(*);div(*);table(*);*[align];*[style];*[class];*[data-fancybox]'
    } );

    editor1.on( 'instanceReady', function( evt ) {
      evt.editor.addCommand( 'h2' , new CKEDITOR.styleCommand( new CKEDITOR.style({ element: 'h2' } )) );
      evt.editor.setKeystroke( CKEDITOR.SHIFT + 50 /*2*/, 'h2');
    });
  }

  function Tabs() {
    let bindAll = function() {
      let menuElements = document.querySelectorAll('[data-tab]');
      for(let i = 0; i < menuElements.length ; i++) {
        menuElements[i].addEventListener('click', change, false);
      }
    }

    let clear = function() {
      let menuElements = document.querySelectorAll('[data-tab]');
      for(let i = 0; i < menuElements.length ; i++) {
        menuElements[i].classList.remove('active');
        let id = menuElements[i].getAttribute('data-tab');
        document.getElementById(id).classList.remove('active');
      }
    }

    let change = function(e) {
      clear();
      e.target.classList.add('active');
      let id = e.currentTarget.getAttribute('data-tab');
      document.getElementById(id).classList.add('active');
    }

    bindAll();
  }

}());