Buffer Pablo like social media graphic designer

buffer-pablo-like-social-media-graphic-designer.markdown

Buffer Pablo like social media graphic designer

An idea to create social media graphics easily

A Pen by Amir Yousefi on CodePen.

License.

index.html

<main>
  <div class="container">
    <div class="row">
      <div class="col-4">
        <div class="row">
          <div class="col-12">
            <div class="input-group mb-3">
              <input type="text" class="form-control" id="search-text" placeholder="Find free images right from Unsplash">
              <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button" id="image-search">Search!</button>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="card d-none" id="card-image-clone">
            <img class="card-img" data-full="" src="">
          </div>
          <div class="col mb-3" id="image-container">
            <div class="card">
              <img class="card-img" data-full="https://images.unsplash.com/photo-1536431311719-398b6704d4cc?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" src="https://images.unsplash.com/photo-1536431311719-398b6704d4cc?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
            </div>
            <div class="card">
              <img class="card-img" data-full="https://images.unsplash.com/photo-1527061011665-3652c757a4d4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" src="https://images.unsplash.com/photo-1527061011665-3652c757a4d4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
            </div>
            <div class="card">
              <img class="card-img" data-full="https://images.unsplash.com/photo-1475724017904-b712052c192a?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" src="https://images.unsplash.com/photo-1475724017904-b712052c192a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="btn-group btn-group-sm mb-3 filters">
              <button type="button" class="btn" disabled>Filters </button>
              <button type="button" class="btn btn-light" data-filter="none">None</button>
              <button type="button" class="btn btn-secondary" data-filter="light">Light</button>
              <button type="button" class="btn btn-dark" data-filter="heavy">Heavy</button>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="btn-group btn-group-sm mb-3 colors">
              <button type="button" class="btn" disabled>Colors </button>
              <button type="button" class="btn btn-light" data-color="dee2e6"><span style="background:#dee2e6"></span></button>
              <button type="button" class="btn btn-light" data-color="6c757d"><span style="background:#6c757d"></span></button>
              <button type="button" class="btn btn-light" data-color="1e1f26"><span style="background:#1e1f26"></span></button>
              <button type="button" class="btn btn-light" data-color="dc3545"><span style="background:#dc3545"></span></button>
              <button type="button" class="btn btn-light" data-color="007bff"><span style="background:#007bff"></span></button>
              <button type="button" class="btn btn-light" data-color="47cf73"><span style="background:#47cf73"></span></button>
              <button type="button" class="btn btn-light" data-color="ffdd40"><span style="background:#ffdd40"></span></button>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="btn-group btn-group-sm mb-3 styles">
              <button type="button" class="btn btn-light" data-style="regular"><span style="">R</span></button>
              <button type="button" class="btn btn-light" data-style="bold"><i class="fas fa-bold"></i></button>
              <button type="button" class="btn btn-light" data-style="italic"><i class="fas fa-italic"></i></button>
            </div>
            <div class="btn-group btn-group-sm mb-3 sizes">
              <button type="button" class="btn btn-light" data-size="16"><span style="font-size:10px;">A</span></button>
              <button type="button" class="btn btn-light" data-size="18"><span style="font-size:12px;">A</span></button>
              <button type="button" class="btn btn-light" data-size="24"><span style="font-size:14px;">A</span></button>
            </div>
            <div class="btn-group btn-group-sm mb-3 aligns">
              <button type="button" class="btn btn-light" data-align="left"><i class="fas fa-align-left"></i></button>
              <button type="button" class="btn btn-light" data-align="center"><i class="fas fa-align-center"></i></button>
              <button type="button" class="btn btn-light" data-align="right"><i class="fas fa-align-right"></i></button>
            </div>
          </div>
        </div>
      </div>
      <div class="col-8">
        <div id='canvas-container'>
          <div class="filter-light" id="canvas-filter"></div>
          <div id="float-editor" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");'>
            <textarea>A Good Quote(click to edit)</textarea>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
<footer>

</footer>

script.js

var mydragg = (function() {
  return {
    move: function(divid, xpos, ypos) {
      $("#float-editor").css("left", xpos + "px");
      $("#float-editor").css("top", ypos + "px");
    },

    startMoving: function(divid, container, evt) {
      evt = evt || window.event;
      var fe_pos = $("#float-editor").position();
      var posX = evt.clientX, //mouse position on the X axis
        posY = evt.clientY, //mouse position on the Y axis
        divTop = fe_pos.top,
        divLeft = fe_pos.left,
        eWi = parseInt($("#float-editor").width()),
        eHe = parseInt($("#float-editor").height()),
        cWi = parseInt($("#canvas-container").width()),
        cHe = parseInt($("#canvas-container").height());

      $("#canvas-container").css("cursor", "move"); //styles mouse pointer

      var diffX = posX - divLeft, //saves the delta between the mouse pointer Xposition and the Top of the div
        diffY = posY - divTop; //same but for the Y axis
      document.onmousemove = function(evt) {
        evt = evt || window.event;
        var posX = evt.clientX,
          posY = evt.clientY,
          aX = posX - diffX, //new position, X
          aY = posY - diffY; //new position, Y
        if (aX < 0) aX = 0;
        if (aY < 0) aY = 0; //left border
        if (aX + eWi > cWi) aX = cWi - eWi; //right border
        if (aY + eHe > cHe) aY = cHe - eHe; //top border
        mydragg.move(divid, aX, aY);
      };
      //
    },

    stopMoving: function(container) {
      var a = document.createElement("script"); //not sure for what this is used
      $("#canvas-container").css("cursor", "default"); //resets the mouse pointer to default
      document.onmousemove = function() {}; //when mouse click is lifted, the event listener for mouse move becomes an empty function
    }
  };
})();

function unsplash(query) {
  $.get(
    "https://api.unsplash.com/search/photos?client_id=2ade7f9d83816b22a6953cb28d5e83bd3cfc0b264b693bde6b08838febe0b77d&page=1&query=" +
      query,
    function(data) {
      var result = data["results"];
      $("#image-container")
        .find(".card")
        .remove();
      $.each(result, function(index, item) {
        var smallUrl = item["urls"]["small"];
        var fullUrl = item["urls"]["regular"];

        var newImageCard = $("#card-image-clone").clone();
        newImageCard.find("img").attr("src", smallUrl);
        newImageCard.find("img").attr("data-full", fullUrl);
        newImageCard.removeAttr("id").removeClass("d-none");
        $("#image-container").append(newImageCard);
      });
    }
  );
}

$("#image-container").on("click", ".card", function() {
  var img = $(this).find("img");
  var imgSrc = img.attr("data-full");
  $("#canvas-container").css("background-image", "url(" + imgSrc + ")");
});

$("#save-result").on("click", function() {
  var textEditor = $("#float-editor");
  var text = textEditor.find("textarea").text();
  console.log({ text: text, position: textEditor.position() });
});

$("#image-search").on("click", function() {
  var query = $("#search-text").val();
  if (!query) {
    alert("Pleaase enter something to search");
  } else {
    unsplash(query);
  }
});

$(".filters button").on("click", function() {
  var filter = $(this).attr("data-filter");
  if (filter == "none") {
    $("#canvas-filter").removeAttr("class");
  } else if (filter == "light") {
    $("#canvas-filter")
      .removeAttr("class")
      .addClass("filter-light");
  } else if (filter == "heavy") {
    $("#canvas-filter")
      .removeAttr("class")
      .addClass("filter-heavy");
  }
});

$(".colors button").on("click", function() {
  var color = $(this).attr("data-color");
  $("#float-editor")
    .find("textarea")
    .css("color", "#" + color);
});

$(".styles button").on("click", function() {
  var style = $(this).attr("data-style");
  if (style == "regular") {
    $("#float-editor")
      .find("textarea")
      .removeAttr("class");
  } else if (style == "bold") {
    $("#float-editor")
      .find("textarea")
      .removeAttr("class")
      .addClass("text-bold");
  } else if (style == "italic") {
    $("#float-editor")
      .find("textarea")
      .removeAttr("class")
      .addClass("text-italic");
  }
});

$(".sizes button").on("click", function() {
  var size = $(this).attr("data-size");
  $("#float-editor")
    .find("textarea")
    .css("font-size", size + "px");
});

$(".aligns button").on("click", function() {
  var align = $(this).attr("data-align");
  $("#float-editor")
    .find("textarea")
    .css("text-align", align);
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.less

main{
  margin-top:40px;
}
#image-container {
  height: 400px;
  overflow-y: scroll;
}

#image-container::-webkit-scrollbar {
  width: 5px;
}

/* Track */
#image-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
#image-container::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
#image-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#canvas-container {
  position: relative;
  background-image: url("https://images.unsplash.com/photo-1536431311719-398b6704d4cc?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
  height: 612px;
  width: 612px;
  background-size: cover;
  background-repeat: no-repeat;
  margin:0 auto;
}
#editor-container {
  position: absolute;
}
#float-editor {
  width: 400px;
  height: 100px;
  top: 150px;
  left: 200px;
  position: relative;

  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

#float-editor textarea {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: none;
  color: #fff;
  padding: 3px;
  margin: 0;
  resize: none;
  background: transparent;
}
#canvas-filter {
  position: absolute;
  width: 100%;
  height: 100%;
}

.filter-heavy {
  background: rgba(0, 0, 0, 0.5);
}

.filter-light {
  background: rgba(0, 0, 0, 0.2);
}

.colors button span {
  width: 15px;
  height: 15px;
  display: block;
  border-radius: 3px;
}

.text-bold {
  font-weight: bold;
}

.text-italic {
  font-style: italic;
}

styles

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet" />