link_box.html

<!-- load in go templatetags -->
{% load go_extras %}

<!-- load in qr code lib -->
{% load qr_tags %}

<!-- CSS for page -->
<style>
  a.share:link {
    color: #000000;
  }
  
  a.share:visited {
    color: #000000;
  }
  
  a.share:hover {
    color: #000000;
  }
  
  a.share {
    text-decoration: none;
  }
  
  a.button:link {
    color: #FFF;
  }
  
  a.button:visited {
    color: #FFF;
  }
  
  a.button:hover {
    color: #FFF;
  }
  
  legend {
    font-size: inherit;
  }
  
  #button-container {
    padding-bottom: 4px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 4px;
  }
  
  #copy-button-{{url.short}} {
    border: none;
    background-color: #eeeeee;
    padding-bottom: 3px;
  }
  
  #copy-button-{{url.short}}:focus {
    outline: none;
  }
  
  #clipboard-icon-{{url.short}} {
    font-size: 14px;
  }
  
  #link-{{url.short}}:visited {
    color: #006633;
  }
   
  .tooltip-inner {
    white-space: nowrap;
    max-width: none;
  }
</style>

<!-- each link_box is a container of a bunch of elements -->
<div class="container">
  <div class="row">
    <!-- left -->
    <div class="col-md-6">
      <!-- what is the address? -->
      <h3>Go Address:</h3>
      <div class="input-group">
        <a id="link-{{url.short}}" class="form-control" href="{{domain}}{{url.short}}" target="_blank">{{domain}}{{url.short}}</a>
        <div id="button-container" class="input-group-addon">
          <button id="copy-button-{{url.short}}" type="button" class="button btn btn-default btn-xs fa" role="button" data-clipboard-target="#link-{{url.short}}" title="Copy to Clipboard">
            <i id="clipboard-icon-{{url.short}}" class="fa fa-clipboard fa-1g" aria-hidden="true"></i>
          </button>
        </div>
      </div>

      <!-- what are some details about the address? -->
      <h3>Address Details:</h3>
      <strong>Target URL:</strong>
      <a href="{{url.target}}" target="_blank">{{url.target}}</a>
      <br /> 
      {% if url.owner == request.user.registereduser %}
        <strong>Clicks:</strong> {{url.clicks}}
        <br />

        <strong>QR Code Uses:</strong> {{url.qrclicks}}
        <br />

        <strong>Social Media Clicks:</strong> {{url.socialclicks}}
        <br />

        <strong>Expires:</strong> {{url.expires|default_if_none:"Never"}}
        <br></br>

        <!-- Delete Button  -->
        <a class="button btn btn-danger btn-sm" data-target="#deletionModal-{{url.short}}"
          data-toggle="modal">
          <i class="fa fa-trash-o fa-lg"></i> Delete
        </a>

        <!-- Edit Button -->
        <a href="{{domain}}edit/{{url.short}}" class="button btn btn-info btn-sm">
          <i class="fa fa-cog fa-lg"></i> Edit
        </a>
      </div>
      <!-- right -->
      <div class="col-md-6">
        <h3>Share Address:</h3>
        <!-- define the Go URL as `the_url` -->
        {% with domain|add:url.short as the_url %} 
          <!-- some goofy code to use the qr lib and show the image -->
          {% with the_url|add:"?qr" as qr_url%}
            {% qr_from_text qr_url 's' %} 
          {% endwith %} 
          
          {% with the_url|add:"?social" as social_url %}
            <!-- twitter -->
            <a class="share" href="https://twitter.com/share?url={{ social_url }}" target="_blank" title="Share via Twitter">
              <i class="fa fa-twitter-square fa-3x"></i>
            </a>

            <!-- facebook -->
            <a class="share" href="https://www.facebook.com/share.php?u={{ social_url }}" target="_blank" title="Share via Facebook">
              <i class="fa fa-facebook-square fa-3x"></i>
            </a>

            <!-- g+ -->
            <a class="share" href="https://plus.google.com/share?url={{ social_url }}" target="_blank" title="Share via Google+">
              <i class="fa fa-google-plus-square fa-3x"></i>
            </a>

            <!-- linkedin -->
            <a class="share" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ social_url }}&amp;ro=false&amp;summary=&amp;source=" target="_blank" title="Share via LinkedIn">
              <i class="fa fa-linkedin-square fa-3x"></i>
            </a>
          {% endwith %}

          <!-- list out qr downloads -->
          {% with the_url|add:"?qr" as qr_url %}
            <!-- spacing matters with <pre>, ignore the ugliness -->
            <pre><strong>QR Downloads:</strong>
            <a href="https://chart.googleapis.com/chart?cht=qr&chs=268x268&chl={{ qr_url }}" target="_blank">Small (268x268)</a>
            <a href="https://chart.googleapis.com/chart?cht=qr&chs=383x383&chl={{ qr_url }}" target="_blank">Medium (383x383)</a>
            <a href="https://chart.googleapis.com/chart?cht=qr&chs=547x547&chl={{ qr_url }}" target="_blank">Large (547x547)</a></pre> 
          {% endwith %} 
        {% endwith %}      
      </div>
    </div>

    <!--Define Delete Modal-->
    <div id="deletionModal-{{url.short}}" class="modal fade" role="dialog" tabindex="-1">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content" style="background-color:#f5f5f5; border-radius: 7px">
          <div class="modal-header" style="text-align:center;">
            <h4 class="modal-title  text-center" style="font-weight:bold; font-size: 21px !important;">
              Are you sure you would like to delete this link?</h4>
            <h6 style="font-weight:500; margin-top: 0px; margin-bottom: 0px;">
              Deleting a link is permanent and can not be undone!</h6>
          </div>
          <div class="modal-body" style="padding-bottom: 80px">
            <a type="button" class="btn btn-success btn-lg" style="border-width: 0px;float:left; width:49%; background-color: #A9B0AD; color: #ffffff; border-radius: 4px;"
              data-dismiss="modal">Cancel</a>
            <a type="button" class="btn btn-danger btn-lg" href="{{domain}}delete/{{url.short}}"
              style="border-width: 0px; float:right; width:49%;background-color: #AC1D37; color: #ffffff; border-radius: 4px;">Delete</a>
          </div>
        </div>
      </div>
    </div>
  {% else %}
  {% endif %}  
  <br></br>
</div>

<!-- script for copying text an displaying a tooltip -->
<script>
  // <!-- some inline js for the clipboard hoving text -->
  $(function () {
    var option = {
      'trigger': 'hover'
    };
    $('[data-toggle="popover"]').popover(option)
  })

  var clipboard = new Clipboard('#copy-button-{{url.short}}');

  $('#copy-button-{{url.short}}').tooltip({
    trigger: 'hover',
    placement: 'bottom'
  });

  $('#copy-button-{{url.short}}').on('hidden.bs.tooltip', function () {
    $('#copy-button-{{url.short}}').attr('data-original-title', 'Copy to Clipboard');
  });

  clipboard.on('success', function (e) {
    e.clearSelection();
    $('#copy-button-{{url.short}}').attr('data-original-title', 'Copied!').tooltip('show');
  });
</script>