diff options
-rw-r--r-- | tpl/linklist.html | 80 |
1 files changed, 60 insertions, 20 deletions
diff --git a/tpl/linklist.html b/tpl/linklist.html index 37ffeb64..bce3fa9f 100644 --- a/tpl/linklist.html +++ b/tpl/linklist.html | |||
@@ -3,11 +3,11 @@ | |||
3 | <head>{include="includes"}</head> | 3 | <head>{include="includes"}</head> |
4 | <body> | 4 | <body> |
5 | <div id="pageheader"> | 5 | <div id="pageheader"> |
6 | {include="page.header"} | 6 | {include="page.header"} |
7 | <div id="headerform" style="width:100%; white-space:nowrap;"> | 7 | <div id="headerform" style="width:100%; white-space:nowrap;"> |
8 | <form method="GET" class="searchform" name="searchform" style="display:inline;"><input type="text" id="searchform_value" name="searchterm" style="width:30%" value=""> <input type="submit" value="Search" class="bigbutton"></form> | 8 | <form method="GET" class="searchform" name="searchform" style="display:inline;"><input type="text" id="searchform_value" name="searchterm" style="width:30%" value=""> <input type="submit" value="Search" class="bigbutton"></form> |
9 | <form method="GET" class="tagfilter" name="tagfilter" style="display:inline;margin-left:24px;"><input type="text" name="searchtags" id="tagfilter_value" style="width:10%" value=""> <input type="submit" value="Filter by tag" class="bigbutton"></form> | 9 | <form method="GET" class="tagfilter" name="tagfilter" style="display:inline;margin-left:24px;"><input type="text" name="searchtags" id="tagfilter_value" style="width:10%" value=""> <input type="submit" value="Filter by tag" class="bigbutton"></form> |
10 | </div> | 10 | </div> |
11 | </div> | 11 | </div> |
12 | 12 | ||
13 | <div id="linklist"> | 13 | <div id="linklist"> |
@@ -48,8 +48,8 @@ | |||
48 | {else} | 48 | {else} |
49 | <span class="linkdate" title="Short link here"><a href="?{$value.linkdate|smallHash}">permalink</a> - </span> | 49 | <span class="linkdate" title="Short link here"><a href="?{$value.linkdate|smallHash}">permalink</a> - </span> |
50 | {/if} | 50 | {/if} |
51 | <div style="position:relative;display:inline;"><a href="http://invx.com/code/qrcode/?code={$scripturl|urlencode}%3F{$value.linkdate|smallHash}&width=200&height=200" | 51 | <div style="position:relative;display:inline;"><a href="http://qrfree.kaywa.com/?l=1&s=8&d={$scripturl|urlencode}%3F{$value.linkdate|smallHash}" |
52 | {if="empty($GLOBALS['disablejquery'])"}onclick="return false;"{/if} class="qrcode"><img src="images/qrcode.png#" width="13" height="13" title="QR-Code"></a></div> - | 52 | onclick="showQrCode(this); return false;" class="qrcode" data-permalink="{$scripturl}?{$value.linkdate|smallHash}"><img src="images/qrcode.png#" width="13" height="13" title="QR-Code"></a></div> - |
53 | <span class="linkurl" title="Short link">{$value.url|htmlspecialchars}</span><br> | 53 | <span class="linkurl" title="Short link">{$value.url|htmlspecialchars}</span><br> |
54 | {if="$value.tags"} | 54 | {if="$value.tags"} |
55 | <div class="linktaglist"> | 55 | <div class="linktaglist"> |
@@ -65,18 +65,58 @@ | |||
65 | 65 | ||
66 | </div> | 66 | </div> |
67 | 67 | ||
68 | {include="page.footer"} | 68 | {include="page.footer"} |
69 | {if="empty($GLOBALS['disablejquery'])"} | 69 | |
70 | <script> | 70 | <script language="JavaScript"> |
71 | $(document).ready(function() { | 71 | |
72 | $('a.qrcode').click(function(){ | 72 | // Remove any displayed QR-Code |
73 | hide_qrcode(); | 73 | function remove_qrcode() |
74 | var link = $(this).attr('href'); | 74 | { |
75 | $(this).after('<div class="qrcode" onclick="hide_qrcode();return false;"><img src="'+link+'#" width="200" height="200"><br>click to close</div>'); | 75 | var elem = document.getElementById("permalinkQrcode"); |
76 | }); | 76 | if (elem) elem.parentNode.removeChild(elem); |
77 | }); | 77 | return false; |
78 | function hide_qrcode() { $('div.qrcode').remove(); } | 78 | } |
79 | |||
80 | // Show the QR-Code of a permalink (when the QR-Code icon is clicked). | ||
81 | function showQrCode(caller,loading=false) | ||
82 | { | ||
83 | // Dynamic javascript lib loading: We only load qr.js if the QR code icon is clicked: | ||
84 | if (typeof(qr)=='undefined') // Load qr.js only if not present. | ||
85 | { | ||
86 | if (!loading) // If javascript lib is still loading, do not append script to body. | ||
87 | { | ||
88 | var element = document.createElement("script"); | ||
89 | element.src = "inc/qr.min.js"; | ||
90 | document.body.appendChild(element); | ||
91 | } | ||
92 | setTimeout(function() { showQrCode(caller,true);}, 200); // Retry in 200 milliseconds. | ||
93 | return false; | ||
94 | } | ||
95 | |||
96 | // Remove previous qrcode if present. | ||
97 | remove_qrcode(); | ||
98 | |||
99 | // Build the div which contains the QR-Code: | ||
100 | var element = document.createElement('div'); | ||
101 | element.id="permalinkQrcode"; | ||
102 | // Make QR-Code div commit sepuku when clicked: | ||
103 | if ( element.attachEvent ){ element.attachEvent('onclick', 'this.parentNode.removeChild(this);' ); } // Damn IE | ||
104 | else { element.setAttribute('onclick', 'this.parentNode.removeChild(this);' ); } | ||
105 | |||
106 | // Build the QR-Code: | ||
107 | var image = qr.image({size: 8,value: caller.dataset.permalink}); | ||
108 | if (image) | ||
109 | { | ||
110 | element.appendChild(image); | ||
111 | element.innerHTML+= "<br>Click to close"; | ||
112 | caller.parentNode.appendChild(element); | ||
113 | } | ||
114 | else | ||
115 | { | ||
116 | element.innerHTML="Your browser does not seem to be HTML5 compatible."; | ||
117 | } | ||
118 | return false; | ||
119 | } | ||
79 | </script> | 120 | </script> |
80 | {/if} | ||
81 | </body> | 121 | </body> |
82 | </html> \ No newline at end of file | 122 | </html> |