From: Radek Czajka <rczajka@rczajka.pl>
Date: Fri, 29 Jan 2021 14:23:07 +0000 (+0100)
Subject: Properies pane.
X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/05a64b9314fac5f613133332d7d0b5b568ab8afc?ds=inline
Properies pane.
---
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>