redactor feat: add textfields and linked list logic

frontend-park-mail-ru · Oct 20, 2024 · 71c48fb · 71c48fb
1 parent 1a1c5fa
commit 71c48fb
Show file tree

Hide file tree

Showing 23 changed files with 258 additions and 157 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -5,7 +5,6 @@
     <meta charset="utf-8">
     <title>DEAD-VC.RU</title>
   <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="bundle.js"></script><script defer src="bundle.js"></script></head>
-  <link rel="stylesheet" href="bundle.css">
   <body>
     <div class="place-for-header"></div>
 

diff --git a/src/components/Cards/cards.css b/src/components/Cards/cards.css
@@ -1,4 +1,4 @@
-@import '/public/variables.css';
+@import '/src/variables.css';
 
 .card {
   background-color: var(--main-color);

diff --git a/src/components/Cards/cards.js b/src/components/Cards/cards.js
@@ -1,4 +1,6 @@
 import ArticleApi from '../../api/api_articles.js';
+import Handlebars from 'handlebars';
+import CardsTemplate from '../Cards/cards.hbs';
 
 export default class Cards {
   constructor(parent) {
@@ -7,8 +9,8 @@ export default class Cards {
 
   async render() {
     this.parent.innerHTML = '';
-    const template = Handlebars.templates['cards.hbs'];
+    // const template = Handlebars.templates['cards.hbs'];
     this.items = await ArticleApi.getArticles();
-    this.parent.innerHTML = template({ items: this.items });
+    this.parent.innerHTML = CardsTemplate({ items: this.items });
   }
 }
diff --git a/src/components/Fields/CheckField/checkfield.hbs b/src/components/Fields/CheckField/checkfield.hbs
@@ -0,0 +1,11 @@
+
+<div class="field" data-id="{{element.id}}">
+    <div class="dropdown">
+        <button>+</button>
+        <div class="dropdown-content">
+            <a class="choose-text-href" data-new-field-type="text" data-id="{{element.id}}">Текст</a>
+            <a class="choose-img-href" data-new-field-type="image" data-id="{{element.id}}">Картинка</a>
+        </div>
+    </div>
+    <div class="div-input {{element.textStyle}}" data-id="{{element.id}}"  contenteditable="true" data-gramm="false"  data-placeholder="Выберите элемент..."></div>
+</div>
diff --git a/src/components/Fields/CheckField/checkfield.ts b/src/components/Fields/CheckField/checkfield.ts
@@ -0,0 +1,41 @@
+import { textStyles } from '../fieldconstants.js';
+import Handlebars from 'handlebars';
+import CheckFieldTemplate from './checkfield.hbs';
+import { FieldType } from '../fieldconstants';
+import styles from 'fields.css';
+
+export default class CheckField {
+
+    parent:Element;
+    id: number;
+    textStyle: string;
+    prevID: number;
+    nextID: number;
+    node?: Element;
+
+  constructor(parent: Element, id: number, textStyle: string, prevID: number, nextID: number) {
+    this.parent = parent;
+    this.id = id;
+    this.textStyle = textStyle;
+    this.prevID = prevID;
+    this.nextID = nextID;
+  }
+
+  render() {
+    const template = CheckFieldTemplate;
+    const prevElement = this.parent.querySelector(`.field[data-id="${this.prevID}"]`);
+
+    if (prevElement) {
+      prevElement.insertAdjacentHTML('afterend', template({ element: this }));
+    } else {
+      this.parent.insertAdjacentHTML('afterbegin', template({ element: this }));
+    }
+
+    this.node = this.parent.querySelector(`.field[data-id="${this.id}"]`);
+    console.log("check field node", this.node);
+  }
+
+  delete() {
+    this.node.remove();
+  }
+}
diff --git a/src/components/Fields/ImageField/imagefield.hbs b/src/components/Fields/ImageField/imagefield.hbs
@@ -0,0 +1,17 @@
+<div class="field" data-id="{{element.id}}">
+    <div class="dropdown">
+        <button>+</button>
+        <div class="dropdown-content">
+            <a class="up-href" data-id="{{element.id}}">Вверх</a>
+            <a class="down-href" data-id="{{element.id}}">Вниз</a>
+            <a class="delete-href" data-id="{{element.id}}">Удалить</a>
+        </div>
+    </div>
+    <div class="div-input {{element.textStyle}}" data-id="{{element.id}}" 
+    contenteditable="true" data-gramm="false">
+         <form id="upload-form" enctype="multipart/form-data" method="post">
+            <input type="file" name="image" accept="image/*" required>
+            <button type="submit">Загрузить</button>
+        </form>
+    </div>
+</div>
diff --git a/src/components/Fields/ImageField/imagefield.ts b/src/components/Fields/ImageField/imagefield.ts
@@ -0,0 +1,41 @@
+import { textStyles } from '../fieldconstants.js';
+import Handlebars from 'handlebars';
+import ImageFieldTemplate from './imagefield.hbs';
+import { FieldType } from '../fieldconstants';
+import styles from 'fields.css';
+
+export default class ImageField {
+
+    parent:Element;
+    id: number;
+    textStyle: string;
+    prevID: number;
+    nextID: number;
+    node?: Element;
+
+  constructor(parent: Element, id: number, textStyle: string, prevID: number, nextID: number) {
+    this.parent = parent;
+    this.id = id;
+    this.textStyle = textStyle;
+    this.prevID = prevID;
+    this.nextID = nextID;
+  }
+
+  render() {
+    const template = ImageFieldTemplate;
+    const prevElement = this.parent.querySelector(`.field[data-id="${this.prevID}"]`);
+
+    if (prevElement) {
+      prevElement.insertAdjacentHTML('afterend', template({ element: this }));
+    } else {
+      this.parent.insertAdjacentHTML('afterbegin', template({ element: this }));
+    }
+
+    this.node = this.parent.querySelector(`.field[data-id="${this.id}"]`);
+    console.log("check field node", this.node);
+  }
+
+  delete() {
+    this.node.remove();
+  }
+}
diff --git a/src/components/Fields/ListField/listfield.js b/src/components/Fields/ListField/listfield.js
@@ -1,4 +1,6 @@
-import { textStyles } from '../fieldconstants.js';
+import { textStyles } from '../fieldconstants.ts';
+import Handlebars from 'handlebars';
+import ListFieldTemplate from './listfield.hbs';
 
 export default class ListField {
   constructor(parent, id, prevID, nextID) {
@@ -11,7 +13,7 @@ export default class ListField {
   }
 
   render() {
-    const template = Handlebars.templates['listfield.hbs'];
+    const template = ListFieldTemplate;
     const prevElement = this.parent.querySelector(`.field[data-id="${this.prevID}"]`);
 
     if (prevElement) {

diff --git a/src/components/Fields/TextField/textfield.hbs b/src/components/Fields/TextField/textfield.hbs
@@ -10,7 +10,6 @@
             <a class="make-text-href">Сделать текстом</a>
         </div>
     </div>
-    <div class="div-input {{element.textStyle}}" data-id="{{element.id}}" contenteditable="true" data-gramm="false">
-        Поле{{element.id}}
-    </div>
+    <div class="div-input {{element.textStyle}}" data-id="{{element.id}}" 
+    contenteditable="true" data-gramm="false" data-placeholder="Введите текст..."></div>
 </div>
diff --git a/src/components/Fields/TextField/textfield.js b/src/components/Fields/TextField/textfield.js
@@ -1,4 +1,6 @@
-import { textStyles } from '../fieldconstants.js';
+import { textStyles } from '../fieldconstants.ts';
+import Handlebars from 'handlebars';
+import TextFieldTemplate from './textfield.hbs';
 
 export default class TextField {
   constructor(parent, id, textStyle, prevID, nextID) {
@@ -11,7 +13,7 @@ export default class TextField {
   }
 
   render() {
-    const template = Handlebars.templates['textfield.hbs'];
+    const template = TextFieldTemplate;
     const prevElement = this.parent.querySelector(`.field[data-id="${this.prevID}"]`);
 
     if (prevElement) {

diff --git a/src/components/Fields/fieldconstants.js → src/components/Fields/fieldconstants.ts b/src/components/Fields/fieldconstants.js → src/components/Fields/fieldconstants.ts
@@ -1,8 +1,4 @@
-export const elements = {
-  IMAGE: 'img',
-  LIST: 'list',
-  TEXT: 'text',
-};
+export enum FieldType {TEXT, IMAGE}
 
 export const textStyles = {
   REGULAR: 'regular-text',

diff --git a/src/components/Fields/fields.css b/src/components/Fields/fields.css
@@ -1,4 +1,4 @@
-@import '/public/variables.css';
+@import '/src/variables.css';
 
 .fields {
   background-color: var(--main-color);
@@ -19,6 +19,11 @@
   padding-left: 0;
 }
 
+.div-input[data-placeholder]:empty::before {
+  content: attr(data-placeholder);
+  color: var(--secondary-text-color);
+}
+
 .div-input li {
   margin-left: 15px;
 }

diff --git a/src/components/Fields/fields.hbs b/src/components/Fields/fields.hbs
@@ -1,4 +1,3 @@
 
 <div class="fields">
-
 </div>
diff --git a/src/components/Fields/fields.js b/src/components/Fields/fields.js
@@ -1,30 +1,35 @@
 import TextField from './TextField/textfield.js';
 import ListField from './ListField/listfield.js';
-import { elements, textStyles } from './fieldconstants.js';
+import Handlebars from 'handlebars';
+import FieldsTemplate from './fields.hbs';
+import CheckField from './CheckField/checkfield.ts';
+import ImageField from './ImageField/imagefield.ts';
+import { FieldType, textStyles } from './fieldconstants.ts';
+import './fields.css';
 
 const fieldsData = [
   {
-    element: elements.TEXT,
+    element: FieldType.TEXT,
     textStyle: textStyles.REGULAR,
     id: 1,
     prevID: undefined,
     nextID: 2,
   },
   {
-    element: elements.LIST,
+    element: FieldType.LIST,
     id: 2,
     prevID: 1,
     nextID: 3,
   },
   {
-    element: elements.TEXT,
+    element: FieldType.TEXT,
     textStyle: textStyles.REGULAR,
     id: 3,
     prevID: 2,
     nextID: 4,
   },
   {
-    element: elements.TEXT,
+    element: FieldType.TEXT,
     textStyle: textStyles.REGULAR,
     id: 4,
     prevID: 3,
@@ -41,30 +46,17 @@ export default class Fields {
     this.swapWithNextFunc = this.swapWithNextFunc.bind(this);
     this.insertByEnterFunc = this.insertByEnterFunc.bind(this);
     this.deleteFieldFunc = this.deleteFieldFunc.bind(this);
+    this.chooseFieldFunc = this.chooseFieldFunc.bind(this);
   }
 
   render() {
-    const template = Handlebars.templates['fields.hbs'];
-    this.parent.innerHTML = template({});
+    this.parent.innerHTML = FieldsTemplate({});
     this.fieldContainer = this.parent.querySelector('.fields');
     this.fieldContainer.addEventListener('keydown', this.insertByEnterFunc);
 
     let prevField = undefined;
-    fieldsData.forEach((fieldData) => {
-      let curField = undefined;
-      switch (fieldData.element) {
-        case elements.TEXT:
-          curField = new TextField(this.fieldContainer, this.fields.length + 1, textStyles.REGULAR);
-          break;
-        case elements.LIST:
-          curField = new ListField(this.fieldContainer, this.fields.length + 1);
-          break;
-      }
-      this.insertField(curField, prevField, undefined);
-      prevField = curField;
-    });
-
-    console.log(this.fields);
+    let curField = new ImageField(this.fieldContainer, this.fields.length + 1, textStyles.REGULAR);
+    this.insertField(curField, prevField, undefined);
   }
 
   swapWithPrevFunc(event) {
@@ -83,7 +75,6 @@ export default class Fields {
 
   deleteFieldFunc(event) {
     const eventId = Number(event.target.dataset.id);
-    console.log(eventId);
     const curField = this.fields.find((field) => field.id === eventId);
     const nextField = this.fields.find((field) => field.id === curField.nextID);
     const prevField = this.fields.find((field) => field.id === curField.prevID);
@@ -96,7 +87,7 @@ export default class Fields {
       const eventId = Number(event.target.dataset.id);
       const curField = this.fields.find((field) => field.id === eventId);
       const nextField = this.fields.find((field) => field.id === curField.nextID);
-      const newField = new TextField(
+      const newField = new CheckField(
         this.fieldContainer,
         this.fields.length + 1,
         textStyles.REGULAR,
@@ -107,6 +98,24 @@ export default class Fields {
     }
   }
 
+  chooseFieldFunc(event) {
+    const eventId = Number(event.target.dataset.id);
+    const curField = this.fields.find((field) => field.id === eventId);
+    const nextField = this.fields.find((field) => field.id === curField.nextID);
+    const prevField = this.fields.find((field) => field.id === curField.prevID);
+    const newFieldType = event.target.dataset.newFieldType;
+
+    let newField = undefined;
+    if (newFieldType === 'text') {
+      newField = new TextField(this.fieldContainer, curField.id, textStyles.REGULAR);
+    } else if (newFieldType === 'image') {
+      newField = new TextField(this.fieldContainer, curField.id, textStyles.REGULAR);
+    }
+
+    this.deleteField(curField, prevField, nextField);
+    this.insertField(newField, prevField, nextField);
+  }
+
   swap(firstField, secondField) {
     const startField = this.fields.find((field) => field.id === firstField.prevID);
     const endField = this.fields.find((field) => field.id === secondField.nextID);
@@ -135,6 +144,7 @@ export default class Fields {
   }
 
   insertField(curField, prevField = undefined, nextField = undefined) {
+    console.log(curField, prevField, nextField);
     curField.prevID = prevField ? prevField.id : undefined;
     curField.nextID = nextField ? nextField.id : undefined;
     this.fields.push(curField);
@@ -151,9 +161,26 @@ export default class Fields {
     const down_button = curField.node.querySelector('.down-href');
     const delete_button = curField.node.querySelector('.delete-href');
 
-    up_button.addEventListener('click', this.swapWithPrevFunc);
-    down_button.addEventListener('click', this.swapWithNextFunc);
-    delete_button.addEventListener('click', this.deleteFieldFunc);
+    if (up_button) {
+      up_button.addEventListener('click', this.swapWithPrevFunc);
+    }
+    if (down_button) {
+      down_button.addEventListener('click', this.swapWithNextFunc);
+    }
+    if (delete_button) {
+      delete_button.addEventListener('click', this.deleteFieldFunc);
+    }
+
+    const chooseTextBtn = curField.node.querySelector('.choose-text-href');
+    const chooseImgBtn = curField.node.querySelector('choose-img-btn');
+
+    if (chooseTextBtn) {
+      chooseTextBtn.addEventListener('click', this.chooseFieldFunc);
+    }
+    if (chooseImgBtn) {
+      chooseImgBtn.addEventListener('click', this.chooseFieldFunc);
+    }
+    console.log(this.fields);
   }
 
   delete() {

diff --git a/src/components/Forms/forms.css b/src/components/Forms/forms.css
@@ -1,4 +1,4 @@
-@import '/public/variables.css';
+@import '/src/variables.css';
 
 .auth-form {
   margin-top: 50px;

diff --git a/src/components/Forms/forms.js b/src/components/Forms/forms.js
@@ -2,6 +2,8 @@ import Navigator from '../../router/navigator.js';
 import Ajax from '../../ajax/ajax.js';
 import UserApi from '../../api/api_user.js';
 import FormsTemplate from '../Forms/forms.hbs';
+import styles from './forms.css';
+import indexStyles from '../../index.css';
 
 export default class Forms {
   constructor(parent) {