add remove ownerImg

backstage/static/js/yo.js

@@ -25,7 +25,7 @@ if (location.pathname.indexOf("system_furniture") >= 0) {
   };
 }
 
-//document.ready
+// document.ready
 $(function () {
   $("#dialog-form").hide();
   if ($("#editorjs").length > 0)
@@ -39,6 +39,16 @@ $(function () {
             holder: 'editorjs1',
         }); */
 });
+
+let ownerimgShow = true;
+
+$(document).ready(function () {
+  $("#removeOwnerImg").click(function () {
+    ownerimgShow = false;
+    document.getElementById("cnewownerimg").value = "";
+  });
+});
+
 var editorslider;
 function getHeader(url) {
   axios.get(contentApiUrl + url).then(({ data }) => {
@@ -56,10 +66,7 @@ function getHeader(url) {
     // $("#dialog-form").dialog();
     if ($("#ctype").val() == "collection") {
       $("#scat").hide();
-    } else if (
-      $("#ctype").val() == "blog" ||
-      $("#ctype").val() == "blog"
-    ) {
+    } else if ($("#ctype").val() == "blog" || $("#ctype").val() == "blog") {
       $("#sdesc").hide();
     } else if ($("#ctype").val() == "news") {
       $("#sdesc").hide();
@@ -137,26 +144,29 @@ function writeMd() {
         console.log($("#cfile").val());
         if ($("#cfile").val() == "" || $("#cfile").val() == undefined) {
           offset1 = 1;
-        }
-        else {
+        } else {
           formData.append("image" + imgcount.toString(), imagefile.files[0]);
           imgcount++;
         }
 
         console.log($("#cnewcoverimg").val());
-        if ($("#cnewcoverimg").val() == "" || $("#cnewcoverimg").val() == undefined) {
+        if (
+          $("#cnewcoverimg").val() == "" ||
+          $("#cnewcoverimg").val() == undefined
+        ) {
           offset2 = 1;
-        }
-        else {
+        } else {
           formData.append("image" + imgcount.toString(), imagefil2.files[0]);
           imgcount++;
         }
 
         console.log($("#cnewcomment").val());
-        if ($("#cnewcomment").val() == "" || $("#cnewcomment").val() == undefined) {
+        if (
+          $("#cnewcomment").val() == "" ||
+          $("#cnewcomment").val() == undefined
+        ) {
           offset3 = 1;
-        }
-        else {
+        } else {
           formData.append("image" + imgcount.toString(), imagefil3.files[0]);
           imgcount++;
         }
@@ -164,9 +174,14 @@ function writeMd() {
         console.log($("#cnewownerimg").val());
         formData.append("image" + imgcount.toString(), imagefil4.files[0]);
 
-        console.log($("#cfile").val(), $("#cnewcoverimg").val(), $("#cnewcomment").val(), $("#cnewownerimg").val())
-        console.log(offset1, offset2, offset3)
-        console.log(formData)
+        console.log(
+          $("#cfile").val(),
+          $("#cnewcoverimg").val(),
+          $("#cnewcomment").val(),
+          $("#cnewownerimg").val()
+        );
+        console.log(offset1, offset2, offset3);
+        console.log(formData);
 
         axios
           .post("/backstage/multiupload/title", formData, {
@@ -181,38 +196,43 @@ function writeMd() {
               var imglinks = data.fileurl.split(";;;");
               if ($("#cfile").val() == "" || $("#cfile").val() == undefined) {
                 //do nothing
-              }
-              else {
+              } else {
                 alert("Replacing header image");
                 mdContent = mdContent.replace(
                   $("#cfile").val(),
                   "/img/title/" + imglinks[0]
                 );
               }
-              if ($("#cnewcoverimg").val() == "" || $("#cnewcoverimg").val() == undefined) {
+              if (
+                $("#cnewcoverimg").val() == "" ||
+                $("#cnewcoverimg").val() == undefined
+              ) {
                 //do nothing
-              }
-              else {
+              } else {
                 alert("Replacing cover image");
                 mdContent = mdContent.replace(
                   $("#cnewcoverimg").val(),
                   "/img/title/" + imglinks[1 - offset1]
                 );
               }
-              if ($("#cnewcomment").val() == "" || $("#cnewcomment").val() == undefined) {
+              if (
+                $("#cnewcomment").val() == "" ||
+                $("#cnewcomment").val() == undefined
+              ) {
                 //do nothing
-              }
-              else {
+              } else {
                 alert("Replacing comment image");
                 mdContent = mdContent.replace(
                   $("#cnewcomment").val(),
                   "/img/title/" + imglinks[2 - offset1 - offset2]
                 );
               }
-              if ($("#cnewownerimg").val() == "" || $("#cnewownerimg").val() == undefined) {
+              if (
+                $("#cnewownerimg").val() == "" ||
+                $("#cnewownerimg").val() == undefined
+              ) {
                 //do nothing
-              }
-              else {
+              } else {
                 alert("Replacing owner image");
                 mdContent = mdContent.replace(
                   $("#cnewownerimg").val(),
@@ -230,7 +250,7 @@ function writeMd() {
 
             axios
               .post(contentApiUrl + editTarget, (json = postData))
-              .then(({ data }) => { });
+              .then(({ data }) => {});
           })
           .finally(() => {
             alert("資料已更新"); // test
@@ -249,7 +269,7 @@ function writeMd() {
               mdContent = mdContent.replace(
                 $("#cfile").val(),
                 "/img/title/" +
-                data.file.url.substring(data.file.url.lastIndexOf("/") + 1)
+                  data.file.url.substring(data.file.url.lastIndexOf("/") + 1)
               );
             }
 
@@ -259,7 +279,7 @@ function writeMd() {
             };
             axios
               .post(contentApiUrl + editTarget, (json = postData))
-              .then(({ data }) => { });
+              .then(({ data }) => {});
           })
           .finally(() => {
             alert("資料已更新"); // test
@@ -409,9 +429,10 @@ function parseMd(content) {
       }
 
       if (line.includes("house_size: ")) {
-        $("#chousesize").val(line.replace("house_size: ", "").replaceAll('"', ""));
-      }
-      else if (line.includes("size: ")) {
+        $("#chousesize").val(
+          line.replace("house_size: ", "").replaceAll('"', "")
+        );
+      } else if (line.includes("size: ")) {
         $("#csize").val(line.replace("size: ", "").replaceAll('"', ""));
       }
 
@@ -420,7 +441,9 @@ function parseMd(content) {
       }
 
       if (line.includes("room_count: ")) {
-        $("#croomcount").val(line.replace("room_count: ", "").replaceAll('"', ""));
+        $("#croomcount").val(
+          line.replace("room_count: ", "").replaceAll('"', "")
+        );
       }
 
       if (line.includes("house_cat: ")) {
@@ -442,7 +465,9 @@ function parseMd(content) {
       }
 
       if (line.includes("budget_range: ")) {
-        $("#cbudgetr").val(line.replace("budget_range: ", "").replaceAll('"', ""));
+        $("#cbudgetr").val(
+          line.replace("budget_range: ", "").replaceAll('"', "")
+        );
       }
 
       if (line.includes("budget: ")) {
@@ -626,14 +651,28 @@ function GetMdHeader(result = []) {
     // rContent += 'collection_slider: ['+collection_slider_img+']\n';
     rContent += 'banner_img_text: "' + $("#ccoverimgtxt").val() + '"\n';
     rContent += 'homeowner: "' + $("#chomeowner").val() + '"\n';
-    if (
-      $("#cnewownerimg").val() != "" &&
-      $("#cnewownerimg").val() != undefined
-    ) {
-      rContent += 'owner_img: "' + $("#cnewownerimg").val() + '"\n';
+
+    if (!ownerimgShow) {
+      rContent += 'owner_img: ""\n';
     } else {
-      rContent += 'owner_img: "' + $("#cownerimg").val() + '"\n';
+      if (
+        $("#cnewownerimg").val() != "" &&
+        $("#cnewownerimg").val() != undefined
+      ) {
+        rContent += 'owner_img: "' + $("#cnewownerimg").val() + '"\n';
+      } else {
+        rContent += 'owner_img: "' + $("#cownerimg").val() + '"\n';
+      }
     }
+
+    // if (
+    //   $("#cnewownerimg").val() != "" &&
+    //   $("#cnewownerimg").val() != undefined
+    // ) {
+    //   rContent += 'owner_img: "' + $("#cnewownerimg").val() + '"\n';
+    // } else {
+    //   rContent += 'owner_img: "' + $("#cownerimg").val() + '"\n';
+    // }
     rContent += 'size: "' + $("#csize").val() + '"\n';
     rContent += 'house_size: "' + $("#chousesize").val() + '"\n';
     rContent += 'bed_num: "' + $("#cbednum").val() + '"\n';
@@ -801,7 +840,11 @@ function ParseProductSection(inContent) {
   if ($("[id='carousel-with-preview']", aa).length > 0) {
     imgnodes = $("[id='carousel-with-preview']", aa)[0].children[0].childNodes;
 
-    for (let i = 0; i < $("[id='carousel-with-preview']", aa)[0].children.length; i++) {
+    for (
+      let i = 0;
+      i < $("[id='carousel-with-preview']", aa)[0].children.length;
+      i++
+    ) {
       const element = $("[id='carousel-with-preview']", aa)[0].children[i];
       let imgnodeItem = element.childNodes;
 
@@ -811,20 +854,20 @@ function ParseProductSection(inContent) {
         tmpsrc = ampimg.substr(
           ampimg.indexOf('src="') + 5,
           ampimg.indexOf('"', ampimg.indexOf('src="') + 5) -
-          ampimg.indexOf('src="') -
-          5
+            ampimg.indexOf('src="') -
+            5
         );
         tmpw = ampimg.substr(
           ampimg.indexOf('width="') + 7,
           ampimg.indexOf('"', ampimg.indexOf('width="') + 7) -
-          ampimg.indexOf('width="') -
-          7
+            ampimg.indexOf('width="') -
+            7
         );
         tmph = ampimg.substr(
           ampimg.indexOf('height="') + 8,
           ampimg.indexOf('"', ampimg.indexOf('height="') + 8) -
-          ampimg.indexOf('height="') -
-          8
+            ampimg.indexOf('height="') -
+            8
         );
         //tmph = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
         editorBlocks.push({
@@ -839,7 +882,6 @@ function ParseProductSection(inContent) {
           },
         });
       }
-
     }
 
     // for (i = 0; i < imgnodes.length; i++) {
@@ -1006,20 +1048,20 @@ function ParseProductSection(inContent) {
         tmpsrc = ampimg.substr(
           ampimg.indexOf('src="') + 5,
           ampimg.indexOf('"', ampimg.indexOf('src="') + 5) -
-          ampimg.indexOf('src="') -
-          5
+            ampimg.indexOf('src="') -
+            5
         );
         tmpw = ampimg.substr(
           ampimg.indexOf('width="') + 7,
           ampimg.indexOf('"', ampimg.indexOf('width="') + 7) -
-          ampimg.indexOf('width="') -
-          7
+            ampimg.indexOf('width="') -
+            7
         );
         tmph = ampimg.substr(
           ampimg.indexOf('height="') + 8,
           ampimg.indexOf('"', ampimg.indexOf('height="') + 8) -
-          ampimg.indexOf('height="') -
-          8
+            ampimg.indexOf('height="') -
+            8
         );
         //tmph = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
         editorBlocks1.push({
@@ -1137,45 +1179,45 @@ function GenProductSection(mimg, specimg) {
     tmpstr = tmpstr.replaceAll(
       "##swfPrice##",
       "<div class='me-3 my-2 d-flex'><div class='tw-15'>定價</div>" +
-      "<div class='pdprice tw-85'>" +
-      $("#swfPrice").val() +
-      "</div></div>"
+        "<div class='pdprice tw-85'>" +
+        $("#swfPrice").val() +
+        "</div></div>"
     );
   else tmpstr = tmpstr.replaceAll("##swfPrice##", "<span></span>");
   if ($("#swfColor").val() != "")
     tmpstr = tmpstr.replaceAll(
       "##swfColor##",
       "<div class='my-2 d-flex'><div class='tw-15'>顏色</div>" +
-      "<div class='pdcolor tw-85'>" +
-      $("#swfColor").val() +
-      "</div></div>"
+        "<div class='pdcolor tw-85'>" +
+        $("#swfColor").val() +
+        "</div></div>"
     );
   else tmpstr = tmpstr.replaceAll("##swfColor##", "<span></span>");
   if ($("#swfSize").val() != "")
     tmpstr = tmpstr.replaceAll(
       "##swfSize##",
       "<div class='my-2 d-flex'><div class='tw-15'>尺寸</div>" +
-      "<div class='pdsize tw-85'>" +
-      $("#swfSize").val() +
-      "</div></div>"
+        "<div class='pdsize tw-85'>" +
+        $("#swfSize").val() +
+        "</div></div>"
     );
   else tmpstr = tmpstr.replaceAll("##swfSize##", "<span></span>");
   if ($("#swfMat").val() != "")
     tmpstr = tmpstr.replaceAll(
       "##swfMat##",
       "<div class='my-2 d-flex'><div class='tw-15'>材質</div>" +
-      "<div class='pmat tw-85'>" +
-      $("#swfMat").val() +
-      "</div></div>"
+        "<div class='pmat tw-85'>" +
+        $("#swfMat").val() +
+        "</div></div>"
     );
   else tmpstr = tmpstr.replaceAll("##swfMat##", "<span></span>");
   if ($("#swfMemo").val() != "")
     tmpstr = tmpstr.replaceAll(
       "##swfMemo##",
       "<div class='my-2 d-flex'><div class='tw-15'>備註</div> " +
-      "<div class='pdmark tw-85'>" +
-      $("#swfMemo").val() +
-      "</div></div>"
+        "<div class='pdmark tw-85'>" +
+        $("#swfMemo").val() +
+        "</div></div>"
     );
   else tmpstr = tmpstr.replaceAll("##swfMemo##", "<span></span>");
 
@@ -1239,10 +1281,9 @@ function GenProductSection(mimg, specimg) {
 
   specimgstr = "";
 
-  if(specimg.blocks.length===0){
+  if (specimg.blocks.length === 0) {
     specimgstr = "";
-
-  }else{
+  } else {
     specimgstr += "<h6>尺寸規格</h6>";
     for (i = 0; i < specimg.blocks.length; i++) {
       //alert(block.type);
@@ -1261,22 +1302,16 @@ function GenProductSection(mimg, specimg) {
       }
     }
   }
-  if(specimgstr===""){
-    specimgstr+='<div></div>'
+  if (specimgstr === "") {
+    specimgstr += "<div></div>";
   }
 
   tmpstr = tmpstr.replaceAll(
     "##SPEC-IMG##",
-    specimgstr == ""
-      ? ""
-      : '<div class="spec">' +
-      specimgstr +
-      "</div>"
-
+    specimgstr == "" ? "" : '<div class="spec">' + specimgstr + "</div>"
   );
 
-
-  console.log(tmpstr)
+  console.log(tmpstr);
 
   return tmpstr;
 }

backstage/static/styles/main.css

@@ -152,7 +152,7 @@
 
 .btn__add:hover {
   width: 4rem;
-  border-radius: 30%;
+  border-radius: 10px;
 }
 
 .btn__add::after {
@@ -520,3 +520,11 @@ a.bg-dark:hover, a.bg-dark:active, a.bg-dark:focus {
 .autoHeight {
   height: auto;
 }
+
+.btn.focus, .btn:focus {
+  box-shadow: none;
+}
+
+.btn:hover {
+  background-color: rgb(211, 211, 211);
+}

backstage/templates/collections.html

@@ -223,8 +223,9 @@
               <td>
                 <h4>屋主照片</h4>
               </td>
-              <td>
+              <td class="d-flex flex-column">
                 <input class="form-control" id="cnewownerimg" type="file" />
+                <button id="removeOwnerImg" type="button" class="btn btn_light mt-2">移除前台屋主照片</button>
               </td>
             </tr>
             <tr>