WIP QR code tab for share menu

www/common/common-interface.js

@@ -1486,5 +1486,18 @@ define([
         });
     };
 
+/*  QR code generation is synchronous once the library is loaded
+    so this could be syncronous if we load the library separately. */
+    UI.createQRCode = function (data, _cb) {
+        var cb = Util.once(Util.mkAsync(_cb || Util.noop));
+        require(['/lib/qrcode.min.js'], function () {
+            var div = h('div');
+            var code = new window.QRCode(div, data);
+            cb(void 0, div);
+        }, function (err) {
+            cb(err);
+        });
+    };
+
     return UI;
 });

www/common/inner/share.js

@@ -12,6 +12,8 @@ define([
     '/customize/messages.js',
     '/bower_components/nthen/index.js',
     '/customize/pages.js',
+
+    '/lib/qrcode.min.js',
 ], function ($, ApiConfig, Util, Hash, UI, UIElements, Feedback, Modal, h, Clipboard,
              Messages, nThen, Pages) {
     var Share = {};
@@ -486,6 +488,37 @@ define([
         });
     };
 
+    var getQRCode = function (link) {
+        var div = h('div');
+        var code = new window.QRCode(div, link);
+        return div;
+    };
+
+    var getQRTab = function (Env, data, opts, _cb) {
+        var qr = getQRCode(opts.getLinkValue());
+        var link = h('div.cp-share-modal', [
+            h('div#cp-qr-link-preview', qr),
+        ]);
+
+        var buttons = [
+            makeCancelButton(),
+            {
+                className: 'primary cp-nobar',
+                name: Messages.download_dl, //'PEWPEW', //Messages // XXX
+                iconClass: '.fa.fa-download',
+                onClick: function () {
+                    console.log("TODO SAVE IMAGE");
+                    UI.warn("NOT IMPLEMENTED");
+                },
+            },
+        ];
+
+        return _cb(void 0, {
+            content: link,
+            buttons: buttons,
+        });
+    };
+
     var getEmbedTab = function (Env, data, opts, _cb) {
         var cb = Util.once(Util.mkAsync(_cb));
 
@@ -666,12 +699,17 @@ define([
         var getEmbed = function () {
             return $rights.parent().find('#cp-embed-link-preview');
         };
+        var getQR = function () {
+            return $rights.parent().find('#cp-qr-link-preview');
+        };
 
         // update values for link and embed preview when radio btns change
         $rights.find('input[type="radio"]').on('change', function () {
-            getLink().val(opts.getLinkValue({
+            var link = opts.getLinkValue({
                 embed: Util.isChecked($('.alertify').find('#cp-share-embed'))
-            }));
+            });
+
+            getLink().val(link);
             // Hide or show the burn after reading alert
             if (Util.isChecked($rights.find('#cp-share-bar')) && !opts.burnAfterReadingUrl) {
                 $('.cp-alertify-bar-selected').show();
@@ -681,6 +719,10 @@ define([
                 return;
             }
             getEmbed().val(opts.getEmbedValue());
+
+            var qr = getQRCode(opts.getLinkValue());
+            getQR().html('').append(qr);
+
             // Hide burn after reading button
             $('.alertify').find('.cp-nobar').show();
             $('.alertify').find('.cp-bar').hide();
@@ -780,6 +822,11 @@ define([
             title: Messages.share_linkCategory,
             icon: "fa fa-link",
             active: !contactsActive,
+        }, {
+            getTab: getQRTab,
+            title: "QR", // XXX
+            icon: 'fa fa-qrcode',
+            active: true,
         }];
         if (!opts.static && ApiConfig.enableEmbedding && embeddableApps.includes(pathname)) {
             tabs.push({

www/lib/changelog.md

@@ -10,4 +10,5 @@ This file is intended to be used as a log of what third-party source we have ven
 * [pdfjs](https://mozilla.github.io/pdf.js/) with some minor modifications to prevent CSP errors
 * [mermaid 9.0.0](https://github.com/mermaid-js/mermaid/releases/tag/8.13.4) extends our markdown integration to support a variety of diagram types
 * [Fabricjs 4.6.0](https://github.com/fabricjs/fabric.js) and [Fabric-history](https://github.com/lyzerk/fabric-history) for the whiteboard app
+* [qrcode.js](https://github.com/davidshimjs/qrcodejs) from [this commit](https://github.com/davidshimjs/qrcodejs/commit/06c7a5e134f116402699f03cda5819e10a0e5787) since the repo doesn't use tags