Bug 1844953: Make the font specimens appear in modal

Rather than a new page

behatnotneeded

Change-Id: If81c1b343b1d32e291ca90e036082009c2d33a4f
Signed-off-by: Robert Lyon <robertl@catalyst.net.nz>

htdocs/admin/site/font/specimen.php

@@ -54,7 +54,10 @@ $smarty->assign('fonttitle', $fonttitle);
 $smarty->assign('fontlicence', $fontlicence);
 $specimen = $smarty->fetch('skin/specimen.tpl');
 
-
-header('Content-type: text/html');
-echo $specimen;
-exit;
+json_reply(false, array(
+    'message' => null,
+    'data' => array(
+        'font' => $font,
+        'html' => $specimen
+    )
+));

htdocs/admin/site/fonts.json.php

@@ -48,7 +48,6 @@ $pagination = build_pagination(array(
     'count' => $data->count,
     'limit' => $limit,
     'offset' => $offset,
-    'setlimit' => true,
     'datatable' => 'fontlist',
     'jsonscript' => 'admin/site/fonts.json.php',
     'resultcounttextsingular' => get_string('font', 'skin'),

htdocs/admin/site/fonts.php

@@ -97,7 +97,7 @@ $previewform = pieform(array(
         ),
         'submit' => array(
             'type' => 'submit',
-            'class' => 'btn-secondary',
+            'class' => 'btn-secondary btn-sm',
             'value' => get_string('preview', 'skin')
         )
     )
@@ -131,7 +131,6 @@ $pagination = build_pagination(array(
     'count' => $data->count,
     'limit' => $limit,
     'offset' => $offset,
-    'setlimit' => true,
     'datatable' => 'fontlist',
     'jsonscript' => 'admin/site/fonts.json.php',
     'resultcounttextsingular' => get_string('font', 'skin'),
@@ -139,8 +138,23 @@ $pagination = build_pagination(array(
 ));
 
 $js = <<< EOF
+    function wire_specimens() {
+        $('.btn-display').each(function() {
+            var btn = $(this);
+            $(btn).off('click');
+            $(btn).on('click', function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                var url = $(this).prop('href');
+                sendjsonrequest(url, {}, 'GET', function(data) {
+                    $('#page-modal .modal-body').html(data.data.html);
+                    $('#page-modal').modal('show');
+                });
+            });
+        });
+    }
+
 jQuery(function ($) {
-    p = {$pagination['javascript']}
 EOF;
 if ($offset > 0) {
     $js .= <<< EOF

htdocs/theme/raw/sass/_custom.scss

@@ -13,6 +13,10 @@
     }
 }
 
+#preview_submit {
+    width: auto;
+}
+
 #progress-iframe { // old style progress bars, e.g. portfolio export
     border: 1px solid $gray-500;
     height: 40px;

htdocs/theme/raw/templates/skin/sitefontresults.tpl

@@ -15,7 +15,7 @@
                         </li>
                         {if $font.fonttype == 'google'}
                             <li>
-                                <a class="btn-display" href="javascript:" onclick="window.open('http://www.google.com/webfonts/specimen/{$font.urlencode}', '_self')">
+                                <a class="btn-display" href="{$WWWROOT}admin/site/font/specimen.php?font={$font.urlencode}">
                                     {str tag="viewfontspecimen" section="skin"}
                                     <span class="accessible-hidden sr-only">
                                         {str tag=viewfontspecimenfor section=skin arg1=$font.title}
@@ -24,7 +24,7 @@
                             </li>
                         {else}
                             <li>
-                                <a class="btn-display" href="javascript:" onclick="window.open('{$WWWROOT}admin/site/font/specimen.php?font={$font.name}', '_self')">
+                                <a class="btn-display" href="{$WWWROOT}admin/site/font/specimen.php?font={$font.name}">
                                     {str tag="viewfontspecimen" section="skin"}
                                     <span class="accessible-hidden sr-only">
                                         {str tag=viewfontspecimenfor section=skin arg1=$font.title}

htdocs/theme/raw/templates/skin/sitefonts.tpl

@@ -25,4 +25,15 @@
 </div>
 
 {$pagination|safe}
+{if $pagination_js}
+    <script>
+    {$pagination_js|safe}
+    $(document).on('pageupdated', function(e, data) {
+        wire_specimens();
+    });
+    wire_specimens();
+    </script>
+{/if}
+
+{include file="pagemodal.tpl"}
 {include file="footer.tpl"}

htdocs/theme/raw/templates/skin/specimen.tpl

@@ -14,7 +14,7 @@ body {
     max-width: 700px;
     padding: 15px;
 }
-.superspecimen .superheader {
+.superspecimen {
     margin-bottom: 10px;
 }
 .superspecimen h1 {
@@ -82,9 +82,6 @@ p {
 <body>
 
 <div class="superspecimen">
-<div class="superheader">
-    <img src="Mahara_webfonts.png" border="0">
-</div>
 <h1>{$fonttitle}</h1>
 {$fontlicence|safe}
 <div class="fontcard">