CODEWITHSUNDEEP
javascriptjquery
Top World
Top World

Reputation: 93

Make text color of colorpicker value

I need your help. I have button. With the press on it I can make text. With click on this text I can edit this text. And I have colorpicker. I need, when I choose color the text which I created also will change color(it will change on this value of colorpicker) I don't know how to do this. Help me please

function addText() {
    var type = $(".select-txt").val();
    var align = $(".form-align").val();
    var float = "text-align:";
    var id = Date.now();
    var editBlock = "$('.edit-block')";
    var display = ",'block'";
    var colorValue = $(".color").val();
    var color = "color:";
    var closeTag = ";";
    var onclick = "onclick="+editBlock+".css('display'"+display+");";
    var ordinary = "<div class='text-"+align+"' id="+id+" "+onclick+" contenteditable style="+float+align+closeTag+
    ">text</div>";
    var h = "<"+type+" class='text-"+align+"' id="+id+" "+onclick+" contenteditable style="+float+align+">text</"+type+">";
    

    if(type == "ordinary") {
       $(".preview").append(ordinary);
 
    } 
    else if(type.startsWith("h")) {
      $(".preview").append(h);
    }


    $(".color").minicolors({
        defaultValue: "#000"
      });
      $(".color").on("change", function() {
        var colorValue = $(".color").val();
        ordinary.append(color+colorValue);
      });

    }
  function showTextWindow() {
      var modal = $(".modal-txt-container");
      if (modal.css('display', "none")) {
        modal.css('display', "grid");
      }
      else {
        modal.css('display', "none");
      }
  }

  function showTextWindow() {
    var modal = document.querySelector(".modal-txt-container"); 
    if (modal.currentStyle) {
        var displayStyle = modal.currentStyle.display;
    } else if (window.getComputedStyle) {
        var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display");
    }

    if (displayStyle == "none") {
        modal.style.display = "grid";
    }
    else {
        modal.style.display = "none";
    }
}

function showElement() {
    var modal = document.querySelector(".choose-option"); 
    var add = document.querySelector('.add');
    if (modal.currentStyle) {
        var displayStyle = modal.currentStyle.display;
    } else if (window.getComputedStyle) {
        var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display");
    }

    if (displayStyle == "none") {
        modal.style.display = "grid";
    }
    else {
        modal.style.display = "none";
        add.style.display = "block";
    }
}
* {
    outline: none;
    padding: 0;
    margin: 0;
  }
  .choose-option {
      background-color: #352a2c;
      position: fixed;
      color: white;
      font-family: 'Scada', sans-serif;
      padding: 15px;
      width: 14%;
  }
  .insert-txt-block {
      padding-bottom: 3%;
      font-size: 1.3em;
  }
  .btn-txt::before {
    content: '\f031';
    font-family: "fontAwesome";
    margin-right: 3%;
}
.btn-txt {
    font-size: 1.2em;
    list-style: none;
    transition: 0.1s;
    padding: 5px;
}
.btn-txt:hover {
  background-color: #727272;
}
.modal-insert-txt {
    background-color: #352a2c;
    color: white;  
    font-family: 'Scada', sans-serif;  
    padding: 20px;
    padding-right: 25px;
    width: 130%;
    border-radius: 4px;
}
.modal-txt-container {
    display: grid;
    justify-content: center;   
    right: 0;   
    left: 0;  
    position: fixed;
    top: 15%;
    display: none;
}
.container {
  position: fixed;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: 0;
    box-shadow: none;
    border: 0 !important;
    background-image: none;
    width: 85%;
    height: 100%;
    margin: 0;
    padding: 0 0 0 .5em;
    cursor: pointer;
    color: black;
    background: white;
    border-radius: 1px 0px 0px 1px;
}
.form-group::after {
    content: '\25BC';
    position: absolute;
    padding: 0 0.5em;
    background: rgb(59, 61, 52);
    pointer-events: none;
    line-height: 1.7em;
    -webkit-transition: .25s all ease;
    -o-transition: .25s all ease;
    transition: .25s all ease;
    color: white;
}
.form-group {
    position: relative;
display: block;
height: 1.7em;
margin: 1% 0% 5% 0;
border: 1px solid #272822;
}
.btn-insert-txt {
    border: none;
    color: white;
    background: #ff5959;
    padding: 5px;
    font-size: 1.01em; 
    border-radius: 2px;
    cursor: pointer;
}
.btn-insert-txt:hover {
    background: #e54040;
}
.modal-insert-txt span {
    font-size: 1.1em;
}
.modal-insert-txt h2 {
    padding-bottom: 2%;
}
.modal-insert-txt hr {
    margin-bottom: 3%;
}
.flex-close-title {
    display: flex;
    justify-content: space-around;
}
.type-insert li {
    cursor: pointer;
}
.close {
    font-size: 1.7em;
    margin-top: -1%;
    cursor: pointer;
}
.close::after {
    content: '\f057';
    font-family: "fontAwesome";
    color: #ff5959;
}
.add {
    font-size: 2em;
    cursor: pointer;
    display: none;
    position: fixed;
    left: 1%;
    top: 2%;
}
.add::after {
    content: '\f055';
    font-family: "fontAwesome";
    color: #ff5959;
}
#textarea-edit {
    width: 80%;
height: 100px;
resize: none;
border: 2px solid #3B3D45;
background: #3B3D45;
color: white;
padding: 4%;
font-size: 1.05em;
border-radius: 4px;
display: flex;
justify-content: center;
position: relative;
top: 1%;
}
.edit-block {
    background: #272822;
    width: 20%;
    height: 100vh;
    float: right;
    color: white;
    font-family: 'Scada', sans-serif;  
    padding: 20px;
    display: none;
    position: fixed;
top: 0;
right: 0;
}
.edit-block span {
    font-size: 1.3em;
}
.minicolors-theme-default .minicolors-input {
    height: 29px !important;
    padding-left: 30px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Site Bilder</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Scada:400,700&amp;subset=cyrillic" rel="stylesheet"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.css">
</head>
<body>

  <span class="add" onclick="showElement()"></span>

<div class="choose-option">
     
<div class="flex-close-title">
<div class="insert-txt-block">Insert elements</div>
     <span class="close" onclick="showElement()"></span>
</div>
      <ul class="type-insert">
      <li class="btn-txt" onclick="showTextWindow()">Text</li>
      </ul>

      </div>

      <div class="modal-txt-container">
<div class="modal-insert-txt">
<h2>Insert text</h2>
<hr>
          <span>Тип Текста</span>
           <div class="form-group">
          <select class="select-txt">
            <option value="ordinary" selected>Plain text</option>
            <option value="h1">h1</option>
            <option value="h2">h2</option>
            <option value="h3">h3</option>
            <option value="h4">h4</option>
            <option value="h5">h5</option>
            <option value="h6">h6</option>
          </select>
        </div>
        
          <span>Text alignment</span>
          <div class="form-group">  
          <select class="form-align">
            <option value="left">left</option>
            <option value="center">Center</option>
            <option value="right">right</option>
          </select>
        </div>

         <div class="modal-footer">
        <button type="button" class="btn-insert-txt" onclick="addText()">Insert text</button>
      </div>
      </div>
        </div>


    <div class="preview">


</div>

<div class="edit-block">
<div class="wrap">
<span class="title-textarea">
Цвет
</span>
        <input type="text" id="hue" class="color" data-control="hue">
      </div>
      
</div>

  <script src="js/app.js"></script>  
</body>
</html>

Upvotes: 1

Views: 169

Answers (1)

Andy Cormack
Andy Cormack

Reputation: 150

The solution I decided on is simple enough, I add a class to know which piece of text I'm currently editing, and then set the color CSS attribute to the colour picker's selection for that selected class.

So your onclick is now:

var onclick = 'onclick="editTextColour(this)"';

I made a new function to handle the basics, (this) as the param for onclick is treated as the element that calls it:

function editTextColour(elem) {
    $('.editing').removeClass('editing');
    $(elem).addClass('editing');
    $('.edit-block').show();
}

And then your change event for the color picker is just this:

$(".color").on("change", function() {
    var colorValue = $(".color").val();
    $('.preview .editing').css('color', colorValue);
});

JSFiddle

Upvotes: 2

Related Questions