X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/0dd00c51dfdbda93e1b9c4612477cd05109d4517..2dd9e6498b5e0bd5c0bd882db02be9768c34c019:/src/redakcja/static/js/wiki/view_properties.js diff --git a/src/redakcja/static/js/wiki/view_properties.js b/src/redakcja/static/js/wiki/view_properties.js index 63dd39de..51f26d50 100644 --- a/src/redakcja/static/js/wiki/view_properties.js +++ b/src/redakcja/static/js/wiki/view_properties.js @@ -2,12 +2,13 @@ let w = function() {}; w = console.log; - + const elementDefs = { "ilustr": { "attributes": [ { "name": "src", + "type": "media", }, { "name": "alt", @@ -37,200 +38,455 @@ } }; - function PropertiesPerspective(options) { - let oldCallback = options.callback || function() {}; - this.vsplitbar = 'WŁAŚCIWOŚCI'; + class PropertiesPerspective extends $.wiki.SidebarPerspective { + vsplitbar = 'WŁAŚCIWOŚCI'; + $edited = null; - options.callback = function() { - let self = this; + constructor(options) { + super(options); + let self = this; - self.$pane = $("#side-properties"); - - $("#simple-editor").on('click', '[x-node]', function(e) { - if (!e.redakcja_edited) { - e.redakcja_edited = true; - self.edit(this); - } - }); + self.$pane = $("#side-properties"); - self.$pane.on('click', '#parents li', function(e) { - self.edit($(this).data('node')); - }); + $("#simple-editor").on('click', '[x-node]', function(e) { + if (!e.redakcja_edited) { + e.redakcja_edited = true; + self.edit(this); + } + }); - $(document).on('click', '#bubbles .badge', function(e) { - self.edit($(this).data('node')); - }); + self.$pane.on('click', '#parents li', function(e) { + self.edit($(this).data('node')); + }); - self.$pane.on('change', '.form-control', function() { - let $input = $(this); + $(document).on('click', '#bubbles .badge', function(e) { + self.edit($(this).data('node')); + }); - let inputval; - if ($input.attr('type') == 'checkbox') { - inputval = $input.is(':checked'); - } else { - inputval = $input.val(); - } - - if ($input.data("edited")) { - $input.data("edited").text(inputval); - return; - } - - html2text({ - element: self.$edited[0], - success: function(xml) { - w(222) - let $xmlelem = $($.parseXML(xml)); - w(333, $xmlelem) - w($input.data('property'), $input.val()); - $xmlelem.contents().attr($input.data('property'), inputval); - 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); + self.$pane.on('change', '.form-control', function() { + let $input = $(this); + + let inputval; + if ($input.attr('type') == 'checkbox') { + inputval = $input.is(':checked'); + } else { + inputval = $input.val(); + } + + if ($input.data("edited")) { + if ($input.data("edited-attr")) { + $input.data("edited").attr($input.data("edited-attr"), inputval); + } else { + $input.data("edited").text(inputval); + } + $.wiki.perspectives.VisualPerspective.flush(); + return; + } + + html2text({ + element: self.$edited[0], + success: function(xml) { + w(222) + let $xmlelem = $($.parseXML(xml)); + w(333, $xmlelem) + w($input.data('property'), $input.val()); + $xmlelem.contents().attr($input.data('property'), inputval); + 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); + $.wiki.activePerspective().flush(); + } + }); + }, + error: function(e) {console.log(e);}, + }); + 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.attr('x-node', tag); + span.attr('x-ns', ns) + if (field.value_type.hasLanguage) { + span.attr('x-a-xml-lang', 'pl'); + } + + let rdf = $("> [x-node='RDF']", self.$edited); + if (!rdf.length) { + rdf = $(""); + self.$edited.prepend(rdf); + self.$edited.prepend('\n '); + + } + let rdfdesc = $("> [x-node='Description']", rdf); + if (!rdfdesc.length) { + rdfdesc = $(""); + 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'); + let $ig = $(this).closest('.input-group'); + $('input', $ig).data('edited').remove(); + self.displayMetaProperty($fg); + $.wiki.perspectives.VisualPerspective.flush(); + 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(''); + + self.doc.refreshImageGallery({ + success: function(galleryImages) { + $.each(self.doc.galleryImages, (i, imgItem) => { + let 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'); + }); + + /* Meta chooser */ + $('#meta-chooser').on('show.bs.modal', function (event) { + let input = $("input", $(event.relatedTarget).closest('.input-group')); + let $fg = $(event.relatedTarget).closest('.form-group'); + let field = $fg.data('field'); + let modal = $(this); + modal.data('target-input', input); + let body = modal.find('.modal-body'); + body.html(''); + + let add_options = function(cnt, options, value) { + $.each(options, (i, item) => { + let elem = $('
'); + if (!item.usable) { + $('input', elem).remove(); + } + if (item.hidden) { + $('input', elem).prop('disabled', 'disabled'); + } + $('input', elem).val(item.value); + $('input', elem).val(item.value); + $('.value', elem).text(item.value); + $('.name', elem).append(item.name); + $('.description', elem).append(item.description); + let valueMatch = value && value.startsWith(item.value); + if (valueMatch) { + $('label', elem).addClass('text-primary') + if (value == item.value) { + $('input', elem).prop('checked', true); } - }); - }, - error: function(e) {console.log(e);}, + } + if (item.sub) { + let subT = $('
+
'); + let sub = $('
'); + elem.append(subT); + elem.append(sub); + subT.on('click', () => { + sub.toggle() + }); + add_options(sub, item.sub, valueMatch ? value : null); + } + elem.appendTo(cnt); + }); + }; + + $.ajax({ + url: field.value_type.chooser.source, + success: function(data) { + add_options(body, data, input.val()); + } }); - self.$edited; + }) + $('#meta-chooser .ctrl-ok').on('click', function (event) { + $('#meta-chooser').data('target-input').val( + $('#meta-chooser :checked').val() + ).trigger('change'); + $('#meta-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); - }; + self.$pane.on('click', '.current-convert', function() { + self.convert($(this).attr('data-to')); + }); + self.$pane.on('click', '#current-delete', function() { + self.delete(); + }); + } - $.wiki.SidebarPerspective.call(this, options); - } + edit(element) { + let self = this; - PropertiesPerspective.prototype = new $.wiki.SidebarPerspective(); + $("#parents", self.$pane).empty(); + $("#bubbles").empty(); - PropertiesPerspective.prototype.edit = function(element) { - let self = this; + let $f = $("#properties-form", self.$pane); + $f.empty(); - let $node = $(element); - $("#parents", self.$pane).empty(); - $("#bubbles").empty(); + if (element === null) { + self.$edited = null; + $("h1", self.$pane).text(''); + return; + } - let b = $("
").text($node.attr('x-node')); - b.data('node', element); - $("#bubbles").append(b); + let $node = $(element); + let b = $("
").text($node.attr('x-node')); + b.data('node', element); + $("#bubbles").append(b); - $node.parents('[x-node]').each(function() { - let a = $("