/*Trix.config.textAttributes.coloryellow = {
style: { color: "#887626" },
parser: element => element.style.color == "#887626",
inheritable: true
}
Trix.config.textAttributes.colororange = {
style: { color: "#b95e06" },
parser: element => element.style.color == "#b95e06",
inheritable: true
}
Trix.config.textAttributes.colorred = {
style: { color: "#cf0000" },
parser: element => element.style.color == "#cf0000",
inheritable: true
}
Trix.config.textAttributes.colorpink = {
style: { color: "#d81caa" },
parser: element => element.style.color == "#d81caa",
inheritable: true
}
Trix.config.textAttributes.colorpurple = {
style: { color: "#9013FE" },
parser: element => element.style.color == "#9013FE",
inheritable: true
}
Trix.config.textAttributes.colorblue = {
style: { color: "#0562B9" },
parser: element => element.style.color == "#0562B9",
inheritable: true
}
Trix.config.textAttributes.colorgreen = {
style: { color: "#118a0f" },
parser: element => element.style.color == "#118a0f",
inheritable: true
}

Trix.config.textAttributes.bkyellow = {
style: { background: "#887626" },
parser: function(element) {
  return element.style.backgroundColor=== "#887626"
},
inheritable: true
}
Trix.config.textAttributes.bkorange = {
style: { background: "#b95e06" },
parser: function(element) {
  return element.style.backgroundColor === "#b95e06"
},
inheritable: true
}
Trix.config.textAttributes.bkred = {
style: { background: "#cf0000" },
parser: function(element) {
  return element.style.backgroundColor === "#cf0000"
},
inheritable: true
}
Trix.config.textAttributes.bkpink = {
style: { background: "#d81caa" },
parser: function(element) {
  return element.style.backgroundColor === "#d81caa"
},
inheritable: true
}
Trix.config.textAttributes.bkpurple = {
style: { background: "#9013FE" },
parser: function(element) {
  return element.style.backgroundColor === "#9013FE"
},
inheritable: true
}
Trix.config.textAttributes.bkblue = {
style: { background: "#0562B9" },
parser: function(element) {
  return element.style.backgroundColor === "#0562B9"
},
inheritable: true
}
Trix.config.textAttributes.bkgreen = {
style: { background: "#118a0f" },
parser: function(element) {
  return element.style.backgroundColor === "#118a0f"
},
inheritable: true
}

$(document).on("click", '.color-picker__swatch', function(e)
{
  setTimeout(function() {  $('.trix-dialog--color').removeClass('trix-active');
  $('.trix-dialog--color').removeAttr('data-trix-active');}, 500);
});

addEventListener("trix-initialize", function(event) {
var buttonHTML = '<button type="button" class="trix-button trix-button--icon trix-button--icon-color" data-trix-action="x-color" title="Color" tabindex="-1"></button>';

var dialogHTML = '<div class="trix-dialog trix-dialog--color centered" data-trix-dialog="x-color"> <div> <bc-color-picker class="color-picker color-picker--for-text color-picker--for-text-foreground" name="foregroundColor" color="#887626 #B95E06 #CF0000 #D81CAA #9013FE #0562B9 #118A0F #945216 #666666"> <label class="color-picker__field" data-role="color_picker_field"> <button class="color-picker__swatch border-0" style="background-color: #887626; color: #887626;" data-trix-attribute="coloryellow"></button> </label> <label class="color-picker__field" data-role="color_picker_field"> <button class="color-picker__swatch border-0" style="background-color: #b95e06; color: #b95e06;" data-trix-attribute="colororange"></button> </label> <label class="color-picker__field" data-role="color_picker_field"> <button class="color-picker__swatch border-0" style="background-color: #cf0000; color: #cf0000;" data-trix-attribute="colorred"></button> </label> <label class="color-picker__field" data-role="color_picker_field"> <button class="color-picker__swatch border-0" style="background-color: #d81caa; color: #d81caa;" data-trix-attribute="colorpink"></button> </label> <label class="color-picker__field" data-role="color_picker_field"> <button class="color-picker__swatch border-0" style="background-color: #9013FE; color: #9013FE;" data-trix-attribute="colorpurple"></button> </label> <label class="color-picker__field" data-role="color_picker_field"> <button class="color-picker__swatch border-0" style="background-color: #0562B9; color: #0562B9;" data-trix-attribute="colorblue"></button> </label> <label class="color-picker__field" data-role="color_picker_field"> <button class="color-picker__swatch border-0" style="background-color: #118a0f; color: #118a0f;" data-trix-attribute="colorgreen"></button> </label> </bc-color-picker> </div> <div class="push_quarter--top"> <bc-color-picker class="color-picker color-picker--for-text color-picker--for-text-background" name="backgroundColor" color="#FAF785 #FFF0DB #FFE5E5 #FFE4F7 #F2EDFF #E1EFFC #E4F8E2 #EEE2D7 #F2F2F2"> <label class="color-picker__field" data-role="color_picker_field"> <button class="color-picker__swatch border-0" style="background-color: #887626; color: #887626;" data-trix-attribute="bkyellow"></button> </label> <label class="color-picker__field" data-role="color_picker_field"> <button class="color-picker__swatch border-0" style="background-color: #b95e06; color: #b95e06;" data-trix-attribute="bkorange"></button> </label> <label class="color-picker__field" data-role="color_picker_field"> <button class="color-picker__swatch border-0" style="background-color: #cf0000; color: #cf0000;" data-trix-attribute="bkred"></button> </label> <label class="color-picker__field" data-role="color_picker_field"> <button class="color-picker__swatch border-0" style="background-color: #d81caa; color: #d81caa;" data-trix-attribute="bkpink"></button> </label> <label class="color-picker__field" data-role="color_picker_field"> <button class="color-picker__swatch border-0" style="background-color: #9013FE; color: #9013FE;" data-trix-attribute="bkpurple"></button> </label> <label class="color-picker__field" data-role="color_picker_field"> <button class="color-picker__swatch border-0" style="background-color: #0562B9; color: #0562B9;" data-trix-attribute="bkblue"></button> </label> <label class="color-picker__field" data-role="color_picker_field"> <button class="color-picker__swatch border-0" style="background-color: #118a0f; color: #118a0f;" data-trix-attribute="bkgreen"></button> </label> </bc-color-picker> </div> </div>';

event.target.toolbarElement.querySelector(".trix-button-group--text-tools").insertAdjacentHTML("beforeend", buttonHTML);
event.target.toolbarElement.querySelector("[data-trix-dialogs]").insertAdjacentHTML("beforeend", dialogHTML);
});

Trix.config.textAttributes.span = {
       tagName: "span",
       inheritable: true,
       parser: (element) => {
        element.allowedAttributes = 'style'
       }
};


Trix.config.textAttributes.red = {
  style: { color: "red" },
  parser: element => element.style.color == "red",
  inheritable: true
}
Trix.config.textAttributes.foregroundColor={styleProperty:"coloration",inheritable:1}
Trix.config.textAttributes.Color={styleProperty:"color",inheritable:1}
Trix.config.textAttributes.backgroundColor={styleProperty:"background-color",inheritable:1}
addEventListener("trix-initialize", event => {
  const buttons = event.target.toolbarElement.querySelector(".trix-button-group--text-tools")
  buttons.insertAdjacentHTML("beforeend", `<button type="button" class="trix-button" data-trix-attribute="red" tabindex="-1">RED</button>`)
});
*/

Trix.config.textAttributes.backgroundColor = {
  styleProperty: 'backgroundColor',
  inheritable: true
}

Trix.config.textAttributes.foregroundColor = {
  styleProperty: 'color',
  inheritable: true
}

function backgroundColorButtons(){
  return `<style>input.backgroundColorPicker::-webkit-color-swatch {
      border: none!important;
      }input.backgroundColorPicker::-moz-color-swatch {
          border: none!important;
      }</style>
          <div class="botoes-top-background-color-background" style="margin-top: 4px;">
            <div class="board-color-list" style="display:none;height:20px;position: absolute;padding-top:20px;">
              <label class="board-control" style="background-color:#ec0909;width: 45px;height: 45px;border-radius: 10px;cursor: pointer;">
                <input type="color" style="-webkit-appearance: none;-moz-appearance: none;appearance: none;background-color: transparent;border: none;cursor: pointer;height: 100%;width: 100%;" data-trix-target="backgroundColorPicker" class="backgroundColorPicker" data-action="trix#backgroundColorChanged" value="#ec0909">
              </label>
            </div>
            <button type="button" class="trix-button openBackgroundColorPicker"  title="Text color">
              <span class="icon"><i class="fas fa-fill-drip fa-lg"></i></span>
            </button>
          </div>`;
}

function foregroundColorButtons () {
    return `<style>input.foregroundColorPicker::-webkit-color-swatch {
    border: none!important;
    }input.foregroundColorPicker::-moz-color-swatch {
        border: none!important;
    }</style>
        <div class="botoes-top-background-color-cor" style="margin-top: 4px;">
          <div class="board-color-list" style="display:none;height:20px;position: absolute;padding-top:20px;">
            <label class="board-control" style="background-color:#ec0909;width: 45px;height: 45px;border-radius: 10px;cursor: pointer;">
              <input type="color" style="-webkit-appearance: none;-moz-appearance: none;appearance: none;background-color: transparent;border: none;cursor: pointer;height: 100%;width: 100%;" data-trix-target="foregroundColorPicker" class="foregroundColorPicker" data-action="trix#foregroundColorChanged" value="#ec0909">
            </label>
          </div>
          <button type="button" class="trix-button openForegroundColorPicker"  title="Text color">
            <span class="icon"><i class="fas fa-palette fa-lg"></i></span>
          </button>
        </div>`;
}

$(document).on("click input keyup hover change", ".foregroundColorPicker,.backgroundColorPicker", function(){
  var parent = jQuery(this).parent();
  var state = $(this).val();
  parent.css("background-color",state);
});

$(document).on("change",'.backgroundColorPicker',function(){
  var cor_selec = $(this).val();
  $(".botoes-top-background-color-background .board-color-list").hide();
  var element = document.querySelector("trix-editor");
  element.editor.activateAttribute('backgroundColor',cor_selec);
});

$(document).on("change",'.foregroundColorPicker',function(){
  var cor_selec = $(this).val();
  $(".botoes-top-background-color-cor .board-color-list").hide();
  var element = document.querySelector("trix-editor");
  element.editor.activateAttribute('foregroundColor',cor_selec);
});

$(document).on("click",'.openBackgroundColorPicker',function(){
  $(".botoes-top-background-color-cor .board-color-list").hide();
  $(".botoes-top-background-color-background .board-color-list").toggle();
});

$(document).on("click",'.openForegroundColorPicker',function(){
  $(".botoes-top-background-color-background .board-color-list").hide();
  $(".botoes-top-background-color-cor .board-color-list").toggle();
});

addEventListener("trix-initialize", function(event) {
  event.target.toolbarElement.querySelector('.trix-button-group.trix-button-group--text-tools').insertAdjacentHTML('beforeend', foregroundColorButtons());
  event.target.toolbarElement.querySelector('.trix-button-group.trix-button-group--text-tools').insertAdjacentHTML('beforeend', backgroundColorButtons());
});
