Implement alt_text for web view

Add field to the attachment table and insert the alt text from the client side via API calls. Close #421
melmothx · Dec 3, 2022 · 57681da · 57681da
1 parent 98562b7
commit 57681da
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 15 deletions.
diff --git a/lib/AmuseWikiFarm/Controller/API.pm b/lib/AmuseWikiFarm/Controller/API.pm
@@ -300,6 +300,22 @@ sub latest :Chained('api') :PathPart('latest') :Args {
     $c->detach($c->view('JSON'));
 }
 
+sub attachments :Chained('api') :PathPart('attachment') :Args(1) {
+    my ($self, $c, $uri) = @_;
+    my $site = $c->stash->{site};
+    my %out;
+    if (my $att = $site->attachments->by_uri($uri)) {
+        my %all = $att->get_columns;
+        my @cols = (qw/uri id comment_muse comment_html title_muse title_html alt_text mime_type/);
+        @out{@cols} = @all{@cols};
+    }
+    else {
+        $out{error} = "not found";
+    }
+    $c->stash(json => \%out);
+    $c->detach($c->view('JSON'));
+}
+
 =head1 AUTHOR
 
 Marco Pessotto <melmothx@gmail.com>

diff --git a/lib/AmuseWikiFarm/Controller/Attachments.pm b/lib/AmuseWikiFarm/Controller/Attachments.pm
@@ -56,6 +56,7 @@ sub list :Chained('root') :Args {
                      title => $att->title_html,
                      desc => $att->comment_html,
                      has_thumbnails => $att->has_thumbnails,
+                     alt_text => $att->alt_text,
                     };
     }
     $c->stash(attachments_list => \@list,
@@ -77,10 +78,12 @@ sub edit :Chained('attachment') :Args(0) {
     my ($self, $c) = @_;
     my $att = $c->stash->{attachment};
     my $uri = $att->uri;
-    if ($c->request->body_params->{update}) {
+    my $params = $c->request->body_params;
+    if ($params->{update}) {
         $att->edit(
-                   title_muse => $c->request->body_params->{title_muse},
-                   comment_muse => $c->request->body_params->{desc_muse},
+                   title_muse => $params->{title_muse},
+                   comment_muse => $params->{desc_muse},
+                   alt_text => $params->{alt_text},
                   );
         $c->flash(status_msg => $c->loc('The description for [_1] has been updated', $uri));
     }

diff --git a/lib/AmuseWikiFarm/Schema/Result/Attachment.pm b/lib/AmuseWikiFarm/Schema/Result/Attachment.pm
@@ -352,7 +352,7 @@ sub alt_title {
 sub edit {
     my ($self, %args) = @_;
     my %update;
-    foreach my $k (qw/title_muse comment_muse/) {
+    foreach my $k (qw/title_muse comment_muse alt_text/) {
         $update{$k} = defined($args{$k}) ? $args{$k} : '';
     }
     $update{title_html} = muse_format_line(html => $update{title_muse});

diff --git a/root/src/attachments/edit.tt b/root/src/attachments/edit.tt
@@ -18,6 +18,11 @@
         <input type="text" id="title_muse" name="title_muse"
                value="[% attachment.title_muse | html %]" class="form-control"/>
       </div>
+      <div class="form-group">
+        <label for="title_muse">[% c.loc('Alternate Text') %]</label>
+        <input type="text" id="alt_text" name="alt_text"
+               value="[% attachment.alt_text | html %]" class="form-control"/>
+      </div>
       <div class="form-group" id="fullscreen-markitup">
         <div id="fullscreen-markitup-toggle-button">
           <button class="btn btn-default btn-sm" type="button" id="fullscreen-markitup-toggle">

diff --git a/root/src/attachments/list.tt b/root/src/attachments/list.tt
@@ -15,13 +15,13 @@
         [% loc('Title') %]
       </th>
       <th>
-        [% loc('Description') %]
+        [% loc('Alternate Text') %]
       </th>
       <th>
-        [% loc('Thumbnail') %]
+        [% loc('Description') %]
       </th>
       <th>
-        [% loc('Edit') %]
+        [% loc('Thumbnail') %]
       </th>
     </tr>
     </thead>
@@ -32,12 +32,20 @@
         <a href="[% att.full_uri %]">
           [% att.name %]
         </a>
+        <a href="[% c.uri_for_action('/attachments/edit', [ att.name ]) %]">
+          <span class="fa fa-edit fa-border" aria-hidden="true"></span>
+        </a>
       </td>
       <td>
         [% IF att.title %]
         [% att.title %]
         [% END %]
       </td>
+      <td>
+        [% IF att.alt_text %]
+          [% att.alt_text | html %]
+        [% END %]
+      </td>
       <td>
         [% IF att.desc %]
         [% att.desc %]
@@ -52,11 +60,6 @@
           [% END %]
         </a>
       </td>
-      <td>
-        <a href="[% c.uri_for_action('/attachments/edit', [ att.name ]) %]">
-          <span class="fa fa-edit fa-2x fa-border" aria-hidden="true"></span>
-        </a>
-      </td>
     </tr>
     [% END %]
     </tbody>

diff --git a/root/src/layout.tt b/root/src/layout.tt
@@ -126,7 +126,7 @@
     [%# our css for the web application %]
     <link rel="stylesheet" type="text/css"
           href="[% c.uri_for('/static/css/amusewiki.css', { v => 44 }) %]" />
-    <script src="[% c.uri_for('/static/js/amuse.js', { v => 5 }) %]"></script>
+    <script src="[% c.uri_for('/static/js/amuse.js', { v => 6 }) %]"></script>
     <script>
       function amw_confirm() { return confirm('[% lh.loc('Are you sure?') | escape_js %]') }
     </script>

diff --git a/root/static/js/amuse.js b/root/static/js/amuse.js
@@ -97,5 +97,20 @@ $(document).ready(function(){
 
     // with this div we signal that the teaser contains the whole text
     $("div.amw-teaser-no-ellipsis").closest('.amw-listing-item').find(".amw-read-more-link").remove();
+
+    // alt images if available
+    $("#htmltextbody img").each(function() {
+        var el = $(this);
+        var img_name = el.attr('alt');
+        if (img_name) {
+            $.get('/api/attachment/' + img_name, function(data) {
+                // console.log(data);
+                if (data.alt_text) {
+                    el.attr('alt', data.alt_text)
+                }
+            });
+        }
+    });
+
 });
 
diff --git a/t/attachment-editing.t b/t/attachment-editing.t
@@ -5,15 +5,15 @@ use warnings;
 use utf8;
 use Cwd;
 use File::Spec::Functions qw/catfile catdir/;
-use Test::More tests => 14;
+use Test::More tests => 19;
 BEGIN {
     $ENV{DBIX_CONFIG_DIR} = "t";
     $ENV{AMW_NO_404_FALLBACK} = 1;
 };
 
 use lib catdir(qw/t lib/);
 use AmuseWiki::Tests qw/create_site/;
-
+use AmuseWikiFarm::Utils::Amuse qw/from_json/;
 use Data::Dumper;
 use Test::WWW::Mechanize::Catalyst;
 use AmuseWikiFarm::Schema;
@@ -54,6 +54,7 @@ ok $mech->follow_link(url_regex => qr/attachments.*edit/);
 ok ($mech->submit_form(with_fields => {
                                        desc_muse => "Hello *there*,\nthis is my **description**",
                                        title_muse => 'Hello *there*',
+                                       alt_text => "The alt text",
                                       },
                        button => 'update',
                       ), "Form submitted ok");
@@ -63,3 +64,18 @@ $mech->content_contains("this is my <strong>description</strong>");
 $mech->get_ok('/attachments/list');
 $mech->content_contains("Hello <em>there</em>");
 $mech->content_contains("this is my <strong>description</strong>");
+
+$mech->get_ok('/api/attachment/' . $attachment);
+{
+    my $data = from_json($mech->content);
+    is $data->{alt_text}, "The alt text";
+    ok !$data->{error};
+}
+$mech->get_ok('/api/attachment/garbage');
+{
+    my $data = from_json($mech->content);
+    ok $data->{error};
+}
+
+
+