Issue #3007407 by alxp: Add support for free-form text notes

LICENSE

@@ -671,4 +671,4 @@ into proprietary programs.  If your program is a subroutine library, you
 may consider it more useful to permit linking proprietary applications with
 the library.  If this is what you want to do, use the GNU Lesser General
 Public License instead of this License.  But first, please read
-<http://www.gnu.org/philosophy/why-not-lgpl.html>.
+<http://www.gnu.org/philosophy/why-not-lgpl.html>.

README.md

@@ -23,7 +23,13 @@ Installation
 ------------
 
 Install and set up the Footnotes module as per its installation instructions, including
-enabling and configuring the Footnotes text filter.
+enabling and configuring the Footnotes text filter. If the 'Allowed HTML tags' filter is enabled
+you will need to add the following HTML tags for the reference footnotes to display properly.:
+
+```html
+    <a class href id> <div class id> <span class id> <ul class id type> 
+	<ol class id start type> <sup> <li class id>
+```
 
 Configuration
 -------------

bibcite_footnotes.info.yml

@@ -1,9 +1,15 @@
 name: 'BibCite Footnotes'
 type: module
 description: 'Inline footnote links for BibCite References'
-core: 8.x
+# core: 8.x
 package: 'Bibliography & Citation'
 dependencies:
   - bibcite:bibcite
   - bibcite:bibcite_entity
   - footnotes:footnotes
+
+# Information added by Drupal.org packaging script on 2018-07-30
+version: '8.x-1.0-alpha5'
+core: '8.x'
+project: 'bibcite_footnotes'
+datestamp: 1532941092

bibcite_footnotes.libraries.yml

@@ -0,0 +1,5 @@
+reference_footnote:
+  version: VERSION
+  css:
+    theme:
+      css/reference_footnote.css: {}

bibcite_footnotes.module

@@ -6,6 +6,8 @@
  */
 
 use Drupal\Core\Routing\RouteMatchInterface;
+use Drupal\Core\Url;
+use Drupal\Core\Link;
 
 /**
  * Implements hook_help().
@@ -23,6 +25,96 @@ function bibcite_footnotes_help($route_name, RouteMatchInterface $route_match) {
   }
 }
 
+function bibcite_footnotes_preprocess_footnote_list(&$variables) {
+
+  // Drupal 7 requires we use "render element" which just introduces a wrapper
+  // around the old array.
+  // $footnotes = $footnotes['footnotes'];
+  // loop through the footnotes.
+  $footnotes = $variables['footnotes'];
+  $notes = [
+    '#theme' => 'item_list',
+    '#list_type' => 'ul',
+    '#title' => 'Notes',
+    '#attributes' => ['class' => 'footnotes'],
+    '#wrapper_attributes' => ['class' => 'container'],
+  ];
+
+  $references= [
+    '#theme' => 'item_list',
+    '#list_type' => 'ul',
+    '#title' => 'References',
+    '#attributes' => ['class' => 'footnotes'],
+    '#wrapper_attributes' => ['class' => 'container'],
+
+  ];
+  $references['#attached']['library'][] = 'bibcite_footnotes/reference_footnote';
+
+  $serializer = \Drupal::service('serializer');
+
+  foreach ($footnotes as $fn) {
+    $item = [
+      '#id' => $fn['fn_id'],
+      '#wrapper_attributes' => [
+        'class' => ['footnote'],
+      ],
+    ];
+    $build = [];
+    if (!is_array($fn['ref_id'])) {
+      // Output normal footnote.
+
+
+      $url = Url::fromUserInput('#' . $fn['ref_id'], ['attributes' => ['id' => $fn['fn_id'], 'class' => 'footnote-link']]);
+      $link = Link::fromTextAndUrl($fn['value'], $url)->toRenderable();
+      $build[] = $link;
+    }
+    else {
+      // Output footnote that has more than one reference to it in the body.
+      // The only difference is to insert backlinks to all references.
+      // Helper: we need to enumerate a, b, c...
+      $abc = str_split("abcdefghijklmnopqrstuvwxyz");
+      $i = 0;
+
+      $url = Url::fromUserInput('#' . $fn['ref_id'][0], ['attributes' => ['id' => $fn['fn_id'], 'class' => 'footnote-link']]);
+      $build[] = Link::fromTextAndUrl($fn['value'], $url)->toRenderable();
+
+      foreach ($fn['ref_id'] as $ref) {
+        $url = Url::fromUserInput( '#' . $ref, ['attributes' => ['id' => $fn['fn_id'], 'class' => 'footnote-multi']]);
+        $build[] = Link::fromTextAndUrl($abc[$i], $url)->toRenderable();
+
+        $i++;
+      }
+
+    }
+
+    preg_match('/\[bibcite_reference:(\d*)\]/', $fn['text'], $matches);
+    $reference_entity_id = $matches[1];
+    if (!empty($reference_entity_id)) {
+      $reference_storage = \Drupal::entityTypeManager()
+        ->getStorage('bibcite_reference')
+        ->load($reference_entity_id);
+      $data = $serializer->normalize($reference_storage, 'csl');
+      $build[] = ['#theme' => 'bibcite_citation', '#data' => $data];
+      $render = render($build);
+      $item['#markup'] = $render;
+      $references['#items'][] = $item;
+
+    }
+    else {
+      $build[] = ['#type' => 'markup', '#markup' => ' ' . $fn['text']];
+      $render = render($build);
+      $item['#markup'] = $render;
+
+      $notes['#items'][] = $item;
+    }
+  }
+
+  $variables['notes'] = $notes;
+
+  $variables['references'] = $references;
+
+}
+
 /**
  * Implements hook_theme().
  */
@@ -35,12 +127,28 @@ function bibcite_footnotes_theme() {
 }
 
 function bibcite_footnotes_theme_registry_alter(&$theme_registry) {
-  $theme_registry['footnote_list']['function'] = 'bibcite_footnotes_theme_footnote_list';
+  unset($theme_registry['footnote_list']['function']);
+//  $theme_registry['footnote_list']['function'] = 'bibcite_footnotes_theme_footnote_list';
+  $theme_registry['footnote_list']['path'] = drupal_get_path('module', 'bibcite_footnotes') . '/templates';
+  $theme_registry['footnote_list']['template'] = 'footnote-list';
+  $theme_registry['footnote_list']['variables']['notes'] = [];
+  $theme_registry['footnote_list']['variables']['references'] = [];
+  $theme_registry['footnote_list']['variables']['footnotes'] = [];
 }
 
 function bibcite_footnotes_theme_footnote_list($footnotes) {
   // @todo: change this ugly array for arguments in the function.
   $footnotes = $footnotes['footnotes']['#footnotes'];
+
+  $notes = [
+    '#theme' => 'item_list',
+    '#list_type' => 'ul',
+    '#title' => 'Notes',
+    '#attributes' => ['class' => ''],
+    '#wrapper_attributes' => ['class' => 'container'],
+  ];
+
+//  return drupal_render($content);
   $str = '<ul class="footnotes">';
   // Drupal 7 requires we use "render element" which just introduces a wrapper
   // around the old array.

css/reference_footnote.css

@@ -0,0 +1,8 @@
+
+.footnotes .footnote .footnote-link {
+  float: left;
+}
+.footnotes .footnote .footnote-link::after {
+  content: " ";
+  white-space: pre;
+}

js/plugins/reference_footnotes/dialogs/footnotes.js

@@ -11,22 +11,31 @@
                     title: Drupal.t('Add a reference footnote'),
                     elements:
                         [
-                            {
-                                id: 'reference_footnote',
-                                type: 'select',
-                                items: editor.config.referenceFootnotes_list,
-                                label: Drupal.t('Reference Footnote item:'),
-                                setup: function (element) {
-                                    if (isEdit)
-                                        this.setValue(element.getText());
-                                }
-                            },
+                          {
+                            id: 'reference_footnote',
+                            type: 'select',
+                            items: editor.config.referenceFootnotes_list,
+                            label: Drupal.t('Reference Footnote item:'),
+                            setup: function (element) {
+                              if (isEdit)
+                                this.setValue(element.getText());
+                            }
+                          },
+                          {
+                            id: 'footnote',
+                            type: 'text',
+                            label: Drupal.t('Or add free-form footnote text :'),
+                            setup: function (element) {
+                              if (isEdit)
+                                this.setValue(element.getText());
+                            }
+                          },
                             {
                                 id: 'value',
                                 type: 'text',
                                 label: Drupal.t('Value :'),
                                 labelLayout: 'horizontal',
-                                style: 'float:left;width:100px;',
+                                style: 'float:left;width:200px;',
                                 setup: function (element) {
                                     if (isEdit)
                                         this.setValue(element.getAttribute('value'));
@@ -43,17 +52,20 @@
                 this.setupContent( this.realObj );
             },
             onOk : function() {
-                CKEDITOR.plugins.reference_footnotes.createFootnote( editor, this.realObj, this.getValueOf('info', 'reference_footnote'), this.getValueOf('info', 'value'));
+                var referenceNote = this.getValueOf('info', 'reference_footnote');
+                var textNote = this.getValueOf('info', 'footnote');
+                var value = textNote ? textNote : referenceNote;
+                CKEDITOR.plugins.reference_footnotes.createFootnote( editor, this.realObj, value, this.getValueOf('info', 'value'));
                 delete this.fakeObj;
                 delete this.realObj;
             }
         }
     }
 
-    CKEDITOR.dialog.add( 'createfootnotes', function( editor ) {
+    CKEDITOR.dialog.add( 'createreferencefootnotes', function( editor ) {
         return referenceFootnotesDialog( editor );
     });
-    CKEDITOR.dialog.add( 'editfootnotes', function( editor ) {
+    CKEDITOR.dialog.add( 'editreferencefootnotes', function( editor ) {
         return referenceFootnotesDialog( editor, 1 );
     });
 })();

js/plugins/reference_footnotes/plugin.js

@@ -5,7 +5,16 @@
             icons: 'reference_footnotes',
             onLoad: function() {
                 var icon_path = window.location.origin + this.path + 'images/fn_icon2.png';
+                var ref_icon_path = window.location.origin + this.path + 'images/fn_icon3.png';
                 CKEDITOR.addCss(
+                    '.cke_reference_footnote' +
+                    '{' +
+                    'background-image: url(' + CKEDITOR.getUrl( ref_icon_path ) + ');' +
+                    'background-position: center center;' +
+                    'background-repeat: no-repeat;' +
+                    'width: 16px;' +
+                    'height: 16px;' +
+                    '}' +
                     '.cke_footnote' +
                     '{' +
                     'background-image: url(' + CKEDITOR.getUrl( icon_path ) + ');' +
@@ -14,14 +23,15 @@
                     'width: 16px;' +
                     'height: 16px;' +
                     '}'
+
                 );
             },
             init: function( editor )
             {
-                editor.addCommand('createfootnotes', new CKEDITOR.dialogCommand('createfootnotes', {
+                editor.addCommand('createreferencefootnotes', new CKEDITOR.dialogCommand('createreferencefootnotes', {
                     allowedContent: 'fn[value]'
                 }));
-                editor.addCommand('editfootnotes', new CKEDITOR.dialogCommand('editfootnotes', {
+                editor.addCommand('editreferencefootnotes', new CKEDITOR.dialogCommand('editreferencefootnotes', {
                     allowedContent: 'fn[value]'
                 }));
 
@@ -30,7 +40,7 @@
                 // in hook_wysiwyg_plugin().
                 editor.ui.addButton && editor.ui.addButton( 'reference_footnotes', {
                     label: Drupal.t('Add a reference footnote'),
-                    command: 'createfootnotes',
+                    command: 'createreferencefootnotes',
                     icon: 'reference_footnotes'
                 });
 
@@ -39,7 +49,7 @@
                     editor.addMenuItems({
                         footnotes: {
                             label: Drupal.t('Edit footnote'),
-                            command: 'editfootnotes',
+                            command: 'editreferencefootnotes',
                             icon: 'reference_footnotes',
                             group: 'reference_footnotes'
                         }
@@ -55,12 +65,14 @@
                 }
 
                 editor.on( 'doubleclick', function( evt ) {
-                    if ( CKEDITOR.plugins.footnotes.getSelectedFootnote( editor ) )
-                        evt.data.dialog = 'editfootnotes';
-                });
+                    if ( CKEDITOR.plugins.reference_footnotes.getSelectedFootnote( editor ) )
+                    {
+                      evt.data.dialog = 'editreferencefootnotes';
+                    }
+                }, null, null, 1); // Ensure this event fires after the 'footnotes' event so we can decide which dialog to show.
 
-                CKEDITOR.dialog.add( 'createfootnotes', this.path + 'dialogs/footnotes.js' );
-                CKEDITOR.dialog.add( 'editfootnotes', this.path + 'dialogs/footnotes.js' );
+                CKEDITOR.dialog.add( 'createreferencefootnotes', this.path + 'dialogs/footnotes.js' );
+                CKEDITOR.dialog.add( 'editreferencefootnotes', this.path + 'dialogs/footnotes.js' );
             },
             afterInit : function( editor ) {
                 var dataProcessor = editor.dataProcessor,
@@ -70,7 +82,9 @@
                     dataFilter.addRules({
                         elements: {
                             fn: function(element ) {
-                                return editor.createFakeParserElement( element, 'cke_footnote', 'hiddenfield', false );
+
+                              return editor.createFakeParserElement(element, 'cke_reference_footnote', 'hiddenfield', false);
+
                             }
                         }
                     });
@@ -93,7 +107,7 @@ CKEDITOR.plugins.reference_footnotes = {
         if (value && value.length > 0 )
             realElement.setAttribute('value',value);
 
-        var fakeElement = editor.createFakeElement( realElement , 'cke_footnote', 'hiddenfield', false );
+        var fakeElement = editor.createFakeElement( realElement , 'cke_reference_footnote', 'hiddenfield', false );
         editor.insertElement(fakeElement);
     },
 

templates/footnote-list.html.twig

@@ -0,0 +1,21 @@
+{#
+/**
+ * @file footnote-list.html.twig
+ * Default theme implementation to present a list of reference footnotes.
+ *
+ * Available variables:
+ * - footnotess: A list of footnotes
+ * - notes: A list of free-form notes
+ * - references: A list of citations
+ * - attributes: HTML attributes for the container element.
+ *
+ * @see template_preprocess_footnote_list().
+ *
+ * @ingroup themeable
+ */
+#}
+
+<div{{ attributes.addClass('footnote-list') }}>
+    {{ notes }}
+    {{  references }}
+</div>