https://www.rentcoworking.com.br/view/js/changeColors.js

1$(function () {
2    $(".change-color-text").on("click", function () {
3      var input = $(this);
4      var pickr = Pickr.create({
5        el: input[0],
6        default: getActualColor(input),
7        theme: "nano",
8        swatches: getAllColor(),
9        components: {
10          preview: true,
11          opacity: true,
12          hue: true,
13          interaction: {
14            hex: true,
15            rgba: true,
16            input: true,
17            save: false,
18          },
19        },
20  
21        i18n: {
22          "btn:save": "Salvar",
23        },
24      });
25  
26      pickr.on("change", (color) => {
27        input.val(color.toHEXA().toString());
28        input.trigger("colorChange");
29      });
30  
31      pickr.show();
32      initEyerDrop(pickr,input);
33      initSwitcherButton(pickr, input);
34      
35      function initSwitcherButton(pickr, input) {
36        pickr.on("init", (instance) => {
37          const saveButton = instance.getRoot().interaction.clear;
38          if (saveButton && saveButton.parentNode) {
39            const typesAttr = input.attr("data-type-multiples");
40            if (!typesAttr) return;
41      
42            const types = typesAttr.split("|").map(item => {
43              const [displayName, prop] = item.split(":");
44              return { displayName, prop };
45            });
46      
47            types.forEach(({ displayName, prop }) => {
48              const typeButton = document.createElement("button");
49              typeButton.type = "button";
50              typeButton.className = "color-picker-button";
51              typeButton.textContent = displayName; 
52              typeButton.style.fontSize = "11px";
53              typeButton.style.marginLeft = "4px";
54              typeButton.style.padding = "2px 6px";
55              typeButton.addEventListener("click", () => {
56                input.attr("data-type", prop); 
57                console.log("Tipo selecionado:", prop);
58              });
59              saveButton.parentNode.appendChild(typeButton);
60            });
61          }
62        });
63      }
64     
65    });
66  
67    function initEyerDrop(pickr, input)
68    {
69      pickr.on("init", (instance) => {
70        const saveButton = instance.getRoot().interaction.clear;
71        if (saveButton && saveButton.parentNode) {
72          const customButton = document.createElement("button");
73          customButton.type = "button";
74          customButton.className = "color-picker-button";
75          customButton.innerHTML = '<i class="fas fa-eye-dropper"></i>';
76  
77          customButton.addEventListener('click', async () => {
78              if (!window.EyeDropper) {
79                  alert('Seu navegador não suporta EyeDropper API!');
80                  return;
81              }
82          
83              const eyeDropper = new EyeDropper();
84          
85              try {
86                  const { sRGBHex } = await eyeDropper.open();
87                  let newColor = rgbaToHex(sRGBHex);
88                  pickr.setColor(newColor);
89              } catch (error) {
90                  console.error('Erro ao capturar a cor:', error);
91              }
92          });
93  
94          saveButton.parentNode.appendChild(customButton);
95        }
96      });
97    }
98  
99    function rgbaToHex(rgba) {
100      const regex = /^rgba\((\d+), (\d+), (\d+), (\d+(\.\d+)?)\)$/;
101      const result = rgba.match(regex);
102      
103      if (result) {
104        let r = parseInt(result[1]);
105        let g = parseInt(result[2]);
106        let b = parseInt(result[3]);
107        let a = parseFloat(result[4]);
108    
109        const toHex = (x) => x.toString(16).padStart(2, '0');
110    
111        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
112      } else {
113        console.error("Formato rgba inválido.");
114        return null;
115      }
116    }
117    
118   
119  
120  
121    function getAllColor() {
122      let colors = [];
123  
124      $(".change-color-text").filter(function (index) {
125        let className = $(this).data("id");
126        let property = $(this).data("type");
127        value = $("[" + className + "]").css(property);
128       
129        if (value) {
130          colors.push(value);
131          colors.push($(".btn-main-color").css("background-color"));
132          colors.push($(".btn-main-color2").css("background-color"));
133          const removeDuplicates = new Set(colors);
134          colors = Array.from(removeDuplicates);
135        }
136      });
137  
138      return colors;
139    }
140  
141    var firstBackup = Boolean(getCookie("backup"));
142    var backupPrimaryColor = $(".btn-main-color").css("background-color");
143    var backupSecondaryColor = $(".btn-main-color2").css("background-color");
144    let hasSession = $("#hasSession").data("has-session");

145    if (firstBackup != true && hasSession) {
146      $(".change-color-text").filter(function (index) {
147        let className = $(this).data("id");
148        let property = $(this).data("type");
149        value = $("[" + className + "]").css(property);
150        let idColor = $(this).data("id-color");
151        
152        addEntry(property, className, value, idColor, "backup");
153      });
154      var backupColors = localStorage.getItem("backup");
155  
156      $.ajax({
157        type: "POST",
158        url: "ajax/ajaxGetColors",
159        data: {
160          data: backupColors,
161          primaryColor: backupPrimaryColor,
162          secondaryColor: backupSecondaryColor,
163          type : "backup"
164        },
165        dataType: "JSON",
166        success: function (data) {
167          document.cookie = "backup=true";
168        },
169      });
170    }
171  
172    $(".change-color-text").on("colorChange", function () {
173      var $this = $(this);
174      var id = $this.data("id");
175      var idColor = $this.data("id-color");
176      var type = $this.attr("data-type"); 
177      var value = $this.val();
178      $(`[${id}]`).css(type, value);
179      console.log("Aplicando", type, "em", id, "com valor", value);
180      addEntry(type, id, value, idColor, "colors");
181    });
182  
183    $("#closeEditMode").on("click", function () {
184      Swal.fire({
185        title: "Ao encerrar a edição as alterações não salvas serão perdidas.",
186        icon: "warning",
187        showDenyButton: true,
188        confirmButtonText: "Encerrar",
189        denyButtonText: `Cancelar`,
190        confirmButtonColor: "#73970e",
191        cancelButtonColor: "#d33",
192      }).then((result) => {
193        if (result.isConfirmed) {
194          $.ajax({
195            type: "POST",
196            url: "ajax/ajaxCloseEditColor",
197            dataType: "JSON",
198            success: function (data) {
199              eraseCookie("color");
200              eraseCookie("color2");
201              eraseCookie("backup");
202              localStorage.clear("colors");
203              location.reload();
204            },
205          });
206        }
207      });
208    });
209  
210    $("#reverterEditMode").on("click", function () {
211      eraseCookie("color");
212      eraseCookie("color2");
213      localStorage.clear("colors");
214      location.reload();
215    });
216    function eraseCookie(cookieName) {
217      document.cookie = cookieName + "=";
218    }
219  
220    function getCookie(cookieName) {
221      let cookie = {};
222  
223      document.cookie.split(";").forEach(function (el) {
224        let [k, v] = el.split("=");
225        cookie[k.trim()] = v;
226      });
227      return cookie[cookieName];
228    }
229  
230    $(".save-editor-mode").on("click", function () {
231      var data = localStorage.getItem("colors");
232      var primaryColor = getCookie("color");
233      var secondaryColor = getCookie("color2");
234      Swal.fire({
235        title: "Gostaria de salvar as alterações?",
236        showDenyButton: true,
237        confirmButtonText: "Salvar",
238        denyButtonText: `Cancelar`,
239        confirmButtonColor: "#73970e",
240        cancelButtonColor: "#d33",
241      }).then((result) => {
242        if (result.isConfirmed) {
243          $.ajax({
244            type: "POST",
245            url: "ajax/ajaxGetColors",
246            data: {
247              data: data,
248              primaryColor: primaryColor,
249              secondaryColor: secondaryColor,
250            },
251            dataType: "JSON",
252            success: function (data) {
253              Swal.fire("Alterações salvas com sucesso!", "", "success");
254            },
255          });
256        }
257      });
258    });
259  
260    function addEntry(type, id, color, idColor, nameSession) {
261      const data = {
262        nameColor: id,
263        typeColor: type,
264        value: color,
265        idCor: idColor,
266        descricao: nameSession,
267      };
268      let currentItens = [];
269      if (localStorage.getItem(nameSession) != undefined) {
270        currentItens = JSON.parse(localStorage.getItem(nameSession));
271      }
272      let itens = currentItens.filter(function (element) {
273        return !(element && element.nameColor === id && element.typeColor === type);
274      });
275      itens.push(data);
276      localStorage.setItem(nameSession, JSON.stringify(itens));
277    }
278  
279    $(".change-main-colors").on("click", function () {
280      getAllColor();
281      let button = $(this);
282      let type = $(this).data("type");
283      let mainColor = true;
284      let MainPickr = Pickr.create({
285        el: button[0],
286        default: getActualColor(button, mainColor, type),
287        theme: "nano",
288        swatches: getAllColor(),
289        components: {
290          preview: true,
291          opacity: false,
292          hue: true,
293          interaction: {
294            hex: true,

295            rgba: false,
296            input: true,
297            save: true,
298          },
299        },
300        i18n: {
301          "btn:save": "Salvar",
302        },
303      });
304  
305      MainPickr.show();
306      
307      MainPickr.on("save", (color) => {
308        handleChangeMainColor(color.toHEXA().toString(), type);
309      });
310      initEyerDrop(MainPickr,button)
311    });
312
313    $(".btn-reset-all-colors").on("click", function () {
314      Swal.fire({
315        title: "Tem certeza?",
316        text: "Todas as cores personalizadas serão removidas. Essa ação não pode ser desfeita.",
317        icon: "warning",
318        showCancelButton: true,
319        confirmButtonText: "Sim, resetar tudo",
320        cancelButtonText: "Cancelar",
321        confirmButtonColor: "#d33",
322      }).then((result) => {
323        if (result.isConfirmed) {
324          $.ajax({
325            type: "POST",
326            url: "ajax/ajaxResetAllColors",
327            dataType: "JSON",
328            success: function () {
329              Swal.fire("Cores resetadas com sucesso!", "", "success");
330
331              localStorage.clear();
332              eraseCookie("color");
333              eraseCookie("color2");
334              eraseCookie("backup");
335            },
336          });
337        }
338      });
339    });
340  
341    function handleChangeMainColor(selectedColor, type) {
342      Swal.fire({
343        title:
344          "Para aplicar as alterações, é necessário recarregar a página. As demais mudanças serão perdidas.",
345        icon: "warning",
346        showDenyButton: true,
347        confirmButtonText: "Salvar",
348        denyButtonText: `Cancelar`,
349        confirmButtonColor: "#73970e",
350        cancelButtonColor: "#d33",
351      }).then((result) => {
352        if (result.isConfirmed) {
353          document.cookie = "color" + type + "=" + selectedColor;
354          location.reload();
355        }
356      });
357    }
358  
359    function getActualColor(input, mainColor = false, typeColor = "") {
360      let className = $(input).data("id");
361      let property = $(input).data("type");
362      if (mainColor) {
363        return $(".btn-main-color" + typeColor).css("background-color");
364      }
365      return $("[" + className + "]").css(property);
366    }
367  });