aboutsummaryrefslogtreecommitdiffhomepage
path: root/plugins
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2015-12-13 20:44:22 +0100
committerArthurHoaro <arthur@hoa.ro>2015-12-21 14:01:52 +0100
commit28a4fc546fd937ba4aef89e2a70bf3e1ae1508d3 (patch)
treea0b3c198f1af5d28d4f8192a958bd1bf6fb7bb0b /plugins
parent79851b489087f8a3027ecd805255cd13ee6fcf63 (diff)
downloadShaarli-28a4fc546fd937ba4aef89e2a70bf3e1ae1508d3.tar.gz
Shaarli-28a4fc546fd937ba4aef89e2a70bf3e1ae1508d3.tar.zst
Shaarli-28a4fc546fd937ba4aef89e2a70bf3e1ae1508d3.zip
Fixes QRCode style
* fixes a regression misplacing QRCode popup. * adds a 'show' class in JS to handle CSS transition.
Diffstat (limited to 'plugins')
-rwxr-xr-xplugins/qrcode/qrcode.css23
-rw-r--r--plugins/qrcode/qrcode.html8
-rw-r--r--plugins/qrcode/qrcode.php16
-rw-r--r--plugins/qrcode/shaarli-qrcode.js10
4 files changed, 52 insertions, 5 deletions
diff --git a/plugins/qrcode/qrcode.css b/plugins/qrcode/qrcode.css
new file mode 100755
index 00000000..0d514a0e
--- /dev/null
+++ b/plugins/qrcode/qrcode.css
@@ -0,0 +1,23 @@
1.linkqrcode {
2 display: inline;
3 position: relative;
4}
5
6#permalinkQrcode {
7 position: absolute;
8 z-index: 200;
9 padding: 20px;
10 width: 220px;
11 height: 220px;
12 background-color: #ffffff;
13 border: 1px solid black;
14 top: -110px;
15 left: -110px;
16 text-align: center;
17 font-size: 8pt;
18 box-shadow: 2px 2px 20px 2px #333333;
19}
20
21#permalinkQrcode img {
22 margin-bottom: 5px;
23}
diff --git a/plugins/qrcode/qrcode.html b/plugins/qrcode/qrcode.html
index 58ac5007..ffdaf3b8 100644
--- a/plugins/qrcode/qrcode.html
+++ b/plugins/qrcode/qrcode.html
@@ -1,3 +1,5 @@
1<a href="http://qrfree.kaywa.com/?l=1&amp;s=8&amp;d=%s" onclick="showQrCode(this); return false;" class="qrcode" data-permalink="%s"> 1<div class="linkqrcode">
2 <img src="%s/qrcode/qrcode.png" width="13" height="13" title="QR-Code"> 2 <a href="http://qrfree.kaywa.com/?l=1&amp;s=8&amp;d=%s" onclick="showQrCode(this); return false;" class="qrcode" data-permalink="%s">
3</a> 3 <img src="%s/qrcode/qrcode.png" width="13" height="13" title="QR-Code">
4 </a>
5</div>
diff --git a/plugins/qrcode/qrcode.php b/plugins/qrcode/qrcode.php
index 5f6e76a2..a709abaa 100644
--- a/plugins/qrcode/qrcode.php
+++ b/plugins/qrcode/qrcode.php
@@ -39,3 +39,19 @@ function hook_qrcode_render_footer($data)
39 39
40 return $data; 40 return $data;
41} 41}
42
43/**
44 * When linklist is displayed, include qrcode CSS file.
45 *
46 * @param array $data - header data.
47 *
48 * @return mixed - header data with qrcode CSS file added.
49 */
50function hook_qrcode_render_includes($data)
51{
52 if ($data['_PAGE_'] == Router::$PAGE_LINKLIST) {
53 $data['css_files'][] = PluginManager::$PLUGINS_PATH . '/qrcode/qrcode.css';
54 }
55
56 return $data;
57}
diff --git a/plugins/qrcode/shaarli-qrcode.js b/plugins/qrcode/shaarli-qrcode.js
index 0a8de21d..615f54c7 100644
--- a/plugins/qrcode/shaarli-qrcode.js
+++ b/plugins/qrcode/shaarli-qrcode.js
@@ -19,7 +19,7 @@ function showQrCode(caller,loading)
19 19
20 // Build the div which contains the QR-Code: 20 // Build the div which contains the QR-Code:
21 var element = document.createElement('div'); 21 var element = document.createElement('div');
22 element.id="permalinkQrcode"; 22 element.id = 'permalinkQrcode';
23 23
24 // Make QR-Code div commit sepuku when clicked: 24 // Make QR-Code div commit sepuku when clicked:
25 if ( element.attachEvent ){ 25 if ( element.attachEvent ){
@@ -37,6 +37,12 @@ function showQrCode(caller,loading)
37 element.appendChild(image); 37 element.appendChild(image);
38 element.innerHTML += "<br>Click to close"; 38 element.innerHTML += "<br>Click to close";
39 caller.parentNode.appendChild(element); 39 caller.parentNode.appendChild(element);
40
41 // Show the QRCode
42 qrcodeImage = document.getElementById('permalinkQrcode');
43 // Workaround to deal with newly created element lag for transition.
44 window.getComputedStyle(qrcodeImage).opacity;
45 qrcodeImage.className = 'show';
40 } 46 }
41 else 47 else
42 { 48 {
@@ -48,7 +54,7 @@ function showQrCode(caller,loading)
48// Remove any displayed QR-Code 54// Remove any displayed QR-Code
49function removeQrcode() 55function removeQrcode()
50{ 56{
51 var elem = document.getElementById("permalinkQrcode"); 57 var elem = document.getElementById('permalinkQrcode');
52 if (elem) { 58 if (elem) {
53 elem.parentNode.removeChild(elem); 59 elem.parentNode.removeChild(elem);
54 } 60 }