X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/88e7597e91bb03364d7846b160ff0b38b97c1be6..3957e054be29921a1ace348bdebdcb805a1f89ff:/src/redakcja/static/js/wiki/view_properties.js?ds=sidebyside

diff --git a/src/redakcja/static/js/wiki/view_properties.js b/src/redakcja/static/js/wiki/view_properties.js
index e6ad1ca2..e38a7d07 100644
--- a/src/redakcja/static/js/wiki/view_properties.js
+++ b/src/redakcja/static/js/wiki/view_properties.js
@@ -8,6 +8,7 @@
             "attributes": [
                 {
                     "name": "src",
+                    "type": "media",
                 },
                 {
                     "name": "alt",
@@ -46,7 +47,7 @@
 
             self.$pane = $("#side-properties");
             
-            $(document).on('click', '[x-node]', function(e) {
+            $("#simple-editor").on('click', '[x-node]', function(e) {
                 if (!e.redakcja_edited) {
                     e.redakcja_edited = true;
                     self.edit(this);
@@ -57,6 +58,10 @@
                 self.edit($(this).data('node'));
             });
 
+            $(document).on('click', '#bubbles .badge', function(e) {
+                self.edit($(this).data('node'));
+            });
+
             self.$pane.on('change', '.form-control', function() {
                 let $input = $(this);
 
@@ -68,7 +73,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;
                 }
                 
@@ -97,6 +106,81 @@
                 });
                 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');
+                }
+
+                rdf = $("> [x-node='RDF']", self.$edited);
+                if (!rdf.length) {
+                    rdf = $("<span x-node='RDF' x-ns='http://www.w3.org/1999/02/22-rdf-syntax-ns#'>");
+                    self.$edited.prepend(rdf); 
+                    self.$edited.prepend('\n  ');
+                   
+                }
+                rdfdesc = $("> [x-node='Description']", rdf);
+                if (!rdfdesc.length) {
+                    rdfdesc = $("<span x-node='Description' x-ns='http://www.w3.org/1999/02/22-rdf-syntax-ns#' x-a-rdf-about='" + self.doc.fullUri + "'>");
+                    rdf.prepend(rdfdesc);
+                    rdf.prepend('\n    ');
+                    rdfdesc.append('\n    ');
+                    rdf.append('\n  ');
+                }
+                span.appendTo(rdfdesc);
+                rdfdesc.append('\n    ');
+
+                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;
+            });
+
+
+            $('#media-chooser').on('show.bs.modal', function (event) {
+                var input = $("input", $(event.relatedTarget).parent());
+                var modal = $(this);
+                modal.data('target-input', input);
+                var imglist = modal.find('.modal-body');
+                imglist.html('');
+                $.each(self.doc.galleryImages, (i, imgItem) => {
+                    img = $("<img>").attr("src", imgItem.thumb).attr('title', imgItem.url).data('url', imgItem.url).on('click', function() {
+                        imglist.find('img').removeClass('active');
+                        $(this).addClass('active');
+                    });
+                    imglist.append(img);
+                });
+            })
+            $('#media-chooser .ctrl-ok').on('click', function (event) {
+                $('#media-chooser').data('target-input')
+                    .val(
+                        (new URL($('#media-chooser .active').data('url'), document.baseURI)).href
+                    ).trigger('change');
+                $('#media-chooser').modal('hide');
+            });
+            
+            self.$pane.on('click', '.current-convert', function() {
+                self.convert($(this).attr('data-to'));
+            });
+            self.$pane.on('click', '#current-delete', function() {
+                self.delete();
+            });
+            
             
             oldCallback.call(this);
         };
@@ -109,65 +193,191 @@
     PropertiesPerspective.prototype.edit = function(element) {
         let self = this;
 
-        let $node = $(element);
         $("#parents", self.$pane).empty();
+        $("#bubbles").empty();
+
+        $f = $("#properties-form", self.$pane);
+        $f.empty();
+
+        if (element === null) {
+            self.$edited = null;
+            return;
+        }
+
+        let $node = $(element);
+        let b = $("<div class='badge badge-primary'></div>").text($node.attr('x-node'));
+        b.data('node', element);
+        $("#bubbles").append(b);
+
         $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)
+
+            let b = $("<div class='badge badge-info'></div>").text($(this).attr('x-node'));
+            b.data('node', this);
+            $("#bubbles").append(b);
         })
+
         // 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, $(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.
-            $("> .RDF > .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') {
+            $("#current-convert").attr("data-current-type", "div");
+        } else if ($node[0].nodeName == 'EM') {
+            $("#current-convert").attr("data-current-type", "span");
+        }
     };
+
+    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;
+        if (field.value_type.widget == 'select') {
+            $aninput = $("<select class='form-control'>");
+            $.each(field.value_type.options, function() {
+                $("<option>").text(this).appendTo($aninput);
+            })
+        } else {
+            $aninput = $("<input class='form-control'>");
+            if (field.value_type.autocomplete) {
+                let autoOptions = field.value_type.autocomplete;
+                $aninput.autocomplete(autoOptions).autocomplete('instance')._renderItem = function(ul, item) {
+                    let t = item.label;
+                    if (item.name) t += '<br><small><strong>' + item.name + '</strong></small>';
+                    if (item.description) t += '<br><small><em>' + item.description + '</em></small>';
+                    return $( "<li>" )
+                        .append( "<div>" + t + "</div>" )
+                        .appendTo( ul );
+                };
+            }
+        }
+        $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();
+
+        let selector = "> [x-node='RDF'] > [x-node='Description'] > [x-node='"+tag+"']";
+        if (ns) {
+            selector += "[x-ns='"+ns+"']";
+        }
+        $(selector, self.$edited).each(function() {
+            self.addMetaInput(
+                $('.c', $fg),
+                field,
+                this);
+        });
+
+        count = $('.c > .input-group', $fg).length;
+        if (field.required) {
+            if (!count) {
+                $('<div class="text-warning">WYMAGANE</div>').appendTo($('.c', $fg));
+            }
+        }
+    };
+    
+
+
     PropertiesPerspective.prototype.addEditField = function(defn, value, elem) {
         let self = this;
         let $form = $("#properties-form", self.$pane);
 
         let $fg = $("<div class='form-group'>");
         $("<label/>").attr("for", "property-" + defn.name).text(defn.name).appendTo($fg);
-        let $input;
+        let $input, $inputCnt;
         switch (defn.type) {
         case 'text':
-            $input = $("<textarea>");
+            $inputCnt =$input = $("<textarea>");
             break;
         case 'select':
-            $input = $("<select>");
+            $inputCnt = $input = $("<select>");
             $.each(defn.options, function(i, e) {
                 $("<option>").text(e).appendTo($input);
             });
             break;
         case 'bool':
-            $input = $("<input type='checkbox'>");
+            $inputCnt = $input = $("<input type='checkbox'>");
+            break;
+        case 'media':
+            $inputCnt = $("<div class='media-input input-group'>");
+            $input = $("<input type='text'>");
+            $inputCnt.append($input);
+            $inputCnt.append($("<button type='button' class='ctrl-media-choose btn btn-primary' data-toggle='modal' data-target='#media-chooser'>…</button>"));
             break;
         default:
-            $input = $("<input>");
+            $inputCnt = $input = $("<input>");
         }
 
         $input.addClass("form-control").attr("id", "property-" + defn.name).data("property", defn.name);
@@ -180,11 +390,34 @@
         if (elem) {
             $input.data("edited", elem);
         }
-        $input.appendTo($fg);
+        $inputCnt.appendTo($fg);
 
         $fg.appendTo($form);
     }
-    
+
+    PropertiesPerspective.prototype.convert = function(newtag) {
+        this.$edited.attr('x-node', newtag);
+        // TODO: take care of attributes?
+    }
+
+    PropertiesPerspective.prototype.delete = function(newtag) {
+        p = this.$edited.parent();
+        this.$edited.remove();
+        this.edit(p);
+    }
+
+    PropertiesPerspective.prototype.onEnter = function(success, failure){
+        var self = this;
+        $.wiki.SidebarPerspective.prototype.onEnter.call(this);
+
+        if ($.wiki.activePerspective() != 'VisualPerspective')
+            $.wiki.switchToTab('#VisualPerspective');
+
+        if (self.$edited === null) {
+            self.edit($('[x-node="utwor"]')[0]);
+        }
+    };
+
     $.wiki.PropertiesPerspective = PropertiesPerspective;
 
 })(jQuery);