Merge pull request #413 from ArthurHoaro/qrcode-effect

Fixes QRCode style
This commit is contained in:
VirtualTam 2015-12-21 22:31:45 +01:00
commit 70a35e2a6d
5 changed files with 52 additions and 24 deletions

View file

@ -739,25 +739,6 @@ h1 {
background: #ffffff; background: #ffffff;
} }
div#permalinkQrcode {
padding: 20px;
width: 220px;
height: 220px;
background-color: #ffffff;
border: 1px solid black;
position: absolute;
top: -100px;
left: -100px;
text-align: center;
font-size: 8pt;
z-index: 50;
-webkit-box-shadow: 2px 2px 20px 2px #333333;
-moz-box-shadow: 2px 2px 20px 2px #333333;
-o-box-shadow: 2px 2px 20px 2px #333333;
-ms-box-shadow: 2px 2px 20px 2px #333333;
box-shadow: 2px 2px 20px 2px #333333;
}
div.daily { div.daily {
font-family: Georgia, 'DejaVu Serif', Norasi, serif; font-family: Georgia, 'DejaVu Serif', Norasi, serif;
background-color: #E6D6BE; background-color: #E6D6BE;

23
plugins/qrcode/qrcode.css Executable file
View file

@ -0,0 +1,23 @@
.linkqrcode {
display: inline;
position: relative;
}
#permalinkQrcode {
position: absolute;
z-index: 200;
padding: 20px;
width: 220px;
height: 220px;
background-color: #ffffff;
border: 1px solid black;
top: -110px;
left: -110px;
text-align: center;
font-size: 8pt;
box-shadow: 2px 2px 20px 2px #333333;
}
#permalinkQrcode img {
margin-bottom: 5px;
}

View file

@ -1,3 +1,5 @@
<a href="http://qrfree.kaywa.com/?l=1&amp;s=8&amp;d=%s" onclick="showQrCode(this); return false;" class="qrcode" data-permalink="%s"> <div class="linkqrcode">
<img src="%s/qrcode/qrcode.png" width="13" height="13" title="QR-Code"> <a href="http://qrfree.kaywa.com/?l=1&amp;s=8&amp;d=%s" onclick="showQrCode(this); return false;" class="qrcode" data-permalink="%s">
</a> <img src="%s/qrcode/qrcode.png" width="13" height="13" title="QR-Code">
</a>
</div>

View file

@ -39,3 +39,19 @@ function hook_qrcode_render_footer($data)
return $data; return $data;
} }
/**
* When linklist is displayed, include qrcode CSS file.
*
* @param array $data - header data.
*
* @return mixed - header data with qrcode CSS file added.
*/
function hook_qrcode_render_includes($data)
{
if ($data['_PAGE_'] == Router::$PAGE_LINKLIST) {
$data['css_files'][] = PluginManager::$PLUGINS_PATH . '/qrcode/qrcode.css';
}
return $data;
}

View file

@ -19,7 +19,7 @@ function showQrCode(caller,loading)
// Build the div which contains the QR-Code: // Build the div which contains the QR-Code:
var element = document.createElement('div'); var element = document.createElement('div');
element.id="permalinkQrcode"; element.id = 'permalinkQrcode';
// Make QR-Code div commit sepuku when clicked: // Make QR-Code div commit sepuku when clicked:
if ( element.attachEvent ){ if ( element.attachEvent ){
@ -37,6 +37,12 @@ function showQrCode(caller,loading)
element.appendChild(image); element.appendChild(image);
element.innerHTML += "<br>Click to close"; element.innerHTML += "<br>Click to close";
caller.parentNode.appendChild(element); caller.parentNode.appendChild(element);
// Show the QRCode
qrcodeImage = document.getElementById('permalinkQrcode');
// Workaround to deal with newly created element lag for transition.
window.getComputedStyle(qrcodeImage).opacity;
qrcodeImage.className = 'show';
} }
else else
{ {
@ -48,7 +54,7 @@ function showQrCode(caller,loading)
// Remove any displayed QR-Code // Remove any displayed QR-Code
function removeQrcode() function removeQrcode()
{ {
var elem = document.getElementById("permalinkQrcode"); var elem = document.getElementById('permalinkQrcode');
if (elem) { if (elem) {
elem.parentNode.removeChild(elem); elem.parentNode.removeChild(elem);
} }