MBS-9118: Button added that opens the QR code enlarged in a modal

mebis-lp · Jul 13, 2024 · 9d60022 · 9d60022
1 parent 91ad403
commit 9d60022
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 38 deletions.
diff --git a/db/access.php b/db/access.php
@@ -30,10 +30,10 @@
         'captype' => 'write',
         'contextlevel' => CONTEXT_SYSTEM,
         'archetypes' => array(
-            'user' => CAP_ALLOW
+            'user' => CAP_ALLOW,
         ),
 
-        'clonepermissionsfrom' => 'moodle/my:manageblocks'
+        'clonepermissionsfrom' => 'moodle/my:manageblocks',
     ),
 
     'block/qr:addinstance' => array(
@@ -43,9 +43,9 @@
         'contextlevel' => CONTEXT_BLOCK,
         'archetypes' => array(
             'editingteacher' => CAP_ALLOW,
-            'manager' => CAP_ALLOW
+            'manager' => CAP_ALLOW,
         ),
 
-        'clonepermissionsfrom' => 'moodle/site:manageblocks'
+        'clonepermissionsfrom' => 'moodle/site:manageblocks',
     ),
 );
diff --git a/edit_form.php b/edit_form.php
@@ -222,7 +222,7 @@ protected function specific_definition($mform) {
         $sizeoptions = [
             QR_SIZE_SMALL => get_string('small', 'block_qr'),
             QR_SIZE_MEDIUM => get_string('medium', 'block_qr'),
-            QR_SIZE_LARGE => get_string('large', 'block_qr')
+            QR_SIZE_LARGE => get_string('large', 'block_qr'),
         ];
         $selectsize = $mform->addElement(
             'select',

diff --git a/lang/de/block_qr.php b/lang/de/block_qr.php
@@ -45,6 +45,7 @@
 $string['event_start'] = 'Startdatum';
 $string['event_summary'] = 'Titel';
 $string['externalurl'] = 'URL';
+$string['fullscreen'] = 'Im Vollbild anzeigen';
 $string['geo'] = 'Geo';
 $string['geolocation'] = 'Geokoordinaten (Breite/Länge)';
 $string['internalcontent'] = 'Link zu einem Abschnitt oder Aktivität';

diff --git a/lang/en/block_qr.php b/lang/en/block_qr.php
@@ -45,6 +45,7 @@
 $string['event_start'] = 'Start date';
 $string['event_summary'] = 'Title';
 $string['externalurl'] = 'URL';
+$string['fullscreen'] = 'Show in full screen';
 $string['geo'] = 'Geo';
 $string['geolocation'] = 'Geolocation (lat/lon)';
 $string['internalcontent'] = 'Link to a section or activity';

diff --git a/templates/qr.mustache b/templates/qr.mustache
@@ -47,14 +47,19 @@
 {{#qrurl}}
     <a href="{{{qrcodelink}}}">
 {{/qrurl}}
-    <div id="container{{id}}" style="width: {{size}}; max-width: 100%; margin: 0 auto;">
-        {{^qrcodecontent}}
-            {{#str}} nocontent, block_qr {{/str}}
-        {{/qrcodecontent}}
-    </div>
+<div id="container{{id}}" style="width: {{size}}; max-width: 100%; margin: 0 auto;">
+    {{^qrcodecontent}}
+        {{#str}} nocontent, block_qr {{/str}}
+    {{/qrcodecontent}}
+</div>
 {{#qrurl}}
     </a>
 {{/qrurl}}
+<div class="text-center">
+    <button class="btn btn-secondary" id="qrcodeModalButton{{id}}">{{#str}}
+            fullscreen, block_qr
+        {{/str}}</button>
+</div>
 <hr>
 {{^calendar}}
     <p class="text-center">{{description}}<br></p>
@@ -90,47 +95,56 @@
 {{#wifissid}}
     <p class="text-left">
         <b>
-        {{#str}}
-            ssid_label, block_qr
-        {{/str}}: </b>{{{wifissid}}}<br><b>
-        {{#str}}
-            config_wifiauthentication, block_qr
-        {{/str}}: </b> {{{wifiauthentication}}}<br><b>
-        {{#str}}
-            passkey_label, block_qr
-        {{/str}}: </b> {{{wifipasskey}}}<br>
+            {{#str}}
+                ssid_label, block_qr
+            {{/str}}: </b>{{{wifissid}}}<br><b>
+            {{#str}}
+                config_wifiauthentication, block_qr
+            {{/str}}: </b> {{{wifiauthentication}}}<br><b>
+            {{#str}}
+                passkey_label, block_qr
+            {{/str}}: </b> {{{wifipasskey}}}<br>
     </p>
 {{/wifissid}}
 
-
 {{#fullview}}
-{{#configshortlink}}
-    <p class="text-center">
-        <i class="fa fa-location-arrow"></i>
-        <a href="{{urlshort}}" target="_blank">
-        {{#str}}
-            urlshortlabel, block_qr
-        {{/str}}
-        </a>
-    </p>
-{{/configshortlink}}
+    {{#configshortlink}}
+        <p class="text-center">
+            <i class="fa fa-location-arrow"></i>
+            <a href="{{urlshort}}" target="_blank">
+                {{#str}}
+                    urlshortlabel, block_qr
+                {{/str}}
+            </a>
+        </p>
+    {{/configshortlink}}
 {{/fullview}}
+<div style="width: 100%;text-align: center">
+</div>
 {{#qrcodecontent}}
     <script src="{{javascript}}"></script>
     {{#js}}
         if (typeof QRCode !== 'undefined') {
+        // Configuration for QR Code
         let config{{id}} = {
-            content: "{{{qrcodecontent}}}",
-            color: "#000000",
-            background: "#ffffff",
-            ecl: "M", // Error correction level (L, M, H, Q).
-            container: "svg-viewbox", // Responsive use.
-            join: true // Crisp rendering and 4-5x reduced file size.
+        content: "{{{qrcodecontent}}}",
+        color: "#000000",
+        background: "#ffffff",
+        ecl: "M", // Error correction level (L, M, H, Q).
+        container: "svg-viewbox", // Responsive use.
+        join: true // Crisp rendering and 4-5x reduced file size.
         };
-        // eslint-disable-next-line no-undef
+
         let qrcode{{id}} = new QRCode(config{{id}});
         let svg{{id}} = qrcode{{id}}.svg();
         document.getElementById("container{{id}}").innerHTML = svg{{id}};
+        // Add event listener to button
+        document.getElementById("qrcodeModalButton{{id}}").addEventListener("click", () => {
+        // Creating the modal with the QR code content inside the button click event
+        require(['core/modal'], (MF) => {
+        MF.create({title: '{{{description}}}', body: svg{{id}}}).then((modal) => modal.show());
+        });
+        });
         }
     {{/js}}
 {{/qrcodecontent}}
diff --git a/version.php b/version.php
@@ -26,7 +26,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $plugin->release = 'v0.0.1';
-$plugin->version   = 2024012900;         // The current plugin version (Date: YYYYMMDDXX).
+$plugin->version   = 2024071300;         // The current plugin version (Date: YYYYMMDDXX).
 $plugin->requires  = 2022041200;         // Requires this Moodle version.
 $plugin->component = 'block_qr';         // Full name of the plugin (used for diagnostics).
 $plugin->maturity = MATURITY_BETA;      // This is considered as ready for production sites.