From 05a64b9314fac5f613133332d7d0b5b568ab8afc Mon Sep 17 00:00:00 2001
From: Radek Czajka <rczajka@rczajka.pl>
Date: Fri, 29 Jan 2021 15:23:07 +0100
Subject: [PATCH] Properies pane.

---
 src/redakcja/settings/__init__.py             |   1 +
 src/redakcja/static/css/gallery.css           |   7 +
 .../static/js/wiki/view_editor_wysiwyg.js     |   1 +
 .../static/js/wiki/view_properties.js         | 152 ++++++++++++++++++
 src/redakcja/static/js/wiki/wikiapi.js        |   4 +
 src/redakcja/static/js/wiki/xslt.js           |  33 ++--
 src/redakcja/static/xsl/wl2html_client.xsl    |  12 ++
 src/wiki/templates/wiki/document_details.html |  14 +-
 .../templates/wiki/tabs/properties_view.html  |   9 ++
 .../wiki/tabs/properties_view_item.html       |   4 +
 10 files changed, 221 insertions(+), 16 deletions(-)
 create mode 100644 src/redakcja/static/js/wiki/view_properties.js
 create mode 100644 src/wiki/templates/wiki/tabs/properties_view.html
 create mode 100644 src/wiki/templates/wiki/tabs/properties_view_item.html

diff --git a/src/redakcja/settings/__init__.py b/src/redakcja/settings/__init__.py
index 4859abb2..c7cf3244 100644
--- a/src/redakcja/settings/__init__.py
+++ b/src/redakcja/settings/__init__.py
@@ -196,6 +196,7 @@ PIPELINE = {
                 'js/wiki/view_editor_wysiwyg.js',
                 'js/wiki/view_gallery.js',
                 'js/wiki/view_annotations.js',
+                'js/wiki/view_properties.js',
                 'js/wiki/view_search.js',
                 'js/wiki/view_column_diff.js',
             ),
diff --git a/src/redakcja/static/css/gallery.css b/src/redakcja/static/css/gallery.css
index a1694a41..815229cc 100644
--- a/src/redakcja/static/css/gallery.css
+++ b/src/redakcja/static/css/gallery.css
@@ -8,6 +8,13 @@
     background-color: #C1C1C1;
 }
 
+#side-properties {
+    height: 100%;
+    overflow: auto;
+}
+#side-properties #parents li {
+    cursor: pointer;
+}
 
 #side-annotations {
     display: flex;
diff --git a/src/redakcja/static/js/wiki/view_editor_wysiwyg.js b/src/redakcja/static/js/wiki/view_editor_wysiwyg.js
index 607fa3f2..517c878e 100644
--- a/src/redakcja/static/js/wiki/view_editor_wysiwyg.js
+++ b/src/redakcja/static/js/wiki/view_editor_wysiwyg.js
@@ -692,6 +692,7 @@
 
         xml2html({
             xml: this.doc.text,
+            base: this.doc.getBase(),
             success: function(element){
                 var htmlView = $('#html-view');
                 htmlView.html(element);
diff --git a/src/redakcja/static/js/wiki/view_properties.js b/src/redakcja/static/js/wiki/view_properties.js
new file mode 100644
index 00000000..571dac00
--- /dev/null
+++ b/src/redakcja/static/js/wiki/view_properties.js
@@ -0,0 +1,152 @@
+(function($){
+
+    let w = function() {};
+    w = console.log;
+    
+    const elementDefs = {
+        "ilustr": {
+            "attributes": [
+                {
+                    "name": "src",
+                },
+                {
+                    "name": "alt",
+                    "type": "text",
+                },
+            ],
+        },
+        "ref": {
+            "attributes": [
+                {
+                    "name": "href",
+                },
+            ],
+        }
+    };
+
+    function PropertiesPerspective(options) {
+        let oldCallback = options.callback || function() {};
+        this.vsplitbar = 'WŁAŚCIWOŚCI';
+
+        options.callback = function() {
+            let self = this;
+
+            self.$pane = $("#side-properties");
+            
+            $(document).on('click', '[x-node]', function(e) {
+                e.stopPropagation();
+                self.edit(this);
+            });
+
+            self.$pane.on('click', '#parents li', function(e) {
+                self.edit($(this).data('node'));
+            });
+
+            self.$pane.on('change', '.form-control', function() {
+                let $input = $(this);
+
+                if ($input.data("edited")) {
+                    $input.data("edited").text($input.val());
+                    return;
+                }
+                
+                html2text({
+                    element: self.$edited[0],
+                    success: function(xml) {
+                        w(222)
+                        let $xmlelem = $($.parseXML(xml));
+                        w(333, $xmlelem)
+                        $xmlelem.contents().attr($input.data('property'), $input.val());
+                        w(444, $xmlelem)
+                        let newxml = (new XMLSerializer()).serializeToString($xmlelem[0]);
+                        w(555, newxml)
+                        xml2html({
+                            xml: newxml,
+                            base: self.doc.getBase(),
+                            success: function(html) {
+                                let htmlElem = $(html);
+                                self.$edited.replaceWith(htmlElem);
+                                self.edit(htmlElem);
+                            }
+                        });
+                    },
+                    error: function(e) {console.log(e);},
+                });
+                self.$edited;
+            });
+            
+            oldCallback.call(this);
+        };
+
+        $.wiki.SidebarPerspective.call(this, options);
+    }
+
+    PropertiesPerspective.prototype = new $.wiki.SidebarPerspective();
+
+    PropertiesPerspective.prototype.edit = function(element) {
+        let self = this;
+
+        let $node = $(element);
+        $("#parents", self.$pane).empty();
+        $node.parents('[x-node]').each(function() {
+            let a = $("<li class='breadcrumb-item'>").text($(this).attr('x-node'));
+            a.data('node', this);
+            $("#parents", self.$pane).prepend(a)
+        })
+        // It's a tag.
+        node = $(element).attr('x-node');
+        $("h1", self.$pane).text(node);
+
+        $f = $("#properties-form", self.$pane);
+        $f.empty();
+        self.$edited = $(element);
+
+        let nodeDef = elementDefs[node];
+        if (nodeDef && nodeDef.attributes) {
+            $.each(nodeDef.attributes, function(i, a) {
+                self.addEditField(a.name, a.type, $(element).attr('data-wlf-' + a.name)); // ...
+            })
+        }
+
+
+        // Only utwor can has matadata now.
+        if (node == 'utwor') {
+            // Let's find all the metadata.
+            $("> .RDF > .Description > [x-node]", $node).each(function() {
+                $meta = $(this);
+                self.addEditField(
+                    $meta.attr('x-node'),
+                    null,
+                    $meta.text(),
+                    $meta,
+                );
+            });
+        }
+    };
+        
+    PropertiesPerspective.prototype.addEditField = function(name, type, value, elem) {
+        let self = this;
+        let $form = $("#properties-form", self.$pane);
+
+        let $fg = $("<div class='form-group'>");
+        $("<label/>").attr("for", "property-" + name).text(name).appendTo($fg);
+        let $input;
+        if (type == 'text') {
+            $input = $("<textarea>");
+        } else {
+            $input = $("<input>")
+        }
+        // val?
+        $input.addClass("form-control").attr("id", "property-" + name).data("property", name).val(value);
+        if (elem) {
+            $input.data("edited", elem);
+        }
+        $input.appendTo($fg);
+
+        $fg.appendTo($form);
+    }
+    
+    $.wiki.PropertiesPerspective = PropertiesPerspective;
+
+})(jQuery);
+
diff --git a/src/redakcja/static/js/wiki/wikiapi.js b/src/redakcja/static/js/wiki/wikiapi.js
index 28450ce0..2f1bceb5 100644
--- a/src/redakcja/static/js/wiki/wikiapi.js
+++ b/src/redakcja/static/js/wiki/wikiapi.js
@@ -440,6 +440,10 @@
         return text.length;
     }
 
+    /* Temporary workaround for relative images. */
+    WikiDocument.prototype.getBase = function() {
+        return '/media/dynamic/images/' + this.galleryLink + '/';
+    };
 
 	$.wikiapi.WikiDocument = WikiDocument;
 })(jQuery);
diff --git a/src/redakcja/static/js/wiki/xslt.js b/src/redakcja/static/js/wiki/xslt.js
index 9da4e116..b1adc8ec 100644
--- a/src/redakcja/static/js/wiki/xslt.js
+++ b/src/redakcja/static/js/wiki/xslt.js
@@ -17,21 +17,20 @@ function withStylesheets(code_block, onError)
     if (!xml2htmlStylesheet) {
     	$.blockUI({message: 'Ładowanie arkuszy stylów...'});
     	$.ajax({
-        	url: STATIC_URL + 'xsl/wl2html_client.xsl?20201110',
-        	dataType: 'xml',
-        	timeout: 10000,
-        	success: function(data) {
+            url: STATIC_URL + 'xsl/wl2html_client.xsl?210129',
+            dataType: 'xml',
+            timeout: 10000,
+            success: function(data) {
             	xml2htmlStylesheet = createXSLT(data);
                 $.unblockUI();
-				code_block();
-
+		code_block();
             },
-			error: onError
+	    error: onError
         })
     }
-	else {
-		code_block();
-	}
+    else {
+	code_block();
+    }
 }
 
 
@@ -61,6 +60,20 @@ function xml2html(options) {
             source.text('');
             options.error(error.text(), source_text);
         } else {
+            let galleryUrl = new URL(
+                options.base,
+                window.location.href
+            );
+            $("img", $(doc.childNodes)).each(function() {
+                $(this).attr(
+                    'src',
+                    new URL(
+                        $(this).attr('src'),
+                        galleryUrl
+                    )
+                );
+            })
+
             options.success(doc.childNodes);
 
             $.themes.withCanon(function(canonThemes) {
diff --git a/src/redakcja/static/xsl/wl2html_client.xsl b/src/redakcja/static/xsl/wl2html_client.xsl
index b359e912..c4e68cea 100644
--- a/src/redakcja/static/xsl/wl2html_client.xsl
+++ b/src/redakcja/static/xsl/wl2html_client.xsl
@@ -502,6 +502,18 @@
         </div>
     </xsl:template>
 
+    <xsl:template match="ilustr">
+      <div>
+        <xsl:call-template name="standard-attributes" />
+        <img>
+          <xsl:attribute name="src">
+            <xsl:value-of select="@src" />
+          </xsl:attribute>
+        </img>
+        <p class="alt"><xsl:value-of select="@alt"/></p>
+      </div>
+    </xsl:template>
+
     <!--
         ***********************************
         Style akapitowe oraz strofy i wersy
diff --git a/src/wiki/templates/wiki/document_details.html b/src/wiki/templates/wiki/document_details.html
index 24f27d61..8517bb32 100644
--- a/src/wiki/templates/wiki/document_details.html
+++ b/src/wiki/templates/wiki/document_details.html
@@ -28,9 +28,10 @@
 {% endblock %}
 
 {% block tabs-right %}
-    {% include "wiki/tabs/gallery_view_item.html" %}
-    {% include "wiki/tabs/annotations_view_item.html" %}
-    {% include "wiki/tabs/search_view_item.html" %}
+  {% include "wiki/tabs/gallery_view_item.html" %}
+  {% include "wiki/tabs/annotations_view_item.html" %}
+  {% include "wiki/tabs/properties_view_item.html" %}
+  {% include "wiki/tabs/search_view_item.html" %}
 {% endblock %}
 
 {% block splitter-extra %}
@@ -38,9 +39,10 @@
     <p class="vsplitbar-title"></p>
     </div>
     <div id="sidebar">
-        {% include "wiki/tabs/gallery_view.html" %}
-        {% include "wiki/tabs/annotations_view.html" %}
-        {% include "wiki/tabs/search_view.html" %}
+      {% include "wiki/tabs/gallery_view.html" %}
+      {% include "wiki/tabs/annotations_view.html" %}
+      {% include "wiki/tabs/properties_view.html" %}
+      {% include "wiki/tabs/search_view.html" %}
     </div>
     <div id="drag-layer"></div>
 {% endblock %}
diff --git a/src/wiki/templates/wiki/tabs/properties_view.html b/src/wiki/templates/wiki/tabs/properties_view.html
new file mode 100644
index 00000000..a63dc70c
--- /dev/null
+++ b/src/wiki/templates/wiki/tabs/properties_view.html
@@ -0,0 +1,9 @@
+{% load i18n %}
+<div id="side-properties" style="display: none">
+  <ol class="breadcrumb" id="parents"></ol>
+  <div class="container">
+  <h1></h1>
+  <form id="properties-form">
+  </form>
+  </div>
+</div>
diff --git a/src/wiki/templates/wiki/tabs/properties_view_item.html b/src/wiki/templates/wiki/tabs/properties_view_item.html
new file mode 100644
index 00000000..53524a72
--- /dev/null
+++ b/src/wiki/templates/wiki/tabs/properties_view_item.html
@@ -0,0 +1,4 @@
+{% load i18n %}
+<li id="PropertiesPerspective" data-ui-related="side-properties" data-ui-jsclass="PropertiesPerspective" class="nav-item">
+    <a href="#" title="{% trans "Properties" %}" class="nav-link">PR</a>
+</li>
-- 
2.20.1