Рубрика: Стек Технологий

Web development «ToolTip»

header
- <script src=https://code.jquery.com/jquery-1.12.4.js></script>
- <script src=https://code.jquery.com/ui/1.12.1/jquery-ui.js></script>

CSS
.tooltip span
- { display:none; position: absolute; z-index: 1001; margin-top:0px; }
.tooltip a
- { display:block; width: 100px; text-decoration: none; }
.tooltip:not(:hover)>span
- { display:none; }
.tooltip:hover:after
- { width:10%; height:15px; position: absolute; z-index: 1001; margin-top:-17px; margin-left:1px; }

сворачивание блоков
- $(.mytoggle).each(function () {
  - h=$(this);
  - let html=h.html();
  - h.empty();
  - h.css(margin-bottom,0);
  - let btn=$(<img>).prependTo(h);
  - $(<div>).appendTo(h).html(html);
  - btn.css(display,inline-block);
  - btn.css(vertical-align,top);
  - btn.css(height,24px);
  - btn.css(width,24px);
  - btn.next().css(display,inline-block);
  - btn.attr(src,СсылкаНаКартинку);
  - btn.click(function(){…});
    - $(this).parent().next().slideToggle();
  - let div=h.next();
  - div.css(padding,5px);
  - div.css(border,1px solid);
  - div.css(display,none);
- }
Размещение кода на WordPress
- Insert Headers and Footers
  - плагин размещения js кода
  - Script in Footer
    - раздел для расположения кода
Пример использования в редакторе с блоками html
- <div class=mytoggle>head</div>
- <div>content</div>

установка TypeScript в командной строке IDE
- ```
npm install -g typescript
```

конфигурация в проекте для упрощения компиляции TypeScript в JavaScript
- project\tsconfig.json
  - ```
  {
     "compilerOptions": {
         "target": "es5",
         "removeComments": true,
         "outFile": "app.js"
     }
  } 
```
- outFile
  - все файлы ts компилируются и сохраняются в корневую папку проекта с указанным именем из примера app.js

Компилирование ts через cmd
- компилирование только одного файла
  - tsc tsc\file.ts
- Права на выполнение команд в терминале
  - Set-ExecutionPolicy RemoteSigned
- компилирование всех файлов tsc в проекте
  - tsc

PHP

Настройка стиля WordPress
- Внешний вид
  - Темы
    - Twenty Twenty = Активировать
привязка php файла к файлу php в WordPress по теме
- Внешний вид\Редактор тем

Раздел Функций
- ^{_{localhost\wp-content\themes\twentytwenty\functions.php}}
  - ^{_{include_once $_SERVER[‘DOCUMENT_ROOT’].’/IDE/wp/wp_functions.php’;}}
- ^_localhost\^_IDE^{_{\wp\wp_functions.php}}
  - ^{_{include_once__DIR__.»/ajax_wp/main.php»;}}

^{_{localhost\wp-content\themes\twentytwenty\footer.php}}
- ^{_{include_once__DIR__.»/ajax_wp/main.php»;}}

include_once $_SERVER['DOCUMENT_ROOT'].'/IDE/src/WordPress/ToolTip/main.php';

настройка IDE
- F:\project\VSCode\Web\OSPanel\domains\localhost\IDE
  - локальный путь редактирование проекта
- добавить в список проектов IDE
  - плагин Projects Manager
создание GIT
- .gitignore
- структура проекта
  - src
  - dist
- создание репозитория в GitHub
- создание туннеля SSH на хостинг с WordPress (плагин SFTP)
  - .vscode\sftp.json
  - настройка на хостинге (на примере Джино)
    - добавить доступ для своего IP
  - uploadFolder
    - отправить файлы с локального проекта