|
|
@@ -1,16 +1,47 @@
|
|
|
function getBlockElements(contentDiv) {
|
|
|
+ let moreFlag = true;
|
|
|
const blockDiv = document.createElement("div");
|
|
|
+ blockDiv.classList.add('blockDiv');
|
|
|
+ const editOpen = document.createElement('button');
|
|
|
+ editOpen.classList.add('btn__editOpen');
|
|
|
+ const editIcon = document.createElement('i');
|
|
|
+ editIcon.classList.add('fas', 'fa-edit');
|
|
|
+ editOpen.append(editIcon);
|
|
|
const descButton = document.createElement('button');
|
|
|
+ descButton.classList.add('btn', 'btn__titledesc');
|
|
|
descButton.textContent = 'Add Description';
|
|
|
const imgButton = document.createElement('button');
|
|
|
- imgButton.textContent = 'Add Image';
|
|
|
+ imgButton.classList.add('btn__addimg');
|
|
|
+ const icon = document.createElement('i');
|
|
|
+ icon.classList.add('fas', 'fa-images');
|
|
|
+ imgButton.appendChild(icon);
|
|
|
const h = document.createElement("H2");
|
|
|
+ h.classList.add('blockDiv__h2' ,'mb-2');
|
|
|
const input = document.createElement("INPUT");
|
|
|
+ input.classList.add('input');
|
|
|
input.setAttribute("type", "text");
|
|
|
const inputButton = document.createElement('button');
|
|
|
+ inputButton.classList.add('btn', 'btn__titleInput');
|
|
|
inputButton.textContent = 'Title新增/修改';
|
|
|
contentDiv.appendChild(blockDiv);
|
|
|
- blockDiv.append(h, input, inputButton, descButton, imgButton);
|
|
|
+ blockDiv.append(editOpen, h, input, inputButton, descButton, imgButton);
|
|
|
+ blockDiv.classList.add('mb-4');
|
|
|
+ console.log(editOpen);
|
|
|
+ editOpen.addEventListener('click', function(e) {
|
|
|
+ if(e.target.nodeName !== 'I'){ return };
|
|
|
+ console.log(e.target.parentNode.parentNode.parentNode.children);
|
|
|
+ if(moreFlag) {
|
|
|
+ e.target.classList.remove('fas', 'fa-edit');
|
|
|
+ e.target.classList.add('fas', 'fa-minus');
|
|
|
+ blockDiv.style.height = 'auto';
|
|
|
+ moreFlag = false;
|
|
|
+ } else {
|
|
|
+ e.target.classList.remove('fas', 'fa-minus');
|
|
|
+ e.target.classList.add('fas', 'fa-edit');
|
|
|
+ blockDiv.style.height = '30vh';
|
|
|
+ moreFlag = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
return {
|
|
|
blockDiv: blockDiv,
|
|
|
h: h,
|
|
|
@@ -24,11 +55,18 @@ function getBlockElements(contentDiv) {
|
|
|
function getdescElements(blockDiv) {
|
|
|
const descDiv = document.createElement("div");
|
|
|
const descTextArea = document.createElement("TEXTAREA");
|
|
|
+ descDiv.classList.add('descBlock');
|
|
|
+ descTextArea.classList.add('textarea');
|
|
|
descTextArea.setAttribute("type", "text");
|
|
|
const descInputButton = document.createElement('button');
|
|
|
+ descInputButton.classList.add('btn', 'btn__descInput');
|
|
|
const removeButton = document.createElement('button');
|
|
|
+ removeButton.textContent = '刪除 ';
|
|
|
+ const icon = document.createElement('i');
|
|
|
+ icon.classList.add('fas', 'fa-trash-alt');
|
|
|
+ removeButton.append(icon);
|
|
|
+ removeButton.classList.add('btn', 'btn__remove');
|
|
|
descInputButton.textContent = 'Description新增/修改';
|
|
|
- removeButton.textContent = 'Description刪除';
|
|
|
blockDiv.appendChild(descDiv);
|
|
|
descDiv.append(descTextArea, descInputButton, removeButton);
|
|
|
return {
|
|
|
@@ -40,13 +78,30 @@ function getdescElements(blockDiv) {
|
|
|
|
|
|
function getImgElements(blockDiv) {
|
|
|
const div = document.createElement("div");
|
|
|
+ const label = document.createElement('label');
|
|
|
const img = document.createElement("img");
|
|
|
const input = document.createElement("INPUT");
|
|
|
const widthInput = document.createElement("INPUT");
|
|
|
const heightInput = document.createElement("INPUT");
|
|
|
+ const imgContainer = document.createElement('div');
|
|
|
+ imgContainer.classList.add('img__container');
|
|
|
+ imgContainer.append(img);
|
|
|
+ label.setAttribute('for', 'file');
|
|
|
+ label.setAttribute('alt', '上傳照片');
|
|
|
+ label.textContent = "開啟檔案";
|
|
|
+ const icon = document.createElement('i');
|
|
|
+ icon.classList.add('fas', 'fa-cloud-upload-alt');
|
|
|
+ label.append(icon);
|
|
|
+ widthInput.setAttribute('placeholder', 'Width(ex: 600)');
|
|
|
+ widthInput.classList.add('input');
|
|
|
+ heightInput.setAttribute('placeholder', 'Height(ex: 600)');
|
|
|
+ heightInput.classList.add('input');
|
|
|
const inputButton = document.createElement('button');
|
|
|
const removeButton = document.createElement('button');
|
|
|
+ inputButton.classList.add('btn__imgEdit');
|
|
|
+ removeButton.classList.add('btn__imgEdit');
|
|
|
input.setAttribute("type", "file");
|
|
|
+ input.setAttribute('id', 'file');
|
|
|
input.addEventListener('change', function(event) {
|
|
|
if (event.target.files[0]) {
|
|
|
let formData = new FormData();
|
|
|
@@ -61,8 +116,9 @@ function getImgElements(blockDiv) {
|
|
|
});
|
|
|
inputButton.textContent = 'Image新增/修改';
|
|
|
removeButton.textContent = 'Image刪除';
|
|
|
+
|
|
|
blockDiv.appendChild(div);
|
|
|
- div.append(img, input, widthInput, heightInput, inputButton, removeButton);
|
|
|
+ div.append(imgContainer, label, input, widthInput, heightInput, inputButton, removeButton);
|
|
|
return {
|
|
|
img: img,
|
|
|
imgInput: input,
|
huaisianhuang