From 008b2c8d44987a6ef6b405ffc2124f28d3c6220d Mon Sep 17 00:00:00 2001
From: Radek Czajka <rczajka@rczajka.pl>
Date: Thu, 7 Jul 2022 15:04:54 +0200
Subject: [PATCH] Metadata editor

---
 requirements/requirements.txt                 |   4 +-
 src/redakcja/static/css/html.scss             |  12 +-
 .../static/js/wiki/view_editor_wysiwyg.js     |   2 +-
 .../static/js/wiki/view_properties.js         | 123 ++++++++++++++++--
 src/redakcja/static/js/wiki/xslt.js           |  69 +++++++---
 src/wiki/templates/wiki/document_details.html |   1 +
 .../templates/wiki/document_details_base.html |   2 +-
 src/wlxml/templates/wlxml/wl2html.xsl         |  30 +++--
 src/wlxml/urls.py                             |   2 +
 src/wlxml/views.py                            |  30 ++++-
 10 files changed, 223 insertions(+), 52 deletions(-)

diff --git a/requirements/requirements.txt b/requirements/requirements.txt
index a7a944ef..2d3966c4 100644
--- a/requirements/requirements.txt
+++ b/requirements/requirements.txt
@@ -10,10 +10,10 @@ python-slugify
 python-docx==0.8.10
 Wikidata==0.6.1
 
-librarian==2.4.3
+librarian==2.4.4
 
 ## Django
-Django==3.2.12
+Django==3.2.14
 fnpdjango==0.5
 django-pipeline==2.0.7
 django-cas-ng==4.3.0
diff --git a/src/redakcja/static/css/html.scss b/src/redakcja/static/css/html.scss
index 0b9e9433..6d3d3c54 100644
--- a/src/redakcja/static/css/html.scss
+++ b/src/redakcja/static/css/html.scss
@@ -108,27 +108,27 @@
     content: "\feff";
 }
 
-.htmlview .strofa .wers_wciety, .htmlview .strofa .wers_wciety[data-wlf-typ='1'] {
+.htmlview .strofa .wers_wciety, .htmlview .strofa .wers_wciety[x-a-wl-typ='1'] {
     margin-left: 1em;
 }
 
-.htmlview .strofa .wers_wciety[data-wlf-typ='2'], .htmlview .strofa .wers_cd {
+.htmlview .strofa .wers_wciety[x-a-wl-typ='2'], .htmlview .strofa .wers_cd {
     margin-left: 2em;
 }
 
-.htmlview .strofa .wers_wciety[data-wlf-typ='3'] {
+.htmlview .strofa .wers_wciety[x-a-wl-typ='3'] {
     margin-left: 3em;
 }
 
-.htmlview .strofa .wers_wciety[data-wlf-typ='4'] {
+.htmlview .strofa .wers_wciety[x-a-wl-typ='4'] {
     margin-left: 4em;
 }
 
-.htmlview .strofa .wers_wciety[data-wlf-typ='5'] {
+.htmlview .strofa .wers_wciety[x-a-wl-typ='5'] {
     margin-left: 5em;
 }
 
-.htmlview .strofa .wers_wciety[data-wlf-typ='6'] {
+.htmlview .strofa .wers_wciety[x-a-wl-typ='6'] {
     margin-left: 6em;
 }
 
diff --git a/src/redakcja/static/js/wiki/view_editor_wysiwyg.js b/src/redakcja/static/js/wiki/view_editor_wysiwyg.js
index 7baa00da..2f510a24 100644
--- a/src/redakcja/static/js/wiki/view_editor_wysiwyg.js
+++ b/src/redakcja/static/js/wiki/view_editor_wysiwyg.js
@@ -505,7 +505,7 @@
 
         if($box.attr("x-edit-attribute")) {
             source = $('<span x-pass-thru="true"/>');
-            source.text($box.attr("data-wlf-" + $box.attr("x-edit-attribute")));
+            source.text($box.attr("x-a-wl-" + $box.attr("x-edit-attribute")));
             source = source[0];
         } else {
             source = $box[0];
diff --git a/src/redakcja/static/js/wiki/view_properties.js b/src/redakcja/static/js/wiki/view_properties.js
index 63dd39de..eeddf678 100644
--- a/src/redakcja/static/js/wiki/view_properties.js
+++ b/src/redakcja/static/js/wiki/view_properties.js
@@ -72,7 +72,11 @@
                 }
                 
                 if ($input.data("edited")) {
-                    $input.data("edited").text(inputval);
+                    if ($input.data("edited-attr")) {
+                        $input.data("edited").attr($input.data("edited-attr"), inputval);
+                    } else {
+                        $input.data("edited").text(inputval);
+                    }
                     return;
                 }
                 
@@ -102,6 +106,37 @@
                 self.$edited;
             });
 
+            
+            self.$pane.on('click', '.meta-add', function() {
+                // create a metadata item
+                let $fg = $(this).parent();
+                let ns = $fg.data('ns');
+                let tag = $fg.data('tag');
+                let field = $fg.data('field');
+                let span = $('<span/>');
+                span.attr('x-node', tag);
+                span.attr('x-ns', ns)
+                if (field.value_type.hasLanguage) {
+                    span.attr('x-a-xml-lang', 'pl');
+                }
+                span.appendTo(
+                    $("> [x-node='RDF'] > [x-node='Description']", self.$edited)
+                );
+
+                self.displayMetaProperty($fg);
+                
+                return false;
+            });
+            
+            self.$pane.on('click', '.meta-delete', function() {
+                let $fg = $(this).closest('.form-group'); 
+                $('input', $fg).data('edited').remove();
+                self.displayMetaProperty($fg);
+                return false;
+            });
+
+
+            
             self.$pane.on('click', '.current-convert', function() {
                 self.convert($(this).attr('data-to'));
             });
@@ -150,25 +185,36 @@
         let nodeDef = elementDefs[node];
         if (nodeDef && nodeDef.attributes) {
             $.each(nodeDef.attributes, function(i, a) {
-                self.addEditField(a, $(element).attr('data-wlf-' + a.name)); // ...
+                self.addEditField(a, $(element).attr('x-a-wl-' + a.name)); // ...
             })
         }
 
-
         // Only utwor can has matadata now.
         if (node == 'utwor') {
-            // Let's find all the metadata.
-            $("> [x-node='RDF'] > [x-node='Description'] > [x-node]", $node).each(function() {
-                $meta = $(this);
-                self.addEditField(
-                    {"name": $meta.attr('x-node'),},
-                    $meta.text(),
-                    $meta,
-                );
-            });
-        }
+            $('<hr>').appendTo($("#properties-form", self.$pane))
+            META_FIELDS.forEach(function(field) {
+                let $fg = $("<div class='form-group'>");
+                $("<label/>").text(field.name).appendTo($fg);
+
+                // if multiple?
+                $("<button class='meta-add float-right btn btn-primary'>+</button>").appendTo($fg);
+
+                let match = field.uri.match(/({(.*)})?(.*)/);
+                ns = match[2];
+                tag = match[3];
+
+                let cont = $('<div class="c">');
 
+                $fg.data('ns', ns);
+                $fg.data('tag', tag);
+                $fg.data('field', field);
+                cont.appendTo($fg);
 
+                self.displayMetaProperty($fg);
+
+                $fg.appendTo( $("#properties-form", self.$pane));
+            });
+        }
 
         // check node type, find relevant tags
         if ($node[0].nodeName == 'DIV') {
@@ -178,6 +224,57 @@
         }
     };
 
+    PropertiesPerspective.prototype.addMetaInput = function(cont, field, element) {
+        let self = this;
+
+        let ig = $('<div class="input-group">');
+        //ig.data('edited', element);
+        ig.appendTo(cont);
+
+        if (field.value_type.hasLanguage) {
+            let pp = $("<div class='input-group-prepend'>");
+            let lang_input = $("<input class='form-control' size='1' class='lang'>");
+            lang_input.data('edited', $(element));
+            lang_input.data('edited-attr', 'x-a-xml-lang');
+            lang_input.val(
+                $(element).attr('x-a-xml-lang')
+            );
+            lang_input.appendTo(pp);
+            pp.appendTo(ig);
+        }
+
+        let $aninput = $("<input class='form-control'>");
+        $aninput.data('edited', $(element))
+        $aninput.val(
+            $(element).text()
+        );
+        $aninput.appendTo(ig);
+
+        let ap = $("<div class='input-group-append'>");
+        ap.appendTo(ig);
+        $("<button class='meta-delete btn btn-outline-secondary'>x</button>").appendTo(ap);
+        
+        // lang
+    };
+    
+
+    PropertiesPerspective.prototype.displayMetaProperty = function($fg) {
+        let self = this;
+        let ns = $fg.data('ns');
+        let tag = $fg.data('tag');
+        let field = $fg.data('field');
+
+        //  clear container
+        $('.c', $fg).empty();
+        
+        $("> [x-node='RDF'] > [x-node='Description'] > [x-node='"+tag+"'][x-ns='"+ns+"']", self.$edited).each(function() {
+            self.addMetaInput(
+                $('.c', $fg),
+                field,
+                this);
+        });
+    };
+    
 
 
     PropertiesPerspective.prototype.addEditField = function(defn, value, elem) {
diff --git a/src/redakcja/static/js/wiki/xslt.js b/src/redakcja/static/js/wiki/xslt.js
index 19804462..a38ce6b5 100644
--- a/src/redakcja/static/js/wiki/xslt.js
+++ b/src/redakcja/static/js/wiki/xslt.js
@@ -107,6 +107,7 @@ const DOCUMENT_TYPE_NODE             = 10;
 const DOCUMENT_FRAGMENT_NODE         = 11;
 const NOTATION_NODE                  = 12;
 const XATTR_RE = /^x-attr-name-(.*)$/;
+const XATTR_KNOWN_RE = /^x-a-([a-z]+)-(.*)$/;
 
 const ELEM_START = 1;
 const ELEM_END = 2;
@@ -119,6 +120,13 @@ const NAMESPACES = {
 	"http://www.w3.org/XML/1998/namespace": "xml"
 };
 
+NS_PREFIXES = {
+    'wl': ''
+};
+for (prefix in NAMESPACES) {
+    NS_PREFIXES[NAMESPACES[prefix]] = prefix
+};
+
 function HTMLSerializer() {
 	// empty constructor
 }
@@ -327,32 +335,61 @@ HTMLSerializer.prototype._serializeElement = function(node) {
 
     	/* retrieve attributes */
     	var attributeIDs = [];
+        var attributes = [];
     	for (var i = 0; i < node.attributes.length; i++) {
-    		var attr = node.attributes.item(i);
-
-    		// check if name starts with "x-attr-name"
-    		var m = attr.name.match(XATTR_RE);
-    		if (m !== null)
-    			attributeIDs.push(m[1]);
+    	    var attr = node.attributes.item(i);
+
+            m = attr.name.match(XATTR_KNOWN_RE);
+            if (m !== null) {
+                prefix = m[1];
+                tag = m[2];
+                attributes.push([
+                    NS_PREFIXES[prefix],
+                    tag,
+                    attr.value
+                ]);
+            } else {
+    	        // check if name starts with "x-attr-name"
+    	        var m = attr.name.match(XATTR_RE);
+    	        if (m !== null) {
+    		    attributeIDs.push(m[1]);
+                }
+            }
     	};
 
     	/* print out */
 
     	self.result += '<' + tagName;
 
-    	$.each(attributeIDs, function() {
-    		var nsData = self._assignNamespace(node.getAttribute('x-attr-ns-'+this));
-
+        function writeAttr(ns, tag, value) {
+            if (ns) {
+    	        var nsData = self._assignNamespace(ns);
     		if(nsData.fresh) {
-    			newNamespaces.push(nsData);
-    			self.stack.push({
-    				"type": NS_END,
-    				"namespace": nsData
-    			});
+    		    newNamespaces.push(nsData);
+    		    self.stack.push({
+    			"type": NS_END,
+    			"namespace": nsData
+    		    });
     		};
+                tag = self._join(nsData.prefix, tag);
+            }
 
-    		self.result += ' ' + self._join(nsData.prefix, node.getAttribute('x-attr-name-'+this));
-    		self.result += '="' + node.getAttribute('x-attr-value-'+this).replace(/&/g, '&amp;').replace(/"/g, '&quot;') + '"';
+    	    self.result += ' ' + tag;
+    	    self.result += '="' + value.replace(/&/g, '&amp;').replace(/"/g, '&quot;') + '"';
+        }
+        
+        $.each(attributes, function() {
+            writeAttr(
+                this[0], this[1], this[2]
+            );
+        });
+        
+    	$.each(attributeIDs, function() {
+            writeAttr(
+                node.getAttribute('x-attr-ns-'+this),
+    		node.getAttribute('x-attr-name-'+this),
+    		node.getAttribute('x-attr-value-'+this)
+            );
     	});
 
     	/* print new namespace declarations */
diff --git a/src/wiki/templates/wiki/document_details.html b/src/wiki/templates/wiki/document_details.html
index 8517bb32..4455e4d6 100644
--- a/src/wiki/templates/wiki/document_details.html
+++ b/src/wiki/templates/wiki/document_details.html
@@ -11,6 +11,7 @@
   <link rel="stylesheet" href="{% static "js/lib/codemirror-5.49.0/codemirror.css" %}">
 
   <script src="{% static "js/wiki/loader.js" %}" type="text/javascript" charset="utf-8"> </script>
+  <script src="{% url 'wlxml_meta_tags' %}"></script>
 {% endblock %}
 
 {% block tabs-menu %}
diff --git a/src/wiki/templates/wiki/document_details_base.html b/src/wiki/templates/wiki/document_details_base.html
index db78c7eb..6110fb8c 100644
--- a/src/wiki/templates/wiki/document_details_base.html
+++ b/src/wiki/templates/wiki/document_details_base.html
@@ -7,7 +7,7 @@
   {% load pipeline %}
   {% stylesheet 'detail' %}
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
-    <link rel="stylesheet" href="/wlxml/wl.css"
+    <link rel="stylesheet" href="/wlxml/wl.css">
 {% endblock %}
 
 {% block extrabody %}
diff --git a/src/wlxml/templates/wlxml/wl2html.xsl b/src/wlxml/templates/wlxml/wl2html.xsl
index 91d41c4f..c3af0ff4 100644
--- a/src/wlxml/templates/wlxml/wl2html.xsl
+++ b/src/wlxml/templates/wlxml/wl2html.xsl
@@ -262,18 +262,24 @@
         </xsl:if>
 
         <xsl:for-each select="@*">
-            <xsl:variable name="id" select="generate-id()" />
-            <xsl:attribute name="x-attr-value-{$id}"><xsl:value-of select="."/></xsl:attribute>
-            <xsl:attribute name="x-attr-name-{$id}"><xsl:value-of select="local-name()"/></xsl:attribute>
-            <xsl:choose>
-            	<xsl:when test="namespace-uri()">
-                <xsl:attribute name="x-attr-ns-{$id}"><xsl:value-of select="namespace-uri()"/></xsl:attribute>
-				</xsl:when>
-				<!-- if the element belongs to default namespace and attribut has no namespace -->
-            	<xsl:when test="not(namespace-uri(.))">
-				<xsl:attribute name="data-wlf-{local-name()}"><xsl:value-of select="."/></xsl:attribute>
-				</xsl:when>
-			</xsl:choose>               
+
+          <xsl:choose>
+            {% for namespace, prefix in namespaces.items %}
+            <xsl:when test="namespace-uri() =  '{{ namespace }}'">
+              <xsl:attribute name="x-a-{{ prefix }}-{local-name()}">
+                <xsl:value-of select="."/>
+              </xsl:attribute>
+            </xsl:when>
+            {% endfor %}
+
+            <xsl:otherwise>
+              <xsl:variable name="id" select="generate-id()" />
+              <xsl:attribute name="x-attr-value-{$id}"><xsl:value-of select="."/></xsl:attribute>
+              <xsl:attribute name="x-attr-name-{$id}"><xsl:value-of select="local-name()"/></xsl:attribute>
+              <xsl:attribute name="x-attr-ns-{$id}"><xsl:value-of select="namespace-uri()"/></xsl:attribute>
+	    </xsl:otherwise>
+	  </xsl:choose>               
+
         </xsl:for-each>
     </xsl:template>
 
diff --git a/src/wlxml/urls.py b/src/wlxml/urls.py
index 852bed14..6b4a0364 100644
--- a/src/wlxml/urls.py
+++ b/src/wlxml/urls.py
@@ -8,4 +8,6 @@ urlpatterns = [
 
     path('tags/', views.TagsView.as_view(), name='wlxml_tags'),
     path('tags/<slug>/', views.TagView.as_view(), name='wlxml_tag'),
+
+    path('metatags.js', views.MetaTagsView.as_view(), name='wlxml_meta_tags'),
 ]
diff --git a/src/wlxml/views.py b/src/wlxml/views.py
index 9a2a046b..b951b3c6 100644
--- a/src/wlxml/views.py
+++ b/src/wlxml/views.py
@@ -1,6 +1,9 @@
 from io import BytesIO
-from django.views.generic import TemplateView, ListView, DetailView
+import json
+from django.http import HttpResponse
+from django.views.generic import TemplateView, ListView, DetailView, View
 from . import models
+from librarian.dcparser import BookInfo
 from librarian.document import WLDocument
 from librarian.builders import StandaloneHtmlBuilder
 
@@ -15,6 +18,12 @@ class XslView(TemplateView):
         for t in models.Tag.objects.all():
             tags.setdefault(t.type, []).append(t.name)
         ctx['tags'] = tags
+        ctx['namespaces'] = {
+	    "http://www.w3.org/1999/02/22-rdf-syntax-ns#": "rdf",
+	    "http://purl.org/dc/elements/1.1/": "dc",
+	    "http://www.w3.org/XML/1998/namespace": "xml",
+            "": "wl",
+        }
         return ctx
 
 
@@ -32,3 +41,22 @@ class TagView(DetailView):
     queryset = models.Tag.objects.all()
     slug_field = 'name'
 
+
+class MetaTagsView(View):
+    def get(self, request):
+        return HttpResponse(
+            'let META_FIELDS = ' + json.dumps([
+                {
+                    'name': f.name,
+                    'required': f.required,
+                    'multiple': f.multiple,
+                    'uri': f.uri,
+                    'value_type': {
+                        'hasLanguage': f.value_type.has_language,
+                        'name': f.value_type.__name__,
+                    }
+                }
+                for f in BookInfo.FIELDS
+            ]),
+            content_type='text/javascript')
+    
-- 
2.20.1