A Pen by Bernhard Bücherl.

about-this-pen.markdown

about this pen

codepen utility for an simple information tooltip about the pen and the author

A Pen by Bernhard Bücherl on CodePen.

License.

index.html

<!--
Include this in your pen: https://rawgit.com/bbuecherl/1f9c8698fc02fbc5ad03/raw/2306ab52003977f1fa68901216235dee05a3c89d/script.js

Then configure utils.about to your needs:
-->
<script>
window.addEventListener("load",function() {
  window.utils.about({
    user: {
      name: "bbuecherl",
      twitter: "bbuecherl",
      github: "bbuecherl",
      pinterest: "bbuecherl",
      stackoverflow: "995320/bbuecherl",
      url: "http://bbuecherl.de"
    },
    title: "codepen-utils",
    info: "A utility library for codepen"
  });
},false);
</script>

  

script.js

/*! codepen-utils by bbuecherl */
var $warn = function(w) { console && console.warn("codepen-utils: " + w); };

window.utils = {
  about: (function() {
    var socials = {
      codepen: "http://codepen.io/%",
      twitter: "http://twitter.com/%",
      github: "https://github.com/%",
      dribbble: "http://dribbble.com/%",
      pinterest: "http://pinterest.com/%",
      "stack-overflow": "http://stackoverflow.com/users/%",
      tumblr: "http://%.tumblr.com/",
      flickr: "http://flickr.com/photos/%",
      globe: "%"
    };

    return function(options) {
      // prepare options
      if(!options.user)
        $warn("user not set");

      var shown = true,
          toggle = function() {
            if(shown)
              overlay.style.display = popup.style.display = "none";
            else
              overlay.style.display = popup.style.display = "block";
            shown = !shown;
          },
          about = document.createElement("div"),
          overlay = document.createElement("div"),
          popup = document.createElement("div"),
          popup_title = document.createElement("div"),
          popup_info = document.createElement("div"),
          popup_by = document.createElement("div");
      about.className = "codepen__utils-about-button fa fa-info";
      about.title = "About " + options.title + " by " + options.user.name;
      popup.className = "codepen__utils-about-popup";
      overlay.className = "codepen__utils-about-overlay";
      popup_title.className = "codepen__utils-about-title";
      popup_info.className = "codepen__utils-about-info";
      popup_by.className = "codepen__utils-about-by";
      
      overlay.style.opacity = options.overlay || 0.1;

      //by
      var by = "<span>by " + options.user.name + "</span>"; 
      options.user.codepen = options.user.codpen || options.user.name;
      options.user.globe = options.user.url;
      for(var s in socials) {
        var ns = s.replace(/-/g, "");
        if(options.user[ns])
          by += " <a href=\"" + socials[s].replace("%", options.user[ns]) + "\" class=\"fa fa-" + s + "\" target=\"_blank\"></a>";    
      }

      popup_title.innerHTML = options.title || document.getElementsByTagName("title")[0].innerHTML;      
      popup.appendChild(popup_title);
      
      if(options.info) {
        popup_info.innerHTML = options.info;
        popup.appendChild(popup_info);
      }

      popup_by.innerHTML = by;
      popup.appendChild(popup_by);
      
      document.body.appendChild(about);
      document.body.appendChild(overlay);
      document.body.appendChild(popup);
      
      about.addEventListener("click", toggle, false);
      overlay.addEventListener("click", toggle, false);
      toggle();
    };
  }())
};

var utils_style = document.createElement("link");
utils_style.rel = "stylesheet";
utils_style.href = "https://rawgit.com/bbuecherl/1f9c8698fc02fbc5ad03/raw/6bc912480979f469bad7279c7b1d88dab55ef168/style.css";

document.getElementsByTagName("head")[0].appendChild(utils_style);

style.css

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

.codepen__utils-about-button {
  font-size: 40px;
  position: fixed;
  z-index: 100001;
  -webkit-transform: translateZ(100001px);
          transform: translateZ(100001px);
  left: 32px;
  bottom: 32px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  padding: 8px;
  background: #180F26;
  color: #A9C06D;
  cursor: pointer;
}

.codepen__utils-about-overlay {
  position: fixed;
  z-index: 100000;
  -webkit-transform: translateZ(100000px);
          transform: translateZ(100000px);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #180F26;
  cursor: pointer;
}

.codepen__utils-about-popup {
  position: fixed;
  z-index: 100002;
  -webkit-transform: translateZ(100002px);
          transform: translateZ(100002px);
  left: 102px;
  bottom: 32px;
  width: 256px;
  min-height: 48px;
  padding: 10px;
  background: #A9C06D;
  color: #180F26;
}
.codepen__utils-about-popup::before {
  width: 16px;
  height: 16px;
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  background: #A9C06D;
  margin-left: -16px;
  margin-bottom: 22.5px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.codepen__utils-about-popup .codepen__utils-about-title {
  font: normal normal normal 28px Source Sans Pro;
  line-height: 32px;
  padding-bottom: 4px;
  border-bottom: 1px solid #6D612F;
}
.codepen__utils-about-popup .codepen__utils-about-info {
  padding: 4px 0;
  border-bottom: 1px solid #6D612F;
  line-height: 24px;
  font: normal normal normal 16px Source Sans Pro;
}
.codepen__utils-about-popup .codepen__utils-about-by {
  padding-top: 4px;
}
.codepen__utils-about-popup .codepen__utils-about-by span {
  font: italic normal normal 13px Source Sans Pro;
  line-height: 16px;
  padding: 4px;
  display: block;
  float: left;
  color: #6D612F;
}
.codepen__utils-about-popup .codepen__utils-about-by a {
  color: #03314A;
  text-decoration: none;
  font-size: 16px;
  line-height: 16px;
  float: right;
  padding: 4px;
  display: block;
}

style.scss

$color__bg: #180F26;
$color__base: #A9C06D;
$color__medium: #6D612F;
$color__social: #03314A;

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400);

.codepen__utils-about-button {
  font-size: 40px;
  position: fixed;
  z-index: 100001;
  transform: translateZ(100001px);
  left: 32px;
  bottom: 32px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  padding: 8px;
  background: $color__bg;
  color: $color__base;
  cursor: pointer;
}

.codepen__utils-about-overlay {
  position: fixed;
  z-index: 100000;
  transform: translateZ(100000px);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: $color__bg;
  cursor: pointer;
}

.codepen__utils-about-popup {
  position: fixed;
  z-index: 100002;
  transform: translateZ(100002px);
  left: 102px;
  bottom: 32px;
  width: 200px;
  min-height: 48px;
  padding: 10px;
  background: $color__base;
  color: $color__bg;
  
  &::before {
    width: 16px;
    height: 16px;
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    background: $color__base;
    margin-left: -16px;
    margin-bottom: 22.5px;
    transform: rotate(45deg);
  }
  
  .codepen__utils-about-title {
    font: normal normal normal 28px Source Sans Pro;
    line-height: 32px;
    padding-bottom: 4px;
    border-bottom: 1px solid $color__medium;
  }
  
  .codepen__utils-about-info {
    padding: 4px 0;
    border-bottom: 1px solid $color__medium;
    line-height: 24px;
    font: normal normal normal 16px Source Sans Pro;
  }
  
  .codepen__utils-about-by {
    padding-top: 4px;
    
    span {
      font: italic normal normal 13px Source Sans Pro;
      line-height: 16px;
      padding: 4px;
      display: block;
      float: left;
      color: $color__medium;
    }

    
    a {
      color: $color__social;
      text-decoration: none;
      font-size: 16px;
      line-height: 16px;
      float: right;
      padding: 4px;
      display: block;
    }
  }
}

wBwNJP.markdown

wBwNJP

A Pen by Bernhard Bücherl on CodePen.

License.