客製中心/新增修改 modifyAdd.php

[willy800510]

1. 自己輸入的十六進位色碼 無法同步picker picker選用 https://iro.js.org/ 的 https://codepen.io/rakujira/pen/XWbgwYm?editors=1011 裡面的box & hue slider

[joyuhuang]

我測試的時候是這樣改的，可以同步picker，參考看看 (因為用的是"change"，輸入的十六進位色碼後要按enter或點其他地方 才會變動喔)

<!-- Modal color picker -->
<div class="modal fade" id="colorPkModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="ColorPicker" id="boxPicker"></div>
      <div id="values"></div>
      <label for="hexInput">Hex:</label>
      <input type="text" id="hexInput" placeholder="#"></input>
      <label for="rgb">rgb:</label>
      <div class="" name="rgb">rgb(
        <input type="number" id="red" class="rgb-input">
        ,
        <input type="number" id="green" class="rgb-input">
        ,
        <input type="number" id="blue" class="rgb-input">
        )
      </div>
    </div>
  </div>
</div>

iro.js

// Box & hue slider
  var boxPicker = new iro.ColorPicker("#boxPicker", {
    width: 250,
    color: "rgb(255, 0, 0)",
    borderWidth: 1,
    borderColor: "#fff",
    layout: [
      {
        component: iro.ui.Box,
      },
      {
        component: iro.ui.Slider,
        options: {
          sliderType: 'hue'
        }
      }
    ]
  });

window.onload = function() {
  var values = document.getElementById("values");
  var hexInput = document.getElementById("hexInput");
  var rInput = document.getElementById("red");
  var gInput = document.getElementById("green");
  var bInput = document.getElementById("blue");

  // https://iro.js.org/guide.html#color-picker-events
  boxPicker.on(["color:init", "color:change"], function(color){
    // Show the current color in different formats
    // Using the selected color: https://iro.js.org/guide.html#selected-color-api
    values.innerHTML = [
      "hex: " + color.hexString,
      "rgb: " + color.rgbString,
      "hsl: " + color.hslString,
    ].join("<br>");

    hexInput.value = color.hexString;
    rInput.value = color.red;
    gInput.value = color.green;
    bInput.value = color.blue;

  });

  hexInput.addEventListener('change', function() {
    boxPicker.color.hexString = this.value;
  });

  $(".rgb-input").change(function(){
    var c = $(this).attr("id");
    boxPicker.color[c] = $(this).val();
  })
}

[willy800510]

謝謝 提供很好的修正，我將formt套進去 想說可能要用form 送出最後的色碼給 [+]

<!-- Modal color picker -->
 <div class="modal fade" id="colorPk" tabindex="-1">
  <div class="modal-dialog" style="max-width: 290px !important;">
   <div class="modal-content" style="background: rgba(255, 255, 255, 0.8);">
    <div id="boxPicker" class="mx-auto m-3" style="pointer-events: auto;" ></div>
    <form class="d-flex flex-column align-items-center" method="post">
     <div id="values" class="mx-auto"></div>
     <div class="form-group col-12 d-flex align-items-center">
      <label for="hexInput" class="mb-0">Hex:</label>
      <input type="text" id="hexInput" class="form-control mx-1" placeholder="#"></input>
     </div>
     <div class="form-group col-12 mx-auto">
      <div class="" name="rgb">
       <div class="d-flex align-items-center">
        rgb(
        <input type="number" id="red" class="rgb-input form-control">
        ,
        <input type="number" id="green" class="rgb-input form-control">
        ,
        <input type="number" id="blue" class="rgb-input form-control">
        )
       </div>
      </div>
     </div>
     <button type="submit" class="btn btn-outline-primary col-4 mx-auto mb-2">送出</button>
    </form>
   </div>
  </div>
</div>

[joyuhuang]

form裡面不能再放一個form喔！可以把modal的部分挪到原本的form外面 來避免這個問題

我幫忙做了一下，處理了表單的內容及必填驗證，可以看一看符不符合你的設計，希望有幫你減少一些工作量XD modifyAdd.zip 不過"選擇顏色"的部分，如果點了顏色"+"，但未選擇顏色就關閉modal，仍會被判定為已選取顏色，這個問題目前還沒處理(還沒想到要怎麼處理 🤔 )

[willy800510]

不過"選擇顏色"的部分，如果點了顏色"+"，但未選擇顏色就關閉modal，仍會被判定為已選取顏色，這個問題目前還沒處理(還沒想到要怎麼處理 🤔 )

我也想不出來😔

我做好了送出表單 顯示在modifyView.php 但假如想要多選（可能未來logo可能會選到兩色or以上）我也還沒想法

[willy800510]

改寫了選擇色塊，色塊顏色改成與logo圖顏色相同（logo改色,色塊也會更改）

modifyAdd line 153

var colorDefault = $('#pdlogo svg .cls-1').css('fill');
$(".chooColor").css('background-color',colorDefault)

但如果logo圖有兩色或漸層還想不到方法（兩色的 嘗試多加一個色塊 會直接壞點）

不過嘗試選擇顏色 是可同時更改右邊預視的圖 送出後在modifyView也會接受到顏色，圖亦會更換顏色

modifyAdd line 170

('#pdlogo svg .cls-1').css('fill',color);

不過這個作法有個很大缺陷 因為未來圖若為png格式，則可能要用其他套件了

另外同樣遇到一個問題，當在modifyAdd未選擇顏色時,modifyView就會無法顯示,可能是接受到rgba（0,0,0,0),所以我在色塊的地方下了一個判斷

modifyView line63

<div class="badge d-inline-block mr-2 chooColor" style="background-color: #<?php 
$color = trim($_POST['companyColor'],"#");
if($color == ""){
echo "FC9545"; //這裡是想取得原本圖檔的color，圖目前受到第97-98影響 會改變顏色
} else{
echo $color;
} ?>;">
</div>

modifyView line97

var color = $(".chooColor").css("background-color")
$('#pdlogo svg .cls-1').css('fill',color);

[willy800510]

目前改成三種狀況

1. 商品單色 -> modifyAdd
2. 商品多色 -> modifyAdd_mutiColor
3. 商品含漸層色 -> modifyAdd_gradient

   >> 填寫表單後均導向modifyView

[joyuhuang]

不過其實改成這樣只有一個選色按鈕的話 好像就不用用label來當按扭了 🤔 ，至少不用加 選取中 的class (input[name="companyColor"]:checked+.chooColor 這個)，必填的部分也可以拿掉(.colorBox.invalid這個class、還有js檢查的部分)

是說，需不需要加 "清除"或"不改變"的按鈕/選項 呀？不過也是可以直接重新整理 重填就是了 ，好像也不一定需要這些按鈕🤔