link_box.html 6.77 KB
Newer Older
David Haynes's avatar
David Haynes committed
1
2
<!-- load in go templatetags -->
{% load go_extras %}
3

David Haynes's avatar
David Haynes committed
4
5
<!-- load in qr code lib -->
{% load qr_tags %}
Chris Reffett's avatar
Chris Reffett committed
6

Robert Hitt's avatar
Robert Hitt committed
7
8
<!-- CSS for page -->
<style>
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
  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;
  }
David Haynes's avatar
David Haynes committed
70
</style>
Robert Hitt's avatar
Robert Hitt committed
71

David Haynes's avatar
David Haynes committed
72
<!-- each link_box is a container of a bunch of elements -->
73
<div class="container">
74
75
76
77
78
79
80
81
82
83
84
  <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>
85
        </div>
86
87
88
89
90
91
92
      </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 /> 
Zac Wood's avatar
Zac Wood committed
93
      {% if url.owner == request.user.registereduser %}
94
95
        <strong>Clicks:</strong> {{url.clicks}}
        <br />
96

97
        <strong>QR Code Uses:</strong> {{url.qrclicks}}
David Haynes's avatar
David Haynes committed
98
        <br />
David Haynes's avatar
David Haynes committed
99

100
        <strong>Social Media Clicks:</strong> {{url.socialclicks}}
David Haynes's avatar
David Haynes committed
101
        <br />
David Haynes's avatar
David Haynes committed
102

103
104
        <strong>Expires:</strong> {{url.expires|default_if_none:"Never"}}
        <br></br>
David Haynes's avatar
David Haynes committed
105

106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
        <!-- 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>
David Haynes's avatar
David Haynes committed
132

133
134
135
136
            <!-- 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>
137

138
139
140
            <!-- 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>
141
            </a>
142

143
144
145
            <!-- 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>
146
            </a>
147
          {% endwith %}
David Haynes's avatar
David Haynes committed
148

149
150
151
152
153
154
155
156
157
158
          <!-- 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>
159
160
    </div>

161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
    <!--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>
180
    </div>
181
182
183
  {% else %}
  {% endif %}  
  <br></br>
184
</div>
185

Robert Hitt's avatar
Robert Hitt committed
186
187
<!-- script for copying text an displaying a tooltip -->
<script>
188
189
190
191
192
193
194
195
196
  // <!-- 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}}');
Robert Hitt's avatar
Robert Hitt committed
197

198
  $('#copy-button-{{url.short}}').tooltip({
Robert Hitt's avatar
Robert Hitt committed
199
200
    trigger: 'hover',
    placement: 'bottom'
201
  });
Robert Hitt's avatar
Robert Hitt committed
202

203
  $('#copy-button-{{url.short}}').on('hidden.bs.tooltip', function () {
Robert Hitt's avatar
Robert Hitt committed
204
    $('#copy-button-{{url.short}}').attr('data-original-title', 'Copy to Clipboard');
205
  });
Robert Hitt's avatar
Robert Hitt committed
206

207
  clipboard.on('success', function (e) {
Robert Hitt's avatar
Robert Hitt committed
208
209
    e.clearSelection();
    $('#copy-button-{{url.short}}').attr('data-original-title', 'Copied!').tooltip('show');
210
  });
Zac Wood's avatar
Zac Wood committed
211
</script>