phyll: add support for setting alt attribute to images

diff --git a/chloro/phyll/static/js/chloro.js b/chloro/phyll/static/js/chloro.js
index 8a8064aca5e0575a31f2aa86983bff78061a1c2d..45b0d6c28489013cba4004e86407408b4d9bc60b 100644 (file)
--- a/chloro/phyll/static/js/chloro.js
+++ b/chloro/phyll/static/js/chloro.js
@@ -178,6 +178,11 @@ function create_toc() {
         } else if (inline_style_toolbar) {
           $(inline_style_toolbar).hide();
         }
+        if ($(sel.anchorNode).is('div.figure') && $(sel.anchorNode).find('img').length) {
+          show_figure_toolbar(sel);
+        } else if ($(sel.anchorNode).parents('.figure-toolbar').length == 0) {
+          $(figure_toolbar).hide();
+        }
       });
       var $image_upload = $('<input type="file" nam="image" id="image-upload">');
       $image_upload.on('change', upload_image);
@@ -515,6 +520,26 @@ function create_toc() {
     inline_style_toolbar.css('left', pos.left + window.scrollX);
     inline_style_toolbar.show();
   };
+
+  var figure_toolbar = null;
+  function show_figure_toolbar(sel) {
+    if (figure_toolbar === null) {
+      figure_toolbar = $('<div class="figure-toolbar"><label>Alt: <input name="figure-alt"></label></div>')
+      figure_toolbar.hide();
+      figure_toolbar.insertAfter(document.body);
+      $('[name="figure-alt"]').on('change', function() {
+       $(this.img).attr('alt', $(this).val());
+      });
+    }
+    figure_toolbar.css('position', 'absolute');
+    var pos = sel.getRangeAt(0).getClientRects()[0];
+    figure_toolbar.css('top', pos.bottom + window.scrollY);
+    figure_toolbar.css('left', pos.left + window.scrollX);
+    figure_toolbar.show();
+    $('[name="figure-alt"]')[0].img = $(sel.anchorNode).find('img');
+    $('[name="figure-alt"]').val($('[name="figure-alt"]')[0].img.attr('alt') || '');
+  };
+
 }(window, document));
 
 $(function() {