|
|
@@ -30,11 +30,10 @@ function avatarChange() {
|
|
|
$('.owl-carousel').trigger('to.owl.carousel', avatarSelector.selectedIndex);
|
|
|
console.log(value);
|
|
|
for(let i = 0;i < card.length; i++) {
|
|
|
+ card[i].classList.remove('active');
|
|
|
if(card[i].dataset.avatar == value) {
|
|
|
card[i].classList.add('active');
|
|
|
- } else {
|
|
|
- card[i].classList.remove('active');
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -91,15 +90,16 @@ $(".next").click(function () {
|
|
|
txtARR = [];
|
|
|
imgARR = [];
|
|
|
var step;
|
|
|
- for (step = 1; step <= 10; step++) {
|
|
|
- if ($(".txtsrc" + step).val() != "") {
|
|
|
- txtARR.push($(".txtsrc" + step).val())
|
|
|
+ let contentIdx = document.querySelectorAll(".txtsrc").length;
|
|
|
+ for (let i = 1; i < (contentIdx + 1); i++) {
|
|
|
+ if ($(`.txtsrc${i}`).val() != "") {
|
|
|
+ txtARR.push($(`.txtsrc${i}`).val())
|
|
|
}
|
|
|
}
|
|
|
- var step2;
|
|
|
- for (step2 = 1; step2 <= 10; step2++) {
|
|
|
- if ($(".imgsrc" + step2).val() != "") {
|
|
|
- imgARR.push($(".imgsrc" + step2).val())
|
|
|
+ let imgIdx = document.querySelectorAll(".imgsrc").length;
|
|
|
+ for (let i = 1; i < (imgIdx + 1); i++) {
|
|
|
+ if ($(`.imgsrc${i}`).val() != "") {
|
|
|
+ imgARR.push($(`.imgsrc${i}`).val())
|
|
|
}
|
|
|
}
|
|
|
dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar, "client_id": client_id }
|
|
|
@@ -222,18 +222,109 @@ function load_data() {
|
|
|
$("#linker").show();
|
|
|
$(".linker__box").show();
|
|
|
|
|
|
- $(".title_new").val(loaded_data.find(item => item.id == tid).name)
|
|
|
- var step;
|
|
|
- for (step = 1; step <= 10; step++) {
|
|
|
- $(".txtsrc" + step).val(loaded_data.find(item => item.id == tid).text_content[step - 1])
|
|
|
+ let historyItem = loaded_data.filter(item => item.id == tid)[0];
|
|
|
+ console.log(historyItem);
|
|
|
+ $(".title_new").val(loaded_data.find(item => item.id == tid).name);
|
|
|
+
|
|
|
+ let txtlength = historyItem.text_content.length;
|
|
|
+ let imglength = historyItem.image_urls.length;
|
|
|
+
|
|
|
+ subtitleInputs.innerHTML = '';
|
|
|
+ imgInputs.innerHTML = '';
|
|
|
+ for (let i = 0; i < txtlength ; i++) {
|
|
|
+ var txtinput = document.createElement("input");
|
|
|
+ txtinput.setAttribute('type', 'text');
|
|
|
+ txtinput.setAttribute('name', `t${i+1}`);
|
|
|
+ txtinput.value = historyItem.text_content[i];
|
|
|
+ txtinput.setAttribute('placeholder', `${i+1}`);
|
|
|
+ txtinput.classList.add('txtsrc',`txtsrc${i+1}`)
|
|
|
+ subtitleInputs.appendChild(txtinput);
|
|
|
}
|
|
|
- var step2;
|
|
|
- for (step2 = 1; step2 <= 10; step2++) {
|
|
|
- $(".imgsrc" + step2).val(loaded_data.find(item => item.id == tid).image_urls[step2 - 1])
|
|
|
+ for (let i = 0; i < imglength; i++) {
|
|
|
+ var imginput = document.createElement("input");
|
|
|
+ imginput.setAttribute('type', 'text');
|
|
|
+ imginput.setAttribute('name', `m${i+1}`);
|
|
|
+ imginput.classList.add('imgsrc', `imgsrc${i+1}`);
|
|
|
+ imginput.value = historyItem.image_urls[i];
|
|
|
+ imginput.setAttribute('placeholder', `${i+1}`);
|
|
|
+ imgInputs.appendChild(imginput);
|
|
|
+
|
|
|
+ var imgupload = document.createElement("input");
|
|
|
+ imgupload.setAttribute('id', `img${i+1}`);
|
|
|
+ imgupload.setAttribute('type', `file`);
|
|
|
+ imgupload.classList.add('img_uploader', 'img_up');
|
|
|
+ imgInputs.appendChild(imgupload);
|
|
|
+ var imguploadlabel = document.createElement("label");
|
|
|
+ imguploadlabel.setAttribute('for', `img${i+1}`);
|
|
|
+ imguploadlabel.classList.add('upload-btn');
|
|
|
+ imguploadlabel.textContent = '上傳檔案';
|
|
|
+ imgInputs.appendChild(imguploadlabel);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+var subtitleInputs = document.querySelector(".subtitle-inputs");
|
|
|
+var imgInputs = document.querySelector(".img-inputs");
|
|
|
+let length = 5;
|
|
|
+function initial() {
|
|
|
+ for(let i = 0;i < length; i++) {
|
|
|
+ rendertxtBlock(i+1);
|
|
|
+ renderimgBlock(i+1);
|
|
|
+ }
|
|
|
+ console.log(document.querySelectorAll(".txtsrc").length + 1);
|
|
|
+}
|
|
|
+
|
|
|
+initial();
|
|
|
+
|
|
|
+var addbtn = document.querySelector(".add");
|
|
|
+var addimgbtn = document.querySelector(".addimg");
|
|
|
+
|
|
|
+addbtn.addEventListener('click', addtxtBlock);
|
|
|
+addimgbtn.addEventListener('click', addimgBlock);
|
|
|
+
|
|
|
+function addtxtBlock() {
|
|
|
+ let newIdx = document.querySelectorAll(".txtsrc").length + 1;
|
|
|
+ rendertxtBlock(newIdx);
|
|
|
+}
|
|
|
+
|
|
|
+function addimgBlock() {
|
|
|
+ let newimgIdx = document.querySelectorAll(".imgsrc").length + 1;
|
|
|
+ renderimgBlock(newimgIdx);
|
|
|
+}
|
|
|
+
|
|
|
+function rendertxtBlock(i){
|
|
|
+ var txtinput = document.createElement("input");
|
|
|
+ txtinput.setAttribute('type', 'text');
|
|
|
+ txtinput.setAttribute('name', `t${i}`);
|
|
|
+ txtinput.value = "";
|
|
|
+ txtinput.setAttribute('placeholder', `${i}`);
|
|
|
+ txtinput.classList.add('txtsrc',`txtsrc${i}`)
|
|
|
+ subtitleInputs.appendChild(txtinput);
|
|
|
+}
|
|
|
+
|
|
|
+function renderimgBlock(i) {
|
|
|
+ var imginput = document.createElement("input");
|
|
|
+ imginput.setAttribute('type', 'text');
|
|
|
+ imginput.setAttribute('name', `m${i}`);
|
|
|
+ imginput.classList.add('imgsrc', `imgsrc${i}`);
|
|
|
+ imginput.value = "";
|
|
|
+ imginput.setAttribute('placeholder', `${i}`);
|
|
|
+ imgInputs.appendChild(imginput);
|
|
|
+
|
|
|
+ var imgupload = document.createElement("input");
|
|
|
+ imgupload.setAttribute('id', `img${i}`);
|
|
|
+ imgupload.setAttribute('type', `file`);
|
|
|
+ imgupload.classList.add('img_uploader', 'img_up');
|
|
|
+ imgInputs.appendChild(imgupload);
|
|
|
+ var imguploadlabel = document.createElement("label");
|
|
|
+ imguploadlabel.setAttribute('for', `img${i}`);
|
|
|
+ imguploadlabel.classList.add('upload-btn');
|
|
|
+ imguploadlabel.textContent = '上傳檔案';
|
|
|
+ imgInputs.appendChild(imguploadlabel);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
$('.owl-carousel').owlCarousel({
|
|
|
loop:true,
|
|
|
margin:10,
|
huaisianhuang