* fixes a regression misplacing QRCode popup.
* adds a 'show' class in JS to handle CSS transition.
-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 {
font-family: Georgia, 'DejaVu Serif', Norasi, serif;
background-color: #E6D6BE;
div.daily {
font-family: Georgia, 'DejaVu Serif', Norasi, serif;
background-color: #E6D6BE;
--- /dev/null
+.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;
+}
-<a href="http://qrfree.kaywa.com/?l=1&s=8&d=%s" onclick="showQrCode(this); return false;" class="qrcode" data-permalink="%s">
- <img src="%s/qrcode/qrcode.png" width="13" height="13" title="QR-Code">
-</a>
+<div class="linkqrcode">
+ <a href="http://qrfree.kaywa.com/?l=1&s=8&d=%s" onclick="showQrCode(this); return false;" class="qrcode" data-permalink="%s">
+ <img src="%s/qrcode/qrcode.png" width="13" height="13" title="QR-Code">
+ </a>
+</div>
+
+/**
+ * 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;
+}
// Build the div which contains the QR-Code:
var element = document.createElement('div');
// Build the div which contains the QR-Code:
var element = document.createElement('div');
- element.id="permalinkQrcode";
+ element.id = 'permalinkQrcode';
// Make QR-Code div commit sepuku when clicked:
if ( element.attachEvent ){
// Make QR-Code div commit sepuku when clicked:
if ( element.attachEvent ){
element.appendChild(image);
element.innerHTML += "<br>Click to close";
caller.parentNode.appendChild(element);
element.appendChild(image);
element.innerHTML += "<br>Click to close";
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';
// Remove any displayed QR-Code
function removeQrcode()
{
// Remove any displayed QR-Code
function removeQrcode()
{
- var elem = document.getElementById("permalinkQrcode");
+ var elem = document.getElementById('permalinkQrcode');
if (elem) {
elem.parentNode.removeChild(elem);
}
if (elem) {
elem.parentNode.removeChild(elem);
}