Social Media Input for BP

index.html

<div id="overlay" style="display: none;"></div>
<a id="enterSocialMedia">Add Social Media</a>
<div id="socialMediaPreview">
  <ul></ul>
</div>
<div id="socialMedia">
  <a class="close">X</a>
  <div class="cell">
    <span>Facebook</span>
    <input class="name" type="hidden" value="Facebook" />
    <input class="url" type="text" />
  </div>
  <div class="cell">
    <span>Google+</span>
    <input class="name" type="hidden" value="Google+" />
    <input class="url" type="text" />
  </div>
  <div class="cell">
    <span>Instagram</span>
    <input class="name" type="hidden" value="Instagram" />
    <input class="url" type="text" />
  </div>
  <div class="cell">
    <span>LinkedIn</span>
    <input class="name" type="hidden" value="LinkedIn" />
    <input class="url" type="text" />
  </div>
  <div class="cell">
    <span>Twitter</span>
    <input class="name" type="hidden" value="Twitter" />
    <input class="url" type="text" />
  </div>
  <div class="cell">
    <span>Pinterest</span>
    <input class="name" type="hidden" value="Pinterest" />
    <input class="url" type="text" />
  </div>
  <div class="cell">
    <span>YouTube</span>
    <input class="name" type="hidden" value="YouTube" />
    <input class="url" type="text" />
  </div>
  <div class="cell">
    <span>RSS Feed</span>
    <input class="name" type="hidden" value="RSS Feed" />
    <input class="url" type="text" />
  </div>
  <div class="cell">
    <span>Blogger</span>
    <input class="name" type="hidden" value="Blogger" />
    <input class="url" type="text" />
  </div>
  <div class="cell">
    <span>Yelp</span>
    <input class="name" type="hidden" value="Yelp" />
    <input class="url" type="text" />
  </div>
  <div class="cell">
    <span>Angie's List</span>
    <input class="name" type="hidden" value="Angie's List" />
    <input class="url" type="text" />
  </div>
</div>
<!--socialMedia-->

<!---------------------------------->

<br />
<br />
<br />
<button id="test">Click</button>

script.js

$(document).ready(function(){
  $("#enterSocialMedia").click(function(){
    $("#socialMedia").addClass("open");
    $("#overlay").show();
  });
  $("#socialMedia a.close, #socialMedia a.submit").click(function(){
    $("#socialMedia").removeClass("open");
    $("#socialMediaPreview ul").empty();
    $("#overlay").hide();
    var socialMedia = []
    var emptycount = 0;
    $("#socialMedia div.cell input.url").each(function(){
      if(!$(this).val() == ""){
        emptycount++
        var socialsite = $(this).prev().val();
        var sociallink = $(this).val();
        $("<li>"+socialsite+": <a href='"+sociallink+"'>"+sociallink+"</a></li>")
          .appendTo("#socialMediaPreview ul");
      }
    });
    if (emptycount > 0){
      $("#enterSocialMedia").text("Edit Social Media");
    } else {
      $("#enterSocialMedia").text("Add Social Media");
    }
  });
  $("#test").click(function(){
    var smcount = 1;
    $("#socialMedia div.cell input.url").each(function(){
      if(!$(this).val() == ""){
        $(this).prev().attr("name", "blueprint[socialMedia]["+smcount+"][name]");
        $(this).attr("name", "blueprint[socialMedia]["+smcount+"][link]");
        smcount++;
      }
    });
  });
});







//========================WORKING CODE BELOW========================
// $(document).ready(function(){
//   $("#enterSocialMedia").click(function(){
//     $("#socialMedia").addClass("open");
//     $("#overlay").show();
//   });
//   $("#socialMedia a.close").click(function(){
//     $("#socialMedia").removeClass("open");
//     $("#overlay").hide();
//   });
//   $("#test").click(function(){
//     var smcount = 1;
//     $("#socialMedia div.cell input.url").each(function(){
//       if(!$(this).val() == ""){
//         $(this).prev().attr("name", "blueprint[socialMedia]["+smcount+"][name]");
//         $(this).attr("name", "blueprint[socialMedia]["+smcount+"][link]");
//         smcount++;
//       }
//     });
//   });
// });

scripts

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

social-media-input-for-bp.markdown

Social Media Input for BP

A Pen by Chase Harrison on CodePen.

License.

style.css

#overlay {z-index: 1999; background-color: #000; position: absolute; height: 100vw; width: 100vw; opacity: .5;}
#enterSocialMedia {cursor: pointer;}
#socialMedia {position: absolute; top: 50%; left: 50%; bottom: auto; right: auto; transform: translate(-50%,-50%); max-height: 0; overflow: hidden; transition: opacity 250ms ease; opacity: 0; background-color: #fff; width: 100%; max-width: 600px;}
#socialMedia.open {opacity: 1; max-height: none; padding: 20px; z-index: 2000;}
#socialMedia a.close {position: absolute; top: 0; right: 0; left: auto; bottom: auto; cursor: pointer;}