aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorVirtualTam <virtualtam@flibidi.net>2015-12-21 22:31:45 +0100
committerVirtualTam <virtualtam@flibidi.net>2015-12-21 22:31:45 +0100
commit70a35e2a6dfeabcb657494a0f30eb630aeb57792 (patch)
treea0b3c198f1af5d28d4f8192a958bd1bf6fb7bb0b
parent79851b489087f8a3027ecd805255cd13ee6fcf63 (diff)
parent28a4fc546fd937ba4aef89e2a70bf3e1ae1508d3 (diff)
downloadShaarli-70a35e2a6dfeabcb657494a0f30eb630aeb57792.tar.gz
Shaarli-70a35e2a6dfeabcb657494a0f30eb630aeb57792.tar.zst
Shaarli-70a35e2a6dfeabcb657494a0f30eb630aeb57792.zip
Merge pull request #413 from ArthurHoaro/qrcode-effect
Fixes QRCode style
-rw-r--r--inc/shaarli.css19
-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
5 files changed, 52 insertions, 24 deletions
diff --git a/inc/shaarli.css b/inc/shaarli.css
index 451f0481..d6bbdbc1 100644
--- a/inc/shaarli.css
+++ b/inc/shaarli.css
@@ -739,25 +739,6 @@ h1 {
739 background: #ffffff; 739 background: #ffffff;
740} 740}
741 741
742div#permalinkQrcode {
743 padding: 20px;
744 width: 220px;
745 height: 220px;
746 background-color: #ffffff;
747 border: 1px solid black;
748 position: absolute;
749 top: -100px;
750 left: -100px;
751 text-align: center;
752 font-size: 8pt;
753 z-index: 50;
754 -webkit-box-shadow: 2px 2px 20px 2px #333333;
755 -moz-box-shadow: 2px 2px 20px 2px #333333;
756 -o-box-shadow: 2px 2px 20px 2px #333333;
757 -ms-box-shadow: 2px 2px 20px 2px #333333;
758 box-shadow: 2px 2px 20px 2px #333333;
759}
760
761div.daily { 742div.daily {
762 font-family: Georgia, 'DejaVu Serif', Norasi, serif; 743 font-family: Georgia, 'DejaVu Serif', Norasi, serif;
763 background-color: #E6D6BE; 744 background-color: #E6D6BE;
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 }